@skyux/lists 5.9.6 → 5.11.0

package/esm2015/lib/modules/repeater/repeater-item-roles.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=repeater-item-roles.type.js.map

package/esm2015/lib/modules/repeater/repeater-item-roles.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"repeater-item-roles.type.js","sourceRoot":"","sources":["../../../../../../../../libs/components/lists/src/lib/modules/repeater/repeater-item-roles.type.ts"],"names":[],"mappings":"","sourcesContent":["export type SkyRepeaterItemRolesType = {\n  item: 'listitem' | 'option' | 'row' | undefined;\n  title: 'rowheader' | undefined;\n  content: 'gridcell' | undefined;\n};\n"]}

package/esm2015/lib/modules/repeater/repeater-item.component.js

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, ContentChild, ContentChildren, ElementRef, EventEmitter, HostBinding, Input, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation, } from '@angular/core';
+import { ChangeDetectorRef, Component, ContentChild, ContentChildren, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation, } from '@angular/core';
 import { skyAnimationSlide } from '@skyux/animations';
 import { SkyLibResourcesService } from '@skyux/i18n';
 import { Subject, forkJoin as observableForkJoin } from 'rxjs';
@@ -63,6 +63,7 @@ export class SkyRepeaterItemComponent {
         this.keyboardReorderingEnabled = false;
         this.ngUnsubscribe = new Subject();
         this._isCollapsible = true;
+        this._isDisabled = false;
         this._isExpanded = true;
         this._isSelected = false;
         this.slideForExpanded(false);
@@ -80,6 +81,42 @@ export class SkyRepeaterItemComponent {
             this.reorderMovedText = translatedStrings[4];
             this.reorderButtonLabel = this.reorderInstructions;
         });
+        this.itemRole$ = this.repeaterService.itemRole.asObservable();
+    }
+    /**
+     * Make the first, non-disabled item tab-focusable.
+     * - Disabled items should not be focusable per [W3C](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_disabled_controls).
+     * - One item per list/grid/listbox should be tab focusable per [W3C](https://www.w3.org/TR/wai-aria-practices-1.1/#grid).
+     */
+    get tabindex() {
+        return this.repeaterService.items.filter((item) => !item.disabled)[0] ===
+            this
+            ? 0
+            : -1;
+    }
+    /**
+     * Whether to exclude an item when cycling through.
+     */
+    set disabled(value) {
+        if (this._isDisabled !== value) {
+            if (value) {
+                this.isSelected = false;
+                this._isDisabled = true;
+            }
+            else {
+                this._isDisabled = false;
+            }
+            if (this.isActive) {
+                this.repeaterService.activateItemByIndex(undefined);
+            }
+            if (this.elementRef.nativeElement.matches(':focus-within')) {
+                this.elementRef.nativeElement.ownerDocument.activeElement.blur();
+            }
+            this.changeDetector.markForCheck();
+        }
+    }
+    get disabled() {
+        return this._isDisabled;
     }
     /**
      * Indicates whether the repeater item is expanded.
@@ -97,7 +134,7 @@ export class SkyRepeaterItemComponent {
      * @default false
      */
     set isSelected(value) {
-        if (value !== this._isSelected) {
+        if (!this.disabled && value !== this._isSelected) {
             this._isSelected = value;
             this.isSelectedChange.emit(this._isSelected);
         }
@@ -146,6 +183,73 @@ export class SkyRepeaterItemComponent {
         this.ngUnsubscribe.complete();
         this.repeaterService.unregisterItem(this);
     }
+    onKeydown($event) {
+        if ([' ', 'Enter', 'Home', 'End', 'ArrowUp', 'ArrowDown'].includes($event.key)) {
+            if ($event.target.matches('input, textarea, select, option, [contenteditable], [contenteditable] *')) {
+                return;
+            }
+            $event.preventDefault();
+            $event.stopPropagation();
+            let activateItem = undefined;
+            /* istanbul ignore else */
+            if ([' ', 'Enter'].includes($event.key)) {
+                if (this.selectable) {
+                    this.isSelected = !this.isSelected;
+                }
+                activateItem = this;
+            }
+            /* istanbul ignore else */
+            if (['Home', 'End'].includes($event.key)) {
+                const items = this.repeaterService.items.filter((item) => !item.disabled);
+                if ($event.key === 'Home') {
+                    activateItem = items.shift();
+                }
+                else {
+                    activateItem = items.pop();
+                }
+            }
+            /* istanbul ignore else */
+            if (['ArrowUp', 'ArrowDown'].includes($event.key)) {
+                const currentIndex = this.repeaterService.items.findIndex((item) => item === this);
+                let sliceFrom;
+                let sliceTo;
+                if ($event.key === 'ArrowUp') {
+                    sliceFrom = 0;
+                    sliceTo = currentIndex;
+                }
+                else {
+                    sliceFrom = currentIndex + 1;
+                    sliceTo = undefined;
+                }
+                const items = this.repeaterService.items
+                    .slice(sliceFrom, sliceTo)
+                    .filter((item) => !item.disabled);
+                activateItem = $event.key === 'ArrowUp' ? items.pop() : items.shift();
+                if (!activateItem) {
+                    // Wrap around.
+                    if ($event.key === 'ArrowDown') {
+                        sliceFrom = 0;
+                        sliceTo = currentIndex;
+                    }
+                    else {
+                        sliceFrom = currentIndex + 1;
+                        sliceTo = undefined;
+                    }
+                    const items = this.repeaterService.items
+                        .slice(sliceFrom, sliceTo)
+                        .filter((item) => !item.disabled);
+                    activateItem = $event.key === 'ArrowUp' ? items.pop() : items.shift();
+                }
+            }
+            /* istanbul ignore else */
+            if (activateItem && !activateItem.isActive) {
+                this.repeaterService.activateItem(activateItem);
+                if (!activateItem.elementRef.nativeElement.matches(':focus-within')) {
+                    activateItem.elementRef.nativeElement.focus();
+                }
+            }
+        }
+    }
     headerClick() {
         if (this.isCollapsible) {
             this.updateForExpanded(!this.isExpanded, true);
@@ -253,29 +357,6 @@ export class SkyRepeaterItemComponent {
         this.reorderButtonLabel = this.reorderInstructions;
         this.reorderState = undefined;
     }
-    onItemKeyDown(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;
-            }
-        }
-    }
     slideForExpanded(animate) {
         this.slideDirection = this.isExpanded ? 'down' : 'up';
     }
@@ -328,7 +409,7 @@ export class SkyRepeaterItemComponent {
     }
 }
 SkyRepeaterItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyRepeaterItemComponent, deps: [{ token: i1.SkyRepeaterService }, { token: i0.ChangeDetectorRef }, { token: i2.SkyRepeaterAdapterService }, { token: i0.ElementRef }, { token: i3.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Component });
-SkyRepeaterItemComponent.ɵcmp = i0.ɵɵ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: 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  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.λ1, selector: "sky-inline-form", inputs: ["config", "template", "showForm"], outputs: ["close"] }, { type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i6.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i5.λ2, selector: "sky-chevron", inputs: ["ariaControls", "ariaLabel", "direction", "disabled"], outputs: ["directionChange"] }], directives: [{ type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyLibResources": i3.SkyLibResourcesPipe }, animations: [skyAnimationSlide], encapsulation: i0.ViewEncapsulation.None });
+SkyRepeaterItemComponent.ɵcmp = i0.ɵɵ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: ElementRef }, { propertyName: "repeaterItemContentComponents", predicate: SkyRepeaterItemContentComponent }], viewQueries: [{ propertyName: "grabHandle", first: true, predicate: ["grabHandle"], descendants: true, read: ElementRef }, { propertyName: "itemContentRef", first: true, predicate: ["itemContentRef"], descendants: true, read: ElementRef }, { propertyName: "itemHeaderRef", first: true, predicate: ["itemHeaderRef"], descendants: true, read: ElementRef }, { propertyName: "itemRef", first: true, predicate: ["itemRef"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  class=\"sky-repeater-item sky-padding-even-default\"\n  [attr.aria-label]=\"itemName\"\n  [attr.aria-selected]=\"selectable ? isSelected : undefined\"\n  [attr.role]=\"(itemRole$ | async).item\"\n  [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.λ1, selector: "sky-inline-form", inputs: ["config", "template", "showForm"], outputs: ["close"] }, { type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i6.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i5.λ2, selector: "sky-chevron", inputs: ["ariaControls", "ariaLabel", "direction", "disabled"], outputs: ["directionChange"] }], directives: [{ type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i7.AsyncPipe, "skyLibResources": i3.SkyLibResourcesPipe }, animations: [skyAnimationSlide], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyRepeaterItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -338,7 +419,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     animations: [skyAnimationSlide],
                     encapsulation: ViewEncapsulation.None,
                 }]
-        }], ctorParameters: function () { return [{ type: i1.SkyRepeaterService }, { type: i0.ChangeDetectorRef }, { type: i2.SkyRepeaterAdapterService }, { type: i0.ElementRef }, { type: i3.SkyLibResourcesService }]; }, propDecorators: { itemName: [{
+        }], ctorParameters: function () { return [{ type: i1.SkyRepeaterService }, { type: i0.ChangeDetectorRef }, { type: i2.SkyRepeaterAdapterService }, { type: i0.ElementRef }, { type: i3.SkyLibResourcesService }]; }, propDecorators: { tabindex: [{
+                type: HostBinding
+            }], disabled: [{
+                type: Input
+            }], itemName: [{
                 type: Input
             }], inlineFormConfig: [{
                 type: Input
@@ -385,5 +470,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], repeaterItemContentComponents: [{
                 type: ContentChildren,
                 args: [SkyRepeaterItemContentComponent]
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
             }] } });
 //# sourceMappingURL=repeater-item.component.js.map

package/esm2015/lib/modules/repeater/repeater-item.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"repeater-item.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/lists/src/lib/modules/repeater/repeater-item.component.ts","../../../../../../../../libs/components/lists/src/lib/modules/repeater/repeater-item.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  AfterViewInit,\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  ContentChildren,\n  ElementRef,\n  EventEmitter,\n  HostBinding,\n  Input,\n  OnDestroy,\n  OnInit,\n  Output,\n  QueryList,\n  TemplateRef,\n  ViewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { skyAnimationSlide } from '@skyux/animations';\nimport { SkyCheckboxChange } from '@skyux/forms';\nimport { SkyLibResourcesService } from '@skyux/i18n';\nimport {\n  SkyInlineFormCloseArgs,\n  SkyInlineFormConfig,\n} from '@skyux/inline-form';\n\nimport { Subject, forkJoin as observableForkJoin } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nimport { SkyRepeaterAdapterService } from './repeater-adapter.service';\nimport { SkyRepeaterItemContentComponent } from './repeater-item-content.component';\nimport { SkyRepeaterItemContextMenuComponent } from './repeater-item-context-menu.component';\nimport { SkyRepeaterService } from './repeater.service';\n\nlet nextContentId = 0;\n\n/**\n * Creates an individual repeater item.\n */\n@Component({\n  selector: 'sky-repeater-item',\n  styleUrls: ['./repeater-item.component.scss'],\n  templateUrl: './repeater-item.component.html',\n  animations: [skyAnimationSlide],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class SkyRepeaterItemComponent\n  implements OnDestroy, OnInit, AfterViewInit\n{\n  /**\n   * Specifies a human-readable name for the repeater item that is available for multiple purposes,\n   * such as accessibility and instrumentation. For example, the component uses the name to\n   * construct ARIA labels for the repeater item controls\n   * to [support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).\n   */\n  @Input()\n  public itemName: string;\n\n  /**\n   * Specifies configuration options for the buttons to display on an inline form\n   * within the repeater. This property accepts\n   * [a `SkyInlineFormConfig` object](https://developer.blackbaud.com/skyux/components/inline-form#skyinlineformconfig-properties).\n   */\n  @Input()\n  public inlineFormConfig: SkyInlineFormConfig;\n\n  /**\n   * Specifies [an Angular `TemplateRef`](https://angular.io/api/core/TemplateRef) to use\n   * as a template to instantiate an inline form within the repeater.\n   */\n  @Input()\n  public inlineFormTemplate: TemplateRef<unknown>;\n\n  /**\n   * Indicates whether the repeater item is expanded.\n   * @default true\n   */\n  @Input()\n  public set isExpanded(value: boolean) {\n    this.updateForExpanded(value, true);\n  }\n\n  public get isExpanded(): boolean {\n    return this._isExpanded;\n  }\n\n  /**\n   * Indicates whether the repeater item's checkbox is selected.\n   * When users select the repeater item, the specified property on your model is updated accordingly.\n   * @default false\n   */\n  @Input()\n  public set isSelected(value: boolean) {\n    if (value !== this._isSelected) {\n      this._isSelected = value;\n      this.isSelectedChange.emit(this._isSelected);\n    }\n  }\n\n  public get isSelected(): boolean {\n    return this._isSelected;\n  }\n\n  /**\n   * Indicates whether users can change the order of the repeater item.\n   * The repeater component's `reorderable` property must also be set to `true`.\n   */\n  @Input()\n  public reorderable = false;\n\n  /**\n   * Indicates whether to display a checkbox in the left of the repeater item.\n   */\n  @Input()\n  public selectable = false;\n\n  /**\n   * Indicates whether to display an inline form within the repeater.\n   * Users can toggle between displaying and hiding the inline form.\n   */\n  @Input()\n  public showInlineForm = false;\n\n  /**\n   * Specifies an object that the repeater component returns for this repeater item\n   * when the `orderChange` event fires. This is required\n   * if you set the `reorderable` property to `true`.\n   */\n  @Input()\n  public tag: any;\n\n  /**\n   * Fires when users collapse the repeater item.\n   */\n  @Output()\n  public collapse = new EventEmitter<void>();\n\n  /**\n   * Fires when users expand the repeater item.\n   */\n  @Output()\n  public expand = new EventEmitter<void>();\n\n  /**\n   * Fires when the repeater includes an inline form and users close it. This event emits\n   * [a `SkyInlineFormCloseArgs` type](https://developer.blackbaud.com/skyux/components/inline-form#skyinlineformcloseargs-properties).\n   */\n  @Output()\n  public inlineFormClose = new EventEmitter<SkyInlineFormCloseArgs>();\n\n  /**\n   * Fires when users select or clear the checkbox for the repeater item.\n   */\n  @Output()\n  public isSelectedChange = new EventEmitter<boolean>();\n\n  @ContentChild(SkyRepeaterItemContextMenuComponent, { read: ElementRef })\n  public contextMenu: ElementRef;\n\n  public contentId = `sky-repeater-item-content-${++nextContentId}`;\n\n  public hasItemContent = false;\n\n  public isActive = false;\n\n  public set isCollapsible(value: boolean) {\n    if (this.isCollapsible !== value) {\n      this._isCollapsible = value;\n\n      /*istanbul ignore else */\n      if (!value) {\n        this.updateForExpanded(true, false);\n      }\n    }\n\n    this.changeDetector.markForCheck();\n  }\n\n  public get isCollapsible(): boolean {\n    return this._isCollapsible;\n  }\n\n  public keyboardReorderingEnabled = false;\n\n  public reorderButtonLabel: string;\n\n  public reorderState: string;\n\n  public slideDirection: string;\n\n  @HostBinding('class')\n  get repeaterGroupClass(): string {\n    return 'sky-repeater-item-group-' + this.repeaterService.repeaterGroupId;\n  }\n\n  @ViewChild('grabHandle', { read: ElementRef })\n  private grabHandle: ElementRef;\n\n  @ViewChild('itemContentRef', { read: ElementRef })\n  private itemContentRef: ElementRef;\n\n  @ViewChild('itemHeaderRef', { read: ElementRef })\n  private itemHeaderRef: ElementRef;\n\n  @ViewChild('itemRef', { read: ElementRef })\n  private itemRef: ElementRef;\n\n  @ContentChildren(SkyRepeaterItemContentComponent)\n  private repeaterItemContentComponents: QueryList<SkyRepeaterItemContentComponent>;\n\n  private ngUnsubscribe = new Subject<void>();\n\n  private reorderCancelText: string;\n\n  private reorderCurrentIndex: number;\n\n  private reorderFinishText: string;\n\n  private reorderInstructions: string;\n\n  private reorderMovedText: string;\n\n  private reorderStateDescription: string;\n\n  private reorderSteps: number;\n\n  private _isCollapsible = true;\n\n  private _isExpanded = true;\n\n  private _isSelected = false;\n\n  constructor(\n    private repeaterService: SkyRepeaterService,\n    private changeDetector: ChangeDetectorRef,\n    private adapterService: SkyRepeaterAdapterService,\n    private elementRef: ElementRef,\n    private resourceService: SkyLibResourcesService\n  ) {\n    this.slideForExpanded(false);\n\n    observableForkJoin([\n      this.resourceService.getString('skyux_repeater_item_reorder_cancel'),\n      this.resourceService.getString('skyux_repeater_item_reorder_finish'),\n      this.resourceService.getString(\n        'skyux_repeater_item_reorder_instructions'\n      ),\n      this.resourceService.getString('skyux_repeater_item_reorder_operation'),\n      this.resourceService.getString('skyux_repeater_item_reorder_moved'),\n    ]).subscribe((translatedStrings: string[]) => {\n      this.reorderCancelText = translatedStrings[0];\n      this.reorderFinishText = translatedStrings[1];\n      this.reorderStateDescription = translatedStrings[2];\n      this.reorderInstructions = translatedStrings[3];\n      this.reorderMovedText = translatedStrings[4];\n      this.reorderButtonLabel = this.reorderInstructions;\n    });\n  }\n\n  public ngOnInit(): void {\n    this.repeaterService.registerItem(this);\n    this.repeaterService.activeItemChange\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe((item: SkyRepeaterItemComponent) => {\n        const newIsActiveValue = this === item;\n        if (newIsActiveValue !== this.isActive) {\n          this.isActive = newIsActiveValue;\n          this.changeDetector.markForCheck();\n        }\n      });\n  }\n\n  public ngAfterViewInit(): void {\n    this.hasItemContent = this.repeaterItemContentComponents.length > 0;\n    this.updateExpandOnContentChange();\n  }\n\n  public ngOnDestroy(): void {\n    this.collapse.complete();\n    this.expand.complete();\n    this.inlineFormClose.complete();\n    this.isSelectedChange.complete();\n\n    this.ngUnsubscribe.next();\n    this.ngUnsubscribe.complete();\n\n    this.repeaterService.unregisterItem(this);\n  }\n\n  public headerClick(): void {\n    if (this.isCollapsible) {\n      this.updateForExpanded(!this.isExpanded, true);\n    }\n  }\n\n  public chevronDirectionChange(direction: string): void {\n    this.updateForExpanded(direction === 'up', true);\n  }\n\n  public onRepeaterItemClick(event: MouseEvent): void {\n    // Only activate item if clicking on the title, content, or parent item div.\n    // This will avoid accidental activations when clicking inside interactive elements like\n    // the expand/collapse chevron, dropdown, inline-delete, etc...\n    if (\n      event.target === this.itemRef.nativeElement ||\n      this.itemContentRef.nativeElement.contains(event.target) ||\n      this.itemHeaderRef.nativeElement.contains(event.target)\n    ) {\n      this.repeaterService.activateItem(this);\n    }\n  }\n\n  public updateForExpanded(value: boolean, animate: boolean): void {\n    if (this.isCollapsible === false && value === false) {\n      console.warn(\n        `Setting isExpanded to false when the repeater item is not collapsible\n        will have no effect.`\n      );\n    } else if (this._isExpanded !== value) {\n      this._isExpanded = value;\n\n      if (this._isExpanded) {\n        this.expand.emit();\n      } else {\n        this.collapse.emit();\n      }\n\n      this.repeaterService.onItemCollapseStateChange(this);\n      this.slideForExpanded(animate);\n      this.changeDetector.markForCheck();\n    }\n  }\n\n  public onCheckboxChange(value: SkyCheckboxChange): void {\n    this.isSelected = value.checked;\n  }\n\n  public onInlineFormClose(inlineFormCloseArgs: SkyInlineFormCloseArgs): void {\n    this.inlineFormClose.emit(inlineFormCloseArgs);\n  }\n\n  public moveToTop(event: Event): void {\n    event.stopPropagation();\n    this.adapterService.moveItemUp(this.elementRef.nativeElement, true);\n    this.adapterService.focusElement(event.target as HTMLElement);\n    this.repeaterService.registerOrderChange();\n  }\n\n  public onReorderHandleKeyDown(event: KeyboardEvent): void {\n    /*istanbul ignore else */\n    if (event.key) {\n      switch (event.key.toLowerCase()) {\n        case ' ':\n        case 'enter':\n          this.keyboardToggleReorder();\n          event.preventDefault();\n          event.stopPropagation();\n          break;\n\n        case 'escape':\n          /* istanbul ignore else */\n          if (this.keyboardReorderingEnabled) {\n            this.keyboardReorderingEnabled = false;\n            this.revertReorderSteps();\n            this.reorderButtonLabel =\n              this.reorderCancelText + ' ' + this.reorderInstructions;\n            this.adapterService.focusElement(event.target as HTMLElement);\n            event.preventDefault();\n            event.stopPropagation();\n          }\n          break;\n\n        case 'arrowup':\n          if (this.keyboardReorderingEnabled) {\n            this.keyboardReorderUp();\n            event.preventDefault();\n            event.stopPropagation();\n            this.repeaterService.registerOrderChange();\n          }\n          break;\n\n        case 'arrowdown':\n          /* istanbul ignore else */\n          if (this.keyboardReorderingEnabled) {\n            this.keyboardReorderDown();\n            event.preventDefault();\n            event.stopPropagation();\n            this.repeaterService.registerOrderChange();\n          }\n          break;\n\n        case 'arrowleft':\n        case 'arrowright':\n          /* istanbul ignore else */\n          if (this.keyboardReorderingEnabled) {\n            event.preventDefault();\n            event.stopPropagation();\n          }\n          break;\n\n        /* istanbul ignore next */\n        default:\n          break;\n      }\n    }\n  }\n\n  public onReorderHandleBlur(event: any): void {\n    this.keyboardReorderingEnabled = false;\n    this.revertReorderSteps();\n    this.reorderButtonLabel = this.reorderInstructions;\n    this.reorderState = undefined;\n  }\n\n  public onItemKeyDown(event: KeyboardEvent): void {\n    /*istanbul ignore else */\n    if (event.key) {\n      switch (event.key.toLowerCase()) {\n        case ' ':\n        case 'enter':\n          /* istanbul ignore else */\n          /* Sanity check */\n          // Space/enter should never execute unless focused on the parent item element.\n          if (event.target === this.itemRef.nativeElement) {\n            if (this.selectable) {\n              this.isSelected = !this.isSelected;\n            }\n            this.repeaterService.activateItem(this);\n            event.preventDefault();\n          }\n          break;\n\n        /* istanbul ignore next */\n        default:\n          break;\n      }\n    }\n  }\n\n  private slideForExpanded(animate: boolean): void {\n    this.slideDirection = this.isExpanded ? 'down' : 'up';\n  }\n\n  private keyboardReorderUp(): void {\n    this.reorderCurrentIndex = this.adapterService.moveItemUp(\n      this.elementRef.nativeElement\n    );\n    this.reorderSteps--;\n    this.adapterService.focusElement(this.grabHandle);\n    this.keyboardReorderingEnabled = true;\n    this.reorderButtonLabel = `${this.reorderMovedText} ${\n      this.reorderCurrentIndex + 1\n    }`;\n  }\n\n  private keyboardReorderDown(): void {\n    this.reorderCurrentIndex = this.adapterService.moveItemDown(\n      this.elementRef.nativeElement\n    );\n    this.reorderSteps++;\n    this.adapterService.focusElement(this.grabHandle);\n    this.keyboardReorderingEnabled = true;\n    this.reorderButtonLabel = `${this.reorderMovedText} ${\n      this.reorderCurrentIndex + 1\n    }`;\n  }\n\n  private keyboardToggleReorder(): void {\n    this.keyboardReorderingEnabled = !this.keyboardReorderingEnabled;\n    this.reorderSteps = 0;\n\n    if (this.keyboardReorderingEnabled) {\n      this.reorderState = this.reorderStateDescription;\n    } else {\n      this.reorderState = `${this.reorderFinishText} ${\n        this.reorderCurrentIndex + 1\n      } ${this.reorderInstructions}`;\n    }\n  }\n\n  private revertReorderSteps(): void {\n    if (this.reorderSteps < 0) {\n      this.adapterService.moveItemDown(\n        this.elementRef.nativeElement,\n        Math.abs(this.reorderSteps)\n      );\n    } else if (this.reorderSteps > 0) {\n      this.adapterService.moveItemUp(\n        this.elementRef.nativeElement,\n        false,\n        this.reorderSteps\n      );\n    }\n    this.repeaterService.registerOrderChange();\n  }\n\n  private updateExpandOnContentChange(): void {\n    this.repeaterItemContentComponents.changes\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe(() => {\n        this.hasItemContent = this.repeaterItemContentComponents.length > 0;\n        /* istanbul ignore next */\n        this.isCollapsible =\n          this.hasItemContent && this.repeaterService.expandMode !== 'none';\n        /* istanbul ignore else */\n        if (this.repeaterService.expandMode === 'single') {\n          this.repeaterService.onItemCollapseStateChange(this);\n        }\n      });\n  }\n}\n","<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"]}
+{"version":3,"file":"repeater-item.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/lists/src/lib/modules/repeater/repeater-item.component.ts","../../../../../../../../libs/components/lists/src/lib/modules/repeater/repeater-item.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  AfterViewInit,\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  ContentChildren,\n  ElementRef,\n  EventEmitter,\n  HostBinding,\n  HostListener,\n  Input,\n  OnDestroy,\n  OnInit,\n  Output,\n  QueryList,\n  TemplateRef,\n  ViewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { skyAnimationSlide } from '@skyux/animations';\nimport { SkyCheckboxChange } from '@skyux/forms';\nimport { SkyLibResourcesService } from '@skyux/i18n';\nimport {\n  SkyInlineFormCloseArgs,\n  SkyInlineFormConfig,\n} from '@skyux/inline-form';\n\nimport { Observable, Subject, forkJoin as observableForkJoin } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nimport { SkyRepeaterAdapterService } from './repeater-adapter.service';\nimport { SkyRepeaterItemContentComponent } from './repeater-item-content.component';\nimport { SkyRepeaterItemContextMenuComponent } from './repeater-item-context-menu.component';\nimport { SkyRepeaterItemRolesType } from './repeater-item-roles.type';\nimport { SkyRepeaterService } from './repeater.service';\n\nlet nextContentId = 0;\n\n/**\n * Creates an individual repeater item.\n */\n@Component({\n  selector: 'sky-repeater-item',\n  styleUrls: ['./repeater-item.component.scss'],\n  templateUrl: './repeater-item.component.html',\n  animations: [skyAnimationSlide],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class SkyRepeaterItemComponent\n  implements OnDestroy, OnInit, AfterViewInit\n{\n  /**\n   * Make the first, non-disabled item tab-focusable.\n   * - Disabled items should not be focusable per [W3C](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_disabled_controls).\n   * - One item per list/grid/listbox should be tab focusable per [W3C](https://www.w3.org/TR/wai-aria-practices-1.1/#grid).\n   */\n  @HostBinding()\n  public get tabindex(): 0 | -1 {\n    return this.repeaterService.items.filter((item) => !item.disabled)[0] ===\n      this\n      ? 0\n      : -1;\n  }\n\n  /**\n   * Whether to exclude an item when cycling through.\n   */\n  @Input()\n  public set disabled(value: boolean) {\n    if (this._isDisabled !== value) {\n      if (value) {\n        this.isSelected = false;\n        this._isDisabled = true;\n      } else {\n        this._isDisabled = false;\n      }\n      if (this.isActive) {\n        this.repeaterService.activateItemByIndex(undefined);\n      }\n      if (this.elementRef.nativeElement.matches(':focus-within')) {\n        this.elementRef.nativeElement.ownerDocument.activeElement.blur();\n      }\n      this.changeDetector.markForCheck();\n    }\n  }\n  public get disabled(): boolean {\n    return this._isDisabled;\n  }\n\n  /**\n   * Specifies a human-readable name for the repeater item that is available for multiple purposes,\n   * such as accessibility and instrumentation. For example, the component uses the name to\n   * construct ARIA labels for the repeater item controls\n   * to [support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).\n   */\n  @Input()\n  public itemName: string;\n\n  /**\n   * Specifies configuration options for the buttons to display on an inline form\n   * within the repeater. This property accepts\n   * [a `SkyInlineFormConfig` object](https://developer.blackbaud.com/skyux/components/inline-form#skyinlineformconfig-properties).\n   */\n  @Input()\n  public inlineFormConfig: SkyInlineFormConfig;\n\n  /**\n   * Specifies [an Angular `TemplateRef`](https://angular.io/api/core/TemplateRef) to use\n   * as a template to instantiate an inline form within the repeater.\n   */\n  @Input()\n  public inlineFormTemplate: TemplateRef<unknown>;\n\n  /**\n   * Indicates whether the repeater item is expanded.\n   * @default true\n   */\n  @Input()\n  public set isExpanded(value: boolean) {\n    this.updateForExpanded(value, true);\n  }\n\n  public get isExpanded(): boolean {\n    return this._isExpanded;\n  }\n\n  /**\n   * Indicates whether the repeater item's checkbox is selected.\n   * When users select the repeater item, the specified property on your model is updated accordingly.\n   * @default false\n   */\n  @Input()\n  public set isSelected(value: boolean) {\n    if (!this.disabled && value !== this._isSelected) {\n      this._isSelected = value;\n      this.isSelectedChange.emit(this._isSelected);\n    }\n  }\n\n  public get isSelected(): boolean {\n    return this._isSelected;\n  }\n\n  /**\n   * Indicates whether users can change the order of the repeater item.\n   * The repeater component's `reorderable` property must also be set to `true`.\n   */\n  @Input()\n  public reorderable = false;\n\n  /**\n   * Indicates whether to display a checkbox in the left of the repeater item.\n   */\n  @Input()\n  public selectable = false;\n\n  /**\n   * Indicates whether to display an inline form within the repeater.\n   * Users can toggle between displaying and hiding the inline form.\n   */\n  @Input()\n  public showInlineForm = false;\n\n  /**\n   * Specifies an object that the repeater component returns for this repeater item\n   * when the `orderChange` event fires. This is required\n   * if you set the `reorderable` property to `true`.\n   */\n  @Input()\n  public tag: any;\n\n  /**\n   * Fires when users collapse the repeater item.\n   */\n  @Output()\n  public collapse = new EventEmitter<void>();\n\n  /**\n   * Fires when users expand the repeater item.\n   */\n  @Output()\n  public expand = new EventEmitter<void>();\n\n  /**\n   * Fires when the repeater includes an inline form and users close it. This event emits\n   * [a `SkyInlineFormCloseArgs` type](https://developer.blackbaud.com/skyux/components/inline-form#skyinlineformcloseargs-properties).\n   */\n  @Output()\n  public inlineFormClose = new EventEmitter<SkyInlineFormCloseArgs>();\n\n  /**\n   * Fires when users select or clear the checkbox for the repeater item.\n   */\n  @Output()\n  public isSelectedChange = new EventEmitter<boolean>();\n\n  @ContentChild(SkyRepeaterItemContextMenuComponent, { read: ElementRef })\n  public contextMenu: ElementRef;\n\n  public contentId = `sky-repeater-item-content-${++nextContentId}`;\n\n  public hasItemContent = false;\n\n  public isActive = false;\n\n  public set isCollapsible(value: boolean) {\n    if (this.isCollapsible !== value) {\n      this._isCollapsible = value;\n\n      /*istanbul ignore else */\n      if (!value) {\n        this.updateForExpanded(true, false);\n      }\n    }\n\n    this.changeDetector.markForCheck();\n  }\n\n  public get isCollapsible(): boolean {\n    return this._isCollapsible;\n  }\n\n  public itemRole$: Observable<SkyRepeaterItemRolesType>;\n\n  public keyboardReorderingEnabled = false;\n\n  public reorderButtonLabel: string;\n\n  public reorderState: string;\n\n  public slideDirection: string;\n\n  @HostBinding('class')\n  get repeaterGroupClass(): string {\n    return 'sky-repeater-item-group-' + this.repeaterService.repeaterGroupId;\n  }\n\n  @ViewChild('grabHandle', { read: ElementRef })\n  private grabHandle: ElementRef;\n\n  @ViewChild('itemContentRef', { read: ElementRef })\n  private itemContentRef: ElementRef;\n\n  @ViewChild('itemHeaderRef', { read: ElementRef })\n  private itemHeaderRef: ElementRef;\n\n  @ViewChild('itemRef', { read: ElementRef })\n  private itemRef: ElementRef;\n\n  @ContentChildren(SkyRepeaterItemContentComponent)\n  private repeaterItemContentComponents: QueryList<SkyRepeaterItemContentComponent>;\n\n  private ngUnsubscribe = new Subject<void>();\n\n  private reorderCancelText: string;\n\n  private reorderCurrentIndex: number;\n\n  private reorderFinishText: string;\n\n  private reorderInstructions: string;\n\n  private reorderMovedText: string;\n\n  private reorderStateDescription: string;\n\n  private reorderSteps: number;\n\n  private _isCollapsible = true;\n\n  private _isDisabled = false;\n\n  private _isExpanded = true;\n\n  private _isSelected = false;\n\n  constructor(\n    private repeaterService: SkyRepeaterService,\n    private changeDetector: ChangeDetectorRef,\n    private adapterService: SkyRepeaterAdapterService,\n    private elementRef: ElementRef,\n    private resourceService: SkyLibResourcesService\n  ) {\n    this.slideForExpanded(false);\n\n    observableForkJoin([\n      this.resourceService.getString('skyux_repeater_item_reorder_cancel'),\n      this.resourceService.getString('skyux_repeater_item_reorder_finish'),\n      this.resourceService.getString(\n        'skyux_repeater_item_reorder_instructions'\n      ),\n      this.resourceService.getString('skyux_repeater_item_reorder_operation'),\n      this.resourceService.getString('skyux_repeater_item_reorder_moved'),\n    ]).subscribe((translatedStrings: string[]) => {\n      this.reorderCancelText = translatedStrings[0];\n      this.reorderFinishText = translatedStrings[1];\n      this.reorderStateDescription = translatedStrings[2];\n      this.reorderInstructions = translatedStrings[3];\n      this.reorderMovedText = translatedStrings[4];\n      this.reorderButtonLabel = this.reorderInstructions;\n    });\n\n    this.itemRole$ = this.repeaterService.itemRole.asObservable();\n  }\n\n  public ngOnInit(): void {\n    this.repeaterService.registerItem(this);\n    this.repeaterService.activeItemChange\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe((item: SkyRepeaterItemComponent) => {\n        const newIsActiveValue = this === item;\n        if (newIsActiveValue !== this.isActive) {\n          this.isActive = newIsActiveValue;\n          this.changeDetector.markForCheck();\n        }\n      });\n  }\n\n  public ngAfterViewInit(): void {\n    this.hasItemContent = this.repeaterItemContentComponents.length > 0;\n    this.updateExpandOnContentChange();\n  }\n\n  public ngOnDestroy(): void {\n    this.collapse.complete();\n    this.expand.complete();\n    this.inlineFormClose.complete();\n    this.isSelectedChange.complete();\n\n    this.ngUnsubscribe.next();\n    this.ngUnsubscribe.complete();\n\n    this.repeaterService.unregisterItem(this);\n  }\n\n  @HostListener('keydown', ['$event'])\n  public onKeydown($event: KeyboardEvent) {\n    if (\n      [' ', 'Enter', 'Home', 'End', 'ArrowUp', 'ArrowDown'].includes($event.key)\n    ) {\n      if (\n        ($event.target as HTMLElement).matches(\n          'input, textarea, select, option, [contenteditable], [contenteditable] *'\n        )\n      ) {\n        return;\n      }\n      $event.preventDefault();\n      $event.stopPropagation();\n      let activateItem: SkyRepeaterItemComponent | undefined = undefined;\n      /* istanbul ignore else */\n      if ([' ', 'Enter'].includes($event.key)) {\n        if (this.selectable) {\n          this.isSelected = !this.isSelected;\n        }\n        activateItem = this;\n      }\n      /* istanbul ignore else */\n      if (['Home', 'End'].includes($event.key)) {\n        const items = this.repeaterService.items.filter(\n          (item) => !item.disabled\n        );\n        if ($event.key === 'Home') {\n          activateItem = items.shift();\n        } else {\n          activateItem = items.pop();\n        }\n      }\n      /* istanbul ignore else */\n      if (['ArrowUp', 'ArrowDown'].includes($event.key)) {\n        const currentIndex = this.repeaterService.items.findIndex(\n          (item) => item === this\n        );\n        let sliceFrom: number;\n        let sliceTo: number;\n        if ($event.key === 'ArrowUp') {\n          sliceFrom = 0;\n          sliceTo = currentIndex;\n        } else {\n          sliceFrom = currentIndex + 1;\n          sliceTo = undefined;\n        }\n        const items = this.repeaterService.items\n          .slice(sliceFrom, sliceTo)\n          .filter((item) => !item.disabled);\n        activateItem = $event.key === 'ArrowUp' ? items.pop() : items.shift();\n        if (!activateItem) {\n          // Wrap around.\n          if ($event.key === 'ArrowDown') {\n            sliceFrom = 0;\n            sliceTo = currentIndex;\n          } else {\n            sliceFrom = currentIndex + 1;\n            sliceTo = undefined;\n          }\n          const items = this.repeaterService.items\n            .slice(sliceFrom, sliceTo)\n            .filter((item) => !item.disabled);\n          activateItem = $event.key === 'ArrowUp' ? items.pop() : items.shift();\n        }\n      }\n      /* istanbul ignore else */\n      if (activateItem && !activateItem.isActive) {\n        this.repeaterService.activateItem(activateItem);\n        if (\n          !(activateItem.elementRef.nativeElement as Element).matches(\n            ':focus-within'\n          )\n        ) {\n          activateItem.elementRef.nativeElement.focus();\n        }\n      }\n    }\n  }\n\n  public headerClick(): void {\n    if (this.isCollapsible) {\n      this.updateForExpanded(!this.isExpanded, true);\n    }\n  }\n\n  public chevronDirectionChange(direction: string): void {\n    this.updateForExpanded(direction === 'up', true);\n  }\n\n  public onRepeaterItemClick(event: MouseEvent): void {\n    // Only activate item if clicking on the title, content, or parent item div.\n    // This will avoid accidental activations when clicking inside interactive elements like\n    // the expand/collapse chevron, dropdown, inline-delete, etc...\n    if (\n      event.target === this.itemRef.nativeElement ||\n      this.itemContentRef.nativeElement.contains(event.target) ||\n      this.itemHeaderRef.nativeElement.contains(event.target)\n    ) {\n      this.repeaterService.activateItem(this);\n    }\n  }\n\n  public updateForExpanded(value: boolean, animate: boolean): void {\n    if (this.isCollapsible === false && value === false) {\n      console.warn(\n        `Setting isExpanded to false when the repeater item is not collapsible\n        will have no effect.`\n      );\n    } else if (this._isExpanded !== value) {\n      this._isExpanded = value;\n\n      if (this._isExpanded) {\n        this.expand.emit();\n      } else {\n        this.collapse.emit();\n      }\n\n      this.repeaterService.onItemCollapseStateChange(this);\n      this.slideForExpanded(animate);\n      this.changeDetector.markForCheck();\n    }\n  }\n\n  public onCheckboxChange(value: SkyCheckboxChange): void {\n    this.isSelected = value.checked;\n  }\n\n  public onInlineFormClose(inlineFormCloseArgs: SkyInlineFormCloseArgs): void {\n    this.inlineFormClose.emit(inlineFormCloseArgs);\n  }\n\n  public moveToTop(event: Event): void {\n    event.stopPropagation();\n    this.adapterService.moveItemUp(this.elementRef.nativeElement, true);\n    this.adapterService.focusElement(event.target as HTMLElement);\n    this.repeaterService.registerOrderChange();\n  }\n\n  public onReorderHandleKeyDown(event: KeyboardEvent): void {\n    /*istanbul ignore else */\n    if (event.key) {\n      switch (event.key.toLowerCase()) {\n        case ' ':\n        case 'enter':\n          this.keyboardToggleReorder();\n          event.preventDefault();\n          event.stopPropagation();\n          break;\n\n        case 'escape':\n          /* istanbul ignore else */\n          if (this.keyboardReorderingEnabled) {\n            this.keyboardReorderingEnabled = false;\n            this.revertReorderSteps();\n            this.reorderButtonLabel =\n              this.reorderCancelText + ' ' + this.reorderInstructions;\n            this.adapterService.focusElement(event.target as HTMLElement);\n            event.preventDefault();\n            event.stopPropagation();\n          }\n          break;\n\n        case 'arrowup':\n          if (this.keyboardReorderingEnabled) {\n            this.keyboardReorderUp();\n            event.preventDefault();\n            event.stopPropagation();\n            this.repeaterService.registerOrderChange();\n          }\n          break;\n\n        case 'arrowdown':\n          /* istanbul ignore else */\n          if (this.keyboardReorderingEnabled) {\n            this.keyboardReorderDown();\n            event.preventDefault();\n            event.stopPropagation();\n            this.repeaterService.registerOrderChange();\n          }\n          break;\n\n        case 'arrowleft':\n        case 'arrowright':\n          /* istanbul ignore else */\n          if (this.keyboardReorderingEnabled) {\n            event.preventDefault();\n            event.stopPropagation();\n          }\n          break;\n\n        /* istanbul ignore next */\n        default:\n          break;\n      }\n    }\n  }\n\n  public onReorderHandleBlur(event: any): void {\n    this.keyboardReorderingEnabled = false;\n    this.revertReorderSteps();\n    this.reorderButtonLabel = this.reorderInstructions;\n    this.reorderState = undefined;\n  }\n\n  private slideForExpanded(animate: boolean): void {\n    this.slideDirection = this.isExpanded ? 'down' : 'up';\n  }\n\n  private keyboardReorderUp(): void {\n    this.reorderCurrentIndex = this.adapterService.moveItemUp(\n      this.elementRef.nativeElement\n    );\n    this.reorderSteps--;\n    this.adapterService.focusElement(this.grabHandle);\n    this.keyboardReorderingEnabled = true;\n    this.reorderButtonLabel = `${this.reorderMovedText} ${\n      this.reorderCurrentIndex + 1\n    }`;\n  }\n\n  private keyboardReorderDown(): void {\n    this.reorderCurrentIndex = this.adapterService.moveItemDown(\n      this.elementRef.nativeElement\n    );\n    this.reorderSteps++;\n    this.adapterService.focusElement(this.grabHandle);\n    this.keyboardReorderingEnabled = true;\n    this.reorderButtonLabel = `${this.reorderMovedText} ${\n      this.reorderCurrentIndex + 1\n    }`;\n  }\n\n  private keyboardToggleReorder(): void {\n    this.keyboardReorderingEnabled = !this.keyboardReorderingEnabled;\n    this.reorderSteps = 0;\n\n    if (this.keyboardReorderingEnabled) {\n      this.reorderState = this.reorderStateDescription;\n    } else {\n      this.reorderState = `${this.reorderFinishText} ${\n        this.reorderCurrentIndex + 1\n      } ${this.reorderInstructions}`;\n    }\n  }\n\n  private revertReorderSteps(): void {\n    if (this.reorderSteps < 0) {\n      this.adapterService.moveItemDown(\n        this.elementRef.nativeElement,\n        Math.abs(this.reorderSteps)\n      );\n    } else if (this.reorderSteps > 0) {\n      this.adapterService.moveItemUp(\n        this.elementRef.nativeElement,\n        false,\n        this.reorderSteps\n      );\n    }\n    this.repeaterService.registerOrderChange();\n  }\n\n  private updateExpandOnContentChange(): void {\n    this.repeaterItemContentComponents.changes\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe(() => {\n        this.hasItemContent = this.repeaterItemContentComponents.length > 0;\n        /* istanbul ignore next */\n        this.isCollapsible =\n          this.hasItemContent && this.repeaterService.expandMode !== 'none';\n        /* istanbul ignore else */\n        if (this.repeaterService.expandMode === 'single') {\n          this.repeaterService.onItemCollapseStateChange(this);\n        }\n      });\n  }\n}\n","<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"]}

package/esm2015/lib/modules/repeater/repeater-role.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=repeater-role.type.js.map

package/esm2015/lib/modules/repeater/repeater-role.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"repeater-role.type.js","sourceRoot":"","sources":["../../../../../../../../libs/components/lists/src/lib/modules/repeater/repeater-role.type.ts"],"names":[],"mappings":"","sourcesContent":["export type SkyRepeaterRoleType = 'list' | 'listbox' | 'grid';\n"]}

package/esm2015/lib/modules/repeater/repeater.component.js

@@ -9,7 +9,8 @@ import * as i0 from "@angular/core";
 import * as i1 from "./repeater.service";
 import * as i2 from "./repeater-adapter.service";
 import * as i3 from "ng2-dragula";
-import * as i4 from "@skyux/i18n";
+import * as i4 from "@angular/cdk/observers";
+import * as i5 from "@skyux/i18n";
 let uniqueId = 0;
 /**
  * Creates a container to display repeater items.
@@ -120,6 +121,7 @@ export class SkyRepeaterComponent {
                 if (this.activeIndex !== undefined) {
                     this.repeaterService.activateItemByIndex(this.activeIndex);
                 }
+                this.updateRole();
             });
         });
         setTimeout(() => {
@@ -127,6 +129,7 @@ export class SkyRepeaterComponent {
             this.items.forEach((item) => {
                 item.reorderable = this.reorderable;
             });
+            this.updateRole();
         }, 0);
     }
     ngOnChanges(changes) {
@@ -141,6 +144,7 @@ export class SkyRepeaterComponent {
             if (this.items) {
                 this.items.forEach((item) => (item.reorderable = this.reorderable));
             }
+            this.updateRole();
             this.changeDetector.markForCheck();
         }
     }
@@ -149,6 +153,12 @@ export class SkyRepeaterComponent {
         this.ngUnsubscribe.complete();
         this.destroyDragAndDrop();
     }
+    ngOnInit() {
+        this.updateRole();
+    }
+    onCdkObserveContent() {
+        this.updateRole();
+    }
     updateForExpandMode(itemAdded) {
         if (this.items) {
             let foundExpanded = false;
@@ -167,6 +177,7 @@ export class SkyRepeaterComponent {
                     foundExpanded = true;
                 }
             });
+            this.updateRole();
         }
     }
     initializeDragAndDrop() {
@@ -231,9 +242,59 @@ export class SkyRepeaterComponent {
             return item.tag !== undefined;
         });
     }
+    updateRole() {
+        // Determine a role using a hierarchy based on https://www.w3.org/TR/wai-aria-practices-1.1/
+        //   1. If there are one or more interactions in the repeater item projected content, use grid.
+        //   2. If there are selectable repeater items and no other interactions, use listbox.
+        //   3. If there are no interactions, use list.
+        var _a, _b;
+        // 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';
+        }
+        if (this.role !== autoRole) {
+            this.repeaterService.itemRole.next(Object.assign({}, roleMap[autoRole]));
+            this.role = `${autoRole}`;
+            this.changeDetector.markForCheck();
+        }
+    }
 }
 SkyRepeaterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyRepeaterComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SkyRepeaterService }, { token: i2.SkyRepeaterAdapterService }, { token: i3.DragulaService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-SkyRepeaterComponent.ɵcmp = i0.ɵɵ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, 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.DragulaDirective, selector: "[dragula]", inputs: ["dragula", "dragulaModel", "dragulaOptions"] }], pipes: { "skyLibResources": i4.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyRepeaterComponent.ɵcmp = i0.ɵɵ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, 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.DragulaDirective, selector: "[dragula]", inputs: ["dragula", "dragulaModel", "dragulaOptions"] }, { type: i4.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], pipes: { "skyLibResources": i5.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyRepeaterComponent, decorators: [{
             type: Component,
             args: [{