@ng-matero/extensions 18.2.4 → 18.3.0

package/grid/_grid-theme.scss

@@ -51,6 +51,13 @@
   }
 }
 
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values(
+    $tokens,
+    (prefix: tokens-mtx-grid.$prefix, tokens: tokens-mtx-grid.get-token-slots()),
+  );
+}
+
 @mixin theme($theme) {
   @include mat.private-check-duplicate-theme-styles($theme, 'mtx-grid') {
     @if mat.get-theme-version($theme) == 1 {

package/grid/grid.scss

@@ -110,7 +110,12 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
   }
 
   .mat-sort-header-icon {
-    margin: 0 4px;
+    margin-left: 4px;
+
+    [dir='rtl'] & {
+      margin-left: 0;
+      margin-right: 4px;
+    }
   }
 
   .mat-header-cell-inner {
@@ -230,8 +235,8 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
   @include token-utils.use-tokens($_tokens...) {
     $compat-size: token-utils.get-token-variable(row-expand-button-size);
 
-    width: var(--mdc-icon-button-state-layer-size, var($compat-size));
-    height: var(--mdc-icon-button-state-layer-size, var($compat-size));
+    width: var(--mdc-icon-button-state-layer-size, $compat-size);
+    height: var(--mdc-icon-button-state-layer-size, $compat-size);
   }
 }
 
@@ -252,9 +257,3 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
     vertical-align: middle;
   }
 }
-
-.mtx-grid-icon {
-  width: 20px;
-  height: 20px;
-  font-size: 20px;
-}

package/grid/interfaces.d.ts

@@ -71,6 +71,8 @@ export interface MtxGridColumnButton<T = any> {
     type?: MtxGridButtonType;
     text?: string | Observable<string>;
     icon?: string;
+    fontIcon?: string;
+    svgIcon?: string;
     color?: ThemePalette;
     class?: string;
     disabled?: boolean | ((rowData: T) => boolean);

package/loader/_loader-theme.scss

@@ -43,6 +43,13 @@
   @else {}
 }
 
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values(
+    $tokens,
+    (prefix: tokens-mtx-loader.$prefix, tokens: tokens-mtx-loader.get-token-slots()),
+  );
+}
+
 @mixin theme($theme) {
   @include mat.private-check-duplicate-theme-styles($theme, 'mtx-loader') {
     @if mat.get-theme-version($theme) == 1 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-matero/extensions",
-  "version": "18.2.4",
+  "version": "18.3.0",
   "description": "Angular Material Extensions",
   "publishConfig": {
     "access": "public"
@@ -84,6 +84,12 @@
       "esm": "./esm2022/button/mtxButton.mjs",
       "default": "./fesm2022/mtxButton.mjs"
     },
+    "./colorpicker": {
+      "types": "./colorpicker/index.d.ts",
+      "esm2022": "./esm2022/colorpicker/mtxColorpicker.mjs",
+      "esm": "./esm2022/colorpicker/mtxColorpicker.mjs",
+      "default": "./fesm2022/mtxColorpicker.mjs"
+    },
     "./checkbox-group": {
       "types": "./checkbox-group/index.d.ts",
       "esm2022": "./esm2022/checkbox-group/mtxCheckboxGroup.mjs",
@@ -102,12 +108,6 @@
       "esm": "./esm2022/column-resize/mtxColumnResize.mjs",
       "default": "./fesm2022/mtxColumnResize.mjs"
     },
-    "./colorpicker": {
-      "types": "./colorpicker/index.d.ts",
-      "esm2022": "./esm2022/colorpicker/mtxColorpicker.mjs",
-      "esm": "./esm2022/colorpicker/mtxColorpicker.mjs",
-      "default": "./fesm2022/mtxColorpicker.mjs"
-    },
     "./datetimepicker": {
       "types": "./datetimepicker/index.d.ts",
       "esm2022": "./esm2022/datetimepicker/mtxDatetimepicker.mjs",

package/popover/_popover-theme.scss

@@ -43,6 +43,13 @@
   @else {}
 }
 
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values(
+    $tokens,
+    (prefix: tokens-mtx-popover.$prefix, tokens: tokens-mtx-popover.get-token-slots()),
+  );
+}
+
 @mixin theme($theme) {
   @include mat.private-check-duplicate-theme-styles($theme, 'mtx-popover') {
     @if mat.get-theme-version($theme) == 1 {

package/progress/_progress-theme.scss

@@ -48,6 +48,13 @@
   @else {}
 }
 
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values(
+    $tokens,
+    (prefix: tokens-mtx-progress.$prefix, tokens: tokens-mtx-progress.get-token-slots()),
+  );
+}
+
 @mixin theme($theme) {
   @include mat.private-check-duplicate-theme-styles($theme, 'mtx-progress') {
     @if mat.get-theme-version($theme) == 1 {

package/select/_select-theme.scss

@@ -60,6 +60,13 @@
   }
 }
 
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values(
+    $tokens,
+    (prefix: tokens-mtx-select.$prefix, tokens: tokens-mtx-select.get-token-slots()),
+  );
+}
+
 @mixin theme($theme, $options...) {
   @include mat.private-check-duplicate-theme-styles($theme, 'mtx-select') {
     @if mat.get-theme-version($theme) == 1 {

package/split/_split-theme.scss

@@ -55,6 +55,13 @@
   @else {}
 }
 
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values(
+    $tokens,
+    (prefix: tokens-mtx-split.$prefix, tokens: tokens-mtx-split.get-token-slots()),
+  );
+}
+
 @mixin theme($theme, $options...) {
   @include mat.private-check-duplicate-theme-styles($theme, 'mtx-split') {
     @if mat.get-theme-version($theme) == 1 {

package/tooltip/_tooltip-theme.scss

@@ -62,6 +62,13 @@
   }
 }
 
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values(
+    $tokens,
+    (prefix: tokens-mdc-plain-tooltip.$prefix, tokens: tokens-mdc-plain-tooltip.get-token-slots()),
+  );
+}
+
 @mixin theme($theme) {
   @include mat.private-check-duplicate-theme-styles($theme, 'mtx-tooltip') {
     @if mat.get-theme-version($theme) == 1 {