@riverty/web-components 5.3.0 → 5.4.0
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/CHANGELOG.md +27 -1
- package/custom-elements.json +32 -4
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/r-badge.cjs.entry.js +1 -1
- package/dist/cjs/r-dialog.cjs.entry.js +9 -10
- package/dist/cjs/r-hint_3.cjs.entry.js +4 -4
- package/dist/cjs/r-icon-button.cjs.entry.js +3 -3
- package/dist/cjs/r-input-code.cjs.entry.js +23 -7
- package/dist/cjs/r-input-date.cjs.entry.js +28 -7
- package/dist/cjs/r-input-password.cjs.entry.js +15 -4
- package/dist/cjs/r-input-phone-number.cjs.entry.js +57 -19
- package/dist/cjs/r-input.cjs.entry.js +15 -3
- package/dist/cjs/r-list-item.cjs.entry.js +13 -9
- package/dist/cjs/r-panel.cjs.entry.js +2 -2
- package/dist/cjs/r-popover-action.cjs.entry.js +1 -1
- package/dist/cjs/r-popover-content.cjs.entry.js +1 -1
- package/dist/cjs/r-popover-headline.cjs.entry.js +1 -1
- package/dist/cjs/r-popover-trigger.cjs.entry.js +1 -1
- package/dist/cjs/r-popover.cjs.entry.js +2 -2
- package/dist/cjs/r-progress-bar.cjs.entry.js +1 -1
- package/dist/cjs/r-radio-button-description.cjs.entry.js +1 -1
- package/dist/cjs/r-radio-button-leading.cjs.entry.js +1 -1
- package/dist/cjs/r-radio-button-title.cjs.entry.js +1 -1
- package/dist/cjs/r-radio-button-trailing.cjs.entry.js +1 -1
- package/dist/cjs/r-radio-button.cjs.entry.js +5 -5
- package/dist/cjs/r-radio-group.cjs.entry.js +6 -6
- package/dist/cjs/r-select-option.cjs.entry.js +1 -1
- package/dist/cjs/r-select.cjs.entry.js +5 -4
- package/dist/cjs/r-skip-link.cjs.entry.js +1 -1
- package/dist/cjs/r-stepper-item.cjs.entry.js +2 -2
- package/dist/cjs/r-stepper.cjs.entry.js +1 -1
- package/dist/cjs/r-tab-panel.cjs.entry.js +1 -1
- package/dist/cjs/r-tab.cjs.entry.js +1 -1
- package/dist/cjs/r-tabs-list.cjs.entry.js +1 -1
- package/dist/cjs/r-tabs.cjs.entry.js +3 -3
- package/dist/cjs/r-textarea.cjs.entry.js +17 -3
- package/dist/cjs/r-toast-group.cjs.entry.js +1 -1
- package/dist/cjs/r-toast.cjs.entry.js +15 -9
- package/dist/cjs/web-components.cjs.js +1 -1
- package/dist/collection/components/badge/badge.css +7 -7
- package/dist/collection/components/dialog/dialog.css +13 -13
- package/dist/collection/components/dialog/dialog.js +8 -9
- package/dist/collection/components/icon-button/icon-button.js +3 -3
- package/dist/collection/components/input/input.css +17 -2
- package/dist/collection/components/input/input.js +33 -2
- package/dist/collection/components/input-code/input-code.css +17 -2
- package/dist/collection/components/input-code/input-code.js +41 -6
- package/dist/collection/components/input-date/input-date.css +13 -2
- package/dist/collection/components/input-date/input-date.js +46 -6
- package/dist/collection/components/input-password/input-password.js +34 -4
- package/dist/collection/components/input-phone-number/input-phone-number.js +79 -18
- package/dist/collection/components/label/label.js +3 -3
- package/dist/collection/components/list-item/list-item/list-item.css +21 -22
- package/dist/collection/components/list-item/list-item/list-item.js +36 -10
- package/dist/collection/components/panel/panel.js +2 -2
- package/dist/collection/components/popover/popover.js +2 -2
- package/dist/collection/components/popover-action/popover-action.js +1 -1
- package/dist/collection/components/popover-content/popover-content.js +1 -1
- package/dist/collection/components/popover-headline/popover-headline.js +1 -1
- package/dist/collection/components/popover-trigger/popover-trigger.js +1 -1
- package/dist/collection/components/progress-bar/progress-bar.js +1 -1
- package/dist/collection/components/radio-button/radio-button.js +5 -5
- package/dist/collection/components/radio-button-description/radio-button-description.js +1 -1
- package/dist/collection/components/radio-button-leading/radio-button-leading.js +1 -1
- package/dist/collection/components/radio-button-title/radio-button-title.js +1 -1
- package/dist/collection/components/radio-button-trailing/radio-button-trailing.js +1 -1
- package/dist/collection/components/radio-group/radio-group.js +6 -6
- package/dist/collection/components/select/select.js +5 -4
- package/dist/collection/components/select-option/select-option.js +1 -1
- package/dist/collection/components/skip-link/skip-link.js +1 -1
- package/dist/collection/components/stepper/stepper.js +1 -1
- package/dist/collection/components/stepper-item/stepper-item.js +2 -2
- package/dist/collection/components/tab/tab.js +1 -1
- package/dist/collection/components/tab-panel/tab-panel.js +1 -1
- package/dist/collection/components/tabs/tabs.js +3 -3
- package/dist/collection/components/tabs-list/tabs-list.js +1 -1
- package/dist/collection/components/textarea/textarea.css +52 -21
- package/dist/collection/components/textarea/textarea.js +36 -3
- package/dist/collection/components/toast/toast.css +2 -1
- package/dist/collection/components/toast/toast.js +19 -10
- package/dist/collection/components/toast-group/toast-group.js +1 -1
- package/dist/collection/components/tooltip/tooltip.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/r-badge.entry.js +1 -1
- package/dist/esm/r-dialog.entry.js +9 -10
- package/dist/esm/r-hint_3.entry.js +4 -4
- package/dist/esm/r-icon-button.entry.js +3 -3
- package/dist/esm/r-input-code.entry.js +23 -7
- package/dist/esm/r-input-date.entry.js +28 -7
- package/dist/esm/r-input-password.entry.js +15 -4
- package/dist/esm/r-input-phone-number.entry.js +57 -19
- package/dist/esm/r-input.entry.js +15 -3
- package/dist/esm/r-list-item.entry.js +13 -9
- package/dist/esm/r-panel.entry.js +2 -2
- package/dist/esm/r-popover-action.entry.js +1 -1
- package/dist/esm/r-popover-content.entry.js +1 -1
- package/dist/esm/r-popover-headline.entry.js +1 -1
- package/dist/esm/r-popover-trigger.entry.js +1 -1
- package/dist/esm/r-popover.entry.js +2 -2
- package/dist/esm/r-progress-bar.entry.js +1 -1
- package/dist/esm/r-radio-button-description.entry.js +1 -1
- package/dist/esm/r-radio-button-leading.entry.js +1 -1
- package/dist/esm/r-radio-button-title.entry.js +1 -1
- package/dist/esm/r-radio-button-trailing.entry.js +1 -1
- package/dist/esm/r-radio-button.entry.js +5 -5
- package/dist/esm/r-radio-group.entry.js +6 -6
- package/dist/esm/r-select-option.entry.js +1 -1
- package/dist/esm/r-select.entry.js +5 -4
- package/dist/esm/r-skip-link.entry.js +1 -1
- package/dist/esm/r-stepper-item.entry.js +2 -2
- package/dist/esm/r-stepper.entry.js +1 -1
- package/dist/esm/r-tab-panel.entry.js +1 -1
- package/dist/esm/r-tab.entry.js +1 -1
- package/dist/esm/r-tabs-list.entry.js +1 -1
- package/dist/esm/r-tabs.entry.js +3 -3
- package/dist/esm/r-textarea.entry.js +17 -3
- package/dist/esm/r-toast-group.entry.js +1 -1
- package/dist/esm/r-toast.entry.js +15 -9
- package/dist/esm/web-components.js +1 -1
- package/dist/types/components/dialog/dialog.d.ts +1 -0
- package/dist/types/components/input/input.d.ts +6 -0
- package/dist/types/components/input-code/input-code.d.ts +6 -0
- package/dist/types/components/input-date/input-date.d.ts +6 -0
- package/dist/types/components/input-password/input-password.d.ts +5 -0
- package/dist/types/components/input-phone-number/input-phone-number.d.ts +7 -0
- package/dist/types/components/list-item/list-item/list-item.d.ts +11 -3
- package/dist/types/components/textarea/textarea.d.ts +8 -1
- package/dist/types/components/toast/toast.d.ts +6 -0
- package/dist/types/components.d.ts +66 -8
- package/dist/web-components/p-05ba30ba.entry.js +1 -0
- package/dist/web-components/p-0a424361.entry.js +1 -0
- package/dist/web-components/p-0ac858b8.entry.js +1 -0
- package/dist/web-components/p-0bb0de18.entry.js +1 -0
- package/dist/web-components/{p-5dd43433.entry.js → p-10724c18.entry.js} +1 -1
- package/dist/web-components/{p-59aa588e.entry.js → p-1157b7f4.entry.js} +1 -1
- package/dist/web-components/{p-5bc9fe5e.entry.js → p-135be1d5.entry.js} +1 -1
- package/dist/web-components/{p-5cd1ad6a.entry.js → p-1ed3efd7.entry.js} +1 -1
- package/dist/web-components/p-20f979ff.entry.js +1 -0
- package/dist/web-components/p-2394508f.entry.js +1 -0
- package/dist/web-components/{p-a45fd808.entry.js → p-2d85c0f3.entry.js} +1 -1
- package/dist/web-components/p-31c8388d.entry.js +1 -0
- package/dist/web-components/p-333707b2.entry.js +1 -0
- package/dist/web-components/p-3ea6a1be.entry.js +1 -0
- package/dist/web-components/p-3fc2b23b.entry.js +1 -0
- package/dist/web-components/{p-77335ae7.entry.js → p-48dfb286.entry.js} +1 -1
- package/dist/web-components/p-61f78bf6.entry.js +1 -0
- package/dist/web-components/{p-806b173d.entry.js → p-66c454ce.entry.js} +1 -1
- package/dist/web-components/{p-26e4816a.entry.js → p-71d6c4d7.entry.js} +1 -1
- package/dist/web-components/{p-4dae8c19.entry.js → p-735da2bb.entry.js} +1 -1
- package/dist/web-components/p-77dc268e.entry.js +1 -0
- package/dist/web-components/{p-512d3a60.entry.js → p-89ff32dc.entry.js} +1 -1
- package/dist/web-components/{p-0930ee1d.entry.js → p-8d6a35e3.entry.js} +1 -1
- package/dist/web-components/{p-90d390f4.entry.js → p-8f719321.entry.js} +1 -1
- package/dist/web-components/{p-d35303a6.entry.js → p-900923ab.entry.js} +1 -1
- package/dist/web-components/{p-651522b6.entry.js → p-988a7731.entry.js} +1 -1
- package/dist/web-components/{p-7545038f.entry.js → p-9c40f9cd.entry.js} +1 -1
- package/dist/web-components/p-aecd025b.entry.js +1 -0
- package/dist/web-components/{p-87bb4b91.entry.js → p-c7a9da98.entry.js} +1 -1
- package/dist/web-components/p-caca2855.entry.js +1 -0
- package/dist/web-components/{p-8968ddf6.entry.js → p-dc93ed55.entry.js} +1 -1
- package/dist/web-components/p-df81177e.entry.js +1 -0
- package/dist/web-components/{p-a81a67da.entry.js → p-e273950c.entry.js} +1 -1
- package/dist/web-components/{p-832dca22.entry.js → p-e50503d0.entry.js} +1 -1
- package/dist/web-components/p-fdf70aed.entry.js +1 -0
- package/dist/web-components/web-components.esm.js +1 -1
- package/package.json +1 -1
- package/dist/web-components/p-0bd10e93.entry.js +0 -1
- package/dist/web-components/p-15d10c68.entry.js +0 -1
- package/dist/web-components/p-1cfa9a0e.entry.js +0 -1
- package/dist/web-components/p-23ff25a1.entry.js +0 -1
- package/dist/web-components/p-50f01d6b.entry.js +0 -1
- package/dist/web-components/p-547fc56c.entry.js +0 -1
- package/dist/web-components/p-73adec9b.entry.js +0 -1
- package/dist/web-components/p-8388221b.entry.js +0 -1
- package/dist/web-components/p-8cc4be0c.entry.js +0 -1
- package/dist/web-components/p-98628a15.entry.js +0 -1
- package/dist/web-components/p-aff51d37.entry.js +0 -1
- package/dist/web-components/p-b07be088.entry.js +0 -1
- package/dist/web-components/p-b5c8e978.entry.js +0 -1
- package/dist/web-components/p-d6ef5fff.entry.js +0 -1
- package/dist/web-components/p-dfd8bed6.entry.js +0 -1
- package/dist/web-components/p-e138c70a.entry.js +0 -1
|
@@ -41,7 +41,7 @@ function requireCustomParseFormat () {
|
|
|
41
41
|
var customParseFormatExports = requireCustomParseFormat();
|
|
42
42
|
var customParseFormat = /*@__PURE__*/getDefaultExportFromCjs(customParseFormatExports);
|
|
43
43
|
|
|
44
|
-
const inputDateCss = ":host{display:inline-flex;flex-direction:column;vertical-align:top;--r-label--margin-bottom:0}:host slot{display:contents}:host(:hover:not([disabled]:not([disabled=false]))){--r-input-date--container--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host(:active:not([disabled]:not([disabled=false]))){--r-input-date--container--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([full-width]:not([full-width=false])){display:flex}:host([disabled]:not([disabled=false])){cursor:not-allowed;--r-input-date--container--opacity:0.4;--r-input-date--container--cursor:not-allowed;--r-input-date--container--pointer-events:none;--r-input-date--container--background-color:transparent}:host([invalid]:not([invalid=false])){--r-input-date--container--border-color:var(--r-status-error-regular, #da1e28);--r-input-date--container--background-color:var(--r-status-error-soft, #fef6f6)}.r-input-date{padding:var(--r-input-date--padding, 0);margin:var(--r-input-date--margin, 0);border:var(--r-input-date--border, none)}.r-input-date--legend-container{display:var(--r-input-date--legend-container--display, flex);gap:var(--r-input-date--legend-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-input-date--legend-container--align-items, center);justify-content:var(--r-input-date--label-container--align-items, space-between)}.r-input-date--legend-container ::slotted([slot=popover]){display:var(--r-input-date--popover--display, inline-flex);height:var(--r-input-date--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-input-date--popover--align-items, center);justify-content:var(--r-input-date--popover--justify-content, center);margin-right:var(--r-input-date--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-input-date--popover-trigger--min-width, var(--r-spacing-150, 1.5));--r-popover--trigger--min-height:var(--r-input-date--popover--trigger--min-height, var(--r-spacing-150, 1.5))}.r-input-date--legend{padding:var(--r-input-date--label--padding, 0)}.r-input-date--container{position:var(--r-input-date--container--position, relative);display:var(--r-input-date--container--display, flex);align-items:var(--r-input-date--container--align-items, center);height:var(--r-input-date--container--height, var(--r-spacing-275, 2.75rem));font-family:var(--r-input-date--container--font-family, var(--r-font-family-text, system-ui));background-color:var(--r-input-date--container--background-color, var(--r-background-softest, #fff));border-width:var(--r-input-date--container--border-width, 1px);border-style:var(--r-input-date--container--border-style, solid);border-color:var(--r-input-date--container--border-color, var(--r-border-soft, #686868));box-sizing:var(--r-input-date--container--box-sizing, border-box);box-shadow:var(--r-input-date--container--box-shadow, none);outline:var(--r-input-date--container--outline, none);outline-offset:var(--r-input-date--container--outline-offset, 0);padding-right:var(--r-input-date--container--padding-right, 0.7em);padding-left:var(--r-input-date--container--padding-left, 0.7em);opacity:var(--r-input-date--container--opacity, 1);pointer-events:var(--r-input-date--container--pointer-events, auto);cursor:var(--r-input-date--container--cursor, inherit);margin-top:var(--r-input-date--container--margin-top, var(--r-spacing-025, 0.25rem));gap:var(--r-input-date--leading--gap, 0.625rem)}.r-input-date--container:has(input:focus-within){--r-input-date--container--box-shadow:0 0 0 6px var(--r-border-focused-outlined);--r-input-date--container--outline:2px solid var(--r-border-focused);--r-input-date--container--outline-offset:2px}.r-input-date--calendar-icon{color:var(--r-input-date--leading--color, var(--r-icon-soft, #686868))}.r-input-date--inputs{display:var(--r-input-date--inputs--display, flex);align-items:var(--r-input-date--inputs--align-items, center)}.r-input-date--input{max-width:var(--r-input-date--input--max-width, 2.625rem);field-sizing:var(--r-input-date--input--field-sizing, content);outline:var(--r-input-date--input--outline, none);height:var(--r-input-date--input--height, 100%);font-family:var(--r-input-date--input--font-family, inherit);font-size:var(--r-input-date--input--font-size, var(--r-font-size-400, 1rem));background-color:var(--r-input-date--input--background-color, transparent);border:var(--r-input-date--input--border, none);padding:var(--r-input-date--input--padding, 0)}.r-input-date--input[data-date-type=DD]{--r-input-date--input--max-width:1.5rem}.r-input-date--input[data-date-type=MM]{--r-input-date--input--max-width:1.75rem}.r-input-date--delimiter{padding-inline:var(--r-input-date--delimiter--padding-inline, var(--r-spacing-025, 0.25rem));margin-top:var(--r-input-date--delimiter--margin-top, -0.25rem);color:var(--r-input-date--delimiter--color, var(--r-border-regular, #282828));font-size:var(--r-input-date--delimiter--font-size, var(--r-spacing-150, 1.5rem));font-weight:var(--r-input-date--delimiter--font-weight, 200)}.r-input-date--message{margin-top:var(--r-input-date--message--margin-top, var(--r-spacing-025, 0.25rem))}.r-input-date--message:empty{--r-input-date--message--margin-top:0}.r-input-date--trailing{display:var(--r-input-date--trailing--display, flex);margin-left:var(--r-input-date--trailing--margin-left, auto)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
|
|
44
|
+
const inputDateCss = ":host{display:inline-flex;flex-direction:column;vertical-align:top;--r-label--margin-bottom:0}:host slot{display:contents}:host([readonly]:not([readonly=false])){--r-input-date--container--background-color:var(--r-background-soft, #f3f1f0);--r-input-date--container--border-color:transparent transparent var(--r-border-soft, #686868) transparent;--r-input-date--container--cursor:text}:host(:hover:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input-date--container--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host(:active:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input-date--container--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([full-width]:not([full-width=false])){display:flex}:host([disabled]:not([disabled=false])){cursor:not-allowed;--r-input-date--container--opacity:0.4;--r-input-date--container--cursor:not-allowed;--r-input-date--container--pointer-events:none;--r-input-date--container--background-color:transparent}:host([invalid]:not([invalid=false])){--r-input-date--container--border-color:var(--r-status-error-regular, #da1e28);--r-input-date--container--background-color:var(--r-status-error-soft, #fef6f6)}.r-input-date{padding:var(--r-input-date--padding, 0);margin:var(--r-input-date--margin, 0);border:var(--r-input-date--border, none)}.r-input-date--legend-container{display:var(--r-input-date--legend-container--display, flex);gap:var(--r-input-date--legend-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-input-date--legend-container--align-items, center);justify-content:var(--r-input-date--label-container--align-items, space-between)}.r-input-date--legend-container ::slotted([slot=popover]){display:var(--r-input-date--popover--display, inline-flex);height:var(--r-input-date--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-input-date--popover--align-items, center);justify-content:var(--r-input-date--popover--justify-content, center);margin-right:var(--r-input-date--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-input-date--popover-trigger--min-width, var(--r-spacing-150, 1.5));--r-popover--trigger--min-height:var(--r-input-date--popover--trigger--min-height, var(--r-spacing-150, 1.5))}.r-input-date--legend{padding:var(--r-input-date--label--padding, 0)}.r-input-date--container{position:var(--r-input-date--container--position, relative);display:var(--r-input-date--container--display, flex);align-items:var(--r-input-date--container--align-items, center);height:var(--r-input-date--container--height, var(--r-spacing-275, 2.75rem));font-family:var(--r-input-date--container--font-family, var(--r-font-family-text, system-ui));background-color:var(--r-input-date--container--background-color, var(--r-background-softest, #fff));border-width:var(--r-input-date--container--border-width, 1px);border-style:var(--r-input-date--container--border-style, solid);border-color:var(--r-input-date--container--border-color, var(--r-border-soft, #686868));box-sizing:var(--r-input-date--container--box-sizing, border-box);box-shadow:var(--r-input-date--container--box-shadow, none);outline:var(--r-input-date--container--outline, none);outline-offset:var(--r-input-date--container--outline-offset, 0);padding-right:var(--r-input-date--container--padding-right, 0.7em);padding-left:var(--r-input-date--container--padding-left, 0.7em);opacity:var(--r-input-date--container--opacity, 1);pointer-events:var(--r-input-date--container--pointer-events, auto);cursor:var(--r-input-date--container--cursor, inherit);margin-top:var(--r-input-date--container--margin-top, var(--r-spacing-025, 0.25rem));gap:var(--r-input-date--leading--gap, 0.625rem)}.r-input-date--container:has(input:focus-within){--r-input-date--container--box-shadow:0 0 0 6px var(--r-border-focused-outlined);--r-input-date--container--outline:2px solid var(--r-border-focused);--r-input-date--container--outline-offset:2px}.r-input-date--calendar-icon{color:var(--r-input-date--leading--color, var(--r-icon-soft, #686868))}.r-input-date--inputs{display:var(--r-input-date--inputs--display, flex);align-items:var(--r-input-date--inputs--align-items, center)}.r-input-date--input{max-width:var(--r-input-date--input--max-width, 2.625rem);field-sizing:var(--r-input-date--input--field-sizing, content);outline:var(--r-input-date--input--outline, none);height:var(--r-input-date--input--height, 100%);font-family:var(--r-input-date--input--font-family, inherit);font-size:var(--r-input-date--input--font-size, var(--r-font-size-400, 1rem));background-color:var(--r-input-date--input--background-color, transparent);border:var(--r-input-date--input--border, none);padding:var(--r-input-date--input--padding, 0)}.r-input-date--input[data-date-type=DD]{--r-input-date--input--max-width:1.5rem}.r-input-date--input[data-date-type=MM]{--r-input-date--input--max-width:1.75rem}.r-input-date--delimiter{padding-inline:var(--r-input-date--delimiter--padding-inline, var(--r-spacing-025, 0.25rem));margin-top:var(--r-input-date--delimiter--margin-top, -0.25rem);color:var(--r-input-date--delimiter--color, var(--r-border-regular, #282828));font-size:var(--r-input-date--delimiter--font-size, var(--r-spacing-150, 1.5rem));font-weight:var(--r-input-date--delimiter--font-weight, 200)}.r-input-date--message{margin-top:var(--r-input-date--message--margin-top, var(--r-spacing-025, 0.25rem))}.r-input-date--message:empty{--r-input-date--message--margin-top:0}.r-input-date--trailing{display:var(--r-input-date--trailing--display, flex);margin-left:var(--r-input-date--trailing--margin-left, auto);align-items:var(--r-input-date--trailing--align-items, center);gap:var(--r-input-date--trailing--gap, 0.625rem)}.r-input-date--readonly-icon{color:var(--r-input-date--readonly-icon--color, var(--r-icon-soft, #686868))}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
|
|
45
45
|
|
|
46
46
|
const InputDate = class {
|
|
47
47
|
constructor(hostRef) {
|
|
@@ -128,6 +128,7 @@ const InputDate = class {
|
|
|
128
128
|
inputmode: 'numeric',
|
|
129
129
|
disabled: this.disabled,
|
|
130
130
|
required: this.required,
|
|
131
|
+
readonly: this.readonly,
|
|
131
132
|
'aria-label': label(type),
|
|
132
133
|
'data-date-type': type
|
|
133
134
|
};
|
|
@@ -137,6 +138,8 @@ const InputDate = class {
|
|
|
137
138
|
return ((_a = value.replace(/[^.\-/]/g, '')) === null || _a === void 0 ? void 0 : _a.charAt(0)) || '/';
|
|
138
139
|
};
|
|
139
140
|
this.updateValue = () => {
|
|
141
|
+
if (this.readonly)
|
|
142
|
+
return;
|
|
140
143
|
this.delimiter = this.getDelimiter(this.format);
|
|
141
144
|
this.value = this.value ? this.inputOrder.map((input) => this.getDateComponent(input)).join(this.delimiter) : '';
|
|
142
145
|
};
|
|
@@ -152,6 +155,8 @@ const InputDate = class {
|
|
|
152
155
|
};
|
|
153
156
|
this.handleKeyDown = (index, event) => {
|
|
154
157
|
var _a, _b, _c, _d, _e, _f;
|
|
158
|
+
if (this.readonly)
|
|
159
|
+
return;
|
|
155
160
|
if (event.code === 'Enter') {
|
|
156
161
|
this.validateFormElement(this.nativeElement);
|
|
157
162
|
if (this.invalid && !this.isNoValidate)
|
|
@@ -200,6 +205,8 @@ const InputDate = class {
|
|
|
200
205
|
}
|
|
201
206
|
};
|
|
202
207
|
this.handlePaste = (event) => {
|
|
208
|
+
if (this.readonly)
|
|
209
|
+
return;
|
|
203
210
|
this.value = event.clipboardData.getData('text');
|
|
204
211
|
event.preventDefault();
|
|
205
212
|
};
|
|
@@ -208,6 +215,8 @@ const InputDate = class {
|
|
|
208
215
|
};
|
|
209
216
|
this.handleInput = (input, index, event) => {
|
|
210
217
|
var _a, _b, _c;
|
|
218
|
+
if (this.readonly)
|
|
219
|
+
return;
|
|
211
220
|
const value = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.replace(/[^0-9]/g, '');
|
|
212
221
|
event.target.value = value;
|
|
213
222
|
this.setDateComponent(input, value);
|
|
@@ -223,11 +232,14 @@ const InputDate = class {
|
|
|
223
232
|
};
|
|
224
233
|
this.handleChange = (input, event) => {
|
|
225
234
|
var _a;
|
|
235
|
+
if (this.readonly)
|
|
236
|
+
return;
|
|
226
237
|
const value = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.replace(/[^0-9]/g, '');
|
|
227
238
|
event.target.value = value;
|
|
228
239
|
this.setDateComponent(input, value);
|
|
229
240
|
this.value = this.inputOrder.map((el) => this.getDateComponent(el)).join(this.delimiter);
|
|
230
241
|
this.rChange.emit({ element: this.host, value: this.value });
|
|
242
|
+
this.validateFormElement(this.nativeElement);
|
|
231
243
|
};
|
|
232
244
|
this.getValidityStateData = (element) => {
|
|
233
245
|
if (this.required && element.value.length === 0) {
|
|
@@ -258,6 +270,8 @@ const InputDate = class {
|
|
|
258
270
|
});
|
|
259
271
|
};
|
|
260
272
|
this.onResetForm = async () => {
|
|
273
|
+
if (this.readonly)
|
|
274
|
+
return;
|
|
261
275
|
this.reset();
|
|
262
276
|
this.validityState = null;
|
|
263
277
|
this.validityMessage = null;
|
|
@@ -317,6 +331,8 @@ const InputDate = class {
|
|
|
317
331
|
* @returns Promise that resolves when reset is complete
|
|
318
332
|
*/
|
|
319
333
|
async reset() {
|
|
334
|
+
if (this.readonly)
|
|
335
|
+
return;
|
|
320
336
|
this.validityState = null;
|
|
321
337
|
this.validityMessage = null;
|
|
322
338
|
this.value = this.initial['value'];
|
|
@@ -363,6 +379,9 @@ const InputDate = class {
|
|
|
363
379
|
get firstEmptyInput() {
|
|
364
380
|
return this.inputs.find(input => !input.value) || null;
|
|
365
381
|
}
|
|
382
|
+
get hasTrailingSlot() {
|
|
383
|
+
return !!this.host.querySelector('[slot="trailing"]');
|
|
384
|
+
}
|
|
366
385
|
componentWillLoad() {
|
|
367
386
|
dayjs.extend(customParseFormat);
|
|
368
387
|
this.delimiter = this.getDelimiter(this.format);
|
|
@@ -390,7 +409,7 @@ const InputDate = class {
|
|
|
390
409
|
this.disconnectFormEventListeners();
|
|
391
410
|
}
|
|
392
411
|
render() {
|
|
393
|
-
const { form, name, required, disabled, label, fieldIndicator, hint, tooltip, tooltipIcon, tooltipIconColor, uniqueId, invalid, valid } = this;
|
|
412
|
+
const { form, name, required, disabled, label, fieldIndicator, hint, tooltip, tooltipIcon, tooltipIconColor, uniqueId, invalid, valid, readonly } = this;
|
|
394
413
|
const groupAttrs = {
|
|
395
414
|
'aria-invalid': `${invalid || false}`,
|
|
396
415
|
'aria-describedby': this.ariaDescribedBy
|
|
@@ -401,6 +420,7 @@ const InputDate = class {
|
|
|
401
420
|
name,
|
|
402
421
|
required,
|
|
403
422
|
disabled,
|
|
423
|
+
readonly,
|
|
404
424
|
'aria-describedby': this.ariaDescribedBy
|
|
405
425
|
};
|
|
406
426
|
// DEPRECATED: will be removed in November 2025 release.
|
|
@@ -413,13 +433,14 @@ const InputDate = class {
|
|
|
413
433
|
id: `${uniqueId}-label`,
|
|
414
434
|
fieldIndicator
|
|
415
435
|
} : {};
|
|
416
|
-
return (h(Host, { key: '
|
|
436
|
+
return (h(Host, { key: '291b135444b1fa349daddde0f182d67688e739bb', onClick: this.onHostClick }, h("fieldset", Object.assign({ key: 'ba9bdebb80e24fff65d2b18902e97a3497c3f602', class: "r-input-date" }, groupAttrs), h("div", { key: '74ac02efb2741cc4de337133d68ad5eaf978b911', class: "r-input-date--legend-container" }, h("legend", { key: 'c3fc3b194b878e9acb717b6c70e05db55a9ad63a', class: "r-input-date--legend" }, h("label", { key: '5c7eee1fadb2c62d55b8a890eeec2c163d87d0b9', htmlFor: uniqueId }, label ?
|
|
417
437
|
h("r-label", Object.assign({}, labelAttr, tooltipAttrs), label)
|
|
418
438
|
:
|
|
419
|
-
h("slot", { name: "label" }))), h("slot", { key: '
|
|
420
|
-
h("r-hint", { key: '
|
|
421
|
-
h("span", { "aria-hidden": "true", class: "r-input-date--delimiter" }, this.delimiter)))), h("input", Object.assign({ key: '
|
|
422
|
-
h("r-icon", { key: '
|
|
439
|
+
h("slot", { name: "label" }))), h("slot", { key: '0f5d78659b43177ebabfe9d5201083ca09ec34c0', name: "popover" })), hint &&
|
|
440
|
+
h("r-hint", { key: 'cc46269c0a59a29ed5f4d454316d3736febd11d8', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '407b00450575bea92bbd0ea1c8f2f7050cc5731b', class: "r-input-date--container" }, h("r-icon", { key: '192a807af7a17da42dbfc104b250008fb92f9201', name: "calendar", size: "s", class: "r-input-date--calendar-icon" }), h("div", { key: 'e97c5d40242fef7a0e7de74498415342e98a3914', class: "r-input-date--inputs" }, this.inputOrder.map((input, i) => (h(Fragment, null, h("input", Object.assign({ class: "r-input-date--input" }, this.getInputAttrs(input), { key: input, value: this.getDateComponent(input), onInput: this.createInputHandler(input, i), onChange: this.createChangeHandler(input), onClick: this.onInputClick, onKeyDown: this.createKeyDownHandler(i), onPaste: this.handlePaste })), i < this.inputOrder.length - 1 &&
|
|
441
|
+
h("span", { "aria-hidden": "true", class: "r-input-date--delimiter" }, this.delimiter)))), h("input", Object.assign({ key: 'e93adbded043a7e5cb621b3f12c25145f1110c7e', type: "hidden" }, dateInputAttrs, { value: this.value, ref: (el) => this.nativeElement = el }))), h("div", { key: '6046c334c88411bbeb36f96201e75c3af55302af', class: "r-input-date--trailing" }, this.readonly &&
|
|
442
|
+
h("r-icon", { key: '69d132c86d369d900d9d5e7f1b8b01bb5fa35203', class: "r-input-date--readonly-icon", name: "pen-disabled", size: "s" }), valid &&
|
|
443
|
+
h("r-icon", { key: '9a2ddfc73a8d9cc615abc035c5854158a3314ff3', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }), this.hasTrailingSlot && h("slot", { key: '6e7b97da07d9dd20da07cfd743c3e6e0d5e82308', name: "trailing" }))), h("div", { key: 'd0a3edff590af1893bafa7d51a41ba261f6c6215', id: `${uniqueId}-message`, "aria-live": "polite", class: "r-input-date--message" }, this.hasMessage && h("r-hint", { key: '077b7b9a115ca1c871498a8840fe4019e39deea3', variant: "error" }, this.message)))));
|
|
423
444
|
}
|
|
424
445
|
get host() { return getElement(this); }
|
|
425
446
|
static get watchers() { return {
|
|
@@ -45,11 +45,15 @@ const InputPassword = class {
|
|
|
45
45
|
}, 2000);
|
|
46
46
|
};
|
|
47
47
|
this.onInput = (event) => {
|
|
48
|
+
if (this.readonly)
|
|
49
|
+
return;
|
|
48
50
|
this.value = event.detail.value;
|
|
49
51
|
const { host, value } = this;
|
|
50
52
|
this.rInput.emit({ element: host, value });
|
|
51
53
|
};
|
|
52
54
|
this.onChange = (event) => {
|
|
55
|
+
if (this.readonly)
|
|
56
|
+
return;
|
|
53
57
|
this.value = event.detail.value;
|
|
54
58
|
const { host, value } = this;
|
|
55
59
|
this.rChange.emit({ element: host, value });
|
|
@@ -86,6 +90,8 @@ const InputPassword = class {
|
|
|
86
90
|
appendControlToFormData(this.nativeElement || this.host, event.formData);
|
|
87
91
|
};
|
|
88
92
|
this.onResetForm = () => {
|
|
93
|
+
if (this.readonly)
|
|
94
|
+
return;
|
|
89
95
|
this.validityState = null;
|
|
90
96
|
this.validityMessage = null;
|
|
91
97
|
this.value = this.initial['value'];
|
|
@@ -105,6 +111,8 @@ const InputPassword = class {
|
|
|
105
111
|
};
|
|
106
112
|
this.handleKeyup = async (event) => {
|
|
107
113
|
var _a, _b;
|
|
114
|
+
if (this.readonly)
|
|
115
|
+
return;
|
|
108
116
|
if (event.code !== 'Enter')
|
|
109
117
|
return;
|
|
110
118
|
this.validateFormElement(this.nativeElement);
|
|
@@ -120,6 +128,8 @@ const InputPassword = class {
|
|
|
120
128
|
}
|
|
121
129
|
};
|
|
122
130
|
this.handleBlur = () => {
|
|
131
|
+
if (this.readonly)
|
|
132
|
+
return;
|
|
123
133
|
this.validateFormElement(this.nativeElement);
|
|
124
134
|
};
|
|
125
135
|
}
|
|
@@ -199,7 +209,7 @@ const InputPassword = class {
|
|
|
199
209
|
this.disconnectFormEventListeners();
|
|
200
210
|
}
|
|
201
211
|
render() {
|
|
202
|
-
const { name, placeholder, required, fieldIndicator, value, disabled, form, invalid, valid, hint, label, tooltip, tooltipIcon, tooltipIconColor, fullWidth, showPasswordAriaLabel, hidePasswordAriaLabel, showed } = this;
|
|
212
|
+
const { name, placeholder, required, fieldIndicator, value, disabled, form, invalid, valid, hint, label, tooltip, tooltipIcon, tooltipIconColor, fullWidth, showPasswordAriaLabel, hidePasswordAriaLabel, showed, readonly } = this;
|
|
203
213
|
const inputAttrs = {
|
|
204
214
|
name,
|
|
205
215
|
placeholder,
|
|
@@ -216,10 +226,11 @@ const InputPassword = class {
|
|
|
216
226
|
tooltipIcon,
|
|
217
227
|
tooltipIconColor,
|
|
218
228
|
fullWidth,
|
|
219
|
-
novalidate: true
|
|
229
|
+
novalidate: true,
|
|
230
|
+
readonly
|
|
220
231
|
};
|
|
221
|
-
return (h(Host, { key: '
|
|
222
|
-
h("r-hint", { key: '
|
|
232
|
+
return (h(Host, { key: 'a572ffb573f9d4ff7732c372077d1488a86fd4be' }, h("r-input", Object.assign({ key: '9296fe93c32f82c850c571dfc588d599d4fedfeb' }, inputAttrs, { ref: (el) => this.nativeElement = el, type: showed ? 'text' : 'password', onRInput: this.onInput, onRChange: this.onChange, onKeyUp: this.handleKeyup, onRBlur: this.handleBlur }), h("r-icon", { key: '4ed51719c83a3b4e90fd86d95969b982f3372d16', name: "padlock-closed", size: "s", slot: "leading" }), h("slot", { key: 'c00d7cd2254773750a7a4627c7600550590f0e03', name: "popover", slot: "popover" }), h("r-icon-button", { key: '7bf8aabd7b00a2a36038d1f6162f11114dfa72fa', slot: "trailing", name: showed ? 'eye-crossed-out' : 'eye', size: "s", disabled: disabled, label: showed ? hidePasswordAriaLabel : showPasswordAriaLabel, onClick: this.onShowClick }), this.hasMessage &&
|
|
233
|
+
h("r-hint", { key: '654c4558871e740f13ae50351ff82e3befccc83d', slot: "message", variant: "error" }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage))), h("div", { key: 'e8b5e4a4a69ddf7074e88eb18c5e9ff725e3baa5', class: "visually-hidden", ref: el => this.passwordVisibilityChangeAlertContainer = el, "aria-live": "polite" })));
|
|
223
234
|
}
|
|
224
235
|
get host() { return getElement(this); }
|
|
225
236
|
};
|
|
@@ -2240,22 +2240,31 @@ const InputPhoneNumber = class {
|
|
|
2240
2240
|
* */
|
|
2241
2241
|
this.initial = {};
|
|
2242
2242
|
this.handleOnInput = (event) => {
|
|
2243
|
+
if (this.readonly)
|
|
2244
|
+
return;
|
|
2243
2245
|
this.phoneNumber = event.target.value;
|
|
2244
2246
|
this.fullPhoneNumber = this.phoneNumber ? this.countryCode + this.phoneNumber : '';
|
|
2245
2247
|
const { host, phoneNumber, countryCode, value } = this;
|
|
2246
2248
|
this.rInput.emit({ element: host, value, countryCode, phoneNumber });
|
|
2249
|
+
this.validateFormElement(this.nativeElement);
|
|
2247
2250
|
};
|
|
2248
2251
|
this.handleInputOnChange = (event) => {
|
|
2252
|
+
if (this.readonly)
|
|
2253
|
+
return;
|
|
2249
2254
|
this.phoneNumber = event.target.value;
|
|
2250
2255
|
this.handleValueChange();
|
|
2251
2256
|
};
|
|
2252
2257
|
this.handleValueChange = () => {
|
|
2258
|
+
if (this.readonly)
|
|
2259
|
+
return;
|
|
2253
2260
|
this.fullPhoneNumber = this.phoneNumber ? this.countryCode + this.phoneNumber : '';
|
|
2254
2261
|
const { host, phoneNumber, countryCode, value } = this;
|
|
2255
2262
|
this.rChange.emit({ element: host, value, countryCode, phoneNumber });
|
|
2256
2263
|
this.validateFormElement(this.nativeElement);
|
|
2257
2264
|
};
|
|
2258
2265
|
this.validateFormElement = (element) => {
|
|
2266
|
+
if (this.readonly)
|
|
2267
|
+
return;
|
|
2259
2268
|
if (element === null)
|
|
2260
2269
|
return;
|
|
2261
2270
|
if (this.isNoValidate)
|
|
@@ -2304,6 +2313,8 @@ const InputPhoneNumber = class {
|
|
|
2304
2313
|
};
|
|
2305
2314
|
this.onResetForm = () => {
|
|
2306
2315
|
var _a;
|
|
2316
|
+
if (this.readonly)
|
|
2317
|
+
return;
|
|
2307
2318
|
this.validityState = null;
|
|
2308
2319
|
this.validityMessage = null;
|
|
2309
2320
|
this.phoneNumber = '';
|
|
@@ -2342,12 +2353,24 @@ const InputPhoneNumber = class {
|
|
|
2342
2353
|
this.validateFormElement(this.nativeElement);
|
|
2343
2354
|
}
|
|
2344
2355
|
handleDisabledChange() {
|
|
2345
|
-
|
|
2346
|
-
|
|
2356
|
+
this.setCountryCodeElementAttributes({
|
|
2357
|
+
'disabled': `${!!this.disabled}`
|
|
2358
|
+
});
|
|
2347
2359
|
}
|
|
2348
2360
|
handleRequiredChange() {
|
|
2349
|
-
|
|
2350
|
-
|
|
2361
|
+
this.setCountryCodeElementAttributes({
|
|
2362
|
+
'required': `${!!this.required}`
|
|
2363
|
+
});
|
|
2364
|
+
}
|
|
2365
|
+
handleReadonlyChange() {
|
|
2366
|
+
this.setCountryCodeElementAttributes({
|
|
2367
|
+
'readonly': `${!!this.readonly}`
|
|
2368
|
+
});
|
|
2369
|
+
}
|
|
2370
|
+
handleLabelChange() {
|
|
2371
|
+
this.setCountryCodeElementAttributes({
|
|
2372
|
+
'label': this.countryCodeLabel
|
|
2373
|
+
});
|
|
2351
2374
|
}
|
|
2352
2375
|
/** Identify wrapping form element */
|
|
2353
2376
|
get parentFormEl() {
|
|
@@ -2403,15 +2426,16 @@ const InputPhoneNumber = class {
|
|
|
2403
2426
|
this.phoneNumber = value.replace(countryCode, '');
|
|
2404
2427
|
(_b = this.countryCodeElement) === null || _b === void 0 ? void 0 : _b.setValue(countryCode);
|
|
2405
2428
|
}
|
|
2406
|
-
setCountryCodeElementAttributes() {
|
|
2407
|
-
|
|
2408
|
-
|
|
2409
|
-
|
|
2410
|
-
|
|
2411
|
-
|
|
2412
|
-
|
|
2413
|
-
|
|
2414
|
-
|
|
2429
|
+
setCountryCodeElementAttributes(attributes) {
|
|
2430
|
+
Object.entries(attributes || {}).forEach(([key, val]) => {
|
|
2431
|
+
var _a, _b;
|
|
2432
|
+
if (val === false || val === null || val === undefined) {
|
|
2433
|
+
(_a = this.countryCodeElement) === null || _a === void 0 ? void 0 : _a.removeAttribute(key);
|
|
2434
|
+
}
|
|
2435
|
+
else {
|
|
2436
|
+
(_b = this.countryCodeElement) === null || _b === void 0 ? void 0 : _b.setAttribute(key, String(val));
|
|
2437
|
+
}
|
|
2438
|
+
});
|
|
2415
2439
|
}
|
|
2416
2440
|
getPhoneValidationResult(phoneNumber, countryCode = '') {
|
|
2417
2441
|
return distExports.phone(countryCode + phoneNumber, { validateMobilePrefix: false });
|
|
@@ -2434,7 +2458,19 @@ const InputPhoneNumber = class {
|
|
|
2434
2458
|
this.initial['value'] = this.value;
|
|
2435
2459
|
this.initial['invalid'] = this.invalid;
|
|
2436
2460
|
this.updateValues(this.value);
|
|
2437
|
-
|
|
2461
|
+
const staticAttributes = {
|
|
2462
|
+
'show-leading-icon': 'true',
|
|
2463
|
+
'leading-icon': 'globe',
|
|
2464
|
+
'placeholder': '+00',
|
|
2465
|
+
'internal': 'true'
|
|
2466
|
+
};
|
|
2467
|
+
const dynamicAttributes = {
|
|
2468
|
+
'disabled': `${!!this.disabled}`,
|
|
2469
|
+
'required': `${!!this.required}`,
|
|
2470
|
+
'readonly': `${!!this.readonly}`,
|
|
2471
|
+
'label': this.countryCodeLabel
|
|
2472
|
+
};
|
|
2473
|
+
this.setCountryCodeElementAttributes(Object.assign(Object.assign({}, staticAttributes), dynamicAttributes));
|
|
2438
2474
|
}
|
|
2439
2475
|
componentDidLoad() {
|
|
2440
2476
|
this.connectEventListeners();
|
|
@@ -2460,16 +2496,18 @@ const InputPhoneNumber = class {
|
|
|
2460
2496
|
disabled,
|
|
2461
2497
|
'aria-describedby': this.ariaDescribedBy
|
|
2462
2498
|
};
|
|
2463
|
-
return (h(Host, { key: '
|
|
2464
|
-
h("r-label", Object.assign({ key: '
|
|
2465
|
-
h("r-hint", { key: '
|
|
2466
|
-
h("r-icon", { key: '
|
|
2499
|
+
return (h(Host, { key: '93e31af4d248db4fe90a84b897d96207dbf9b6e9' }, h("div", { key: 'fc909eb39efe18413838c9f051d7ad7d5aa461b3', class: "r-input-phone-number--label-container" }, h("label", { key: 'b849fc5188a03e52151006fd48338fe0a07dfd83', id: `${uniqueId}-label` }, label &&
|
|
2500
|
+
h("r-label", Object.assign({ key: '6bab502ebce17055ef3e2862f9063bfd2d0d1291' }, labelAttr), label)), h("slot", { key: '014cbcd421f75299935cf430a8777ded1880134c', name: "popover" })), hint &&
|
|
2501
|
+
h("r-hint", { key: '4f8e473e4c70ac62618f6d651dca1880aa755c3e', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '7fa42ec6de7083cc8703f5bcbbfaabe283462d45', class: "r-input-phone-number", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.ariaDescribedBy }, h("slot", { key: '64b8a315acb0057e82d1c77dd3b35bc141378cc0' }), h("r-input", { key: '5fdaa9c0c5bb4913637b895f0979f377bac876bc', label: inputLabel, value: phoneNumber, internal: true, valid: valid, invalid: invalid, required: required, readonly: this.readonly, novalidate: true, fullWidth: fullWidth, type: "tel", error: this.errorMessage || '', onRInput: this.handleOnInput, onRChange: this.handleInputOnChange, disabled: disabled }, valid && phoneNumber &&
|
|
2502
|
+
h("r-icon", { key: '6c25f0a2e473315279679c3e607691f8a3eca396', slot: "trailing", name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }))), h("input", Object.assign({ key: '39cca18332d8e6473bef33db6e395a8aac36a954', type: "hidden" }, inputAttrs, { readonly: this.readonly, value: fullPhoneNumber, ref: el => this.nativeElement = el })), h("r-hint", { key: '8feb70b56f27287b06a3ba894a554d736d9e9b4b', "aria-live": "polite", "aria-atomic": "true", id: `${uniqueId}-message`, class: !this.hasMessage && 'visually-hidden', variant: "error" }, this.hasMessage ? (this.hasError ? this.error : this.validityMessage) : '')));
|
|
2467
2503
|
}
|
|
2468
2504
|
get host() { return getElement(this); }
|
|
2469
2505
|
static get watchers() { return {
|
|
2470
2506
|
"value": ["watchValueChange"],
|
|
2471
2507
|
"disabled": ["handleDisabledChange"],
|
|
2472
|
-
"required": ["handleRequiredChange"]
|
|
2508
|
+
"required": ["handleRequiredChange"],
|
|
2509
|
+
"readonly": ["handleReadonlyChange"],
|
|
2510
|
+
"label": ["handleLabelChange"]
|
|
2473
2511
|
}; }
|
|
2474
2512
|
};
|
|
2475
2513
|
InputPhoneNumber.style = inputPhoneNumberCss;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CTxpqopm.js';
|
|
2
2
|
import { a as appendControlToFormData } from './formData-DvLT8-y3.js';
|
|
3
3
|
|
|
4
|
-
const inputCss = ":host{display:inline-flex;flex-direction:column;vertical-align:top;--r-label--margin-bottom:0}:host slot{display:contents}:host(:hover:not([disabled]:not([disabled=false]))){--r-input--container--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host(.focused){--r-input--container--box-shadow:0 0 0 6px var(--r-border-focused-outlined);--r-input--container--outline:2px solid var(--r-border-focused);--r-input--container--outline-offset:2px}:host(:active:not([disabled]:not([disabled=false]))){--r-input--container--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([expanded]:not([expanded=false])),:host([full-width]:not([full-width=false])){display:block}:host([disabled]:not([disabled=false])){--r-input--container--opacity:0.4;--r-input--container--cursor:not-allowed;--r-input--container--pointer-events:none;--r-input--container--background-color:transparent}:host([invalid]:not([invalid=false])){--r-input--container--border-color:var(--r-status-error-regular, #da1e28);--r-input--container--background-color:var(--r-status-error-soft, #fef6f6)}.r-input{display:var(--r-input--display, flex);flex:var(--r-input--flex, 1);flex-direction:var(--r-input--flex-direction, column);width:var(--r-input--width, auto);font-family:var(--r-input--font-family, system-ui);position:var(--r-input--position, relative);border-radius:var(--r-input--border-radius, 0);cursor:var(--r-input--cursor, inherit)}.r-input--label-container{display:var(--r-input--label-container--display, flex);gap:var(--r-input--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-input--label-container--align-items, center);justify-content:var(--r-input--label-container--align-items, space-between)}.r-input--label-container ::slotted([slot=popover]){display:var(--r-input--popover--display, inline-flex);height:var(--r-input--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-input--popover--align-items, center);justify-content:var(--r-input--popover--justify-content, center);margin-right:var(--r-input--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-input--popover-trigger--min-width, var(--r-spacing-150, 1.5));--r-popover--trigger--min-height:var(--r-input--popover--trigger--min-height, var(--r-spacing-150, 1.5))}.r-input--label{cursor:var(--r-input--label--cursor, inherit)}.r-input--input{font-family:var(--r-input--input--font-family, system-ui);font-size:var(--r-input--input--font-size, 1em);width:var(--r-input--input--width, 100%);max-width:var(--r-input--input--max-width, 100%);height:var(--r-input--input--height, var(--r-spacing-275, 2.75rem));border-radius:var(--r-input--input--border-radius, 0);border:var(--r-input--input--border, none);color:var(--r-input--input--color, var(--r-text-regular, #282828));background-color:var(--r-input--input--background-color, none);appearance:var(--r-input--input--appearance, none);box-sizing:var(--r-input--input--box-sizing, border-box);outline:var(--r-input--input--outline, none);cursor:var(--r-input--input--cursor, inherit);pointer-events:var(--r-input--input--pointer-events, auto)}.r-input--input:autofill,.r-input--input:-webkit-autofill{-webkit-background-clip:text !important}.r-input--input::-ms-reveal{display:var(--r-input--input--ms-reveal--display, none)}.r-input--input::placeholder{color:var(--r-input--input--placeholder--color, var(--r-text-soft, #686868))}.r-input--input[type=search]::-webkit-search-cancel-button{cursor:var(--r-input--input-clear--cursor, pointer);display:var(--r-input--input-clear--display, block);height:var(--r-input--input-clear--height, 0.875rem);width:var(--r-input--input-clear--width, 0.875rem);appearance:var(--r-input--input-clear--appearance, none);background-repeat:var(--r-input--input-clear--background-repeat, no-repeat);background-image:var(--r-input--input-clear--background-image, url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke-width%3D%221.5%22%20viewBox%3D%220.75%200.75%2022.5%2022.5%22%3E%3Cpath%20id%3D%22Vector%202269%22%20stroke%3D%22currentColor%22%20d%3D%22M1.5%201.5L22.5%2022.5%22%2F%3E%3Cpath%20id%3D%22Vector%202270%22%20stroke%3D%22currentColor%22%20d%3D%22M22.5%201.5L1.5%2022.5%22%2F%3E%3C%2Fsvg%3E\"));background-size:var(--r-input--input-clear--background-size, contain);margin-inline:var(--r-input--input-clear--margin-inline, 0);color:currentColor}.r-input--button{position:var(--r-input--icon-button--position, absolute);width:var(--r-input--icon-button--width, calc(1.125em + var(--r-input--icon--width)));height:var(--r-input--icon-button--height, 100%);top:var(--r-input--icon-button--top, 0);right:var(--r-input--icon-button--right, auto);bottom:var(--r-input--icon-button--bottom, auto);left:var(--r-input--icon-button--left, 0);cursor:var(--r-input--icon-button--cursor, inherit)}.r-input--container{position:var(--r-input--container--position, relative);display:var(--r-input--container--display, flex);align-items:var(--r-input--container--align-items, center);gap:var(--r-input--container--gap, 0.625rem);height:var(--r-input--container--height, var(--r-spacing-275, 2.75rem));background-color:var(--r-input--container--background-color, var(--r-background-softest, #fff));border-width:var(--r-input--container--border-width, 1px);border-style:var(--r-input--container--border-style, solid);border-color:var(--r-input--container--border-color, var(--r-border-soft, #686868));box-sizing:var(--r-input--container--box-sizing, border-box);box-shadow:var(--r-input--container--box-shadow, none);outline:var(--r-input--container--outline, none);outline-offset:var(--r-input--container--outline-offset, 0);padding-top:var(--r-input--container--padding-top, 0.6875rem);padding-right:var(--r-input--container--padding-right, var(--r-spacing-075, 0.75rem));padding-bottom:var(--r-input--container--padding-bottom, 0.6875rem);padding-left:var(--r-input--container--padding-left, var(--r-spacing-0275, 0.75rem));opacity:var(--r-input--container--opacity, 1);pointer-events:var(--r-input--container--pointer-events, auto);line-height:var(--r-input--container--line-height, 1);cursor:var(--r-input--container--cursor, inherit);margin-top:var(--r-input--container--margin-top, var(--r-spacing-025, 0.25rem))}.r-input--container slot[name=leading]{color:var(--r-input--container-leading--color, var(--r-icon-soft, #686868))}.r-input--message:has(r-hint),.r-input--message ::slotted([slot=message]){margin-top:var(--r-input--message--margin-top, var(--r-spacing-025, 0.25rem))}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
|
|
4
|
+
const inputCss = ":host{display:inline-flex;flex-direction:column;vertical-align:top;--r-label--margin-bottom:0}:host slot{display:contents}:host([readonly]:not([readonly=false])){--r-input--container--background-color:var(--r-background-soft, #f3f1f0);--r-input--container--border-color:transparent transparent var(--r-border-soft, #686868) transparent;--r-input--container--cursor:text}:host(:hover:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input--container--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host(.focused){--r-input--container--box-shadow:0 0 0 6px var(--r-border-focused-outlined);--r-input--container--outline:2px solid var(--r-border-focused);--r-input--container--outline-offset:2px}:host(:active:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input--container--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([expanded]:not([expanded=false])),:host([full-width]:not([full-width=false])){display:block}:host([disabled]:not([disabled=false])){--r-input--container--opacity:0.4;--r-input--container--cursor:not-allowed;--r-input--container--pointer-events:none;--r-input--container--background-color:transparent}:host([invalid]:not([invalid=false])){--r-input--container--border-color:var(--r-status-error-regular, #da1e28);--r-input--container--background-color:var(--r-status-error-soft, #fef6f6)}.r-input{display:var(--r-input--display, flex);flex:var(--r-input--flex, 1);flex-direction:var(--r-input--flex-direction, column);width:var(--r-input--width, auto);font-family:var(--r-input--font-family, system-ui);position:var(--r-input--position, relative);border-radius:var(--r-input--border-radius, 0);cursor:var(--r-input--cursor, inherit)}.r-input--label-container{display:var(--r-input--label-container--display, flex);gap:var(--r-input--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-input--label-container--align-items, center);justify-content:var(--r-input--label-container--align-items, space-between)}.r-input--label-container ::slotted([slot=popover]){display:var(--r-input--popover--display, inline-flex);height:var(--r-input--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-input--popover--align-items, center);justify-content:var(--r-input--popover--justify-content, center);margin-right:var(--r-input--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-input--popover-trigger--min-width, var(--r-spacing-150, 1.5));--r-popover--trigger--min-height:var(--r-input--popover--trigger--min-height, var(--r-spacing-150, 1.5))}.r-input--label{cursor:var(--r-input--label--cursor, inherit)}.r-input--input{font-family:var(--r-input--input--font-family, system-ui);font-size:var(--r-input--input--font-size, 1em);width:var(--r-input--input--width, 100%);max-width:var(--r-input--input--max-width, 100%);height:var(--r-input--input--height, var(--r-spacing-275, 2.75rem));border-radius:var(--r-input--input--border-radius, 0);border:var(--r-input--input--border, none);color:var(--r-input--input--color, var(--r-text-regular, #282828));background-color:var(--r-input--input--background-color, none);appearance:var(--r-input--input--appearance, none);box-sizing:var(--r-input--input--box-sizing, border-box);outline:var(--r-input--input--outline, none);cursor:var(--r-input--input--cursor, inherit);pointer-events:var(--r-input--input--pointer-events, auto)}.r-input--input:autofill,.r-input--input:-webkit-autofill{-webkit-background-clip:text !important}.r-input--input::-ms-reveal{display:var(--r-input--input--ms-reveal--display, none)}.r-input--input::placeholder{color:var(--r-input--input--placeholder--color, var(--r-text-soft, #686868))}.r-input--input[type=search]::-webkit-search-cancel-button{cursor:var(--r-input--input-clear--cursor, pointer);display:var(--r-input--input-clear--display, block);height:var(--r-input--input-clear--height, 0.875rem);width:var(--r-input--input-clear--width, 0.875rem);appearance:var(--r-input--input-clear--appearance, none);background-repeat:var(--r-input--input-clear--background-repeat, no-repeat);background-image:var(--r-input--input-clear--background-image, url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke-width%3D%221.5%22%20viewBox%3D%220.75%200.75%2022.5%2022.5%22%3E%3Cpath%20id%3D%22Vector%202269%22%20stroke%3D%22currentColor%22%20d%3D%22M1.5%201.5L22.5%2022.5%22%2F%3E%3Cpath%20id%3D%22Vector%202270%22%20stroke%3D%22currentColor%22%20d%3D%22M22.5%201.5L1.5%2022.5%22%2F%3E%3C%2Fsvg%3E\"));background-size:var(--r-input--input-clear--background-size, contain);margin-inline:var(--r-input--input-clear--margin-inline, 0);color:currentColor}.r-input--button{position:var(--r-input--icon-button--position, absolute);width:var(--r-input--icon-button--width, calc(1.125em + var(--r-input--icon--width)));height:var(--r-input--icon-button--height, 100%);top:var(--r-input--icon-button--top, 0);right:var(--r-input--icon-button--right, auto);bottom:var(--r-input--icon-button--bottom, auto);left:var(--r-input--icon-button--left, 0);cursor:var(--r-input--icon-button--cursor, inherit)}.r-input--container{position:var(--r-input--container--position, relative);display:var(--r-input--container--display, flex);align-items:var(--r-input--container--align-items, center);gap:var(--r-input--container--gap, 0.625rem);height:var(--r-input--container--height, var(--r-spacing-275, 2.75rem));background-color:var(--r-input--container--background-color, var(--r-background-softest, #fff));border-width:var(--r-input--container--border-width, 1px);border-style:var(--r-input--container--border-style, solid);border-color:var(--r-input--container--border-color, var(--r-border-soft, #686868));box-sizing:var(--r-input--container--box-sizing, border-box);box-shadow:var(--r-input--container--box-shadow, none);outline:var(--r-input--container--outline, none);outline-offset:var(--r-input--container--outline-offset, 0);padding-top:var(--r-input--container--padding-top, 0.6875rem);padding-right:var(--r-input--container--padding-right, var(--r-spacing-075, 0.75rem));padding-bottom:var(--r-input--container--padding-bottom, 0.6875rem);padding-left:var(--r-input--container--padding-left, var(--r-spacing-0275, 0.75rem));opacity:var(--r-input--container--opacity, 1);pointer-events:var(--r-input--container--pointer-events, auto);line-height:var(--r-input--container--line-height, 1);cursor:var(--r-input--container--cursor, inherit);margin-top:var(--r-input--container--margin-top, var(--r-spacing-025, 0.25rem))}.r-input--container slot[name=leading]{color:var(--r-input--container-leading--color, var(--r-icon-soft, #686868))}.r-input--message:has(r-hint),.r-input--message ::slotted([slot=message]){margin-top:var(--r-input--message--margin-top, var(--r-spacing-025, 0.25rem))}.r-input--trailing{display:var(--r-input--trailing--display, flex);margin-left:var(--r-input--trailing--margin-left, auto);align-items:var(--r-input--trailing--align-items, center);gap:var(--r-input--trailing--gap, 0.625rem)}.r-input--readonly-icon{color:var(--r-input--readonly-icon--color, var(--r-icon-soft, #686868))}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
|
|
5
5
|
|
|
6
6
|
const RInput = class {
|
|
7
7
|
constructor(hostRef) {
|
|
@@ -76,11 +76,15 @@ const RInput = class {
|
|
|
76
76
|
});
|
|
77
77
|
};
|
|
78
78
|
this.onInput = (event) => {
|
|
79
|
+
if (this.readonly)
|
|
80
|
+
return;
|
|
79
81
|
this.value = event.target.value;
|
|
80
82
|
const { host, value } = this;
|
|
81
83
|
this.rInput.emit({ element: host, value });
|
|
82
84
|
};
|
|
83
85
|
this.onChange = event => {
|
|
86
|
+
if (this.readonly)
|
|
87
|
+
return;
|
|
84
88
|
this.value = event.target.value;
|
|
85
89
|
};
|
|
86
90
|
this.onBlur = () => {
|
|
@@ -96,6 +100,8 @@ const RInput = class {
|
|
|
96
100
|
appendControlToFormData(this.nativeElement || this.host, event.formData);
|
|
97
101
|
};
|
|
98
102
|
this.onResetForm = () => {
|
|
103
|
+
if (this.readonly)
|
|
104
|
+
return;
|
|
99
105
|
this.validityState = null;
|
|
100
106
|
this.validityMessage = null;
|
|
101
107
|
this.value = this.initial['value'];
|
|
@@ -224,6 +230,9 @@ const RInput = class {
|
|
|
224
230
|
this.novalidate ||
|
|
225
231
|
false);
|
|
226
232
|
}
|
|
233
|
+
get hasTrailingSlot() {
|
|
234
|
+
return !!this.host.querySelector('[slot="trailing"]');
|
|
235
|
+
}
|
|
227
236
|
componentWillLoad() {
|
|
228
237
|
this.initial['value'] = this.value;
|
|
229
238
|
this.initial['invalid'] = this.invalid;
|
|
@@ -252,9 +261,10 @@ const RInput = class {
|
|
|
252
261
|
this.rChange.emit({ element: host, value });
|
|
253
262
|
}
|
|
254
263
|
render() {
|
|
255
|
-
const { name, placeholder, required, fieldIndicator, maxlength, minlength, min, max, value, disabled, form, pattern, invalid, valid, validMarker, hint, label, internal, tooltip, tooltipIcon, tooltipIconColor, uniqueId, autocomplete } = this;
|
|
264
|
+
const { name, placeholder, required, fieldIndicator, maxlength, minlength, min, max, value, disabled, form, pattern, invalid, valid, validMarker, hint, label, internal, tooltip, tooltipIcon, tooltipIconColor, uniqueId, autocomplete, readonly } = this;
|
|
256
265
|
const inputAttrs = {
|
|
257
266
|
disabled,
|
|
267
|
+
readonly,
|
|
258
268
|
required,
|
|
259
269
|
label,
|
|
260
270
|
name,
|
|
@@ -301,7 +311,9 @@ const RInput = class {
|
|
|
301
311
|
h("r-label", Object.assign({ class: "r-input--label" }, labelAttr), label)
|
|
302
312
|
:
|
|
303
313
|
h("slot", { name: "label" })), h("slot", { name: "popover" })), hint &&
|
|
304
|
-
h("r-hint", { id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { class: "r-input--container" }, h("slot", { name: "leading" }), h("input", Object.assign({ class: "r-input--input", type: this.type }, inputAttrs, eventListeners, { ref: el => this.nativeElement = el, value: this.value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus })),
|
|
314
|
+
h("r-hint", { id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { class: "r-input--container" }, h("slot", { name: "leading" }), h("input", Object.assign({ class: "r-input--input", type: this.type }, inputAttrs, eventListeners, { ref: el => this.nativeElement = el, value: this.value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus })), h("div", { class: "r-input--trailing" }, this.readonly &&
|
|
315
|
+
h("r-icon", { class: "r-input--readonly-icon", name: "pen-disabled", size: "s" }), renderValidationMarker(), this.hasTrailingSlot &&
|
|
316
|
+
h("slot", { name: "trailing" }))), h("div", { id: `${uniqueId}-message`, "aria-live": !internal ? 'polite' : null, class: !internal ? 'r-input--message' : 'visually-hidden' }, h("slot", { name: "message" }, this.hasMessage && h("r-hint", { variant: valid ? 'success' : 'error' }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage), this.hasValidationSuccess && this.validMessage)))));
|
|
305
317
|
}
|
|
306
318
|
get host() { return getElement(this); }
|
|
307
319
|
static get watchers() { return {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h, F as Fragment, H as Host, g as getElement } from './index-CTxpqopm.js';
|
|
2
2
|
|
|
3
|
-
const listItemCss = ":host([alignment=top]) .r-list-item{--r-list-item--trailing--align-self:start}:host([alignment=bottom]) .r-list-item{--r-list-item--trailing--align-self:end}:host([divider])
|
|
3
|
+
const listItemCss = ":host([alignment=top]) .r-list-item{--r-list-item--trailing--align-self:start}:host([alignment=bottom]) .r-list-item{--r-list-item--trailing--align-self:end}:host([divider]:not([divider=false])){--r-list-item--border-color:var(--r-border-soft, #686868);--r-list-item--border-width:0 0 1px 0}:host([active]) .r-list-item{--r-list-item--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([variant=navitem]:not([active]):hover:not([disabled]:not([disabled=false])))>.r-list-item,:host([href]:not([active]):hover:not([disabled]:not([disabled=false])))>.r-list-item{--r-list-item--cursor:pointer;--r-list-item--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host([variant=navitem][has-sub-items]:hover:not([disabled]:not([disabled=false])))>.r-list-item-wrapper>.r-list-item{--r-list-item--cursor:pointer;--r-list-item--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host([variant=navitem][has-sub-items]:has([active]):hover:not([disabled]:not([disabled=false])))>.r-list-item-wrapper>.r-list-item{--r-list-item--cursor:pointer;--r-list-item--background-color:transparent}:host([variant=navitem][expanded])>.r-list-item-wrapper>.r-list-item{--r-list-item--headline--font-weight:600;--r-list-item--trailing-icon--transform:rotate(180deg);--r-list-item--trailing-icon--color:var(--r-icon-regular, #282828)}:host([variant=navitem][active-parent]:not([expanded])),:host([variant=navitem][active]:not([expanded])){--r-list-item--background-color:var(--r-background-interactive-activated, rgba(40, 40, 40, 0.08))}:host([variant=subitem]) .r-list-item{--r-list-item--margin-left:27px;--r-list-item--border-width:0 0 0 1px;--r-list-item--border-color:var(--r-border-soft, #686868)}:host([variant=subitem][active]) .r-list-item{--r-list-item--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host(:focus-visible:not(:active)) .r-list-item{--r-list-item--box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);--r-list-item--outline:2px solid var(--r-border-focused, #0071e3);--r-list-item--outline-offset:2px}:host(:focus-within) .r-list-item[href]{--r-list-item--box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);--r-list-item--outline:2px solid var(--r-border-focused, #0071e3);--r-list-item--outline-offset:2px}:host([disabled]:not([disabled=false])){cursor:not-allowed;--r-list-item--background-color:transparent}:host([disabled]:not([disabled=false])[divider]:not([divider=false])){--r-list-item--border-color:rgba(104,104,104, 0.4);--r-list-item--leading-icon--color:rgba(104,104,104, 0.4)}:host{display:var(--display, block);pointer-events:var(--pointer-events, auto);outline:var(--outline, none);font-family:var(--font-family, var(--r-font-family-text, system-ui));line-height:var(--line-height, var(--r-line-height-m, 1.5));color:var(--color, var(--r-text-regular, #282828))}.r-list-item{display:var(--r-list-item--display, flex);align-items:var(--r-list-item--align-items, center);justify-content:var(--r-list-item--justify-content, center);gap:var(--r-list-item--gap, 16px);width:var(--r-list-item--width, inherit);padding:var(--r-list-item--padding, 16px);margin-left:var(--r-list-item--margin-left, 0);opacity:var(--r-list-item--opacity, 1);color:var(--r-list-item--color, inherit);box-shadow:var(--r-list-item--box-shadow, none);outline:var(--r-list-item--outline, none);outline-offset:var(--r-list-item--outline-offset, 0);text-decoration:var(--r-list-item--text-decoration, none);background-color:var(--r-list-item--background-color, transparent);border-style:var(--r-list-item--border-style, solid);border-width:var(--r-list-item--border-width, 0);border-color:var(--r-list-item--border-color, transparent);cursor:var(--r-list-item--cursor, inherit);font-weight:var(--r-list-item--font-weight, var(--r-font-weight-regular, 400));outline:var(--r-list-item--outline, none)}.r-list-item--leading{color:var(--r-list-item--leading--color, var(--r-icon-soft, #686868))}.r-list-item--leading-icon{color:var(--r-list-item--leading-icon--color, var(--r-icon-soft, #686868))}.r-list-item--text{flex-grow:var(--r-list-item--text--flex-grow, 1);overflow:var(--r-list-item--overflow);display:var(--r-list-item--text-slot--display);white-space:var(--r-list-item--text--white-space, nowrap);overflow:var(--r-list-item--text--overflow, hidden);text-overflow:var(--r-list-item--text--text-overflow, ellipsis)}.r-list-item--trailing{display:var(--r-list-item--trailing--display, flex);align-self:var(--r-list-item--trailing--align-self, center);gap:var(--r-list-item--trailing--gap, 8px);color:var(--r-list-item--trailing--color, inherit)}.r-list-item--trailing-icon{transition:var(--r-list-item--trailing-icon--transition, transform 250ms ease-in-out);transform:var(--r-list-item--trailing-icon--transform, rotate(0deg));color:var(--r-list-item--trailing-icon--color, inherit)}.r-list-item--trailing ::slotted(*){display:var(--r-list-item--trailing-slotted--display, flex);gap:var(--r-list-item--trailing-slotted--display, 8px)}.r-list-item--text{display:var(--r-list-item--text--display, flex);flex-direction:var(--r-list-item--text--flex-direction, column);gap:var(--r-list-item--text--gap, 2px)}.r-list-item--headline{font-size:var(--r-list-item--headline--font-size, 1rem);font-weight:var(--r-list-item--headline--font-weight, 600);line-height:var(--r-list-item--headline--line-height, 1.5);color:var(--r-list-item--headline--color, inherit)}.r-list-item--subtext,.r-list-item--description{font-size:var(--r-list-item--description--font-size, var(--r-list-item--subtext--font-size, 1rem));font-weight:var(--r-list-item--description--font-weight, var(--r-list-item--subtext--font-weight, 400));line-height:var(--r-list-item--description--line-height, var(--r-list-item--subtext--line-height, 1.5));color:var(--r-list-item--description--color, var(--r-list-item--subtext--color, var(--r-text-regular, #282828)))}.r-list-item--subtext ::slotted(a.subtext),.r-list-item--description ::slotted(a.subtext){color:var(--r-list-item--description--color, var(--r-list-item--subtext--slotted--color, inherit));text-decoration:var(--r-list-item--description--text-decoration, var(--r-list-item--subtext--slotted--text-decoration, none))}";
|
|
4
4
|
|
|
5
5
|
const RListItem = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -48,8 +48,8 @@ const RListItem = class {
|
|
|
48
48
|
get isHeadlineSlot() {
|
|
49
49
|
return this.isEl('[slot="headline"]');
|
|
50
50
|
}
|
|
51
|
-
get
|
|
52
|
-
return this.isEl('[slot="subtext"]');
|
|
51
|
+
get isDescriptionSlot() {
|
|
52
|
+
return this.isEl('[slot="description"]') || this.isEl('[slot="subtext"]');
|
|
53
53
|
}
|
|
54
54
|
get hasSubitems() {
|
|
55
55
|
return this.isEl('[variant="subitem"]');
|
|
@@ -78,15 +78,19 @@ const RListItem = class {
|
|
|
78
78
|
componentDidLoad() {
|
|
79
79
|
this.setTabIndexOnSubItems();
|
|
80
80
|
}
|
|
81
|
+
get tagName() {
|
|
82
|
+
return this.href && !this.disabled ? 'a' : 'div';
|
|
83
|
+
}
|
|
81
84
|
render() {
|
|
82
|
-
const { leadingIcon, leadingIconSrc, trailingIcon, trailingIconSrc, headline, trailingText, subtext } = this;
|
|
83
|
-
const TagName = this.
|
|
84
|
-
const
|
|
85
|
+
const { leadingIcon, leadingIconSrc, trailingIcon, trailingIconSrc, headline, trailingText, subtext, description } = this;
|
|
86
|
+
const TagName = this.tagName;
|
|
87
|
+
const itemAttrs = Object.assign({ href: TagName === 'a' ? this.href : null }, (this.disabled ? { role: 'link', 'aria-disabled': 'true' } : null));
|
|
88
|
+
const ListItemContent = (h(TagName, Object.assign({ class: "r-list-item" }, itemAttrs), this.isLeading &&
|
|
85
89
|
h("span", { class: "r-list-item--leading" }, h("slot", { name: "leading" }, this.isLeadingIcon &&
|
|
86
90
|
h("r-icon", { class: "r-list-item--leading-icon", name: leadingIcon, src: leadingIconSrc }))), h("span", { class: "r-list-item--text" }, !this.isTextSlot ?
|
|
87
|
-
h(Fragment, null, (
|
|
88
|
-
h("span", { class: "r-list-item--headline" }, h("slot", { name: "headline" }, headline)), (
|
|
89
|
-
h("span", { class: "r-list-item--
|
|
91
|
+
h(Fragment, null, (this.isHeadlineSlot || headline) &&
|
|
92
|
+
h("span", { class: "r-list-item--headline" }, h("slot", { name: "headline" }, headline)), (description || this.isDescriptionSlot || subtext) &&
|
|
93
|
+
h("span", { class: "r-list-item--description" }, h("slot", { name: "subtext" }, subtext), h("slot", { name: "description" }, description)))
|
|
90
94
|
:
|
|
91
95
|
h("slot", { name: "text" })), this.isTrailing &&
|
|
92
96
|
h("span", { class: "r-list-item--trailing" }, h("slot", { name: "trailing" }, this.isTrailingIcon && !trailingText &&
|
|
@@ -166,10 +166,10 @@ const Panel = class {
|
|
|
166
166
|
}
|
|
167
167
|
}
|
|
168
168
|
render() {
|
|
169
|
-
return (h(Host, { key: '
|
|
169
|
+
return (h(Host, { key: 'f57ca21d8a782d736984c091af8ad7bede50f81b', collapsed: this.isCollapsed }, h("div", { key: '138a6e18232630123667ad328c393c93e4908cf6', class: "r-panel" }, h("div", { key: '377662f16e8fca37a557adaf4fd8329e47828303', class: "r-panel--header" }, this.hasHeader && (h("a", { key: 'f183b59e3dff6ca76905b2b52902d2e6ec6f2709', class: "logo-wrapper", href: this.logoLink }, this.isCollapsed ?
|
|
170
170
|
h("slot", { name: "logo-collapsed" })
|
|
171
171
|
:
|
|
172
|
-
h("slot", { name: "logo-expanded" }))), this.variant === 'modal' ? (h("r-button", { class: "r-panel--trigger", variant: "blank", title: `${this.labelCollapse}`, icon: "cross", "r-aria-label": `${this.labelCollapse}`, onClick: this.handleFullyCollapsedButtonClick })) : this.variant === 'drawer' ? (h("r-button", { class: "r-panel--trigger", variant: "blank", title: this.isCollapsed ? `${this.labelExpand}` : `${this.labelCollapse}`, icon: "angle-left", "r-aria-label": this.isCollapsed ? `${this.labelExpand}` : `${this.labelCollapse}`, onClick: this.handleSemiCollapsedButtonClick })) : this.variant === 'visible' ? (null) : null), h("div", { key: '
|
|
172
|
+
h("slot", { name: "logo-expanded" }))), this.variant === 'modal' ? (h("r-button", { class: "r-panel--trigger", variant: "blank", title: `${this.labelCollapse}`, icon: "cross", "r-aria-label": `${this.labelCollapse}`, onClick: this.handleFullyCollapsedButtonClick })) : this.variant === 'drawer' ? (h("r-button", { class: "r-panel--trigger", variant: "blank", title: this.isCollapsed ? `${this.labelExpand}` : `${this.labelCollapse}`, icon: "angle-left", "r-aria-label": this.isCollapsed ? `${this.labelExpand}` : `${this.labelCollapse}`, onClick: this.handleSemiCollapsedButtonClick })) : this.variant === 'visible' ? (null) : null), h("div", { key: '0f239dc288b9c73f348341e99a06cce9e4499a0e', class: "r-panel--body" }, h("slot", { key: '6fd883065b4db924b1c245e7ea5bcf71229f0840' })), this.hasFooter && !this.isCollapsed && (h("div", { key: 'ce6a1f84358a505940d3ef04c5c218caa972b090', class: "r-panel--footer" }, h("slot", { key: 'e4422d8955e7e64babab3b3f04cfa06f32dad74a', name: "footer" }))))));
|
|
173
173
|
}
|
|
174
174
|
get host() { return getElement(this); }
|
|
175
175
|
static get watchers() { return {
|
|
@@ -69,7 +69,7 @@ const PopoverAction = class {
|
|
|
69
69
|
return focusableElements(this.host);
|
|
70
70
|
}
|
|
71
71
|
render() {
|
|
72
|
-
return (h(Host, { key: '
|
|
72
|
+
return (h(Host, { key: '573250bc4f9a1a8725e8808885854ca320b203bc', slot: "action" }, h("slot", { key: 'd753af20723fb9e2ae49f9977cda81fa1c3df8c6', onSlotchange: this.handleSlotChange })));
|
|
73
73
|
}
|
|
74
74
|
get host() { return getElement(this); }
|
|
75
75
|
};
|
|
@@ -51,7 +51,7 @@ const PopoverContent = class {
|
|
|
51
51
|
return focusableElements(this.host);
|
|
52
52
|
}
|
|
53
53
|
render() {
|
|
54
|
-
return (h(Host, { key: '
|
|
54
|
+
return (h(Host, { key: 'ec778d5e0a294bcbe389039abc6f0b620b7bc69c', slot: "content", class: "r-typography" }, h("slot", { key: '40c27d279a1093be8a98731881ad83da147f5bbc' })));
|
|
55
55
|
}
|
|
56
56
|
get host() { return getElement(this); }
|
|
57
57
|
};
|
|
@@ -17,7 +17,7 @@ const PopoverHeadline = class {
|
|
|
17
17
|
stopInverseThemeAwareness(this.host, themeContextElement);
|
|
18
18
|
}
|
|
19
19
|
render() {
|
|
20
|
-
return (h(Host, { key: '
|
|
20
|
+
return (h(Host, { key: 'f878fb9ca3ffe1df00088bbd2fe1b6321130228a', slot: "headline" }, h("slot", { key: '1a477943ab993f8960f3e77dd90a72a276bf4200' })));
|
|
21
21
|
}
|
|
22
22
|
get host() { return getElement(this); }
|
|
23
23
|
};
|
|
@@ -59,7 +59,7 @@ const PopoverTrigger = class {
|
|
|
59
59
|
(_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
|
|
60
60
|
}
|
|
61
61
|
render() {
|
|
62
|
-
return (h(Host, { key: '
|
|
62
|
+
return (h(Host, { key: '78536189423d25a1cf3ee3630512ad44b2dbd444', slot: "trigger", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("slot", { key: 'e634da1b6053eb1c0df7f08f5486f9492c2bd4d0' })));
|
|
63
63
|
}
|
|
64
64
|
get host() { return getElement(this); }
|
|
65
65
|
};
|