@acorex/components 19.10.0-next.1 → 19.10.0-next.10

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, PLATFORM_ID, Input, Host, Self, Optional, Directive, Inject, NgModule, ChangeDetectorRef, ViewContainerRef, EventEmitter, InjectionToken, Output, input, effect } from '@angular/core';
 import { AXHtmlUtil } from '@acorex/core/utils';
-import { flatten, clone, isEqual } from 'lodash-es';
+import { flatten, clone, set, isEqual } from 'lodash-es';
 import { DataSource } from '@angular/cdk/collections';
 import { Subscription, BehaviorSubject, debounceTime, distinctUntilChanged, Subject, fromEvent, noop, skip } from 'rxjs';
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
@@ -34,7 +34,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
 
 class NXColorComponent {
     constructor() {
-        this.color = model('ghost');
+        this.color = model('default');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NXColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: NXColorComponent, isStandalone: false, selector: "ng-component", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange" }, ngImport: i0, template: '', isInline: true }); }
@@ -43,7 +43,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
             type: Component,
             args: [{
                     template: '',
-                    standalone: false
+                    standalone: false,
                 }]
         }] });
 
@@ -670,18 +670,9 @@ function convertArrayToDataSource(items, options = { key: 'id', pageSize: 100 })
     return new AXDataSource(config);
 }
 
-const AX_STYLE_COLOR_TYPES = ['primary', 'success', 'warning', 'danger', 'neutral', 'ghost'];
+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) {
@@ -1062,7 +1053,7 @@ class MXColorComponent extends MXBaseComponent {
     constructor() {
         super(...arguments);
         this.colorChange = new EventEmitter();
-        this._color = 'ghost';
+        this._color = 'default';
     }
     /**
      *  Predefined color schemes
@@ -1315,9 +1306,9 @@ class MXButtonBaseComponent extends classes(MXInteractiveComponent, MXColorLookC
             'ax-button-icon': !this.text,
             'ax-state-disabled': this.disabled,
             'ax-state-selected': this.selected,
-            'ax-el-interactive': true,
         };
-        cssClasses[`ax-el-${this['color'] || 'solid'}${this['look'] ? '-' + this['look'] : '-solid'}`] = true;
+        set(cssClasses, `ax-${this.look || 'solid'}`, true);
+        set(cssClasses, `ax-${this.color || 'primary'}`, true);
         return cssClasses;
     }
 }
@@ -1887,7 +1878,7 @@ class AXInvertedColorDirective {
         let foreColor;
         const invertedVariables = [];
         if (isPlatformBrowser(this.platformID)) {
-            if (this.color() === 'ghost') {
+            if (this.color() === 'default') {
                 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}` });
@@ -1924,7 +1915,7 @@ class AXRippleDirective {
         this.el = el;
         this.cdr = cdr;
         this.enabled = true;
-        this.axRippleColor = 'rgb(255, 255, 255 , 0.3)';
+        this.axRippleColor = 'var(--ax-comp-ripple-bg-color, rgba(255, 255, 255, 0.3))';
         this.document = inject(DOCUMENT);
         this.platformID = inject(PLATFORM_ID);
     }