@skyux/lists 7.0.0-beta.6 → 7.0.0-beta.8

package/fesm2015/skyux-lists.mjs

@@ -681,6 +681,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
             args: [{ selector: 'sky-repeater-item-title', template: "<ng-content></ng-content>\n" }]
         }] });
 
+var _SkyRepeaterService__expandMode;
+let uniqueId = 0;
+const DEFAULT_EXPAND_MODE = 'none';
 /**
  * @internal
  */
@@ -697,6 +700,15 @@ class SkyRepeaterService {
             title: undefined,
         });
         this.orderChange = new BehaviorSubject(undefined);
+        this.repeaterGroupId = ++uniqueId;
+        _SkyRepeaterService__expandMode.set(this, DEFAULT_EXPAND_MODE);
+    }
+    // TODO: Remove 'string' as a valid type in a breaking change.
+    get expandMode() {
+        return __classPrivateFieldGet(this, _SkyRepeaterService__expandMode, "f");
+    }
+    set expandMode(value) {
+        __classPrivateFieldSet(this, _SkyRepeaterService__expandMode, value !== null && value !== void 0 ? value : DEFAULT_EXPAND_MODE, "f");
     }
     ngOnDestroy() {
         this.activeItemChange.complete();
@@ -739,9 +751,6 @@ class SkyRepeaterService {
     onItemCollapseStateChange(item) {
         this.itemCollapseStateChange.emit(item);
     }
-    getItemIndex(item) {
-        return this.items.indexOf(item);
-    }
     registerOrderChange() {
         this.orderChange.next();
     }
@@ -749,35 +758,39 @@ class SkyRepeaterService {
         this.items.splice(newIndex, 0, this.items.splice(oldIndex, 1)[0]);
     }
 }
+_SkyRepeaterService__expandMode = new WeakMap();
 SkyRepeaterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyRepeaterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 SkyRepeaterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyRepeaterService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyRepeaterService, decorators: [{
             type: Injectable
         }] });
 
+var _SkyRepeaterAdapterService_instances, _SkyRepeaterAdapterService_repeaterItemGroupSelector_get, _SkyRepeaterAdapterService_host, _SkyRepeaterAdapterService_repeaterService, _SkyRepeaterAdapterService_moveItem, _SkyRepeaterAdapterService_getRepeaterItemArray;
 /**
  * @internal
  */
 class SkyRepeaterAdapterService {
     constructor(repeaterService) {
-        this.repeaterService = repeaterService;
-    }
-    get repeaterItemGroupSelector() {
-        return '.sky-repeater-item-group-' + this.repeaterService.repeaterGroupId;
+        _SkyRepeaterAdapterService_instances.add(this);
+        _SkyRepeaterAdapterService_host.set(this, void 0);
+        _SkyRepeaterAdapterService_repeaterService.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyRepeaterAdapterService_repeaterService, repeaterService, "f");
     }
     focusElement(element) {
-        if (element instanceof ElementRef) {
-            element.nativeElement.focus();
-        }
-        else {
-            element.focus();
+        if (element) {
+            if (element instanceof ElementRef) {
+                element.nativeElement.focus();
+            }
+            else {
+                element.focus();
+            }
         }
     }
     setRepeaterHost(hostRef) {
-        this.host = hostRef;
+        __classPrivateFieldSet(this, _SkyRepeaterAdapterService_host, hostRef, "f");
     }
     getRepeaterItemIndex(element) {
-        return this.getRepeaterItemArray().indexOf(element);
+        return __classPrivateFieldGet(this, _SkyRepeaterAdapterService_instances, "m", _SkyRepeaterAdapterService_getRepeaterItemArray).call(this).indexOf(element);
     }
     moveItemUp(element, top = false, steps = 1) {
         const index = this.getRepeaterItemIndex(element);
@@ -788,49 +801,48 @@ class SkyRepeaterAdapterService {
         if (top || newIndex < 0) {
             newIndex = 0;
         }
-        return this.moveItem(element, index, newIndex);
+        return __classPrivateFieldGet(this, _SkyRepeaterAdapterService_instances, "m", _SkyRepeaterAdapterService_moveItem).call(this, element, index, newIndex);
     }
     moveItemDown(element, steps = 1) {
-        const itemArray = this.getRepeaterItemArray();
+        const itemArray = __classPrivateFieldGet(this, _SkyRepeaterAdapterService_instances, "m", _SkyRepeaterAdapterService_getRepeaterItemArray).call(this);
         const index = this.getRepeaterItemIndex(element);
         if (index === itemArray.length - steps) {
             return;
         }
         const newIndex = index + steps;
-        return this.moveItem(element, index, newIndex);
+        return __classPrivateFieldGet(this, _SkyRepeaterAdapterService_instances, "m", _SkyRepeaterAdapterService_moveItem).call(this, element, index, newIndex);
     }
-    moveItem(element, oldIndex, newIndex) {
-        const repeaterDiv = this.host.nativeElement.querySelector('.sky-repeater');
+}
+_SkyRepeaterAdapterService_host = new WeakMap(), _SkyRepeaterAdapterService_repeaterService = new WeakMap(), _SkyRepeaterAdapterService_instances = new WeakSet(), _SkyRepeaterAdapterService_repeaterItemGroupSelector_get = function _SkyRepeaterAdapterService_repeaterItemGroupSelector_get() {
+    return '.sky-repeater-item-group-' + __classPrivateFieldGet(this, _SkyRepeaterAdapterService_repeaterService, "f").repeaterGroupId;
+}, _SkyRepeaterAdapterService_moveItem = function _SkyRepeaterAdapterService_moveItem(element, oldIndex, newIndex) {
+    /* istanbul ignore else */
+    if (__classPrivateFieldGet(this, _SkyRepeaterAdapterService_host, "f")) {
+        const repeaterDiv = __classPrivateFieldGet(this, _SkyRepeaterAdapterService_host, "f").nativeElement.querySelector('.sky-repeater');
         repeaterDiv.removeChild(element);
-        const nextSibling = repeaterDiv.querySelectorAll(this.repeaterItemGroupSelector)[newIndex];
+        const nextSibling = repeaterDiv.querySelectorAll(__classPrivateFieldGet(this, _SkyRepeaterAdapterService_instances, "a", _SkyRepeaterAdapterService_repeaterItemGroupSelector_get))[newIndex];
         repeaterDiv.insertBefore(element, nextSibling);
-        this.repeaterService.reorderItem(oldIndex, newIndex);
-        return newIndex;
+        __classPrivateFieldGet(this, _SkyRepeaterAdapterService_repeaterService, "f").reorderItem(oldIndex, newIndex);
     }
-    /**
-     * Returns an array of the immediate repeater item descendants. Excludes nested repeater items.
-     */
-    getRepeaterItemArray() {
-        return Array.from(this.host.nativeElement.querySelectorAll(this.repeaterItemGroupSelector));
-    }
-}
+    return newIndex;
+}, _SkyRepeaterAdapterService_getRepeaterItemArray = function _SkyRepeaterAdapterService_getRepeaterItemArray() {
+    var _a;
+    return Array.from((_a = __classPrivateFieldGet(this, _SkyRepeaterAdapterService_host, "f")) === null || _a === void 0 ? void 0 : _a.nativeElement.querySelectorAll(__classPrivateFieldGet(this, _SkyRepeaterAdapterService_instances, "a", _SkyRepeaterAdapterService_repeaterItemGroupSelector_get)));
+};
 SkyRepeaterAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyRepeaterAdapterService, deps: [{ token: SkyRepeaterService }], target: i0.ɵɵFactoryTarget.Injectable });
 SkyRepeaterAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyRepeaterAdapterService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyRepeaterAdapterService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: SkyRepeaterService }]; } });
 
+var _SkyRepeaterItemComponent_instances, _SkyRepeaterItemComponent_adapterService, _SkyRepeaterItemComponent_changeDetector, _SkyRepeaterItemComponent_elementRef, _SkyRepeaterItemComponent_isExpanded, _SkyRepeaterItemComponent_keyboardReorderingEnabled, _SkyRepeaterItemComponent_ngUnsubscribe, _SkyRepeaterItemComponent_reorderCancelText, _SkyRepeaterItemComponent_reorderCurrentIndex, _SkyRepeaterItemComponent_reorderFinishText, _SkyRepeaterItemComponent_reorderInstructions, _SkyRepeaterItemComponent_reorderMovedText, _SkyRepeaterItemComponent_reorderStateDescription, _SkyRepeaterItemComponent_reorderSteps, _SkyRepeaterItemComponent_repeaterService, _SkyRepeaterItemComponent_resourceService, _SkyRepeaterItemComponent__isCollapsible, _SkyRepeaterItemComponent__isDisabled, _SkyRepeaterItemComponent__isSelected, _SkyRepeaterItemComponent_slideForExpanded, _SkyRepeaterItemComponent_keyboardReorderUp, _SkyRepeaterItemComponent_keyboardReorderDown, _SkyRepeaterItemComponent_keyboardToggleReorder, _SkyRepeaterItemComponent_revertReorderSteps, _SkyRepeaterItemComponent_updateExpandOnContentChange;
 let nextContentId = 0;
 /**
  * Creates an individual repeater item.
  */
 class SkyRepeaterItemComponent {
     constructor(repeaterService, changeDetector, adapterService, elementRef, resourceService) {
-        this.repeaterService = repeaterService;
-        this.changeDetector = changeDetector;
-        this.adapterService = adapterService;
-        this.elementRef = elementRef;
-        this.resourceService = resourceService;
+        _SkyRepeaterItemComponent_instances.add(this);
         /**
          * Indicates whether users can change the order of the repeater item.
          * The repeater component's `reorderable` property must also be set to `true`.
@@ -862,31 +874,51 @@ class SkyRepeaterItemComponent {
          * Fires when users select or clear the checkbox for the repeater item.
          */
         this.isSelectedChange = new EventEmitter();
-        this.contentId = `sky-repeater-item-content-${++nextContentId}`;
         this.hasItemContent = false;
         this.isActive = false;
-        this.keyboardReorderingEnabled = false;
-        this.ngUnsubscribe = new Subject();
-        this._isCollapsible = true;
-        this._isDisabled = false;
-        this._isExpanded = true;
-        this._isSelected = false;
-        this.slideForExpanded(false);
+        this.reorderButtonLabel = '';
+        _SkyRepeaterItemComponent_adapterService.set(this, void 0);
+        _SkyRepeaterItemComponent_changeDetector.set(this, void 0);
+        _SkyRepeaterItemComponent_elementRef.set(this, void 0);
+        _SkyRepeaterItemComponent_isExpanded.set(this, true);
+        _SkyRepeaterItemComponent_keyboardReorderingEnabled.set(this, false);
+        _SkyRepeaterItemComponent_ngUnsubscribe.set(this, new Subject());
+        _SkyRepeaterItemComponent_reorderCancelText.set(this, '');
+        _SkyRepeaterItemComponent_reorderCurrentIndex.set(this, -1);
+        _SkyRepeaterItemComponent_reorderFinishText.set(this, '');
+        _SkyRepeaterItemComponent_reorderInstructions.set(this, '');
+        _SkyRepeaterItemComponent_reorderMovedText.set(this, '');
+        _SkyRepeaterItemComponent_reorderStateDescription.set(this, '');
+        _SkyRepeaterItemComponent_reorderSteps.set(this, 0);
+        _SkyRepeaterItemComponent_repeaterService.set(this, void 0);
+        _SkyRepeaterItemComponent_resourceService.set(this, void 0);
+        _SkyRepeaterItemComponent__isCollapsible.set(this, true);
+        _SkyRepeaterItemComponent__isDisabled.set(this, false);
+        _SkyRepeaterItemComponent__isSelected.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyRepeaterItemComponent_repeaterService, repeaterService, "f");
+        __classPrivateFieldSet(this, _SkyRepeaterItemComponent_changeDetector, changeDetector, "f");
+        __classPrivateFieldSet(this, _SkyRepeaterItemComponent_adapterService, adapterService, "f");
+        __classPrivateFieldSet(this, _SkyRepeaterItemComponent_elementRef, elementRef, "f");
+        __classPrivateFieldSet(this, _SkyRepeaterItemComponent_resourceService, resourceService, "f");
+        __classPrivateFieldGet(this, _SkyRepeaterItemComponent_instances, "m", _SkyRepeaterItemComponent_slideForExpanded).call(this);
         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'),
-        ]).subscribe((translatedStrings) => {
-            this.reorderCancelText = translatedStrings[0];
-            this.reorderFinishText = translatedStrings[1];
-            this.reorderStateDescription = translatedStrings[2];
-            this.reorderInstructions = translatedStrings[3];
-            this.reorderMovedText = translatedStrings[4];
-            this.reorderButtonLabel = this.reorderInstructions;
+            __classPrivateFieldGet(this, _SkyRepeaterItemComponent_resourceService, "f").getString('skyux_repeater_item_reorder_cancel'),
+            __classPrivateFieldGet(this, _SkyRepeaterItemComponent_resourceService, "f").getString('skyux_repeater_item_reorder_finish'),
+            __classPrivateFieldGet(this, _SkyRepeaterItemComponent_resourceService, "f").getString('skyux_repeater_item_reorder_instructions'),
+            __classPrivateFieldGet(this, _SkyRepeaterItemComponent_resourceService, "f").getString('skyux_repeater_item_reorder_operation'),
+            __classPrivateFieldGet(this, _SkyRepeaterItemComponent_resourceService, "f").getString('skyux_repeater_item_reorder_moved'),
+        ])
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyRepeaterItemComponent_ngUnsubscribe, "f")))
+            .subscribe(([reorderCancelText, reorderFinishText, reorderInstructionsText, reorderOperationText, reorderMovedText,]) => {
+            __classPrivateFieldSet(this, _SkyRepeaterItemComponent_reorderCancelText, reorderCancelText, "f");
+            __classPrivateFieldSet(this, _SkyRepeaterItemComponent_reorderFinishText, reorderFinishText, "f");
+            __classPrivateFieldSet(this, _SkyRepeaterItemComponent_reorderStateDescription, reorderInstructionsText, "f");
+            __classPrivateFieldSet(this, _SkyRepeaterItemComponent_reorderInstructions, reorderOperationText, "f");
+            __classPrivateFieldSet(this, _SkyRepeaterItemComponent_reorderMovedText, reorderMovedText, "f");
+            this.reorderButtonLabel = __classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderInstructions, "f");
         });
-        this.itemRole$ = this.repeaterService.itemRole.asObservable();
+        this.contentId = `sky-repeater-item-content-${++nextContentId}`;
+        this.itemRole$ = __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").itemRole.asObservable();
     }
     /**
      * Make the first, non-disabled item tab-focusable.
@@ -894,7 +926,7 @@ class SkyRepeaterItemComponent {
      * - 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] ===
+        return __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").items.filter((item) => !item.disabled)[0] ===
             this
             ? 0
             : -1;
@@ -903,35 +935,35 @@ class SkyRepeaterItemComponent {
      * Whether to exclude an item when cycling through.
      */
     set disabled(value) {
-        if (this._isDisabled !== value) {
+        if (__classPrivateFieldGet(this, _SkyRepeaterItemComponent__isDisabled, "f") !== value) {
             if (value) {
                 this.isSelected = false;
-                this._isDisabled = true;
+                __classPrivateFieldSet(this, _SkyRepeaterItemComponent__isDisabled, true, "f");
             }
             else {
-                this._isDisabled = false;
+                __classPrivateFieldSet(this, _SkyRepeaterItemComponent__isDisabled, false, "f");
             }
             if (this.isActive) {
-                this.repeaterService.activateItemByIndex(undefined);
+                __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").activateItemByIndex(undefined);
             }
-            if (this.elementRef.nativeElement.matches(':focus-within')) {
-                this.elementRef.nativeElement.ownerDocument.activeElement.blur();
+            if (__classPrivateFieldGet(this, _SkyRepeaterItemComponent_elementRef, "f").nativeElement.matches(':focus-within')) {
+                __classPrivateFieldGet(this, _SkyRepeaterItemComponent_elementRef, "f").nativeElement.ownerDocument.activeElement.blur();
             }
-            this.changeDetector.markForCheck();
+            __classPrivateFieldGet(this, _SkyRepeaterItemComponent_changeDetector, "f").markForCheck();
         }
     }
     get disabled() {
-        return this._isDisabled;
+        return __classPrivateFieldGet(this, _SkyRepeaterItemComponent__isDisabled, "f");
     }
     /**
      * Indicates whether the repeater item is expanded.
      * @default true
      */
     set isExpanded(value) {
-        this.updateForExpanded(value, true);
+        this.updateForExpanded(value !== false);
     }
     get isExpanded() {
-        return this._isExpanded;
+        return __classPrivateFieldGet(this, _SkyRepeaterItemComponent_isExpanded, "f");
     }
     /**
      * Indicates whether the repeater item's checkbox is selected.
@@ -939,54 +971,55 @@ class SkyRepeaterItemComponent {
      * @default false
      */
     set isSelected(value) {
-        if (!this.disabled && value !== this._isSelected) {
-            this._isSelected = value;
-            this.isSelectedChange.emit(this._isSelected);
+        if (!this.disabled && value !== __classPrivateFieldGet(this, _SkyRepeaterItemComponent__isSelected, "f")) {
+            __classPrivateFieldSet(this, _SkyRepeaterItemComponent__isSelected, value, "f");
+            this.isSelectedChange.emit(__classPrivateFieldGet(this, _SkyRepeaterItemComponent__isSelected, "f"));
         }
     }
     get isSelected() {
-        return this._isSelected;
+        return __classPrivateFieldGet(this, _SkyRepeaterItemComponent__isSelected, "f");
     }
     set isCollapsible(value) {
         if (this.isCollapsible !== value) {
-            this._isCollapsible = value;
+            __classPrivateFieldSet(this, _SkyRepeaterItemComponent__isCollapsible, value !== false, "f");
             /*istanbul ignore else */
-            if (!value) {
-                this.updateForExpanded(true, false);
+            if (!__classPrivateFieldGet(this, _SkyRepeaterItemComponent__isCollapsible, "f")) {
+                this.updateForExpanded(true);
             }
         }
-        this.changeDetector.markForCheck();
+        __classPrivateFieldGet(this, _SkyRepeaterItemComponent_changeDetector, "f").markForCheck();
     }
     get isCollapsible() {
-        return this._isCollapsible;
+        return __classPrivateFieldGet(this, _SkyRepeaterItemComponent__isCollapsible, "f");
     }
     get repeaterGroupClass() {
-        return 'sky-repeater-item-group-' + this.repeaterService.repeaterGroupId;
+        return 'sky-repeater-item-group-' + __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").repeaterGroupId;
     }
     ngOnInit() {
-        this.repeaterService.registerItem(this);
-        this.repeaterService.activeItemChange
-            .pipe(takeUntil(this.ngUnsubscribe))
+        __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").registerItem(this);
+        __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").activeItemChange
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyRepeaterItemComponent_ngUnsubscribe, "f")))
             .subscribe((item) => {
             const newIsActiveValue = this === item;
             if (newIsActiveValue !== this.isActive) {
                 this.isActive = newIsActiveValue;
-                this.changeDetector.markForCheck();
+                __classPrivateFieldGet(this, _SkyRepeaterItemComponent_changeDetector, "f").markForCheck();
             }
         });
     }
     ngAfterViewInit() {
-        this.hasItemContent = this.repeaterItemContentComponents.length > 0;
-        this.updateExpandOnContentChange();
+        var _b;
+        this.hasItemContent = !!((_b = this.repeaterItemContentComponents) === null || _b === void 0 ? void 0 : _b.length);
+        __classPrivateFieldGet(this, _SkyRepeaterItemComponent_instances, "m", _SkyRepeaterItemComponent_updateExpandOnContentChange).call(this);
     }
     ngOnDestroy() {
         this.collapse.complete();
         this.expand.complete();
         this.inlineFormClose.complete();
         this.isSelectedChange.complete();
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
-        this.repeaterService.unregisterItem(this);
+        __classPrivateFieldGet(this, _SkyRepeaterItemComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyRepeaterItemComponent_ngUnsubscribe, "f").complete();
+        __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").unregisterItem(this);
     }
     onKeydown($event) {
         if ([' ', 'Enter', 'Home', 'End', 'ArrowUp', 'ArrowDown'].includes($event.key)) {
@@ -1006,7 +1039,7 @@ class SkyRepeaterItemComponent {
             }
             /* istanbul ignore else */
             if (['Home', 'End'].includes($event.key)) {
-                const items = this.repeaterService.items.filter((item) => !item.disabled);
+                const items = __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").items.filter((item) => !item.disabled);
                 if ($event.key === 'Home') {
                     activateItem = items.shift();
                 }
@@ -1016,7 +1049,7 @@ class SkyRepeaterItemComponent {
             }
             /* istanbul ignore else */
             if (['ArrowUp', 'ArrowDown'].includes($event.key)) {
-                const currentIndex = this.repeaterService.items.findIndex((item) => item === this);
+                const currentIndex = __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").items.findIndex((item) => item === this);
                 let sliceFrom;
                 let sliceTo;
                 if ($event.key === 'ArrowUp') {
@@ -1027,7 +1060,7 @@ class SkyRepeaterItemComponent {
                     sliceFrom = currentIndex + 1;
                     sliceTo = undefined;
                 }
-                const items = this.repeaterService.items
+                const items = __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").items
                     .slice(sliceFrom, sliceTo)
                     .filter((item) => !item.disabled);
                 activateItem = $event.key === 'ArrowUp' ? items.pop() : items.shift();
@@ -1041,7 +1074,7 @@ class SkyRepeaterItemComponent {
                         sliceFrom = currentIndex + 1;
                         sliceTo = undefined;
                     }
-                    const items = this.repeaterService.items
+                    const items = __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").items
                         .slice(sliceFrom, sliceTo)
                         .filter((item) => !item.disabled);
                     activateItem = $event.key === 'ArrowUp' ? items.pop() : items.shift();
@@ -1049,47 +1082,48 @@ class SkyRepeaterItemComponent {
             }
             /* istanbul ignore else */
             if (activateItem && !activateItem.isActive) {
-                this.repeaterService.activateItem(activateItem);
-                if (!activateItem.elementRef.nativeElement.matches(':focus-within')) {
-                    activateItem.elementRef.nativeElement.focus();
+                __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").activateItem(activateItem);
+                if (!__classPrivateFieldGet(activateItem, _SkyRepeaterItemComponent_elementRef, "f").nativeElement.matches(':focus-within')) {
+                    __classPrivateFieldGet(activateItem, _SkyRepeaterItemComponent_elementRef, "f").nativeElement.focus();
                 }
             }
         }
     }
     headerClick() {
         if (this.isCollapsible) {
-            this.updateForExpanded(!this.isExpanded, true);
+            this.updateForExpanded(!this.isExpanded);
         }
     }
     chevronDirectionChange(direction) {
-        this.updateForExpanded(direction === 'up', true);
+        this.updateForExpanded(direction === 'up');
     }
     onRepeaterItemClick(event) {
+        var _b, _c, _d;
         // 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);
+        if (event.target === ((_b = this.itemRef) === null || _b === void 0 ? void 0 : _b.nativeElement) ||
+            ((_c = this.itemContentRef) === null || _c === void 0 ? void 0 : _c.nativeElement.contains(event.target)) ||
+            ((_d = this.itemHeaderRef) === null || _d === void 0 ? void 0 : _d.nativeElement.contains(event.target))) {
+            __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").activateItem(this);
         }
     }
-    updateForExpanded(value, animate) {
+    updateForExpanded(value) {
         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) {
+        else if (__classPrivateFieldGet(this, _SkyRepeaterItemComponent_isExpanded, "f") !== value) {
+            __classPrivateFieldSet(this, _SkyRepeaterItemComponent_isExpanded, value, "f");
+            if (__classPrivateFieldGet(this, _SkyRepeaterItemComponent_isExpanded, "f")) {
                 this.expand.emit();
             }
             else {
                 this.collapse.emit();
             }
-            this.repeaterService.onItemCollapseStateChange(this);
-            this.slideForExpanded(animate);
-            this.changeDetector.markForCheck();
+            __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").onItemCollapseStateChange(this);
+            __classPrivateFieldGet(this, _SkyRepeaterItemComponent_instances, "m", _SkyRepeaterItemComponent_slideForExpanded).call(this);
+            __classPrivateFieldGet(this, _SkyRepeaterItemComponent_changeDetector, "f").markForCheck();
         }
     }
     onCheckboxChange(value) {
@@ -1100,9 +1134,9 @@ class SkyRepeaterItemComponent {
     }
     moveToTop(event) {
         event.stopPropagation();
-        this.adapterService.moveItemUp(this.elementRef.nativeElement, true);
-        this.adapterService.focusElement(event.target);
-        this.repeaterService.registerOrderChange();
+        __classPrivateFieldGet(this, _SkyRepeaterItemComponent_adapterService, "f").moveItemUp(__classPrivateFieldGet(this, _SkyRepeaterItemComponent_elementRef, "f").nativeElement, true);
+        __classPrivateFieldGet(this, _SkyRepeaterItemComponent_adapterService, "f").focusElement(event.target);
+        __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").registerOrderChange();
     }
     onReorderHandleKeyDown(event) {
         /*istanbul ignore else */
@@ -1110,43 +1144,43 @@ class SkyRepeaterItemComponent {
             switch (event.key.toLowerCase()) {
                 case ' ':
                 case 'enter':
-                    this.keyboardToggleReorder();
+                    __classPrivateFieldGet(this, _SkyRepeaterItemComponent_instances, "m", _SkyRepeaterItemComponent_keyboardToggleReorder).call(this);
                     event.preventDefault();
                     event.stopPropagation();
                     break;
                 case 'escape':
                     /* istanbul ignore else */
-                    if (this.keyboardReorderingEnabled) {
-                        this.keyboardReorderingEnabled = false;
-                        this.revertReorderSteps();
+                    if (__classPrivateFieldGet(this, _SkyRepeaterItemComponent_keyboardReorderingEnabled, "f")) {
+                        __classPrivateFieldSet(this, _SkyRepeaterItemComponent_keyboardReorderingEnabled, false, "f");
+                        __classPrivateFieldGet(this, _SkyRepeaterItemComponent_instances, "m", _SkyRepeaterItemComponent_revertReorderSteps).call(this);
                         this.reorderButtonLabel =
-                            this.reorderCancelText + ' ' + this.reorderInstructions;
-                        this.adapterService.focusElement(event.target);
+                            __classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderCancelText, "f") + ' ' + __classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderInstructions, "f");
+                        __classPrivateFieldGet(this, _SkyRepeaterItemComponent_adapterService, "f").focusElement(event.target);
                         event.preventDefault();
                         event.stopPropagation();
                     }
                     break;
                 case 'arrowup':
-                    if (this.keyboardReorderingEnabled) {
-                        this.keyboardReorderUp();
+                    if (__classPrivateFieldGet(this, _SkyRepeaterItemComponent_keyboardReorderingEnabled, "f")) {
+                        __classPrivateFieldGet(this, _SkyRepeaterItemComponent_instances, "m", _SkyRepeaterItemComponent_keyboardReorderUp).call(this);
                         event.preventDefault();
                         event.stopPropagation();
-                        this.repeaterService.registerOrderChange();
+                        __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").registerOrderChange();
                     }
                     break;
                 case 'arrowdown':
                     /* istanbul ignore else */
-                    if (this.keyboardReorderingEnabled) {
-                        this.keyboardReorderDown();
+                    if (__classPrivateFieldGet(this, _SkyRepeaterItemComponent_keyboardReorderingEnabled, "f")) {
+                        __classPrivateFieldGet(this, _SkyRepeaterItemComponent_instances, "m", _SkyRepeaterItemComponent_keyboardReorderDown).call(this);
                         event.preventDefault();
                         event.stopPropagation();
-                        this.repeaterService.registerOrderChange();
+                        __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").registerOrderChange();
                     }
                     break;
                 case 'arrowleft':
                 case 'arrowright':
                     /* istanbul ignore else */
-                    if (this.keyboardReorderingEnabled) {
+                    if (__classPrivateFieldGet(this, _SkyRepeaterItemComponent_keyboardReorderingEnabled, "f")) {
                         event.preventDefault();
                         event.stopPropagation();
                     }
@@ -1158,67 +1192,72 @@ class SkyRepeaterItemComponent {
         }
     }
     onReorderHandleBlur(event) {
-        this.keyboardReorderingEnabled = false;
-        this.revertReorderSteps();
-        this.reorderButtonLabel = this.reorderInstructions;
+        __classPrivateFieldSet(this, _SkyRepeaterItemComponent_keyboardReorderingEnabled, false, "f");
+        __classPrivateFieldGet(this, _SkyRepeaterItemComponent_instances, "m", _SkyRepeaterItemComponent_revertReorderSteps).call(this);
+        this.reorderButtonLabel = __classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderInstructions, "f");
         this.reorderState = undefined;
     }
-    slideForExpanded(animate) {
-        this.slideDirection = this.isExpanded ? 'down' : 'up';
-    }
-    keyboardReorderUp() {
-        this.reorderCurrentIndex = this.adapterService.moveItemUp(this.elementRef.nativeElement);
-        this.reorderSteps--;
-        this.adapterService.focusElement(this.grabHandle);
-        this.keyboardReorderingEnabled = true;
-        this.reorderButtonLabel = `${this.reorderMovedText} ${this.reorderCurrentIndex + 1}`;
-    }
-    keyboardReorderDown() {
-        this.reorderCurrentIndex = this.adapterService.moveItemDown(this.elementRef.nativeElement);
-        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 {
-            this.reorderState = `${this.reorderFinishText} ${this.reorderCurrentIndex + 1} ${this.reorderInstructions}`;
-        }
+}
+_SkyRepeaterItemComponent_adapterService = new WeakMap(), _SkyRepeaterItemComponent_changeDetector = new WeakMap(), _SkyRepeaterItemComponent_elementRef = new WeakMap(), _SkyRepeaterItemComponent_isExpanded = new WeakMap(), _SkyRepeaterItemComponent_keyboardReorderingEnabled = new WeakMap(), _SkyRepeaterItemComponent_ngUnsubscribe = new WeakMap(), _SkyRepeaterItemComponent_reorderCancelText = new WeakMap(), _SkyRepeaterItemComponent_reorderCurrentIndex = new WeakMap(), _SkyRepeaterItemComponent_reorderFinishText = new WeakMap(), _SkyRepeaterItemComponent_reorderInstructions = new WeakMap(), _SkyRepeaterItemComponent_reorderMovedText = new WeakMap(), _SkyRepeaterItemComponent_reorderStateDescription = new WeakMap(), _SkyRepeaterItemComponent_reorderSteps = new WeakMap(), _SkyRepeaterItemComponent_repeaterService = new WeakMap(), _SkyRepeaterItemComponent_resourceService = new WeakMap(), _SkyRepeaterItemComponent__isCollapsible = new WeakMap(), _SkyRepeaterItemComponent__isDisabled = new WeakMap(), _SkyRepeaterItemComponent__isSelected = new WeakMap(), _SkyRepeaterItemComponent_instances = new WeakSet(), _SkyRepeaterItemComponent_slideForExpanded = function _SkyRepeaterItemComponent_slideForExpanded() {
+    this.slideDirection = this.isExpanded ? 'down' : 'up';
+}, _SkyRepeaterItemComponent_keyboardReorderUp = function _SkyRepeaterItemComponent_keyboardReorderUp() {
+    var _a;
+    const newIndex = __classPrivateFieldGet(this, _SkyRepeaterItemComponent_adapterService, "f").moveItemUp(__classPrivateFieldGet(this, _SkyRepeaterItemComponent_elementRef, "f").nativeElement);
+    if (newIndex !== undefined) {
+        __classPrivateFieldSet(this, _SkyRepeaterItemComponent_reorderCurrentIndex, newIndex, "f");
+        __classPrivateFieldSet(this, _SkyRepeaterItemComponent_reorderSteps, (_a = __classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderSteps, "f"), _a--, _a), "f");
+        __classPrivateFieldGet(this, _SkyRepeaterItemComponent_adapterService, "f").focusElement(this.grabHandle);
+        __classPrivateFieldSet(this, _SkyRepeaterItemComponent_keyboardReorderingEnabled, true, "f");
+        this.reorderButtonLabel = `${__classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderMovedText, "f")} ${__classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderCurrentIndex, "f") + 1}`;
+    }
+}, _SkyRepeaterItemComponent_keyboardReorderDown = function _SkyRepeaterItemComponent_keyboardReorderDown() {
+    var _a;
+    const newIndex = __classPrivateFieldGet(this, _SkyRepeaterItemComponent_adapterService, "f").moveItemDown(__classPrivateFieldGet(this, _SkyRepeaterItemComponent_elementRef, "f").nativeElement);
+    if (newIndex) {
+        __classPrivateFieldSet(this, _SkyRepeaterItemComponent_reorderCurrentIndex, newIndex, "f");
+        __classPrivateFieldSet(this, _SkyRepeaterItemComponent_reorderSteps, (_a = __classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderSteps, "f"), _a++, _a), "f");
+        __classPrivateFieldGet(this, _SkyRepeaterItemComponent_adapterService, "f").focusElement(this.grabHandle);
+        __classPrivateFieldSet(this, _SkyRepeaterItemComponent_keyboardReorderingEnabled, true, "f");
+        this.reorderButtonLabel = `${__classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderMovedText, "f")} ${__classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderCurrentIndex, "f") + 1}`;
+    }
+}, _SkyRepeaterItemComponent_keyboardToggleReorder = function _SkyRepeaterItemComponent_keyboardToggleReorder() {
+    __classPrivateFieldSet(this, _SkyRepeaterItemComponent_keyboardReorderingEnabled, !__classPrivateFieldGet(this, _SkyRepeaterItemComponent_keyboardReorderingEnabled, "f"), "f");
+    __classPrivateFieldSet(this, _SkyRepeaterItemComponent_reorderSteps, 0, "f");
+    if (__classPrivateFieldGet(this, _SkyRepeaterItemComponent_keyboardReorderingEnabled, "f")) {
+        this.reorderState = __classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderStateDescription, "f");
     }
-    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);
+    else {
+        // TODO: Needs improvement to be localizable
+        this.reorderState = `${__classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderFinishText, "f")} ${__classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderCurrentIndex, "f") + 1} ${__classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderInstructions, "f")}`;
+        __classPrivateFieldSet(this, _SkyRepeaterItemComponent_reorderCurrentIndex, -1, "f");
+    }
+}, _SkyRepeaterItemComponent_revertReorderSteps = function _SkyRepeaterItemComponent_revertReorderSteps() {
+    if (__classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderSteps, "f") < 0) {
+        __classPrivateFieldGet(this, _SkyRepeaterItemComponent_adapterService, "f").moveItemDown(__classPrivateFieldGet(this, _SkyRepeaterItemComponent_elementRef, "f").nativeElement, Math.abs(__classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderSteps, "f")));
+    }
+    else if (__classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderSteps, "f") > 0) {
+        __classPrivateFieldGet(this, _SkyRepeaterItemComponent_adapterService, "f").moveItemUp(__classPrivateFieldGet(this, _SkyRepeaterItemComponent_elementRef, "f").nativeElement, false, __classPrivateFieldGet(this, _SkyRepeaterItemComponent_reorderSteps, "f"));
+    }
+    __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").registerOrderChange();
+}, _SkyRepeaterItemComponent_updateExpandOnContentChange = function _SkyRepeaterItemComponent_updateExpandOnContentChange() {
+    var _b;
+    (_b = this.repeaterItemContentComponents) === null || _b === void 0 ? void 0 : _b.changes.pipe(takeUntil(__classPrivateFieldGet(this, _SkyRepeaterItemComponent_ngUnsubscribe, "f"))).subscribe(() => {
+        var _b;
+        this.hasItemContent = !!((_b = this.repeaterItemContentComponents) === null || _b === void 0 ? void 0 : _b.length);
+        /* istanbul ignore next */
+        this.isCollapsible =
+            this.hasItemContent && __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").expandMode !== 'none';
+        /* istanbul ignore else */
+        if (__classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").expandMode === 'single') {
+            __classPrivateFieldGet(this, _SkyRepeaterItemComponent_repeaterService, "f").onItemCollapseStateChange(this);
         }
-        this.repeaterService.registerOrderChange();
-    }
-    updateExpandOnContentChange() {
-        this.repeaterItemContentComponents.changes
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe(() => {
-            this.hasItemContent = this.repeaterItemContentComponents.length > 0;
-            /* istanbul ignore next */
-            this.isCollapsible =
-                this.hasItemContent && this.repeaterService.expandMode !== 'none';
-            /* istanbul ignore else */
-            if (this.repeaterService.expandMode === 'single') {
-                this.repeaterService.onItemCollapseStateChange(this);
-            }
-        });
-    }
-}
+    });
+};
 SkyRepeaterItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyRepeaterItemComponent, deps: [{ token: SkyRepeaterService }, { token: i0.ChangeDetectorRef }, { token: SkyRepeaterAdapterService }, { token: i0.ElementRef }, { token: i4.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Component });
-SkyRepeaterItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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: { "tabindex": "this.tabindex", "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]=\"showInlineForm ? 'form' : (itemRole$ | async).item\"\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 class=\"sky-repeater-item-left\">\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      [hidden]=\"titleRef.children.length === 0\"\n      (click)=\"headerClick()\"\n    >\n      <div\n        class=\"sky-repeater-item-title sky-emphasized\"\n        #titleRef\n        [attr.role]=\"(itemRole$ | async).title\"\n      >\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              ? ('skyux_repeater_item_expand' | skyLibResources: itemName)\n              : ('skyux_repeater_item_expand_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      [@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;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-right:10px}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", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { 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: i4.SkyLibResourcesPipe, name: "skyLibResources" }], animations: [skyAnimationSlide], encapsulation: i0.ViewEncapsulation.None });
+SkyRepeaterItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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: { "tabindex": "this.tabindex", "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]=\"showInlineForm ? 'form' : (itemRole$ | async)?.item\"\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 class=\"sky-repeater-item-left\">\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      [hidden]=\"titleRef.children.length === 0\"\n      (click)=\"headerClick()\"\n    >\n      <div\n        class=\"sky-repeater-item-title sky-emphasized\"\n        #titleRef\n        [attr.role]=\"(itemRole$ | async)?.title\"\n      >\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              ? ('skyux_repeater_item_expand' | skyLibResources: itemName)\n              : ('skyux_repeater_item_expand_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      [@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;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-right:10px}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", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { 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: i4.SkyLibResourcesPipe, name: "skyLibResources" }], animations: [skyAnimationSlide], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", 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]=\"showInlineForm ? 'form' : (itemRole$ | async).item\"\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 class=\"sky-repeater-item-left\">\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      [hidden]=\"titleRef.children.length === 0\"\n      (click)=\"headerClick()\"\n    >\n      <div\n        class=\"sky-repeater-item-title sky-emphasized\"\n        #titleRef\n        [attr.role]=\"(itemRole$ | async).title\"\n      >\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              ? ('skyux_repeater_item_expand' | skyLibResources: itemName)\n              : ('skyux_repeater_item_expand_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      [@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;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-right:10px}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"] }]
+            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]=\"showInlineForm ? 'form' : (itemRole$ | async)?.item\"\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 class=\"sky-repeater-item-left\">\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      [hidden]=\"titleRef.children.length === 0\"\n      (click)=\"headerClick()\"\n    >\n      <div\n        class=\"sky-repeater-item-title sky-emphasized\"\n        #titleRef\n        [attr.role]=\"(itemRole$ | async)?.title\"\n      >\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              ? ('skyux_repeater_item_expand' | skyLibResources: itemName)\n              : ('skyux_repeater_item_expand_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      [@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;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-right:10px}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: i4.SkyLibResourcesService }]; }, propDecorators: { tabindex: [{
                 type: HostBinding
             }], disabled: [{
@@ -1275,18 +1314,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 args: ['keydown', ['$event']]
             }] } });
 
-let uniqueId = 0;
+var _SkyRepeaterComponent_instances, _SkyRepeaterComponent_adapterService, _SkyRepeaterComponent_changeDetector, _SkyRepeaterComponent_dragulaService, _SkyRepeaterComponent_elementRef, _SkyRepeaterComponent_renderer, _SkyRepeaterComponent_repeaterService, _SkyRepeaterComponent_ngUnsubscribe, _SkyRepeaterComponent_updateForExpandMode, _SkyRepeaterComponent_initializeDragAndDrop, _SkyRepeaterComponent_destroyDragAndDrop, _SkyRepeaterComponent_emitTags, _SkyRepeaterComponent_everyItemHasTag, _SkyRepeaterComponent_updateRole;
 /**
  * Creates a container to display repeater items.
  */
 class SkyRepeaterComponent {
     constructor(changeDetector, repeaterService, adapterService, dragulaService, elementRef, renderer) {
-        this.changeDetector = changeDetector;
-        this.repeaterService = repeaterService;
-        this.adapterService = adapterService;
-        this.dragulaService = dragulaService;
-        this.elementRef = elementRef;
-        this.renderer = renderer;
+        _SkyRepeaterComponent_instances.add(this);
         /**
          * Indicates whether users can change the order of items in the repeater list.
          * Each repeater item also has `reorderable` property to indicate whether
@@ -1302,15 +1336,26 @@ class SkyRepeaterComponent {
          * This event emits an ordered array of the `tag` properties that the consumer provides for each repeater item.
          */
         this.orderChange = new EventEmitter();
-        this.dragulaUnsubscribe = new Subject();
-        this.ngUnsubscribe = new Subject();
-        this._expandMode = 'none';
-        this.dragulaGroupName = `sky-repeater-dragula-${++uniqueId}`;
-        this.repeaterService.itemCollapseStateChange
-            .pipe(takeUntil(this.ngUnsubscribe))
+        _SkyRepeaterComponent_adapterService.set(this, void 0);
+        _SkyRepeaterComponent_changeDetector.set(this, void 0);
+        _SkyRepeaterComponent_dragulaService.set(this, void 0);
+        _SkyRepeaterComponent_elementRef.set(this, void 0);
+        _SkyRepeaterComponent_renderer.set(this, void 0);
+        _SkyRepeaterComponent_repeaterService.set(this, void 0);
+        _SkyRepeaterComponent_ngUnsubscribe.set(this, new Subject());
+        __classPrivateFieldSet(this, _SkyRepeaterComponent_changeDetector, changeDetector, "f");
+        __classPrivateFieldSet(this, _SkyRepeaterComponent_repeaterService, repeaterService, "f");
+        __classPrivateFieldSet(this, _SkyRepeaterComponent_adapterService, adapterService, "f");
+        __classPrivateFieldSet(this, _SkyRepeaterComponent_dragulaService, dragulaService, "f");
+        __classPrivateFieldSet(this, _SkyRepeaterComponent_elementRef, elementRef, "f");
+        __classPrivateFieldSet(this, _SkyRepeaterComponent_renderer, renderer, "f");
+        this.dragulaGroupName = `sky-repeater-dragula-${__classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").repeaterGroupId}`;
+        __classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").itemCollapseStateChange
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyRepeaterComponent_ngUnsubscribe, "f")))
             .subscribe((item) => {
+            var _a;
             if (this.expandMode === 'single' && item.isExpanded) {
-                this.items.forEach((otherItem) => {
+                (_a = this.items) === null || _a === void 0 ? void 0 : _a.forEach((otherItem) => {
                     if (otherItem !== item &&
                         otherItem.isExpanded &&
                         otherItem.isCollapsible) {
@@ -1319,23 +1364,22 @@ class SkyRepeaterComponent {
                 });
             }
         });
-        this.repeaterService.activeItemIndexChange
-            .pipe(takeUntil(this.ngUnsubscribe))
+        __classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").activeItemIndexChange
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyRepeaterComponent_ngUnsubscribe, "f")))
             .subscribe((index) => {
             if (index !== this.activeIndex) {
                 this.activeIndex = index;
                 this.activeIndexChange.emit(index);
             }
         });
-        this.repeaterService.orderChange
-            .pipe(takeUntil(this.ngUnsubscribe))
+        __classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").orderChange
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyRepeaterComponent_ngUnsubscribe, "f")))
             .subscribe(() => {
-            this.emitTags();
+            __classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_emitTags).call(this);
         });
-        this.repeaterService.repeaterGroupId = uniqueId;
-        this.updateForExpandMode();
-        this.adapterService.setRepeaterHost(this.elementRef);
-        this.initializeDragAndDrop();
+        __classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateForExpandMode).call(this);
+        __classPrivateFieldGet(this, _SkyRepeaterComponent_adapterService, "f").setRepeaterHost(__classPrivateFieldGet(this, _SkyRepeaterComponent_elementRef, "f"));
+        __classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_initializeDragAndDrop).call(this);
     }
     /**
      * Specifies a layout to determine which repeater items are expanded by default and whether
@@ -1356,209 +1400,204 @@ class SkyRepeaterComponent {
      * and users only occasionally need to view the body content.
      * @default "none"
      */
+    // TODO: Remove 'string' as a valid type in a breaking change.
     set expandMode(value) {
-        this.repeaterService.expandMode = value;
-        this._expandMode = value;
-        this.updateForExpandMode();
+        __classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").expandMode = value;
+        __classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateForExpandMode).call(this);
     }
     get expandMode() {
-        return this._expandMode || 'none';
+        return __classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").expandMode;
     }
     ngAfterContentInit() {
+        var _a;
         // 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);
+                __classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").activateItemByIndex(this.activeIndex);
             }
-            if (this.reorderable && !this.everyItemHasTag()) {
+            if (this.reorderable && !__classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_everyItemHasTag).call(this)) {
                 console.warn('Please supply tag properties for each repeater item when reordering functionality is enabled.');
             }
         });
         // 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(() => {
+        (_a = this.items) === null || _a === void 0 ? void 0 : _a.changes.pipe(takeUntil(__classPrivateFieldGet(this, _SkyRepeaterComponent_ngUnsubscribe, "f"))).subscribe(() => {
             setTimeout(() => {
-                if (this.items.last) {
-                    this.updateForExpandMode(this.items.last);
+                var _a;
+                if ((_a = this.items) === null || _a === void 0 ? void 0 : _a.last) {
+                    __classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateForExpandMode).call(this, this.items.last);
                     this.items.last.reorderable = this.reorderable;
                 }
                 if (this.activeIndex !== undefined) {
-                    this.repeaterService.activateItemByIndex(this.activeIndex);
+                    __classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").activateItemByIndex(this.activeIndex);
                 }
-                this.updateRole();
+                __classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateRole).call(this);
             });
         });
         setTimeout(() => {
-            this.updateForExpandMode();
-            this.items.forEach((item) => {
+            var _a;
+            __classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateForExpandMode).call(this);
+            (_a = this.items) === null || _a === void 0 ? void 0 : _a.forEach((item) => {
                 item.reorderable = this.reorderable;
             });
-            this.updateRole();
+            __classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateRole).call(this);
         }, 0);
     }
     ngOnChanges(changes) {
         if (changes['activeIndex']) {
-            this.repeaterService.enableActiveState = true;
+            __classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").enableActiveState = true;
             if (changes['activeIndex'].currentValue !==
                 changes['activeIndex'].previousValue) {
-                this.repeaterService.activateItemByIndex(this.activeIndex);
+                __classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").activateItemByIndex(this.activeIndex);
             }
         }
         if (changes.reorderable) {
             if (this.items) {
                 this.items.forEach((item) => (item.reorderable = this.reorderable));
             }
-            this.updateRole();
-            this.changeDetector.markForCheck();
+            __classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateRole).call(this);
+            __classPrivateFieldGet(this, _SkyRepeaterComponent_changeDetector, "f").markForCheck();
         }
     }
     ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
-        this.destroyDragAndDrop();
+        __classPrivateFieldGet(this, _SkyRepeaterComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyRepeaterComponent_ngUnsubscribe, "f").complete();
+        __classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_destroyDragAndDrop).call(this);
     }
     ngOnInit() {
-        this.updateRole();
+        __classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateRole).call(this);
     }
     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;
-            }
-            this.items.forEach((item) => {
-                item.isCollapsible = isCollapsible && !!item.hasItemContent;
-                if (item !== itemAdded && isSingle && item.isExpanded) {
-                    if (foundExpanded) {
-                        item.updateForExpanded(false, false);
-                    }
-                    foundExpanded = true;
-                }
-            });
-            this.updateRole();
-        }
+        __classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateRole).call(this);
     }
-    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 && target.contains(handle);
-                },
-            });
+}
+_SkyRepeaterComponent_adapterService = new WeakMap(), _SkyRepeaterComponent_changeDetector = new WeakMap(), _SkyRepeaterComponent_dragulaService = new WeakMap(), _SkyRepeaterComponent_elementRef = new WeakMap(), _SkyRepeaterComponent_renderer = new WeakMap(), _SkyRepeaterComponent_repeaterService = new WeakMap(), _SkyRepeaterComponent_ngUnsubscribe = new WeakMap(), _SkyRepeaterComponent_instances = new WeakSet(), _SkyRepeaterComponent_updateForExpandMode = function _SkyRepeaterComponent_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;
         }
-        let draggedItemIndex;
-        this.dragulaService
-            .drag(this.dragulaGroupName)
-            .pipe(takeUntil(this.dragulaUnsubscribe))
-            .subscribe((args) => {
-            /* istanbul ignore else */
-            if (args.name === this.dragulaGroupName) {
-                this.renderer.addClass(args.el, 'sky-repeater-item-dragging');
-                draggedItemIndex = this.adapterService.getRepeaterItemIndex(args.el);
-            }
-        });
-        this.dragulaService
-            .dragend(this.dragulaGroupName)
-            .pipe(takeUntil(this.dragulaUnsubscribe))
-            .subscribe((args) => {
-            /* istanbul ignore else */
-            if (args.name === this.dragulaGroupName) {
-                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 = undefined;
+        this.items.forEach((item) => {
+            item.isCollapsible = isCollapsible && !!item.hasItemContent;
+            if (item !== itemAdded && isSingle && item.isExpanded) {
+                if (foundExpanded) {
+                    item.updateForExpanded(false);
                 }
-                this.emitTags();
+                foundExpanded = true;
             }
         });
-    }
-    destroyDragAndDrop() {
-        this.dragulaUnsubscribe.next();
-        this.dragulaUnsubscribe.complete();
-        this.dragulaUnsubscribe = undefined;
-        /* Sanity check that we have set up dragging abilities */
-        /* istanbul ignore else */
-        if (this.dragulaService.find(this.dragulaGroupName)) {
-            this.dragulaService.destroy(this.dragulaGroupName);
-        }
-    }
-    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;
+        __classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_updateRole).call(this);
+    }
+}, _SkyRepeaterComponent_initializeDragAndDrop = function _SkyRepeaterComponent_initializeDragAndDrop() {
+    /* Sanity check that we haven't already set up dragging abilities */
+    /* istanbul ignore else */
+    if (!__classPrivateFieldGet(this, _SkyRepeaterComponent_dragulaService, "f").find(this.dragulaGroupName)) {
+        __classPrivateFieldGet(this, _SkyRepeaterComponent_dragulaService, "f").createGroup(this.dragulaGroupName, {
+            moves: (el, container, handle) => {
+                const target = el === null || el === void 0 ? void 0 : el.querySelector('.sky-repeater-item-grab-handle');
+                return !!this.reorderable && !!target && target.contains(handle);
+            },
         });
     }
-    updateRole() {
-        var _a, _b;
-        // 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 ||
-            ((_a = this.items) === null || _a === void 0 ? void 0 : _a.some((item) => item.isCollapsible)) ||
-            !!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';
-        }
-        else if ((_b = this.items) === null || _b === void 0 ? void 0 : _b.some((item) => item.selectable)) {
-            // If the only interaction is select https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox
-            autoRole = 'listbox';
+    let draggedItemIndex = -1;
+    __classPrivateFieldGet(this, _SkyRepeaterComponent_dragulaService, "f")
+        .drag(this.dragulaGroupName)
+        .pipe(takeUntil(__classPrivateFieldGet(this, _SkyRepeaterComponent_ngUnsubscribe, "f")))
+        .subscribe((args) => {
+        /* istanbul ignore else */
+        if (args.name === this.dragulaGroupName) {
+            __classPrivateFieldGet(this, _SkyRepeaterComponent_renderer, "f").addClass(args.el, 'sky-repeater-item-dragging');
+            draggedItemIndex = __classPrivateFieldGet(this, _SkyRepeaterComponent_adapterService, "f").getRepeaterItemIndex(args.el);
         }
-        if (this.role !== autoRole) {
-            this.repeaterService.itemRole.next(Object.assign({}, roleMap[autoRole]));
-            this.role = `${autoRole}`;
-            this.changeDetector.markForCheck();
+    });
+    __classPrivateFieldGet(this, _SkyRepeaterComponent_dragulaService, "f")
+        .dragend(this.dragulaGroupName)
+        .pipe(takeUntil(__classPrivateFieldGet(this, _SkyRepeaterComponent_ngUnsubscribe, "f")))
+        .subscribe((args) => {
+        /* istanbul ignore else */
+        if (args.name === this.dragulaGroupName) {
+            __classPrivateFieldGet(this, _SkyRepeaterComponent_renderer, "f").removeClass(args.el, 'sky-repeater-item-dragging');
+            const newItemIndex = __classPrivateFieldGet(this, _SkyRepeaterComponent_adapterService, "f").getRepeaterItemIndex(args.el);
+            /* sanity check */
+            /* istanbul ignore else */
+            if (draggedItemIndex >= 0) {
+                __classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").reorderItem(draggedItemIndex, newItemIndex);
+                draggedItemIndex = -1;
+            }
+            __classPrivateFieldGet(this, _SkyRepeaterComponent_instances, "m", _SkyRepeaterComponent_emitTags).call(this);
         }
+    });
+}, _SkyRepeaterComponent_destroyDragAndDrop = function _SkyRepeaterComponent_destroyDragAndDrop() {
+    /* Sanity check that we have set up dragging abilities */
+    /* istanbul ignore else */
+    if (__classPrivateFieldGet(this, _SkyRepeaterComponent_dragulaService, "f").find(this.dragulaGroupName)) {
+        __classPrivateFieldGet(this, _SkyRepeaterComponent_dragulaService, "f").destroy(this.dragulaGroupName);
+    }
+}, _SkyRepeaterComponent_emitTags = function _SkyRepeaterComponent_emitTags() {
+    const tags = __classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").items.map((item) => item.tag);
+    this.orderChange.emit(tags);
+}, _SkyRepeaterComponent_everyItemHasTag = function _SkyRepeaterComponent_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;
+    });
+}, _SkyRepeaterComponent_updateRole = function _SkyRepeaterComponent_updateRole() {
+    var _a, _b;
+    // 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 ||
+        ((_a = this.items) === null || _a === void 0 ? void 0 : _a.some((item) => item.isCollapsible)) ||
+        !!__classPrivateFieldGet(this, _SkyRepeaterComponent_elementRef, "f").nativeElement.querySelector(interactionSelector);
+    if (hasInteraction) {
+        // If the repeater matches interaction selector https://www.w3.org/TR/wai-aria-practices-1.1/#grid
+        autoRole = 'grid';
+    }
+    else if ((_b = this.items) === null || _b === void 0 ? void 0 : _b.some((item) => !!item.selectable)) {
+        // If the only interaction is select https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox
+        autoRole = 'listbox';
+    }
+    if (this.role !== autoRole) {
+        __classPrivateFieldGet(this, _SkyRepeaterComponent_repeaterService, "f").itemRole.next(Object.assign({}, roleMap[autoRole]));
+        this.role = `${autoRole}`;
+        __classPrivateFieldGet(this, _SkyRepeaterComponent_changeDetector, "f").markForCheck();
     }
-}
+};
 SkyRepeaterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyRepeaterComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyRepeaterService }, { token: SkyRepeaterAdapterService }, { token: i3$1.DragulaService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
 SkyRepeaterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyRepeaterComponent, selector: "sky-repeater", inputs: { activeIndex: "activeIndex", ariaLabel: "ariaLabel", reorderable: "reorderable", expandMode: "expandMode" }, outputs: { activeIndexChange: "activeIndexChange", orderChange: "orderChange" }, providers: [SkyRepeaterService, SkyRepeaterAdapterService], 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: i3$1.DragulaDirective, selector: "[dragula]", inputs: ["dragula", "dragulaModel"], outputs: ["dragulaModelChange"] }, { kind: "directive", type: i4$1.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }, { kind: "pipe", type: i4.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyRepeaterComponent, decorators: [{