From c26b64212acc56ef9821279e32d25d472e4753b2 Mon Sep 17 00:00:00 2001
From: Laszlo Ilonka <laszlo.ilonka@icellmobilsoft.hu>
Date: Tue, 7 Jul 2026 10:24:04 +0200
Subject: [PATCH] feat: add select, overlay-panel and date-picker component to
 sidesheet demo page

IDS-2271
---
 .../side-sheet/side-sheet-demo.component.html | 139 +++++++++++++++---
 .../side-sheet/side-sheet-demo.component.ts   |  31 +++-
 .../side-sheet/side-sheet-demo.service.ts     |  19 +++
 projects/demo/src/assets/i18n/en.json         |  37 +++++
 projects/demo/src/assets/i18n/hu.json         |  37 +++++
 5 files changed, 241 insertions(+), 22 deletions(-)

diff --git a/projects/demo/src/app/pages/side-sheet/side-sheet-demo.component.html b/projects/demo/src/app/pages/side-sheet/side-sheet-demo.component.html
index 2395399a..b69d6882 100644
--- a/projects/demo/src/app/pages/side-sheet/side-sheet-demo.component.html
+++ b/projects/demo/src/app/pages/side-sheet/side-sheet-demo.component.html
@@ -21,50 +21,149 @@
       >
         <div slot="customHeader">
           <header>
-            <h2 id="side-sheet-title">Customer</h2>
+            <h2 id="side-sheet-title">{{ 'SIDE_SHEET.CUSTOMER' | translate }}</h2>
           </header>
         </div>
         @if (_sideSheetService.model.isShowFooter) {
           <div slot="footer">
-            <button type="button" class="demo-save-btn" idsButton size="comfortable" variant="success">
-              <span>Save</span>
+            <button type="button" class="demo-save-btn" idsButton size="comfortable">
+              <span>{{ 'SIDE_SHEET.SAVE' | translate }}</span>
             </button>
           </div>
         }
-        <div>
+        <div class="p-2">
           <ids-form-field>
-            <ids-label>First name</ids-label>
-            <input idsInput placeholder="E.g. Steve" required [(ngModel)]="_sideSheetService.firstName" />
+            <ids-label>{{ 'SIDE_SHEET.LABEL.FIRST_NAME' | translate }}</ids-label>
+            <input
+              idsInput
+              required
+              [placeholder]="'SIDE_SHEET.PLACEHOLDER.FIRST_NAME' | translate"
+              [(ngModel)]="_sideSheetService.firstName"
+            />
           </ids-form-field>
 
           <ids-form-field>
-            <ids-label>Last name</ids-label>
-            <input idsInput placeholder="E.g. Johnson" required [(ngModel)]="_sideSheetService.lastName" />
+            <ids-label>{{ 'SIDE_SHEET.LABEL.LAST_NAME' | translate }}</ids-label>
+            <input
+              idsInput
+              required
+              [placeholder]="'SIDE_SHEET.PLACEHOLDER.LAST_NAME' | translate"
+              [(ngModel)]="_sideSheetService.lastName"
+            />
           </ids-form-field>
 
           <ids-form-field>
-            <ids-label>Email address</ids-label>
-            <input idsInput type="email" placeholder="E.g. steve@example.com" required [(ngModel)]="_sideSheetService.email" />
+            <ids-label>{{ 'SIDE_SHEET.LABEL.EMAIL' | translate }}</ids-label>
+            <input
+              idsInput
+              type="email"
+              required
+              [placeholder]="'SIDE_SHEET.PLACEHOLDER.EMAIL' | translate"
+              [(ngModel)]="_sideSheetService.email"
+            />
           </ids-form-field>
 
           <ids-form-field>
-            <ids-label>Phone number</ids-label>
-            <input idsInput type="tel" placeholder="E.g. +1 234 567 8901" [(ngModel)]="_sideSheetService.phoneNumber" />
+            <ids-label>{{ 'SIDE_SHEET.LABEL.PHONE' | translate }}</ids-label>
+            <input
+              idsInput
+              type="tel"
+              [placeholder]="'SIDE_SHEET.PLACEHOLDER.PHONE' | translate"
+              [(ngModel)]="_sideSheetService.phoneNumber"
+            />
           </ids-form-field>
 
           <ids-form-field>
-            <ids-label>Shipping address</ids-label>
-            <input idsInput placeholder="E.g. 123 Main St" required [(ngModel)]="_sideSheetService.shippingAddress" />
+            <ids-label>{{ 'SIDE_SHEET.LABEL.SHIPPING_ADDRESS' | translate }}</ids-label>
+            <input
+              idsInput
+              required
+              [placeholder]="'SIDE_SHEET.PLACEHOLDER.SHIPPING_ADDRESS' | translate"
+              [(ngModel)]="_sideSheetService.shippingAddress"
+            />
+            <button
+              #addressActionsOrigin="cdkOverlayOrigin"
+              type="button"
+              cdkOverlayOrigin
+              idsSuffix
+              idsButton
+              appearance="text"
+              size="compact"
+              variant="primary"
+              [attr.aria-label]="'SIDE_SHEET.ADDRESS_SUGGESTIONS' | translate"
+              (click)="addressOverlayPanel.toggle()"
+            >
+              <ids-icon aria-hidden="true" alt="" fontIcon="more-vert" />
+            </button>
+            <ids-overlay-panel #addressOverlayPanel [origin]="addressActionsOrigin">
+              <div cdkMenu>
+                <div idsActiveIndicator [active]="false">
+                  <button
+                    type="button"
+                    idsMenuItem
+                    [label]="'SIDE_SHEET.USE_OFFICE_ADDRESS' | translate"
+                    (click)="_applyAddressSuggestion('Bécsi út 271.', 'Budapest', '1037')"
+                  >
+                    <ids-icon icon-leading aria-hidden="true" alt="" fontIcon="office" />
+                  </button>
+                </div>
+                <div idsActiveIndicator [active]="false">
+                  <button
+                    type="button"
+                    idsMenuItem
+                    [label]="'SIDE_SHEET.USE_HOME_ADDRESS' | translate"
+                    (click)="_applyAddressSuggestion('Szent István tér 1.', 'Esztergom', '2500')"
+                  >
+                    <ids-icon icon-leading aria-hidden="true" alt="" fontIcon="home" />
+                  </button>
+                </div>
+              </div>
+            </ids-overlay-panel>
+          </ids-form-field>
+
+          <ids-form-field>
+            <ids-label>{{ 'SIDE_SHEET.LABEL.CITY' | translate }}</ids-label>
+            <input
+              idsInput
+              required
+              [placeholder]="'SIDE_SHEET.PLACEHOLDER.CITY' | translate"
+              [(ngModel)]="_sideSheetService.city"
+            />
+          </ids-form-field>
+
+          <ids-form-field>
+            <ids-label>{{ 'SIDE_SHEET.LABEL.POSTAL_CODE' | translate }}</ids-label>
+            <input
+              idsInput
+              required
+              [placeholder]="'SIDE_SHEET.PLACEHOLDER.POSTAL_CODE' | translate"
+              [(ngModel)]="_sideSheetService.postalCode"
+            />
           </ids-form-field>
 
           <ids-form-field>
-            <ids-label>City</ids-label>
-            <input idsInput placeholder="E.g. New York" required [(ngModel)]="_sideSheetService.city" />
+            <ids-label>{{ 'SIDE_SHEET.LABEL.COUNTRY' | translate }}</ids-label>
+            <ids-select
+              required
+              [placeholder]="'SIDE_SHEET.SELECT_COUNTRY' | translate"
+              [(ngModel)]="_sideSheetService.country"
+            >
+              @for (country of _sideSheetService.countries; track country.value) {
+                <ids-option [value]="country.value">{{ country.viewValue | translate }}</ids-option>
+              }
+            </ids-select>
           </ids-form-field>
 
           <ids-form-field>
-            <ids-label>Postal code</ids-label>
-            <input idsInput placeholder="E.g. 10001" required [(ngModel)]="_sideSheetService.postalCode" />
+            <ids-label>{{ 'SIDE_SHEET.LABEL.DELIVERY_DATE' | translate }}</ids-label>
+            <input
+              #deliveryDatepicker="idsDatepicker"
+              idsInput
+              idsDatepicker
+              [placeholder]="'SIDE_SHEET.PLACEHOLDER.DELIVERY_DATE' | translate"
+              [(ngModel)]="_sideSheetService.deliveryDate"
+            />
+            <ids-datepicker-trigger idsSuffix [for]="deliveryDatepicker" />
           </ids-form-field>
         </div>
       </ids-side-sheet>
@@ -74,9 +173,9 @@ <h2 id="side-sheet-title">Customer</h2>
       <ng-container *ngTemplateOutlet="sideSheet" />
     }
 
-    <app-tryout [title]="'COMPONENTS.SIDE-SHEET' | translate" (resetted)="_sideSheetService.reset()">
+    <app-tryout [title]="'COMPONENTS.SIDE_SHEET' | translate" (resetted)="_sideSheetService.reset()">
       <div component>
-        <button type="button" idsButton (click)="_sideSheetService.show = true">open side sheet</button>
+        <button type="button" idsButton (click)="_sideSheetService.show = true">{{ 'SIDE_SHEET.OPEN' | translate }}</button>
       </div>
     </app-tryout>
 
diff --git a/projects/demo/src/app/pages/side-sheet/side-sheet-demo.component.ts b/projects/demo/src/app/pages/side-sheet/side-sheet-demo.component.ts
index bba154c6..f63dcd10 100644
--- a/projects/demo/src/app/pages/side-sheet/side-sheet-demo.component.ts
+++ b/projects/demo/src/app/pages/side-sheet/side-sheet-demo.component.ts
@@ -5,19 +5,29 @@ import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-a
 import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component';
 import { TryoutComponent } from '../../components/tryout/tryout.component';
 
+import { CdkMenu } from '@angular/cdk/menu';
+import { OverlayModule } from '@angular/cdk/overlay';
 import { NgTemplateOutlet } from '@angular/common';
 import { Component, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { IdsButtonComponent } from '@i-cell/ids-angular/button';
+import { IdsDatepickerDirective, IdsDatepickerTriggerComponent } from '@i-cell/ids-angular/datepicker';
 import {
   IdsFormFieldComponent,
-  IdsInputDirective, IdsLabelDirective,
+  IdsInputDirective,
+  IdsLabelDirective,
+  IdsOptionComponent,
+  IdsSuffixDirective,
 } from '@i-cell/ids-angular/forms';
+import { IdsIconComponent } from '@i-cell/ids-angular/icon';
+import { IdsActiveIndicatorDirective, IdsMenuItemComponent } from '@i-cell/ids-angular/menu';
+import { IdsOverlayPanelComponent } from '@i-cell/ids-angular/overlay-panel';
+import { IdsSelectComponent } from '@i-cell/ids-angular/select';
 import { IdsSideSheetComponent } from '@i-cell/ids-angular/side-sheet/side-sheet.component';
 import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
-  selector: 'app-segmented-control-demo',
+  selector: 'app-side-sheet-demo',
   imports: [
     TryoutComponent,
     IdsSideSheetComponent,
@@ -28,6 +38,17 @@ import { TranslatePipe } from '@ngx-translate/core';
     IdsFormFieldComponent,
     IdsInputDirective,
     IdsLabelDirective,
+    IdsSelectComponent,
+    IdsOptionComponent,
+    IdsDatepickerDirective,
+    IdsDatepickerTriggerComponent,
+    IdsSuffixDirective,
+    IdsOverlayPanelComponent,
+    IdsMenuItemComponent,
+    IdsActiveIndicatorDirective,
+    IdsIconComponent,
+    OverlayModule,
+    CdkMenu,
     DemoAndCodeComponent,
     TryoutControlComponent,
     ControlTableComponent,
@@ -37,4 +58,10 @@ import { TranslatePipe } from '@ngx-translate/core';
 })
 export class SideSheetDemoComponent {
   protected _sideSheetService = inject(SideSheetDemoService);
+
+  protected _applyAddressSuggestion(address: string, city: string, postalCode: string): void {
+    this._sideSheetService.shippingAddress = address;
+    this._sideSheetService.city = city;
+    this._sideSheetService.postalCode = postalCode;
+  }
 }
diff --git a/projects/demo/src/app/pages/side-sheet/side-sheet-demo.service.ts b/projects/demo/src/app/pages/side-sheet/side-sheet-demo.service.ts
index b11d2c79..bc57b248 100644
--- a/projects/demo/src/app/pages/side-sheet/side-sheet-demo.service.ts
+++ b/projects/demo/src/app/pages/side-sheet/side-sheet-demo.service.ts
@@ -129,6 +129,15 @@ export class SideSheetDemoService {
 
   public reset(): void {
     this.model = { ...this.defaults };
+    this.firstName = '';
+    this.lastName = '';
+    this.email = '';
+    this.phoneNumber = '';
+    this.shippingAddress = '';
+    this.city = '';
+    this.postalCode = '';
+    this.country = null;
+    this.deliveryDate = null;
   }
 
   public onBackButtonClick(): void {
@@ -144,6 +153,16 @@ export class SideSheetDemoService {
   public shippingAddress = '';
   public city = '';
   public postalCode = '';
+  public country: string | null = null;
+  public deliveryDate: Date | null = null;
+
+  public readonly countries = [
+    { value: 'hu', viewValue: 'SIDE_SHEET.COUNTRY.HU' },
+    { value: 'uk', viewValue: 'SIDE_SHEET.COUNTRY.UK' },
+    { value: 'de', viewValue: 'SIDE_SHEET.COUNTRY.DE' },
+    { value: 'fr', viewValue: 'SIDE_SHEET.COUNTRY.FR' },
+    { value: 'us', viewValue: 'SIDE_SHEET.COUNTRY.US' },
+  ];
 
   public getApiConfig(): DemoControlConfig<unknown>[] {
     return [this.inputControlConfig];
diff --git a/projects/demo/src/assets/i18n/en.json b/projects/demo/src/assets/i18n/en.json
index a41452db..4b421843 100644
--- a/projects/demo/src/assets/i18n/en.json
+++ b/projects/demo/src/assets/i18n/en.json
@@ -90,6 +90,43 @@
       "SHARK": "Shark"
     }
   },
+  "SIDE_SHEET": {
+    "CUSTOMER": "Customer",
+    "SAVE": "Save",
+    "OPEN": "Open side sheet",
+    "ADDRESS_SUGGESTIONS": "Address suggestions",
+    "USE_OFFICE_ADDRESS": "Use office address",
+    "USE_HOME_ADDRESS": "Use home address",
+    "SELECT_COUNTRY": "Select country",
+    "LABEL": {
+      "FIRST_NAME": "First name",
+      "LAST_NAME": "Last name",
+      "EMAIL": "Email address",
+      "PHONE": "Phone number",
+      "SHIPPING_ADDRESS": "Shipping address",
+      "CITY": "City",
+      "POSTAL_CODE": "Postal code",
+      "COUNTRY": "Country",
+      "DELIVERY_DATE": "Delivery date"
+    },
+    "PLACEHOLDER": {
+      "FIRST_NAME": "E.g. Steve",
+      "LAST_NAME": "E.g. Johnson",
+      "EMAIL": "E.g. steve@example.com",
+      "PHONE": "E.g. +1 234 567 8901",
+      "SHIPPING_ADDRESS": "E.g. 123 Main St",
+      "CITY": "E.g. New York",
+      "POSTAL_CODE": "E.g. 10001",
+      "DELIVERY_DATE": "E.g. 06/15/2026"
+    },
+    "COUNTRY": {
+      "HU": "Hungary",
+      "UK": "United Kingdom",
+      "DE": "Germany",
+      "FR": "France",
+      "US": "United States"
+    }
+  },
   "TABLE": {
     "COL": {
       "NAME": "Name",
diff --git a/projects/demo/src/assets/i18n/hu.json b/projects/demo/src/assets/i18n/hu.json
index 96673326..4c81bf6c 100644
--- a/projects/demo/src/assets/i18n/hu.json
+++ b/projects/demo/src/assets/i18n/hu.json
@@ -90,6 +90,43 @@
       "SHARK": "Cápa"
     }
   },
+  "SIDE_SHEET": {
+    "CUSTOMER": "Ügyfél",
+    "SAVE": "Mentés",
+    "OPEN": "Side sheet megnyitása",
+    "ADDRESS_SUGGESTIONS": "Címjavaslatok",
+    "USE_OFFICE_ADDRESS": "Irodai cím használata",
+    "USE_HOME_ADDRESS": "Saját cím használata",
+    "SELECT_COUNTRY": "Válasszon országot",
+    "LABEL": {
+      "FIRST_NAME": "Keresztnév",
+      "LAST_NAME": "Vezetéknév",
+      "EMAIL": "E-mail cím",
+      "PHONE": "Telefonszám",
+      "SHIPPING_ADDRESS": "Szállítási cím",
+      "CITY": "Város",
+      "POSTAL_CODE": "Irányítószám",
+      "COUNTRY": "Ország",
+      "DELIVERY_DATE": "Szállítási dátum"
+    },
+    "PLACEHOLDER": {
+      "FIRST_NAME": "Pl. István",
+      "LAST_NAME": "Pl. Kovács",
+      "EMAIL": "Pl. istvan@pelda.hu",
+      "PHONE": "Pl. +36 30 123 4567",
+      "SHIPPING_ADDRESS": "Pl. Bécsi út 271.",
+      "CITY": "Pl. Budapest",
+      "POSTAL_CODE": "Pl. 1037",
+      "DELIVERY_DATE": "Pl. 2026.06.15."
+    },
+    "COUNTRY": {
+      "HU": "Magyarország",
+      "UK": "Egyesült Királyság",
+      "DE": "Németország",
+      "FR": "Franciaország",
+      "US": "Egyesült Államok"
+    }
+  },
   "TABLE": {
     "COL": {
       "NAME": "Megnevezés",