feat(timepicker): update timepicker sample with properties panel

src/app/time-picker/time-picker.sample.html

@@ -2,10 +2,34 @@
     <article class="timepicker-column">
         <h4 class="sample-title">Time Picker with Date value binding</h4>
         <p class="sample-description">{{showDate(date)}}</p>
-        <div class="preview">
-            <igx-time-picker #tp [value]="date" [minValue]="min" [maxValue]="max" [spinLoop]="spinLoop"  locale="FR"
-                [itemsDelta]="itemsDelta" [inputFormat]="format" displayFormat="longDate" (valueChange)="valueChanged($event)"
-                (validationFailed)="validationFailed($event)">
+        <div class="preview" [igSize]="properties.size">
+            <igx-time-picker
+            #tp
+            [mode]="properties.mode"
+            [type]="properties.type"
+            [value]="properties.value"
+            [minValue]="min"
+            [maxValue]="max"
+            [spinLoop]="spinLoop"
+            locale="FR"
+            [itemsDelta]="itemsDelta"
+            [inputFormat]="properties.inputFormat"
+            [displayFormat]="properties.displayFormat"
+            [readOnly]="properties.readonly"
+            [disabled]="properties.disabled"
+            [placeholder]="properties.placeholder"
+            (valueChange)="valueChanged($event)"
+            (validationFailed)="validationFailed($event)"
+            >
+                @if (hasLabel) {
+                    <label igxLabel>It's a Label</label>
+                } @if (hasPrefix) {
+                <igx-icon igxPrefix>face</igx-icon>
+                } @if (hasSuffix) {
+                <igx-icon igxSuffix>face</igx-icon>
+                } @if (hasHint) {
+                    <span igxHint>It's a hint</span>
+                }
             </igx-time-picker>
         </div>
     </article>
@@ -77,4 +101,24 @@ <h4 class="sample-title">Time Picker with custom spin buttons</h4>
             </igx-time-picker>
         </div>
     </article>
+
+    <ng-template #customControls>
+        <div class="custom-controls">
+            <igx-switch id="addPrefix" [(ngModel)]="hasPrefix">
+                <label for="addPrefix">Add prefix</label>
+            </igx-switch>
+
+            <igx-switch id="addSuffix" [(ngModel)]="hasSuffix">
+                <label for="addSuffix">Add suffix</label>
+            </igx-switch>
+
+            <igx-switch id="addLabel" [(ngModel)]="hasLabel">
+                <label for="addLabel">Add Label</label>
+            </igx-switch>
+
+            <igx-switch id="addHint" [(ngModel)]="hasHint">
+                <label for="addHint">Add Hint</label>
+            </igx-switch>
+        </div>
+    </ng-template>
 </div>

src/app/time-picker/time-picker.sample.scss

@@ -14,3 +14,15 @@
     justify-content: center;
     padding: 8px;
 }
+
+.custom-controls {
+   igx-switch {
+        display: flex;
+        align-items: center;
+        margin-bottom: 16px;
+
+        label {
+            margin: 0;
+        }
+   }
+}

src/app/time-picker/time-picker.sample.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, DestroyRef, inject, TemplateRef, ViewChild, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import {
     IgxTimePickerComponent,
@@ -13,22 +13,53 @@ import {
     IgxPrefixDirective,
     IgxIconComponent,
     IgxPickerClearComponent,
-    IgxSuffixDirective
+    IgxSuffixDirective,
+    IgxLabelDirective,
+    IgSizeDirective,
+    PickerInteractionMode,
+    IgxSwitchComponent
 } from 'igniteui-angular';
+import {
+    PropertyPanelConfig,
+    PropertyChangeService,
+    Properties,
+} from '../properties-panel/property-change.service';
 
 @Component({
     selector: 'app-time-picker-sample',
     styleUrls: ['time-picker.sample.scss'],
     templateUrl: 'time-picker.sample.html',
-    imports: [IgxTimePickerComponent, FormsModule, IgxHintDirective, IgxButtonDirective, IgxPickerActionsDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxPickerClearComponent, IgxSuffixDirective]
+    imports: [
+        IgxTimePickerComponent,
+        FormsModule,
+        IgxHintDirective,
+        IgxButtonDirective,
+        IgxPickerActionsDirective,
+        IgxPickerToggleComponent,
+        IgxPrefixDirective,
+        IgxIconComponent,
+        IgxPickerClearComponent,
+        IgxSuffixDirective,
+        IgxLabelDirective,
+        IgSizeDirective,
+        IgxSwitchComponent
+    ]
 })
-export class TimePickerSampleComponent {
+export class TimePickerSampleComponent implements OnInit {
     @ViewChild('tp', { read: IgxTimePickerComponent, static: true })
     public tp: IgxTimePickerComponent;
 
     @ViewChild('target')
     public target: IgxInputDirective;
 
+    @ViewChild('customControls', { static: true })
+    public customControlsTemplate!: TemplateRef<any>;
+
+    public hasSuffix = false;
+    public hasPrefix = false;
+    public hasLabel = false;
+    public hasHint = false;
+
     public itemsDelta = { hours: 1, minutes: 15, seconds: 20 };
     public format = 'hh:mm:ss:SS a';
     public spinLoop = true;
@@ -49,6 +80,91 @@ export class TimePickerSampleComponent {
         positionStrategy: new AutoPositionStrategy()
     };
 
+    public panelConfig: PropertyPanelConfig = {
+        size: {
+            control: {
+                type: 'button-group',
+                options: ['small', 'medium', 'large'],
+                defaultValue: 'medium',
+            }
+        },
+        mode: {
+            control: {
+                type: 'button-group',
+                options: [
+                    { label: 'dialog', value: PickerInteractionMode.Dialog},
+                    { label: 'dropdown', value: PickerInteractionMode.DropDown}
+                ],
+                defaultValue: 'dropdown'
+            }
+        },
+        type: {
+            control: {
+                type: 'button-group',
+                options: ['box', 'border', 'line'],
+                defaultValue: 'box'
+            }
+        },
+        readonly: {
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
+        },
+        disabled: {
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
+        },
+        value: {
+            control: {
+                type: 'time'
+            }
+        },
+        placeholder: {
+            control: {
+                type: 'text',
+                defaultValue: 'hh:mm'
+            }
+        },
+        displayFormat: {
+            label: 'Display Format',
+            control: {
+                type: 'text'
+            }
+        },
+        inputFormat: {
+            label: 'Input Format',
+            control: {
+                type: 'text'
+            }
+        }
+    }
+
+    public properties: Properties;
+    private propertyChangeService = inject(PropertyChangeService);
+    private destroyRef = inject(DestroyRef);
+
+    constructor() {
+        this.propertyChangeService.setPanelConfig(this.panelConfig);
+
+        const propertyChange =
+            this.propertyChangeService.propertyChanges.subscribe(
+                (properties) => {
+                    this.properties = properties;
+                }
+            );
+
+        this.destroyRef.onDestroy(() => propertyChange.unsubscribe());
+    }
+
+    public ngOnInit() {
+        this.propertyChangeService.setCustomControls(
+            this.customControlsTemplate
+        );
+    }
+
     public change() {
         this.isRequired = !this.isRequired;
     }