@ng-matero/extensions 12.4.0 → 12.5.3

package/popover/_popover-theme.scss

@@ -1,23 +1,24 @@
 @use 'sass:map';
-@use '~@angular/material' as mat;
+@use '~@angular/material/core/theming/theming';
 
-@mixin theme($theme) {
-  $background: map.get($theme, background);
-  $foreground: map.get($theme, foreground);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $background: map.get($config, background);
+  $foreground: map.get($config, foreground);
 
   .mtx-popover-panel {
-    color: mat.get-color-from-palette($foreground, text);
-    background-color: mat.get-color-from-palette($background, card);
+    color: theming.get-color-from-palette($foreground, text);
+    background-color: theming.get-color-from-palette($background, card);
   }
 
   [class*='mtx-popover'] {
     .mtx-popover-direction-arrow {
       &::before {
-        border-color: mat.get-color-from-palette($foreground, divider);
+        border-color: theming.get-color-from-palette($foreground, divider);
       }
 
       &::after {
-        border-color: mat.get-color-from-palette($background, card);
+        border-color: theming.get-color-from-palette($background, card);
       }
     }
   }
@@ -44,3 +45,26 @@
     }
   }
 }
+
+@mixin typography($config-or-theme) {}
+
+@mixin _density($config-or-theme) {}
+
+@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);
+
+    @if $color != null {
+      @include color($color);
+    }
+    @if $density != null {
+      @include _density($density);
+    }
+    @if $typography != null {
+      @include typography($typography);
+    }
+  }
+}

package/popover/popover.d.ts

@@ -35,11 +35,11 @@ export declare class MtxPopover implements MtxPopoverPanel, OnDestroy {
     /** Closing disabled on popover */
     closeDisabled: boolean;
     /** Config object to be passed into the popover's arrow ngStyle */
-    popoverPanelStyles: {};
+    popoverPanelStyles: Record<string, unknown>;
     /** Config object to be passed into the popover's arrow ngStyle */
-    popoverArrowStyles: {};
+    popoverArrowStyles: Record<string, unknown>;
     /** Config object to be passed into the popover's content ngStyle */
-    popoverContentStyles: {};
+    popoverContentStyles: Record<string, unknown>;
     /** Emits the current animation state whenever it changes. */
     _onAnimationStateChange: EventEmitter<AnimationEvent>;
     /** Position of the popover. */

package/progress/_progress-theme.import.scss

@@ -1,2 +1,2 @@
-@forward 'progress-theme' hide theme;
-@forward 'progress-theme' as mtx-progress-*;
+@forward 'progress-theme' hide color, theme, typography;
+@forward 'progress-theme' as mtx-progress-* hide mtx-progress-density;

package/progress/_progress-theme.scss

@@ -1,30 +1,55 @@
 @use 'sass:map';
-@use '~@angular/material' as mat;
+@use '~@angular/material/core/theming/theming';
+@use '~@angular/material/core/theming/palette';
 
-@mixin theme($theme) {
-  $background: map.get($theme, background);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $background: map.get($config, background);
 
   .mtx-progress {
-    background-color: mat.get-color-from-palette($background, hover);
+    background-color: theming.get-color-from-palette($background, hover);
   }
 
   .mtx-progress-fill-info {
-    background-color: mat.get-color-from-palette(mat.$blue-palette, 500);
+    background-color: theming.get-color-from-palette(palette.$blue-palette, 500);
     color: white;
   }
 
   .mtx-progress-fill-success {
-    background-color: mat.get-color-from-palette(mat.$green-palette, 500);
+    background-color: theming.get-color-from-palette(palette.$green-palette, 500);
     color: white;
   }
 
   .mtx-progress-fill-warning {
-    background-color: mat.get-color-from-palette(mat.$orange-palette, 500);
+    background-color: theming.get-color-from-palette(palette.$orange-palette, 500);
     color: white;
   }
 
   .mtx-progress-fill-danger {
-    background-color: mat.get-color-from-palette(mat.$red-palette, 500);
+    background-color: theming.get-color-from-palette(palette.$red-palette, 500);
     color: white;
   }
 }
+
+@mixin typography($config-or-theme) {}
+
+@mixin _density($config-or-theme) {}
+
+@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-progress') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
+
+    @if $color != null {
+      @include color($color);
+    }
+    @if $density != null {
+      @include _density($density);
+    }
+    @if $typography != null {
+      @include typography($typography);
+    }
+  }
+}

package/progress/mtxProgress.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"MtxProgressModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":12}],"exports":[{"__symbolic":"reference","name":"MtxProgressComponent"}],"declarations":[{"__symbolic":"reference","name":"MtxProgressComponent"}]}]}],"members":{}},"MtxProgressType":{"__symbolic":"interface"},"MtxProgressComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"mtx-progress","exportAs":"mtxProgress","host":{"class":"mtx-progress","[style.height]":"height","[style.backgroundColor]":"background","$quoted$":["class","[style.height]","[style.backgroundColor]"]},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":15,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":16,"character":19},"member":"OnPush"},"template":"<div [class]=\"'mtx-progress-fill mtx-progress-fill-' + type\"\n     [ngClass]=\"{'mtx-progress-fill-striped': striped, 'mtx-progress-fill-animated': animate}\"\n     [ngStyle]=\"{ 'width.%': value, 'background-color': foreground }\"\n     role=\"progress-fill\">\n  <ng-content></ng-content>\n</div>\n","styles":[".mtx-progress{display:flex;height:1rem;margin:8px 0;overflow:hidden;font-size:.75rem;border-radius:.25rem}.mtx-progress-fill{display:flex;flex-direction:column;justify-content:center;text-align:center;transition:width .6s ease}.mtx-progress-fill-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}.mtx-progress-fill-animated{-webkit-animation:mtx-progress-fill-stripes 1s linear infinite;animation:mtx-progress-fill-stripes 1s linear infinite}@media (prefers-reduced-motion: reduce){.mtx-progress-fill-animated{-webkit-animation:none;animation:none}}@-webkit-keyframes mtx-progress-fill-stripes{0%{background-position:1rem 0}to{background-position:0 0}}@keyframes mtx-progress-fill-stripes{0%{background-position:1rem 0}to{background-position:0 0}}\n"]}]}],"members":{"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"foreground":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"background":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"striped":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"animate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":3}}]}]}}},"origins":{"MtxProgressModule":"./progress.module","MtxProgressType":"./progress.component","MtxProgressComponent":"./progress.component"},"importAs":"@ng-matero/extensions/progress"}
+{"__symbolic":"module","version":4,"metadata":{"MtxProgressModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":12}],"exports":[{"__symbolic":"reference","name":"MtxProgressComponent"}],"declarations":[{"__symbolic":"reference","name":"MtxProgressComponent"}]}]}],"members":{}},"MtxProgressType":{"__symbolic":"interface"},"MtxProgressComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"mtx-progress","exportAs":"mtxProgress","host":{"class":"mtx-progress","[style.height]":"height","[style.backgroundColor]":"background","$quoted$":["class","[style.height]","[style.backgroundColor]"]},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":15,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":16,"character":19},"member":"OnPush"},"template":"<div [class]=\"'mtx-progress-fill mtx-progress-fill-' + type\"\n     [ngClass]=\"{'mtx-progress-fill-striped': striped, 'mtx-progress-fill-animated': animate}\"\n     [ngStyle]=\"{ 'width.%': value, 'background-color': foreground }\"\n     role=\"progress-fill\">\n  <ng-content></ng-content>\n</div>\n","styles":[".mtx-progress{display:flex;height:1rem;margin:8px 0;overflow:hidden;font-size:.75rem;border-radius:.25rem}.mtx-progress-fill{display:flex;flex-direction:column;justify-content:center;text-align:center;transition:width .6s ease}.mtx-progress-fill-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}.mtx-progress-fill-animated{animation:mtx-progress-fill-stripes 1s linear infinite}@media (prefers-reduced-motion: reduce){.mtx-progress-fill-animated{animation:none}}@keyframes mtx-progress-fill-stripes{0%{background-position:1rem 0}to{background-position:0 0}}\n"]}]}],"members":{"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"foreground":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"background":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"striped":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"animate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":3}}]}]}}},"origins":{"MtxProgressModule":"./progress.module","MtxProgressType":"./progress.component","MtxProgressComponent":"./progress.component"},"importAs":"@ng-matero/extensions/progress"}

package/public-api.d.ts

@@ -10,6 +10,7 @@ export * from '@ng-matero/extensions/loader';
 export * from '@ng-matero/extensions/popover';
 export * from '@ng-matero/extensions/progress';
 export * from '@ng-matero/extensions/select';
+export * from '@ng-matero/extensions/slider';
 export * from '@ng-matero/extensions/split';
 export * from '@ng-matero/extensions/tooltip';
 export * from '@ng-matero/extensions/form-group';

package/select/_select-theme.import.scss

@@ -1,2 +1,2 @@
-@forward 'select-theme' hide theme;
-@forward 'select-theme' as mtx-select-*;
+@forward 'select-theme' hide color, theme, typography;
+@forward 'select-theme' as mtx-select-* hide mtx-select-density;

package/select/_select-theme.scss

@@ -1,23 +1,24 @@
 @use 'sass:map';
-@use '~@angular/material' as mat;
+@use '~@angular/material/core/theming/theming';
 
-@mixin theme($theme) {
-  $warn: map.get($theme, warn);
-  $background: map.get($theme, background);
-  $foreground: map.get($theme, foreground);
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $warn: map.get($config, warn);
+  $background: map.get($config, background);
+  $foreground: map.get($config, foreground);
 
   .ng-select {
     .ng-select-container {
-      color: mat.get-color-from-palette($foreground, text);
+      color: theming.get-color-from-palette($foreground, text);
 
       .ng-value-container {
         .ng-placeholder {
-          color: mat.get-color-from-palette($foreground, hint-text);
+          color: theming.get-color-from-palette($foreground, hint-text);
         }
 
         .ng-input {
           > input {
-            color: mat.get-color-from-palette($foreground, text);
+            color: theming.get-color-from-palette($foreground, text);
           }
         }
       }
@@ -25,7 +26,7 @@
 
     &.ng-select-disabled {
       .ng-value {
-        color: mat.get-color-from-palette($foreground, hint-text);
+        color: theming.get-color-from-palette($foreground, hint-text);
       }
     }
 
@@ -33,8 +34,8 @@
       .ng-select-container {
         .ng-value-container {
           .ng-value {
-            color: mat.get-color-from-palette($foreground, text);
-            background-color: mat.get-color-from-palette($background, unselected-chip);
+            color: theming.get-color-from-palette($foreground, text);
+            background-color: theming.get-color-from-palette($background, unselected-chip);
 
             &.ng-value-disabled {
               opacity: .4;
@@ -42,7 +43,7 @@
 
             .ng-value-icon {
               &:hover {
-                background-color: mat.get-color-from-palette($foreground, divider);
+                background-color: theming.get-color-from-palette($foreground, divider);
               }
             }
           }
@@ -51,91 +52,114 @@
     }
 
     .ng-clear-wrapper {
-      color: mat.get-color-from-palette($foreground, secondary-text);
+      color: theming.get-color-from-palette($foreground, secondary-text);
 
       &:hover .ng-clear {
-        color: mat.get-color-from-palette($warn);
+        color: theming.get-color-from-palette($warn);
       }
     }
 
     .ng-arrow-wrapper .ng-arrow {
-      border-color: mat.get-color-from-palette($foreground, secondary-text) transparent transparent;
+      border-color: theming.get-color-from-palette($foreground, secondary-text) transparent transparent;
     }
 
     &.ng-select-invalid {
       .ng-arrow-wrapper .ng-arrow {
-        border-color: mat.get-color-from-palette($warn) transparent transparent;
+        border-color: theming.get-color-from-palette($warn) transparent transparent;
       }
     }
 
     &.ng-select-opened {
       .ng-arrow-wrapper .ng-arrow {
-        border-color: transparent transparent mat.get-color-from-palette($foreground, secondary-text);
+        border-color: transparent transparent theming.get-color-from-palette($foreground, secondary-text);
       }
     }
 
     &.ng-select-opened.ng-select-invalid {
       .ng-arrow-wrapper .ng-arrow {
-        border-color: transparent transparent mat.get-color-from-palette($warn);
+        border-color: transparent transparent theming.get-color-from-palette($warn);
       }
     }
   }
 
   .ng-dropdown-panel {
-    background-color: mat.get-color-from-palette($background, card);
+    background-color: theming.get-color-from-palette($background, card);
 
     &.multiple {
       .ng-option {
         &.selected {
-          background: mat.get-color-from-palette($foreground, divider);
+          background: theming.get-color-from-palette($foreground, divider);
         }
 
         &.marked {
-          background: mat.get-color-from-palette($background, hover);
+          background: theming.get-color-from-palette($background, hover);
         }
       }
     }
 
     .ng-dropdown-header {
-      border-bottom: 1px solid mat.get-color-from-palette($foreground, divider);
+      border-bottom: 1px solid theming.get-color-from-palette($foreground, divider);
     }
 
     .ng-dropdown-footer {
-      border-top: 1px solid mat.get-color-from-palette($foreground, divider);
+      border-top: 1px solid theming.get-color-from-palette($foreground, divider);
     }
 
     .ng-dropdown-panel-items {
       .ng-optgroup {
-        color: mat.get-color-from-palette($foreground, secondary-text);
+        color: theming.get-color-from-palette($foreground, secondary-text);
 
         &.ng-option-marked {
-          background: mat.get-color-from-palette($background, hover);
+          background: theming.get-color-from-palette($background, hover);
         }
 
         &.ng-option-selected {
-          background: mat.get-color-from-palette($foreground, divider);
+          background: theming.get-color-from-palette($foreground, divider);
         }
       }
 
       .ng-option {
-        color: mat.get-color-from-palette($foreground, text);
+        color: theming.get-color-from-palette($foreground, text);
 
         &.ng-option-marked {
-          background: mat.get-color-from-palette($background, hover);
+          background: theming.get-color-from-palette($background, hover);
         }
 
         &.ng-option-selected {
-          background: mat.get-color-from-palette($foreground, divider);
+          background: theming.get-color-from-palette($foreground, divider);
         }
 
         &.ng-option-disabled {
-          color: mat.get-color-from-palette($foreground, hint-text);
+          color: theming.get-color-from-palette($foreground, hint-text);
         }
 
         .ng-tag-label {
-          color: mat.get-color-from-palette($foreground, hint-text);
+          color: theming.get-color-from-palette($foreground, hint-text);
         }
       }
     }
   }
 }
+
+@mixin typography($config-or-theme) {}
+
+@mixin _density($config-or-theme) {}
+
+@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-select') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
+
+    @if $color != null {
+      @include color($color);
+    }
+    @if $density != null {
+      @include _density($density);
+    }
+    @if $typography != null {
+      @include typography($typography);
+    }
+  }
+}