@acorex/platform 20.9.27 → 20.9.29

package/fesm2022/acorex-platform-layout-widgets.mjs

@@ -32,7 +32,7 @@ import { FormsModule } from '@angular/forms';
 import * as i3 from '@acorex/components/select-box';
 import { AXSelectBoxComponent, AXSelectBoxModule } from '@acorex/components/select-box';
 import { setSmart, extractValue, AXPRegionalSetting, shouldUseLocaleMapShape, buildLocaleTextMapValue, isSelectionValueEqual, AXPWidgetsCatalog, AXPDataGenerator, AXP_INTEGRATION_AUTH_METHOD_TYPE, sortByMultiLanguageString, isFormValueEqual, normalizeDefinitionCategories } from '@acorex/platform/contracts';
-import { set, get, castArray, isNil, isNull, isEmpty, first, isNumber, defaultTo, has, isEqual, cloneDeep } from 'lodash-es';
+import { set, get, castArray, isNil, isNull, isEmpty, first, isNumber, defaultTo, has, isEqual, cloneDeep, isString } from 'lodash-es';
 import * as i2$2 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import { AXPCommandService, AXPQueryService, provideQuerySetups } from '@acorex/platform/runtime';
@@ -24994,67 +24994,196 @@ var timeDurationWidgetColumn_component = /*#__PURE__*/Object.freeze({
 class AXPTimerDurationWidgetEditComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
-        this.disabled = computed(() => this.options()['disabled'], ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-        this.from = computed(() => this.options()['from'].title, ...(ngDevMode ? [{ debugName: "from" }] : /* istanbul ignore next */ []));
-        this.to = computed(() => this.options()['to'].title, ...(ngDevMode ? [{ debugName: "to" }] : /* istanbul ignore next */ []));
+        //#region ---- Services & Dependencies ----
+        this.timeDurationFormatter = inject(AXTimeDurationFormatter);
+        //#endregion
+        //#region ---- Computed Properties ----
+        this.filterMode = computed(() => this.options()['filterMode'] ?? false, ...(ngDevMode ? [{ debugName: "filterMode" }] : /* istanbul ignore next */ []));
+        this.disabled = computed(() => this.filterMode() ? false : this.options()['disabled'], ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.from = computed(() => this.resolveUnit(this.options()['from'], 'HOUR'), ...(ngDevMode ? [{ debugName: "from" }] : /* istanbul ignore next */ []));
+        this.to = computed(() => this.resolveUnit(this.options()['to'], 'MINUTE'), ...(ngDevMode ? [{ debugName: "to" }] : /* istanbul ignore next */ []));
         this.minValue = computed(() => this.options()['minValue'], ...(ngDevMode ? [{ debugName: "minValue" }] : /* istanbul ignore next */ []));
         this.maxValue = computed(() => this.options()['maxValue'], ...(ngDevMode ? [{ debugName: "maxValue" }] : /* istanbul ignore next */ []));
         this.maskDigits = computed(() => (this.options()['maskDigits'] || '00:00:00:00:00:00:00:000'), ...(ngDevMode ? [{ debugName: "maskDigits" }] : /* istanbul ignore next */ []));
         this.label = computed(() => this.options()['label'] ?? false, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-        this.eff = effect(() => {
-            console.log('getValue: ', this.getValue());
-        }, ...(ngDevMode ? [{ debugName: "eff" }] : /* istanbul ignore next */ []));
+        this.operations = computed(() => {
+            const raw = this.options()['operations'];
+            return raw?.length ? raw : undefined;
+        }, ...(ngDevMode ? [{ debugName: "operations" }] : /* istanbul ignore next */ []));
+        /** Align with axp-filter-operations: ellipsis only when more than one operator; no extra gap beside editor otherwise. */
+        this.operationsMenuVisible = computed(() => this.operations()?.length !== 1, ...(ngDevMode ? [{ debugName: "operationsMenuVisible" }] : /* istanbul ignore next */ []));
+        this.operation = computed(() => {
+            const existing = this.getValue()?.operation;
+            if (existing?.type) {
+                return existing;
+            }
+            const ops = this.operations();
+            if (ops?.length === 1) {
+                return { type: ops[0].name };
+            }
+            return { type: 'equal' };
+        }, ...(ngDevMode ? [{ debugName: "operation" }] : /* istanbul ignore next */ []));
+        /** In filterMode the stored value is `{ value, operation, displayText }`; bind the unwrapped duration. */
+        this.filterEditorValue = computed(() => {
+            const raw = this.getValue();
+            if (raw && typeof raw === 'object' && 'value' in raw) {
+                return raw.value;
+            }
+            return raw;
+        }, ...(ngDevMode ? [{ debugName: "filterEditorValue" }] : /* istanbul ignore next */ []));
+        this.isFilterEditorDisabled = computed(() => this.operation().type === 'isEmpty' || this.operation().type === 'isNotEmpty', ...(ngDevMode ? [{ debugName: "isFilterEditorDisabled" }] : /* istanbul ignore next */ []));
     }
+    //#endregion
+    //#region ---- Standard Mode Handlers ----
     handleChangeValue(e) {
-        // console.log('handleChangeValue', e);
         this.setValue(e.value);
     }
+    //#endregion
+    //#region ---- Filter Mode Handlers ----
+    async handleFilterValueChange(e) {
+        await this.commitFilterValue(e.value, this.operation().type);
+    }
+    async handleOperationChanged(operationType) {
+        await this.commitFilterValue(this.filterEditorValue(), operationType);
+    }
+    //#endregion
+    //#region ---- Utility Methods ----
+    resolveUnit(raw, fallback) {
+        const title = get(raw, 'title');
+        const id = get(raw, 'id');
+        if (isString(title) && title.length) {
+            return title;
+        }
+        if (isString(id) && id.length) {
+            return id;
+        }
+        if (isString(raw) && raw.length) {
+            return raw;
+        }
+        return fallback;
+    }
+    async commitFilterValue(value, operationType) {
+        const displayText = await this.timeDurationFormatter.millisecondsToMask(value, this.from(), this.to(), false, this.maskDigits(), true);
+        this.setValue({
+            value,
+            operation: { type: operationType },
+            displayText,
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPTimerDurationWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPTimerDurationWidgetEditComponent, isStandalone: true, selector: "axp-time-duration-widget-edit", usesInheritance: true, ngImport: i0, template: `<ax-time-duration
-    [ngModel]="getValue()"
-    (onValueChanged)="handleChangeValue($event)"
-    [valueStart]="from()"
-    [valueEnd]="to()"
-    [label]="label()"
-    [minValue]="minValue()"
-    [maxValue]="maxValue()"
-    [disabled]="disabled()"
-    [maskDigits]="maskDigits()"
-  >
-    @for (validation of validationRules(); track $index) {
-      <ax-validation-rule
-        [rule]="validation.rule"
-        [message]="validation.options?.message"
-        [options]="validation.options"
-      ></ax-validation-rule>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPTimerDurationWidgetEditComponent, isStandalone: true, selector: "axp-time-duration-widget-edit", usesInheritance: true, ngImport: i0, template: `
+    @if (filterMode()) {
+      <div class="ax-flex ax-items-center" [class.ax-gap-2]="operationsMenuVisible()">
+        <div class="ax-flex-1">
+          <ax-time-duration
+            [ngModel]="filterEditorValue()"
+            (onValueChanged)="handleFilterValueChange($event)"
+            [valueStart]="from()"
+            [valueEnd]="to()"
+            [label]="label()"
+            [minValue]="minValue()"
+            [maxValue]="maxValue()"
+            [disabled]="isFilterEditorDisabled()"
+            [maskDigits]="maskDigits()"
+          >
+            @for (validation of validationRules(); track $index) {
+              <ax-validation-rule
+                [rule]="validation.rule"
+                [message]="validation.options?.message"
+                [options]="validation.options"
+              ></ax-validation-rule>
+            }
+          </ax-time-duration>
+        </div>
+        <axp-filter-operations
+          [type]="'number'"
+          [operations]="operations()"
+          [selectedOperation]="operation().type"
+          (selectedOperationChange)="handleOperationChanged($event)"
+        ></axp-filter-operations>
+      </div>
+    } @else {
+      <ax-time-duration
+        [ngModel]="getValue()"
+        (onValueChanged)="handleChangeValue($event)"
+        [valueStart]="from()"
+        [valueEnd]="to()"
+        [label]="label()"
+        [minValue]="minValue()"
+        [maxValue]="maxValue()"
+        [disabled]="disabled()"
+        [maskDigits]="maskDigits()"
+      >
+        @for (validation of validationRules(); track $index) {
+          <ax-validation-rule
+            [rule]="validation.rule"
+            [message]="validation.options?.message"
+            [options]="validation.options"
+          ></ax-validation-rule>
+        }
+      </ax-time-duration>
     }
-  </ax-time-duration>`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXTimeDurationModule }, { kind: "component", type: i3$5.AXTimeDurationComponent, selector: "ax-time-duration", inputs: ["disabled", "tabIndex", "readonly", "look", "name", "valueStart", "valueEnd", "label", "maskDigits", "minValue", "maxValue"], outputs: ["onValueChanged"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXTimeDurationModule }, { kind: "component", type: i3$5.AXTimeDurationComponent, selector: "ax-time-duration", inputs: ["disabled", "tabIndex", "readonly", "look", "name", "valueStart", "valueEnd", "label", "maskDigits", "minValue", "maxValue"], outputs: ["onValueChanged"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "component", type: AXPFilterOperationsComponent, selector: "axp-filter-operations", inputs: ["selectedOperation", "type", "operations"], outputs: ["selectedOperationChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPTimerDurationWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-time-duration-widget-edit',
-                    template: `<ax-time-duration
-    [ngModel]="getValue()"
-    (onValueChanged)="handleChangeValue($event)"
-    [valueStart]="from()"
-    [valueEnd]="to()"
-    [label]="label()"
-    [minValue]="minValue()"
-    [maxValue]="maxValue()"
-    [disabled]="disabled()"
-    [maskDigits]="maskDigits()"
-  >
-    @for (validation of validationRules(); track $index) {
-      <ax-validation-rule
-        [rule]="validation.rule"
-        [message]="validation.options?.message"
-        [options]="validation.options"
-      ></ax-validation-rule>
+                    template: `
+    @if (filterMode()) {
+      <div class="ax-flex ax-items-center" [class.ax-gap-2]="operationsMenuVisible()">
+        <div class="ax-flex-1">
+          <ax-time-duration
+            [ngModel]="filterEditorValue()"
+            (onValueChanged)="handleFilterValueChange($event)"
+            [valueStart]="from()"
+            [valueEnd]="to()"
+            [label]="label()"
+            [minValue]="minValue()"
+            [maxValue]="maxValue()"
+            [disabled]="isFilterEditorDisabled()"
+            [maskDigits]="maskDigits()"
+          >
+            @for (validation of validationRules(); track $index) {
+              <ax-validation-rule
+                [rule]="validation.rule"
+                [message]="validation.options?.message"
+                [options]="validation.options"
+              ></ax-validation-rule>
+            }
+          </ax-time-duration>
+        </div>
+        <axp-filter-operations
+          [type]="'number'"
+          [operations]="operations()"
+          [selectedOperation]="operation().type"
+          (selectedOperationChange)="handleOperationChanged($event)"
+        ></axp-filter-operations>
+      </div>
+    } @else {
+      <ax-time-duration
+        [ngModel]="getValue()"
+        (onValueChanged)="handleChangeValue($event)"
+        [valueStart]="from()"
+        [valueEnd]="to()"
+        [label]="label()"
+        [minValue]="minValue()"
+        [maxValue]="maxValue()"
+        [disabled]="disabled()"
+        [maskDigits]="maskDigits()"
+      >
+        @for (validation of validationRules(); track $index) {
+          <ax-validation-rule
+            [rule]="validation.rule"
+            [message]="validation.options?.message"
+            [options]="validation.options"
+          ></ax-validation-rule>
+        }
+      </ax-time-duration>
     }
-  </ax-time-duration>`,
+  `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [FormsModule, AXFormModule, AXTimeDurationModule, AXValidationModule],
+                    imports: [FormsModule, AXFormModule, AXTimeDurationModule, AXValidationModule, AXPFilterOperationsComponent],
                 }]
         }] });
 
@@ -25788,130 +25917,6 @@ const AXPStringFilterWidget = {
     },
 };
 
-class AXPTimeDurationFilterComponent extends AXPValueWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.timeDurationFormatter = inject(AXTimeDurationFormatter);
-        this.editorPath = `__${this.path}EditorValue`;
-        this.operations = computed(() => {
-            const raw = this.options()['operations'];
-            return raw?.length ? raw : undefined;
-        }, ...(ngDevMode ? [{ debugName: "operations" }] : /* istanbul ignore next */ []));
-        /** Align with axp-filter-operations: ellipsis only when more than one operator; no extra gap beside editor otherwise. */
-        this.operationsMenuVisible = computed(() => this.operations()?.length !== 1, ...(ngDevMode ? [{ debugName: "operationsMenuVisible" }] : /* istanbul ignore next */ []));
-        this.operation = computed(() => {
-            const existing = this.getValue()?.operation;
-            if (existing?.type) {
-                return existing;
-            }
-            const ops = this.operations();
-            if (ops?.length === 1) {
-                return { type: ops[0].name };
-            }
-            return { type: 'equal' };
-        }, ...(ngDevMode ? [{ debugName: "operation" }] : /* istanbul ignore next */ []));
-        this.value = computed(() => this.getValue()?.value, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-        this.hasClearButton = computed(() => this.options()['hasClearButton'], ...(ngDevMode ? [{ debugName: "hasClearButton" }] : /* istanbul ignore next */ []));
-        this.timeDurationNode = signal({
-            type: 'time-duration',
-            defaultValue: undefined,
-            options: {},
-            path: this.editorPath,
-        }, ...(ngDevMode ? [{ debugName: "timeDurationNode" }] : /* istanbul ignore next */ []));
-        this.#efUpdateTimeDurationNode = effect(() => {
-            untracked(async () => {
-                const node = {
-                    type: 'time-duration',
-                    path: this.editorPath,
-                    defaultValue: this.value(),
-                    options: {
-                        from: { title: 'HOUR' },
-                        to: { title: 'MINUTE' },
-                    },
-                };
-                this.timeDurationNode.set(node);
-            });
-        }, ...(ngDevMode ? [{ debugName: "#efUpdateTimeDurationNode" }] : /* istanbul ignore next */ []));
-        this.displayText = async () => {
-            return await this.timeDurationFormatter.millisecondsToMask(this.value(), 'HOUR', 'MINUTE', false, '00:00:00:00:00:00:00:000', true);
-        };
-        this.#efUpdateValue = effect(async () => {
-            const newValue = this.contextService.getValue(this.editorPath);
-            if (!newValue)
-                return;
-            untracked(async () => {
-                this.setValue({
-                    value: newValue,
-                    operation: this.operation(),
-                    displayText: await this.displayText(),
-                });
-            });
-        }, ...(ngDevMode ? [{ debugName: "#efUpdateValue" }] : /* istanbul ignore next */ []));
-    }
-    #efUpdateTimeDurationNode;
-    #efUpdateValue;
-    handleOperationChanged(e) {
-        this.setValue({
-            value: this.value(),
-            operation: { type: e },
-            displayText: this.displayText(),
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPTimeDurationFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXPTimeDurationFilterComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
-    <div class="ax-flex ax-items-center" [class.ax-gap-2]="operationsMenuVisible()">
-      <div class="ax-flex-1">
-        <ng-container axp-widget-renderer [node]="timeDurationNode()" mode="edit"></ng-container>
-      </div>
-      <axp-filter-operations
-        [type]="'number'"
-        [operations]="operations()"
-        [selectedOperation]="operation().type"
-        (selectedOperationChange)="handleOperationChanged($event)"
-      ></axp-filter-operations>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "component", type: AXPFilterOperationsComponent, selector: "axp-filter-operations", inputs: ["selectedOperation", "type", "operations"], outputs: ["selectedOperationChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPTimeDurationFilterComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: `
-    <div class="ax-flex ax-items-center" [class.ax-gap-2]="operationsMenuVisible()">
-      <div class="ax-flex-1">
-        <ng-container axp-widget-renderer [node]="timeDurationNode()" mode="edit"></ng-container>
-      </div>
-      <axp-filter-operations
-        [type]="'number'"
-        [operations]="operations()"
-        [selectedOperation]="operation().type"
-        (selectedOperationChange)="handleOperationChanged($event)"
-      ></axp-filter-operations>
-    </div>
-  `,
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AXPWidgetCoreModule, AXPFilterOperationsComponent],
-                }]
-        }] });
-
-var timeDurationFilter_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPTimeDurationFilterComponent: AXPTimeDurationFilterComponent
-});
-
-const AXPTimeDurationFilterWidget = {
-    name: 'time-duration-filter',
-    title: 'Time Duration Filter',
-    type: 'filter',
-    icon: 'fa-light fa-square',
-    properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY],
-    components: {
-        edit: {
-            component: () => Promise.resolve().then(function () { return timeDurationFilter_component; }).then((c) => c.AXPTimeDurationFilterComponent),
-        },
-    },
-};
-
 const AXPAlertBoxWidget = {
     name: 'alert-box-layout',
     title: '@platform-layout-widgets:widgets.alert-box-layout.title',
@@ -28680,7 +28685,6 @@ const REGISTERED_WIDGETS = [
     AXPBooleanFilterWidget,
     AXPNumberFilterWidget,
     AXPStatusFilterWidget,
-    AXPTimeDurationFilterWidget,
     AXPDataSourceOptionsWidget,
     AXPFlexOptionsWidget,
     AXPFlexItemOptionsWidget,
@@ -28736,6 +28740,20 @@ const EXTENDED_WIDGETS = [
             icon: 'fa-light fa-square',
         },
     },
+    {
+        parentName: AXPTimeDurationWidget.name,
+        widget: {
+            name: 'time-duration-filter',
+            title: 'Time Duration Filter',
+            categories: AXP_WIDGETS_EDITOR_CATEGORY,
+            type: 'filter',
+            components: {},
+            options: {
+                filterMode: true,
+            },
+            icon: 'fa-light fa-square',
+        },
+    },
 ];
 //#endregion
 //#region ----   Core Widgets Provider   ----