@acorex/components 19.9.0 → 19.10.0-next.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, 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';
@@ -669,8 +669,23 @@ 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_LOOK_TYPES = ['solid', 'blank', 'outline', 'twotone', 'flat', 'fill', 'none'];
+const AX_STYLE_COLOR_TYPES = [
+    'primary',
+    'secondary',
+    'success',
+    'warning',
+    'danger',
+    'ghost',
+];
+const AX_STYLE_LOOK_TYPES = [
+    'solid',
+    'blank',
+    'outline',
+    'twotone',
+    'flat',
+    'fill',
+    'none',
+];
 const AX_LOCATIONS = [
     'bottom-start',
     'bottom-center',
@@ -1314,9 +1329,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;
     }
 }
@@ -1923,7 +1938,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);
     }