@skyux/list-builder 7.4.2 → 7.6.0

package/fesm2020/skyux-list-builder.mjs

@@ -27,7 +27,7 @@ import { SkySearchComponent, SkySearchModule } from '@skyux/lookup';
 class ListDataRequestModel {
     constructor(data) {
         /**
-         * Indicates whether to disable the search bar and filter button.
+         * Whether to disable the search bar and filter button.
          * @default false
          */
         this.isToolbarDisabled = false;
@@ -74,18 +74,18 @@ class ListDataProvider {
 class ListSearchModel {
     constructor(data) {
         /**
-         * Specifies the text to search.
+         * The text to search.
          * @default ""
          */
         this.searchText = '';
         /**
-         * Specifies an array of functions that returns a `boolean` value of `true` when
+         * The array of functions that returns a `boolean` value of `true` when
          * the search is successful. This property accepts a function of type
          * `(data: any, searchText: string) => boolean>.`
          */
         this.functions = [];
         /**
-         * Specifies the columns to search. The columns correspond to `field` values that
+         * The columns to search. The columns correspond to `field` values that
          * you specify with the list component's `data` property.
          */
         this.fieldSelectors = [];
@@ -635,15 +635,15 @@ class ListSelectedModel {
 class ListSortModel {
     constructor(data) {
         /**
-         * Specifies the list of available views to sort.
+         * The list of available views to sort.
          */
         this.available = [];
         /**
-         * Specifies whether the sort applies to all list views.
+         * The list views that the sort applies to.
          */
         this.global = [];
         /**
-         * Specifies the fields to sort.
+         * The fields to sort.
          * For information about `ListSortFieldSelectorModel`, see the
          * [shared classes for lists](https://developer.blackbaud.com/skyux-list-builder-common/docs/list-builder-common).
          */
@@ -887,12 +887,12 @@ class ListSelectedOrchestrator extends ListStateOrchestrator {
 class ListSortLabelModel {
     constructor(data) {
         /**
-         * Indicates whether to sort all fields.
+         * Whether to sort all fields.
          * @default false
          */
         this.global = false;
         /**
-         * Indicates whether to sort in descending order.
+         * Whether to sort in descending order.
          * @default false
          */
         this.descending = false;
@@ -1103,7 +1103,7 @@ class SkyListComponent {
         this.dispatcher = dispatcher;
         this.id = `sky-list-cmp-${++idIndex$1}`;
         /**
-         * Specifies the data to display. The list component requires this property or the
+         * The data to display. The list component requires this property or the
          * `dataProvider` property. For checklist or multiselect grids, each row requires an
          * `id` property to manage selected items with the `selectedIds` input and the
          * `selectedIdsChange` event. If you do not provide an `id`, the list automatically
@@ -1112,7 +1112,7 @@ class SkyListComponent {
          */
         this.data = [];
         /**
-         * Specifies a set of filters to apply to list data.
+         * The set of filters to apply to list data.
          * These filters create a filter summary when the list includes the
          * [`sky-list-filter-summary`](https://developer.blackbaud.com/skyux/components/list/filters)
          * component.
@@ -1401,7 +1401,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImpo
 class ListFilterModel {
     constructor(data) {
         /**
-         * Indicates whether users can dismiss the filter's summary item.
+         * Whether users can dismiss the filter's summary item.
          * @default true
          */
         this.dismissible = true;
@@ -1692,7 +1692,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImpo
         }] });
 
 /**
- * Provides a SKY UX-themed pagination control to display list data across multiple pages.
+ * The SKY UX-themed pagination control that displays list data across multiple pages.
  * @internal
  * @deprecated
  */
@@ -1714,17 +1714,17 @@ class SkyListPagingComponent extends ListPagingComponent {
     constructor(state, dispatcher, logger) {
         super(state, dispatcher);
         /**
-         * Specifies the number of list items per page.
+         * The number of list items per page.
          * @default 10
          */
         this.pageSize = 10;
         /**
-         * Specifies the maximum pages to display.
+         * The maximum pages to display.
          * @default 5
          */
         this.maxPages = 5;
         /**
-         * Specifies the current page number.
+         * The current page number.
          * @default 1
          */
         this.pageNumber = 1;
@@ -1807,8 +1807,8 @@ const RESOURCES = {
     'EN-US': {
         skyux_list_show_secondary_actions_button: { message: 'More' },
         skyux_list_multiselect_clear_all: { message: 'Clear all' },
-        skyux_list_mutliselect_select_all: { message: 'Select all' },
-        skyux_list_mutliselect_show_selected: {
+        skyux_list_multiselect_select_all: { message: 'Select all' },
+        skyux_list_multiselect_show_selected: {
             message: 'Only show selected items',
         },
         skyux_list_view_switcher_dropdown_title: { message: 'Select view' },
@@ -2064,7 +2064,7 @@ class SkyListMultiselectToolbarComponent {
                 this.reapplyFilter(true);
             }
         });
-        // If 'show-selected' filter is programatically set from a child component (e.g. checkilst),
+        // If 'show-selected' filter is programmatically set from a child component (e.g. checklist),
         // make sure the checked state of the 'show-selected' checkbox stays in sync.
         this.state
             .pipe(map((t) => t.filters), takeUntil(this.ngUnsubscribe), distinctUntilChanged(this.showSelectedValuesEqual))
@@ -2167,10 +2167,10 @@ class SkyListMultiselectToolbarComponent {
     }
 }
 SkyListMultiselectToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyListMultiselectToolbarComponent, deps: [{ token: ListState }, { token: ListStateDispatcher }], target: i0.ɵɵFactoryTarget.Component });
-SkyListMultiselectToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyListMultiselectToolbarComponent, selector: "sky-list-multiselect-toolbar", inputs: { showOnlySelected: "showOnlySelected" }, ngImport: i0, template: "<sky-toolbar class=\"sky-list-multiselect-toolbar\">\n  <sky-toolbar-section>\n    <sky-toolbar-item>\n      <sky-list-toolbar-item-renderer [template]=\"selectAllTemplate\">\n      </sky-list-toolbar-item-renderer>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <sky-list-toolbar-item-renderer [template]=\"clearSelectionsTemplate\">\n      </sky-list-toolbar-item-renderer>\n    </sky-toolbar-item>\n    <sky-toolbar-view-actions>\n      <ng-container *ngTemplateOutlet=\"showSelectedTemplate\"></ng-container>\n    </sky-toolbar-view-actions>\n  </sky-toolbar-section>\n</sky-toolbar>\n\n<ng-template #selectAllTemplate>\n  <button\n    class=\"sky-btn sky-btn-link\"\n    type=\"button\"\n    [attr.id]=\"multiselectToolbarId + '-select-all'\"\n    (click)=\"selectAll(); $event.preventDefault()\"\n  >\n    {{ 'skyux_list_mutliselect_select_all' | skyLibResources }}\n  </button>\n</ng-template>\n\n<ng-template #clearSelectionsTemplate>\n  <button\n    class=\"sky-btn sky-btn-link\"\n    type=\"button\"\n    [attr.id]=\"multiselectToolbarId + '-clear-all'\"\n    (click)=\"clearSelections(); $event.preventDefault()\"\n  >\n    {{ 'skyux_list_multiselect_clear_all' | skyLibResources }}\n  </button>\n</ng-template>\n\n<ng-template #showSelectedTemplate>\n  <sky-checkbox\n    [attr.id]=\"multiselectToolbarId + '-show-selected'\"\n    [checked]=\"showOnlySelected\"\n    (change)=\"changeVisibleItems($event)\"\n  >\n    <sky-checkbox-label>\n      {{ 'skyux_list_mutliselect_show_selected' | skyLibResources }}\n    </sky-checkbox-label>\n  </sky-checkbox>\n</ng-template>\n", styles: [":host-context(sky-toolbar)+.sky-list-multiselect-toolbar ::ng-deep .sky-toolbar-container,:host-context(.sky-list-toolbar-search)+.sky-list-multiselect-toolbar ::ng-deep .sky-toolbar-container{border-top:none}\n"], dependencies: [{ kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i4$2.λ4, selector: "sky-checkbox-label" }, { kind: "component", type: i5$1.λ37, selector: "sky-toolbar" }, { kind: "component", type: i5$1.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i5$1.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i5$1.λ40, selector: "sky-toolbar-view-actions" }, { kind: "component", type: SkyListToolbarItemRendererComponent, selector: "sky-list-toolbar-item-renderer", inputs: ["template"] }, { kind: "pipe", type: i5.SkyLibResourcesPipe, name: "skyLibResources" }] });
+SkyListMultiselectToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyListMultiselectToolbarComponent, selector: "sky-list-multiselect-toolbar", inputs: { showOnlySelected: "showOnlySelected" }, ngImport: i0, template: "<sky-toolbar class=\"sky-list-multiselect-toolbar\">\n  <sky-toolbar-section>\n    <sky-toolbar-item>\n      <sky-list-toolbar-item-renderer [template]=\"selectAllTemplate\">\n      </sky-list-toolbar-item-renderer>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <sky-list-toolbar-item-renderer [template]=\"clearSelectionsTemplate\">\n      </sky-list-toolbar-item-renderer>\n    </sky-toolbar-item>\n    <sky-toolbar-view-actions>\n      <ng-container *ngTemplateOutlet=\"showSelectedTemplate\"></ng-container>\n    </sky-toolbar-view-actions>\n  </sky-toolbar-section>\n</sky-toolbar>\n\n<ng-template #selectAllTemplate>\n  <button\n    class=\"sky-btn sky-btn-link\"\n    type=\"button\"\n    [attr.id]=\"multiselectToolbarId + '-select-all'\"\n    (click)=\"selectAll(); $event.preventDefault()\"\n  >\n    {{ 'skyux_list_multiselect_select_all' | skyLibResources }}\n  </button>\n</ng-template>\n\n<ng-template #clearSelectionsTemplate>\n  <button\n    class=\"sky-btn sky-btn-link\"\n    type=\"button\"\n    [attr.id]=\"multiselectToolbarId + '-clear-all'\"\n    (click)=\"clearSelections(); $event.preventDefault()\"\n  >\n    {{ 'skyux_list_multiselect_clear_all' | skyLibResources }}\n  </button>\n</ng-template>\n\n<ng-template #showSelectedTemplate>\n  <sky-checkbox\n    [attr.id]=\"multiselectToolbarId + '-show-selected'\"\n    [checked]=\"showOnlySelected\"\n    (change)=\"changeVisibleItems($event)\"\n  >\n    <sky-checkbox-label>\n      {{ 'skyux_list_multiselect_show_selected' | skyLibResources }}\n    </sky-checkbox-label>\n  </sky-checkbox>\n</ng-template>\n", styles: [":host-context(sky-toolbar)+.sky-list-multiselect-toolbar ::ng-deep .sky-toolbar-container,:host-context(.sky-list-toolbar-search)+.sky-list-multiselect-toolbar ::ng-deep .sky-toolbar-container{border-top:none}\n"], dependencies: [{ kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i4$2.λ4, selector: "sky-checkbox-label" }, { kind: "component", type: i5$1.λ37, selector: "sky-toolbar" }, { kind: "component", type: i5$1.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i5$1.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i5$1.λ40, selector: "sky-toolbar-view-actions" }, { kind: "component", type: SkyListToolbarItemRendererComponent, selector: "sky-list-toolbar-item-renderer", inputs: ["template"] }, { kind: "pipe", type: i5.SkyLibResourcesPipe, name: "skyLibResources" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyListMultiselectToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-list-multiselect-toolbar', template: "<sky-toolbar class=\"sky-list-multiselect-toolbar\">\n  <sky-toolbar-section>\n    <sky-toolbar-item>\n      <sky-list-toolbar-item-renderer [template]=\"selectAllTemplate\">\n      </sky-list-toolbar-item-renderer>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <sky-list-toolbar-item-renderer [template]=\"clearSelectionsTemplate\">\n      </sky-list-toolbar-item-renderer>\n    </sky-toolbar-item>\n    <sky-toolbar-view-actions>\n      <ng-container *ngTemplateOutlet=\"showSelectedTemplate\"></ng-container>\n    </sky-toolbar-view-actions>\n  </sky-toolbar-section>\n</sky-toolbar>\n\n<ng-template #selectAllTemplate>\n  <button\n    class=\"sky-btn sky-btn-link\"\n    type=\"button\"\n    [attr.id]=\"multiselectToolbarId + '-select-all'\"\n    (click)=\"selectAll(); $event.preventDefault()\"\n  >\n    {{ 'skyux_list_mutliselect_select_all' | skyLibResources }}\n  </button>\n</ng-template>\n\n<ng-template #clearSelectionsTemplate>\n  <button\n    class=\"sky-btn sky-btn-link\"\n    type=\"button\"\n    [attr.id]=\"multiselectToolbarId + '-clear-all'\"\n    (click)=\"clearSelections(); $event.preventDefault()\"\n  >\n    {{ 'skyux_list_multiselect_clear_all' | skyLibResources }}\n  </button>\n</ng-template>\n\n<ng-template #showSelectedTemplate>\n  <sky-checkbox\n    [attr.id]=\"multiselectToolbarId + '-show-selected'\"\n    [checked]=\"showOnlySelected\"\n    (change)=\"changeVisibleItems($event)\"\n  >\n    <sky-checkbox-label>\n      {{ 'skyux_list_mutliselect_show_selected' | skyLibResources }}\n    </sky-checkbox-label>\n  </sky-checkbox>\n</ng-template>\n", styles: [":host-context(sky-toolbar)+.sky-list-multiselect-toolbar ::ng-deep .sky-toolbar-container,:host-context(.sky-list-toolbar-search)+.sky-list-multiselect-toolbar ::ng-deep .sky-toolbar-container{border-top:none}\n"] }]
+            args: [{ selector: 'sky-list-multiselect-toolbar', template: "<sky-toolbar class=\"sky-list-multiselect-toolbar\">\n  <sky-toolbar-section>\n    <sky-toolbar-item>\n      <sky-list-toolbar-item-renderer [template]=\"selectAllTemplate\">\n      </sky-list-toolbar-item-renderer>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <sky-list-toolbar-item-renderer [template]=\"clearSelectionsTemplate\">\n      </sky-list-toolbar-item-renderer>\n    </sky-toolbar-item>\n    <sky-toolbar-view-actions>\n      <ng-container *ngTemplateOutlet=\"showSelectedTemplate\"></ng-container>\n    </sky-toolbar-view-actions>\n  </sky-toolbar-section>\n</sky-toolbar>\n\n<ng-template #selectAllTemplate>\n  <button\n    class=\"sky-btn sky-btn-link\"\n    type=\"button\"\n    [attr.id]=\"multiselectToolbarId + '-select-all'\"\n    (click)=\"selectAll(); $event.preventDefault()\"\n  >\n    {{ 'skyux_list_multiselect_select_all' | skyLibResources }}\n  </button>\n</ng-template>\n\n<ng-template #clearSelectionsTemplate>\n  <button\n    class=\"sky-btn sky-btn-link\"\n    type=\"button\"\n    [attr.id]=\"multiselectToolbarId + '-clear-all'\"\n    (click)=\"clearSelections(); $event.preventDefault()\"\n  >\n    {{ 'skyux_list_multiselect_clear_all' | skyLibResources }}\n  </button>\n</ng-template>\n\n<ng-template #showSelectedTemplate>\n  <sky-checkbox\n    [attr.id]=\"multiselectToolbarId + '-show-selected'\"\n    [checked]=\"showOnlySelected\"\n    (change)=\"changeVisibleItems($event)\"\n  >\n    <sky-checkbox-label>\n      {{ 'skyux_list_multiselect_show_selected' | skyLibResources }}\n    </sky-checkbox-label>\n  </sky-checkbox>\n</ng-template>\n", styles: [":host-context(sky-toolbar)+.sky-list-multiselect-toolbar ::ng-deep .sky-toolbar-container,:host-context(.sky-list-toolbar-search)+.sky-list-multiselect-toolbar ::ng-deep .sky-toolbar-container{border-top:none}\n"] }]
         }], ctorParameters: function () { return [{ type: ListState }, { type: ListStateDispatcher }]; }, propDecorators: { showOnlySelected: [{
                 type: Input
             }] } });
@@ -2183,16 +2183,16 @@ let idIndex = 0;
 class SkyListToolbarItemComponent {
     constructor() {
         /**
-         * Specifies the ID of the item.
+         * The ID of the item.
          */
         this.id = `sky-list-toolbar-item-${++idIndex}`;
         /**
-         * Specifies the index of the item at the given item location.
+         * The index of the item at the given item location.
          * @default -1
          */
         this.index = -1;
         /**
-         * Specifies the toolbar location of the item. The valid options are `"left"`,
+         * The toolbar location of the item. The valid options are `"left"`,
          * `"center"`, and `"right"`.
          * @default "left"
          */
@@ -2414,7 +2414,7 @@ class SkyListToolbarComponent {
         });
     }
     /**
-     * Indicates whether to use the in-memory search.
+     * Whether to use the in-memory search.
      * Setting this to `false` will allow consumers to run their own searches remotely,
      * and push new values to the list component by updating the `data` property.
      * @default true