@acorex/cdk 22.1.0-next.2 → 22.1.0-next.20

package/fesm2022/acorex-cdk-common.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { model, output, Component, inject, ElementRef, signal, afterNextRender, Injectable, ChangeDetectorRef, ViewContainerRef, EventEmitter, DOCUMENT, PLATFORM_ID, Renderer2, Input, Directive, NgModule, InjectionToken, Output, input, effect } from '@angular/core';
+import { model, output, Component, inject, ElementRef, signal, afterNextRender, Injectable, EventEmitter, PLATFORM_ID, ChangeDetectorRef, ViewContainerRef, DOCUMENT as DOCUMENT$1, Renderer2, Input, Directive, NgModule, InjectionToken, Output, input, effect } from '@angular/core';
 import { AXHtmlUtil } from '@acorex/core/utils';
-import { flatten, cloneDeep, isEqual, omit, get } from 'lodash-es';
 import { isBrowser } from '@acorex/core/platform';
 import { AXValidationService } from '@acorex/core/validation';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { omit, isEqual, flatten, cloneDeep, get } from 'lodash-es';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
-import { isPlatformBrowser } from '@angular/common';
 import { noop, Subscription, BehaviorSubject, debounceTime, distinctUntilChanged, Subject, fromEvent, skip } from 'rxjs';
 import { DataSource } from '@angular/cdk/collections';
 import { EventManager } from '@angular/platform-browser';
@@ -66,6 +66,13 @@ class NXComponent {
     get nativeElement() {
         return this.#elementRef.nativeElement;
     }
+    /**
+     * Gets the host HTML element of the component.
+     * Same contract as classic editors so `ax-label` / `ax-form-field` can associate the field.
+     */
+    getHostElement() {
+        return this.nativeElement;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: NXComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: NXComponent }); }
 }
@@ -136,25 +143,155 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 }]
         }], propDecorators: { look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }, { type: i0.Output, args: ["lookChange"] }] } });
 
-class NXValueComponent {
+/**
+ * Signal-based value editor with the same `ax-validation-rule` / `ax-form` contract as the classic value mixins.
+ */
+class NXValueComponent extends NXComponent {
     constructor() {
-        this.readonly = model(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "readonly" }] : /* istanbul ignore next */ []));
-        this.name = model(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
-        this.value = model(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
-        this.onValueChanged = output();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: NXValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: NXValueComponent, isStandalone: true, selector: "ng-component", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { readonly: "readonlyChange", name: "nameChange", value: "valueChange", onValueChanged: "onValueChanged" }, ngImport: i0, template: '', isInline: true }); }
+        super(...arguments);
+        this.validationRulesChange = new EventEmitter();
+        this.#validationRules = [];
+        this.#state = 'clear';
+        this.#validationService = inject(AXValidationService);
+        this.#document = inject(DOCUMENT);
+        this.#platformId = inject(PLATFORM_ID);
+        this.#registerValidation = afterNextRender(() => {
+            this.registerValidation();
+        });
+    }
+    #validationRules;
+    #state;
+    #validationService;
+    #document;
+    #platformId;
+    #registerValidation;
+    get isRequired() {
+        return this.#validationRules.some((rule) => rule.rule == 'required');
+    }
+    get state() {
+        return this.#state;
+    }
+    registerValidation() {
+        this.nativeElement.querySelectorAll('[ax-form-item="true"]').forEach((node) => {
+            node.removeAttribute('ax-form-item');
+        });
+        this.nativeElement.setAttribute('ax-form-item', 'true');
+    }
+    addValidationRule(rule) {
+        this.#validationRules.push(rule);
+        this.validationRulesChange.emit(this.#validationRules);
+    }
+    removeValidationRule(ruleToRemove) {
+        this.#validationRules = this.#validationRules.filter((rule) => {
+            if (rule.rule !== ruleToRemove.rule) {
+                return true;
+            }
+            const ruleOptions = omit(rule.options, ['title']);
+            const removeOptions = omit(ruleToRemove.options, ['title']);
+            return !isEqual(ruleOptions['pattern'], removeOptions['pattern']);
+        });
+        this.validationRulesChange.emit(this.#validationRules);
+        this.setState('clear');
+    }
+    removeValidationRuleByType(type) {
+        this.#validationRules = this.#validationRules.filter((rule) => rule.rule !== type);
+        this.validationRulesChange.emit(this.#validationRules);
+        this.setState('clear');
+    }
+    async validate() {
+        const containerClasses = ['ax-editor-container', 'ax-checkbox', 'ax-radio'];
+        const container = containerClasses.some((className) => this.nativeElement.classList.contains(className))
+            ? this.nativeElement
+            : this.nativeElement.querySelector('.ax-editor-container');
+        const formField = (container || this.nativeElement).closest('ax-form-field') || container?.closest('ax-checkbox');
+        const label = formField?.querySelector('ax-label') || formField?.querySelector('label');
+        const rules = this.#validationService.ruleFor(this.#currentValue());
+        this.#validationRules.forEach((rule) => {
+            rule.options ??= {};
+            rule.options['title'] = (label?.firstChild?.textContent ?? this.#currentName())?.replace('*', '').trim();
+            rules.addRule(rule.rule, rule.options);
+        });
+        const result = await rules.validate();
+        if (result.result) {
+            this.setState('clear');
+        }
+        else {
+            const message = result.rules.find((rule) => !rule.result)?.message;
+            this.setState('error', message);
+        }
+        return result;
+    }
+    setState(state, ...args) {
+        if (!isBrowser()) {
+            return;
+        }
+        const container = this.nativeElement.classList.contains('ax-editor-container')
+            ? this.nativeElement
+            : this.nativeElement.querySelector('.ax-editor-container');
+        const formField = (container || this.nativeElement).closest('ax-form-field');
+        const label = formField?.querySelector('ax-label') || formField?.querySelector('label');
+        let target = container || this.nativeElement.firstElementChild;
+        if (target?.querySelector('.ax-error-container')) {
+            target = target.querySelector('.ax-error-container');
+        }
+        const parent = target?.parentElement;
+        if (!target || !parent) {
+            return;
+        }
+        switch (state) {
+            case 'clear':
+                this.#state = 'clear';
+                parent.querySelector('span.ax-error-message')?.remove();
+                label?.classList.remove('ax-state-error');
+                target.classList.remove('ax-state-error', 'ax-state-success');
+                break;
+            case 'success':
+                this.setState('clear');
+                target.classList.add('ax-state-success');
+                this.#state = 'success';
+                break;
+            case 'error':
+                this.setState('clear');
+                if (isPlatformBrowser(this.#platformId)) {
+                    const message = args[0] ?? '';
+                    if (message) {
+                        const span = this.#document.createElement('span');
+                        span.innerHTML = message;
+                        span.classList.add('ax-error-message');
+                        parent.appendChild(span);
+                    }
+                }
+                label?.classList.add('ax-state-error');
+                target.classList.add('ax-state-error');
+                this.#state = 'error';
+                break;
+        }
+    }
+    resetErrors() {
+        this.setState('clear');
+    }
+    commitValue(value, _isUserInteraction = false) {
+        const model = this.#valueModel();
+        model?.set?.(value);
+    }
+    #currentValue() {
+        return this.#resolve(this.value);
+    }
+    #currentName() {
+        return String(this.#resolve(this.name) ?? '');
+    }
+    #valueModel() {
+        return this.value;
+    }
+    #resolve(prop) {
+        return typeof prop === 'function' ? prop() : prop;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: NXValueComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: NXValueComponent }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: NXValueComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: '',
-                }]
-        }], propDecorators: { readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }, { type: i0.Output, args: ["readonlyChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }, { type: i0.Output, args: ["nameChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onValueChanged: [{ type: i0.Output, args: ["onValueChanged"] }] } });
+            type: Injectable
+        }] });
 
 const defaultOffset = 3;
 function convertToPlacement(value) {
@@ -575,7 +712,7 @@ class MXValueComponent extends MXInteractiveComponent {
         this._isUserInteraction = false;
         this.stateChange = new EventEmitter();
         this._state = 'clear';
-        this.document = inject(DOCUMENT);
+        this.document = inject(DOCUMENT$1);
         this.platformID = inject(PLATFORM_ID);
         this.validationService = inject(AXValidationService);
         this.validationRulesChange = new EventEmitter();
@@ -1047,6 +1184,10 @@ class AXListDataSource extends DataSource {
             .pipe(distinctUntilChanged())
             .subscribe((range) => {
             this._range = range;
+            if (range.end <= range.start) {
+                this.source.setPage(0);
+                return;
+            }
             const startPage = this.getPageForIndex(range.start);
             const endPage = this.getPageForIndex(range.end - 1);
             for (let i = startPage; i <= endPage; i++) {
@@ -1094,6 +1235,7 @@ class AXDataSource {
         this._totalCount = 0;
         this._items = [];
         this.fetchedPages = new Set();
+        this.inflightPages = new Set();
         this._page = 0;
         this._query = { skip: 0, take: 0, sort: [] };
         this.onChanged = new Subject();
@@ -1106,18 +1248,26 @@ class AXDataSource {
         this._items = new Array(0);
         this._query.take = this.config.pageSize;
     }
+    pageHasCachedItems(page) {
+        const start = page * this.config.pageSize;
+        return this._cachedItems.slice(start, start + this.config.pageSize).some((item) => item != null);
+    }
     load() {
         const page = this._page;
-        if (this.fetchedPages.has(page) && this.useCache) {
+        if (this.inflightPages.has(page)) {
+            return;
+        }
+        if (this.fetchedPages.has(page) && this.useCache && this.pageHasCachedItems(page)) {
             return;
         }
         this.setLoadingState(true);
-        this.fetchedPages.add(page);
+        this.inflightPages.add(page);
         this._query.take = this.config.pageSize;
         this._query.skip = page * this.config.pageSize;
         this.config
             .load({ ...this._query })
             .then((result) => {
+            this.fetchedPages.add(page);
             if (this._totalCount != result.total) {
                 this._cachedItems = new Array(result.total);
                 this._totalCount = result.total;
@@ -1132,8 +1282,12 @@ class AXDataSource {
                 totalPages: this.totalPages,
             };
             this.onChanged.next(event);
+        })
+            .catch(() => {
+            this.fetchedPages.delete(page);
         })
             .finally(() => {
+            this.inflightPages.delete(page);
             this.setLoadingState(false);
         });
     }
@@ -1170,6 +1324,7 @@ class AXDataSource {
         this._items = new Array(0);
         this._cachedItems = new Array(this.config.pageSize);
         this.fetchedPages.clear();
+        this.inflightPages.clear();
         this._page = 0;
         this._totalCount = 0;
     }
@@ -1263,7 +1418,7 @@ class AXAutoFocusDirective {
         this._host = inject(AXFocusableComponent, { host: true, self: true, optional: true });
         this.autoFocus = true;
         this.time = 50;
-        this.document = inject(DOCUMENT);
+        this.document = inject(DOCUMENT$1);
         this.platformID = inject(PLATFORM_ID);
     }
     ngAfterViewInit() {
@@ -1309,7 +1464,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 class AXHotkeysService {
     constructor() {
         this.eventManager = inject(EventManager);
-        this.document = inject(DOCUMENT);
+        this.document = inject(DOCUMENT$1);
         this.defaults = {
             element: this.document,
         };
@@ -2491,7 +2646,7 @@ class AXRippleDirective {
         this.cdr = inject(ChangeDetectorRef);
         this.enabled = true;
         this.axRippleColor = 'var(--ax-comp-ripple-color, rgba(255, 255, 255, 0.3))';
-        this.document = inject(DOCUMENT);
+        this.document = inject(DOCUMENT$1);
         this.platformID = inject(PLATFORM_ID);
     }
     ngOnInit() {