@skyux/lists 15.0.0-alpha.2 → 15.0.0-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,7 +1,7 @@
1
1
  import * as i1 from '@angular/common';
2
2
  import { CommonModule } from '@angular/common';
3
3
  import * as i0 from '@angular/core';
4
- import { NgModule, EventEmitter, inject, Output, Input, ChangeDetectionStrategy, Component, Injectable, ChangeDetectorRef, ElementRef, input, computed, ViewChild, HostListener, ContentChildren, ContentChild, HostBinding, ViewEncapsulation, Injector, Renderer2, afterNextRender, TemplateRef } from '@angular/core';
4
+ import { NgModule, EventEmitter, inject, Output, Input, ChangeDetectionStrategy, Component, Injectable, ChangeDetectorRef, ElementRef, input, computed, ViewChild, signal, HostListener, ContentChildren, ContentChild, HostBinding, ViewEncapsulation, Injector, Renderer2, effect, untracked, afterNextRender, TemplateRef } from '@angular/core';
5
5
  import * as i2 from '@skyux/icon';
6
6
  import { SkyIconModule } from '@skyux/icon';
7
7
  import * as i1$1 from '@skyux/indicators';
@@ -11,7 +11,7 @@ import { SkyThemeComponentClassDirective, SkyThemeModule } from '@skyux/theme';
11
11
  import * as i2$1 from '@skyux/i18n';
12
12
  import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
13
13
  import * as i2$2 from '@skyux/core';
14
- import { SkyContentInfoProvider, SkyScrollableHostService, SkyAppWindowRef, SkyNumericModule, SkyIdService, SkyLogService, SkyIdModule, _SkyAnimationSlideComponent } from '@skyux/core';
14
+ import { SkyContentInfoProvider, SkyScrollableHostService, SkyAppWindowRef, SkyNumericModule, SkyLogService, SkyIdService, SkyIdModule, _SkyAnimationSlideComponent } from '@skyux/core';
15
15
  import { Subject, fromEvent, BehaviorSubject, forkJoin } from 'rxjs';
16
16
  import { takeUntil, filter, map, delay } from 'rxjs/operators';
17
17
  import * as i1$3 from '@angular/cdk/observers';
@@ -822,7 +822,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
822
822
 
823
823
  /**
824
824
  * Wraps and styles a
825
- * [`sky-dropdown` component](https://developer.blackbaud.com/skyux-popovers/docs/dropdown).
825
+ * [`sky-dropdown` component](https://developer.blackbaud.com/skyux/components/dropdown).
826
826
  */
827
827
  /* istanbul ignore next */
828
828
  /* Code coverage having problems with no statements in classes */
@@ -849,6 +849,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
849
849
 
850
850
  let uniqueId = 0;
851
851
  const DEFAULT_EXPAND_MODE = 'none';
852
+ const DEFAULT_SELECTION_MODE = 'none';
852
853
  /**
853
854
  * @internal
854
855
  */
@@ -858,6 +859,7 @@ class SkyRepeaterService {
858
859
  this.activeItemIndexChange = new BehaviorSubject(undefined);
859
860
  this.enableActiveState = false;
860
861
  this.itemCollapseStateChange = new EventEmitter();
862
+ this.itemSelectStateChange = new EventEmitter();
861
863
  this.items = [];
862
864
  this.itemRole = new BehaviorSubject({
863
865
  content: undefined,
@@ -866,6 +868,8 @@ class SkyRepeaterService {
866
868
  });
867
869
  this.orderChange = new BehaviorSubject(undefined);
868
870
  this.repeaterGroupId = ++uniqueId;
871
+ this.selectionMode = signal(DEFAULT_SELECTION_MODE, /* @ts-ignore */
872
+ ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
869
873
  this.#_expandMode = DEFAULT_EXPAND_MODE;
870
874
  }
871
875
  // TODO: Remove 'string' as a valid type in a breaking change.
@@ -879,6 +883,7 @@ class SkyRepeaterService {
879
883
  ngOnDestroy() {
880
884
  this.activeItemChange.complete();
881
885
  this.itemCollapseStateChange.complete();
886
+ this.itemSelectStateChange.complete();
882
887
  this.orderChange.complete();
883
888
  }
884
889
  activateItem(item) {
@@ -917,6 +922,9 @@ class SkyRepeaterService {
917
922
  onItemCollapseStateChange(item) {
918
923
  this.itemCollapseStateChange.emit(item);
919
924
  }
925
+ onItemSelectStateChange(item) {
926
+ this.itemSelectStateChange.emit(item);
927
+ }
920
928
  registerOrderChange() {
921
929
  this.orderChange.next();
922
930
  }
@@ -1008,9 +1016,14 @@ class SkyRepeaterItemComponent {
1008
1016
  * Make the first, non-disabled item tab-focusable in a selectable repeater.
1009
1017
  * - Disabled items should not be focusable per [W3C](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols).
1010
1018
  * - One item per grid should be tab focusable per [W3C](https://www.w3.org/WAI/ARIA/apg/patterns/grid/).
1019
+ * - In a single-select repeater, the tab-focusable item is the selected item, or the
1020
+ * first non-disabled item when nothing is selected, per [W3C](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/).
1011
1021
  */
1012
1022
  get tabindex() {
1013
- return this.#repeaterService.items.find((item) => !item.disabled && this.selectable) === this
1023
+ if (this.#repeaterService.selectionMode() === 'single') {
1024
+ return this.#singleSelectTabbableItem() === this ? 0 : -1;
1025
+ }
1026
+ return this.#repeaterService.items.find((item) => !item.disabled && this.showCheckbox()) === this
1014
1027
  ? 0
1015
1028
  : -1;
1016
1029
  }
@@ -1018,13 +1031,16 @@ class SkyRepeaterItemComponent {
1018
1031
  * Whether to disable a selectable repeater item.
1019
1032
  */
1020
1033
  set disabled(value) {
1021
- if (this.#_isDisabled !== value) {
1034
+ if (this.#_isDisabled() !== value) {
1022
1035
  if (value) {
1036
+ // Deselect before setting the disabled flag; the `isSelected` setter
1037
+ // rejects changes once `disabled` is `true`, so this ordering is what
1038
+ // keeps a disabled item from remaining selected.
1023
1039
  this.isSelected = false;
1024
- this.#_isDisabled = true;
1040
+ this.#_isDisabled.set(true);
1025
1041
  }
1026
1042
  else {
1027
- this.#_isDisabled = false;
1043
+ this.#_isDisabled.set(false);
1028
1044
  }
1029
1045
  if (this.isActive) {
1030
1046
  this.#repeaterService.activateItemByIndex(undefined);
@@ -1036,7 +1052,7 @@ class SkyRepeaterItemComponent {
1036
1052
  }
1037
1053
  }
1038
1054
  get disabled() {
1039
- return this.#_isDisabled;
1055
+ return this.#_isDisabled();
1040
1056
  }
1041
1057
  /**
1042
1058
  * The human-readable name for the repeater item that is available for multiple purposes,
@@ -1064,18 +1080,39 @@ class SkyRepeaterItemComponent {
1064
1080
  return this.#isExpanded;
1065
1081
  }
1066
1082
  /**
1067
- * Whether the repeater item's checkbox is selected.
1083
+ * Whether the repeater item is selected, either via its own checkbox or via the
1084
+ * repeater's `selectionMode` property.
1068
1085
  * When users select the repeater item, the specified property on your model is updated accordingly.
1069
1086
  * @default false
1070
1087
  */
1071
1088
  set isSelected(value) {
1072
- if (!this.disabled && value !== this.#_isSelected) {
1073
- this.#_isSelected = value;
1074
- this.isSelectedChange.emit(this.#_isSelected);
1089
+ if (!this.disabled && value !== this.#_isSelected()) {
1090
+ this.#_isSelected.set(value);
1091
+ this.isSelectedChange.emit(value);
1092
+ this.#repeaterService.onItemSelectStateChange(this);
1075
1093
  }
1076
1094
  }
1077
1095
  get isSelected() {
1078
- return this.#_isSelected;
1096
+ return this.#_isSelected();
1097
+ }
1098
+ /**
1099
+ * Whether to display a checkbox in the left of the repeater item. This property
1100
+ * never displays a checkbox when the repeater's `selectionMode` property is set
1101
+ * to `single`.
1102
+ * @deprecated Set the repeater's `selectionMode` property to `multiple` instead.
1103
+ */
1104
+ set selectable(value) {
1105
+ if (value && !this.#selectableDeprecationWarned) {
1106
+ this.#selectableDeprecationWarned = true;
1107
+ this.#logSvc.deprecated('SkyRepeaterItemComponent.selectable', {
1108
+ deprecationMajorVersion: 15,
1109
+ replacementRecommendation: "Set the repeater's `selectionMode` property to `multiple` instead.",
1110
+ });
1111
+ }
1112
+ this.#_selectable.set(value);
1113
+ }
1114
+ get selectable() {
1115
+ return this.#_selectable();
1079
1116
  }
1080
1117
  set isCollapsible(value) {
1081
1118
  if (this.isCollapsible !== value) {
@@ -1101,9 +1138,11 @@ class SkyRepeaterItemComponent {
1101
1138
  #changeDetector;
1102
1139
  #contentInfoProvider;
1103
1140
  #elementRef;
1141
+ #logSvc;
1104
1142
  #isExpanded;
1105
1143
  #keyboardReorderingEnabled;
1106
1144
  #ngUnsubscribe;
1145
+ #selectableDeprecationWarned;
1107
1146
  #reorderCancelText;
1108
1147
  #reorderCurrentIndex;
1109
1148
  #reorderFinishText;
@@ -1118,18 +1157,45 @@ class SkyRepeaterItemComponent {
1118
1157
  #_isDisabled;
1119
1158
  #_isSelected;
1120
1159
  #_itemName;
1160
+ #_selectable;
1121
1161
  #idSvc;
1122
1162
  constructor() {
1163
+ /**
1164
+ * The `aria-selected` value to render for this item. In a single-select repeater,
1165
+ * every item receives `true` or `false` since the item's role is `option`, which
1166
+ * requires `aria-selected` to be explicitly set on all options.
1167
+ */
1168
+ this.ariaSelected = computed(() => {
1169
+ if (this.isSelectionModeSingle()) {
1170
+ return !!this.#_isSelected();
1171
+ }
1172
+ return this.showCheckbox() ? !!this.#_isSelected() : undefined;
1173
+ }, /* @ts-ignore */
1174
+ ...(ngDevMode ? [{ debugName: "ariaSelected" }] : /* istanbul ignore next */ []));
1175
+ this.isSelectionModeSingle = computed(() => this.#repeaterService.selectionMode() === 'single', /* @ts-ignore */
1176
+ ...(ngDevMode ? [{ debugName: "isSelectionModeSingle" }] : /* istanbul ignore next */ []));
1177
+ /**
1178
+ * Whether to render a selection checkbox for this item, either via the repeater's
1179
+ * `selectionMode` property set to `multiple` or via the item's deprecated
1180
+ * `selectable` property.
1181
+ */
1182
+ this.showCheckbox = computed(() => !!this.#_selectable() ||
1183
+ this.#repeaterService.selectionMode() === 'multiple', /* @ts-ignore */
1184
+ ...(ngDevMode ? [{ debugName: "showCheckbox" }] : /* istanbul ignore next */ []));
1185
+ /**
1186
+ * The `aria-disabled` value to render for this item. In a single-select repeater,
1187
+ * the item's row is the entire selection control (there is no separate checkbox), so it
1188
+ * needs its own ARIA-equivalent indication that it cannot be selected. Multi-select items
1189
+ * convey this via the checkbox's own `disabled` state instead.
1190
+ */
1191
+ this.ariaDisabled = computed(() => this.isSelectionModeSingle() && this.#_isDisabled() ? true : undefined, /* @ts-ignore */
1192
+ ...(ngDevMode ? [{ debugName: "ariaDisabled" }] : /* istanbul ignore next */ []));
1123
1193
  /**
1124
1194
  * Whether users can change the order of the repeater item.
1125
1195
  * The repeater component's `reorderable` property must also be set to `true`.
1126
1196
  * @internal
1127
1197
  */
1128
1198
  this.reorderable = false;
1129
- /**
1130
- * Whether to display a checkbox in the left of the repeater item.
1131
- */
1132
- this.selectable = false;
1133
1199
  /**
1134
1200
  * Whether to display an inline form within the repeater.
1135
1201
  * Users can toggle between displaying and hiding the inline form.
@@ -1159,9 +1225,11 @@ class SkyRepeaterItemComponent {
1159
1225
  this.#changeDetector = inject(ChangeDetectorRef);
1160
1226
  this.#contentInfoProvider = inject(SkyContentInfoProvider);
1161
1227
  this.#elementRef = inject(ElementRef);
1228
+ this.#logSvc = inject(SkyLogService);
1162
1229
  this.#isExpanded = true;
1163
1230
  this.#keyboardReorderingEnabled = false;
1164
1231
  this.#ngUnsubscribe = new Subject();
1232
+ this.#selectableDeprecationWarned = false;
1165
1233
  this.#reorderCancelText = '';
1166
1234
  this.#reorderCurrentIndex = -1;
1167
1235
  this.#reorderFinishText = '';
@@ -1172,7 +1240,12 @@ class SkyRepeaterItemComponent {
1172
1240
  this.#repeaterService = inject(SkyRepeaterService);
1173
1241
  this.#resourceService = inject(SkyLibResourcesService);
1174
1242
  this.#_isCollapsible = true;
1175
- this.#_isDisabled = false;
1243
+ this.#_isDisabled = signal(false, /* @ts-ignore */
1244
+ ...(ngDevMode ? [{ debugName: "#_isDisabled" }] : /* istanbul ignore next */ []));
1245
+ this.#_isSelected = signal(undefined, /* @ts-ignore */
1246
+ ...(ngDevMode ? [{ debugName: "#_isSelected" }] : /* istanbul ignore next */ []));
1247
+ this.#_selectable = signal(false, /* @ts-ignore */
1248
+ ...(ngDevMode ? [{ debugName: "#_selectable" }] : /* istanbul ignore next */ []));
1176
1249
  this.#idSvc = inject(SkyIdService);
1177
1250
  this.#slideForExpanded();
1178
1251
  forkJoin([
@@ -1229,7 +1302,10 @@ class SkyRepeaterItemComponent {
1229
1302
  let activateItem = undefined;
1230
1303
  /* istanbul ignore else */
1231
1304
  if ([' ', 'Enter'].includes($event.key)) {
1232
- if (this.selectable) {
1305
+ if (this.isSelectionModeSingle()) {
1306
+ this.isSelected = true;
1307
+ }
1308
+ else if (this.showCheckbox()) {
1233
1309
  this.isSelected = !this.isSelected;
1234
1310
  }
1235
1311
  // eslint-disable-next-line @typescript-eslint/no-this-alias
@@ -1306,10 +1382,7 @@ class SkyRepeaterItemComponent {
1306
1382
  if (this.#isEventTargetInteractiveElement(event)) {
1307
1383
  return;
1308
1384
  }
1309
- if (this.selectable &&
1310
- event.target.matches('.sky-repeater-item, .sky-repeater-item-right, sky-repeater-item-content')) {
1311
- this.isSelected = !this.isSelected;
1312
- }
1385
+ this.#selectOnClick(event);
1313
1386
  }
1314
1387
  }
1315
1388
  updateForExpanded(value) {
@@ -1401,6 +1474,24 @@ class SkyRepeaterItemComponent {
1401
1474
  this.reorderButtonLabel = this.#reorderInstructions;
1402
1475
  this.reorderState = undefined;
1403
1476
  }
1477
+ #isEventTargetWithinInteractiveDescendant($event) {
1478
+ return !!$event.target.closest('button, a[href], input, textarea, select, label, [contenteditable], sky-dropdown');
1479
+ }
1480
+ #selectOnClick(event) {
1481
+ if (this.isSelectionModeSingle()) {
1482
+ if (!this.#isEventTargetWithinInteractiveDescendant(event)) {
1483
+ this.isSelected = true;
1484
+ }
1485
+ }
1486
+ else if (this.showCheckbox() &&
1487
+ event.target.matches('.sky-repeater-item, .sky-repeater-item-right, sky-repeater-item-content')) {
1488
+ this.isSelected = !this.isSelected;
1489
+ }
1490
+ }
1491
+ #singleSelectTabbableItem() {
1492
+ const enabledItems = this.#repeaterService.items.filter((item) => !item.disabled);
1493
+ return enabledItems.find((item) => item.isSelected) ?? enabledItems[0];
1494
+ }
1404
1495
  #isEventTargetInteractiveElement($event) {
1405
1496
  return $event.target.matches('input, textarea, select, option, [contenteditable], [contenteditable] *');
1406
1497
  }
@@ -1486,11 +1577,11 @@ class SkyRepeaterItemComponent {
1486
1577
  });
1487
1578
  }
1488
1579
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyRepeaterItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1489
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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-theme-padding-inset-balanced-s\"\n [attr.aria-label]=\"itemName\"\n [attr.aria-labelledby]=\"itemName ? undefined : 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-selectable': selectable,\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 <div class=\"sky-repeater-item-inline-form-contents\">\n <ng-container *ngTemplateOutlet=\"skyRepeaterItemLeft\" />\n <ng-container *ngTemplateOutlet=\"skyRepeaterItemRight\" />\n </div>\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-btn-icon-borderless 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 <!-- Used to ensure that the right side is the same height as the left by placeholding the size of the back to top button.-->\n <div class=\"sky-repeater-item-top-button-placeholder\"></div>\n }\n @if (selectable) {\n <sky-checkbox\n class=\"sky-repeater-item-checkbox\"\n [checked]=\"isSelected\"\n [disabled]=\"disabled\"\n [id]=\"contentId + '-item-checkbox'\"\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 [attr.role]=\"(itemRole$ | async)?.content\"\n >\n <sky-animation-slide [opened]=\"slideDirection === 'down'\">\n <ng-content select=\"sky-repeater-item-content\" />\n </sky-animation-slide>\n </div>\n </div>\n</ng-template>\n", styles: [".sky-repeater-item:not(.sky-theme-modern *){--sky-override-repeater-item-active-background-color: #eeeeef;--sky-override-repeater-item-active-border-left-color: #00b4f1;--sky-override-repeater-item-active-border-left-width: 4px;--sky-override-repeater-item-active-inline-delete-margin-left: -4px;--sky-override-repeater-item-active-padding-left: 6px;--sky-override-repeater-item-background-color: transparent;--sky-override-repeater-item-border-bottom: 1px dotted #cdcfd2;--sky-override-repeater-item-border-radius: 0;--sky-override-repeater-item-checkbox-margin: 0;--sky-override-repeater-item-checkbox-padding-right: 5px;--sky-override-repeater-item-chevron-margin-left: 10px;--sky-override-repeater-item-chevron-placeholder-height: 24px;--sky-override-repeater-item-chevron-with-context-placeholder-height: 29px;--sky-override-repeater-item-content-collapsible-padding-right: 34px;--sky-override-repeater-item-content-margin-top: 10px;--sky-override-repeater-item-context-menu-padding-right: 10px;--sky-override-repeater-item-content-no-header-margin-top: 10px;--sky-override-repeater-item-dragging-background-color: #fff;--sky-override-repeater-item-dragging-background-color-static: #d8d8d8;--sky-override-repeater-item-dragging-box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, .3);--sky-override-repeater-item-grab-handle-box-shadow-active: none;--sky-override-repeater-item-grab-handle-box-shadow-hover: none;--sky-override-repeater-item-grab-handle-color-hover: rgb(55.5616438356, 57.698630137, 61.4383561644);--sky-override-repeater-item-grab-handle-margin-right: 10px;--sky-override-repeater-item-grab-handle-margin-vertical: 5px;--sky-override-repeater-item-grab-handle-padding: 0;--sky-override-repeater-item-grab-handle-size: 24px;--sky-override-repeater-item-outline-focus-visible: auto;--sky-override-repeater-item-padding: 10px;--sky-override-repeater-item-reorder-top-margin-left: 0;--sky-override-repeater-item-selectable-background-color-active: transparent;--sky-override-repeater-item-selectable-box-shadow-active: none;--sky-override-repeater-item-selectable-box-shadow-focus: none;--sky-override-repeater-item-selectable-box-shadow-hover: none;--sky-override-repeater-item-selected-color: var( --sky-background-color-selected );--sky-override-repeater-item-selection-modal-background-color-hover: var( --sky-background-color-selected );--sky-override-repeater-item-selection-modal-box-shadow-hover: none;--sky-override-repeater-item-single-select-background-color: var( --sky-background-color-selected );--sky-override-repeater-item-single-select-border-left-color: transparent;--sky-override-repeater-item-single-select-border-left-width: 0;--sky-override-repeater-item-single-select-inline-delete-margin-left: 0;--sky-override-repeater-item-single-select-padding-left: 10px;--sky-override-repeater-item-split-view-active-background-color-active: #eeeeef;--sky-override-repeater-item-split-view-background-color-active: transparent;--sky-override-repeater-item-split-view-box-shadow-active: none;--sky-override-repeater-item-split-view-box-shadow-focus: none;--sky-override-repeater-item-split-view-box-shadow-hover: none;--sky-override-repeater-item-title-line-height: 1.1;--sky-override-repeater-item-top-button-placeholder-height: 0;--sky-override-repeater-item-left-no-header-padding-top: 10px}sky-repeater-item .sky-repeater-item{display:flex;background-color:var(--sky-override-repeater-item-background-color, var(--sky-color-background-row-base));border-bottom:var(--sky-override-repeater-item-border-bottom, var(--sky-border-width-separator-row) var(--sky-border-style-separator-row) var(--sky-color-border-separator-row));border-radius:var(--sky-override-repeater-item-border-radius, var(--sky-border-radius-xs));padding:var(--sky-override-repeater-item-padding, var(--sky-comp-repeater_item-space-inset-top) var(--sky-comp-repeater_item-space-inset-right) var(--sky-comp-repeater_item-space-inset-bottom) var(--sky-comp-repeater_item-space-inset-left));position:relative;transition:box-shadow var(--sky-global-duration-short);align-items:flex-start}sky-repeater-item .sky-repeater-item:focus-visible,sky-repeater-item .sky-repeater-item:focus-visible:active{outline:var(--sky-override-repeater-item-outline-focus-visible, none);outline-offset:0}sky-repeater-item .sky-repeater-item:focus-visible:not(:active){box-shadow:none}sky-repeater-item .sky-repeater-item sky-inline-form{display:block;width:100%}sky-repeater-item .sky-repeater-item sky-inline-form .sky-repeater-item-inline-form-contents{display:flex;align-items:flex-start;flex:1 0 auto;width:100%}sky-repeater-item .sky-repeater-item.sky-repeater-item-active{background-color:var(--sky-override-repeater-item-active-background-color, var(--sky-color-background-selected-soft));padding-left:var(--sky-override-repeater-item-active-padding-left, calc(var(--sky-comp-repeater_item-space-inset-left) - var(--sky-border-width-selected-m)));border-left:var(--sky-override-repeater-item-active-border-left-width, var(--sky-border-width-selected-m)) solid var(--sky-override-repeater-item-active-border-left-color, var(--sky-color-border-selected))}sky-repeater-item .sky-repeater-item.sky-repeater-item-active .sky-inline-delete{margin-left:var(--sky-override-repeater-item-active-inline-delete-margin-left, calc((var(--sky-comp-repeater_item-space-inset-left) - var(--sky-border-width-selected-m)) * -1));width:calc(100% + var(--sky-override-repeater-item-active-border-left-width, var(--sky-border-width-selected-m)))}sky-repeater-item .sky-repeater-item.sky-repeater-item-selected:not(.sky-repeater-item-selectable){background-color:var(--sky-override-repeater-item-single-select-background-color, var(--sky-color-background-selected-soft));padding-left:var(--sky-override-repeater-item-single-select-padding-left, calc(var(--sky-comp-repeater_item-space-inset-left) - var(--sky-border-width-selected-m)));border-left:var(--sky-override-repeater-item-single-select-border-left-width, var(--sky-border-width-selected-m)) solid var(--sky-override-repeater-item-single-select-border-left-color, var(--sky-color-border-selected))}sky-repeater-item .sky-repeater-item.sky-repeater-item-selected:not(.sky-repeater-item-selectable) .sky-inline-delete{margin-left:var(--sky-override-repeater-item-single-select-inline-delete-margin-left, calc((var(--sky-comp-repeater_item-space-inset-left) - var(--sky-border-width-selected-m)) * -1));width:calc(100% + var(--sky-override-repeater-item-single-select-border-left-width, var(--sky-border-width-selected-m)))}sky-repeater-item .sky-repeater-item:has(.sky-repeater-item-header[hidden]+.sky-repeater-item-content){padding-top:0}sky-repeater-item .sky-repeater-item:has(.sky-repeater-item-header[hidden]+.sky-repeater-item-content) .sky-repeater-item-left{padding-top:var(--sky-override-repeater-item-left-no-header-padding-top, var(--sky-comp-repeater_item-space-inset-top))}sky-repeater-item .sky-repeater-item-header[hidden]+.sky-repeater-item-content sky-repeater-item-content{margin-top:var(--sky-override-repeater-item-content-no-header-margin-top, var(--sky-comp-repeater_item-space-inset-top))}sky-repeater-item .sky-repeater-item-left{display:flex;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}sky-repeater-item .sky-repeater-item-chevron{margin-left:var(--sky-override-repeater-item-chevron-margin-left, var(--sky-space-gap-text_action-s))}sky-repeater-item .sky-repeater-item-reorder-top{margin-left:var(--sky-override-repeater-item-reorder-top-margin-left, var(--sky-space-gap-text_action-s))}sky-repeater-item .sky-repeater-item-chevron-placeholder{height:var(--sky-override-repeater-item-chevron-placeholder-height, max(var(--sky-size-switch), var(--sky-comp-button-borderless-space-inset-bottom) + var(--sky-comp-button-borderless-space-inset-top) + var(--sky-size-icon-m)))}sky-repeater-item .sky-repeater-item-chevron-placeholder-with-context{height:var(--sky-override-repeater-item-chevron-with-context-placeholder-height, max(var(--sky-size-switch), var(--sky-comp-button-borderless-space-inset-bottom) + var(--sky-comp-button-borderless-space-inset-top) + var(--sky-size-icon-m)))}sky-repeater-item .sky-repeater-item-top-button-placeholder{height:var(--sky-override-repeater-item-top-button-placeholder-height, calc(var(--sky-comp-button-space-inset-bottom) + var(--sky-comp-button-space-inset-top) + var(--sky-font-line_height-body-m) * var(--sky-font-size-body-m)))}sky-repeater-item .sky-repeater-item-context-menu{padding:0 var(--sky-override-repeater-item-context-menu-padding-right, var(--sky-space-gap-action_group-m)) 0 0}sky-repeater-item .sky-repeater-item-checkbox{padding:0 var(--sky-override-repeater-item-checkbox-padding-right, var(--sky-space-gap-action_group-s)) 0 0;margin:var(--sky-override-repeater-item-checkbox-margin, var(--sky-comp-repeater_item-checkbox-space-offset-top) var(--sky-comp-repeater_item-checkbox-space-offset-right) var(--sky-comp-repeater_item-checkbox-space-offset-bottom) var(--sky-comp-repeater_item-checkbox-space-offset-left))}sky-repeater-item .sky-repeater-item-selectable,sky-repeater-item .sky-repeater-item-selectable sky-repeater-item-content>label{cursor:pointer}sky-repeater-item .sky-repeater-item-selectable .sky-repeater-item-left,sky-repeater-item .sky-repeater-item-selectable sky-repeater-item-content>*:not(label){cursor:initial}sky-repeater-item .sky-repeater-item-selectable:hover{box-shadow:var(--sky-override-repeater-item-selectable-box-shadow-hover, inset 0 0 0 var(--sky-border-width-input-hover) var(--sky-color-border-input-hover))}sky-repeater-item .sky-repeater-item-selectable:active:not(.sky-repeater-item-selected){background-color:var(--sky-override-repeater-item-selectable-background-color-active, var(--sky-color-background-selected-soft))}sky-repeater-item .sky-repeater-item-selectable:active{box-shadow:var(--sky-override-repeater-item-selectable-box-shadow-active, inset 0 0 0 var(--sky-border-width-input-active) var(--sky-color-border-input-active))}sky-repeater-item .sky-repeater-item-selectable:focus-visible:not(:active){box-shadow:var(--sky-override-repeater-item-selectable-box-shadow-focus, inset 0 0 0 var(--sky-border-width-input-focus) var(--sky-color-border-input-focus))}sky-repeater-item .sky-repeater-item-selected{background-color:var(--sky-override-repeater-item-selected-color, var(--sky-color-background-selected-soft));transition:background-color var(--sky-global-duration-short)}sky-repeater-item .sky-repeater-item-title{margin:0;flex-grow:1;line-height:var(--sky-override-repeater-item-title-line-height, var(--sky-font-line_height-body-m))}sky-repeater-item sky-repeater-item-content{display:block;margin:var(--sky-override-repeater-item-content-margin-top, var(--sky-space-stacked-s)) 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:var(--sky-override-repeater-item-content-collapsible-padding-right, calc(var(--sky-comp-button-borderless-space-inset-bottom) + var(--sky-comp-button-borderless-space-inset-top) + var(--sky-size-icon-s) + var(--sky-space-gap-text_action-s)))}sky-repeater-item .sky-repeater-item-collapsed .sky-repeater-item-content{display:none}sky-repeater-item .sky-repeater-item-grab-handle{cursor:grab;cursor:-webkit-grab;cursor:-moz-grab;margin:var(--sky-override-repeater-item-grab-handle-margin-vertical, 0) var(--sky-override-repeater-item-grab-handle-margin-right, var(--sky-space-gap-action_group-m)) var(--sky-override-repeater-item-grab-handle-margin-vertical, 0) 0}sky-repeater-item .sky-repeater-item-grab-handle.sky-btn-icon-borderless{height:var(--sky-override-repeater-item-grab-handle-size, \"\");padding:var(--sky-override-repeater-item-grab-handle-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left));width:var(--sky-override-repeater-item-grab-handle-size, \"\")}sky-repeater-item .sky-repeater-item-grab-handle.sky-btn-icon-borderless:active{box-shadow:var(--sky-override-repeater-item-grab-handle-box-shadow-active, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}sky-repeater-item .sky-repeater-item-grab-handle.sky-btn-icon-borderless:hover{color:var(--sky-override-repeater-item-grab-handle-color-hover, var(--sky-color-icon-deemphasized));box-shadow:var(--sky-override-repeater-item-grab-handle-box-shadow-hover, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover))}sky-repeater-item.sky-repeater-item-dragging .sky-repeater-item-grab-handle{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}.hover-rows .sky-repeater-item{cursor:pointer}.hover-rows .sky-repeater-item:hover{background-color:var(--sky-override-repeater-item-selection-modal-background-color-hover);box-shadow:var(--sky-override-repeater-item-selection-modal-box-shadow-hover, inset 0 0 0 var(--sky-border-width-input-hover) var(--sky-color-border-input-hover))}.sky-split-view-drawer sky-repeater-item .sky-repeater-item:hover{box-shadow:var(--sky-override-repeater-item-split-view-box-shadow-hover, inset 0 0 0 var(--sky-border-width-input-hover) var(--sky-color-border-input-hover))}.sky-split-view-drawer sky-repeater-item .sky-repeater-item:active{background-color:var(--sky-override-repeater-item-split-view-background-color-active, var(--sky-color-background-selected-soft))}.sky-split-view-drawer sky-repeater-item .sky-repeater-item:active.sky-repeater-item-active{background-color:var(--sky-override-repeater-item-split-view-active-background-color-active, var(--sky-color-background-selected-soft))}.sky-split-view-drawer sky-repeater-item .sky-repeater-item:active{box-shadow:var(--sky-override-repeater-item-split-view-box-shadow-active, inset 0 0 0 var(--sky-border-width-input-active) var(--sky-color-border-input-active))}.sky-split-view-drawer sky-repeater-item .sky-repeater-item:focus-visible:not(:active){box-shadow:var(--sky-override-repeater-item-split-view-box-shadow-focus, inset 0 0 0 var(--sky-border-width-input-focus) var(--sky-color-border-input-focus))}\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: i1$1.λ2, selector: "sky-chevron", inputs: ["ariaControls", "ariaLabel", "direction", "disabled"], outputs: ["directionChange"] }, { kind: "component", type: i3.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "component", type: i5.λ1, selector: "sky-inline-form", inputs: ["config", "template", "showForm"], outputs: ["close"] }, { kind: "component", type: i2$2._SkyAnimationSlideComponent, selector: "sky-animation-slide", inputs: ["opened"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
1580
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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-theme-padding-inset-balanced-s\"\n [attr.aria-disabled]=\"ariaDisabled()\"\n [attr.aria-label]=\"itemName\"\n [attr.aria-labelledby]=\"itemName ? undefined : titleId\"\n [attr.aria-selected]=\"ariaSelected()\"\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-disabled': ariaDisabled(),\n 'sky-repeater-item-selectable': showCheckbox(),\n 'sky-repeater-item-selected': isSelected,\n 'sky-repeater-item-selection-single': isSelectionModeSingle()\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 <div class=\"sky-repeater-item-inline-form-contents\">\n <ng-container *ngTemplateOutlet=\"skyRepeaterItemLeft\" />\n <ng-container *ngTemplateOutlet=\"skyRepeaterItemRight\" />\n </div>\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-btn-icon-borderless 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 <!-- Used to ensure that the right side is the same height as the left by placeholding the size of the back to top button.-->\n <div class=\"sky-repeater-item-top-button-placeholder\"></div>\n }\n @if (showCheckbox() && !isSelectionModeSingle()) {\n <sky-checkbox\n class=\"sky-repeater-item-checkbox\"\n [checked]=\"isSelected\"\n [disabled]=\"disabled\"\n [id]=\"contentId + '-item-checkbox'\"\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 [attr.role]=\"(itemRole$ | async)?.content\"\n >\n <sky-animation-slide [opened]=\"slideDirection === 'down'\">\n <ng-content select=\"sky-repeater-item-content\" />\n </sky-animation-slide>\n </div>\n </div>\n</ng-template>\n", styles: [".sky-repeater-item:not(.sky-theme-modern *){--sky-override-repeater-item-active-background-color: #eeeeef;--sky-override-repeater-item-active-border-left-color: #00b4f1;--sky-override-repeater-item-active-border-left-width: 4px;--sky-override-repeater-item-active-inline-delete-margin-left: -4px;--sky-override-repeater-item-active-padding-left: 6px;--sky-override-repeater-item-background-color: transparent;--sky-override-repeater-item-border-bottom: 1px dotted #cdcfd2;--sky-override-repeater-item-border-radius: 0;--sky-override-repeater-item-checkbox-margin: 0;--sky-override-repeater-item-checkbox-padding-right: 5px;--sky-override-repeater-item-chevron-margin-left: 10px;--sky-override-repeater-item-chevron-placeholder-height: 24px;--sky-override-repeater-item-chevron-with-context-placeholder-height: 29px;--sky-override-repeater-item-content-collapsible-padding-right: 34px;--sky-override-repeater-item-content-margin-top: 10px;--sky-override-repeater-item-context-menu-padding-right: 10px;--sky-override-repeater-item-content-no-header-margin-top: 10px;--sky-override-repeater-item-dragging-background-color: #fff;--sky-override-repeater-item-dragging-background-color-static: #d8d8d8;--sky-override-repeater-item-dragging-box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, .3);--sky-override-repeater-item-grab-handle-box-shadow-active: none;--sky-override-repeater-item-grab-handle-box-shadow-hover: none;--sky-override-repeater-item-grab-handle-color-hover: rgb(55.5616438356, 57.698630137, 61.4383561644);--sky-override-repeater-item-grab-handle-margin-right: 10px;--sky-override-repeater-item-grab-handle-margin-vertical: 5px;--sky-override-repeater-item-grab-handle-padding: 0;--sky-override-repeater-item-grab-handle-size: 24px;--sky-override-repeater-item-outline-focus-visible: auto;--sky-override-repeater-item-padding: 10px;--sky-override-repeater-item-reorder-top-margin-left: 0;--sky-override-repeater-item-selectable-background-color-active: transparent;--sky-override-repeater-item-selectable-box-shadow-active: none;--sky-override-repeater-item-selectable-box-shadow-focus: none;--sky-override-repeater-item-selectable-box-shadow-hover: none;--sky-override-repeater-item-selected-color: var( --sky-background-color-selected );--sky-override-repeater-item-selection-modal-background-color-hover: var( --sky-background-color-selected );--sky-override-repeater-item-selection-modal-box-shadow-hover: none;--sky-override-repeater-item-single-select-background-color: var( --sky-background-color-selected );--sky-override-repeater-item-single-select-border-left-color: transparent;--sky-override-repeater-item-single-select-border-left-width: 0;--sky-override-repeater-item-single-select-inline-delete-margin-left: 0;--sky-override-repeater-item-single-select-padding-left: 10px;--sky-override-repeater-item-split-view-active-background-color-active: #eeeeef;--sky-override-repeater-item-split-view-background-color-active: transparent;--sky-override-repeater-item-split-view-box-shadow-active: none;--sky-override-repeater-item-split-view-box-shadow-focus: none;--sky-override-repeater-item-split-view-box-shadow-hover: none;--sky-override-repeater-item-title-line-height: 1.1;--sky-override-repeater-item-top-button-placeholder-height: 0;--sky-override-repeater-item-left-no-header-padding-top: 10px}sky-repeater-item .sky-repeater-item{display:flex;background-color:var(--sky-override-repeater-item-background-color, var(--sky-color-background-row-base));border-bottom:var(--sky-override-repeater-item-border-bottom, var(--sky-border-width-separator-row) var(--sky-border-style-separator-row) var(--sky-color-border-separator-row));border-radius:var(--sky-override-repeater-item-border-radius, var(--sky-border-radius-xs));padding:var(--sky-override-repeater-item-padding, var(--sky-comp-repeater_item-space-inset-top) var(--sky-comp-repeater_item-space-inset-right) var(--sky-comp-repeater_item-space-inset-bottom) var(--sky-comp-repeater_item-space-inset-left));position:relative;transition:box-shadow var(--sky-global-duration-short);align-items:flex-start}sky-repeater-item .sky-repeater-item:focus-visible,sky-repeater-item .sky-repeater-item:focus-visible:active{outline:var(--sky-override-repeater-item-outline-focus-visible, none);outline-offset:0}sky-repeater-item .sky-repeater-item:focus-visible:not(:active){box-shadow:none}sky-repeater-item .sky-repeater-item sky-inline-form{display:block;width:100%}sky-repeater-item .sky-repeater-item sky-inline-form .sky-repeater-item-inline-form-contents{display:flex;align-items:flex-start;flex:1 0 auto;width:100%}sky-repeater-item .sky-repeater-item.sky-repeater-item-active{background-color:var(--sky-override-repeater-item-active-background-color, var(--sky-color-background-selected-soft));padding-left:var(--sky-override-repeater-item-active-padding-left, calc(var(--sky-comp-repeater_item-space-inset-left) - var(--sky-border-width-selected-m)));border-left:var(--sky-override-repeater-item-active-border-left-width, var(--sky-border-width-selected-m)) solid var(--sky-override-repeater-item-active-border-left-color, var(--sky-color-border-selected))}sky-repeater-item .sky-repeater-item.sky-repeater-item-active .sky-inline-delete{margin-left:var(--sky-override-repeater-item-active-inline-delete-margin-left, calc((var(--sky-comp-repeater_item-space-inset-left) - var(--sky-border-width-selected-m)) * -1));width:calc(100% + var(--sky-override-repeater-item-active-border-left-width, var(--sky-border-width-selected-m)))}sky-repeater-item .sky-repeater-item.sky-repeater-item-selected:not(.sky-repeater-item-selectable){background-color:var(--sky-override-repeater-item-single-select-background-color, var(--sky-color-background-selected-soft));padding-left:var(--sky-override-repeater-item-single-select-padding-left, calc(var(--sky-comp-repeater_item-space-inset-left) - var(--sky-border-width-selected-m)));border-left:var(--sky-override-repeater-item-single-select-border-left-width, var(--sky-border-width-selected-m)) solid var(--sky-override-repeater-item-single-select-border-left-color, var(--sky-color-border-selected))}sky-repeater-item .sky-repeater-item.sky-repeater-item-selected:not(.sky-repeater-item-selectable) .sky-inline-delete{margin-left:var(--sky-override-repeater-item-single-select-inline-delete-margin-left, calc((var(--sky-comp-repeater_item-space-inset-left) - var(--sky-border-width-selected-m)) * -1));width:calc(100% + var(--sky-override-repeater-item-single-select-border-left-width, var(--sky-border-width-selected-m)))}sky-repeater-item .sky-repeater-item.sky-repeater-item-selection-single.sky-repeater-item-disabled{background-color:var(--sky-override-repeater-item-disabled-background-color, var(--sky-theme-color-background-disabled))}sky-repeater-item .sky-repeater-item:has(.sky-repeater-item-header[hidden]+.sky-repeater-item-content){padding-top:0}sky-repeater-item .sky-repeater-item:has(.sky-repeater-item-header[hidden]+.sky-repeater-item-content) .sky-repeater-item-left{padding-top:var(--sky-override-repeater-item-left-no-header-padding-top, var(--sky-comp-repeater_item-space-inset-top))}sky-repeater-item .sky-repeater-item-header[hidden]+.sky-repeater-item-content sky-repeater-item-content{margin-top:var(--sky-override-repeater-item-content-no-header-margin-top, var(--sky-comp-repeater_item-space-inset-top))}sky-repeater-item .sky-repeater-item-left{display:flex;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}sky-repeater-item .sky-repeater-item-chevron{margin-left:var(--sky-override-repeater-item-chevron-margin-left, var(--sky-space-gap-text_action-s))}sky-repeater-item .sky-repeater-item-reorder-top{margin-left:var(--sky-override-repeater-item-reorder-top-margin-left, var(--sky-space-gap-text_action-s))}sky-repeater-item .sky-repeater-item-chevron-placeholder{height:var(--sky-override-repeater-item-chevron-placeholder-height, max(var(--sky-size-switch), var(--sky-comp-button-borderless-space-inset-bottom) + var(--sky-comp-button-borderless-space-inset-top) + var(--sky-size-icon-m)))}sky-repeater-item .sky-repeater-item-chevron-placeholder-with-context{height:var(--sky-override-repeater-item-chevron-with-context-placeholder-height, max(var(--sky-size-switch), var(--sky-comp-button-borderless-space-inset-bottom) + var(--sky-comp-button-borderless-space-inset-top) + var(--sky-size-icon-m)))}sky-repeater-item .sky-repeater-item-top-button-placeholder{height:var(--sky-override-repeater-item-top-button-placeholder-height, calc(var(--sky-comp-button-space-inset-bottom) + var(--sky-comp-button-space-inset-top) + var(--sky-font-line_height-body-m) * var(--sky-font-size-body-m)))}sky-repeater-item .sky-repeater-item-context-menu{padding:0 var(--sky-override-repeater-item-context-menu-padding-right, var(--sky-space-gap-action_group-m)) 0 0}sky-repeater-item .sky-repeater-item-checkbox{padding:0 var(--sky-override-repeater-item-checkbox-padding-right, var(--sky-space-gap-action_group-s)) 0 0;margin:var(--sky-override-repeater-item-checkbox-margin, var(--sky-comp-repeater_item-checkbox-space-offset-top) var(--sky-comp-repeater_item-checkbox-space-offset-right) var(--sky-comp-repeater_item-checkbox-space-offset-bottom) var(--sky-comp-repeater_item-checkbox-space-offset-left))}sky-repeater-item .sky-repeater-item-selectable,sky-repeater-item .sky-repeater-item-selectable sky-repeater-item-content>label,sky-repeater-item .sky-repeater-item-selection-single:not(.sky-repeater-item-disabled),sky-repeater-item .sky-repeater-item-selection-single:not(.sky-repeater-item-disabled) sky-repeater-item-content>label{cursor:pointer}sky-repeater-item .sky-repeater-item-selectable .sky-repeater-item-left,sky-repeater-item .sky-repeater-item-selectable sky-repeater-item-content>*:not(label),sky-repeater-item .sky-repeater-item-selection-single:not(.sky-repeater-item-disabled) .sky-repeater-item-left,sky-repeater-item .sky-repeater-item-selection-single:not(.sky-repeater-item-disabled) sky-repeater-item-content>*:not(label){cursor:initial}sky-repeater-item .sky-repeater-item-selectable:hover,sky-repeater-item .sky-repeater-item-selection-single:not(.sky-repeater-item-disabled):hover{box-shadow:var(--sky-override-repeater-item-selectable-box-shadow-hover, inset 0 0 0 var(--sky-border-width-input-hover) var(--sky-color-border-input-hover))}sky-repeater-item .sky-repeater-item-selectable:active:not(.sky-repeater-item-selected),sky-repeater-item .sky-repeater-item-selection-single:not(.sky-repeater-item-disabled):active:not(.sky-repeater-item-selected){background-color:var(--sky-override-repeater-item-selectable-background-color-active, var(--sky-color-background-selected-soft))}sky-repeater-item .sky-repeater-item-selectable:active,sky-repeater-item .sky-repeater-item-selection-single:not(.sky-repeater-item-disabled):active{box-shadow:var(--sky-override-repeater-item-selectable-box-shadow-active, inset 0 0 0 var(--sky-border-width-input-active) var(--sky-color-border-input-active))}sky-repeater-item .sky-repeater-item-selectable:focus-visible:not(:active),sky-repeater-item .sky-repeater-item-selection-single:not(.sky-repeater-item-disabled):focus-visible:not(:active){box-shadow:var(--sky-override-repeater-item-selectable-box-shadow-focus, inset 0 0 0 var(--sky-border-width-input-focus) var(--sky-color-border-input-focus))}sky-repeater-item .sky-repeater-item-selected{background-color:var(--sky-override-repeater-item-selected-color, var(--sky-color-background-selected-soft));transition:background-color var(--sky-global-duration-short)}sky-repeater-item .sky-repeater-item-title{margin:0;flex-grow:1;line-height:var(--sky-override-repeater-item-title-line-height, var(--sky-font-line_height-body-m))}sky-repeater-item sky-repeater-item-content{display:block;margin:var(--sky-override-repeater-item-content-margin-top, var(--sky-space-stacked-s)) 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:var(--sky-override-repeater-item-content-collapsible-padding-right, calc(var(--sky-comp-button-borderless-space-inset-bottom) + var(--sky-comp-button-borderless-space-inset-top) + var(--sky-size-icon-s) + var(--sky-space-gap-text_action-s)))}sky-repeater-item .sky-repeater-item-collapsed .sky-repeater-item-content{display:none}sky-repeater-item .sky-repeater-item-grab-handle{cursor:grab;cursor:-webkit-grab;cursor:-moz-grab;margin:var(--sky-override-repeater-item-grab-handle-margin-vertical, 0) var(--sky-override-repeater-item-grab-handle-margin-right, var(--sky-space-gap-action_group-m)) var(--sky-override-repeater-item-grab-handle-margin-vertical, 0) 0}sky-repeater-item .sky-repeater-item-grab-handle.sky-btn-icon-borderless{height:var(--sky-override-repeater-item-grab-handle-size, \"\");padding:var(--sky-override-repeater-item-grab-handle-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left));width:var(--sky-override-repeater-item-grab-handle-size, \"\")}sky-repeater-item .sky-repeater-item-grab-handle.sky-btn-icon-borderless:active{box-shadow:var(--sky-override-repeater-item-grab-handle-box-shadow-active, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}sky-repeater-item .sky-repeater-item-grab-handle.sky-btn-icon-borderless:hover{color:var(--sky-override-repeater-item-grab-handle-color-hover, var(--sky-color-icon-deemphasized));box-shadow:var(--sky-override-repeater-item-grab-handle-box-shadow-hover, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover))}sky-repeater-item.sky-repeater-item-dragging .sky-repeater-item-grab-handle{cursor:grabbing}.hover-rows .sky-repeater-item:not(.sky-repeater-item-disabled){cursor:pointer}.hover-rows .sky-repeater-item:not(.sky-repeater-item-disabled):hover{background-color:var(--sky-override-repeater-item-selection-modal-background-color-hover);box-shadow:var(--sky-override-repeater-item-selection-modal-box-shadow-hover, inset 0 0 0 var(--sky-border-width-input-hover) var(--sky-color-border-input-hover))}.sky-split-view-drawer sky-repeater-item .sky-repeater-item:hover{box-shadow:var(--sky-override-repeater-item-split-view-box-shadow-hover, inset 0 0 0 var(--sky-border-width-input-hover) var(--sky-color-border-input-hover))}.sky-split-view-drawer sky-repeater-item .sky-repeater-item:active{background-color:var(--sky-override-repeater-item-split-view-background-color-active, var(--sky-color-background-selected-soft))}.sky-split-view-drawer sky-repeater-item .sky-repeater-item:active.sky-repeater-item-active{background-color:var(--sky-override-repeater-item-split-view-active-background-color-active, var(--sky-color-background-selected-soft))}.sky-split-view-drawer sky-repeater-item .sky-repeater-item:active{box-shadow:var(--sky-override-repeater-item-split-view-box-shadow-active, inset 0 0 0 var(--sky-border-width-input-active) var(--sky-color-border-input-active))}.sky-split-view-drawer sky-repeater-item .sky-repeater-item:focus-visible:not(:active){box-shadow:var(--sky-override-repeater-item-split-view-box-shadow-focus, inset 0 0 0 var(--sky-border-width-input-focus) var(--sky-color-border-input-focus))}\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: i1$1.λ2, selector: "sky-chevron", inputs: ["ariaControls", "ariaLabel", "direction", "disabled"], outputs: ["directionChange"] }, { kind: "component", type: i3.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "component", type: i5.λ1, selector: "sky-inline-form", inputs: ["config", "template", "showForm"], outputs: ["close"] }, { kind: "component", type: i2$2._SkyAnimationSlideComponent, selector: "sky-animation-slide", inputs: ["opened"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
1490
1581
  }
1491
1582
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyRepeaterItemComponent, decorators: [{
1492
1583
  type: Component,
1493
- args: [{ selector: 'sky-repeater-item', providers: [SkyContentInfoProvider], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div\n #itemRef\n class=\"sky-repeater-item sky-theme-padding-inset-balanced-s\"\n [attr.aria-label]=\"itemName\"\n [attr.aria-labelledby]=\"itemName ? undefined : 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-selectable': selectable,\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 <div class=\"sky-repeater-item-inline-form-contents\">\n <ng-container *ngTemplateOutlet=\"skyRepeaterItemLeft\" />\n <ng-container *ngTemplateOutlet=\"skyRepeaterItemRight\" />\n </div>\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-btn-icon-borderless 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 <!-- Used to ensure that the right side is the same height as the left by placeholding the size of the back to top button.-->\n <div class=\"sky-repeater-item-top-button-placeholder\"></div>\n }\n @if (selectable) {\n <sky-checkbox\n class=\"sky-repeater-item-checkbox\"\n [checked]=\"isSelected\"\n [disabled]=\"disabled\"\n [id]=\"contentId + '-item-checkbox'\"\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 [attr.role]=\"(itemRole$ | async)?.content\"\n >\n <sky-animation-slide [opened]=\"slideDirection === 'down'\">\n <ng-content select=\"sky-repeater-item-content\" />\n </sky-animation-slide>\n </div>\n </div>\n</ng-template>\n", styles: [".sky-repeater-item:not(.sky-theme-modern *){--sky-override-repeater-item-active-background-color: #eeeeef;--sky-override-repeater-item-active-border-left-color: #00b4f1;--sky-override-repeater-item-active-border-left-width: 4px;--sky-override-repeater-item-active-inline-delete-margin-left: -4px;--sky-override-repeater-item-active-padding-left: 6px;--sky-override-repeater-item-background-color: transparent;--sky-override-repeater-item-border-bottom: 1px dotted #cdcfd2;--sky-override-repeater-item-border-radius: 0;--sky-override-repeater-item-checkbox-margin: 0;--sky-override-repeater-item-checkbox-padding-right: 5px;--sky-override-repeater-item-chevron-margin-left: 10px;--sky-override-repeater-item-chevron-placeholder-height: 24px;--sky-override-repeater-item-chevron-with-context-placeholder-height: 29px;--sky-override-repeater-item-content-collapsible-padding-right: 34px;--sky-override-repeater-item-content-margin-top: 10px;--sky-override-repeater-item-context-menu-padding-right: 10px;--sky-override-repeater-item-content-no-header-margin-top: 10px;--sky-override-repeater-item-dragging-background-color: #fff;--sky-override-repeater-item-dragging-background-color-static: #d8d8d8;--sky-override-repeater-item-dragging-box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, .3);--sky-override-repeater-item-grab-handle-box-shadow-active: none;--sky-override-repeater-item-grab-handle-box-shadow-hover: none;--sky-override-repeater-item-grab-handle-color-hover: rgb(55.5616438356, 57.698630137, 61.4383561644);--sky-override-repeater-item-grab-handle-margin-right: 10px;--sky-override-repeater-item-grab-handle-margin-vertical: 5px;--sky-override-repeater-item-grab-handle-padding: 0;--sky-override-repeater-item-grab-handle-size: 24px;--sky-override-repeater-item-outline-focus-visible: auto;--sky-override-repeater-item-padding: 10px;--sky-override-repeater-item-reorder-top-margin-left: 0;--sky-override-repeater-item-selectable-background-color-active: transparent;--sky-override-repeater-item-selectable-box-shadow-active: none;--sky-override-repeater-item-selectable-box-shadow-focus: none;--sky-override-repeater-item-selectable-box-shadow-hover: none;--sky-override-repeater-item-selected-color: var( --sky-background-color-selected );--sky-override-repeater-item-selection-modal-background-color-hover: var( --sky-background-color-selected );--sky-override-repeater-item-selection-modal-box-shadow-hover: none;--sky-override-repeater-item-single-select-background-color: var( --sky-background-color-selected );--sky-override-repeater-item-single-select-border-left-color: transparent;--sky-override-repeater-item-single-select-border-left-width: 0;--sky-override-repeater-item-single-select-inline-delete-margin-left: 0;--sky-override-repeater-item-single-select-padding-left: 10px;--sky-override-repeater-item-split-view-active-background-color-active: #eeeeef;--sky-override-repeater-item-split-view-background-color-active: transparent;--sky-override-repeater-item-split-view-box-shadow-active: none;--sky-override-repeater-item-split-view-box-shadow-focus: none;--sky-override-repeater-item-split-view-box-shadow-hover: none;--sky-override-repeater-item-title-line-height: 1.1;--sky-override-repeater-item-top-button-placeholder-height: 0;--sky-override-repeater-item-left-no-header-padding-top: 10px}sky-repeater-item .sky-repeater-item{display:flex;background-color:var(--sky-override-repeater-item-background-color, var(--sky-color-background-row-base));border-bottom:var(--sky-override-repeater-item-border-bottom, var(--sky-border-width-separator-row) var(--sky-border-style-separator-row) var(--sky-color-border-separator-row));border-radius:var(--sky-override-repeater-item-border-radius, var(--sky-border-radius-xs));padding:var(--sky-override-repeater-item-padding, var(--sky-comp-repeater_item-space-inset-top) var(--sky-comp-repeater_item-space-inset-right) var(--sky-comp-repeater_item-space-inset-bottom) var(--sky-comp-repeater_item-space-inset-left));position:relative;transition:box-shadow var(--sky-global-duration-short);align-items:flex-start}sky-repeater-item .sky-repeater-item:focus-visible,sky-repeater-item .sky-repeater-item:focus-visible:active{outline:var(--sky-override-repeater-item-outline-focus-visible, none);outline-offset:0}sky-repeater-item .sky-repeater-item:focus-visible:not(:active){box-shadow:none}sky-repeater-item .sky-repeater-item sky-inline-form{display:block;width:100%}sky-repeater-item .sky-repeater-item sky-inline-form .sky-repeater-item-inline-form-contents{display:flex;align-items:flex-start;flex:1 0 auto;width:100%}sky-repeater-item .sky-repeater-item.sky-repeater-item-active{background-color:var(--sky-override-repeater-item-active-background-color, var(--sky-color-background-selected-soft));padding-left:var(--sky-override-repeater-item-active-padding-left, calc(var(--sky-comp-repeater_item-space-inset-left) - var(--sky-border-width-selected-m)));border-left:var(--sky-override-repeater-item-active-border-left-width, var(--sky-border-width-selected-m)) solid var(--sky-override-repeater-item-active-border-left-color, var(--sky-color-border-selected))}sky-repeater-item .sky-repeater-item.sky-repeater-item-active .sky-inline-delete{margin-left:var(--sky-override-repeater-item-active-inline-delete-margin-left, calc((var(--sky-comp-repeater_item-space-inset-left) - var(--sky-border-width-selected-m)) * -1));width:calc(100% + var(--sky-override-repeater-item-active-border-left-width, var(--sky-border-width-selected-m)))}sky-repeater-item .sky-repeater-item.sky-repeater-item-selected:not(.sky-repeater-item-selectable){background-color:var(--sky-override-repeater-item-single-select-background-color, var(--sky-color-background-selected-soft));padding-left:var(--sky-override-repeater-item-single-select-padding-left, calc(var(--sky-comp-repeater_item-space-inset-left) - var(--sky-border-width-selected-m)));border-left:var(--sky-override-repeater-item-single-select-border-left-width, var(--sky-border-width-selected-m)) solid var(--sky-override-repeater-item-single-select-border-left-color, var(--sky-color-border-selected))}sky-repeater-item .sky-repeater-item.sky-repeater-item-selected:not(.sky-repeater-item-selectable) .sky-inline-delete{margin-left:var(--sky-override-repeater-item-single-select-inline-delete-margin-left, calc((var(--sky-comp-repeater_item-space-inset-left) - var(--sky-border-width-selected-m)) * -1));width:calc(100% + var(--sky-override-repeater-item-single-select-border-left-width, var(--sky-border-width-selected-m)))}sky-repeater-item .sky-repeater-item:has(.sky-repeater-item-header[hidden]+.sky-repeater-item-content){padding-top:0}sky-repeater-item .sky-repeater-item:has(.sky-repeater-item-header[hidden]+.sky-repeater-item-content) .sky-repeater-item-left{padding-top:var(--sky-override-repeater-item-left-no-header-padding-top, var(--sky-comp-repeater_item-space-inset-top))}sky-repeater-item .sky-repeater-item-header[hidden]+.sky-repeater-item-content sky-repeater-item-content{margin-top:var(--sky-override-repeater-item-content-no-header-margin-top, var(--sky-comp-repeater_item-space-inset-top))}sky-repeater-item .sky-repeater-item-left{display:flex;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}sky-repeater-item .sky-repeater-item-chevron{margin-left:var(--sky-override-repeater-item-chevron-margin-left, var(--sky-space-gap-text_action-s))}sky-repeater-item .sky-repeater-item-reorder-top{margin-left:var(--sky-override-repeater-item-reorder-top-margin-left, var(--sky-space-gap-text_action-s))}sky-repeater-item .sky-repeater-item-chevron-placeholder{height:var(--sky-override-repeater-item-chevron-placeholder-height, max(var(--sky-size-switch), var(--sky-comp-button-borderless-space-inset-bottom) + var(--sky-comp-button-borderless-space-inset-top) + var(--sky-size-icon-m)))}sky-repeater-item .sky-repeater-item-chevron-placeholder-with-context{height:var(--sky-override-repeater-item-chevron-with-context-placeholder-height, max(var(--sky-size-switch), var(--sky-comp-button-borderless-space-inset-bottom) + var(--sky-comp-button-borderless-space-inset-top) + var(--sky-size-icon-m)))}sky-repeater-item .sky-repeater-item-top-button-placeholder{height:var(--sky-override-repeater-item-top-button-placeholder-height, calc(var(--sky-comp-button-space-inset-bottom) + var(--sky-comp-button-space-inset-top) + var(--sky-font-line_height-body-m) * var(--sky-font-size-body-m)))}sky-repeater-item .sky-repeater-item-context-menu{padding:0 var(--sky-override-repeater-item-context-menu-padding-right, var(--sky-space-gap-action_group-m)) 0 0}sky-repeater-item .sky-repeater-item-checkbox{padding:0 var(--sky-override-repeater-item-checkbox-padding-right, var(--sky-space-gap-action_group-s)) 0 0;margin:var(--sky-override-repeater-item-checkbox-margin, var(--sky-comp-repeater_item-checkbox-space-offset-top) var(--sky-comp-repeater_item-checkbox-space-offset-right) var(--sky-comp-repeater_item-checkbox-space-offset-bottom) var(--sky-comp-repeater_item-checkbox-space-offset-left))}sky-repeater-item .sky-repeater-item-selectable,sky-repeater-item .sky-repeater-item-selectable sky-repeater-item-content>label{cursor:pointer}sky-repeater-item .sky-repeater-item-selectable .sky-repeater-item-left,sky-repeater-item .sky-repeater-item-selectable sky-repeater-item-content>*:not(label){cursor:initial}sky-repeater-item .sky-repeater-item-selectable:hover{box-shadow:var(--sky-override-repeater-item-selectable-box-shadow-hover, inset 0 0 0 var(--sky-border-width-input-hover) var(--sky-color-border-input-hover))}sky-repeater-item .sky-repeater-item-selectable:active:not(.sky-repeater-item-selected){background-color:var(--sky-override-repeater-item-selectable-background-color-active, var(--sky-color-background-selected-soft))}sky-repeater-item .sky-repeater-item-selectable:active{box-shadow:var(--sky-override-repeater-item-selectable-box-shadow-active, inset 0 0 0 var(--sky-border-width-input-active) var(--sky-color-border-input-active))}sky-repeater-item .sky-repeater-item-selectable:focus-visible:not(:active){box-shadow:var(--sky-override-repeater-item-selectable-box-shadow-focus, inset 0 0 0 var(--sky-border-width-input-focus) var(--sky-color-border-input-focus))}sky-repeater-item .sky-repeater-item-selected{background-color:var(--sky-override-repeater-item-selected-color, var(--sky-color-background-selected-soft));transition:background-color var(--sky-global-duration-short)}sky-repeater-item .sky-repeater-item-title{margin:0;flex-grow:1;line-height:var(--sky-override-repeater-item-title-line-height, var(--sky-font-line_height-body-m))}sky-repeater-item sky-repeater-item-content{display:block;margin:var(--sky-override-repeater-item-content-margin-top, var(--sky-space-stacked-s)) 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:var(--sky-override-repeater-item-content-collapsible-padding-right, calc(var(--sky-comp-button-borderless-space-inset-bottom) + var(--sky-comp-button-borderless-space-inset-top) + var(--sky-size-icon-s) + var(--sky-space-gap-text_action-s)))}sky-repeater-item .sky-repeater-item-collapsed .sky-repeater-item-content{display:none}sky-repeater-item .sky-repeater-item-grab-handle{cursor:grab;cursor:-webkit-grab;cursor:-moz-grab;margin:var(--sky-override-repeater-item-grab-handle-margin-vertical, 0) var(--sky-override-repeater-item-grab-handle-margin-right, var(--sky-space-gap-action_group-m)) var(--sky-override-repeater-item-grab-handle-margin-vertical, 0) 0}sky-repeater-item .sky-repeater-item-grab-handle.sky-btn-icon-borderless{height:var(--sky-override-repeater-item-grab-handle-size, \"\");padding:var(--sky-override-repeater-item-grab-handle-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left));width:var(--sky-override-repeater-item-grab-handle-size, \"\")}sky-repeater-item .sky-repeater-item-grab-handle.sky-btn-icon-borderless:active{box-shadow:var(--sky-override-repeater-item-grab-handle-box-shadow-active, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}sky-repeater-item .sky-repeater-item-grab-handle.sky-btn-icon-borderless:hover{color:var(--sky-override-repeater-item-grab-handle-color-hover, var(--sky-color-icon-deemphasized));box-shadow:var(--sky-override-repeater-item-grab-handle-box-shadow-hover, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover))}sky-repeater-item.sky-repeater-item-dragging .sky-repeater-item-grab-handle{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}.hover-rows .sky-repeater-item{cursor:pointer}.hover-rows .sky-repeater-item:hover{background-color:var(--sky-override-repeater-item-selection-modal-background-color-hover);box-shadow:var(--sky-override-repeater-item-selection-modal-box-shadow-hover, inset 0 0 0 var(--sky-border-width-input-hover) var(--sky-color-border-input-hover))}.sky-split-view-drawer sky-repeater-item .sky-repeater-item:hover{box-shadow:var(--sky-override-repeater-item-split-view-box-shadow-hover, inset 0 0 0 var(--sky-border-width-input-hover) var(--sky-color-border-input-hover))}.sky-split-view-drawer sky-repeater-item .sky-repeater-item:active{background-color:var(--sky-override-repeater-item-split-view-background-color-active, var(--sky-color-background-selected-soft))}.sky-split-view-drawer sky-repeater-item .sky-repeater-item:active.sky-repeater-item-active{background-color:var(--sky-override-repeater-item-split-view-active-background-color-active, var(--sky-color-background-selected-soft))}.sky-split-view-drawer sky-repeater-item .sky-repeater-item:active{box-shadow:var(--sky-override-repeater-item-split-view-box-shadow-active, inset 0 0 0 var(--sky-border-width-input-active) var(--sky-color-border-input-active))}.sky-split-view-drawer sky-repeater-item .sky-repeater-item:focus-visible:not(:active){box-shadow:var(--sky-override-repeater-item-split-view-box-shadow-focus, inset 0 0 0 var(--sky-border-width-input-focus) var(--sky-color-border-input-focus))}\n"] }]
1584
+ args: [{ selector: 'sky-repeater-item', providers: [SkyContentInfoProvider], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div\n #itemRef\n class=\"sky-repeater-item sky-theme-padding-inset-balanced-s\"\n [attr.aria-disabled]=\"ariaDisabled()\"\n [attr.aria-label]=\"itemName\"\n [attr.aria-labelledby]=\"itemName ? undefined : titleId\"\n [attr.aria-selected]=\"ariaSelected()\"\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-disabled': ariaDisabled(),\n 'sky-repeater-item-selectable': showCheckbox(),\n 'sky-repeater-item-selected': isSelected,\n 'sky-repeater-item-selection-single': isSelectionModeSingle()\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 <div class=\"sky-repeater-item-inline-form-contents\">\n <ng-container *ngTemplateOutlet=\"skyRepeaterItemLeft\" />\n <ng-container *ngTemplateOutlet=\"skyRepeaterItemRight\" />\n </div>\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-btn-icon-borderless 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 <!-- Used to ensure that the right side is the same height as the left by placeholding the size of the back to top button.-->\n <div class=\"sky-repeater-item-top-button-placeholder\"></div>\n }\n @if (showCheckbox() && !isSelectionModeSingle()) {\n <sky-checkbox\n class=\"sky-repeater-item-checkbox\"\n [checked]=\"isSelected\"\n [disabled]=\"disabled\"\n [id]=\"contentId + '-item-checkbox'\"\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 [attr.role]=\"(itemRole$ | async)?.content\"\n >\n <sky-animation-slide [opened]=\"slideDirection === 'down'\">\n <ng-content select=\"sky-repeater-item-content\" />\n </sky-animation-slide>\n </div>\n </div>\n</ng-template>\n", styles: [".sky-repeater-item:not(.sky-theme-modern *){--sky-override-repeater-item-active-background-color: #eeeeef;--sky-override-repeater-item-active-border-left-color: #00b4f1;--sky-override-repeater-item-active-border-left-width: 4px;--sky-override-repeater-item-active-inline-delete-margin-left: -4px;--sky-override-repeater-item-active-padding-left: 6px;--sky-override-repeater-item-background-color: transparent;--sky-override-repeater-item-border-bottom: 1px dotted #cdcfd2;--sky-override-repeater-item-border-radius: 0;--sky-override-repeater-item-checkbox-margin: 0;--sky-override-repeater-item-checkbox-padding-right: 5px;--sky-override-repeater-item-chevron-margin-left: 10px;--sky-override-repeater-item-chevron-placeholder-height: 24px;--sky-override-repeater-item-chevron-with-context-placeholder-height: 29px;--sky-override-repeater-item-content-collapsible-padding-right: 34px;--sky-override-repeater-item-content-margin-top: 10px;--sky-override-repeater-item-context-menu-padding-right: 10px;--sky-override-repeater-item-content-no-header-margin-top: 10px;--sky-override-repeater-item-dragging-background-color: #fff;--sky-override-repeater-item-dragging-background-color-static: #d8d8d8;--sky-override-repeater-item-dragging-box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, .3);--sky-override-repeater-item-grab-handle-box-shadow-active: none;--sky-override-repeater-item-grab-handle-box-shadow-hover: none;--sky-override-repeater-item-grab-handle-color-hover: rgb(55.5616438356, 57.698630137, 61.4383561644);--sky-override-repeater-item-grab-handle-margin-right: 10px;--sky-override-repeater-item-grab-handle-margin-vertical: 5px;--sky-override-repeater-item-grab-handle-padding: 0;--sky-override-repeater-item-grab-handle-size: 24px;--sky-override-repeater-item-outline-focus-visible: auto;--sky-override-repeater-item-padding: 10px;--sky-override-repeater-item-reorder-top-margin-left: 0;--sky-override-repeater-item-selectable-background-color-active: transparent;--sky-override-repeater-item-selectable-box-shadow-active: none;--sky-override-repeater-item-selectable-box-shadow-focus: none;--sky-override-repeater-item-selectable-box-shadow-hover: none;--sky-override-repeater-item-selected-color: var( --sky-background-color-selected );--sky-override-repeater-item-selection-modal-background-color-hover: var( --sky-background-color-selected );--sky-override-repeater-item-selection-modal-box-shadow-hover: none;--sky-override-repeater-item-single-select-background-color: var( --sky-background-color-selected );--sky-override-repeater-item-single-select-border-left-color: transparent;--sky-override-repeater-item-single-select-border-left-width: 0;--sky-override-repeater-item-single-select-inline-delete-margin-left: 0;--sky-override-repeater-item-single-select-padding-left: 10px;--sky-override-repeater-item-split-view-active-background-color-active: #eeeeef;--sky-override-repeater-item-split-view-background-color-active: transparent;--sky-override-repeater-item-split-view-box-shadow-active: none;--sky-override-repeater-item-split-view-box-shadow-focus: none;--sky-override-repeater-item-split-view-box-shadow-hover: none;--sky-override-repeater-item-title-line-height: 1.1;--sky-override-repeater-item-top-button-placeholder-height: 0;--sky-override-repeater-item-left-no-header-padding-top: 10px}sky-repeater-item .sky-repeater-item{display:flex;background-color:var(--sky-override-repeater-item-background-color, var(--sky-color-background-row-base));border-bottom:var(--sky-override-repeater-item-border-bottom, var(--sky-border-width-separator-row) var(--sky-border-style-separator-row) var(--sky-color-border-separator-row));border-radius:var(--sky-override-repeater-item-border-radius, var(--sky-border-radius-xs));padding:var(--sky-override-repeater-item-padding, var(--sky-comp-repeater_item-space-inset-top) var(--sky-comp-repeater_item-space-inset-right) var(--sky-comp-repeater_item-space-inset-bottom) var(--sky-comp-repeater_item-space-inset-left));position:relative;transition:box-shadow var(--sky-global-duration-short);align-items:flex-start}sky-repeater-item .sky-repeater-item:focus-visible,sky-repeater-item .sky-repeater-item:focus-visible:active{outline:var(--sky-override-repeater-item-outline-focus-visible, none);outline-offset:0}sky-repeater-item .sky-repeater-item:focus-visible:not(:active){box-shadow:none}sky-repeater-item .sky-repeater-item sky-inline-form{display:block;width:100%}sky-repeater-item .sky-repeater-item sky-inline-form .sky-repeater-item-inline-form-contents{display:flex;align-items:flex-start;flex:1 0 auto;width:100%}sky-repeater-item .sky-repeater-item.sky-repeater-item-active{background-color:var(--sky-override-repeater-item-active-background-color, var(--sky-color-background-selected-soft));padding-left:var(--sky-override-repeater-item-active-padding-left, calc(var(--sky-comp-repeater_item-space-inset-left) - var(--sky-border-width-selected-m)));border-left:var(--sky-override-repeater-item-active-border-left-width, var(--sky-border-width-selected-m)) solid var(--sky-override-repeater-item-active-border-left-color, var(--sky-color-border-selected))}sky-repeater-item .sky-repeater-item.sky-repeater-item-active .sky-inline-delete{margin-left:var(--sky-override-repeater-item-active-inline-delete-margin-left, calc((var(--sky-comp-repeater_item-space-inset-left) - var(--sky-border-width-selected-m)) * -1));width:calc(100% + var(--sky-override-repeater-item-active-border-left-width, var(--sky-border-width-selected-m)))}sky-repeater-item .sky-repeater-item.sky-repeater-item-selected:not(.sky-repeater-item-selectable){background-color:var(--sky-override-repeater-item-single-select-background-color, var(--sky-color-background-selected-soft));padding-left:var(--sky-override-repeater-item-single-select-padding-left, calc(var(--sky-comp-repeater_item-space-inset-left) - var(--sky-border-width-selected-m)));border-left:var(--sky-override-repeater-item-single-select-border-left-width, var(--sky-border-width-selected-m)) solid var(--sky-override-repeater-item-single-select-border-left-color, var(--sky-color-border-selected))}sky-repeater-item .sky-repeater-item.sky-repeater-item-selected:not(.sky-repeater-item-selectable) .sky-inline-delete{margin-left:var(--sky-override-repeater-item-single-select-inline-delete-margin-left, calc((var(--sky-comp-repeater_item-space-inset-left) - var(--sky-border-width-selected-m)) * -1));width:calc(100% + var(--sky-override-repeater-item-single-select-border-left-width, var(--sky-border-width-selected-m)))}sky-repeater-item .sky-repeater-item.sky-repeater-item-selection-single.sky-repeater-item-disabled{background-color:var(--sky-override-repeater-item-disabled-background-color, var(--sky-theme-color-background-disabled))}sky-repeater-item .sky-repeater-item:has(.sky-repeater-item-header[hidden]+.sky-repeater-item-content){padding-top:0}sky-repeater-item .sky-repeater-item:has(.sky-repeater-item-header[hidden]+.sky-repeater-item-content) .sky-repeater-item-left{padding-top:var(--sky-override-repeater-item-left-no-header-padding-top, var(--sky-comp-repeater_item-space-inset-top))}sky-repeater-item .sky-repeater-item-header[hidden]+.sky-repeater-item-content sky-repeater-item-content{margin-top:var(--sky-override-repeater-item-content-no-header-margin-top, var(--sky-comp-repeater_item-space-inset-top))}sky-repeater-item .sky-repeater-item-left{display:flex;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}sky-repeater-item .sky-repeater-item-chevron{margin-left:var(--sky-override-repeater-item-chevron-margin-left, var(--sky-space-gap-text_action-s))}sky-repeater-item .sky-repeater-item-reorder-top{margin-left:var(--sky-override-repeater-item-reorder-top-margin-left, var(--sky-space-gap-text_action-s))}sky-repeater-item .sky-repeater-item-chevron-placeholder{height:var(--sky-override-repeater-item-chevron-placeholder-height, max(var(--sky-size-switch), var(--sky-comp-button-borderless-space-inset-bottom) + var(--sky-comp-button-borderless-space-inset-top) + var(--sky-size-icon-m)))}sky-repeater-item .sky-repeater-item-chevron-placeholder-with-context{height:var(--sky-override-repeater-item-chevron-with-context-placeholder-height, max(var(--sky-size-switch), var(--sky-comp-button-borderless-space-inset-bottom) + var(--sky-comp-button-borderless-space-inset-top) + var(--sky-size-icon-m)))}sky-repeater-item .sky-repeater-item-top-button-placeholder{height:var(--sky-override-repeater-item-top-button-placeholder-height, calc(var(--sky-comp-button-space-inset-bottom) + var(--sky-comp-button-space-inset-top) + var(--sky-font-line_height-body-m) * var(--sky-font-size-body-m)))}sky-repeater-item .sky-repeater-item-context-menu{padding:0 var(--sky-override-repeater-item-context-menu-padding-right, var(--sky-space-gap-action_group-m)) 0 0}sky-repeater-item .sky-repeater-item-checkbox{padding:0 var(--sky-override-repeater-item-checkbox-padding-right, var(--sky-space-gap-action_group-s)) 0 0;margin:var(--sky-override-repeater-item-checkbox-margin, var(--sky-comp-repeater_item-checkbox-space-offset-top) var(--sky-comp-repeater_item-checkbox-space-offset-right) var(--sky-comp-repeater_item-checkbox-space-offset-bottom) var(--sky-comp-repeater_item-checkbox-space-offset-left))}sky-repeater-item .sky-repeater-item-selectable,sky-repeater-item .sky-repeater-item-selectable sky-repeater-item-content>label,sky-repeater-item .sky-repeater-item-selection-single:not(.sky-repeater-item-disabled),sky-repeater-item .sky-repeater-item-selection-single:not(.sky-repeater-item-disabled) sky-repeater-item-content>label{cursor:pointer}sky-repeater-item .sky-repeater-item-selectable .sky-repeater-item-left,sky-repeater-item .sky-repeater-item-selectable sky-repeater-item-content>*:not(label),sky-repeater-item .sky-repeater-item-selection-single:not(.sky-repeater-item-disabled) .sky-repeater-item-left,sky-repeater-item .sky-repeater-item-selection-single:not(.sky-repeater-item-disabled) sky-repeater-item-content>*:not(label){cursor:initial}sky-repeater-item .sky-repeater-item-selectable:hover,sky-repeater-item .sky-repeater-item-selection-single:not(.sky-repeater-item-disabled):hover{box-shadow:var(--sky-override-repeater-item-selectable-box-shadow-hover, inset 0 0 0 var(--sky-border-width-input-hover) var(--sky-color-border-input-hover))}sky-repeater-item .sky-repeater-item-selectable:active:not(.sky-repeater-item-selected),sky-repeater-item .sky-repeater-item-selection-single:not(.sky-repeater-item-disabled):active:not(.sky-repeater-item-selected){background-color:var(--sky-override-repeater-item-selectable-background-color-active, var(--sky-color-background-selected-soft))}sky-repeater-item .sky-repeater-item-selectable:active,sky-repeater-item .sky-repeater-item-selection-single:not(.sky-repeater-item-disabled):active{box-shadow:var(--sky-override-repeater-item-selectable-box-shadow-active, inset 0 0 0 var(--sky-border-width-input-active) var(--sky-color-border-input-active))}sky-repeater-item .sky-repeater-item-selectable:focus-visible:not(:active),sky-repeater-item .sky-repeater-item-selection-single:not(.sky-repeater-item-disabled):focus-visible:not(:active){box-shadow:var(--sky-override-repeater-item-selectable-box-shadow-focus, inset 0 0 0 var(--sky-border-width-input-focus) var(--sky-color-border-input-focus))}sky-repeater-item .sky-repeater-item-selected{background-color:var(--sky-override-repeater-item-selected-color, var(--sky-color-background-selected-soft));transition:background-color var(--sky-global-duration-short)}sky-repeater-item .sky-repeater-item-title{margin:0;flex-grow:1;line-height:var(--sky-override-repeater-item-title-line-height, var(--sky-font-line_height-body-m))}sky-repeater-item sky-repeater-item-content{display:block;margin:var(--sky-override-repeater-item-content-margin-top, var(--sky-space-stacked-s)) 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:var(--sky-override-repeater-item-content-collapsible-padding-right, calc(var(--sky-comp-button-borderless-space-inset-bottom) + var(--sky-comp-button-borderless-space-inset-top) + var(--sky-size-icon-s) + var(--sky-space-gap-text_action-s)))}sky-repeater-item .sky-repeater-item-collapsed .sky-repeater-item-content{display:none}sky-repeater-item .sky-repeater-item-grab-handle{cursor:grab;cursor:-webkit-grab;cursor:-moz-grab;margin:var(--sky-override-repeater-item-grab-handle-margin-vertical, 0) var(--sky-override-repeater-item-grab-handle-margin-right, var(--sky-space-gap-action_group-m)) var(--sky-override-repeater-item-grab-handle-margin-vertical, 0) 0}sky-repeater-item .sky-repeater-item-grab-handle.sky-btn-icon-borderless{height:var(--sky-override-repeater-item-grab-handle-size, \"\");padding:var(--sky-override-repeater-item-grab-handle-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left));width:var(--sky-override-repeater-item-grab-handle-size, \"\")}sky-repeater-item .sky-repeater-item-grab-handle.sky-btn-icon-borderless:active{box-shadow:var(--sky-override-repeater-item-grab-handle-box-shadow-active, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}sky-repeater-item .sky-repeater-item-grab-handle.sky-btn-icon-borderless:hover{color:var(--sky-override-repeater-item-grab-handle-color-hover, var(--sky-color-icon-deemphasized));box-shadow:var(--sky-override-repeater-item-grab-handle-box-shadow-hover, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover))}sky-repeater-item.sky-repeater-item-dragging .sky-repeater-item-grab-handle{cursor:grabbing}.hover-rows .sky-repeater-item:not(.sky-repeater-item-disabled){cursor:pointer}.hover-rows .sky-repeater-item:not(.sky-repeater-item-disabled):hover{background-color:var(--sky-override-repeater-item-selection-modal-background-color-hover);box-shadow:var(--sky-override-repeater-item-selection-modal-box-shadow-hover, inset 0 0 0 var(--sky-border-width-input-hover) var(--sky-color-border-input-hover))}.sky-split-view-drawer sky-repeater-item .sky-repeater-item:hover{box-shadow:var(--sky-override-repeater-item-split-view-box-shadow-hover, inset 0 0 0 var(--sky-border-width-input-hover) var(--sky-color-border-input-hover))}.sky-split-view-drawer sky-repeater-item .sky-repeater-item:active{background-color:var(--sky-override-repeater-item-split-view-background-color-active, var(--sky-color-background-selected-soft))}.sky-split-view-drawer sky-repeater-item .sky-repeater-item:active.sky-repeater-item-active{background-color:var(--sky-override-repeater-item-split-view-active-background-color-active, var(--sky-color-background-selected-soft))}.sky-split-view-drawer sky-repeater-item .sky-repeater-item:active{box-shadow:var(--sky-override-repeater-item-split-view-box-shadow-active, inset 0 0 0 var(--sky-border-width-input-active) var(--sky-color-border-input-active))}.sky-split-view-drawer sky-repeater-item .sky-repeater-item:focus-visible:not(:active){box-shadow:var(--sky-override-repeater-item-split-view-box-shadow-focus, inset 0 0 0 var(--sky-border-width-input-focus) var(--sky-color-border-input-focus))}\n"] }]
1494
1585
  }], ctorParameters: () => [], propDecorators: { disabled: [{
1495
1586
  type: Input
1496
1587
  }], itemName: [{
@@ -1599,6 +1690,20 @@ class SkyRepeaterComponent {
1599
1690
  * users can change its order.
1600
1691
  */
1601
1692
  this.reorderable = false;
1693
+ /**
1694
+ * The selection interaction to apply to repeater items. The valid options are `none`,
1695
+ * `single`, and `multiple`.
1696
+ * - `none` (the default) does not add any selection interaction.
1697
+ * - `single` lets users select one repeater item at a time. Clicking anywhere on a
1698
+ * repeater item, or pressing the Space or Enter key while it has focus, selects it and
1699
+ * clears any previously-selected item. Users can move focus between repeater items with
1700
+ * the arrow keys, Home, and End
1701
+ * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).
1702
+ * - `multiple` displays a checkbox on each repeater item so users can select
1703
+ * multiple items at a time. The checkbox on a disabled repeater item is disabled.
1704
+ * @default "none"
1705
+ */
1706
+ this.selectionMode = input(DEFAULT_SELECTION_MODE, { ...(ngDevMode ? { debugName: "selectionMode" } : /* istanbul ignore next */ {}), transform: (value) => value ?? DEFAULT_SELECTION_MODE });
1602
1707
  /**
1603
1708
  * Fires when the active repeater item changes.
1604
1709
  */
@@ -1621,6 +1726,13 @@ class SkyRepeaterComponent {
1621
1726
  this.#repeaterService = inject(SkyRepeaterService);
1622
1727
  this.#scrollableHostSvc = inject(SkyScrollableHostService);
1623
1728
  this.#logSvc = inject(SkyLogService);
1729
+ effect(() => {
1730
+ this.#repeaterService.selectionMode.set(this.selectionMode());
1731
+ untracked(() => {
1732
+ this.#updateForSelectionMode();
1733
+ this.#updateRole();
1734
+ });
1735
+ });
1624
1736
  this.#repeaterService.itemCollapseStateChange
1625
1737
  .pipe(takeUntil(this.#ngUnsubscribe))
1626
1738
  .subscribe((item) => {
@@ -1634,6 +1746,17 @@ class SkyRepeaterComponent {
1634
1746
  });
1635
1747
  }
1636
1748
  });
1749
+ this.#repeaterService.itemSelectStateChange
1750
+ .pipe(takeUntil(this.#ngUnsubscribe))
1751
+ .subscribe((item) => {
1752
+ if (this.selectionMode() === 'single' && item.isSelected) {
1753
+ this.items?.forEach((otherItem) => {
1754
+ if (otherItem !== item && otherItem.isSelected) {
1755
+ otherItem.isSelected = false;
1756
+ }
1757
+ });
1758
+ }
1759
+ });
1637
1760
  this.#repeaterService.activeItemIndexChange
1638
1761
  .pipe(takeUntil(this.#ngUnsubscribe))
1639
1762
  .subscribe((index) => {
@@ -1648,6 +1771,7 @@ class SkyRepeaterComponent {
1648
1771
  this.#emitTags();
1649
1772
  });
1650
1773
  this.#updateForExpandMode();
1774
+ this.#updateForSelectionMode();
1651
1775
  this.#adapterService.setRepeaterHost(this.#elementRef);
1652
1776
  }
1653
1777
  ngAfterContentInit() {
@@ -1665,6 +1789,7 @@ class SkyRepeaterComponent {
1665
1789
  .subscribe(() => {
1666
1790
  if (this.items?.length) {
1667
1791
  this.#updateForExpandMode(this.items.last);
1792
+ this.#updateForSelectionMode();
1668
1793
  this.#updateReorderability();
1669
1794
  this.#scheduleInitializeDragAndDrop();
1670
1795
  this.#repeaterService.items = this.items.toArray();
@@ -1677,6 +1802,7 @@ class SkyRepeaterComponent {
1677
1802
  });
1678
1803
  setTimeout(() => {
1679
1804
  this.#updateForExpandMode();
1805
+ this.#updateForSelectionMode();
1680
1806
  this.items?.forEach((item) => {
1681
1807
  item.reorderable = this.reorderable;
1682
1808
  });
@@ -1749,6 +1875,19 @@ class SkyRepeaterComponent {
1749
1875
  this.#updateRole();
1750
1876
  }
1751
1877
  }
1878
+ #updateForSelectionMode() {
1879
+ if (this.selectionMode() === 'single' && this.items) {
1880
+ let foundSelected = false;
1881
+ for (const item of this.items) {
1882
+ if (item.isSelected) {
1883
+ if (foundSelected) {
1884
+ item.isSelected = false;
1885
+ }
1886
+ foundSelected = true;
1887
+ }
1888
+ }
1889
+ }
1890
+ }
1752
1891
  #scheduleInitializeDragAndDrop() {
1753
1892
  // Guard against pending `setTimeout` callbacks firing after the component
1754
1893
  // is destroyed (e.g. during test teardown); `afterNextRender` would throw
@@ -1848,11 +1987,13 @@ class SkyRepeaterComponent {
1848
1987
  #updateRole() {
1849
1988
  // Determine a role using a hierarchy based on https://www.w3.org/WAI/ARIA/apg/
1850
1989
  // - If there are one or more interactions in the repeater item projected content or there is a context menu, use `grid`.
1851
- // - If there are no interactions, use `list`.
1852
- // Default to list role.
1853
- let autoRole = 'list';
1990
+ // - If `selectionMode` is "single" and there are no other interactions, use `listbox`.
1991
+ // - Otherwise, use `list`.
1992
+ // Default to list role, or listbox role when selectionMode is "single".
1993
+ let autoRole = this.selectionMode() === 'single' ? 'listbox' : 'list';
1854
1994
  const roleMap = {
1855
1995
  list: { item: 'listitem', title: undefined, content: undefined },
1996
+ listbox: { item: 'option', title: undefined, content: undefined },
1856
1997
  grid: { item: 'row', title: 'rowheader', content: 'gridcell' },
1857
1998
  };
1858
1999
  // Based on https://html.spec.whatwg.org/multipage/dom.html#interactive-content
@@ -1871,11 +2012,13 @@ class SkyRepeaterComponent {
1871
2012
  'video[controls]',
1872
2013
  '[contenteditable]',
1873
2014
  '.sky-repeater[role="grid"]',
2015
+ '.sky-repeater[role="listbox"]',
1874
2016
  ]
1875
2017
  .map((selector) => `sky-repeater-item-title ${selector}:not([hidden]), sky-repeater-item-content ${selector}:not([hidden])`)
1876
2018
  .concat([`sky-dropdown`])
1877
2019
  .join(', ');
1878
2020
  const hasInteraction = this.reorderable ||
2021
+ (this.selectionMode() === 'multiple' && !!this.items?.length) ||
1879
2022
  this.items?.some((item) => item.isCollapsible) ||
1880
2023
  this.items?.some((item) => !!item.selectable) ||
1881
2024
  !!this.#elementRef.nativeElement.querySelector(interactionSelector);
@@ -1904,11 +2047,11 @@ class SkyRepeaterComponent {
1904
2047
  }
1905
2048
  }
1906
2049
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyRepeaterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1907
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: SkyRepeaterComponent, isStandalone: false, selector: "sky-repeater", inputs: { activeIndex: "activeIndex", ariaLabel: "ariaLabel", reorderable: "reorderable", expandMode: "expandMode" }, outputs: { activeIndexChange: "activeIndexChange", orderChange: "orderChange" }, providers: [SkyRepeaterService, SkyRepeaterAdapterService], queries: [{ propertyName: "items", predicate: SkyRepeaterItemComponent }], usesOnChanges: true, ngImport: i0, template: "<ng-container #repeaterHost>\n <div\n class=\"sky-repeater\"\n [attr.role]=\"role\"\n [attr.aria-label]=\"ariaLabel || ('skyux_repeater_label' | skyLibResources)\"\n (cdkObserveContent)=\"onCdkObserveContent()\"\n >\n <ng-content />\n </div>\n</ng-container>\n", styles: [".sky-repeater{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$3.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }, { kind: "pipe", type: i2$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2050
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: SkyRepeaterComponent, isStandalone: false, selector: "sky-repeater", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: false, isRequired: false, transformFunction: null }, expandMode: { classPropertyName: "expandMode", publicName: "expandMode", isSignal: false, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndexChange: "activeIndexChange", orderChange: "orderChange" }, providers: [SkyRepeaterService, SkyRepeaterAdapterService], queries: [{ propertyName: "items", predicate: SkyRepeaterItemComponent }], usesOnChanges: true, ngImport: i0, template: "<ng-container #repeaterHost>\n <div\n class=\"sky-repeater\"\n [class.hover-rows]=\"selectionMode() === 'single'\"\n [attr.role]=\"role\"\n [attr.aria-label]=\"ariaLabel || ('skyux_repeater_label' | skyLibResources)\"\n (cdkObserveContent)=\"onCdkObserveContent()\"\n >\n <ng-content />\n </div>\n</ng-container>\n", styles: [".sky-repeater{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$3.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }, { kind: "pipe", type: i2$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1908
2051
  }
1909
2052
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyRepeaterComponent, decorators: [{
1910
2053
  type: Component,
1911
- args: [{ selector: 'sky-repeater', providers: [SkyRepeaterService, SkyRepeaterAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container #repeaterHost>\n <div\n class=\"sky-repeater\"\n [attr.role]=\"role\"\n [attr.aria-label]=\"ariaLabel || ('skyux_repeater_label' | skyLibResources)\"\n (cdkObserveContent)=\"onCdkObserveContent()\"\n >\n <ng-content />\n </div>\n</ng-container>\n", styles: [".sky-repeater{padding:0}\n"] }]
2054
+ args: [{ selector: 'sky-repeater', providers: [SkyRepeaterService, SkyRepeaterAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container #repeaterHost>\n <div\n class=\"sky-repeater\"\n [class.hover-rows]=\"selectionMode() === 'single'\"\n [attr.role]=\"role\"\n [attr.aria-label]=\"ariaLabel || ('skyux_repeater_label' | skyLibResources)\"\n (cdkObserveContent)=\"onCdkObserveContent()\"\n >\n <ng-content />\n </div>\n</ng-container>\n", styles: [".sky-repeater{padding:0}\n"] }]
1912
2055
  }], ctorParameters: () => [], propDecorators: { activeIndex: [{
1913
2056
  type: Input
1914
2057
  }], ariaLabel: [{
@@ -1917,7 +2060,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
1917
2060
  type: Input
1918
2061
  }], expandMode: [{
1919
2062
  type: Input
1920
- }], activeIndexChange: [{
2063
+ }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], activeIndexChange: [{
1921
2064
  type: Output
1922
2065
  }], orderChange: [{
1923
2066
  type: Output