@skyux/lists 5.9.6 → 5.9.7

package/bundles/skyux-lists.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@skyux/indicators'), require('@skyux/theme'), require('@skyux/i18n'), require('rxjs'), require('rxjs/operators'), require('@skyux/core'), require('@skyux/forms'), require('@skyux/inline-form'), require('ng2-dragula'), require('@skyux/animations'), require('@skyux/popovers')) :
-    typeof define === 'function' && define.amd ? define('@skyux/lists', ['exports', '@angular/common', '@angular/core', '@skyux/indicators', '@skyux/theme', '@skyux/i18n', 'rxjs', 'rxjs/operators', '@skyux/core', '@skyux/forms', '@skyux/inline-form', 'ng2-dragula', '@skyux/animations', '@skyux/popovers'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.lists = {}), global.ng.common, global.ng.core, global.i1, global.i3, global.i4, global.rxjs, global.rxjs.operators, global.i1$1, global.i6, global.i4$1, global.i3$1, global.animations, global.i1$2));
-})(this, (function (exports, i2, i0, i1, i3, i4, rxjs, operators, i1$1, i6, i4$1, i3$1, animations, i1$2) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@skyux/indicators'), require('@skyux/theme'), require('@skyux/i18n'), require('rxjs'), require('rxjs/operators'), require('@skyux/core'), require('@angular/cdk/observers'), require('@skyux/forms'), require('@skyux/inline-form'), require('ng2-dragula'), require('@skyux/animations'), require('@skyux/popovers')) :
+    typeof define === 'function' && define.amd ? define('@skyux/lists', ['exports', '@angular/common', '@angular/core', '@skyux/indicators', '@skyux/theme', '@skyux/i18n', 'rxjs', 'rxjs/operators', '@skyux/core', '@angular/cdk/observers', '@skyux/forms', '@skyux/inline-form', 'ng2-dragula', '@skyux/animations', '@skyux/popovers'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.lists = {}), global.ng.common, global.ng.core, global.i1, global.i3, global.i4, global.rxjs, global.rxjs.operators, global.i1$1, global.ng.cdk.observers, global.i6, global.i4$1, global.i3$1, global.animations, global.i1$2));
+})(this, (function (exports, i2, i0, i1, i3, i4, rxjs, operators, i1$1, i4$2, i6, i4$1, i3$1, animations, i1$2) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -28,6 +28,7 @@
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
     var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
     var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
+    var i4__namespace$2 = /*#__PURE__*/_interopNamespace(i4$2);
     var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
     var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
     var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
@@ -791,6 +792,11 @@
             this.enableActiveState = false;
             this.itemCollapseStateChange = new i0.EventEmitter();
             this.items = [];
+            this.itemRole = new rxjs.BehaviorSubject({
+                content: undefined,
+                item: undefined,
+                title: undefined,
+            });
             this.orderChange = new rxjs.BehaviorSubject(undefined);
         }
         SkyRepeaterService.prototype.ngOnDestroy = function () {
@@ -801,7 +807,7 @@
         SkyRepeaterService.prototype.activateItem = function (item) {
             if (this.enableActiveState) {
                 /* istanbul ignore else */
-                if (item) {
+                if (item && !item.disabled) {
                     var index = this.items.findIndex(function (i) { return i === item; });
                     this.activeItemIndexChange.next(index);
                     this.activeItemChange.next(item);
@@ -816,7 +822,7 @@
                 }
                 else {
                     var activeItem = this.items[index];
-                    if (activeItem) {
+                    if (activeItem && !activeItem.disabled) {
                         this.activeItemChange.next(activeItem);
                     }
                 }
@@ -973,6 +979,7 @@
             this.keyboardReorderingEnabled = false;
             this.ngUnsubscribe = new rxjs.Subject();
             this._isCollapsible = true;
+            this._isDisabled = false;
             this._isExpanded = true;
             this._isSelected = false;
             this.slideForExpanded(false);
@@ -990,7 +997,51 @@
                 _this.reorderMovedText = translatedStrings[4];
                 _this.reorderButtonLabel = _this.reorderInstructions;
             });
+            this.itemRole$ = this.repeaterService.itemRole.asObservable();
         }
+        Object.defineProperty(SkyRepeaterItemComponent.prototype, "tabindex", {
+            /**
+             * Make the first, non-disabled item tab-focusable.
+             * - Disabled items should not be focusable per [W3C](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_disabled_controls).
+             * - One item per list/grid/listbox should be tab focusable per [W3C](https://www.w3.org/TR/wai-aria-practices-1.1/#grid).
+             */
+            get: function () {
+                return this.repeaterService.items.filter(function (item) { return !item.disabled; })[0] ===
+                    this
+                    ? 0
+                    : -1;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SkyRepeaterItemComponent.prototype, "disabled", {
+            get: function () {
+                return this._isDisabled;
+            },
+            /**
+             * Whether to exclude an item when cycling through.
+             */
+            set: function (value) {
+                if (this._isDisabled !== value) {
+                    if (value) {
+                        this.isSelected = false;
+                        this._isDisabled = true;
+                    }
+                    else {
+                        this._isDisabled = false;
+                    }
+                    if (this.isActive) {
+                        this.repeaterService.activateItemByIndex(undefined);
+                    }
+                    if (this.elementRef.nativeElement.matches(':focus-within')) {
+                        this.elementRef.nativeElement.ownerDocument.activeElement.blur();
+                    }
+                    this.changeDetector.markForCheck();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(SkyRepeaterItemComponent.prototype, "isExpanded", {
             get: function () {
                 return this._isExpanded;
@@ -1015,7 +1066,7 @@
              * @default false
              */
             set: function (value) {
-                if (value !== this._isSelected) {
+                if (!this.disabled && value !== this._isSelected) {
                     this._isSelected = value;
                     this.isSelectedChange.emit(this._isSelected);
                 }
@@ -1073,6 +1124,74 @@
             this.ngUnsubscribe.complete();
             this.repeaterService.unregisterItem(this);
         };
+        SkyRepeaterItemComponent.prototype.onKeydown = function ($event) {
+            var _this = this;
+            if ([' ', 'Enter', 'Home', 'End', 'ArrowUp', 'ArrowDown'].includes($event.key)) {
+                if ($event.target.matches('input, textarea, select, option, [contenteditable], [contenteditable] *')) {
+                    return;
+                }
+                $event.preventDefault();
+                $event.stopPropagation();
+                var activateItem = undefined;
+                /* istanbul ignore else */
+                if ([' ', 'Enter'].includes($event.key)) {
+                    if (this.selectable) {
+                        this.isSelected = !this.isSelected;
+                    }
+                    activateItem = this;
+                }
+                /* istanbul ignore else */
+                if (['Home', 'End'].includes($event.key)) {
+                    var items = this.repeaterService.items.filter(function (item) { return !item.disabled; });
+                    if ($event.key === 'Home') {
+                        activateItem = items.shift();
+                    }
+                    else {
+                        activateItem = items.pop();
+                    }
+                }
+                /* istanbul ignore else */
+                if (['ArrowUp', 'ArrowDown'].includes($event.key)) {
+                    var currentIndex = this.repeaterService.items.findIndex(function (item) { return item === _this; });
+                    var sliceFrom = void 0;
+                    var sliceTo = void 0;
+                    if ($event.key === 'ArrowUp') {
+                        sliceFrom = 0;
+                        sliceTo = currentIndex;
+                    }
+                    else {
+                        sliceFrom = currentIndex + 1;
+                        sliceTo = undefined;
+                    }
+                    var items = this.repeaterService.items
+                        .slice(sliceFrom, sliceTo)
+                        .filter(function (item) { return !item.disabled; });
+                    activateItem = $event.key === 'ArrowUp' ? items.pop() : items.shift();
+                    if (!activateItem) {
+                        // Wrap around.
+                        if ($event.key === 'ArrowDown') {
+                            sliceFrom = 0;
+                            sliceTo = currentIndex;
+                        }
+                        else {
+                            sliceFrom = currentIndex + 1;
+                            sliceTo = undefined;
+                        }
+                        var items_1 = this.repeaterService.items
+                            .slice(sliceFrom, sliceTo)
+                            .filter(function (item) { return !item.disabled; });
+                        activateItem = $event.key === 'ArrowUp' ? items_1.pop() : items_1.shift();
+                    }
+                }
+                /* istanbul ignore else */
+                if (activateItem && !activateItem.isActive) {
+                    this.repeaterService.activateItem(activateItem);
+                    if (!activateItem.elementRef.nativeElement.matches(':focus-within')) {
+                        activateItem.elementRef.nativeElement.focus();
+                    }
+                }
+            }
+        };
         SkyRepeaterItemComponent.prototype.headerClick = function () {
             if (this.isCollapsible) {
                 this.updateForExpanded(!this.isExpanded, true);
@@ -1179,29 +1298,6 @@
             this.reorderButtonLabel = this.reorderInstructions;
             this.reorderState = undefined;
         };
-        SkyRepeaterItemComponent.prototype.onItemKeyDown = function (event) {
-            /*istanbul ignore else */
-            if (event.key) {
-                switch (event.key.toLowerCase()) {
-                    case ' ':
-                    case 'enter':
-                        /* istanbul ignore else */
-                        /* Sanity check */
-                        // Space/enter should never execute unless focused on the parent item element.
-                        if (event.target === this.itemRef.nativeElement) {
-                            if (this.selectable) {
-                                this.isSelected = !this.isSelected;
-                            }
-                            this.repeaterService.activateItem(this);
-                            event.preventDefault();
-                        }
-                        break;
-                    /* istanbul ignore next */
-                    default:
-                        break;
-                }
-            }
-        };
         SkyRepeaterItemComponent.prototype.slideForExpanded = function (animate) {
             this.slideDirection = this.isExpanded ? 'down' : 'up';
         };
@@ -1256,17 +1352,21 @@
         return SkyRepeaterItemComponent;
     }());
     SkyRepeaterItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyRepeaterItemComponent, deps: [{ token: SkyRepeaterService }, { token: i0__namespace.ChangeDetectorRef }, { token: SkyRepeaterAdapterService }, { token: i0__namespace.ElementRef }, { token: i4__namespace.SkyLibResourcesService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyRepeaterItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyRepeaterItemComponent, selector: "sky-repeater-item", inputs: { 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: { properties: { "class": "this.repeaterGroupClass" } }, queries: [{ propertyName: "contextMenu", first: true, predicate: SkyRepeaterItemContextMenuComponent, descendants: true, read: i0.ElementRef }, { propertyName: "repeaterItemContentComponents", predicate: SkyRepeaterItemContentComponent }], viewQueries: [{ propertyName: "grabHandle", first: true, predicate: ["grabHandle"], descendants: true, read: i0.ElementRef }, { propertyName: "itemContentRef", first: true, predicate: ["itemContentRef"], descendants: true, read: i0.ElementRef }, { propertyName: "itemHeaderRef", first: true, predicate: ["itemHeaderRef"], descendants: true, read: i0.ElementRef }, { propertyName: "itemRef", first: true, predicate: ["itemRef"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<div\n  class=\"sky-repeater-item sky-padding-even-default\"\n  role=\"option\"\n  [attr.aria-label]=\"itemName\"\n  [attr.aria-selected]=\"selectable ? isSelected : null\"\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  (keydown)=\"onItemKeyDown($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 class=\"sky-repeater-item-title sky-emphasized\" #titleRef>\n        <ng-content select=\"sky-repeater-item-title\"></ng-content>\n      </div>\n      <button\n        *ngIf=\"reorderable\"\n        class=\"sky-btn sky-btn-link sky-repeater-item-reorder-top\"\n        type=\"button\"\n        [attr.aria-label]=\"\n          itemName\n            ? ('skyux_repeater_item_reorder_top_label'\n              | skyLibResources: itemName)\n            : ('skyux_repeater_item_reorder_top_label_default'\n              | skyLibResources)\n        \"\n        (click)=\"moveToTop($event)\"\n      >\n        <sky-icon icon=\"arrow-circle-up\"></sky-icon>\n        {{ 'skyux_repeater_item_reorder_top' | skyLibResources }}\n      </button>\n      <div *ngIf=\"isCollapsible\" class=\"sky-repeater-item-chevron\">\n        <sky-chevron\n          [ariaControls]=\"contentId\"\n          [ariaLabel]=\"\n            itemName\n              ? ('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    >\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"], components: [{ type: i4__namespace$1.λ1, selector: "sky-inline-form", inputs: ["config", "template", "showForm"], outputs: ["close"] }, { type: i1__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i6__namespace.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i1__namespace.λ2, selector: "sky-chevron", inputs: ["ariaControls", "ariaLabel", "direction", "disabled"], outputs: ["directionChange"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyLibResources": i4__namespace.SkyLibResourcesPipe }, animations: [animations.skyAnimationSlide], encapsulation: i0__namespace.ViewEncapsulation.None });
+    SkyRepeaterItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: i0.ElementRef }, { propertyName: "repeaterItemContentComponents", predicate: SkyRepeaterItemContentComponent }], viewQueries: [{ propertyName: "grabHandle", first: true, predicate: ["grabHandle"], descendants: true, read: i0.ElementRef }, { propertyName: "itemContentRef", first: true, predicate: ["itemContentRef"], descendants: true, read: i0.ElementRef }, { propertyName: "itemHeaderRef", first: true, predicate: ["itemHeaderRef"], descendants: true, read: i0.ElementRef }, { propertyName: "itemRef", first: true, predicate: ["itemRef"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<div\n  class=\"sky-repeater-item sky-padding-even-default\"\n  [attr.aria-label]=\"itemName\"\n  [attr.aria-selected]=\"selectable ? isSelected : undefined\"\n  [attr.role]=\"(itemRole$ | async).item\"\n  [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"], components: [{ type: i4__namespace$1.λ1, selector: "sky-inline-form", inputs: ["config", "template", "showForm"], outputs: ["close"] }, { type: i1__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i6__namespace.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i1__namespace.λ2, selector: "sky-chevron", inputs: ["ariaControls", "ariaLabel", "direction", "disabled"], outputs: ["directionChange"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i2__namespace.AsyncPipe, "skyLibResources": i4__namespace.SkyLibResourcesPipe }, animations: [animations.skyAnimationSlide], encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyRepeaterItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-repeater-item',
                         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"],
-                        template: "<div\n  class=\"sky-repeater-item sky-padding-even-default\"\n  role=\"option\"\n  [attr.aria-label]=\"itemName\"\n  [attr.aria-selected]=\"selectable ? isSelected : null\"\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  (keydown)=\"onItemKeyDown($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 class=\"sky-repeater-item-title sky-emphasized\" #titleRef>\n        <ng-content select=\"sky-repeater-item-title\"></ng-content>\n      </div>\n      <button\n        *ngIf=\"reorderable\"\n        class=\"sky-btn sky-btn-link sky-repeater-item-reorder-top\"\n        type=\"button\"\n        [attr.aria-label]=\"\n          itemName\n            ? ('skyux_repeater_item_reorder_top_label'\n              | skyLibResources: itemName)\n            : ('skyux_repeater_item_reorder_top_label_default'\n              | skyLibResources)\n        \"\n        (click)=\"moveToTop($event)\"\n      >\n        <sky-icon icon=\"arrow-circle-up\"></sky-icon>\n        {{ 'skyux_repeater_item_reorder_top' | skyLibResources }}\n      </button>\n      <div *ngIf=\"isCollapsible\" class=\"sky-repeater-item-chevron\">\n        <sky-chevron\n          [ariaControls]=\"contentId\"\n          [ariaLabel]=\"\n            itemName\n              ? ('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    >\n      <ng-content select=\"sky-repeater-item-content\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n",
+                        template: "<div\n  class=\"sky-repeater-item sky-padding-even-default\"\n  [attr.aria-label]=\"itemName\"\n  [attr.aria-selected]=\"selectable ? isSelected : undefined\"\n  [attr.role]=\"(itemRole$ | async).item\"\n  [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",
                         animations: [animations.skyAnimationSlide],
                         encapsulation: i0.ViewEncapsulation.None,
                     }]
-            }], ctorParameters: function () { return [{ type: SkyRepeaterService }, { type: i0__namespace.ChangeDetectorRef }, { type: SkyRepeaterAdapterService }, { type: i0__namespace.ElementRef }, { type: i4__namespace.SkyLibResourcesService }]; }, propDecorators: { itemName: [{
+            }], ctorParameters: function () { return [{ type: SkyRepeaterService }, { type: i0__namespace.ChangeDetectorRef }, { type: SkyRepeaterAdapterService }, { type: i0__namespace.ElementRef }, { type: i4__namespace.SkyLibResourcesService }]; }, propDecorators: { tabindex: [{
+                    type: i0.HostBinding
+                }], disabled: [{
+                    type: i0.Input
+                }], itemName: [{
                     type: i0.Input
                 }], inlineFormConfig: [{
                     type: i0.Input
@@ -1313,6 +1413,9 @@
                 }], repeaterItemContentComponents: [{
                     type: i0.ContentChildren,
                     args: [SkyRepeaterItemContentComponent]
+                }], onKeydown: [{
+                    type: i0.HostListener,
+                    args: ['keydown', ['$event']]
                 }] } });
 
     /*! *****************************************************************************
@@ -1749,6 +1852,7 @@
                     if (_this.activeIndex !== undefined) {
                         _this.repeaterService.activateItemByIndex(_this.activeIndex);
                     }
+                    _this.updateRole();
                 });
             });
             setTimeout(function () {
@@ -1756,6 +1860,7 @@
                 _this.items.forEach(function (item) {
                     item.reorderable = _this.reorderable;
                 });
+                _this.updateRole();
             }, 0);
         };
         SkyRepeaterComponent.prototype.ngOnChanges = function (changes) {
@@ -1771,6 +1876,7 @@
                 if (this.items) {
                     this.items.forEach(function (item) { return (item.reorderable = _this.reorderable); });
                 }
+                this.updateRole();
                 this.changeDetector.markForCheck();
             }
         };
@@ -1779,6 +1885,12 @@
             this.ngUnsubscribe.complete();
             this.destroyDragAndDrop();
         };
+        SkyRepeaterComponent.prototype.ngOnInit = function () {
+            this.updateRole();
+        };
+        SkyRepeaterComponent.prototype.onCdkObserveContent = function () {
+            this.updateRole();
+        };
         SkyRepeaterComponent.prototype.updateForExpandMode = function (itemAdded) {
             if (this.items) {
                 var foundExpanded_1 = false;
@@ -1797,6 +1909,7 @@
                         foundExpanded_1 = true;
                     }
                 });
+                this.updateRole();
             }
         };
         SkyRepeaterComponent.prototype.initializeDragAndDrop = function () {
@@ -1814,8 +1927,8 @@
             var draggedItemIndex;
             this.dragulaService.drag
                 .pipe(operators.takeUntil(this.dragulaUnsubscribe))
-                .subscribe(function (_a) {
-                var _b = __read(_a, 2), groupName = _b[0], subject = _b[1];
+                .subscribe(function (_c) {
+                var _d = __read(_c, 2), groupName = _d[0], subject = _d[1];
                 /* istanbul ignore else */
                 if (groupName === _this.dragulaGroupName) {
                     _this.renderer.addClass(subject, 'sky-repeater-item-dragging');
@@ -1824,8 +1937,8 @@
             });
             this.dragulaService.dragend
                 .pipe(operators.takeUntil(this.dragulaUnsubscribe))
-                .subscribe(function (_a) {
-                var _b = __read(_a, 2), groupName = _b[0], subject = _b[1];
+                .subscribe(function (_c) {
+                var _d = __read(_c, 2), groupName = _d[0], subject = _d[1];
                 /* istanbul ignore else */
                 if (groupName === _this.dragulaGroupName) {
                     _this.renderer.removeClass(subject, 'sky-repeater-item-dragging');
@@ -1864,16 +1977,66 @@
                 return item.tag !== undefined;
             });
         };
+        SkyRepeaterComponent.prototype.updateRole = function () {
+            // 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.
+            var _a, _b;
+            // Default to list role.
+            var autoRole = 'list';
+            var 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
+            var 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(function (selector) { return "sky-repeater-item-title " + selector + ":not([hidden]), sky-repeater-item-content " + selector + ":not([hidden])"; })
+                .concat(["skyux-dropdown"])
+                .join(', ');
+            var hasInteraction = this.reorderable ||
+                ((_a = this.items) === null || _a === void 0 ? void 0 : _a.some(function (item) { return 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(function (item) { return 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) {
+                this.repeaterService.itemRole.next(Object.assign({}, roleMap[autoRole]));
+                this.role = "" + autoRole;
+                this.changeDetector.markForCheck();
+            }
+        };
         return SkyRepeaterComponent;
     }());
     SkyRepeaterComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyRepeaterComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: SkyRepeaterService }, { token: SkyRepeaterAdapterService }, { token: i3__namespace$1.DragulaService }, { token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyRepeaterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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__namespace, template: "<ng-container #repeaterHost>\n  <div\n    class=\"sky-repeater\"\n    role=\"listbox\"\n    [attr.aria-label]=\"ariaLabel || ('skyux_repeater_label' | skyLibResources)\"\n    [dragula]=\"dragulaGroupName\"\n  >\n    <ng-content></ng-content>\n  </div>\n</ng-container>\n", styles: [".sky-repeater{padding:0}\n"], directives: [{ type: i3__namespace$1.DragulaDirective, selector: "[dragula]", inputs: ["dragula", "dragulaModel", "dragulaOptions"] }], pipes: { "skyLibResources": i4__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    SkyRepeaterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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__namespace, 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"], directives: [{ type: i3__namespace$1.DragulaDirective, selector: "[dragula]", inputs: ["dragula", "dragulaModel", "dragulaOptions"] }, { type: i4__namespace$2.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], pipes: { "skyLibResources": i4__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyRepeaterComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-repeater',
                         styles: [".sky-repeater{padding:0}\n"],
-                        template: "<ng-container #repeaterHost>\n  <div\n    class=\"sky-repeater\"\n    role=\"listbox\"\n    [attr.aria-label]=\"ariaLabel || ('skyux_repeater_label' | skyLibResources)\"\n    [dragula]=\"dragulaGroupName\"\n  >\n    <ng-content></ng-content>\n  </div>\n</ng-container>\n",
+                        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",
                         providers: [SkyRepeaterService, SkyRepeaterAdapterService],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
@@ -1906,6 +2069,7 @@
             SkyRepeaterItemContextMenuComponent,
             SkyRepeaterItemTitleComponent], imports: [i2.CommonModule,
             i3$1.DragulaModule,
+            i4$2.ObserversModule,
             i1.SkyChevronModule,
             i6.SkyCheckboxModule,
             i1.SkyIconModule,
@@ -1918,6 +2082,7 @@
     SkyRepeaterModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyRepeaterModule, imports: [[
                 i2.CommonModule,
                 i3$1.DragulaModule,
+                i4$2.ObserversModule,
                 i1.SkyChevronModule,
                 i6.SkyCheckboxModule,
                 i1.SkyIconModule,
@@ -1937,6 +2102,7 @@
                         imports: [
                             i2.CommonModule,
                             i3$1.DragulaModule,
+                            i4$2.ObserversModule,
                             i1.SkyChevronModule,
                             i6.SkyCheckboxModule,
                             i1.SkyIconModule,