@acorex/platform 20.3.0-next.21 → 20.3.0-next.22

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

@@ -16711,7 +16711,7 @@ class AXPTimeDurationWidgetColumnComponent extends AXPColumnWidgetComponent {
         this.internalValue = signal('', ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
     }
     async ngAfterViewInit() {
-        this.internalValue.set(await this.timeDurationFormatter.millisecondsToMask(this.rawValue, this.from, this.to));
+        this.internalValue.set(await this.timeDurationFormatter.millisecondsToMask(this.rawValue, this.from, this.to, false, '00:00:00:00:00:00:00:000', true));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPTimeDurationWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: AXPTimeDurationWidgetColumnComponent, isStandalone: true, selector: "axp-time-duration-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData" }, usesInheritance: true, ngImport: i0, template: `{{ internalValue() }}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -16738,6 +16738,8 @@ class AXPTimerDurationWidgetEditComponent extends AXPValueWidgetComponent {
         this.disabled = computed(() => this.options()['disabled'], ...(ngDevMode ? [{ debugName: "disabled" }] : []));
         this.from = computed(() => this.options()['from'].title, ...(ngDevMode ? [{ debugName: "from" }] : []));
         this.to = computed(() => this.options()['to'].title, ...(ngDevMode ? [{ debugName: "to" }] : []));
+        this.minValue = computed(() => this.options()['minValue'], ...(ngDevMode ? [{ debugName: "minValue" }] : []));
+        this.maxValue = computed(() => this.options()['maxValue'], ...(ngDevMode ? [{ debugName: "maxValue" }] : []));
         this.label = computed(() => this.options()['label'] ?? false, ...(ngDevMode ? [{ debugName: "label" }] : []));
     }
     handleChangeValue(e) {
@@ -16751,6 +16753,8 @@ class AXPTimerDurationWidgetEditComponent extends AXPValueWidgetComponent {
     [valueStart]="from()"
     [valueEnd]="to()"
     [label]="label()"
+    [minValue]="minValue()"
+    [maxValue]="maxValue()"
     [disabled]="disabled()"
   >
     @for (validation of validationRules(); track $index) {
@@ -16760,7 +16764,7 @@ class AXPTimerDurationWidgetEditComponent extends AXPValueWidgetComponent {
         [options]="validation.options"
       ></ax-validation-rule>
     }
-  </ax-time-duration>`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXTimeDurationModule }, { kind: "component", type: i3$7.AXTimeDurationComponent, selector: "ax-time-duration", inputs: ["disabled", "tabIndex", "readonly", "look", "valueStart", "valueEnd", "label", "maskDigits"], outputs: ["onValueChanged"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </ax-time-duration>`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXTimeDurationModule }, { kind: "component", type: i3$7.AXTimeDurationComponent, selector: "ax-time-duration", inputs: ["disabled", "tabIndex", "readonly", "look", "valueStart", "valueEnd", "label", "maskDigits", "minValue", "maxValue"], outputs: ["onValueChanged"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPTimerDurationWidgetEditComponent, decorators: [{
             type: Component,
@@ -16772,6 +16776,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
     [valueStart]="from()"
     [valueEnd]="to()"
     [label]="label()"
+    [minValue]="minValue()"
+    [maxValue]="maxValue()"
     [disabled]="disabled()"
   >
     @for (validation of validationRules(); track $index) {
@@ -16799,7 +16805,8 @@ class AXPTimerDurationWidgetViewComponent extends AXPValueWidgetComponent {
         this.translate = inject(AXTranslationService);
         this.from = computed(() => this.options()['from'].title, ...(ngDevMode ? [{ debugName: "from" }] : []));
         this.to = computed(() => this.options()['to'].title, ...(ngDevMode ? [{ debugName: "to" }] : []));
-        this.internalValue = computed(() => this.timeDurationFormatter.millisecondsToMask(this.getValue(), this.from(), this.to()), ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
+        this.label = computed(() => this.options()['label'] ?? false, ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.internalValue = computed(() => this.timeDurationFormatter.millisecondsToMask(this.getValue(), this.from(), this.to(), this.label(), '00:00:00:00:00:00:00:000', true), ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPTimerDurationWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: AXPTimerDurationWidgetViewComponent, isStandalone: true, selector: "axp-time-duration-widget-view", usesInheritance: true, ngImport: i0, template: `<p class="ax-text-muted">{{ internalValue() | async }}</p>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -16826,7 +16833,7 @@ const AXPTimeDurationWidget = {
     icon: 'fa-light fa-clock',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
     groups: [AXPWidgetGroupEnum.FormElement],
-    defaultFilterWidgetName: 'number-filter',
+    defaultFilterWidgetName: 'time-duration-filter',
     type: 'editor',
     properties: [
         AXP_DISABLED_PROPERTY,
@@ -17323,7 +17330,7 @@ class AXPNumberFilterWidgetEditComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
         this.value = computed(() => this.getValue()?.value, ...(ngDevMode ? [{ debugName: "value" }] : []));
-        this.operation = computed(() => this.getValue()?.operation || { type: 'contains' }, ...(ngDevMode ? [{ debugName: "operation" }] : []));
+        this.operation = computed(() => this.getValue()?.operation || { type: 'equal' }, ...(ngDevMode ? [{ debugName: "operation" }] : []));
         this.placeholder = computed(() => this.options()['placeholder'], ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
         this.seprator = computed(() => this.options()['seprator'] ?? null, ...(ngDevMode ? [{ debugName: "seprator" }] : []));
     }
@@ -17682,6 +17689,108 @@ const AXPStringFilterWidget = {
     },
 };
 
+class AXPTimeDurationFilterComponent extends AXPValueWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.timeDurationFormatter = inject(AXTimeDurationFormatter);
+        this.editorPath = `__${this.path}EditorValue`;
+        this.operation = computed(() => this.getValue()?.operation || { type: 'equal' }, ...(ngDevMode ? [{ debugName: "operation" }] : []));
+        this.value = computed(() => this.getValue()?.value, ...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.hasClearButton = computed(() => this.options()['hasClearButton'], ...(ngDevMode ? [{ debugName: "hasClearButton" }] : []));
+        this.timeDurationNode = signal({
+            type: 'time-duration',
+            defaultValue: undefined,
+            options: {},
+            path: this.editorPath,
+        }, ...(ngDevMode ? [{ debugName: "timeDurationNode" }] : []));
+        this.#efUpdateTimeDurationNode = effect(() => {
+            const node = {
+                type: 'time-duration',
+                path: this.editorPath,
+                options: {
+                    hasClearButton: this.hasClearButton(),
+                    from: { title: 'HOUR' },
+                    to: { title: 'MINUTE' },
+                },
+            };
+            this.timeDurationNode.set(node);
+        }, ...(ngDevMode ? [{ debugName: "#efUpdateTimeDurationNode" }] : []));
+        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);
+            untracked(async () => {
+                this.setValue({
+                    value: newValue,
+                    operation: this.operation(),
+                    displayText: await this.displayText(),
+                });
+            });
+        }, ...(ngDevMode ? [{ debugName: "#efUpdateValue" }] : []));
+    }
+    #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: "20.3.4", ngImport: i0, type: AXPTimeDurationFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: AXPTimeDurationFilterComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <div class="ax-flex ax-items-center ax-gap-2">
+      <div class="ax-flex-1">
+        <ng-container axp-widget-renderer [node]="timeDurationNode()" mode="edit"></ng-container>
+      </div>
+      <axp-filter-operations
+        [type]="'number'"
+        [selectedOperation]="operation().type"
+        (selectedOperationChange)="handleOperationChanged($event)"
+      ></axp-filter-operations>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "component", type: AXPFilterOperationsComponent, selector: "axp-filter-operations", inputs: ["selectedOperation", "type"], outputs: ["selectedOperationChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPTimeDurationFilterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <div class="ax-flex ax-items-center ax-gap-2">
+      <div class="ax-flex-1">
+        <ng-container axp-widget-renderer [node]="timeDurationNode()" mode="edit"></ng-container>
+      </div>
+      <axp-filter-operations
+        [type]="'number'"
+        [selectedOperation]="operation().type"
+        (selectedOperationChange)="handleOperationChanged($event)"
+      ></axp-filter-operations>
+    </div>
+  `,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule, 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 AXPDocumentWidget = {
     name: 'document-layout',
     title: 'Document',
@@ -19286,6 +19395,7 @@ class AXPWidgetsModule {
                     AXPNumberFilterWidget,
                     AXPDateTimeFilterWidget,
                     AXPSelectFilterWidget,
+                    AXPTimeDurationFilterWidget,
                     AXPFlexOptionsWidget,
                     AXPFlexItemOptionsWidget,
                     AXPGridOptionsWidget,
@@ -19374,6 +19484,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                                 AXPNumberFilterWidget,
                                 AXPDateTimeFilterWidget,
                                 AXPSelectFilterWidget,
+                                AXPTimeDurationFilterWidget,
                                 AXPFlexOptionsWidget,
                                 AXPFlexItemOptionsWidget,
                                 AXPGridOptionsWidget,