@gloww/gloww 20.0.0-beta.28 → 20.0.0-beta.29

package/fesm2022/gloww-gloww.mjs

@@ -29,6 +29,7 @@ import { NG_VALUE_ACCESSOR, FormsModule, UntypedFormControl, ReactiveFormsModule
 import { MatProgressBar, MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatDatepickerInput, MatDatepickerToggle, MatDatepicker, MatDatepickerModule } from '@angular/material/datepicker';
 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';
@@ -45,7 +46,6 @@ import { CdkDrag, CdkDragHandle, DragDropModule } from '@angular/cdk/drag-drop';
 import FileSaver from 'file-saver';
 import JSZip from 'jszip';
 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';
 
@@ -1290,8 +1290,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_) {
@@ -1303,6 +1302,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-DDTHH:mm:ss');
+        }
+        if (moment.isMoment(value)) {
+            return value.isValid() ? value.format('YYYY-MM-DDTHH:mm:ss') : null;
+        }
+        return value;
+    }
     onFilter() {
     }
     UpdateDataSource(r) {
@@ -3730,17 +3741,17 @@ class DatetimeComponent {
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
-                useExisting: DatetimeComponent
+                useExisting: forwardRef(() => DatetimeComponent)
             }
         ], ngImport: i0, template: "<div class=\"datetime-wrapper\">\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=\"time-row\">\n      <mat-form-field class=\"time-field\">\n        <mat-label>HH</mat-label>\n        <mat-select [formControl]=\"hourControl\" [disabled]=\"isDisabled\" (selectionChange)=\"markTouched()\">\n          @for (hour of hours; track hour) {\n            <mat-option [value]=\"hour\">{{ hour }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n\n      <mat-form-field class=\"time-field\">\n        <mat-label>MM</mat-label>\n        <mat-select [formControl]=\"minuteControl\" [disabled]=\"isDisabled\" (selectionChange)=\"markTouched()\">\n          @for (minute of minutes; track minute) {\n            <mat-option [value]=\"minute\">{{ minute }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n\n      @if (showSeconds) {\n        <mat-form-field class=\"time-field\">\n          <mat-label>SS</mat-label>\n          <mat-select [formControl]=\"secondControl\" [disabled]=\"isDisabled\" (selectionChange)=\"markTouched()\">\n            @for (second of seconds; track second) {\n              <mat-option [value]=\"second\">{{ second }}</mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n      }\n    </div>\n  }\n\n  <div class=\"actions-row\">\n    <button mat-button type=\"button\" (click)=\"clear()\" [disabled]=\"isDisabled\">Clear</button>\n  </div>\n</div>\n", styles: [".datetime-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.date-field,.time-field{width:100%}.time-row{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}.actions-row{display:flex;justify-content:flex-end}@media(min-width:720px){.time-row{grid-template-columns:repeat(3,minmax(0,1fr))}}\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: 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: "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: [ReactiveFormsModule, MatFormField$1, MatLabel$1, MatInput, MatDatepickerInput, MatDatepickerToggle, MatDatepicker, MatSuffix, MatSelect, MatOption, MatButton], template: "<div class=\"datetime-wrapper\">\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=\"time-row\">\n      <mat-form-field class=\"time-field\">\n        <mat-label>HH</mat-label>\n        <mat-select [formControl]=\"hourControl\" [disabled]=\"isDisabled\" (selectionChange)=\"markTouched()\">\n          @for (hour of hours; track hour) {\n            <mat-option [value]=\"hour\">{{ hour }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n\n      <mat-form-field class=\"time-field\">\n        <mat-label>MM</mat-label>\n        <mat-select [formControl]=\"minuteControl\" [disabled]=\"isDisabled\" (selectionChange)=\"markTouched()\">\n          @for (minute of minutes; track minute) {\n            <mat-option [value]=\"minute\">{{ minute }}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n\n      @if (showSeconds) {\n        <mat-form-field class=\"time-field\">\n          <mat-label>SS</mat-label>\n          <mat-select [formControl]=\"secondControl\" [disabled]=\"isDisabled\" (selectionChange)=\"markTouched()\">\n            @for (second of seconds; track second) {\n              <mat-option [value]=\"second\">{{ second }}</mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n      }\n    </div>\n  }\n\n  <div class=\"actions-row\">\n    <button mat-button type=\"button\" (click)=\"clear()\" [disabled]=\"isDisabled\">Clear</button>\n  </div>\n</div>\n", styles: [".datetime-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.date-field,.time-field{width:100%}.time-row{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}.actions-row{display:flex;justify-content:flex-end}@media(min-width:720px){.time-row{grid-template-columns:repeat(3,minmax(0,1fr))}}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{