@skyux/lists 12.2.0 → 12.4.0

package/fesm2022/skyux-lists.mjs

@@ -1407,11 +1407,11 @@ class SkyRepeaterItemComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyRepeaterItemComponent, deps: [{ token: SkyRepeaterService }, { token: i0.ChangeDetectorRef }, { token: SkyRepeaterAdapterService }, { token: i0.ElementRef }, { token: i3.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyRepeaterItemComponent, isStandalone: false, selector: "sky-repeater-item", inputs: { disabled: "disabled", itemName: "itemName", inlineFormConfig: "inlineFormConfig", inlineFormTemplate: "inlineFormTemplate", isExpanded: "isExpanded", isSelected: "isSelected", reorderable: "reorderable", selectable: "selectable", showInlineForm: "showInlineForm", tag: "tag" }, outputs: { collapse: "collapse", expand: "expand", inlineFormClose: "inlineFormClose", isSelectedChange: "isSelectedChange" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "this.repeaterGroupClass" } }, providers: [SkyContentInfoProvider], queries: [{ propertyName: "contextMenu", first: true, predicate: SkyRepeaterItemContextMenuComponent, descendants: true, read: ElementRef }, { propertyName: "titleComponent", first: true, predicate: SkyRepeaterItemTitleComponent, 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  #itemRef\n  class=\"sky-repeater-item sky-padding-even-default\"\n  [attr.aria-label]=\"itemName\"\n  [attr.aria-labelledby]=\"itemName || titleId\"\n  [attr.aria-selected]=\"selectable ? !!isSelected : undefined\"\n  [attr.role]=\"(itemRole$ | async)?.item\"\n  [attr.tabIndex]=\"tabindex\"\n  [ngClass]=\"{\n    'sky-repeater-item-active': isActive,\n    'sky-repeater-item-collapsible': isCollapsible,\n    'sky-repeater-item-selected': isSelected\n  }\"\n  (click)=\"onRepeaterItemClick($event)\"\n>\n  <div #inlineDelete>\n    <ng-content select=\"sky-inline-delete\" />\n  </div>\n\n  @if (inlineFormTemplate) {\n    <sky-inline-form\n      [config]=\"inlineFormConfig\"\n      [showForm]=\"showInlineForm\"\n      [template]=\"inlineFormTemplate\"\n      (close)=\"onInlineFormClose($event)\"\n    >\n      <ng-container *ngTemplateOutlet=\"skyRepeaterItemLeft\" />\n      <ng-container *ngTemplateOutlet=\"skyRepeaterItemRight\" />\n    </sky-inline-form>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"skyRepeaterItemLeft\" />\n    <ng-container *ngTemplateOutlet=\"skyRepeaterItemRight\" />\n  }\n</div>\n\n<ng-template #skyRepeaterItemLeft>\n  <div\n    class=\"sky-repeater-item-left\"\n    [attr.role]=\"!showInlineForm ? (itemRole$ | async)?.content : undefined\"\n  >\n    @if (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        #grabHandle\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      >\n        <sky-icon iconName=\"arrow-bidirectional-up-down\" />\n      </button>\n    }\n    @if (selectable) {\n      <sky-checkbox\n        class=\"sky-repeater-item-checkbox\"\n        [checked]=\"isSelected\"\n        [disabled]=\"disabled\"\n        [labelHidden]=\"true\"\n        [labelText]=\"\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    }\n    <div\n      #contextMenuEl\n      class=\"sky-repeater-item-context-menu\"\n      [hidden]=\"contextMenuEl.children.length === 0\"\n    >\n      <ng-content select=\"sky-repeater-item-context-menu\" />\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #skyRepeaterItemRight>\n  <div #itemHeaderRef class=\"sky-repeater-item-right\">\n    <div\n      class=\"sky-repeater-item-header\"\n      [attr.role]=\"(itemRole$ | async)?.title\"\n      [hidden]=\"titleRef.children.length === 0\"\n      (click)=\"headerClick()\"\n    >\n      <div\n        #titleRef\n        class=\"sky-repeater-item-title sky-font-emphasized\"\n        [attr.id]=\"titleId\"\n      >\n        <ng-content select=\"sky-repeater-item-title\" />\n      </div>\n      @if (reorderable) {\n        <button\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 iconName=\"arrow-up\" />\n          {{ 'skyux_repeater_item_reorder_top' | skyLibResources }}\n        </button>\n      }\n      @if (isCollapsible) {\n        <div class=\"sky-repeater-item-chevron\">\n          <sky-chevron\n            [ariaControls]=\"contentId\"\n            [ariaLabel]=\"\n              itemName\n                ? isExpanded\n                  ? ('skyux_repeater_item_expand' | skyLibResources: itemName)\n                  : ('skyux_repeater_item_collapse' | skyLibResources: itemName)\n                : isExpanded\n                  ? ('skyux_repeater_item_expand_default' | skyLibResources)\n                  : ('skyux_repeater_item_collapse_default' | skyLibResources)\n            \"\n            [direction]=\"isExpanded ? 'up' : 'down'\"\n            (directionChange)=\"chevronDirectionChange($event)\"\n          />\n        </div>\n      } @else if (!contextMenu) {\n        <!-- Used for when the chevron is hidden to ensure that the right side is the same height as the left.-->\n        <div class=\"sky-repeater-item-chevron-placeholder\"></div>\n      }\n      <!-- Used to ensure that the right side is the same height as the left.-->\n      @if (contextMenu) {\n        <div class=\"sky-repeater-item-chevron-placeholder-with-context\"></div>\n      }\n    </div>\n    <div\n      #itemContentRef\n      class=\"sky-repeater-item-content\"\n      [id]=\"contentId\"\n      [@.disabled]=\"animationDisabled\"\n      [@skyAnimationSlide]=\"slideDirection\"\n      [attr.role]=\"(itemRole$ | async)?.content\"\n    >\n      <ng-content select=\"sky-repeater-item-content\" />\n    </div>\n  </div>\n</ng-template>\n", styles: ["sky-repeater-item .sky-repeater-item{display:flex;border-bottom:1px dotted #cdcfd2;padding-top:0;position:relative;transition:box-shadow .15s;align-items:flex-start}sky-repeater-item .sky-repeater-item sky-inline-form{display:block;width:100%}sky-repeater-item .sky-repeater-item sky-inline-form>:first-child,sky-repeater-item .sky-repeater-item sky-inline-form .sky-slide-dissolve-first,sky-repeater-item .sky-repeater-item sky-inline-form .sky-slide-dissolve-last{display:flex;align-items:flex-start;flex:1 0 auto;width:100%}sky-repeater-item .sky-repeater-item sky-inline-form .sky-slide-dissolve-last{padding-top:10px}sky-repeater-item .sky-repeater-item.sky-repeater-item-active{background-color:#eeeeef;color:#212327;padding-left:6px;border-left:4px solid #00b4f1}sky-repeater-item .sky-repeater-item.sky-repeater-item-active .sky-inline-delete{margin-left:-4px;width:calc(100% + 4px)}sky-repeater-item .sky-repeater-item-left{display:flex;padding-top:10px;align-items:center}sky-repeater-item .sky-repeater-item-left sky-checkbox{display:flex}sky-repeater-item .sky-repeater-item-right{max-width:100%;flex-grow:1;align-self:center}sky-repeater-item .sky-repeater-item-header{align-items:center;display:flex;padding-top:10px}sky-repeater-item .sky-repeater-item-chevron{margin-left:10px}sky-repeater-item .sky-repeater-item-chevron-placeholder{height:24px}sky-repeater-item .sky-repeater-item-chevron-placeholder-with-context{height:29px}sky-repeater-item .sky-repeater-item-context-menu{padding:0 10px 0 0}sky-repeater-item .sky-repeater-item-checkbox{padding:0 5px 0 0}sky-repeater-item .sky-repeater-item-selected{background-color:#f1eef6;transition:background-color .15s}sky-repeater-item .sky-repeater-item-title{margin:0;flex-grow:1;line-height:1.1;color:#212327}sky-repeater-item sky-repeater-item-content{display:block;margin:10px 0 0}sky-repeater-item .sky-repeater-item-collapsible .sky-repeater-item-header{cursor:pointer}sky-repeater-item .sky-repeater-item-collapsible .sky-repeater-item-content{padding-right:34px}sky-repeater-item .sky-repeater-item-collapsed .sky-repeater-item-content{display:none}sky-repeater-item .sky-repeater-item-grab-handle{color:#cdcfd2;cursor:pointer;border:0;width:24px;height:24px;cursor:grab;cursor:-webkit-grab;cursor:-moz-grab;padding:0;margin:5px 10px 5px 0}sky-repeater-item .sky-repeater-item-grab-handle:hover{color:#979ba2;transition:color .15s}sky-repeater-item.sky-repeater-item-dragging.gu-mirror{opacity:initial;-ms-filter:initial;filter:initial;background-color:#fff;box-shadow:0 0 5px #0000004d}sky-repeater-item.sky-repeater-item-dragging.gu-transit .sky-repeater-item{background-color:#d8d8d8}sky-repeater-item.sky-repeater-item-dragging.gu-transit .sky-repeater-item .sky-repeater-item-left,sky-repeater-item.sky-repeater-item-dragging.gu-transit .sky-repeater-item .sky-repeater-item-right{visibility:hidden}sky-repeater-item.sky-repeater-item-dragging .sky-repeater-item-grab-handle{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}.sky-theme-modern .sky-split-view-drawer sky-repeater-item .sky-repeater-item{padding-left:var(--sky-padding-even-md)}.sky-theme-modern .sky-split-view-drawer sky-repeater-item .sky-repeater-item.sky-repeater-item-active{padding-left:calc(var(--sky-padding-even-md) - 4px)}.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:#fff;border-left-color:#1870b8}.sky-theme-modern sky-repeater-item .sky-repeater-item:focus-visible,.sky-theme-modern sky-repeater-item .sky-repeater-item:focus-visible:active{outline:solid 2px #1870B8;outline-offset:-2px}.sky-theme-modern sky-repeater-item .sky-repeater-item:focus-visible:not(:active){box-shadow:0 1px 8px #0000004d}.sky-theme-modern sky-repeater-item .sky-repeater-item-header[hidden]+.sky-repeater-item-content sky-repeater-item-content{margin:20px 0 0}.sky-theme-modern sky-repeater-item .sky-repeater-item-header,.sky-theme-modern sky-repeater-item .sky-repeater-item-left{padding-top:20px}.sky-theme-modern sky-repeater-item sky-inline-form .sky-slide-dissolve-last{padding-top:20px}.sky-theme-modern.sky-theme-mode-dark sky-repeater-item .sky-repeater-item{border-bottom-color:#686c73}.sky-theme-modern.sky-theme-mode-dark sky-repeater-item .sky-repeater-item.sky-repeater-item-active{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark sky-repeater-item .sky-repeater-item-title{color:#fbfcfe}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.λ2, selector: "sky-chevron", inputs: ["ariaControls", "ariaLabel", "direction", "disabled"], outputs: ["directionChange"] }, { kind: "component", type: i6.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "icon", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "component", type: i8.λ1, selector: "sky-inline-form", inputs: ["config", "template", "showForm"], outputs: ["close"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], animations: [skyAnimationSlide], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyRepeaterItemComponent, isStandalone: false, selector: "sky-repeater-item", inputs: { disabled: "disabled", itemName: "itemName", inlineFormConfig: "inlineFormConfig", inlineFormTemplate: "inlineFormTemplate", isExpanded: "isExpanded", isSelected: "isSelected", reorderable: "reorderable", selectable: "selectable", showInlineForm: "showInlineForm", tag: "tag" }, outputs: { collapse: "collapse", expand: "expand", inlineFormClose: "inlineFormClose", isSelectedChange: "isSelectedChange" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "this.repeaterGroupClass" } }, providers: [SkyContentInfoProvider], queries: [{ propertyName: "contextMenu", first: true, predicate: SkyRepeaterItemContextMenuComponent, descendants: true, read: ElementRef }, { propertyName: "titleComponent", first: true, predicate: SkyRepeaterItemTitleComponent, 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  #itemRef\n  class=\"sky-repeater-item sky-padding-even-default\"\n  [attr.aria-label]=\"itemName\"\n  [attr.aria-labelledby]=\"itemName || titleId\"\n  [attr.aria-selected]=\"selectable ? !!isSelected : undefined\"\n  [attr.role]=\"(itemRole$ | async)?.item\"\n  [attr.tabIndex]=\"tabindex\"\n  [ngClass]=\"{\n    'sky-repeater-item-active': isActive,\n    'sky-repeater-item-collapsible': isCollapsible,\n    'sky-repeater-item-selected': isSelected\n  }\"\n  (click)=\"onRepeaterItemClick($event)\"\n>\n  <div #inlineDelete>\n    <ng-content select=\"sky-inline-delete\" />\n  </div>\n\n  @if (inlineFormTemplate) {\n    <sky-inline-form\n      [config]=\"inlineFormConfig\"\n      [showForm]=\"showInlineForm\"\n      [template]=\"inlineFormTemplate\"\n      (close)=\"onInlineFormClose($event)\"\n    >\n      <ng-container *ngTemplateOutlet=\"skyRepeaterItemLeft\" />\n      <ng-container *ngTemplateOutlet=\"skyRepeaterItemRight\" />\n    </sky-inline-form>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"skyRepeaterItemLeft\" />\n    <ng-container *ngTemplateOutlet=\"skyRepeaterItemRight\" />\n  }\n</div>\n\n<ng-template #skyRepeaterItemLeft>\n  <div\n    class=\"sky-repeater-item-left\"\n    [attr.role]=\"!showInlineForm ? (itemRole$ | async)?.content : undefined\"\n  >\n    @if (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        #grabHandle\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      >\n        <sky-icon iconName=\"arrow-bidirectional-up-down\" />\n      </button>\n    }\n    @if (selectable) {\n      <sky-checkbox\n        class=\"sky-repeater-item-checkbox\"\n        [checked]=\"isSelected\"\n        [disabled]=\"disabled\"\n        [labelHidden]=\"true\"\n        [labelText]=\"\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    }\n    <div\n      #contextMenuEl\n      class=\"sky-repeater-item-context-menu\"\n      [hidden]=\"contextMenuEl.children.length === 0\"\n    >\n      <ng-content select=\"sky-repeater-item-context-menu\" />\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #skyRepeaterItemRight>\n  <div #itemHeaderRef class=\"sky-repeater-item-right\">\n    <div\n      class=\"sky-repeater-item-header\"\n      [attr.role]=\"(itemRole$ | async)?.title\"\n      [hidden]=\"titleRef.children.length === 0\"\n      (click)=\"headerClick()\"\n    >\n      <div\n        #titleRef\n        class=\"sky-repeater-item-title sky-font-emphasized\"\n        [attr.id]=\"titleId\"\n      >\n        <ng-content select=\"sky-repeater-item-title\" />\n      </div>\n      @if (reorderable) {\n        <button\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 iconName=\"arrow-up\" />\n          {{ 'skyux_repeater_item_reorder_top' | skyLibResources }}\n        </button>\n      }\n      @if (isCollapsible) {\n        <div class=\"sky-repeater-item-chevron\">\n          <sky-chevron\n            [ariaControls]=\"contentId\"\n            [ariaLabel]=\"\n              itemName\n                ? isExpanded\n                  ? ('skyux_repeater_item_expand' | skyLibResources: itemName)\n                  : ('skyux_repeater_item_collapse' | skyLibResources: itemName)\n                : isExpanded\n                  ? ('skyux_repeater_item_expand_default' | skyLibResources)\n                  : ('skyux_repeater_item_collapse_default' | skyLibResources)\n            \"\n            [direction]=\"isExpanded ? 'up' : 'down'\"\n            (directionChange)=\"chevronDirectionChange($event)\"\n          />\n        </div>\n      } @else if (!contextMenu) {\n        <!-- Used for when the chevron is hidden to ensure that the right side is the same height as the left.-->\n        <div class=\"sky-repeater-item-chevron-placeholder\"></div>\n      }\n      <!-- Used to ensure that the right side is the same height as the left.-->\n      @if (contextMenu) {\n        <div class=\"sky-repeater-item-chevron-placeholder-with-context\"></div>\n      }\n    </div>\n    <div\n      #itemContentRef\n      class=\"sky-repeater-item-content\"\n      [id]=\"contentId\"\n      [@.disabled]=\"animationDisabled\"\n      [@skyAnimationSlide]=\"slideDirection\"\n      [attr.role]=\"(itemRole$ | async)?.content\"\n    >\n      <ng-content select=\"sky-repeater-item-content\" />\n    </div>\n  </div>\n</ng-template>\n", styles: ["sky-repeater-item .sky-repeater-item{display:flex;border-bottom:1px dotted #cdcfd2;padding-top:0;position:relative;transition:box-shadow .15s;align-items:flex-start}sky-repeater-item .sky-repeater-item sky-inline-form{display:block;width:100%}sky-repeater-item .sky-repeater-item sky-inline-form>:first-child,sky-repeater-item .sky-repeater-item sky-inline-form .sky-slide-dissolve-first,sky-repeater-item .sky-repeater-item sky-inline-form .sky-slide-dissolve-last{display:flex;align-items:flex-start;flex:1 0 auto;width:100%}sky-repeater-item .sky-repeater-item sky-inline-form .sky-slide-dissolve-last{padding-top:10px}sky-repeater-item .sky-repeater-item.sky-repeater-item-active{background-color:#eeeeef;color:#212327;padding-left:6px;border-left:4px solid #00b4f1}sky-repeater-item .sky-repeater-item.sky-repeater-item-active .sky-inline-delete{margin-left:-4px;width:calc(100% + 4px)}sky-repeater-item .sky-repeater-item-left{display:flex;padding-top:10px;align-items:center}sky-repeater-item .sky-repeater-item-left sky-checkbox{display:flex}sky-repeater-item .sky-repeater-item-right{max-width:100%;flex-grow:1;align-self:center}sky-repeater-item .sky-repeater-item-header{align-items:center;display:flex;padding-top:10px}sky-repeater-item .sky-repeater-item-chevron{margin-left:10px}sky-repeater-item .sky-repeater-item-chevron-placeholder{height:24px}sky-repeater-item .sky-repeater-item-chevron-placeholder-with-context{height:29px}sky-repeater-item .sky-repeater-item-context-menu{padding:0 10px 0 0}sky-repeater-item .sky-repeater-item-checkbox{padding:0 5px 0 0}sky-repeater-item .sky-repeater-item-selected{background-color:#f1eef6;transition:background-color .15s}sky-repeater-item .sky-repeater-item-title{margin:0;flex-grow:1;line-height:1.1;color:#212327}sky-repeater-item sky-repeater-item-content{display:block;margin:10px 0 0}sky-repeater-item .sky-repeater-item-collapsible .sky-repeater-item-header{cursor:pointer}sky-repeater-item .sky-repeater-item-collapsible .sky-repeater-item-content{padding-right:34px}sky-repeater-item .sky-repeater-item-collapsed .sky-repeater-item-content{display:none}sky-repeater-item .sky-repeater-item-grab-handle{color:#686c73;cursor:pointer;border:0;width:24px;height:24px;cursor:grab;cursor:-webkit-grab;cursor:-moz-grab;padding:0;margin:5px 10px 5px 0}sky-repeater-item .sky-repeater-item-grab-handle:hover{color:#383a3d;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:-moz-grabbing;cursor:-webkit-grabbing}.sky-theme-modern .sky-split-view-drawer sky-repeater-item .sky-repeater-item{padding-left:var(--sky-padding-even-md)}.sky-theme-modern .sky-split-view-drawer sky-repeater-item .sky-repeater-item.sky-repeater-item-active{padding-left:calc(var(--sky-padding-even-md) - 4px)}.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:#fff;border-left-color:#1870b8}.sky-theme-modern sky-repeater-item .sky-repeater-item:focus-visible,.sky-theme-modern sky-repeater-item .sky-repeater-item:focus-visible:active{outline:solid 2px #1870B8;outline-offset:-2px}.sky-theme-modern sky-repeater-item .sky-repeater-item:focus-visible:not(:active){box-shadow:0 1px 8px #0000004d}.sky-theme-modern sky-repeater-item .sky-repeater-item-header[hidden]+.sky-repeater-item-content sky-repeater-item-content{margin:20px 0 0}.sky-theme-modern sky-repeater-item .sky-repeater-item-header,.sky-theme-modern sky-repeater-item .sky-repeater-item-left{padding-top:20px}.sky-theme-modern sky-repeater-item sky-inline-form .sky-slide-dissolve-last{padding-top:20px}.sky-theme-modern.sky-theme-mode-dark sky-repeater-item .sky-repeater-item{border-bottom-color:#686c73}.sky-theme-modern.sky-theme-mode-dark sky-repeater-item .sky-repeater-item.sky-repeater-item-active{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark sky-repeater-item .sky-repeater-item-title{color:#fbfcfe}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.λ2, selector: "sky-chevron", inputs: ["ariaControls", "ariaLabel", "direction", "disabled"], outputs: ["directionChange"] }, { kind: "component", type: i6.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "icon", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "component", type: i8.λ1, selector: "sky-inline-form", inputs: ["config", "template", "showForm"], outputs: ["close"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], animations: [skyAnimationSlide], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyRepeaterItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-repeater-item', animations: [skyAnimationSlide], providers: [SkyContentInfoProvider], encapsulation: ViewEncapsulation.None, standalone: false, template: "<div\n  #itemRef\n  class=\"sky-repeater-item sky-padding-even-default\"\n  [attr.aria-label]=\"itemName\"\n  [attr.aria-labelledby]=\"itemName || titleId\"\n  [attr.aria-selected]=\"selectable ? !!isSelected : undefined\"\n  [attr.role]=\"(itemRole$ | async)?.item\"\n  [attr.tabIndex]=\"tabindex\"\n  [ngClass]=\"{\n    'sky-repeater-item-active': isActive,\n    'sky-repeater-item-collapsible': isCollapsible,\n    'sky-repeater-item-selected': isSelected\n  }\"\n  (click)=\"onRepeaterItemClick($event)\"\n>\n  <div #inlineDelete>\n    <ng-content select=\"sky-inline-delete\" />\n  </div>\n\n  @if (inlineFormTemplate) {\n    <sky-inline-form\n      [config]=\"inlineFormConfig\"\n      [showForm]=\"showInlineForm\"\n      [template]=\"inlineFormTemplate\"\n      (close)=\"onInlineFormClose($event)\"\n    >\n      <ng-container *ngTemplateOutlet=\"skyRepeaterItemLeft\" />\n      <ng-container *ngTemplateOutlet=\"skyRepeaterItemRight\" />\n    </sky-inline-form>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"skyRepeaterItemLeft\" />\n    <ng-container *ngTemplateOutlet=\"skyRepeaterItemRight\" />\n  }\n</div>\n\n<ng-template #skyRepeaterItemLeft>\n  <div\n    class=\"sky-repeater-item-left\"\n    [attr.role]=\"!showInlineForm ? (itemRole$ | async)?.content : undefined\"\n  >\n    @if (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        #grabHandle\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      >\n        <sky-icon iconName=\"arrow-bidirectional-up-down\" />\n      </button>\n    }\n    @if (selectable) {\n      <sky-checkbox\n        class=\"sky-repeater-item-checkbox\"\n        [checked]=\"isSelected\"\n        [disabled]=\"disabled\"\n        [labelHidden]=\"true\"\n        [labelText]=\"\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    }\n    <div\n      #contextMenuEl\n      class=\"sky-repeater-item-context-menu\"\n      [hidden]=\"contextMenuEl.children.length === 0\"\n    >\n      <ng-content select=\"sky-repeater-item-context-menu\" />\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #skyRepeaterItemRight>\n  <div #itemHeaderRef class=\"sky-repeater-item-right\">\n    <div\n      class=\"sky-repeater-item-header\"\n      [attr.role]=\"(itemRole$ | async)?.title\"\n      [hidden]=\"titleRef.children.length === 0\"\n      (click)=\"headerClick()\"\n    >\n      <div\n        #titleRef\n        class=\"sky-repeater-item-title sky-font-emphasized\"\n        [attr.id]=\"titleId\"\n      >\n        <ng-content select=\"sky-repeater-item-title\" />\n      </div>\n      @if (reorderable) {\n        <button\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 iconName=\"arrow-up\" />\n          {{ 'skyux_repeater_item_reorder_top' | skyLibResources }}\n        </button>\n      }\n      @if (isCollapsible) {\n        <div class=\"sky-repeater-item-chevron\">\n          <sky-chevron\n            [ariaControls]=\"contentId\"\n            [ariaLabel]=\"\n              itemName\n                ? isExpanded\n                  ? ('skyux_repeater_item_expand' | skyLibResources: itemName)\n                  : ('skyux_repeater_item_collapse' | skyLibResources: itemName)\n                : isExpanded\n                  ? ('skyux_repeater_item_expand_default' | skyLibResources)\n                  : ('skyux_repeater_item_collapse_default' | skyLibResources)\n            \"\n            [direction]=\"isExpanded ? 'up' : 'down'\"\n            (directionChange)=\"chevronDirectionChange($event)\"\n          />\n        </div>\n      } @else if (!contextMenu) {\n        <!-- Used for when the chevron is hidden to ensure that the right side is the same height as the left.-->\n        <div class=\"sky-repeater-item-chevron-placeholder\"></div>\n      }\n      <!-- Used to ensure that the right side is the same height as the left.-->\n      @if (contextMenu) {\n        <div class=\"sky-repeater-item-chevron-placeholder-with-context\"></div>\n      }\n    </div>\n    <div\n      #itemContentRef\n      class=\"sky-repeater-item-content\"\n      [id]=\"contentId\"\n      [@.disabled]=\"animationDisabled\"\n      [@skyAnimationSlide]=\"slideDirection\"\n      [attr.role]=\"(itemRole$ | async)?.content\"\n    >\n      <ng-content select=\"sky-repeater-item-content\" />\n    </div>\n  </div>\n</ng-template>\n", styles: ["sky-repeater-item .sky-repeater-item{display:flex;border-bottom:1px dotted #cdcfd2;padding-top:0;position:relative;transition:box-shadow .15s;align-items:flex-start}sky-repeater-item .sky-repeater-item sky-inline-form{display:block;width:100%}sky-repeater-item .sky-repeater-item sky-inline-form>:first-child,sky-repeater-item .sky-repeater-item sky-inline-form .sky-slide-dissolve-first,sky-repeater-item .sky-repeater-item sky-inline-form .sky-slide-dissolve-last{display:flex;align-items:flex-start;flex:1 0 auto;width:100%}sky-repeater-item .sky-repeater-item sky-inline-form .sky-slide-dissolve-last{padding-top:10px}sky-repeater-item .sky-repeater-item.sky-repeater-item-active{background-color:#eeeeef;color:#212327;padding-left:6px;border-left:4px solid #00b4f1}sky-repeater-item .sky-repeater-item.sky-repeater-item-active .sky-inline-delete{margin-left:-4px;width:calc(100% + 4px)}sky-repeater-item .sky-repeater-item-left{display:flex;padding-top:10px;align-items:center}sky-repeater-item .sky-repeater-item-left sky-checkbox{display:flex}sky-repeater-item .sky-repeater-item-right{max-width:100%;flex-grow:1;align-self:center}sky-repeater-item .sky-repeater-item-header{align-items:center;display:flex;padding-top:10px}sky-repeater-item .sky-repeater-item-chevron{margin-left:10px}sky-repeater-item .sky-repeater-item-chevron-placeholder{height:24px}sky-repeater-item .sky-repeater-item-chevron-placeholder-with-context{height:29px}sky-repeater-item .sky-repeater-item-context-menu{padding:0 10px 0 0}sky-repeater-item .sky-repeater-item-checkbox{padding:0 5px 0 0}sky-repeater-item .sky-repeater-item-selected{background-color:#f1eef6;transition:background-color .15s}sky-repeater-item .sky-repeater-item-title{margin:0;flex-grow:1;line-height:1.1;color:#212327}sky-repeater-item sky-repeater-item-content{display:block;margin:10px 0 0}sky-repeater-item .sky-repeater-item-collapsible .sky-repeater-item-header{cursor:pointer}sky-repeater-item .sky-repeater-item-collapsible .sky-repeater-item-content{padding-right:34px}sky-repeater-item .sky-repeater-item-collapsed .sky-repeater-item-content{display:none}sky-repeater-item .sky-repeater-item-grab-handle{color:#cdcfd2;cursor:pointer;border:0;width:24px;height:24px;cursor:grab;cursor:-webkit-grab;cursor:-moz-grab;padding:0;margin:5px 10px 5px 0}sky-repeater-item .sky-repeater-item-grab-handle:hover{color:#979ba2;transition:color .15s}sky-repeater-item.sky-repeater-item-dragging.gu-mirror{opacity:initial;-ms-filter:initial;filter:initial;background-color:#fff;box-shadow:0 0 5px #0000004d}sky-repeater-item.sky-repeater-item-dragging.gu-transit .sky-repeater-item{background-color:#d8d8d8}sky-repeater-item.sky-repeater-item-dragging.gu-transit .sky-repeater-item .sky-repeater-item-left,sky-repeater-item.sky-repeater-item-dragging.gu-transit .sky-repeater-item .sky-repeater-item-right{visibility:hidden}sky-repeater-item.sky-repeater-item-dragging .sky-repeater-item-grab-handle{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}.sky-theme-modern .sky-split-view-drawer sky-repeater-item .sky-repeater-item{padding-left:var(--sky-padding-even-md)}.sky-theme-modern .sky-split-view-drawer sky-repeater-item .sky-repeater-item.sky-repeater-item-active{padding-left:calc(var(--sky-padding-even-md) - 4px)}.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:#fff;border-left-color:#1870b8}.sky-theme-modern sky-repeater-item .sky-repeater-item:focus-visible,.sky-theme-modern sky-repeater-item .sky-repeater-item:focus-visible:active{outline:solid 2px #1870B8;outline-offset:-2px}.sky-theme-modern sky-repeater-item .sky-repeater-item:focus-visible:not(:active){box-shadow:0 1px 8px #0000004d}.sky-theme-modern sky-repeater-item .sky-repeater-item-header[hidden]+.sky-repeater-item-content sky-repeater-item-content{margin:20px 0 0}.sky-theme-modern sky-repeater-item .sky-repeater-item-header,.sky-theme-modern sky-repeater-item .sky-repeater-item-left{padding-top:20px}.sky-theme-modern sky-repeater-item sky-inline-form .sky-slide-dissolve-last{padding-top:20px}.sky-theme-modern.sky-theme-mode-dark sky-repeater-item .sky-repeater-item{border-bottom-color:#686c73}.sky-theme-modern.sky-theme-mode-dark sky-repeater-item .sky-repeater-item.sky-repeater-item-active{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark sky-repeater-item .sky-repeater-item-title{color:#fbfcfe}\n"] }]
+            args: [{ selector: 'sky-repeater-item', animations: [skyAnimationSlide], providers: [SkyContentInfoProvider], encapsulation: ViewEncapsulation.None, standalone: false, template: "<div\n  #itemRef\n  class=\"sky-repeater-item sky-padding-even-default\"\n  [attr.aria-label]=\"itemName\"\n  [attr.aria-labelledby]=\"itemName || titleId\"\n  [attr.aria-selected]=\"selectable ? !!isSelected : undefined\"\n  [attr.role]=\"(itemRole$ | async)?.item\"\n  [attr.tabIndex]=\"tabindex\"\n  [ngClass]=\"{\n    'sky-repeater-item-active': isActive,\n    'sky-repeater-item-collapsible': isCollapsible,\n    'sky-repeater-item-selected': isSelected\n  }\"\n  (click)=\"onRepeaterItemClick($event)\"\n>\n  <div #inlineDelete>\n    <ng-content select=\"sky-inline-delete\" />\n  </div>\n\n  @if (inlineFormTemplate) {\n    <sky-inline-form\n      [config]=\"inlineFormConfig\"\n      [showForm]=\"showInlineForm\"\n      [template]=\"inlineFormTemplate\"\n      (close)=\"onInlineFormClose($event)\"\n    >\n      <ng-container *ngTemplateOutlet=\"skyRepeaterItemLeft\" />\n      <ng-container *ngTemplateOutlet=\"skyRepeaterItemRight\" />\n    </sky-inline-form>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"skyRepeaterItemLeft\" />\n    <ng-container *ngTemplateOutlet=\"skyRepeaterItemRight\" />\n  }\n</div>\n\n<ng-template #skyRepeaterItemLeft>\n  <div\n    class=\"sky-repeater-item-left\"\n    [attr.role]=\"!showInlineForm ? (itemRole$ | async)?.content : undefined\"\n  >\n    @if (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        #grabHandle\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      >\n        <sky-icon iconName=\"arrow-bidirectional-up-down\" />\n      </button>\n    }\n    @if (selectable) {\n      <sky-checkbox\n        class=\"sky-repeater-item-checkbox\"\n        [checked]=\"isSelected\"\n        [disabled]=\"disabled\"\n        [labelHidden]=\"true\"\n        [labelText]=\"\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    }\n    <div\n      #contextMenuEl\n      class=\"sky-repeater-item-context-menu\"\n      [hidden]=\"contextMenuEl.children.length === 0\"\n    >\n      <ng-content select=\"sky-repeater-item-context-menu\" />\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #skyRepeaterItemRight>\n  <div #itemHeaderRef class=\"sky-repeater-item-right\">\n    <div\n      class=\"sky-repeater-item-header\"\n      [attr.role]=\"(itemRole$ | async)?.title\"\n      [hidden]=\"titleRef.children.length === 0\"\n      (click)=\"headerClick()\"\n    >\n      <div\n        #titleRef\n        class=\"sky-repeater-item-title sky-font-emphasized\"\n        [attr.id]=\"titleId\"\n      >\n        <ng-content select=\"sky-repeater-item-title\" />\n      </div>\n      @if (reorderable) {\n        <button\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 iconName=\"arrow-up\" />\n          {{ 'skyux_repeater_item_reorder_top' | skyLibResources }}\n        </button>\n      }\n      @if (isCollapsible) {\n        <div class=\"sky-repeater-item-chevron\">\n          <sky-chevron\n            [ariaControls]=\"contentId\"\n            [ariaLabel]=\"\n              itemName\n                ? isExpanded\n                  ? ('skyux_repeater_item_expand' | skyLibResources: itemName)\n                  : ('skyux_repeater_item_collapse' | skyLibResources: itemName)\n                : isExpanded\n                  ? ('skyux_repeater_item_expand_default' | skyLibResources)\n                  : ('skyux_repeater_item_collapse_default' | skyLibResources)\n            \"\n            [direction]=\"isExpanded ? 'up' : 'down'\"\n            (directionChange)=\"chevronDirectionChange($event)\"\n          />\n        </div>\n      } @else if (!contextMenu) {\n        <!-- Used for when the chevron is hidden to ensure that the right side is the same height as the left.-->\n        <div class=\"sky-repeater-item-chevron-placeholder\"></div>\n      }\n      <!-- Used to ensure that the right side is the same height as the left.-->\n      @if (contextMenu) {\n        <div class=\"sky-repeater-item-chevron-placeholder-with-context\"></div>\n      }\n    </div>\n    <div\n      #itemContentRef\n      class=\"sky-repeater-item-content\"\n      [id]=\"contentId\"\n      [@.disabled]=\"animationDisabled\"\n      [@skyAnimationSlide]=\"slideDirection\"\n      [attr.role]=\"(itemRole$ | async)?.content\"\n    >\n      <ng-content select=\"sky-repeater-item-content\" />\n    </div>\n  </div>\n</ng-template>\n", styles: ["sky-repeater-item .sky-repeater-item{display:flex;border-bottom:1px dotted #cdcfd2;padding-top:0;position:relative;transition:box-shadow .15s;align-items:flex-start}sky-repeater-item .sky-repeater-item sky-inline-form{display:block;width:100%}sky-repeater-item .sky-repeater-item sky-inline-form>:first-child,sky-repeater-item .sky-repeater-item sky-inline-form .sky-slide-dissolve-first,sky-repeater-item .sky-repeater-item sky-inline-form .sky-slide-dissolve-last{display:flex;align-items:flex-start;flex:1 0 auto;width:100%}sky-repeater-item .sky-repeater-item sky-inline-form .sky-slide-dissolve-last{padding-top:10px}sky-repeater-item .sky-repeater-item.sky-repeater-item-active{background-color:#eeeeef;color:#212327;padding-left:6px;border-left:4px solid #00b4f1}sky-repeater-item .sky-repeater-item.sky-repeater-item-active .sky-inline-delete{margin-left:-4px;width:calc(100% + 4px)}sky-repeater-item .sky-repeater-item-left{display:flex;padding-top:10px;align-items:center}sky-repeater-item .sky-repeater-item-left sky-checkbox{display:flex}sky-repeater-item .sky-repeater-item-right{max-width:100%;flex-grow:1;align-self:center}sky-repeater-item .sky-repeater-item-header{align-items:center;display:flex;padding-top:10px}sky-repeater-item .sky-repeater-item-chevron{margin-left:10px}sky-repeater-item .sky-repeater-item-chevron-placeholder{height:24px}sky-repeater-item .sky-repeater-item-chevron-placeholder-with-context{height:29px}sky-repeater-item .sky-repeater-item-context-menu{padding:0 10px 0 0}sky-repeater-item .sky-repeater-item-checkbox{padding:0 5px 0 0}sky-repeater-item .sky-repeater-item-selected{background-color:#f1eef6;transition:background-color .15s}sky-repeater-item .sky-repeater-item-title{margin:0;flex-grow:1;line-height:1.1;color:#212327}sky-repeater-item sky-repeater-item-content{display:block;margin:10px 0 0}sky-repeater-item .sky-repeater-item-collapsible .sky-repeater-item-header{cursor:pointer}sky-repeater-item .sky-repeater-item-collapsible .sky-repeater-item-content{padding-right:34px}sky-repeater-item .sky-repeater-item-collapsed .sky-repeater-item-content{display:none}sky-repeater-item .sky-repeater-item-grab-handle{color:#686c73;cursor:pointer;border:0;width:24px;height:24px;cursor:grab;cursor:-webkit-grab;cursor:-moz-grab;padding:0;margin:5px 10px 5px 0}sky-repeater-item .sky-repeater-item-grab-handle:hover{color:#383a3d;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:-moz-grabbing;cursor:-webkit-grabbing}.sky-theme-modern .sky-split-view-drawer sky-repeater-item .sky-repeater-item{padding-left:var(--sky-padding-even-md)}.sky-theme-modern .sky-split-view-drawer sky-repeater-item .sky-repeater-item.sky-repeater-item-active{padding-left:calc(var(--sky-padding-even-md) - 4px)}.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:#fff;border-left-color:#1870b8}.sky-theme-modern sky-repeater-item .sky-repeater-item:focus-visible,.sky-theme-modern sky-repeater-item .sky-repeater-item:focus-visible:active{outline:solid 2px #1870B8;outline-offset:-2px}.sky-theme-modern sky-repeater-item .sky-repeater-item:focus-visible:not(:active){box-shadow:0 1px 8px #0000004d}.sky-theme-modern sky-repeater-item .sky-repeater-item-header[hidden]+.sky-repeater-item-content sky-repeater-item-content{margin:20px 0 0}.sky-theme-modern sky-repeater-item .sky-repeater-item-header,.sky-theme-modern sky-repeater-item .sky-repeater-item-left{padding-top:20px}.sky-theme-modern sky-repeater-item sky-inline-form .sky-slide-dissolve-last{padding-top:20px}.sky-theme-modern.sky-theme-mode-dark sky-repeater-item .sky-repeater-item{border-bottom-color:#686c73}.sky-theme-modern.sky-theme-mode-dark sky-repeater-item .sky-repeater-item.sky-repeater-item-active{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark sky-repeater-item .sky-repeater-item-title{color:#fbfcfe}\n"] }]
         }], ctorParameters: () => [{ type: SkyRepeaterService }, { type: i0.ChangeDetectorRef }, { type: SkyRepeaterAdapterService }, { type: i0.ElementRef }, { type: i3.SkyLibResourcesService }], propDecorators: { disabled: [{
                 type: Input
             }], itemName: [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyux/lists",
-  "version": "12.2.0",
+  "version": "12.4.0",
   "author": "Blackbaud, Inc.",
   "keywords": [
     "blackbaud",
@@ -20,16 +20,16 @@
     "@angular/common": "^19.2.1",
     "@angular/core": "^19.2.1",
     "@angular/platform-browser": "^19.2.1",
-    "@skyux-sdk/testing": "12.2.0",
-    "@skyux/animations": "12.2.0",
-    "@skyux/core": "12.2.0",
-    "@skyux/forms": "12.2.0",
-    "@skyux/i18n": "12.2.0",
-    "@skyux/icon": "12.2.0",
-    "@skyux/indicators": "12.2.0",
-    "@skyux/inline-form": "12.2.0",
-    "@skyux/popovers": "12.2.0",
-    "@skyux/theme": "12.2.0"
+    "@skyux-sdk/testing": "12.4.0",
+    "@skyux/animations": "12.4.0",
+    "@skyux/core": "12.4.0",
+    "@skyux/forms": "12.4.0",
+    "@skyux/i18n": "12.4.0",
+    "@skyux/icon": "12.4.0",
+    "@skyux/indicators": "12.4.0",
+    "@skyux/inline-form": "12.4.0",
+    "@skyux/popovers": "12.4.0",
+    "@skyux/theme": "12.4.0"
   },
   "dependencies": {
     "@types/dragula": "2.1.36",