@ng-matero/extensions 12.3.0 → 12.5.1

package/README.md

@@ -40,7 +40,7 @@ export class YourAppModule {
 Alternatively you could only import modules you need, e.g. data-grid and select.
 
 ```ts
-import { MtxGridModule } from '@ng-matero/extensions/data-grid';
+import { MtxGridModule } from '@ng-matero/extensions/grid';
 import { MtxSelectModule } from '@ng-matero/extensions/select';
 
 @NgModule({

package/_all-color.scss

@@ -0,0 +1,47 @@
+@use '~@angular/material/core/theming/theming';
+@use './all-theme';
+
+// Includes all of the color styles.
+@mixin all-component-colors($config-or-theme, $experimental: false) {
+  // In case a theme object has been passed instead of a configuration for
+  // the color system, extract the color config from the theme object.
+  $config: if(
+    theming.private-is-theme-object($config-or-theme),
+    theming.get-color-config($config-or-theme),
+    $config-or-theme
+  );
+
+  @if $config == null {
+    @error 'No color configuration specified.';
+  }
+
+  @if $experimental {
+    @include all-theme.all-experimental-component-themes((
+      color: $config,
+      typography: null,
+      density: null,
+    ));
+  }
+  @else {
+    @include all-theme.all-component-themes((
+      color: $config,
+      typography: null,
+      density: null,
+    ));
+  }
+}
+
+// @deprecated Use `all-component-colors`.
+@mixin material-extensions-color($config-or-theme) {
+  @include all-component-colors($config-or-theme);
+}
+
+// Includes all of the experimental color styles.
+@mixin all-experimental-component-colors($config-or-theme) {
+  @include all-component-colors($config-or-theme, $experimental: true);
+}
+
+// @deprecated Use `all-experimental-component-colors`.
+@mixin material-extensions-experimental-color($config-or-theme) {
+  @include all-experimental-component-colors($config-or-theme);
+}

package/_all-theme.scss

@@ -1,12 +1,13 @@
 // Import all the theming functionality.
 @use './alert/alert-theme';
 @use './datetimepicker/datetimepicker-theme';
-@use './data-grid/grid-theme';
+@use './grid/grid-theme';
 @use './loader/loader-theme';
 @use './popover/popover-theme';
 @use './progress/progress-theme';
 @use './select/select-theme';
-@use './split-pane/split-theme';
+@use './slider/slider-theme';
+@use './split/split-theme';
 @use './tooltip/tooltip-theme';
 @use './form-group/form-group-theme';
 @use './text3d/text3d-theme';
@@ -14,12 +15,13 @@
 // Create a theme.
 @mixin all-component-themes($theme) {
   @include alert-theme.theme($theme);
-  @include grid-theme.theme($theme);
   @include datetimepicker-theme.theme($theme);
+  @include grid-theme.theme($theme);
   @include loader-theme.theme($theme);
   @include popover-theme.theme($theme);
   @include progress-theme.theme($theme);
   @include select-theme.theme($theme);
+  @include slider-theme.theme($theme);
   @include split-theme.theme($theme);
   @include tooltip-theme.theme($theme);
 }

package/_index.scss

@@ -3,14 +3,16 @@
 @forward './button/button-loading';
 @forward './alert/alert-theme' as alert-* show alert-theme;
 @forward './datetimepicker/datetimepicker-theme' as datetimepicker-* show datetimepicker-theme;
-@forward './data-grid/grid-theme' as grid-* show grid-theme;
+@forward './grid/grid-theme' as grid-* show grid-theme;
 @forward './loader/loader-theme' as loader-* show loader-theme;
 @forward './popover/popover-theme' as popover-* show popover-theme;
 @forward './progress/progress-theme' as progress-* show progress-theme;
 @forward './select/select-theme' as select-* show select-theme;
-@forward './split-pane/split-theme' as split-* show split-theme;
+@forward './slider/slider-theme' as slider-* show slider-theme;
+@forward './split/split-theme' as split-* show split-theme;
 @forward './tooltip/tooltip-theme' as tooltip-* show tooltip-theme;
 @forward './form-group/form-group-theme' as form-group-* show form-group-theme;
 @forward './text3d/text3d-theme' as text3d-* show text3d-theme;
 
 @forward './all-theme' show all-component-themes, all-experimental-component-themes;
+@forward './all-color' show all-component-colors, all-experimental-component-colors;

package/_theming.scss

@@ -3,14 +3,16 @@
 @forward './button/button-loading';
 @forward './alert/alert-theme.import';
 @forward './datetimepicker/datetimepicker-theme.import';
-@forward './data-grid/grid-theme.import';
+@forward './grid/grid-theme.import';
 @forward './loader/loader-theme.import';
 @forward './popover/popover-theme.import';
 @forward './progress/progress-theme.import';
 @forward './select/select-theme.import';
-@forward './split-pane/split-theme.import';
+@forward './slider/slider-theme.import';
+@forward './split/split-theme.import';
 @forward './tooltip/tooltip-theme.import';
 @forward './form-group/form-group-theme.import';
 @forward './text3d/text3d-theme.import';
 
 @forward './all-theme' show material-extensions-theme, material-extensions-experimental-theme;
+@forward './all-color' show material-extensions-color, material-extensions-experimental-color;

package/alert/_alert-theme.import.scss

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

package/alert/_alert-theme.scss

@@ -1,34 +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-alert-ref {
-    background-color: mat.get-color-from-palette($background, card);
+  .mtx-alert {
+    background-color: theming.get-color-from-palette($background, card);
   }
 
-  .mtx-alert-info .mtx-alert-ref {
-    background-color: mat.get-color-from-palette(mat.$blue-palette, 500);
-    border-color: mat.get-color-from-palette(mat.$blue-palette, 500);
+  .mtx-alert-info.mtx-alert {
+    background-color: theming.get-color-from-palette(palette.$blue-palette, 500);
     color: white;
   }
 
-  .mtx-alert-success .mtx-alert-ref {
-    background-color: mat.get-color-from-palette(mat.$green-palette, 500);
-    border-color: mat.get-color-from-palette(mat.$green-palette, 500);
+  .mtx-alert-success.mtx-alert {
+    background-color: theming.get-color-from-palette(palette.$green-palette, 500);
     color: white;
   }
 
-  .mtx-alert-warning .mtx-alert-ref {
-    background-color: mat.get-color-from-palette(mat.$orange-palette, 500);
-    border-color: mat.get-color-from-palette(mat.$orange-palette, 500);
+  .mtx-alert-warning.mtx-alert {
+    background-color: theming.get-color-from-palette(palette.$orange-palette, 500);
     color: white;
   }
 
-  .mtx-alert-danger .mtx-alert-ref {
-    background-color: mat.get-color-from-palette(mat.$red-palette, 500);
-    border-color: mat.get-color-from-palette(mat.$red-palette, 500);
+  .mtx-alert-danger.mtx-alert {
+    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-alert') {
+    $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/alert/alert.component.d.ts

@@ -1,20 +1,20 @@
 import { EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
 export declare type MtxAlertType = 'default' | 'info' | 'success' | 'warning' | 'danger';
 export declare class MtxAlertComponent {
     private _changeDetectorRef;
     get hostClassList(): string;
     /** The alert type */
     type: MtxAlertType;
-    /** Whether alert visible */
-    isOpen: boolean;
-    /** Whether displays an inline "Close" button */
-    dismissible: boolean;
-    /** The alert text color */
-    color: string;
+    /** Whether displays an inline `Close` button */
+    get dismissible(): boolean;
+    set dismissible(value: boolean);
+    private _dismissible;
     /** Material elevation */
     elevation: number;
     /** This event fires when alert closed, $event is an instance of Alert component */
     closed: EventEmitter<MtxAlertComponent>;
     constructor(_changeDetectorRef: ChangeDetectorRef);
     _onClosed(): void;
+    static ngAcceptInputType_dismissible: BooleanInput;
 }

package/alert/alert.component.scss

@@ -1,5 +1,6 @@
-.mtx-alert-ref {
+.mtx-alert {
   position: relative;
+  display: block;
   padding: .75rem 1.25rem;
   margin-bottom: 1rem;
   border: 1px solid transparent;

package/alert/mtxAlert.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"MtxAlertModule":{"__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":"MtxAlertComponent"}],"declarations":[{"__symbolic":"reference","name":"MtxAlertComponent"}]}]}],"members":{}},"MtxAlertType":{"__symbolic":"interface"},"MtxAlertComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"selector":"mtx-alert","exportAs":"mtxAlert","host":{"class":"mtx-alert"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":21,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":22,"character":19},"member":"OnPush"},"template":"<ng-template [ngIf]=\"isOpen\">\n  <div [ngClass]=\"['mtx-alert-ref',\n                   'mtx-alert-ref-' + type,\n                   'mat-elevation-z' + elevation,\n                    dismissible ? 'mtx-alert-dismissible' : '']\"\n       role=\"alert\">\n    <ng-content></ng-content>\n    <ng-template [ngIf]=\"dismissible\">\n      <button type=\"button\" class=\"mtx-alert-close\" aria-label=\"Close\" (click)=\"_onClosed()\">\n        <span aria-hidden=\"true\">&times;</span>\n      </button>\n    </ng-template>\n  </div>\n</ng-template>\n","styles":[".mtx-alert-ref{position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}.mtx-alert-close{position:absolute;top:0;bottom:0;right:0;padding:0 1.25rem;font-size:1.5rem;line-height:1;color:inherit;opacity:.5;background-color:transparent;border:0;cursor:pointer}[dir=rtl] .mtx-alert-close{right:auto;left:0}.mtx-alert-close:hover{opacity:.75}.mtx-alert-dismissible{padding-right:4rem}\n"]}]}],"members":{"hostClassList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":25,"character":3},"arguments":["class"]}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"isOpen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"dismissible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"elevation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"closed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":45,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":47,"character":42}]}],"_onClosed":[{"__symbolic":"method"}]}}},"origins":{"MtxAlertModule":"./alert.module","MtxAlertType":"./alert.component","MtxAlertComponent":"./alert.component"},"importAs":"@ng-matero/extensions/alert"}
+{"__symbolic":"module","version":4,"metadata":{"MtxAlertModule":{"__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":"MtxAlertComponent"}],"declarations":[{"__symbolic":"reference","name":"MtxAlertComponent"}]}]}],"members":{}},"MtxAlertType":{"__symbolic":"interface"},"MtxAlertComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":14,"character":1},"arguments":[{"selector":"mtx-alert","exportAs":"mtxAlert","host":{"[class.mtx-alert]":"true","[class.mtx-alert-dismissible]":"dismissible","role":"alert","$quoted$":["[class.mtx-alert]","[class.mtx-alert-dismissible]","role"]},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":24,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":25,"character":19},"member":"OnPush"},"template":"<ng-content></ng-content>\n<ng-template [ngIf]=\"dismissible\">\n  <button type=\"button\" class=\"mtx-alert-close\" aria-label=\"Close\" (click)=\"_onClosed()\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</ng-template>\n","styles":[".mtx-alert{position:relative;display:block;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}.mtx-alert-close{position:absolute;top:0;bottom:0;right:0;padding:0 1.25rem;font-size:1.5rem;line-height:1;color:inherit;opacity:.5;background-color:transparent;border:0;cursor:pointer}[dir=rtl] .mtx-alert-close{right:auto;left:0}.mtx-alert-close:hover{opacity:.75}.mtx-alert-dismissible{padding-right:4rem}\n"]}]}],"members":{"hostClassList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":28,"character":3},"arguments":["class"]}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"dismissible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"elevation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"closed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":49,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":51,"character":42}]}],"_onClosed":[{"__symbolic":"method"}]}}},"origins":{"MtxAlertModule":"./alert.module","MtxAlertType":"./alert.component","MtxAlertComponent":"./alert.component"},"importAs":"@ng-matero/extensions/alert"}

package/bundles/extensions.umd.js

@@ -1,14 +1,15 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@ng-matero/extensions/alert'), require('@ng-matero/extensions/button'), require('@ng-matero/extensions/checkbox-group'), require('@ng-matero/extensions/color-picker'), require('@ng-matero/extensions/column-resize'), require('@ng-matero/extensions/data-grid'), require('@ng-matero/extensions/datetimepicker'), require('@ng-matero/extensions/dialog'), require('@ng-matero/extensions/loader'), require('@ng-matero/extensions/popover'), require('@ng-matero/extensions/progress'), require('@ng-matero/extensions/select'), require('@ng-matero/extensions/split-pane'), require('@ng-matero/extensions/tooltip'), require('@ng-matero/extensions/form-group'), require('@ng-matero/extensions/text3d'), require('@angular/core')) :
-    typeof define === 'function' && define.amd ? define('@ng-matero/extensions', ['exports', '@ng-matero/extensions/alert', '@ng-matero/extensions/button', '@ng-matero/extensions/checkbox-group', '@ng-matero/extensions/color-picker', '@ng-matero/extensions/column-resize', '@ng-matero/extensions/data-grid', '@ng-matero/extensions/datetimepicker', '@ng-matero/extensions/dialog', '@ng-matero/extensions/loader', '@ng-matero/extensions/popover', '@ng-matero/extensions/progress', '@ng-matero/extensions/select', '@ng-matero/extensions/split-pane', '@ng-matero/extensions/tooltip', '@ng-matero/extensions/form-group', '@ng-matero/extensions/text3d', '@angular/core'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['ng-matero'] = global['ng-matero'] || {}, global['ng-matero'].extensions = {}), global['ng-matero'].extensions.alert, global['ng-matero'].extensions.button, global['ng-matero'].extensions['checkbox-group'], global['ng-matero'].extensions['color-picker'], global['ng-matero'].extensions['column-resize'], global['ng-matero'].extensions['data-grid'], global['ng-matero'].extensions.datetimepicker, global['ng-matero'].extensions.dialog, global['ng-matero'].extensions.loader, global['ng-matero'].extensions.popover, global['ng-matero'].extensions.progress, global['ng-matero'].extensions.select, global['ng-matero'].extensions['split-pane'], global['ng-matero'].extensions.tooltip, global['ng-matero'].extensions['form-group'], global['ng-matero'].extensions.text3d, global.ng.core));
-}(this, (function (exports, alert, button, checkboxGroup, colorPicker, columnResize, dataGrid, datetimepicker, dialog, loader, popover, progress, select, splitPane, tooltip, formGroup, text3d, core) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@ng-matero/extensions/alert'), require('@ng-matero/extensions/button'), require('@ng-matero/extensions/checkbox-group'), require('@ng-matero/extensions/color-picker'), require('@ng-matero/extensions/column-resize'), require('@ng-matero/extensions/grid'), require('@ng-matero/extensions/datetimepicker'), require('@ng-matero/extensions/dialog'), require('@ng-matero/extensions/loader'), require('@ng-matero/extensions/popover'), require('@ng-matero/extensions/progress'), require('@ng-matero/extensions/select'), require('@ng-matero/extensions/slider'), require('@ng-matero/extensions/split'), require('@ng-matero/extensions/tooltip'), require('@ng-matero/extensions/form-group'), require('@ng-matero/extensions/text3d'), require('@angular/core')) :
+    typeof define === 'function' && define.amd ? define('@ng-matero/extensions', ['exports', '@ng-matero/extensions/alert', '@ng-matero/extensions/button', '@ng-matero/extensions/checkbox-group', '@ng-matero/extensions/color-picker', '@ng-matero/extensions/column-resize', '@ng-matero/extensions/grid', '@ng-matero/extensions/datetimepicker', '@ng-matero/extensions/dialog', '@ng-matero/extensions/loader', '@ng-matero/extensions/popover', '@ng-matero/extensions/progress', '@ng-matero/extensions/select', '@ng-matero/extensions/slider', '@ng-matero/extensions/split', '@ng-matero/extensions/tooltip', '@ng-matero/extensions/form-group', '@ng-matero/extensions/text3d', '@angular/core'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['ng-matero'] = global['ng-matero'] || {}, global['ng-matero'].extensions = {}), global['ng-matero'].extensions.alert, global['ng-matero'].extensions.button, global['ng-matero'].extensions['checkbox-group'], global['ng-matero'].extensions['color-picker'], global['ng-matero'].extensions['column-resize'], global['ng-matero'].extensions.grid, global['ng-matero'].extensions.datetimepicker, global['ng-matero'].extensions.dialog, global['ng-matero'].extensions.loader, global['ng-matero'].extensions.popover, global['ng-matero'].extensions.progress, global['ng-matero'].extensions.select, global['ng-matero'].extensions.slider, global['ng-matero'].extensions.split, global['ng-matero'].extensions.tooltip, global['ng-matero'].extensions['form-group'], global['ng-matero'].extensions.text3d, global.ng.core));
+}(this, (function (exports, alert, button, checkboxGroup, colorPicker, columnResize, grid, datetimepicker, dialog, loader, popover, progress, select, slider, split, tooltip, formGroup, text3d, core) { 'use strict';
 
     var MaterialExtensionsExperimentalModule = /** @class */ (function () {
         function MaterialExtensionsExperimentalModule() {
         }
         return MaterialExtensionsExperimentalModule;
     }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MaterialExtensionsExperimentalModule.decorators = [
         { type: core.NgModule, args: [{
                     exports: [formGroup.MtxFormGroupModule, text3d.MtxText3dModule],
@@ -21,6 +22,7 @@
         }
         return MaterialExtensionsModule;
     }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MaterialExtensionsModule.decorators = [
         { type: core.NgModule, args: [{
                     exports: [
@@ -28,14 +30,15 @@
                         button.MtxButtonModule,
                         checkboxGroup.MtxCheckboxGroupModule,
                         colorPicker.MtxColorPickerModule,
-                        dataGrid.MtxGridModule,
+                        grid.MtxGridModule,
                         datetimepicker.MtxDatetimepickerModule,
                         dialog.MtxDialogModule,
                         loader.MtxLoaderModule,
                         popover.MtxPopoverModule,
                         progress.MtxProgressModule,
                         select.MtxSelectModule,
-                        splitPane.MtxSplitModule,
+                        slider.MtxSliderModule,
+                        split.MtxSplitModule,
                         tooltip.MtxTooltipModule,
                     ],
                     declarations: [],
@@ -92,11 +95,11 @@
             }
         });
     });
-    Object.keys(dataGrid).forEach(function (k) {
+    Object.keys(grid).forEach(function (k) {
         if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
             enumerable: true,
             get: function () {
-                return dataGrid[k];
+                return grid[k];
             }
         });
     });
@@ -148,11 +151,19 @@
             }
         });
     });
-    Object.keys(splitPane).forEach(function (k) {
+    Object.keys(slider).forEach(function (k) {
         if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
             enumerable: true,
             get: function () {
-                return splitPane[k];
+                return slider[k];
+            }
+        });
+    });
+    Object.keys(split).forEach(function (k) {
+        if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+            enumerable: true,
+            get: function () {
+                return split[k];
             }
         });
     });

package/bundles/extensions.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"extensions.umd.js","sources":["../../../projects/extensions/extensions-experimental.module.ts","../../../projects/extensions/extensions.module.ts","../../../projects/extensions/public-api.ts","../../../projects/extensions/extensions.ts"],"sourcesContent":["import { NgModule } from '@angular/core';\n\nimport { MtxFormGroupModule } from '@ng-matero/extensions/form-group';\nimport { MtxText3dModule } from '@ng-matero/extensions/text3d';\n\n@NgModule({\n  exports: [MtxFormGroupModule, MtxText3dModule],\n  declarations: [],\n})\nexport class MaterialExtensionsExperimentalModule {}\n","import { NgModule } from '@angular/core';\n\nimport { MtxAlertModule } from '@ng-matero/extensions/alert';\nimport { MtxButtonModule } from '@ng-matero/extensions/button';\nimport { MtxCheckboxGroupModule } from '@ng-matero/extensions/checkbox-group';\nimport { MtxColorPickerModule } from '@ng-matero/extensions/color-picker';\nimport { MtxGridModule } from '@ng-matero/extensions/data-grid';\nimport { MtxDatetimepickerModule } from '@ng-matero/extensions/datetimepicker';\nimport { MtxDialogModule } from '@ng-matero/extensions/dialog';\nimport { MtxLoaderModule } from '@ng-matero/extensions/loader';\nimport { MtxPopoverModule } from '@ng-matero/extensions/popover';\nimport { MtxProgressModule } from '@ng-matero/extensions/progress';\nimport { MtxSelectModule } from '@ng-matero/extensions/select';\nimport { MtxSplitModule } from '@ng-matero/extensions/split-pane';\nimport { MtxTooltipModule } from '@ng-matero/extensions/tooltip';\n\n@NgModule({\n  exports: [\n    MtxAlertModule,\n    MtxButtonModule,\n    MtxCheckboxGroupModule,\n    MtxColorPickerModule,\n    MtxGridModule,\n    MtxDatetimepickerModule,\n    MtxDialogModule,\n    MtxLoaderModule,\n    MtxPopoverModule,\n    MtxProgressModule,\n    MtxSelectModule,\n    MtxSplitModule,\n    MtxTooltipModule,\n  ],\n  declarations: [],\n})\nexport class MaterialExtensionsModule {}\n","/*\n * Public API Surface of components\n */\n\nexport * from '@ng-matero/extensions/alert';\nexport * from '@ng-matero/extensions/button';\nexport * from '@ng-matero/extensions/checkbox-group';\nexport * from '@ng-matero/extensions/color-picker';\nexport * from '@ng-matero/extensions/column-resize';\nexport * from '@ng-matero/extensions/data-grid';\nexport * from '@ng-matero/extensions/datetimepicker';\nexport * from '@ng-matero/extensions/dialog';\nexport * from '@ng-matero/extensions/loader';\nexport * from '@ng-matero/extensions/popover';\nexport * from '@ng-matero/extensions/progress';\nexport * from '@ng-matero/extensions/select';\nexport * from '@ng-matero/extensions/split-pane';\nexport * from '@ng-matero/extensions/tooltip';\n\nexport * from '@ng-matero/extensions/form-group';\nexport * from '@ng-matero/extensions/text3d';\n\nexport * from './extensions-experimental.module';\nexport * from './extensions.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["NgModule","MtxFormGroupModule","MtxText3dModule","MtxAlertModule","MtxButtonModule","MtxCheckboxGroupModule","MtxColorPickerModule","MtxGridModule","MtxDatetimepickerModule","MtxDialogModule","MtxLoaderModule","MtxPopoverModule","MtxProgressModule","MtxSelectModule","MtxSplitModule","MtxTooltipModule"],"mappings":";;;;;;;QASA;;;;;gBAJCA,aAAQ,SAAC;oBACR,OAAO,EAAE,CAACC,4BAAkB,EAAEC,sBAAe,CAAC;oBAC9C,YAAY,EAAE,EAAE;iBACjB;;;;QC0BD;;;;;gBAlBCF,aAAQ,SAAC;oBACR,OAAO,EAAE;wBACPG,oBAAc;wBACdC,sBAAe;wBACfC,oCAAsB;wBACtBC,gCAAoB;wBACpBC,sBAAa;wBACbC,sCAAuB;wBACvBC,sBAAe;wBACfC,sBAAe;wBACfC,wBAAgB;wBAChBC,0BAAiB;wBACjBC,sBAAe;wBACfC,wBAAc;wBACdC,wBAAgB;qBACjB;oBACD,YAAY,EAAE,EAAE;iBACjB;;;ICjCD;;;;ICAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"extensions.umd.js","sources":["../../../projects/extensions/extensions-experimental.module.ts","../../../projects/extensions/extensions.module.ts","../../../projects/extensions/public-api.ts","../../../projects/extensions/extensions.ts"],"sourcesContent":["import { NgModule } from '@angular/core';\n\nimport { MtxFormGroupModule } from '@ng-matero/extensions/form-group';\nimport { MtxText3dModule } from '@ng-matero/extensions/text3d';\n\n@NgModule({\n  exports: [MtxFormGroupModule, MtxText3dModule],\n  declarations: [],\n})\nexport class MaterialExtensionsExperimentalModule {}\n","import { NgModule } from '@angular/core';\n\nimport { MtxAlertModule } from '@ng-matero/extensions/alert';\nimport { MtxButtonModule } from '@ng-matero/extensions/button';\nimport { MtxCheckboxGroupModule } from '@ng-matero/extensions/checkbox-group';\nimport { MtxColorPickerModule } from '@ng-matero/extensions/color-picker';\nimport { MtxGridModule } from '@ng-matero/extensions/grid';\nimport { MtxDatetimepickerModule } from '@ng-matero/extensions/datetimepicker';\nimport { MtxDialogModule } from '@ng-matero/extensions/dialog';\nimport { MtxLoaderModule } from '@ng-matero/extensions/loader';\nimport { MtxPopoverModule } from '@ng-matero/extensions/popover';\nimport { MtxProgressModule } from '@ng-matero/extensions/progress';\nimport { MtxSelectModule } from '@ng-matero/extensions/select';\nimport { MtxSliderModule } from '@ng-matero/extensions/slider';\nimport { MtxSplitModule } from '@ng-matero/extensions/split';\nimport { MtxTooltipModule } from '@ng-matero/extensions/tooltip';\n\n@NgModule({\n  exports: [\n    MtxAlertModule,\n    MtxButtonModule,\n    MtxCheckboxGroupModule,\n    MtxColorPickerModule,\n    MtxGridModule,\n    MtxDatetimepickerModule,\n    MtxDialogModule,\n    MtxLoaderModule,\n    MtxPopoverModule,\n    MtxProgressModule,\n    MtxSelectModule,\n    MtxSliderModule,\n    MtxSplitModule,\n    MtxTooltipModule,\n  ],\n  declarations: [],\n})\nexport class MaterialExtensionsModule {}\n","/*\n * Public API Surface of components\n */\n\nexport * from '@ng-matero/extensions/alert';\nexport * from '@ng-matero/extensions/button';\nexport * from '@ng-matero/extensions/checkbox-group';\nexport * from '@ng-matero/extensions/color-picker';\nexport * from '@ng-matero/extensions/column-resize';\nexport * from '@ng-matero/extensions/grid';\nexport * from '@ng-matero/extensions/datetimepicker';\nexport * from '@ng-matero/extensions/dialog';\nexport * from '@ng-matero/extensions/loader';\nexport * from '@ng-matero/extensions/popover';\nexport * from '@ng-matero/extensions/progress';\nexport * from '@ng-matero/extensions/select';\nexport * from '@ng-matero/extensions/slider';\nexport * from '@ng-matero/extensions/split';\nexport * from '@ng-matero/extensions/tooltip';\n\nexport * from '@ng-matero/extensions/form-group';\nexport * from '@ng-matero/extensions/text3d';\n\nexport * from './extensions-experimental.module';\nexport * from './extensions.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["NgModule","MtxFormGroupModule","MtxText3dModule","MtxAlertModule","MtxButtonModule","MtxCheckboxGroupModule","MtxColorPickerModule","MtxGridModule","MtxDatetimepickerModule","MtxDialogModule","MtxLoaderModule","MtxPopoverModule","MtxProgressModule","MtxSelectModule","MtxSliderModule","MtxSplitModule","MtxTooltipModule"],"mappings":";;;;;;;QASA;;;;;;gBAJCA,aAAQ,SAAC;oBACR,OAAO,EAAE,CAACC,4BAAkB,EAAEC,sBAAe,CAAC;oBAC9C,YAAY,EAAE,EAAE;iBACjB;;;;QC4BD;;;;;;gBAnBCF,aAAQ,SAAC;oBACR,OAAO,EAAE;wBACPG,oBAAc;wBACdC,sBAAe;wBACfC,oCAAsB;wBACtBC,gCAAoB;wBACpBC,kBAAa;wBACbC,sCAAuB;wBACvBC,sBAAe;wBACfC,sBAAe;wBACfC,wBAAgB;wBAChBC,0BAAiB;wBACjBC,sBAAe;wBACfC,sBAAe;wBACfC,oBAAc;wBACdC,wBAAgB;qBACjB;oBACD,YAAY,EAAE,EAAE;iBACjB;;;ICnCD;;;;ICAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/bundles/mtxAlert.umd.js

@@ -1,16 +1,15 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common')) :
-    typeof define === 'function' && define.amd ? define('@ng-matero/extensions/alert', ['exports', '@angular/core', '@angular/common'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['ng-matero'] = global['ng-matero'] || {}, global['ng-matero'].extensions = global['ng-matero'].extensions || {}, global['ng-matero'].extensions.alert = {}), global.ng.core, global.ng.common));
-}(this, (function (exports, core, common) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/cdk/coercion')) :
+    typeof define === 'function' && define.amd ? define('@ng-matero/extensions/alert', ['exports', '@angular/core', '@angular/common', '@angular/cdk/coercion'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['ng-matero'] = global['ng-matero'] || {}, global['ng-matero'].extensions = global['ng-matero'].extensions || {}, global['ng-matero'].extensions.alert = {}), global.ng.core, global.ng.common, global.ng.cdk.coercion));
+}(this, (function (exports, core, common, coercion) { 'use strict';
 
     var MtxAlertComponent = /** @class */ (function () {
         function MtxAlertComponent(_changeDetectorRef) {
             this._changeDetectorRef = _changeDetectorRef;
             /** The alert type */
             this.type = 'default';
-            /** Whether alert visible */
-            this.isOpen = true;
+            this._dismissible = false;
             /** Material elevation */
             this.elevation = 0;
             /** This event fires when alert closed, $event is an instance of Alert component */
@@ -18,41 +17,59 @@
         }
         Object.defineProperty(MtxAlertComponent.prototype, "hostClassList", {
             get: function () {
-                return "mtx-alert-" + this.type;
+                return "mtx-alert-" + this.type + " mat-elevation-z" + this.elevation;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MtxAlertComponent.prototype, "dismissible", {
+            /** Whether displays an inline `Close` button */
+            get: function () {
+                return this._dismissible;
+            },
+            set: function (value) {
+                this._dismissible = coercion.coerceBooleanProperty(value);
             },
             enumerable: false,
             configurable: true
         });
         MtxAlertComponent.prototype._onClosed = function () {
-            this.isOpen = false;
             this._changeDetectorRef.markForCheck();
             this.closed.emit(this);
         };
         return MtxAlertComponent;
     }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MtxAlertComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'mtx-alert',
                     exportAs: 'mtxAlert',
                     host: {
-                        class: 'mtx-alert',
+                        '[class.mtx-alert]': 'true',
+                        '[class.mtx-alert-dismissible]': 'dismissible',
+                        'role': 'alert',
                     },
-                    template: "<ng-template [ngIf]=\"isOpen\">\n  <div [ngClass]=\"['mtx-alert-ref',\n                   'mtx-alert-ref-' + type,\n                   'mat-elevation-z' + elevation,\n                    dismissible ? 'mtx-alert-dismissible' : '']\"\n       role=\"alert\">\n    <ng-content></ng-content>\n    <ng-template [ngIf]=\"dismissible\">\n      <button type=\"button\" class=\"mtx-alert-close\" aria-label=\"Close\" (click)=\"_onClosed()\">\n        <span aria-hidden=\"true\">&times;</span>\n      </button>\n    </ng-template>\n  </div>\n</ng-template>\n",
+                    template: "<ng-content></ng-content>\n<ng-template [ngIf]=\"dismissible\">\n  <button type=\"button\" class=\"mtx-alert-close\" aria-label=\"Close\" (click)=\"_onClosed()\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</ng-template>\n",
                     encapsulation: core.ViewEncapsulation.None,
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    styles: [".mtx-alert-ref{position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}.mtx-alert-close{position:absolute;top:0;bottom:0;right:0;padding:0 1.25rem;font-size:1.5rem;line-height:1;color:inherit;opacity:.5;background-color:transparent;border:0;cursor:pointer}[dir=rtl] .mtx-alert-close{right:auto;left:0}.mtx-alert-close:hover{opacity:.75}.mtx-alert-dismissible{padding-right:4rem}\n"]
+                    styles: [".mtx-alert{position:relative;display:block;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}.mtx-alert-close{position:absolute;top:0;bottom:0;right:0;padding:0 1.25rem;font-size:1.5rem;line-height:1;color:inherit;opacity:.5;background-color:transparent;border:0;cursor:pointer}[dir=rtl] .mtx-alert-close{right:auto;left:0}.mtx-alert-close:hover{opacity:.75}.mtx-alert-dismissible{padding-right:4rem}\n"]
                 },] }
     ];
-    /** @nocollapse */
+    /**
+     * @type {function(): !Array<(null|{
+     *   type: ?,
+     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
+     * })>}
+     * @nocollapse
+     */
     MtxAlertComponent.ctorParameters = function () { return [
         { type: core.ChangeDetectorRef }
     ]; };
+    /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     MtxAlertComponent.propDecorators = {
         hostClassList: [{ type: core.HostBinding, args: ['class',] }],
         type: [{ type: core.Input }],
-        isOpen: [{ type: core.Input }],
         dismissible: [{ type: core.Input }],
-        color: [{ type: core.Input }],
         elevation: [{ type: core.Input }],
         closed: [{ type: core.Output }]
     };
@@ -62,6 +79,7 @@
         }
         return MtxAlertModule;
     }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MtxAlertModule.decorators = [
         { type: core.NgModule, args: [{
                     imports: [common.CommonModule],

package/bundles/mtxAlert.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"mtxAlert.umd.js","sources":["../../../projects/extensions/alert/alert.component.ts","../../../projects/extensions/alert/alert.module.ts","../../../projects/extensions/alert/mtxAlert.ts"],"sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  ViewEncapsulation,\n  Input,\n  Output,\n  EventEmitter,\n  ChangeDetectorRef,\n  HostBinding,\n} from '@angular/core';\n\nexport type MtxAlertType = 'default' | 'info' | 'success' | 'warning' | 'danger';\n\n@Component({\n  selector: 'mtx-alert',\n  exportAs: 'mtxAlert',\n  host: {\n    class: 'mtx-alert',\n  },\n  templateUrl: './alert.component.html',\n  styleUrls: ['./alert.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MtxAlertComponent {\n  @HostBinding('class') get hostClassList() {\n    return `mtx-alert-${this.type}`;\n  }\n\n  /** The alert type */\n  @Input() type: MtxAlertType = 'default';\n\n  /** Whether alert visible */\n  @Input() isOpen = true;\n\n  /** Whether displays an inline \"Close\" button */\n  @Input() dismissible!: boolean;\n\n  /** The alert text color */\n  @Input() color!: string;\n\n  /** Material elevation */\n  @Input() elevation = 0;\n\n  /** This event fires when alert closed, $event is an instance of Alert component */\n  @Output() closed = new EventEmitter<MtxAlertComponent>();\n\n  constructor(private _changeDetectorRef: ChangeDetectorRef) {}\n\n  _onClosed(): void {\n    this.isOpen = false;\n    this._changeDetectorRef.markForCheck();\n    this.closed.emit(this);\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MtxAlertComponent } from './alert.component';\n\n@NgModule({\n  imports: [CommonModule],\n  exports: [MtxAlertComponent],\n  declarations: [MtxAlertComponent],\n})\nexport class MtxAlertModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["EventEmitter","Component","ViewEncapsulation","ChangeDetectionStrategy","ChangeDetectorRef","HostBinding","Input","Output","NgModule","CommonModule"],"mappings":";;;;;;;QA+CE,2BAAoB,kBAAqC;YAArC,uBAAkB,GAAlB,kBAAkB,CAAmB;;YAjBhD,SAAI,GAAiB,SAAS,CAAC;;YAG/B,WAAM,GAAG,IAAI,CAAC;;YASd,cAAS,GAAG,CAAC,CAAC;;YAGb,WAAM,GAAG,IAAIA,iBAAY,EAAqB,CAAC;SAEI;QAtB7D,sBAA0B,4CAAa;iBAAvC;gBACE,OAAO,eAAa,IAAI,CAAC,IAAM,CAAC;aACjC;;;WAAA;QAsBD,qCAAS,GAAT;YACE,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACpB,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE,CAAC;YACvC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACxB;;;;gBAxCFC,cAAS,SAAC;oBACT,QAAQ,EAAE,WAAW;oBACrB,QAAQ,EAAE,UAAU;oBACpB,IAAI,EAAE;wBACJ,KAAK,EAAE,WAAW;qBACnB;oBACD,gjBAAqC;oBAErC,aAAa,EAAEC,sBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAEC,4BAAuB,CAAC,MAAM;;iBAChD;;;;gBAhBCC,sBAAiB;;;gCAkBhBC,gBAAW,SAAC,OAAO;uBAKnBC,UAAK;yBAGLA,UAAK;8BAGLA,UAAK;wBAGLA,UAAK;4BAGLA,UAAK;yBAGLC,WAAM;;;;QCnCT;;;;;gBALCC,aAAQ,SAAC;oBACR,OAAO,EAAE,CAACC,mBAAY,CAAC;oBACvB,OAAO,EAAE,CAAC,iBAAiB,CAAC;oBAC5B,YAAY,EAAE,CAAC,iBAAiB,CAAC;iBAClC;;;ICTD;;;;;;;;;;;;;"}
+{"version":3,"file":"mtxAlert.umd.js","sources":["../../../projects/extensions/alert/alert.component.ts","../../../projects/extensions/alert/alert.module.ts","../../../projects/extensions/alert/mtxAlert.ts"],"sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  ViewEncapsulation,\n  Input,\n  Output,\n  EventEmitter,\n  ChangeDetectorRef,\n  HostBinding,\n} from '@angular/core';\nimport { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\n\nexport type MtxAlertType = 'default' | 'info' | 'success' | 'warning' | 'danger';\n\n@Component({\n  selector: 'mtx-alert',\n  exportAs: 'mtxAlert',\n  host: {\n    '[class.mtx-alert]': 'true',\n    '[class.mtx-alert-dismissible]': 'dismissible',\n    'role': 'alert',\n  },\n  templateUrl: './alert.component.html',\n  styleUrls: ['./alert.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MtxAlertComponent {\n  @HostBinding('class') get hostClassList() {\n    return `mtx-alert-${this.type} mat-elevation-z${this.elevation}`;\n  }\n\n  /** The alert type */\n  @Input() type: MtxAlertType = 'default';\n\n  /** Whether displays an inline `Close` button */\n  @Input()\n  get dismissible(): boolean {\n    return this._dismissible;\n  }\n  set dismissible(value: boolean) {\n    this._dismissible = coerceBooleanProperty(value);\n  }\n  private _dismissible = false;\n\n  /** Material elevation */\n  @Input() elevation = 0;\n\n  /** This event fires when alert closed, $event is an instance of Alert component */\n  @Output() closed = new EventEmitter<MtxAlertComponent>();\n\n  constructor(private _changeDetectorRef: ChangeDetectorRef) {}\n\n  _onClosed(): void {\n    this._changeDetectorRef.markForCheck();\n    this.closed.emit(this);\n  }\n\n  static ngAcceptInputType_dismissible: BooleanInput;\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MtxAlertComponent } from './alert.component';\n\n@NgModule({\n  imports: [CommonModule],\n  exports: [MtxAlertComponent],\n  declarations: [MtxAlertComponent],\n})\nexport class MtxAlertModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["EventEmitter","coerceBooleanProperty","Component","ViewEncapsulation","ChangeDetectionStrategy","ChangeDetectorRef","HostBinding","Input","Output","NgModule","CommonModule"],"mappings":";;;;;;;QAmDE,2BAAoB,kBAAqC;YAArC,uBAAkB,GAAlB,kBAAkB,CAAmB;;YAlBhD,SAAI,GAAiB,SAAS,CAAC;YAUhC,iBAAY,GAAG,KAAK,CAAC;;YAGpB,cAAS,GAAG,CAAC,CAAC;;YAGb,WAAM,GAAG,IAAIA,iBAAY,EAAqB,CAAC;SAEI;QAvB7D,sBAA0B,4CAAa;iBAAvC;gBACE,OAAO,eAAa,IAAI,CAAC,IAAI,wBAAmB,IAAI,CAAC,SAAW,CAAC;aAClE;;;WAAA;QAMD,sBACI,0CAAW;;iBADf;gBAEE,OAAO,IAAI,CAAC,YAAY,CAAC;aAC1B;iBACD,UAAgB,KAAc;gBAC5B,IAAI,CAAC,YAAY,GAAGC,8BAAqB,CAAC,KAAK,CAAC,CAAC;aAClD;;;WAHA;QAcD,qCAAS,GAAT;YACE,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE,CAAC;YACvC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACxB;;;;;gBA1CFC,cAAS,SAAC;oBACT,QAAQ,EAAE,WAAW;oBACrB,QAAQ,EAAE,UAAU;oBACpB,IAAI,EAAE;wBACJ,mBAAmB,EAAE,MAAM;wBAC3B,+BAA+B,EAAE,aAAa;wBAC9C,MAAM,EAAE,OAAO;qBAChB;oBACD,4PAAqC;oBAErC,aAAa,EAAEC,sBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAEC,4BAAuB,CAAC,MAAM;;iBAChD;;;;;;;;;;gBAnBCC,sBAAiB;;;;gCAqBhBC,gBAAW,SAAC,OAAO;uBAKnBC,UAAK;8BAGLA,UAAK;4BAULA,UAAK;yBAGLC,WAAM;;;;QCvCT;;;;;;gBALCC,aAAQ,SAAC;oBACR,OAAO,EAAE,CAACC,mBAAY,CAAC;oBACvB,OAAO,EAAE,CAAC,iBAAiB,CAAC;oBAC5B,YAAY,EAAE,CAAC,iBAAiB,CAAC;iBAClC;;;ICTD;;;;;;;;;;;;;"}

package/bundles/mtxButton.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/material/button'), require('@angular/material/progress-spinner')) :
-    typeof define === 'function' && define.amd ? define('@ng-matero/extensions/button', ['exports', '@angular/core', '@angular/common', '@angular/material/button', '@angular/material/progress-spinner'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['ng-matero'] = global['ng-matero'] || {}, global['ng-matero'].extensions = global['ng-matero'].extensions || {}, global['ng-matero'].extensions.button = {}), global.ng.core, global.ng.common, global.ng.material.button, global.ng.material.progressSpinner));
-}(this, (function (exports, core, common, button, progressSpinner) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/material/button'), require('@angular/material/progress-spinner'), require('@angular/cdk/coercion')) :
+    typeof define === 'function' && define.amd ? define('@ng-matero/extensions/button', ['exports', '@angular/core', '@angular/common', '@angular/material/button', '@angular/material/progress-spinner', '@angular/cdk/coercion'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['ng-matero'] = global['ng-matero'] || {}, global['ng-matero'].extensions = global['ng-matero'].extensions || {}, global['ng-matero'].extensions.button = {}), global.ng.core, global.ng.common, global.ng.material.button, global.ng.material.progressSpinner, global.ng.cdk.coercion));
+}(this, (function (exports, core, common, button, progressSpinner, coercion) { 'use strict';
 
     var MatButtonLoadingDirective = /** @class */ (function () {
         function MatButtonLoadingDirective(matButton, componentFactoryResolver, viewContainerRef, renderer) {
@@ -10,8 +10,30 @@
             this.componentFactoryResolver = componentFactoryResolver;
             this.viewContainerRef = viewContainerRef;
             this.renderer = renderer;
+            this._loading = false;
+            this._disabled = false;
             this.spinnerFactory = this.componentFactoryResolver.resolveComponentFactory(progressSpinner.MatProgressSpinner);
         }
+        Object.defineProperty(MatButtonLoadingDirective.prototype, "loading", {
+            get: function () {
+                return this._loading;
+            },
+            set: function (value) {
+                this._loading = coercion.coerceBooleanProperty(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MatButtonLoadingDirective.prototype, "disabled", {
+            get: function () {
+                return this._disabled;
+            },
+            set: function (value) {
+                this._disabled = coercion.coerceBooleanProperty(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
         MatButtonLoadingDirective.prototype.ngOnChanges = function (changes) {
             if (!changes.loading) {
                 return;
@@ -44,18 +66,26 @@
         };
         return MatButtonLoadingDirective;
     }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MatButtonLoadingDirective.decorators = [
         { type: core.Directive, args: [{
                     selector: "button[mat-button][loading],\n             button[mat-raised-button][loading],\n             button[mat-stroked-button][loading],\n             button[mat-flat-button][loading],\n             button[mat-icon-button][loading],\n             button[mat-fab][loading],\n             button[mat-mini-fab][loading]",
                 },] }
     ];
-    /** @nocollapse */
+    /**
+     * @type {function(): !Array<(null|{
+     *   type: ?,
+     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
+     * })>}
+     * @nocollapse
+     */
     MatButtonLoadingDirective.ctorParameters = function () { return [
         { type: button.MatButton },
         { type: core.ComponentFactoryResolver },
         { type: core.ViewContainerRef },
         { type: core.Renderer2 }
     ]; };
+    /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     MatButtonLoadingDirective.propDecorators = {
         loading: [{ type: core.Input }],
         disabled: [{ type: core.Input }],
@@ -67,6 +97,7 @@
         }
         return MtxButtonModule;
     }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MtxButtonModule.decorators = [
         { type: core.NgModule, args: [{
                     imports: [common.CommonModule, button.MatButtonModule, progressSpinner.MatProgressSpinnerModule],