@design-system-rte/angular 1.2.1-rc3 → 1.2.1-rc4
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/esm2022/lib/components/dropdown/dropdown.directive.mjs +1 -1
- package/esm2022/lib/components/icon/icon-map.mjs +112 -112
- package/esm2022/lib/components/radio-button/radio-button.component.mjs +3 -3
- package/esm2022/lib/components/side-nav/side-nav.component.mjs +2 -2
- package/esm2022/lib/components/stepper/stepper.component.mjs +102 -0
- package/esm2022/lib/components/tooltip/tooltip.component.mjs +1 -1
- package/esm2022/lib/components/tooltip/tooltip.directive.mjs +2 -2
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/design-system-rte-angular.mjs +219 -123
- package/fesm2022/design-system-rte-angular.mjs.map +1 -1
- package/lib/components/dropdown/dropdown.directive.d.ts +1 -1
- package/lib/components/side-nav/side-nav.component.d.ts +3 -3
- package/lib/components/stepper/stepper.component.d.ts +22 -0
- package/lib/components/tooltip/tooltip.component.d.ts +1 -1
- package/lib/components/tooltip/tooltip.directive.d.ts +1 -1
- package/package.json +2 -2
- package/public-api.d.ts +1 -0
|
@@ -7,9 +7,9 @@ import { DomSanitizer } from '@angular/platform-browser';
|
|
|
7
7
|
import { HttpClient } from '@angular/common/http';
|
|
8
8
|
import { isValidIconName as isValidIconName$1 } from '@design-system-rte/core/components/icon/icon-utils';
|
|
9
9
|
import { labelSize } from '@design-system-rte/core/components/radio-button/radio-button.constants';
|
|
10
|
+
import { getAutoPlacement, getCoordinates, dividerAppearanceBySideNavAppearance as dividerAppearanceBySideNavAppearance$1 } from '@design-system-rte/core';
|
|
10
11
|
import { TOOLTIP_GAP, TOOLTIP_FADE_OUT_DURATION } from '@design-system-rte/core/components/tooltip/tooltip.constants';
|
|
11
12
|
import { getTooltipGap } from '@design-system-rte/core/components/tooltip/tooltip.utils';
|
|
12
|
-
import { getAutoPlacement, getCoordinates, getAutoPlacementDropdown, getAutoAlignment } from '@design-system-rte/core/components/utils/auto-placement';
|
|
13
13
|
import { FOCUSABLE_ELEMENTS_QUERY, FOCUSABLE_BUTTONS_QUERY } from '@design-system-rte/core/constants/dom/dom.constants';
|
|
14
14
|
import { getShowIcon, getShowText, getDisplayCount, getBadgeIconSize, getShowBadge, shouldDisplayBadge } from '@design-system-rte/core/components/badge/badge.utils';
|
|
15
15
|
import { splitButtonLeftIconSize, splitButtonRightIconSize } from '@design-system-rte/core/components/split-button/split-button.constants';
|
|
@@ -18,6 +18,7 @@ import { BehaviorSubject } from 'rxjs';
|
|
|
18
18
|
import { map } from 'rxjs/operators';
|
|
19
19
|
import { waitForNextFrame } from '@design-system-rte/core/common/animation';
|
|
20
20
|
import { DROPDOWN_ANIMATION_DURATION } from '@design-system-rte/core/components/dropdown/dropdown.constants';
|
|
21
|
+
import { getAutoPlacementDropdown, getAutoAlignment, getCoordinates as getCoordinates$1, getAutoPlacement as getAutoPlacement$1 } from '@design-system-rte/core/components/utils/auto-placement';
|
|
21
22
|
import { DropdownManager } from '@design-system-rte/core/components/dropdown/DropdownManager';
|
|
22
23
|
import { ButtonIconSize } from '@design-system-rte/core/components/button/common/common-button.constants';
|
|
23
24
|
import { loaderSize } from '@design-system-rte/core/components/loader/loader.constants';
|
|
@@ -35,6 +36,7 @@ import { IconSize, IconTypeMap } from '@design-system-rte/core/components/icon/i
|
|
|
35
36
|
import { APPEARANCE_CONFIG, SEARCHBAR_BORDER_RADIUS, SEARCHBAR_PADDING_LEFT, SEARCHBAR_BUTTON_WIDTH, SEARCHBAR_BUTTON_HEIGHT_COMPACT } from '@design-system-rte/core/components/searchbar/searchbar.constants';
|
|
36
37
|
import { sideNavCollapsedSize, sideNavPanelSize, dividerAppearanceBySideNavAppearance } from '@design-system-rte/core/components/side-nav/side-nav.constants';
|
|
37
38
|
import { getNavItemLabelIconSize } from '@design-system-rte/core/components/side-nav/nav-item/nav-item.utils';
|
|
39
|
+
import { isStepClickable, focusPreviousNotStepElement, focusNextNotStepElement, focusNextStepElement, focusPreviousStepElement } from '@design-system-rte/core/components/stepper/stepper.utils';
|
|
38
40
|
import { ToastDurationMap } from '@design-system-rte/core/components/toast/toast.constants';
|
|
39
41
|
import { getToastPriority } from '@design-system-rte/core/components/toast/toast.utils';
|
|
40
42
|
import { v4 } from 'uuid';
|
|
@@ -138,9 +140,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
138
140
|
|
|
139
141
|
// This file is auto-generated. Do not edit manually.
|
|
140
142
|
const RegularIcons = {
|
|
141
|
-
add: "add",
|
|
143
|
+
"add": "add",
|
|
142
144
|
"alt-route": "alt_route",
|
|
143
|
-
apps: "apps",
|
|
145
|
+
"apps": "apps",
|
|
144
146
|
"arrow-alt-down": "arrow_alt_down",
|
|
145
147
|
"arrow-alt-down-left": "arrow_alt_down_left",
|
|
146
148
|
"arrow-alt-down-right": "arrow_alt_down_right",
|
|
@@ -171,100 +173,100 @@ const RegularIcons = {
|
|
|
171
173
|
"arrow-up": "arrow_up",
|
|
172
174
|
"arrow-up-left": "arrow_up_left",
|
|
173
175
|
"arrow-up-right": "arrow_up_right",
|
|
174
|
-
asterisk: "asterisk",
|
|
176
|
+
"asterisk": "asterisk",
|
|
175
177
|
"attach-file": "attach_file",
|
|
176
178
|
"battery-alt-empty": "battery_alt_empty",
|
|
177
179
|
"battery-alt-full": "battery_alt_full",
|
|
178
180
|
"battery-charging": "battery_charging",
|
|
179
181
|
"battery-empty": "battery_empty",
|
|
180
182
|
"battery-full": "battery_full",
|
|
181
|
-
bluetooth: "bluetooth",
|
|
183
|
+
"bluetooth": "bluetooth",
|
|
182
184
|
"bluetooth-off": "bluetooth_off",
|
|
183
185
|
"chart-bar": "chart_bar",
|
|
184
186
|
"chart-bar-stacked": "chart_bar_stacked",
|
|
185
|
-
check: "check",
|
|
187
|
+
"check": "check",
|
|
186
188
|
"check-indeterminate": "check_indeterminate",
|
|
187
189
|
"check-small": "check_small",
|
|
188
190
|
"checkbox-empty": "checkbox_empty",
|
|
189
|
-
close: "close",
|
|
190
|
-
compare: "compare",
|
|
191
|
+
"close": "close",
|
|
192
|
+
"compare": "compare",
|
|
191
193
|
"copy-all": "copy_all",
|
|
192
194
|
"crisis-alert": "crisis_alert",
|
|
193
|
-
cut: "cut",
|
|
194
|
-
download: "download",
|
|
195
|
+
"cut": "cut",
|
|
196
|
+
"download": "download",
|
|
195
197
|
"download-done": "download_done",
|
|
196
198
|
"drag-handle": "drag_handle",
|
|
197
199
|
"drag-indicator": "drag_indicator",
|
|
198
|
-
exclamation: "exclamation",
|
|
200
|
+
"exclamation": "exclamation",
|
|
199
201
|
"explore-travel": "explore_travel",
|
|
200
202
|
"external-link": "external_link",
|
|
201
|
-
filter: "filter",
|
|
203
|
+
"filter": "filter",
|
|
202
204
|
"filter-off": "filter_off",
|
|
203
205
|
"first-page": "first_page",
|
|
204
|
-
forward: "forward",
|
|
205
|
-
fullscreen: "fullscreen",
|
|
206
|
+
"forward": "forward",
|
|
207
|
+
"fullscreen": "fullscreen",
|
|
206
208
|
"fullscreen-exit": "fullscreen_exit",
|
|
207
|
-
history: "history",
|
|
209
|
+
"history": "history",
|
|
208
210
|
"hourglass-empty": "hourglass_empty",
|
|
209
211
|
"info-i": "info_i",
|
|
210
|
-
language: "language",
|
|
212
|
+
"language": "language",
|
|
211
213
|
"last-page": "last_page",
|
|
212
|
-
link: "link",
|
|
214
|
+
"link": "link",
|
|
213
215
|
"link-off": "link_off",
|
|
214
|
-
list: "list",
|
|
216
|
+
"list": "list",
|
|
215
217
|
"location-disabled": "location_disabled",
|
|
216
|
-
login: "login",
|
|
217
|
-
logout: "logout",
|
|
218
|
-
menu: "menu",
|
|
218
|
+
"login": "login",
|
|
219
|
+
"logout": "logout",
|
|
220
|
+
"menu": "menu",
|
|
219
221
|
"menu-open": "menu_open",
|
|
220
|
-
monitoring: "monitoring",
|
|
222
|
+
"monitoring": "monitoring",
|
|
221
223
|
"more-down": "more_down",
|
|
222
224
|
"more-horiz": "more_horiz",
|
|
223
225
|
"more-up": "more_up",
|
|
224
226
|
"more-vert": "more_vert",
|
|
225
|
-
ohm: "ohm",
|
|
227
|
+
"ohm": "ohm",
|
|
226
228
|
"open-in-full": "open_in_full",
|
|
227
|
-
paste: "paste",
|
|
229
|
+
"paste": "paste",
|
|
228
230
|
"play-pause": "play_pause",
|
|
229
231
|
"power-input": "power_input",
|
|
230
232
|
"power-plug": "power_plug",
|
|
231
233
|
"power-settings": "power_settings",
|
|
232
234
|
"priority-high": "priority_high",
|
|
233
|
-
public: "public",
|
|
234
|
-
publish: "publish",
|
|
235
|
+
"public": "public",
|
|
236
|
+
"publish": "publish",
|
|
235
237
|
"question-mark": "question_mark",
|
|
236
|
-
radar: "radar",
|
|
238
|
+
"radar": "radar",
|
|
237
239
|
"radio-button-empty": "radio_button_empty",
|
|
238
|
-
redo: "redo",
|
|
239
|
-
reload: "reload",
|
|
240
|
-
remove: "remove",
|
|
241
|
-
reply: "reply",
|
|
240
|
+
"redo": "redo",
|
|
241
|
+
"reload": "reload",
|
|
242
|
+
"remove": "remove",
|
|
243
|
+
"reply": "reply",
|
|
242
244
|
"reply-all": "reply_all",
|
|
243
|
-
route: "route",
|
|
244
|
-
search: "search",
|
|
245
|
+
"route": "route",
|
|
246
|
+
"search": "search",
|
|
245
247
|
"side-navigation": "side_navigation",
|
|
246
|
-
sort: "sort",
|
|
248
|
+
"sort": "sort",
|
|
247
249
|
"support-agent": "support_agent",
|
|
248
|
-
timeline: "timeline",
|
|
250
|
+
"timeline": "timeline",
|
|
249
251
|
"trending-down": "trending_down",
|
|
250
252
|
"trending-flat": "trending_flat",
|
|
251
253
|
"trending-up": "trending_up",
|
|
252
|
-
tune: "tune",
|
|
253
|
-
undo: "undo",
|
|
254
|
-
upload: "upload",
|
|
255
|
-
water: "water",
|
|
254
|
+
"tune": "tune",
|
|
255
|
+
"undo": "undo",
|
|
256
|
+
"upload": "upload",
|
|
257
|
+
"water": "water",
|
|
256
258
|
"water-alt": "water_alt",
|
|
257
|
-
wifi: "wifi",
|
|
259
|
+
"wifi": "wifi",
|
|
258
260
|
"wifi-off": "wifi_off",
|
|
259
|
-
windmill: "windmill",
|
|
261
|
+
"windmill": "windmill",
|
|
260
262
|
"zoom-in": "zoom_in",
|
|
261
263
|
"zoom-out": "zoom_out",
|
|
262
264
|
};
|
|
263
265
|
const TogglableIcons = {
|
|
264
266
|
"add-circle": ["add_circle_outlined", "add_circle_filled"],
|
|
265
267
|
"admin-panel-settings": ["admin_panel_settings_outlined", "admin_panel_settings_filled"],
|
|
266
|
-
analytics: ["analytics_outlined", "analytics_filled"],
|
|
267
|
-
archive: ["archive_outlined", "archive_filled"],
|
|
268
|
+
"analytics": ["analytics_outlined", "analytics_filled"],
|
|
269
|
+
"archive": ["archive_outlined", "archive_filled"],
|
|
268
270
|
"arrow-circle-chevron-down": ["arrow_circle_chevron_down_outlined", "arrow_circle_chevron_down_filled"],
|
|
269
271
|
"arrow-circle-chevron-left": ["arrow_circle_chevron_left_outlined", "arrow_circle_chevron_left_filled"],
|
|
270
272
|
"arrow-circle-chevron-right": ["arrow_circle_chevron_right_outlined", "arrow_circle_chevron_right_filled"],
|
|
@@ -273,153 +275,153 @@ const TogglableIcons = {
|
|
|
273
275
|
"arrow-circle-left": ["arrow_circle_left_outlined", "arrow_circle_left_filled"],
|
|
274
276
|
"arrow-circle-right": ["arrow_circle_right_outlined", "arrow_circle_right_filled"],
|
|
275
277
|
"arrow-circle-up": ["arrow_circle_up_outlined", "arrow_circle_up_filled"],
|
|
276
|
-
article: ["article_outlined", "article_filled"],
|
|
278
|
+
"article": ["article_outlined", "article_filled"],
|
|
277
279
|
"assignment-complete": ["assignment_complete_outlined", "assignment_complete_filled"],
|
|
278
|
-
assignment: ["assignment_outlined", "assignment_filled"],
|
|
280
|
+
"assignment": ["assignment_outlined", "assignment_filled"],
|
|
279
281
|
"battery-alert": ["battery_alert_outlined", "battery_alert_filled"],
|
|
280
282
|
"battery-charging-full": ["battery_charging_full_outlined", "battery_charging_full_filled"],
|
|
281
283
|
"bolt-alt-circle": ["bolt_alt_circle_outlined", "bolt_alt_circle_filled"],
|
|
282
284
|
"bolt-alt": ["bolt_alt_outlined", "bolt_alt_filled"],
|
|
283
285
|
"bolt-circle": ["bolt_circle_outlined", "bolt_circle_filled"],
|
|
284
|
-
bolt: ["bolt_outlined", "bolt_filled"],
|
|
285
|
-
bookmark: ["bookmark_outlined", "bookmark_filled"],
|
|
286
|
-
bookmarks: ["bookmarks_outlined", "bookmarks_filled"],
|
|
287
|
-
build: ["build_outlined", "build_filled"],
|
|
286
|
+
"bolt": ["bolt_outlined", "bolt_filled"],
|
|
287
|
+
"bookmark": ["bookmark_outlined", "bookmark_filled"],
|
|
288
|
+
"bookmarks": ["bookmarks_outlined", "bookmarks_filled"],
|
|
289
|
+
"build": ["build_outlined", "build_filled"],
|
|
288
290
|
"calendar-available": ["calendar_available_outlined", "calendar_available_filled"],
|
|
289
291
|
"calendar-busy": ["calendar_busy_outlined", "calendar_busy_filled"],
|
|
290
292
|
"calendar-month": ["calendar_month_outlined", "calendar_month_filled"],
|
|
291
293
|
"calendar-today": ["calendar_today_outlined", "calendar_today_filled"],
|
|
292
|
-
call: ["call_outlined", "call_filled"],
|
|
293
|
-
cancel: ["cancel_outlined", "cancel_filled"],
|
|
294
|
-
category: ["category_outlined", "category_filled"],
|
|
294
|
+
"call": ["call_outlined", "call_filled"],
|
|
295
|
+
"cancel": ["cancel_outlined", "cancel_filled"],
|
|
296
|
+
"category": ["category_outlined", "category_filled"],
|
|
295
297
|
"chart-add": ["chart_add_outlined", "chart_add_filled"],
|
|
296
298
|
"chart-area": ["chart_area_outlined", "chart_area_filled"],
|
|
297
299
|
"chart-pie": ["chart_pie_outlined", "chart_pie_filled"],
|
|
298
300
|
"chart-table": ["chart_table_outlined", "chart_table_filled"],
|
|
299
301
|
"chat-alt": ["chat_alt_outlined", "chat_alt_filled"],
|
|
300
302
|
"chat-alt-unread": ["chat_alt_unread_outlined", "chat_alt_unread_filled"],
|
|
301
|
-
chat: ["chat_outlined", "chat_filled"],
|
|
303
|
+
"chat": ["chat_outlined", "chat_filled"],
|
|
302
304
|
"chat-unread": ["chat_unread_outlined", "chat_unread_filled"],
|
|
303
305
|
"check-circle": ["check_circle_outlined", "check_circle_filled"],
|
|
304
|
-
checkbox: ["checkbox_outlined", "checkbox_filled"],
|
|
306
|
+
"checkbox": ["checkbox_outlined", "checkbox_filled"],
|
|
305
307
|
"checkbox-indeterminate": ["checkbox_indeterminate_outlined", "checkbox_indeterminate_filled"],
|
|
306
|
-
clock: ["clock_outlined", "clock_filled"],
|
|
308
|
+
"clock": ["clock_outlined", "clock_filled"],
|
|
307
309
|
"cloud-download": ["cloud_download_outlined", "cloud_download_filled"],
|
|
308
|
-
cloud: ["cloud_outlined", "cloud_filled"],
|
|
310
|
+
"cloud": ["cloud_outlined", "cloud_filled"],
|
|
309
311
|
"cloud-off": ["cloud_off_outlined", "cloud_off_filled"],
|
|
310
312
|
"cloud-upload": ["cloud_upload_outlined", "cloud_upload_filled"],
|
|
311
313
|
"comment-add": ["comment_add_outlined", "comment_add_filled"],
|
|
312
|
-
comment: ["comment_outlined", "comment_filled"],
|
|
313
|
-
copy: ["copy_outlined", "copy_filled"],
|
|
314
|
-
dangerous: ["dangerous_outlined", "dangerous_filled"],
|
|
315
|
-
dashboard: ["dashboard_outlined", "dashboard_filled"],
|
|
316
|
-
database: ["database_outlined", "database_filled"],
|
|
317
|
-
delete: ["delete_outlined", "delete_filled"],
|
|
318
|
-
desktop: ["desktop_outlined", "desktop_filled"],
|
|
319
|
-
devices: ["devices_outlined", "devices_filled"],
|
|
320
|
-
draft: ["draft_outlined", "draft_filled"],
|
|
321
|
-
eco: ["eco_outlined", "eco_filled"],
|
|
322
|
-
edit: ["edit_outlined", "edit_filled"],
|
|
314
|
+
"comment": ["comment_outlined", "comment_filled"],
|
|
315
|
+
"copy": ["copy_outlined", "copy_filled"],
|
|
316
|
+
"dangerous": ["dangerous_outlined", "dangerous_filled"],
|
|
317
|
+
"dashboard": ["dashboard_outlined", "dashboard_filled"],
|
|
318
|
+
"database": ["database_outlined", "database_filled"],
|
|
319
|
+
"delete": ["delete_outlined", "delete_filled"],
|
|
320
|
+
"desktop": ["desktop_outlined", "desktop_filled"],
|
|
321
|
+
"devices": ["devices_outlined", "devices_filled"],
|
|
322
|
+
"draft": ["draft_outlined", "draft_filled"],
|
|
323
|
+
"eco": ["eco_outlined", "eco_filled"],
|
|
324
|
+
"edit": ["edit_outlined", "edit_filled"],
|
|
323
325
|
"electric-meter": ["electric_meter_outlined", "electric_meter_filled"],
|
|
324
|
-
error: ["error_outlined", "error_filled"],
|
|
325
|
-
explore: ["explore_outlined", "explore_filled"],
|
|
326
|
+
"error": ["error_outlined", "error_filled"],
|
|
327
|
+
"explore": ["explore_outlined", "explore_filled"],
|
|
326
328
|
"explore-off": ["explore_off_outlined", "explore_off_filled"],
|
|
327
329
|
"fast-forward": ["fast_forward_outlined", "fast_forward_filled"],
|
|
328
330
|
"fast-rewind": ["fast_rewind_outlined", "fast_rewind_filled"],
|
|
329
|
-
feedback: ["feedback_outlined", "feedback_filled"],
|
|
331
|
+
"feedback": ["feedback_outlined", "feedback_filled"],
|
|
330
332
|
"file-copy": ["file_copy_outlined", "file_copy_filled"],
|
|
331
333
|
"file-download": ["file_download_outlined", "file_download_filled"],
|
|
332
334
|
"file-upload": ["file_upload_outlined", "file_upload_filled"],
|
|
333
335
|
"filter-alt": ["filter_alt_outlined", "filter_alt_filled"],
|
|
334
336
|
"filter-alt-off": ["filter_alt_off_outlined", "filter_alt_off_filled"],
|
|
335
|
-
fire: ["fire_outlined", "fire_filled"],
|
|
337
|
+
"fire": ["fire_outlined", "fire_filled"],
|
|
336
338
|
"fit-screen": ["fit_screen_outlined", "fit_screen_filled"],
|
|
337
|
-
flag: ["flag_outlined", "flag_filled"],
|
|
338
|
-
flash: ["flash_outlined", "flash_filled"],
|
|
339
|
+
"flag": ["flag_outlined", "flag_filled"],
|
|
340
|
+
"flash": ["flash_outlined", "flash_filled"],
|
|
339
341
|
"flash-off": ["flash_off_outlined", "flash_off_filled"],
|
|
340
342
|
"folder-add": ["folder_add_outlined", "folder_add_filled"],
|
|
341
|
-
folder: ["folder_outlined", "folder_filled"],
|
|
343
|
+
"folder": ["folder_outlined", "folder_filled"],
|
|
342
344
|
"folder-move": ["folder_move_outlined", "folder_move_filled"],
|
|
343
345
|
"folder-open": ["folder_open_outlined", "folder_open_filled"],
|
|
344
346
|
"folder-shared": ["folder_shared_outlined", "folder_shared_filled"],
|
|
345
|
-
forum: ["forum_outlined", "forum_filled"],
|
|
347
|
+
"forum": ["forum_outlined", "forum_filled"],
|
|
346
348
|
"group-add": ["group_add_outlined", "group_add_filled"],
|
|
347
|
-
group: ["group_outlined", "group_filled"],
|
|
348
|
-
groups: ["groups_outlined", "groups_filled"],
|
|
349
|
-
headphones: ["headphones_outlined", "headphones_filled"],
|
|
350
|
-
heart: ["heart_outlined", "heart_filled"],
|
|
351
|
-
help: ["help_outlined", "help_filled"],
|
|
352
|
-
home: ["home_outlined", "home_filled"],
|
|
353
|
-
hourglass: ["hourglass_outlined", "hourglass_filled"],
|
|
349
|
+
"group": ["group_outlined", "group_filled"],
|
|
350
|
+
"groups": ["groups_outlined", "groups_filled"],
|
|
351
|
+
"headphones": ["headphones_outlined", "headphones_filled"],
|
|
352
|
+
"heart": ["heart_outlined", "heart_filled"],
|
|
353
|
+
"help": ["help_outlined", "help_filled"],
|
|
354
|
+
"home": ["home_outlined", "home_filled"],
|
|
355
|
+
"hourglass": ["hourglass_outlined", "hourglass_filled"],
|
|
354
356
|
"image-broken": ["image_broken_outlined", "image_broken_filled"],
|
|
355
|
-
image: ["image_outlined", "image_filled"],
|
|
357
|
+
"image": ["image_outlined", "image_filled"],
|
|
356
358
|
"image-gallery": ["image_gallery_outlined", "image_gallery_filled"],
|
|
357
|
-
inbox: ["inbox_outlined", "inbox_filled"],
|
|
358
|
-
info: ["info_outlined", "info_filled"],
|
|
359
|
-
keep: ["keep_outlined", "keep_filled"],
|
|
359
|
+
"inbox": ["inbox_outlined", "inbox_filled"],
|
|
360
|
+
"info": ["info_outlined", "info_filled"],
|
|
361
|
+
"keep": ["keep_outlined", "keep_filled"],
|
|
360
362
|
"keep-off": ["keep_off_outlined", "keep_off_filled"],
|
|
361
|
-
label: ["label_outlined", "label_filled"],
|
|
362
|
-
laptop: ["laptop_outlined", "laptop_filled"],
|
|
363
|
+
"label": ["label_outlined", "label_filled"],
|
|
364
|
+
"laptop": ["laptop_outlined", "laptop_filled"],
|
|
363
365
|
"left-panel-close": ["left_panel_close_outlined", "left_panel_close_filled"],
|
|
364
366
|
"left-panel-open": ["left_panel_open_outlined", "left_panel_open_filled"],
|
|
365
367
|
"light-off": ["light_off_outlined", "light_off_filled"],
|
|
366
368
|
"lightbulb-alt": ["lightbulb_alt_outlined", "lightbulb_alt_filled"],
|
|
367
369
|
"lightbulb-circle": ["lightbulb_circle_outlined", "lightbulb_circle_filled"],
|
|
368
|
-
lightbulb: ["lightbulb_outlined", "lightbulb_filled"],
|
|
370
|
+
"lightbulb": ["lightbulb_outlined", "lightbulb_filled"],
|
|
369
371
|
"list-alt": ["list_alt_outlined", "list_alt_filled"],
|
|
370
372
|
"location-me": ["location_me_outlined", "location_me_filled"],
|
|
371
373
|
"location-off": ["location_off_outlined", "location_off_filled"],
|
|
372
374
|
"location-on": ["location_on_outlined", "location_on_filled"],
|
|
373
|
-
lock: ["lock_outlined", "lock_filled"],
|
|
375
|
+
"lock": ["lock_outlined", "lock_filled"],
|
|
374
376
|
"lock-open": ["lock_open_outlined", "lock_open_filled"],
|
|
375
377
|
"lock-open-right": ["lock_open_right_outlined", "lock_open_right_filled"],
|
|
376
|
-
mail: ["mail_outlined", "mail_filled"],
|
|
378
|
+
"mail": ["mail_outlined", "mail_filled"],
|
|
377
379
|
"mail-unread": ["mail_unread_outlined", "mail_unread_filled"],
|
|
378
|
-
map: ["map_outlined", "map_filled"],
|
|
379
|
-
mic: ["mic_outlined", "mic_filled"],
|
|
380
|
+
"map": ["map_outlined", "map_filled"],
|
|
381
|
+
"mic": ["mic_outlined", "mic_filled"],
|
|
380
382
|
"mic-off": ["mic_off_outlined", "mic_off_filled"],
|
|
381
383
|
"mode-dark": ["mode_dark_outlined", "mode_dark_filled"],
|
|
382
384
|
"mode-light": ["mode_light_outlined", "mode_light_filled"],
|
|
383
|
-
notification: ["notification_outlined", "notification_filled"],
|
|
385
|
+
"notification": ["notification_outlined", "notification_filled"],
|
|
384
386
|
"notification-important": ["notification_important_outlined", "notification_important_filled"],
|
|
385
387
|
"notification-off": ["notification_off_outlined", "notification_off_filled"],
|
|
386
388
|
"notification-unread": ["notification_unread_outlined", "notification_unread_filled"],
|
|
387
|
-
palette: ["palette_outlined", "palette_filled"],
|
|
389
|
+
"palette": ["palette_outlined", "palette_filled"],
|
|
388
390
|
"pause-circle": ["pause_circle_outlined", "pause_circle_filled"],
|
|
389
|
-
pause: ["pause_outlined", "pause_filled"],
|
|
391
|
+
"pause": ["pause_outlined", "pause_filled"],
|
|
390
392
|
"photo-camera": ["photo_camera_outlined", "photo_camera_filled"],
|
|
391
393
|
"play-circle": ["play_circle_outlined", "play_circle_filled"],
|
|
392
|
-
play: ["play_outlined", "play_filled"],
|
|
393
|
-
power: ["power_outlined", "power_filled"],
|
|
394
|
+
"play": ["play_outlined", "play_filled"],
|
|
395
|
+
"power": ["power_outlined", "power_filled"],
|
|
394
396
|
"power-off": ["power_off_outlined", "power_off_filled"],
|
|
395
397
|
"power-plug-connect": ["power_plug_connect_outlined", "power_plug_connect_filled"],
|
|
396
398
|
"power-settings-circle": ["power_settings_circle_outlined", "power_settings_circle_filled"],
|
|
397
399
|
"power-solar": ["power_solar_outlined", "power_solar_filled"],
|
|
398
400
|
"power-switch": ["power_switch_outlined", "power_switch_filled"],
|
|
399
401
|
"power-wind": ["power_wind_outlined", "power_wind_filled"],
|
|
400
|
-
print: ["print_outlined", "print_filled"],
|
|
402
|
+
"print": ["print_outlined", "print_filled"],
|
|
401
403
|
"right-panel-close": ["right_panel_close_outlined", "right_panel_close_filled"],
|
|
402
404
|
"right-panel-open": ["right_panel_open_outlined", "right_panel_open_filled"],
|
|
403
|
-
save: ["save_outlined", "save_filled"],
|
|
404
|
-
send: ["send_outlined", "send_filled"],
|
|
405
|
-
settings: ["settings_outlined", "settings_filled"],
|
|
406
|
-
share: ["share_outlined", "share_filled"],
|
|
405
|
+
"save": ["save_outlined", "save_filled"],
|
|
406
|
+
"send": ["send_outlined", "send_filled"],
|
|
407
|
+
"settings": ["settings_outlined", "settings_filled"],
|
|
408
|
+
"share": ["share_outlined", "share_filled"],
|
|
407
409
|
"skip-next": ["skip_next_outlined", "skip_next_filled"],
|
|
408
410
|
"skip-previous": ["skip_previous_outlined", "skip_previous_filled"],
|
|
409
|
-
smartphone: ["smartphone_outlined", "smartphone_filled"],
|
|
410
|
-
star: ["star_outlined", "star_filled"],
|
|
411
|
+
"smartphone": ["smartphone_outlined", "smartphone_filled"],
|
|
412
|
+
"star": ["star_outlined", "star_filled"],
|
|
411
413
|
"sticky-note": ["sticky_note_outlined", "sticky_note_filled"],
|
|
412
414
|
"stop-circle": ["stop_circle_outlined", "stop_circle_filled"],
|
|
413
|
-
stop: ["stop_outlined", "stop_filled"],
|
|
414
|
-
subtitles: ["subtitles_outlined", "subtitles_filled"],
|
|
415
|
+
"stop": ["stop_outlined", "stop_filled"],
|
|
416
|
+
"subtitles": ["subtitles_outlined", "subtitles_filled"],
|
|
415
417
|
"text-snippet": ["text_snippet_outlined", "text_snippet_filled"],
|
|
416
418
|
"trash-restore": ["trash_restore_outlined", "trash_restore_filled"],
|
|
417
|
-
unarchive: ["unarchive_outlined", "unarchive_filled"],
|
|
419
|
+
"unarchive": ["unarchive_outlined", "unarchive_filled"],
|
|
418
420
|
"user-add": ["user_add_outlined", "user_add_filled"],
|
|
419
421
|
"user-circle": ["user_circle_outlined", "user_circle_filled"],
|
|
420
|
-
user: ["user_outlined", "user_filled"],
|
|
422
|
+
"user": ["user_outlined", "user_filled"],
|
|
421
423
|
"user-settings": ["user_settings_outlined", "user_settings_filled"],
|
|
422
|
-
verified: ["verified_outlined", "verified_filled"],
|
|
424
|
+
"verified": ["verified_outlined", "verified_filled"],
|
|
423
425
|
"video-camera": ["video_camera_outlined", "video_camera_filled"],
|
|
424
426
|
"video-camera-off": ["video_camera_off_outlined", "video_camera_off_filled"],
|
|
425
427
|
"video-gallery": ["video_gallery_outlined", "video_gallery_filled"],
|
|
@@ -435,8 +437,8 @@ const TogglableIcons = {
|
|
|
435
437
|
"volume-mute": ["volume_mute_outlined", "volume_mute_filled"],
|
|
436
438
|
"volume-off": ["volume_off_outlined", "volume_off_filled"],
|
|
437
439
|
"volume-up": ["volume_up_outlined", "volume_up_filled"],
|
|
438
|
-
warning: ["warning_outlined", "warning_filled"],
|
|
439
|
-
waterdrop: ["waterdrop_outlined", "waterdrop_filled"],
|
|
440
|
+
"warning": ["warning_outlined", "warning_filled"],
|
|
441
|
+
"waterdrop": ["waterdrop_outlined", "waterdrop_filled"],
|
|
440
442
|
};
|
|
441
443
|
function isValidIconName(iconName) {
|
|
442
444
|
return isValidIconName$1(iconName, RegularIcons, TogglableIcons);
|
|
@@ -533,11 +535,11 @@ class RadioButtonComponent {
|
|
|
533
535
|
this.isDisplayed = computed(() => !(this.disabled() && this.error()));
|
|
534
536
|
}
|
|
535
537
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
536
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: RadioButtonComponent, isStandalone: true, selector: "rte-radio-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div
|
|
538
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: RadioButtonComponent, isStandalone: true, selector: "rte-radio-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n *ngIf=\"isDisplayed()\"\n class=\"rte-radio-button-container\"\n [ngClass]=\"{ 'read-only': readOnly(), disabled: disabled() }\"\n>\n <input\n type=\"radio\"\n class=\"rte-radio-button\"\n [id]=\"label()\"\n [value]=\"label()\"\n [size]=\"labelSize\"\n [name]=\"groupName()\"\n [ngClass]=\"{ error: error(), 'read-only': readOnly() }\"\n [disabled]=\"disabled()\"\n />\n <div\n class=\"rte-radio-button-background\"\n [ngClass]=\"{ error: error(), 'read-only': readOnly(), disabled: disabled() }\"\n >\n <div class=\"rte-radio-button-outer\"></div>\n <div class=\"rte-radio-button-inner\"></div>\n </div>\n <label\n *ngIf=\"showLabel()\"\n class=\"rte-radio-button-label\"\n [for]=\"label()\"\n [ngClass]=\"{\n error: error(),\n 'read-only': readOnly(),\n disabled: disabled(),\n }\"\n >\n {{ label() }}\n </label>\n</div>\n", styles: [".rte-radio-button-container{display:flex;align-items:center;gap:12px;cursor:pointer}.rte-radio-button-container.read-only{cursor:default}.rte-radio-button-container.disabled{cursor:not-allowed}.rte-radio-button-container .rte-radio-button{cursor:pointer;appearance:none;position:absolute;display:flex;width:28px;height:16px;padding:0;justify-content:center;border-radius:999px;transition:box-shadow .3s ease-in-out;margin:0;z-index:1}.rte-radio-button-container .rte-radio-button.error{transition:box-shadow .3s ease-in-out}.rte-radio-button-container .rte-radio-button.error+.rte-radio-button-background .rte-radio-button-outer{border:1px solid var(--content-danger-default)}.rte-radio-button-container .rte-radio-button.error:checked+.rte-radio-button-background .rte-radio-button-outer{border:1px solid var(--content-danger-default)}.rte-radio-button-container .rte-radio-button.error:checked+.rte-radio-button-background .rte-radio-button-inner{background:var(--content-danger-default)}.rte-radio-button-container .rte-radio-button.error:hover+.rte-radio-button-background .rte-radio-button-outer{transition:box-shadow .15s ease-in-out;box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button-container .rte-radio-button.error:hover:checked+.rte-radio-button-background .rte-radio-button-outer{box-shadow:0 0 0 8px var(--background-danger-hover-opacity-20)}.rte-radio-button-container .rte-radio-button.read-only{cursor:default;pointer-events:none}.rte-radio-button-container .rte-radio-button.read-only:checked+.rte-radio-button-background .rte-radio-button-outer{border:1px solid var(--content-tertiary)}.rte-radio-button-container .rte-radio-button.read-only:checked+.rte-radio-button-background .rte-radio-button-inner{background:var(--content-tertiary)}.rte-radio-button-container .rte-radio-button.read-only.error+.rte-radio-button-background .rte-radio-button-outer{border:1px solid var(--content-danger-default)}.rte-radio-button-container .rte-radio-button:hover+.rte-radio-button-background .rte-radio-button-outer{transition:box-shadow .15s ease-in-out;box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button-container .rte-radio-button:hover:checked+.rte-radio-button-background .rte-radio-button-outer{box-shadow:0 0 0 8px var(--background-brand-hover-opacity-20)}.rte-radio-button-container .rte-radio-button:hover:disabled+.rte-radio-button-background .rte-radio-button-outer{box-shadow:none}.rte-radio-button-container .rte-radio-button:checked+.rte-radio-button-background .rte-radio-button-outer{border:1px solid var(--content-brand-default)}.rte-radio-button-container .rte-radio-button:checked+.rte-radio-button-background .rte-radio-button-inner{opacity:100%}.rte-radio-button-container .rte-radio-button:disabled{cursor:not-allowed}.rte-radio-button-container .rte-radio-button:disabled+.rte-radio-button-background .rte-radio-button-outer{border:1px solid var(--content-disabled)}.rte-radio-button-container .rte-radio-button:disabled+.rte-radio-button-background .rte-radio-button-inner{background:var(--content-disabled)}.rte-radio-button-container .rte-radio-button:focus-visible{outline:none}.rte-radio-button-container .rte-radio-button:focus-visible:after{border-radius:4px;content:\"\";position:absolute;top:-4px;left:-4px;width:24px;height:24px;outline:1px solid var(--border-brand-focused)}.rte-radio-button-container .rte-radio-button-background{display:inline-block;width:16px;height:16px;box-sizing:content-box;position:relative}.rte-radio-button-container .rte-radio-button-background .rte-radio-button-outer,.rte-radio-button-container .rte-radio-button-background .rte-radio-button-inner{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:999px;box-sizing:border-box}.rte-radio-button-container .rte-radio-button-background .rte-radio-button-outer{border:1px solid var(--content-tertiary);box-shadow:none}.rte-radio-button-container .rte-radio-button-background .rte-radio-button-inner{background:var(--content-brand-default);transform:scale(.6);opacity:0%}.rte-radio-button-container .rte-radio-button-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:var(--content-primary)}.rte-radio-button-container .rte-radio-button-label:hover{cursor:pointer}.rte-radio-button-container .rte-radio-button-label.read-only{pointer-events:none;color:var(--content-tertiary)}.rte-radio-button-container .rte-radio-button-label.disabled{cursor:not-allowed;color:var(--content-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
537
539
|
}
|
|
538
540
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioButtonComponent, decorators: [{
|
|
539
541
|
type: Component,
|
|
540
|
-
args: [{ selector: "rte-radio-button", imports: [CommonModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
542
|
+
args: [{ selector: "rte-radio-button", imports: [CommonModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"isDisplayed()\"\n class=\"rte-radio-button-container\"\n [ngClass]=\"{ 'read-only': readOnly(), disabled: disabled() }\"\n>\n <input\n type=\"radio\"\n class=\"rte-radio-button\"\n [id]=\"label()\"\n [value]=\"label()\"\n [size]=\"labelSize\"\n [name]=\"groupName()\"\n [ngClass]=\"{ error: error(), 'read-only': readOnly() }\"\n [disabled]=\"disabled()\"\n />\n <div\n class=\"rte-radio-button-background\"\n [ngClass]=\"{ error: error(), 'read-only': readOnly(), disabled: disabled() }\"\n >\n <div class=\"rte-radio-button-outer\"></div>\n <div class=\"rte-radio-button-inner\"></div>\n </div>\n <label\n *ngIf=\"showLabel()\"\n class=\"rte-radio-button-label\"\n [for]=\"label()\"\n [ngClass]=\"{\n error: error(),\n 'read-only': readOnly(),\n disabled: disabled(),\n }\"\n >\n {{ label() }}\n </label>\n</div>\n", styles: [".rte-radio-button-container{display:flex;align-items:center;gap:12px;cursor:pointer}.rte-radio-button-container.read-only{cursor:default}.rte-radio-button-container.disabled{cursor:not-allowed}.rte-radio-button-container .rte-radio-button{cursor:pointer;appearance:none;position:absolute;display:flex;width:28px;height:16px;padding:0;justify-content:center;border-radius:999px;transition:box-shadow .3s ease-in-out;margin:0;z-index:1}.rte-radio-button-container .rte-radio-button.error{transition:box-shadow .3s ease-in-out}.rte-radio-button-container .rte-radio-button.error+.rte-radio-button-background .rte-radio-button-outer{border:1px solid var(--content-danger-default)}.rte-radio-button-container .rte-radio-button.error:checked+.rte-radio-button-background .rte-radio-button-outer{border:1px solid var(--content-danger-default)}.rte-radio-button-container .rte-radio-button.error:checked+.rte-radio-button-background .rte-radio-button-inner{background:var(--content-danger-default)}.rte-radio-button-container .rte-radio-button.error:hover+.rte-radio-button-background .rte-radio-button-outer{transition:box-shadow .15s ease-in-out;box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button-container .rte-radio-button.error:hover:checked+.rte-radio-button-background .rte-radio-button-outer{box-shadow:0 0 0 8px var(--background-danger-hover-opacity-20)}.rte-radio-button-container .rte-radio-button.read-only{cursor:default;pointer-events:none}.rte-radio-button-container .rte-radio-button.read-only:checked+.rte-radio-button-background .rte-radio-button-outer{border:1px solid var(--content-tertiary)}.rte-radio-button-container .rte-radio-button.read-only:checked+.rte-radio-button-background .rte-radio-button-inner{background:var(--content-tertiary)}.rte-radio-button-container .rte-radio-button.read-only.error+.rte-radio-button-background .rte-radio-button-outer{border:1px solid var(--content-danger-default)}.rte-radio-button-container .rte-radio-button:hover+.rte-radio-button-background .rte-radio-button-outer{transition:box-shadow .15s ease-in-out;box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button-container .rte-radio-button:hover:checked+.rte-radio-button-background .rte-radio-button-outer{box-shadow:0 0 0 8px var(--background-brand-hover-opacity-20)}.rte-radio-button-container .rte-radio-button:hover:disabled+.rte-radio-button-background .rte-radio-button-outer{box-shadow:none}.rte-radio-button-container .rte-radio-button:checked+.rte-radio-button-background .rte-radio-button-outer{border:1px solid var(--content-brand-default)}.rte-radio-button-container .rte-radio-button:checked+.rte-radio-button-background .rte-radio-button-inner{opacity:100%}.rte-radio-button-container .rte-radio-button:disabled{cursor:not-allowed}.rte-radio-button-container .rte-radio-button:disabled+.rte-radio-button-background .rte-radio-button-outer{border:1px solid var(--content-disabled)}.rte-radio-button-container .rte-radio-button:disabled+.rte-radio-button-background .rte-radio-button-inner{background:var(--content-disabled)}.rte-radio-button-container .rte-radio-button:focus-visible{outline:none}.rte-radio-button-container .rte-radio-button:focus-visible:after{border-radius:4px;content:\"\";position:absolute;top:-4px;left:-4px;width:24px;height:24px;outline:1px solid var(--border-brand-focused)}.rte-radio-button-container .rte-radio-button-background{display:inline-block;width:16px;height:16px;box-sizing:content-box;position:relative}.rte-radio-button-container .rte-radio-button-background .rte-radio-button-outer,.rte-radio-button-container .rte-radio-button-background .rte-radio-button-inner{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:999px;box-sizing:border-box}.rte-radio-button-container .rte-radio-button-background .rte-radio-button-outer{border:1px solid var(--content-tertiary);box-shadow:none}.rte-radio-button-container .rte-radio-button-background .rte-radio-button-inner{background:var(--content-brand-default);transform:scale(.6);opacity:0%}.rte-radio-button-container .rte-radio-button-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:var(--content-primary)}.rte-radio-button-container .rte-radio-button-label:hover{cursor:pointer}.rte-radio-button-container .rte-radio-button-label.read-only{pointer-events:none;color:var(--content-tertiary)}.rte-radio-button-container .rte-radio-button-label.disabled{cursor:not-allowed;color:var(--content-disabled)}\n"] }]
|
|
541
543
|
}] });
|
|
542
544
|
|
|
543
545
|
class RadioButtonGroupComponent {
|
|
@@ -1411,7 +1413,7 @@ class DropdownDirective {
|
|
|
1411
1413
|
this.cdr.detectChanges();
|
|
1412
1414
|
const computedPosition = position === "auto" ? getAutoPlacementDropdown(triggerElement, dropdownMenuElement, "bottom") : position;
|
|
1413
1415
|
const autoAlignment = this.rteDropdownAlignment() ?? getAutoAlignment(triggerElement, dropdownMenuElement, computedPosition);
|
|
1414
|
-
const computedCoordinates = getCoordinates(computedPosition, triggerElement, dropdownMenuElement.children[0], this.rteDropdownOffset(), autoAlignment);
|
|
1416
|
+
const computedCoordinates = getCoordinates$1(computedPosition, triggerElement, dropdownMenuElement.children[0], this.rteDropdownOffset(), autoAlignment);
|
|
1415
1417
|
this.renderer.setStyle(dropdownMenuElement, "top", `${computedCoordinates.top}px`);
|
|
1416
1418
|
this.renderer.setStyle(dropdownMenuElement, "left", `${computedCoordinates.left}px`);
|
|
1417
1419
|
this.renderer.setStyle(dropdownMenuElement, "opacity", "1");
|
|
@@ -1932,8 +1934,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1932
1934
|
args: [{ selector: "rte-switch", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"switch-container appearance-{{ appearance() }}\"\n [ngClass]=\"{\n disabled: disabled(),\n 'read-only': readOnly(),\n checked: isChecked(),\n }\"\n (click)=\"handleClick($event)\"\n>\n <input\n type=\"checkbox\"\n role=\"switch\"\n class=\"switch\"\n [attr.aria-checked]=\"isChecked()\"\n [attr.aria-label]=\"label()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readOnly()\"\n [ariaLabel]=\"label()\"\n [name]=\"label()\"\n [ngClass]=\"{\n disabled: disabled(),\n 'read-only': readOnly(),\n checked: isChecked(),\n }\"\n [style.min-height.px]=\"switchHeight\"\n [style.min-width.px]=\"switchWidth\"\n [disabled]=\"disabled()\"\n [checked]=\"isChecked()\"\n />\n <div class=\"switch-icon-check\" [ngClass]=\"{ checked: isChecked() }\" (click)=\"handleClick($event)\">\n @if (showIcon()) {\n <rte-icon\n class=\"icon\"\n [name]=\"isChecked() ? 'check' : 'close'\"\n [size]=\"16\"\n (click)=\"handleClick($event)\"\n ></rte-icon>\n }\n </div>\n @if (showLabel() && label()) {\n <label class=\"switch-label\" [for]=\"label()\">\n {{ label() }}\n </label>\n }\n</div>\n", styles: [".switch-container{display:inline-flex;align-items:center;gap:12px;position:relative}.switch-container:hover .switch-icon-check{background-color:var(--background-neutral-bold-hover)}.switch-container.checked:hover .switch{background-color:var(--background-brand-selected-hover)}.switch-container .switch{appearance:none;cursor:pointer;position:relative;display:block;padding:0;margin:0;background-color:var(--background-neutral-regular-default);border:2px solid var(--border-primary);border-radius:999px;transition:background-color .4s ease-in-out,border-color .4s ease-in-out}.switch-container .switch:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.switch-container .checked{background-color:var(--background-brand-selected-default);border:none}.switch-container .switch-icon-check{content:\"\";cursor:pointer;display:flex;align-items:center;justify-content:center;position:absolute;background-color:var(--background-neutral-bold-default);color:var(--background-default);height:16px;width:16px;border-radius:999px;top:calc(50% - 8px);left:4px;transition:background-color .4s ease-in-out,color .4s ease-in-out,transform .4s ease-in-out}.switch-container .switch-icon-check.checked{background-color:var(--background-default);color:var(--background-brand-selected-default);transform:translate(16px)}.switch-container.appearance-neutral .switch{background-color:var(--background-neutral-regular-default);border:2px solid var(--border-primary)}.switch-container.appearance-neutral .switch-icon-check{background-color:var(--background-neutral-bold-default);color:var(--content-primary-inverse);border:none}.switch-container.appearance-neutral:hover .switch-icon-check{background-color:var(--background-neutral-bold-hover)}.switch-container.appearance-neutral.checked .switch{background-color:var(--background-neutral-bold-default);border:none}.switch-container.appearance-neutral.checked .switch-icon-check{background-color:var(--background-default);color:var(--content-tertiary)}.switch-container.appearance-neutral.checked:hover .switch{background-color:var(--background-neutral-bold-hover)}.switch-container.appearance-neutral.read-only{cursor:not-allowed}.switch-container.appearance-neutral.read-only:hover .switch{background-color:var(--background-disabled)}.switch-container.appearance-neutral.read-only .switch{background-color:var(--background-disabled);border:none}.switch-container.appearance-neutral.read-only .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-primary);border:2px solid var(--border-primary)}.switch-container.appearance-neutral.read-only .switch-icon-check .icon,.switch-container.appearance-neutral.disabled{cursor:not-allowed}.switch-container.appearance-neutral.disabled .switch{background-color:var(--background-disabled);border:none}.switch-container.appearance-neutral.disabled .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-disabled);border:2px solid var(--border-disabled)}.switch-container.appearance-neutral.disabled .switch-icon-check .icon{cursor:not-allowed}.switch-container .switch-label{cursor:pointer;font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:16px;line-height:24px;letter-spacing:0px;color:var(--content-primary);word-wrap:break-word}.switch-container.read-only{cursor:not-allowed}.switch-container.read-only:hover .switch{background-color:var(--background-disabled)}.switch-container.read-only .switch{cursor:not-allowed;background-color:var(--background-disabled);border:none}.switch-container.read-only .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-primary);border:2px solid var(--border-primary)}.switch-container.read-only .switch-label{cursor:not-allowed;color:var(--content-tertiary)}.switch-container.disabled{cursor:not-allowed}.switch-container.disabled:hover .switch{background-color:var(--background-disabled)}.switch-container.disabled .switch{cursor:not-allowed;background-color:var(--background-disabled);border:none}.switch-container.disabled .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-disabled);border:2px solid var(--border-disabled)}.switch-container.disabled .switch-label{cursor:not-allowed;color:var(--content-disabled)}\n"] }]
|
|
1933
1935
|
}] });
|
|
1934
1936
|
|
|
1935
|
-
const segmentClass = "rte-segment";
|
|
1936
|
-
const segmentSelector = `.${segmentClass}`;
|
|
1937
|
+
const segmentClass$1 = "rte-segment";
|
|
1938
|
+
const segmentSelector = `.${segmentClass$1}`;
|
|
1937
1939
|
class SegmentedControlComponent {
|
|
1938
1940
|
constructor() {
|
|
1939
1941
|
this.options = input([]);
|
|
@@ -2017,10 +2019,10 @@ class SegmentedControlComponent {
|
|
|
2017
2019
|
const currentActiveElement = document.activeElement;
|
|
2018
2020
|
const currentIndex = allFocusableElements.indexOf(currentActiveElement);
|
|
2019
2021
|
if (event.shiftKey) {
|
|
2020
|
-
focusPreviousNotSegmentElement(currentIndex, allFocusableElements, segmentClass);
|
|
2022
|
+
focusPreviousNotSegmentElement(currentIndex, allFocusableElements, segmentClass$1);
|
|
2021
2023
|
}
|
|
2022
2024
|
else {
|
|
2023
|
-
focusNextNotSegmentElement(currentIndex, allFocusableElements, segmentClass);
|
|
2025
|
+
focusNextNotSegmentElement(currentIndex, allFocusableElements, segmentClass$1);
|
|
2024
2026
|
}
|
|
2025
2027
|
}
|
|
2026
2028
|
}
|
|
@@ -2409,7 +2411,7 @@ class PopoverDirective {
|
|
|
2409
2411
|
if (this.popoverRef) {
|
|
2410
2412
|
const popoverElement = this.popoverRef.location.nativeElement.children[0];
|
|
2411
2413
|
const position = this.rtePopoverPosition() === "auto"
|
|
2412
|
-
? getAutoPlacement(this.hostElement, popoverElement, "top", this.rtePopoverArrow() ? POPOVER_GAP_ARROW : POPOVER_GAP)
|
|
2414
|
+
? getAutoPlacement$1(this.hostElement, popoverElement, "top", this.rtePopoverArrow() ? POPOVER_GAP_ARROW : POPOVER_GAP)
|
|
2413
2415
|
: this.rtePopoverPosition();
|
|
2414
2416
|
this.popoverRef.setInput("title", this.rtePopoverTitle());
|
|
2415
2417
|
this.popoverRef.setInput("content", this.rtePopoverContent());
|
|
@@ -2435,7 +2437,7 @@ class PopoverDirective {
|
|
|
2435
2437
|
const popoverElement = this.popoverRef.location.nativeElement.children[0];
|
|
2436
2438
|
const autoAlignment = getAutoAlignment(this.hostElement, popoverElement, this.popoverRef.instance.position());
|
|
2437
2439
|
this.popoverRef.setInput("alignment", autoAlignment);
|
|
2438
|
-
const positions = getCoordinates(this.popoverRef.instance.position(), this.hostElement, popoverElement, this.rtePopoverArrow() ? POPOVER_GAP_ARROW : POPOVER_GAP, autoAlignment);
|
|
2440
|
+
const positions = getCoordinates$1(this.popoverRef.instance.position(), this.hostElement, popoverElement, this.rtePopoverArrow() ? POPOVER_GAP_ARROW : POPOVER_GAP, autoAlignment);
|
|
2439
2441
|
this.renderer.setStyle(this.hostElement, "position", "relative");
|
|
2440
2442
|
this.renderer.setStyle(popoverElement, "position", "absolute");
|
|
2441
2443
|
this.renderer.setStyle(popoverElement, "top", `${positions.top}px`);
|
|
@@ -2948,7 +2950,7 @@ class SideNavComponent {
|
|
|
2948
2950
|
return this.isCollapsed() ? "arrow-double-right" : "arrow-double-left";
|
|
2949
2951
|
});
|
|
2950
2952
|
this.dividerAppearance = computed(() => {
|
|
2951
|
-
return dividerAppearanceBySideNavAppearance[this.appearance()];
|
|
2953
|
+
return dividerAppearanceBySideNavAppearance$1[this.appearance()];
|
|
2952
2954
|
});
|
|
2953
2955
|
effect(() => {
|
|
2954
2956
|
this.isCollapsed.set(this.collapsed());
|
|
@@ -3016,6 +3018,100 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
3016
3018
|
args: [{ selector: "rte-side-nav", imports: [CommonModule, BaseSideNavComponent, DividerComponent, NavItemComponent, NavMenuComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<rte-base-side-nav [size]=\"size()\" [collapsed]=\"isCollapsed()\" [appearance]=\"appearance()\">\n <div side-nav-header>\n <div class=\"side-nav-header-container\">\n <div class=\"side-nav-header {{ appearance() }}\" [ngClass]=\"{ collapsed: isCollapsed() }\">\n @if (headerConfig()?.link) {\n <a\n class=\"side-nav-header-title-container\"\n [href]=\"headerConfig()!.link!\"\n [attr.aria-label]=\"headerConfig()?.ariaLabel\"\n (click)=\"handleHeaderClick()\"\n >\n <div class=\"side-nav-header-title\">\n <div class=\"side-nav-header-identifier\">{{ headerConfig()?.identifier }}</div>\n @if (!isCollapsed()) {\n <h1 [ngClass]=\"{ hidden: !shouldShowTitle() }\">{{ headerConfig()?.title }}</h1>\n }\n </div>\n </a>\n } @else if (headerConfig()?.onClick) {\n <div\n class=\"side-nav-header-title-container\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-label]=\"headerConfig()?.ariaLabel\"\n (click)=\"handleHeaderClick()\"\n (keydown)=\"handleHeaderKeyDown($event)\"\n >\n <div class=\"side-nav-header-title\">\n <div class=\"side-nav-header-identifier\">{{ headerConfig()?.identifier }}</div>\n @if (!isCollapsed()) {\n <h1 [ngClass]=\"{ hidden: !shouldShowTitle() }\">{{ headerConfig()?.title }}</h1>\n }\n </div>\n </div>\n } @else {\n <div class=\"side-nav-header-title-container\">\n <div class=\"side-nav-header-title\">\n <div class=\"side-nav-header-identifier\">{{ headerConfig()?.identifier }}</div>\n @if (!isCollapsed()) {\n <h1 [ngClass]=\"{ hidden: !shouldShowTitle() }\">{{ headerConfig()?.title }}</h1>\n }\n </div>\n </div>\n }\n <div class=\"side-nav-header-version\" [ngClass]=\"{ hidden: !shouldShowTitle() }\">\n <span>{{ headerConfig()?.version }}</span>\n </div>\n </div>\n <rte-divider [appearance]=\"dividerAppearance()\" />\n </div>\n </div>\n <div side-nav-body>\n <div class=\"side-nav-body\">\n <ul>\n @for (item of items(); track item.label) {\n @if (hasNestedItems(item)) {\n <rte-nav-menu\n [id]=\"item.id\"\n [label]=\"item.label\"\n [icon]=\"item.icon\"\n [showIcon]=\"item.showIcon ?? true\"\n [collapsed]=\"isCollapsed()\"\n [link]=\"item.link\"\n [open]=\"item.open\"\n [items]=\"item.items || []\"\n [appearance]=\"appearance()\"\n [badge]=\"item.badge\"\n [showDivider]=\"item.showDivider!\"\n (openChange)=\"handleMenuOpenChange($event)\"\n />\n } @else {\n <li>\n <rte-nav-item\n [id]=\"item.id\"\n [label]=\"item.label\"\n [icon]=\"item.icon\"\n [showIcon]=\"item.showIcon ?? true\"\n [collapsed]=\"isCollapsed()\"\n [link]=\"item.link\"\n [appearance]=\"appearance()\"\n [active]=\"item.active ?? false\"\n [badge]=\"item.badge\"\n (itemClick)=\"handleItemClick(item.id || item.label)\"\n ></rte-nav-item>\n </li>\n @if (item.showDivider) {\n <rte-divider [appearance]=\"dividerAppearance()\" />\n }\n }\n }\n </ul>\n </div>\n </div>\n @if (footerItems()?.length || collapsible()) {\n <div side-nav-footer>\n <div class=\"side-nav-footer-container\">\n @if (footerItems()?.length) {\n <div class=\"side-nav-footer-items\">\n <ul>\n @for (item of footerItems()!; track item.id || item.label) {\n @if (hasNestedItems(item)) {\n <rte-nav-menu\n [id]=\"item.id\"\n [label]=\"item.label\"\n [icon]=\"item.icon\"\n [showIcon]=\"item.showIcon ?? true\"\n [collapsed]=\"isCollapsed()\"\n [link]=\"item.link\"\n [open]=\"item.open\"\n [items]=\"item.items || []\"\n [appearance]=\"appearance()\"\n [badge]=\"item.badge\"\n [showDivider]=\"item.showDivider!\"\n (openChange)=\"handleFooterMenuOpenChange($event)\"\n />\n } @else {\n <li>\n <rte-nav-item\n [id]=\"item.id\"\n [label]=\"item.label\"\n [icon]=\"item.icon\"\n [showIcon]=\"item.showIcon ?? true\"\n [collapsed]=\"isCollapsed()\"\n [link]=\"item.link\"\n [appearance]=\"appearance()\"\n [active]=\"item.active ?? false\"\n [badge]=\"item.badge\"\n (itemClick)=\"handleFooterItemClick(item.id || item.label)\"\n ></rte-nav-item>\n </li>\n @if (item.showDivider) {\n <rte-divider [appearance]=\"dividerAppearance()\" />\n }\n }\n }\n </ul>\n </div>\n }\n <rte-divider [appearance]=\"dividerAppearance()\" />\n @if (collapsible()) {\n <div class=\"side-nav-footer\">\n <div class=\"collapsible-section\">\n <ul>\n <li>\n <rte-nav-item\n [label]=\"isCollapsed() ? 'Ouvrir le menu' : 'R\u00E9duire le menu'\"\n [icon]=\"collapseIcon()\"\n [collapsed]=\"isCollapsed()\"\n [appearance]=\"appearance()\"\n (itemClick)=\"handleCollapseClick()\"\n />\n </li>\n </ul>\n </div>\n </div>\n }\n </div>\n </div>\n }\n <div side-nav-content>\n <ng-content select=\"[content]\"></ng-content>\n </div>\n</rte-base-side-nav>\n", styles: [".side-nav-header-container{display:flex;padding:4px;flex-direction:column;justify-content:center;align-items:flex-start;flex-shrink:0;align-self:stretch;height:120px;min-height:120px;max-height:120px}.side-nav-header-container.collapsed{align-items:center;justify-content:center;padding:4px}.side-nav-header{display:flex;position:relative;padding:20px 8px;flex-direction:column;align-items:flex-start;gap:4px;flex:1 0 0;align-self:stretch;height:120px;transition:opacity .3s}.side-nav-header.collapsed{padding:8px;justify-content:center;align-items:center;flex:1 0 0;align-self:stretch}.side-nav-header.collapsed .side-nav-header-title-container{padding:8px;justify-content:center;align-items:center;flex-grow:0;gap:0;align-self:auto}.side-nav-header.collapsed .side-nav-header-title-container .side-nav-header-title{gap:0}.side-nav-header.neutral .side-nav-header-title-container[href]:hover,.side-nav-header.neutral .side-nav-header-title-container[role=button]:hover{background:var(--background-neutral-navigation-hover);box-shadow:0 1px 2px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient)}.side-nav-header .side-nav-header-title-container{display:flex;padding:0 8px;align-items:center;gap:8px;flex:1 0 0;align-self:stretch;text-decoration:none;color:inherit}.side-nav-header .side-nav-header-title-container[href],.side-nav-header .side-nav-header-title-container[role=button]{cursor:pointer}.side-nav-header .side-nav-header-title-container[href]:hover,.side-nav-header .side-nav-header-title-container[role=button]:hover{border-radius:4px;opacity:100%;background:var(--background-brand-navigation-hover)}.side-nav-header .side-nav-header-title-container .side-nav-header-title{display:flex;align-items:center;gap:8px}.side-nav-header .side-nav-header-title-container .side-nav-header-title .side-nav-header-identifier{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1 0 0;align-self:stretch;color:var(--content-brand-navigation-default);text-align:center;-webkit-user-select:none;user-select:none;border-radius:4px;background:var(--background-brand-navigation-pressed);min-width:24px;height:24px}.side-nav-header .side-nav-header-title-container .side-nav-header-title h1{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;-webkit-user-select:none;user-select:none;align-self:stretch;margin:0;transition:opacity .3s}.side-nav-header .side-nav-header-title-container .side-nav-header-title h1.hidden{opacity:0;max-height:0;padding:0;margin:0}.side-nav-header .side-nav-header-version{display:flex;position:absolute;bottom:4px;right:8px;flex-direction:column;justify-content:flex-end;align-items:flex-end;gap:0px;align-self:stretch;font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:10px;line-height:14px;letter-spacing:0px;transition:opacity .3s,max-height .3s;max-height:50px;overflow:hidden;opacity:1}.side-nav-header .side-nav-header-version.hidden{opacity:0;max-height:0;padding:0;margin:0}.side-nav-body{display:flex;padding:16px 8px;flex-direction:column;align-items:flex-start;gap:8px;flex:1 0 0;overflow-x:hidden;overflow-y:auto;width:100%;box-sizing:border-box}.side-nav-body ul{list-style:none;padding:0;margin:0;width:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:8px}.side-nav-footer-container{padding:8px}.side-nav-footer-container .side-nav-footer{display:flex;flex-direction:column;align-items:center;justify-content:space-between;box-sizing:border-box;width:100%;margin-top:4px}.side-nav-footer-items{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%;box-sizing:border-box;margin-bottom:8px}.side-nav-footer-items ul{list-style:none;padding:0;margin:0;width:100%;box-sizing:border-box}.collapsible-section{display:flex;padding:4px 0;flex-direction:column;align-items:flex-start;align-self:stretch}.collapsible-section ul{list-style:none;padding:0;margin:0;width:100%;box-sizing:border-box}\n"] }]
|
|
3017
3019
|
}], ctorParameters: () => [] });
|
|
3018
3020
|
|
|
3021
|
+
const segmentClass = "rte-stepper-button";
|
|
3022
|
+
class StepperComponent {
|
|
3023
|
+
constructor() {
|
|
3024
|
+
this.steps = input([]);
|
|
3025
|
+
this.activeStepId = input();
|
|
3026
|
+
this.orientation = input("horizontal");
|
|
3027
|
+
this.iconSize = IconSize;
|
|
3028
|
+
this.stepperRef = inject(ElementRef);
|
|
3029
|
+
this.clickStep = output();
|
|
3030
|
+
this.lastKeydown = null;
|
|
3031
|
+
this.onGlobalKeyDown = (event) => {
|
|
3032
|
+
this.lastKeydown = event.key;
|
|
3033
|
+
};
|
|
3034
|
+
}
|
|
3035
|
+
ngAfterViewInit() {
|
|
3036
|
+
window.addEventListener("keydown", this.onGlobalKeyDown.bind(this));
|
|
3037
|
+
}
|
|
3038
|
+
ngOnDestroy() {
|
|
3039
|
+
window.removeEventListener("keydown", this.onGlobalKeyDown.bind(this));
|
|
3040
|
+
}
|
|
3041
|
+
isStepActive(id) {
|
|
3042
|
+
return this.activeStepId() === id;
|
|
3043
|
+
}
|
|
3044
|
+
isStepClickable(step) {
|
|
3045
|
+
return (!!step.onClick &&
|
|
3046
|
+
isStepClickable({
|
|
3047
|
+
completionState: step.completionState,
|
|
3048
|
+
clickableCompleteStep: step.clickableCompleteStep || false,
|
|
3049
|
+
}));
|
|
3050
|
+
}
|
|
3051
|
+
isStepFocusable(step) {
|
|
3052
|
+
return this.isStepClickable(step) || this.isStepActive(step.id);
|
|
3053
|
+
}
|
|
3054
|
+
handleStepClick(step) {
|
|
3055
|
+
if (this.isStepClickable(step) && !this.isStepActive(step.id) && step.onClick) {
|
|
3056
|
+
step.onClick();
|
|
3057
|
+
this.clickStep.emit(step);
|
|
3058
|
+
}
|
|
3059
|
+
}
|
|
3060
|
+
handleKeyDown(event) {
|
|
3061
|
+
if (event.key === TAB_KEY) {
|
|
3062
|
+
event.preventDefault();
|
|
3063
|
+
if (event.shiftKey) {
|
|
3064
|
+
focusPreviousNotStepElement(segmentClass, this.stepperRef.nativeElement);
|
|
3065
|
+
}
|
|
3066
|
+
else {
|
|
3067
|
+
focusNextNotStepElement(segmentClass, this.stepperRef.nativeElement);
|
|
3068
|
+
}
|
|
3069
|
+
}
|
|
3070
|
+
if ([ARROW_LEFT_KEY, ARROW_RIGHT_KEY, ARROW_UP_KEY, ARROW_DOWN_KEY].includes(event.key)) {
|
|
3071
|
+
event.preventDefault();
|
|
3072
|
+
event.stopPropagation();
|
|
3073
|
+
const allSteps = this.stepperRef.nativeElement.querySelectorAll("button");
|
|
3074
|
+
if (allSteps) {
|
|
3075
|
+
const currentFocusSteppedIndex = Array.from(allSteps).findIndex((step) => step === document.activeElement);
|
|
3076
|
+
if (this.orientation() === "horizontal") {
|
|
3077
|
+
switch (event.key) {
|
|
3078
|
+
case ARROW_LEFT_KEY: {
|
|
3079
|
+
focusPreviousStepElement(currentFocusSteppedIndex, Array.from(allSteps));
|
|
3080
|
+
break;
|
|
3081
|
+
}
|
|
3082
|
+
case ARROW_RIGHT_KEY: {
|
|
3083
|
+
focusNextStepElement(currentFocusSteppedIndex, Array.from(allSteps));
|
|
3084
|
+
break;
|
|
3085
|
+
}
|
|
3086
|
+
default:
|
|
3087
|
+
return;
|
|
3088
|
+
}
|
|
3089
|
+
}
|
|
3090
|
+
else {
|
|
3091
|
+
switch (event.key) {
|
|
3092
|
+
case ARROW_UP_KEY: {
|
|
3093
|
+
focusPreviousStepElement(currentFocusSteppedIndex, Array.from(allSteps));
|
|
3094
|
+
break;
|
|
3095
|
+
}
|
|
3096
|
+
case ARROW_DOWN_KEY: {
|
|
3097
|
+
focusNextStepElement(currentFocusSteppedIndex, Array.from(allSteps));
|
|
3098
|
+
break;
|
|
3099
|
+
}
|
|
3100
|
+
default:
|
|
3101
|
+
return;
|
|
3102
|
+
}
|
|
3103
|
+
}
|
|
3104
|
+
}
|
|
3105
|
+
}
|
|
3106
|
+
}
|
|
3107
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3108
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StepperComponent, isStandalone: true, selector: "rte-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, activeStepId: { classPropertyName: "activeStepId", publicName: "activeStepId", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickStep: "clickStep" }, ngImport: i0, template: "<nav aria-label=\"Stepper Navigation\" style=\"width: 100%; height: 100%\">\n <ol class=\"rte-stepper\" [attr.data-orientation]=\"orientation()\">\n <ng-container *ngFor=\"let step of steps(); let index = index\">\n <li\n #step\n class=\"rte-stepper-item\"\n [attr.data-completion-state]=\"step.completionState\"\n [attr.aria-current]=\"isStepActive(step.id) ? 'step' : undefined\"\n [attr.data-active]=\"isStepActive(step.id)\"\n [attr.data-orientation]=\"orientation()\"\n [attr.data-clickable]=\"isStepClickable(step)\"\n (keydown)=\"handleKeyDown($event)\"\n >\n <button\n class=\"rte-stepper-button\"\n type=\"button\"\n [attr.tabindex]=\"isStepActive(step.id) ? 0 : -1\"\n [attr.disabled]=\"isStepFocusable(step) ? undefined : true\"\n (click)=\"handleStepClick(step)\"\n >\n @if (step.completionState === \"complete\" && !isStepActive(step.id)) {\n <div class=\"rte-stepper-complete-indicator\">\n <rte-icon name=\"check\" aria-hidden=\"true\" [size]=\"iconSize['m']\" />\n </div>\n } @else {\n <div class=\"rte-stepper-number\" [attr.data-completion-state]=\"step.completionState\">\n <span>{{ index + 1 }}</span>\n </div>\n }\n <span class=\"rte-stepper-name\">{{ step.name }}</span>\n </button>\n </li>\n <ng-container *ngIf=\"index < steps().length - 1\">\n <div style=\"width: 100%; height: 100%\">\n <div\n class=\"rte-step-separator\"\n role=\"separator\"\n [attr.data-orientation]=\"orientation()\"\n [attr.data-complete]=\"step.completionState === 'complete'\"\n ></div>\n </div>\n </ng-container>\n </ng-container>\n </ol>\n</nav>\n", styles: [".rte-stepper{display:flex;flex-direction:row;gap:6px;align-items:start;padding:0;margin:0;width:auto}.rte-stepper[data-orientation=vertical]{flex-direction:column;height:100%}.rte-stepper .rte-stepper-item{display:flex;width:100%;flex:1 0 0}.rte-stepper .rte-stepper-item .rte-stepper-button{all:unset;display:flex;flex-direction:column;gap:12px;align-items:center}.rte-stepper .rte-stepper-item .rte-stepper-button:focus-visible .rte-stepper-number,.rte-stepper .rte-stepper-item .rte-stepper-button:focus-visible .rte-stepper-complete-indicator{outline:2px solid var(--border-brand-focused);outline-offset:4px}.rte-stepper .rte-stepper-item .rte-stepper-button .rte-stepper-complete-indicator{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:999px;background-color:var(--background-brand-default);border:2px solid var(--border-brand-default);color:var(--content-primary-inverse)}.rte-stepper .rte-stepper-item .rte-stepper-button .rte-stepper-number{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:999px;border:2px solid var(--border-secondary)}.rte-stepper .rte-stepper-item .rte-stepper-button .rte-stepper-number span{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:16px;line-height:24px;letter-spacing:0px;color:var(--content-tertiary);display:flex;justify-content:center;align-items:center}.rte-stepper .rte-stepper-item .rte-stepper-button .rte-stepper-name{font-family:Arial;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px;color:var(--content-tertiary);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}.rte-stepper .rte-stepper-item:hover[data-clickable=true][data-active=false]{cursor:pointer}.rte-stepper .rte-stepper-item:hover[data-clickable=true][data-active=false][data-completion-state=unvisited] .rte-stepper-number{border-color:var(--border-primary)}.rte-stepper .rte-stepper-item:hover[data-clickable=true][data-active=false][data-completion-state=unvisited] .rte-stepper-complete-indicator{background-color:var(--background-brand-hover);border:2px solid var(--background-brand-hover)}.rte-stepper .rte-stepper-item:hover[data-clickable=true][data-active=false][data-completion-state=incomplete] .rte-stepper-number span{background-color:var(--background-brand-hover)}.rte-stepper .rte-stepper-item:hover[data-clickable=true][data-active=false][data-completion-state=complete] .rte-stepper-complete-indicator{background-color:var(--background-brand-hover);border:2px solid var(--background-brand-hover)}.rte-stepper .rte-stepper-item[data-completion-state=incomplete][data-active=false] .rte-stepper-number{border:2px solid var(--border-brand-default)}.rte-stepper .rte-stepper-item[data-completion-state=incomplete][data-active=false] .rte-stepper-number span{color:var(--content-primary-inverse);border:solid 2px var(--brand-default);border-radius:999px;background-color:var(--background-brand-default);width:28px;height:28px}.rte-stepper .rte-stepper-item[data-completion-state=incomplete] .rte-stepper-name{font-family:Arial;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px}.rte-stepper .rte-stepper-item[data-active=true] .rte-stepper-button .rte-stepper-number{border:2px solid var(--border-brand-default)}.rte-stepper .rte-stepper-item[data-active=true] .rte-stepper-button .rte-stepper-number span{color:var(--content-brand-default)}.rte-stepper .rte-stepper-item[data-active=true] .rte-stepper-button .rte-stepper-name{font-family:Arial;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px;color:var(--content-primary)}.rte-stepper .rte-stepper-item[data-orientation=vertical],.rte-stepper .rte-stepper-item[data-orientation=vertical] .rte-stepper-button{flex-direction:row}.rte-stepper .rte-stepper-item[data-orientation=vertical] .rte-stepper-button .rte-stepper-name{text-align:left}.rte-stepper .rte-step-separator{width:100%;border-radius:999px;height:4px;margin-top:16px;background-color:var(--border-secondary);flex:1 1 auto}.rte-stepper .rte-step-separator[data-complete=true]{background-color:var(--border-brand-default)}.rte-stepper .rte-step-separator[data-orientation=vertical]{width:4px;height:100%;margin-left:16px;margin-top:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3109
|
+
}
|
|
3110
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepperComponent, decorators: [{
|
|
3111
|
+
type: Component,
|
|
3112
|
+
args: [{ selector: "rte-stepper", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav aria-label=\"Stepper Navigation\" style=\"width: 100%; height: 100%\">\n <ol class=\"rte-stepper\" [attr.data-orientation]=\"orientation()\">\n <ng-container *ngFor=\"let step of steps(); let index = index\">\n <li\n #step\n class=\"rte-stepper-item\"\n [attr.data-completion-state]=\"step.completionState\"\n [attr.aria-current]=\"isStepActive(step.id) ? 'step' : undefined\"\n [attr.data-active]=\"isStepActive(step.id)\"\n [attr.data-orientation]=\"orientation()\"\n [attr.data-clickable]=\"isStepClickable(step)\"\n (keydown)=\"handleKeyDown($event)\"\n >\n <button\n class=\"rte-stepper-button\"\n type=\"button\"\n [attr.tabindex]=\"isStepActive(step.id) ? 0 : -1\"\n [attr.disabled]=\"isStepFocusable(step) ? undefined : true\"\n (click)=\"handleStepClick(step)\"\n >\n @if (step.completionState === \"complete\" && !isStepActive(step.id)) {\n <div class=\"rte-stepper-complete-indicator\">\n <rte-icon name=\"check\" aria-hidden=\"true\" [size]=\"iconSize['m']\" />\n </div>\n } @else {\n <div class=\"rte-stepper-number\" [attr.data-completion-state]=\"step.completionState\">\n <span>{{ index + 1 }}</span>\n </div>\n }\n <span class=\"rte-stepper-name\">{{ step.name }}</span>\n </button>\n </li>\n <ng-container *ngIf=\"index < steps().length - 1\">\n <div style=\"width: 100%; height: 100%\">\n <div\n class=\"rte-step-separator\"\n role=\"separator\"\n [attr.data-orientation]=\"orientation()\"\n [attr.data-complete]=\"step.completionState === 'complete'\"\n ></div>\n </div>\n </ng-container>\n </ng-container>\n </ol>\n</nav>\n", styles: [".rte-stepper{display:flex;flex-direction:row;gap:6px;align-items:start;padding:0;margin:0;width:auto}.rte-stepper[data-orientation=vertical]{flex-direction:column;height:100%}.rte-stepper .rte-stepper-item{display:flex;width:100%;flex:1 0 0}.rte-stepper .rte-stepper-item .rte-stepper-button{all:unset;display:flex;flex-direction:column;gap:12px;align-items:center}.rte-stepper .rte-stepper-item .rte-stepper-button:focus-visible .rte-stepper-number,.rte-stepper .rte-stepper-item .rte-stepper-button:focus-visible .rte-stepper-complete-indicator{outline:2px solid var(--border-brand-focused);outline-offset:4px}.rte-stepper .rte-stepper-item .rte-stepper-button .rte-stepper-complete-indicator{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:999px;background-color:var(--background-brand-default);border:2px solid var(--border-brand-default);color:var(--content-primary-inverse)}.rte-stepper .rte-stepper-item .rte-stepper-button .rte-stepper-number{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:999px;border:2px solid var(--border-secondary)}.rte-stepper .rte-stepper-item .rte-stepper-button .rte-stepper-number span{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:16px;line-height:24px;letter-spacing:0px;color:var(--content-tertiary);display:flex;justify-content:center;align-items:center}.rte-stepper .rte-stepper-item .rte-stepper-button .rte-stepper-name{font-family:Arial;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px;color:var(--content-tertiary);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}.rte-stepper .rte-stepper-item:hover[data-clickable=true][data-active=false]{cursor:pointer}.rte-stepper .rte-stepper-item:hover[data-clickable=true][data-active=false][data-completion-state=unvisited] .rte-stepper-number{border-color:var(--border-primary)}.rte-stepper .rte-stepper-item:hover[data-clickable=true][data-active=false][data-completion-state=unvisited] .rte-stepper-complete-indicator{background-color:var(--background-brand-hover);border:2px solid var(--background-brand-hover)}.rte-stepper .rte-stepper-item:hover[data-clickable=true][data-active=false][data-completion-state=incomplete] .rte-stepper-number span{background-color:var(--background-brand-hover)}.rte-stepper .rte-stepper-item:hover[data-clickable=true][data-active=false][data-completion-state=complete] .rte-stepper-complete-indicator{background-color:var(--background-brand-hover);border:2px solid var(--background-brand-hover)}.rte-stepper .rte-stepper-item[data-completion-state=incomplete][data-active=false] .rte-stepper-number{border:2px solid var(--border-brand-default)}.rte-stepper .rte-stepper-item[data-completion-state=incomplete][data-active=false] .rte-stepper-number span{color:var(--content-primary-inverse);border:solid 2px var(--brand-default);border-radius:999px;background-color:var(--background-brand-default);width:28px;height:28px}.rte-stepper .rte-stepper-item[data-completion-state=incomplete] .rte-stepper-name{font-family:Arial;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px}.rte-stepper .rte-stepper-item[data-active=true] .rte-stepper-button .rte-stepper-number{border:2px solid var(--border-brand-default)}.rte-stepper .rte-stepper-item[data-active=true] .rte-stepper-button .rte-stepper-number span{color:var(--content-brand-default)}.rte-stepper .rte-stepper-item[data-active=true] .rte-stepper-button .rte-stepper-name{font-family:Arial;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px;color:var(--content-primary)}.rte-stepper .rte-stepper-item[data-orientation=vertical],.rte-stepper .rte-stepper-item[data-orientation=vertical] .rte-stepper-button{flex-direction:row}.rte-stepper .rte-stepper-item[data-orientation=vertical] .rte-stepper-button .rte-stepper-name{text-align:left}.rte-stepper .rte-step-separator{width:100%;border-radius:999px;height:4px;margin-top:16px;background-color:var(--border-secondary);flex:1 1 auto}.rte-stepper .rte-step-separator[data-complete=true]{background-color:var(--border-brand-default)}.rte-stepper .rte-step-separator[data-orientation=vertical]{width:4px;height:100%;margin-left:16px;margin-top:0}\n"] }]
|
|
3113
|
+
}] });
|
|
3114
|
+
|
|
3019
3115
|
class ToastComponent {
|
|
3020
3116
|
constructor() {
|
|
3021
3117
|
this.id = input("");
|
|
@@ -3765,5 +3861,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
3765
3861
|
* Generated bundle index. Do not edit.
|
|
3766
3862
|
*/
|
|
3767
3863
|
|
|
3768
|
-
export { BadgeDirective, BannerComponent, BreadcrumbsComponent, ButtonComponent, CardComponent, CheckboxComponent, CheckboxGroupComponent, ChipComponent, ColDirective, DividerComponent, GridDirective, IconButtonComponent, IconButtonToggleComponent, IconComponent, LinkComponent, LoaderComponent, ModalDirective, ModalModule, ModalTriggerDirective, PopoverDirective, RadioButtonComponent, RadioButtonGroupComponent, SearchbarComponent, SegmentedControlComponent, SelectComponent, SideNavComponent, SplitButtonComponent, SwitchComponent, TabComponent, TagComponent, TextInputComponent, TextareaComponent, ToastComponent, ToastService, TooltipDirective };
|
|
3864
|
+
export { BadgeDirective, BannerComponent, BreadcrumbsComponent, ButtonComponent, CardComponent, CheckboxComponent, CheckboxGroupComponent, ChipComponent, ColDirective, DividerComponent, GridDirective, IconButtonComponent, IconButtonToggleComponent, IconComponent, LinkComponent, LoaderComponent, ModalDirective, ModalModule, ModalTriggerDirective, PopoverDirective, RadioButtonComponent, RadioButtonGroupComponent, SearchbarComponent, SegmentedControlComponent, SelectComponent, SideNavComponent, SplitButtonComponent, StepperComponent, SwitchComponent, TabComponent, TagComponent, TextInputComponent, TextareaComponent, ToastComponent, ToastService, TooltipDirective };
|
|
3769
3865
|
//# sourceMappingURL=design-system-rte-angular.mjs.map
|