@ng-matero/extensions 16.3.0 → 17.0.0

package/grid/grid.scss

@@ -14,6 +14,8 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
 
     border: 1px solid var($border-color);
 
+    @include token-utils.create-token-slot(border-radius, container-shape);
+
     .mat-mdc-table {
       &.mat-table-striped .mat-row-odd {
         @include token-utils.create-token-slot(background-color, table-row-striped-background-color);
@@ -52,7 +54,9 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
     .mat-mdc-footer-cell,
     .mat-mdc-cell {
       &:not(.mtx-grid-checkbox-cell) {
-        min-width: 80px;
+        @include token-utils.use-tokens($_tokens...) {
+          @include token-utils.create-token-slot(min-width, table-cell-min-width);
+        }
       }
     }
   }
@@ -75,41 +79,6 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
     }
   }
 
-  .mat-mdc-header-cell,
-  .mat-mdc-footer-cell,
-  .mat-mdc-cell {
-    padding: 4px 10px;
-    box-sizing: border-box;
-
-    &:first-of-type:not(:only-of-type) {
-      padding-left: 24px;
-
-      &.mtx-grid-checkbox-cell {
-        padding-left: 10px;
-        padding-right: 10px;
-      }
-
-      [dir='rtl'] & {
-        padding-left: 10px;
-        padding-right: 24px;
-
-        &.mtx-grid-checkbox-cell {
-          padding-left: 10px;
-          padding-right: 10px;
-        }
-      }
-    }
-
-    &:last-of-type:not(:only-of-type) {
-      padding-right: 24px;
-
-      [dir='rtl'] & {
-        padding-left: 24px;
-        padding-right: 10px;
-      }
-    }
-  }
-
   .mat-mdc-footer-cell {
     border-top: 1px solid var(--mat-table-row-item-outline-color);
 
@@ -118,22 +87,16 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
     }
   }
 
-  .mat-mdc-row {
-    &.mtx-grid-expansion {
-      height: 0;
-      overflow: hidden;
+  .mat-mdc-row.mtx-grid-expansion {
+    height: 0;
+    overflow: hidden;
 
-      .mat-mdc-cell {
-        padding-top: 0;
-        padding-bottom: 0;
-      }
-
-      &.collapsed .mat-mdc-cell {
-        border-bottom-width: 0;
-      }
+    .mat-mdc-cell {
+      padding-top: 0;
+      padding-bottom: 0;
     }
 
-    &:last-of-type .mat-cell {
+    &.collapsed .mat-mdc-cell {
       border-bottom-width: 0;
     }
   }
@@ -145,6 +108,7 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
   .mat-header-cell-inner {
     display: inline-flex;
     align-items: center;
+    vertical-align: middle;
   }
 
   .mat-mdc-paginator {
@@ -152,12 +116,21 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
       $border-color: token-utils.get-token-variable(outline-color);
 
       border-top: 1px solid var($border-color);
+
+      @include token-utils.create-token-slot(border-bottom-left-radius, container-shape);
+      @include token-utils.create-token-slot(border-bottom-right-radius, container-shape);
     }
   }
 
   .mat-paginator-hidden {
     display: none;
   }
+
+  .mtx-grid-checkbox-cell {
+    width: 60px;
+    min-width: 60px;
+    padding: 0 calc((60px - var(--mdc-checkbox-state-layer-size)) / 2);
+  }
 }
 
 .mtx-grid-progress {
@@ -182,6 +155,12 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
   }
 }
 
+.mtx-grid-toolbar-content {
+  flex: 1;
+  width: 0;
+  padding: 0 8px;
+}
+
 .mtx-grid-layout {
   display: flex;
   flex: 1 1 auto;
@@ -236,52 +215,30 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
 
 .mtx-grid-expansion-placeholder {
   display: inline-block;
-  width: 40px;
-  height: 40px;
   vertical-align: middle;
+
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(width, row-expand-button-size);
+    @include token-utils.create-token-slot(height, row-expand-button-size);
+  }
 }
 
 .mtx-grid-expansion-detail {
   display: flex;
   align-items: center;
-  min-height: 48px;
+  min-height: var(--mat-table-row-item-container-height);
   overflow: hidden;
 }
 
-.mtx-grid-checkbox-cell {
-  flex: none;
-  justify-content: center;
-  width: 60px;
-  min-width: 60px;
-
-  .mat-checkbox {
-    display: flex; // Fix checkbox height
-    margin: 0 10px;
-  }
-
-  .mat-checkbox-inner-container {
-    margin-left: 0; // Fix checkbox margin with RTL
-  }
-}
-
-.mtx-grid-row-expand-button.mat-mdc-icon-button {
-  width: 40px;
-  height: 40px;
-  padding: 8px;
-  vertical-align: middle;
-
+.mtx-grid-row-expand-button {
   &.expanded .mtx-grid-row-expand-icon {
     transform: rotate(90deg);
   }
 
+  &.mat-mdc-icon-button,
   +mtx-grid-cell {
     vertical-align: middle;
   }
-
-  .mat-mdc-button-touch-target {
-    width: 100%;
-    height: 100%;
-  }
 }
 
 .mtx-grid-icon {
@@ -289,32 +246,3 @@ $_tokens: tokens-mtx-grid.$prefix, tokens-mtx-grid.get-token-slots();
   height: 20px;
   font-size: 20px;
 }
-
-.mtx-grid-column-menu-item {
-  @include token-utils.use-tokens($_tokens...) {
-    @include token-utils.create-token-slot(color, column-menu-text-color);
-  }
-}
-
-.mtx-grid-column-menu-header,
-.mtx-grid-column-menu-footer {
-  @include token-utils.use-tokens($_tokens...) {
-    @include token-utils.create-token-slot(color, column-menu-text-color);
-  }
-}
-
-.mtx-grid-column-menu-header {
-  @include token-utils.use-tokens($_tokens...) {
-    $border-color: token-utils.get-token-variable(column-menu-divider-color);
-
-    border-bottom: 1px solid var($border-color);
-  }
-}
-
-.mtx-grid-column-menu-footer {
-  @include token-utils.use-tokens($_tokens...) {
-    $border-color: token-utils.get-token-variable(column-menu-divider-color);
-
-    border-top: 1px solid var($border-color);
-  }
-}

package/loader/_loader-theme.scss

@@ -1,36 +1,69 @@
-@use '../core/theming/theming';
+@use '@angular/material' as mat;
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mtx/loader' as tokens-mtx-loader;
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mtx-loader.$prefix,
-      tokens-mtx-loader.get-color-tokens($config));
+@mixin base($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, base));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mtx-loader.$prefix,
+        tokens-mtx-loader.get-unthemable-tokens());
+    }
   }
 }
 
-@mixin typography($config-or-theme) {}
+@mixin color($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, color));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mtx-loader.$prefix,
+        tokens-mtx-loader.get-color-tokens($theme));
+    }
+  }
+}
 
-@mixin density($config-or-theme) {}
+@mixin typography($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, typography));
+  }
+  @else {}
+}
 
-@mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mtx-loader') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+@mixin density($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, density));
+  }
+  @else {}
+}
 
-    @if $color != null {
-      @include color($color);
-    }
-    @if $density != null {
-      @include density($density);
+@mixin theme($theme) {
+  @include mat.private-check-duplicate-theme-styles($theme, 'mtx-loader') {
+    @if mat.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(mat.get-theme-tokens($theme));
     }
-    @if $typography != null {
-      @include typography($typography);
+    @else {
+      @include base($theme);
+      @if mat.theme-has($theme, color) {
+        @include color($theme);
+      }
+      @if mat.theme-has($theme, density) {
+        @include density($theme);
+      }
+      @if mat.theme-has($theme, typography) {
+        @include typography($theme);
+      }
     }
   }
 }
+
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include token-utils.create-token-values(tokens-mtx-loader.$prefix,
+      map.get($tokens, tokens-mtx-loader.$prefix));
+  }
+}

package/loader/loader.d.ts

@@ -1,5 +1,4 @@
 import { ChangeDetectorRef } from '@angular/core';
-import { BooleanInput } from '@angular/cdk/coercion';
 import { ThemePalette } from '@angular/material/core';
 import { ProgressBarMode } from '@angular/material/progress-bar';
 import { ProgressSpinnerMode } from '@angular/material/progress-spinner';
@@ -22,16 +21,12 @@ export declare class MtxLoader {
     /** Value of the progress circle or the progress bar. */
     value: number;
     /** Whether the loader is loading. */
-    get loading(): boolean;
-    set loading(value: boolean);
-    private _loading;
+    loading: boolean;
     /** Whether the loader has a backdrop. */
-    get hasBackdrop(): boolean;
-    set hasBackdrop(value: boolean);
-    private _hasBackdrop;
+    hasBackdrop: boolean;
     constructor(_changeDetectorRef: ChangeDetectorRef);
-    static ngAcceptInputType_loading: BooleanInput;
-    static ngAcceptInputType_hasBackdrop: BooleanInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxLoader, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MtxLoader, "mtx-loader", ["mtxLoader"], { "type": { "alias": "type"; "required": false; }; "color": { "alias": "color"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; }; "diameter": { "alias": "diameter"; "required": false; }; "bufferValue": { "alias": "bufferValue"; "required": false; }; "value": { "alias": "value"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ngAcceptInputType_loading: unknown;
+    static ngAcceptInputType_hasBackdrop: unknown;
 }

package/loader/loader.scss

@@ -32,11 +32,11 @@
 }
 
 .mtx-loader-backdrop {
-  display: block;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
+  display: block;
   width: 100%;
   height: 100%;
   content: '';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-matero/extensions",
-  "version": "16.3.0",
+  "version": "17.0.0",
   "description": "Angular Material Extensions",
   "publishConfig": {
     "access": "public"
@@ -42,12 +42,6 @@
       "esm": "./esm2022/ng-matero-extensions.mjs",
       "default": "./fesm2022/ng-matero-extensions.mjs"
     },
-    "./theming": {
-      "sass": "./_theming.scss"
-    },
-    "./_theming": {
-      "sass": "./_theming.scss"
-    },
     "./prebuilt-themes/indigo-pink.css": {
       "style": "./prebuilt-themes/indigo-pink.css"
     },
@@ -66,12 +60,6 @@
     "./package.json": {
       "default": "./package.json"
     },
-    "./colorpicker": {
-      "types": "./colorpicker/index.d.ts",
-      "esm2022": "./esm2022/colorpicker/mtxColorpicker.mjs",
-      "esm": "./esm2022/colorpicker/mtxColorpicker.mjs",
-      "default": "./fesm2022/mtxColorpicker.mjs"
-    },
     "./alert": {
       "types": "./alert/index.d.ts",
       "esm2022": "./esm2022/alert/mtxAlert.mjs",
@@ -90,11 +78,11 @@
       "esm": "./esm2022/checkbox-group/mtxCheckboxGroup.mjs",
       "default": "./fesm2022/mtxCheckboxGroup.mjs"
     },
-    "./column-resize": {
-      "types": "./column-resize/index.d.ts",
-      "esm2022": "./esm2022/column-resize/mtxColumnResize.mjs",
-      "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"
     },
     "./core": {
       "types": "./core/index.d.ts",
@@ -102,11 +90,17 @@
       "esm": "./esm2022/core/mtxCore.mjs",
       "default": "./fesm2022/mtxCore.mjs"
     },
-    "./drawer": {
-      "types": "./drawer/index.d.ts",
-      "esm2022": "./esm2022/drawer/mtxDrawer.mjs",
-      "esm": "./esm2022/drawer/mtxDrawer.mjs",
-      "default": "./fesm2022/mtxDrawer.mjs"
+    "./column-resize": {
+      "types": "./column-resize/index.d.ts",
+      "esm2022": "./esm2022/column-resize/mtxColumnResize.mjs",
+      "esm": "./esm2022/column-resize/mtxColumnResize.mjs",
+      "default": "./fesm2022/mtxColumnResize.mjs"
+    },
+    "./datetimepicker": {
+      "types": "./datetimepicker/index.d.ts",
+      "esm2022": "./esm2022/datetimepicker/mtxDatetimepicker.mjs",
+      "esm": "./esm2022/datetimepicker/mtxDatetimepicker.mjs",
+      "default": "./fesm2022/mtxDatetimepicker.mjs"
     },
     "./dialog": {
       "types": "./dialog/index.d.ts",
@@ -114,6 +108,12 @@
       "esm": "./esm2022/dialog/mtxDialog.mjs",
       "default": "./fesm2022/mtxDialog.mjs"
     },
+    "./drawer": {
+      "types": "./drawer/index.d.ts",
+      "esm2022": "./esm2022/drawer/mtxDrawer.mjs",
+      "esm": "./esm2022/drawer/mtxDrawer.mjs",
+      "default": "./fesm2022/mtxDrawer.mjs"
+    },
     "./grid": {
       "types": "./grid/index.d.ts",
       "esm2022": "./esm2022/grid/mtxGrid.mjs",
@@ -126,18 +126,18 @@
       "esm": "./esm2022/loader/mtxLoader.mjs",
       "default": "./fesm2022/mtxLoader.mjs"
     },
+    "./photoviewer": {
+      "types": "./photoviewer/index.d.ts",
+      "esm2022": "./esm2022/photoviewer/mtxPhotoviewer.mjs",
+      "esm": "./esm2022/photoviewer/mtxPhotoviewer.mjs",
+      "default": "./fesm2022/mtxPhotoviewer.mjs"
+    },
     "./popover": {
       "types": "./popover/index.d.ts",
       "esm2022": "./esm2022/popover/mtxPopover.mjs",
       "esm": "./esm2022/popover/mtxPopover.mjs",
       "default": "./fesm2022/mtxPopover.mjs"
     },
-    "./datetimepicker": {
-      "types": "./datetimepicker/index.d.ts",
-      "esm2022": "./esm2022/datetimepicker/mtxDatetimepicker.mjs",
-      "esm": "./esm2022/datetimepicker/mtxDatetimepicker.mjs",
-      "default": "./fesm2022/mtxDatetimepicker.mjs"
-    },
     "./progress": {
       "types": "./progress/index.d.ts",
       "esm2022": "./esm2022/progress/mtxProgress.mjs",
@@ -161,26 +161,20 @@
       "esm2022": "./esm2022/tooltip/mtxTooltip.mjs",
       "esm": "./esm2022/tooltip/mtxTooltip.mjs",
       "default": "./fesm2022/mtxTooltip.mjs"
-    },
-    "./photoviewer": {
-      "types": "./photoviewer/index.d.ts",
-      "esm2022": "./esm2022/photoviewer/mtxPhotoviewer.mjs",
-      "esm": "./esm2022/photoviewer/mtxPhotoviewer.mjs",
-      "default": "./fesm2022/mtxPhotoviewer.mjs"
     }
   },
   "dependencies": {
-    "@ng-select/ng-select": "^11.0.0",
+    "@ng-select/ng-select": "^12.0.0",
     "ngx-color": "^9.0.0",
     "photoviewer": "^3.9.0",
     "tslib": "^2.4.0"
   },
   "peerDependencies": {
-    "@angular/animations": ">=16.0.0",
-    "@angular/cdk": ">=16.0.0",
-    "@angular/common": ">=16.0.0",
-    "@angular/core": ">=16.0.0",
-    "@angular/material": ">=16.0.0"
+    "@angular/animations": ">=17.0.0",
+    "@angular/cdk": ">=17.0.0",
+    "@angular/common": ">=17.0.0",
+    "@angular/core": ">=17.0.0",
+    "@angular/material": ">=17.0.0"
   },
   "sideEffects": false,
   "module": "fesm2022/ng-matero-extensions.mjs",

package/photoviewer/photoviewer.d.ts

@@ -14,4 +14,5 @@ export declare class MtxPhotoviewer implements OnInit, OnDestroy {
     initPhotoViewer(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxPhotoviewer, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MtxPhotoviewer, "[mtxPhotoviewer]", ["mtxPhotoviewer"], { "images": { "alias": "mtxPhotoviewerItems"; "required": false; }; "options": { "alias": "mtxPhotoviewerOptions"; "required": false; }; "embed": { "alias": "mtxPhotoviewerEmbed"; "required": false; }; }, {}, never, never, false, never>;
+    static ngAcceptInputType_embed: unknown;
 }

package/popover/_popover-theme.scss

@@ -1,36 +1,69 @@
-@use '../core/theming/theming';
+@use '@angular/material' as mat;
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mtx/popover' as tokens-mtx-popover;
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mtx-popover.$prefix,
-      tokens-mtx-popover.get-color-tokens($config));
+@mixin base($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, base));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mtx-popover.$prefix,
+        tokens-mtx-popover.get-unthemable-tokens());
+    }
   }
 }
 
-@mixin typography($config-or-theme) {}
+@mixin color($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, color));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mtx-popover.$prefix,
+        tokens-mtx-popover.get-color-tokens($theme));
+    }
+  }
+}
 
-@mixin density($config-or-theme) {}
+@mixin typography($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, typography));
+  }
+  @else {}
+}
 
-@mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mtx-popover') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+@mixin density($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, density));
+  }
+  @else {}
+}
 
-    @if $color != null {
-      @include color($color);
-    }
-    @if $density != null {
-      @include density($density);
+@mixin theme($theme) {
+  @include mat.private-check-duplicate-theme-styles($theme, 'mtx-popover') {
+    @if mat.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(mat.get-theme-tokens($theme));
     }
-    @if $typography != null {
-      @include typography($typography);
+    @else {
+      @include base($theme);
+      @if mat.theme-has($theme, color) {
+        @include color($theme);
+      }
+      @if mat.theme-has($theme, density) {
+        @include density($theme);
+      }
+      @if mat.theme-has($theme, typography) {
+        @include typography($theme);
+      }
     }
   }
 }
+
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include token-utils.create-token-values(tokens-mtx-popover.$prefix,
+      map.get($tokens, tokens-mtx-popover.$prefix));
+  }
+}