@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.
package/fesm2022/skyux-lists.mjs
CHANGED
|
@@ -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,
|
|
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
|
|
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
|
-
|
|
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
|
|
1040
|
+
this.#_isDisabled.set(true);
|
|
1025
1041
|
}
|
|
1026
1042
|
else {
|
|
1027
|
-
this.#_isDisabled
|
|
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
|
|
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
|
|
1074
|
-
this.isSelectedChange.emit(
|
|
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.
|
|
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
|
-
|
|
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 `
|
|
1852
|
-
//
|
|
1853
|
-
|
|
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: "
|
|
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
|