@gloww/gloww 20.0.0-beta.40 → 20.0.0-beta.41

package/fesm2022/gloww-gloww.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Injectable, HostListener, Input, Directive, Pipe, Inject, Component, EventEmitter, Output, HostBinding, ViewChild, ContentChildren, Optional, PLATFORM_ID, ContentChild, ViewEncapsulation, makeEnvironmentProviders, NgModule, SecurityContext, forwardRef } from '@angular/core';
-import { Subject, firstValueFrom, BehaviorSubject, of, Subscription, combineLatest, forkJoin, throwError } from 'rxjs';
+import { Subject, firstValueFrom, BehaviorSubject, of, combineLatest, forkJoin, throwError } from 'rxjs';
 import * as i1 from '@angular/common/http';
 import { HttpClient, HttpParams, HttpEventType, HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi, HttpResponse } from '@angular/common/http';
 import * as i3 from '@angular/common';
@@ -1021,6 +1021,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 
 ;
 class DisplayObjectsComponent {
+    static { this.DISPLAY_PARAM = '__display'; }
+    static { this.DISPLAY_FORM = 'form'; }
+    static { this.DISPLAY_RESULT = 'result'; }
+    static { this.INTERNAL_QUERY_KEYS = new Set(['__guid', DisplayObjectsComponent.DISPLAY_PARAM]); }
     constructor(glowwService, changeDetectorRef, dialog, router, location, authenticationService, formBuilder, route, i18n) {
         this.changeDetectorRef = changeDetectorRef;
         this.dialog = dialog;
@@ -1041,7 +1045,7 @@ class DisplayObjectsComponent {
         this.displayform = true;
         this.displayresult = false;
         this.queryParams = {};
-        this.navSubscription = new Subscription();
+        this.viewInitialized = false;
         this.currentFilter = null;
         this.glowwService = glowwService;
         const component = this;
@@ -1054,8 +1058,15 @@ class DisplayObjectsComponent {
         this.routeParams = this.route.snapshot.params;
         route.params.subscribe(routeParams => {
             this.routeParams = routeParams;
-            if (this.displayresult)
-                this.Search();
+            if (this.viewInitialized) {
+                this.applyRouteState(this.route.snapshot.queryParams);
+            }
+        });
+        route.queryParams.subscribe(queryParams => {
+            this.queryParams = { ...queryParams };
+            if (this.viewInitialized) {
+                this.applyRouteState(queryParams);
+            }
         });
     }
     ngOnChanges(changes) {
@@ -1128,55 +1139,19 @@ class DisplayObjectsComponent {
         }
         //debugger;
         console.log(`INIT : formLayout:${this.searchFormLayout}-displayform:${this.displayform}`);
-        if (!this.searchFormLayout && this.resultLayout) {
-            this.displayform = false;
-            this.displayresult = true;
-        }
-        if (Object.keys(this.data).length > 0 && (this.data["__mode"] !== "edit")) {
-            this.displayform = false;
-            this.displayresult = true;
-        }
-        if (Object.keys(this.route.snapshot.params).length > 0 && (this.data["__mode"] !== "edit")) {
-            this.displayform = false;
-            this.displayresult = true;
-        }
         this.glowwService.basePathChange.subscribe(newUrl => {
             console.log(`basePathChange ${newUrl}: fromLayout:${this.searchFormLayout}-displayform:${this.displayform}`);
             this.parent.form?.reset();
-            if (!this.searchFormLayout && this.resultLayout) {
-                this.displayform = false;
-                this.displayresult = true;
-            }
-            if (this.displayresult) {
-                this.Search();
-            }
+            this.applyRouteState(this.route.snapshot.queryParams);
         });
-        if (this.displayresult) {
-            this.Search();
-        }
+        this.viewInitialized = true;
+        this.applyRouteState(this.route.snapshot.queryParams);
     }
     ngAfterContentInit() {
     }
     ngOnInit() {
-        this.navSubscription = this.router.events.subscribe((e) => {
-            if (e instanceof NavigationEnd) {
-                this.parent.form?.reset();
-                this.displayform = true;
-                this.displayresult = false;
-                this.changeDetectorRef.detectChanges();
-                this.dataSource = null;
-                if (!this.searchFormLayout && this.resultLayout) {
-                    this.displayform = false;
-                    this.displayresult = true;
-                }
-                if (this.displayresult) {
-                    this.Search();
-                }
-            }
-        });
     }
     ngOnDestroy() {
-        this.navSubscription?.unsubscribe(); // this prevents a memory leak
     }
     t(key, fallback) {
         return this.i18n.instant(key, fallback);
@@ -1186,6 +1161,27 @@ class DisplayObjectsComponent {
             this.Search(data);
         }
     }
+    hasSearchState() {
+        return this.displayresult || this.hasSearchQueryParams(this.route.snapshot.queryParams);
+    }
+    onBack() {
+        const searchQuery = this.buildSearchQueryParams();
+        if (!Object.keys(searchQuery).length) {
+            this.showForm();
+            this.syncFormWithQueryParams({});
+            return;
+        }
+        this.router.navigate([], {
+            relativeTo: this.route,
+            queryParams: {
+                ...searchQuery,
+                [DisplayObjectsComponent.DISPLAY_PARAM]: DisplayObjectsComponent.DISPLAY_FORM
+            }
+        });
+    }
+    onRefresh() {
+        this.Search();
+    }
     SetFilterPredicate() {
         this.dataSource.filterPredicate = function (record, filterString) {
             console.log(filterString);
@@ -1239,9 +1235,9 @@ class DisplayObjectsComponent {
         console.log(`Search ${this.glowwService.InternalBasePath}`);
         if (data)
             this.data = data;
-        this.displayresult = true;
-        this.displayform = false;
+        this.showResult();
         this.resultException = null;
+        this.queryParams = {};
         if (this.data) {
             Object.keys(this.data).forEach(name => {
                 this.queryParams[name] = this.data[name];
@@ -1252,9 +1248,15 @@ class DisplayObjectsComponent {
                 this.queryParams[name] = this.routeParams[name];
             });
         }
+        const routeQueryParams = this.route.snapshot.queryParams ?? {};
+        Object.keys(routeQueryParams).forEach(name => {
+            if (!DisplayObjectsComponent.INTERNAL_QUERY_KEYS.has(name)) {
+                this.queryParams[name] = routeQueryParams[name];
+            }
+        });
         if (this.mandatoryParams) {
             Object.keys(this.mandatoryParams).forEach(name => {
-                this.queryParams[name] = this.queryParams[name];
+                this.queryParams[name] = this.mandatoryParams[name];
             });
         }
         Object.keys(this.queryParams).forEach(name => {
@@ -1276,8 +1278,7 @@ class DisplayObjectsComponent {
             this.changeDetectorRef.detectChanges();
             this.UpdateTable();
         }, error => {
-            this.displayresult = false;
-            this.displayform = true;
+            this.showForm();
             this.resultException = this.toErrorMessage(error);
         });
     }
@@ -1289,21 +1290,13 @@ class DisplayObjectsComponent {
         }
     }
     onSearch() {
-        this.queryParams = {};
-        const searchData = this.parent.form.value.searchData;
-        if (searchData) {
-            Object.keys(searchData).forEach(name => {
-                this.queryParams[name] = this.serializeQueryParamValue(searchData[name]);
-            });
-        }
-        if (this.form2.value._MaxRow_) {
-            this.queryParams._MaxRow_ = this.form2.value._MaxRow_;
-        }
-        this.clean(this.queryParams);
-        const params = new HttpParams({ fromObject: this.queryParams });
-        const currentstate = this.location.getState();
-        this.location.replaceState(this.router.url, params.toString());
-        this.Search();
+        this.router.navigate([], {
+            relativeTo: this.route,
+            queryParams: {
+                ...this.buildSearchQueryParams(),
+                [DisplayObjectsComponent.DISPLAY_PARAM]: DisplayObjectsComponent.DISPLAY_RESULT
+            }
+        });
     }
     serializeQueryParamValue(value) {
         if (value === undefined || value === null || value === '') {
@@ -1622,12 +1615,102 @@ class DisplayObjectsComponent {
         const details = error.error?.message || error.error || error.message || error.statusText || `${error}`;
         return `${this.t('GLOWW.UNABLE_TO_QUERY', 'Unable to query')} : ${details}`;
     }
+    applyRouteState(queryParams) {
+        this.dataSource = null;
+        this.resultException = null;
+        this.queryParams = { ...(queryParams ?? {}) };
+        this.syncFormWithQueryParams(this.queryParams);
+        if (this.shouldDisplayForm(this.queryParams)) {
+            this.showForm();
+            this.changeDetectorRef.detectChanges();
+            return;
+        }
+        if (this.shouldDisplayResult(this.queryParams)) {
+            this.showResult();
+            this.changeDetectorRef.detectChanges();
+            this.Search();
+            return;
+        }
+        this.showForm();
+        this.changeDetectorRef.detectChanges();
+    }
+    shouldDisplayForm(queryParams) {
+        if (!this.searchFormLayout) {
+            return false;
+        }
+        return queryParams?.[DisplayObjectsComponent.DISPLAY_PARAM] === DisplayObjectsComponent.DISPLAY_FORM;
+    }
+    shouldDisplayResult(queryParams) {
+        if (!this.searchFormLayout && this.resultLayout) {
+            return true;
+        }
+        if (Object.keys(this.data ?? {}).length > 0 && (this.data["__mode"] !== "edit")) {
+            return true;
+        }
+        if (Object.keys(this.routeParams ?? {}).length > 0 && (this.data["__mode"] !== "edit")) {
+            return true;
+        }
+        return queryParams?.[DisplayObjectsComponent.DISPLAY_PARAM] === DisplayObjectsComponent.DISPLAY_RESULT
+            || this.hasSearchQueryParams(queryParams);
+    }
+    hasSearchQueryParams(queryParams) {
+        if (!queryParams) {
+            return false;
+        }
+        return Object.keys(queryParams).some(key => !DisplayObjectsComponent.INTERNAL_QUERY_KEYS.has(key) &&
+            queryParams[key] !== null &&
+            queryParams[key] !== undefined &&
+            queryParams[key] !== '');
+    }
+    syncFormWithQueryParams(queryParams) {
+        const searchData = {};
+        Object.keys(queryParams ?? {}).forEach(key => {
+            if (DisplayObjectsComponent.INTERNAL_QUERY_KEYS.has(key) || key === '_MaxRow_') {
+                return;
+            }
+            searchData[key] = queryParams[key];
+        });
+        const parentForm = this.parent?.form;
+        if (parentForm?.contains('searchData')) {
+            parentForm.patchValue({
+                searchData: Object.keys(searchData).length ? searchData : null
+            }, { emitEvent: false });
+        }
+        if (this.form2?.contains('_MaxRow_')) {
+            this.form2.patchValue({
+                _MaxRow_: queryParams?._MaxRow_ ?? null
+            }, { emitEvent: false });
+        }
+    }
+    buildSearchQueryParams() {
+        const nextQueryParams = {};
+        const searchData = this.parent?.form?.value?.searchData;
+        const form2Value = this.form2.value;
+        if (searchData) {
+            Object.keys(searchData).forEach(name => {
+                nextQueryParams[name] = this.serializeQueryParamValue(searchData[name]);
+            });
+        }
+        if (form2Value._MaxRow_) {
+            nextQueryParams._MaxRow_ = form2Value._MaxRow_;
+        }
+        this.clean(nextQueryParams);
+        return nextQueryParams;
+    }
+    showForm() {
+        this.displayform = true;
+        this.displayresult = false;
+    }
+    showResult() {
+        this.displayform = false;
+        this.displayresult = true;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DisplayObjectsComponent, deps: [{ token: 'glowwService' }, { token: i0.ChangeDetectorRef }, { token: i1$2.MatDialog }, { token: i2.Router }, { token: i3.Location }, { token: AuthenticationService }, { token: i1$3.UntypedFormBuilder }, { token: i2.ActivatedRoute }, { token: GlowwI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DisplayObjectsComponent, isStandalone: true, selector: "glw-display-objects", inputs: { configuration: "configuration", displayObjLink: "displayObjLink", canDisplayObj: "canDisplayObj", canEdit: "canEdit", canDelete: "canDelete", canAdd: "canAdd", form: "form", SearchForm: "SearchForm", searchRequest: "searchRequest", postRequest: "postRequest", deleteRequest: "deleteRequest", putRequest: "putRequest", maxrows: "maxrows", mandatoryParams: "mandatoryParams", actions: "actions", dialogConfig: "dialogConfig", parent: "parent", columns: "columns", objectName: "objectName", primaryKey: "primaryKey", Editor: "Editor", AddEditor: "AddEditor" }, queries: [{ propertyName: "header", first: true, predicate: HeaderComponent, descendants: true }, { propertyName: "searchFormLayout", first: true, predicate: SearchFormComponent, descendants: true }, { propertyName: "filterFormLayout", first: true, predicate: FilterFormComponent, descendants: true }, { propertyName: "resultLayout", first: true, predicate: ResultTableComponent, descendants: true }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div>\n  <ng-content select=\"glw-header\"></ng-content>\n</div>\n\n@if (displayform) {\n  <div>\n    <mat-card appearance=\"outlined\">\n      <mat-card-content>\n        @if (resultException) {\n          <mat-error>\n            {{ resultException }}\n          </mat-error>\n        }\n        <ng-content select=\"glw-search-form\"></ng-content>\n        <!--<ng-container *ngComponentOutlet=\"SearchForm; injector: objInjector\"></ng-container>-->\n        @if (maxrows) {\n          <div [formGroup]=\"form2\">\n            <br />\n            <mat-form-field>\n              <mat-select [placeholder]=\"t('COMMON.MAX_ROW', 'MaxRow')\" formControlName=\"_MaxRow_\">\n                @for (maxrow of maxrows; track maxrow) {\n                  <mat-option [value]=\"maxrow\">\n                    @if (maxrow) {\n                      <span>{{maxrow}} {{ t('COMMON.OBJECTS_SUFFIX', 'objects') }}</span>\n                    }\n                    @if (!maxrow) {\n                      <span>{{ t('COMMON.DEFAULT', 'Default') }}</span>\n                    }\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          </div>\n        }\n      </mat-card-content>\n      <mat-card-actions>\n        <button mat-stroked-button color=\"accent\" (click)=\"onSearch()\">\n          <mat-icon>search</mat-icon>\n          {{ t('COMMON.SEARCH', 'Search') }}\n        </button>\n      </mat-card-actions>\n    </mat-card>\n  </div>\n}\n\n<div [hidden]=\"!displayresult\">\n  <!--*ngIf=\"displayresult\"-->\n  <div class=\"mat-elevation-z8\" [hidden]=\"!dataSource\">\n    <ng-content select=\"[filter]\"></ng-content>\n\n    <!--*ngIf=\"dataSource; else Spinner\"-->\n    <table mat-table [dataSource]=\"dataSource\" matSort>\n      <ng-container matColumnDef=\"action\">\n        <th mat-header-cell *matHeaderCellDef>\n          @if (canAddThis()) {\n            <i class=\"fal fa-plus\" (click)=\"AddObj()\">\n            </i>\n          }\n        </th>\n        <td mat-cell *matCellDef=\"let obj\">\n          @if (canDisplayObjThis(obj)) {\n            <i class=\"fal fa-eye\" [routerLink]=\"displayObjLinkThis(obj)\">\n            </i>\n          }\n          @for (action of actions; track action) {\n            @if (action.icon.icon && (!action.display || action.display(obj, action.name))) {\n              <i [ngClass]=\"action.icon\" [routerLink]=\"action.routerLinkFct(obj)\">\n              </i>\n            }\n            @if (!action.icon.icon && (!action.display || action.display(obj, action.name))) {\n              <i [ngClass]=\"action.icon\" [routerLink]=\"action.routerLinkFct(obj)\"></i>\n            }\n          }\n          @if (canDeleteThis(obj)) {\n            <i class=\"fal fa-trash-alt\" (click)=\"DeleteObj(obj)\">\n            </i>\n          }\n          @if (canEditThis(obj)) {\n            <i class=\"fal fa-pencil\" (click)=\"EditObj(obj)\">\n            </i>\n          }\n        </td>\n      </ng-container>\n      <ng-content select=\"glw-result-table\"></ng-content>\n      <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n      <tr mat-row *matRowDef=\"let myRowData; columns: columnsToDisplay\"></tr>\n    </table>\n    <mat-paginator [pageSize]=\"10\" [pageSizeOptions]=\"[10, 20, 50, 100]\" [showFirstLastButtons]=\"true\"></mat-paginator>\n  </div>\n  <div #Spinner [hidden]=\"dataSource\">\n    <mat-spinner></mat-spinner>\n  </div>\n</div>\n", styles: ["table{width:100%}i{cursor:pointer;padding:5px}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatDialogModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DisplayObjectsComponent, isStandalone: true, selector: "glw-display-objects", inputs: { configuration: "configuration", displayObjLink: "displayObjLink", canDisplayObj: "canDisplayObj", canEdit: "canEdit", canDelete: "canDelete", canAdd: "canAdd", form: "form", SearchForm: "SearchForm", searchRequest: "searchRequest", postRequest: "postRequest", deleteRequest: "deleteRequest", putRequest: "putRequest", maxrows: "maxrows", mandatoryParams: "mandatoryParams", actions: "actions", dialogConfig: "dialogConfig", parent: "parent", columns: "columns", objectName: "objectName", primaryKey: "primaryKey", Editor: "Editor", AddEditor: "AddEditor" }, queries: [{ propertyName: "header", first: true, predicate: HeaderComponent, descendants: true }, { propertyName: "searchFormLayout", first: true, predicate: SearchFormComponent, descendants: true }, { propertyName: "filterFormLayout", first: true, predicate: FilterFormComponent, descendants: true }, { propertyName: "resultLayout", first: true, predicate: ResultTableComponent, descendants: true }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div>\n  <ng-content select=\"glw-header\"></ng-content>\n</div>\n\n@if (displayform) {\n  <div>\n    <mat-card appearance=\"outlined\">\n      <mat-card-content>\n        @if (resultException) {\n          <mat-error>\n            {{ resultException }}\n          </mat-error>\n        }\n        <ng-content select=\"glw-search-form\"></ng-content>\n        <!--<ng-container *ngComponentOutlet=\"SearchForm; injector: objInjector\"></ng-container>-->\n        @if (maxrows) {\n          <div [formGroup]=\"form2\">\n            <br />\n            <mat-form-field>\n              <mat-select [placeholder]=\"t('COMMON.MAX_ROW', 'MaxRow')\" formControlName=\"_MaxRow_\">\n                @for (maxrow of maxrows; track maxrow) {\n                  <mat-option [value]=\"maxrow\">\n                    @if (maxrow) {\n                      <span>{{maxrow}} {{ t('COMMON.OBJECTS_SUFFIX', 'objects') }}</span>\n                    }\n                    @if (!maxrow) {\n                      <span>{{ t('COMMON.DEFAULT', 'Default') }}</span>\n                    }\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          </div>\n        }\n      </mat-card-content>\n      <mat-card-actions>\n        <button mat-stroked-button color=\"accent\" (click)=\"onSearch()\">\n          <mat-icon>search</mat-icon>\n          {{ t('COMMON.SEARCH', 'Search') }}\n        </button>\n      </mat-card-actions>\n    </mat-card>\n  </div>\n}\n\n<div [hidden]=\"!displayresult\">\n  <!--*ngIf=\"displayresult\"-->\n  <div class=\"mat-elevation-z8\" [hidden]=\"!dataSource\">\n    <ng-content select=\"[filter]\"></ng-content>\n\n    <!--*ngIf=\"dataSource; else Spinner\"-->\n    <table mat-table [dataSource]=\"dataSource\" matSort>\n      <ng-container matColumnDef=\"action\">\n        <th mat-header-cell *matHeaderCellDef>\n          @if (hasSearchState()) {\n            <i class=\"fal fa-arrow-left\" (click)=\"onBack()\" [attr.title]=\"t('COMMON.BACK', 'Back')\">\n            </i>\n            <i class=\"fal fa-rotate-right\" (click)=\"onRefresh()\" [attr.title]=\"t('COMMON.REFRESH', 'Refresh')\">\n            </i>\n          }\n          @if (canAddThis()) {\n            <i class=\"fal fa-plus\" (click)=\"AddObj()\">\n            </i>\n          }\n        </th>\n        <td mat-cell *matCellDef=\"let obj\">\n          @if (canDisplayObjThis(obj)) {\n            <i class=\"fal fa-eye\" [routerLink]=\"displayObjLinkThis(obj)\">\n            </i>\n          }\n          @for (action of actions; track action) {\n            @if (action.icon.icon && (!action.display || action.display(obj, action.name))) {\n              <i [ngClass]=\"action.icon\" [routerLink]=\"action.routerLinkFct(obj)\">\n              </i>\n            }\n            @if (!action.icon.icon && (!action.display || action.display(obj, action.name))) {\n              <i [ngClass]=\"action.icon\" [routerLink]=\"action.routerLinkFct(obj)\"></i>\n            }\n          }\n          @if (canDeleteThis(obj)) {\n            <i class=\"fal fa-trash-alt\" (click)=\"DeleteObj(obj)\">\n            </i>\n          }\n          @if (canEditThis(obj)) {\n            <i class=\"fal fa-pencil\" (click)=\"EditObj(obj)\">\n            </i>\n          }\n        </td>\n      </ng-container>\n      <ng-content select=\"glw-result-table\"></ng-content>\n      <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n      <tr mat-row *matRowDef=\"let myRowData; columns: columnsToDisplay\"></tr>\n    </table>\n    <mat-paginator [pageSize]=\"10\" [pageSizeOptions]=\"[10, 20, 50, 100]\" [showFirstLastButtons]=\"true\"></mat-paginator>\n  </div>\n  <div #Spinner [hidden]=\"dataSource\">\n    <mat-spinner></mat-spinner>\n  </div>\n</div>\n", styles: ["table{width:100%}i{cursor:pointer;padding:5px}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatDialogModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DisplayObjectsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'glw-display-objects', imports: [MatCard, MatCardContent, MatError, FormsModule, ReactiveFormsModule, MatFormField, MatSelect, MatOption, MatCardActions, MatButton, MatIcon, MatTable, MatSort, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, RouterLink, NgClass, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, MatPaginator, MatProgressSpinner, MatDialogModule], template: "<div>\n  <ng-content select=\"glw-header\"></ng-content>\n</div>\n\n@if (displayform) {\n  <div>\n    <mat-card appearance=\"outlined\">\n      <mat-card-content>\n        @if (resultException) {\n          <mat-error>\n            {{ resultException }}\n          </mat-error>\n        }\n        <ng-content select=\"glw-search-form\"></ng-content>\n        <!--<ng-container *ngComponentOutlet=\"SearchForm; injector: objInjector\"></ng-container>-->\n        @if (maxrows) {\n          <div [formGroup]=\"form2\">\n            <br />\n            <mat-form-field>\n              <mat-select [placeholder]=\"t('COMMON.MAX_ROW', 'MaxRow')\" formControlName=\"_MaxRow_\">\n                @for (maxrow of maxrows; track maxrow) {\n                  <mat-option [value]=\"maxrow\">\n                    @if (maxrow) {\n                      <span>{{maxrow}} {{ t('COMMON.OBJECTS_SUFFIX', 'objects') }}</span>\n                    }\n                    @if (!maxrow) {\n                      <span>{{ t('COMMON.DEFAULT', 'Default') }}</span>\n                    }\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          </div>\n        }\n      </mat-card-content>\n      <mat-card-actions>\n        <button mat-stroked-button color=\"accent\" (click)=\"onSearch()\">\n          <mat-icon>search</mat-icon>\n          {{ t('COMMON.SEARCH', 'Search') }}\n        </button>\n      </mat-card-actions>\n    </mat-card>\n  </div>\n}\n\n<div [hidden]=\"!displayresult\">\n  <!--*ngIf=\"displayresult\"-->\n  <div class=\"mat-elevation-z8\" [hidden]=\"!dataSource\">\n    <ng-content select=\"[filter]\"></ng-content>\n\n    <!--*ngIf=\"dataSource; else Spinner\"-->\n    <table mat-table [dataSource]=\"dataSource\" matSort>\n      <ng-container matColumnDef=\"action\">\n        <th mat-header-cell *matHeaderCellDef>\n          @if (canAddThis()) {\n            <i class=\"fal fa-plus\" (click)=\"AddObj()\">\n            </i>\n          }\n        </th>\n        <td mat-cell *matCellDef=\"let obj\">\n          @if (canDisplayObjThis(obj)) {\n            <i class=\"fal fa-eye\" [routerLink]=\"displayObjLinkThis(obj)\">\n            </i>\n          }\n          @for (action of actions; track action) {\n            @if (action.icon.icon && (!action.display || action.display(obj, action.name))) {\n              <i [ngClass]=\"action.icon\" [routerLink]=\"action.routerLinkFct(obj)\">\n              </i>\n            }\n            @if (!action.icon.icon && (!action.display || action.display(obj, action.name))) {\n              <i [ngClass]=\"action.icon\" [routerLink]=\"action.routerLinkFct(obj)\"></i>\n            }\n          }\n          @if (canDeleteThis(obj)) {\n            <i class=\"fal fa-trash-alt\" (click)=\"DeleteObj(obj)\">\n            </i>\n          }\n          @if (canEditThis(obj)) {\n            <i class=\"fal fa-pencil\" (click)=\"EditObj(obj)\">\n            </i>\n          }\n        </td>\n      </ng-container>\n      <ng-content select=\"glw-result-table\"></ng-content>\n      <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n      <tr mat-row *matRowDef=\"let myRowData; columns: columnsToDisplay\"></tr>\n    </table>\n    <mat-paginator [pageSize]=\"10\" [pageSizeOptions]=\"[10, 20, 50, 100]\" [showFirstLastButtons]=\"true\"></mat-paginator>\n  </div>\n  <div #Spinner [hidden]=\"dataSource\">\n    <mat-spinner></mat-spinner>\n  </div>\n</div>\n", styles: ["table{width:100%}i{cursor:pointer;padding:5px}\n"] }]
+            args: [{ selector: 'glw-display-objects', imports: [MatCard, MatCardContent, MatError, FormsModule, ReactiveFormsModule, MatFormField, MatSelect, MatOption, MatCardActions, MatButton, MatIcon, MatTable, MatSort, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, RouterLink, NgClass, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, MatPaginator, MatProgressSpinner, MatDialogModule], template: "<div>\n  <ng-content select=\"glw-header\"></ng-content>\n</div>\n\n@if (displayform) {\n  <div>\n    <mat-card appearance=\"outlined\">\n      <mat-card-content>\n        @if (resultException) {\n          <mat-error>\n            {{ resultException }}\n          </mat-error>\n        }\n        <ng-content select=\"glw-search-form\"></ng-content>\n        <!--<ng-container *ngComponentOutlet=\"SearchForm; injector: objInjector\"></ng-container>-->\n        @if (maxrows) {\n          <div [formGroup]=\"form2\">\n            <br />\n            <mat-form-field>\n              <mat-select [placeholder]=\"t('COMMON.MAX_ROW', 'MaxRow')\" formControlName=\"_MaxRow_\">\n                @for (maxrow of maxrows; track maxrow) {\n                  <mat-option [value]=\"maxrow\">\n                    @if (maxrow) {\n                      <span>{{maxrow}} {{ t('COMMON.OBJECTS_SUFFIX', 'objects') }}</span>\n                    }\n                    @if (!maxrow) {\n                      <span>{{ t('COMMON.DEFAULT', 'Default') }}</span>\n                    }\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          </div>\n        }\n      </mat-card-content>\n      <mat-card-actions>\n        <button mat-stroked-button color=\"accent\" (click)=\"onSearch()\">\n          <mat-icon>search</mat-icon>\n          {{ t('COMMON.SEARCH', 'Search') }}\n        </button>\n      </mat-card-actions>\n    </mat-card>\n  </div>\n}\n\n<div [hidden]=\"!displayresult\">\n  <!--*ngIf=\"displayresult\"-->\n  <div class=\"mat-elevation-z8\" [hidden]=\"!dataSource\">\n    <ng-content select=\"[filter]\"></ng-content>\n\n    <!--*ngIf=\"dataSource; else Spinner\"-->\n    <table mat-table [dataSource]=\"dataSource\" matSort>\n      <ng-container matColumnDef=\"action\">\n        <th mat-header-cell *matHeaderCellDef>\n          @if (hasSearchState()) {\n            <i class=\"fal fa-arrow-left\" (click)=\"onBack()\" [attr.title]=\"t('COMMON.BACK', 'Back')\">\n            </i>\n            <i class=\"fal fa-rotate-right\" (click)=\"onRefresh()\" [attr.title]=\"t('COMMON.REFRESH', 'Refresh')\">\n            </i>\n          }\n          @if (canAddThis()) {\n            <i class=\"fal fa-plus\" (click)=\"AddObj()\">\n            </i>\n          }\n        </th>\n        <td mat-cell *matCellDef=\"let obj\">\n          @if (canDisplayObjThis(obj)) {\n            <i class=\"fal fa-eye\" [routerLink]=\"displayObjLinkThis(obj)\">\n            </i>\n          }\n          @for (action of actions; track action) {\n            @if (action.icon.icon && (!action.display || action.display(obj, action.name))) {\n              <i [ngClass]=\"action.icon\" [routerLink]=\"action.routerLinkFct(obj)\">\n              </i>\n            }\n            @if (!action.icon.icon && (!action.display || action.display(obj, action.name))) {\n              <i [ngClass]=\"action.icon\" [routerLink]=\"action.routerLinkFct(obj)\"></i>\n            }\n          }\n          @if (canDeleteThis(obj)) {\n            <i class=\"fal fa-trash-alt\" (click)=\"DeleteObj(obj)\">\n            </i>\n          }\n          @if (canEditThis(obj)) {\n            <i class=\"fal fa-pencil\" (click)=\"EditObj(obj)\">\n            </i>\n          }\n        </td>\n      </ng-container>\n      <ng-content select=\"glw-result-table\"></ng-content>\n      <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n      <tr mat-row *matRowDef=\"let myRowData; columns: columnsToDisplay\"></tr>\n    </table>\n    <mat-paginator [pageSize]=\"10\" [pageSizeOptions]=\"[10, 20, 50, 100]\" [showFirstLastButtons]=\"true\"></mat-paginator>\n  </div>\n  <div #Spinner [hidden]=\"dataSource\">\n    <mat-spinner></mat-spinner>\n  </div>\n</div>\n", styles: ["table{width:100%}i{cursor:pointer;padding:5px}\n"] }]
         }], ctorParameters: () => [{ type: GlowwService, decorators: [{
                     type: Inject,
                     args: ['glowwService']
@@ -3489,6 +3572,7 @@ class AutoCompleteComponent {
         this.onTouched = () => { };
         this.items = [];
         this.parser = new TranslateDefaultParser();
+        this.pendingExternalValue = undefined;
         this.options = []; //Observable<unknown>;
         this.propagateChange = (_) => { };
         this.glowwService = glowwService;
@@ -3522,9 +3606,21 @@ class AutoCompleteComponent {
             },
             error: (error) => { this.error = error; }
         });
+        if (this.pendingExternalValue !== undefined) {
+            this.applyExternalValue(this.pendingExternalValue);
+            this.pendingExternalValue = undefined;
+        }
     }
     writeValue(val) {
-        val && this.form.setValue({ __result: val }, { emitEvent: false });
+        if (val === undefined || val === null || val === '') {
+            this.form.setValue({ __result: null }, { emitEvent: false });
+            return;
+        }
+        if (!this.searchRequest) {
+            this.pendingExternalValue = val;
+            return;
+        }
+        this.applyExternalValue(val);
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -3547,6 +3643,9 @@ class AutoCompleteComponent {
     displayObj(item) {
         if (!item)
             return null;
+        if (typeof item !== 'object') {
+            return item;
+        }
         console.log("displayOf");
         if (this.displayField) {
             return item[this.displayField];
@@ -3559,6 +3658,30 @@ class AutoCompleteComponent {
             return this.displayFct(item);
         }
     }
+    applyExternalValue(val) {
+        if (typeof val === 'object') {
+            this.form.setValue({ __result: val }, { emitEvent: false });
+            this.ref.markForCheck();
+            return;
+        }
+        if (!this.returnField || !this.searchRequest) {
+            this.form.setValue({ __result: val }, { emitEvent: false });
+            this.ref.markForCheck();
+            return;
+        }
+        const searchObj = {};
+        if (this.data) {
+            Object.keys(this.data).forEach(k => {
+                searchObj[k] = this.data[k];
+            });
+        }
+        searchObj[this.returnField] = val;
+        this.searchRequest.call(this.glowwService, searchObj).pipe(catchError(() => of([]))).subscribe((results) => {
+            const match = results.find(item => item?.[this.returnField] == val) ?? results[0] ?? val;
+            this.form.setValue({ __result: match }, { emitEvent: false });
+            this.ref.markForCheck();
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AutoCompleteComponent, deps: [{ token: 'glowwService' }, { token: i1$3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AutoCompleteComponent, isStandalone: true, selector: "gloww-auto-complete", inputs: { _value: ["value", "_value"], objectName: "objectName", searchField: "searchField", returnField: "returnField", displayField: "displayField", displayExpr: "displayExpr", displayFct: "displayFct", placeHolder: "placeHolder", data: "data", searchRequest: "searchRequest" }, providers: [
             {
@@ -3627,13 +3750,13 @@ class DatetimeComponent {
         'YYYY-MM-DDTHH:mm'
     ]; }
     static { this.CLOCK_CENTER = 50; }
-    static { this.CLOCK_OUTER_RADIUS = 40; }
-    static { this.CLOCK_INNER_RADIUS = 27; }
+    static { this.CLOCK_OUTER_RADIUS = 36; }
+    static { this.CLOCK_INNER_RADIUS = 25; }
     static { this.CLOCK_TICK_OUTER_RADIUS = 48; }
     static { this.CLOCK_TICK_INNER_RADIUS = 41; }
     static { this.CLOCK_TICK_LABEL_RADIUS = 34; }
-    static { this.CLOCK_OUTER_HAND_HEIGHT = '40%'; }
-    static { this.CLOCK_INNER_HAND_HEIGHT = '27%'; }
+    static { this.CLOCK_OUTER_HAND_HEIGHT = '34%'; }
+    static { this.CLOCK_INNER_HAND_HEIGHT = '23%'; }
     static { this.CLOCK_MINUTE_HAND_HEIGHT = '48%'; }
     constructor(locale) {
         this.locale = locale;
@@ -3841,6 +3964,10 @@ class DatetimeComponent {
     get minuteHandHeight() {
         return DatetimeComponent.CLOCK_MINUTE_HAND_HEIGHT;
     }
+    get selectedHourMarker() {
+        const hour = this.toNumber(this.hourControl.value);
+        return this.buildClockMarker(hour, hour < 12 ? DatetimeComponent.CLOCK_OUTER_RADIUS : DatetimeComponent.CLOCK_INNER_RADIUS, hour.toString().padStart(2, '0'));
+    }
     setValueFromOutside(value, emit) {
         const normalized = this.normalizeDateValue(value);
         this._value = normalized;
@@ -3959,7 +4086,7 @@ class DatetimeComponent {
                 multi: true,
                 useExisting: forwardRef(() => DatetimeComponent)
             }
-        ], ngImport: i0, template: "<div class=\"datetime-wrapper\" [class.datetime-mode]=\"isDateTime\" [class.has-seconds]=\"showSeconds\">\n  <mat-form-field class=\"date-field\">\n    @if (display) {\n      <mat-label>{{ display }}</mat-label>\n    }\n    <input\n      matInput\n      [matDatepicker]=\"picker\"\n      [placeholder]=\"placeHolder\"\n      [formControl]=\"dateControl\"\n      [disabled]=\"isDisabled\"\n      (dateChange)=\"markTouched()\"\n      (blur)=\"markTouched()\">\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n  </mat-form-field>\n\n  @if (isDateTime) {\n    <div class=\"middle-actions\">\n      <button\n        mat-icon-button\n        type=\"button\"\n        class=\"icon-action\"\n        [disabled]=\"isDisabled\"\n        title=\"Clear date and time\"\n        aria-label=\"Clear date and time\"\n        (click)=\"clear()\">\n        <i class=\"fal fa-eraser\"></i>\n      </button>\n\n      <button\n        mat-icon-button\n        type=\"button\"\n        class=\"icon-action\"\n        [disabled]=\"isDisabled\"\n        title=\"Open time clock\"\n        aria-label=\"Open time clock\"\n        (click)=\"openClock()\">\n        <i class=\"fal fa-clock\"></i>\n      </button>\n    </div>\n\n    <div class=\"time-row\">\n      <mat-form-field class=\"time-field\">\n        <mat-label>HH</mat-label>\n        <input\n          matInput\n          type=\"number\"\n          min=\"0\"\n          max=\"23\"\n          inputmode=\"numeric\"\n          [formControl]=\"hourControl\"\n          [disabled]=\"isDisabled\"\n          (input)=\"onTimePartInput('hour')\"\n          (blur)=\"onTimePartBlur('hour')\">\n      </mat-form-field>\n\n      <mat-form-field class=\"time-field\">\n        <mat-label>MM</mat-label>\n        <input\n          matInput\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          inputmode=\"numeric\"\n          [formControl]=\"minuteControl\"\n          [disabled]=\"isDisabled\"\n          (input)=\"onTimePartInput('minute')\"\n          (blur)=\"onTimePartBlur('minute')\">\n      </mat-form-field>\n\n      @if (showSeconds) {\n        <mat-form-field class=\"time-field\">\n          <mat-label>SS</mat-label>\n          <input\n            matInput\n            type=\"number\"\n            min=\"0\"\n            max=\"59\"\n            inputmode=\"numeric\"\n            [formControl]=\"secondControl\"\n            [disabled]=\"isDisabled\"\n            (input)=\"onTimePartInput('second')\"\n            (blur)=\"onTimePartBlur('second')\">\n        </mat-form-field>\n      }\n    </div>\n\n    @if (isClockOpen) {\n      <div class=\"clock-backdrop\" (click)=\"closeClock()\"></div>\n\n      <div class=\"clock-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"clock-panel\">\n        <div class=\"clock-panel-header\">\n          <div class=\"clock-panel-title\">{{ clockTitle }}</div>\n          <button\n            mat-button\n            type=\"button\"\n            class=\"clock-close\"\n            [disabled]=\"isDisabled\"\n            (click)=\"closeClock()\">\n            Close\n          </button>\n        </div>\n\n        <div class=\"clock-summary\">\n          <button mat-button type=\"button\" class=\"clock-step\" [class.active]=\"clockStep === 'hour'\" (click)=\"goToClockStep('hour')\">\n            {{ hourControl.value || '00' }}\n          </button>\n          <span>:</span>\n          <button mat-button type=\"button\" class=\"clock-step\" [class.active]=\"clockStep === 'minute'\" (click)=\"goToClockStep('minute')\">\n            {{ minuteControl.value || '00' }}\n          </button>\n          @if (showSeconds) {\n            <span>:</span>\n            <button mat-button type=\"button\" class=\"clock-step\" [class.active]=\"clockStep === 'second'\" (click)=\"goToClockStep('second')\">\n              {{ secondControl.value || '00' }}\n            </button>\n          }\n        </div>\n\n        <div class=\"clock-face\" [class.clickable-face]=\"clockStep !== 'hour'\" [class.hour-face]=\"clockStep === 'hour'\" (click)=\"onClockFaceClick($event)\">\n          <div class=\"clock-hand clock-hour-hand\" [style.transform]=\"hourHandTransform\" [style.height]=\"hourHandHeight\"></div>\n          <div class=\"clock-hand clock-minute-hand\" [style.transform]=\"minuteHandTransform\" [style.height]=\"minuteHandHeight\"></div>\n\n          @if (clockStep === 'hour') {\n            @for (marker of hourMarkers; track marker.value) {\n              <button\n                type=\"button\"\n                class=\"clock-hour-label\"\n                [class.selected]=\"isHourSelected(marker.value)\"\n                [class.inner-ring]=\"marker.value >= 12\"\n                [style.left]=\"marker.left\"\n                [style.top]=\"marker.top\"\n                (click)=\"selectClockHour(marker.value, $event)\">\n                {{ marker.label }}\n              </button>\n            }\n          }\n\n          @if (clockStep === 'minute') {\n            <svg class=\"clock-ticks-svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n              @for (tick of minuteTicks; track tick.value) {\n                <line\n                  class=\"clock-tick-line\"\n                  [class.selected]=\"isMinuteSelected(tick.value)\"\n                  [attr.x1]=\"tick.x1\"\n                  [attr.y1]=\"tick.y1\"\n                  [attr.x2]=\"tick.x2\"\n                  [attr.y2]=\"tick.y2\"\n                  (click)=\"selectClockTick(tick.value, $event)\"></line>\n              }\n            </svg>\n            @for (tick of minuteTicks; track tick.value) {\n              <div\n                class=\"clock-tick-label\"\n                [class.selected]=\"isMinuteSelected(tick.value)\"\n                [style.left]=\"tick.labelLeft\"\n                [style.top]=\"tick.labelTop\"\n                (click)=\"selectClockTick(tick.value, $event)\">\n                {{ tick.label }}\n              </div>\n            }\n          }\n\n          @if (clockStep === 'second') {\n            <svg class=\"clock-ticks-svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n              @for (tick of secondTicks; track tick.value) {\n                <line\n                  class=\"clock-tick-line\"\n                  [class.selected]=\"isSecondSelected(tick.value)\"\n                  [attr.x1]=\"tick.x1\"\n                  [attr.y1]=\"tick.y1\"\n                  [attr.x2]=\"tick.x2\"\n                  [attr.y2]=\"tick.y2\"\n                  (click)=\"selectClockTick(tick.value, $event)\"></line>\n              }\n            </svg>\n            @for (tick of secondTicks; track tick.value) {\n              <div\n                class=\"clock-tick-label\"\n                [class.selected]=\"isSecondSelected(tick.value)\"\n                [style.left]=\"tick.labelLeft\"\n                [style.top]=\"tick.labelTop\"\n                (click)=\"selectClockTick(tick.value, $event)\">\n                {{ tick.label }}\n              </div>\n            }\n          }\n\n          <div class=\"clock-center-dot\"></div>\n        </div>\n\n        <div class=\"clock-help\">\n          @if (clockStep === 'hour') {\n            <span>Outer ring 00-11, inner ring 12-23.</span>\n          }\n          @if (clockStep === 'minute') {\n            <span>Click the dial. The nearest minute will be selected.</span>\n          }\n          @if (clockStep === 'second') {\n            <span>Click the dial. The nearest second will be selected.</span>\n          }\n        </div>\n\n        <div class=\"clock-footer\">\n          <span>{{ timeSummary }}</span>\n        </div>\n      </div>\n      </div>\n    }\n  }\n</div>\n", styles: [":host{display:block;width:100%}.datetime-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.date-field,.time-field{width:100%}.middle-actions{display:flex;align-items:center;gap:4px;justify-content:flex-start}.icon-action{flex:0 0 auto}.icon-action i{font-size:1rem;line-height:1}.time-row{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}.clock-backdrop{position:fixed;inset:0;z-index:1000;background:#0000002e}.clock-dialog{position:fixed;z-index:1001;top:50%;left:50%;width:min(92vw,360px);transform:translate(-50%,-50%)}.clock-panel{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid rgba(0,0,0,.12);border-radius:16px;background:#fff;box-shadow:0 18px 36px #0003}.clock-panel-header,.clock-summary,.clock-footer{display:flex;align-items:center;justify-content:space-between;gap:8px}.clock-panel-title{font-size:.95rem;font-weight:600}.clock-summary{justify-content:center;font-size:1.1rem}.clock-step{min-width:52px;font-weight:600}.clock-step.active{background:#1976d21f}.clock-face{position:relative;align-self:center;width:min(100%,280px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:radial-gradient(circle at center,rgba(25,118,210,.08) 0 16%,transparent 16% 100%),radial-gradient(circle at center,transparent 0 61%,rgba(25,118,210,.08) 61% 62%,transparent 62% 100%),radial-gradient(circle at center,#0000000a 0 100%)}.clock-face.clickable-face{cursor:crosshair}.clock-hand{position:absolute;top:50%;left:50%;width:2px;transform-origin:center bottom;background:#1976d2;border-radius:999px;z-index:1}.clock-hour-hand{background:#1976d2b8;width:4px}.clock-minute-hand{background:#1976d2;width:2px}.clock-hour-label{position:absolute;transform:translate(-50%,-50%);border:0;padding:0;margin:0;min-width:0;width:auto;height:auto;font-size:.72rem;line-height:1;background:transparent;box-shadow:none;color:#000000d1;cursor:pointer}.clock-hour-label.inner-ring{font-size:.68rem}.clock-hour-label.selected{color:#1976d2;font-weight:700}.clock-ticks-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.clock-tick-line{stroke:#00000057;stroke-width:1.5;stroke-linecap:round;cursor:pointer}.clock-tick-line.selected{stroke:#1976d2;stroke-width:2.5}.clock-tick-label{position:absolute;transform:translate(-50%,-50%);font-size:.68rem;line-height:1;color:#000000b8}.clock-tick-label.selected{color:#1976d2;font-weight:700}.clock-center-dot{position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);background:#1976d2;z-index:2}.hour-face .clock-hour-label:hover,.hour-face .clock-hour-label:focus-visible{color:#1976d2;outline:none}.clock-help,.clock-footer{font-size:.78rem;color:#000000ad}@media(min-width:720px){.time-row{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(min-width:960px){.datetime-wrapper.datetime-mode{display:grid;align-items:start;gap:8px;grid-template-columns:minmax(240px,2fr) auto repeat(2,minmax(84px,96px))}.datetime-wrapper.datetime-mode.has-seconds{grid-template-columns:minmax(240px,2fr) auto repeat(3,minmax(84px,96px))}.datetime-wrapper.datetime-mode .date-field{margin-bottom:0}.datetime-wrapper.datetime-mode .middle-actions{align-self:start;padding-top:4px}.datetime-wrapper.datetime-mode .time-row{display:contents}.datetime-wrapper.datetime-mode .clock-panel{grid-column:1/-1}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField$1, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel$1, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
+        ], ngImport: i0, template: "<div class=\"datetime-wrapper\" [class.datetime-mode]=\"isDateTime\" [class.has-seconds]=\"showSeconds\">\n  <mat-form-field class=\"date-field\">\n    @if (display) {\n      <mat-label>{{ display }}</mat-label>\n    }\n    <input\n      matInput\n      [matDatepicker]=\"picker\"\n      [placeholder]=\"placeHolder\"\n      [formControl]=\"dateControl\"\n      [disabled]=\"isDisabled\"\n      (dateChange)=\"markTouched()\"\n      (blur)=\"markTouched()\">\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n  </mat-form-field>\n\n  @if (isDateTime) {\n    <div class=\"middle-actions\">\n      <button\n        mat-icon-button\n        type=\"button\"\n        class=\"icon-action\"\n        [disabled]=\"isDisabled\"\n        title=\"Clear date and time\"\n        aria-label=\"Clear date and time\"\n        (click)=\"clear()\">\n        <i class=\"fal fa-eraser\"></i>\n      </button>\n\n      <button\n        mat-icon-button\n        type=\"button\"\n        class=\"icon-action\"\n        [disabled]=\"isDisabled\"\n        title=\"Open time clock\"\n        aria-label=\"Open time clock\"\n        (click)=\"openClock()\">\n        <i class=\"fal fa-clock\"></i>\n      </button>\n    </div>\n\n    <div class=\"time-row\">\n      <mat-form-field class=\"time-field\">\n        <mat-label>HH</mat-label>\n        <input\n          matInput\n          type=\"number\"\n          min=\"0\"\n          max=\"23\"\n          inputmode=\"numeric\"\n          [formControl]=\"hourControl\"\n          [disabled]=\"isDisabled\"\n          (input)=\"onTimePartInput('hour')\"\n          (blur)=\"onTimePartBlur('hour')\">\n      </mat-form-field>\n\n      <mat-form-field class=\"time-field\">\n        <mat-label>MM</mat-label>\n        <input\n          matInput\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          inputmode=\"numeric\"\n          [formControl]=\"minuteControl\"\n          [disabled]=\"isDisabled\"\n          (input)=\"onTimePartInput('minute')\"\n          (blur)=\"onTimePartBlur('minute')\">\n      </mat-form-field>\n\n      @if (showSeconds) {\n        <mat-form-field class=\"time-field\">\n          <mat-label>SS</mat-label>\n          <input\n            matInput\n            type=\"number\"\n            min=\"0\"\n            max=\"59\"\n            inputmode=\"numeric\"\n            [formControl]=\"secondControl\"\n            [disabled]=\"isDisabled\"\n            (input)=\"onTimePartInput('second')\"\n            (blur)=\"onTimePartBlur('second')\">\n        </mat-form-field>\n      }\n    </div>\n\n    @if (isClockOpen) {\n      <div class=\"clock-backdrop\" (click)=\"closeClock()\"></div>\n\n      <div class=\"clock-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"clock-panel\">\n        <div class=\"clock-panel-header\">\n          <div class=\"clock-panel-title\">{{ clockTitle }}</div>\n          <button\n            mat-button\n            type=\"button\"\n            class=\"clock-close\"\n            [disabled]=\"isDisabled\"\n            (click)=\"closeClock()\">\n            Close\n          </button>\n        </div>\n\n        <div class=\"clock-summary\">\n          <button mat-button type=\"button\" class=\"clock-step\" [class.active]=\"clockStep === 'hour'\" (click)=\"goToClockStep('hour')\">\n            {{ hourControl.value || '00' }}\n          </button>\n          <span>:</span>\n          <button mat-button type=\"button\" class=\"clock-step\" [class.active]=\"clockStep === 'minute'\" (click)=\"goToClockStep('minute')\">\n            {{ minuteControl.value || '00' }}\n          </button>\n          @if (showSeconds) {\n            <span>:</span>\n            <button mat-button type=\"button\" class=\"clock-step\" [class.active]=\"clockStep === 'second'\" (click)=\"goToClockStep('second')\">\n              {{ secondControl.value || '00' }}\n            </button>\n          }\n        </div>\n\n        <div class=\"clock-face\" [class.clickable-face]=\"clockStep !== 'hour'\" [class.hour-face]=\"clockStep === 'hour'\" (click)=\"onClockFaceClick($event)\">\n          <div class=\"clock-hand clock-hour-hand\" [style.transform]=\"hourHandTransform\" [style.height]=\"hourHandHeight\"></div>\n          <div class=\"clock-hand clock-minute-hand\" [style.transform]=\"minuteHandTransform\" [style.height]=\"minuteHandHeight\"></div>\n\n          @if (clockStep === 'hour') {\n            @for (marker of hourMarkers; track marker.value) {\n              <button\n                type=\"button\"\n                class=\"clock-hour-label\"\n                [class.selected]=\"isHourSelected(marker.value)\"\n                [class.inner-ring]=\"marker.value >= 12\"\n                [style.left]=\"marker.left\"\n                [style.top]=\"marker.top\"\n                (click)=\"selectClockHour(marker.value, $event)\">\n                {{ marker.label }}\n              </button>\n            }\n          }\n\n          @if (clockStep !== 'hour') {\n            <div\n              class=\"clock-hour-indicator\"\n              [class.inner-ring]=\"selectedHourMarker.value >= 12\"\n              [style.left]=\"selectedHourMarker.left\"\n              [style.top]=\"selectedHourMarker.top\">\n              {{ selectedHourMarker.label }}\n            </div>\n          }\n\n          @if (clockStep === 'minute') {\n            <svg class=\"clock-ticks-svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n              @for (tick of minuteTicks; track tick.value) {\n                <line\n                  class=\"clock-tick-line\"\n                  [class.selected]=\"isMinuteSelected(tick.value)\"\n                  [attr.x1]=\"tick.x1\"\n                  [attr.y1]=\"tick.y1\"\n                  [attr.x2]=\"tick.x2\"\n                  [attr.y2]=\"tick.y2\"\n                  (click)=\"selectClockTick(tick.value, $event)\"></line>\n              }\n            </svg>\n            @for (tick of minuteTicks; track tick.value) {\n              <div\n                class=\"clock-tick-label\"\n                [class.selected]=\"isMinuteSelected(tick.value)\"\n                [style.left]=\"tick.labelLeft\"\n                [style.top]=\"tick.labelTop\"\n                (click)=\"selectClockTick(tick.value, $event)\">\n                {{ tick.label }}\n              </div>\n            }\n          }\n\n          @if (clockStep === 'second') {\n            <svg class=\"clock-ticks-svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n              @for (tick of secondTicks; track tick.value) {\n                <line\n                  class=\"clock-tick-line\"\n                  [class.selected]=\"isSecondSelected(tick.value)\"\n                  [attr.x1]=\"tick.x1\"\n                  [attr.y1]=\"tick.y1\"\n                  [attr.x2]=\"tick.x2\"\n                  [attr.y2]=\"tick.y2\"\n                  (click)=\"selectClockTick(tick.value, $event)\"></line>\n              }\n            </svg>\n            @for (tick of secondTicks; track tick.value) {\n              <div\n                class=\"clock-tick-label\"\n                [class.selected]=\"isSecondSelected(tick.value)\"\n                [style.left]=\"tick.labelLeft\"\n                [style.top]=\"tick.labelTop\"\n                (click)=\"selectClockTick(tick.value, $event)\">\n                {{ tick.label }}\n              </div>\n            }\n          }\n\n          <div class=\"clock-center-dot\"></div>\n        </div>\n\n        <div class=\"clock-help\">\n          @if (clockStep === 'hour') {\n            <span>Outer ring 00-11, inner ring 12-23.</span>\n          }\n          @if (clockStep === 'minute') {\n            <span>Click the dial. The nearest minute will be selected.</span>\n          }\n          @if (clockStep === 'second') {\n            <span>Click the dial. The nearest second will be selected.</span>\n          }\n        </div>\n\n        <div class=\"clock-footer\">\n          <span>{{ timeSummary }}</span>\n        </div>\n      </div>\n      </div>\n    }\n  }\n</div>\n", styles: [":host{display:block;width:100%;container-type:inline-size}.datetime-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.date-field,.time-field{width:100%}.middle-actions{display:flex;align-items:center;gap:4px;justify-content:flex-start}.icon-action{flex:0 0 auto}.icon-action i{font-size:1rem;line-height:1}.time-row{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}.clock-backdrop{position:fixed;inset:0;z-index:1000;background:#0000002e}.clock-dialog{position:fixed;z-index:1001;top:50%;left:50%;width:min(92vw,360px);transform:translate(-50%,-50%)}.clock-panel{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid rgba(0,0,0,.12);border-radius:16px;background:#fff;box-shadow:0 18px 36px #0003}.clock-panel-header,.clock-summary,.clock-footer{display:flex;align-items:center;justify-content:space-between;gap:8px}.clock-panel-title{font-size:.95rem;font-weight:600}.clock-summary{justify-content:center;font-size:1.1rem}.clock-step{min-width:52px;font-weight:600}.clock-step.active{background:#1976d21f}.clock-face{position:relative;align-self:center;width:min(100%,280px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:radial-gradient(circle at center,rgba(25,118,210,.08) 0 16%,transparent 16% 100%),radial-gradient(circle at center,transparent 0 61%,rgba(25,118,210,.08) 61% 62%,transparent 62% 100%),radial-gradient(circle at center,#0000000a 0 100%)}.clock-face.clickable-face{cursor:crosshair}.clock-hand{position:absolute;top:50%;left:50%;width:2px;transform-origin:center bottom;background:#1976d2;border-radius:999px;z-index:1}.clock-hour-hand{background:#1976d2b8;width:4px}.clock-minute-hand{background:#1976d2;width:2px}.clock-hour-label{position:absolute;transform:translate(-50%,-50%);border:0;padding:0;margin:0;min-width:0;width:auto;height:auto;font-size:.72rem;line-height:1;background:transparent;box-shadow:none;color:#000000d1;cursor:pointer}.clock-hour-label.inner-ring{font-size:.68rem}.clock-hour-label.selected{color:#1976d2;font-weight:700}.clock-hour-indicator{position:absolute;transform:translate(-50%,-50%);font-size:.76rem;line-height:1;font-weight:800;color:#1976d2;z-index:2}.clock-hour-indicator.inner-ring{font-size:.7rem}.clock-ticks-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.clock-tick-line{stroke:#00000057;stroke-width:1.5;stroke-linecap:round;cursor:pointer}.clock-tick-line.selected{stroke:#1976d2;stroke-width:2.5}.clock-tick-label{position:absolute;transform:translate(-50%,-50%);font-size:.68rem;line-height:1;color:#000000b8}.clock-tick-label.selected{color:#1976d2;font-weight:700}.clock-center-dot{position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);background:#1976d2;z-index:2}.hour-face .clock-hour-label:hover,.hour-face .clock-hour-label:focus-visible{color:#1976d2;outline:none}.clock-help,.clock-footer{font-size:.78rem;color:#000000ad}@container (min-width: 420px){.time-row{grid-template-columns:repeat(3,minmax(0,1fr))}}@container (min-width: 760px){.datetime-wrapper.datetime-mode{display:grid;align-items:start;gap:8px;grid-template-columns:minmax(220px,2fr) auto repeat(2,minmax(74px,88px))}.datetime-wrapper.datetime-mode.has-seconds{grid-template-columns:minmax(220px,2fr) auto repeat(3,minmax(74px,88px))}.datetime-wrapper.datetime-mode .date-field{margin-bottom:0}.datetime-wrapper.datetime-mode .middle-actions{align-self:start;padding-top:4px}.datetime-wrapper.datetime-mode .time-row{display:contents}.datetime-wrapper.datetime-mode .clock-panel{grid-column:1/-1}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField$1, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel$1, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatetimeComponent, decorators: [{
             type: Component,
@@ -3969,7 +4096,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => DatetimeComponent)
                         }
-                    ], imports: [ReactiveFormsModule, MatFormField$1, MatLabel$1, MatInput, MatDatepickerInput, MatDatepickerToggle, MatDatepicker, MatSuffix, MatButton], template: "<div class=\"datetime-wrapper\" [class.datetime-mode]=\"isDateTime\" [class.has-seconds]=\"showSeconds\">\n  <mat-form-field class=\"date-field\">\n    @if (display) {\n      <mat-label>{{ display }}</mat-label>\n    }\n    <input\n      matInput\n      [matDatepicker]=\"picker\"\n      [placeholder]=\"placeHolder\"\n      [formControl]=\"dateControl\"\n      [disabled]=\"isDisabled\"\n      (dateChange)=\"markTouched()\"\n      (blur)=\"markTouched()\">\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n  </mat-form-field>\n\n  @if (isDateTime) {\n    <div class=\"middle-actions\">\n      <button\n        mat-icon-button\n        type=\"button\"\n        class=\"icon-action\"\n        [disabled]=\"isDisabled\"\n        title=\"Clear date and time\"\n        aria-label=\"Clear date and time\"\n        (click)=\"clear()\">\n        <i class=\"fal fa-eraser\"></i>\n      </button>\n\n      <button\n        mat-icon-button\n        type=\"button\"\n        class=\"icon-action\"\n        [disabled]=\"isDisabled\"\n        title=\"Open time clock\"\n        aria-label=\"Open time clock\"\n        (click)=\"openClock()\">\n        <i class=\"fal fa-clock\"></i>\n      </button>\n    </div>\n\n    <div class=\"time-row\">\n      <mat-form-field class=\"time-field\">\n        <mat-label>HH</mat-label>\n        <input\n          matInput\n          type=\"number\"\n          min=\"0\"\n          max=\"23\"\n          inputmode=\"numeric\"\n          [formControl]=\"hourControl\"\n          [disabled]=\"isDisabled\"\n          (input)=\"onTimePartInput('hour')\"\n          (blur)=\"onTimePartBlur('hour')\">\n      </mat-form-field>\n\n      <mat-form-field class=\"time-field\">\n        <mat-label>MM</mat-label>\n        <input\n          matInput\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          inputmode=\"numeric\"\n          [formControl]=\"minuteControl\"\n          [disabled]=\"isDisabled\"\n          (input)=\"onTimePartInput('minute')\"\n          (blur)=\"onTimePartBlur('minute')\">\n      </mat-form-field>\n\n      @if (showSeconds) {\n        <mat-form-field class=\"time-field\">\n          <mat-label>SS</mat-label>\n          <input\n            matInput\n            type=\"number\"\n            min=\"0\"\n            max=\"59\"\n            inputmode=\"numeric\"\n            [formControl]=\"secondControl\"\n            [disabled]=\"isDisabled\"\n            (input)=\"onTimePartInput('second')\"\n            (blur)=\"onTimePartBlur('second')\">\n        </mat-form-field>\n      }\n    </div>\n\n    @if (isClockOpen) {\n      <div class=\"clock-backdrop\" (click)=\"closeClock()\"></div>\n\n      <div class=\"clock-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"clock-panel\">\n        <div class=\"clock-panel-header\">\n          <div class=\"clock-panel-title\">{{ clockTitle }}</div>\n          <button\n            mat-button\n            type=\"button\"\n            class=\"clock-close\"\n            [disabled]=\"isDisabled\"\n            (click)=\"closeClock()\">\n            Close\n          </button>\n        </div>\n\n        <div class=\"clock-summary\">\n          <button mat-button type=\"button\" class=\"clock-step\" [class.active]=\"clockStep === 'hour'\" (click)=\"goToClockStep('hour')\">\n            {{ hourControl.value || '00' }}\n          </button>\n          <span>:</span>\n          <button mat-button type=\"button\" class=\"clock-step\" [class.active]=\"clockStep === 'minute'\" (click)=\"goToClockStep('minute')\">\n            {{ minuteControl.value || '00' }}\n          </button>\n          @if (showSeconds) {\n            <span>:</span>\n            <button mat-button type=\"button\" class=\"clock-step\" [class.active]=\"clockStep === 'second'\" (click)=\"goToClockStep('second')\">\n              {{ secondControl.value || '00' }}\n            </button>\n          }\n        </div>\n\n        <div class=\"clock-face\" [class.clickable-face]=\"clockStep !== 'hour'\" [class.hour-face]=\"clockStep === 'hour'\" (click)=\"onClockFaceClick($event)\">\n          <div class=\"clock-hand clock-hour-hand\" [style.transform]=\"hourHandTransform\" [style.height]=\"hourHandHeight\"></div>\n          <div class=\"clock-hand clock-minute-hand\" [style.transform]=\"minuteHandTransform\" [style.height]=\"minuteHandHeight\"></div>\n\n          @if (clockStep === 'hour') {\n            @for (marker of hourMarkers; track marker.value) {\n              <button\n                type=\"button\"\n                class=\"clock-hour-label\"\n                [class.selected]=\"isHourSelected(marker.value)\"\n                [class.inner-ring]=\"marker.value >= 12\"\n                [style.left]=\"marker.left\"\n                [style.top]=\"marker.top\"\n                (click)=\"selectClockHour(marker.value, $event)\">\n                {{ marker.label }}\n              </button>\n            }\n          }\n\n          @if (clockStep === 'minute') {\n            <svg class=\"clock-ticks-svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n              @for (tick of minuteTicks; track tick.value) {\n                <line\n                  class=\"clock-tick-line\"\n                  [class.selected]=\"isMinuteSelected(tick.value)\"\n                  [attr.x1]=\"tick.x1\"\n                  [attr.y1]=\"tick.y1\"\n                  [attr.x2]=\"tick.x2\"\n                  [attr.y2]=\"tick.y2\"\n                  (click)=\"selectClockTick(tick.value, $event)\"></line>\n              }\n            </svg>\n            @for (tick of minuteTicks; track tick.value) {\n              <div\n                class=\"clock-tick-label\"\n                [class.selected]=\"isMinuteSelected(tick.value)\"\n                [style.left]=\"tick.labelLeft\"\n                [style.top]=\"tick.labelTop\"\n                (click)=\"selectClockTick(tick.value, $event)\">\n                {{ tick.label }}\n              </div>\n            }\n          }\n\n          @if (clockStep === 'second') {\n            <svg class=\"clock-ticks-svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n              @for (tick of secondTicks; track tick.value) {\n                <line\n                  class=\"clock-tick-line\"\n                  [class.selected]=\"isSecondSelected(tick.value)\"\n                  [attr.x1]=\"tick.x1\"\n                  [attr.y1]=\"tick.y1\"\n                  [attr.x2]=\"tick.x2\"\n                  [attr.y2]=\"tick.y2\"\n                  (click)=\"selectClockTick(tick.value, $event)\"></line>\n              }\n            </svg>\n            @for (tick of secondTicks; track tick.value) {\n              <div\n                class=\"clock-tick-label\"\n                [class.selected]=\"isSecondSelected(tick.value)\"\n                [style.left]=\"tick.labelLeft\"\n                [style.top]=\"tick.labelTop\"\n                (click)=\"selectClockTick(tick.value, $event)\">\n                {{ tick.label }}\n              </div>\n            }\n          }\n\n          <div class=\"clock-center-dot\"></div>\n        </div>\n\n        <div class=\"clock-help\">\n          @if (clockStep === 'hour') {\n            <span>Outer ring 00-11, inner ring 12-23.</span>\n          }\n          @if (clockStep === 'minute') {\n            <span>Click the dial. The nearest minute will be selected.</span>\n          }\n          @if (clockStep === 'second') {\n            <span>Click the dial. The nearest second will be selected.</span>\n          }\n        </div>\n\n        <div class=\"clock-footer\">\n          <span>{{ timeSummary }}</span>\n        </div>\n      </div>\n      </div>\n    }\n  }\n</div>\n", styles: [":host{display:block;width:100%}.datetime-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.date-field,.time-field{width:100%}.middle-actions{display:flex;align-items:center;gap:4px;justify-content:flex-start}.icon-action{flex:0 0 auto}.icon-action i{font-size:1rem;line-height:1}.time-row{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}.clock-backdrop{position:fixed;inset:0;z-index:1000;background:#0000002e}.clock-dialog{position:fixed;z-index:1001;top:50%;left:50%;width:min(92vw,360px);transform:translate(-50%,-50%)}.clock-panel{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid rgba(0,0,0,.12);border-radius:16px;background:#fff;box-shadow:0 18px 36px #0003}.clock-panel-header,.clock-summary,.clock-footer{display:flex;align-items:center;justify-content:space-between;gap:8px}.clock-panel-title{font-size:.95rem;font-weight:600}.clock-summary{justify-content:center;font-size:1.1rem}.clock-step{min-width:52px;font-weight:600}.clock-step.active{background:#1976d21f}.clock-face{position:relative;align-self:center;width:min(100%,280px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:radial-gradient(circle at center,rgba(25,118,210,.08) 0 16%,transparent 16% 100%),radial-gradient(circle at center,transparent 0 61%,rgba(25,118,210,.08) 61% 62%,transparent 62% 100%),radial-gradient(circle at center,#0000000a 0 100%)}.clock-face.clickable-face{cursor:crosshair}.clock-hand{position:absolute;top:50%;left:50%;width:2px;transform-origin:center bottom;background:#1976d2;border-radius:999px;z-index:1}.clock-hour-hand{background:#1976d2b8;width:4px}.clock-minute-hand{background:#1976d2;width:2px}.clock-hour-label{position:absolute;transform:translate(-50%,-50%);border:0;padding:0;margin:0;min-width:0;width:auto;height:auto;font-size:.72rem;line-height:1;background:transparent;box-shadow:none;color:#000000d1;cursor:pointer}.clock-hour-label.inner-ring{font-size:.68rem}.clock-hour-label.selected{color:#1976d2;font-weight:700}.clock-ticks-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.clock-tick-line{stroke:#00000057;stroke-width:1.5;stroke-linecap:round;cursor:pointer}.clock-tick-line.selected{stroke:#1976d2;stroke-width:2.5}.clock-tick-label{position:absolute;transform:translate(-50%,-50%);font-size:.68rem;line-height:1;color:#000000b8}.clock-tick-label.selected{color:#1976d2;font-weight:700}.clock-center-dot{position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);background:#1976d2;z-index:2}.hour-face .clock-hour-label:hover,.hour-face .clock-hour-label:focus-visible{color:#1976d2;outline:none}.clock-help,.clock-footer{font-size:.78rem;color:#000000ad}@media(min-width:720px){.time-row{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(min-width:960px){.datetime-wrapper.datetime-mode{display:grid;align-items:start;gap:8px;grid-template-columns:minmax(240px,2fr) auto repeat(2,minmax(84px,96px))}.datetime-wrapper.datetime-mode.has-seconds{grid-template-columns:minmax(240px,2fr) auto repeat(3,minmax(84px,96px))}.datetime-wrapper.datetime-mode .date-field{margin-bottom:0}.datetime-wrapper.datetime-mode .middle-actions{align-self:start;padding-top:4px}.datetime-wrapper.datetime-mode .time-row{display:contents}.datetime-wrapper.datetime-mode .clock-panel{grid-column:1/-1}}\n"] }]
+                    ], imports: [ReactiveFormsModule, MatFormField$1, MatLabel$1, MatInput, MatDatepickerInput, MatDatepickerToggle, MatDatepicker, MatSuffix, MatButton], template: "<div class=\"datetime-wrapper\" [class.datetime-mode]=\"isDateTime\" [class.has-seconds]=\"showSeconds\">\n  <mat-form-field class=\"date-field\">\n    @if (display) {\n      <mat-label>{{ display }}</mat-label>\n    }\n    <input\n      matInput\n      [matDatepicker]=\"picker\"\n      [placeholder]=\"placeHolder\"\n      [formControl]=\"dateControl\"\n      [disabled]=\"isDisabled\"\n      (dateChange)=\"markTouched()\"\n      (blur)=\"markTouched()\">\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n  </mat-form-field>\n\n  @if (isDateTime) {\n    <div class=\"middle-actions\">\n      <button\n        mat-icon-button\n        type=\"button\"\n        class=\"icon-action\"\n        [disabled]=\"isDisabled\"\n        title=\"Clear date and time\"\n        aria-label=\"Clear date and time\"\n        (click)=\"clear()\">\n        <i class=\"fal fa-eraser\"></i>\n      </button>\n\n      <button\n        mat-icon-button\n        type=\"button\"\n        class=\"icon-action\"\n        [disabled]=\"isDisabled\"\n        title=\"Open time clock\"\n        aria-label=\"Open time clock\"\n        (click)=\"openClock()\">\n        <i class=\"fal fa-clock\"></i>\n      </button>\n    </div>\n\n    <div class=\"time-row\">\n      <mat-form-field class=\"time-field\">\n        <mat-label>HH</mat-label>\n        <input\n          matInput\n          type=\"number\"\n          min=\"0\"\n          max=\"23\"\n          inputmode=\"numeric\"\n          [formControl]=\"hourControl\"\n          [disabled]=\"isDisabled\"\n          (input)=\"onTimePartInput('hour')\"\n          (blur)=\"onTimePartBlur('hour')\">\n      </mat-form-field>\n\n      <mat-form-field class=\"time-field\">\n        <mat-label>MM</mat-label>\n        <input\n          matInput\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          inputmode=\"numeric\"\n          [formControl]=\"minuteControl\"\n          [disabled]=\"isDisabled\"\n          (input)=\"onTimePartInput('minute')\"\n          (blur)=\"onTimePartBlur('minute')\">\n      </mat-form-field>\n\n      @if (showSeconds) {\n        <mat-form-field class=\"time-field\">\n          <mat-label>SS</mat-label>\n          <input\n            matInput\n            type=\"number\"\n            min=\"0\"\n            max=\"59\"\n            inputmode=\"numeric\"\n            [formControl]=\"secondControl\"\n            [disabled]=\"isDisabled\"\n            (input)=\"onTimePartInput('second')\"\n            (blur)=\"onTimePartBlur('second')\">\n        </mat-form-field>\n      }\n    </div>\n\n    @if (isClockOpen) {\n      <div class=\"clock-backdrop\" (click)=\"closeClock()\"></div>\n\n      <div class=\"clock-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"clock-panel\">\n        <div class=\"clock-panel-header\">\n          <div class=\"clock-panel-title\">{{ clockTitle }}</div>\n          <button\n            mat-button\n            type=\"button\"\n            class=\"clock-close\"\n            [disabled]=\"isDisabled\"\n            (click)=\"closeClock()\">\n            Close\n          </button>\n        </div>\n\n        <div class=\"clock-summary\">\n          <button mat-button type=\"button\" class=\"clock-step\" [class.active]=\"clockStep === 'hour'\" (click)=\"goToClockStep('hour')\">\n            {{ hourControl.value || '00' }}\n          </button>\n          <span>:</span>\n          <button mat-button type=\"button\" class=\"clock-step\" [class.active]=\"clockStep === 'minute'\" (click)=\"goToClockStep('minute')\">\n            {{ minuteControl.value || '00' }}\n          </button>\n          @if (showSeconds) {\n            <span>:</span>\n            <button mat-button type=\"button\" class=\"clock-step\" [class.active]=\"clockStep === 'second'\" (click)=\"goToClockStep('second')\">\n              {{ secondControl.value || '00' }}\n            </button>\n          }\n        </div>\n\n        <div class=\"clock-face\" [class.clickable-face]=\"clockStep !== 'hour'\" [class.hour-face]=\"clockStep === 'hour'\" (click)=\"onClockFaceClick($event)\">\n          <div class=\"clock-hand clock-hour-hand\" [style.transform]=\"hourHandTransform\" [style.height]=\"hourHandHeight\"></div>\n          <div class=\"clock-hand clock-minute-hand\" [style.transform]=\"minuteHandTransform\" [style.height]=\"minuteHandHeight\"></div>\n\n          @if (clockStep === 'hour') {\n            @for (marker of hourMarkers; track marker.value) {\n              <button\n                type=\"button\"\n                class=\"clock-hour-label\"\n                [class.selected]=\"isHourSelected(marker.value)\"\n                [class.inner-ring]=\"marker.value >= 12\"\n                [style.left]=\"marker.left\"\n                [style.top]=\"marker.top\"\n                (click)=\"selectClockHour(marker.value, $event)\">\n                {{ marker.label }}\n              </button>\n            }\n          }\n\n          @if (clockStep !== 'hour') {\n            <div\n              class=\"clock-hour-indicator\"\n              [class.inner-ring]=\"selectedHourMarker.value >= 12\"\n              [style.left]=\"selectedHourMarker.left\"\n              [style.top]=\"selectedHourMarker.top\">\n              {{ selectedHourMarker.label }}\n            </div>\n          }\n\n          @if (clockStep === 'minute') {\n            <svg class=\"clock-ticks-svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n              @for (tick of minuteTicks; track tick.value) {\n                <line\n                  class=\"clock-tick-line\"\n                  [class.selected]=\"isMinuteSelected(tick.value)\"\n                  [attr.x1]=\"tick.x1\"\n                  [attr.y1]=\"tick.y1\"\n                  [attr.x2]=\"tick.x2\"\n                  [attr.y2]=\"tick.y2\"\n                  (click)=\"selectClockTick(tick.value, $event)\"></line>\n              }\n            </svg>\n            @for (tick of minuteTicks; track tick.value) {\n              <div\n                class=\"clock-tick-label\"\n                [class.selected]=\"isMinuteSelected(tick.value)\"\n                [style.left]=\"tick.labelLeft\"\n                [style.top]=\"tick.labelTop\"\n                (click)=\"selectClockTick(tick.value, $event)\">\n                {{ tick.label }}\n              </div>\n            }\n          }\n\n          @if (clockStep === 'second') {\n            <svg class=\"clock-ticks-svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n              @for (tick of secondTicks; track tick.value) {\n                <line\n                  class=\"clock-tick-line\"\n                  [class.selected]=\"isSecondSelected(tick.value)\"\n                  [attr.x1]=\"tick.x1\"\n                  [attr.y1]=\"tick.y1\"\n                  [attr.x2]=\"tick.x2\"\n                  [attr.y2]=\"tick.y2\"\n                  (click)=\"selectClockTick(tick.value, $event)\"></line>\n              }\n            </svg>\n            @for (tick of secondTicks; track tick.value) {\n              <div\n                class=\"clock-tick-label\"\n                [class.selected]=\"isSecondSelected(tick.value)\"\n                [style.left]=\"tick.labelLeft\"\n                [style.top]=\"tick.labelTop\"\n                (click)=\"selectClockTick(tick.value, $event)\">\n                {{ tick.label }}\n              </div>\n            }\n          }\n\n          <div class=\"clock-center-dot\"></div>\n        </div>\n\n        <div class=\"clock-help\">\n          @if (clockStep === 'hour') {\n            <span>Outer ring 00-11, inner ring 12-23.</span>\n          }\n          @if (clockStep === 'minute') {\n            <span>Click the dial. The nearest minute will be selected.</span>\n          }\n          @if (clockStep === 'second') {\n            <span>Click the dial. The nearest second will be selected.</span>\n          }\n        </div>\n\n        <div class=\"clock-footer\">\n          <span>{{ timeSummary }}</span>\n        </div>\n      </div>\n      </div>\n    }\n  }\n</div>\n", styles: [":host{display:block;width:100%;container-type:inline-size}.datetime-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.date-field,.time-field{width:100%}.middle-actions{display:flex;align-items:center;gap:4px;justify-content:flex-start}.icon-action{flex:0 0 auto}.icon-action i{font-size:1rem;line-height:1}.time-row{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}.clock-backdrop{position:fixed;inset:0;z-index:1000;background:#0000002e}.clock-dialog{position:fixed;z-index:1001;top:50%;left:50%;width:min(92vw,360px);transform:translate(-50%,-50%)}.clock-panel{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid rgba(0,0,0,.12);border-radius:16px;background:#fff;box-shadow:0 18px 36px #0003}.clock-panel-header,.clock-summary,.clock-footer{display:flex;align-items:center;justify-content:space-between;gap:8px}.clock-panel-title{font-size:.95rem;font-weight:600}.clock-summary{justify-content:center;font-size:1.1rem}.clock-step{min-width:52px;font-weight:600}.clock-step.active{background:#1976d21f}.clock-face{position:relative;align-self:center;width:min(100%,280px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:radial-gradient(circle at center,rgba(25,118,210,.08) 0 16%,transparent 16% 100%),radial-gradient(circle at center,transparent 0 61%,rgba(25,118,210,.08) 61% 62%,transparent 62% 100%),radial-gradient(circle at center,#0000000a 0 100%)}.clock-face.clickable-face{cursor:crosshair}.clock-hand{position:absolute;top:50%;left:50%;width:2px;transform-origin:center bottom;background:#1976d2;border-radius:999px;z-index:1}.clock-hour-hand{background:#1976d2b8;width:4px}.clock-minute-hand{background:#1976d2;width:2px}.clock-hour-label{position:absolute;transform:translate(-50%,-50%);border:0;padding:0;margin:0;min-width:0;width:auto;height:auto;font-size:.72rem;line-height:1;background:transparent;box-shadow:none;color:#000000d1;cursor:pointer}.clock-hour-label.inner-ring{font-size:.68rem}.clock-hour-label.selected{color:#1976d2;font-weight:700}.clock-hour-indicator{position:absolute;transform:translate(-50%,-50%);font-size:.76rem;line-height:1;font-weight:800;color:#1976d2;z-index:2}.clock-hour-indicator.inner-ring{font-size:.7rem}.clock-ticks-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.clock-tick-line{stroke:#00000057;stroke-width:1.5;stroke-linecap:round;cursor:pointer}.clock-tick-line.selected{stroke:#1976d2;stroke-width:2.5}.clock-tick-label{position:absolute;transform:translate(-50%,-50%);font-size:.68rem;line-height:1;color:#000000b8}.clock-tick-label.selected{color:#1976d2;font-weight:700}.clock-center-dot{position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);background:#1976d2;z-index:2}.hour-face .clock-hour-label:hover,.hour-face .clock-hour-label:focus-visible{color:#1976d2;outline:none}.clock-help,.clock-footer{font-size:.78rem;color:#000000ad}@container (min-width: 420px){.time-row{grid-template-columns:repeat(3,minmax(0,1fr))}}@container (min-width: 760px){.datetime-wrapper.datetime-mode{display:grid;align-items:start;gap:8px;grid-template-columns:minmax(220px,2fr) auto repeat(2,minmax(74px,88px))}.datetime-wrapper.datetime-mode.has-seconds{grid-template-columns:minmax(220px,2fr) auto repeat(3,minmax(74px,88px))}.datetime-wrapper.datetime-mode .date-field{margin-bottom:0}.datetime-wrapper.datetime-mode .middle-actions{align-self:start;padding-top:4px}.datetime-wrapper.datetime-mode .time-row{display:contents}.datetime-wrapper.datetime-mode .clock-panel{grid-column:1/-1}}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {