@skyux/lists 5.1.0 → 5.5.0

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

@@ -0,0 +1,389 @@
+import { ChangeDetectorRef, Component, ContentChild, ContentChildren, ElementRef, EventEmitter, HostBinding, Input, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation, } from '@angular/core';
+import { skyAnimationSlide } from '@skyux/animations';
+import { SkyLibResourcesService } from '@skyux/i18n';
+import { forkJoin as observableForkJoin, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { SkyRepeaterAdapterService } from './repeater-adapter.service';
+import { SkyRepeaterItemContentComponent } from './repeater-item-content.component';
+import { SkyRepeaterItemContextMenuComponent } from './repeater-item-context-menu.component';
+import { SkyRepeaterService } from './repeater.service';
+import * as i0 from "@angular/core";
+import * as i1 from "./repeater.service";
+import * as i2 from "./repeater-adapter.service";
+import * as i3 from "@skyux/i18n";
+import * as i4 from "@skyux/inline-form";
+import * as i5 from "@skyux/indicators";
+import * as i6 from "@skyux/forms";
+import * as i7 from "@angular/common";
+let nextContentId = 0;
+/**
+ * Creates an individual repeater item.
+ */
+export class SkyRepeaterItemComponent {
+    constructor(repeaterService, changeDetector, adapterService, elementRef, resourceService) {
+        this.repeaterService = repeaterService;
+        this.changeDetector = changeDetector;
+        this.adapterService = adapterService;
+        this.elementRef = elementRef;
+        this.resourceService = resourceService;
+        /**
+         * Indicates whether users can change the order of the repeater item.
+         * The repeater component's `reorderable` property must also be set to `true`.
+         */
+        this.reorderable = false;
+        /**
+         * Indicates whether to display a checkbox in the left of the repeater item.
+         */
+        this.selectable = false;
+        /**
+         * Indicates whether to display an inline form within the repeater.
+         * Users can toggle between displaying and hiding the inline form.
+         */
+        this.showInlineForm = false;
+        /**
+         * Fires when users collapse the repeater item.
+         */
+        this.collapse = new EventEmitter();
+        /**
+         * Fires when users expand the repeater item.
+         */
+        this.expand = new EventEmitter();
+        /**
+         * Fires when the repeater includes an inline form and users close it. This event emits
+         * [a `SkyInlineFormCloseArgs` type](https://developer.blackbaud.com/skyux/components/inline-form#skyinlineformcloseargs-properties).
+         */
+        this.inlineFormClose = new EventEmitter();
+        /**
+         * Fires when users select or clear the checkbox for the repeater item.
+         */
+        this.isSelectedChange = new EventEmitter();
+        this.contentId = `sky-repeater-item-content-${++nextContentId}`;
+        this.hasItemContent = false;
+        this.isActive = false;
+        this.keyboardReorderingEnabled = false;
+        this.ngUnsubscribe = new Subject();
+        this._isCollapsible = true;
+        this._isExpanded = true;
+        this._isSelected = false;
+        this.slideForExpanded(false);
+        observableForkJoin([
+            this.resourceService.getString('skyux_repeater_item_reorder_cancel'),
+            this.resourceService.getString('skyux_repeater_item_reorder_finish'),
+            this.resourceService.getString('skyux_repeater_item_reorder_instructions'),
+            this.resourceService.getString('skyux_repeater_item_reorder_operation'),
+            this.resourceService.getString('skyux_repeater_item_reorder_moved'),
+        ]).subscribe((translatedStrings) => {
+            this.reorderCancelText = translatedStrings[0];
+            this.reorderFinishText = translatedStrings[1];
+            this.reorderStateDescription = translatedStrings[2];
+            this.reorderInstructions = translatedStrings[3];
+            this.reorderMovedText = translatedStrings[4];
+            this.reorderButtonLabel = this.reorderInstructions;
+        });
+    }
+    /**
+     * Indicates whether the repeater item is expanded.
+     * @default true
+     */
+    set isExpanded(value) {
+        this.updateForExpanded(value, true);
+    }
+    get isExpanded() {
+        return this._isExpanded;
+    }
+    /**
+     * Indicates whether the repeater item's checkbox is selected.
+     * When users select the repeater item, the specified property on your model is updated accordingly.
+     * @default false
+     */
+    set isSelected(value) {
+        if (value !== this._isSelected) {
+            this._isSelected = value;
+            this.isSelectedChange.emit(this._isSelected);
+        }
+    }
+    get isSelected() {
+        return this._isSelected;
+    }
+    set isCollapsible(value) {
+        if (this.isCollapsible !== value) {
+            this._isCollapsible = value;
+            /*istanbul ignore else */
+            if (!value) {
+                this.updateForExpanded(true, false);
+            }
+        }
+        this.changeDetector.markForCheck();
+    }
+    get isCollapsible() {
+        return this._isCollapsible;
+    }
+    get repeaterGroupClass() {
+        return 'sky-repeater-item-group-' + this.repeaterService.repeaterGroupId;
+    }
+    ngOnInit() {
+        this.repeaterService.registerItem(this);
+        this.repeaterService.activeItemChange
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((item) => {
+            const newIsActiveValue = this === item;
+            if (newIsActiveValue !== this.isActive) {
+                this.isActive = newIsActiveValue;
+                this.changeDetector.markForCheck();
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this.hasItemContent = this.repeaterItemContentComponents.length > 0;
+        this.updateExpandOnContentChange();
+    }
+    ngOnDestroy() {
+        this.collapse.complete();
+        this.expand.complete();
+        this.inlineFormClose.complete();
+        this.isSelectedChange.complete();
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+        this.repeaterService.unregisterItem(this);
+    }
+    headerClick() {
+        if (this.isCollapsible) {
+            this.updateForExpanded(!this.isExpanded, true);
+        }
+    }
+    chevronDirectionChange(direction) {
+        this.updateForExpanded(direction === 'up', true);
+    }
+    onRepeaterItemClick(event) {
+        // Only activate item if clicking on the title, content, or parent item div.
+        // This will avoid accidental activations when clicking inside interactive elements like
+        // the expand/collapse chevron, dropdown, inline-delete, etc...
+        if (event.target === this.itemRef.nativeElement ||
+            this.itemContentRef.nativeElement.contains(event.target) ||
+            this.itemHeaderRef.nativeElement.contains(event.target)) {
+            this.repeaterService.activateItem(this);
+        }
+    }
+    updateForExpanded(value, animate) {
+        if (this.isCollapsible === false && value === false) {
+            console.warn(`Setting isExpanded to false when the repeater item is not collapsible
+        will have no effect.`);
+        }
+        else if (this._isExpanded !== value) {
+            this._isExpanded = value;
+            if (this._isExpanded) {
+                this.expand.emit();
+            }
+            else {
+                this.collapse.emit();
+            }
+            this.repeaterService.onItemCollapseStateChange(this);
+            this.slideForExpanded(animate);
+            this.changeDetector.markForCheck();
+        }
+    }
+    onCheckboxChange(value) {
+        this.isSelected = value.checked;
+    }
+    onInlineFormClose(inlineFormCloseArgs) {
+        this.inlineFormClose.emit(inlineFormCloseArgs);
+    }
+    moveToTop(event) {
+        event.stopPropagation();
+        this.adapterService.moveItemUp(this.elementRef.nativeElement, true);
+        this.adapterService.focusElement(event.target);
+        this.repeaterService.registerOrderChange();
+    }
+    onReorderHandleKeyDown(event) {
+        /*istanbul ignore else */
+        if (event.key) {
+            switch (event.key.toLowerCase()) {
+                case ' ':
+                case 'enter':
+                    this.keyboardToggleReorder();
+                    event.preventDefault();
+                    event.stopPropagation();
+                    break;
+                case 'escape':
+                    /* istanbul ignore else */
+                    if (this.keyboardReorderingEnabled) {
+                        this.keyboardReorderingEnabled = false;
+                        this.revertReorderSteps();
+                        this.reorderButtonLabel =
+                            this.reorderCancelText + ' ' + this.reorderInstructions;
+                        this.adapterService.focusElement(event.target);
+                        event.preventDefault();
+                        event.stopPropagation();
+                    }
+                    break;
+                case 'arrowup':
+                    if (this.keyboardReorderingEnabled) {
+                        this.keyboardReorderUp();
+                        event.preventDefault();
+                        event.stopPropagation();
+                        this.repeaterService.registerOrderChange();
+                    }
+                    break;
+                case 'arrowdown':
+                    /* istanbul ignore else */
+                    if (this.keyboardReorderingEnabled) {
+                        this.keyboardReorderDown();
+                        event.preventDefault();
+                        event.stopPropagation();
+                        this.repeaterService.registerOrderChange();
+                    }
+                    break;
+                case 'arrowleft':
+                case 'arrowright':
+                    /* istanbul ignore else */
+                    if (this.keyboardReorderingEnabled) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                    }
+                    break;
+                /* istanbul ignore next */
+                default:
+                    break;
+            }
+        }
+    }
+    onReorderHandleBlur(event) {
+        this.keyboardReorderingEnabled = false;
+        this.revertReorderSteps();
+        this.reorderButtonLabel = this.reorderInstructions;
+        this.reorderState = undefined;
+    }
+    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';
+    }
+    keyboardReorderUp() {
+        this.reorderCurrentIndex = this.adapterService.moveItemUp(this.elementRef.nativeElement);
+        this.reorderSteps--;
+        this.adapterService.focusElement(this.grabHandle);
+        this.keyboardReorderingEnabled = true;
+        this.reorderButtonLabel = `${this.reorderMovedText} ${this.reorderCurrentIndex + 1}`;
+    }
+    keyboardReorderDown() {
+        this.reorderCurrentIndex = this.adapterService.moveItemDown(this.elementRef.nativeElement);
+        this.reorderSteps++;
+        this.adapterService.focusElement(this.grabHandle);
+        this.keyboardReorderingEnabled = true;
+        this.reorderButtonLabel = `${this.reorderMovedText} ${this.reorderCurrentIndex + 1}`;
+    }
+    keyboardToggleReorder() {
+        this.keyboardReorderingEnabled = !this.keyboardReorderingEnabled;
+        this.reorderSteps = 0;
+        if (this.keyboardReorderingEnabled) {
+            this.reorderState = this.reorderStateDescription;
+        }
+        else {
+            this.reorderState = `${this.reorderFinishText} ${this.reorderCurrentIndex + 1} ${this.reorderInstructions}`;
+        }
+    }
+    revertReorderSteps() {
+        if (this.reorderSteps < 0) {
+            this.adapterService.moveItemDown(this.elementRef.nativeElement, Math.abs(this.reorderSteps));
+        }
+        else if (this.reorderSteps > 0) {
+            this.adapterService.moveItemUp(this.elementRef.nativeElement, false, this.reorderSteps);
+        }
+        this.repeaterService.registerOrderChange();
+    }
+    updateExpandOnContentChange() {
+        this.repeaterItemContentComponents.changes
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(() => {
+            this.hasItemContent = this.repeaterItemContentComponents.length > 0;
+            /* istanbul ignore next */
+            this.isCollapsible =
+                this.hasItemContent && this.repeaterService.expandMode !== 'none';
+            /* istanbul ignore else */
+            if (this.repeaterService.expandMode === 'single') {
+                this.repeaterService.onItemCollapseStateChange(this);
+            }
+        });
+    }
+}
+SkyRepeaterItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyRepeaterItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-repeater-item',
+                    styleUrls: ['./repeater-item.component.scss'],
+                    templateUrl: './repeater-item.component.html',
+                    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: [{
+                type: Input
+            }], inlineFormConfig: [{
+                type: Input
+            }], inlineFormTemplate: [{
+                type: Input
+            }], isExpanded: [{
+                type: Input
+            }], isSelected: [{
+                type: Input
+            }], reorderable: [{
+                type: Input
+            }], selectable: [{
+                type: Input
+            }], showInlineForm: [{
+                type: Input
+            }], tag: [{
+                type: Input
+            }], collapse: [{
+                type: Output
+            }], expand: [{
+                type: Output
+            }], inlineFormClose: [{
+                type: Output
+            }], isSelectedChange: [{
+                type: Output
+            }], contextMenu: [{
+                type: ContentChild,
+                args: [SkyRepeaterItemContextMenuComponent, { read: ElementRef }]
+            }], repeaterGroupClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], grabHandle: [{
+                type: ViewChild,
+                args: ['grabHandle', { read: ElementRef }]
+            }], itemContentRef: [{
+                type: ViewChild,
+                args: ['itemContentRef', { read: ElementRef }]
+            }], itemHeaderRef: [{
+                type: ViewChild,
+                args: ['itemHeaderRef', { read: ElementRef }]
+            }], itemRef: [{
+                type: ViewChild,
+                args: ['itemRef', { read: ElementRef }]
+            }], repeaterItemContentComponents: [{
+                type: ContentChildren,
+                args: [SkyRepeaterItemContentComponent]
+            }] } });
+//# sourceMappingURL=repeater-item.component.js.map

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

@@ -0,0 +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';\n\nimport { skyAnimationSlide } from '@skyux/animations';\n\nimport { SkyCheckboxChange } from '@skyux/forms';\n\nimport { SkyLibResourcesService } from '@skyux/i18n';\n\nimport {\n  SkyInlineFormCloseArgs,\n  SkyInlineFormConfig,\n} from '@skyux/inline-form';\n\nimport { forkJoin as observableForkJoin, Subject } from 'rxjs';\n\nimport { takeUntil } from 'rxjs/operators';\n\nimport { SkyRepeaterAdapterService } from './repeater-adapter.service';\n\nimport { SkyRepeaterItemContentComponent } from './repeater-item-content.component';\n\nimport { SkyRepeaterItemContextMenuComponent } from './repeater-item-context-menu.component';\n\nimport { SkyRepeaterService } from './repeater.service';\n\nlet nextContentId: number = 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<any>;\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: boolean = false;\n\n  /**\n   * Indicates whether to display a checkbox in the left of the repeater item.\n   */\n  @Input()\n  public selectable: boolean = 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: boolean = 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: string = `sky-repeater-item-content-${++nextContentId}`;\n\n  public hasItemContent: boolean = false;\n\n  public isActive: boolean = 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: boolean = 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(<HTMLElement>event.target);\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(<HTMLElement>event.target);\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"]}