@i-cell/ids-angular 0.0.0-watch

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.
Files changed (133) hide show
  1. package/README.md +24 -0
  2. package/accordion/index.d.ts +81 -0
  3. package/accordion/package.json +3 -0
  4. package/avatar/index.d.ts +66 -0
  5. package/avatar/package.json +3 -0
  6. package/badge/index.d.ts +61 -0
  7. package/badge/package.json +3 -0
  8. package/breadcrumb/index.d.ts +67 -0
  9. package/breadcrumb/package.json +3 -0
  10. package/button/index.d.ts +81 -0
  11. package/button/package.json +3 -0
  12. package/card/index.d.ts +91 -0
  13. package/card/package.json +3 -0
  14. package/checkbox/index.d.ts +137 -0
  15. package/checkbox/package.json +3 -0
  16. package/chip/index.d.ts +82 -0
  17. package/chip/package.json +3 -0
  18. package/core/index.d.ts +168 -0
  19. package/core/package.json +3 -0
  20. package/datepicker/index.d.ts +112 -0
  21. package/datepicker/package.json +3 -0
  22. package/dialog/index.d.ts +72 -0
  23. package/dialog/package.json +3 -0
  24. package/divider/index.d.ts +45 -0
  25. package/divider/package.json +3 -0
  26. package/fesm2022/i-cell-ids-angular-accordion.mjs +223 -0
  27. package/fesm2022/i-cell-ids-angular-accordion.mjs.map +1 -0
  28. package/fesm2022/i-cell-ids-angular-avatar.mjs +125 -0
  29. package/fesm2022/i-cell-ids-angular-avatar.mjs.map +1 -0
  30. package/fesm2022/i-cell-ids-angular-badge.mjs +172 -0
  31. package/fesm2022/i-cell-ids-angular-badge.mjs.map +1 -0
  32. package/fesm2022/i-cell-ids-angular-breadcrumb.mjs +313 -0
  33. package/fesm2022/i-cell-ids-angular-breadcrumb.mjs.map +1 -0
  34. package/fesm2022/i-cell-ids-angular-button.mjs +149 -0
  35. package/fesm2022/i-cell-ids-angular-button.mjs.map +1 -0
  36. package/fesm2022/i-cell-ids-angular-card.mjs +222 -0
  37. package/fesm2022/i-cell-ids-angular-card.mjs.map +1 -0
  38. package/fesm2022/i-cell-ids-angular-checkbox.mjs +350 -0
  39. package/fesm2022/i-cell-ids-angular-checkbox.mjs.map +1 -0
  40. package/fesm2022/i-cell-ids-angular-chip.mjs +166 -0
  41. package/fesm2022/i-cell-ids-angular-chip.mjs.map +1 -0
  42. package/fesm2022/i-cell-ids-angular-core.mjs +409 -0
  43. package/fesm2022/i-cell-ids-angular-core.mjs.map +1 -0
  44. package/fesm2022/i-cell-ids-angular-datepicker.mjs +860 -0
  45. package/fesm2022/i-cell-ids-angular-datepicker.mjs.map +1 -0
  46. package/fesm2022/i-cell-ids-angular-dialog.mjs +183 -0
  47. package/fesm2022/i-cell-ids-angular-dialog.mjs.map +1 -0
  48. package/fesm2022/i-cell-ids-angular-divider.mjs +76 -0
  49. package/fesm2022/i-cell-ids-angular-divider.mjs.map +1 -0
  50. package/fesm2022/i-cell-ids-angular-forms.mjs +972 -0
  51. package/fesm2022/i-cell-ids-angular-forms.mjs.map +1 -0
  52. package/fesm2022/i-cell-ids-angular-icon-button.mjs +120 -0
  53. package/fesm2022/i-cell-ids-angular-icon-button.mjs.map +1 -0
  54. package/fesm2022/i-cell-ids-angular-icon.mjs +158 -0
  55. package/fesm2022/i-cell-ids-angular-icon.mjs.map +1 -0
  56. package/fesm2022/i-cell-ids-angular-menu.mjs +154 -0
  57. package/fesm2022/i-cell-ids-angular-menu.mjs.map +1 -0
  58. package/fesm2022/i-cell-ids-angular-notification.mjs +167 -0
  59. package/fesm2022/i-cell-ids-angular-notification.mjs.map +1 -0
  60. package/fesm2022/i-cell-ids-angular-overlay-panel.mjs +72 -0
  61. package/fesm2022/i-cell-ids-angular-overlay-panel.mjs.map +1 -0
  62. package/fesm2022/i-cell-ids-angular-paginator.mjs +319 -0
  63. package/fesm2022/i-cell-ids-angular-paginator.mjs.map +1 -0
  64. package/fesm2022/i-cell-ids-angular-radio.mjs +312 -0
  65. package/fesm2022/i-cell-ids-angular-radio.mjs.map +1 -0
  66. package/fesm2022/i-cell-ids-angular-segmented-control-toggle.mjs +264 -0
  67. package/fesm2022/i-cell-ids-angular-segmented-control-toggle.mjs.map +1 -0
  68. package/fesm2022/i-cell-ids-angular-segmented-control.mjs +283 -0
  69. package/fesm2022/i-cell-ids-angular-segmented-control.mjs.map +1 -0
  70. package/fesm2022/i-cell-ids-angular-select.mjs +549 -0
  71. package/fesm2022/i-cell-ids-angular-select.mjs.map +1 -0
  72. package/fesm2022/i-cell-ids-angular-side-nav.mjs +375 -0
  73. package/fesm2022/i-cell-ids-angular-side-nav.mjs.map +1 -0
  74. package/fesm2022/i-cell-ids-angular-side-sheet.mjs +179 -0
  75. package/fesm2022/i-cell-ids-angular-side-sheet.mjs.map +1 -0
  76. package/fesm2022/i-cell-ids-angular-snackbar.mjs +440 -0
  77. package/fesm2022/i-cell-ids-angular-snackbar.mjs.map +1 -0
  78. package/fesm2022/i-cell-ids-angular-spinner.mjs +67 -0
  79. package/fesm2022/i-cell-ids-angular-spinner.mjs.map +1 -0
  80. package/fesm2022/i-cell-ids-angular-switch.mjs +181 -0
  81. package/fesm2022/i-cell-ids-angular-switch.mjs.map +1 -0
  82. package/fesm2022/i-cell-ids-angular-tab.mjs +142 -0
  83. package/fesm2022/i-cell-ids-angular-tab.mjs.map +1 -0
  84. package/fesm2022/i-cell-ids-angular-table.mjs +663 -0
  85. package/fesm2022/i-cell-ids-angular-table.mjs.map +1 -0
  86. package/fesm2022/i-cell-ids-angular-tag.mjs +116 -0
  87. package/fesm2022/i-cell-ids-angular-tag.mjs.map +1 -0
  88. package/fesm2022/i-cell-ids-angular-tooltip.mjs +586 -0
  89. package/fesm2022/i-cell-ids-angular-tooltip.mjs.map +1 -0
  90. package/fesm2022/i-cell-ids-angular.mjs +9 -0
  91. package/fesm2022/i-cell-ids-angular.mjs.map +1 -0
  92. package/forms/index.d.ts +470 -0
  93. package/forms/package.json +3 -0
  94. package/icon/index.d.ts +69 -0
  95. package/icon/package.json +3 -0
  96. package/icon-button/index.d.ts +68 -0
  97. package/icon-button/package.json +3 -0
  98. package/index.d.ts +2 -0
  99. package/menu/index.d.ts +68 -0
  100. package/menu/package.json +3 -0
  101. package/notification/index.d.ts +68 -0
  102. package/notification/package.json +3 -0
  103. package/overlay-panel/index.d.ts +41 -0
  104. package/overlay-panel/package.json +3 -0
  105. package/package.json +180 -0
  106. package/paginator/index.d.ts +122 -0
  107. package/paginator/package.json +3 -0
  108. package/radio/index.d.ts +95 -0
  109. package/radio/package.json +3 -0
  110. package/segmented-control/index.d.ts +98 -0
  111. package/segmented-control/package.json +3 -0
  112. package/segmented-control-toggle/index.d.ts +103 -0
  113. package/segmented-control-toggle/package.json +3 -0
  114. package/select/index.d.ts +103 -0
  115. package/select/package.json +3 -0
  116. package/side-nav/index.d.ts +107 -0
  117. package/side-nav/package.json +3 -0
  118. package/side-sheet/index.d.ts +84 -0
  119. package/side-sheet/package.json +3 -0
  120. package/snackbar/index.d.ts +149 -0
  121. package/snackbar/package.json +3 -0
  122. package/spinner/index.d.ts +41 -0
  123. package/spinner/package.json +3 -0
  124. package/switch/index.d.ts +89 -0
  125. package/switch/package.json +3 -0
  126. package/tab/index.d.ts +78 -0
  127. package/tab/package.json +3 -0
  128. package/table/index.d.ts +393 -0
  129. package/table/package.json +3 -0
  130. package/tag/index.d.ts +70 -0
  131. package/tag/package.json +3 -0
  132. package/tooltip/index.d.ts +96 -0
  133. package/tooltip/package.json +3 -0
@@ -0,0 +1,312 @@
1
+ import * as i0 from '@angular/core';
2
+ import { InjectionToken, inject, signal, input, computed, viewChild, output, ChangeDetectionStrategy, ViewEncapsulation, Component, contentChildren, isDevMode, forwardRef, Input, Directive } from '@angular/core';
3
+ import { IdsPosition, IdsOrientation, IdsSize, ComponentBase, coerceNumberAttribute, ComponentBaseWithDefaults, coerceBooleanAttribute, IdsVerticalPosition } from '@i-cell/ids-angular/core';
4
+ import { SelectionModel } from '@angular/cdk/collections';
5
+ import { NG_VALUE_ACCESSOR } from '@angular/forms';
6
+
7
+ const IdsRadioVariant = {
8
+ SURFACE: 'surface',
9
+ LIGHT: 'light',
10
+ DARK: 'dark',
11
+ };
12
+
13
+ class IdsRadioChangeEvent {
14
+ constructor(source, value) {
15
+ this.source = source;
16
+ this.value = value;
17
+ }
18
+ }
19
+
20
+ const IDS_RADIO_DEFAULT_CONFIG = new InjectionToken('IDS_RADIO_DEFAULT_CONFIG', {
21
+ providedIn: 'root',
22
+ factory: IDS_RADIO_DEFAULT_CONFIG_FACTORY,
23
+ });
24
+ function IDS_RADIO_DEFAULT_CONFIG_FACTORY() {
25
+ return {
26
+ size: IdsSize.COMPACT,
27
+ variant: IdsRadioVariant.SURFACE,
28
+ orientation: IdsOrientation.VERTICAL,
29
+ labelPosition: IdsPosition.RIGHT,
30
+ };
31
+ }
32
+
33
+ class IdsRadioComponent extends ComponentBase {
34
+ constructor() {
35
+ super(...arguments);
36
+ this._group = inject(IdsRadioGroupDirective, { optional: true, skipSelf: true });
37
+ this.selected = signal(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
38
+ this.inputId = input(this._uniqueId, ...(ngDevMode ? [{ debugName: "inputId" }] : []));
39
+ this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
40
+ this.ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel", alias: 'aria-label' }] : [{ alias: 'aria-label' }]));
41
+ this.ariaLabelledBy = input('', ...(ngDevMode ? [{ debugName: "ariaLabelledBy", alias: 'aria-labelledby' }] : [{ alias: 'aria-labelledby' }]));
42
+ this.ariaDescribedBy = input('', ...(ngDevMode ? [{ debugName: "ariaDescribedBy", alias: 'aria-describedby' }] : [{ alias: 'aria-describedby' }]));
43
+ this.tabIndex = input(0, ...(ngDevMode ? [{ debugName: "tabIndex", transform: coerceNumberAttribute }] : [{ transform: coerceNumberAttribute }]));
44
+ this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
45
+ this._isDisabled = computed(() => this.disabled() || this._group?.isDisabled(), ...(ngDevMode ? [{ debugName: "_isDisabled" }] : []));
46
+ this._name = computed(() => this._group?.name(), ...(ngDevMode ? [{ debugName: "_name" }] : []));
47
+ this._required = computed(() => this._group?.required(), ...(ngDevMode ? [{ debugName: "_required" }] : []));
48
+ this._ariaChecked = computed(() => this.selected(), ...(ngDevMode ? [{ debugName: "_ariaChecked" }] : []));
49
+ this._hostClasses = computed(() => this._getHostClasses([
50
+ this._group?.variant() ?? null,
51
+ this._group?.labelPosition() ?? null,
52
+ this._isDisabled() ? 'disabled' : null,
53
+ ]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
54
+ this._inputElement = viewChild.required('input');
55
+ this.changes = output();
56
+ }
57
+ get _hostName() {
58
+ return 'radio';
59
+ }
60
+ ngOnInit() {
61
+ if (!this._group) {
62
+ throw this._createHostError('component must be direct child of a radio group');
63
+ }
64
+ if (this._group.isItemPreSelectedByValue(this.value())) {
65
+ this.selected.set(true);
66
+ }
67
+ }
68
+ onChange() {
69
+ this.changes.emit(new IdsRadioChangeEvent(this, this.value()));
70
+ }
71
+ _touchTargetClick() {
72
+ if (!this.selected() && !this._isDisabled()) {
73
+ this._inputElement().nativeElement.focus();
74
+ this.onChange();
75
+ }
76
+ }
77
+ _innerCircleClick() {
78
+ if (!this.selected() && !this._isDisabled()) {
79
+ this._inputElement().nativeElement.focus();
80
+ this.onChange();
81
+ }
82
+ }
83
+ focus(options) {
84
+ this._inputElement().nativeElement.focus(options);
85
+ }
86
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
87
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.7", type: IdsRadioComponent, isStandalone: true, selector: "ids-radio", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changes: "changes" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ids-radio__input-wrapper\">\n <div class=\"ids-radio__touch-target\" (click)=\"_touchTargetClick()\"></div>\n <input\n #input\n class=\"ids-radio__native-control\"\n type=\"radio\"\n [id]=\"inputId()\"\n [checked]=\"selected()\"\n [disabled]=\"_isDisabled()\"\n [attr.name]=\"_name()\"\n [attr.value]=\"value()\"\n [required]=\"_required()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.aria-checked]=\"_ariaChecked()\"\n (change)=\"onChange()\"\n />\n <div class=\"ids-radio__inner-circle\" (click)=\"_innerCircleClick()\"></div>\n</div>\n<label class=\"ids-radio__label\" [for]=\"inputId()\">\n <ng-content />\n</label>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
88
+ }
89
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsRadioComponent, decorators: [{
90
+ type: Component,
91
+ args: [{ selector: 'ids-radio', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ids-radio__input-wrapper\">\n <div class=\"ids-radio__touch-target\" (click)=\"_touchTargetClick()\"></div>\n <input\n #input\n class=\"ids-radio__native-control\"\n type=\"radio\"\n [id]=\"inputId()\"\n [checked]=\"selected()\"\n [disabled]=\"_isDisabled()\"\n [attr.name]=\"_name()\"\n [attr.value]=\"value()\"\n [required]=\"_required()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.aria-checked]=\"_ariaChecked()\"\n (change)=\"onChange()\"\n />\n <div class=\"ids-radio__inner-circle\" (click)=\"_innerCircleClick()\"></div>\n</div>\n<label class=\"ids-radio__label\" [for]=\"inputId()\">\n <ng-content />\n</label>\n" }]
92
+ }] });
93
+
94
+ const defaultConfig = IDS_RADIO_DEFAULT_CONFIG_FACTORY();
95
+ class IdsRadioGroupDirective extends ComponentBaseWithDefaults {
96
+ constructor() {
97
+ super(...arguments);
98
+ this._defaultConfig = this._getDefaultConfig(defaultConfig, IDS_RADIO_DEFAULT_CONFIG);
99
+ this._items = contentChildren(IdsRadioComponent, ...(ngDevMode ? [{ debugName: "_items", descendants: true }] : [{ descendants: true }]));
100
+ this.name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
101
+ this.required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: coerceBooleanAttribute }] : [{ transform: coerceBooleanAttribute }]));
102
+ this.size = input(this._defaultConfig.size, ...(ngDevMode ? [{ debugName: "size" }] : []));
103
+ this.variant = input(this._defaultConfig.variant, ...(ngDevMode ? [{ debugName: "variant" }] : []));
104
+ this.orientation = input(this._defaultConfig.orientation, ...(ngDevMode ? [{ debugName: "orientation" }] : []));
105
+ this.labelPosition = input(this._defaultConfig.labelPosition, ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
106
+ this.isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
107
+ this._hostClasses = computed(() => this._getHostClasses([
108
+ this.size(),
109
+ this.orientation(),
110
+ this.labelPosition(),
111
+ ]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
112
+ this._onChange = () => { };
113
+ this._onTouched = () => { };
114
+ this.itemChanges = output();
115
+ }
116
+ get _hostName() {
117
+ return 'radio-group';
118
+ }
119
+ set disabled(value) {
120
+ if (value !== this.disabled) {
121
+ this.isDisabled.set(value);
122
+ }
123
+ }
124
+ _handleKeyDown(event) {
125
+ const navigationKeys = {
126
+ // eslint-disable-next-line @stylistic/js/array-bracket-newline, @stylistic/js/array-element-newline
127
+ horizontal: new Set(['ArrowLeft', 'ArrowRight', 'Enter', ' ']),
128
+ // eslint-disable-next-line @stylistic/js/array-bracket-newline, @stylistic/js/array-element-newline
129
+ vertical: new Set(['ArrowUp', 'ArrowDown', 'Enter', ' ']),
130
+ };
131
+ const orientation = this.orientation();
132
+ if (navigationKeys.horizontal.has(event.key) || navigationKeys.vertical.has(event.key)) {
133
+ event.preventDefault();
134
+ }
135
+ if (!navigationKeys[orientation].has(event.key)) {
136
+ return;
137
+ }
138
+ const items = this._items();
139
+ const target = event.target;
140
+ const inputId = target.id;
141
+ const index = items.findIndex((item) => item.inputId() === inputId);
142
+ switch (event.key) {
143
+ case 'ArrowUp': {
144
+ if (orientation === IdsOrientation.HORIZONTAL) {
145
+ return;
146
+ }
147
+ if (index === 0) {
148
+ return;
149
+ }
150
+ const prevItem = items[index - 1];
151
+ prevItem.focus();
152
+ break;
153
+ }
154
+ case 'ArrowLeft': {
155
+ if (orientation === IdsOrientation.VERTICAL) {
156
+ return;
157
+ }
158
+ if (index === 0) {
159
+ return;
160
+ }
161
+ const prevItem = items[index - 1];
162
+ prevItem.focus();
163
+ break;
164
+ }
165
+ case 'ArrowDown': {
166
+ if (orientation === IdsOrientation.HORIZONTAL) {
167
+ return;
168
+ }
169
+ if (index === (items.length - 1)) {
170
+ return;
171
+ }
172
+ const nextItem = items[index + 1];
173
+ nextItem.focus();
174
+ break;
175
+ }
176
+ case 'ArrowRight': {
177
+ if (orientation === IdsOrientation.VERTICAL) {
178
+ return;
179
+ }
180
+ if (index === (items.length - 1)) {
181
+ return;
182
+ }
183
+ const nextItem = items[index + 1];
184
+ nextItem.focus();
185
+ break;
186
+ }
187
+ case 'Enter':
188
+ case ' ': {
189
+ items[index].onChange();
190
+ break;
191
+ }
192
+ default:
193
+ return;
194
+ }
195
+ }
196
+ ngOnInit() {
197
+ this._selectionModel = new SelectionModel(false, undefined, false, this.valueCompareFn);
198
+ if (this._hasInvalidLabelPosition()) {
199
+ throw this._createHostError('invalid `orientation` + `labelPosition` combination.');
200
+ }
201
+ }
202
+ ngAfterContentChecked() {
203
+ const items = this._items();
204
+ const minItemCount = 2;
205
+ if (isDevMode() && (items.length < minItemCount)) {
206
+ throw this._createHostError('invalid count of radio items. Minimum item count is 2.');
207
+ }
208
+ this._selectionModel?.select(...this._items().filter((item) => item.selected()));
209
+ this._subscribeItemChanges();
210
+ }
211
+ writeValue(value) {
212
+ this._setSelectionByValue(value);
213
+ }
214
+ registerOnChange(fn) {
215
+ this._onChange = fn;
216
+ }
217
+ registerOnTouched(fn) {
218
+ this._onTouched = fn;
219
+ }
220
+ setDisabledState(isDisabled) {
221
+ this.isDisabled.set(isDisabled);
222
+ }
223
+ _subscribeItemChanges() {
224
+ this._items().forEach((item) => {
225
+ item.changes.subscribe((change) => {
226
+ this._handleItemChanges(change);
227
+ });
228
+ });
229
+ }
230
+ _handleItemChanges(change) {
231
+ const { source } = change;
232
+ this._clearSelection();
233
+ source.selected.set(true);
234
+ this._selectionModel?.select(source);
235
+ this.itemChanges.emit(change);
236
+ this._handleChange();
237
+ this._onTouched();
238
+ }
239
+ _setSelectionByValue(value) {
240
+ this._rawValue = value;
241
+ if (this._items().length === 0) {
242
+ return;
243
+ }
244
+ this._clearSelection();
245
+ this._selectValue(value);
246
+ }
247
+ _selectValue(value) {
248
+ const correspondingItem = this._items().find((item) => item.value() != null && item.value() === value);
249
+ if (correspondingItem) {
250
+ correspondingItem.selected.set(true);
251
+ this._selectionModel?.select(correspondingItem);
252
+ }
253
+ }
254
+ _clearSelection() {
255
+ this._selectionModel?.clear();
256
+ this._items().forEach((item) => {
257
+ item.selected.set(false);
258
+ });
259
+ }
260
+ _handleChange() {
261
+ const selectionModelValues = this._selectionModel?.selected?.map((item) => item.value());
262
+ this._onChange(selectionModelValues?.[0]);
263
+ }
264
+ isItemPreSelectedByValue(itemValue) {
265
+ if (this._rawValue === undefined) {
266
+ return false;
267
+ }
268
+ return itemValue === this._rawValue;
269
+ }
270
+ _hasInvalidLabelPosition() {
271
+ const orientation = this.orientation();
272
+ const labelPosition = this.labelPosition();
273
+ return (orientation === IdsOrientation.VERTICAL && Object.values(IdsVerticalPosition).some((pos) => pos === labelPosition));
274
+ }
275
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsRadioGroupDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
276
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.1.7", type: IdsRadioGroupDirective, isStandalone: true, selector: "ids-radio-group", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, valueCompareFn: { classPropertyName: "valueCompareFn", publicName: "valueCompareFn", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: coerceBooleanAttribute } }, outputs: { itemChanges: "itemChanges" }, host: { listeners: { "keydown": "_handleKeyDown($event)" } }, providers: [
277
+ {
278
+ provide: NG_VALUE_ACCESSOR,
279
+ useExisting: forwardRef(() => IdsRadioGroupDirective),
280
+ multi: true,
281
+ },
282
+ ], queries: [{ propertyName: "_items", predicate: IdsRadioComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
283
+ }
284
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsRadioGroupDirective, decorators: [{
285
+ type: Directive,
286
+ args: [{
287
+ selector: 'ids-radio-group',
288
+ standalone: true,
289
+ providers: [
290
+ {
291
+ provide: NG_VALUE_ACCESSOR,
292
+ useExisting: forwardRef(() => IdsRadioGroupDirective),
293
+ multi: true,
294
+ },
295
+ ],
296
+ host: {
297
+ '(keydown)': '_handleKeyDown($event)',
298
+ },
299
+ }]
300
+ }], propDecorators: { valueCompareFn: [{
301
+ type: Input
302
+ }], disabled: [{
303
+ type: Input,
304
+ args: [{ transform: coerceBooleanAttribute }]
305
+ }] } });
306
+
307
+ /**
308
+ * Generated bundle index. Do not edit.
309
+ */
310
+
311
+ export { IDS_RADIO_DEFAULT_CONFIG, IDS_RADIO_DEFAULT_CONFIG_FACTORY, IdsRadioChangeEvent, IdsRadioComponent, IdsRadioGroupDirective, IdsRadioVariant };
312
+ //# sourceMappingURL=i-cell-ids-angular-radio.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"i-cell-ids-angular-radio.mjs","sources":["../../../projects/widgets/radio/types/radio-variant.type.ts","../../../projects/widgets/radio/types/radio-events.class.ts","../../../projects/widgets/radio/radio-defaults.ts","../../../projects/widgets/radio/radio.component.ts","../../../projects/widgets/radio/radio.component.html","../../../projects/widgets/radio/radio-group.directive.ts","../../../projects/widgets/radio/i-cell-ids-angular-radio.ts"],"sourcesContent":["export const IdsRadioVariant = {\n SURFACE: 'surface',\n LIGHT: 'light',\n DARK: 'dark',\n} as const;\n\nexport type IdsRadioVariantType = (typeof IdsRadioVariant)[keyof typeof IdsRadioVariant];\n","import { IdsRadioComponent } from '../radio.component';\n\nexport class IdsRadioChangeEvent {\n constructor(\n public source: IdsRadioComponent,\n public value: unknown,\n ) {}\n}\n","import { IdsRadioVariant, IdsRadioVariantType } from './types/radio-variant.type';\n\nimport { InjectionToken } from '@angular/core';\nimport { IdsOrientation, IdsOrientationType, IdsPosition, IdsPositionType, IdsSize, IdsSizeType } from '@i-cell/ids-angular/core';\n\nexport interface IdsRadioDefaultConfig {\n size?: IdsSizeType\n variant?: IdsRadioVariantType\n orientation?: IdsOrientationType\n labelPosition?: IdsPositionType\n}\n\nexport const IDS_RADIO_DEFAULT_CONFIG = new InjectionToken<IdsRadioDefaultConfig>(\n 'IDS_RADIO_DEFAULT_CONFIG',\n {\n providedIn: 'root',\n factory: IDS_RADIO_DEFAULT_CONFIG_FACTORY,\n },\n);\n\nexport function IDS_RADIO_DEFAULT_CONFIG_FACTORY(): Required<IdsRadioDefaultConfig> {\n return {\n size: IdsSize.COMPACT,\n variant: IdsRadioVariant.SURFACE,\n orientation: IdsOrientation.VERTICAL,\n labelPosition: IdsPosition.RIGHT,\n };\n}\n","import { IdsRadioGroupDirective } from './radio-group.directive';\nimport { IdsRadioChangeEvent } from './types/radio-events.class';\n\nimport { ChangeDetectionStrategy, Component, computed, ElementRef, inject, input, OnInit, output, signal, viewChild, ViewEncapsulation } from '@angular/core';\nimport { coerceNumberAttribute, ComponentBase } from '@i-cell/ids-angular/core';\n\n@Component({\n selector: 'ids-radio',\n imports: [],\n templateUrl: './radio.component.html',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class IdsRadioComponent extends ComponentBase implements OnInit {\n protected override get _hostName(): string {\n return 'radio';\n }\n\n private _group = inject(IdsRadioGroupDirective, { optional: true, skipSelf: true });\n\n public selected = signal<boolean>(false);\n\n public inputId = input<string>(this._uniqueId);\n public value = input.required<unknown>();\n public ariaLabel = input<string>('', { alias: 'aria-label' });\n public ariaLabelledBy = input<string>('', { alias: 'aria-labelledby' });\n public ariaDescribedBy = input<string>('', { alias: 'aria-describedby' });\n public tabIndex = input<number, unknown>(0, { transform: coerceNumberAttribute });\n public disabled = input<boolean>(false);\n\n protected _isDisabled = computed(() => this.disabled() || this._group?.isDisabled());\n protected _name = computed(() => this._group?.name());\n protected _required = computed(() => this._group?.required());\n protected _ariaChecked = computed(() => this.selected());\n protected _hostClasses = computed(() => this._getHostClasses([\n this._group?.variant() ?? null,\n this._group?.labelPosition() ?? null,\n this._isDisabled() ? 'disabled' : null,\n ]));\n\n private _inputElement = viewChild.required<ElementRef<HTMLButtonElement>>('input');\n\n public readonly changes = output<IdsRadioChangeEvent>();\n\n public ngOnInit(): void {\n if (!this._group) {\n throw this._createHostError('component must be direct child of a radio group');\n }\n if (this._group.isItemPreSelectedByValue(this.value())) {\n this.selected.set(true);\n }\n }\n\n public onChange(): void {\n this.changes.emit(new IdsRadioChangeEvent(this, this.value()));\n }\n\n protected _touchTargetClick(): void {\n if (!this.selected() && !this._isDisabled()) {\n this._inputElement().nativeElement.focus();\n this.onChange();\n }\n }\n\n protected _innerCircleClick(): void {\n if (!this.selected() && !this._isDisabled()) {\n this._inputElement().nativeElement.focus();\n this.onChange();\n }\n }\n\n public focus(options?: FocusOptions): void {\n this._inputElement().nativeElement.focus(options);\n }\n}\n","<div class=\"ids-radio__input-wrapper\">\n <div class=\"ids-radio__touch-target\" (click)=\"_touchTargetClick()\"></div>\n <input\n #input\n class=\"ids-radio__native-control\"\n type=\"radio\"\n [id]=\"inputId()\"\n [checked]=\"selected()\"\n [disabled]=\"_isDisabled()\"\n [attr.name]=\"_name()\"\n [attr.value]=\"value()\"\n [required]=\"_required()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [attr.aria-checked]=\"_ariaChecked()\"\n (change)=\"onChange()\"\n />\n <div class=\"ids-radio__inner-circle\" (click)=\"_innerCircleClick()\"></div>\n</div>\n<label class=\"ids-radio__label\" [for]=\"inputId()\">\n <ng-content />\n</label>\n","import { IDS_RADIO_DEFAULT_CONFIG, IDS_RADIO_DEFAULT_CONFIG_FACTORY, IdsRadioDefaultConfig } from './radio-defaults';\nimport { IdsRadioComponent } from './radio.component';\nimport { IdsRadioChangeEvent } from './types/radio-events.class';\nimport { IdsRadioVariantType } from './types/radio-variant.type';\n\nimport { SelectionModel } from '@angular/cdk/collections';\nimport { AfterContentChecked, computed, contentChildren, Directive, forwardRef, Input, input, isDevMode, OnInit, output, signal } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { coerceBooleanAttribute, IdsOrientation, IdsOrientationType, IdsPositionType, IdsSizeType, IdsVerticalPosition, ComponentBaseWithDefaults } from '@i-cell/ids-angular/core';\n\nconst defaultConfig = IDS_RADIO_DEFAULT_CONFIG_FACTORY();\n\n@Directive({\n selector: 'ids-radio-group',\n standalone: true,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => IdsRadioGroupDirective),\n multi: true,\n },\n ],\n host: {\n '(keydown)': '_handleKeyDown($event)',\n },\n})\nexport class IdsRadioGroupDirective\n extends ComponentBaseWithDefaults<IdsRadioDefaultConfig>\n implements OnInit, AfterContentChecked, ControlValueAccessor {\n protected override get _hostName(): string {\n return 'radio-group';\n }\n\n protected readonly _defaultConfig = this._getDefaultConfig(defaultConfig, IDS_RADIO_DEFAULT_CONFIG);\n\n private _selectionModel?: SelectionModel<IdsRadioComponent>;\n private _rawValue: unknown;\n private _items = contentChildren<IdsRadioComponent>(IdsRadioComponent, { descendants: true });\n\n public name = input.required<string>();\n public required = input<boolean, unknown>(false, { transform: coerceBooleanAttribute });\n public size = input<IdsSizeType>(this._defaultConfig.size);\n public variant = input<IdsRadioVariantType>(this._defaultConfig.variant);\n public orientation = input<IdsOrientationType>(this._defaultConfig.orientation);\n public labelPosition = input<IdsPositionType>(this._defaultConfig.labelPosition);\n public isDisabled = signal<boolean>(false);\n\n protected _hostClasses = computed(() => this._getHostClasses([\n this.size(),\n this.orientation(),\n this.labelPosition(),\n ]));\n\n private _onChange: (value: unknown) => void = () => {};\n private _onTouched: () => unknown = () => {};\n\n @Input() public valueCompareFn?: (o1: IdsRadioComponent, o2: IdsRadioComponent) => boolean;\n @Input({ transform: coerceBooleanAttribute })\n set disabled(value: boolean) {\n if (value !== this.disabled) {\n this.isDisabled.set(value);\n }\n }\n\n public readonly itemChanges = output<IdsRadioChangeEvent>();\n\n private _handleKeyDown(event: KeyboardEvent): void {\n const navigationKeys: Record<IdsOrientationType, Set<string>> = {\n // eslint-disable-next-line @stylistic/js/array-bracket-newline, @stylistic/js/array-element-newline\n horizontal: new Set(['ArrowLeft', 'ArrowRight', 'Enter', ' ']),\n // eslint-disable-next-line @stylistic/js/array-bracket-newline, @stylistic/js/array-element-newline\n vertical: new Set(['ArrowUp', 'ArrowDown', 'Enter', ' ']),\n };\n\n const orientation = this.orientation();\n\n if (navigationKeys.horizontal.has(event.key) || navigationKeys.vertical.has(event.key)) {\n event.preventDefault();\n }\n if (!navigationKeys[orientation].has(event.key)) {\n return;\n }\n\n const items = this._items();\n const target = event.target as HTMLButtonElement;\n const inputId = target.id;\n const index = items.findIndex((item) => item.inputId() === inputId);\n\n switch (event.key) {\n case 'ArrowUp': {\n if (orientation === IdsOrientation.HORIZONTAL) {\n return;\n }\n if (index === 0) {\n return;\n }\n const prevItem = items[index - 1];\n prevItem.focus();\n break;\n }\n case 'ArrowLeft': {\n if (orientation === IdsOrientation.VERTICAL) {\n return;\n }\n if (index === 0) {\n return;\n }\n const prevItem = items[index - 1];\n prevItem.focus();\n break;\n }\n case 'ArrowDown': {\n if (orientation === IdsOrientation.HORIZONTAL) {\n return;\n }\n if (index === (items.length - 1)) {\n return;\n }\n const nextItem = items[index + 1];\n nextItem.focus();\n break;\n }\n case 'ArrowRight': {\n if (orientation === IdsOrientation.VERTICAL) {\n return;\n }\n if (index === (items.length - 1)) {\n return;\n }\n const nextItem = items[index + 1];\n nextItem.focus();\n break;\n }\n case 'Enter':\n case ' ': {\n items[index].onChange();\n break;\n }\n default:\n return;\n }\n }\n\n public ngOnInit(): void {\n this._selectionModel = new SelectionModel<IdsRadioComponent>(false, undefined, false, this.valueCompareFn);\n\n if (this._hasInvalidLabelPosition()) {\n throw this._createHostError('invalid `orientation` + `labelPosition` combination.');\n }\n }\n\n public ngAfterContentChecked(): void {\n const items = this._items();\n const minItemCount = 2;\n\n if (isDevMode() && (items.length < minItemCount)) {\n throw this._createHostError('invalid count of radio items. Minimum item count is 2.');\n }\n\n this._selectionModel?.select(...this._items().filter((item) => item.selected()));\n this._subscribeItemChanges();\n }\n\n public writeValue(value: unknown | unknown[]): void {\n this._setSelectionByValue(value);\n }\n\n public registerOnChange(fn: () => void): void {\n this._onChange = fn;\n }\n\n public registerOnTouched(fn: () => unknown): void {\n this._onTouched = fn;\n }\n\n public setDisabledState?(isDisabled: boolean): void {\n this.isDisabled.set(isDisabled);\n }\n\n private _subscribeItemChanges(): void {\n this._items().forEach((item) => {\n item.changes.subscribe(\n (change) => {\n this._handleItemChanges(change);\n },\n );\n });\n }\n\n private _handleItemChanges(change: IdsRadioChangeEvent): void {\n const { source } = change;\n this._clearSelection();\n source.selected.set(true);\n this._selectionModel?.select(source);\n this.itemChanges.emit(change);\n this._handleChange();\n this._onTouched();\n }\n\n private _setSelectionByValue(value: unknown | unknown[]): void {\n this._rawValue = value;\n\n if (this._items().length === 0) {\n return;\n }\n\n this._clearSelection();\n this._selectValue(value);\n }\n\n private _selectValue(value: unknown): void {\n const correspondingItem = this._items().find((item) => item.value() != null && item.value() === value);\n if (correspondingItem) {\n correspondingItem.selected.set(true);\n this._selectionModel?.select(correspondingItem);\n }\n }\n\n private _clearSelection(): void {\n this._selectionModel?.clear();\n this._items().forEach((item) => {\n item.selected.set(false);\n });\n }\n\n private _handleChange(): void {\n const selectionModelValues = this._selectionModel?.selected?.map((item) => item.value());\n this._onChange(selectionModelValues?.[0]);\n }\n\n public isItemPreSelectedByValue(itemValue: unknown): boolean {\n if (this._rawValue === undefined) {\n return false;\n }\n\n return itemValue === this._rawValue;\n }\n\n private _hasInvalidLabelPosition(): boolean {\n const orientation = this.orientation();\n const labelPosition = this.labelPosition();\n\n return (orientation === IdsOrientation.VERTICAL && Object.values(IdsVerticalPosition).some((pos) => pos === labelPosition));\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
@@ -0,0 +1,264 @@
1
+ import * as i0 from '@angular/core';
2
+ import { InjectionToken, contentChildren, input, signal, computed, output, isDevMode, forwardRef, Input, Directive, inject, viewChild, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
3
+ import { IdsSize, ComponentBaseWithDefaults, ComponentBase, coerceNumberAttribute, addClassPrefix } from '@i-cell/ids-angular/core';
4
+ import { SelectionModel } from '@angular/cdk/collections';
5
+ import { NG_VALUE_ACCESSOR } from '@angular/forms';
6
+ import { IdsIconComponent } from '@i-cell/ids-angular/icon';
7
+
8
+ const IdsSegmentedControlToggleAppearance = {
9
+ FILLED: 'filled',
10
+ OUTLINED: 'outlined',
11
+ };
12
+
13
+ class IdsSegmentedControlToggleItemChange {
14
+ constructor(source, value) {
15
+ this.source = source;
16
+ this.value = value;
17
+ }
18
+ }
19
+
20
+ const IdsSegmentedControlToggleVariant = {
21
+ SURFACE: 'surface',
22
+ LIGHT: 'light',
23
+ };
24
+ const IdsSegmentedControlToggleButtonVariant = {
25
+ PRIMARY: 'primary',
26
+ SURFACE: 'surface',
27
+ LIGHT: 'light',
28
+ };
29
+
30
+ const IDS_SEGMENTED_CONTROL_TOGGLE_DEFAULT_CONFIG = new InjectionToken('IDS_SEGMENTED_CONTROL_TOGGLE_DEFAULT_CONFIG', {
31
+ providedIn: 'root',
32
+ factory: IDS_SEGMENTED_CONTROL_TOGGLE_DEFAULT_CONFIG_FACTORY,
33
+ });
34
+ // eslint-disable-next-line id-length
35
+ function IDS_SEGMENTED_CONTROL_TOGGLE_DEFAULT_CONFIG_FACTORY() {
36
+ return {
37
+ appearance: IdsSegmentedControlToggleAppearance.FILLED,
38
+ size: IdsSize.COMPACT,
39
+ variant: IdsSegmentedControlToggleVariant.SURFACE,
40
+ buttonVariant: IdsSegmentedControlToggleButtonVariant.SURFACE,
41
+ };
42
+ }
43
+
44
+ const defaultConfig = IDS_SEGMENTED_CONTROL_TOGGLE_DEFAULT_CONFIG_FACTORY();
45
+ class IdsSegmentedControlToggleDirective extends ComponentBaseWithDefaults {
46
+ constructor() {
47
+ super(...arguments);
48
+ this._defaultConfig = this._getDefaultConfig(defaultConfig, IDS_SEGMENTED_CONTROL_TOGGLE_DEFAULT_CONFIG);
49
+ this._items = contentChildren(IdsSegmentedControlToggleItemComponent, ...(ngDevMode ? [{ debugName: "_items" }] : []));
50
+ this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
51
+ this.size = input(this._defaultConfig.size, ...(ngDevMode ? [{ debugName: "size" }] : []));
52
+ this.variant = input(this._defaultConfig.variant, ...(ngDevMode ? [{ debugName: "variant" }] : []));
53
+ this.buttonVariant = input(this._defaultConfig.buttonVariant, ...(ngDevMode ? [{ debugName: "buttonVariant" }] : []));
54
+ this.appearance = input(this._defaultConfig.appearance, ...(ngDevMode ? [{ debugName: "appearance" }] : []));
55
+ this.disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
56
+ this._hostClasses = computed(() => this._getHostClasses([
57
+ this.size(),
58
+ this.variant(),
59
+ this.appearance(),
60
+ this.disabled() ? 'disabled' : null,
61
+ ]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
62
+ this._onChange = () => { };
63
+ this._onTouched = () => { };
64
+ this.itemChanges = output();
65
+ }
66
+ get _hostName() {
67
+ return 'segmented-control-toggle';
68
+ }
69
+ _handleKeyDown(event) {
70
+ // eslint-disable-next-line @stylistic/js/array-bracket-newline, @stylistic/js/array-element-newline
71
+ const navigationKeys = ['ArrowLeft', 'ArrowRight', 'Enter', ' '];
72
+ if (!navigationKeys.includes(event.key)) {
73
+ return;
74
+ }
75
+ event.preventDefault();
76
+ const items = this._items();
77
+ const target = event.target;
78
+ const buttonId = target.id;
79
+ const index = items.findIndex((item) => item.id() === buttonId);
80
+ switch (event.key) {
81
+ case 'ArrowLeft': {
82
+ if (index === 0) {
83
+ return;
84
+ }
85
+ const prevItem = items[index - 1];
86
+ prevItem.focus();
87
+ break;
88
+ }
89
+ case 'ArrowRight': {
90
+ if (index === (items.length - 1)) {
91
+ return;
92
+ }
93
+ const nextItem = items[index + 1];
94
+ nextItem.focus();
95
+ break;
96
+ }
97
+ case 'Enter':
98
+ case ' ': {
99
+ items[index].onClick();
100
+ break;
101
+ }
102
+ default:
103
+ return;
104
+ }
105
+ }
106
+ ngOnInit() {
107
+ this._selectionModel = new SelectionModel(false, undefined, false, this.valueCompareFn);
108
+ }
109
+ ngAfterContentInit() {
110
+ const items = this._items();
111
+ const minItemCount = 2;
112
+ if (isDevMode() && (items.length < minItemCount)) {
113
+ throw this._createHostError('invalid count of segmented control items. Minimum item count is 2.');
114
+ }
115
+ this._selectionModel?.select(...this._items().filter((item) => item.selected()));
116
+ this._subscribeItemChanges();
117
+ }
118
+ writeValue(value) {
119
+ this._setSelectionByValue(value);
120
+ }
121
+ registerOnChange(fn) {
122
+ this._onChange = fn;
123
+ }
124
+ registerOnTouched(fn) {
125
+ this._onTouched = fn;
126
+ }
127
+ setDisabledState(isDisabled) {
128
+ this.disabled.set(isDisabled);
129
+ }
130
+ _subscribeItemChanges() {
131
+ this._items().forEach((item) => {
132
+ item.changes.subscribe((change) => {
133
+ this._handleItemChanges(change);
134
+ });
135
+ });
136
+ }
137
+ _handleItemChanges(change) {
138
+ const { source } = change;
139
+ this._clearSelection();
140
+ source.selected.set(true);
141
+ this._selectionModel?.select(source);
142
+ this.itemChanges.emit(change);
143
+ this._handleChange();
144
+ this._onTouched();
145
+ }
146
+ _setSelectionByValue(value) {
147
+ this._rawValue = value;
148
+ if (this._items().length === 0) {
149
+ return;
150
+ }
151
+ this._clearSelection();
152
+ this._selectValue(value);
153
+ }
154
+ _selectValue(value) {
155
+ const correspondingItem = this._items().find((item) => item.value() != null && item.value() === value);
156
+ if (correspondingItem) {
157
+ correspondingItem.selected.set(true);
158
+ this._selectionModel?.select(correspondingItem);
159
+ }
160
+ }
161
+ _clearSelection() {
162
+ this._selectionModel?.clear();
163
+ this._items().forEach((item) => {
164
+ item.selected.set(false);
165
+ });
166
+ }
167
+ _handleChange() {
168
+ const selectionModelValues = this._selectionModel?.selected?.map((item) => item.value());
169
+ this._onChange(selectionModelValues?.[0]);
170
+ }
171
+ isItemPreSelectedByValue(itemValue) {
172
+ if (this._rawValue === undefined) {
173
+ return false;
174
+ }
175
+ return itemValue === this._rawValue;
176
+ }
177
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsSegmentedControlToggleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
178
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.1.7", type: IdsSegmentedControlToggleDirective, isStandalone: true, selector: "ids-segmented-control-toggle[ngModel]:not([formControl]):not([formControlName]),\n ids-segmented-control-toggle[formControl]:not([ngModel]):not([formControlName]),\n ids-segmented-control-toggle[formControlName]:not([ngModel]):not([formControl])", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, buttonVariant: { classPropertyName: "buttonVariant", publicName: "buttonVariant", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, valueCompareFn: { classPropertyName: "valueCompareFn", publicName: "valueCompareFn", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { itemChanges: "itemChanges" }, host: { listeners: { "keydown": "_handleKeyDown($event)" }, properties: { "attr.role": "radiogroup" } }, providers: [
179
+ {
180
+ provide: NG_VALUE_ACCESSOR,
181
+ useExisting: forwardRef(() => IdsSegmentedControlToggleDirective),
182
+ multi: true,
183
+ },
184
+ ], queries: [{ propertyName: "_items", predicate: IdsSegmentedControlToggleItemComponent, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
185
+ }
186
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsSegmentedControlToggleDirective, decorators: [{
187
+ type: Directive,
188
+ args: [{
189
+ selector: `ids-segmented-control-toggle[ngModel]:not([formControl]):not([formControlName]),
190
+ ids-segmented-control-toggle[formControl]:not([ngModel]):not([formControlName]),
191
+ ids-segmented-control-toggle[formControlName]:not([ngModel]):not([formControl])`,
192
+ standalone: true,
193
+ providers: [
194
+ {
195
+ provide: NG_VALUE_ACCESSOR,
196
+ useExisting: forwardRef(() => IdsSegmentedControlToggleDirective),
197
+ multi: true,
198
+ },
199
+ ],
200
+ host: {
201
+ '[attr.role]': 'radiogroup',
202
+ '(keydown)': '_handleKeyDown($event)',
203
+ },
204
+ }]
205
+ }], propDecorators: { valueCompareFn: [{
206
+ type: Input
207
+ }] } });
208
+
209
+ class IdsSegmentedControlToggleItemComponent extends ComponentBase {
210
+ constructor() {
211
+ super(...arguments);
212
+ this._group = inject(IdsSegmentedControlToggleDirective, { optional: true, skipSelf: true });
213
+ this._buttonElement = viewChild.required('button');
214
+ this.selected = signal(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
215
+ this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
216
+ this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
217
+ this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
218
+ this.ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel", alias: 'aria-label' }] : [{ alias: 'aria-label' }]));
219
+ this.ariaLabelledBy = input('', ...(ngDevMode ? [{ debugName: "ariaLabelledBy", alias: 'aria-labeledby' }] : [{ alias: 'aria-labeledby' }]));
220
+ this.tabIndex = input(0, ...(ngDevMode ? [{ debugName: "tabIndex", transform: coerceNumberAttribute }] : [{ transform: coerceNumberAttribute }]));
221
+ this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
222
+ this._buttonId = computed(() => `${this.id()}-button`, ...(ngDevMode ? [{ debugName: "_buttonId" }] : []));
223
+ this._parentOrSelfDisabled = computed(() => this.disabled() || this._group?.disabled(), ...(ngDevMode ? [{ debugName: "_parentOrSelfDisabled" }] : []));
224
+ this._ariaPressed = signal(null, ...(ngDevMode ? [{ debugName: "_ariaPressed" }] : [])); // it is signal because of the common template
225
+ this._ariaChecked = computed(() => this.selected(), ...(ngDevMode ? [{ debugName: "_ariaChecked" }] : []));
226
+ this._role = signal('radio', ...(ngDevMode ? [{ debugName: "_role" }] : [])); // it is signal because of the common template
227
+ this._buttonName = computed(() => this._group?.name(), ...(ngDevMode ? [{ debugName: "_buttonName" }] : []));
228
+ this._buttonClasses = computed(() => addClassPrefix(this._hostClassName, this.selected() ? 'selected' : null), ...(ngDevMode ? [{ debugName: "_buttonClasses" }] : []));
229
+ this._hostClasses = computed(() => this._getHostClasses([this._group?.buttonVariant()]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
230
+ this.changes = output();
231
+ }
232
+ get _hostName() {
233
+ return 'segmented-control-toggle-item';
234
+ }
235
+ ngOnInit() {
236
+ if (!this._group) {
237
+ throw this._createHostError('component must be direct child of a segmented control toggle');
238
+ }
239
+ if (this._group.isItemPreSelectedByValue(this.value())) {
240
+ this.selected.set(true);
241
+ }
242
+ }
243
+ onClick() {
244
+ if (!this.selected()) {
245
+ this.changes.emit(new IdsSegmentedControlToggleItemChange(this, this.value()));
246
+ }
247
+ }
248
+ focus(options) {
249
+ this._buttonElement().nativeElement.focus(options);
250
+ }
251
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsSegmentedControlToggleItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
252
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsSegmentedControlToggleItemComponent, isStandalone: true, selector: "ids-segmented-control-toggle-item", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labeledby", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changes: "changes" }, viewQueries: [{ propertyName: "_buttonElement", first: true, predicate: ["button"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\n #button\n type=\"button\"\n [id]=\"_buttonId()\"\n [attr.role]=\"_role()\"\n [attr.tabindex]=\"_parentOrSelfDisabled() ? -1 : tabIndex()\"\n [attr.aria-pressed]=\"_ariaPressed()\"\n [attr.aria-checked]=\"_ariaChecked()\"\n [disabled]=\"_parentOrSelfDisabled() || null\"\n [attr.name]=\"_buttonName()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [class]=\"_buttonClasses()\"\n (click)=\"onClick()\"\n>\n @if (selected()) {\n <ids-icon aria-hidden=\"true\" fontIcon=\"check\" />\n }\n @if (!selected() || !label()) {\n <ng-content select=\"ids-icon\" />\n }\n\n {{ label() }}\n\n <ng-content select=\"[suffixContent]\" />\n</button>\n", dependencies: [{ kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
253
+ }
254
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsSegmentedControlToggleItemComponent, decorators: [{
255
+ type: Component,
256
+ args: [{ selector: 'ids-segmented-control-toggle-item', imports: [IdsIconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n #button\n type=\"button\"\n [id]=\"_buttonId()\"\n [attr.role]=\"_role()\"\n [attr.tabindex]=\"_parentOrSelfDisabled() ? -1 : tabIndex()\"\n [attr.aria-pressed]=\"_ariaPressed()\"\n [attr.aria-checked]=\"_ariaChecked()\"\n [disabled]=\"_parentOrSelfDisabled() || null\"\n [attr.name]=\"_buttonName()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [class]=\"_buttonClasses()\"\n (click)=\"onClick()\"\n>\n @if (selected()) {\n <ids-icon aria-hidden=\"true\" fontIcon=\"check\" />\n }\n @if (!selected() || !label()) {\n <ng-content select=\"ids-icon\" />\n }\n\n {{ label() }}\n\n <ng-content select=\"[suffixContent]\" />\n</button>\n" }]
257
+ }] });
258
+
259
+ /**
260
+ * Generated bundle index. Do not edit.
261
+ */
262
+
263
+ export { IDS_SEGMENTED_CONTROL_TOGGLE_DEFAULT_CONFIG, IDS_SEGMENTED_CONTROL_TOGGLE_DEFAULT_CONFIG_FACTORY, IdsSegmentedControlToggleAppearance, IdsSegmentedControlToggleButtonVariant, IdsSegmentedControlToggleDirective, IdsSegmentedControlToggleItemChange, IdsSegmentedControlToggleItemComponent, IdsSegmentedControlToggleVariant };
264
+ //# sourceMappingURL=i-cell-ids-angular-segmented-control-toggle.mjs.map