@acorex/components 18.15.3 → 18.16.0-next.1

package/fesm2022/acorex-components-common.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { model, output, Component, inject, ElementRef, signal, afterNextRender, Injectable, Directive, Host, Self, Optional, Input, Inject, NgModule, ChangeDetectorRef, ViewContainerRef, EventEmitter, InjectionToken, Output, input, effect } from '@angular/core';
+import { model, output, Component, inject, ElementRef, signal, afterNextRender, Injectable, PLATFORM_ID, Directive, Host, Self, Optional, Input, Inject, NgModule, ChangeDetectorRef, ViewContainerRef, EventEmitter, InjectionToken, Output, input, effect } from '@angular/core';
 import { AXHtmlUtil } from '@acorex/core/utils';
 import { flatten, clone, filter, isEqual } from 'lodash-es';
 import { DataSource } from '@angular/cdk/collections';
 import { Subscription, BehaviorSubject, debounceTime, distinctUntilChanged, Subject, fromEvent, noop, skip } from 'rxjs';
-import { DOCUMENT } from '@angular/common';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import * as i1 from '@angular/platform-browser';
 import { Observable } from 'rxjs/internal/Observable';
 import { map, pairwise, filter as filter$1, startWith, exhaustMap } from 'rxjs/operators';
@@ -669,6 +669,7 @@ class AXAutoFocusDirective {
         this.autoFocus = true;
         this.time = 50;
         this.document = inject(DOCUMENT);
+        this.platformID = inject(PLATFORM_ID);
     }
     ngAfterViewInit() {
         this.doFocus();
@@ -683,8 +684,10 @@ class AXAutoFocusDirective {
             }
             const list = ['button', 'input', '[href]', 'select', 'textarea', '[tabindex]'].map((c) => c + ':not([tabindex="-1"])');
             const focusable = this.el.nativeElement.querySelector(list.join(', ')) ?? this.el.nativeElement;
-            const attr = this.document.createAttribute('autofocus');
-            focusable.setAttributeNode(attr);
+            if (isPlatformBrowser(this.platformID)) {
+                const attr = this.document.createAttribute('autofocus');
+                focusable.setAttributeNode(attr);
+            }
             const hasTabindex = focusable.hasAttribute('tabindex');
             if (!hasTabindex) {
                 focusable.setAttribute('tabindex', '0');
@@ -1310,6 +1313,7 @@ class MXValueComponent extends MXInteractiveComponent {
         this.stateChange = new EventEmitter();
         this._state = 'clear';
         this.document = inject(DOCUMENT);
+        this.platformID = inject(PLATFORM_ID);
         this.validationService = inject(AXValidationService);
         this.validationRulesChange = new EventEmitter();
         this.validationRules = [];
@@ -1472,7 +1476,7 @@ class MXValueComponent extends MXInteractiveComponent {
                     break;
                 case 'error':
                     this.setState('clear');
-                    if (args[0]) {
+                    if (args[0] && isPlatformBrowser(this.platformID)) {
                         const span = this.document.createElement('span');
                         span.innerHTML = args[0];
                         span.classList.add('ax-error-message');
@@ -1842,6 +1846,7 @@ class AXInvertedColorDirective {
     constructor() {
         this.color = input.required();
         this.ref = inject(ViewContainerRef);
+        this.platformID = inject(PLATFORM_ID);
         afterNextRender(() => {
             this.invertColor();
         });
@@ -1853,25 +1858,27 @@ class AXInvertedColorDirective {
         let color;
         let foreColor;
         const invertedVariables = [];
-        if (this.color() === 'ghost') {
-            color = getComputedStyle(document.documentElement).getPropertyValue(`--ax-color-${this.color()}`);
-            foreColor = getComputedStyle(document.documentElement).getPropertyValue(`--ax-color-${this.color()}-fore`);
-            invertedVariables.push({ name: `--ax-color-ghost`, value: `${foreColor}` });
-            invertedVariables.push({ name: `--ax-color-ghost-fore`, value: `${color}` });
-        }
-        else {
-            const range = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
-            color = getComputedStyle(document.documentElement).getPropertyValue(`--ax-color-${this.color()}-500`);
-            foreColor = getComputedStyle(document.documentElement).getPropertyValue(`--ax-color-${this.color()}-fore`);
-            range.forEach((c) => {
-                invertedVariables.push({ name: `--ax-color-${this.color()}-${c}`, value: `${foreColor}` });
+        if (isPlatformBrowser(this.platformID)) {
+            if (this.color() === 'ghost') {
+                color = getComputedStyle(document.documentElement).getPropertyValue(`--ax-color-${this.color()}`);
+                foreColor = getComputedStyle(document.documentElement).getPropertyValue(`--ax-color-${this.color()}-fore`);
+                invertedVariables.push({ name: `--ax-color-ghost`, value: `${foreColor}` });
+                invertedVariables.push({ name: `--ax-color-ghost-fore`, value: `${color}` });
+            }
+            else {
+                const range = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+                color = getComputedStyle(document.documentElement).getPropertyValue(`--ax-color-${this.color()}-500`);
+                foreColor = getComputedStyle(document.documentElement).getPropertyValue(`--ax-color-${this.color()}-fore`);
+                range.forEach((c) => {
+                    invertedVariables.push({ name: `--ax-color-${this.color()}-${c}`, value: `${foreColor}` });
+                });
+                invertedVariables.push({ name: `--ax-color-${this.color()}-fore`, value: `${color}` });
+                invertedVariables.push({ name: `--ax-color-${this.color()}-fore-tint`, value: `${color}` });
+            }
+            invertedVariables.forEach((c) => {
+                this.ref.element.nativeElement.style.setProperty(c.name, c.value);
             });
-            invertedVariables.push({ name: `--ax-color-${this.color()}-fore`, value: `${color}` });
-            invertedVariables.push({ name: `--ax-color-${this.color()}-fore-tint`, value: `${color}` });
         }
-        invertedVariables.forEach((c) => {
-            this.ref.element.nativeElement.style.setProperty(c.name, c.value);
-        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXInvertedColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.0", type: AXInvertedColorDirective, isStandalone: true, selector: "[axInvertedColor]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
@@ -1891,6 +1898,7 @@ class AXRippleDirective {
         this.enabled = true;
         this.axRippleColor = 'rgb(255, 255, 255 , 0.3)';
         this.document = inject(DOCUMENT);
+        this.platformID = inject(PLATFORM_ID);
     }
     ngOnInit() {
         if (this.enabled) {
@@ -1914,18 +1922,20 @@ class AXRippleDirective {
         const rect = element.getBoundingClientRect();
         const x = Math.floor(((event.clientX - rect.left) / (rect.right - rect.left)) * element.clientWidth);
         const y = Math.floor(((event.clientY - rect.top) / (rect.bottom - rect.top)) * element.clientHeight);
-        const circle = this.document.createElement('span');
-        const diameter = Math.max(element.clientWidth, element.clientHeight);
-        const radius = diameter / 2;
-        circle.style.width = circle.style.height = `${diameter}px`;
-        circle.style.left = `${x - radius}px`;
-        circle.style.top = `${y - radius}px`;
-        circle.style.backgroundColor = `${this.axRippleColor}`;
-        circle.classList.add('ax-ripple');
-        element.appendChild(circle);
-        circle.addEventListener('animationend', () => {
-            circle?.remove();
-        });
+        if (isPlatformBrowser(this.platformID)) {
+            const circle = this.document.createElement('span');
+            const diameter = Math.max(element.clientWidth, element.clientHeight);
+            const radius = diameter / 2;
+            circle.style.width = circle.style.height = `${diameter}px`;
+            circle.style.left = `${x - radius}px`;
+            circle.style.top = `${y - radius}px`;
+            circle.style.backgroundColor = `${this.axRippleColor}`;
+            circle.classList.add('ax-ripple');
+            element.appendChild(circle);
+            circle.addEventListener('animationend', () => {
+                circle?.remove();
+            });
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXRippleDirective, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: AXRippleDirective, isStandalone: true, selector: "[axRipple]", inputs: { enabled: ["axRipple", "enabled"], axRippleColor: "axRippleColor" }, ngImport: i0 }); }