@acorex/components 19.14.0-next.2 → 19.14.0

package/fesm2022/acorex-components-common.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { model, output, Component, inject, ElementRef, signal, afterNextRender, Injectable, ChangeDetectorRef, ViewContainerRef, EventEmitter, PLATFORM_ID, Input, Host, Self, Optional, Directive, Inject, NgModule, InjectionToken, Output, input, effect } from '@angular/core';
+import { model, output, Component, inject, ElementRef, signal, afterNextRender, Injectable, ChangeDetectorRef, ViewContainerRef, EventEmitter, PLATFORM_ID, Input, Host, Self, Optional, Directive, NgModule, InjectionToken, input, HostListener, Output, effect } from '@angular/core';
 import { AXHtmlUtil } from '@acorex/core/utils';
-import { flatten, clone, cloneDeep, isEqual, set } from 'lodash-es';
+import { flatten, clone, cloneDeep, isEqual, omit, set } from 'lodash-es';
 import { isBrowser } from '@acorex/core/platform';
 import { AXValidationService } from '@acorex/core/validation';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
@@ -274,13 +274,7 @@ const AX_PLACEMENT_MAP = {
     },
     'bottom-start': {
         origin: AX_PLACEMENT_BOTTOM_START,
-        alts: [
-            AX_PLACEMENT_BOTTOM_END,
-            AX_PLACEMENT_TOP_START,
-            AX_PLACEMENT_TOP_END,
-            AX_PLACEMENT_START,
-            AX_PLACEMENT_END,
-        ],
+        alts: [AX_PLACEMENT_BOTTOM_END, AX_PLACEMENT_TOP_START, AX_PLACEMENT_TOP_END, AX_PLACEMENT_START, AX_PLACEMENT_END],
     },
     'bottom-end': {
         origin: AX_PLACEMENT_BOTTOM_END,
@@ -649,9 +643,18 @@ class MXValueComponent extends MXInteractiveComponent {
         this.validationRules.push(rule);
         this.validationRulesChange.emit(this.validationRules);
     }
-    removeValidationRule(rule) {
-        this.validationRules = this.validationRules.filter((r) => r.rule !== rule.rule || !isEqual(r.options, rule.options));
+    removeValidationRule(ruleToRemove) {
+        this.validationRules = this.validationRules.filter((r) => {
+            if (r.rule !== ruleToRemove.rule) {
+                return true;
+            }
+            // Create copies of options without the 'title' property
+            const rOptionsSanitized = omit(r.options, ['title']);
+            const ruleToRemoveOptionsSanitized = omit(ruleToRemove.options, ['title']);
+            return !isEqual(rOptionsSanitized, ruleToRemoveOptionsSanitized);
+        });
         this.validationRulesChange.emit(this.validationRules);
+        this.setState('clear');
     }
     async validate() {
         const container_classes = ['ax-editor-container', 'ax-checkbox', 'ax-radio'];
@@ -1124,9 +1127,25 @@ function convertArrayToDataSource(items, options = { key: 'id', pageSize: 100 })
     return new AXDataSource(config);
 }
 
-const AX_STYLE_COLOR_TYPES = ['primary', 'secondary', 'success', 'warning', 'danger', 'default'];
+const AX_STYLE_COLOR_TYPES = [
+    'primary',
+    'secondary',
+    'success',
+    'warning',
+    'danger',
+    'default',
+];
 const AX_STYLE_LOOK_TYPES = ['solid', 'blank', 'outline', 'twotone', 'flat', 'fill', 'none'];
-const AX_LOCATIONS = ['bottom-start', 'bottom-center', 'bottom-end', 'top-start', 'top-center', 'top-end', 'center-end', 'center-start'];
+const AX_LOCATIONS = [
+    'bottom-start',
+    'bottom-center',
+    'bottom-end',
+    'top-start',
+    'top-center',
+    'top-end',
+    'center-end',
+    'center-start',
+];
 
 class AXAutoFocusDirective {
     constructor(renderer, el, _host) {
@@ -1185,9 +1204,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }] } });
 
 class AXHotkeysService {
-    constructor(eventManager, document) {
+    constructor(eventManager) {
         this.eventManager = eventManager;
-        this.document = document;
+        this.document = inject(DOCUMENT);
         this.defaults = {
             element: this.document,
         };
@@ -1220,15 +1239,12 @@ class AXHotkeysService {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXHotkeysService, deps: [{ token: i1.EventManager }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXHotkeysService, deps: [{ token: i1.EventManager }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXHotkeysService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXHotkeysService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1.EventManager }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }] });
+        }], ctorParameters: () => [{ type: i1.EventManager }] });
 
 class AXHotkeyDirective {
     constructor(el, _host, hs) {
@@ -1799,7 +1815,9 @@ class MXSelectionValueComponent extends MXValueComponent {
         return this.selectedItems.some((c) => c[this.valueField] === this.normalizeItem(item)[this.valueField]);
     }
     isItemDisabled(item) {
-        return (this.disabled || coerceBooleanProperty(item[this.disabledField]) === true || (this.disabledCallback ? this.disabledCallback({ item, index: -1 }) : false));
+        return (this.disabled ||
+            coerceBooleanProperty(item[this.disabledField]) === true ||
+            (this.disabledCallback ? this.disabledCallback({ item, index: -1 }) : false));
     }
     // protected getDisplayText(item: T) {
     //   const normalizeItem = this.normalizeItem(item) as any;
@@ -1833,6 +1851,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             type: Injectable
         }] });
 
+/**
+ * Directive to copy provided context to the clipboard on click,
+ * using Angular's input signal injection for the context.
+ * Emits copy status via a writable signal property.
+ *
+ * Usage:
+ * <button
+ *   axCopyClipboard
+ *   [copiedSignal]="copiedSignal"
+ * >Copy</button>
+ */
+class AXCopyClipboardDirective {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        /**
+         * Required string input signal for the context to copy.
+         * Bound via: axCopyClipboard="textSignal"
+         */
+        this.context = input.required({ alias: 'axCopyClipboard' });
+        /**
+         * WritableSignal to capture copy success (true) or failure (false).
+         * Can be bound: [copiedSignal]="myWritableSignal"
+         */
+        this.copied = output();
+    }
+    /**
+     * Trigger copy when the host element is clicked.
+     */
+    async onHostHover() {
+        this.elementRef.nativeElement.style.cursor = 'pointer';
+    }
+    /**
+     * Trigger copy when the host element is clicked.
+     */
+    async onHostClick() {
+        try {
+            const text = this.context();
+            await this.copyToClipboard(text);
+            console.log(this.elementRef.nativeElement);
+            this.copied.emit(true);
+        }
+        catch (err) {
+            console.error('Copy failed', err);
+            this.copied.emit(false);
+        }
+    }
+    /**
+     * Copy the string to the clipboard.
+     */
+    copyToClipboard(text) {
+        if (!text) {
+            return Promise.reject('No text provided to copy');
+        }
+        if (!navigator.clipboard?.writeText) {
+            return Promise.reject('Permission denied to access clipboard');
+        }
+        return navigator.clipboard.writeText(text);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXCopyClipboardDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.10", type: AXCopyClipboardDirective, isStandalone: true, selector: "[axCopyClipboard]", inputs: { context: { classPropertyName: "context", publicName: "axCopyClipboard", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { copied: "copied" }, host: { listeners: { "mouseenter": "onHostHover()", "click": "onHostClick()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXCopyClipboardDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[axCopyClipboard]',
+                }]
+        }], propDecorators: { onHostHover: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onHostClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
 class AXNgModelDelayedValueChangedDirective {
     get delayTime() {
         return this._delayTime;
@@ -1991,5 +2083,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AXAutoFocusDirective, AXAutocompleteParentComponent, AXButtonClickEvent, AXClearableComponent, AXClickEvent, AXClosbaleComponent, AXCommonModule, AXComponent, AXComponentCloseEvent, AXComponentClosedPromise, AXComponentClosing, AXComponentResult, AXDataSource, AXDomService, AXEvent, AXFocusEvent, AXFocusableComponent, AXHotkeyDirective, AXHotkeysService, AXHtmlEvent, AXInfiniteScrollerDirective, AXInvertedColorDirective, AXItemClickEvent, AXListDataSource, AXNgModelDelayedValueChangedDirective, AXOptionChangedEvent, AXPagedComponent, AXRangeChangedEvent, AXResponsiveDirective, AXRippleDirective, AXSearchableComponent, AXSelectionValueChangedEvent, AXValuableComponent, AXValueChangedEvent, AX_LOCATIONS, AX_PLACEMENT_BOTTOM, AX_PLACEMENT_BOTTOM_END, AX_PLACEMENT_BOTTOM_START, AX_PLACEMENT_END, AX_PLACEMENT_END_BOTTOM, AX_PLACEMENT_END_TOP, AX_PLACEMENT_MAP, AX_PLACEMENT_START, AX_PLACEMENT_START_BOTTOM, AX_PLACEMENT_START_TOP, AX_PLACEMENT_TOP, AX_PLACEMENT_TOP_END, AX_PLACEMENT_TOP_START, AX_SELECTION_DATA_TOKEN, AX_STYLE_COLOR_TYPES, AX_STYLE_LOOK_TYPES, MXBaseComponent, MXButtonBaseComponent, MXColorComponent, MXColorLookComponent, MXInputBaseValueComponent, MXInteractiveComponent, MXLookComponent, MXLookableComponent, MXSelectionBridgeService, MXSelectionValueComponent, MXValueComponent, NXButtonComponent, NXClickEvent, NXColorComponent, NXComponent, NXEvent, NXInteractiveComponent, NXLookComponent, NXNativeEvent, NXValueComponent, TAB_META_KEY, convertArrayToDataSource, convertToPlacement };
+export { AXAutoFocusDirective, AXAutocompleteParentComponent, AXButtonClickEvent, AXClearableComponent, AXClickEvent, AXClosbaleComponent, AXCommonModule, AXComponent, AXComponentCloseEvent, AXComponentClosedPromise, AXComponentClosing, AXComponentResult, AXCopyClipboardDirective, AXDataSource, AXDomService, AXEvent, AXFocusEvent, AXFocusableComponent, AXHotkeyDirective, AXHotkeysService, AXHtmlEvent, AXInfiniteScrollerDirective, AXInvertedColorDirective, AXItemClickEvent, AXListDataSource, AXNgModelDelayedValueChangedDirective, AXOptionChangedEvent, AXPagedComponent, AXRangeChangedEvent, AXResponsiveDirective, AXRippleDirective, AXSearchableComponent, AXSelectionValueChangedEvent, AXValuableComponent, AXValueChangedEvent, AX_LOCATIONS, AX_PLACEMENT_BOTTOM, AX_PLACEMENT_BOTTOM_END, AX_PLACEMENT_BOTTOM_START, AX_PLACEMENT_END, AX_PLACEMENT_END_BOTTOM, AX_PLACEMENT_END_TOP, AX_PLACEMENT_MAP, AX_PLACEMENT_START, AX_PLACEMENT_START_BOTTOM, AX_PLACEMENT_START_TOP, AX_PLACEMENT_TOP, AX_PLACEMENT_TOP_END, AX_PLACEMENT_TOP_START, AX_SELECTION_DATA_TOKEN, AX_STYLE_COLOR_TYPES, AX_STYLE_LOOK_TYPES, MXBaseComponent, MXButtonBaseComponent, MXColorComponent, MXColorLookComponent, MXInputBaseValueComponent, MXInteractiveComponent, MXLookComponent, MXLookableComponent, MXSelectionBridgeService, MXSelectionValueComponent, MXValueComponent, NXButtonComponent, NXClickEvent, NXColorComponent, NXComponent, NXEvent, NXInteractiveComponent, NXLookComponent, NXNativeEvent, NXValueComponent, TAB_META_KEY, convertArrayToDataSource, convertToPlacement };
 //# sourceMappingURL=acorex-components-common.mjs.map