@skyux/data-manager 12.1.0 → 12.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/fesm2022/skyux-data-manager-testing.mjs +489 -0
  2. package/fesm2022/skyux-data-manager-testing.mjs.map +1 -0
  3. package/fesm2022/skyux-data-manager.mjs +13 -7
  4. package/fesm2022/skyux-data-manager.mjs.map +1 -1
  5. package/index.d.ts +1 -0
  6. package/lib/modules/data-manager/data-manager-toolbar/data-manager-toolbar.component.d.ts +1 -1
  7. package/lib/modules/data-manager/data-view.component.d.ts +1 -0
  8. package/package.json +15 -10
  9. package/testing/index.d.ts +5 -0
  10. package/testing/modules/data-manager/data-manager-column-picker-column-harness-filters.d.ts +6 -0
  11. package/testing/modules/data-manager/data-manager-column-picker-column-harness.d.ts +81 -0
  12. package/testing/modules/data-manager/data-manager-column-picker-harness.d.ts +45 -0
  13. package/testing/modules/data-manager/data-manager-harness-filters.d.ts +6 -0
  14. package/testing/modules/data-manager/data-manager-harness.d.ts +33 -0
  15. package/testing/modules/data-manager/data-manager-toolbar-harness-filters.d.ts +6 -0
  16. package/testing/modules/data-manager/data-manager-toolbar-harness.d.ts +94 -0
  17. package/testing/modules/data-manager/data-manager-toolbar-left-item-harness-filters.d.ts +6 -0
  18. package/testing/modules/data-manager/data-manager-toolbar-left-item-harness.d.ts +17 -0
  19. package/testing/modules/data-manager/data-manager-toolbar-primary-item-harness-filters.d.ts +6 -0
  20. package/testing/modules/data-manager/data-manager-toolbar-primary-item-harness.d.ts +17 -0
  21. package/testing/modules/data-manager/data-manager-toolbar-right-item-harness-filters.d.ts +6 -0
  22. package/testing/modules/data-manager/data-manager-toolbar-right-item-harness.d.ts +17 -0
  23. package/testing/modules/data-manager/data-manager-toolbar-section-harness-filters.d.ts +6 -0
  24. package/testing/modules/data-manager/data-manager-toolbar-section-harness.d.ts +17 -0
  25. package/testing/modules/data-manager/data-view-harness-filters.d.ts +7 -0
  26. package/testing/modules/data-manager/data-view-harness.d.ts +17 -0
  27. package/testing/public-api.d.ts +17 -0
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { NgModule, Injectable, inject, ChangeDetectorRef, isStandalone, ChangeDetectionStrategy, Component, Input } from '@angular/core';
2
+ import { NgModule, Injectable, inject, ChangeDetectorRef, isStandalone, ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
3
3
  import * as i2$1 from '@skyux/indicators';
4
4
  import { SkyTextHighlightDirective, SkyStatusIndicatorModule } from '@skyux/indicators';
5
5
  import * as i3$1 from '@skyux/lists';
@@ -593,7 +593,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
593
593
 
594
594
  /**
595
595
  * Renders a `sky-toolbar` with the contents specified by the active view's `SkyDataViewConfig`
596
- * and the `SkyDataManagerToolbarLeftItemsComponent`, `SkyDataManagerToolbarRightItemsComponent`,
596
+ * and the `SkyDataManagerToolbarLeftItemComponent`, `SkyDataManagerToolbarRightItemComponent`,
597
597
  * and `SkyDataManagerToolbarSectionComponent` wrappers.
598
598
  */
599
599
  class SkyDataManagerToolbarComponent {
@@ -771,7 +771,7 @@ class SkyDataManagerToolbarComponent {
771
771
  }
772
772
  }
773
773
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDataManagerToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
774
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyDataManagerToolbarComponent, isStandalone: true, selector: "sky-data-manager-toolbar", ngImport: i0, template: "<div class=\"sky-data-manager-toolbar\">\n <sky-toolbar [listDescriptor]=\"dataManagerConfig?.listDescriptor\">\n <sky-toolbar-section>\n <ng-content select=\"sky-data-manager-toolbar-primary-item\" />\n\n @if (activeView?.filterButtonEnabled) {\n <sky-toolbar-item>\n <sky-filter-button\n [showButtonText]=\"activeView?.showFilterButtonText\"\n (filterButtonClick)=\"filterButtonClicked()\"\n />\n </sky-toolbar-item>\n }\n\n @if (activeView?.sortEnabled) {\n <sky-toolbar-item>\n <sky-sort [showButtonText]=\"activeView?.showSortButtonText\">\n @for (item of dataManagerConfig?.sortOptions; track item) {\n <sky-sort-item\n [active]=\"!!(dataState?.activeSortOption?.id === item.id)\"\n (itemSelect)=\"sortSelected(item)\"\n >\n {{ item.label }}\n </sky-sort-item>\n }\n </sky-sort>\n </sky-toolbar-item>\n }\n\n @if (activeView?.columnPickerEnabled) {\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-default sky-col-picker-btn\"\n type=\"button\"\n [attr.aria-label]=\"\n dataManagerConfig?.listDescriptor\n ? ('skyux_data_manager_columns_button_aria_label'\n | skyLibResources: dataManagerConfig?.listDescriptor)\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 iconName=\"layout-column-three\" />\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\n <ng-content select=\"sky-data-manager-toolbar-left-item\" />\n\n @if (activeView?.searchEnabled) {\n <sky-toolbar-item>\n <sky-search\n [expandMode]=\"activeView?.searchExpandMode\"\n [placeholderText]=\"activeView?.searchPlaceholderText\"\n [searchText]=\"dataState?.searchText\"\n (searchApply)=\"searchApplied($event)\"\n />\n </sky-toolbar-item>\n }\n\n <sky-toolbar-view-actions>\n <ng-content select=\"sky-data-manager-toolbar-right-item\" />\n @if (activeView && views && views.length > 1) {\n <sky-radio-group\n class=\"sky-switch-icon-group\"\n [ariaLabel]=\"'data view switcher'\"\n [(ngModel)]=\"activeView.id\"\n >\n @for (view of views; track view.id) {\n @if (view.iconName) {\n <sky-radio\n [attr.aria-label]=\"view.name\"\n [iconName]=\"view.iconName\"\n [value]=\"view.id\"\n [label]=\"view.name\"\n (change)=\"onViewChange(view.id)\"\n />\n } @else {\n <sky-radio\n [attr.aria-label]=\"view.name\"\n [icon]=\"view.icon\"\n [value]=\"view.id\"\n [label]=\"view.name\"\n (change)=\"onViewChange(view.id)\"\n />\n }\n }\n </sky-radio-group>\n }\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n <ng-content select=\"sky-data-manager-toolbar-section\" />\n </sky-toolbar>\n\n @if (activeView?.multiselectToolbarEnabled) {\n <sky-toolbar class=\"sky-data-manager-multiselect-toolbar\">\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 [attr.aria-label]=\"\n dataManagerConfig?.listDescriptor\n ? ('skyux_data_manager_select_all_button_aria_label'\n | skyLibResources: dataManagerConfig?.listDescriptor)\n : undefined\n \"\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 [attr.aria-label]=\"\n dataManagerConfig?.listDescriptor\n ? ('skyux_data_manager_clear_all_button_aria_label'\n | skyLibResources: dataManagerConfig?.listDescriptor)\n : undefined\n \"\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 [label]=\"\n dataManagerConfig?.listDescriptor\n ? ('skyux_data_manager_show_selected_option_aria_label'\n | skyLibResources: dataManagerConfig?.listDescriptor)\n : undefined\n \"\n (change)=\"onOnlyShowSelected($event)\"\n >\n <sky-checkbox-label>\n {{\n 'skyux_data_manager_show_selected_option_title'\n | skyLibResources\n }}\n </sky-checkbox-label>\n </sky-checkbox>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n }\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"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "icon", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i2.λ4, selector: "sky-checkbox-label" }, { kind: "ngmodule", type: SkyDataManagerResourcesModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i4.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyFilterModule }, { kind: "component", type: i3$1.λ1, selector: "sky-filter-button", inputs: ["filterButtonId", "ariaControls", "ariaExpanded", "ariaLabel", "active", "disabled", "showButtonText"], outputs: ["filterButtonClick"] }, { kind: "ngmodule", type: SkyRadioModule }, { kind: "component", type: i2.λ13, selector: "sky-radio", inputs: ["checked", "disabled", "id", "label", "labelledBy", "name", "tabindex", "value", "helpPopoverContent", "helpPopoverTitle", "icon", "iconName", "radioType", "labelText", "labelHidden", "hintText", "helpKey"], outputs: ["change", "checkedChange", "disabledChange"] }, { kind: "component", type: i2.λ11, selector: "sky-radio-group", inputs: ["ariaLabelledBy", "ariaLabel", "disabled", "headingLevel", "headingStyle", "name", "required", "stacked", "value", "tabIndex", "headingText", "headingHidden", "hintText", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }, { kind: "ngmodule", type: SkySearchModule }, { kind: "component", type: i6.SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "ngmodule", type: SkySortModule }, { kind: "component", type: i3$1.λ14, selector: "sky-sort", inputs: ["ariaLabel", "showButtonText"] }, { kind: "component", type: i3$1.λ13, selector: "sky-sort-item", inputs: ["active"], outputs: ["itemSelect"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i7.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i7.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i7.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i7.λ40, selector: "sky-toolbar-view-actions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
774
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyDataManagerToolbarComponent, isStandalone: true, selector: "sky-data-manager-toolbar", ngImport: i0, template: "<div class=\"sky-data-manager-toolbar\">\n <sky-toolbar [listDescriptor]=\"dataManagerConfig?.listDescriptor\">\n <sky-toolbar-section>\n <ng-content select=\"sky-data-manager-toolbar-primary-item\" />\n\n @if (activeView?.filterButtonEnabled) {\n <sky-toolbar-item class=\"sky-data-manager-filter\">\n <sky-filter-button\n [showButtonText]=\"activeView?.showFilterButtonText\"\n (filterButtonClick)=\"filterButtonClicked()\"\n />\n </sky-toolbar-item>\n }\n\n @if (activeView?.sortEnabled) {\n <sky-toolbar-item class=\"sky-data-manager-sort\">\n <sky-sort [showButtonText]=\"activeView?.showSortButtonText\">\n @for (item of dataManagerConfig?.sortOptions; track item) {\n <sky-sort-item\n [active]=\"!!(dataState?.activeSortOption?.id === item.id)\"\n (itemSelect)=\"sortSelected(item)\"\n >\n {{ item.label }}\n </sky-sort-item>\n }\n </sky-sort>\n </sky-toolbar-item>\n }\n\n @if (activeView?.columnPickerEnabled) {\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-default sky-col-picker-btn\"\n type=\"button\"\n [attr.aria-label]=\"\n dataManagerConfig?.listDescriptor\n ? ('skyux_data_manager_columns_button_aria_label'\n | skyLibResources: dataManagerConfig?.listDescriptor)\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 iconName=\"layout-column-three\" />\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\n <ng-content select=\"sky-data-manager-toolbar-left-item\" />\n\n @if (activeView?.searchEnabled) {\n <sky-toolbar-item class=\"sky-data-manager-search\">\n <sky-search\n [expandMode]=\"activeView?.searchExpandMode\"\n [placeholderText]=\"activeView?.searchPlaceholderText\"\n [searchText]=\"dataState?.searchText\"\n (searchApply)=\"searchApplied($event)\"\n />\n </sky-toolbar-item>\n }\n\n <sky-toolbar-view-actions>\n <ng-content select=\"sky-data-manager-toolbar-right-item\" />\n @if (activeView && views && views.length > 1) {\n <sky-radio-group\n class=\"sky-switch-icon-group\"\n [ariaLabel]=\"'data view switcher'\"\n [(ngModel)]=\"activeView.id\"\n >\n @for (view of views; track view.id) {\n @if (view.iconName) {\n <sky-radio\n [attr.aria-label]=\"view.name\"\n [iconName]=\"view.iconName\"\n [value]=\"view.id\"\n [label]=\"view.name\"\n (change)=\"onViewChange(view.id)\"\n />\n } @else {\n <sky-radio\n [attr.aria-label]=\"view.name\"\n [icon]=\"view.icon\"\n [value]=\"view.id\"\n [label]=\"view.name\"\n (change)=\"onViewChange(view.id)\"\n />\n }\n }\n </sky-radio-group>\n }\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n <ng-content select=\"sky-data-manager-toolbar-section\" />\n </sky-toolbar>\n\n @if (activeView?.multiselectToolbarEnabled) {\n <sky-toolbar class=\"sky-data-manager-multiselect-toolbar\">\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 [attr.aria-label]=\"\n dataManagerConfig?.listDescriptor\n ? ('skyux_data_manager_select_all_button_aria_label'\n | skyLibResources: dataManagerConfig?.listDescriptor)\n : undefined\n \"\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 [attr.aria-label]=\"\n dataManagerConfig?.listDescriptor\n ? ('skyux_data_manager_clear_all_button_aria_label'\n | skyLibResources: dataManagerConfig?.listDescriptor)\n : undefined\n \"\n (click)=\"clearAll()\"\n >\n {{ 'skyux_data_manager_clear_all_button_title' | skyLibResources }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-view-actions class=\"sky-data-manager-only-show-selected\">\n <sky-checkbox\n [checked]=\"onlyShowSelected\"\n [label]=\"\n dataManagerConfig?.listDescriptor\n ? ('skyux_data_manager_show_selected_option_aria_label'\n | skyLibResources: dataManagerConfig?.listDescriptor)\n : undefined\n \"\n (change)=\"onOnlyShowSelected($event)\"\n >\n <sky-checkbox-label>\n {{\n 'skyux_data_manager_show_selected_option_title'\n | skyLibResources\n }}\n </sky-checkbox-label>\n </sky-checkbox>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n }\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"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "icon", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i2.λ4, selector: "sky-checkbox-label" }, { kind: "ngmodule", type: SkyDataManagerResourcesModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i4.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyFilterModule }, { kind: "component", type: i3$1.λ1, selector: "sky-filter-button", inputs: ["filterButtonId", "ariaControls", "ariaExpanded", "ariaLabel", "active", "disabled", "showButtonText"], outputs: ["filterButtonClick"] }, { kind: "ngmodule", type: SkyRadioModule }, { kind: "component", type: i2.λ13, selector: "sky-radio", inputs: ["checked", "disabled", "id", "label", "labelledBy", "name", "tabindex", "value", "helpPopoverContent", "helpPopoverTitle", "icon", "iconName", "radioType", "labelText", "labelHidden", "hintText", "helpKey"], outputs: ["change", "checkedChange", "disabledChange"] }, { kind: "component", type: i2.λ11, selector: "sky-radio-group", inputs: ["ariaLabelledBy", "ariaLabel", "disabled", "headingLevel", "headingStyle", "name", "required", "stacked", "value", "tabIndex", "headingText", "headingHidden", "hintText", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }, { kind: "ngmodule", type: SkySearchModule }, { kind: "component", type: i6.SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "ngmodule", type: SkySortModule }, { kind: "component", type: i3$1.λ14, selector: "sky-sort", inputs: ["ariaLabel", "showButtonText"] }, { kind: "component", type: i3$1.λ13, selector: "sky-sort-item", inputs: ["active"], outputs: ["itemSelect"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i7.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i7.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i7.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i7.λ40, selector: "sky-toolbar-view-actions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
775
775
  }
776
776
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDataManagerToolbarComponent, decorators: [{
777
777
  type: Component,
@@ -785,7 +785,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
785
785
  SkySearchModule,
786
786
  SkySortModule,
787
787
  SkyToolbarModule,
788
- ], template: "<div class=\"sky-data-manager-toolbar\">\n <sky-toolbar [listDescriptor]=\"dataManagerConfig?.listDescriptor\">\n <sky-toolbar-section>\n <ng-content select=\"sky-data-manager-toolbar-primary-item\" />\n\n @if (activeView?.filterButtonEnabled) {\n <sky-toolbar-item>\n <sky-filter-button\n [showButtonText]=\"activeView?.showFilterButtonText\"\n (filterButtonClick)=\"filterButtonClicked()\"\n />\n </sky-toolbar-item>\n }\n\n @if (activeView?.sortEnabled) {\n <sky-toolbar-item>\n <sky-sort [showButtonText]=\"activeView?.showSortButtonText\">\n @for (item of dataManagerConfig?.sortOptions; track item) {\n <sky-sort-item\n [active]=\"!!(dataState?.activeSortOption?.id === item.id)\"\n (itemSelect)=\"sortSelected(item)\"\n >\n {{ item.label }}\n </sky-sort-item>\n }\n </sky-sort>\n </sky-toolbar-item>\n }\n\n @if (activeView?.columnPickerEnabled) {\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-default sky-col-picker-btn\"\n type=\"button\"\n [attr.aria-label]=\"\n dataManagerConfig?.listDescriptor\n ? ('skyux_data_manager_columns_button_aria_label'\n | skyLibResources: dataManagerConfig?.listDescriptor)\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 iconName=\"layout-column-three\" />\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\n <ng-content select=\"sky-data-manager-toolbar-left-item\" />\n\n @if (activeView?.searchEnabled) {\n <sky-toolbar-item>\n <sky-search\n [expandMode]=\"activeView?.searchExpandMode\"\n [placeholderText]=\"activeView?.searchPlaceholderText\"\n [searchText]=\"dataState?.searchText\"\n (searchApply)=\"searchApplied($event)\"\n />\n </sky-toolbar-item>\n }\n\n <sky-toolbar-view-actions>\n <ng-content select=\"sky-data-manager-toolbar-right-item\" />\n @if (activeView && views && views.length > 1) {\n <sky-radio-group\n class=\"sky-switch-icon-group\"\n [ariaLabel]=\"'data view switcher'\"\n [(ngModel)]=\"activeView.id\"\n >\n @for (view of views; track view.id) {\n @if (view.iconName) {\n <sky-radio\n [attr.aria-label]=\"view.name\"\n [iconName]=\"view.iconName\"\n [value]=\"view.id\"\n [label]=\"view.name\"\n (change)=\"onViewChange(view.id)\"\n />\n } @else {\n <sky-radio\n [attr.aria-label]=\"view.name\"\n [icon]=\"view.icon\"\n [value]=\"view.id\"\n [label]=\"view.name\"\n (change)=\"onViewChange(view.id)\"\n />\n }\n }\n </sky-radio-group>\n }\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n <ng-content select=\"sky-data-manager-toolbar-section\" />\n </sky-toolbar>\n\n @if (activeView?.multiselectToolbarEnabled) {\n <sky-toolbar class=\"sky-data-manager-multiselect-toolbar\">\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 [attr.aria-label]=\"\n dataManagerConfig?.listDescriptor\n ? ('skyux_data_manager_select_all_button_aria_label'\n | skyLibResources: dataManagerConfig?.listDescriptor)\n : undefined\n \"\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 [attr.aria-label]=\"\n dataManagerConfig?.listDescriptor\n ? ('skyux_data_manager_clear_all_button_aria_label'\n | skyLibResources: dataManagerConfig?.listDescriptor)\n : undefined\n \"\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 [label]=\"\n dataManagerConfig?.listDescriptor\n ? ('skyux_data_manager_show_selected_option_aria_label'\n | skyLibResources: dataManagerConfig?.listDescriptor)\n : undefined\n \"\n (change)=\"onOnlyShowSelected($event)\"\n >\n <sky-checkbox-label>\n {{\n 'skyux_data_manager_show_selected_option_title'\n | skyLibResources\n }}\n </sky-checkbox-label>\n </sky-checkbox>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n }\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"] }]
788
+ ], template: "<div class=\"sky-data-manager-toolbar\">\n <sky-toolbar [listDescriptor]=\"dataManagerConfig?.listDescriptor\">\n <sky-toolbar-section>\n <ng-content select=\"sky-data-manager-toolbar-primary-item\" />\n\n @if (activeView?.filterButtonEnabled) {\n <sky-toolbar-item class=\"sky-data-manager-filter\">\n <sky-filter-button\n [showButtonText]=\"activeView?.showFilterButtonText\"\n (filterButtonClick)=\"filterButtonClicked()\"\n />\n </sky-toolbar-item>\n }\n\n @if (activeView?.sortEnabled) {\n <sky-toolbar-item class=\"sky-data-manager-sort\">\n <sky-sort [showButtonText]=\"activeView?.showSortButtonText\">\n @for (item of dataManagerConfig?.sortOptions; track item) {\n <sky-sort-item\n [active]=\"!!(dataState?.activeSortOption?.id === item.id)\"\n (itemSelect)=\"sortSelected(item)\"\n >\n {{ item.label }}\n </sky-sort-item>\n }\n </sky-sort>\n </sky-toolbar-item>\n }\n\n @if (activeView?.columnPickerEnabled) {\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-default sky-col-picker-btn\"\n type=\"button\"\n [attr.aria-label]=\"\n dataManagerConfig?.listDescriptor\n ? ('skyux_data_manager_columns_button_aria_label'\n | skyLibResources: dataManagerConfig?.listDescriptor)\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 iconName=\"layout-column-three\" />\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\n <ng-content select=\"sky-data-manager-toolbar-left-item\" />\n\n @if (activeView?.searchEnabled) {\n <sky-toolbar-item class=\"sky-data-manager-search\">\n <sky-search\n [expandMode]=\"activeView?.searchExpandMode\"\n [placeholderText]=\"activeView?.searchPlaceholderText\"\n [searchText]=\"dataState?.searchText\"\n (searchApply)=\"searchApplied($event)\"\n />\n </sky-toolbar-item>\n }\n\n <sky-toolbar-view-actions>\n <ng-content select=\"sky-data-manager-toolbar-right-item\" />\n @if (activeView && views && views.length > 1) {\n <sky-radio-group\n class=\"sky-switch-icon-group\"\n [ariaLabel]=\"'data view switcher'\"\n [(ngModel)]=\"activeView.id\"\n >\n @for (view of views; track view.id) {\n @if (view.iconName) {\n <sky-radio\n [attr.aria-label]=\"view.name\"\n [iconName]=\"view.iconName\"\n [value]=\"view.id\"\n [label]=\"view.name\"\n (change)=\"onViewChange(view.id)\"\n />\n } @else {\n <sky-radio\n [attr.aria-label]=\"view.name\"\n [icon]=\"view.icon\"\n [value]=\"view.id\"\n [label]=\"view.name\"\n (change)=\"onViewChange(view.id)\"\n />\n }\n }\n </sky-radio-group>\n }\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n <ng-content select=\"sky-data-manager-toolbar-section\" />\n </sky-toolbar>\n\n @if (activeView?.multiselectToolbarEnabled) {\n <sky-toolbar class=\"sky-data-manager-multiselect-toolbar\">\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 [attr.aria-label]=\"\n dataManagerConfig?.listDescriptor\n ? ('skyux_data_manager_select_all_button_aria_label'\n | skyLibResources: dataManagerConfig?.listDescriptor)\n : undefined\n \"\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 [attr.aria-label]=\"\n dataManagerConfig?.listDescriptor\n ? ('skyux_data_manager_clear_all_button_aria_label'\n | skyLibResources: dataManagerConfig?.listDescriptor)\n : undefined\n \"\n (click)=\"clearAll()\"\n >\n {{ 'skyux_data_manager_clear_all_button_title' | skyLibResources }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-view-actions class=\"sky-data-manager-only-show-selected\">\n <sky-checkbox\n [checked]=\"onlyShowSelected\"\n [label]=\"\n dataManagerConfig?.listDescriptor\n ? ('skyux_data_manager_show_selected_option_aria_label'\n | skyLibResources: dataManagerConfig?.listDescriptor)\n : undefined\n \"\n (change)=\"onOnlyShowSelected($event)\"\n >\n <sky-checkbox-label>\n {{\n 'skyux_data_manager_show_selected_option_title'\n | skyLibResources\n }}\n </sky-checkbox-label>\n </sky-checkbox>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n }\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"] }]
789
789
  }] });
790
790
 
791
791
  const VIEWKEEPER_CLASSES_DEFAULT = ['.sky-data-manager-toolbar'];
@@ -902,6 +902,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
902
902
  * search text, and more to the data it displays.
903
903
  */
904
904
  class SkyDataViewComponent {
905
+ get dataViewId() {
906
+ return this.viewId;
907
+ }
905
908
  get isActive() {
906
909
  return this.#_isActive;
907
910
  }
@@ -964,13 +967,16 @@ class SkyDataViewComponent {
964
967
  }
965
968
  }
966
969
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDataViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
967
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyDataViewComponent, isStandalone: true, selector: "sky-data-view", inputs: { viewId: "viewId" }, hostDirectives: [{ directive: i1.SkyResponsiveHostDirective }, { directive: i2$1.SkyTextHighlightDirective }], ngImport: i0, template: "@if (isActive) {\n <ng-content />\n}\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
970
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyDataViewComponent, isStandalone: true, selector: "sky-data-view", inputs: { viewId: "viewId" }, host: { properties: { "attr.data-view-id": "this.dataViewId" } }, hostDirectives: [{ directive: i1.SkyResponsiveHostDirective }, { directive: i2$1.SkyTextHighlightDirective }], ngImport: i0, template: "@if (isActive) {\n <ng-content />\n}\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
968
971
  }
969
972
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDataViewComponent, decorators: [{
970
973
  type: Component,
971
974
  args: [{ standalone: true, selector: 'sky-data-view', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [SkyResponsiveHostDirective, SkyTextHighlightDirective], template: "@if (isActive) {\n <ng-content />\n}\n", styles: [":host{display:block}\n"] }]
972
975
  }], propDecorators: { viewId: [{
973
976
  type: Input
977
+ }], dataViewId: [{
978
+ type: HostBinding,
979
+ args: ['attr.data-view-id']
974
980
  }] } });
975
981
 
976
982
  /**
@@ -1110,7 +1116,7 @@ class SkyDataManagerColumnPickerComponent {
1110
1116
  return formattedColumnOptions;
1111
1117
  }
1112
1118
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDataManagerColumnPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1113
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyDataManagerColumnPickerComponent, isStandalone: true, selector: "sky-data-manager-column-picker", providers: [SkyDataManagerService], ngImport: i0, template: "<sky-modal>\n <sky-modal-header>\n {{ 'skyux_data_manager_column_picker_title' | skyLibResources }}\n </sky-modal-header>\n <sky-modal-content class=\"sky-data-manager-column-picker-content\">\n <sky-data-manager>\n <sky-data-manager-toolbar />\n\n <sky-data-view [viewId]=\"viewConfig.id\">\n <sky-repeater expandMode=\"none\">\n @for (column of displayedColumnData; track column) {\n <sky-repeater-item\n [selectable]=\"true\"\n [(isSelected)]=\"column.isSelected\"\n (isSelectedChange)=\"onIsSelectedChange()\"\n >\n <sky-repeater-item-title>\n {{ column.label }}\n </sky-repeater-item-title>\n <sky-repeater-item-content>\n {{ column.description }}\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n </sky-data-view>\n </sky-data-manager>\n </sky-modal-content>\n <sky-modal-footer>\n @if (!isAnyDisplayedColumnSelected) {\n <div class=\"sky-data-manager-column-picker-footer-stacked-indicator\">\n <sky-status-indicator descriptionType=\"error\" indicatorType=\"danger\">\n {{\n 'skyux_data_manager_select_column_status_indicator_title'\n | skyLibResources\n }}\n </sky-status-indicator>\n </div>\n }\n <button\n sky-cmp-id=\"apply-changes\"\n class=\"sky-btn sky-btn-primary\"\n type=\"button\"\n [disabled]=\"!isAnyDisplayedColumnSelected\"\n (click)=\"applyChanges()\"\n >\n {{ 'skyux_data_manager_apply_changes_button_title' | skyLibResources }}\n </button>\n <button\n sky-cmp-id=\"cancel\"\n class=\"sky-btn sky-btn-link\"\n type=\"button\"\n (click)=\"cancelChanges()\"\n >\n {{ 'skyux_data_manager_cancel_button_title' | skyLibResources }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-data-manager-column-picker-content sky-repeater-item-content{margin-top:5px}.sky-data-manager-column-picker-footer-stacked-indicator{margin:0 5px 10px 0}\n"], dependencies: [{ kind: "component", type: SkyDataManagerComponent, selector: "sky-data-manager" }, { kind: "ngmodule", type: SkyDataManagerResourcesModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "component", type: SkyDataManagerToolbarComponent, selector: "sky-data-manager-toolbar" }, { kind: "component", type: SkyDataViewComponent, selector: "sky-data-view", inputs: ["viewId"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i2$2.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i2$2.λ2, selector: "sky-modal-content" }, { kind: "component", type: i2$2.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i2$2.λ4, selector: "sky-modal-header" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i3$1.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i3$1.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i3$1.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i3$1.λ12, selector: "sky-repeater-item-title" }, { kind: "ngmodule", type: SkyStatusIndicatorModule }, { kind: "component", type: i2$1.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1119
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyDataManagerColumnPickerComponent, isStandalone: true, selector: "sky-data-manager-column-picker", providers: [SkyDataManagerService], ngImport: i0, template: "<sky-modal class=\"sky-data-manager-column-picker\">\n <sky-modal-header>\n {{ 'skyux_data_manager_column_picker_title' | skyLibResources }}\n </sky-modal-header>\n <sky-modal-content class=\"sky-data-manager-column-picker-content\">\n <sky-data-manager>\n <sky-data-manager-toolbar />\n\n <sky-data-view [viewId]=\"viewConfig.id\">\n <sky-repeater expandMode=\"none\">\n @for (column of displayedColumnData; track column) {\n <sky-repeater-item\n [selectable]=\"true\"\n [(isSelected)]=\"column.isSelected\"\n (isSelectedChange)=\"onIsSelectedChange()\"\n >\n <sky-repeater-item-title>\n {{ column.label }}\n </sky-repeater-item-title>\n <sky-repeater-item-content>\n {{ column.description }}\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n </sky-data-view>\n </sky-data-manager>\n </sky-modal-content>\n <sky-modal-footer>\n @if (!isAnyDisplayedColumnSelected) {\n <div class=\"sky-data-manager-column-picker-footer-stacked-indicator\">\n <sky-status-indicator descriptionType=\"error\" indicatorType=\"danger\">\n {{\n 'skyux_data_manager_select_column_status_indicator_title'\n | skyLibResources\n }}\n </sky-status-indicator>\n </div>\n }\n <button\n sky-cmp-id=\"apply-changes\"\n class=\"sky-btn sky-btn-primary sky-data-manager-column-picker-apply-btn\"\n type=\"button\"\n [disabled]=\"!isAnyDisplayedColumnSelected\"\n (click)=\"applyChanges()\"\n >\n {{ 'skyux_data_manager_apply_changes_button_title' | skyLibResources }}\n </button>\n <button\n sky-cmp-id=\"cancel\"\n class=\"sky-btn sky-btn-link sky-data-manager-column-picker-cancel-btn\"\n type=\"button\"\n (click)=\"cancelChanges()\"\n >\n {{ 'skyux_data_manager_cancel_button_title' | skyLibResources }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-data-manager-column-picker-content sky-repeater-item-content{margin-top:5px}.sky-data-manager-column-picker-footer-stacked-indicator{margin:0 5px 10px 0}\n"], dependencies: [{ kind: "component", type: SkyDataManagerComponent, selector: "sky-data-manager" }, { kind: "ngmodule", type: SkyDataManagerResourcesModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "component", type: SkyDataManagerToolbarComponent, selector: "sky-data-manager-toolbar" }, { kind: "component", type: SkyDataViewComponent, selector: "sky-data-view", inputs: ["viewId"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i2$2.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i2$2.λ2, selector: "sky-modal-content" }, { kind: "component", type: i2$2.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i2$2.λ4, selector: "sky-modal-header" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i3$1.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i3$1.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i3$1.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: i3$1.λ12, selector: "sky-repeater-item-title" }, { kind: "ngmodule", type: SkyStatusIndicatorModule }, { kind: "component", type: i2$1.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1114
1120
  }
1115
1121
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyDataManagerColumnPickerComponent, decorators: [{
1116
1122
  type: Component,
@@ -1122,7 +1128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
1122
1128
  SkyModalModule,
1123
1129
  SkyRepeaterModule,
1124
1130
  SkyStatusIndicatorModule,
1125
- ], template: "<sky-modal>\n <sky-modal-header>\n {{ 'skyux_data_manager_column_picker_title' | skyLibResources }}\n </sky-modal-header>\n <sky-modal-content class=\"sky-data-manager-column-picker-content\">\n <sky-data-manager>\n <sky-data-manager-toolbar />\n\n <sky-data-view [viewId]=\"viewConfig.id\">\n <sky-repeater expandMode=\"none\">\n @for (column of displayedColumnData; track column) {\n <sky-repeater-item\n [selectable]=\"true\"\n [(isSelected)]=\"column.isSelected\"\n (isSelectedChange)=\"onIsSelectedChange()\"\n >\n <sky-repeater-item-title>\n {{ column.label }}\n </sky-repeater-item-title>\n <sky-repeater-item-content>\n {{ column.description }}\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n </sky-data-view>\n </sky-data-manager>\n </sky-modal-content>\n <sky-modal-footer>\n @if (!isAnyDisplayedColumnSelected) {\n <div class=\"sky-data-manager-column-picker-footer-stacked-indicator\">\n <sky-status-indicator descriptionType=\"error\" indicatorType=\"danger\">\n {{\n 'skyux_data_manager_select_column_status_indicator_title'\n | skyLibResources\n }}\n </sky-status-indicator>\n </div>\n }\n <button\n sky-cmp-id=\"apply-changes\"\n class=\"sky-btn sky-btn-primary\"\n type=\"button\"\n [disabled]=\"!isAnyDisplayedColumnSelected\"\n (click)=\"applyChanges()\"\n >\n {{ 'skyux_data_manager_apply_changes_button_title' | skyLibResources }}\n </button>\n <button\n sky-cmp-id=\"cancel\"\n class=\"sky-btn sky-btn-link\"\n type=\"button\"\n (click)=\"cancelChanges()\"\n >\n {{ 'skyux_data_manager_cancel_button_title' | skyLibResources }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-data-manager-column-picker-content sky-repeater-item-content{margin-top:5px}.sky-data-manager-column-picker-footer-stacked-indicator{margin:0 5px 10px 0}\n"] }]
1131
+ ], template: "<sky-modal class=\"sky-data-manager-column-picker\">\n <sky-modal-header>\n {{ 'skyux_data_manager_column_picker_title' | skyLibResources }}\n </sky-modal-header>\n <sky-modal-content class=\"sky-data-manager-column-picker-content\">\n <sky-data-manager>\n <sky-data-manager-toolbar />\n\n <sky-data-view [viewId]=\"viewConfig.id\">\n <sky-repeater expandMode=\"none\">\n @for (column of displayedColumnData; track column) {\n <sky-repeater-item\n [selectable]=\"true\"\n [(isSelected)]=\"column.isSelected\"\n (isSelectedChange)=\"onIsSelectedChange()\"\n >\n <sky-repeater-item-title>\n {{ column.label }}\n </sky-repeater-item-title>\n <sky-repeater-item-content>\n {{ column.description }}\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n </sky-data-view>\n </sky-data-manager>\n </sky-modal-content>\n <sky-modal-footer>\n @if (!isAnyDisplayedColumnSelected) {\n <div class=\"sky-data-manager-column-picker-footer-stacked-indicator\">\n <sky-status-indicator descriptionType=\"error\" indicatorType=\"danger\">\n {{\n 'skyux_data_manager_select_column_status_indicator_title'\n | skyLibResources\n }}\n </sky-status-indicator>\n </div>\n }\n <button\n sky-cmp-id=\"apply-changes\"\n class=\"sky-btn sky-btn-primary sky-data-manager-column-picker-apply-btn\"\n type=\"button\"\n [disabled]=\"!isAnyDisplayedColumnSelected\"\n (click)=\"applyChanges()\"\n >\n {{ 'skyux_data_manager_apply_changes_button_title' | skyLibResources }}\n </button>\n <button\n sky-cmp-id=\"cancel\"\n class=\"sky-btn sky-btn-link sky-data-manager-column-picker-cancel-btn\"\n type=\"button\"\n (click)=\"cancelChanges()\"\n >\n {{ 'skyux_data_manager_cancel_button_title' | skyLibResources }}\n </button>\n </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-data-manager-column-picker-content sky-repeater-item-content{margin-top:5px}.sky-data-manager-column-picker-footer-stacked-indicator{margin:0 5px 10px 0}\n"] }]
1126
1132
  }] });
1127
1133
 
1128
1134
  class SkyDataManagerColumnPickerImplService {