@ng-matero/extensions 10.16.4 → 10.16.6

package/bundles/{ng-matero-extensions-button.umd.js → mtxButton.umd.js}

@@ -149,7 +149,7 @@
 
     /**
      * @fileoverview added by tsickle
-     * Generated from: ng-matero-extensions-button.ts
+     * Generated from: mtxButton.ts
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
 
@@ -159,4 +159,4 @@
     Object.defineProperty(exports, '__esModule', { value: true });
 
 })));
-//# sourceMappingURL=ng-matero-extensions-button.umd.js.map
+//# sourceMappingURL=mtxButton.umd.js.map

package/bundles/mtxButton.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mtxButton.umd.js","sources":["../../../projects/extensions/button/button-loading.directive.ts","../../../projects/extensions/button/button.module.ts"],"sourcesContent":["import {\r\n  ComponentFactory,\r\n  ComponentFactoryResolver,\r\n  ComponentRef,\r\n  Directive,\r\n  Input,\r\n  OnChanges,\r\n  Renderer2,\r\n  SimpleChanges,\r\n  ViewContainerRef,\r\n} from '@angular/core';\r\nimport { ThemePalette } from '@angular/material/core';\r\nimport { MatButton } from '@angular/material/button';\r\nimport { MatProgressSpinner } from '@angular/material/progress-spinner';\r\n\r\n@Directive({\r\n  selector: `button[mat-button][loading],\r\n             button[mat-raised-button][loading],\r\n             button[mat-stroked-button][loading],\r\n             button[mat-flat-button][loading],\r\n             button[mat-icon-button][loading],\r\n             button[mat-fab][loading],\r\n             button[mat-mini-fab][loading]`,\r\n})\r\nexport class MatButtonLoadingDirective implements OnChanges {\r\n  private spinnerFactory: ComponentFactory<MatProgressSpinner>;\r\n  private spinner: ComponentRef<MatProgressSpinner> | null;\r\n\r\n  @Input()\r\n  loading: boolean;\r\n\r\n  @Input()\r\n  disabled: boolean;\r\n\r\n  @Input()\r\n  color: ThemePalette;\r\n\r\n  constructor(\r\n    private matButton: MatButton,\r\n    private componentFactoryResolver: ComponentFactoryResolver,\r\n    private viewContainerRef: ViewContainerRef,\r\n    private renderer: Renderer2\r\n  ) {\r\n    this.spinnerFactory = this.componentFactoryResolver.resolveComponentFactory(MatProgressSpinner);\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    if (!changes.loading) {\r\n      return;\r\n    }\r\n\r\n    if (changes.loading.currentValue) {\r\n      this.matButton._elementRef.nativeElement.classList.add('mat-button-loading');\r\n      this.matButton.disabled = true;\r\n      this.createSpinner();\r\n    } else if (!changes.loading.firstChange) {\r\n      this.matButton._elementRef.nativeElement.classList.remove('mat-button-loading');\r\n      this.matButton.disabled = this.disabled;\r\n      this.destroySpinner();\r\n    }\r\n  }\r\n\r\n  private createSpinner(): void {\r\n    if (!this.spinner) {\r\n      this.spinner = this.viewContainerRef.createComponent(this.spinnerFactory);\r\n      this.spinner.instance.color = this.color;\r\n      this.spinner.instance.diameter = 20;\r\n      this.spinner.instance.mode = 'indeterminate';\r\n      this.renderer.appendChild(\r\n        this.matButton._elementRef.nativeElement,\r\n        this.spinner.instance._elementRef.nativeElement\r\n      );\r\n    }\r\n  }\r\n\r\n  private destroySpinner(): void {\r\n    if (this.spinner) {\r\n      this.spinner.destroy();\r\n      this.spinner = null;\r\n    }\r\n  }\r\n}\r\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\nimport { MatButtonLoadingDirective } from './button-loading.directive';\n\n@NgModule({\n  imports: [CommonModule, MatButtonModule, MatProgressSpinnerModule],\n  exports: [MatButtonLoadingDirective],\n  declarations: [MatButtonLoadingDirective],\n})\nexport class MtxButtonModule {}\n"],"names":["MatProgressSpinner","Directive","MatButton","ComponentFactoryResolver","ViewContainerRef","Renderer2","Input","NgModule","CommonModule","MatButtonModule","MatProgressSpinnerModule"],"mappings":";;;;;;;;;;;;;;;;;;QAqCE,mCACU,SAAoB,EACpB,wBAAkD,EAClD,gBAAkC,EAClC,QAAmB;YAHnB,cAAS,GAAT,SAAS,CAAW;YACpB,6BAAwB,GAAxB,wBAAwB,CAA0B;YAClD,qBAAgB,GAAhB,gBAAgB,CAAkB;YAClC,aAAQ,GAAR,QAAQ,CAAW;YAE3B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,wBAAwB,CAAC,uBAAuB,CAACA,kCAAkB,CAAC,CAAC;SACjG;;;;;QAED,+CAAW,GAAX,UAAY,OAAsB;YAChC,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;gBACpB,OAAO;aACR;YAED,IAAI,OAAO,CAAC,OAAO,CAAC,YAAY,EAAE;gBAChC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;gBAC7E,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAC;gBAC/B,IAAI,CAAC,aAAa,EAAE,CAAC;aACtB;iBAAM,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE;gBACvC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC;gBAChF,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;gBACxC,IAAI,CAAC,cAAc,EAAE,CAAC;aACvB;SACF;;;;;QAEO,iDAAa,GAAb;YACN,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;gBACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;gBAC1E,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;gBACzC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,QAAQ,GAAG,EAAE,CAAC;gBACpC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,GAAG,eAAe,CAAC;gBAC7C,IAAI,CAAC,QAAQ,CAAC,WAAW,CACvB,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,aAAa,EACxC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,aAAa,CAChD,CAAC;aACH;SACF;;;;;QAEO,kDAAc,GAAd;YACN,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;gBACvB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;aACrB;SACF;;;;gBAjEFC,cAAS,SAAC;oBACT,QAAQ,EAAE,uTAM+B;iBAC1C;;;;gBAXQC,gBAAS;gBAVhBC,6BAAwB;gBAOxBC,qBAAgB;gBAFhBC,cAAS;;;0BAqBRC,UAAK;2BAGLA,UAAK;wBAGLA,UAAK;;;;;;;QATN,mDAA6D;;;;;QAC7D,4CAAyD;;QAEzD,4CACiB;;QAEjB,6CACkB;;QAElB,0CACoB;;;;;QAGlB,8CAA4B;;;;;QAC5B,6DAA0D;;;;;QAC1D,qDAA0C;;;;;QAC1C,6CAA2B;;;;;;;;;QC7B/B;;;;;gBALCC,aAAQ,SAAC;oBACR,OAAO,EAAE,CAACC,mBAAY,EAAEC,sBAAe,EAAEC,wCAAwB,CAAC;oBAClE,OAAO,EAAE,CAAC,yBAAyB,CAAC;oBACpC,YAAY,EAAE,CAAC,yBAAyB,CAAC;iBAC1C;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/bundles/{ng-matero-extensions-button.umd.min.js → mtxButton.umd.min.js}

@@ -1,2 +1,2 @@
 !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common"),require("@angular/material/button"),require("@angular/material/progress-spinner")):"function"==typeof define&&define.amd?define("@ng-matero/extensions/button",["exports","@angular/core","@angular/common","@angular/material/button","@angular/material/progress-spinner"],e):e(((t="undefined"!=typeof globalThis?globalThis:t||self)["ng-matero"]=t["ng-matero"]||{},t["ng-matero"].extensions=t["ng-matero"].extensions||{},t["ng-matero"].extensions.button={}),t.ng.core,t.ng.common,t.ng.material.button,t.ng.material.progressSpinner)}(this,(function(t,e,n,o,r){"use strict";var i=function(){function t(t,e,n,o){this.matButton=t,this.componentFactoryResolver=e,this.viewContainerRef=n,this.renderer=o,this.spinnerFactory=this.componentFactoryResolver.resolveComponentFactory(r.MatProgressSpinner)}return t.prototype.ngOnChanges=function(t){t.loading&&(t.loading.currentValue?(this.matButton._elementRef.nativeElement.classList.add("mat-button-loading"),this.matButton.disabled=!0,this.createSpinner()):t.loading.firstChange||(this.matButton._elementRef.nativeElement.classList.remove("mat-button-loading"),this.matButton.disabled=this.disabled,this.destroySpinner()))},t.prototype.createSpinner=function(){this.spinner||(this.spinner=this.viewContainerRef.createComponent(this.spinnerFactory),this.spinner.instance.color=this.color,this.spinner.instance.diameter=20,this.spinner.instance.mode="indeterminate",this.renderer.appendChild(this.matButton._elementRef.nativeElement,this.spinner.instance._elementRef.nativeElement))},t.prototype.destroySpinner=function(){this.spinner&&(this.spinner.destroy(),this.spinner=null)},t}();i.decorators=[{type:e.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]"}]}],i.ctorParameters=function(){return[{type:o.MatButton},{type:e.ComponentFactoryResolver},{type:e.ViewContainerRef},{type:e.Renderer2}]},i.propDecorators={loading:[{type:e.Input}],disabled:[{type:e.Input}],color:[{type:e.Input}]};var a=function(){};a.decorators=[{type:e.NgModule,args:[{imports:[n.CommonModule,o.MatButtonModule,r.MatProgressSpinnerModule],exports:[i],declarations:[i]}]}],t.MatButtonLoadingDirective=i,t.MtxButtonModule=a,Object.defineProperty(t,"__esModule",{value:!0})}));
-//# sourceMappingURL=ng-matero-extensions-button.umd.min.js.map
+//# sourceMappingURL=mtxButton.umd.min.js.map

package/bundles/mtxCheckboxGroup.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/forms'), require('@angular/material/checkbox'), require('@ng-matero/extensions/utils'), require('@angular/cdk/coercion')) :
-    typeof define === 'function' && define.amd ? define('@ng-matero/extensions/checkbox-group', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/material/checkbox', '@ng-matero/extensions/utils', '@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['checkbox-group'] = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.material.checkbox, global['ng-matero'].extensions.utils, global.ng.cdk.coercion));
-}(this, (function (exports, core, common, forms, checkbox, utils, coercion) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/material/checkbox'), require('@ng-matero/extensions/utils'), require('@angular/cdk/a11y'), require('@angular/cdk/coercion')) :
+    typeof define === 'function' && define.amd ? define('@ng-matero/extensions/checkbox-group', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/material/checkbox', '@ng-matero/extensions/utils', '@angular/cdk/a11y', '@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['checkbox-group'] = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.material.checkbox, global['ng-matero'].extensions.utils, global.ng.cdk.a11y, global.ng.cdk.coercion));
+}(this, (function (exports, core, common, forms, checkbox, utils, a11y, coercion) { 'use strict';
 
     /**
      * @fileoverview added by tsickle
@@ -29,20 +29,23 @@
     var MtxCheckboxGroupComponent = /** @class */ (function () {
         /**
          * @param {?} _changeDetectorRef
+         * @param {?} _focusMonitor
+         * @param {?} _elementRef
          */
-        function MtxCheckboxGroupComponent(_changeDetectorRef) {
+        function MtxCheckboxGroupComponent(_changeDetectorRef, _focusMonitor, _elementRef) {
             this._changeDetectorRef = _changeDetectorRef;
+            this._focusMonitor = _focusMonitor;
+            this._elementRef = _elementRef;
             this._items = [];
             this._originalItems = [];
             this.bindLabel = 'label';
             this.bindValue = 'value';
-            this.showSelectAll = false;
+            this._showSelectAll = false;
             this.selectAllLabel = 'Select All';
             this._disabled = false;
             this.change = new core.EventEmitter();
             this.selectAll = false;
             this.selectAllIndeterminate = false;
-            this.color = 'accent';
             this.selectedItems = [];
             this._onChange = ( /**
              * @return {?}
@@ -63,7 +66,7 @@
              * @return {?}
              */
             set: function (value) {
-                // TODO: Deep clone
+                // store the original data with deep clone
                 this._originalItems = JSON.parse(JSON.stringify(value));
                 this._items = value.map(( /**
                  * @param {?} option
@@ -72,12 +75,29 @@
                  * @param {?} option
                  * @return {?}
                  */ option) {
-                    return option instanceof Object ? option : new MtxCheckboxBase(option, option);
+                    return option instanceof Object ? Object.assign({}, option) : new MtxCheckboxBase(option, option);
                 }));
             },
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(MtxCheckboxGroupComponent.prototype, "showSelectAll", {
+            /**
+             * @return {?}
+             */
+            get: function () {
+                return this._showSelectAll;
+            },
+            /**
+             * @param {?} value
+             * @return {?}
+             */
+            set: function (value) {
+                this._showSelectAll = coercion.coerceBooleanProperty(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(MtxCheckboxGroupComponent.prototype, "compareWith", {
             /**
              * @return {?}
@@ -90,7 +110,7 @@
              * @return {?}
              */
             set: function (fn) {
-                if (typeof fn !== 'function') {
+                if (fn != null && typeof fn !== 'function') {
                     throw Error('`compareWith` must be a function.');
                 }
                 if (fn) {
@@ -113,6 +133,7 @@
              */
             set: function (value) {
                 this._disabled = coercion.coerceBooleanProperty(value);
+                this._changeDetectorRef.markForCheck();
             },
             enumerable: false,
             configurable: true
@@ -120,7 +141,36 @@
         /**
          * @return {?}
          */
-        MtxCheckboxGroupComponent.prototype.ngAfterViewInit = function () { };
+        MtxCheckboxGroupComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            this._focusMonitor.monitor(this._elementRef, true).subscribe(( /**
+             * @param {?} focusOrigin
+             * @return {?}
+             */function (/**
+             * @param {?} focusOrigin
+             * @return {?}
+             */ focusOrigin) {
+                if (!focusOrigin) {
+                    // When a focused element becomes disabled, the browser *immediately* fires a blur event.
+                    // Angular does not expect events to be raised during change detection, so any state change
+                    // (such as a form control's 'ng-touched') will cause a changed-after-checked error.
+                    // See https://github.com/angular/angular/issues/17793. To work around this, we defer
+                    // telling the form control it has been touched until the next tick.
+                    Promise.resolve().then(( /**
+                     * @return {?}
+                     */function () {
+                        _this._onTouched();
+                        _this._changeDetectorRef.markForCheck();
+                    }));
+                }
+            }));
+        };
+        /**
+         * @return {?}
+         */
+        MtxCheckboxGroupComponent.prototype.ngOnDestroy = function () {
+            this._focusMonitor.stopMonitoring(this._elementRef);
+        };
         /**
          * Finds and selects and option based on its value.
          * @private
@@ -159,6 +209,13 @@
          */
         MtxCheckboxGroupComponent.prototype.writeValue = function (value) {
             var _this = this;
+            this.items.forEach(( /**
+             * @param {?} item
+             * @return {?}
+             */function (/**
+             * @param {?} item
+             * @return {?}
+             */ item) { return (item.checked = false); }));
             if (value) {
                 if (!Array.isArray(value)) {
                     throw Error('Value must be an array.');
@@ -166,7 +223,10 @@
                 value.forEach(( /**
                  * @param {?} currentValue
                  * @return {?}
-                 */function (currentValue) { return _this._selectValue(currentValue); }));
+                 */function (/**
+                 * @param {?} currentValue
+                 * @return {?}
+                 */ currentValue) { return _this._selectValue(currentValue); }));
                 this.selectedItems = value;
             }
             this._checkMasterCheckboxState();
@@ -196,7 +256,7 @@
          * @return {?}
          */
         MtxCheckboxGroupComponent.prototype.setDisabledState = function (isDisabled) {
-            this._disabled = isDisabled;
+            this.disabled = isDisabled;
         };
         /**
          * @private
@@ -270,7 +330,7 @@
                  */function (/**
                  * @param {?} selectedOption
                  * @return {?}
-                 */ selectedOption) { return _this._compareWith(option, selectedOption); })); }));
+                 */ selectedOption) { return ( /** @type {?} */(_this._compareWith))(option, selectedOption); })); }));
             }
             else {
                 this.selectedItems = this.selectedItems.map(( /**
@@ -348,7 +408,7 @@
                     host: {
                         class: 'mtx-checkbox-group',
                     },
-                    template: "<mat-checkbox class=\"mtx-checkbox-master\"\n              *ngIf=\"showSelectAll\"\n              [checked]=\"selectAll\"\n              [(indeterminate)]=\"selectAllIndeterminate\"\n              [disabled]=\"disabled\"\n              (change)=\"_updateMasterCheckboxState($event, -1);\">\n  {{selectAllLabel}}\n</mat-checkbox>\n\n<mat-checkbox class=\"mtx-checkbox-normal\"\n              *ngFor=\"let option of items; let i = index;\"\n              [(ngModel)]=\"option.checked\"\n              [aria-describedby]=\"option.ariaDescribedby\"\n              [aria-label]=\"option.ariaLabel\"\n              [aria-labelledby]=\"option.ariaLabelledby\"\n              [color]=\"option.color || color\"\n              [disabled]=\"option.disabled || disabled\"\n              [disableRipple]=\"option.disableRipple\"\n              [labelPosition]=\"option.labelPosition\"\n              [required]=\"option.required\"\n              (change)=\"_updateNormalCheckboxState($event, i)\">\n  {{option[bindLabel] | toObservable | async}}\n</mat-checkbox>\n",
+                    template: "<mat-checkbox class=\"mtx-checkbox-master\"\n              *ngIf=\"showSelectAll\"\n              [checked]=\"selectAll\"\n              [(indeterminate)]=\"selectAllIndeterminate\"\n              [disabled]=\"disabled\"\n              (change)=\"_updateMasterCheckboxState($event, -1)\">\n  {{selectAllLabel}}\n</mat-checkbox>\n\n<mat-checkbox class=\"mtx-checkbox-normal\"\n              *ngFor=\"let option of items; let i = index;\"\n              [(ngModel)]=\"option.checked\"\n              [aria-describedby]=\"option.ariaDescribedby\"\n              [aria-label]=\"option.ariaLabel\"\n              [aria-labelledby]=\"option.ariaLabelledby\"\n              [color]=\"option.color\"\n              [disabled]=\"option.disabled || disabled\"\n              [disableRipple]=\"option.disableRipple\"\n              [labelPosition]=\"option.labelPosition\"\n              [required]=\"option.required\"\n              (change)=\"_updateNormalCheckboxState($event, i)\">\n  {{option[bindLabel] | toObservable | async}}\n</mat-checkbox>\n",
                     encapsulation: core.ViewEncapsulation.None,
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     providers: [
@@ -365,7 +425,9 @@
     ];
     /** @nocollapse */
     MtxCheckboxGroupComponent.ctorParameters = function () { return [
-        { type: core.ChangeDetectorRef }
+        { type: core.ChangeDetectorRef },
+        { type: a11y.FocusMonitor },
+        { type: core.ElementRef }
     ]; };
     MtxCheckboxGroupComponent.propDecorators = {
         _checkboxes: [{ type: core.ContentChildren, args: [core.forwardRef(( /**
@@ -397,8 +459,11 @@
         MtxCheckboxGroupComponent.prototype.bindLabel;
         /** @type {?} */
         MtxCheckboxGroupComponent.prototype.bindValue;
-        /** @type {?} */
-        MtxCheckboxGroupComponent.prototype.showSelectAll;
+        /**
+         * @type {?}
+         * @private
+         */
+        MtxCheckboxGroupComponent.prototype._showSelectAll;
         /** @type {?} */
         MtxCheckboxGroupComponent.prototype.selectAllLabel;
         /**
@@ -418,8 +483,6 @@
         /** @type {?} */
         MtxCheckboxGroupComponent.prototype.selectAllIndeterminate;
         /** @type {?} */
-        MtxCheckboxGroupComponent.prototype.color;
-        /** @type {?} */
         MtxCheckboxGroupComponent.prototype.selectedItems;
         /** @type {?} */
         MtxCheckboxGroupComponent.prototype._onChange;
@@ -430,6 +493,16 @@
          * @private
          */
         MtxCheckboxGroupComponent.prototype._changeDetectorRef;
+        /**
+         * @type {?}
+         * @private
+         */
+        MtxCheckboxGroupComponent.prototype._focusMonitor;
+        /**
+         * @type {?}
+         * @private
+         */
+        MtxCheckboxGroupComponent.prototype._elementRef;
     }
 
     /**

package/bundles/mtxCheckboxGroup.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"mtxCheckboxGroup.umd.js","sources":["../../../projects/extensions/checkbox-group/checkbox-group.component.ts","../../../projects/extensions/checkbox-group/checkbox-group.module.ts"],"sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  ViewEncapsulation,\n  Input,\n  Output,\n  EventEmitter,\n  ChangeDetectorRef,\n  forwardRef,\n  AfterViewInit,\n  ContentChildren,\n  QueryList,\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { ThemePalette } from '@angular/material/core';\nimport { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';\nimport { MtxCheckboxGroupOption } from './checkbox-group.interface';\n\nexport class MtxCheckboxBase {\n  constructor(public label?: any, public value?: any) {}\n}\n\n@Component({\n  selector: 'mtx-checkbox-group',\n  exportAs: 'mtxCheckboxGroup',\n  host: {\n    class: 'mtx-checkbox-group',\n  },\n  templateUrl: './checkbox-group.component.html',\n  styleUrls: ['./checkbox-group.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => MtxCheckboxGroupComponent),\n      multi: true,\n    },\n  ],\n})\nexport class MtxCheckboxGroupComponent implements AfterViewInit, ControlValueAccessor {\n  @ContentChildren(forwardRef(() => MatCheckbox), { descendants: true })\n  _checkboxes: QueryList<MatCheckbox>;\n\n  @Input()\n  get items() {\n    return this._items;\n  }\n  set items(value: any[]) {\n    // TODO: Deep clone\n    this._originalItems = JSON.parse(JSON.stringify(value));\n    this._items = value.map(option => {\n      return option instanceof Object ? option : new MtxCheckboxBase(option, option);\n    });\n  }\n  private _items: any[] = [];\n  private _originalItems: any[] = [];\n\n  @Input() bindLabel = 'label';\n  @Input() bindValue = 'value';\n  @Input() showSelectAll = false;\n  @Input() selectAllLabel = 'Select All';\n  @Input()\n  get compareWith() {\n    return this._compareWith;\n  }\n  set compareWith(fn: (o1: any, o2: any) => boolean) {\n    if (typeof fn !== 'function') {\n      throw Error('`compareWith` must be a function.');\n    }\n\n    if (fn) {\n      this._compareWith = fn;\n    }\n  }\n  private _compareWith: (o1: any, o2: any) => boolean;\n\n  @Input()\n  get disabled(): boolean {\n    return this._disabled;\n  }\n  set disabled(value: boolean) {\n    this._disabled = coerceBooleanProperty(value);\n  }\n  private _disabled = false;\n\n  @Output() change = new EventEmitter<{ model: MtxCheckboxGroupOption[]; index: number }>();\n\n  selectAll = false;\n  selectAllIndeterminate = false;\n\n  color: ThemePalette = 'accent';\n\n  selectedItems: MtxCheckboxGroupOption[] = [];\n\n  _onChange: (value: MtxCheckboxGroupOption[]) => void = () => null;\n  _onTouched: () => void = () => null;\n\n  constructor(private _changeDetectorRef: ChangeDetectorRef) {}\n\n  ngAfterViewInit() {}\n\n  /**\n   * Finds and selects and option based on its value.\n   * @returns Option that has the corresponding value.\n   */\n  private _selectValue(value: MtxCheckboxGroupOption) {\n    const correspondingOption = (this.items as MtxCheckboxGroupOption[]).find(option => {\n      try {\n        const compareValue = option[this.bindValue] === value;\n        return this._compareWith ? this._compareWith(option, value) : compareValue;\n      } catch (error) {\n        console.warn(error);\n        return false;\n      }\n    });\n\n    if (correspondingOption) {\n      correspondingOption.checked = true;\n    }\n\n    return correspondingOption;\n  }\n\n  /**\n   * Sets the model value. Implemented as part of ControlValueAccessor.\n   * @param value New value to be written to the model.\n   */\n  writeValue(value: any[]): void {\n    if (value) {\n      if (!Array.isArray(value)) {\n        throw Error('Value must be an array.');\n      }\n\n      value.forEach((currentValue: any) => this._selectValue(currentValue));\n      this.selectedItems = value;\n    }\n\n    this._checkMasterCheckboxState();\n    this._changeDetectorRef.markForCheck();\n  }\n\n  /**\n   * Registers a callback to be triggered when the model value changes.\n   * Implemented as part of ControlValueAccessor.\n   * @param fn Callback to be registered.\n   */\n  registerOnChange(fn: (value: MtxCheckboxGroupOption[]) => {}): void {\n    this._onChange = fn;\n  }\n\n  /**\n   * Registers a callback to be triggered when the control is touched.\n   * Implemented as part of ControlValueAccessor.\n   * @param fn Callback to be registered.\n   */\n  registerOnTouched(fn: () => {}): void {\n    this._onTouched = fn;\n  }\n\n  /**\n   * Sets the disabled state of the control. Implemented as a part of ControlValueAccessor.\n   * @param isDisabled Whether the control should be disabled.\n   */\n  setDisabledState(isDisabled: boolean) {\n    this._disabled = isDisabled;\n  }\n\n  private _checkMasterCheckboxState() {\n    if (\n      (this.items as MtxCheckboxGroupOption[])\n        .filter(option => option.checked || !option.disabled)\n        .every(option => !option.checked)\n    ) {\n      this.selectAll = false;\n      this.selectAllIndeterminate = false;\n    } else if (\n      (this.items as MtxCheckboxGroupOption[])\n        .filter(option => option.checked || !option.disabled)\n        .every(option => option.checked)\n    ) {\n      this.selectAll = true;\n      this.selectAllIndeterminate = false;\n    } else {\n      this.selectAllIndeterminate = true;\n    }\n  }\n\n  private _getSelectedItems(index: number) {\n    this.selectedItems = (this.items as MtxCheckboxGroupOption[]).filter(option => option.checked);\n\n    if (this._compareWith) {\n      this.selectedItems = (this._originalItems as MtxCheckboxGroupOption[]).filter(option =>\n        this.selectedItems.find(selectedOption => this._compareWith(option, selectedOption))\n      );\n    } else {\n      this.selectedItems = this.selectedItems.map(option => option[this.bindValue]);\n    }\n\n    this._onChange(this.selectedItems);\n\n    this.change.emit({ model: this.selectedItems, index });\n  }\n\n  /** Handle normal checkbox toggle */\n  _updateNormalCheckboxState(e: MatCheckboxChange, index: number): void {\n    this._checkMasterCheckboxState();\n    this._getSelectedItems(index);\n  }\n\n  /** Handle master checkbox toggle */\n  _updateMasterCheckboxState(e: MatCheckboxChange, index: number): void {\n    this.selectAll = !this.selectAll;\n    this.selectAllIndeterminate = false;\n\n    if (this.selectAll) {\n      (this.items as MtxCheckboxGroupOption[])\n        .filter(option => option.checked || !option.disabled)\n        .forEach(option => (option.checked = true));\n    } else {\n      (this.items as MtxCheckboxGroupOption[])\n        .filter(option => option.checked || !option.disabled)\n        .forEach(option => (option.checked = !!option.disabled));\n    }\n\n    this._getSelectedItems(index);\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\n\nimport { MtxUtilsModule } from '@ng-matero/extensions/utils';\nimport { MtxCheckboxGroupComponent } from './checkbox-group.component';\n\n@NgModule({\n  imports: [CommonModule, FormsModule, MatCheckboxModule, MtxUtilsModule],\n  exports: [MtxCheckboxGroupComponent],\n  declarations: [MtxCheckboxGroupComponent],\n})\nexport class MtxCheckboxGroupModule {}\n"],"names":["EventEmitter","coerceBooleanProperty","Component","ViewEncapsulation","ChangeDetectionStrategy","NG_VALUE_ACCESSOR","forwardRef","ChangeDetectorRef","ContentChildren","MatCheckbox","Input","Output","NgModule","CommonModule","FormsModule","MatCheckboxModule","MtxUtilsModule"],"mappings":"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"}
+{"version":3,"file":"mtxCheckboxGroup.umd.js","sources":["../../../projects/extensions/checkbox-group/checkbox-group.component.ts","../../../projects/extensions/checkbox-group/checkbox-group.module.ts"],"sourcesContent":["import { FocusMonitor } from '@angular/cdk/a11y';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChildren,\n  ElementRef,\n  EventEmitter,\n  Input,\n  OnDestroy,\n  Output,\n  QueryList,\n  ViewEncapsulation,\n  forwardRef,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';\nimport { MtxCheckboxGroupOption } from './checkbox-group.interface';\n\nexport class MtxCheckboxBase {\n  constructor(public label?: any, public value?: any) {}\n}\n\n@Component({\n  selector: 'mtx-checkbox-group',\n  exportAs: 'mtxCheckboxGroup',\n  host: {\n    class: 'mtx-checkbox-group',\n  },\n  templateUrl: './checkbox-group.component.html',\n  styleUrls: ['./checkbox-group.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => MtxCheckboxGroupComponent),\n      multi: true,\n    },\n  ],\n})\nexport class MtxCheckboxGroupComponent implements AfterViewInit, OnDestroy, ControlValueAccessor {\n  @ContentChildren(forwardRef(() => MatCheckbox), { descendants: true })\n  _checkboxes: QueryList<MatCheckbox>;\n\n  @Input()\n  get items() {\n    return this._items;\n  }\n  set items(value: any[]) {\n    // store the original data with deep clone\n    this._originalItems = JSON.parse(JSON.stringify(value));\n    this._items = value.map(option => {\n      return option instanceof Object ? { ...option } : new MtxCheckboxBase(option, option);\n    });\n  }\n  private _items: any[] = [];\n  private _originalItems: any[] = [];\n\n  @Input() bindLabel = 'label';\n\n  @Input() bindValue = 'value';\n\n  @Input()\n  get showSelectAll(): boolean {\n    return this._showSelectAll;\n  }\n  set showSelectAll(value: boolean) {\n    this._showSelectAll = coerceBooleanProperty(value);\n  }\n  private _showSelectAll = false;\n\n  @Input() selectAllLabel = 'Select All';\n\n  @Input()\n  get compareWith() {\n    return this._compareWith;\n  }\n  set compareWith(fn: ((o1: any, o2: any) => boolean) | undefined) {\n    if (fn != null && typeof fn !== 'function') {\n      throw Error('`compareWith` must be a function.');\n    }\n\n    if (fn) {\n      this._compareWith = fn;\n    }\n  }\n  private _compareWith!: (o1: any, o2: any) => boolean;\n\n  @Input()\n  get disabled(): boolean {\n    return this._disabled;\n  }\n  set disabled(value: boolean) {\n    this._disabled = coerceBooleanProperty(value);\n    this._changeDetectorRef.markForCheck();\n  }\n  private _disabled = false;\n\n  @Output() change = new EventEmitter<{ model: MtxCheckboxGroupOption[]; index: number }>();\n\n  selectAll = false;\n  selectAllIndeterminate = false;\n\n  selectedItems: MtxCheckboxGroupOption[] = [];\n\n  _onChange: (value: MtxCheckboxGroupOption[]) => void = () => null;\n  _onTouched: () => void = () => null;\n\n  constructor(\n    private _changeDetectorRef: ChangeDetectorRef,\n    private _focusMonitor: FocusMonitor,\n    private _elementRef: ElementRef<HTMLElement>\n  ) {}\n\n  ngAfterViewInit() {\n    this._focusMonitor.monitor(this._elementRef, true).subscribe(focusOrigin => {\n      if (!focusOrigin) {\n        // When a focused element becomes disabled, the browser *immediately* fires a blur event.\n        // Angular does not expect events to be raised during change detection, so any state change\n        // (such as a form control's 'ng-touched') will cause a changed-after-checked error.\n        // See https://github.com/angular/angular/issues/17793. To work around this, we defer\n        // telling the form control it has been touched until the next tick.\n        Promise.resolve().then(() => {\n          this._onTouched();\n          this._changeDetectorRef.markForCheck();\n        });\n      }\n    });\n  }\n\n  ngOnDestroy() {\n    this._focusMonitor.stopMonitoring(this._elementRef);\n  }\n\n  /**\n   * Finds and selects and option based on its value.\n   * @returns Option that has the corresponding value.\n   */\n  private _selectValue(value: MtxCheckboxGroupOption) {\n    const correspondingOption = (this.items as MtxCheckboxGroupOption[]).find(option => {\n      try {\n        const compareValue = option[this.bindValue] === value;\n        return this._compareWith ? this._compareWith(option, value) : compareValue;\n      } catch (error) {\n        console.warn(error);\n        return false;\n      }\n    });\n\n    if (correspondingOption) {\n      correspondingOption.checked = true;\n    }\n\n    return correspondingOption;\n  }\n\n  /**\n   * Sets the model value. Implemented as part of ControlValueAccessor.\n   * @param value New value to be written to the model.\n   */\n  writeValue(value: any[]): void {\n    this.items.forEach(item => (item.checked = false));\n\n    if (value) {\n      if (!Array.isArray(value)) {\n        throw Error('Value must be an array.');\n      }\n\n      value.forEach(currentValue => this._selectValue(currentValue));\n      this.selectedItems = value;\n    }\n\n    this._checkMasterCheckboxState();\n    this._changeDetectorRef.markForCheck();\n  }\n\n  /**\n   * Registers a callback to be triggered when the model value changes.\n   * Implemented as part of ControlValueAccessor.\n   * @param fn Callback to be registered.\n   */\n  registerOnChange(fn: (value: MtxCheckboxGroupOption[]) => {}): void {\n    this._onChange = fn;\n  }\n\n  /**\n   * Registers a callback to be triggered when the control is touched.\n   * Implemented as part of ControlValueAccessor.\n   * @param fn Callback to be registered.\n   */\n  registerOnTouched(fn: () => {}): void {\n    this._onTouched = fn;\n  }\n\n  /**\n   * Sets the disabled state of the control. Implemented as a part of ControlValueAccessor.\n   * @param isDisabled Whether the control should be disabled.\n   */\n  setDisabledState(isDisabled: boolean) {\n    this.disabled = isDisabled;\n  }\n\n  private _checkMasterCheckboxState() {\n    if (\n      (this.items as MtxCheckboxGroupOption[])\n        .filter(option => option.checked || !option.disabled)\n        .every(option => !option.checked)\n    ) {\n      this.selectAll = false;\n      this.selectAllIndeterminate = false;\n    } else if (\n      (this.items as MtxCheckboxGroupOption[])\n        .filter(option => option.checked || !option.disabled)\n        .every(option => option.checked)\n    ) {\n      this.selectAll = true;\n      this.selectAllIndeterminate = false;\n    } else {\n      this.selectAllIndeterminate = true;\n    }\n  }\n\n  private _getSelectedItems(index: number) {\n    this.selectedItems = (this.items as MtxCheckboxGroupOption[]).filter(option => option.checked);\n\n    if (this._compareWith) {\n      this.selectedItems = (this._originalItems as MtxCheckboxGroupOption[]).filter(option =>\n        this.selectedItems.find(selectedOption => this._compareWith!(option, selectedOption))\n      );\n    } else {\n      this.selectedItems = this.selectedItems.map(option => option[this.bindValue]);\n    }\n\n    this._onChange(this.selectedItems);\n\n    this.change.emit({ model: this.selectedItems, index });\n  }\n\n  /** Handle normal checkbox toggle */\n  _updateNormalCheckboxState(e: MatCheckboxChange, index: number): void {\n    this._checkMasterCheckboxState();\n    this._getSelectedItems(index);\n  }\n\n  /** Handle master checkbox toggle */\n  _updateMasterCheckboxState(e: MatCheckboxChange, index: number): void {\n    this.selectAll = !this.selectAll;\n    this.selectAllIndeterminate = false;\n\n    if (this.selectAll) {\n      (this.items as MtxCheckboxGroupOption[])\n        .filter(option => option.checked || !option.disabled)\n        .forEach(option => (option.checked = true));\n    } else {\n      (this.items as MtxCheckboxGroupOption[])\n        .filter(option => option.checked || !option.disabled)\n        .forEach(option => (option.checked = !!option.disabled));\n    }\n\n    this._getSelectedItems(index);\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\n\nimport { MtxUtilsModule } from '@ng-matero/extensions/utils';\nimport { MtxCheckboxGroupComponent } from './checkbox-group.component';\n\n@NgModule({\n  imports: [CommonModule, FormsModule, MatCheckboxModule, MtxUtilsModule],\n  exports: [MtxCheckboxGroupComponent],\n  declarations: [MtxCheckboxGroupComponent],\n})\nexport class MtxCheckboxGroupModule {}\n"],"names":["EventEmitter","coerceBooleanProperty","Component","ViewEncapsulation","ChangeDetectionStrategy","NG_VALUE_ACCESSOR","forwardRef","ChangeDetectorRef","FocusMonitor","ElementRef","ContentChildren","MatCheckbox","Input","Output","NgModule","CommonModule","FormsModule","MatCheckboxModule","MtxUtilsModule"],"mappings":";;;;;;;;;;;;;;;;QAsBE,yBAAmB,KAAW,EAAS,KAAW;YAA/B,UAAK,GAAL,KAAK,CAAM;YAAS,UAAK,GAAL,KAAK,CAAM;SAAI;8BACvD;KAAA,IAAA;;;QADa,gCAAkB;;QAAE,gCAAkB;;;;;;;;QAyFlD,mCACU,kBAAqC,EACrC,aAA2B,EAC3B,WAAoC;YAFpC,uBAAkB,GAAlB,kBAAkB,CAAmB;YACrC,kBAAa,GAAb,aAAa,CAAc;YAC3B,gBAAW,GAAX,WAAW,CAAyB;YAxDtC,WAAM,GAAU,EAAE,CAAC;YACnB,mBAAc,GAAU,EAAE,CAAC;YAE1B,cAAS,GAAG,OAAO,CAAC;YAEpB,cAAS,GAAG,OAAO,CAAC;YASrB,mBAAc,GAAG,KAAK,CAAC;YAEtB,mBAAc,GAAG,YAAY,CAAC;YAyB/B,cAAS,GAAG,KAAK,CAAC;YAEhB,WAAM,GAAG,IAAIA,iBAAY,EAAsD,CAAC;YAE1F,cAAS,GAAG,KAAK,CAAC;YAClB,2BAAsB,GAAG,KAAK,CAAC;YAE/B,kBAAa,GAA6B,EAAE,CAAC;YAE7C,cAAS;;eAA8C,cAAM,OAAA,IAAI,GAAA,EAAC;YAClE,eAAU;;eAAe,cAAM,OAAA,IAAI,GAAA,EAAC;SAMhC;QApEJ,sBACI,4CAAK;;;;iBADT;gBAEE,OAAO,IAAI,CAAC,MAAM,CAAC;aACpB;;;;;iBACD,UAAU,KAAY;;gBAEpB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;gBACxD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG;;;mBAAC;;;oBAAA,MAAM;oBAC5B,OAAO,MAAM,YAAY,MAAM,qBAAQ,MAAM,IAAK,IAAI,eAAe,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;iBACvF,EAAC,CAAC;aACJ;;;WAPA;QAeD,sBACI,oDAAa;;;;iBADjB;gBAEE,OAAO,IAAI,CAAC,cAAc,CAAC;aAC5B;;;;;iBACD,UAAkB,KAAc;gBAC9B,IAAI,CAAC,cAAc,GAAGC,8BAAqB,CAAC,KAAK,CAAC,CAAC;aACpD;;;WAHA;QAQD,sBACI,kDAAW;;;;iBADf;gBAEE,OAAO,IAAI,CAAC,YAAY,CAAC;aAC1B;;;;;iBACD,UAAgB,EAA+C;gBAC7D,IAAI,EAAE,IAAI,IAAI,IAAI,OAAO,EAAE,KAAK,UAAU,EAAE;oBAC1C,MAAM,KAAK,CAAC,mCAAmC,CAAC,CAAC;iBAClD;gBAED,IAAI,EAAE,EAAE;oBACN,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;iBACxB;aACF;;;WATA;QAYD,sBACI,+CAAQ;;;;iBADZ;gBAEE,OAAO,IAAI,CAAC,SAAS,CAAC;aACvB;;;;;iBACD,UAAa,KAAc;gBACzB,IAAI,CAAC,SAAS,GAAGA,8BAAqB,CAAC,KAAK,CAAC,CAAC;gBAC9C,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE,CAAC;aACxC;;;WAJA;;;;QAuBD,mDAAe,GAAf;YAAA,iBAcC;YAbC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC,SAAS;;;eAAC;;;gBAAA,WAAW;gBACtE,IAAI,CAAC,WAAW,EAAE;;;;;;oBAMhB,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI;;uBAAC;wBACrB,KAAI,CAAC,UAAU,EAAE,CAAC;wBAClB,KAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE,CAAC;qBACxC,EAAC,CAAC;iBACJ;aACF,EAAC,CAAC;SACJ;;;;QAED,+CAAW,GAAX;YACE,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SACrD;;;;;;;QAMO,gDAAY,GAAZ,UAAa,KAA6B;YAA1C,iBAgBP;;gBAfO,mBAAmB,GAAG,oBAAC,IAAI,CAAC,KAAK,IAA8B,IAAI;;;eAAC;;;gBAAA,MAAM;gBAC9E,IAAI;;wBACI,YAAY,GAAG,MAAM,CAAC,KAAI,CAAC,SAAS,CAAC,KAAK,KAAK;oBACrD,OAAO,KAAI,CAAC,YAAY,GAAG,KAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,GAAG,YAAY,CAAC;iBAC5E;gBAAC,OAAO,KAAK,EAAE;oBACd,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;oBACpB,OAAO,KAAK,CAAC;iBACd;aACF,EAAC;YAEF,IAAI,mBAAmB,EAAE;gBACvB,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC;aACpC;YAED,OAAO,mBAAmB,CAAC;SAC5B;;;;;;QAMD,8CAAU,GAAV,UAAW,KAAY;YAAvB,iBAcC;YAbC,IAAI,CAAC,KAAK,CAAC,OAAO;;;eAAC;;;gBAAA,IAAI,IAAI,QAAC,IAAI,CAAC,OAAO,GAAG,KAAK,IAAC,EAAC,CAAC;YAEnD,IAAI,KAAK,EAAE;gBACT,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;oBACzB,MAAM,KAAK,CAAC,yBAAyB,CAAC,CAAC;iBACxC;gBAED,KAAK,CAAC,OAAO;;;mBAAC;;;oBAAA,YAAY,IAAI,OAAA,KAAI,CAAC,YAAY,CAAC,YAAY,CAAC,GAAA,EAAC,CAAC;gBAC/D,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;aAC5B;YAED,IAAI,CAAC,yBAAyB,EAAE,CAAC;YACjC,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE,CAAC;SACxC;;;;;;;QAOD,oDAAgB,GAAhB,UAAiB,EAA2C;YAC1D,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;SACrB;;;;;;;QAOD,qDAAiB,GAAjB,UAAkB,EAAY;YAC5B,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;SACtB;;;;;;QAMD,oDAAgB,GAAhB,UAAiB,UAAmB;YAClC,IAAI,CAAC,QAAQ,GAAG,UAAU,CAAC;SAC5B;;;;;QAEO,6DAAyB,GAAzB;YACN,IACE,oBAAC,IAAI,CAAC,KAAK;iBACR,MAAM;;;WAAC;;;YAAA,MAAM,IAAI,OAAA,MAAM,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAA,EAAC;iBACpD,KAAK;;;WAAC;;;YAAA,MAAM,IAAI,OAAA,CAAC,MAAM,CAAC,OAAO,GAAA,EAAC,EACnC;gBACA,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;gBACvB,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAC;aACrC;iBAAM,IACL,oBAAC,IAAI,CAAC,KAAK;iBACR,MAAM;;;WAAC;;;YAAA,MAAM,IAAI,OAAA,MAAM,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAA,EAAC;iBACpD,KAAK;;;WAAC;;;YAAA,MAAM,IAAI,OAAA,MAAM,CAAC,OAAO,GAAA,EAAC,EAClC;gBACA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;gBACtB,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAC;aACrC;iBAAM;gBACL,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC;aACpC;SACF;;;;;;QAEO,qDAAiB,GAAjB,UAAkB,KAAa;YAA/B,iBAcP;YAbC,IAAI,CAAC,aAAa,GAAG,oBAAC,IAAI,CAAC,KAAK,IAA8B,MAAM;;;eAAC;;;gBAAA,MAAM,IAAI,OAAA,MAAM,CAAC,OAAO,GAAA,EAAC,CAAC;YAE/F,IAAI,IAAI,CAAC,YAAY,EAAE;gBACrB,IAAI,CAAC,aAAa,GAAG,oBAAC,IAAI,CAAC,cAAc,IAA8B,MAAM;;;mBAAC;;;oBAAA,MAAM,IAClF,OAAA,KAAI,CAAC,aAAa,CAAC,IAAI;;;mBAAC;;;oBAAA,cAAc,IAAI,OAAA,mBAAA,KAAI,CAAC,YAAY,GAAE,MAAM,EAAE,cAAc,CAAC,GAAA,EAAC,GAAA,EACtF,CAAC;aACH;iBAAM;gBACL,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG;;;mBAAC;;;oBAAA,MAAM,IAAI,OAAA,MAAM,CAAC,KAAI,CAAC,SAAS,CAAC,GAAA,EAAC,CAAC;aAC/E;YAED,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YAEnC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,KAAK,OAAA,EAAE,CAAC,CAAC;SACxD;;;;;;;QAGD,8DAA0B,GAA1B,UAA2B,CAAoB,EAAE,KAAa;YAC5D,IAAI,CAAC,yBAAyB,EAAE,CAAC;YACjC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;SAC/B;;;;;;;QAGD,8DAA0B,GAA1B,UAA2B,CAAoB,EAAE,KAAa;YAC5D,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;YACjC,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAC;YAEpC,IAAI,IAAI,CAAC,SAAS,EAAE;gBAClB,oBAAC,IAAI,CAAC,KAAK;qBACR,MAAM;;;eAAC;;;gBAAA,MAAM,IAAI,OAAA,MAAM,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAA,EAAC;qBACpD,OAAO;;;eAAC;;;gBAAA,MAAM,IAAI,QAAC,MAAM,CAAC,OAAO,GAAG,IAAI,IAAC,EAAC,CAAC;aAC/C;iBAAM;gBACL,oBAAC,IAAI,CAAC,KAAK;qBACR,MAAM;;;eAAC;;;gBAAA,MAAM,IAAI,OAAA,MAAM,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAA,EAAC;qBACpD,OAAO;;;eAAC;;;gBAAA,MAAM,IAAI,QAAC,MAAM,CAAC,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC,QAAQ,IAAC,EAAC,CAAC;aAC5D;YAED,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;SAC/B;;;;gBA9OFC,cAAS,SAAC;oBACT,QAAQ,EAAE,oBAAoB;oBAC9B,QAAQ,EAAE,kBAAkB;oBAC5B,IAAI,EAAE;wBACJ,KAAK,EAAE,oBAAoB;qBAC5B;oBACD,6hCAA8C;oBAE9C,aAAa,EAAEC,sBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAEC,4BAAuB,CAAC,MAAM;oBAC/C,SAAS,EAAE;wBACT;4BACE,OAAO,EAAEC,uBAAiB;4BAC1B,WAAW,EAAEC,eAAU;;+BAAC,cAAM,OAAA,yBAAyB,GAAA,EAAC;4BACxD,KAAK,EAAE,IAAI;yBACZ;qBACF;;iBACF;;;;gBArCCC,sBAAiB;gBALVC,iBAAY;gBAQnBC,eAAU;;;8BAoCTC,oBAAe,SAACJ,eAAU;;mCAAC,cAAM,OAAAK,oBAAW,GAAA,EAAC,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE;wBAGpEC,UAAK;4BAcLA,UAAK;4BAELA,UAAK;gCAELA,UAAK;iCASLA,UAAK;8BAELA,UAAK;2BAeLA,UAAK;yBAULC,WAAM;;;;QAzDP,gDACoC;;;;;QAapC,2CAA2B;;;;;QAC3B,mDAAmC;;QAEnC,8CAA6B;;QAE7B,8CAA6B;;;;;QAS7B,mDAA+B;;QAE/B,mDAAuC;;;;;QAevC,iDAAqD;;;;;QAUrD,8CAA0B;;QAE1B,2CAA0F;;QAE1F,8CAAkB;;QAClB,2DAA+B;;QAE/B,kDAA6C;;QAE7C,8CAAkE;;QAClE,+CAAoC;;;;;QAGlC,uDAA6C;;;;;QAC7C,kDAAmC;;;;;QACnC,gDAA4C;;;;;;;;;QCrGhD;;;;;gBALCC,aAAQ,SAAC;oBACR,OAAO,EAAE,CAACC,mBAAY,EAAEC,iBAAW,EAAEC,0BAAiB,EAAEC,oBAAc,CAAC;oBACvE,OAAO,EAAE,CAAC,yBAAyB,CAAC;oBACpC,YAAY,EAAE,CAAC,yBAAyB,CAAC;iBAC1C;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/bundles/mtxCheckboxGroup.umd.min.js

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms"),require("@angular/material/checkbox"),require("@ng-matero/extensions/utils"),require("@angular/cdk/coercion")):"function"==typeof define&&define.amd?define("@ng-matero/extensions/checkbox-group",["exports","@angular/core","@angular/common","@angular/forms","@angular/material/checkbox","@ng-matero/extensions/utils","@angular/cdk/coercion"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["ng-matero"]=e["ng-matero"]||{},e["ng-matero"].extensions=e["ng-matero"].extensions||{},e["ng-matero"].extensions["checkbox-group"]={}),e.ng.core,e.ng.common,e.ng.forms,e.ng.material.checkbox,e["ng-matero"].extensions.utils,e.ng.cdk.coercion)}(this,(function(e,t,n,o,i,r,c){"use strict";var s=function(e,t){this.label=e,this.value=t};var a=function(){function e(e){this._changeDetectorRef=e,this._items=[],this._originalItems=[],this.bindLabel="label",this.bindValue="value",this.showSelectAll=!1,this.selectAllLabel="Select All",this._disabled=!1,this.change=new t.EventEmitter,this.selectAll=!1,this.selectAllIndeterminate=!1,this.color="accent",this.selectedItems=[],this._onChange=function(){return null},this._onTouched=function(){return null}}return Object.defineProperty(e.prototype,"items",{get:function(){return this._items},set:function(e){this._originalItems=JSON.parse(JSON.stringify(e)),this._items=e.map((function(e){return e instanceof Object?e:new s(e,e)}))},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"compareWith",{get:function(){return this._compareWith},set:function(e){if("function"!=typeof e)throw Error("`compareWith` must be a function.");e&&(this._compareWith=e)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"disabled",{get:function(){return this._disabled},set:function(e){this._disabled=c.coerceBooleanProperty(e)},enumerable:!1,configurable:!0}),e.prototype.ngAfterViewInit=function(){},e.prototype._selectValue=function(e){var t=this,n=this.items.find((function(n){try{var o=n[t.bindValue]===e;return t._compareWith?t._compareWith(n,e):o}catch(e){return console.warn(e),!1}}));return n&&(n.checked=!0),n},e.prototype.writeValue=function(e){var t=this;if(e){if(!Array.isArray(e))throw Error("Value must be an array.");e.forEach((function(e){return t._selectValue(e)})),this.selectedItems=e}this._checkMasterCheckboxState(),this._changeDetectorRef.markForCheck()},e.prototype.registerOnChange=function(e){this._onChange=e},e.prototype.registerOnTouched=function(e){this._onTouched=e},e.prototype.setDisabledState=function(e){this._disabled=e},e.prototype._checkMasterCheckboxState=function(){this.items.filter((function(e){return e.checked||!e.disabled})).every((function(e){return!e.checked}))?(this.selectAll=!1,this.selectAllIndeterminate=!1):this.items.filter((function(e){return e.checked||!e.disabled})).every((function(e){return e.checked}))?(this.selectAll=!0,this.selectAllIndeterminate=!1):this.selectAllIndeterminate=!0},e.prototype._getSelectedItems=function(e){var t=this;this.selectedItems=this.items.filter((function(e){return e.checked})),this._compareWith?this.selectedItems=this._originalItems.filter((function(e){return t.selectedItems.find((function(n){return t._compareWith(e,n)}))})):this.selectedItems=this.selectedItems.map((function(e){return e[t.bindValue]})),this._onChange(this.selectedItems),this.change.emit({model:this.selectedItems,index:e})},e.prototype._updateNormalCheckboxState=function(e,t){this._checkMasterCheckboxState(),this._getSelectedItems(t)},e.prototype._updateMasterCheckboxState=function(e,t){this.selectAll=!this.selectAll,this.selectAllIndeterminate=!1,this.selectAll?this.items.filter((function(e){return e.checked||!e.disabled})).forEach((function(e){return e.checked=!0})):this.items.filter((function(e){return e.checked||!e.disabled})).forEach((function(e){return e.checked=!!e.disabled})),this._getSelectedItems(t)},e}();a.decorators=[{type:t.Component,args:[{selector:"mtx-checkbox-group",exportAs:"mtxCheckboxGroup",host:{class:"mtx-checkbox-group"},template:'<mat-checkbox class="mtx-checkbox-master"\n              *ngIf="showSelectAll"\n              [checked]="selectAll"\n              [(indeterminate)]="selectAllIndeterminate"\n              [disabled]="disabled"\n              (change)="_updateMasterCheckboxState($event, -1);">\n  {{selectAllLabel}}\n</mat-checkbox>\n\n<mat-checkbox class="mtx-checkbox-normal"\n              *ngFor="let option of items; let i = index;"\n              [(ngModel)]="option.checked"\n              [aria-describedby]="option.ariaDescribedby"\n              [aria-label]="option.ariaLabel"\n              [aria-labelledby]="option.ariaLabelledby"\n              [color]="option.color || color"\n              [disabled]="option.disabled || disabled"\n              [disableRipple]="option.disableRipple"\n              [labelPosition]="option.labelPosition"\n              [required]="option.required"\n              (change)="_updateNormalCheckboxState($event, i)">\n  {{option[bindLabel] | toObservable | async}}\n</mat-checkbox>\n',encapsulation:t.ViewEncapsulation.None,changeDetection:t.ChangeDetectionStrategy.OnPush,providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return a})),multi:!0}],styles:[".mtx-checkbox-group{display:block}.mtx-checkbox-group .mat-checkbox{margin-right:16px}[dir=rtl] .mtx-checkbox-group .mat-checkbox{margin-left:16px;margin-right:auto}"]}]}],a.ctorParameters=function(){return[{type:t.ChangeDetectorRef}]},a.propDecorators={_checkboxes:[{type:t.ContentChildren,args:[t.forwardRef((function(){return i.MatCheckbox})),{descendants:!0}]}],items:[{type:t.Input}],bindLabel:[{type:t.Input}],bindValue:[{type:t.Input}],showSelectAll:[{type:t.Input}],selectAllLabel:[{type:t.Input}],compareWith:[{type:t.Input}],disabled:[{type:t.Input}],change:[{type:t.Output}]};var l=function(){};l.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule,o.FormsModule,i.MatCheckboxModule,r.MtxUtilsModule],exports:[a],declarations:[a]}]}],e.MtxCheckboxBase=s,e.MtxCheckboxGroupComponent=a,e.MtxCheckboxGroupModule=l,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms"),require("@angular/material/checkbox"),require("@ng-matero/extensions/utils"),require("@angular/cdk/a11y"),require("@angular/cdk/coercion")):"function"==typeof define&&define.amd?define("@ng-matero/extensions/checkbox-group",["exports","@angular/core","@angular/common","@angular/forms","@angular/material/checkbox","@ng-matero/extensions/utils","@angular/cdk/a11y","@angular/cdk/coercion"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["ng-matero"]=e["ng-matero"]||{},e["ng-matero"].extensions=e["ng-matero"].extensions||{},e["ng-matero"].extensions["checkbox-group"]={}),e.ng.core,e.ng.common,e.ng.forms,e.ng.material.checkbox,e["ng-matero"].extensions.utils,e.ng.cdk.a11y,e.ng.cdk.coercion)}(this,(function(e,t,n,o,i,r,c,s){"use strict";var a=function(e,t){this.label=e,this.value=t};var l=function(){function e(e,n,o){this._changeDetectorRef=e,this._focusMonitor=n,this._elementRef=o,this._items=[],this._originalItems=[],this.bindLabel="label",this.bindValue="value",this._showSelectAll=!1,this.selectAllLabel="Select All",this._disabled=!1,this.change=new t.EventEmitter,this.selectAll=!1,this.selectAllIndeterminate=!1,this.selectedItems=[],this._onChange=function(){return null},this._onTouched=function(){return null}}return Object.defineProperty(e.prototype,"items",{get:function(){return this._items},set:function(e){this._originalItems=JSON.parse(JSON.stringify(e)),this._items=e.map((function(e){return e instanceof Object?Object.assign({},e):new a(e,e)}))},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"showSelectAll",{get:function(){return this._showSelectAll},set:function(e){this._showSelectAll=s.coerceBooleanProperty(e)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"compareWith",{get:function(){return this._compareWith},set:function(e){if(null!=e&&"function"!=typeof e)throw Error("`compareWith` must be a function.");e&&(this._compareWith=e)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"disabled",{get:function(){return this._disabled},set:function(e){this._disabled=s.coerceBooleanProperty(e),this._changeDetectorRef.markForCheck()},enumerable:!1,configurable:!0}),e.prototype.ngAfterViewInit=function(){var e=this;this._focusMonitor.monitor(this._elementRef,!0).subscribe((function(t){t||Promise.resolve().then((function(){e._onTouched(),e._changeDetectorRef.markForCheck()}))}))},e.prototype.ngOnDestroy=function(){this._focusMonitor.stopMonitoring(this._elementRef)},e.prototype._selectValue=function(e){var t=this,n=this.items.find((function(n){try{var o=n[t.bindValue]===e;return t._compareWith?t._compareWith(n,e):o}catch(e){return console.warn(e),!1}}));return n&&(n.checked=!0),n},e.prototype.writeValue=function(e){var t=this;if(this.items.forEach((function(e){return e.checked=!1})),e){if(!Array.isArray(e))throw Error("Value must be an array.");e.forEach((function(e){return t._selectValue(e)})),this.selectedItems=e}this._checkMasterCheckboxState(),this._changeDetectorRef.markForCheck()},e.prototype.registerOnChange=function(e){this._onChange=e},e.prototype.registerOnTouched=function(e){this._onTouched=e},e.prototype.setDisabledState=function(e){this.disabled=e},e.prototype._checkMasterCheckboxState=function(){this.items.filter((function(e){return e.checked||!e.disabled})).every((function(e){return!e.checked}))?(this.selectAll=!1,this.selectAllIndeterminate=!1):this.items.filter((function(e){return e.checked||!e.disabled})).every((function(e){return e.checked}))?(this.selectAll=!0,this.selectAllIndeterminate=!1):this.selectAllIndeterminate=!0},e.prototype._getSelectedItems=function(e){var t=this;this.selectedItems=this.items.filter((function(e){return e.checked})),this._compareWith?this.selectedItems=this._originalItems.filter((function(e){return t.selectedItems.find((function(n){return t._compareWith(e,n)}))})):this.selectedItems=this.selectedItems.map((function(e){return e[t.bindValue]})),this._onChange(this.selectedItems),this.change.emit({model:this.selectedItems,index:e})},e.prototype._updateNormalCheckboxState=function(e,t){this._checkMasterCheckboxState(),this._getSelectedItems(t)},e.prototype._updateMasterCheckboxState=function(e,t){this.selectAll=!this.selectAll,this.selectAllIndeterminate=!1,this.selectAll?this.items.filter((function(e){return e.checked||!e.disabled})).forEach((function(e){return e.checked=!0})):this.items.filter((function(e){return e.checked||!e.disabled})).forEach((function(e){return e.checked=!!e.disabled})),this._getSelectedItems(t)},e}();l.decorators=[{type:t.Component,args:[{selector:"mtx-checkbox-group",exportAs:"mtxCheckboxGroup",host:{class:"mtx-checkbox-group"},template:'<mat-checkbox class="mtx-checkbox-master"\n              *ngIf="showSelectAll"\n              [checked]="selectAll"\n              [(indeterminate)]="selectAllIndeterminate"\n              [disabled]="disabled"\n              (change)="_updateMasterCheckboxState($event, -1)">\n  {{selectAllLabel}}\n</mat-checkbox>\n\n<mat-checkbox class="mtx-checkbox-normal"\n              *ngFor="let option of items; let i = index;"\n              [(ngModel)]="option.checked"\n              [aria-describedby]="option.ariaDescribedby"\n              [aria-label]="option.ariaLabel"\n              [aria-labelledby]="option.ariaLabelledby"\n              [color]="option.color"\n              [disabled]="option.disabled || disabled"\n              [disableRipple]="option.disableRipple"\n              [labelPosition]="option.labelPosition"\n              [required]="option.required"\n              (change)="_updateNormalCheckboxState($event, i)">\n  {{option[bindLabel] | toObservable | async}}\n</mat-checkbox>\n',encapsulation:t.ViewEncapsulation.None,changeDetection:t.ChangeDetectionStrategy.OnPush,providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return l})),multi:!0}],styles:[".mtx-checkbox-group{display:block}.mtx-checkbox-group .mat-checkbox{margin-right:16px}[dir=rtl] .mtx-checkbox-group .mat-checkbox{margin-left:16px;margin-right:auto}"]}]}],l.ctorParameters=function(){return[{type:t.ChangeDetectorRef},{type:c.FocusMonitor},{type:t.ElementRef}]},l.propDecorators={_checkboxes:[{type:t.ContentChildren,args:[t.forwardRef((function(){return i.MatCheckbox})),{descendants:!0}]}],items:[{type:t.Input}],bindLabel:[{type:t.Input}],bindValue:[{type:t.Input}],showSelectAll:[{type:t.Input}],selectAllLabel:[{type:t.Input}],compareWith:[{type:t.Input}],disabled:[{type:t.Input}],change:[{type:t.Output}]};var u=function(){};u.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule,o.FormsModule,i.MatCheckboxModule,r.MtxUtilsModule],exports:[l],declarations:[l]}]}],e.MtxCheckboxBase=a,e.MtxCheckboxGroupComponent=l,e.MtxCheckboxGroupModule=u,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=mtxCheckboxGroup.umd.min.js.map

package/bundles/mtxCheckboxGroup.umd.min.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../projects/extensions/checkbox-group/checkbox-group.component.ts","../../../projects/extensions/checkbox-group/checkbox-group.module.ts"],"names":["label","value","this","MtxCheckboxGroupComponent","_changeDetectorRef","_items","_originalItems","bindLabel","bindValue","showSelectAll","selectAllLabel","_disabled","change","EventEmitter","selectAll","selectAllIndeterminate","color","selectedItems","_onChange","_onTouched","Object","defineProperty","prototype","JSON","parse","stringify","map","option","MtxCheckboxBase","_compareWith","fn","Error","coerceBooleanProperty","ngAfterViewInit","_selectValue","_this","correspondingOption","find","compareValue","error","console","warn","checked","writeValue","Array","isArray","forEach","currentValue","_checkMasterCheckboxState","markForCheck","registerOnChange","registerOnTouched","setDisabledState","isDisabled","filter","disabled","every","_getSelectedItems","index","selectedOption","emit","model","_updateNormalCheckboxState","e","_updateMasterCheckboxState","Component","args","selector","exportAs","host","class","template","encapsulation","ViewEncapsulation","None","changeDetection","ChangeDetectionStrategy","OnPush","providers","provide","NG_VALUE_ACCESSOR","useExisting","forwardRef","multi","ChangeDetectorRef","ContentChildren","MatCheckbox","descendants","Input","Output","NgModule","imports","CommonModule","FormsModule","MatCheckboxModule","MtxUtilsModule","exports","declarations"],"mappings":"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","sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  ViewEncapsulation,\n  Input,\n  Output,\n  EventEmitter,\n  ChangeDetectorRef,\n  forwardRef,\n  AfterViewInit,\n  ContentChildren,\n  QueryList,\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { ThemePalette } from '@angular/material/core';\nimport { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';\nimport { MtxCheckboxGroupOption } from './checkbox-group.interface';\n\nexport class MtxCheckboxBase {\n  constructor(public label?: any, public value?: any) {}\n}\n\n@Component({\n  selector: 'mtx-checkbox-group',\n  exportAs: 'mtxCheckboxGroup',\n  host: {\n    class: 'mtx-checkbox-group',\n  },\n  templateUrl: './checkbox-group.component.html',\n  styleUrls: ['./checkbox-group.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => MtxCheckboxGroupComponent),\n      multi: true,\n    },\n  ],\n})\nexport class MtxCheckboxGroupComponent implements AfterViewInit, ControlValueAccessor {\n  @ContentChildren(forwardRef(() => MatCheckbox), { descendants: true })\n  _checkboxes: QueryList<MatCheckbox>;\n\n  @Input()\n  get items() {\n    return this._items;\n  }\n  set items(value: any[]) {\n    // TODO: Deep clone\n    this._originalItems = JSON.parse(JSON.stringify(value));\n    this._items = value.map(option => {\n      return option instanceof Object ? option : new MtxCheckboxBase(option, option);\n    });\n  }\n  private _items: any[] = [];\n  private _originalItems: any[] = [];\n\n  @Input() bindLabel = 'label';\n  @Input() bindValue = 'value';\n  @Input() showSelectAll = false;\n  @Input() selectAllLabel = 'Select All';\n  @Input()\n  get compareWith() {\n    return this._compareWith;\n  }\n  set compareWith(fn: (o1: any, o2: any) => boolean) {\n    if (typeof fn !== 'function') {\n      throw Error('`compareWith` must be a function.');\n    }\n\n    if (fn) {\n      this._compareWith = fn;\n    }\n  }\n  private _compareWith: (o1: any, o2: any) => boolean;\n\n  @Input()\n  get disabled(): boolean {\n    return this._disabled;\n  }\n  set disabled(value: boolean) {\n    this._disabled = coerceBooleanProperty(value);\n  }\n  private _disabled = false;\n\n  @Output() change = new EventEmitter<{ model: MtxCheckboxGroupOption[]; index: number }>();\n\n  selectAll = false;\n  selectAllIndeterminate = false;\n\n  color: ThemePalette = 'accent';\n\n  selectedItems: MtxCheckboxGroupOption[] = [];\n\n  _onChange: (value: MtxCheckboxGroupOption[]) => void = () => null;\n  _onTouched: () => void = () => null;\n\n  constructor(private _changeDetectorRef: ChangeDetectorRef) {}\n\n  ngAfterViewInit() {}\n\n  /**\n   * Finds and selects and option based on its value.\n   * @returns Option that has the corresponding value.\n   */\n  private _selectValue(value: MtxCheckboxGroupOption) {\n    const correspondingOption = (this.items as MtxCheckboxGroupOption[]).find(option => {\n      try {\n        const compareValue = option[this.bindValue] === value;\n        return this._compareWith ? this._compareWith(option, value) : compareValue;\n      } catch (error) {\n        console.warn(error);\n        return false;\n      }\n    });\n\n    if (correspondingOption) {\n      correspondingOption.checked = true;\n    }\n\n    return correspondingOption;\n  }\n\n  /**\n   * Sets the model value. Implemented as part of ControlValueAccessor.\n   * @param value New value to be written to the model.\n   */\n  writeValue(value: any[]): void {\n    if (value) {\n      if (!Array.isArray(value)) {\n        throw Error('Value must be an array.');\n      }\n\n      value.forEach((currentValue: any) => this._selectValue(currentValue));\n      this.selectedItems = value;\n    }\n\n    this._checkMasterCheckboxState();\n    this._changeDetectorRef.markForCheck();\n  }\n\n  /**\n   * Registers a callback to be triggered when the model value changes.\n   * Implemented as part of ControlValueAccessor.\n   * @param fn Callback to be registered.\n   */\n  registerOnChange(fn: (value: MtxCheckboxGroupOption[]) => {}): void {\n    this._onChange = fn;\n  }\n\n  /**\n   * Registers a callback to be triggered when the control is touched.\n   * Implemented as part of ControlValueAccessor.\n   * @param fn Callback to be registered.\n   */\n  registerOnTouched(fn: () => {}): void {\n    this._onTouched = fn;\n  }\n\n  /**\n   * Sets the disabled state of the control. Implemented as a part of ControlValueAccessor.\n   * @param isDisabled Whether the control should be disabled.\n   */\n  setDisabledState(isDisabled: boolean) {\n    this._disabled = isDisabled;\n  }\n\n  private _checkMasterCheckboxState() {\n    if (\n      (this.items as MtxCheckboxGroupOption[])\n        .filter(option => option.checked || !option.disabled)\n        .every(option => !option.checked)\n    ) {\n      this.selectAll = false;\n      this.selectAllIndeterminate = false;\n    } else if (\n      (this.items as MtxCheckboxGroupOption[])\n        .filter(option => option.checked || !option.disabled)\n        .every(option => option.checked)\n    ) {\n      this.selectAll = true;\n      this.selectAllIndeterminate = false;\n    } else {\n      this.selectAllIndeterminate = true;\n    }\n  }\n\n  private _getSelectedItems(index: number) {\n    this.selectedItems = (this.items as MtxCheckboxGroupOption[]).filter(option => option.checked);\n\n    if (this._compareWith) {\n      this.selectedItems = (this._originalItems as MtxCheckboxGroupOption[]).filter(option =>\n        this.selectedItems.find(selectedOption => this._compareWith(option, selectedOption))\n      );\n    } else {\n      this.selectedItems = this.selectedItems.map(option => option[this.bindValue]);\n    }\n\n    this._onChange(this.selectedItems);\n\n    this.change.emit({ model: this.selectedItems, index });\n  }\n\n  /** Handle normal checkbox toggle */\n  _updateNormalCheckboxState(e: MatCheckboxChange, index: number): void {\n    this._checkMasterCheckboxState();\n    this._getSelectedItems(index);\n  }\n\n  /** Handle master checkbox toggle */\n  _updateMasterCheckboxState(e: MatCheckboxChange, index: number): void {\n    this.selectAll = !this.selectAll;\n    this.selectAllIndeterminate = false;\n\n    if (this.selectAll) {\n      (this.items as MtxCheckboxGroupOption[])\n        .filter(option => option.checked || !option.disabled)\n        .forEach(option => (option.checked = true));\n    } else {\n      (this.items as MtxCheckboxGroupOption[])\n        .filter(option => option.checked || !option.disabled)\n        .forEach(option => (option.checked = !!option.disabled));\n    }\n\n    this._getSelectedItems(index);\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\n\nimport { MtxUtilsModule } from '@ng-matero/extensions/utils';\nimport { MtxCheckboxGroupComponent } from './checkbox-group.component';\n\n@NgModule({\n  imports: [CommonModule, FormsModule, MatCheckboxModule, MtxUtilsModule],\n  exports: [MtxCheckboxGroupComponent],\n  declarations: [MtxCheckboxGroupComponent],\n})\nexport class MtxCheckboxGroupModule {}\n"]}
+{"version":3,"sources":["../../../projects/extensions/checkbox-group/checkbox-group.component.ts","../../../projects/extensions/checkbox-group/checkbox-group.module.ts"],"names":["label","value","this","MtxCheckboxGroupComponent","_changeDetectorRef","_focusMonitor","_elementRef","_items","_originalItems","bindLabel","bindValue","_showSelectAll","selectAllLabel","_disabled","change","EventEmitter","selectAll","selectAllIndeterminate","selectedItems","_onChange","_onTouched","Object","defineProperty","prototype","JSON","parse","stringify","map","option","assign","MtxCheckboxBase","coerceBooleanProperty","_compareWith","fn","Error","markForCheck","ngAfterViewInit","_this","monitor","subscribe","focusOrigin","Promise","resolve","then","ngOnDestroy","stopMonitoring","_selectValue","correspondingOption","find","compareValue","error","console","warn","checked","writeValue","items","forEach","item","Array","isArray","currentValue","_checkMasterCheckboxState","registerOnChange","registerOnTouched","setDisabledState","isDisabled","disabled","filter","every","_getSelectedItems","index","selectedOption","emit","model","_updateNormalCheckboxState","e","_updateMasterCheckboxState","Component","args","selector","exportAs","host","class","template","encapsulation","ViewEncapsulation","None","changeDetection","ChangeDetectionStrategy","OnPush","providers","provide","NG_VALUE_ACCESSOR","useExisting","forwardRef","multi","ChangeDetectorRef","FocusMonitor","ElementRef","ContentChildren","MatCheckbox","descendants","Input","Output","NgModule","imports","CommonModule","FormsModule","MatCheckboxModule","MtxUtilsModule","exports","declarations"],"mappings":"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","sourcesContent":["import { FocusMonitor } from '@angular/cdk/a11y';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChildren,\n  ElementRef,\n  EventEmitter,\n  Input,\n  OnDestroy,\n  Output,\n  QueryList,\n  ViewEncapsulation,\n  forwardRef,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';\nimport { MtxCheckboxGroupOption } from './checkbox-group.interface';\n\nexport class MtxCheckboxBase {\n  constructor(public label?: any, public value?: any) {}\n}\n\n@Component({\n  selector: 'mtx-checkbox-group',\n  exportAs: 'mtxCheckboxGroup',\n  host: {\n    class: 'mtx-checkbox-group',\n  },\n  templateUrl: './checkbox-group.component.html',\n  styleUrls: ['./checkbox-group.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => MtxCheckboxGroupComponent),\n      multi: true,\n    },\n  ],\n})\nexport class MtxCheckboxGroupComponent implements AfterViewInit, OnDestroy, ControlValueAccessor {\n  @ContentChildren(forwardRef(() => MatCheckbox), { descendants: true })\n  _checkboxes: QueryList<MatCheckbox>;\n\n  @Input()\n  get items() {\n    return this._items;\n  }\n  set items(value: any[]) {\n    // store the original data with deep clone\n    this._originalItems = JSON.parse(JSON.stringify(value));\n    this._items = value.map(option => {\n      return option instanceof Object ? { ...option } : new MtxCheckboxBase(option, option);\n    });\n  }\n  private _items: any[] = [];\n  private _originalItems: any[] = [];\n\n  @Input() bindLabel = 'label';\n\n  @Input() bindValue = 'value';\n\n  @Input()\n  get showSelectAll(): boolean {\n    return this._showSelectAll;\n  }\n  set showSelectAll(value: boolean) {\n    this._showSelectAll = coerceBooleanProperty(value);\n  }\n  private _showSelectAll = false;\n\n  @Input() selectAllLabel = 'Select All';\n\n  @Input()\n  get compareWith() {\n    return this._compareWith;\n  }\n  set compareWith(fn: ((o1: any, o2: any) => boolean) | undefined) {\n    if (fn != null && typeof fn !== 'function') {\n      throw Error('`compareWith` must be a function.');\n    }\n\n    if (fn) {\n      this._compareWith = fn;\n    }\n  }\n  private _compareWith!: (o1: any, o2: any) => boolean;\n\n  @Input()\n  get disabled(): boolean {\n    return this._disabled;\n  }\n  set disabled(value: boolean) {\n    this._disabled = coerceBooleanProperty(value);\n    this._changeDetectorRef.markForCheck();\n  }\n  private _disabled = false;\n\n  @Output() change = new EventEmitter<{ model: MtxCheckboxGroupOption[]; index: number }>();\n\n  selectAll = false;\n  selectAllIndeterminate = false;\n\n  selectedItems: MtxCheckboxGroupOption[] = [];\n\n  _onChange: (value: MtxCheckboxGroupOption[]) => void = () => null;\n  _onTouched: () => void = () => null;\n\n  constructor(\n    private _changeDetectorRef: ChangeDetectorRef,\n    private _focusMonitor: FocusMonitor,\n    private _elementRef: ElementRef<HTMLElement>\n  ) {}\n\n  ngAfterViewInit() {\n    this._focusMonitor.monitor(this._elementRef, true).subscribe(focusOrigin => {\n      if (!focusOrigin) {\n        // When a focused element becomes disabled, the browser *immediately* fires a blur event.\n        // Angular does not expect events to be raised during change detection, so any state change\n        // (such as a form control's 'ng-touched') will cause a changed-after-checked error.\n        // See https://github.com/angular/angular/issues/17793. To work around this, we defer\n        // telling the form control it has been touched until the next tick.\n        Promise.resolve().then(() => {\n          this._onTouched();\n          this._changeDetectorRef.markForCheck();\n        });\n      }\n    });\n  }\n\n  ngOnDestroy() {\n    this._focusMonitor.stopMonitoring(this._elementRef);\n  }\n\n  /**\n   * Finds and selects and option based on its value.\n   * @returns Option that has the corresponding value.\n   */\n  private _selectValue(value: MtxCheckboxGroupOption) {\n    const correspondingOption = (this.items as MtxCheckboxGroupOption[]).find(option => {\n      try {\n        const compareValue = option[this.bindValue] === value;\n        return this._compareWith ? this._compareWith(option, value) : compareValue;\n      } catch (error) {\n        console.warn(error);\n        return false;\n      }\n    });\n\n    if (correspondingOption) {\n      correspondingOption.checked = true;\n    }\n\n    return correspondingOption;\n  }\n\n  /**\n   * Sets the model value. Implemented as part of ControlValueAccessor.\n   * @param value New value to be written to the model.\n   */\n  writeValue(value: any[]): void {\n    this.items.forEach(item => (item.checked = false));\n\n    if (value) {\n      if (!Array.isArray(value)) {\n        throw Error('Value must be an array.');\n      }\n\n      value.forEach(currentValue => this._selectValue(currentValue));\n      this.selectedItems = value;\n    }\n\n    this._checkMasterCheckboxState();\n    this._changeDetectorRef.markForCheck();\n  }\n\n  /**\n   * Registers a callback to be triggered when the model value changes.\n   * Implemented as part of ControlValueAccessor.\n   * @param fn Callback to be registered.\n   */\n  registerOnChange(fn: (value: MtxCheckboxGroupOption[]) => {}): void {\n    this._onChange = fn;\n  }\n\n  /**\n   * Registers a callback to be triggered when the control is touched.\n   * Implemented as part of ControlValueAccessor.\n   * @param fn Callback to be registered.\n   */\n  registerOnTouched(fn: () => {}): void {\n    this._onTouched = fn;\n  }\n\n  /**\n   * Sets the disabled state of the control. Implemented as a part of ControlValueAccessor.\n   * @param isDisabled Whether the control should be disabled.\n   */\n  setDisabledState(isDisabled: boolean) {\n    this.disabled = isDisabled;\n  }\n\n  private _checkMasterCheckboxState() {\n    if (\n      (this.items as MtxCheckboxGroupOption[])\n        .filter(option => option.checked || !option.disabled)\n        .every(option => !option.checked)\n    ) {\n      this.selectAll = false;\n      this.selectAllIndeterminate = false;\n    } else if (\n      (this.items as MtxCheckboxGroupOption[])\n        .filter(option => option.checked || !option.disabled)\n        .every(option => option.checked)\n    ) {\n      this.selectAll = true;\n      this.selectAllIndeterminate = false;\n    } else {\n      this.selectAllIndeterminate = true;\n    }\n  }\n\n  private _getSelectedItems(index: number) {\n    this.selectedItems = (this.items as MtxCheckboxGroupOption[]).filter(option => option.checked);\n\n    if (this._compareWith) {\n      this.selectedItems = (this._originalItems as MtxCheckboxGroupOption[]).filter(option =>\n        this.selectedItems.find(selectedOption => this._compareWith!(option, selectedOption))\n      );\n    } else {\n      this.selectedItems = this.selectedItems.map(option => option[this.bindValue]);\n    }\n\n    this._onChange(this.selectedItems);\n\n    this.change.emit({ model: this.selectedItems, index });\n  }\n\n  /** Handle normal checkbox toggle */\n  _updateNormalCheckboxState(e: MatCheckboxChange, index: number): void {\n    this._checkMasterCheckboxState();\n    this._getSelectedItems(index);\n  }\n\n  /** Handle master checkbox toggle */\n  _updateMasterCheckboxState(e: MatCheckboxChange, index: number): void {\n    this.selectAll = !this.selectAll;\n    this.selectAllIndeterminate = false;\n\n    if (this.selectAll) {\n      (this.items as MtxCheckboxGroupOption[])\n        .filter(option => option.checked || !option.disabled)\n        .forEach(option => (option.checked = true));\n    } else {\n      (this.items as MtxCheckboxGroupOption[])\n        .filter(option => option.checked || !option.disabled)\n        .forEach(option => (option.checked = !!option.disabled));\n    }\n\n    this._getSelectedItems(index);\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\n\nimport { MtxUtilsModule } from '@ng-matero/extensions/utils';\nimport { MtxCheckboxGroupComponent } from './checkbox-group.component';\n\n@NgModule({\n  imports: [CommonModule, FormsModule, MatCheckboxModule, MtxUtilsModule],\n  exports: [MtxCheckboxGroupComponent],\n  declarations: [MtxCheckboxGroupComponent],\n})\nexport class MtxCheckboxGroupModule {}\n"]}

package/bundles/mtxColorPicker.umd.js

@@ -42,6 +42,7 @@
             this._focused = false;
             this._required = false;
             this._disabled = false;
+            this._readonly = false;
             this.errorState = false;
             /**
              * A name for this control that can be used by `mat-form-field`.
@@ -228,6 +229,24 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(MtxColorPickerComponent.prototype, "readonly", {
+            /**
+             * Whether the element is readonly.
+             * @return {?}
+             */
+            get: function () {
+                return this._readonly;
+            },
+            /**
+             * @param {?} value
+             * @return {?}
+             */
+            set: function (value) {
+                this._readonly = coercion.coerceBooleanProperty(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
         /**
          * @return {?}
          */
@@ -382,9 +401,7 @@
                 // If we're in the Shadow DOM, the event target will be the shadow root, so we have to
                 // fall back to check the first element in the path of the click event.
                 /** @type {?} */
-                var clickTarget = ( /** @type {?} */((_this._isInsideShadowRoot && event.composedPath
-                    ? event.composedPath()[0]
-                    : event.target)));
+                var clickTarget = ( /** @type {?} */((_this._isInsideShadowRoot && event.composedPath ? event.composedPath()[0] : event.target)));
                 /** @type {?} */
                 var formField = _this._formField ? _this._formField._elementRef.nativeElement : null;
                 return (clickTarget !== _this._elementRef.nativeElement &&
@@ -397,7 +414,7 @@
         { type: core.Component, args: [{
                     selector: 'mtx-color-picker',
                     exportAs: 'mtxColorPicker',
-                    template: "<input matInput\n       [(ngModel)]=\"value\"\n       [placeholder]=\"placeholder\"\n       [disabled]=\"disabled\"\n       (focus)=\"_handleFocus()\"\n       autocomplete=\"off\">\n\n<div #colorPickerTrigger=\"matMenuTrigger\"\n     [matMenuTriggerFor]=\"colorPickerPopover\"\n     (menuOpened)=\"_openPanel()\"\n     (menuClosed)=\"_closePanel()\">\n</div>\n\n<mat-menu #colorPickerPopover=\"matMenu\" class=\"mtx-color-picker-panel\" [hasBackdrop]=\"false\">\n  <div class=\"mtx-color-picker\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n    <color-chrome [color]=\"value\" (onChangeComplete)=\"_onColorChanged($event)\"></color-chrome>\n  </div>\n</mat-menu>\n",
+                    template: "<input matInput\n       [(ngModel)]=\"value\"\n       [placeholder]=\"placeholder\"\n       [disabled]=\"disabled\"\n       [readonly]=\"readonly\"\n       (focus)=\"_handleFocus()\"\n       autocomplete=\"off\">\n\n<div #colorPickerTrigger=\"matMenuTrigger\"\n     [matMenuTriggerFor]=\"colorPickerPopover\"\n     (menuOpened)=\"_openPanel()\"\n     (menuClosed)=\"_closePanel()\">\n</div>\n\n<mat-menu #colorPickerPopover=\"matMenu\" class=\"mtx-color-picker-panel\" [hasBackdrop]=\"false\">\n  <div class=\"mtx-color-picker\"\n       (click)=\"$event.stopPropagation()\"\n       (keydown)=\"$event.stopPropagation()\">\n    <color-chrome [color]=\"value\" (onChangeComplete)=\"_onColorChanged($event)\"></color-chrome>\n  </div>\n</mat-menu>\n",
                     encapsulation: core.ViewEncapsulation.None,
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     providers: [{ provide: formField.MatFormFieldControl, useExisting: MtxColorPickerComponent }],
@@ -420,6 +437,7 @@
         placeholder: [{ type: core.Input }],
         required: [{ type: core.Input }],
         disabled: [{ type: core.Input }],
+        readonly: [{ type: core.Input }],
         colorChange: [{ type: core.Output }],
         trigger: [{ type: core.ViewChild, args: [menu.MatMenuTrigger, { static: true },] }]
     };
@@ -469,6 +487,11 @@
          * @private
          */
         MtxColorPickerComponent.prototype._disabled;
+        /**
+         * @type {?}
+         * @private
+         */
+        MtxColorPickerComponent.prototype._readonly;
         /** @type {?} */
         MtxColorPickerComponent.prototype.errorState;
         /**