@skyux/list-builder-view-checklist 5.0.0 → 5.5.0-beta.0

package/README.md

@@ -1,5 +1,7 @@
-# @skyux/list-builder-view-checklist
+# list-builder-view-checklist
 
-[![npm](https://img.shields.io/npm/v/@skyux/list-builder-view-checklist.svg)](https://www.npmjs.com/package/@skyux/list-builder-view-checklist)
-[![status](https://travis-ci.org/blackbaud/skyux-list-builder-view-checklist.svg?branch=master)](https://travis-ci.org/blackbaud/skyux-list-builder-view-checklist)
-[![coverage](https://codecov.io/gh/blackbaud/skyux-list-builder-view-checklist/branch/master/graphs/badge.svg?branch=master)](https://codecov.io/gh/blackbaud/skyux-list-builder-view-checklist/branch/master)
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test list-builder-view-checklist` to execute the unit tests.

package/bundles/skyux-list-builder-view-checklist-testing.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/platform-browser'), require('@skyux-sdk/testing')) :
     typeof define === 'function' && define.amd ? define('@skyux/list-builder-view-checklist/testing', ['exports', '@angular/platform-browser', '@skyux-sdk/testing'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux['list-builder-view-checklist'] = global.skyux['list-builder-view-checklist'] || {}, global.skyux['list-builder-view-checklist'].testing = {}), global.ng.platformBrowser, global.testing));
-}(this, (function (exports, platformBrowser, testing) { 'use strict';
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux["list-builder-view-checklist"] = global.skyux["list-builder-view-checklist"] || {}, global.skyux["list-builder-view-checklist"].testing = {}), global.ng.platformBrowser, global.testing));
+})(this, (function (exports, platformBrowser, testing) { 'use strict';
 
     var MULTI_SELECT_EL_SELECTOR = platformBrowser.By.css('.sky-checkbox-wrapper > input');
     var SINGLE_SELECT_EL_SELECTOR = platformBrowser.By.css('.sky-list-view-checklist-single-button');
@@ -23,7 +23,7 @@
             return {
                 label: testing.SkyAppTestUtility.getText(selectWrapperEl.query(platformBrowser.By.css('div.sky-emphasized'))),
                 description: testing.SkyAppTestUtility.getText(selectWrapperEl.query(platformBrowser.By.css('div:not(.sky-emphasized)'))),
-                selected: this.isChecked(selectEl)
+                selected: this.isChecked(selectEl),
             };
         };
         /**
@@ -94,5 +94,5 @@
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=skyux-list-builder-view-checklist-testing.umd.js.map

package/bundles/skyux-list-builder-view-checklist.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('@skyux/forms'), require('@skyux/list-builder'), require('@skyux/list-builder-common'), require('rxjs'), require('rxjs/operators')) :
     typeof define === 'function' && define.amd ? define('@skyux/list-builder-view-checklist', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@skyux/forms', '@skyux/list-builder', '@skyux/list-builder-common', 'rxjs', 'rxjs/operators'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux['list-builder-view-checklist'] = {}), global.ng.core, global.ng.common, global.ng.forms, global.i5, global.i1, global.listBuilderCommon, global.rxjs, global.rxjs.operators));
-}(this, (function (exports, i0, i6, forms, i5, i1, listBuilderCommon, rxjs, operators) { 'use strict';
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux["list-builder-view-checklist"] = {}), global.ng.core, global.ng.common, global.ng.forms, global.i5, global.i1, global.listBuilderCommon, global.rxjs, global.rxjs.operators));
+})(this, (function (exports, i0, i6, forms, i5, i1, listBuilderCommon, rxjs, operators) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -13,14 +13,12 @@
                     var d = Object.getOwnPropertyDescriptor(e, k);
                     Object.defineProperty(n, k, d.get ? d : {
                         enumerable: true,
-                        get: function () {
-                            return e[k];
-                        }
+                        get: function () { return e[k]; }
                     });
                 }
             });
         }
-        n['default'] = e;
+        n["default"] = e;
         return Object.freeze(n);
     }
 
@@ -264,7 +262,7 @@
                     ar[i] = from[i];
                 }
             }
-        return to.concat(ar || from);
+        return to.concat(ar || Array.prototype.slice.call(from));
     }
     function __await(v) {
         return this instanceof __await ? (this.v = v, this) : new __await(v);
@@ -354,9 +352,9 @@
         }
         return ChecklistStateDispatcher;
     }(listBuilderCommon.StateDispatcher));
-    ChecklistStateDispatcher.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: ChecklistStateDispatcher, deps: null, target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    ChecklistStateDispatcher.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: ChecklistStateDispatcher });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: ChecklistStateDispatcher, decorators: [{
+    ChecklistStateDispatcher.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ChecklistStateDispatcher, deps: null, target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ChecklistStateDispatcher.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ChecklistStateDispatcher });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ChecklistStateDispatcher, decorators: [{
                 type: i0.Injectable
             }] });
     var ChecklistStateOrchestrator = /** @class */ (function (_super) {
@@ -421,15 +419,14 @@
         __extends(ChecklistState, _super);
         function ChecklistState(initialState, dispatcher) {
             var _this = _super.call(this, initialState, dispatcher) || this;
-            _this.register('items', ListViewChecklistItemsOrchestrator)
-                .begin();
+            _this.register('items', ListViewChecklistItemsOrchestrator).begin();
             return _this;
         }
         return ChecklistState;
     }(listBuilderCommon.StateNode));
-    ChecklistState.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: ChecklistState, deps: [{ token: ChecklistStateModel }, { token: ChecklistStateDispatcher }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    ChecklistState.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: ChecklistState });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: ChecklistState, decorators: [{
+    ChecklistState.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ChecklistState, deps: [{ token: ChecklistStateModel }, { token: ChecklistStateDispatcher }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ChecklistState.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ChecklistState });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ChecklistState, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: ChecklistStateModel }, { type: ChecklistStateDispatcher }]; } });
 
@@ -438,15 +435,15 @@
         }
         return SkyListViewChecklistItemComponent;
     }());
-    SkyListViewChecklistItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListViewChecklistItemComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyListViewChecklistItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.8", type: SkyListViewChecklistItemComponent, selector: "sky-list-view-checklist-item", inputs: { item: "item" }, ngImport: i0__namespace, template: "<div class=\"sky-list-view-checklist-item\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-list-view-checklist-item{display:block;width:100%;cursor:pointer;word-wrap:break-word}.sky-list-view-checklist-item:last-child{border-bottom-width:0}.sky-list-view-checklist-item ::ng-deep sky-checkbox{display:block;position:relative;width:100%;padding:10px;cursor:pointer;border-bottom:1px dotted #cdcfd2}.sky-list-view-checklist-item ::ng-deep sky-checkbox-label div{overflow:hidden;text-overflow:ellipsis}.sky-list-view-checklist-item ::ng-deep .sky-list-view-checklist-single-button{background-color:transparent;border:none;border-bottom:1px dotted #cdcfd2;display:block;text-align:left;margin-bottom:0;padding:10px;width:100%;cursor:pointer}.sky-list-view-checklist-item ::ng-deep .sky-list-view-checklist-single-button.sky-list-view-checklist-row-selected{background-color:#f1eef6}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListViewChecklistItemComponent, decorators: [{
+    SkyListViewChecklistItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListViewChecklistItemComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyListViewChecklistItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyListViewChecklistItemComponent, selector: "sky-list-view-checklist-item", inputs: { item: "item" }, ngImport: i0__namespace, template: "<div class=\"sky-list-view-checklist-item\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-list-view-checklist-item{display:block;width:100%;cursor:pointer;word-wrap:break-word}.sky-list-view-checklist-item:last-child{border-bottom-width:0}.sky-list-view-checklist-item ::ng-deep sky-checkbox{display:block;position:relative;width:100%;padding:10px;cursor:pointer;border-bottom:1px dotted #cdcfd2}.sky-list-view-checklist-item ::ng-deep sky-checkbox-label div{overflow:hidden;text-overflow:ellipsis}.sky-list-view-checklist-item ::ng-deep .sky-list-view-checklist-single-button{background-color:transparent;border:none;border-bottom:1px dotted #cdcfd2;display:block;text-align:left;margin-bottom:0;padding:10px;width:100%;cursor:pointer}.sky-list-view-checklist-item ::ng-deep .sky-list-view-checklist-single-button.sky-list-view-checklist-row-selected{background-color:#f1eef6}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListViewChecklistItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-list-view-checklist-item',
-                        templateUrl: './list-view-checklist-item.component.html',
-                        styleUrls: ['./list-view-checklist-item.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                        template: "<div class=\"sky-list-view-checklist-item\">\n  <ng-content></ng-content>\n</div>\n",
+                        styles: [".sky-list-view-checklist-item{display:block;width:100%;cursor:pointer;word-wrap:break-word}.sky-list-view-checklist-item:last-child{border-bottom-width:0}.sky-list-view-checklist-item ::ng-deep sky-checkbox{display:block;position:relative;width:100%;padding:10px;cursor:pointer;border-bottom:1px dotted #cdcfd2}.sky-list-view-checklist-item ::ng-deep sky-checkbox-label div{overflow:hidden;text-overflow:ellipsis}.sky-list-view-checklist-item ::ng-deep .sky-list-view-checklist-single-button{background-color:transparent;border:none;border-bottom:1px dotted #cdcfd2;display:block;text-align:left;margin-bottom:0;padding:10px;width:100%;cursor:pointer}.sky-list-view-checklist-item ::ng-deep .sky-list-view-checklist-single-button.sky-list-view-checklist-row-selected{background-color:#f1eef6}\n"],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
             }], propDecorators: { item: [{
                     type: i0.Input
@@ -468,13 +465,13 @@
             _this.search = _this.searchFunction();
             /**
              * Specifies the name of the label field selector.
-             * @default 'label'
+             * @default "label"
              */
             // eslint-disable-next-line @angular-eslint/no-input-rename
             _this.labelFieldSelector = 'label';
             /**
              * Specifies the name of the description field selector.
-             * @default 'description'
+             * @default "description"
              */
             _this.description = 'description';
             _this.ngUnsubscribe = new rxjs.Subject();
@@ -488,8 +485,12 @@
                 lastUpdate = items.lastUpdate;
                 var newItems = items.items.map(function (item) {
                     return new ListViewChecklistItemModel(item.id, {
-                        label: _this.labelFieldSelector ? listBuilderCommon.getData(item.data, _this.labelFieldSelector) : undefined,
-                        description: _this.description ? listBuilderCommon.getData(item.data, _this.description) : undefined
+                        label: _this.labelFieldSelector
+                            ? listBuilderCommon.getData(item.data, _this.labelFieldSelector)
+                            : undefined,
+                        description: _this.description
+                            ? listBuilderCommon.getData(item.data, _this.description)
+                            : undefined,
                     });
                 });
                 _this.checklistDispatcher.next(new ListViewChecklistItemsLoadAction(newItems, true, dataChanged, items.count));
@@ -520,9 +521,9 @@
             },
             /**
              * Specifies how many items users can select.
-             * `single` allows users to select one item in the checklist, while `multiple`
+             * `"single"` allows users to select one item in the checklist, while `"multiple"`
              * allows users to select multiple items in the checklist.
-             * @default 'multiple'
+             * @default "multiple"
              */
             set: function (value) {
                 this._selectMode = value;
@@ -564,13 +565,14 @@
                 .subscribe(function (filters) {
                 var showSelectedFilter = filters.find(function (filter) { return filter.name === 'show-selected'; });
                 if (showSelectedFilter) {
-                    _this._showOnlySelected = (showSelectedFilter.value === 'true');
+                    _this._showOnlySelected = showSelectedFilter.value === 'true';
                 }
             });
         };
         SkyListViewChecklistComponent.prototype.ngOnChanges = function (changes) {
             if (changes['showOnlySelected'] &&
-                changes['showOnlySelected'].currentValue !== changes['showOnlySelected'].previousValue) {
+                changes['showOnlySelected'].currentValue !==
+                    changes['showOnlySelected'].previousValue) {
                 this.reapplyFilter(changes['showOnlySelected'].currentValue);
             }
         };
@@ -592,8 +594,7 @@
             this.state
                 .pipe(operators.map(function (state) { return state.items.items; }), operators.take(1))
                 .subscribe(function (items) {
-                _this.dispatcher
-                    .next(new i1.ListSelectedSetItemsSelectedAction(items.map(function (item) { return item.id; }), false, false));
+                _this.dispatcher.next(new i1.ListSelectedSetItemsSelectedAction(items.map(function (item) { return item.id; }), false, false));
                 /* istanbul ignore else */
                 if (_this.showOnlySelected) {
                     _this.reapplyFilter(_this.showOnlySelected);
@@ -610,8 +611,7 @@
             this.state
                 .pipe(operators.map(function (state) { return state.items.items; }), operators.take(1))
                 .subscribe(function (items) {
-                _this.dispatcher
-                    .next(new i1.ListSelectedSetItemsSelectedAction(items.map(function (item) { return item.id; }), true, false));
+                _this.dispatcher.next(new i1.ListSelectedSetItemsSelectedAction(items.map(function (item) { return item.id; }), true, false));
                 /* istanbul ignore else */
                 if (_this.showOnlySelected) {
                     _this.reapplyFilter(_this.showOnlySelected);
@@ -685,7 +685,7 @@
                         return _this._selectedIdMap.get(model.id);
                     }
                 },
-                defaultValue: false.toString()
+                defaultValue: false.toString(),
             });
         };
         SkyListViewChecklistComponent.prototype.reapplyFilter = function (isSelected) {
@@ -709,26 +709,32 @@
         };
         return SkyListViewChecklistComponent;
     }(i1.ListViewComponent));
-    SkyListViewChecklistComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListViewChecklistComponent, deps: [{ token: i1__namespace.ListState }, { token: i1__namespace.ListStateDispatcher }, { token: ChecklistState }, { token: ChecklistStateDispatcher }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyListViewChecklistComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.8", type: SkyListViewChecklistComponent, selector: "sky-list-view-checklist", inputs: { name: "name", search: "search", labelFieldSelector: ["label", "labelFieldSelector"], description: "description", selectMode: "selectMode", showOnlySelected: "showOnlySelected" }, providers: [
-            { provide: i1.ListViewComponent, useExisting: i0.forwardRef(function () { return SkyListViewChecklistComponent; }) },
+    SkyListViewChecklistComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListViewChecklistComponent, deps: [{ token: i1__namespace.ListState }, { token: i1__namespace.ListStateDispatcher }, { token: ChecklistState }, { token: ChecklistStateDispatcher }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyListViewChecklistComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyListViewChecklistComponent, selector: "sky-list-view-checklist", inputs: { name: "name", search: "search", labelFieldSelector: ["label", "labelFieldSelector"], description: "description", selectMode: "selectMode", showOnlySelected: "showOnlySelected" }, providers: [
+            {
+                provide: i1.ListViewComponent,
+                useExisting: i0.forwardRef(function () { return SkyListViewChecklistComponent; }),
+            },
             ChecklistState,
             ChecklistStateDispatcher,
-            ChecklistStateModel
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"sky-list-view-checklist\" *ngIf=\"active | async\">\n  <div [ngSwitch]=\"selectMode\">\n    <ng-template ngSwitchCase=\"single\">\n      <div role=\"radiogroup\">\n        <sky-list-view-checklist-item *ngFor=\"let item of items | async\"\n          [attr.sky-cmp-id]=\"item.id\"\n          [item]=\"item\"\n        >\n          <button\n            role=\"radio\"\n            type=\"button\"\n            class=\"sky-list-view-checklist-single-button\"\n            [attr.aria-checked]=\"(itemSelected(item.id) | async) || false\"\n            [ngClass]=\"{ 'sky-list-view-checklist-row-selected' : (itemSelected(item.id) | async) }\"\n            (click)=\"singleSelectRowClick(item)\"\n          >\n            <div *ngIf=\"item.label\"\n              class=\"sky-emphasized\"\n            >\n              {{item.label}}\n            </div>\n            <div *ngIf=\"item.description\">{{item.description}}</div>\n          </button>\n        </sky-list-view-checklist-item>\n      </div>\n    </ng-template>\n\n    <ng-template ngSwitchDefault>\n      <sky-list-view-checklist-item *ngFor=\"let item of items | async\"\n        [attr.sky-cmp-id]=\"item.id\"\n        [item]=\"item\">\n          <sky-checkbox\n            [checked]=\"itemSelected(item.id) | async\"\n            (change)=\"setItemSelection(item, $event)\">\n          <sky-checkbox-label>\n            <div *ngIf=\"item.label\"\n              class=\"sky-emphasized\"\n              [attr.title]=\"item.label\"\n            >\n              {{item.label}}\n            </div>\n            <div *ngIf=\"item.description\"\n              [attr.title]=\"item.description\"\n            >\n              {{item.description}}\n            </div>\n          </sky-checkbox-label>\n        </sky-checkbox>\n      </sky-list-view-checklist-item>\n    </ng-template>\n  </div>\n</div>\n", styles: [".sky-list-view-checklist ::ng-deep .sky-checkbox-wrapper{display:flex;align-items:flex-start}.sky-list-view-checklist ::ng-deep .sky-checkbox-wrapper>.sky-checkbox,.sky-list-view-checklist ::ng-deep .sky-checkbox-wrapper>input{flex:1;max-width:22px}.sky-list-view-checklist ::ng-deep .sky-switch{white-space:nowrap}.sky-list-view-checklist ::ng-deep .sky-switch-label{margin:0}.sky-list-view-checklist ::ng-deep sky-checkbox-label{min-width:0}.sky-list-view-checklist ::ng-deep .sky-switch-control{margin:0 5px 0 0}\n"], components: [{ type: SkyListViewChecklistItemComponent, selector: "sky-list-view-checklist-item", inputs: ["item"] }, { type: i5__namespace.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i5__namespace.λ4, selector: "sky-checkbox-label" }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "async": i6__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListViewChecklistComponent, decorators: [{
+            ChecklistStateModel,
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"sky-list-view-checklist\" *ngIf=\"active | async\">\n  <div [ngSwitch]=\"selectMode\">\n    <ng-template ngSwitchCase=\"single\">\n      <div role=\"radiogroup\">\n        <sky-list-view-checklist-item\n          *ngFor=\"let item of items | async\"\n          [attr.sky-cmp-id]=\"item.id\"\n          [item]=\"item\"\n        >\n          <button\n            role=\"radio\"\n            type=\"button\"\n            class=\"sky-list-view-checklist-single-button\"\n            [attr.aria-checked]=\"(itemSelected(item.id) | async) || false\"\n            [ngClass]=\"{\n              'sky-list-view-checklist-row-selected':\n                (itemSelected(item.id) | async)\n            }\"\n            (click)=\"singleSelectRowClick(item)\"\n          >\n            <div *ngIf=\"item.label\" class=\"sky-emphasized\">\n              {{ item.label }}\n            </div>\n            <div *ngIf=\"item.description\">{{ item.description }}</div>\n          </button>\n        </sky-list-view-checklist-item>\n      </div>\n    </ng-template>\n\n    <ng-template ngSwitchDefault>\n      <sky-list-view-checklist-item\n        *ngFor=\"let item of items | async\"\n        [attr.sky-cmp-id]=\"item.id\"\n        [item]=\"item\"\n      >\n        <sky-checkbox\n          [checked]=\"itemSelected(item.id) | async\"\n          (change)=\"setItemSelection(item, $event)\"\n        >\n          <sky-checkbox-label>\n            <div\n              *ngIf=\"item.label\"\n              class=\"sky-emphasized\"\n              [attr.title]=\"item.label\"\n            >\n              {{ item.label }}\n            </div>\n            <div *ngIf=\"item.description\" [attr.title]=\"item.description\">\n              {{ item.description }}\n            </div>\n          </sky-checkbox-label>\n        </sky-checkbox>\n      </sky-list-view-checklist-item>\n    </ng-template>\n  </div>\n</div>\n", styles: [".sky-list-view-checklist ::ng-deep .sky-checkbox-wrapper{display:flex;align-items:flex-start}.sky-list-view-checklist ::ng-deep .sky-checkbox-wrapper>.sky-checkbox,.sky-list-view-checklist ::ng-deep .sky-checkbox-wrapper>input{flex:1;max-width:22px}.sky-list-view-checklist ::ng-deep .sky-switch{white-space:nowrap}.sky-list-view-checklist ::ng-deep .sky-switch-label{margin:0}.sky-list-view-checklist ::ng-deep sky-checkbox-label{min-width:0}.sky-list-view-checklist ::ng-deep .sky-switch-control{margin:0 5px 0 0}\n"], components: [{ type: SkyListViewChecklistItemComponent, selector: "sky-list-view-checklist-item", inputs: ["item"] }, { type: i5__namespace.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i5__namespace.λ4, selector: "sky-checkbox-label" }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "async": i6__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListViewChecklistComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-list-view-checklist',
-                        templateUrl: './list-view-checklist.component.html',
-                        styleUrls: ['./list-view-checklist.component.scss'],
+                        template: "<div class=\"sky-list-view-checklist\" *ngIf=\"active | async\">\n  <div [ngSwitch]=\"selectMode\">\n    <ng-template ngSwitchCase=\"single\">\n      <div role=\"radiogroup\">\n        <sky-list-view-checklist-item\n          *ngFor=\"let item of items | async\"\n          [attr.sky-cmp-id]=\"item.id\"\n          [item]=\"item\"\n        >\n          <button\n            role=\"radio\"\n            type=\"button\"\n            class=\"sky-list-view-checklist-single-button\"\n            [attr.aria-checked]=\"(itemSelected(item.id) | async) || false\"\n            [ngClass]=\"{\n              'sky-list-view-checklist-row-selected':\n                (itemSelected(item.id) | async)\n            }\"\n            (click)=\"singleSelectRowClick(item)\"\n          >\n            <div *ngIf=\"item.label\" class=\"sky-emphasized\">\n              {{ item.label }}\n            </div>\n            <div *ngIf=\"item.description\">{{ item.description }}</div>\n          </button>\n        </sky-list-view-checklist-item>\n      </div>\n    </ng-template>\n\n    <ng-template ngSwitchDefault>\n      <sky-list-view-checklist-item\n        *ngFor=\"let item of items | async\"\n        [attr.sky-cmp-id]=\"item.id\"\n        [item]=\"item\"\n      >\n        <sky-checkbox\n          [checked]=\"itemSelected(item.id) | async\"\n          (change)=\"setItemSelection(item, $event)\"\n        >\n          <sky-checkbox-label>\n            <div\n              *ngIf=\"item.label\"\n              class=\"sky-emphasized\"\n              [attr.title]=\"item.label\"\n            >\n              {{ item.label }}\n            </div>\n            <div *ngIf=\"item.description\" [attr.title]=\"item.description\">\n              {{ item.description }}\n            </div>\n          </sky-checkbox-label>\n        </sky-checkbox>\n      </sky-list-view-checklist-item>\n    </ng-template>\n  </div>\n</div>\n",
+                        styles: [".sky-list-view-checklist ::ng-deep .sky-checkbox-wrapper{display:flex;align-items:flex-start}.sky-list-view-checklist ::ng-deep .sky-checkbox-wrapper>.sky-checkbox,.sky-list-view-checklist ::ng-deep .sky-checkbox-wrapper>input{flex:1;max-width:22px}.sky-list-view-checklist ::ng-deep .sky-switch{white-space:nowrap}.sky-list-view-checklist ::ng-deep .sky-switch-label{margin:0}.sky-list-view-checklist ::ng-deep sky-checkbox-label{min-width:0}.sky-list-view-checklist ::ng-deep .sky-switch-control{margin:0 5px 0 0}\n"],
                         providers: [
-                            { provide: i1.ListViewComponent, useExisting: i0.forwardRef(function () { return SkyListViewChecklistComponent; }) },
+                            {
+                                provide: i1.ListViewComponent,
+                                useExisting: i0.forwardRef(function () { return SkyListViewChecklistComponent; }),
+                            },
                             ChecklistState,
                             ChecklistStateDispatcher,
-                            ChecklistStateModel
+                            ChecklistStateModel,
                         ],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
             }], ctorParameters: function () { return [{ type: i1__namespace.ListState }, { type: i1__namespace.ListStateDispatcher }, { type: ChecklistState }, { type: ChecklistStateDispatcher }]; }, propDecorators: { name: [{
                     type: i0.Input
@@ -750,33 +756,19 @@
         }
         return SkyListViewChecklistModule;
     }());
-    SkyListViewChecklistModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListViewChecklistModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyListViewChecklistModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListViewChecklistModule, declarations: [SkyListViewChecklistComponent,
-            SkyListViewChecklistItemComponent], imports: [i6.CommonModule,
-            forms.FormsModule,
-            i5.SkyCheckboxModule], exports: [SkyListViewChecklistComponent,
-            SkyListViewChecklistItemComponent] });
-    SkyListViewChecklistModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListViewChecklistModule, imports: [[
-                i6.CommonModule,
-                forms.FormsModule,
-                i5.SkyCheckboxModule
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListViewChecklistModule, decorators: [{
+    SkyListViewChecklistModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListViewChecklistModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyListViewChecklistModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListViewChecklistModule, declarations: [SkyListViewChecklistComponent,
+            SkyListViewChecklistItemComponent], imports: [i6.CommonModule, forms.FormsModule, i5.SkyCheckboxModule], exports: [SkyListViewChecklistComponent, SkyListViewChecklistItemComponent] });
+    SkyListViewChecklistModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListViewChecklistModule, imports: [[i6.CommonModule, forms.FormsModule, i5.SkyCheckboxModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListViewChecklistModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [
                             SkyListViewChecklistComponent,
-                            SkyListViewChecklistItemComponent
-                        ],
-                        imports: [
-                            i6.CommonModule,
-                            forms.FormsModule,
-                            i5.SkyCheckboxModule
+                            SkyListViewChecklistItemComponent,
                         ],
-                        exports: [
-                            SkyListViewChecklistComponent,
-                            SkyListViewChecklistItemComponent
-                        ]
+                        imports: [i6.CommonModule, forms.FormsModule, i5.SkyCheckboxModule],
+                        exports: [SkyListViewChecklistComponent, SkyListViewChecklistItemComponent],
                     }]
             }] });
 
@@ -793,9 +785,9 @@
     exports.ListViewChecklistItemsOrchestrator = ListViewChecklistItemsOrchestrator;
     exports.SkyListViewChecklistComponent = SkyListViewChecklistComponent;
     exports.SkyListViewChecklistModule = SkyListViewChecklistModule;
-    exports.λ1 = SkyListViewChecklistItemComponent;
+    exports["λ1"] = SkyListViewChecklistItemComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=skyux-list-builder-view-checklist.umd.js.map