@skf-design-system/ui-components 1.0.2-beta.5 → 1.0.2-beta.7
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/README.md +18 -0
- package/dist/components/accordion/accordion.component.d.ts +1 -1
- package/dist/components/accordion/accordion.component.js +2 -2
- package/dist/components/alert/alert.component.d.ts +3 -2
- package/dist/components/alert/alert.component.js +39 -33
- package/dist/components/button/button.styles.js +3 -3
- package/dist/components/checkbox/checkbox.component.d.ts +4 -2
- package/dist/components/checkbox/checkbox.component.js +73 -65
- package/dist/components/checkbox/checkbox.styles.js +1 -1
- package/dist/components/datepicker/datepicker-calendar.component.d.ts +4 -0
- package/dist/components/datepicker/datepicker-calendar.component.js +134 -127
- package/dist/components/datepicker/datepicker-popup.component.d.ts +4 -0
- package/dist/components/datepicker/datepicker-popup.component.js +100 -88
- package/dist/components/datepicker/datepicker.component.d.ts +4 -2
- package/dist/components/datepicker/datepicker.component.js +151 -140
- package/dist/components/dialog/dialog.component.d.ts +3 -2
- package/dist/components/dialog/dialog.component.js +39 -37
- package/dist/components/divider/divider.component.d.ts +3 -0
- package/dist/components/divider/divider.component.js +43 -22
- package/dist/components/divider/divider.styles.js +9 -9
- package/dist/components/drawer/drawer.component.d.ts +11 -4
- package/dist/components/drawer/drawer.component.js +77 -55
- package/dist/components/drawer/drawer.styles.js +47 -40
- package/dist/components/header/header.component.d.ts +4 -2
- package/dist/components/header/header.component.js +66 -57
- package/dist/components/header/header.styles.js +2 -2
- package/dist/components/icon/icon.component.js +7 -7
- package/dist/components/icon/icon.styles.js +2 -2
- package/dist/components/input/input.component.d.ts +4 -8
- package/dist/components/input/input.component.js +147 -147
- package/dist/components/input/input.controllers.d.ts +0 -1
- package/dist/components/input/input.controllers.js +12 -12
- package/dist/components/link/link.component.d.ts +15 -18
- package/dist/components/link/link.component.js +105 -107
- package/dist/components/link/link.styles.js +53 -45
- package/dist/components/loader/loader.component.d.ts +5 -3
- package/dist/components/loader/loader.component.js +39 -28
- package/dist/components/loader/loader.styles.js +6 -10
- package/dist/components/menu/menu-item.component.d.ts +1 -1
- package/dist/components/menu/menu-item.component.js +8 -8
- package/dist/components/menu/menu-item.styles.js +13 -9
- package/dist/components/menu/menu.component.d.ts +5 -2
- package/dist/components/menu/menu.component.js +8 -8
- package/dist/components/nav/nav-item.component.d.ts +4 -0
- package/dist/components/nav/nav-item.component.js +44 -25
- package/dist/components/nav/nav-item.styles.js +29 -25
- package/dist/components/nav/nav.component.d.ts +9 -0
- package/dist/components/nav/nav.component.js +47 -21
- package/dist/components/nav/nav.styles.js +15 -9
- package/dist/components/popover/popover.component.d.ts +10 -3
- package/dist/components/popover/popover.component.js +30 -22
- package/dist/components/progress/progress.component.d.ts +2 -0
- package/dist/components/progress/progress.component.js +38 -29
- package/dist/components/progress/progress.styles.js +4 -4
- package/dist/components/radio/radio.component.d.ts +4 -2
- package/dist/components/radio/radio.component.js +91 -83
- package/dist/components/radio/radio.styles.js +1 -1
- package/dist/components/segmented-button/segmented-button-item.component.js +1 -1
- package/dist/components/segmented-button/segmented-button-item.styles.js +1 -1
- package/dist/components/select/select-option-group.component.d.ts +4 -0
- package/dist/components/select/select-option-group.component.js +37 -18
- package/dist/components/select/select-option-group.style.js +12 -6
- package/dist/components/select/select-option.component.d.ts +7 -2
- package/dist/components/select/select-option.component.js +70 -53
- package/dist/components/select/select-option.styles.js +43 -31
- package/dist/components/select/select.component.d.ts +18 -10
- package/dist/components/select/select.component.js +175 -132
- package/dist/components/select/select.controllers.js +2 -1
- package/dist/components/select/select.styles.js +8 -2
- package/dist/components/stepper/stepper-item.component.d.ts +1 -1
- package/dist/components/stepper/stepper-item.component.js +26 -23
- package/dist/components/stepper/stepper-item.styles.js +4 -4
- package/dist/components/switch/switch.component.d.ts +4 -2
- package/dist/components/switch/switch.component.js +64 -56
- package/dist/components/switch/switch.styles.js +1 -1
- package/dist/components/tabs/tab-panel.component.d.ts +1 -1
- package/dist/components/tabs/tab-panel.component.js +19 -16
- package/dist/components/tabs/tab.component.d.ts +1 -1
- package/dist/components/tabs/tab.component.js +17 -14
- package/dist/components/tabs/tab.styles.js +2 -2
- package/dist/components/tag/tag.component.d.ts +3 -0
- package/dist/components/tag/tag.component.js +50 -41
- package/dist/components/textarea/textarea.component.d.ts +4 -2
- package/dist/components/textarea/textarea.component.js +127 -118
- package/dist/components/toast/toast-item.styles.js +13 -10
- package/dist/components/toast/toast.component.js +9 -9
- package/dist/components/toast/toast.singleton.d.ts +1 -1
- package/dist/components/toast/toast.singleton.js +18 -18
- package/dist/components/tooltip/tooltip.component.d.ts +9 -2
- package/dist/components/tooltip/tooltip.component.js +13 -7
- package/dist/custom-elements.json +1305 -946
- package/dist/index.d.ts +2 -2
- package/dist/index.js +20 -20
- package/dist/internal/base-classes/popover/popover.base.d.ts +24 -5
- package/dist/internal/base-classes/popover/popover.base.js +28 -29
- package/dist/internal/base-classes/popover/popover.styles.js +4 -5
- package/dist/internal/components/hint/hint.component.d.ts +4 -0
- package/dist/internal/components/hint/hint.component.js +47 -20
- package/dist/internal/components/hint/hint.styles.js +29 -25
- package/dist/internal/controllers/popover.controller.d.ts +2 -0
- package/dist/internal/helpers/uuid.d.ts +8 -10
- package/dist/internal/helpers/uuid.js +4 -11
- package/dist/internal/helpers/watch.d.ts +1 -1
- package/dist/internal/templates/asterisk.d.ts +1 -1
- package/dist/internal/templates/asterisk.js +4 -4
- package/dist/internal/types.d.ts +4 -0
- package/dist/styles/global-alt.css +1 -1
- package/dist/styles/global.css +1 -1
- package/dist/translations/en.d.ts +3 -0
- package/dist/translations/en.js +27 -0
- package/dist/translations/es.d.ts +3 -0
- package/dist/translations/es.js +27 -0
- package/dist/translations/index.d.ts +4 -0
- package/dist/translations/pt.d.ts +3 -0
- package/dist/translations/pt.js +27 -0
- package/dist/translations/sv.d.ts +3 -0
- package/dist/translations/sv.js +27 -0
- package/dist/types/jsx/custom-element-jsx.d.ts +243 -128
- package/dist/types/vue/index.d.ts +136 -127
- package/dist/utilities/localize.d.ts +28 -0
- package/dist/utilities/localize.js +13 -0
- package/dist/vscode.html-custom-data.json +168 -177
- package/dist/web-types.json +411 -381
- package/package.json +34 -41
@@ -17,13 +17,13 @@ import type { SkfDialog, CustomEvent } from "../../components/dialog/dialog.comp
|
|
17
17
|
import type { SkfDivider } from "../../components/divider/divider.component.js";
|
18
18
|
import type { SkfDrawer, CustomEvent } from "../../components/drawer/drawer.component.js";
|
19
19
|
import type { SkfLogo } from "../../components/logo/logo.component.js";
|
20
|
+
import type { SkfLink, CustomEvent } from "../../components/link/link.component.js";
|
21
|
+
import type { SkfNavItem } from "../../components/nav-item/nav-item.component.js";
|
20
22
|
import type { SkfNav } from "../../components/nav/nav.component.js";
|
21
23
|
import type { SkfHeader } from "../../components/header/header.component.js";
|
22
24
|
import type { SkfInput, CustomEvent } from "../../components/input/input.component.js";
|
23
|
-
import type {
|
24
|
-
import type { SkfMenuItem } from "../../components/menu-item/menu-item.component.js";
|
25
|
+
import type { SkfMenuItem, CustomEvent } from "../../components/menu-item/menu-item.component.js";
|
25
26
|
import type { SkfMenu, CustomEvent } from "../../components/menu/menu.component.js";
|
26
|
-
import type { SkfNavItem } from "../../components/nav-item/nav-item.component.js";
|
27
27
|
import type { SkfPopover, CustomEvent } from "../../components/popover/popover.component.js";
|
28
28
|
import type { SkfProgress } from "../../components/progress/progress.component.js";
|
29
29
|
import type { SkfRadio, Event } from "../../components/radio/radio.component.js";
|
@@ -45,7 +45,7 @@ import type { SkfTab, CustomEvent } from "../../components/tab/tab.component.js"
|
|
45
45
|
import type { SkfTextArea } from "../../components/textarea/textarea.component.js";
|
46
46
|
import type { SkfToastWrapper } from "../../components/toast-wrapper/toast-wrapper.component.js";
|
47
47
|
import type { SkfToast } from "../../components/toast/toast.component.js";
|
48
|
-
import type { SkfTooltip } from "../../components/tooltip/tooltip.component.js";
|
48
|
+
import type { SkfTooltip, CustomEvent } from "../../components/tooltip/tooltip.component.js";
|
49
49
|
|
50
50
|
type SkfIconProps = {
|
51
51
|
/** Sets the color of the icon */
|
@@ -92,10 +92,10 @@ type SkfAccordionProps = {
|
|
92
92
|
};
|
93
93
|
|
94
94
|
type SkfAlertProps = {
|
95
|
-
/** Close button aria-label */
|
96
|
-
"button-label"?: SkfAlert["buttonLabel"];
|
97
95
|
/** If defined, displays leading icon */
|
98
96
|
icon?: SkfAlert["icon"];
|
97
|
+
/** Sets the internal language of the component */
|
98
|
+
lang?: SkfAlert["lang"];
|
99
99
|
/** If true, renders with an close button and sets aria-role to `status` */
|
100
100
|
persistent?: SkfAlert["persistent"];
|
101
101
|
/** If defined, gives the supplied appearance */
|
@@ -123,8 +123,6 @@ type SkfBreadcrumbProps = {
|
|
123
123
|
};
|
124
124
|
|
125
125
|
type SkfLoaderProps = {
|
126
|
-
/** Defines the aria-label */
|
127
|
-
"aria-label"?: SkfLoader["ariaLabel"];
|
128
126
|
/** If true, inverts the color (to be used on colored backgrounds) */
|
129
127
|
invert?: SkfLoader["invert"];
|
130
128
|
/** Defines the size of the loader */
|
@@ -181,10 +179,10 @@ type SkfCheckboxProps = {
|
|
181
179
|
indeterminate?: SkfCheckbox["indeterminate"];
|
182
180
|
/** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
|
183
181
|
label?: SkfCheckbox["label"];
|
182
|
+
/** Sets the internal language of the component */
|
183
|
+
lang?: SkfCheckbox["lang"];
|
184
184
|
/** If defined, adds name to the input-element */
|
185
185
|
name?: SkfCheckbox["name"];
|
186
|
-
/** If defined, renders an alternative A11y text for the asterisk */
|
187
|
-
"required-label"?: SkfCheckbox["requiredLabel"];
|
188
186
|
/** If defined, styles checkbox using provided severity */
|
189
187
|
severity?: SkfCheckbox["severity"];
|
190
188
|
/** If true, displays valid state after interaction */
|
@@ -205,6 +203,8 @@ type SkfDatepickerCalendarProps = {
|
|
205
203
|
firstDayOfWeek?: SkfDatepickerCalendar["firstDayOfWeek"];
|
206
204
|
/** A comma-separated list of dates (yyyy-mm-dd format) that are not selectable. */
|
207
205
|
"invalid-dates"?: SkfDatepickerCalendar["invalidDates"];
|
206
|
+
/** Sets the internal language of the component */
|
207
|
+
lang?: SkfDatepickerCalendar["lang"];
|
208
208
|
/** */
|
209
209
|
locale?: SkfDatepickerCalendar["locale"];
|
210
210
|
/** */
|
@@ -232,6 +232,8 @@ type SkfDatepickerProps = {
|
|
232
232
|
id?: SkfDatepicker["id"];
|
233
233
|
/** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
|
234
234
|
label?: SkfDatepicker["label"];
|
235
|
+
/** Sets the internal language of the component */
|
236
|
+
lang?: SkfDatepicker["lang"];
|
235
237
|
/** If true, hides the label visually */
|
236
238
|
"hide-label"?: SkfDatepicker["hideLabel"];
|
237
239
|
/** If defined, displays informational text below the field */
|
@@ -246,8 +248,6 @@ type SkfDatepickerProps = {
|
|
246
248
|
range?: SkfDatepicker["range"];
|
247
249
|
/** If true, makes the element not mutable, meaning the user can not edit the control */
|
248
250
|
readonly?: SkfDatepicker["readonly"];
|
249
|
-
/** If defined, renders an alternative A11y text for the asterisk */
|
250
|
-
"required-label"?: SkfDatepicker["requiredLabel"];
|
251
251
|
/** Earliest selectable date. (yyyy-mm-dd format) */
|
252
252
|
"selectable-from"?: SkfDatepicker["selectableFrom"];
|
253
253
|
/** Latest selectable date. (yyyy-mm-dd format) */
|
@@ -272,12 +272,12 @@ type SkfHeadingProps = {
|
|
272
272
|
};
|
273
273
|
|
274
274
|
type SkfDialogProps = {
|
275
|
-
/** If defined, sets the aria-label for the close button */
|
276
|
-
"close-button-aria-label"?: SkfDialog["closeButtonAriaLabel"];
|
277
275
|
/** Title for the modal/dialog */
|
278
276
|
heading?: SkfDialog["heading"];
|
279
277
|
/** If true, makes the dialog stretch edge to edge on screen */
|
280
278
|
fullscreen?: SkfDialog["fullscreen"];
|
279
|
+
/** Sets the internal language of the component */
|
280
|
+
lang?: SkfDialog["lang"];
|
281
281
|
/** If true, removes the close button */
|
282
282
|
"no-close-button"?: SkfDialog["noCloseButton"];
|
283
283
|
/** If defined, removes the inner padding */
|
@@ -303,10 +303,10 @@ type SkfDividerProps = {
|
|
303
303
|
};
|
304
304
|
|
305
305
|
type SkfDrawerProps = {
|
306
|
-
/** If defined, sets the aria-label for the close button */
|
307
|
-
"close-button-aria-label"?: SkfDrawer["closeButtonAriaLabel"];
|
308
306
|
/** Heading for the Drawer */
|
309
307
|
heading?: SkfDrawer["heading"];
|
308
|
+
/** Sets the internal language of the component */
|
309
|
+
lang?: SkfDrawer["lang"];
|
310
310
|
/** Sets the max-width */
|
311
311
|
size?: SkfDrawer["size"];
|
312
312
|
/** If true, Drawer is open */
|
@@ -329,16 +329,55 @@ type SkfLogoProps = {
|
|
329
329
|
color?: SkfLogo["color"];
|
330
330
|
};
|
331
331
|
|
332
|
-
type
|
332
|
+
type SkfLinkProps = {
|
333
|
+
/** Defines the semantic element to render */
|
334
|
+
as?: SkfLink["as"];
|
335
|
+
/** Defines the text-color */
|
336
|
+
color?: SkfLink["color"];
|
337
|
+
/** If true, disables the link */
|
338
|
+
disabled?: SkfLink["disabled"];
|
339
|
+
/** If defined, downloads the url */
|
340
|
+
download?: SkfLink["download"];
|
341
|
+
/** If defined, loads url on click */
|
342
|
+
href?: SkfLink["href"];
|
343
|
+
/** If defined, renders an icon before or after the text */
|
344
|
+
icon?: SkfLink["icon"];
|
345
|
+
/** If true, the icon is placed to the right in relation to the text */
|
346
|
+
"icon-right"?: SkfLink["iconRight"];
|
347
|
+
/** If defined, describes the relationship between a linked resource and the current document */
|
348
|
+
rel?: SkfLink["rel"];
|
349
|
+
/** If defined, used on conjunction with onClick property. **Notice!** Only applicable to as=button. */
|
350
|
+
route?: SkfLink["route"];
|
351
|
+
/** If true, fills the parents horizontal axis */
|
352
|
+
stretch?: SkfLink["stretch"];
|
353
|
+
/** If defined, specifies where to open the linked document */
|
354
|
+
target?: SkfLink["target"];
|
355
|
+
|
356
|
+
/** Fired when the link is clicked */
|
357
|
+
"onskf-link-click"?: (e: CustomEvent<CustomEvent>) => void;
|
358
|
+
};
|
359
|
+
|
360
|
+
type SkfNavItemProps = {
|
361
|
+
/** */
|
362
|
+
href?: SkfNavItem["href"];
|
363
|
+
/** */
|
364
|
+
icon?: SkfNavItem["icon"];
|
333
365
|
/** */
|
366
|
+
vertical?: SkfNavItem["vertical"];
|
367
|
+
};
|
368
|
+
|
369
|
+
type SkfNavProps = {
|
370
|
+
/** Sets the internal language of the component */
|
371
|
+
lang?: SkfNav["lang"];
|
372
|
+
/** If true, the navigation will be displayed vertically */
|
334
373
|
vertical?: SkfNav["vertical"];
|
335
374
|
};
|
336
375
|
|
337
376
|
type SkfHeaderProps = {
|
338
377
|
/** If true, sets header to display in compact mode only (hanburger menu and drawer) */
|
339
378
|
compact?: SkfHeader["compact"];
|
340
|
-
/**
|
341
|
-
|
379
|
+
/** Sets the internal language of the component */
|
380
|
+
lang?: SkfHeader["lang"];
|
342
381
|
/** If defined, sets the app or site's name */
|
343
382
|
"site-name"?: SkfHeader["siteName"];
|
344
383
|
/** If defined, sets the site's base-url for the "logo-link" */
|
@@ -353,12 +392,6 @@ type SkfInputProps = {
|
|
353
392
|
/** Indicates whether the value of the control can be automatically completed by the browser. See
|
354
393
|
[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details. */
|
355
394
|
autocomplete?: SkfInput["autocomplete"];
|
356
|
-
/** Custom aria-label for the clear button. **Notice!** Only applicable to type=search. */
|
357
|
-
"button-aria-label-clear"?: SkfInput["buttonAriaLabelClear"];
|
358
|
-
/** Custom aria-label for the visibility button. **Notice!** Only applicable to type=password. */
|
359
|
-
"button-aria-label-hide"?: SkfInput["buttonAriaLabelHide"];
|
360
|
-
/** Custom aria-label for the visibility button **Notice!** Only applicable to type=password. */
|
361
|
-
"button-aria-label-show"?: SkfInput["buttonAriaLabelShow"];
|
362
395
|
/** If defined, forces component to invalid state until removed. Its value is used as hint text. */
|
363
396
|
"custom-invalid"?: SkfInput["customInvalid"];
|
364
397
|
/** If true, outputs helping hints in console */
|
@@ -372,6 +405,8 @@ type SkfInputProps = {
|
|
372
405
|
inputmode?: SkfInput["inputmode"];
|
373
406
|
/** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
|
374
407
|
label?: SkfInput["label"];
|
408
|
+
/** Sets the internal language of the component */
|
409
|
+
lang?: SkfInput["lang"];
|
375
410
|
/** If defined, displays a prefix/adornment before the input-element */
|
376
411
|
leading?: SkfInput["leading"];
|
377
412
|
/** If defined, sets the maximum value to accept for this input */
|
@@ -390,8 +425,6 @@ type SkfInputProps = {
|
|
390
425
|
placeholder?: SkfInput["placeholder"];
|
391
426
|
/** If true, makes the element not mutable, meaning the user can not edit the control */
|
392
427
|
readonly?: SkfInput["readonly"];
|
393
|
-
/** If defined, renders an alternative A11y text for the asterisk */
|
394
|
-
"required-label"?: SkfInput["requiredLabel"];
|
395
428
|
/** If defined, displays provided severity state */
|
396
429
|
severity?: SkfInput["severity"];
|
397
430
|
/** If true, displays valid state after interaction */
|
@@ -413,35 +446,6 @@ type SkfInputProps = {
|
|
413
446
|
oninvalid?: (e: CustomEvent<CustomEvent>) => void;
|
414
447
|
};
|
415
448
|
|
416
|
-
type SkfLinkProps = {
|
417
|
-
/** Defines the semantic element to render */
|
418
|
-
as?: SkfLink["as"];
|
419
|
-
/** Defines the text-color */
|
420
|
-
color?: SkfLink["color"];
|
421
|
-
/** If true, disables the link */
|
422
|
-
disabled?: SkfLink["disabled"];
|
423
|
-
/** If defined, downloads the url */
|
424
|
-
download?: SkfLink["download"];
|
425
|
-
/** If defined, loads url on click */
|
426
|
-
href?: SkfLink["href"];
|
427
|
-
/** If defined, renders an icon before or after the text */
|
428
|
-
icon?: SkfLink["icon"];
|
429
|
-
/** Defines the position of the icon in relation to the text */
|
430
|
-
"icon-placement"?: SkfLink["iconPlacement"];
|
431
|
-
/** If defined, describes the relationship between a linked resource and the current document */
|
432
|
-
rel?: SkfLink["rel"];
|
433
|
-
/** If defined, used on conjunction with onClick property, second argument */
|
434
|
-
route?: SkfLink["route"];
|
435
|
-
/** If true, fills the parents horizontal axis */
|
436
|
-
stretch?: SkfLink["stretch"];
|
437
|
-
/** If defined, specifies where to open the linked document */
|
438
|
-
target?: SkfLink["target"];
|
439
|
-
/** Defines the type of button */
|
440
|
-
type?: SkfLink["type"];
|
441
|
-
/** If defined, accepts a function that runs on click. Forwards optional route as second argument. */
|
442
|
-
onClick?: SkfLink["onClick"];
|
443
|
-
};
|
444
|
-
|
445
449
|
type SkfMenuItemProps = {
|
446
450
|
/** Defines the semantic element to render */
|
447
451
|
as?: SkfMenuItem["as"];
|
@@ -455,22 +459,19 @@ type SkfMenuItemProps = {
|
|
455
459
|
href?: SkfMenuItem["href"];
|
456
460
|
/** If defined, renders an icon before or after the text */
|
457
461
|
icon?: SkfMenuItem["icon"];
|
458
|
-
/**
|
459
|
-
"icon-
|
462
|
+
/** If true, the icon is placed to the right in relation to the text */
|
463
|
+
"icon-right"?: SkfMenuItem["iconRight"];
|
460
464
|
/** If defined, describes the relationship between a linked resource and the current document */
|
461
465
|
rel?: SkfMenuItem["rel"];
|
462
|
-
/** If defined, used on conjunction with onClick property
|
466
|
+
/** If defined, used on conjunction with onClick property. **Notice!** Only applicable to as=button. */
|
463
467
|
route?: SkfMenuItem["route"];
|
464
468
|
/** If true, fills the parents horizontal axis */
|
465
469
|
stretch?: SkfMenuItem["stretch"];
|
466
470
|
/** If defined, specifies where to open the linked document */
|
467
471
|
target?: SkfMenuItem["target"];
|
468
|
-
|
469
|
-
|
470
|
-
|
471
|
-
role?: SkfMenuItem["role"];
|
472
|
-
/** If defined, accepts a function that runs on click. Forwards optional route as second argument. */
|
473
|
-
onClick?: SkfMenuItem["onClick"];
|
472
|
+
|
473
|
+
/** Fired when the link is clicked */
|
474
|
+
"onskf-link-click"?: (e: CustomEvent<CustomEvent>) => void;
|
474
475
|
};
|
475
476
|
|
476
477
|
type SkfMenuProps = {
|
@@ -478,33 +479,32 @@ type SkfMenuProps = {
|
|
478
479
|
placement?: SkfMenu["undefined"];
|
479
480
|
/** The id of the element the menu will be anchored to */
|
480
481
|
anchor?: SkfMenu["undefined"];
|
481
|
-
|
482
|
+
/** Method that opens the menu */
|
483
|
+
"open()"?: SkfMenu["open()"];
|
484
|
+
/** Method that closes the menu */
|
485
|
+
"close()"?: SkfMenu["close()"];
|
482
486
|
/** Fired when the menu is opened */
|
483
487
|
"onskf-opened"?: (e: CustomEvent<CustomEvent>) => void;
|
484
488
|
/** Fired when the menu is closed */
|
485
489
|
"onskf-closed"?: (e: CustomEvent<CustomEvent>) => void;
|
486
490
|
};
|
487
491
|
|
488
|
-
type SkfNavItemProps = {
|
489
|
-
/** */
|
490
|
-
href?: SkfNavItem["href"];
|
491
|
-
/** */
|
492
|
-
icon?: SkfNavItem["icon"];
|
493
|
-
};
|
494
|
-
|
495
492
|
type SkfPopoverProps = {
|
496
493
|
/** The placement of the popover */
|
497
494
|
placement?: SkfPopover["undefined"];
|
498
|
-
/** The id of the element the
|
495
|
+
/** The id of the element the popover will be anchored to */
|
499
496
|
anchor?: SkfPopover["undefined"];
|
500
497
|
/** If defined, sets a custom offset for the popover */
|
501
498
|
offset?: SkfPopover["offset"];
|
502
499
|
/** If true, hides the arrow */
|
503
500
|
hideArrow?: SkfPopover["hideArrow"];
|
504
|
-
|
505
|
-
|
501
|
+
/** Method that opens the popover */
|
502
|
+
"open()"?: SkfPopover["open()"];
|
503
|
+
/** Method that closes the popover */
|
504
|
+
"close()"?: SkfPopover["close()"];
|
505
|
+
/** Fired when the popover is opened */
|
506
506
|
"onskf-opened"?: (e: CustomEvent<CustomEvent>) => void;
|
507
|
-
/** Fired when the
|
507
|
+
/** Fired when the popover is closed */
|
508
508
|
"onskf-closed"?: (e: CustomEvent<CustomEvent>) => void;
|
509
509
|
};
|
510
510
|
|
@@ -530,10 +530,10 @@ type SkfRadioProps = {
|
|
530
530
|
"custom-invalid"?: SkfRadio["customInvalid"];
|
531
531
|
/** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
|
532
532
|
label?: SkfRadio["label"];
|
533
|
+
/** Sets the internal language of the component */
|
534
|
+
lang?: SkfRadio["lang"];
|
533
535
|
/** If defined, adds name to the input-element */
|
534
536
|
name?: SkfRadio["name"];
|
535
|
-
/** If defined, renders an alternative A11y text for the asterisk */
|
536
|
-
"required-label"?: SkfRadio["requiredLabel"];
|
537
537
|
/** Size of the Radio */
|
538
538
|
size?: SkfRadio["size"];
|
539
539
|
/** If defined, displays provided severity state */
|
@@ -567,6 +567,8 @@ type SkfSegmentedButtonProps = {
|
|
567
567
|
type SkfSelectOptionGroupProps = {
|
568
568
|
/** */
|
569
569
|
label?: SkfSelectOptionGroup["label"];
|
570
|
+
/** */
|
571
|
+
small?: SkfSelectOptionGroup["small"];
|
570
572
|
};
|
571
573
|
|
572
574
|
type SkfTagProps = {
|
@@ -576,6 +578,8 @@ type SkfTagProps = {
|
|
576
578
|
icon?: SkfTag["icon"];
|
577
579
|
/** If defined, gives the supplied appearance */
|
578
580
|
color?: SkfTag["color"];
|
581
|
+
/** Sets the internal language of the component */
|
582
|
+
lang?: SkfTag["lang"];
|
579
583
|
/** If true, adds trailing button to remove tag */
|
580
584
|
removable?: SkfTag["removable"];
|
581
585
|
/** If defined, accepts a function that runs on click */
|
@@ -601,6 +605,8 @@ type SkfSelectProps = {
|
|
601
605
|
hint?: SkfSelect["hint"];
|
602
606
|
/** If defined, displays provided label */
|
603
607
|
label?: SkfSelect["label"];
|
608
|
+
/** Sets the internal language of the component */
|
609
|
+
lang?: SkfSelect["lang"];
|
604
610
|
/** If defined, limits the number of selectable options */
|
605
611
|
max?: SkfSelect["max"];
|
606
612
|
/** If defined, sets the minimum number of required options */
|
@@ -609,8 +615,6 @@ type SkfSelectProps = {
|
|
609
615
|
multiple?: SkfSelect["multiple"];
|
610
616
|
/** If defined, set name of the component */
|
611
617
|
name?: SkfSelect["name"];
|
612
|
-
/** If defined, renders an alternative A11y text for the asterisk */
|
613
|
-
"required-label"?: SkfSelect["requiredLabel"];
|
614
618
|
/** If defined, displays provided severity state */
|
615
619
|
severity?: SkfSelect["severity"];
|
616
620
|
/** If true, displays valid state after interaction */
|
@@ -621,7 +625,7 @@ type SkfSelectProps = {
|
|
621
625
|
selectedValues?: SkfSelect["selectedValues"];
|
622
626
|
/** A readonly property that returns the selected slot(s) text content in a array */
|
623
627
|
selectedOptionsText?: SkfSelect["selectedOptionsText"];
|
624
|
-
/**
|
628
|
+
/** Returns the selected value. (if multiple: in a comma separated string). If set will default set corresponding option. */
|
625
629
|
value?: SkfSelect["value"];
|
626
630
|
/** */
|
627
631
|
_selectedOptions?: SkfSelect["_selectedOptions"];
|
@@ -635,6 +639,8 @@ type SkfSelectProps = {
|
|
635
639
|
"onskf-select-dropdown"?: (e: CustomEvent<CustomEvent>) => void;
|
636
640
|
/** {detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled */
|
637
641
|
"onskf-select-option-select"?: (e: CustomEvent<CustomEvent>) => void;
|
642
|
+
/** Fires when the calendar view is updated */
|
643
|
+
"onskf-update-calendar-view"?: (e: CustomEvent<CustomEvent>) => void;
|
638
644
|
};
|
639
645
|
|
640
646
|
type SkfSelectOptionProps = {
|
@@ -648,14 +654,12 @@ type SkfSelectOptionProps = {
|
|
648
654
|
selected?: SkfSelectOption["selected"];
|
649
655
|
/** If defined, sets a short label */
|
650
656
|
"short-label"?: SkfSelectOption["shortLabel"];
|
651
|
-
/** Returns or sets the
|
657
|
+
/** Returns or sets the option value. If value is omitted, defaults to the tags slotted text. */
|
652
658
|
value?: SkfSelectOption["value"];
|
653
659
|
/** The option's label text (equivalent to the tags textContent) */
|
654
660
|
text?: SkfSelectOption["text"];
|
655
661
|
/** */
|
656
|
-
|
657
|
-
/** */
|
658
|
-
_parent?: SkfSelectOption["_parent"];
|
662
|
+
small?: SkfSelectOption["small"];
|
659
663
|
/** */
|
660
664
|
_shortcutUpdate?: SkfSelectOption["_shortcutUpdate"];
|
661
665
|
/** {detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected. */
|
@@ -669,8 +673,6 @@ type SkfStepperItemProps = {
|
|
669
673
|
completed?: SkfStepperItem["completed"];
|
670
674
|
/** */
|
671
675
|
_setInternalState?: SkfStepperItem["_setInternalState"];
|
672
|
-
/** */
|
673
|
-
role?: SkfStepperItem["role"];
|
674
676
|
/** Dispatched when the stepper item is selected */
|
675
677
|
"onskf-stepper-item-select"?: (e: CustomEvent<never>) => void;
|
676
678
|
};
|
@@ -698,10 +700,10 @@ type SkfSwitchProps = {
|
|
698
700
|
"hide-label"?: SkfSwitch["hideLabel"];
|
699
701
|
/** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
|
700
702
|
label?: SkfSwitch["label"];
|
703
|
+
/** Sets the internal language of the component */
|
704
|
+
lang?: SkfSwitch["lang"];
|
701
705
|
/** If defined, adds name to the input-element */
|
702
706
|
name?: SkfSwitch["name"];
|
703
|
-
/** If defined, renders an alternative A11y text for the asterisk */
|
704
|
-
"required-label"?: SkfSwitch["requiredLabel"];
|
705
707
|
/** Size of the Switch */
|
706
708
|
size?: SkfSwitch["size"];
|
707
709
|
/** The current value of the input field */
|
@@ -713,8 +715,6 @@ type SkfTabPanelProps = {
|
|
713
715
|
name?: SkfTabPanel["name"];
|
714
716
|
/** */
|
715
717
|
active?: SkfTabPanel["active"];
|
716
|
-
/** */
|
717
|
-
role?: SkfTabPanel["role"];
|
718
718
|
};
|
719
719
|
|
720
720
|
type SkfTabsProps = {
|
@@ -737,8 +737,6 @@ type SkfTabProps = {
|
|
737
737
|
selected?: SkfTab["selected"];
|
738
738
|
/** */
|
739
739
|
variant?: SkfTab["variant"];
|
740
|
-
/** */
|
741
|
-
role?: SkfTab["role"];
|
742
740
|
/** {detail: { selected: true, tab: SkfTab }} Fires when the tab is selected */
|
743
741
|
"onskf-tab-select"?: (e: CustomEvent<CustomEvent>) => void;
|
744
742
|
/** Fired when the component is clicked */
|
@@ -762,6 +760,8 @@ type SkfTextAreaProps = {
|
|
762
760
|
hint?: SkfTextArea["hint"];
|
763
761
|
/** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
|
764
762
|
label?: SkfTextArea["label"];
|
763
|
+
/** Sets the internal language of the component */
|
764
|
+
lang?: SkfTextArea["lang"];
|
765
765
|
/** If defined, adds name to the input-element */
|
766
766
|
name?: SkfTextArea["name"];
|
767
767
|
/** If defined, sets the maximum character length to accept for this input */
|
@@ -772,8 +772,6 @@ type SkfTextAreaProps = {
|
|
772
772
|
placeholder?: SkfTextArea["placeholder"];
|
773
773
|
/** If true, makes the element not mutable, meaning the user can not edit the control */
|
774
774
|
readonly?: SkfTextArea["readonly"];
|
775
|
-
/** If defined, renders an alternative A11y text for the asterisk */
|
776
|
-
"required-label"?: SkfTextArea["requiredLabel"];
|
777
775
|
/** If defined, sets the rows of the textarea */
|
778
776
|
rows?: SkfTextArea["rows"];
|
779
777
|
/** If defined, displays provided severity state */
|
@@ -819,17 +817,19 @@ type SkfTooltipProps = {
|
|
819
817
|
/** The id of the element the dropdown will be anchored to */
|
820
818
|
anchor?: SkfTooltip["undefined"];
|
821
819
|
/** */
|
822
|
-
role?: SkfTooltip["role"];
|
823
|
-
/** */
|
824
820
|
offset?: SkfTooltip["offset"];
|
825
821
|
/** */
|
826
822
|
placement?: SkfTooltip["placement"];
|
827
823
|
/** */
|
828
824
|
variant?: SkfTooltip["variant"];
|
829
|
-
/**
|
830
|
-
"
|
831
|
-
/**
|
832
|
-
"
|
825
|
+
/** Method that opens the tooltip */
|
826
|
+
"open()"?: SkfTooltip["open()"];
|
827
|
+
/** Method that closes the tooltip */
|
828
|
+
"close()"?: SkfTooltip["close()"];
|
829
|
+
/** Fired when the tooltip is opened */
|
830
|
+
"onskf-opened"?: (e: CustomEvent<CustomEvent>) => void;
|
831
|
+
/** Fired when the tooltip is closed */
|
832
|
+
"onskf-closed"?: (e: CustomEvent<CustomEvent>) => void;
|
833
833
|
};
|
834
834
|
|
835
835
|
export type CustomElements = {
|
@@ -1051,6 +1051,30 @@ export type CustomElements = {
|
|
1051
1051
|
*/
|
1052
1052
|
"skf-logo": DefineComponent<SkfLogoProps>;
|
1053
1053
|
|
1054
|
+
/**
|
1055
|
+
* The `<skf-link>` can be used as either a regular link or a semantic button. The button variant is
|
1056
|
+
* intended to be used for triggering javascript functions, not handling forms.
|
1057
|
+
* ---
|
1058
|
+
*
|
1059
|
+
*
|
1060
|
+
* ### **Events:**
|
1061
|
+
* - **skf-link-click** - Fired when the link is clicked
|
1062
|
+
*
|
1063
|
+
* ### **Slots:**
|
1064
|
+
* - _default_ - The links' main content
|
1065
|
+
*/
|
1066
|
+
"skf-link": DefineComponent<SkfLinkProps>;
|
1067
|
+
|
1068
|
+
/**
|
1069
|
+
* The `<skf-nav>` is a component that displays a list of <nav-items>.
|
1070
|
+
* ---
|
1071
|
+
*
|
1072
|
+
*
|
1073
|
+
* ### **Slots:**
|
1074
|
+
* - _default_ - The component's main content
|
1075
|
+
*/
|
1076
|
+
"skf-nav-item": DefineComponent<SkfNavItemProps>;
|
1077
|
+
|
1054
1078
|
/**
|
1055
1079
|
* The `<skf-nav>` is a component that displays a list of <nav-items>.
|
1056
1080
|
* ---
|
@@ -1087,21 +1111,14 @@ export type CustomElements = {
|
|
1087
1111
|
*/
|
1088
1112
|
"skf-input": DefineComponent<SkfInputProps>;
|
1089
1113
|
|
1090
|
-
/**
|
1091
|
-
* The `<skf-link>` can be used as either a regular link or a link styled semantic button
|
1092
|
-
* ---
|
1093
|
-
*
|
1094
|
-
*
|
1095
|
-
* ### **Slots:**
|
1096
|
-
* - _default_ - The links' main content
|
1097
|
-
*/
|
1098
|
-
"skf-link": DefineComponent<SkfLinkProps>;
|
1099
|
-
|
1100
1114
|
/**
|
1101
1115
|
* The `<skf-menu-item>` is used in conjunction with the `<skf-menu>` component
|
1102
1116
|
* ---
|
1103
1117
|
*
|
1104
1118
|
*
|
1119
|
+
* ### **Events:**
|
1120
|
+
* - **skf-link-click** - Fired when the link is clicked
|
1121
|
+
*
|
1105
1122
|
* ### **Slots:**
|
1106
1123
|
* - _default_ - The component's main content
|
1107
1124
|
*/
|
@@ -1119,20 +1136,10 @@ export type CustomElements = {
|
|
1119
1136
|
* - **skf-closed** - Fired when the menu is closed
|
1120
1137
|
*
|
1121
1138
|
* ### **Slots:**
|
1122
|
-
* - _default_ - The menu
|
1139
|
+
* - _default_ - The menu content
|
1123
1140
|
*/
|
1124
1141
|
"skf-menu": DefineComponent<SkfMenuProps>;
|
1125
1142
|
|
1126
|
-
/**
|
1127
|
-
* The `<skf-nav>` is a component that displays a list of <nav-items>.
|
1128
|
-
* ---
|
1129
|
-
*
|
1130
|
-
*
|
1131
|
-
* ### **Slots:**
|
1132
|
-
* - _default_ - The component's main content
|
1133
|
-
*/
|
1134
|
-
"skf-nav-item": DefineComponent<SkfNavItemProps>;
|
1135
|
-
|
1136
1143
|
/**
|
1137
1144
|
* The `<skf-popover>` is a general purpose component that displays the slot content in a popover.
|
1138
1145
|
*
|
@@ -1141,8 +1148,8 @@ export type CustomElements = {
|
|
1141
1148
|
*
|
1142
1149
|
*
|
1143
1150
|
* ### **Events:**
|
1144
|
-
* - **skf-opened** - Fired when the
|
1145
|
-
* - **skf-closed** - Fired when the
|
1151
|
+
* - **skf-opened** - Fired when the popover is opened
|
1152
|
+
* - **skf-closed** - Fired when the popover is closed
|
1146
1153
|
*
|
1147
1154
|
* ### **Slots:**
|
1148
1155
|
* - _default_ - The popover content
|
@@ -1229,6 +1236,7 @@ export type CustomElements = {
|
|
1229
1236
|
* - **reset** - Fired when the form is reset
|
1230
1237
|
* - **skf-select-dropdown** - {detail: {expanded: boolean}} Fired when the select dropdown is toggled
|
1231
1238
|
* - **skf-select-option-select** - {detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled
|
1239
|
+
* - **skf-update-calendar-view** - Fires when the calendar view is updated
|
1232
1240
|
*
|
1233
1241
|
* ### **Slots:**
|
1234
1242
|
* - _default_ - The select's placeholder content
|
@@ -1237,6 +1245,7 @@ export type CustomElements = {
|
|
1237
1245
|
|
1238
1246
|
/**
|
1239
1247
|
* The `<skf-select-option>` is a component is used nested in a skf-select or skf-select-option-group.
|
1248
|
+
* It represents an individual option in a select dropdown.
|
1240
1249
|
* ---
|
1241
1250
|
*
|
1242
1251
|
*
|
@@ -1362,8 +1371,8 @@ export type CustomElements = {
|
|
1362
1371
|
*
|
1363
1372
|
*
|
1364
1373
|
* ### **Events:**
|
1365
|
-
* - **skf-opened** - Fired when the
|
1366
|
-
* - **skf-closed** - Fired when the
|
1374
|
+
* - **skf-opened** - Fired when the tooltip is opened
|
1375
|
+
* - **skf-closed** - Fired when the tooltip is closed
|
1367
1376
|
*
|
1368
1377
|
* ### **Slots:**
|
1369
1378
|
* - _default_ - The tooltip popover content
|
@@ -0,0 +1,28 @@
|
|
1
|
+
import type { Translation as DefaultTranslation } from '@shoelace-style/localize';
|
2
|
+
import { LocalizeController as DefaultLocalizationController } from '@shoelace-style/localize';
|
3
|
+
import * as translations from '../translations/index.js';
|
4
|
+
export declare class LocalizeController extends DefaultLocalizationController<Translation> {
|
5
|
+
}
|
6
|
+
export { registerTranslation } from '@shoelace-style/localize';
|
7
|
+
export interface Translation extends DefaultTranslation {
|
8
|
+
$code: string;
|
9
|
+
$name: string;
|
10
|
+
$dir: 'ltr' | 'rtl';
|
11
|
+
choose: string;
|
12
|
+
clearEntry: string;
|
13
|
+
close: string;
|
14
|
+
hidePassword: string;
|
15
|
+
itemsSelected: (count: number) => string;
|
16
|
+
loading: string;
|
17
|
+
mainNavigation: string;
|
18
|
+
nextMonth: string;
|
19
|
+
nextYear: string;
|
20
|
+
previousMonth: string;
|
21
|
+
previousYear: string;
|
22
|
+
required: string;
|
23
|
+
selectedDay: string;
|
24
|
+
showMenu: string;
|
25
|
+
showPassword: string;
|
26
|
+
today: string;
|
27
|
+
}
|
28
|
+
export type Language = keyof typeof translations;
|
@@ -0,0 +1,13 @@
|
|
1
|
+
import { LocalizeController as r, registerTranslation as o } from "@shoelace-style/localize";
|
2
|
+
import { registerTranslation as z } from "@shoelace-style/localize";
|
3
|
+
import t from "../translations/en.js";
|
4
|
+
import a from "../translations/es.js";
|
5
|
+
import i from "../translations/pt.js";
|
6
|
+
import l from "../translations/sv.js";
|
7
|
+
class c extends r {
|
8
|
+
}
|
9
|
+
o(t, a, i, l);
|
10
|
+
export {
|
11
|
+
c as LocalizeController,
|
12
|
+
z as registerTranslation
|
13
|
+
};
|