i-tech-shared-components 1.4.64 → 1.4.65-alpha.1771957526834

package/fesm2022/i-tech-shared-components.mjs

@@ -8,7 +8,7 @@ import moment from 'moment';
 import * as momentTimezone from 'moment-timezone';
 import { MatIconButton, MatFabButton, MatButton, MatButtonModule } from '@angular/material/button';
 import * as i2$1 from '@angular/common';
-import { NgClass, NgIf, NgOptimizedImage, NgFor, NgForOf, UpperCasePipe, SlicePipe, LowerCasePipe, CommonModule } from '@angular/common';
+import { NgClass, NgIf, NgOptimizedImage, NgFor, NgForOf, UpperCasePipe, SlicePipe, LowerCasePipe, CommonModule, DecimalPipe } from '@angular/common';
 import * as i1$2 from '@angular/material/tooltip';
 import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
 import * as i1$1 from '@angular/material/icon';
@@ -2912,6 +2912,422 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Output
             }] } });
 
+class TimeInputComponent {
+    set submit(value) {
+        if (value && this.ngControl?.control) {
+            this.ngControl.control.markAsTouched();
+        }
+        this._submit = value;
+    }
+    get submit() { return this._submit; }
+    get hourOptions() {
+        if (this.mode === '12h') {
+            return Array.from({ length: 12 }, (_, i) => i + 1);
+        }
+        return Array.from({ length: 24 }, (_, i) => i);
+    }
+    get minuteOptions() {
+        return Array.from({ length: 60 }, (_, i) => i);
+    }
+    get selectedHourValue() {
+        if (this.hours === '--')
+            return null;
+        return parseInt(this.hours, 10);
+    }
+    get selectedMinuteValue() {
+        if (this.minutes === '--')
+            return null;
+        return parseInt(this.minutes, 10);
+    }
+    get hasValue() {
+        return this.hours !== '--' && this.minutes !== '--';
+    }
+    get isDisabled() {
+        return this.readOnly || (this.ngControl?.control?.disabled ?? false);
+    }
+    constructor(inputService) {
+        this.inputService = inputService;
+        this.required = false;
+        this.mode = '12h';
+        this.readOnly = false;
+        this.selectionChanges = new EventEmitter();
+        this.hours = '--';
+        this.minutes = '--';
+        this.amPm = 'AM';
+        this.activeSegment = null;
+        this.isPickerOpen = false;
+        this._submit = false;
+        this.hourBuffer = '';
+        this.minuteBuffer = '';
+        this.customErrorStateMatcher = {
+            isErrorState: (control) => {
+                return !!(control && control.invalid && this._submit);
+            }
+        };
+        this.ngControl = this.inputService.injectNgControl();
+    }
+    ngOnInit() {
+        const initialValue = this.ngControl.control?.value;
+        if (initialValue) {
+            this.parseControlValue(initialValue);
+        }
+        this.valueChangesSub = this.ngControl.control?.valueChanges.subscribe(v => {
+            this.parseControlValue(v);
+        });
+    }
+    ngOnDestroy() {
+        this.valueChangesSub?.unsubscribe();
+    }
+    parseControlValue(v) {
+        if (!v) {
+            this.hours = '--';
+            this.minutes = '--';
+            this.amPm = 'AM';
+            return;
+        }
+        const parts = v.split(':');
+        if (parts.length < 2)
+            return;
+        const h24 = parseInt(parts[0], 10);
+        const m = parseInt(parts[1], 10);
+        if (isNaN(h24) || isNaN(m))
+            return;
+        this.minutes = String(m).padStart(2, '0');
+        if (this.mode === '12h') {
+            if (h24 === 0) {
+                this.hours = '12';
+                this.amPm = 'AM';
+            }
+            else if (h24 < 12) {
+                this.hours = String(h24).padStart(2, '0');
+                this.amPm = 'AM';
+            }
+            else if (h24 === 12) {
+                this.hours = '12';
+                this.amPm = 'PM';
+            }
+            else {
+                this.hours = String(h24 - 12).padStart(2, '0');
+                this.amPm = 'PM';
+            }
+        }
+        else {
+            this.hours = String(h24).padStart(2, '0');
+        }
+    }
+    emitControlValue() {
+        if (!this.hasValue)
+            return;
+        const h24 = this.toHours24();
+        if (h24 === null)
+            return;
+        const timeStr = `${String(h24).padStart(2, '0')}:${this.minutes}`;
+        this.ngControl.control.setValue(timeStr, { emitEvent: false });
+        this.ngControl.control.markAsDirty();
+        this.selectionChanges.emit(timeStr);
+    }
+    toHours24() {
+        if (this.hours === '--')
+            return null;
+        const h = parseInt(this.hours, 10);
+        if (this.mode === '24h')
+            return h;
+        if (this.amPm === 'AM') {
+            return h === 12 ? 0 : h;
+        }
+        else {
+            return h === 12 ? 12 : h + 12;
+        }
+    }
+    activateSegment(segment, event) {
+        if (this.isDisabled)
+            return;
+        event.stopPropagation();
+        this.activeSegment = segment;
+        setTimeout(() => this.timeFieldEl?.nativeElement.focus());
+    }
+    deactivate() {
+        this.activeSegment = null;
+        this.hourBuffer = '';
+        this.minuteBuffer = '';
+    }
+    onKeyDown(event) {
+        if (this.activeSegment === null)
+            return;
+        if (this.activeSegment === 'hours')
+            this.onHoursKey(event);
+        else if (this.activeSegment === 'minutes')
+            this.onMinutesKey(event);
+        else if (this.activeSegment === 'ampm')
+            this.onAmPmKey(event);
+    }
+    onHoursKey(event) {
+        const key = event.key;
+        if (key === 'Tab') {
+            this.activeSegment = 'minutes';
+            this.hourBuffer = '';
+            return;
+        }
+        if (key === 'ArrowRight') {
+            event.preventDefault();
+            this.activeSegment = 'minutes';
+            this.hourBuffer = '';
+            return;
+        }
+        if (key === 'ArrowUp' || key === 'ArrowDown') {
+            event.preventDefault();
+            this.adjustHours(key === 'ArrowUp' ? 1 : -1);
+            return;
+        }
+        if (!/^\d$/.test(key))
+            return;
+        event.preventDefault();
+        const digit = parseInt(key, 10);
+        this.hourBuffer += key;
+        if (this.mode === '12h') {
+            if (this.hourBuffer.length === 1 && digit >= 2 && digit <= 9) {
+                this.hours = '0' + key;
+                this.hourBuffer = '';
+                this.activeSegment = 'minutes';
+            }
+            else if (this.hourBuffer.length === 2) {
+                const num = parseInt(this.hourBuffer, 10);
+                if (num >= 1 && num <= 12) {
+                    this.hours = this.hourBuffer;
+                }
+                else {
+                    this.hours = '0' + this.hourBuffer[1];
+                }
+                this.hourBuffer = '';
+                this.activeSegment = 'minutes';
+            }
+            else {
+                this.hours = '0' + key;
+            }
+        }
+        else {
+            if (this.hourBuffer.length === 1 && digit >= 3) {
+                this.hours = '0' + key;
+                this.hourBuffer = '';
+                this.activeSegment = 'minutes';
+            }
+            else if (this.hourBuffer.length === 2) {
+                const num = parseInt(this.hourBuffer, 10);
+                if (num >= 0 && num <= 23) {
+                    this.hours = this.hourBuffer;
+                }
+                else {
+                    this.hours = '0' + this.hourBuffer[1];
+                }
+                this.hourBuffer = '';
+                this.activeSegment = 'minutes';
+            }
+            else {
+                this.hours = '0' + key;
+            }
+        }
+        this.emitControlValue();
+    }
+    adjustHours(delta) {
+        if (this.mode === '12h') {
+            const current = this.hours === '--' ? 12 : parseInt(this.hours, 10);
+            let next = current + delta;
+            if (next > 12)
+                next = 1;
+            if (next < 1)
+                next = 12;
+            this.hours = String(next).padStart(2, '0');
+        }
+        else {
+            const current = this.hours === '--' ? 0 : parseInt(this.hours, 10);
+            let next = current + delta;
+            if (next > 23)
+                next = 0;
+            if (next < 0)
+                next = 23;
+            this.hours = String(next).padStart(2, '0');
+        }
+        if (this.minutes === '--')
+            this.minutes = '00';
+        this.emitControlValue();
+    }
+    onMinutesKey(event) {
+        const key = event.key;
+        if (key === 'Tab') {
+            if (this.mode === '12h')
+                this.activeSegment = 'ampm';
+            else
+                this.deactivate();
+            this.minuteBuffer = '';
+            return;
+        }
+        if (key === 'ArrowLeft') {
+            event.preventDefault();
+            this.activeSegment = 'hours';
+            this.minuteBuffer = '';
+            return;
+        }
+        if (key === 'ArrowRight' && this.mode === '12h') {
+            event.preventDefault();
+            this.activeSegment = 'ampm';
+            this.minuteBuffer = '';
+            return;
+        }
+        if (key === 'ArrowUp' || key === 'ArrowDown') {
+            event.preventDefault();
+            this.adjustMinutes(key === 'ArrowUp' ? 1 : -1);
+            return;
+        }
+        if (!/^\d$/.test(key))
+            return;
+        event.preventDefault();
+        const digit = parseInt(key, 10);
+        this.minuteBuffer += key;
+        if (this.minuteBuffer.length === 1 && digit >= 6) {
+            this.minutes = '0' + key;
+            this.minuteBuffer = '';
+            if (this.mode === '12h')
+                this.activeSegment = 'ampm';
+            else
+                this.deactivate();
+        }
+        else if (this.minuteBuffer.length === 2) {
+            const num = parseInt(this.minuteBuffer, 10);
+            if (num >= 0 && num <= 59) {
+                this.minutes = this.minuteBuffer;
+            }
+            else {
+                this.minutes = '0' + this.minuteBuffer[1];
+            }
+            this.minuteBuffer = '';
+            if (this.mode === '12h')
+                this.activeSegment = 'ampm';
+            else
+                this.deactivate();
+        }
+        else {
+            this.minutes = '0' + key;
+        }
+        this.emitControlValue();
+    }
+    adjustMinutes(delta) {
+        const current = this.minutes === '--' ? 0 : parseInt(this.minutes, 10);
+        let next = current + delta;
+        if (next > 59)
+            next = 0;
+        if (next < 0)
+            next = 59;
+        this.minutes = String(next).padStart(2, '0');
+        if (this.hours === '--') {
+            this.hours = this.mode === '12h' ? '12' : '00';
+        }
+        this.emitControlValue();
+    }
+    onAmPmKey(event) {
+        const key = event.key.toLowerCase();
+        if (key === 'arrowleft') {
+            event.preventDefault();
+            this.activeSegment = 'minutes';
+            return;
+        }
+        if (key === 'a') {
+            this.amPm = 'AM';
+            this.emitControlValue();
+        }
+        else if (key === 'p') {
+            this.amPm = 'PM';
+            this.emitControlValue();
+        }
+        else if (key === 'arrowup' || key === 'arrowdown') {
+            event.preventDefault();
+            this.amPm = this.amPm === 'AM' ? 'PM' : 'AM';
+            this.emitControlValue();
+        }
+    }
+    togglePicker(event) {
+        if (this.isDisabled)
+            return;
+        event.stopPropagation();
+        this.isPickerOpen = !this.isPickerOpen;
+        if (this.isPickerOpen) {
+            setTimeout(() => this.scrollPickerToSelected());
+        }
+    }
+    scrollPickerToSelected() {
+        if (this.hourColEl?.nativeElement) {
+            const selected = this.hourColEl.nativeElement.querySelector('.selected');
+            if (selected) {
+                selected.scrollIntoView({ block: 'center', behavior: 'instant' });
+            }
+        }
+        if (this.minuteColEl?.nativeElement) {
+            const selected = this.minuteColEl.nativeElement.querySelector('.selected');
+            if (selected) {
+                selected.scrollIntoView({ block: 'center', behavior: 'instant' });
+            }
+        }
+    }
+    selectHour(h) {
+        this.hours = String(h).padStart(2, '0');
+        if (this.minutes === '--')
+            this.minutes = '00';
+        this.emitControlValue();
+    }
+    selectMinute(m) {
+        this.minutes = String(m).padStart(2, '0');
+        if (this.hours === '--') {
+            this.hours = this.mode === '12h' ? '12' : '00';
+        }
+        this.emitControlValue();
+    }
+    selectAmPm(v) {
+        this.amPm = v;
+        this.emitControlValue();
+    }
+    onDocumentClick() {
+        if (this.isPickerOpen) {
+            this.isPickerOpen = false;
+        }
+        if (this.activeSegment !== null) {
+            this.deactivate();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TimeInputComponent, deps: [{ token: InputService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TimeInputComponent, isStandalone: true, selector: "i-tech-time-input", inputs: { submit: "submit", label: "label", required: "required", mode: "mode", readOnly: "readOnly" }, outputs: { selectionChanges: "selectionChanges" }, host: { listeners: { "document:click": "onDocumentClick()" } }, viewQueries: [{ propertyName: "timeFieldEl", first: true, predicate: ["timeField"], descendants: true }, { propertyName: "hourColEl", first: true, predicate: ["hourCol"], descendants: true }, { propertyName: "minuteColEl", first: true, predicate: ["minuteCol"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"ngControl\" class=\"time-input\">\n\n  <!-- Label row -->\n  <div *ngIf=\"label\" class=\"time-input__label-row\">\n    <span class=\"time-input__label\">{{ label | translate }}</span>\n    <span *ngIf=\"required\" class=\"time-input__required\">*</span>\n  </div>\n\n  <!-- Field row -->\n  <div class=\"time-field\"\n       #timeField\n       tabindex=\"0\"\n       [class.has-value]=\"hasValue\"\n       [class.focused]=\"activeSegment !== null\"\n       [class.disabled]=\"isDisabled\"\n       [class.open]=\"isPickerOpen\"\n       (keydown)=\"onKeyDown($event)\"\n  >\n    <span class=\"segment\"\n          [class.active]=\"activeSegment === 'hours'\"\n          (click)=\"activateSegment('hours', $event)\"\n    >{{ hours }}</span>\n\n    <span class=\"sep\">:</span>\n\n    <span class=\"segment\"\n          [class.active]=\"activeSegment === 'minutes'\"\n          (click)=\"activateSegment('minutes', $event)\"\n    >{{ minutes }}</span>\n\n    <span *ngIf=\"mode === '12h'\"\n          class=\"segment segment--ampm\"\n          [class.active]=\"activeSegment === 'ampm'\"\n          (click)=\"activateSegment('ampm', $event)\"\n    >&nbsp;{{ amPm }}</span>\n\n    <!-- Clock icon button -->\n    <button class=\"clock-btn\"\n            type=\"button\"\n            [disabled]=\"isDisabled\"\n            tabindex=\"-1\"\n            (click)=\"togglePicker($event)\"\n    >\n      <mat-icon>schedule</mat-icon>\n    </button>\n  </div>\n\n  <!-- Picker panel -->\n  <div *ngIf=\"isPickerOpen\" class=\"picker-panel\" (click)=\"$event.stopPropagation()\">\n    <div class=\"picker-columns\">\n\n      <!-- Hours column -->\n      <div class=\"picker-col\" #hourCol>\n        <div *ngFor=\"let h of hourOptions\"\n             class=\"picker-item\"\n             [class.selected]=\"h === selectedHourValue\"\n             (click)=\"selectHour(h)\"\n        >{{ h | number:'2.0-0' }}</div>\n      </div>\n\n      <div class=\"picker-divider\">:</div>\n\n      <!-- Minutes column -->\n      <div class=\"picker-col\" #minuteCol>\n        <div *ngFor=\"let m of minuteOptions\"\n             class=\"picker-item\"\n             [class.selected]=\"m === selectedMinuteValue\"\n             (click)=\"selectMinute(m)\"\n        >{{ m | number:'2.0-0' }}</div>\n      </div>\n    </div>\n\n    <!-- AM/PM row (12h mode only) -->\n    <div *ngIf=\"mode === '12h'\" class=\"picker-ampm\">\n      <button type=\"button\" [class.active]=\"amPm === 'AM'\" (click)=\"selectAmPm('AM')\">AM</button>\n      <button type=\"button\" [class.active]=\"amPm === 'PM'\" (click)=\"selectAmPm('PM')\">PM</button>\n    </div>\n  </div>\n\n  <!-- Error -->\n  <div *ngIf=\"!!(ngControl.control.errors && submit)\" class=\"error-text\">\n    {{ ngControl.control | generateErrorMessages : (label || '') }}\n  </div>\n</div>\n", styles: [".time-input{position:relative;display:inline-block}.time-input__label-row{display:flex;align-items:center;gap:2px;margin-bottom:4px}.time-input__label{font-size:14px;line-height:19px;color:var(--input-label-color, #647081);display:inline-block}.time-input__required{color:var(--error-border-color, #f44336);font-size:14px}.time-field{display:flex;align-items:center;border:1px solid #e0e0e0;border-radius:4px;height:34px;padding:3px 5px 3px 8px;cursor:pointer;box-sizing:border-box;outline:none;background:var(--white-color, #fff)}.time-field:hover:not(.disabled){border-color:#9fa6b1}.time-field.focused{border-color:#0060df;border-width:2px;padding:2px 4px 2px 7px}.time-field.disabled{background-color:var(--disabled-input-background, #f5f5f5);cursor:default;pointer-events:none}.segment{min-width:18px;text-align:center;border-radius:2px;padding:1px 2px;font-size:13px;font-family:Noto Sans,sans-serif;color:var(--neutral30, #424954);-webkit-user-select:none;user-select:none}.segment.active{background:#0060df;color:#fff;border-radius:2px}.segment--ampm{min-width:28px}.time-field:not(.has-value) .segment{color:var(--placeholder-color, #aaa)}.sep{font-size:13px;color:var(--neutral30, #424954);margin:0 1px;-webkit-user-select:none;user-select:none}.time-field:not(.has-value) .sep{color:var(--placeholder-color, #aaa)}.clock-btn{display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;padding:0;margin-left:auto;outline:none;color:var(--neutral50, #647081)}.clock-btn mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.clock-btn:disabled{opacity:.4;cursor:default}.picker-panel{position:absolute;z-index:1000;background:#fff;border-radius:8px;box-shadow:0 4px 16px #00000026;min-width:150px;top:calc(100% + 4px);left:0}.picker-columns{display:flex;align-items:flex-start;gap:4px;padding:8px 4px 8px 8px}.picker-divider{font-size:16px;color:var(--neutral30, #424954);padding-top:6px;align-self:flex-start;-webkit-user-select:none;user-select:none}.picker-col{height:160px;overflow-y:auto;width:50px;scrollbar-width:thin}.picker-col::-webkit-scrollbar{width:4px}.picker-col::-webkit-scrollbar-thumb{background:var(--neutral80, #d7d9de);border-radius:2px}.picker-item{padding:6px 8px;text-align:center;cursor:pointer;border-radius:4px;font-size:13px;font-family:Noto Sans,sans-serif;color:var(--neutral30, #424954)}.picker-item:hover{background:var(--secondary95, #f0f4ff)}.picker-item.selected{background:#0060df;color:#fff;font-weight:600}.picker-ampm{display:flex;justify-content:center;gap:8px;padding:8px;border-top:1px solid var(--neutral90, #e0e0e0)}.picker-ampm button{padding:4px 16px;border:1px solid var(--neutral80, #d7d9de);border-radius:4px;background:transparent;cursor:pointer;font-size:13px;font-family:Noto Sans,sans-serif;color:var(--neutral30, #424954)}.picker-ampm button:hover{background:var(--secondary95, #f0f4ff)}.picker-ampm button.active{background:#0060df;color:#fff;border-color:#0060df;font-weight:600}.error-text{font-size:10px;color:var(--error-border-color, #f44336);padding-top:2px;line-height:14px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: GenerateErrorMessagesPipe, name: "generateErrorMessages" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TimeInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'i-tech-time-input', standalone: true, imports: [
+                        NgIf, NgFor, NgClass, DecimalPipe,
+                        ReactiveFormsModule, TranslateModule,
+                        MatIcon, GenerateErrorMessagesPipe
+                    ], template: "<div *ngIf=\"ngControl\" class=\"time-input\">\n\n  <!-- Label row -->\n  <div *ngIf=\"label\" class=\"time-input__label-row\">\n    <span class=\"time-input__label\">{{ label | translate }}</span>\n    <span *ngIf=\"required\" class=\"time-input__required\">*</span>\n  </div>\n\n  <!-- Field row -->\n  <div class=\"time-field\"\n       #timeField\n       tabindex=\"0\"\n       [class.has-value]=\"hasValue\"\n       [class.focused]=\"activeSegment !== null\"\n       [class.disabled]=\"isDisabled\"\n       [class.open]=\"isPickerOpen\"\n       (keydown)=\"onKeyDown($event)\"\n  >\n    <span class=\"segment\"\n          [class.active]=\"activeSegment === 'hours'\"\n          (click)=\"activateSegment('hours', $event)\"\n    >{{ hours }}</span>\n\n    <span class=\"sep\">:</span>\n\n    <span class=\"segment\"\n          [class.active]=\"activeSegment === 'minutes'\"\n          (click)=\"activateSegment('minutes', $event)\"\n    >{{ minutes }}</span>\n\n    <span *ngIf=\"mode === '12h'\"\n          class=\"segment segment--ampm\"\n          [class.active]=\"activeSegment === 'ampm'\"\n          (click)=\"activateSegment('ampm', $event)\"\n    >&nbsp;{{ amPm }}</span>\n\n    <!-- Clock icon button -->\n    <button class=\"clock-btn\"\n            type=\"button\"\n            [disabled]=\"isDisabled\"\n            tabindex=\"-1\"\n            (click)=\"togglePicker($event)\"\n    >\n      <mat-icon>schedule</mat-icon>\n    </button>\n  </div>\n\n  <!-- Picker panel -->\n  <div *ngIf=\"isPickerOpen\" class=\"picker-panel\" (click)=\"$event.stopPropagation()\">\n    <div class=\"picker-columns\">\n\n      <!-- Hours column -->\n      <div class=\"picker-col\" #hourCol>\n        <div *ngFor=\"let h of hourOptions\"\n             class=\"picker-item\"\n             [class.selected]=\"h === selectedHourValue\"\n             (click)=\"selectHour(h)\"\n        >{{ h | number:'2.0-0' }}</div>\n      </div>\n\n      <div class=\"picker-divider\">:</div>\n\n      <!-- Minutes column -->\n      <div class=\"picker-col\" #minuteCol>\n        <div *ngFor=\"let m of minuteOptions\"\n             class=\"picker-item\"\n             [class.selected]=\"m === selectedMinuteValue\"\n             (click)=\"selectMinute(m)\"\n        >{{ m | number:'2.0-0' }}</div>\n      </div>\n    </div>\n\n    <!-- AM/PM row (12h mode only) -->\n    <div *ngIf=\"mode === '12h'\" class=\"picker-ampm\">\n      <button type=\"button\" [class.active]=\"amPm === 'AM'\" (click)=\"selectAmPm('AM')\">AM</button>\n      <button type=\"button\" [class.active]=\"amPm === 'PM'\" (click)=\"selectAmPm('PM')\">PM</button>\n    </div>\n  </div>\n\n  <!-- Error -->\n  <div *ngIf=\"!!(ngControl.control.errors && submit)\" class=\"error-text\">\n    {{ ngControl.control | generateErrorMessages : (label || '') }}\n  </div>\n</div>\n", styles: [".time-input{position:relative;display:inline-block}.time-input__label-row{display:flex;align-items:center;gap:2px;margin-bottom:4px}.time-input__label{font-size:14px;line-height:19px;color:var(--input-label-color, #647081);display:inline-block}.time-input__required{color:var(--error-border-color, #f44336);font-size:14px}.time-field{display:flex;align-items:center;border:1px solid #e0e0e0;border-radius:4px;height:34px;padding:3px 5px 3px 8px;cursor:pointer;box-sizing:border-box;outline:none;background:var(--white-color, #fff)}.time-field:hover:not(.disabled){border-color:#9fa6b1}.time-field.focused{border-color:#0060df;border-width:2px;padding:2px 4px 2px 7px}.time-field.disabled{background-color:var(--disabled-input-background, #f5f5f5);cursor:default;pointer-events:none}.segment{min-width:18px;text-align:center;border-radius:2px;padding:1px 2px;font-size:13px;font-family:Noto Sans,sans-serif;color:var(--neutral30, #424954);-webkit-user-select:none;user-select:none}.segment.active{background:#0060df;color:#fff;border-radius:2px}.segment--ampm{min-width:28px}.time-field:not(.has-value) .segment{color:var(--placeholder-color, #aaa)}.sep{font-size:13px;color:var(--neutral30, #424954);margin:0 1px;-webkit-user-select:none;user-select:none}.time-field:not(.has-value) .sep{color:var(--placeholder-color, #aaa)}.clock-btn{display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;padding:0;margin-left:auto;outline:none;color:var(--neutral50, #647081)}.clock-btn mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.clock-btn:disabled{opacity:.4;cursor:default}.picker-panel{position:absolute;z-index:1000;background:#fff;border-radius:8px;box-shadow:0 4px 16px #00000026;min-width:150px;top:calc(100% + 4px);left:0}.picker-columns{display:flex;align-items:flex-start;gap:4px;padding:8px 4px 8px 8px}.picker-divider{font-size:16px;color:var(--neutral30, #424954);padding-top:6px;align-self:flex-start;-webkit-user-select:none;user-select:none}.picker-col{height:160px;overflow-y:auto;width:50px;scrollbar-width:thin}.picker-col::-webkit-scrollbar{width:4px}.picker-col::-webkit-scrollbar-thumb{background:var(--neutral80, #d7d9de);border-radius:2px}.picker-item{padding:6px 8px;text-align:center;cursor:pointer;border-radius:4px;font-size:13px;font-family:Noto Sans,sans-serif;color:var(--neutral30, #424954)}.picker-item:hover{background:var(--secondary95, #f0f4ff)}.picker-item.selected{background:#0060df;color:#fff;font-weight:600}.picker-ampm{display:flex;justify-content:center;gap:8px;padding:8px;border-top:1px solid var(--neutral90, #e0e0e0)}.picker-ampm button{padding:4px 16px;border:1px solid var(--neutral80, #d7d9de);border-radius:4px;background:transparent;cursor:pointer;font-size:13px;font-family:Noto Sans,sans-serif;color:var(--neutral30, #424954)}.picker-ampm button:hover{background:var(--secondary95, #f0f4ff)}.picker-ampm button.active{background:#0060df;color:#fff;border-color:#0060df;font-weight:600}.error-text{font-size:10px;color:var(--error-border-color, #f44336);padding-top:2px;line-height:14px}\n"] }]
+        }], ctorParameters: () => [{ type: InputService }], propDecorators: { submit: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }], selectionChanges: [{
+                type: Output
+            }], timeFieldEl: [{
+                type: ViewChild,
+                args: ['timeField']
+            }], hourColEl: [{
+                type: ViewChild,
+                args: ['hourCol']
+            }], minuteColEl: [{
+                type: ViewChild,
+                args: ['minuteCol']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click']
+            }] } });
+
 /*
  * Public API Surface of shared-components
  */
@@ -2920,5 +3336,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AgGridButtonCellComponent, AgGridFunctionsService, ArrayToStringPipe, AutocompleteSelectComponent, ButtonComponent, ButtonType, ClearValueComponent, CompaniesEnum, DATA_ENDPOINT, DatePickerComponent, DateRangeDatepickerComponent, DateRangeSelectionComponent, DateTimePickerComponent, DriverCategories, DriverCategoryEnum, DriverStatus, GenerateErrorMessagesPipe, GetValueByKeyFromObjectPipe, IconButtonComponent, InputMaskDirective, InputService, LabelComponent, LabelTypeEnum, MenuComponent, NewSidebarComponent, ParseDateService, PhoneNumberInputComponent, ProcessedStatusCellRendererComponent, RoleEnum, SegmentedButtonComponent, SelectWithSearchComponent, TextInputComponent, TooltipCellRendererComponent, formatPhoneNumber, internationalPhoneValidator };
+export { AgGridButtonCellComponent, AgGridFunctionsService, ArrayToStringPipe, AutocompleteSelectComponent, ButtonComponent, ButtonType, ClearValueComponent, CompaniesEnum, DATA_ENDPOINT, DatePickerComponent, DateRangeDatepickerComponent, DateRangeSelectionComponent, DateTimePickerComponent, DriverCategories, DriverCategoryEnum, DriverStatus, GenerateErrorMessagesPipe, GetValueByKeyFromObjectPipe, IconButtonComponent, InputMaskDirective, InputService, LabelComponent, LabelTypeEnum, MenuComponent, NewSidebarComponent, ParseDateService, PhoneNumberInputComponent, ProcessedStatusCellRendererComponent, RoleEnum, SegmentedButtonComponent, SelectWithSearchComponent, TextInputComponent, TimeInputComponent, TooltipCellRendererComponent, formatPhoneNumber, internationalPhoneValidator };
 //# sourceMappingURL=i-tech-shared-components.mjs.map