@ng-matero/extensions 19.4.1 → 20.0.1

package/index.d.ts

@@ -1,5 +1,2 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@ng-matero/extensions" />
-export * from './public-api';
+
+export { };

package/loader/_loader-theme.scss

@@ -1,70 +1,74 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use '../core/theming/inspection';
-@use '../core/theming/validation';
 @use '../core/tokens/token-utils';
-@use '../core/tokens/m2/mtx/loader' as tokens-mtx-loader;
+@use './m2-loader';
+@use './m3-loader';
 
 @mixin base($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+    @include token-utils.create-token-values(map.get(m3-loader.get-tokens($theme), base));
   }
   @else {
     @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mtx-loader.$prefix,
-        tokens-mtx-loader.get-unthemable-tokens()
-      );
+      @include token-utils.create-token-values-mixed(m2-loader.get-unthemable-tokens());
     }
   }
 }
 
 @mixin color($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+    @include token-utils.create-token-values(map.get(m3-loader.get-tokens($theme), color));
   }
   @else {
     @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mtx-loader.$prefix,
-        tokens-mtx-loader.get-color-tokens($theme)
-      );
+      @include token-utils.create-token-values-mixed(m2-loader.get-color-tokens($theme));
     }
   }
 }
 
 @mixin typography($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+    @include token-utils.create-token-values(map.get(m3-loader.get-tokens($theme), typography));
+  }
+  @else {
+    @include mat.private-current-selector-or-root() {
+      @include token-utils.create-token-values-mixed(m2-loader.get-typography-tokens($theme));
+    }
   }
-  @else {}
 }
 
 @mixin density($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    @include token-utils.create-token-values(map.get(m3-loader.get-tokens($theme), density));
+  }
+  @else {
+    @include mat.private-current-selector-or-root() {
+      @include token-utils.create-token-values-mixed(m2-loader.get-density-tokens($theme));
+    }
   }
-  @else {}
 }
 
 /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
 @function _define-overrides() {
   @return (
     (
-      namespace: tokens-mtx-loader.$prefix,
-      tokens: tokens-mtx-loader.get-token-slots(),
+      namespace: loader,
+      tokens: token-utils.get-overrides(m3-loader.get-tokens(), loader),
     ),
   );
 }
 
 @mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+  @include token-utils.batch-create-token-values($tokens, _define-overrides());
 }
 
-@mixin theme($theme) {
+@mixin theme($theme, $color-variant: null) {
   @include mat.private-check-duplicate-theme-styles($theme, 'mtx-loader') {
     @if mat.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
+      @include base($theme);
+      @include color($theme);
+      @include density($theme);
+      @include typography($theme);
     }
     @else {
       @include base($theme);
@@ -80,12 +84,3 @@
     }
   }
 }
-
-@mixin _theme-from-tokens($tokens) {
-  @include validation.selector-defined(
-    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
-  @if ($tokens != ()) {
-    @include token-utils.create-token-values(tokens-mtx-loader.$prefix,
-      map.get($tokens, tokens-mtx-loader.$prefix));
-  }
-}

package/{core/tokens/m2/mtx/_loader.scss → loader/_m2-loader.scss}

@@ -2,10 +2,7 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use '@angular/material' as mat;
-@use '../../token-definition';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mtx, loader);
+@use '../core/tokens/m2-utils';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -15,10 +12,8 @@ $prefix: (mtx, loader);
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
-  $background-color: mat.get-theme-color($theme, background, background);
-
   @return (
-    backdrop-background-color: mat.private-safe-color-change($background-color, $alpha: .75),
+    loader-backdrop-background-color: mat.get-theme-color($theme, background, background, 0.75)
   );
 }
 
@@ -37,8 +32,8 @@ $prefix: (mtx, loader);
 @function get-token-slots() {
   @return mat.private-deep-merge-all(
     get-unthemable-tokens(),
-    get-color-tokens(token-definition.$placeholder-color-config),
-    get-typography-tokens(token-definition.$placeholder-typography-config),
-    get-density-tokens(token-definition.$placeholder-density-config)
+    get-color-tokens(m2-utils.$placeholder-color-config),
+    get-typography-tokens(m2-utils.$placeholder-typography-config),
+    get-density-tokens(m2-utils.$placeholder-density-config)
   );
 }

package/loader/_m3-loader.scss

@@ -0,0 +1,20 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../core/tokens/m3-utils';
+@use '../core/tokens/m3';
+
+/// Generates custom tokens for the mtx-loader.
+@function get-tokens($theme: m3.$sys-theme) {
+  $system: m3-utils.get-system($theme);
+
+  $tokens: (
+    base: (),
+    color: (
+      loader-backdrop-background-color: m3-utils.color-with-opacity(map.get($system, surface), 75%),
+    ),
+    typography: (),
+    density: (),
+  );
+
+  @return $tokens;
+}

package/loader/index.d.ts

@@ -1,5 +1,43 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@ng-matero/extensions/loader" />
-export * from './public-api';
+import * as i0 from '@angular/core';
+import * as i1 from '@angular/common';
+import * as i2 from '@angular/material/progress-spinner';
+import { ProgressSpinnerMode } from '@angular/material/progress-spinner';
+import * as i3 from '@angular/material/progress-bar';
+import { ProgressBarMode } from '@angular/material/progress-bar';
+import { ThemePalette } from '@angular/material/core';
+
+type MtxLoaderType = 'spinner' | 'progressbar';
+declare class MtxLoader {
+    private _changeDetectorRef;
+    /** The loader's type. Can be `spinner` or `progressbar` */
+    type: MtxLoaderType;
+    /** Theme color palette for the component. */
+    color: ThemePalette;
+    /** Mode of the progress circle or the progress bar. */
+    mode: ProgressSpinnerMode | ProgressBarMode;
+    /** Stroke width of the spinner loader. */
+    strokeWidth: number;
+    /** The diameter of the spinner loader (will set width and height of svg). */
+    diameter: number;
+    /** Buffer value of the progressbar loader. */
+    bufferValue: number;
+    /** Value of the progress circle or the progress bar. */
+    value: number;
+    /** Whether the loader is loading. */
+    loading: boolean;
+    /** Whether the loader has a backdrop. */
+    hasBackdrop: boolean;
+    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, ["*"], true, never>;
+    static ngAcceptInputType_loading: unknown;
+    static ngAcceptInputType_hasBackdrop: unknown;
+}
+
+declare class MtxLoaderModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxLoaderModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxLoaderModule, never, [typeof i1.CommonModule, typeof i2.MatProgressSpinnerModule, typeof i3.MatProgressBarModule, typeof MtxLoader], [typeof MtxLoader]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MtxLoaderModule>;
+}
+
+export { MtxLoader, MtxLoaderModule };
+export type { MtxLoaderType };

package/loader/loader.scss

@@ -1,5 +1,7 @@
 @use '../core/tokens/token-utils';
-@use '../core/tokens/m2/mtx/loader' as tokens-mtx-loader;
+@use './m3-loader';
+
+$fallbacks: m3-loader.get-tokens();
 
 .mtx-loader {
   position: relative;
@@ -40,8 +42,5 @@
   width: 100%;
   height: 100%;
   content: '';
-
-  @include token-utils.use-tokens(tokens-mtx-loader.$prefix, tokens-mtx-loader.get-token-slots()) {
-    @include token-utils.create-token-slot(background-color, backdrop-background-color);
-  }
+  background-color: token-utils.slot(loader-backdrop-background-color, $fallbacks);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-matero/extensions",
-  "version": "19.4.1",
+  "version": "20.0.1",
   "description": "Angular Material Extensions",
   "publishConfig": {
     "access": "public"
@@ -74,50 +74,54 @@
       "types": "./alert/index.d.ts",
       "default": "./fesm2022/mtxAlert.mjs"
     },
-    "./button": {
-      "types": "./button/index.d.ts",
-      "default": "./fesm2022/mtxButton.mjs"
-    },
     "./checkbox-group": {
       "types": "./checkbox-group/index.d.ts",
       "default": "./fesm2022/mtxCheckboxGroup.mjs"
     },
+    "./button": {
+      "types": "./button/index.d.ts",
+      "default": "./fesm2022/mtxButton.mjs"
+    },
     "./colorpicker": {
       "types": "./colorpicker/index.d.ts",
       "default": "./fesm2022/mtxColorpicker.mjs"
     },
-    "./core": {
-      "types": "./core/index.d.ts",
-      "default": "./fesm2022/mtxCore.mjs"
-    },
     "./column-resize": {
       "types": "./column-resize/index.d.ts",
       "default": "./fesm2022/mtxColumnResize.mjs"
     },
-    "./datetimepicker": {
-      "types": "./datetimepicker/index.d.ts",
-      "default": "./fesm2022/mtxDatetimepicker.mjs"
+    "./core": {
+      "types": "./core/index.d.ts",
+      "default": "./fesm2022/mtxCore.mjs"
     },
     "./dialog": {
       "types": "./dialog/index.d.ts",
       "default": "./fesm2022/mtxDialog.mjs"
     },
+    "./loader": {
+      "types": "./loader/index.d.ts",
+      "default": "./fesm2022/mtxLoader.mjs"
+    },
     "./drawer": {
       "types": "./drawer/index.d.ts",
       "default": "./fesm2022/mtxDrawer.mjs"
     },
-    "./grid": {
-      "types": "./grid/index.d.ts",
-      "default": "./fesm2022/mtxGrid.mjs"
-    },
-    "./loader": {
-      "types": "./loader/index.d.ts",
-      "default": "./fesm2022/mtxLoader.mjs"
+    "./datetimepicker": {
+      "types": "./datetimepicker/index.d.ts",
+      "default": "./fesm2022/mtxDatetimepicker.mjs"
     },
     "./photoviewer": {
       "types": "./photoviewer/index.d.ts",
       "default": "./fesm2022/mtxPhotoviewer.mjs"
     },
+    "./grid": {
+      "types": "./grid/index.d.ts",
+      "default": "./fesm2022/mtxGrid.mjs"
+    },
+    "./select": {
+      "types": "./select/index.d.ts",
+      "default": "./fesm2022/mtxSelect.mjs"
+    },
     "./popover": {
       "types": "./popover/index.d.ts",
       "default": "./fesm2022/mtxPopover.mjs"
@@ -126,10 +130,6 @@
       "types": "./progress/index.d.ts",
       "default": "./fesm2022/mtxProgress.mjs"
     },
-    "./select": {
-      "types": "./select/index.d.ts",
-      "default": "./fesm2022/mtxSelect.mjs"
-    },
     "./split": {
       "types": "./split/index.d.ts",
       "default": "./fesm2022/mtxSplit.mjs"
@@ -140,16 +140,16 @@
     }
   },
   "dependencies": {
-    "@ng-select/ng-select": "^14.2.0",
+    "@ng-select/ng-select": "^15.0.0",
     "ngx-color": "^10.0.0",
     "photoviewer": "^3.10.0",
     "tslib": "^2.4.0"
   },
   "peerDependencies": {
-    "@angular/cdk": ">=19.0.0",
-    "@angular/common": ">=19.0.0",
-    "@angular/core": ">=19.0.0",
-    "@angular/material": ">=19.0.0"
+    "@angular/cdk": ">=20.0.0",
+    "@angular/common": ">=20.0.0",
+    "@angular/core": ">=20.0.0",
+    "@angular/material": ">=20.0.0"
   },
   "sideEffects": false,
   "module": "fesm2022/ng-matero-extensions.mjs",

package/photoviewer/index.d.ts

@@ -1,5 +1,26 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@ng-matero/extensions/photoviewer" />
-export * from './public-api';
+import * as i0 from '@angular/core';
+import { OnInit, OnDestroy } from '@angular/core';
+import PhotoViewer from 'photoviewer';
+
+declare class MtxPhotoviewer implements OnInit, OnDestroy {
+    private _elementRef;
+    images: PhotoViewer.Img[];
+    options?: PhotoViewer.Options;
+    embed: boolean;
+    photoviewerInstance?: PhotoViewer;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    onClick(event: MouseEvent): void;
+    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, true, never>;
+    static ngAcceptInputType_embed: unknown;
+}
+
+declare class MtxPhotoviewerModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxPhotoviewerModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxPhotoviewerModule, never, [typeof MtxPhotoviewer], [typeof MtxPhotoviewer]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MtxPhotoviewerModule>;
+}
+
+export { MtxPhotoviewer, MtxPhotoviewerModule };

package/{core/tokens/m2/mtx/_popover.scss → popover/_m2-popover.scss}

@@ -1,27 +1,24 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use '../../token-definition';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mtx, popover);
+@use '../core/tokens/m2-utils';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
   @return (
-    container-shape: 4px,
+    popover-container-shape: 4px,
     // Note that this uses a value, rather than a computed box-shadow, because we use
     // the value at runtime to determine which shadow to set based on the popover's depth.
-    base-elevation-level: 8,
+    popover-base-elevation-level: 8,
   );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
-    outline-color: mat.get-theme-color($theme, foreground, divider),
-    background-color: mat.get-theme-color($theme, background, card),
-    text-color: mat.get-theme-color($theme, foreground, text),
+    popover-outline-color: mat.get-theme-color($theme, foreground, divider),
+    popover-background-color: mat.get-theme-color($theme, background, card),
+    popover-text-color: mat.get-theme-color($theme, foreground, text),
   );
 }
 
@@ -40,8 +37,8 @@ $prefix: (mtx, popover);
 @function get-token-slots() {
   @return mat.private-deep-merge-all(
     get-unthemable-tokens(),
-    get-color-tokens(token-definition.$placeholder-color-config),
-    get-typography-tokens(token-definition.$placeholder-typography-config),
-    get-density-tokens(token-definition.$placeholder-density-config)
+    get-color-tokens(m2-utils.$placeholder-color-config),
+    get-typography-tokens(m2-utils.$placeholder-typography-config),
+    get-density-tokens(m2-utils.$placeholder-density-config)
   );
 }

package/popover/_m3-popover.scss

@@ -0,0 +1,26 @@
+@use 'sass:map';
+@use '../core/tokens/m3-utils';
+@use '../core/tokens/m3';
+
+/// Generates custom tokens for the mtx-popover.
+@function get-tokens($theme: m3.$sys-theme) {
+  $system: m3-utils.get-system($theme);
+
+  $tokens: (
+    base: (
+      popover-container-shape: map.get($system, corner-extra-small),
+      // Note that this uses a value, rather than a computed box-shadow, because we use
+      // the value at runtime to determine which shadow to set based on the popover's depth.
+      popover-base-elevation-level: 2,
+    ),
+    color: (
+      popover-outline-color: map.get($system, surface-container),
+      popover-background-color: map.get($system, surface-container),
+      popover-text-color: map.get($system, on-surface),
+    ),
+    typography: (),
+    density: (),
+  );
+
+  @return $tokens;
+}

package/popover/_popover-theme.scss

@@ -1,70 +1,74 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use '../core/theming/inspection';
-@use '../core/theming/validation';
 @use '../core/tokens/token-utils';
-@use '../core/tokens/m2/mtx/popover' as tokens-mtx-popover;
+@use './m2-popover';
+@use './m3-popover';
 
 @mixin base($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+    @include token-utils.create-token-values(map.get(m3-popover.get-tokens($theme), base));
   }
   @else {
     @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mtx-popover.$prefix,
-        tokens-mtx-popover.get-unthemable-tokens()
-      );
+      @include token-utils.create-token-values-mixed(m2-popover.get-unthemable-tokens());
     }
   }
 }
 
 @mixin color($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+    @include token-utils.create-token-values(map.get(m3-popover.get-tokens($theme), color));
   }
   @else {
     @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mtx-popover.$prefix,
-        tokens-mtx-popover.get-color-tokens($theme)
-      );
+      @include token-utils.create-token-values-mixed(m2-popover.get-color-tokens($theme));
     }
   }
 }
 
 @mixin typography($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+    @include token-utils.create-token-values(map.get(m3-popover.get-tokens($theme), typography));
+  }
+  @else {
+    @include mat.private-current-selector-or-root() {
+      @include token-utils.create-token-values-mixed(m2-popover.get-typography-tokens($theme));
+    }
   }
-  @else {}
 }
 
 @mixin density($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    @include token-utils.create-token-values(map.get(m3-popover.get-tokens($theme), density));
+  }
+  @else {
+    @include mat.private-current-selector-or-root() {
+      @include token-utils.create-token-values-mixed(m2-popover.get-density-tokens($theme));
+    }
   }
-  @else {}
 }
 
 /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
 @function _define-overrides() {
   @return (
     (
-      namespace: tokens-mtx-popover.$prefix,
-      tokens: tokens-mtx-popover.get-token-slots(),
+      namespace: popover,
+      tokens: token-utils.get-overrides(m3-popover.get-tokens(), popover),
     ),
   );
 }
 
 @mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+  @include token-utils.batch-create-token-values($tokens, _define-overrides());
 }
 
-@mixin theme($theme) {
+@mixin theme($theme, $color-variant: null) {
   @include mat.private-check-duplicate-theme-styles($theme, 'mtx-popover') {
     @if mat.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
+      @include base($theme);
+      @include color($theme);
+      @include density($theme);
+      @include typography($theme);
     }
     @else {
       @include base($theme);
@@ -80,12 +84,3 @@
     }
   }
 }
-
-@mixin _theme-from-tokens($tokens) {
-  @include validation.selector-defined(
-    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
-  @if ($tokens != ()) {
-    @include token-utils.create-token-values(tokens-mtx-popover.$prefix,
-      map.get($tokens, tokens-mtx-popover.$prefix));
-  }
-}