@skyux/data-manager 5.0.3 → 5.5.0

package/esm2015/lib/modules/data-manager/data-manager-toolbar/data-manager-toolbar.component.js

@@ -0,0 +1,185 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { SkyModalService } from '@skyux/modals';
+import { SkyDataManagerService } from '../data-manager.service';
+import { SkyDataManagerColumnPickerContext } from '../data-manager-column-picker/data-manager-column-picker-context';
+import { SkyDataManagerColumnPickerService } from '../data-manager-column-picker/data-manager-column-picker.service';
+import { SkyDataManagerFilterModalContext } from '../data-manager-filter-context';
+import * as i0 from "@angular/core";
+import * as i1 from "../data-manager.service";
+import * as i2 from "@skyux/modals";
+import * as i3 from "../data-manager-column-picker/data-manager-column-picker.service";
+import * as i4 from "@skyux/layout";
+import * as i5 from "@skyux/lists";
+import * as i6 from "@skyux/indicators";
+import * as i7 from "@skyux/lookup";
+import * as i8 from "@skyux/forms";
+import * as i9 from "@angular/common";
+import * as i10 from "@angular/forms";
+import * as i11 from "@skyux/i18n";
+/**
+ * Renders a `sky-toolbar` with the contents specified by the active view's `SkyDataViewConfig`
+ * and the `SkyDataManagerToolbarLeftItemsComponent`, `SkyDataManagerToolbarRightItemsComponent`,
+ * and `SkyDataManagerToolbarSectionComponent` wrappers.
+ */
+export class SkyDataManagerToolbarComponent {
+    constructor(changeDetector, dataManagerService, modalService, columnPickerService) {
+        this.changeDetector = changeDetector;
+        this.dataManagerService = dataManagerService;
+        this.modalService = modalService;
+        this.columnPickerService = columnPickerService;
+        // the source to provide for data state changes
+        this._source = 'toolbar';
+        this._ngUnsubscribe = new Subject();
+        this._views = [];
+    }
+    get activeSortOptionId() {
+        const activeSortOption = this.dataState && this.dataState.activeSortOption;
+        return activeSortOption && activeSortOption.id;
+    }
+    get activeView() {
+        return this._activeView;
+    }
+    set activeView(value) {
+        this._activeView = value;
+        this.changeDetector.markForCheck();
+    }
+    get dataManagerConfig() {
+        return this._dataManagerConfig;
+    }
+    set dataManagerConfig(value) {
+        this._dataManagerConfig = value;
+        this.changeDetector.markForCheck();
+    }
+    get dataState() {
+        return this._dataState;
+    }
+    set dataState(value) {
+        this._dataState = value;
+        this.dataManagerService.updateDataState(value, this._source);
+    }
+    get views() {
+        return this._views;
+    }
+    set views(value) {
+        this._views = value;
+        this.changeDetector.markForCheck();
+    }
+    ngOnInit() {
+        this.dataManagerService
+            .getActiveViewIdUpdates()
+            .pipe(takeUntil(this._ngUnsubscribe))
+            .subscribe((activeViewId) => {
+            /* istanbul ignore else */
+            if (activeViewId) {
+                this.activeView = this.dataManagerService.getViewById(activeViewId);
+                this.changeDetector.markForCheck();
+            }
+        });
+        this.dataManagerService
+            .getDataViewsUpdates()
+            .pipe(takeUntil(this._ngUnsubscribe))
+            .subscribe((views) => {
+            this.views = views;
+        });
+        this.dataManagerService
+            .getDataStateUpdates(this._source)
+            .pipe(takeUntil(this._ngUnsubscribe))
+            .subscribe((dataState) => {
+            this._dataState = dataState;
+            this.onlyShowSelected = dataState.onlyShowSelected;
+            this.changeDetector.markForCheck();
+        });
+        this.dataManagerService
+            .getDataManagerConfigUpdates()
+            .pipe(takeUntil(this._ngUnsubscribe))
+            .subscribe((config) => {
+            this.dataManagerConfig = config;
+        });
+    }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
+    sortSelected(sortOption) {
+        this.dataState.activeSortOption = sortOption;
+        this.dataManagerService.updateDataState(this.dataState, this._source);
+    }
+    onViewChange(viewId) {
+        this.dataManagerService.updateActiveViewId(viewId);
+    }
+    searchApplied(text) {
+        this.dataState.searchText = text;
+        this.dataManagerService.updateDataState(this.dataState, this._source);
+    }
+    filterButtonClicked() {
+        const context = new SkyDataManagerFilterModalContext();
+        const filterModal = this.dataManagerConfig && this.dataManagerConfig.filterModalComponent;
+        context.filterData = this.dataState && this.dataState.filterData;
+        const options = {
+            providers: [
+                { provide: SkyDataManagerFilterModalContext, useValue: context },
+            ],
+        };
+        if (filterModal) {
+            const modalInstance = this.modalService.open(filterModal, options);
+            modalInstance.closed.subscribe((result) => {
+                if (result.reason === 'save') {
+                    this.dataState.filterData = result.data;
+                    this.dataManagerService.updateDataState(this.dataState, this._source);
+                }
+            });
+        }
+    }
+    openColumnPicker() {
+        const columnOptions = this.activeView && this.activeView.columnOptions;
+        const viewState = this.dataState.getViewStateById(this.activeView.id);
+        const context = new SkyDataManagerColumnPickerContext(columnOptions, viewState.displayedColumnIds);
+        if (this.activeView.columnPickerSortStrategy) {
+            context.columnPickerSortStrategy =
+                this.activeView.columnPickerSortStrategy;
+        }
+        const options = {
+            providers: [
+                { provide: SkyDataManagerColumnPickerContext, useValue: context },
+            ],
+        };
+        const modalInstance = this.modalService.open(this.columnPickerService.getComponentType(), options);
+        modalInstance.closed.subscribe((result) => {
+            if (result.reason === 'save') {
+                const displayedColumnIds = result.data.map((col) => col.id);
+                viewState.displayedColumnIds = displayedColumnIds;
+                this.dataState = this.dataState.addOrUpdateView(this.activeView.id, viewState);
+            }
+        });
+    }
+    selectAll() {
+        /* istanbul ignore else */
+        if (this.activeView.onSelectAllClick) {
+            this.activeView.onSelectAllClick();
+        }
+    }
+    clearAll() {
+        /* istanbul ignore else */
+        if (this.activeView.onClearAllClick) {
+            this.activeView.onClearAllClick();
+        }
+    }
+    onOnlyShowSelected(event) {
+        this.dataState.onlyShowSelected = event.checked;
+        this.dataManagerService.updateDataState(this.dataState, this._source);
+    }
+}
+SkyDataManagerToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDataManagerToolbarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SkyDataManagerService }, { token: i2.SkyModalService }, { token: i3.SkyDataManagerColumnPickerService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDataManagerToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyDataManagerToolbarComponent, selector: "sky-data-manager-toolbar", ngImport: i0, template: "<div class=\"sky-data-manager-toolbar\">\n  <sky-toolbar>\n    <sky-toolbar-section>\n      <ng-content select=\"sky-data-manager-toolbar-primary-item\"></ng-content>\n\n      <sky-toolbar-item *ngIf=\"activeView?.filterButtonEnabled\">\n        <sky-filter-button\n          [showButtonText]=\"activeView?.showFilterButtonText\"\n          (filterButtonClick)=\"filterButtonClicked()\"\n        >\n        </sky-filter-button>\n      </sky-toolbar-item>\n\n      <sky-toolbar-item *ngIf=\"activeView?.sortEnabled\">\n        <sky-sort [showButtonText]=\"activeView?.showSortButtonText\">\n          <sky-sort-item\n            *ngFor=\"let item of dataManagerConfig?.sortOptions\"\n            [active]=\"activeSortOptionId && activeSortOptionId === item.id\"\n            (itemSelect)=\"sortSelected(item)\"\n          >\n            {{ item.label }}\n          </sky-sort-item>\n        </sky-sort>\n      </sky-toolbar-item>\n\n      <sky-toolbar-item *ngIf=\"activeView?.columnPickerEnabled\">\n        <button\n          class=\"sky-btn sky-btn-default sky-col-picker-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"\n            'skyux_data_manager_columns_button_title' | skyLibResources\n          \"\n          [attr.title]=\"\n            'skyux_data_manager_columns_button_title' | skyLibResources\n          \"\n          (click)=\"openColumnPicker()\"\n        >\n          <sky-icon icon=\"columns\"></sky-icon>\n          <span class=\"sky-column-selector-action-btn-text\">\n            {{ 'skyux_data_manager_columns_button_title' | skyLibResources }}\n          </span>\n        </button>\n      </sky-toolbar-item>\n\n      <ng-content select=\"sky-data-manager-toolbar-left-item\"></ng-content>\n\n      <sky-toolbar-item *ngIf=\"activeView?.searchEnabled\">\n        <sky-search\n          [expandMode]=\"activeView?.searchExpandMode\"\n          [placeholderText]=\"activeView?.searchPlaceholderText\"\n          [searchText]=\"dataState?.searchText\"\n          (searchApply)=\"searchApplied($event)\"\n        >\n        </sky-search>\n      </sky-toolbar-item>\n\n      <sky-toolbar-view-actions>\n        <ng-content select=\"sky-data-manager-toolbar-right-item\"></ng-content>\n        <sky-radio-group\n          *ngIf=\"activeView && views && views.length > 1\"\n          [ariaLabel]=\"'data view switcher'\"\n          class=\"sky-switch-icon-group\"\n        >\n          <sky-radio\n            *ngFor=\"let view of views\"\n            [attr.name]=\"view.name\"\n            [attr.aria-label]=\"view.name\"\n            [icon]=\"view.icon\"\n            [value]=\"view.id\"\n            [label]=\"view.name\"\n            [(ngModel)]=\"activeView.id\"\n            (change)=\"onViewChange(view.id)\"\n          >\n          </sky-radio>\n        </sky-radio-group>\n      </sky-toolbar-view-actions>\n    </sky-toolbar-section>\n    <ng-content select=\"sky-data-manager-toolbar-section\"></ng-content>\n  </sky-toolbar>\n\n  <sky-toolbar\n    *ngIf=\"activeView?.multiselectToolbarEnabled\"\n    class=\"sky-data-manager-multiselect-toolbar\"\n  >\n    <sky-toolbar-section>\n      <sky-toolbar-item>\n        <button\n          class=\"sky-btn sky-btn-link sky-data-manager-select-all-btn\"\n          type=\"button\"\n          (click)=\"selectAll()\"\n        >\n          {{ 'skyux_data_manager_select_all_button_title' | skyLibResources }}\n        </button>\n      </sky-toolbar-item>\n      <sky-toolbar-item>\n        <button\n          class=\"sky-btn sky-btn-link sky-data-manager-clear-all-btn\"\n          type=\"button\"\n          (click)=\"clearAll()\"\n        >\n          {{ 'skyux_data_manager_clear_all_button_title' | skyLibResources }}\n        </button>\n      </sky-toolbar-item>\n      <sky-toolbar-view-actions>\n        <sky-checkbox\n          [checked]=\"onlyShowSelected\"\n          (change)=\"onOnlyShowSelected($event)\"\n        >\n          <sky-checkbox-label>\n            {{\n              'skyux_data_manager_show_selected_option_title' | skyLibResources\n            }}\n          </sky-checkbox-label>\n        </sky-checkbox>\n      </sky-toolbar-view-actions>\n    </sky-toolbar-section>\n  </sky-toolbar>\n</div>\n", styles: [":host .sky-col-picker-btn .sky-column-selector-action-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-col-picker-btn .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-sm) .sky-col-picker-btn .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-md) .sky-col-picker-btn .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-lg) .sky-col-picker-btn .sky-column-selector-action-btn-text{display:none}@media (min-width: 768px){:host .sky-col-picker-btn .sky-column-selector-action-btn-text{display:inline}}:host-context(.sky-responsive-container-sm) .sky-col-picker-btn .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-md) .sky-col-picker-btn .sky-column-selector-action-btn-text,:host-context(.sky-responsive-container-lg) .sky-col-picker-btn .sky-column-selector-action-btn-text{display:inline}\n"], components: [{ type: i4.λ37, selector: "sky-toolbar" }, { type: i4.λ38, selector: "sky-toolbar-section" }, { type: i4.λ39, selector: "sky-toolbar-item" }, { type: i5.λ1, selector: "sky-filter-button", inputs: ["filterButtonId", "ariaControls", "ariaExpanded", "active", "disabled", "showButtonText"], outputs: ["filterButtonClick"] }, { type: i5.λ14, selector: "sky-sort", inputs: ["showButtonText"] }, { type: i5.λ13, selector: "sky-sort-item", inputs: ["active"], outputs: ["itemSelect"] }, { type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i7.SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { type: i4.λ40, selector: "sky-toolbar-view-actions" }, { type: i8.λ11, selector: "sky-radio-group", inputs: ["ariaLabelledBy", "ariaLabel", "disabled", "name", "required", "value", "tabIndex"] }, { type: i8.λ13, selector: "sky-radio", inputs: ["checked", "disabled", "id", "label", "labelledBy", "name", "tabindex", "value", "icon", "radioType"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i8.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i8.λ4, selector: "sky-checkbox-label" }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i10.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "skyLibResources": i11.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDataManagerToolbarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-data-manager-toolbar',
+                    templateUrl: './data-manager-toolbar.component.html',
+                    styleUrls: ['./data-manager-toolbar.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.SkyDataManagerService }, { type: i2.SkyModalService }, { type: i3.SkyDataManagerColumnPickerService }]; } });
+//# sourceMappingURL=data-manager-toolbar.component.js.map

package/esm2015/lib/modules/data-manager/data-manager-toolbar/data-manager-toolbar.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-manager-toolbar.component.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/data-manager/src/lib/modules/data-manager/data-manager-toolbar/data-manager-toolbar.component.ts","../../../../../../../../../libs/components/data-manager/src/lib/modules/data-manager/data-manager-toolbar/data-manager-toolbar.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  OnDestroy,\n  OnInit,\n} from '@angular/core';\n\nimport { Subject } from 'rxjs';\n\nimport { takeUntil } from 'rxjs/operators';\n\nimport { SkyCheckboxChange } from '@skyux/forms';\n\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\n\nimport { SkyDataManagerService } from '../data-manager.service';\n\nimport { SkyDataManagerColumnPickerContext } from '../data-manager-column-picker/data-manager-column-picker-context';\n\nimport { SkyDataManagerColumnPickerOption } from '../models/data-manager-column-picker-option';\n\nimport { SkyDataManagerColumnPickerService } from '../data-manager-column-picker/data-manager-column-picker.service';\n\nimport { SkyDataManagerConfig } from '../models/data-manager-config';\n\nimport { SkyDataManagerSortOption } from '../models/data-manager-sort-option';\n\nimport { SkyDataManagerState } from '../models/data-manager-state';\n\nimport { SkyDataViewConfig } from '../models/data-view-config';\n\nimport { SkyDataManagerFilterModalContext } from '../data-manager-filter-context';\n\n/**\n * Renders a `sky-toolbar` with the contents specified by the active view's `SkyDataViewConfig`\n * and the `SkyDataManagerToolbarLeftItemsComponent`, `SkyDataManagerToolbarRightItemsComponent`,\n * and `SkyDataManagerToolbarSectionComponent` wrappers.\n */\n@Component({\n  selector: 'sky-data-manager-toolbar',\n  templateUrl: './data-manager-toolbar.component.html',\n  styleUrls: ['./data-manager-toolbar.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataManagerToolbarComponent implements OnDestroy, OnInit {\n  public get activeSortOptionId(): string {\n    const activeSortOption = this.dataState && this.dataState.activeSortOption;\n    return activeSortOption && activeSortOption.id;\n  }\n\n  public get activeView(): SkyDataViewConfig {\n    return this._activeView;\n  }\n\n  public set activeView(value: SkyDataViewConfig) {\n    this._activeView = value;\n    this.changeDetector.markForCheck();\n  }\n\n  public get dataManagerConfig(): SkyDataManagerConfig {\n    return this._dataManagerConfig;\n  }\n\n  public set dataManagerConfig(value: SkyDataManagerConfig) {\n    this._dataManagerConfig = value;\n    this.changeDetector.markForCheck();\n  }\n\n  public get dataState(): SkyDataManagerState {\n    return this._dataState;\n  }\n\n  public set dataState(value: SkyDataManagerState) {\n    this._dataState = value;\n    this.dataManagerService.updateDataState(value, this._source);\n  }\n\n  public get views(): SkyDataViewConfig[] {\n    return this._views;\n  }\n\n  public set views(value: SkyDataViewConfig[]) {\n    this._views = value;\n    this.changeDetector.markForCheck();\n  }\n\n  public onlyShowSelected: boolean;\n\n  // the source to provide for data state changes\n  private _source = 'toolbar';\n  private _activeView: SkyDataViewConfig;\n  private _dataManagerConfig: SkyDataManagerConfig;\n  private _dataState: SkyDataManagerState;\n  private _ngUnsubscribe = new Subject();\n  private _views: SkyDataViewConfig[] = [];\n\n  constructor(\n    private changeDetector: ChangeDetectorRef,\n    private dataManagerService: SkyDataManagerService,\n    private modalService: SkyModalService,\n    private columnPickerService: SkyDataManagerColumnPickerService\n  ) {}\n\n  public ngOnInit(): void {\n    this.dataManagerService\n      .getActiveViewIdUpdates()\n      .pipe(takeUntil(this._ngUnsubscribe))\n      .subscribe((activeViewId) => {\n        /* istanbul ignore else */\n        if (activeViewId) {\n          this.activeView = this.dataManagerService.getViewById(activeViewId);\n          this.changeDetector.markForCheck();\n        }\n      });\n\n    this.dataManagerService\n      .getDataViewsUpdates()\n      .pipe(takeUntil(this._ngUnsubscribe))\n      .subscribe((views) => {\n        this.views = views;\n      });\n\n    this.dataManagerService\n      .getDataStateUpdates(this._source)\n      .pipe(takeUntil(this._ngUnsubscribe))\n      .subscribe((dataState) => {\n        this._dataState = dataState;\n        this.onlyShowSelected = dataState.onlyShowSelected;\n        this.changeDetector.markForCheck();\n      });\n\n    this.dataManagerService\n      .getDataManagerConfigUpdates()\n      .pipe(takeUntil(this._ngUnsubscribe))\n      .subscribe((config) => {\n        this.dataManagerConfig = config;\n      });\n  }\n\n  public ngOnDestroy(): void {\n    this._ngUnsubscribe.next();\n    this._ngUnsubscribe.complete();\n  }\n\n  public sortSelected(sortOption: SkyDataManagerSortOption): void {\n    this.dataState.activeSortOption = sortOption;\n    this.dataManagerService.updateDataState(this.dataState, this._source);\n  }\n\n  public onViewChange(viewId: string): void {\n    this.dataManagerService.updateActiveViewId(viewId);\n  }\n\n  public searchApplied(text: string): void {\n    this.dataState.searchText = text;\n    this.dataManagerService.updateDataState(this.dataState, this._source);\n  }\n\n  public filterButtonClicked(): void {\n    const context = new SkyDataManagerFilterModalContext();\n    const filterModal =\n      this.dataManagerConfig && this.dataManagerConfig.filterModalComponent;\n\n    context.filterData = this.dataState && this.dataState.filterData;\n\n    const options: any = {\n      providers: [\n        { provide: SkyDataManagerFilterModalContext, useValue: context },\n      ],\n    };\n\n    if (filterModal) {\n      const modalInstance = this.modalService.open(filterModal, options);\n\n      modalInstance.closed.subscribe((result: SkyModalCloseArgs) => {\n        if (result.reason === 'save') {\n          this.dataState.filterData = result.data;\n          this.dataManagerService.updateDataState(this.dataState, this._source);\n        }\n      });\n    }\n  }\n\n  public openColumnPicker(): void {\n    const columnOptions = this.activeView && this.activeView.columnOptions;\n    const viewState = this.dataState.getViewStateById(this.activeView.id);\n    const context = new SkyDataManagerColumnPickerContext(\n      columnOptions,\n      viewState.displayedColumnIds\n    );\n\n    if (this.activeView.columnPickerSortStrategy) {\n      context.columnPickerSortStrategy =\n        this.activeView.columnPickerSortStrategy;\n    }\n\n    const options: any = {\n      providers: [\n        { provide: SkyDataManagerColumnPickerContext, useValue: context },\n      ],\n    };\n\n    const modalInstance = this.modalService.open(\n      this.columnPickerService.getComponentType(),\n      options\n    );\n\n    modalInstance.closed.subscribe((result: SkyModalCloseArgs) => {\n      if (result.reason === 'save') {\n        const displayedColumnIds = result.data.map(\n          (col: SkyDataManagerColumnPickerOption) => col.id\n        );\n\n        viewState.displayedColumnIds = displayedColumnIds;\n        this.dataState = this.dataState.addOrUpdateView(\n          this.activeView.id,\n          viewState\n        );\n      }\n    });\n  }\n\n  public selectAll(): void {\n    /* istanbul ignore else */\n    if (this.activeView.onSelectAllClick) {\n      this.activeView.onSelectAllClick();\n    }\n  }\n\n  public clearAll(): void {\n    /* istanbul ignore else */\n    if (this.activeView.onClearAllClick) {\n      this.activeView.onClearAllClick();\n    }\n  }\n\n  public onOnlyShowSelected(event: SkyCheckboxChange): void {\n    this.dataState.onlyShowSelected = event.checked;\n    this.dataManagerService.updateDataState(this.dataState, this._source);\n  }\n}\n","<div class=\"sky-data-manager-toolbar\">\n  <sky-toolbar>\n    <sky-toolbar-section>\n      <ng-content select=\"sky-data-manager-toolbar-primary-item\"></ng-content>\n\n      <sky-toolbar-item *ngIf=\"activeView?.filterButtonEnabled\">\n        <sky-filter-button\n          [showButtonText]=\"activeView?.showFilterButtonText\"\n          (filterButtonClick)=\"filterButtonClicked()\"\n        >\n        </sky-filter-button>\n      </sky-toolbar-item>\n\n      <sky-toolbar-item *ngIf=\"activeView?.sortEnabled\">\n        <sky-sort [showButtonText]=\"activeView?.showSortButtonText\">\n          <sky-sort-item\n            *ngFor=\"let item of dataManagerConfig?.sortOptions\"\n            [active]=\"activeSortOptionId && activeSortOptionId === item.id\"\n            (itemSelect)=\"sortSelected(item)\"\n          >\n            {{ item.label }}\n          </sky-sort-item>\n        </sky-sort>\n      </sky-toolbar-item>\n\n      <sky-toolbar-item *ngIf=\"activeView?.columnPickerEnabled\">\n        <button\n          class=\"sky-btn sky-btn-default sky-col-picker-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"\n            'skyux_data_manager_columns_button_title' | skyLibResources\n          \"\n          [attr.title]=\"\n            'skyux_data_manager_columns_button_title' | skyLibResources\n          \"\n          (click)=\"openColumnPicker()\"\n        >\n          <sky-icon icon=\"columns\"></sky-icon>\n          <span class=\"sky-column-selector-action-btn-text\">\n            {{ 'skyux_data_manager_columns_button_title' | skyLibResources }}\n          </span>\n        </button>\n      </sky-toolbar-item>\n\n      <ng-content select=\"sky-data-manager-toolbar-left-item\"></ng-content>\n\n      <sky-toolbar-item *ngIf=\"activeView?.searchEnabled\">\n        <sky-search\n          [expandMode]=\"activeView?.searchExpandMode\"\n          [placeholderText]=\"activeView?.searchPlaceholderText\"\n          [searchText]=\"dataState?.searchText\"\n          (searchApply)=\"searchApplied($event)\"\n        >\n        </sky-search>\n      </sky-toolbar-item>\n\n      <sky-toolbar-view-actions>\n        <ng-content select=\"sky-data-manager-toolbar-right-item\"></ng-content>\n        <sky-radio-group\n          *ngIf=\"activeView && views && views.length > 1\"\n          [ariaLabel]=\"'data view switcher'\"\n          class=\"sky-switch-icon-group\"\n        >\n          <sky-radio\n            *ngFor=\"let view of views\"\n            [attr.name]=\"view.name\"\n            [attr.aria-label]=\"view.name\"\n            [icon]=\"view.icon\"\n            [value]=\"view.id\"\n            [label]=\"view.name\"\n            [(ngModel)]=\"activeView.id\"\n            (change)=\"onViewChange(view.id)\"\n          >\n          </sky-radio>\n        </sky-radio-group>\n      </sky-toolbar-view-actions>\n    </sky-toolbar-section>\n    <ng-content select=\"sky-data-manager-toolbar-section\"></ng-content>\n  </sky-toolbar>\n\n  <sky-toolbar\n    *ngIf=\"activeView?.multiselectToolbarEnabled\"\n    class=\"sky-data-manager-multiselect-toolbar\"\n  >\n    <sky-toolbar-section>\n      <sky-toolbar-item>\n        <button\n          class=\"sky-btn sky-btn-link sky-data-manager-select-all-btn\"\n          type=\"button\"\n          (click)=\"selectAll()\"\n        >\n          {{ 'skyux_data_manager_select_all_button_title' | skyLibResources }}\n        </button>\n      </sky-toolbar-item>\n      <sky-toolbar-item>\n        <button\n          class=\"sky-btn sky-btn-link sky-data-manager-clear-all-btn\"\n          type=\"button\"\n          (click)=\"clearAll()\"\n        >\n          {{ 'skyux_data_manager_clear_all_button_title' | skyLibResources }}\n        </button>\n      </sky-toolbar-item>\n      <sky-toolbar-view-actions>\n        <sky-checkbox\n          [checked]=\"onlyShowSelected\"\n          (change)=\"onOnlyShowSelected($event)\"\n        >\n          <sky-checkbox-label>\n            {{\n              'skyux_data_manager_show_selected_option_title' | skyLibResources\n            }}\n          </sky-checkbox-label>\n        </sky-checkbox>\n      </sky-toolbar-view-actions>\n    </sky-toolbar-section>\n  </sky-toolbar>\n</div>\n"]}

package/esm2015/lib/modules/data-manager/data-manager.component.js

@@ -0,0 +1,84 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { SkyDataManagerService } from './data-manager.service';
+import { SkyBackToTopMessageType } from '@skyux/layout';
+import * as i0 from "@angular/core";
+import * as i1 from "./data-manager.service";
+import * as i2 from "@angular/common";
+import * as i3 from "@skyux/layout";
+import * as i4 from "@skyux/core";
+/**
+ * The top-level data manager component. Provide `SkyDataManagerService` at this level.
+ */
+export class SkyDataManagerComponent {
+    constructor(changeDetection, dataManagerService) {
+        this.changeDetection = changeDetection;
+        this.dataManagerService = dataManagerService;
+        this.backToTopController = new Subject();
+        this.backToTopOptions = {
+            buttonHidden: true,
+        };
+        this._isInitialized = false;
+        this.allViewkeeperClasses = {};
+        this.ngUnsubscribe = new Subject();
+        this.sourceId = 'dataManagerComponent';
+    }
+    get currentViewkeeperClasses() {
+        const dataManagerClasses = ['.sky-data-manager-toolbar'];
+        let allClasses = dataManagerClasses;
+        if (this._currentViewkeeperClasses) {
+            allClasses = dataManagerClasses.concat(this._currentViewkeeperClasses);
+        }
+        return allClasses;
+    }
+    set currentViewkeeperClasses(value) {
+        this._currentViewkeeperClasses = value;
+        this.changeDetection.markForCheck();
+    }
+    get isInitialized() {
+        return this._isInitialized;
+    }
+    set isInitialized(value) {
+        this._isInitialized = value;
+        this.changeDetection.markForCheck();
+    }
+    ngOnInit() {
+        this.dataManagerService
+            .getDataStateUpdates(this.sourceId)
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(() => (this.isInitialized = true));
+        this.dataManagerService.viewkeeperClasses
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((classes) => {
+            this.allViewkeeperClasses = classes;
+            this.currentViewkeeperClasses = classes[this.activeViewId];
+        });
+        this.dataManagerService
+            .getActiveViewIdUpdates()
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((activeViewId) => {
+            this.activeViewId = activeViewId;
+            this.backToTopController.next({
+                type: SkyBackToTopMessageType.BackToTop,
+            });
+            this.currentViewkeeperClasses =
+                this.allViewkeeperClasses[this.activeViewId];
+        });
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+}
+SkyDataManagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDataManagerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SkyDataManagerService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDataManagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyDataManagerComponent, selector: "sky-data-manager", ngImport: i0, template: "<div\n  *ngIf=\"isInitialized\"\n  class=\"sky-data-manager\"\n  [skyBackToTop]=\"backToTopOptions\"\n  [skyBackToTopMessageStream]=\"backToTopController\"\n  [skyViewkeeper]=\"currentViewkeeperClasses\"\n  #dataManager\n>\n  <ng-content></ng-content>\n</div>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.λ7, selector: "[skyBackToTop]", inputs: ["skyBackToTop", "skyBackToTopMessageStream"] }, { type: i4.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDataManagerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-data-manager',
+                    templateUrl: './data-manager.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.SkyDataManagerService }]; } });
+//# sourceMappingURL=data-manager.component.js.map

package/esm2015/lib/modules/data-manager/data-manager.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-manager.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/data-manager/src/lib/modules/data-manager/data-manager.component.ts","../../../../../../../../libs/components/data-manager/src/lib/modules/data-manager/data-manager.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  OnDestroy,\n  OnInit,\n} from '@angular/core';\n\nimport { Subject } from 'rxjs';\n\nimport { takeUntil } from 'rxjs/operators';\n\nimport { SkyDataManagerService } from './data-manager.service';\nimport { SkyBackToTopMessage, SkyBackToTopMessageType } from '@skyux/layout';\n\n/**\n * The top-level data manager component. Provide `SkyDataManagerService` at this level.\n */\n@Component({\n  selector: 'sky-data-manager',\n  templateUrl: './data-manager.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataManagerComponent implements OnDestroy, OnInit {\n  public get currentViewkeeperClasses(): string[] {\n    const dataManagerClasses = ['.sky-data-manager-toolbar'];\n    let allClasses = dataManagerClasses;\n\n    if (this._currentViewkeeperClasses) {\n      allClasses = dataManagerClasses.concat(this._currentViewkeeperClasses);\n    }\n\n    return allClasses;\n  }\n\n  public set currentViewkeeperClasses(value: string[]) {\n    this._currentViewkeeperClasses = value;\n    this.changeDetection.markForCheck();\n  }\n\n  public get isInitialized(): boolean {\n    return this._isInitialized;\n  }\n\n  public set isInitialized(value: boolean) {\n    this._isInitialized = value;\n    this.changeDetection.markForCheck();\n  }\n\n  public backToTopController = new Subject<SkyBackToTopMessage>();\n\n  public backToTopOptions = {\n    buttonHidden: true,\n  };\n\n  private _isInitialized = false;\n  private _currentViewkeeperClasses: string[];\n  private activeViewId: string;\n  private allViewkeeperClasses: { [viewId: string]: string[] } = {};\n  private ngUnsubscribe = new Subject();\n  private sourceId = 'dataManagerComponent';\n\n  constructor(\n    private changeDetection: ChangeDetectorRef,\n    private dataManagerService: SkyDataManagerService\n  ) {}\n\n  public ngOnInit(): void {\n    this.dataManagerService\n      .getDataStateUpdates(this.sourceId)\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe(() => (this.isInitialized = true));\n\n    this.dataManagerService.viewkeeperClasses\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe((classes) => {\n        this.allViewkeeperClasses = classes;\n        this.currentViewkeeperClasses = classes[this.activeViewId];\n      });\n\n    this.dataManagerService\n      .getActiveViewIdUpdates()\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe((activeViewId) => {\n        this.activeViewId = activeViewId;\n        this.backToTopController.next({\n          type: SkyBackToTopMessageType.BackToTop,\n        });\n        this.currentViewkeeperClasses =\n          this.allViewkeeperClasses[this.activeViewId];\n      });\n  }\n\n  public ngOnDestroy(): void {\n    this.ngUnsubscribe.next();\n    this.ngUnsubscribe.complete();\n  }\n}\n","<div\n  *ngIf=\"isInitialized\"\n  class=\"sky-data-manager\"\n  [skyBackToTop]=\"backToTopOptions\"\n  [skyBackToTopMessageStream]=\"backToTopController\"\n  [skyViewkeeper]=\"currentViewkeeperClasses\"\n  #dataManager\n>\n  <ng-content></ng-content>\n</div>\n"]}

package/esm2015/lib/modules/data-manager/data-manager.module.js

@@ -0,0 +1,123 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { SkyViewkeeperModule } from '@skyux/core';
+import { SkyIconModule } from '@skyux/indicators';
+import { SkyCheckboxModule, SkyRadioModule } from '@skyux/forms';
+import { SkyBackToTopModule, SkyToolbarModule } from '@skyux/layout';
+import { SkyFilterModule, SkyRepeaterModule, SkySortModule, } from '@skyux/lists';
+import { SkySearchModule } from '@skyux/lookup';
+import { SkyModalModule } from '@skyux/modals';
+import { SkyDataManagerResourcesModule } from '../shared/sky-data-manager-resources.module';
+import { SkyDataManagerColumnPickerComponent } from './data-manager-column-picker/data-manager-column-picker.component';
+import { SkyDataManagerComponent } from './data-manager.component';
+import { SkyDataManagerToolbarLeftItemComponent } from './data-manager-toolbar/data-manager-toolbar-left-item.component';
+import { SkyDataManagerToolbarPrimaryItemComponent } from './data-manager-toolbar/data-manager-toolbar-primary-item.component';
+import { SkyDataManagerToolbarRightItemComponent } from './data-manager-toolbar/data-manager-toolbar-right-item.component';
+import { SkyDataManagerToolbarSectionComponent } from './data-manager-toolbar/data-manager-toolbar-section.component';
+import { SkyDataManagerToolbarComponent } from './data-manager-toolbar/data-manager-toolbar.component';
+import { SkyDataViewComponent } from './data-view.component';
+import { SkyDataManagerColumnPickerService } from './data-manager-column-picker/data-manager-column-picker.service';
+import { SkyDataManagerColumnPickerImplService } from './data-manager-column-picker/data-manager-column-picker-impl.service';
+import * as i0 from "@angular/core";
+export class SkyDataManagerModule {
+}
+SkyDataManagerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDataManagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDataManagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDataManagerModule, declarations: [SkyDataManagerColumnPickerComponent,
+        SkyDataManagerComponent,
+        SkyDataManagerToolbarLeftItemComponent,
+        SkyDataManagerToolbarPrimaryItemComponent,
+        SkyDataManagerToolbarRightItemComponent,
+        SkyDataManagerToolbarSectionComponent,
+        SkyDataManagerToolbarComponent,
+        SkyDataViewComponent], imports: [CommonModule,
+        FormsModule,
+        SkyBackToTopModule,
+        SkyCheckboxModule,
+        SkyDataManagerResourcesModule,
+        SkyFilterModule,
+        SkyIconModule,
+        SkyModalModule,
+        SkyRadioModule,
+        SkyRepeaterModule,
+        SkySearchModule,
+        SkySortModule,
+        SkyToolbarModule,
+        SkyViewkeeperModule], exports: [SkyDataManagerColumnPickerComponent,
+        SkyDataManagerComponent,
+        SkyDataManagerToolbarLeftItemComponent,
+        SkyDataManagerToolbarPrimaryItemComponent,
+        SkyDataManagerToolbarRightItemComponent,
+        SkyDataManagerToolbarSectionComponent,
+        SkyDataManagerToolbarComponent,
+        SkyDataViewComponent] });
+SkyDataManagerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDataManagerModule, providers: [
+        {
+            provide: SkyDataManagerColumnPickerService,
+            useClass: SkyDataManagerColumnPickerImplService,
+        },
+    ], imports: [[
+            CommonModule,
+            FormsModule,
+            SkyBackToTopModule,
+            SkyCheckboxModule,
+            SkyDataManagerResourcesModule,
+            SkyFilterModule,
+            SkyIconModule,
+            SkyModalModule,
+            SkyRadioModule,
+            SkyRepeaterModule,
+            SkySearchModule,
+            SkySortModule,
+            SkyToolbarModule,
+            SkyViewkeeperModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDataManagerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyDataManagerColumnPickerComponent,
+                        SkyDataManagerComponent,
+                        SkyDataManagerToolbarLeftItemComponent,
+                        SkyDataManagerToolbarPrimaryItemComponent,
+                        SkyDataManagerToolbarRightItemComponent,
+                        SkyDataManagerToolbarSectionComponent,
+                        SkyDataManagerToolbarComponent,
+                        SkyDataViewComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        SkyBackToTopModule,
+                        SkyCheckboxModule,
+                        SkyDataManagerResourcesModule,
+                        SkyFilterModule,
+                        SkyIconModule,
+                        SkyModalModule,
+                        SkyRadioModule,
+                        SkyRepeaterModule,
+                        SkySearchModule,
+                        SkySortModule,
+                        SkyToolbarModule,
+                        SkyViewkeeperModule,
+                    ],
+                    exports: [
+                        SkyDataManagerColumnPickerComponent,
+                        SkyDataManagerComponent,
+                        SkyDataManagerToolbarLeftItemComponent,
+                        SkyDataManagerToolbarPrimaryItemComponent,
+                        SkyDataManagerToolbarRightItemComponent,
+                        SkyDataManagerToolbarSectionComponent,
+                        SkyDataManagerToolbarComponent,
+                        SkyDataViewComponent,
+                    ],
+                    entryComponents: [SkyDataManagerColumnPickerComponent],
+                    providers: [
+                        {
+                            provide: SkyDataManagerColumnPickerService,
+                            useClass: SkyDataManagerColumnPickerImplService,
+                        },
+                    ],
+                }]
+        }] });
+//# sourceMappingURL=data-manager.module.js.map

package/esm2015/lib/modules/data-manager/data-manager.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-manager.module.js","sourceRoot":"","sources":["../../../../../../../../libs/components/data-manager/src/lib/modules/data-manager/data-manager.module.ts"],"names":[],"mappings":"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","sourcesContent":["import { NgModule } from '@angular/core';\n\nimport { FormsModule } from '@angular/forms';\n\nimport { CommonModule } from '@angular/common';\n\nimport { SkyViewkeeperModule } from '@skyux/core';\n\nimport { SkyIconModule } from '@skyux/indicators';\n\nimport { SkyCheckboxModule, SkyRadioModule } from '@skyux/forms';\n\nimport { SkyBackToTopModule, SkyToolbarModule } from '@skyux/layout';\n\nimport {\n  SkyFilterModule,\n  SkyRepeaterModule,\n  SkySortModule,\n} from '@skyux/lists';\n\nimport { SkySearchModule } from '@skyux/lookup';\n\nimport { SkyModalModule } from '@skyux/modals';\n\nimport { SkyDataManagerResourcesModule } from '../shared/sky-data-manager-resources.module';\n\nimport { SkyDataManagerColumnPickerComponent } from './data-manager-column-picker/data-manager-column-picker.component';\n\nimport { SkyDataManagerComponent } from './data-manager.component';\n\nimport { SkyDataManagerToolbarLeftItemComponent } from './data-manager-toolbar/data-manager-toolbar-left-item.component';\n\nimport { SkyDataManagerToolbarPrimaryItemComponent } from './data-manager-toolbar/data-manager-toolbar-primary-item.component';\n\nimport { SkyDataManagerToolbarRightItemComponent } from './data-manager-toolbar/data-manager-toolbar-right-item.component';\n\nimport { SkyDataManagerToolbarSectionComponent } from './data-manager-toolbar/data-manager-toolbar-section.component';\n\nimport { SkyDataManagerToolbarComponent } from './data-manager-toolbar/data-manager-toolbar.component';\n\nimport { SkyDataViewComponent } from './data-view.component';\n\nimport { SkyDataManagerColumnPickerService } from './data-manager-column-picker/data-manager-column-picker.service';\n\nimport { SkyDataManagerColumnPickerImplService } from './data-manager-column-picker/data-manager-column-picker-impl.service';\n\n@NgModule({\n  declarations: [\n    SkyDataManagerColumnPickerComponent,\n    SkyDataManagerComponent,\n    SkyDataManagerToolbarLeftItemComponent,\n    SkyDataManagerToolbarPrimaryItemComponent,\n    SkyDataManagerToolbarRightItemComponent,\n    SkyDataManagerToolbarSectionComponent,\n    SkyDataManagerToolbarComponent,\n    SkyDataViewComponent,\n  ],\n  imports: [\n    CommonModule,\n    FormsModule,\n    SkyBackToTopModule,\n    SkyCheckboxModule,\n    SkyDataManagerResourcesModule,\n    SkyFilterModule,\n    SkyIconModule,\n    SkyModalModule,\n    SkyRadioModule,\n    SkyRepeaterModule,\n    SkySearchModule,\n    SkySortModule,\n    SkyToolbarModule,\n    SkyViewkeeperModule,\n  ],\n  exports: [\n    SkyDataManagerColumnPickerComponent,\n    SkyDataManagerComponent,\n    SkyDataManagerToolbarLeftItemComponent,\n    SkyDataManagerToolbarPrimaryItemComponent,\n    SkyDataManagerToolbarRightItemComponent,\n    SkyDataManagerToolbarSectionComponent,\n    SkyDataManagerToolbarComponent,\n    SkyDataViewComponent,\n  ],\n  entryComponents: [SkyDataManagerColumnPickerComponent],\n  providers: [\n    {\n      provide: SkyDataManagerColumnPickerService,\n      useClass: SkyDataManagerColumnPickerImplService,\n    },\n  ],\n})\nexport class SkyDataManagerModule {}\n"]}