@skyux/lists 8.7.2 → 9.0.0-alpha.1

package/fesm2022/skyux-lists.mjs

@@ -0,0 +1,1913 @@
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { NgModule, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, Injectable, ElementRef, ViewEncapsulation, ContentChild, HostBinding, ViewChild, ContentChildren, HostListener, inject, ChangeDetectorRef, Renderer2 } from '@angular/core';
+import * as i2 from '@skyux/indicators';
+import { SkyIconModule, SkyTokensModule, SkyWaitModule, SkyChevronModule } from '@skyux/indicators';
+import * as i3 from '@skyux/theme';
+import { SkyThemeModule } from '@skyux/theme';
+import * as i3$1 from '@skyux/i18n';
+import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
+import { Subject, fromEvent, BehaviorSubject, forkJoin } from 'rxjs';
+import { takeUntil, filter, map } from 'rxjs/operators';
+import * as i1$1 from '@skyux/core';
+import { SkyScrollableHostService, SkyLogService, SkyIdModule } from '@skyux/core';
+import * as i2$1 from '@angular/cdk/observers';
+import { ObserversModule } from '@angular/cdk/observers';
+import * as i6 from '@skyux/forms';
+import { SkyCheckboxModule } from '@skyux/forms';
+import * as i7 from '@skyux/inline-form';
+import { SkyInlineFormModule } from '@skyux/inline-form';
+import * as i1$2 from 'ng2-dragula';
+import { DragulaService, DragulaModule } from 'ng2-dragula';
+import { skyAnimationSlide } from '@skyux/animations';
+import autoScroll from 'dom-autoscroller';
+import * as i2$2 from '@skyux/popovers';
+import { SkyDropdownMessageType, SkyDropdownModule } from '@skyux/popovers';
+
+/**
+ * NOTICE: DO NOT MODIFY THIS FILE!
+ * The contents of this file were automatically generated by
+ * the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-lists' schematic.
+ * To update this file, simply rerun the command.
+ */
+const RESOURCES = {
+    'EN-US': {
+        skyux_filter_button_title: { message: 'Filter' },
+        skyux_filter_summary_close: { message: 'Remove filter' },
+        skyux_filter_summary_header: { message: 'Filter' },
+        skyux_infinite_scroll_load_more_button: { message: 'Load more' },
+        skyux_paging_label: { message: 'Pagination' },
+        skyux_paging_next: { message: 'Next' },
+        skyux_paging_page_link_aria_label: { message: 'Page {0}' },
+        skyux_paging_previous: { message: 'Previous' },
+        skyux_repeater_label: { message: 'List of items' },
+        skyux_repeater_item_collapse: { message: 'Collapse {0}' },
+        skyux_repeater_item_collapse_default: { message: 'Collapse' },
+        skyux_repeater_item_expand: { message: 'Expand {0}' },
+        skyux_repeater_item_expand_default: { message: 'Expand' },
+        skyux_repeater_item_checkbox_label: { message: 'Select {0}' },
+        skyux_repeater_item_checkbox_label_default: { message: 'Select row' },
+        skyux_repeater_item_reorder_cancel: {
+            message: 'Item reordering was canceled. The item was returned to its original position.',
+        },
+        skyux_repeater_item_reorder_finish: {
+            message: 'Dropped the item in position',
+        },
+        skyux_repeater_item_reorder_instructions: {
+            message: 'Item grabbed. Press the up and down arrow keys to change position. Press the spacebar or enter key to drop. And press the escape key to cancel.',
+        },
+        skyux_repeater_item_reorder_moved: {
+            message: 'Moved the item to position',
+        },
+        skyux_repeater_item_reorder_label_default: { message: 'Reorder' },
+        skyux_repeater_item_reorder_label: { message: 'Reorder {0}' },
+        skyux_repeater_item_reorder_operation: {
+            message: 'Press the spacebar or enter key to reorder.',
+        },
+        skyux_repeater_item_reorder_top: { message: 'Top' },
+        skyux_repeater_item_reorder_top_label: { message: 'Move {0} to top' },
+        skyux_repeater_item_reorder_top_label_default: { message: 'Move to top' },
+        skyux_sort_button_label: { message: 'Sort' },
+        skyux_sort_menu_heading: { message: 'Sort by' },
+    },
+};
+class SkyListsResourcesProvider {
+    getString(localeInfo, name) {
+        return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
+    }
+}
+/**
+ * Import into any component library module that needs to use resource strings.
+ */
+class SkyListsResourcesModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyListsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyListsResourcesModule, exports: [SkyI18nModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyListsResourcesModule, providers: [
+            {
+                provide: SKY_LIB_RESOURCES_PROVIDERS,
+                useClass: SkyListsResourcesProvider,
+                multi: true,
+            },
+        ], imports: [SkyI18nModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyListsResourcesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyI18nModule],
+                    providers: [
+                        {
+                            provide: SKY_LIB_RESOURCES_PROVIDERS,
+                            useClass: SkyListsResourcesProvider,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
+
+let nextId = 0;
+class SkyFilterButtonComponent {
+    /**
+     * The ID for the filter button.
+     */
+    get filterButtonId() {
+        return this.#filterButtonIdOrDefault;
+    }
+    set filterButtonId(value) {
+        this.#filterButtonIdOrDefault = value || this.#defaultButtonId;
+    }
+    constructor() {
+        /**
+         * Whether the filtering options are exposed.
+         * To support [accessibility rules for disclosures](https://www.w3.org/TR/wai-aria-practices-1.1/#disclosure),
+         * this property is necessary to set the `aria-expanded` attribute when using inline filters.
+         * For more information about the `aria-expanded` attribute, see the [WAI-ARIA definition](https://www.w3.org/TR/wai-aria/#aria-expanded).
+         */
+        this.ariaExpanded = false;
+        /**
+         * Whether to highlight the filter button to indicate that filters were applied.
+         * We recommend setting this property to `true` when no indication of filtering is visible
+         * to users. For example, set it to `true` if you do not display the filter summary.
+         */
+        this.active = false;
+        /**
+         * Whether to disable the filter button.
+         */
+        this.disabled = false;
+        /**
+         * Whether to display a "Filter" label beside the icon on the filter button.
+         */
+        this.showButtonText = false;
+        /**
+         * Fires when the filter button is selected.
+         */
+        this.filterButtonClick = new EventEmitter();
+        this.#filterButtonIdOrDefault =
+            this.#defaultButtonId = `sky-filter-button-${++nextId}`;
+    }
+    #defaultButtonId;
+    #filterButtonIdOrDefault;
+    filterButtonOnClick() {
+        this.filterButtonClick.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFilterButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyFilterButtonComponent, selector: "sky-filter-button", inputs: { filterButtonId: "filterButtonId", ariaControls: "ariaControls", ariaExpanded: "ariaExpanded", active: "active", disabled: "disabled", showButtonText: "showButtonText" }, outputs: { filterButtonClick: "filterButtonClick" }, ngImport: i0, template: "<button\n  class=\"sky-btn sky-btn-default sky-filter-btn\"\n  type=\"button\"\n  [attr.aria-controls]=\"ariaControls\"\n  [attr.aria-expanded]=\"ariaExpanded\"\n  [attr.aria-label]=\"'skyux_filter_button_title' | skyLibResources\"\n  [attr.title]=\"'skyux_filter_button_title' | skyLibResources\"\n  [disabled]=\"disabled\"\n  [id]=\"filterButtonId\"\n  [ngClass]=\"{\n    'sky-filter-btn-active': active\n  }\"\n  [skyThemeClass]=\"{\n    'sky-rounded-corners': 'default',\n    'sky-theme-modern': 'modern'\n  }\"\n  (click)=\"filterButtonOnClick()\"\n>\n  <sky-icon *skyThemeIf=\"'default'\" icon=\"filter\" size=\"lg\"> </sky-icon>\n  <sky-icon *skyThemeIf=\"'modern'\" icon=\"filter\" iconType=\"skyux\"></sky-icon>\n  <span *ngIf=\"showButtonText\" class=\"sky-filter-btn-text\">\n    {{ 'skyux_filter_button_title' | skyLibResources }}\n  </span>\n</button>\n", styles: [".sky-filter-btn-active,.sky-filter-btn-active:hover,.sky-filter-btn-active:focus{color:#72bf44;border:2px solid #72bf44;padding:5px 11px}.sky-filter-btn-active:hover,.sky-filter-btn-active:focus{color:#212327}.sky-theme-modern.sky-filter-btn-active,.sky-theme-modern.sky-filter-btn-active:hover,.sky-theme-modern.sky-filter-btn-active:focus{color:initial;border:none;box-shadow:inset 0 0 0 1px #0974a1;background-color:#c1e8fb;color:#212327;padding:9px 21px}.sky-theme-modern.sky-filter-btn-active:hover,.sky-theme-modern.sky-filter-btn-active:hover:hover,.sky-theme-modern.sky-filter-btn-active:focus:hover{border:none;box-shadow:inset 0 0 0 1px #0974a1;text-decoration:none}.sky-theme-modern.sky-filter-btn-active:hover,.sky-theme-modern.sky-filter-btn-active:active,.sky-theme-modern.sky-filter-btn-active.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:hover:hover,.sky-theme-modern.sky-filter-btn-active:hover:active,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:focus:hover,.sky-theme-modern.sky-filter-btn-active:focus:active,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-active{color:#212327}.sky-theme-modern.sky-filter-btn-active:active,.sky-theme-modern.sky-filter-btn-active.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:hover:active,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:focus:active,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-active{border:none;box-shadow:inset 0 0 0 2px #0974a1;background-image:none}.sky-theme-modern.sky-filter-btn-active.sky-btn-disabled,.sky-theme-modern.sky-filter-btn-active.sky-btn-disabled:hover,.sky-theme-modern.sky-filter-btn-active.sky-btn-disabled:focus-visible,.sky-theme-modern.sky-filter-btn-active.sky-btn-disabled.sky-btn-focus,.sky-theme-modern.sky-filter-btn-active.sky-btn-disabled:active,.sky-theme-modern.sky-filter-btn-active.sky-btn-disabled.sky-btn-active,.sky-theme-modern.sky-filter-btn-active[disabled],.sky-theme-modern.sky-filter-btn-active[disabled]:hover,.sky-theme-modern.sky-filter-btn-active[disabled]:focus-visible,.sky-theme-modern.sky-filter-btn-active[disabled].sky-btn-focus,.sky-theme-modern.sky-filter-btn-active[disabled]:active,.sky-theme-modern.sky-filter-btn-active[disabled].sky-btn-active,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-disabled,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-disabled:hover,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-disabled:focus-visible,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-disabled.sky-btn-focus,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-disabled:active,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-disabled.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:hover[disabled],.sky-theme-modern.sky-filter-btn-active:hover[disabled]:hover,.sky-theme-modern.sky-filter-btn-active:hover[disabled]:focus-visible,.sky-theme-modern.sky-filter-btn-active:hover[disabled].sky-btn-focus,.sky-theme-modern.sky-filter-btn-active:hover[disabled]:active,.sky-theme-modern.sky-filter-btn-active:hover[disabled].sky-btn-active,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-disabled,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-disabled:hover,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-disabled:focus-visible,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-disabled.sky-btn-focus,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-disabled:active,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-disabled.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:focus[disabled],.sky-theme-modern.sky-filter-btn-active:focus[disabled]:hover,.sky-theme-modern.sky-filter-btn-active:focus[disabled]:focus-visible,.sky-theme-modern.sky-filter-btn-active:focus[disabled].sky-btn-focus,.sky-theme-modern.sky-filter-btn-active:focus[disabled]:active,.sky-theme-modern.sky-filter-btn-active:focus[disabled].sky-btn-active{border:none;box-shadow:inset 0 0 0 1px #d2d2d2;background-color:#ededee;color:#686c73;opacity:1}.sky-theme-modern.sky-filter-btn-active:focus-visible,.sky-theme-modern.sky-filter-btn-active:hover:focus-visible,.sky-theme-modern.sky-filter-btn-active:focus:focus-visible{outline:none}.sky-theme-modern.sky-filter-btn-active:focus-visible:not(:active),.sky-theme-modern.sky-filter-btn-active:hover:focus-visible:not(:active),.sky-theme-modern.sky-filter-btn-active:focus:focus-visible:not(:active){border:none;box-shadow:inset 0 0 0 2px #0974a1,0 1px 8px #0000004d}:host .sky-filter-btn-text{display:none}:host .sky-filter-btn ::ng-deep .sky-dropdown-caret{display:none}:host-context(.sky-responsive-container-xs) .sky-filter-btn-text,:host-context(.sky-responsive-container-sm) .sky-filter-btn-text,:host-context(.sky-responsive-container-md) .sky-filter-btn-text,:host-context(.sky-responsive-container-lg) .sky-filter-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-filter-btn ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-sm) .sky-filter-btn ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-filter-btn ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-filter-btn ::ng-deep .sky-dropdown-caret{display:none}@media (min-width: 768px){:host .sky-filter-btn-text{display:inline}:host .sky-filter-btn ::ng-deep .sky-dropdown-caret{display:inline-block}}:host-context(.sky-responsive-container-sm) .sky-filter-btn-text,:host-context(.sky-responsive-container-md) .sky-filter-btn-text,:host-context(.sky-responsive-container-lg) .sky-filter-btn-text{display:inline}:host-context(.sky-responsive-container-sm) .sky-filter-btn ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-filter-btn ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-filter-btn ::ng-deep .sky-dropdown-caret{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i3.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFilterButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-filter-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  class=\"sky-btn sky-btn-default sky-filter-btn\"\n  type=\"button\"\n  [attr.aria-controls]=\"ariaControls\"\n  [attr.aria-expanded]=\"ariaExpanded\"\n  [attr.aria-label]=\"'skyux_filter_button_title' | skyLibResources\"\n  [attr.title]=\"'skyux_filter_button_title' | skyLibResources\"\n  [disabled]=\"disabled\"\n  [id]=\"filterButtonId\"\n  [ngClass]=\"{\n    'sky-filter-btn-active': active\n  }\"\n  [skyThemeClass]=\"{\n    'sky-rounded-corners': 'default',\n    'sky-theme-modern': 'modern'\n  }\"\n  (click)=\"filterButtonOnClick()\"\n>\n  <sky-icon *skyThemeIf=\"'default'\" icon=\"filter\" size=\"lg\"> </sky-icon>\n  <sky-icon *skyThemeIf=\"'modern'\" icon=\"filter\" iconType=\"skyux\"></sky-icon>\n  <span *ngIf=\"showButtonText\" class=\"sky-filter-btn-text\">\n    {{ 'skyux_filter_button_title' | skyLibResources }}\n  </span>\n</button>\n", styles: [".sky-filter-btn-active,.sky-filter-btn-active:hover,.sky-filter-btn-active:focus{color:#72bf44;border:2px solid #72bf44;padding:5px 11px}.sky-filter-btn-active:hover,.sky-filter-btn-active:focus{color:#212327}.sky-theme-modern.sky-filter-btn-active,.sky-theme-modern.sky-filter-btn-active:hover,.sky-theme-modern.sky-filter-btn-active:focus{color:initial;border:none;box-shadow:inset 0 0 0 1px #0974a1;background-color:#c1e8fb;color:#212327;padding:9px 21px}.sky-theme-modern.sky-filter-btn-active:hover,.sky-theme-modern.sky-filter-btn-active:hover:hover,.sky-theme-modern.sky-filter-btn-active:focus:hover{border:none;box-shadow:inset 0 0 0 1px #0974a1;text-decoration:none}.sky-theme-modern.sky-filter-btn-active:hover,.sky-theme-modern.sky-filter-btn-active:active,.sky-theme-modern.sky-filter-btn-active.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:hover:hover,.sky-theme-modern.sky-filter-btn-active:hover:active,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:focus:hover,.sky-theme-modern.sky-filter-btn-active:focus:active,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-active{color:#212327}.sky-theme-modern.sky-filter-btn-active:active,.sky-theme-modern.sky-filter-btn-active.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:hover:active,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:focus:active,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-active{border:none;box-shadow:inset 0 0 0 2px #0974a1;background-image:none}.sky-theme-modern.sky-filter-btn-active.sky-btn-disabled,.sky-theme-modern.sky-filter-btn-active.sky-btn-disabled:hover,.sky-theme-modern.sky-filter-btn-active.sky-btn-disabled:focus-visible,.sky-theme-modern.sky-filter-btn-active.sky-btn-disabled.sky-btn-focus,.sky-theme-modern.sky-filter-btn-active.sky-btn-disabled:active,.sky-theme-modern.sky-filter-btn-active.sky-btn-disabled.sky-btn-active,.sky-theme-modern.sky-filter-btn-active[disabled],.sky-theme-modern.sky-filter-btn-active[disabled]:hover,.sky-theme-modern.sky-filter-btn-active[disabled]:focus-visible,.sky-theme-modern.sky-filter-btn-active[disabled].sky-btn-focus,.sky-theme-modern.sky-filter-btn-active[disabled]:active,.sky-theme-modern.sky-filter-btn-active[disabled].sky-btn-active,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-disabled,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-disabled:hover,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-disabled:focus-visible,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-disabled.sky-btn-focus,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-disabled:active,.sky-theme-modern.sky-filter-btn-active:hover.sky-btn-disabled.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:hover[disabled],.sky-theme-modern.sky-filter-btn-active:hover[disabled]:hover,.sky-theme-modern.sky-filter-btn-active:hover[disabled]:focus-visible,.sky-theme-modern.sky-filter-btn-active:hover[disabled].sky-btn-focus,.sky-theme-modern.sky-filter-btn-active:hover[disabled]:active,.sky-theme-modern.sky-filter-btn-active:hover[disabled].sky-btn-active,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-disabled,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-disabled:hover,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-disabled:focus-visible,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-disabled.sky-btn-focus,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-disabled:active,.sky-theme-modern.sky-filter-btn-active:focus.sky-btn-disabled.sky-btn-active,.sky-theme-modern.sky-filter-btn-active:focus[disabled],.sky-theme-modern.sky-filter-btn-active:focus[disabled]:hover,.sky-theme-modern.sky-filter-btn-active:focus[disabled]:focus-visible,.sky-theme-modern.sky-filter-btn-active:focus[disabled].sky-btn-focus,.sky-theme-modern.sky-filter-btn-active:focus[disabled]:active,.sky-theme-modern.sky-filter-btn-active:focus[disabled].sky-btn-active{border:none;box-shadow:inset 0 0 0 1px #d2d2d2;background-color:#ededee;color:#686c73;opacity:1}.sky-theme-modern.sky-filter-btn-active:focus-visible,.sky-theme-modern.sky-filter-btn-active:hover:focus-visible,.sky-theme-modern.sky-filter-btn-active:focus:focus-visible{outline:none}.sky-theme-modern.sky-filter-btn-active:focus-visible:not(:active),.sky-theme-modern.sky-filter-btn-active:hover:focus-visible:not(:active),.sky-theme-modern.sky-filter-btn-active:focus:focus-visible:not(:active){border:none;box-shadow:inset 0 0 0 2px #0974a1,0 1px 8px #0000004d}:host .sky-filter-btn-text{display:none}:host .sky-filter-btn ::ng-deep .sky-dropdown-caret{display:none}:host-context(.sky-responsive-container-xs) .sky-filter-btn-text,:host-context(.sky-responsive-container-sm) .sky-filter-btn-text,:host-context(.sky-responsive-container-md) .sky-filter-btn-text,:host-context(.sky-responsive-container-lg) .sky-filter-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-filter-btn ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-sm) .sky-filter-btn ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-filter-btn ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-filter-btn ::ng-deep .sky-dropdown-caret{display:none}@media (min-width: 768px){:host .sky-filter-btn-text{display:inline}:host .sky-filter-btn ::ng-deep .sky-dropdown-caret{display:inline-block}}:host-context(.sky-responsive-container-sm) .sky-filter-btn-text,:host-context(.sky-responsive-container-md) .sky-filter-btn-text,:host-context(.sky-responsive-container-lg) .sky-filter-btn-text{display:inline}:host-context(.sky-responsive-container-sm) .sky-filter-btn ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-filter-btn ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-filter-btn ::ng-deep .sky-dropdown-caret{display:inline-block}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { filterButtonId: [{
+                type: Input
+            }], ariaControls: [{
+                type: Input
+            }], ariaExpanded: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], showButtonText: [{
+                type: Input
+            }], filterButtonClick: [{
+                type: Output
+            }] } });
+
+/**
+ * Specifies an inline filter.
+ */
+class SkyFilterInlineItemComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFilterInlineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyFilterInlineItemComponent, selector: "sky-filter-inline-item", ngImport: i0, template: "<div class=\"sky-filter-inline-item\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-filter-inline-item{margin-right:10px}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFilterInlineItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-filter-inline-item', template: "<div class=\"sky-filter-inline-item\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-filter-inline-item{margin-right:10px}\n"] }]
+        }] });
+
+/**
+ * Specifies a wrapper for the inline filters.
+ */
+class SkyFilterInlineComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFilterInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyFilterInlineComponent, selector: "sky-filter-inline", ngImport: i0, template: "<div class=\"sky-filter-inline sky-padding-even-default\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-filter-inline{background-color:#eeeeef;display:flex;align-items:center}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFilterInlineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-filter-inline', template: "<div class=\"sky-filter-inline sky-padding-even-default\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-filter-inline{background-color:#eeeeef;display:flex;align-items:center}\n"] }]
+        }] });
+
+/**
+ * Specifies a filter that was applied.
+ */
+class SkyFilterSummaryItemComponent {
+    constructor() {
+        /**
+         * Fires when the summary item close button is selected.
+         */
+        this.dismiss = new EventEmitter();
+        /**
+         * Fires when the summary item is selected.
+         */
+        this.itemClick = new EventEmitter();
+        this.#_dismissible = true;
+    }
+    /**
+     * Whether the filter summary item has a close button.
+     */
+    get dismissible() {
+        return this.#_dismissible;
+    }
+    set dismissible(value) {
+        this.#_dismissible = value !== false;
+    }
+    #_dismissible;
+    onItemDismiss() {
+        this.dismiss.emit();
+    }
+    onItemClick() {
+        this.itemClick.emit();
+    }
+    onItemKeypress() {
+        this.itemClick.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFilterSummaryItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyFilterSummaryItemComponent, selector: "sky-filter-summary-item", inputs: { dismissible: "dismissible" }, outputs: { dismiss: "dismiss", itemClick: "itemClick" }, ngImport: i0, template: "<div\n  class=\"sky-filter-summary-item\"\n  (click)=\"onItemClick()\"\n  (keypress.enter)=\"onItemKeypress()\"\n>\n  <sky-token\n    [ariaLabel]=\"'skyux_filter_summary_close' | skyLibResources\"\n    [dismissible]=\"dismissible\"\n    (dismiss)=\"onItemDismiss()\"\n  >\n    <ng-content> </ng-content>\n  </sky-token>\n</div>\n", styles: [".sky-filter-summary-item{display:inline-block}:host:not(:last-child){margin-right:5px}:host-context(.sky-theme-modern) .sky-filter-summary-item{padding:0 0 5px}.sky-theme-modern .sky-filter-summary-item{padding:0 0 5px}\n"], dependencies: [{ kind: "component", type: i2.λ12, selector: "sky-token", inputs: ["disabled", "ariaLabel", "dismissible", "focusable", "role"], outputs: ["dismiss", "tokenFocus"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFilterSummaryItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-filter-summary-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"sky-filter-summary-item\"\n  (click)=\"onItemClick()\"\n  (keypress.enter)=\"onItemKeypress()\"\n>\n  <sky-token\n    [ariaLabel]=\"'skyux_filter_summary_close' | skyLibResources\"\n    [dismissible]=\"dismissible\"\n    (dismiss)=\"onItemDismiss()\"\n  >\n    <ng-content> </ng-content>\n  </sky-token>\n</div>\n", styles: [".sky-filter-summary-item{display:inline-block}:host:not(:last-child){margin-right:5px}:host-context(.sky-theme-modern) .sky-filter-summary-item{padding:0 0 5px}.sky-theme-modern .sky-filter-summary-item{padding:0 0 5px}\n"] }]
+        }], propDecorators: { dismissible: [{
+                type: Input
+            }], dismiss: [{
+                type: Output
+            }], itemClick: [{
+                type: Output
+            }] } });
+
+/**
+ * Specifies a wrapper for the filters that were applied.
+ */
+class SkyFilterSummaryComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFilterSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyFilterSummaryComponent, selector: "sky-filter-summary", ngImport: i0, template: "<div class=\"sky-filter-summary\">\n  <span class=\"sky-filter-summary-header\"\n    >{{ 'skyux_filter_summary_header' | skyLibResources }}:</span\n  >\n  <div class=\"sky-filter-summary-items\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".sky-filter-summary-header{margin:5px 10px 0 0;font-weight:600}.sky-filter-summary{background-color:#fff;overflow-x:auto;display:flex;align-items:flex-start}.sky-filter-summary-items{display:flex;flex-wrap:wrap}:host-context(.sky-theme-modern) .sky-filter-summary-header{margin:0 10px 0 0}.sky-theme-modern .sky-filter-summary-header{margin:0 10px 0 0}\n"], dependencies: [{ kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFilterSummaryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-filter-summary', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-filter-summary\">\n  <span class=\"sky-filter-summary-header\"\n    >{{ 'skyux_filter_summary_header' | skyLibResources }}:</span\n  >\n  <div class=\"sky-filter-summary-items\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".sky-filter-summary-header{margin:5px 10px 0 0;font-weight:600}.sky-filter-summary{background-color:#fff;overflow-x:auto;display:flex;align-items:flex-start}.sky-filter-summary-items{display:flex;flex-wrap:wrap}:host-context(.sky-theme-modern) .sky-filter-summary-header{margin:0 10px 0 0}.sky-theme-modern .sky-filter-summary-header{margin:0 10px 0 0}\n"] }]
+        }] });
+
+class SkyFilterModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyFilterModule, declarations: [SkyFilterButtonComponent,
+            SkyFilterInlineComponent,
+            SkyFilterInlineItemComponent,
+            SkyFilterSummaryComponent,
+            SkyFilterSummaryItemComponent], imports: [CommonModule,
+            SkyIconModule,
+            SkyListsResourcesModule,
+            SkyTokensModule,
+            SkyThemeModule], exports: [SkyFilterButtonComponent,
+            SkyFilterInlineComponent,
+            SkyFilterInlineItemComponent,
+            SkyFilterSummaryComponent,
+            SkyFilterSummaryItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFilterModule, imports: [CommonModule,
+            SkyIconModule,
+            SkyListsResourcesModule,
+            SkyTokensModule,
+            SkyThemeModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFilterModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyFilterButtonComponent,
+                        SkyFilterInlineComponent,
+                        SkyFilterInlineItemComponent,
+                        SkyFilterSummaryComponent,
+                        SkyFilterSummaryItemComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        SkyIconModule,
+                        SkyListsResourcesModule,
+                        SkyTokensModule,
+                        SkyThemeModule,
+                    ],
+                    exports: [
+                        SkyFilterButtonComponent,
+                        SkyFilterInlineComponent,
+                        SkyFilterInlineItemComponent,
+                        SkyFilterSummaryComponent,
+                        SkyFilterSummaryItemComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyInfiniteScrollDomAdapterService {
+    #ngUnsubscribe = new Subject();
+    #observer;
+    #parentChanges;
+    #parentChangesObs;
+    #scrollableHostSvc;
+    #windowRef;
+    constructor(scrollableHostSvc, windowRef) {
+        this.#scrollableHostSvc = scrollableHostSvc;
+        this.#windowRef = windowRef;
+        this.#parentChanges = new Subject();
+        this.#parentChangesObs = this.#parentChanges.asObservable();
+    }
+    ngOnDestroy() {
+        this.#parentChanges.complete();
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+    }
+    /**
+     * This event is triggered when child nodes are added to the infinite
+     * scroll parent container. e.g., A repeating list of elements was added.
+     * @param elementRef The infinite scroll element reference.
+     */
+    parentChanges(elementRef) {
+        this.#createObserver(elementRef);
+        return this.#parentChangesObs;
+    }
+    /**
+     * This event is triggered when the provided element reference
+     * is visible (or scrolled to) within its scrollable parent container.
+     * @param elementRef The infinite scroll element reference.
+     */
+    scrollTo(elementRef) {
+        const parent = this.#scrollableHostSvc.getScrollableHost(elementRef);
+        return fromEvent(parent, 'scroll').pipe(takeUntil(this.#ngUnsubscribe), filter(() => {
+            return this.#isElementScrolledInView(elementRef.nativeElement, parent);
+        }), map(() => undefined) // Change to void return type
+        );
+    }
+    #createObserver(elementRef) {
+        this.#observer = new MutationObserver((mutations) => {
+            const hasUpdates = !!mutations.find((mutation) => {
+                return (!elementRef.nativeElement.contains(mutation.target) &&
+                    mutation.addedNodes.length > 0);
+            });
+            if (hasUpdates) {
+                this.#parentChanges.next();
+            }
+        });
+        const windowObj = this.#windowRef.nativeWindow;
+        const parent = this.#scrollableHostSvc.getScrollableHost(elementRef);
+        const observedParent = parent === windowObj ? windowObj.document.body : parent;
+        this.#observer.observe(observedParent, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    #isElementScrolledInView(element, parentElement) {
+        const windowObj = this.#windowRef.nativeWindow;
+        if (parentElement === windowObj) {
+            return (parentElement.pageYOffset + parentElement.innerHeight >
+                element.offsetTop);
+        }
+        const elementRect = element.getBoundingClientRect();
+        const parentRect = parentElement.getBoundingClientRect();
+        return elementRect.top < parentRect.top + parentRect.height;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyInfiniteScrollDomAdapterService, deps: [{ token: i1$1.SkyScrollableHostService }, { token: i1$1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyInfiniteScrollDomAdapterService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyInfiniteScrollDomAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1$1.SkyScrollableHostService }, { type: i1$1.SkyAppWindowRef }]; } });
+
+class SkyInfiniteScrollComponent {
+    /**
+     * Whether to make the infinite scroll component active when more data is available
+     * to load. By default, infinite scroll is inactive and does not call the load function.
+     * @default false
+     */
+    get enabled() {
+        return this.#_enabled;
+    }
+    set enabled(value) {
+        if (this.#_enabled !== value) {
+            this.#_enabled = value;
+            this.#setListeners();
+        }
+    }
+    /**
+     * Whether data is loading because of a `scrollEnd` event. Setting the property
+     * to `true` disables new `scrollEnd` events from firing until it changes to `false`. If this
+     * property is not specified, the infinite scroll component watches the DOM for changes
+     * and fires `scrollEnd` events when changes occur on its parent DOM element. Relying
+     * on this default behavior could fire an excessive number of `scrollEnd` events
+     * if the DOM changes are not related to loading data, so we strongly recommend using this
+     * property to explicitly set the infinite scroll's loading state.
+     * @required
+     */
+    get loading() {
+        return this.#_loading;
+    }
+    set loading(value) {
+        this.#_loading = value;
+        if (value !== undefined) {
+            this.isWaiting = value;
+        }
+    }
+    #changeDetector;
+    #domAdapter;
+    #elementRef;
+    #ngUnsubscribe;
+    #_enabled;
+    #_loading;
+    constructor(changeDetector, elementRef, domAdapter) {
+        /**
+         * Fires when scrolling triggers the need to load more data or when users select the button
+         * to load more data. This event only fires when the `enabled` property is set to `true`
+         * and data is not already loading.
+         */
+        this.scrollEnd = new EventEmitter();
+        this.isWaiting = false;
+        this.#ngUnsubscribe = new Subject();
+        this.#_enabled = false;
+        this.#changeDetector = changeDetector;
+        this.#elementRef = elementRef;
+        this.#domAdapter = domAdapter;
+    }
+    ngOnDestroy() {
+        this.enabled = false;
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+    }
+    startInfiniteScrollLoad() {
+        this.#notifyScrollEnd();
+    }
+    #notifyScrollEnd() {
+        this.isWaiting = true;
+        this.scrollEnd.emit();
+        this.#changeDetector.markForCheck();
+    }
+    #setListeners() {
+        if (this.enabled) {
+            // The user has scrolled to the infinite scroll element.
+            this.#domAdapter
+                .scrollTo(this.#elementRef)
+                .pipe(takeUntil(this.#ngUnsubscribe))
+                .subscribe(() => {
+                if (!this.isWaiting && this.enabled) {
+                    this.#notifyScrollEnd();
+                }
+            });
+            // New items have been loaded into the parent element.
+            this.#domAdapter
+                .parentChanges(this.#elementRef)
+                .pipe(takeUntil(this.#ngUnsubscribe))
+                .subscribe(() => {
+                if (!this.loading) {
+                    this.isWaiting = false;
+                    this.#changeDetector.markForCheck();
+                }
+            });
+        }
+        else {
+            this.#ngUnsubscribe.next();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyInfiniteScrollComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: SkyInfiniteScrollDomAdapterService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyInfiniteScrollComponent, selector: "sky-infinite-scroll", inputs: { enabled: "enabled", loading: "loading" }, outputs: { scrollEnd: "scrollEnd" }, providers: [SkyInfiniteScrollDomAdapterService], ngImport: i0, template: "<div *ngIf=\"enabled\" class=\"sky-infinite-scroll\">\n  <button\n    *ngIf=\"!isWaiting && enabled\"\n    class=\"sky-btn sky-btn-default sky-infinite-scroll-load-more-button\"\n    type=\"button\"\n    (click)=\"startInfiniteScrollLoad()\"\n  >\n    {{ 'skyux_infinite_scroll_load_more_button' | skyLibResources }}\n  </button>\n  <sky-wait [isWaiting]=\"isWaiting\"> </sky-wait>\n</div>\n", styles: [".sky-infinite-scroll{margin-top:20px;text-align:center;min-height:75px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyInfiniteScrollComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-infinite-scroll', changeDetection: ChangeDetectionStrategy.OnPush, providers: [SkyInfiniteScrollDomAdapterService], template: "<div *ngIf=\"enabled\" class=\"sky-infinite-scroll\">\n  <button\n    *ngIf=\"!isWaiting && enabled\"\n    class=\"sky-btn sky-btn-default sky-infinite-scroll-load-more-button\"\n    type=\"button\"\n    (click)=\"startInfiniteScrollLoad()\"\n  >\n    {{ 'skyux_infinite_scroll_load_more_button' | skyLibResources }}\n  </button>\n  <sky-wait [isWaiting]=\"isWaiting\"> </sky-wait>\n</div>\n", styles: [".sky-infinite-scroll{margin-top:20px;text-align:center;min-height:75px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: SkyInfiniteScrollDomAdapterService }]; }, propDecorators: { enabled: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], scrollEnd: [{
+                type: Output
+            }] } });
+
+class SkyInfiniteScrollModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyInfiniteScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyInfiniteScrollModule, declarations: [SkyInfiniteScrollComponent], imports: [CommonModule, SkyListsResourcesModule, SkyWaitModule], exports: [SkyInfiniteScrollComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyInfiniteScrollModule, imports: [CommonModule, SkyListsResourcesModule, SkyWaitModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyInfiniteScrollModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyInfiniteScrollComponent],
+                    imports: [CommonModule, SkyListsResourcesModule, SkyWaitModule],
+                    exports: [SkyInfiniteScrollComponent],
+                }]
+        }] });
+
+class SkyPagingComponent {
+    constructor() {
+        /**
+         * The page number of the current page. Page numbers start at 1 and increment.
+         */
+        this.currentPage = 1;
+        /**
+         * The total number of items across all pages.
+         */
+        this.itemCount = 0;
+        /**
+         * The maximum number of pages to display in the pagination control.
+         */
+        this.maxPages = 5;
+        /**
+         * The number of items to display per page.
+         */
+        this.pageSize = 10;
+        /**
+         * Fires when the current page changes and emits the new current page.
+         */
+        this.currentPageChange = new EventEmitter();
+        this.displayedPages = [];
+        this.pageCount = 0;
+    }
+    ngOnChanges(changes) {
+        this.setPage(this.currentPage);
+    }
+    setPage(pageNumber) {
+        const previousPage = this.currentPage;
+        this.#setPageCount();
+        if (pageNumber < 1 || this.pageCount < 1) {
+            this.currentPage = 1;
+        }
+        else if (pageNumber > this.pageCount) {
+            this.currentPage = this.pageCount;
+        }
+        else {
+            this.currentPage = pageNumber;
+        }
+        this.#setDisplayedPages();
+        if (previousPage !== this.currentPage) {
+            this.currentPageChange.emit(this.currentPage);
+        }
+    }
+    nextPage() {
+        this.setPage(this.currentPage + 1);
+    }
+    previousPage() {
+        this.setPage(this.currentPage - 1);
+    }
+    get isPreviousButtonDisabled() {
+        return this.currentPage === 1;
+    }
+    get isNextButtonDisabled() {
+        return this.currentPage === this.pageCount;
+    }
+    #getDisplayedPageNumbers(pageCount, maxDisplayedPages, pageNumber) {
+        const pageIndex = pageNumber - 1;
+        const pageBounds = Math.floor(maxDisplayedPages / 2);
+        let upperBound = pageIndex + pageBounds;
+        let lowerBound = pageIndex - pageBounds;
+        if (maxDisplayedPages % 2 !== 0) {
+            upperBound += 1;
+        }
+        // Wrap negative values to increase the upper bound
+        if (lowerBound < 0) {
+            upperBound -= lowerBound;
+            lowerBound = 0;
+        }
+        // Wrap overflow to decrease the lower bound
+        if (upperBound > pageCount) {
+            lowerBound -= upperBound - pageCount;
+            upperBound = pageCount;
+        }
+        // If both are the same ignore everything else and just display it all
+        if (pageCount < maxDisplayedPages) {
+            lowerBound = 0;
+            upperBound = pageCount;
+        }
+        const displayedPageNumbers = [];
+        for (let i = lowerBound; i < upperBound; i++) {
+            displayedPageNumbers.push(i + 1);
+        }
+        return displayedPageNumbers;
+    }
+    #setPageCount() {
+        if (this.itemCount === 0 || this.pageSize === 0) {
+            this.pageCount = 0;
+            return;
+        }
+        this.pageCount = Math.ceil(this.itemCount / this.pageSize);
+    }
+    #setDisplayedPages() {
+        this.displayedPages = this.#getDisplayedPageNumbers(this.pageCount, this.maxPages, this.currentPage);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPagingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyPagingComponent, selector: "sky-paging", inputs: { currentPage: "currentPage", itemCount: "itemCount", maxPages: "maxPages", pageSize: "pageSize", pagingLabel: "pagingLabel" }, outputs: { currentPageChange: "currentPageChange" }, usesOnChanges: true, ngImport: i0, template: "<nav\n  *ngIf=\"pageCount > 1\"\n  class=\"sky-paging\"\n  [attr.aria-label]=\"pagingLabel || ('skyux_paging_label' | skyLibResources)\"\n>\n  <ul>\n    <li>\n      <button\n        class=\"sky-btn sky-btn-default sky-paging-btn sky-paging-btn-previous sky-box\"\n        sky-cmp-id=\"previous\"\n        type=\"button\"\n        [attr.aria-label]=\"'skyux_paging_previous' | skyLibResources\"\n        [disabled]=\"isPreviousButtonDisabled\"\n        (click)=\"previousPage()\"\n      >\n        <sky-icon *skyThemeIf=\"'default'\" icon=\"caret-left\"></sky-icon>\n        <sky-icon\n          *skyThemeIf=\"'modern'\"\n          icon=\"chevron-left\"\n          iconType=\"skyux\"\n        ></sky-icon>\n      </button>\n    </li>\n    <li *ngFor=\"let pageNumber of displayedPages\" class=\"sky-list-paging-link\">\n      <button\n        class=\"sky-btn sky-btn-default sky-paging-btn sky-box\"\n        type=\"button\"\n        [attr.aria-current]=\"currentPage === pageNumber ? 'page' : null\"\n        [attr.sky-cmp-id]=\"pageNumber\"\n        [attr.aria-label]=\"\n          'skyux_paging_page_link_aria_label' | skyLibResources : pageNumber\n        \"\n        [disabled]=\"currentPage === pageNumber\"\n        [ngClass]=\"{ 'sky-paging-current': currentPage === pageNumber }\"\n        (click)=\"setPage(pageNumber)\"\n      >\n        {{ pageNumber }}\n      </button>\n    </li>\n    <li>\n      <button\n        class=\"sky-btn sky-btn-default sky-paging-btn sky-paging-btn-next sky-box\"\n        sky-cmp-id=\"next\"\n        type=\"button\"\n        [attr.aria-label]=\"'skyux_paging_next' | skyLibResources\"\n        [disabled]=\"isNextButtonDisabled\"\n        (click)=\"nextPage()\"\n      >\n        <sky-icon *skyThemeIf=\"'default'\" icon=\"caret-right\"></sky-icon>\n        <sky-icon\n          *skyThemeIf=\"'modern'\"\n          icon=\"chevron-right\"\n          iconType=\"skyux\"\n        ></sky-icon>\n      </button>\n    </li>\n  </ul>\n</nav>\n", styles: [":host{display:block}ul{margin:15px 0 0;display:inline-block;padding-left:0;border-radius:4px}li{display:inline}.sky-paging-btn{border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;border-radius:0;background-color:#fff;color:inherit;float:left;margin-left:-1px;padding:4px 10px;text-decoration:none;line-height:1.428571429;font-size:15px;cursor:pointer}.sky-paging-btn.sky-paging-caret{transform:none}.sky-paging-btn.sky-paging-current,.sky-paging-btn.sky-paging-current:disabled,.sky-paging-btn.sky-paging-current[disabled]{background-color:#eeeeef;cursor:default;color:inherit;opacity:1}.sky-paging-btn:hover{background-color:#d4d4d6}.sky-paging-btn:disabled{color:#686c73;cursor:not-allowed;pointer-events:none}.sky-paging-btn.sky-paging-btn-previous,.sky-paging-btn.sky-paging-btn-next{padding-left:8.5px;padding-right:8.5px}:host-context(.sky-theme-modern) .sky-paging-btn{background-color:transparent;border:none;box-shadow:none;border-radius:6px;margin-right:10px;padding:3px 10px}:host-context(.sky-theme-modern) .sky-paging-btn:hover{background-color:transparent;border:solid 1px #1870B8;padding:2px 9px;z-index:1}:host-context(.sky-theme-modern) .sky-paging-btn:active,:host-context(.sky-theme-modern) .sky-paging-btn:focus{border:solid 2px #1870B8;color:#212327;padding:1px 8px}:host-context(.sky-theme-modern) .sky-paging-btn:focus:not(:active){outline:none;box-shadow:0 1px 3px #0000004d}:host-context(.sky-theme-modern) .sky-paging-current{background-color:var(--sky-background-color-item-selected);border:solid 1px #1870B8;padding:2px 9px}.sky-theme-modern .sky-paging-btn{background-color:transparent;border:none;box-shadow:none;border-radius:6px;margin-right:10px;padding:3px 10px}.sky-theme-modern .sky-paging-btn:hover{background-color:transparent;border:solid 1px #1870B8;padding:2px 9px;z-index:1}.sky-theme-modern .sky-paging-btn:active,.sky-theme-modern .sky-paging-btn:focus{border:solid 2px #1870B8;color:#212327;padding:1px 8px}.sky-theme-modern .sky-paging-btn:focus:not(:active){outline:none;box-shadow:0 1px 3px #0000004d}.sky-theme-modern .sky-paging-current{background-color:var(--sky-background-color-item-selected);border:solid 1px #1870B8;padding:2px 9px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-paging-btn:active,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-paging-btn:focus{color:#fbfcfe}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-paging-current{background-color:#1870b8}.sky-theme-modern.sky-theme-mode-dark .sky-paging-btn:active,.sky-theme-modern.sky-theme-mode-dark .sky-paging-btn:focus{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-paging-current{background-color:#1870b8}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPagingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-paging', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n  *ngIf=\"pageCount > 1\"\n  class=\"sky-paging\"\n  [attr.aria-label]=\"pagingLabel || ('skyux_paging_label' | skyLibResources)\"\n>\n  <ul>\n    <li>\n      <button\n        class=\"sky-btn sky-btn-default sky-paging-btn sky-paging-btn-previous sky-box\"\n        sky-cmp-id=\"previous\"\n        type=\"button\"\n        [attr.aria-label]=\"'skyux_paging_previous' | skyLibResources\"\n        [disabled]=\"isPreviousButtonDisabled\"\n        (click)=\"previousPage()\"\n      >\n        <sky-icon *skyThemeIf=\"'default'\" icon=\"caret-left\"></sky-icon>\n        <sky-icon\n          *skyThemeIf=\"'modern'\"\n          icon=\"chevron-left\"\n          iconType=\"skyux\"\n        ></sky-icon>\n      </button>\n    </li>\n    <li *ngFor=\"let pageNumber of displayedPages\" class=\"sky-list-paging-link\">\n      <button\n        class=\"sky-btn sky-btn-default sky-paging-btn sky-box\"\n        type=\"button\"\n        [attr.aria-current]=\"currentPage === pageNumber ? 'page' : null\"\n        [attr.sky-cmp-id]=\"pageNumber\"\n        [attr.aria-label]=\"\n          'skyux_paging_page_link_aria_label' | skyLibResources : pageNumber\n        \"\n        [disabled]=\"currentPage === pageNumber\"\n        [ngClass]=\"{ 'sky-paging-current': currentPage === pageNumber }\"\n        (click)=\"setPage(pageNumber)\"\n      >\n        {{ pageNumber }}\n      </button>\n    </li>\n    <li>\n      <button\n        class=\"sky-btn sky-btn-default sky-paging-btn sky-paging-btn-next sky-box\"\n        sky-cmp-id=\"next\"\n        type=\"button\"\n        [attr.aria-label]=\"'skyux_paging_next' | skyLibResources\"\n        [disabled]=\"isNextButtonDisabled\"\n        (click)=\"nextPage()\"\n      >\n        <sky-icon *skyThemeIf=\"'default'\" icon=\"caret-right\"></sky-icon>\n        <sky-icon\n          *skyThemeIf=\"'modern'\"\n          icon=\"chevron-right\"\n          iconType=\"skyux\"\n        ></sky-icon>\n      </button>\n    </li>\n  </ul>\n</nav>\n", styles: [":host{display:block}ul{margin:15px 0 0;display:inline-block;padding-left:0;border-radius:4px}li{display:inline}.sky-paging-btn{border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;border-radius:0;background-color:#fff;color:inherit;float:left;margin-left:-1px;padding:4px 10px;text-decoration:none;line-height:1.428571429;font-size:15px;cursor:pointer}.sky-paging-btn.sky-paging-caret{transform:none}.sky-paging-btn.sky-paging-current,.sky-paging-btn.sky-paging-current:disabled,.sky-paging-btn.sky-paging-current[disabled]{background-color:#eeeeef;cursor:default;color:inherit;opacity:1}.sky-paging-btn:hover{background-color:#d4d4d6}.sky-paging-btn:disabled{color:#686c73;cursor:not-allowed;pointer-events:none}.sky-paging-btn.sky-paging-btn-previous,.sky-paging-btn.sky-paging-btn-next{padding-left:8.5px;padding-right:8.5px}:host-context(.sky-theme-modern) .sky-paging-btn{background-color:transparent;border:none;box-shadow:none;border-radius:6px;margin-right:10px;padding:3px 10px}:host-context(.sky-theme-modern) .sky-paging-btn:hover{background-color:transparent;border:solid 1px #1870B8;padding:2px 9px;z-index:1}:host-context(.sky-theme-modern) .sky-paging-btn:active,:host-context(.sky-theme-modern) .sky-paging-btn:focus{border:solid 2px #1870B8;color:#212327;padding:1px 8px}:host-context(.sky-theme-modern) .sky-paging-btn:focus:not(:active){outline:none;box-shadow:0 1px 3px #0000004d}:host-context(.sky-theme-modern) .sky-paging-current{background-color:var(--sky-background-color-item-selected);border:solid 1px #1870B8;padding:2px 9px}.sky-theme-modern .sky-paging-btn{background-color:transparent;border:none;box-shadow:none;border-radius:6px;margin-right:10px;padding:3px 10px}.sky-theme-modern .sky-paging-btn:hover{background-color:transparent;border:solid 1px #1870B8;padding:2px 9px;z-index:1}.sky-theme-modern .sky-paging-btn:active,.sky-theme-modern .sky-paging-btn:focus{border:solid 2px #1870B8;color:#212327;padding:1px 8px}.sky-theme-modern .sky-paging-btn:focus:not(:active){outline:none;box-shadow:0 1px 3px #0000004d}.sky-theme-modern .sky-paging-current{background-color:var(--sky-background-color-item-selected);border:solid 1px #1870B8;padding:2px 9px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-paging-btn:active,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-paging-btn:focus{color:#fbfcfe}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-paging-current{background-color:#1870b8}.sky-theme-modern.sky-theme-mode-dark .sky-paging-btn:active,.sky-theme-modern.sky-theme-mode-dark .sky-paging-btn:focus{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-paging-current{background-color:#1870b8}\n"] }]
+        }], propDecorators: { currentPage: [{
+                type: Input
+            }], itemCount: [{
+                type: Input
+            }], maxPages: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], pagingLabel: [{
+                type: Input
+            }], currentPageChange: [{
+                type: Output
+            }] } });
+
+class SkyPagingModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPagingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyPagingModule, declarations: [SkyPagingComponent], imports: [CommonModule,
+            SkyIconModule,
+            SkyListsResourcesModule,
+            SkyThemeModule], exports: [SkyPagingComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPagingModule, imports: [CommonModule,
+            SkyIconModule,
+            SkyListsResourcesModule,
+            SkyThemeModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPagingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyPagingComponent],
+                    imports: [
+                        CommonModule,
+                        SkyIconModule,
+                        SkyListsResourcesModule,
+                        SkyThemeModule,
+                    ],
+                    exports: [SkyPagingComponent],
+                }]
+        }] });
+
+/**
+ * Displays content text when the repeater is expanded.
+ */
+class SkyRepeaterItemContentComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyRepeaterItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyRepeaterItemContentComponent, selector: "sky-repeater-item-content", ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyRepeaterItemContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-repeater-item-content', template: "<ng-content></ng-content>\n" }]
+        }] });
+
+/**
+ * Wraps and styles a
+ * [`skyux-dropdown` component](https://developer.blackbaud.com/skyux-popovers/docs/dropdown).
+ */
+/* istanbul ignore next */
+/* Code coverage having problems with no statements in classes */
+class SkyRepeaterItemContextMenuComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyRepeaterItemContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyRepeaterItemContextMenuComponent, selector: "sky-repeater-item-context-menu", ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyRepeaterItemContextMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-repeater-item-context-menu', template: "<ng-content></ng-content>\n" }]
+        }] });
+
+/**
+ * Displays a header inside the repeater item.
+ */
+class SkyRepeaterItemTitleComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyRepeaterItemTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyRepeaterItemTitleComponent, selector: "sky-repeater-item-title", ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyRepeaterItemTitleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-repeater-item-title', template: "<ng-content></ng-content>\n" }]
+        }] });
+
+let uniqueId = 0;
+const DEFAULT_EXPAND_MODE = 'none';
+/**
+ * @internal
+ */
+class SkyRepeaterService {
+    constructor() {
+        this.activeItemChange = new BehaviorSubject(undefined);
+        this.activeItemIndexChange = new BehaviorSubject(undefined);
+        this.enableActiveState = false;
+        this.itemCollapseStateChange = new EventEmitter();
+        this.items = [];
+        this.itemRole = new BehaviorSubject({
+            content: undefined,
+            item: undefined,
+            title: undefined,
+        });
+        this.orderChange = new BehaviorSubject(undefined);
+        this.repeaterGroupId = ++uniqueId;
+        this.#_expandMode = DEFAULT_EXPAND_MODE;
+    }
+    // TODO: Remove 'string' as a valid type in a breaking change.
+    get expandMode() {
+        return this.#_expandMode;
+    }
+    set expandMode(value) {
+        this.#_expandMode = value ?? DEFAULT_EXPAND_MODE;
+    }
+    #_expandMode;
+    ngOnDestroy() {
+        this.activeItemChange.complete();
+        this.itemCollapseStateChange.complete();
+        this.orderChange.complete();
+    }
+    activateItem(item) {
+        if (this.enableActiveState) {
+            /* istanbul ignore else */
+            if (item && !item.disabled) {
+                const index = this.items.findIndex((i) => i === item);
+                this.activeItemIndexChange.next(index);
+                this.activeItemChange.next(item);
+            }
+        }
+    }
+    activateItemByIndex(index) {
+        /* istanbul ignore else */
+        if (this.enableActiveState) {
+            if (index === undefined) {
+                this.activeItemChange.next(undefined);
+            }
+            else {
+                const activeItem = this.items[index];
+                if (activeItem && !activeItem.disabled) {
+                    this.activeItemChange.next(activeItem);
+                }
+            }
+        }
+    }
+    registerItem(item) {
+        this.items.push(item);
+    }
+    unregisterItem(item) {
+        const indexOfDestroyedItem = this.items.indexOf(item);
+        if (indexOfDestroyedItem > -1) {
+            this.items.splice(indexOfDestroyedItem, 1);
+        }
+    }
+    onItemCollapseStateChange(item) {
+        this.itemCollapseStateChange.emit(item);
+    }
+    registerOrderChange() {
+        this.orderChange.next();
+    }
+    reorderItem(oldIndex, newIndex) {
+        this.items.splice(newIndex, 0, this.items.splice(oldIndex, 1)[0]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyRepeaterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyRepeaterService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyRepeaterService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * @internal
+ */
+class SkyRepeaterAdapterService {
+    get #repeaterItemGroupSelector() {
+        return '.sky-repeater-item-group-' + this.#repeaterService.repeaterGroupId;
+    }
+    #host;
+    #repeaterService;
+    constructor(repeaterService) {
+        this.#repeaterService = repeaterService;
+    }
+    focusElement(element) {
+        if (element) {
+            if (element instanceof ElementRef) {
+                element.nativeElement.focus();
+            }
+            else {
+                element.focus();
+            }
+        }
+    }
+    setRepeaterHost(hostRef) {
+        this.#host = hostRef;
+    }
+    getRepeaterItemIndex(element) {
+        return this.#getRepeaterItemArray().indexOf(element);
+    }
+    moveItemUp(element, top = false, steps = 1) {
+        const index = this.getRepeaterItemIndex(element);
+        if (index === 0) {
+            return;
+        }
+        let newIndex = index - steps;
+        if (top || newIndex < 0) {
+            newIndex = 0;
+        }
+        return this.#moveItem(element, index, newIndex);
+    }
+    moveItemDown(element, steps = 1) {
+        const itemArray = this.#getRepeaterItemArray();
+        const index = this.getRepeaterItemIndex(element);
+        if (index === itemArray.length - steps) {
+            return;
+        }
+        const newIndex = index + steps;
+        return this.#moveItem(element, index, newIndex);
+    }
+    #moveItem(element, oldIndex, newIndex) {
+        /* istanbul ignore else */
+        if (this.#host) {
+            const repeaterDiv = this.#host.nativeElement.querySelector('.sky-repeater');
+            repeaterDiv.removeChild(element);
+            const nextSibling = repeaterDiv.querySelectorAll(this.#repeaterItemGroupSelector)[newIndex];
+            repeaterDiv.insertBefore(element, nextSibling);
+            this.#repeaterService.reorderItem(oldIndex, newIndex);
+        }
+        return newIndex;
+    }
+    /**
+     * Returns an array of the immediate repeater item descendants. Excludes nested repeater items.
+     */
+    #getRepeaterItemArray() {
+        return Array.from(this.#host?.nativeElement.querySelectorAll(this.#repeaterItemGroupSelector));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyRepeaterAdapterService, deps: [{ token: SkyRepeaterService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyRepeaterAdapterService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyRepeaterAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: SkyRepeaterService }]; } });
+
+let nextContentId = 0;
+/**
+ * Creates an individual repeater item.
+ */
+class SkyRepeaterItemComponent {
+    /**
+     * Make the first, non-disabled item tab-focusable.
+     * - Disabled items should not be focusable per [W3C](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_disabled_controls).
+     * - One item per list/grid/listbox should be tab focusable per [W3C](https://www.w3.org/TR/wai-aria-practices-1.1/#grid).
+     */
+    get tabindex() {
+        return this.#repeaterService.items.filter((item) => !item.disabled)[0] ===
+            this
+            ? 0
+            : -1;
+    }
+    /**
+     * Whether to exclude an item when cycling through.
+     */
+    set disabled(value) {
+        if (this.#_isDisabled !== value) {
+            if (value) {
+                this.isSelected = false;
+                this.#_isDisabled = true;
+            }
+            else {
+                this.#_isDisabled = false;
+            }
+            if (this.isActive) {
+                this.#repeaterService.activateItemByIndex(undefined);
+            }
+            if (this.#elementRef.nativeElement.matches(':focus-within')) {
+                this.#elementRef.nativeElement.ownerDocument.activeElement.blur();
+            }
+            this.#changeDetector.markForCheck();
+        }
+    }
+    get disabled() {
+        return this.#_isDisabled;
+    }
+    /**
+     * Whether the repeater item is expanded.
+     * @default true
+     */
+    set isExpanded(value) {
+        this.updateForExpanded(value !== false, true);
+    }
+    get isExpanded() {
+        return this.#isExpanded;
+    }
+    /**
+     * Whether the repeater item's checkbox is selected.
+     * When users select the repeater item, the specified property on your model is updated accordingly.
+     * @default false
+     */
+    set isSelected(value) {
+        if (!this.disabled && value !== this.#_isSelected) {
+            this.#_isSelected = value;
+            this.isSelectedChange.emit(this.#_isSelected);
+        }
+    }
+    get isSelected() {
+        return this.#_isSelected;
+    }
+    set isCollapsible(value) {
+        if (this.isCollapsible !== value) {
+            this.#_isCollapsible = value !== false;
+            /*istanbul ignore else */
+            if (!this.#_isCollapsible) {
+                this.updateForExpanded(true, true);
+            }
+        }
+        this.#changeDetector.markForCheck();
+    }
+    get isCollapsible() {
+        return this.#_isCollapsible;
+    }
+    get repeaterGroupClass() {
+        return 'sky-repeater-item-group-' + this.#repeaterService.repeaterGroupId;
+    }
+    #adapterService;
+    #changeDetector;
+    #elementRef;
+    #isExpanded;
+    #keyboardReorderingEnabled;
+    #ngUnsubscribe;
+    #reorderCancelText;
+    #reorderCurrentIndex;
+    #reorderFinishText;
+    #reorderInstructions;
+    #reorderMovedText;
+    #reorderStateDescription;
+    #reorderSteps;
+    #repeaterService;
+    #resourceService;
+    #_isCollapsible;
+    #_isDisabled;
+    #_isSelected;
+    constructor(repeaterService, changeDetector, adapterService, elementRef, resourceService) {
+        /**
+         * Whether users can change the order of the repeater item.
+         * The repeater component's `reorderable` property must also be set to `true`.
+         */
+        this.reorderable = false;
+        /**
+         * Whether to display a checkbox in the left of the repeater item.
+         */
+        this.selectable = false;
+        /**
+         * Whether to display an inline form within the repeater.
+         * Users can toggle between displaying and hiding the inline form.
+         */
+        this.showInlineForm = false;
+        /**
+         * Fires when users collapse the repeater item.
+         */
+        this.collapse = new EventEmitter();
+        /**
+         * Fires when users expand the repeater item.
+         */
+        this.expand = new EventEmitter();
+        /**
+         * Fires when the repeater includes an inline form and users close it. This event emits
+         * [a `SkyInlineFormCloseArgs` type](https://developer.blackbaud.com/skyux/components/inline-form#skyinlineformcloseargs-properties).
+         */
+        this.inlineFormClose = new EventEmitter();
+        /**
+         * Fires when users select or clear the checkbox for the repeater item.
+         */
+        this.isSelectedChange = new EventEmitter();
+        this.hasItemContent = false;
+        this.isActive = false;
+        this.reorderButtonLabel = '';
+        this.animationDisabled = false;
+        this.#isExpanded = true;
+        this.#keyboardReorderingEnabled = false;
+        this.#ngUnsubscribe = new Subject();
+        this.#reorderCancelText = '';
+        this.#reorderCurrentIndex = -1;
+        this.#reorderFinishText = '';
+        this.#reorderInstructions = '';
+        this.#reorderMovedText = '';
+        this.#reorderStateDescription = '';
+        this.#reorderSteps = 0;
+        this.#_isCollapsible = true;
+        this.#_isDisabled = false;
+        this.#repeaterService = repeaterService;
+        this.#changeDetector = changeDetector;
+        this.#adapterService = adapterService;
+        this.#elementRef = elementRef;
+        this.#resourceService = resourceService;
+        this.#slideForExpanded(false);
+        forkJoin([
+            this.#resourceService.getString('skyux_repeater_item_reorder_cancel'),
+            this.#resourceService.getString('skyux_repeater_item_reorder_finish'),
+            this.#resourceService.getString('skyux_repeater_item_reorder_instructions'),
+            this.#resourceService.getString('skyux_repeater_item_reorder_operation'),
+            this.#resourceService.getString('skyux_repeater_item_reorder_moved'),
+        ])
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe(([reorderCancelText, reorderFinishText, reorderInstructionsText, reorderOperationText, reorderMovedText,]) => {
+            this.#reorderCancelText = reorderCancelText;
+            this.#reorderFinishText = reorderFinishText;
+            this.#reorderStateDescription = reorderInstructionsText;
+            this.#reorderInstructions = reorderOperationText;
+            this.#reorderMovedText = reorderMovedText;
+            this.reorderButtonLabel = this.#reorderInstructions;
+        });
+        this.contentId = `sky-repeater-item-content-${++nextContentId}`;
+        this.itemRole$ = this.#repeaterService.itemRole.asObservable();
+    }
+    ngOnInit() {
+        this.#repeaterService.registerItem(this);
+        this.#repeaterService.activeItemChange
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((item) => {
+            const newIsActiveValue = this === item;
+            if (newIsActiveValue !== this.isActive) {
+                this.isActive = newIsActiveValue;
+                this.#changeDetector.markForCheck();
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this.hasItemContent = !!this.repeaterItemContentComponents?.length;
+        this.#updateExpandOnContentChange();
+    }
+    ngOnDestroy() {
+        this.collapse.complete();
+        this.expand.complete();
+        this.inlineFormClose.complete();
+        this.isSelectedChange.complete();
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+        this.#repeaterService.unregisterItem(this);
+    }
+    onKeydown($event) {
+        if ([' ', 'Enter', 'Home', 'End', 'ArrowUp', 'ArrowDown'].includes($event.key)) {
+            if ($event.target.matches('input, textarea, select, option, [contenteditable], [contenteditable] *')) {
+                return;
+            }
+            $event.preventDefault();
+            $event.stopPropagation();
+            let activateItem = undefined;
+            /* istanbul ignore else */
+            if ([' ', 'Enter'].includes($event.key)) {
+                if (this.selectable) {
+                    this.isSelected = !this.isSelected;
+                }
+                // eslint-disable-next-line @typescript-eslint/no-this-alias
+                activateItem = this;
+            }
+            /* istanbul ignore else */
+            if (['Home', 'End'].includes($event.key)) {
+                const items = this.#repeaterService.items.filter((item) => !item.disabled);
+                if ($event.key === 'Home') {
+                    activateItem = items.shift();
+                }
+                else {
+                    activateItem = items.pop();
+                }
+            }
+            /* istanbul ignore else */
+            if (['ArrowUp', 'ArrowDown'].includes($event.key)) {
+                const currentIndex = this.#repeaterService.items.findIndex((item) => item === this);
+                let sliceFrom;
+                let sliceTo;
+                if ($event.key === 'ArrowUp') {
+                    sliceFrom = 0;
+                    sliceTo = currentIndex;
+                }
+                else {
+                    sliceFrom = currentIndex + 1;
+                    sliceTo = undefined;
+                }
+                const items = this.#repeaterService.items
+                    .slice(sliceFrom, sliceTo)
+                    .filter((item) => !item.disabled);
+                activateItem = $event.key === 'ArrowUp' ? items.pop() : items.shift();
+                if (!activateItem) {
+                    // Wrap around.
+                    if ($event.key === 'ArrowDown') {
+                        sliceFrom = 0;
+                        sliceTo = currentIndex;
+                    }
+                    else {
+                        sliceFrom = currentIndex + 1;
+                        sliceTo = undefined;
+                    }
+                    const items = this.#repeaterService.items
+                        .slice(sliceFrom, sliceTo)
+                        .filter((item) => !item.disabled);
+                    activateItem = $event.key === 'ArrowUp' ? items.pop() : items.shift();
+                }
+            }
+            /* istanbul ignore else */
+            if (activateItem && !activateItem.isActive) {
+                this.#repeaterService.activateItem(activateItem);
+                if (!activateItem.#elementRef.nativeElement.matches(':focus-within')) {
+                    activateItem.itemRef?.nativeElement.focus();
+                }
+            }
+        }
+    }
+    headerClick() {
+        if (this.isCollapsible) {
+            this.updateForExpanded(!this.isExpanded, true);
+        }
+    }
+    chevronDirectionChange(direction) {
+        this.updateForExpanded(direction === 'up', true);
+    }
+    onRepeaterItemClick(event) {
+        // Only activate item if clicking on the title, content, or parent item div.
+        // This will avoid accidental activations when clicking inside interactive elements like
+        // the expand/collapse chevron, dropdown, inline-delete, etc...
+        if (event.target === this.itemRef?.nativeElement ||
+            this.itemContentRef?.nativeElement.contains(event.target) ||
+            this.itemHeaderRef?.nativeElement.contains(event.target)) {
+            this.#repeaterService.activateItem(this);
+        }
+    }
+    updateForExpanded(value, animate) {
+        if (this.isCollapsible === false && value === false) {
+            console.warn(`Setting isExpanded to false when the repeater item is not collapsible
+        will have no effect.`);
+        }
+        else if (this.#isExpanded !== value) {
+            this.#isExpanded = value;
+            if (this.#isExpanded) {
+                this.expand.emit();
+            }
+            else {
+                this.collapse.emit();
+            }
+            this.#repeaterService.onItemCollapseStateChange(this);
+            this.#slideForExpanded(animate);
+            this.#changeDetector.markForCheck();
+        }
+    }
+    onCheckboxChange(value) {
+        this.isSelected = value.checked;
+    }
+    onInlineFormClose(inlineFormCloseArgs) {
+        this.inlineFormClose.emit(inlineFormCloseArgs);
+    }
+    moveToTop(event) {
+        event.stopPropagation();
+        this.#adapterService.moveItemUp(this.#elementRef.nativeElement, true);
+        this.#adapterService.focusElement(event.target);
+        this.#repeaterService.registerOrderChange();
+    }
+    onReorderHandleKeyDown(event) {
+        /*istanbul ignore else */
+        if (event.key) {
+            switch (event.key.toLowerCase()) {
+                case ' ':
+                case 'enter':
+                    this.#keyboardToggleReorder();
+                    event.preventDefault();
+                    event.stopPropagation();
+                    break;
+                case 'escape':
+                    /* istanbul ignore else */
+                    if (this.#keyboardReorderingEnabled) {
+                        this.#keyboardReorderingEnabled = false;
+                        this.#revertReorderSteps();
+                        this.reorderButtonLabel =
+                            this.#reorderCancelText + ' ' + this.#reorderInstructions;
+                        this.#adapterService.focusElement(event.target);
+                        event.preventDefault();
+                        event.stopPropagation();
+                    }
+                    break;
+                case 'arrowup':
+                    if (this.#keyboardReorderingEnabled) {
+                        this.#keyboardReorderUp();
+                        event.preventDefault();
+                        event.stopPropagation();
+                        this.#repeaterService.registerOrderChange();
+                    }
+                    break;
+                case 'arrowdown':
+                    /* istanbul ignore else */
+                    if (this.#keyboardReorderingEnabled) {
+                        this.#keyboardReorderDown();
+                        event.preventDefault();
+                        event.stopPropagation();
+                        this.#repeaterService.registerOrderChange();
+                    }
+                    break;
+                case 'arrowleft':
+                case 'arrowright':
+                    /* istanbul ignore else */
+                    if (this.#keyboardReorderingEnabled) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                    }
+                    break;
+                /* istanbul ignore next */
+                default:
+                    break;
+            }
+        }
+    }
+    onReorderHandleBlur(event) {
+        this.#keyboardReorderingEnabled = false;
+        this.#revertReorderSteps();
+        this.reorderButtonLabel = this.#reorderInstructions;
+        this.reorderState = undefined;
+    }
+    #slideForExpanded(animate) {
+        this.animationDisabled = !animate;
+        this.slideDirection = this.isExpanded ? 'down' : 'up';
+    }
+    #keyboardReorderUp() {
+        const newIndex = this.#adapterService.moveItemUp(this.#elementRef.nativeElement);
+        if (newIndex !== undefined) {
+            this.#reorderCurrentIndex = newIndex;
+            this.#reorderSteps--;
+            this.#adapterService.focusElement(this.grabHandle);
+            this.#keyboardReorderingEnabled = true;
+            this.reorderButtonLabel = `${this.#reorderMovedText} ${this.#reorderCurrentIndex + 1}`;
+        }
+    }
+    #keyboardReorderDown() {
+        const newIndex = this.#adapterService.moveItemDown(this.#elementRef.nativeElement);
+        if (newIndex) {
+            this.#reorderCurrentIndex = newIndex;
+            this.#reorderSteps++;
+            this.#adapterService.focusElement(this.grabHandle);
+            this.#keyboardReorderingEnabled = true;
+            this.reorderButtonLabel = `${this.#reorderMovedText} ${this.#reorderCurrentIndex + 1}`;
+        }
+    }
+    #keyboardToggleReorder() {
+        this.#keyboardReorderingEnabled = !this.#keyboardReorderingEnabled;
+        this.#reorderSteps = 0;
+        if (this.#keyboardReorderingEnabled) {
+            this.reorderState = this.#reorderStateDescription;
+        }
+        else {
+            // TODO: Needs improvement to be localized
+            this.reorderState = `${this.#reorderFinishText} ${this.#reorderCurrentIndex + 1} ${this.#reorderInstructions}`;
+            this.#reorderCurrentIndex = -1;
+        }
+    }
+    #revertReorderSteps() {
+        if (this.#reorderSteps < 0) {
+            this.#adapterService.moveItemDown(this.#elementRef.nativeElement, Math.abs(this.#reorderSteps));
+        }
+        else if (this.#reorderSteps > 0) {
+            this.#adapterService.moveItemUp(this.#elementRef.nativeElement, false, this.#reorderSteps);
+        }
+        this.#repeaterService.registerOrderChange();
+    }
+    #updateExpandOnContentChange() {
+        this.repeaterItemContentComponents?.changes
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe(() => {
+            this.hasItemContent = !!this.repeaterItemContentComponents?.length;
+            /* istanbul ignore next */
+            this.isCollapsible =
+                this.hasItemContent && this.#repeaterService.expandMode !== 'none';
+            /* istanbul ignore else */
+            if (this.#repeaterService.expandMode === 'single') {
+                this.#repeaterService.onItemCollapseStateChange(this);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyRepeaterItemComponent, deps: [{ token: SkyRepeaterService }, { token: i0.ChangeDetectorRef }, { token: SkyRepeaterAdapterService }, { token: i0.ElementRef }, { token: i3$1.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyRepeaterItemComponent, selector: "sky-repeater-item", inputs: { disabled: "disabled", itemName: "itemName", inlineFormConfig: "inlineFormConfig", inlineFormTemplate: "inlineFormTemplate", isExpanded: "isExpanded", isSelected: "isSelected", reorderable: "reorderable", selectable: "selectable", showInlineForm: "showInlineForm", tag: "tag" }, outputs: { collapse: "collapse", expand: "expand", inlineFormClose: "inlineFormClose", isSelectedChange: "isSelectedChange" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "this.repeaterGroupClass" } }, queries: [{ propertyName: "contextMenu", first: true, predicate: SkyRepeaterItemContextMenuComponent, descendants: true, read: ElementRef }, { propertyName: "repeaterItemContentComponents", predicate: SkyRepeaterItemContentComponent }], viewQueries: [{ propertyName: "grabHandle", first: true, predicate: ["grabHandle"], descendants: true, read: ElementRef }, { propertyName: "itemContentRef", first: true, predicate: ["itemContentRef"], descendants: true, read: ElementRef }, { propertyName: "itemHeaderRef", first: true, predicate: ["itemHeaderRef"], descendants: true, read: ElementRef }, { propertyName: "itemRef", first: true, predicate: ["itemRef"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  class=\"sky-repeater-item sky-padding-even-default\"\n  [attr.aria-label]=\"itemName\"\n  [attr.aria-selected]=\"selectable ? !!isSelected : undefined\"\n  [attr.role]=\"(itemRole$ | async)?.item\"\n  [attr.tabIndex]=\"tabindex\"\n  [ngClass]=\"{\n    'sky-repeater-item-active': isActive,\n    'sky-repeater-item-collapsible': isCollapsible,\n    'sky-repeater-item-selected': isSelected\n  }\"\n  (click)=\"onRepeaterItemClick($event)\"\n  #itemRef\n>\n  <div #inlineDelete>\n    <ng-content select=\"sky-inline-delete\"></ng-content>\n  </div>\n\n  <ng-container *ngIf=\"inlineFormTemplate\">\n    <sky-inline-form\n      [config]=\"inlineFormConfig\"\n      [showForm]=\"showInlineForm\"\n      [template]=\"inlineFormTemplate\"\n      (close)=\"onInlineFormClose($event)\"\n    >\n      <ng-container *ngTemplateOutlet=\"skyRepeaterItemLeft\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"skyRepeaterItemRight\"></ng-container>\n    </sky-inline-form>\n  </ng-container>\n\n  <ng-container *ngIf=\"!inlineFormTemplate\">\n    <ng-container *ngTemplateOutlet=\"skyRepeaterItemLeft\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"skyRepeaterItemRight\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #skyRepeaterItemLeft>\n  <div\n    [attr.role]=\"!showInlineForm ? (itemRole$ | async)?.content : undefined\"\n    class=\"sky-repeater-item-left\"\n  >\n    <ng-container *ngIf=\"reorderable\">\n      <span\n        aria-live=\"assertive\"\n        class=\"sky-screen-reader-only\"\n        [id]=\"contentId + '-reorder-state'\"\n      >\n        {{ reorderState }}\n      </span>\n      <span\n        class=\"sky-screen-reader-only\"\n        [id]=\"contentId + '-reorder-instructions'\"\n        >{{ reorderButtonLabel }}</span\n      >\n      <button\n        class=\"sky-btn sky-tile-tools-control sky-repeater-item-grab-handle\"\n        type=\"button\"\n        [attr.aria-describedby]=\"contentId + '-reorder-instructions'\"\n        [attr.aria-label]=\"\n          itemName\n            ? ('skyux_repeater_item_reorder_label' | skyLibResources : itemName)\n            : ('skyux_repeater_item_reorder_label_default' | skyLibResources)\n        \"\n        (blur)=\"onReorderHandleBlur($event)\"\n        (keydown)=\"onReorderHandleKeyDown($event)\"\n        #grabHandle\n      >\n        <sky-icon icon=\"arrows-v\"></sky-icon>\n      </button>\n    </ng-container>\n    <sky-checkbox\n      *ngIf=\"selectable\"\n      class=\"sky-repeater-item-checkbox\"\n      [checked]=\"isSelected\"\n      [label]=\"\n        itemName\n          ? ('skyux_repeater_item_checkbox_label' | skyLibResources : itemName)\n          : ('skyux_repeater_item_checkbox_label_default' | skyLibResources)\n      \"\n      (change)=\"onCheckboxChange($event)\"\n    >\n    </sky-checkbox>\n    <div\n      class=\"sky-repeater-item-context-menu\"\n      [hidden]=\"contextMenuEl.children.length === 0\"\n      #contextMenuEl\n    >\n      <ng-content select=\"sky-repeater-item-context-menu\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #skyRepeaterItemRight>\n  <div class=\"sky-repeater-item-right\" #itemHeaderRef>\n    <div\n      class=\"sky-repeater-item-header\"\n      [attr.role]=\"(itemRole$ | async)?.title\"\n      [hidden]=\"titleRef.children.length === 0\"\n      (click)=\"headerClick()\"\n    >\n      <div class=\"sky-repeater-item-title sky-font-emphasized\" #titleRef>\n        <ng-content select=\"sky-repeater-item-title\"></ng-content>\n      </div>\n      <button\n        *ngIf=\"reorderable\"\n        class=\"sky-btn sky-btn-link sky-repeater-item-reorder-top\"\n        type=\"button\"\n        [attr.aria-label]=\"\n          itemName\n            ? ('skyux_repeater_item_reorder_top_label'\n              | skyLibResources : itemName)\n            : ('skyux_repeater_item_reorder_top_label_default'\n              | skyLibResources)\n        \"\n        (click)=\"moveToTop($event)\"\n      >\n        <sky-icon icon=\"arrow-circle-up\"></sky-icon>\n        {{ 'skyux_repeater_item_reorder_top' | skyLibResources }}\n      </button>\n      <div *ngIf=\"isCollapsible\" class=\"sky-repeater-item-chevron\">\n        <sky-chevron\n          [ariaControls]=\"contentId\"\n          [ariaLabel]=\"\n            itemName\n              ? isExpanded\n                ? ('skyux_repeater_item_expand' | skyLibResources : itemName)\n                : ('skyux_repeater_item_collapse' | skyLibResources : itemName)\n              : isExpanded\n              ? ('skyux_repeater_item_expand_default' | skyLibResources)\n              : ('skyux_repeater_item_collapse_default' | skyLibResources)\n          \"\n          [direction]=\"isExpanded ? 'up' : 'down'\"\n          (directionChange)=\"chevronDirectionChange($event)\"\n        >\n        </sky-chevron>\n      </div>\n      <!-- Used for when the chevron is hidden to ensure that the right side is the same height as the left.-->\n      <div\n        *ngIf=\"!isCollapsible && !contextMenu\"\n        class=\"sky-repeater-item-chevron-placeholder\"\n      ></div>\n      <!-- Used to ensure that the right side is the same height as the left.-->\n      <div\n        *ngIf=\"contextMenu\"\n        class=\"sky-repeater-item-chevron-placeholder-with-context\"\n      ></div>\n    </div>\n    <div\n      class=\"sky-repeater-item-content\"\n      [id]=\"contentId\"\n      [@.disabled]=\"animationDisabled\"\n      [@skyAnimationSlide]=\"slideDirection\"\n      #itemContentRef\n      [attr.role]=\"(itemRole$ | async)?.content\"\n    >\n      <ng-content select=\"sky-repeater-item-content\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: ["sky-repeater-item .sky-repeater-item{display:flex;border-bottom:1px dotted #cdcfd2;padding-top:0;position:relative;transition:box-shadow .15s;align-items:flex-start}sky-repeater-item .sky-repeater-item sky-inline-form{display:block;width:100%}sky-repeater-item .sky-repeater-item sky-inline-form>:first-child,sky-repeater-item .sky-repeater-item sky-inline-form .sky-slide-dissolve-first,sky-repeater-item .sky-repeater-item sky-inline-form .sky-slide-dissolve-last{display:flex;align-items:flex-start;flex:1 0 auto;width:100%}sky-repeater-item .sky-repeater-item sky-inline-form .sky-slide-dissolve-last{padding-top:10px}sky-repeater-item .sky-repeater-item.sky-repeater-item-active{background-color:#eeeeef;color:#212327;padding-left:6px;border-left:4px solid #00b4f1}sky-repeater-item .sky-repeater-item.sky-repeater-item-active .sky-inline-delete{margin-left:-4px;width:calc(100% + 4px)}sky-repeater-item .sky-repeater-item-left{display:flex;padding-top:10px;align-items:center}sky-repeater-item .sky-repeater-item-left sky-checkbox{display:flex}sky-repeater-item .sky-repeater-item-right{max-width:100%;flex-grow:1;align-self:center}sky-repeater-item .sky-repeater-item-header{align-items:center;display:flex;padding-top:10px}sky-repeater-item .sky-repeater-item-chevron{margin-left:10px}sky-repeater-item .sky-repeater-item-chevron-placeholder{height:24px}sky-repeater-item .sky-repeater-item-chevron-placeholder-with-context{height:29px}sky-repeater-item .sky-repeater-item-context-menu{padding:0 10px 0 0}sky-repeater-item .sky-repeater-item-checkbox{padding:0 5px 0 0}sky-repeater-item .sky-repeater-item-selected{background-color:#f1eef6;transition:background-color .15s}sky-repeater-item .sky-repeater-item-title{margin:0;flex-grow:1;line-height:1.1;color:#212327}sky-repeater-item sky-repeater-item-content{display:block;margin:10px 0 0}sky-repeater-item .sky-repeater-item-collapsible .sky-repeater-item-header{cursor:pointer}sky-repeater-item .sky-repeater-item-collapsible .sky-repeater-item-content{padding-right:34px}sky-repeater-item .sky-repeater-item-collapsed .sky-repeater-item-content{display:none}sky-repeater-item .sky-repeater-item-grab-handle{color:#cdcfd2;cursor:pointer;border:0;width:24px;height:24px;cursor:grab;cursor:-moz-grab;padding:0;margin:5px 10px 5px 0}sky-repeater-item .sky-repeater-item-grab-handle:hover{color:#979ba2;transition:color .15s}sky-repeater-item.sky-repeater-item-dragging.gu-mirror{opacity:initial;-ms-filter:initial;filter:initial;background-color:#fff;box-shadow:0 0 5px #0000004d}sky-repeater-item.sky-repeater-item-dragging.gu-transit .sky-repeater-item{background-color:#d8d8d8}sky-repeater-item.sky-repeater-item-dragging.gu-transit .sky-repeater-item .sky-repeater-item-left,sky-repeater-item.sky-repeater-item-dragging.gu-transit .sky-repeater-item .sky-repeater-item-right{visibility:hidden}sky-repeater-item.sky-repeater-item-dragging .sky-repeater-item-grab-handle{cursor:grabbing;cursor:-webkit-grabbing}.sky-theme-modern sky-repeater-item .sky-repeater-item{padding-bottom:20px}.sky-theme-modern sky-repeater-item .sky-repeater-item.sky-repeater-item-active{background-color:transparent;border-left-color:#1870b8}.sky-theme-modern sky-repeater-item .sky-repeater-item:focus,.sky-theme-modern sky-repeater-item .sky-repeater-item:active:focus{outline:solid 2px #1870B8;outline-offset:-2px}.sky-theme-modern sky-repeater-item .sky-repeater-item:focus:not(:active){box-shadow:0 1px 8px #0000004d}.sky-theme-modern sky-repeater-item .sky-repeater-item-header[hidden]+.sky-repeater-item-content sky-repeater-item-content{margin:20px 0 0}.sky-theme-modern sky-repeater-item .sky-repeater-item-header,.sky-theme-modern sky-repeater-item .sky-repeater-item-left{padding-top:20px}.sky-theme-modern sky-repeater-item sky-inline-form .sky-slide-dissolve-last{padding-top:20px}.sky-theme-modern.sky-theme-mode-dark sky-repeater-item .sky-repeater-item{border-bottom-color:#686c73}.sky-theme-modern.sky-theme-mode-dark sky-repeater-item .sky-repeater-item.sky-repeater-item-active{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark sky-repeater-item .sky-repeater-item-title{color:#fbfcfe}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.λ2, selector: "sky-chevron", inputs: ["ariaControls", "ariaLabel", "direction", "disabled"], outputs: ["directionChange"] }, { kind: "component", type: i6.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i7.λ1, selector: "sky-inline-form", inputs: ["config", "template", "showForm"], outputs: ["close"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], animations: [skyAnimationSlide], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyRepeaterItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-repeater-item', animations: [skyAnimationSlide], encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"sky-repeater-item sky-padding-even-default\"\n  [attr.aria-label]=\"itemName\"\n  [attr.aria-selected]=\"selectable ? !!isSelected : undefined\"\n  [attr.role]=\"(itemRole$ | async)?.item\"\n  [attr.tabIndex]=\"tabindex\"\n  [ngClass]=\"{\n    'sky-repeater-item-active': isActive,\n    'sky-repeater-item-collapsible': isCollapsible,\n    'sky-repeater-item-selected': isSelected\n  }\"\n  (click)=\"onRepeaterItemClick($event)\"\n  #itemRef\n>\n  <div #inlineDelete>\n    <ng-content select=\"sky-inline-delete\"></ng-content>\n  </div>\n\n  <ng-container *ngIf=\"inlineFormTemplate\">\n    <sky-inline-form\n      [config]=\"inlineFormConfig\"\n      [showForm]=\"showInlineForm\"\n      [template]=\"inlineFormTemplate\"\n      (close)=\"onInlineFormClose($event)\"\n    >\n      <ng-container *ngTemplateOutlet=\"skyRepeaterItemLeft\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"skyRepeaterItemRight\"></ng-container>\n    </sky-inline-form>\n  </ng-container>\n\n  <ng-container *ngIf=\"!inlineFormTemplate\">\n    <ng-container *ngTemplateOutlet=\"skyRepeaterItemLeft\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"skyRepeaterItemRight\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #skyRepeaterItemLeft>\n  <div\n    [attr.role]=\"!showInlineForm ? (itemRole$ | async)?.content : undefined\"\n    class=\"sky-repeater-item-left\"\n  >\n    <ng-container *ngIf=\"reorderable\">\n      <span\n        aria-live=\"assertive\"\n        class=\"sky-screen-reader-only\"\n        [id]=\"contentId + '-reorder-state'\"\n      >\n        {{ reorderState }}\n      </span>\n      <span\n        class=\"sky-screen-reader-only\"\n        [id]=\"contentId + '-reorder-instructions'\"\n        >{{ reorderButtonLabel }}</span\n      >\n      <button\n        class=\"sky-btn sky-tile-tools-control sky-repeater-item-grab-handle\"\n        type=\"button\"\n        [attr.aria-describedby]=\"contentId + '-reorder-instructions'\"\n        [attr.aria-label]=\"\n          itemName\n            ? ('skyux_repeater_item_reorder_label' | skyLibResources : itemName)\n            : ('skyux_repeater_item_reorder_label_default' | skyLibResources)\n        \"\n        (blur)=\"onReorderHandleBlur($event)\"\n        (keydown)=\"onReorderHandleKeyDown($event)\"\n        #grabHandle\n      >\n        <sky-icon icon=\"arrows-v\"></sky-icon>\n      </button>\n    </ng-container>\n    <sky-checkbox\n      *ngIf=\"selectable\"\n      class=\"sky-repeater-item-checkbox\"\n      [checked]=\"isSelected\"\n      [label]=\"\n        itemName\n          ? ('skyux_repeater_item_checkbox_label' | skyLibResources : itemName)\n          : ('skyux_repeater_item_checkbox_label_default' | skyLibResources)\n      \"\n      (change)=\"onCheckboxChange($event)\"\n    >\n    </sky-checkbox>\n    <div\n      class=\"sky-repeater-item-context-menu\"\n      [hidden]=\"contextMenuEl.children.length === 0\"\n      #contextMenuEl\n    >\n      <ng-content select=\"sky-repeater-item-context-menu\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #skyRepeaterItemRight>\n  <div class=\"sky-repeater-item-right\" #itemHeaderRef>\n    <div\n      class=\"sky-repeater-item-header\"\n      [attr.role]=\"(itemRole$ | async)?.title\"\n      [hidden]=\"titleRef.children.length === 0\"\n      (click)=\"headerClick()\"\n    >\n      <div class=\"sky-repeater-item-title sky-font-emphasized\" #titleRef>\n        <ng-content select=\"sky-repeater-item-title\"></ng-content>\n      </div>\n      <button\n        *ngIf=\"reorderable\"\n        class=\"sky-btn sky-btn-link sky-repeater-item-reorder-top\"\n        type=\"button\"\n        [attr.aria-label]=\"\n          itemName\n            ? ('skyux_repeater_item_reorder_top_label'\n              | skyLibResources : itemName)\n            : ('skyux_repeater_item_reorder_top_label_default'\n              | skyLibResources)\n        \"\n        (click)=\"moveToTop($event)\"\n      >\n        <sky-icon icon=\"arrow-circle-up\"></sky-icon>\n        {{ 'skyux_repeater_item_reorder_top' | skyLibResources }}\n      </button>\n      <div *ngIf=\"isCollapsible\" class=\"sky-repeater-item-chevron\">\n        <sky-chevron\n          [ariaControls]=\"contentId\"\n          [ariaLabel]=\"\n            itemName\n              ? isExpanded\n                ? ('skyux_repeater_item_expand' | skyLibResources : itemName)\n                : ('skyux_repeater_item_collapse' | skyLibResources : itemName)\n              : isExpanded\n              ? ('skyux_repeater_item_expand_default' | skyLibResources)\n              : ('skyux_repeater_item_collapse_default' | skyLibResources)\n          \"\n          [direction]=\"isExpanded ? 'up' : 'down'\"\n          (directionChange)=\"chevronDirectionChange($event)\"\n        >\n        </sky-chevron>\n      </div>\n      <!-- Used for when the chevron is hidden to ensure that the right side is the same height as the left.-->\n      <div\n        *ngIf=\"!isCollapsible && !contextMenu\"\n        class=\"sky-repeater-item-chevron-placeholder\"\n      ></div>\n      <!-- Used to ensure that the right side is the same height as the left.-->\n      <div\n        *ngIf=\"contextMenu\"\n        class=\"sky-repeater-item-chevron-placeholder-with-context\"\n      ></div>\n    </div>\n    <div\n      class=\"sky-repeater-item-content\"\n      [id]=\"contentId\"\n      [@.disabled]=\"animationDisabled\"\n      [@skyAnimationSlide]=\"slideDirection\"\n      #itemContentRef\n      [attr.role]=\"(itemRole$ | async)?.content\"\n    >\n      <ng-content select=\"sky-repeater-item-content\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: ["sky-repeater-item .sky-repeater-item{display:flex;border-bottom:1px dotted #cdcfd2;padding-top:0;position:relative;transition:box-shadow .15s;align-items:flex-start}sky-repeater-item .sky-repeater-item sky-inline-form{display:block;width:100%}sky-repeater-item .sky-repeater-item sky-inline-form>:first-child,sky-repeater-item .sky-repeater-item sky-inline-form .sky-slide-dissolve-first,sky-repeater-item .sky-repeater-item sky-inline-form .sky-slide-dissolve-last{display:flex;align-items:flex-start;flex:1 0 auto;width:100%}sky-repeater-item .sky-repeater-item sky-inline-form .sky-slide-dissolve-last{padding-top:10px}sky-repeater-item .sky-repeater-item.sky-repeater-item-active{background-color:#eeeeef;color:#212327;padding-left:6px;border-left:4px solid #00b4f1}sky-repeater-item .sky-repeater-item.sky-repeater-item-active .sky-inline-delete{margin-left:-4px;width:calc(100% + 4px)}sky-repeater-item .sky-repeater-item-left{display:flex;padding-top:10px;align-items:center}sky-repeater-item .sky-repeater-item-left sky-checkbox{display:flex}sky-repeater-item .sky-repeater-item-right{max-width:100%;flex-grow:1;align-self:center}sky-repeater-item .sky-repeater-item-header{align-items:center;display:flex;padding-top:10px}sky-repeater-item .sky-repeater-item-chevron{margin-left:10px}sky-repeater-item .sky-repeater-item-chevron-placeholder{height:24px}sky-repeater-item .sky-repeater-item-chevron-placeholder-with-context{height:29px}sky-repeater-item .sky-repeater-item-context-menu{padding:0 10px 0 0}sky-repeater-item .sky-repeater-item-checkbox{padding:0 5px 0 0}sky-repeater-item .sky-repeater-item-selected{background-color:#f1eef6;transition:background-color .15s}sky-repeater-item .sky-repeater-item-title{margin:0;flex-grow:1;line-height:1.1;color:#212327}sky-repeater-item sky-repeater-item-content{display:block;margin:10px 0 0}sky-repeater-item .sky-repeater-item-collapsible .sky-repeater-item-header{cursor:pointer}sky-repeater-item .sky-repeater-item-collapsible .sky-repeater-item-content{padding-right:34px}sky-repeater-item .sky-repeater-item-collapsed .sky-repeater-item-content{display:none}sky-repeater-item .sky-repeater-item-grab-handle{color:#cdcfd2;cursor:pointer;border:0;width:24px;height:24px;cursor:grab;cursor:-moz-grab;padding:0;margin:5px 10px 5px 0}sky-repeater-item .sky-repeater-item-grab-handle:hover{color:#979ba2;transition:color .15s}sky-repeater-item.sky-repeater-item-dragging.gu-mirror{opacity:initial;-ms-filter:initial;filter:initial;background-color:#fff;box-shadow:0 0 5px #0000004d}sky-repeater-item.sky-repeater-item-dragging.gu-transit .sky-repeater-item{background-color:#d8d8d8}sky-repeater-item.sky-repeater-item-dragging.gu-transit .sky-repeater-item .sky-repeater-item-left,sky-repeater-item.sky-repeater-item-dragging.gu-transit .sky-repeater-item .sky-repeater-item-right{visibility:hidden}sky-repeater-item.sky-repeater-item-dragging .sky-repeater-item-grab-handle{cursor:grabbing;cursor:-webkit-grabbing}.sky-theme-modern sky-repeater-item .sky-repeater-item{padding-bottom:20px}.sky-theme-modern sky-repeater-item .sky-repeater-item.sky-repeater-item-active{background-color:transparent;border-left-color:#1870b8}.sky-theme-modern sky-repeater-item .sky-repeater-item:focus,.sky-theme-modern sky-repeater-item .sky-repeater-item:active:focus{outline:solid 2px #1870B8;outline-offset:-2px}.sky-theme-modern sky-repeater-item .sky-repeater-item:focus:not(:active){box-shadow:0 1px 8px #0000004d}.sky-theme-modern sky-repeater-item .sky-repeater-item-header[hidden]+.sky-repeater-item-content sky-repeater-item-content{margin:20px 0 0}.sky-theme-modern sky-repeater-item .sky-repeater-item-header,.sky-theme-modern sky-repeater-item .sky-repeater-item-left{padding-top:20px}.sky-theme-modern sky-repeater-item sky-inline-form .sky-slide-dissolve-last{padding-top:20px}.sky-theme-modern.sky-theme-mode-dark sky-repeater-item .sky-repeater-item{border-bottom-color:#686c73}.sky-theme-modern.sky-theme-mode-dark sky-repeater-item .sky-repeater-item.sky-repeater-item-active{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark sky-repeater-item .sky-repeater-item-title{color:#fbfcfe}\n"] }]
+        }], ctorParameters: function () { return [{ type: SkyRepeaterService }, { type: i0.ChangeDetectorRef }, { type: SkyRepeaterAdapterService }, { type: i0.ElementRef }, { type: i3$1.SkyLibResourcesService }]; }, propDecorators: { disabled: [{
+                type: Input
+            }], itemName: [{
+                type: Input
+            }], inlineFormConfig: [{
+                type: Input
+            }], inlineFormTemplate: [{
+                type: Input
+            }], isExpanded: [{
+                type: Input
+            }], isSelected: [{
+                type: Input
+            }], reorderable: [{
+                type: Input
+            }], selectable: [{
+                type: Input
+            }], showInlineForm: [{
+                type: Input
+            }], tag: [{
+                type: Input
+            }], collapse: [{
+                type: Output
+            }], expand: [{
+                type: Output
+            }], inlineFormClose: [{
+                type: Output
+            }], isSelectedChange: [{
+                type: Output
+            }], contextMenu: [{
+                type: ContentChild,
+                args: [SkyRepeaterItemContextMenuComponent, { read: ElementRef }]
+            }], repeaterGroupClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], grabHandle: [{
+                type: ViewChild,
+                args: ['grabHandle', { read: ElementRef }]
+            }], itemContentRef: [{
+                type: ViewChild,
+                args: ['itemContentRef', { read: ElementRef }]
+            }], itemHeaderRef: [{
+                type: ViewChild,
+                args: ['itemHeaderRef', { read: ElementRef }]
+            }], itemRef: [{
+                type: ViewChild,
+                args: ['itemRef', { read: ElementRef }]
+            }], repeaterItemContentComponents: [{
+                type: ContentChildren,
+                args: [SkyRepeaterItemContentComponent]
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+/**
+ * @internal
+ */
+class SkyRepeaterAutoScrollService {
+    autoScroll(elements, options) {
+        return autoScroll(elements, options);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyRepeaterAutoScrollService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyRepeaterAutoScrollService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyRepeaterAutoScrollService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Creates a container to display repeater items.
+ */
+class SkyRepeaterComponent {
+    /**
+     * The layout that determines which repeater items are expanded by default and whether
+     * repeater items are expandable and collapsible. Collapsed items display titles only.
+     * The valid options are `multiple`, `none`, and `single`.
+     * - `multiple` loads repeater items in an expanded state unless `isExpanded` is set to
+     * `false` for a repeater item. This layout allows users to expand and collapse
+     * as many repeater items as necessary. It is best-suited to repeater items where body
+     * content is important but users don't always need to see it.
+     * - `none` loads all repeater items in an expanded state and does not allow users to
+     * collapse them. This default layout provides the quickest access to the details in the
+     * repeater items. It is best-suited to repeater items with concise content
+     * that users need to view frequently.
+     * - `single` loads one repeater item in an expanded state and collapses all others.
+     * The expanded repeater item is the first one where `isExpanded` is set to `true`. This layout
+     * allows users to expand one item at a time. It provides the most compact view and is
+     * best-suited to repeater items where the most important information is in the titles
+     * and users only occasionally need to view the body content.
+     * @default "none"
+     */
+    set expandMode(value) {
+        this.#repeaterService.expandMode = value;
+        this.#updateForExpandMode();
+    }
+    get expandMode() {
+        return this.#repeaterService.expandMode;
+    }
+    #autoScroller;
+    #ngUnsubscribe;
+    #itemNameWarned;
+    #adapterService;
+    #changeDetector;
+    #dragulaService;
+    #elementRef;
+    #renderer;
+    #repeaterService;
+    #autoScrollSvc;
+    #scrollableHostSvc;
+    #logSvc;
+    constructor() {
+        /**
+         * Whether users can change the order of items in the repeater list.
+         * Each repeater item also has `reorderable` property to indicate whether
+         * users can change its order.
+         */
+        this.reorderable = false;
+        /**
+         * Fires when the active repeater item changes.
+         */
+        this.activeIndexChange = new EventEmitter();
+        /**
+         * Fires when users change the order of repeater items.
+         * This event emits an ordered array of the `tag` properties that the consumer provides for each repeater item.
+         */
+        this.orderChange = new EventEmitter();
+        this.#ngUnsubscribe = new Subject();
+        this.#itemNameWarned = false;
+        this.#adapterService = inject(SkyRepeaterAdapterService);
+        this.#changeDetector = inject(ChangeDetectorRef);
+        this.#dragulaService = inject(DragulaService);
+        this.#elementRef = inject(ElementRef);
+        this.#renderer = inject(Renderer2);
+        this.#repeaterService = inject(SkyRepeaterService);
+        this.#autoScrollSvc = inject(SkyRepeaterAutoScrollService);
+        this.#scrollableHostSvc = inject(SkyScrollableHostService);
+        this.#logSvc = inject(SkyLogService);
+        this.dragulaGroupName = `sky-repeater-dragula-${this.#repeaterService.repeaterGroupId}`;
+        this.#repeaterService.itemCollapseStateChange
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((item) => {
+            if (this.expandMode === 'single' && item.isExpanded) {
+                this.items?.forEach((otherItem) => {
+                    if (otherItem !== item &&
+                        otherItem.isExpanded &&
+                        otherItem.isCollapsible) {
+                        otherItem.isExpanded = false;
+                    }
+                });
+            }
+        });
+        this.#repeaterService.activeItemIndexChange
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((index) => {
+            if (index !== this.activeIndex) {
+                this.activeIndex = index;
+                this.activeIndexChange.emit(index);
+            }
+        });
+        this.#repeaterService.orderChange
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe(() => {
+            this.#emitTags();
+        });
+        this.#updateForExpandMode();
+        this.#adapterService.setRepeaterHost(this.#elementRef);
+        this.#initializeDragAndDrop();
+    }
+    ngAfterContentInit() {
+        // If activeIndex has been set on init, call service to activate the appropriate item.
+        setTimeout(() => {
+            if (this.activeIndex || this.activeIndex === 0) {
+                this.#repeaterService.activateItemByIndex(this.activeIndex);
+            }
+            this.#validateTags();
+        });
+        // HACK: Not updating for expand mode in a timeout causes an error.
+        // https://github.com/angular/angular/issues/6005
+        this.items?.changes.pipe(takeUntil(this.#ngUnsubscribe)).subscribe(() => {
+            setTimeout(() => {
+                if (this.items?.length) {
+                    this.#updateForExpandMode(this.items.last);
+                    this.#updateReorderability();
+                    this.#repeaterService.items = this.items.toArray();
+                }
+                if (this.activeIndex !== undefined) {
+                    this.#repeaterService.activateItemByIndex(this.activeIndex);
+                }
+                this.#updateRole();
+                this.#validateTags();
+            });
+        });
+        setTimeout(() => {
+            this.#updateForExpandMode();
+            this.items?.forEach((item) => {
+                item.reorderable = this.reorderable;
+            });
+            this.#updateRole();
+        }, 0);
+    }
+    ngAfterViewChecked() {
+        if (!this.#itemNameWarned && this.items?.some((item) => !item.itemName)) {
+            this.#logSvc?.deprecated('SkyRepeaterItemComponent without `itemName`', {
+                deprecationMajorVersion: 8,
+                replacementRecommendation: 'Always specify an `itemName` property.',
+            });
+            this.#itemNameWarned = true;
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['activeIndex']) {
+            this.#repeaterService.enableActiveState = true;
+            if (changes['activeIndex'].currentValue !==
+                changes['activeIndex'].previousValue) {
+                this.#repeaterService.activateItemByIndex(this.activeIndex);
+            }
+        }
+        if (changes['reorderable']) {
+            if (this.items) {
+                this.#updateReorderability();
+            }
+            this.#updateRole();
+            this.#changeDetector.markForCheck();
+        }
+    }
+    ngOnDestroy() {
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+        this.#destroyDragAndDrop();
+    }
+    ngOnInit() {
+        this.#updateRole();
+    }
+    onCdkObserveContent() {
+        this.#updateRole();
+    }
+    #updateForExpandMode(itemAdded) {
+        if (this.items) {
+            let foundExpanded = false;
+            const isCollapsible = this.expandMode !== 'none';
+            const isSingle = this.expandMode === 'single';
+            // Keep any newly-added expanded item expanded and collapse the rest.
+            if (itemAdded && itemAdded.isExpanded) {
+                foundExpanded = true;
+            }
+            for (const item of this.items) {
+                item.isCollapsible = isCollapsible && !!item.hasItemContent;
+                // Collapse any items that aren't the item that was just added.
+                if (item !== itemAdded && isSingle && item.isExpanded) {
+                    if (foundExpanded) {
+                        // If this item is being collapsed because a new item was
+                        // added, animate it.
+                        item.updateForExpanded(false, !!itemAdded);
+                    }
+                    foundExpanded = true;
+                }
+            }
+            this.#updateRole();
+        }
+    }
+    #initializeDragAndDrop() {
+        /* Sanity check that we haven't already set up dragging abilities */
+        /* istanbul ignore else */
+        if (!this.#dragulaService.find(this.dragulaGroupName)) {
+            this.#dragulaService.createGroup(this.dragulaGroupName, {
+                moves: (el, _container, handle) => {
+                    const target = el?.querySelector('.sky-repeater-item-grab-handle');
+                    return !!(this.reorderable && target?.contains(handle));
+                },
+            });
+        }
+        let draggedItemIndex = -1;
+        this.#dragulaService
+            .drag(this.dragulaGroupName)
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((args) => {
+            /* istanbul ignore else */
+            if (args.name === this.dragulaGroupName) {
+                this.#destroyAutoScroll();
+                this.#autoScroller = this.#autoScrollSvc.autoScroll([this.#scrollableHostSvc.getScrollableHost(this.#elementRef)], {
+                    margin: 20,
+                    maxSpeed: 10,
+                    scrollWhenOutside: true,
+                    autoScroll: () => true,
+                });
+                this.#renderer.addClass(args.el, 'sky-repeater-item-dragging');
+                draggedItemIndex = this.#adapterService.getRepeaterItemIndex(args.el);
+            }
+        });
+        this.#dragulaService
+            .dragend(this.dragulaGroupName)
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((args) => {
+            /* istanbul ignore else */
+            if (args.name === this.dragulaGroupName) {
+                this.#destroyAutoScroll();
+                this.#renderer.removeClass(args.el, 'sky-repeater-item-dragging');
+                const newItemIndex = this.#adapterService.getRepeaterItemIndex(args.el);
+                /* sanity check */
+                /* istanbul ignore else */
+                if (draggedItemIndex >= 0) {
+                    this.#repeaterService.reorderItem(draggedItemIndex, newItemIndex);
+                    draggedItemIndex = -1;
+                }
+                this.#emitTags();
+            }
+        });
+    }
+    #destroyDragAndDrop() {
+        /* Sanity check that we have set up dragging abilities */
+        /* istanbul ignore else */
+        if (this.#dragulaService.find(this.dragulaGroupName)) {
+            this.#dragulaService.destroy(this.dragulaGroupName);
+        }
+        this.#destroyAutoScroll();
+    }
+    #destroyAutoScroll() {
+        if (this.#autoScroller) {
+            this.#autoScroller.destroy();
+            this.#autoScroller = undefined;
+        }
+    }
+    #emitTags() {
+        const tags = this.#repeaterService.items.map((item) => item.tag);
+        this.orderChange.emit(tags);
+    }
+    #everyItemHasTag() {
+        /* sanity check */
+        /* istanbul ignore if */
+        if (!this.items || this.items.length === 0) {
+            return false;
+        }
+        return this.items.toArray().every((item) => {
+            return item.tag !== undefined;
+        });
+    }
+    #updateRole() {
+        // Determine a role using a hierarchy based on https://www.w3.org/TR/wai-aria-practices-1.1/
+        //   1. If there are one or more interactions in the repeater item projected content, use grid.
+        //   2. If there are selectable repeater items and no other interactions, use listbox.
+        //   3. If there are no interactions, use list.
+        // Default to list role.
+        let autoRole = 'list';
+        const roleMap = {
+            list: { item: 'listitem', title: undefined, content: undefined },
+            listbox: { item: 'option', title: undefined, content: undefined },
+            grid: { item: 'row', title: 'rowheader', content: 'gridcell' },
+        };
+        // Based on https://html.spec.whatwg.org/multipage/dom.html#interactive-content
+        const interactionSelector = [
+            'a[href]',
+            'audio[controls]',
+            'button',
+            'details',
+            'embed',
+            'iframe',
+            'img[usemap]',
+            'input:not([type="hidden"])',
+            'label',
+            'select',
+            'textarea',
+            'video[controls]',
+            '[contenteditable]',
+            '.sky-repeater[role="grid"]',
+        ]
+            .map((selector) => `sky-repeater-item-title ${selector}:not([hidden]), sky-repeater-item-content ${selector}:not([hidden])`)
+            .concat([`skyux-dropdown`])
+            .join(', ');
+        const hasInteraction = this.reorderable ||
+            this.items?.some((item) => item.isCollapsible) ||
+            this.items?.some((item) => !!item.selectable) ||
+            !!this.#elementRef.nativeElement.querySelector(interactionSelector);
+        if (hasInteraction) {
+            // If the repeater matches interaction selector https://www.w3.org/TR/wai-aria-practices-1.1/#grid
+            autoRole = 'grid';
+        }
+        if (this.role !== autoRole) {
+            this.#repeaterService.itemRole.next({
+                ...roleMap[autoRole],
+            });
+            this.role = `${autoRole}`;
+            this.#changeDetector.markForCheck();
+        }
+    }
+    #updateReorderability() {
+        if (this.items) {
+            for (const item of this.items) {
+                item.reorderable = this.reorderable;
+            }
+        }
+    }
+    #validateTags() {
+        if (this.reorderable && !this.#everyItemHasTag()) {
+            console.warn('Please supply tag properties for each repeater item when reordering functionality is enabled.');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyRepeaterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyRepeaterComponent, selector: "sky-repeater", inputs: { activeIndex: "activeIndex", ariaLabel: "ariaLabel", reorderable: "reorderable", expandMode: "expandMode" }, outputs: { activeIndexChange: "activeIndexChange", orderChange: "orderChange" }, providers: [
+            SkyRepeaterService,
+            SkyRepeaterAdapterService,
+            SkyRepeaterAutoScrollService,
+        ], queries: [{ propertyName: "items", predicate: SkyRepeaterItemComponent }], usesOnChanges: true, ngImport: i0, template: "<ng-container #repeaterHost>\n  <div\n    class=\"sky-repeater\"\n    [attr.role]=\"role\"\n    [attr.aria-label]=\"ariaLabel || ('skyux_repeater_label' | skyLibResources)\"\n    [dragula]=\"dragulaGroupName\"\n    (cdkObserveContent)=\"onCdkObserveContent()\"\n  >\n    <ng-content></ng-content>\n  </div>\n</ng-container>\n", styles: [".sky-repeater{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$2.DragulaDirective, selector: "[dragula]", inputs: ["dragula", "dragulaModel"], outputs: ["dragulaModelChange"] }, { kind: "directive", type: i2$1.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyRepeaterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-repeater', providers: [
+                        SkyRepeaterService,
+                        SkyRepeaterAdapterService,
+                        SkyRepeaterAutoScrollService,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container #repeaterHost>\n  <div\n    class=\"sky-repeater\"\n    [attr.role]=\"role\"\n    [attr.aria-label]=\"ariaLabel || ('skyux_repeater_label' | skyLibResources)\"\n    [dragula]=\"dragulaGroupName\"\n    (cdkObserveContent)=\"onCdkObserveContent()\"\n  >\n    <ng-content></ng-content>\n  </div>\n</ng-container>\n", styles: [".sky-repeater{padding:0}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { activeIndex: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], reorderable: [{
+                type: Input
+            }], expandMode: [{
+                type: Input
+            }], activeIndexChange: [{
+                type: Output
+            }], orderChange: [{
+                type: Output
+            }], items: [{
+                type: ContentChildren,
+                args: [SkyRepeaterItemComponent]
+            }] } });
+
+class SkyRepeaterModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyRepeaterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyRepeaterModule, declarations: [SkyRepeaterComponent,
+            SkyRepeaterItemComponent,
+            SkyRepeaterItemContentComponent,
+            SkyRepeaterItemContextMenuComponent,
+            SkyRepeaterItemTitleComponent], imports: [CommonModule,
+            DragulaModule,
+            ObserversModule,
+            SkyChevronModule,
+            SkyCheckboxModule,
+            SkyIconModule,
+            SkyInlineFormModule,
+            SkyListsResourcesModule], exports: [SkyRepeaterComponent,
+            SkyRepeaterItemComponent,
+            SkyRepeaterItemContentComponent,
+            SkyRepeaterItemContextMenuComponent,
+            SkyRepeaterItemTitleComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyRepeaterModule, providers: [DragulaService], imports: [CommonModule,
+            DragulaModule,
+            ObserversModule,
+            SkyChevronModule,
+            SkyCheckboxModule,
+            SkyIconModule,
+            SkyInlineFormModule,
+            SkyListsResourcesModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyRepeaterModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyRepeaterComponent,
+                        SkyRepeaterItemComponent,
+                        SkyRepeaterItemContentComponent,
+                        SkyRepeaterItemContextMenuComponent,
+                        SkyRepeaterItemTitleComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        DragulaModule,
+                        ObserversModule,
+                        SkyChevronModule,
+                        SkyCheckboxModule,
+                        SkyIconModule,
+                        SkyInlineFormModule,
+                        SkyListsResourcesModule,
+                    ],
+                    exports: [
+                        SkyRepeaterComponent,
+                        SkyRepeaterItemComponent,
+                        SkyRepeaterItemContentComponent,
+                        SkyRepeaterItemContextMenuComponent,
+                        SkyRepeaterItemTitleComponent,
+                    ],
+                    providers: [DragulaService],
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkySortService {
+    constructor() {
+        this.selectedItem = new BehaviorSubject('');
+    }
+    selectItem(sortItem) {
+        this.selectedItem.next(sortItem);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySortService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySortService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySortService, decorators: [{
+            type: Injectable
+        }] });
+
+const SORT_ITEM_ID_PREFIX = 'sky-sort-item-';
+let sortItemIdNumber = 0;
+class SkySortItemComponent {
+    #subscription;
+    #sortItemId;
+    #sortService;
+    #detector;
+    constructor(sortService, detector) {
+        /**
+         * Fires when a sort item is selected.
+         */
+        this.itemSelect = new EventEmitter(); // TODO: Change to `EventEmitter<void>` in a breaking change.
+        this.isSelected = new BehaviorSubject(false);
+        this.#sortService = sortService;
+        this.#detector = detector;
+    }
+    ngOnInit() {
+        sortItemIdNumber++;
+        this.#sortItemId = SORT_ITEM_ID_PREFIX + sortItemIdNumber.toString();
+        this.#subscription = this.#sortService.selectedItem.subscribe((itemId) => {
+            this.isSelected.next(itemId === this.#sortItemId);
+            this.#detector.detectChanges();
+        });
+        if (this.active) {
+            this.#sortService.selectItem(this.#sortItemId);
+        }
+    }
+    ngOnChanges(changes) {
+        if (this.#sortItemId &&
+            changes &&
+            changes['active'] &&
+            changes['active'].currentValue &&
+            changes['active'].currentValue !== changes['active'].previousValue) {
+            this.#sortService.selectItem(this.#sortItemId);
+        }
+    }
+    itemClicked() {
+        if (this.#sortItemId) {
+            this.#sortService.selectItem(this.#sortItemId);
+            this.itemSelect.emit();
+        }
+    }
+    ngOnDestroy() {
+        /* istanbul ignore else */
+        /* sanity check */
+        if (this.#subscription) {
+            this.#subscription.unsubscribe();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySortItemComponent, deps: [{ token: SkySortService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkySortItemComponent, selector: "sky-sort-item", inputs: { active: "active" }, outputs: { itemSelect: "itemSelect" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"sky-sort-item\"\n  role=\"menuitemradio\"\n  [attr.aria-checked]=\"isSelected | async\"\n  [ngClass]=\"{ 'sky-sort-item-selected': (isSelected | async) }\"\n>\n  <button\n    type=\"button\"\n    [ngClass]=\"{ 'sky-font-emphasized': (isSelected | async) }\"\n    (click)=\"itemClicked()\"\n  >\n    <ng-content></ng-content>\n  </button>\n</div>\n", styles: [".sky-sort-item{background-color:transparent;border:none;display:block;margin:4px;min-width:160px;text-align:left;transition:background-color .15s}.sky-sort-item.sky-dropdown-item-active a,.sky-sort-item.sky-dropdown-item-active button,.sky-sort-item:hover a,.sky-sort-item:hover button{background-color:var(--sky-background-color-neutral-light)}.sky-sort-item button[disabled],.sky-sort-item a[disabled]{cursor:default}.sky-sort-item button[disabled]:hover,.sky-sort-item a[disabled]:hover{background-color:transparent}.sky-sort-item ::ng-deep>button{background-color:transparent;border:none;color:var(--sky-text-color-default);cursor:pointer;display:block;padding:3px 20px;text-align:left;width:100%}.sky-sort-item ::ng-deep>button[disabled]{color:var(--sky-text-color-deemphasized)}.sky-sort-item ::ng-deep>button[disabled]:hover{cursor:default}.sky-sort-item-selected{background-color:#f1eef6;padding:4px;margin:0}:host-context(.sky-theme-modern) .sky-sort-item{margin:0;border:none;color:var(--sky-text-color-deemphasized);font-weight:400;transition:box-shadow .15s;border-radius:6px;padding:10px 20px}:host-context(.sky-theme-modern) .sky-sort-item:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected):not(.sky-dropdown-button-type-tab):not(:focus-visible){background-color:transparent;border-bottom:solid 1px var(--sky-highlight-color-info);color:var(--sky-text-color-default);padding-bottom:9px}:host-context(.sky-theme-modern) .sky-sort-item:focus-visible{background-color:transparent;color:var(--sky-text-color-default);outline:none}:host-context(.sky-theme-modern) .sky-sort-item:focus-visible:not(:active){color:var(--sky-text-color-default);outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-sort-item:active{color:var(--sky-text-color-default);padding-bottom:7px}:host-context(.sky-theme-modern) .sky-sort-item.sky-btn-tab-disabled{background-color:transparent;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);font-weight:400;font-size:15px;font-style:italic}:host-context(.sky-theme-modern) .sky-sort-item.sky-btn-tab-disabled .sky-btn-tab-close{font-size:16px}:host-context(.sky-theme-modern) .sky-sort-item:hover:not(.sky-btn-tab-disabled){background-color:transparent;border-bottom:none;outline:solid 1px var(--sky-background-color-primary-dark);outline-offset:-1px}:host-context(.sky-theme-modern) .sky-sort-item:focus-visible:not(:active){background-color:transparent;box-shadow:0 1px 8px #0000004d;outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px}:host-context(.sky-theme-modern) .sky-sort-item button{padding:0;color:#686c73}:host-context(.sky-theme-modern) .sky-sort-item-selected{color:var(--sky-text-color-default);border-bottom:none;border-radius:0 6px 6px 0;border-left:solid 3px var(--sky-background-color-primary-dark);padding-bottom:10px;padding-left:17px;background-color:inherit}:host-context(.sky-theme-modern) .sky-sort-item-selected button{font-weight:400;color:#212327}.sky-theme-modern .sky-sort-item{margin:0;border:none;color:var(--sky-text-color-deemphasized);font-weight:400;transition:box-shadow .15s;border-radius:6px;padding:10px 20px}.sky-theme-modern .sky-sort-item:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected):not(.sky-dropdown-button-type-tab):not(:focus-visible){background-color:transparent;border-bottom:solid 1px var(--sky-highlight-color-info);color:var(--sky-text-color-default);padding-bottom:9px}.sky-theme-modern .sky-sort-item:focus-visible{background-color:transparent;color:var(--sky-text-color-default);outline:none}.sky-theme-modern .sky-sort-item:focus-visible:not(:active){color:var(--sky-text-color-default);outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-sort-item:active{color:var(--sky-text-color-default);padding-bottom:7px}.sky-theme-modern .sky-sort-item.sky-btn-tab-disabled{background-color:transparent;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);font-weight:400;font-size:15px;font-style:italic}.sky-theme-modern .sky-sort-item.sky-btn-tab-disabled .sky-btn-tab-close{font-size:16px}.sky-theme-modern .sky-sort-item:hover:not(.sky-btn-tab-disabled){background-color:transparent;border-bottom:none;outline:solid 1px var(--sky-background-color-primary-dark);outline-offset:-1px}.sky-theme-modern .sky-sort-item:focus-visible:not(:active){background-color:transparent;box-shadow:0 1px 8px #0000004d;outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px}.sky-theme-modern .sky-sort-item button{padding:0;color:#686c73}.sky-theme-modern .sky-sort-item-selected{color:var(--sky-text-color-default);border-bottom:none;border-radius:0 6px 6px 0;border-left:solid 3px var(--sky-background-color-primary-dark);padding-bottom:10px;padding-left:17px;background-color:inherit}.sky-theme-modern .sky-sort-item-selected button{font-weight:400;color:#212327}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-sort-item button{color:#c0c2c5}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-sort-item-selected button{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-sort-item button{color:#c0c2c5}.sky-theme-modern.sky-theme-mode-dark .sky-sort-item-selected button{color:#fbfcfe}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySortItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-sort-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"sky-sort-item\"\n  role=\"menuitemradio\"\n  [attr.aria-checked]=\"isSelected | async\"\n  [ngClass]=\"{ 'sky-sort-item-selected': (isSelected | async) }\"\n>\n  <button\n    type=\"button\"\n    [ngClass]=\"{ 'sky-font-emphasized': (isSelected | async) }\"\n    (click)=\"itemClicked()\"\n  >\n    <ng-content></ng-content>\n  </button>\n</div>\n", styles: [".sky-sort-item{background-color:transparent;border:none;display:block;margin:4px;min-width:160px;text-align:left;transition:background-color .15s}.sky-sort-item.sky-dropdown-item-active a,.sky-sort-item.sky-dropdown-item-active button,.sky-sort-item:hover a,.sky-sort-item:hover button{background-color:var(--sky-background-color-neutral-light)}.sky-sort-item button[disabled],.sky-sort-item a[disabled]{cursor:default}.sky-sort-item button[disabled]:hover,.sky-sort-item a[disabled]:hover{background-color:transparent}.sky-sort-item ::ng-deep>button{background-color:transparent;border:none;color:var(--sky-text-color-default);cursor:pointer;display:block;padding:3px 20px;text-align:left;width:100%}.sky-sort-item ::ng-deep>button[disabled]{color:var(--sky-text-color-deemphasized)}.sky-sort-item ::ng-deep>button[disabled]:hover{cursor:default}.sky-sort-item-selected{background-color:#f1eef6;padding:4px;margin:0}:host-context(.sky-theme-modern) .sky-sort-item{margin:0;border:none;color:var(--sky-text-color-deemphasized);font-weight:400;transition:box-shadow .15s;border-radius:6px;padding:10px 20px}:host-context(.sky-theme-modern) .sky-sort-item:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected):not(.sky-dropdown-button-type-tab):not(:focus-visible){background-color:transparent;border-bottom:solid 1px var(--sky-highlight-color-info);color:var(--sky-text-color-default);padding-bottom:9px}:host-context(.sky-theme-modern) .sky-sort-item:focus-visible{background-color:transparent;color:var(--sky-text-color-default);outline:none}:host-context(.sky-theme-modern) .sky-sort-item:focus-visible:not(:active){color:var(--sky-text-color-default);outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-sort-item:active{color:var(--sky-text-color-default);padding-bottom:7px}:host-context(.sky-theme-modern) .sky-sort-item.sky-btn-tab-disabled{background-color:transparent;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);font-weight:400;font-size:15px;font-style:italic}:host-context(.sky-theme-modern) .sky-sort-item.sky-btn-tab-disabled .sky-btn-tab-close{font-size:16px}:host-context(.sky-theme-modern) .sky-sort-item:hover:not(.sky-btn-tab-disabled){background-color:transparent;border-bottom:none;outline:solid 1px var(--sky-background-color-primary-dark);outline-offset:-1px}:host-context(.sky-theme-modern) .sky-sort-item:focus-visible:not(:active){background-color:transparent;box-shadow:0 1px 8px #0000004d;outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px}:host-context(.sky-theme-modern) .sky-sort-item button{padding:0;color:#686c73}:host-context(.sky-theme-modern) .sky-sort-item-selected{color:var(--sky-text-color-default);border-bottom:none;border-radius:0 6px 6px 0;border-left:solid 3px var(--sky-background-color-primary-dark);padding-bottom:10px;padding-left:17px;background-color:inherit}:host-context(.sky-theme-modern) .sky-sort-item-selected button{font-weight:400;color:#212327}.sky-theme-modern .sky-sort-item{margin:0;border:none;color:var(--sky-text-color-deemphasized);font-weight:400;transition:box-shadow .15s;border-radius:6px;padding:10px 20px}.sky-theme-modern .sky-sort-item:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected):not(.sky-dropdown-button-type-tab):not(:focus-visible){background-color:transparent;border-bottom:solid 1px var(--sky-highlight-color-info);color:var(--sky-text-color-default);padding-bottom:9px}.sky-theme-modern .sky-sort-item:focus-visible{background-color:transparent;color:var(--sky-text-color-default);outline:none}.sky-theme-modern .sky-sort-item:focus-visible:not(:active){color:var(--sky-text-color-default);outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-sort-item:active{color:var(--sky-text-color-default);padding-bottom:7px}.sky-theme-modern .sky-sort-item.sky-btn-tab-disabled{background-color:transparent;font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);font-weight:400;font-size:15px;font-style:italic}.sky-theme-modern .sky-sort-item.sky-btn-tab-disabled .sky-btn-tab-close{font-size:16px}.sky-theme-modern .sky-sort-item:hover:not(.sky-btn-tab-disabled){background-color:transparent;border-bottom:none;outline:solid 1px var(--sky-background-color-primary-dark);outline-offset:-1px}.sky-theme-modern .sky-sort-item:focus-visible:not(:active){background-color:transparent;box-shadow:0 1px 8px #0000004d;outline:solid 2px var(--sky-background-color-primary-dark);outline-offset:-2px}.sky-theme-modern .sky-sort-item button{padding:0;color:#686c73}.sky-theme-modern .sky-sort-item-selected{color:var(--sky-text-color-default);border-bottom:none;border-radius:0 6px 6px 0;border-left:solid 3px var(--sky-background-color-primary-dark);padding-bottom:10px;padding-left:17px;background-color:inherit}.sky-theme-modern .sky-sort-item-selected button{font-weight:400;color:#212327}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-sort-item button{color:#c0c2c5}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-sort-item-selected button{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-sort-item button{color:#c0c2c5}.sky-theme-modern.sky-theme-mode-dark .sky-sort-item-selected button{color:#fbfcfe}\n"] }]
+        }], ctorParameters: function () { return [{ type: SkySortService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { active: [{
+                type: Input
+            }], itemSelect: [{
+                type: Output
+            }] } });
+
+class SkySortMenuHeadingComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySortMenuHeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkySortMenuHeadingComponent, selector: "sky-sort-menu-heading", ngImport: i0, template: "<div\n  class=\"sky-sort-menu-heading\"\n  [skyThemeClass]=\"{\n    'sky-subsection-heading': 'default',\n    'sky-font-heading-4': 'modern'\n  }\"\n>\n  {{ 'skyux_sort_menu_heading' | skyLibResources }}\n</div>\n", styles: [".sky-sort-menu-heading{background-color:transparent;border:none;display:block;margin:4px;min-width:160px;transition:background-color .15s;padding:3px 20px;text-align:left;width:100%}:host-context(.sky-theme-modern) .sky-sort-menu-heading{margin:0;padding:10px 20px}.sky-theme-modern .sky-sort-menu-heading{margin:0;padding:10px 20px}\n"], dependencies: [{ kind: "directive", type: i3.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySortMenuHeadingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-sort-menu-heading', template: "<div\n  class=\"sky-sort-menu-heading\"\n  [skyThemeClass]=\"{\n    'sky-subsection-heading': 'default',\n    'sky-font-heading-4': 'modern'\n  }\"\n>\n  {{ 'skyux_sort_menu_heading' | skyLibResources }}\n</div>\n", styles: [".sky-sort-menu-heading{background-color:transparent;border:none;display:block;margin:4px;min-width:160px;transition:background-color .15s;padding:3px 20px;text-align:left;width:100%}:host-context(.sky-theme-modern) .sky-sort-menu-heading{margin:0;padding:10px 20px}.sky-theme-modern .sky-sort-menu-heading{margin:0;padding:10px 20px}\n"] }]
+        }] });
+
+class SkySortComponent {
+    constructor() {
+        /**
+         * Whether to display a "Sort" label beside the icon on the sort button.
+         */
+        this.showButtonText = false;
+        this.dropdownController = new Subject();
+    }
+    dropdownClicked() {
+        this.dropdownController.next({
+            type: SkyDropdownMessageType.Close,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkySortComponent, selector: "sky-sort", inputs: { showButtonText: "showButtonText" }, providers: [SkySortService], ngImport: i0, template: "<div class=\"sky-sort\">\n  <sky-dropdown\n    buttonType=\"select\"\n    [label]=\"'skyux_sort_button_label' | skyLibResources\"\n    [messageStream]=\"dropdownController\"\n    [title]=\"'skyux_sort_button_label' | skyLibResources\"\n  >\n    <sky-dropdown-button>\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"sort\"></sky-icon>\n      <sky-icon *skyThemeIf=\"'modern'\" icon=\"sort\" iconType=\"skyux\"></sky-icon>\n      <span *ngIf=\"showButtonText\" class=\"sky-sort-btn-text\">\n        {{ 'skyux_sort_button_label' | skyLibResources }}\n      </span>\n    </sky-dropdown-button>\n    <sky-dropdown-menu\n      ariaRole=\"menu\"\n      [ariaLabelledBy]=\"sortMenuHeading.id\"\n      (click)=\"dropdownClicked()\"\n    >\n      <sky-sort-menu-heading\n        skyId\n        #sortMenuHeading=\"skyId\"\n      ></sky-sort-menu-heading>\n      <div *skyThemeIf=\"'default'\" class=\"sky-sort-heading-divider\"></div>\n      <ng-content></ng-content>\n    </sky-dropdown-menu>\n  </sky-dropdown>\n</div>\n", styles: [".sky-sort-heading-divider{margin:0;height:1px;overflow:hidden;background-color:#eeeeef}:host .sky-sort-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-sort-btn-text,:host-context(.sky-responsive-container-sm) .sky-sort-btn-text,:host-context(.sky-responsive-container-md) .sky-sort-btn-text,:host-context(.sky-responsive-container-lg) .sky-sort-btn-text{display:none}@media (min-width: 768px){:host .sky-sort-btn-text{display:inline}}:host-context(.sky-responsive-container-sm) .sky-sort-btn-text,:host-context(.sky-responsive-container-md) .sky-sort-btn-text,:host-context(.sky-responsive-container-lg) .sky-sort-btn-text{display:inline}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i2$2.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i2$2.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i3.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: SkySortMenuHeadingComponent, selector: "sky-sort-menu-heading" }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySortComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-sort', providers: [SkySortService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-sort\">\n  <sky-dropdown\n    buttonType=\"select\"\n    [label]=\"'skyux_sort_button_label' | skyLibResources\"\n    [messageStream]=\"dropdownController\"\n    [title]=\"'skyux_sort_button_label' | skyLibResources\"\n  >\n    <sky-dropdown-button>\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"sort\"></sky-icon>\n      <sky-icon *skyThemeIf=\"'modern'\" icon=\"sort\" iconType=\"skyux\"></sky-icon>\n      <span *ngIf=\"showButtonText\" class=\"sky-sort-btn-text\">\n        {{ 'skyux_sort_button_label' | skyLibResources }}\n      </span>\n    </sky-dropdown-button>\n    <sky-dropdown-menu\n      ariaRole=\"menu\"\n      [ariaLabelledBy]=\"sortMenuHeading.id\"\n      (click)=\"dropdownClicked()\"\n    >\n      <sky-sort-menu-heading\n        skyId\n        #sortMenuHeading=\"skyId\"\n      ></sky-sort-menu-heading>\n      <div *skyThemeIf=\"'default'\" class=\"sky-sort-heading-divider\"></div>\n      <ng-content></ng-content>\n    </sky-dropdown-menu>\n  </sky-dropdown>\n</div>\n", styles: [".sky-sort-heading-divider{margin:0;height:1px;overflow:hidden;background-color:#eeeeef}:host .sky-sort-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-sort-btn-text,:host-context(.sky-responsive-container-sm) .sky-sort-btn-text,:host-context(.sky-responsive-container-md) .sky-sort-btn-text,:host-context(.sky-responsive-container-lg) .sky-sort-btn-text{display:none}@media (min-width: 768px){:host .sky-sort-btn-text{display:inline}}:host-context(.sky-responsive-container-sm) .sky-sort-btn-text,:host-context(.sky-responsive-container-md) .sky-sort-btn-text,:host-context(.sky-responsive-container-lg) .sky-sort-btn-text{display:inline}\n"] }]
+        }], propDecorators: { showButtonText: [{
+                type: Input
+            }] } });
+
+class SkySortModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySortModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkySortModule, declarations: [SkySortComponent,
+            SkySortItemComponent,
+            SkySortMenuHeadingComponent], imports: [CommonModule,
+            SkyDropdownModule,
+            SkyIconModule,
+            SkyIdModule,
+            SkyListsResourcesModule,
+            SkyThemeModule], exports: [SkySortComponent, SkySortItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySortModule, imports: [CommonModule,
+            SkyDropdownModule,
+            SkyIconModule,
+            SkyIdModule,
+            SkyListsResourcesModule,
+            SkyThemeModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySortModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkySortComponent,
+                        SkySortItemComponent,
+                        SkySortMenuHeadingComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        SkyDropdownModule,
+                        SkyIconModule,
+                        SkyIdModule,
+                        SkyListsResourcesModule,
+                        SkyThemeModule,
+                    ],
+                    exports: [SkySortComponent, SkySortItemComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkyFilterModule, SkyInfiniteScrollModule, SkyPagingModule, SkyRepeaterModule, SkySortModule, SkyFilterButtonComponent as λ1, SkyRepeaterItemComponent as λ10, SkyRepeaterComponent as λ11, SkyRepeaterItemTitleComponent as λ12, SkySortItemComponent as λ13, SkySortComponent as λ14, SkyFilterInlineComponent as λ2, SkyFilterInlineItemComponent as λ3, SkyFilterSummaryItemComponent as λ4, SkyFilterSummaryComponent as λ5, SkyInfiniteScrollComponent as λ6, SkyPagingComponent as λ7, SkyRepeaterItemContentComponent as λ8, SkyRepeaterItemContextMenuComponent as λ9 };
+//# sourceMappingURL=skyux-lists.mjs.map