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

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, PLATFORM_ID, Optional, ContentChild, ViewEncapsulation, NgModule, SecurityContext, forwardRef } from '@angular/core';
-import { Subject, firstValueFrom, BehaviorSubject, Subscription, of, combineLatest, forkJoin, throwError } from 'rxjs';
+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 * 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';
@@ -12,12 +12,11 @@ import * as i2 from '@angular/router';
 import { NavigationEnd, RouterLink, RouterModule } from '@angular/router';
 import { MatButton, MatButtonModule } from '@angular/material/button';
 import * as i1$1 from '@angular/platform-browser';
-import { BrowserModule } from '@angular/platform-browser';
 import * as i5 from '@kolkov/angular-editor';
 import { AngularEditorModule } from '@kolkov/angular-editor';
 import { switchMap, map, tap, filter, catchError, take, mergeMap, retryWhen, scan, delay, first, distinctUntilChanged, debounceTime } from 'rxjs/operators';
 import { MatSort, MatSortModule } from '@angular/material/sort';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatPaginator, MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
 import { MatColumnDef, MatTableDataSource, MatTable, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, MatTableModule } from '@angular/material/table';
 import { MatProgressSpinner, MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatCard, MatCardContent, MatCardActions, MatCardHeader, MatCardTitle, MatCardModule } from '@angular/material/card';
@@ -26,27 +25,27 @@ import { MatError, MatFormField, MatInput, MatLabel, MatInputModule, MatSuffix }
 import * as i4 from '@ctrl/ngx-codemirror';
 import { CodemirrorModule, CodemirrorComponent } from '@ctrl/ngx-codemirror';
 import * as i1$3 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule, UntypedFormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, UntypedFormControl, ReactiveFormsModule, Validators, FormControl } from '@angular/forms';
 import { MatProgressBar, MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatDatepickerInput, MatDatepickerToggle, MatDatepicker, MatDatepickerModule } from '@angular/material/datepicker';
-import * as i2$1 from 'ngx-mat-datetime-picker-v2';
 import { NgxMatDatetimePickerModule, NgxMatTimepickerComponent, NgxMatNativeDateModule } from 'ngx-mat-datetime-picker-v2';
+import moment from 'moment';
+import * as i1$4 from '@ngx-translate/core';
+import { TranslateDefaultParser } from '@ngx-translate/core';
 import { MatSelect, MatOption, MatSelectModule } from '@angular/material/select';
 import { trigger, state, style, transition, animate } from '@angular/animations';
-import prettier from 'node_modules/prettier/esm/standalone.mjs';
-import parserTypescript from 'node_modules/prettier/esm/parser-typescript.mjs';
-import parserBabel from 'node_modules/prettier/esm/parser-babel.mjs';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatListItem, MatListItemIcon, MatListItemTitle } from '@angular/material/list';
+import * as prettier from 'prettier/standalone';
+import * as parserTypescript from 'prettier/plugins/typescript';
+import * as parserBabel from 'prettier/plugins/babel';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatFormFieldModule, MatFormField as MatFormField$1, MatLabel as MatLabel$1 } from '@angular/material/form-field';
 import { jwtDecode } from 'jwt-decode';
 import { CdkDrag, CdkDragHandle, DragDropModule } from '@angular/cdk/drag-drop';
 import FileSaver from 'file-saver';
 import JSZip from 'jszip';
-import { TranslateDefaultParser } from '@ngx-translate/core';
 import { MatAutocompleteTrigger, MatAutocomplete, MatAutocompleteModule } from '@angular/material/autocomplete';
-import moment from 'moment';
 import { MAT_DATE_LOCALE } from '@angular/material/core';
 import { AngularResizeEventModule } from 'angular-resize-event';
 
@@ -223,7 +222,10 @@ class RouteDirective {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: RouteDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[glowwRoute]' }]
+            args: [{
+                    selector: '[glowwRoute]',
+                    standalone: true
+                }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2.Router }], propDecorators: { dlg: [{
                 type: Input
             }], onClick: [{
@@ -245,7 +247,10 @@ class SafeHtmlPipe {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SafeHtmlPipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'safeHtml' }]
+            args: [{
+                    name: 'safeHtml',
+                    standalone: true
+                }]
         }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
 
 class ConfirmationComponent {
@@ -455,7 +460,10 @@ class FileSinkDirective {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FileSinkDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[glowwFileSink]' }]
+            args: [{
+                    selector: '[glowwFileSink]',
+                    standalone: true
+                }]
         }], propDecorators: { fileOver: [{
                 type: HostBinding,
                 args: ['class.fileover']
@@ -739,8 +747,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 args: [MatColumnDef]
             }] } });
 
+class GlowwI18nService {
+    constructor(translate) {
+        this.translate = translate;
+    }
+    get langChanges$() {
+        return this.translate?.onLangChange ?? of(null);
+    }
+    instant(key, fallback) {
+        if (!this.translate) {
+            return fallback;
+        }
+        const translated = this.translate.instant(key);
+        return translated && translated !== key ? translated : fallback;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: GlowwI18nService, deps: [{ token: i1$4.TranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: GlowwI18nService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: GlowwI18nService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1$4.TranslateService, decorators: [{
+                    type: Optional
+                }] }] });
+
 class FilterFormComponent {
-    constructor() {
+    constructor(i18n) {
+        this.i18n = i18n;
         this.filter = new EventEmitter();
     }
     ngOnInit() {
@@ -748,13 +781,16 @@ class FilterFormComponent {
     onFilter() {
         this.filter.emit("xxx");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: FilterFormComponent, isStandalone: true, selector: "glw-filter-form", outputs: { filter: "filter" }, ngImport: i0, template: "<mat-card appearance=\"outlined\">\r\n  <mat-card-content>\r\n    <ng-content></ng-content>\r\n  </mat-card-content>\r\n  <mat-card-actions align=\"end\">\r\n    <button mat-stroked-button color=\"accent\" (click)=\"onFilter()\">\r\n      <mat-icon>search</mat-icon>\r\n      Filter\r\n    </button>\r\n  </mat-card-actions>\r\n</mat-card>", styles: [""], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { 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"] }] }); }
+    get filterLabel() {
+        return this.i18n.instant('COMMON.FILTER', 'Filter');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterFormComponent, deps: [{ token: GlowwI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: FilterFormComponent, isStandalone: true, selector: "glw-filter-form", outputs: { filter: "filter" }, ngImport: i0, template: "<mat-card appearance=\"outlined\">\r\n  <mat-card-content>\r\n    <ng-content></ng-content>\r\n  </mat-card-content>\r\n  <mat-card-actions align=\"end\">\n    <button mat-stroked-button color=\"accent\" (click)=\"onFilter()\">\n      <mat-icon>search</mat-icon>\n      {{ filterLabel }}\n    </button>\n  </mat-card-actions>\n</mat-card>\n", styles: [""], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'glw-filter-form', imports: [MatCard, MatCardContent, MatCardActions, MatButton, MatIcon], template: "<mat-card appearance=\"outlined\">\r\n  <mat-card-content>\r\n    <ng-content></ng-content>\r\n  </mat-card-content>\r\n  <mat-card-actions align=\"end\">\r\n    <button mat-stroked-button color=\"accent\" (click)=\"onFilter()\">\r\n      <mat-icon>search</mat-icon>\r\n      Filter\r\n    </button>\r\n  </mat-card-actions>\r\n</mat-card>" }]
-        }], ctorParameters: () => [], propDecorators: { filter: [{
+            args: [{ selector: 'glw-filter-form', imports: [MatCard, MatCardContent, MatCardActions, MatButton, MatIcon], template: "<mat-card appearance=\"outlined\">\r\n  <mat-card-content>\r\n    <ng-content></ng-content>\r\n  </mat-card-content>\r\n  <mat-card-actions align=\"end\">\n    <button mat-stroked-button color=\"accent\" (click)=\"onFilter()\">\n      <mat-icon>search</mat-icon>\n      {{ filterLabel }}\n    </button>\n  </mat-card-actions>\n</mat-card>\n" }]
+        }], ctorParameters: () => [{ type: GlowwI18nService }], propDecorators: { filter: [{
                 type: Output
             }] } });
 
@@ -985,7 +1021,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 
 ;
 class DisplayObjectsComponent {
-    constructor(glowwService, changeDetectorRef, dialog, router, location, authenticationService, formBuilder, route) {
+    constructor(glowwService, changeDetectorRef, dialog, router, location, authenticationService, formBuilder, route, i18n) {
         this.changeDetectorRef = changeDetectorRef;
         this.dialog = dialog;
         this.router = router;
@@ -993,6 +1029,7 @@ class DisplayObjectsComponent {
         this.authenticationService = authenticationService;
         this.formBuilder = formBuilder;
         this.route = route;
+        this.i18n = i18n;
         this.canDisplayObj = false;
         this.canEdit = true;
         this.canDelete = true;
@@ -1141,6 +1178,9 @@ class DisplayObjectsComponent {
     ngOnDestroy() {
         this.navSubscription?.unsubscribe(); // this prevents a memory leak
     }
+    t(key, fallback) {
+        return this.i18n.instant(key, fallback);
+    }
     Init(data) {
         if ((data && Object.keys(data).length > 0) || this.displayresult) {
             this.Search(data);
@@ -1217,6 +1257,9 @@ class DisplayObjectsComponent {
                 this.queryParams[name] = this.queryParams[name];
             });
         }
+        Object.keys(this.queryParams).forEach(name => {
+            this.queryParams[name] = this.serializeQueryParamValue(this.queryParams[name]);
+        });
         this.queryParams['__guid'] = (Math.random().toString()).substring(2);
         console.log("Before searchRequest");
         //debugger;
@@ -1235,7 +1278,7 @@ class DisplayObjectsComponent {
         }, error => {
             this.displayresult = false;
             this.displayform = true;
-            this.resultException = error;
+            this.resultException = this.toErrorMessage(error);
         });
     }
     clean(obj) {
@@ -1250,8 +1293,7 @@ class DisplayObjectsComponent {
         const searchData = this.parent.form.value.searchData;
         if (searchData) {
             Object.keys(searchData).forEach(name => {
-                const val = searchData[name];
-                this.queryParams[name] = val;
+                this.queryParams[name] = this.serializeQueryParamValue(searchData[name]);
             });
         }
         if (this.form2.value._MaxRow_) {
@@ -1263,6 +1305,18 @@ class DisplayObjectsComponent {
         this.location.replaceState(this.router.url, params.toString());
         this.Search();
     }
+    serializeQueryParamValue(value) {
+        if (value === undefined || value === null || value === '') {
+            return value;
+        }
+        if (value instanceof Date) {
+            return Number.isNaN(value.getTime()) ? null : moment(value).format('YYYY-MM-DD HH:mm:ss');
+        }
+        if (moment.isMoment(value)) {
+            return value.isValid() ? value.format('YYYY-MM-DD HH:mm:ss') : null;
+        }
+        return value;
+    }
     onFilter() {
     }
     UpdateDataSource(r) {
@@ -1418,9 +1472,10 @@ class DisplayObjectsComponent {
         dialogConfig.disableClose = true;
         dialogConfig.autoFocus = true;
         dialogConfig.closeOnNavigation = false;
-        dialogConfig.maxHeight = "95%";
-        dialogConfig.maxWidth = "95%";
-        dialogConfig.height = "100%";
+        dialogConfig.panelClass = 'gw-resizable-dialog-panel';
+        dialogConfig.width = '900px';
+        dialogConfig.maxWidth = '100vw';
+        dialogConfig.maxHeight = '100vh';
         if (this.dialogConfig) {
             Object.keys(this.dialogConfig).forEach(name => {
                 dialogConfig[name] = this.dialogConfig[name];
@@ -1476,14 +1531,14 @@ class DisplayObjectsComponent {
         });
     }
     DeleteObj(obj) {
-        if (confirm('Are you sure you want to delete this objet ? ')) {
+        if (confirm(this.t('GLOWW.CONFIRM_DELETE', 'Are you sure you want to delete this object ?'))) {
             this.deleteRequest.apply(this.glowwService, this.getPrimaryKey(obj)).subscribe(p => {
                 const i = this.dataSource.data.indexOf(obj);
                 const tmp = this.dataSource.data;
                 tmp.splice(i, 1);
                 this.dataSource.data = tmp;
             }, error => {
-                alert(`Unable to delete Object ${error.status} ${error.statusText}\n${error.Message}\n${error.error}`);
+                alert(`${this.t('GLOWW.UNABLE_TO_DELETE_OBJECT', 'Unable to delete object')} ${error.status} ${error.statusText}\n${error.Message}\n${error.error}`);
             });
         }
     }
@@ -1508,9 +1563,10 @@ class DisplayObjectsComponent {
         dialogConfig.disableClose = true;
         dialogConfig.autoFocus = true;
         dialogConfig.closeOnNavigation = false;
-        dialogConfig.maxHeight = "95%";
-        dialogConfig.maxWidth = "95%";
-        dialogConfig.height = "100%";
+        dialogConfig.panelClass = 'gw-resizable-dialog-panel';
+        dialogConfig.width = '900px';
+        dialogConfig.maxWidth = '100vw';
+        dialogConfig.maxHeight = '100vh';
         if (this.dialogConfig) {
             Object.keys(this.dialogConfig).forEach(name => {
                 dialogConfig[name] = this.dialogConfig[name];
@@ -1559,16 +1615,23 @@ class DisplayObjectsComponent {
             }
         });
     }
-    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 }], 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            Unable to query : {{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=\"MaxRow\" formControlName=\"_MaxRow_\">\n                @for (maxrow of maxrows; track maxrow) {\n                  <mat-option [value]=\"maxrow\">\n                    @if (maxrow) {\n                      <span>{{maxrow}} objects</span>\n                    }\n                    @if (!maxrow) {\n                      <span> 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          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\"></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"] }] }); }
+    toErrorMessage(error) {
+        if (!error) {
+            return '';
+        }
+        const details = error.error?.message || error.error || error.message || error.statusText || `${error}`;
+        return `${this.t('GLOWW.UNABLE_TO_QUERY', 'Unable to query')} : ${details}`;
+    }
+    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 }] }); }
 }
 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], 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            Unable to query : {{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=\"MaxRow\" formControlName=\"_MaxRow_\">\n                @for (maxrow of maxrows; track maxrow) {\n                  <mat-option [value]=\"maxrow\">\n                    @if (maxrow) {\n                      <span>{{maxrow}} objects</span>\n                    }\n                    @if (!maxrow) {\n                      <span> 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          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\"></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 (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']
-                }] }, { type: i0.ChangeDetectorRef }, { type: i1$2.MatDialog }, { type: i2.Router }, { type: i3.Location }, { type: AuthenticationService }, { type: i1$3.UntypedFormBuilder }, { type: i2.ActivatedRoute }], propDecorators: { header: [{
+                }] }, { type: i0.ChangeDetectorRef }, { type: i1$2.MatDialog }, { type: i2.Router }, { type: i3.Location }, { type: AuthenticationService }, { type: i1$3.UntypedFormBuilder }, { type: i2.ActivatedRoute }, { type: GlowwI18nService }], propDecorators: { header: [{
                 type: ContentChild,
                 args: [HeaderComponent]
             }], searchFormLayout: [{
@@ -1711,7 +1774,10 @@ class SecurePipe {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SecurePipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'secure' }]
+            args: [{
+                    name: 'secure',
+                    standalone: true
+                }]
         }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i1$1.DomSanitizer }] });
 
 class MenuListItemComponent {
@@ -1722,9 +1788,10 @@ class MenuListItemComponent {
         console.log("change expanded");
         this._expanded = value;
     }
-    constructor(glowwService, navService, router) {
+    constructor(glowwService, navService, router, i18n) {
         this.navService = navService;
         this.router = router;
+        this.i18n = i18n;
         this._expanded = false;
         this.ariaExpanded = this.expanded;
         this.falsePromise = new Promise((resolve, reject) => {
@@ -1768,6 +1835,9 @@ class MenuListItemComponent {
         }
         return route;
     }
+    displayName(item) {
+        return this.i18n.instant(item.displayName, item.displayName);
+    }
     getDisabledPromise() {
         //console.log(`isdisable item ${item.displayName} ${item.disabled}`);
         if (!this.item.disabled) {
@@ -1781,8 +1851,8 @@ class MenuListItemComponent {
         }
         return this.item.hidden();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MenuListItemComponent, deps: [{ token: 'glowwService' }, { token: NavService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: MenuListItemComponent, isStandalone: true, selector: "gloww-menu-list-item", inputs: { item: "item", depth: "depth" }, host: { properties: { "attr.aria-expanded": "this.ariaExpanded" } }, ngImport: i0, template: "@if (item) {\n  @if (!(_hidden | async)) {\n    <div class=\"thisMenu\" (click)=\"onItemSelected(item)\" [class.disabled]=\"(_disabled | async)\">\n      <a mat-list-item\n        [ngStyle]=\"{'padding-left': (depth * 12) + 'px'}\"\n        [ngClass]=\"{'active': isActive(item) && !(_disabled | async), 'expanded': expanded}\"\n        class=\"menu-list-item\"\n        [routerLink]=\"routerLink(item)\">\n        <mat-icon class=\"routeIcon\">\n          <i [ngClass]=\"item.icon\" [ngStyle]=\"item.iconStyle\"></i>\n        </mat-icon>\n        <span class=\"menu-label\">{{item.displayName}}</span>\n      </a>\n      @if (item.children?.length && !(_disabled | async)) {\n        <div class=\"expand-container\">\n          <mat-icon [@indicatorRotate]=\"expanded ? 'expanded': 'collapsed'\" class=\"expandIcon\">\n            expand_more\n          </mat-icon>\n        </div>\n      }\n    </div>\n  }\n  @if (expanded && !(_disabled | async)) {\n    <div>\n      @for (child of item.children; track child) {\n        <gloww-menu-list-item [item]=\"child\" [depth]=\"depth+1\">\n        </gloww-menu-list-item>\n      }\n    </div>\n  }\n}", styles: [".thisMenu{display:flex;flex-direction:row;align-items:center;outline:none;width:calc(100% - 20px);margin:10px;cursor:pointer}.menu-list-item{display:flex;align-items:center;flex:1;padding:8px 0;text-decoration:none;color:inherit;min-width:0}.menu-list-item .routeIcon{margin-right:20px;flex-shrink:0}.menu-list-item .menu-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.expand-container{display:flex;align-items:center;justify-content:center;flex-shrink:0}mat-icon{height:32px;width:40px;display:flex;align-items:center;justify-content:center}.expandIcon{cursor:pointer}:disabled,.disabled{color:#d3d3d3!important;pointer-events:none}:disabled mat-icon i,.disabled mat-icon i{color:#d3d3d3!important}\n"], dependencies: [{ kind: "component", type: MenuListItemComponent, selector: "gloww-menu-list-item", inputs: ["item", "depth"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: GlowwModule }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MenuListItemComponent, deps: [{ token: 'glowwService' }, { token: NavService }, { token: i2.Router }, { token: GlowwI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: MenuListItemComponent, isStandalone: true, selector: "gloww-menu-list-item", inputs: { item: "item", depth: "depth" }, host: { properties: { "attr.aria-expanded": "this.ariaExpanded" } }, ngImport: i0, template: "@if (item) {\n  @if (!(_hidden | async)) {\n    <div class=\"thisMenu\" (click)=\"onItemSelected(item)\" [class.disabled]=\"(_disabled | async)\">\n      <a mat-list-item lines=\"1\"\n        [ngStyle]=\"{'padding-left': (depth * 12) + 'px'}\"\n        [ngClass]=\"{'active': isActive(item) && !(_disabled | async), 'expanded': expanded}\"\n        class=\"menu-list-item\"\n        [routerLink]=\"routerLink(item)\">\n        <span matListItemIcon class=\"routeIcon\">\n          <i [ngClass]=\"item.icon\" [ngStyle]=\"item.iconStyle\"></i>\n        </span>\n        <span matListItemTitle class=\"menu-label\">{{ displayName(item) }}</span>\n      </a>\n      @if (item.children?.length && !(_disabled | async)) {\n        <div class=\"expand-container\">\n          <mat-icon [@indicatorRotate]=\"expanded ? 'expanded': 'collapsed'\" class=\"expandIcon\">\n            expand_more\n          </mat-icon>\n        </div>\n      }\n    </div>\n  }\n  @if (expanded && !(_disabled | async)) {\n    <div>\n      @for (child of item.children; track child) {\n        <gloww-menu-list-item [item]=\"child\" [depth]=\"depth+1\">\n        </gloww-menu-list-item>\n      }\n    </div>\n  }\n}\n", styles: [".thisMenu{display:flex;flex-direction:row;align-items:center;outline:none;width:calc(100% - 20px);margin:10px;cursor:pointer}.menu-list-item{display:flex;align-items:center;flex:1;padding:8px 0;text-decoration:none;color:inherit;min-width:0}.menu-list-item .menu-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.expand-container{display:flex;align-items:center;justify-content:center;flex-shrink:0}.routeIcon{display:inline-flex;align-items:center;justify-content:center;width:40px;min-width:40px;height:32px;margin-right:20px;flex-shrink:0;overflow:visible}.routeIcon i{display:inline-block;line-height:1}mat-icon{height:32px;width:40px;display:flex;align-items:center;justify-content:center}.expandIcon{cursor:pointer}:disabled,.disabled{color:#d3d3d3!important;pointer-events:none}:disabled .routeIcon i,:disabled mat-icon i,.disabled .routeIcon i,.disabled mat-icon i{color:#d3d3d3!important}\n"], dependencies: [{ kind: "component", type: MenuListItemComponent, selector: "gloww-menu-list-item", inputs: ["item", "depth"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
             trigger('indicatorRotate', [
                 state('collapsed', style({ transform: 'rotate(0deg)' })),
                 state('expanded', style({ transform: 'rotate(180deg)' })),
@@ -1798,11 +1868,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                             state('expanded', style({ transform: 'rotate(180deg)' })),
                             transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)'))
                         ])
-                    ], imports: [NgStyle, NgClass, RouterLink, MatIcon, GlowwModule, AsyncPipe], template: "@if (item) {\n  @if (!(_hidden | async)) {\n    <div class=\"thisMenu\" (click)=\"onItemSelected(item)\" [class.disabled]=\"(_disabled | async)\">\n      <a mat-list-item\n        [ngStyle]=\"{'padding-left': (depth * 12) + 'px'}\"\n        [ngClass]=\"{'active': isActive(item) && !(_disabled | async), 'expanded': expanded}\"\n        class=\"menu-list-item\"\n        [routerLink]=\"routerLink(item)\">\n        <mat-icon class=\"routeIcon\">\n          <i [ngClass]=\"item.icon\" [ngStyle]=\"item.iconStyle\"></i>\n        </mat-icon>\n        <span class=\"menu-label\">{{item.displayName}}</span>\n      </a>\n      @if (item.children?.length && !(_disabled | async)) {\n        <div class=\"expand-container\">\n          <mat-icon [@indicatorRotate]=\"expanded ? 'expanded': 'collapsed'\" class=\"expandIcon\">\n            expand_more\n          </mat-icon>\n        </div>\n      }\n    </div>\n  }\n  @if (expanded && !(_disabled | async)) {\n    <div>\n      @for (child of item.children; track child) {\n        <gloww-menu-list-item [item]=\"child\" [depth]=\"depth+1\">\n        </gloww-menu-list-item>\n      }\n    </div>\n  }\n}", styles: [".thisMenu{display:flex;flex-direction:row;align-items:center;outline:none;width:calc(100% - 20px);margin:10px;cursor:pointer}.menu-list-item{display:flex;align-items:center;flex:1;padding:8px 0;text-decoration:none;color:inherit;min-width:0}.menu-list-item .routeIcon{margin-right:20px;flex-shrink:0}.menu-list-item .menu-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.expand-container{display:flex;align-items:center;justify-content:center;flex-shrink:0}mat-icon{height:32px;width:40px;display:flex;align-items:center;justify-content:center}.expandIcon{cursor:pointer}:disabled,.disabled{color:#d3d3d3!important;pointer-events:none}:disabled mat-icon i,.disabled mat-icon i{color:#d3d3d3!important}\n"] }]
+                    ], imports: [NgStyle, NgClass, RouterLink, MatIcon, MatListItem, MatListItemIcon, MatListItemTitle, AsyncPipe], template: "@if (item) {\n  @if (!(_hidden | async)) {\n    <div class=\"thisMenu\" (click)=\"onItemSelected(item)\" [class.disabled]=\"(_disabled | async)\">\n      <a mat-list-item lines=\"1\"\n        [ngStyle]=\"{'padding-left': (depth * 12) + 'px'}\"\n        [ngClass]=\"{'active': isActive(item) && !(_disabled | async), 'expanded': expanded}\"\n        class=\"menu-list-item\"\n        [routerLink]=\"routerLink(item)\">\n        <span matListItemIcon class=\"routeIcon\">\n          <i [ngClass]=\"item.icon\" [ngStyle]=\"item.iconStyle\"></i>\n        </span>\n        <span matListItemTitle class=\"menu-label\">{{ displayName(item) }}</span>\n      </a>\n      @if (item.children?.length && !(_disabled | async)) {\n        <div class=\"expand-container\">\n          <mat-icon [@indicatorRotate]=\"expanded ? 'expanded': 'collapsed'\" class=\"expandIcon\">\n            expand_more\n          </mat-icon>\n        </div>\n      }\n    </div>\n  }\n  @if (expanded && !(_disabled | async)) {\n    <div>\n      @for (child of item.children; track child) {\n        <gloww-menu-list-item [item]=\"child\" [depth]=\"depth+1\">\n        </gloww-menu-list-item>\n      }\n    </div>\n  }\n}\n", styles: [".thisMenu{display:flex;flex-direction:row;align-items:center;outline:none;width:calc(100% - 20px);margin:10px;cursor:pointer}.menu-list-item{display:flex;align-items:center;flex:1;padding:8px 0;text-decoration:none;color:inherit;min-width:0}.menu-list-item .menu-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.expand-container{display:flex;align-items:center;justify-content:center;flex-shrink:0}.routeIcon{display:inline-flex;align-items:center;justify-content:center;width:40px;min-width:40px;height:32px;margin-right:20px;flex-shrink:0;overflow:visible}.routeIcon i{display:inline-block;line-height:1}mat-icon{height:32px;width:40px;display:flex;align-items:center;justify-content:center}.expandIcon{cursor:pointer}:disabled,.disabled{color:#d3d3d3!important;pointer-events:none}:disabled .routeIcon i,:disabled mat-icon i,.disabled .routeIcon i,.disabled mat-icon i{color:#d3d3d3!important}\n"] }]
         }], ctorParameters: () => [{ type: GlowwService, decorators: [{
                     type: Inject,
                     args: ['glowwService']
-                }] }, { type: NavService }, { type: i2.Router }], propDecorators: { ariaExpanded: [{
+                }] }, { type: NavService }, { type: i2.Router }, { type: GlowwI18nService }], propDecorators: { ariaExpanded: [{
                 type: HostBinding,
                 args: ['attr.aria-expanded']
             }], item: [{
@@ -1986,7 +2056,10 @@ class HtmlFormatPipe {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: HtmlFormatPipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'htmlFormat' }]
+            args: [{
+                    name: 'htmlFormat',
+                    standalone: true
+                }]
         }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
 
 class SocialNetworkComponent {
@@ -2048,15 +2121,10 @@ class LoginComponent {
         if (config && config.showDomain) {
             this.showDomain = config.showDomain;
         }
+        this.initializeForms();
         this.authenticationService.getOAuthProviders().subscribe(oap => this.oAuthProviders = oap);
     }
-    MatchPassword(fg) {
-        if (!fg) {
-            return;
-        }
-        return fg.get('newpassword')?.value === fg.get('confirmationPassword')?.value;
-    }
-    ngOnInit() {
+    initializeForms() {
         const grp = {
             username: ['', Validators.required],
             password: ['', Validators.required]
@@ -2079,6 +2147,14 @@ class LoginComponent {
         this.loginForm = this.formBuilder.group(grp);
         this.lostPasswordForm = this.formBuilder.group(lostPwd);
         this.resetPasswordForm = this.formBuilder.group(resetPwd, { validator: this.MatchPassword });
+    }
+    MatchPassword(fg) {
+        if (!fg) {
+            return;
+        }
+        return fg.get('newpassword')?.value === fg.get('confirmationPassword')?.value;
+    }
+    ngOnInit() {
         // get return url from route parameters or default to '/'
         this.returnUrl = this.route.snapshot.queryParams.returnUrl; //|| window.location.search;
         this.application = this.route.snapshot.queryParams.application; //|| window.location.pathname;
@@ -2499,6 +2575,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i2.Router }, { type: AuthenticationService }, { type: i3.PlatformLocation }] });
 
+const GLOWW_SECURITY_STANDALONE_DECLARATIONS = [
+    LoginComponent,
+    ChangePasswordDlgComponent,
+    UserMenuComponent,
+    SocialNetworkDlgComponent,
+    SocialNetworkComponent
+];
+function getGlowwSecurityProviders(authenticationServiceConfig) {
+    return [
+        AuthenticationService,
+        AuthenticationServiceConfig,
+        { provide: AuthenticationServiceConfig, useValue: authenticationServiceConfig },
+        { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
+        { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
+        //{ provide: HTTP_INTERCEPTORS, useClass: StagingInterceptor, multi: true },
+        //socialLoginProviders
+    ];
+}
+function provideGlowwSecurity(authenticationServiceConfig) {
+    return makeEnvironmentProviders([
+        provideHttpClient(withInterceptorsFromDi()),
+        ...getGlowwSecurityProviders(authenticationServiceConfig)
+    ]);
+}
 class GlowwSecurityModule {
     static forRoot(authenticationServiceConfig) {
         /*
@@ -2557,23 +2657,13 @@ class GlowwSecurityModule {
         */
         return {
             ngModule: GlowwSecurityModule,
-            providers: [
-                AuthenticationService,
-                AuthenticationServiceConfig,
-                { provide: AuthenticationServiceConfig, useValue: authenticationServiceConfig },
-                { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
-                { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
-                //{ provide: HTTP_INTERCEPTORS, useClass: StagingInterceptor, multi: true },
-                //socialLoginProviders
-            ]
+            providers: getGlowwSecurityProviders(authenticationServiceConfig)
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: GlowwSecurityModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: GlowwSecurityModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
-            BrowserModule,
-            BrowserAnimationsModule,
             MatToolbarModule,
             MatButtonModule,
             MatSidenavModule,
@@ -2585,12 +2675,14 @@ class GlowwSecurityModule {
             ChangePasswordDlgComponent,
             UserMenuComponent,
             SocialNetworkDlgComponent,
-            SocialNetworkComponent], exports: [LoginComponent, RouterModule, UserMenuComponent] }); }
+            SocialNetworkComponent], exports: [LoginComponent,
+            ChangePasswordDlgComponent,
+            UserMenuComponent,
+            SocialNetworkDlgComponent,
+            SocialNetworkComponent, RouterModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: GlowwSecurityModule, providers: [provideHttpClient(withInterceptorsFromDi())], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
-            BrowserModule,
-            BrowserAnimationsModule,
             MatToolbarModule,
             MatButtonModule,
             MatSidenavModule,
@@ -2605,11 +2697,9 @@ class GlowwSecurityModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: GlowwSecurityModule, decorators: [{
             type: NgModule,
             args: [{
-                    exports: [LoginComponent, RouterModule, UserMenuComponent], imports: [CommonModule,
+                    exports: [...GLOWW_SECURITY_STANDALONE_DECLARATIONS, RouterModule], imports: [CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
-                        BrowserModule,
-                        BrowserAnimationsModule,
                         MatToolbarModule,
                         MatButtonModule,
                         MatSidenavModule,
@@ -2617,11 +2707,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         MatFormFieldModule,
                         MatCardModule,
                         MatDialogModule,
-                        RouterModule, LoginComponent,
-                        ChangePasswordDlgComponent,
-                        UserMenuComponent,
-                        SocialNetworkDlgComponent,
-                        SocialNetworkComponent], providers: [provideHttpClient(withInterceptorsFromDi())]
+                        RouterModule,
+                        ...GLOWW_SECURITY_STANDALONE_DECLARATIONS], providers: [provideHttpClient(withInterceptorsFromDi())]
                 }]
         }] });
 
@@ -3525,31 +3612,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             }] } });
 
 class DatetimeComponent {
-    constructor() {
+    static { this.DATE_FORMATS = [
+        moment.ISO_8601,
+        'DD/MM/YYYY HH:mm:ss',
+        'DD/MM/YYYY HH:mm',
+        'DD/MM/YYYY',
+        'MM/DD/YYYY HH:mm:ss',
+        'MM/DD/YYYY HH:mm',
+        'MM/DD/YYYY',
+        'YYYY-MM-DD HH:mm:ss',
+        'YYYY-MM-DD HH:mm',
+        'YYYY-MM-DD',
+        'YYYY-MM-DDTHH:mm:ss',
+        'YYYY-MM-DDTHH:mm'
+    ]; }
+    static { this.CLOCK_CENTER = 50; }
+    static { this.CLOCK_OUTER_RADIUS = 40; }
+    static { this.CLOCK_INNER_RADIUS = 27; }
+    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_MINUTE_HAND_HEIGHT = '48%'; }
+    constructor(locale) {
+        this.locale = locale;
         this._value = null;
         this.display = null;
         this.placeHolder = null;
         this.mode = 'date';
-        this.showSpinners = true;
         this.showSeconds = false;
-        this.disableMinute = false;
+        this.dateControl = new FormControl(null);
+        this.hourControl = new FormControl('00', { nonNullable: true });
+        this.minuteControl = new FormControl('00', { nonNullable: true });
+        this.secondControl = new FormControl('00', { nonNullable: true });
+        this.hourMarkers = this.buildHourMarkers();
+        this.minuteTicks = this.buildUnitTicks();
+        this.secondTicks = this.buildUnitTicks();
+        this.isDisabled = false;
+        this.isClockOpen = false;
+        this.clockStep = 'hour';
         this.onChange = () => { };
         this.onTouched = () => { };
+        this.dateControl.valueChanges.subscribe(() => this.emitCurrentValue());
+        this.hourControl.valueChanges.subscribe(() => this.emitCurrentValue());
+        this.minuteControl.valueChanges.subscribe(() => this.emitCurrentValue());
+        this.secondControl.valueChanges.subscribe(() => this.emitCurrentValue());
+    }
+    get isDateTime() {
+        return this.mode === 'datetime';
     }
     get value() {
         return this._value;
     }
     set value(val) {
-        this._value = val;
-        let dt = this._value;
-        if (typeof (this._value) === 'string') {
-            dt = moment(this._value).toISOString();
-        }
-        this.onChange(dt);
-        this.onTouched();
+        this.setValueFromOutside(val, true);
     }
     writeValue(obj) {
-        this.value = obj;
+        this.setValueFromOutside(obj, false);
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -3558,27 +3678,304 @@ class DatetimeComponent {
         this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        //throw new Error('Method not implemented.');
+        this.isDisabled = isDisabled;
+        const action = isDisabled ? 'disable' : 'enable';
+        this.dateControl[action]({ emitEvent: false });
+        this.hourControl[action]({ emitEvent: false });
+        this.minuteControl[action]({ emitEvent: false });
+        this.secondControl[action]({ emitEvent: false });
+    }
+    clear() {
+        this._value = null;
+        this.isClockOpen = false;
+        this.dateControl.setValue(null, { emitEvent: false });
+        this.hourControl.setValue('00', { emitEvent: false });
+        this.minuteControl.setValue('00', { emitEvent: false });
+        this.secondControl.setValue('00', { emitEvent: false });
+        this.onChange(null);
+        this.onTouched();
+    }
+    markTouched() {
+        this.onTouched();
+    }
+    get timeSummary() {
+        return this.showSeconds
+            ? `${this.normalizeTimePartValue(this.hourControl.value, 23, true)}:${this.normalizeTimePartValue(this.minuteControl.value, 59, true)}:${this.normalizeTimePartValue(this.secondControl.value, 59, true)}`
+            : `${this.normalizeTimePartValue(this.hourControl.value, 23, true)}:${this.normalizeTimePartValue(this.minuteControl.value, 59, true)}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatetimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DatetimeComponent, isStandalone: true, selector: "gloww-datetime", inputs: { _value: ["value", "_value"], display: "display", placeHolder: "placeHolder", mode: "mode", showSpinners: "showSpinners", showSeconds: "showSeconds", disableMinute: "disableMinute" }, providers: [
+    get clockTitle() {
+        switch (this.clockStep) {
+            case 'hour':
+                return 'Hours';
+            case 'minute':
+                return 'Minutes';
+            default:
+                return 'Seconds';
+        }
+    }
+    openClock() {
+        if (this.isDisabled) {
+            return;
+        }
+        this.isClockOpen = true;
+        this.clockStep = 'hour';
+        this.onTouched();
+    }
+    closeClock() {
+        this.isClockOpen = false;
+        this.onTouched();
+    }
+    onTimePartInput(part) {
+        const control = this.getTimeControl(part);
+        const max = this.getTimePartMax(part);
+        control.setValue(this.normalizeTimePartValue(control.value, max, false), { emitEvent: false });
+        this.emitCurrentValue();
+    }
+    onTimePartBlur(part) {
+        const control = this.getTimeControl(part);
+        const max = this.getTimePartMax(part);
+        control.setValue(this.normalizeTimePartValue(control.value, max, true), { emitEvent: false });
+        this.emitCurrentValue();
+        this.onTouched();
+    }
+    selectClockHour(value, event) {
+        event?.stopPropagation();
+        this.hourControl.setValue(value.toString().padStart(2, '0'), { emitEvent: false });
+        this.emitCurrentValue();
+        this.clockStep = 'minute';
+        this.onTouched();
+    }
+    selectClockMinute(value, event) {
+        event?.stopPropagation();
+        this.minuteControl.setValue(value.toString().padStart(2, '0'), { emitEvent: false });
+        this.emitCurrentValue();
+        if (this.showSeconds) {
+            this.clockStep = 'second';
+        }
+        else {
+            this.closeClock();
+        }
+        this.onTouched();
+    }
+    selectClockSecond(value, event) {
+        event?.stopPropagation();
+        this.secondControl.setValue(value.toString().padStart(2, '0'), { emitEvent: false });
+        this.emitCurrentValue();
+        this.closeClock();
+        this.onTouched();
+    }
+    selectClockTick(value, event) {
+        if (this.clockStep === 'minute') {
+            this.selectClockMinute(value, event);
+            return;
+        }
+        if (this.clockStep === 'second') {
+            this.selectClockSecond(value, event);
+        }
+    }
+    goToClockStep(step) {
+        this.clockStep = step;
+    }
+    onClockFaceClick(event) {
+        if (this.clockStep === 'hour') {
+            return;
+        }
+        const target = event.currentTarget;
+        if (!target) {
+            return;
+        }
+        const rect = target.getBoundingClientRect();
+        const centerX = rect.left + (rect.width / 2);
+        const centerY = rect.top + (rect.height / 2);
+        const dx = event.clientX - centerX;
+        const dy = event.clientY - centerY;
+        const angle = Math.atan2(dy, dx) + (Math.PI / 2);
+        const normalized = angle < 0 ? angle + (Math.PI * 2) : angle;
+        const rawValue = Math.round((normalized / (Math.PI * 2)) * 60) % 60;
+        if (this.clockStep === 'minute') {
+            this.selectClockMinute(rawValue);
+            return;
+        }
+        this.selectClockSecond(rawValue);
+    }
+    isHourSelected(value) {
+        return this.toNumber(this.hourControl.value) === value;
+    }
+    isMinuteSelected(value) {
+        return this.toNumber(this.minuteControl.value) === value;
+    }
+    isSecondSelected(value) {
+        return this.toNumber(this.secondControl.value) === value;
+    }
+    get clockHandTransform() {
+        if (this.clockStep === 'hour') {
+            const hour = this.toNumber(this.hourControl.value) % 12;
+            return `translate(-50%, -100%) rotate(${(hour / 12) * 360}deg)`;
+        }
+        if (this.clockStep === 'minute') {
+            const minute = this.toNumber(this.minuteControl.value) % 60;
+            return `translate(-50%, -100%) rotate(${(minute / 60) * 360}deg)`;
+        }
+        const second = this.toNumber(this.secondControl.value) % 60;
+        return `translate(-50%, -100%) rotate(${(second / 60) * 360}deg)`;
+    }
+    get clockHandHeight() {
+        if (this.clockStep === 'hour') {
+            const hour = this.toNumber(this.hourControl.value);
+            return hour < 12 ? '38%' : '25%';
+        }
+        return '45%';
+    }
+    get hourHandTransform() {
+        const hour = this.toNumber(this.hourControl.value) % 12;
+        return `translate(-50%, -100%) rotate(${(hour / 12) * 360}deg)`;
+    }
+    get hourHandHeight() {
+        const hour = this.toNumber(this.hourControl.value);
+        return hour < 12 ? DatetimeComponent.CLOCK_OUTER_HAND_HEIGHT : DatetimeComponent.CLOCK_INNER_HAND_HEIGHT;
+    }
+    get minuteHandTransform() {
+        const minute = (this.toNumber(this.minuteControl.value) % 60) + (this.toNumber(this.secondControl.value) / 60);
+        return `translate(-50%, -100%) rotate(${(minute / 60) * 360}deg)`;
+    }
+    get minuteHandHeight() {
+        return DatetimeComponent.CLOCK_MINUTE_HAND_HEIGHT;
+    }
+    setValueFromOutside(value, emit) {
+        const normalized = this.normalizeDateValue(value);
+        this._value = normalized;
+        this.dateControl.setValue(normalized ? new Date(normalized.getTime()) : null, { emitEvent: false });
+        this.hourControl.setValue(normalized ? normalized.getHours().toString().padStart(2, '0') : '00', { emitEvent: false });
+        this.minuteControl.setValue(normalized ? normalized.getMinutes().toString().padStart(2, '0') : '00', { emitEvent: false });
+        this.secondControl.setValue(normalized ? normalized.getSeconds().toString().padStart(2, '0') : '00', { emitEvent: false });
+        if (emit) {
+            this.onChange(normalized);
+            this.onTouched();
+        }
+    }
+    emitCurrentValue() {
+        const date = this.normalizeDateValue(this.dateControl.value);
+        if (!date) {
+            this._value = null;
+            this.onChange(null);
+            return;
+        }
+        const next = new Date(date.getTime());
+        next.setHours(this.toNumber(this.hourControl.value), this.toNumber(this.minuteControl.value), this.showSeconds ? this.toNumber(this.secondControl.value) : 0, 0);
+        this._value = next;
+        this.onChange(next);
+    }
+    toNumber(value) {
+        const parsed = Number.parseInt(value ?? '0', 10);
+        return Number.isNaN(parsed) ? 0 : parsed;
+    }
+    getTimeControl(part) {
+        switch (part) {
+            case 'hour':
+                return this.hourControl;
+            case 'minute':
+                return this.minuteControl;
+            default:
+                return this.secondControl;
+        }
+    }
+    getTimePartMax(part) {
+        return part === 'hour' ? 23 : 59;
+    }
+    normalizeTimePartValue(value, max, pad) {
+        const digits = `${value ?? ''}`.replace(/\D/g, '').slice(-2);
+        if (!digits) {
+            return pad ? '00' : '';
+        }
+        const parsed = Number.parseInt(digits, 10);
+        const clamped = Number.isNaN(parsed) ? 0 : Math.min(max, Math.max(0, parsed));
+        return pad || digits.length > 1 ? clamped.toString().padStart(2, '0') : clamped.toString();
+    }
+    normalizeDateValue(value) {
+        if (value === undefined || value === null || value === '') {
+            return null;
+        }
+        if (value instanceof Date) {
+            return Number.isNaN(value.getTime()) ? null : new Date(value.getTime());
+        }
+        if (moment.isMoment(value)) {
+            const date = value.toDate();
+            return Number.isNaN(date.getTime()) ? null : date;
+        }
+        if (typeof value === 'string' || typeof value === 'number') {
+            const strictMoment = moment(value, DatetimeComponent.DATE_FORMATS, this.locale ?? undefined, true);
+            if (strictMoment.isValid()) {
+                return strictMoment.toDate();
+            }
+            const lenientMoment = moment(value, DatetimeComponent.DATE_FORMATS, this.locale ?? undefined, false);
+            if (lenientMoment.isValid()) {
+                return lenientMoment.toDate();
+            }
+            const date = new Date(value);
+            return Number.isNaN(date.getTime()) ? null : date;
+        }
+        return null;
+    }
+    buildHourMarkers() {
+        return Array.from({ length: 24 }, (_, index) => this.buildClockMarker(index, index < 12 ? DatetimeComponent.CLOCK_OUTER_RADIUS : DatetimeComponent.CLOCK_INNER_RADIUS, index.toString().padStart(2, '0')));
+    }
+    buildUnitTicks() {
+        return Array.from({ length: 12 }, (_, index) => {
+            const value = index * 5;
+            const angle = (index / 12) * (Math.PI * 2) - (Math.PI / 2);
+            const x1 = DatetimeComponent.CLOCK_CENTER + Math.cos(angle) * DatetimeComponent.CLOCK_TICK_INNER_RADIUS;
+            const y1 = DatetimeComponent.CLOCK_CENTER + Math.sin(angle) * DatetimeComponent.CLOCK_TICK_INNER_RADIUS;
+            const x2 = DatetimeComponent.CLOCK_CENTER + Math.cos(angle) * DatetimeComponent.CLOCK_TICK_OUTER_RADIUS;
+            const y2 = DatetimeComponent.CLOCK_CENTER + Math.sin(angle) * DatetimeComponent.CLOCK_TICK_OUTER_RADIUS;
+            const labelX = DatetimeComponent.CLOCK_CENTER + Math.cos(angle) * DatetimeComponent.CLOCK_TICK_LABEL_RADIUS;
+            const labelY = DatetimeComponent.CLOCK_CENTER + Math.sin(angle) * DatetimeComponent.CLOCK_TICK_LABEL_RADIUS;
+            return {
+                value,
+                label: value.toString().padStart(2, '0'),
+                x1: `${x1}%`,
+                y1: `${y1}%`,
+                x2: `${x2}%`,
+                y2: `${y2}%`,
+                labelLeft: `${labelX}%`,
+                labelTop: `${labelY}%`,
+            };
+        });
+    }
+    buildClockMarker(index, radius, label) {
+        const angle = ((index % 12) / 12) * (Math.PI * 2) - (Math.PI / 2);
+        const x = DatetimeComponent.CLOCK_CENTER + Math.cos(angle) * radius;
+        const y = DatetimeComponent.CLOCK_CENTER + Math.sin(angle) * radius;
+        return {
+            value: index,
+            label,
+            left: `${x}%`,
+            top: `${y}%`
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatetimeComponent, deps: [{ token: MAT_DATE_LOCALE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DatetimeComponent, isStandalone: true, selector: "gloww-datetime", inputs: { _value: ["value", "_value"], display: "display", placeHolder: "placeHolder", mode: "mode", showSeconds: "showSeconds" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
-                useExisting: DatetimeComponent
+                useExisting: forwardRef(() => DatetimeComponent)
             }
-        ], ngImport: i0, template: "<div style=\"width:100%\">\n  @if (mode==='date') {\n    <mat-form-field>\n      <mat-label>{{display}}</mat-label>\n      <input matInput [matDatepicker]=\"picker\" [placeholder]=\"placeHolder\" [(ngModel)]=\"value\">\n      <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n    </mat-form-field>\n  }\n\n  @if (mode==='datetime') {\n    <mat-form-field>\n      <mat-label>{{display}}</mat-label>\n      <input matInput [ngxMatDatetimePicker]=\"pickerDT\" [placeholder]=\"placeHolder\" [(ngModel)]=\"value\">\n      <mat-datepicker-toggle matSuffix [for]=\"$any(pickerDT)\"></mat-datepicker-toggle>\n      <ngx-mat-datetime-picker #pickerDT [showSpinners]=\"showSpinners\" [showSeconds]=\"showSeconds\" [touchUi]=\"true\" [disableMinute]=\"disableMinute\">\n      </ngx-mat-datetime-picker>\n    </mat-form-field>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, 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: "ngmodule", type: FormsModule }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "ngmodule", type: NgxMatDatetimePickerModule }, { kind: "component", type: i2$1.NgxMatDatetimepicker, selector: "ngx-mat-datetime-picker", exportAs: ["ngxMatDatetimePicker"] }, { kind: "directive", type: i2$1.NgxMatDatepickerInput, selector: "input[ngxMatDatetimePicker]", inputs: ["ngxMatDatetimePicker", "min", "max", "matDatepickerFilter"], exportAs: ["ngxMatDatepickerInput"] }] }); }
+        ], 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatetimeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gloww-datetime', providers: [
+            args: [{ selector: 'gloww-datetime', standalone: true, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             multi: true,
-                            useExisting: DatetimeComponent
+                            useExisting: forwardRef(() => DatetimeComponent)
                         }
-                    ], imports: [MatFormField, MatLabel, MatInput, MatDatepickerInput, FormsModule, MatDatepickerToggle, MatSuffix, MatDatepicker, NgxMatDatetimePickerModule], template: "<div style=\"width:100%\">\n  @if (mode==='date') {\n    <mat-form-field>\n      <mat-label>{{display}}</mat-label>\n      <input matInput [matDatepicker]=\"picker\" [placeholder]=\"placeHolder\" [(ngModel)]=\"value\">\n      <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n    </mat-form-field>\n  }\n\n  @if (mode==='datetime') {\n    <mat-form-field>\n      <mat-label>{{display}}</mat-label>\n      <input matInput [ngxMatDatetimePicker]=\"pickerDT\" [placeholder]=\"placeHolder\" [(ngModel)]=\"value\">\n      <mat-datepicker-toggle matSuffix [for]=\"$any(pickerDT)\"></mat-datepicker-toggle>\n      <ngx-mat-datetime-picker #pickerDT [showSpinners]=\"showSpinners\" [showSeconds]=\"showSeconds\" [touchUi]=\"true\" [disableMinute]=\"disableMinute\">\n      </ngx-mat-datetime-picker>\n    </mat-form-field>\n  }\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { _value: [{
+                    ], 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"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MAT_DATE_LOCALE]
+                }] }], propDecorators: { _value: [{
                 type: Input,
                 args: ['value']
             }], display: [{
@@ -3590,14 +3987,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             }], mode: [{
                 type: Input,
                 args: ['mode']
-            }], showSpinners: [{
-                type: Input
             }], showSeconds: [{
                 type: Input
-            }], disableMinute: [{
-                type: Input
             }] } });
 
+class CallbackDirective {
+    constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CallbackDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: CallbackDirective, isStandalone: true, selector: "[glowwCallback]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CallbackDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[glowwCallback]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [] });
+
+class GlowwMatPaginatorIntlService extends MatPaginatorIntl {
+    constructor(i18n) {
+        super();
+        this.i18n = i18n;
+        this.getRangeLabel = (page, pageSize, length) => {
+            if (length === 0 || pageSize === 0) {
+                return `0 ${this.i18n.instant('PAGINATOR.OF', 'of')} ${length}`;
+            }
+            const startIndex = page * pageSize;
+            const endIndex = Math.min(startIndex + pageSize, length);
+            return `${startIndex + 1}-${endIndex} ${this.i18n.instant('PAGINATOR.OF', 'of')} ${length}`;
+        };
+        this.subscription = this.i18n.langChanges$.subscribe(() => this.translateLabels());
+        this.translateLabels();
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+    translateLabels() {
+        this.itemsPerPageLabel = this.i18n.instant('PAGINATOR.ITEMS_PER_PAGE', 'Items per page');
+        this.nextPageLabel = this.i18n.instant('PAGINATOR.NEXT_PAGE', 'Next page');
+        this.previousPageLabel = this.i18n.instant('PAGINATOR.PREVIOUS_PAGE', 'Previous page');
+        this.firstPageLabel = this.i18n.instant('PAGINATOR.FIRST_PAGE', 'First page');
+        this.lastPageLabel = this.i18n.instant('PAGINATOR.LAST_PAGE', 'Last page');
+        this.changes.next();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: GlowwMatPaginatorIntlService, deps: [{ token: GlowwI18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: GlowwMatPaginatorIntlService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: GlowwMatPaginatorIntlService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: GlowwI18nService }] });
+
 class BaseCollectionComponent {
     constructor(_formBuilder) {
         this._formBuilder = _formBuilder;
@@ -3639,26 +4078,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             type: Injectable
         }] });
 
+const GLOWW_STANDALONE_DECLARATIONS = [
+    UploadDocComponent,
+    SafeHtmlPipe,
+    DisplayObjectsComponent,
+    HeaderComponent,
+    ResultTableComponent,
+    SearchFormComponent,
+    ConfirmationComponent,
+    PromptComponent,
+    SecurePipe,
+    SecureImgComponent,
+    MenuListItemComponent,
+    CodeEditorComponent,
+    HtmlEditorComponent,
+    HtmlFormatPipe,
+    UploadFileComponent,
+    FileSinkDirective,
+    FileEditComponent,
+    FoldersComponent,
+    DownloadProgressComponent,
+    SecureAComponent,
+    DummyComponent,
+    SelectComponent,
+    AutoCompleteComponent,
+    DatetimeComponent,
+    RouteDirective,
+    CallbackDirective,
+    FilterFormComponent
+];
+const GLOWW_MODULE_EXPORTS = [
+    ...GLOWW_STANDALONE_DECLARATIONS,
+    MatDatepickerModule,
+    NgxMatDatetimePickerModule,
+    NgxMatTimepickerComponent,
+    NgxMatNativeDateModule
+];
+function getGlowwProviders(folderServiceConfig) {
+    return [
+        VersionCheckService,
+        NavService,
+        VoiceRecognitionService,
+        {
+            provide: FolderServiceConfig,
+            useValue: folderServiceConfig
+        },
+        { provide: MAT_DATE_LOCALE, useValue: 'fr' }
+    ];
+}
+function provideGloww(folderServiceConfig) {
+    return makeEnvironmentProviders(getGlowwProviders(folderServiceConfig));
+}
 class GlowwModule {
     static forRoot(folderServiceConfig) {
         console.log(`forRoot ${folderServiceConfig}`);
         return {
             ngModule: GlowwModule,
-            providers: [
-                VersionCheckService,
-                NavService,
-                VoiceRecognitionService,
-                {
-                    provide: FolderServiceConfig,
-                    useValue: folderServiceConfig
-                },
-                { provide: MAT_DATE_LOCALE, useValue: 'fr' }
-            ]
+            providers: getGlowwProviders(folderServiceConfig)
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: GlowwModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: GlowwModule, imports: [CommonModule,
-            BrowserModule,
             RouterModule,
             FormsModule,
             ReactiveFormsModule,
@@ -3683,8 +4163,7 @@ class GlowwModule {
             NgxMatNativeDateModule, // Existe selon ta liste
             //NgxMatMomentModule,
             DragDropModule,
-            AngularResizeEventModule,
-            UploadDocComponent,
+            AngularResizeEventModule, UploadDocComponent,
             SafeHtmlPipe,
             DisplayObjectsComponent,
             HeaderComponent,
@@ -3709,9 +4188,9 @@ class GlowwModule {
             AutoCompleteComponent,
             DatetimeComponent,
             RouteDirective,
-            FilterFormComponent], exports: [SafeHtmlPipe,
-            UploadDocComponent,
-            UploadFileComponent,
+            CallbackDirective,
+            FilterFormComponent], exports: [UploadDocComponent,
+            SafeHtmlPipe,
             DisplayObjectsComponent,
             HeaderComponent,
             ResultTableComponent,
@@ -3724,6 +4203,9 @@ class GlowwModule {
             CodeEditorComponent,
             HtmlEditorComponent,
             HtmlFormatPipe,
+            UploadFileComponent,
+            FileSinkDirective,
+            FileEditComponent,
             FoldersComponent,
             DownloadProgressComponent,
             SecureAComponent,
@@ -3731,14 +4213,13 @@ class GlowwModule {
             SelectComponent,
             AutoCompleteComponent,
             DatetimeComponent,
-            MatDatepickerModule,
-            NgxMatDatetimePickerModule, // Existe selon ta liste
-            NgxMatTimepickerComponent, // Attention : ta liste dit "NgxMatTimepickerComponent"
-            NgxMatNativeDateModule, // Existe selon ta liste
-            //NgxMatMomentModule,
-            FilterFormComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: GlowwModule, imports: [CommonModule,
-            BrowserModule,
+            RouteDirective,
+            CallbackDirective,
+            FilterFormComponent, MatDatepickerModule,
+            NgxMatDatetimePickerModule,
+            NgxMatTimepickerComponent,
+            NgxMatNativeDateModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: GlowwModule, providers: [{ provide: MatPaginatorIntl, useClass: GlowwMatPaginatorIntlService }], imports: [CommonModule,
             RouterModule,
             FormsModule,
             ReactiveFormsModule,
@@ -3763,8 +4244,7 @@ class GlowwModule {
             NgxMatNativeDateModule, // Existe selon ta liste
             //NgxMatMomentModule,
             DragDropModule,
-            AngularResizeEventModule,
-            UploadDocComponent,
+            AngularResizeEventModule, UploadDocComponent,
             DisplayObjectsComponent,
             ConfirmationComponent,
             PromptComponent,
@@ -3779,7 +4259,7 @@ class GlowwModule {
             AutoCompleteComponent,
             DatetimeComponent,
             FilterFormComponent, MatDatepickerModule,
-            NgxMatDatetimePickerModule, // Attention : ta liste dit "NgxMatTimepickerComponent"
+            NgxMatDatetimePickerModule,
             NgxMatNativeDateModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: GlowwModule, decorators: [{
@@ -3787,7 +4267,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             args: [{
                     imports: [
                         CommonModule,
-                        BrowserModule,
                         RouterModule,
                         FormsModule,
                         ReactiveFormsModule,
@@ -3813,64 +4292,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         //NgxMatMomentModule,
                         DragDropModule,
                         AngularResizeEventModule,
-                        UploadDocComponent,
-                        SafeHtmlPipe,
-                        DisplayObjectsComponent,
-                        HeaderComponent,
-                        ResultTableComponent,
-                        SearchFormComponent,
-                        ConfirmationComponent,
-                        PromptComponent,
-                        SecurePipe,
-                        SecureImgComponent,
-                        MenuListItemComponent,
-                        CodeEditorComponent,
-                        HtmlEditorComponent,
-                        HtmlFormatPipe,
-                        UploadFileComponent,
-                        FileSinkDirective,
-                        FileEditComponent,
-                        FoldersComponent,
-                        DownloadProgressComponent,
-                        SecureAComponent,
-                        DummyComponent,
-                        SelectComponent,
-                        AutoCompleteComponent,
-                        DatetimeComponent,
-                        RouteDirective,
-                        FilterFormComponent
+                        ...GLOWW_STANDALONE_DECLARATIONS
                     ],
-                    providers: [],
-                    exports: [
-                        SafeHtmlPipe,
-                        UploadDocComponent,
-                        UploadFileComponent,
-                        DisplayObjectsComponent,
-                        HeaderComponent,
-                        ResultTableComponent,
-                        SearchFormComponent,
-                        ConfirmationComponent,
-                        PromptComponent,
-                        SecurePipe,
-                        SecureImgComponent,
-                        MenuListItemComponent,
-                        CodeEditorComponent,
-                        HtmlEditorComponent,
-                        HtmlFormatPipe,
-                        FoldersComponent,
-                        DownloadProgressComponent,
-                        SecureAComponent,
-                        DummyComponent,
-                        SelectComponent,
-                        AutoCompleteComponent,
-                        DatetimeComponent,
-                        MatDatepickerModule,
-                        NgxMatDatetimePickerModule, // Existe selon ta liste
-                        NgxMatTimepickerComponent, // Attention : ta liste dit "NgxMatTimepickerComponent"
-                        NgxMatNativeDateModule, // Existe selon ta liste
-                        //NgxMatMomentModule,
-                        FilterFormComponent
-                    ]
+                    providers: [{ provide: MatPaginatorIntl, useClass: GlowwMatPaginatorIntlService }],
+                    exports: [...GLOWW_MODULE_EXPORTS]
                 }]
         }] });
 
@@ -4010,5 +4435,5 @@ class GlowwValidators {
  * Generated bundle index. Do not edit.
  */
 
-export { API_SERVER_URL, AdministratorGuard, AuthGuard, AuthenticationService, AuthenticationServiceConfig, AutoCompleteComponent, BaseCollectionComponent, ChangePasswordDlgComponent, CodeEditorComponent, ConfirmationComponent, ConfirmationModel, DatetimeComponent, DialogService, DisplayObjectsComponent, DownloadProgressComponent, DummyComponent, ErrorInterceptor, FilterFormComponent, FolderService, FolderServiceConfig, FoldersComponent, GLOWW_APPLI, GlowwModule, GlowwSecurityModule, GlowwSecurityService, GlowwService, GlowwValidators, HasUnsavedDataGuard, HeaderComponent, HtmlEditorComponent, HtmlFormatPipe, JwtInterceptor, LoginComponent, MenuListItemComponent, NavService, PromptComponent, PromptModel, ResultTableComponent, SafeHtmlPipe, SearchFormComponent, SecureAComponent, SecureImgComponent, SecurePipe, SelectComponent, StagingInterceptor, UploadDocComponent, UploadFileComponent, UserMenuComponent, VersionCheckService, VoiceRecognitionService };
+export { API_SERVER_URL, AdministratorGuard, AuthGuard, AuthenticationService, AuthenticationServiceConfig, AutoCompleteComponent, BaseCollectionComponent, CallbackDirective, ChangePasswordDlgComponent, CodeEditorComponent, ConfirmationComponent, ConfirmationModel, DatetimeComponent, DialogService, DisplayObjectsComponent, DownloadProgressComponent, DummyComponent, ErrorInterceptor, FileEditComponent, FileSinkDirective, FilterFormComponent, FolderService, FolderServiceConfig, FoldersComponent, GLOWW_APPLI, GLOWW_MODULE_EXPORTS, GLOWW_SECURITY_STANDALONE_DECLARATIONS, GLOWW_STANDALONE_DECLARATIONS, GlowwModule, GlowwSecurityModule, GlowwSecurityService, GlowwService, GlowwValidators, HasUnsavedDataGuard, HeaderComponent, HtmlEditorComponent, HtmlFormatPipe, JwtInterceptor, LoginComponent, MenuListItemComponent, NavService, PromptComponent, PromptModel, ResultTableComponent, RouteDirective, SafeHtmlPipe, SearchFormComponent, SecureAComponent, SecureImgComponent, SecurePipe, SelectComponent, SocialNetworkComponent, SocialNetworkDlgComponent, StagingInterceptor, UploadDocComponent, UploadFileComponent, UserMenuComponent, VersionCheckService, VoiceRecognitionService, provideGloww, provideGlowwSecurity };
 //# sourceMappingURL=gloww-gloww.mjs.map