@riverty/web-components 5.8.0 → 6.1.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 +107 -0
- package/custom-elements.json +215 -362
- package/dist/cjs/index-DJ4H_bFj.js +6 -10
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/r-accordion-panel.cjs.entry.js +1 -1
- package/dist/cjs/r-accordion-section.cjs.entry.js +1 -1
- package/dist/cjs/r-accordion-trigger.cjs.entry.js +5 -35
- package/dist/cjs/r-accordion.cjs.entry.js +3 -7
- package/dist/cjs/r-alert.cjs.entry.js +26 -11
- package/dist/cjs/r-badge.cjs.entry.js +1 -1
- package/dist/cjs/r-button.cjs.entry.js +1 -1
- package/dist/cjs/r-checkbox-group.cjs.entry.js +1 -11
- package/dist/cjs/r-checkbox.cjs.entry.js +76 -75
- package/dist/cjs/r-dialog.cjs.entry.js +3 -11
- package/dist/cjs/r-hint_2.cjs.entry.js +50 -0
- package/dist/cjs/{r-hint_3.cjs.entry.js → r-icon-button_2.cjs.entry.js} +64 -51
- package/dist/cjs/r-icon.cjs.entry.js +1 -1
- package/dist/cjs/r-input-code.cjs.entry.js +112 -17
- package/dist/cjs/r-input-date.cjs.entry.js +8 -14
- package/dist/cjs/r-input-password.cjs.entry.js +16 -8
- package/dist/cjs/r-input-phone-number.cjs.entry.js +7 -12
- package/dist/cjs/r-input.cjs.entry.js +90 -42
- package/dist/cjs/r-list-item.cjs.entry.js +20 -19
- package/dist/cjs/r-panel.cjs.entry.js +5 -5
- 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 +3 -3
- 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 +29 -12
- package/dist/cjs/r-radio-group.cjs.entry.js +18 -22
- package/dist/cjs/r-select-option.cjs.entry.js +1 -1
- package/dist/cjs/r-select.cjs.entry.js +6 -24
- package/dist/cjs/r-skip-link.cjs.entry.js +1 -1
- package/dist/cjs/r-stepper-item.cjs.entry.js +3 -3
- package/dist/cjs/r-stepper.cjs.entry.js +2 -2
- package/dist/cjs/r-tab-panel.cjs.entry.js +1 -1
- package/dist/cjs/r-tab.cjs.entry.js +6 -2
- package/dist/cjs/r-tabs-list.cjs.entry.js +160 -2
- package/dist/cjs/r-tabs.cjs.entry.js +34 -6
- package/dist/cjs/r-textarea.cjs.entry.js +7 -19
- package/dist/cjs/r-toast-group.cjs.entry.js +2 -2
- package/dist/cjs/r-toast.cjs.entry.js +31 -11
- package/dist/cjs/web-components.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +0 -1
- package/dist/collection/components/accordion/accordion.css +0 -2
- package/dist/collection/components/accordion/accordion.js +4 -8
- package/dist/collection/components/accordion/exports.js +1 -1
- package/dist/collection/components/accordion-panel/accordion-panel.js +1 -1
- package/dist/collection/components/accordion-section/accordion-section.js +1 -1
- package/dist/collection/components/accordion-trigger/accordion-trigger.css +0 -4
- package/dist/collection/components/accordion-trigger/accordion-trigger.js +4 -215
- package/dist/collection/components/alert/alert.css +8 -3
- package/dist/collection/components/alert/alert.js +48 -10
- package/dist/collection/components/badge/badge.js +1 -1
- package/dist/collection/components/button/button.js +1 -1
- package/dist/collection/components/checkbox/checkbox.js +80 -98
- package/dist/collection/components/checkbox-group/checkbox-group.js +1 -50
- package/dist/collection/components/dialog/dialog.css +1 -3
- package/dist/collection/components/dialog/dialog.js +2 -10
- package/dist/collection/components/hint/hint.js +2 -2
- package/dist/collection/components/icon/bundled-icons/riverty-kit.json +1 -1
- package/dist/collection/components/icon/riverty-kit.js +1 -1
- package/dist/collection/components/icon-button/icon-button.js +22 -3
- package/dist/collection/components/input/exports.js +2 -0
- package/dist/collection/components/input/input.css +3 -0
- package/dist/collection/components/input/input.js +233 -371
- package/dist/collection/components/input-code/exports.js +2 -0
- package/dist/collection/components/input-code/input-code.js +294 -26
- package/dist/collection/components/input-date/input-date.js +8 -77
- package/dist/collection/components/input-password/exports.js +1 -0
- package/dist/collection/components/input-password/input-password.css +1 -0
- package/dist/collection/components/input-password/input-password.js +195 -70
- package/dist/collection/components/input-phone-number/input-phone-number.js +7 -75
- package/dist/collection/components/label/label.js +3 -113
- package/dist/collection/components/list-item/list-item/list-item.css +53 -19
- package/dist/collection/components/list-item/list-item/list-item.js +38 -40
- package/dist/collection/components/panel/panel.css +40 -17
- package/dist/collection/components/panel/panel.js +6 -6
- package/dist/collection/components/popover/exports.js +0 -1
- package/dist/collection/components/popover/popover.css +2 -10
- package/dist/collection/components/popover/popover.js +2 -55
- 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 +49 -12
- 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 +38 -124
- package/dist/collection/components/select/select.js +6 -330
- 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.css +1 -1
- package/dist/collection/components/stepper/stepper.js +1 -1
- package/dist/collection/components/stepper-item/stepper-item.css +3 -3
- package/dist/collection/components/stepper-item/stepper-item.js +2 -2
- package/dist/collection/components/tab/tab.css +29 -29
- package/dist/collection/components/tab/tab.js +5 -1
- package/dist/collection/components/tab-panel/tab-panel.js +1 -1
- package/dist/collection/components/tabs/tabs.js +34 -6
- package/dist/collection/components/tabs-list/exports.js +2 -0
- package/dist/collection/components/tabs-list/tabs-list.css +43 -2
- package/dist/collection/components/tabs-list/tabs-list.js +277 -1
- package/dist/collection/components/textarea/textarea.css +1 -1
- package/dist/collection/components/textarea/textarea.js +6 -158
- package/dist/collection/components/toast/toast.css +35 -9
- package/dist/collection/components/toast/toast.js +44 -32
- package/dist/collection/components/toast-group/toast-group.css +1 -1
- package/dist/collection/components/toast-group/toast-group.js +1 -1
- package/dist/collection/components/tooltip/tooltip.js +2 -2
- package/dist/esm/index-Da7qOBFr.js +6 -10
- package/dist/esm/loader.js +1 -1
- package/dist/esm/r-accordion-panel.entry.js +1 -1
- package/dist/esm/r-accordion-section.entry.js +1 -1
- package/dist/esm/r-accordion-trigger.entry.js +5 -35
- package/dist/esm/r-accordion.entry.js +3 -7
- package/dist/esm/r-alert.entry.js +26 -11
- package/dist/esm/r-badge.entry.js +1 -1
- package/dist/esm/r-button.entry.js +1 -1
- package/dist/esm/r-checkbox-group.entry.js +1 -11
- package/dist/esm/r-checkbox.entry.js +76 -75
- package/dist/esm/r-dialog.entry.js +3 -11
- package/dist/esm/r-hint_2.entry.js +47 -0
- package/dist/esm/{r-hint_3.entry.js → r-icon-button_2.entry.js} +65 -51
- package/dist/esm/r-icon.entry.js +1 -1
- package/dist/esm/r-input-code.entry.js +112 -17
- package/dist/esm/r-input-date.entry.js +8 -14
- package/dist/esm/r-input-password.entry.js +16 -8
- package/dist/esm/r-input-phone-number.entry.js +7 -12
- package/dist/esm/r-input.entry.js +90 -42
- package/dist/esm/r-list-item.entry.js +20 -19
- package/dist/esm/r-panel.entry.js +5 -5
- 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 +3 -3
- 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 +29 -12
- package/dist/esm/r-radio-group.entry.js +18 -22
- package/dist/esm/r-select-option.entry.js +1 -1
- package/dist/esm/r-select.entry.js +6 -24
- package/dist/esm/r-skip-link.entry.js +1 -1
- package/dist/esm/r-stepper-item.entry.js +3 -3
- package/dist/esm/r-stepper.entry.js +2 -2
- package/dist/esm/r-tab-panel.entry.js +1 -1
- package/dist/esm/r-tab.entry.js +6 -2
- package/dist/esm/r-tabs-list.entry.js +161 -3
- package/dist/esm/r-tabs.entry.js +34 -6
- package/dist/esm/r-textarea.entry.js +7 -19
- package/dist/esm/r-toast-group.entry.js +2 -2
- package/dist/esm/r-toast.entry.js +31 -11
- package/dist/esm/web-components.js +1 -1
- package/dist/types/components/accordion/accordion.d.ts +1 -5
- package/dist/types/components/accordion/exports.d.ts +1 -1
- package/dist/types/components/accordion-trigger/accordion-trigger.d.ts +0 -36
- package/dist/types/components/alert/alert.d.ts +6 -1
- package/dist/types/components/checkbox/checkbox.d.ts +24 -34
- package/dist/types/components/checkbox-group/checkbox-group.d.ts +0 -11
- package/dist/types/components/dialog/dialog.d.ts +0 -2
- package/dist/types/components/icon/exports.d.ts +1 -0
- package/dist/types/components/icon/icon-data.d.ts +1 -0
- package/dist/types/components/icon/riverty-kit.d.ts +1 -0
- package/dist/types/components/icon-button/icon-button.d.ts +4 -0
- package/dist/types/components/input/exports.d.ts +4 -0
- package/dist/types/components/input/input.d.ts +47 -73
- package/dist/types/components/input-code/exports.d.ts +4 -0
- package/dist/types/components/input-code/input-code.d.ts +49 -7
- package/dist/types/components/input-date/input-date.d.ts +0 -16
- package/dist/types/components/input-password/exports.d.ts +1 -0
- package/dist/types/components/input-password/input-password.d.ts +48 -16
- package/dist/types/components/input-phone-number/input-phone-number.d.ts +0 -16
- package/dist/types/components/label/label.d.ts +0 -18
- package/dist/types/components/list-item/list-item/list-item.d.ts +5 -9
- package/dist/types/components/popover/exports.d.ts +0 -2
- package/dist/types/components/popover/popover.d.ts +1 -14
- package/dist/types/components/radio-button/radio-button.d.ts +5 -0
- package/dist/types/components/radio-group/radio-group.d.ts +5 -26
- package/dist/types/components/select/select.d.ts +0 -50
- package/dist/types/components/tabs/tabs.d.ts +1 -0
- package/dist/types/components/tabs-list/exports.d.ts +4 -0
- package/dist/types/components/tabs-list/tabs-list.d.ts +38 -0
- package/dist/types/components/textarea/textarea.d.ts +0 -32
- package/dist/types/components/toast/toast.d.ts +11 -5
- package/dist/types/components.d.ts +280 -638
- package/dist/web-components/bundled-icons/riverty-kit.json +1 -1
- package/dist/web-components/p-0347feff.entry.js +1 -0
- package/dist/web-components/p-159822fe.entry.js +1 -0
- package/dist/web-components/p-19407a14.entry.js +1 -0
- package/dist/web-components/{p-5744d75c.entry.js → p-1da75540.entry.js} +1 -1
- package/dist/web-components/p-26ef77d6.entry.js +1 -0
- package/dist/web-components/p-3884c6e7.entry.js +1 -0
- package/dist/web-components/p-3f60c6c0.entry.js +1 -0
- package/dist/web-components/{p-87f39749.entry.js → p-4595fa8e.entry.js} +1 -1
- package/dist/web-components/{p-4e3df002.entry.js → p-4cc58c6a.entry.js} +1 -1
- package/dist/web-components/p-4f261b63.entry.js +1 -0
- package/dist/web-components/{p-e0e2f2b2.entry.js → p-50893211.entry.js} +1 -1
- package/dist/web-components/{p-72fa1fd1.entry.js → p-550e2237.entry.js} +1 -1
- package/dist/web-components/p-589baaf9.entry.js +1 -0
- package/dist/web-components/{p-3b4e3faf.entry.js → p-5eeb7002.entry.js} +1 -1
- package/dist/web-components/p-60341de2.entry.js +1 -0
- package/dist/web-components/{p-44ae9f33.entry.js → p-62b788bf.entry.js} +1 -1
- package/dist/web-components/p-63fd817d.entry.js +1 -0
- package/dist/web-components/p-67fa3f84.entry.js +1 -0
- package/dist/web-components/p-6bb44ec6.entry.js +1 -0
- package/dist/web-components/p-6cc2ea2c.entry.js +1 -0
- package/dist/web-components/p-70784685.entry.js +1 -0
- package/dist/web-components/p-7ce57332.entry.js +1 -0
- package/dist/web-components/{p-429213ea.entry.js → p-7fed6f4d.entry.js} +1 -1
- package/dist/web-components/p-8a66d20c.entry.js +1 -0
- package/dist/web-components/{p-c7f8e59b.entry.js → p-8c31cbd5.entry.js} +1 -1
- package/dist/web-components/p-8dac326b.entry.js +1 -0
- package/dist/web-components/p-92c7cf33.entry.js +1 -0
- package/dist/web-components/{p-1c2497de.entry.js → p-9ef1bbee.entry.js} +1 -1
- package/dist/web-components/p-a7d22c76.entry.js +1 -0
- package/dist/web-components/p-b96d59ca.entry.js +1 -0
- package/dist/web-components/p-ba801820.entry.js +1 -0
- package/dist/web-components/{p-a022f356.entry.js → p-bfc8c077.entry.js} +1 -1
- package/dist/web-components/p-c05b05da.entry.js +1 -0
- package/dist/web-components/p-c1e748f2.entry.js +1 -0
- package/dist/web-components/{p-5bbd6e3c.entry.js → p-c478712b.entry.js} +1 -1
- package/dist/web-components/p-c95b6470.entry.js +1 -0
- package/dist/web-components/p-cd5daad2.entry.js +1 -0
- package/dist/web-components/p-cdd88c5a.entry.js +1 -0
- package/dist/web-components/{p-3078b2b8.entry.js → p-d054eb4d.entry.js} +1 -1
- package/dist/web-components/{p-8563a1ab.entry.js → p-d433a828.entry.js} +1 -1
- package/dist/web-components/p-d7726e46.entry.js +1 -0
- package/dist/web-components/p-d819c8e5.entry.js +1 -0
- package/dist/web-components/{p-755cc697.entry.js → p-e4dc60f0.entry.js} +1 -1
- package/dist/web-components/{p-d1379ac6.entry.js → p-f9d5004c.entry.js} +1 -1
- package/dist/web-components/web-components.esm.js +1 -1
- package/package.json +1 -1
- package/dist/cjs/r-accordion-item.cjs.entry.js +0 -78
- package/dist/cjs/r-icon-button.cjs.entry.js +0 -81
- package/dist/collection/components/accordion-item/accordion-item.css +0 -121
- package/dist/collection/components/accordion-item/accordion-item.js +0 -138
- package/dist/esm/r-accordion-item.entry.js +0 -76
- package/dist/esm/r-icon-button.entry.js +0 -79
- package/dist/types/components/accordion-item/accordion-item.d.ts +0 -26
- package/dist/web-components/p-00ca474f.entry.js +0 -1
- package/dist/web-components/p-0bb04d79.entry.js +0 -1
- package/dist/web-components/p-15ac0fdd.entry.js +0 -1
- package/dist/web-components/p-1c956370.entry.js +0 -1
- package/dist/web-components/p-2a512983.entry.js +0 -1
- package/dist/web-components/p-2b2f581a.entry.js +0 -1
- package/dist/web-components/p-2e18e762.entry.js +0 -1
- package/dist/web-components/p-3bc93d65.entry.js +0 -1
- package/dist/web-components/p-4bd3e077.entry.js +0 -1
- package/dist/web-components/p-51a5804b.entry.js +0 -1
- package/dist/web-components/p-56da04d8.entry.js +0 -1
- package/dist/web-components/p-5e6aabd8.entry.js +0 -1
- package/dist/web-components/p-656229de.entry.js +0 -1
- package/dist/web-components/p-6a4f3836.entry.js +0 -1
- package/dist/web-components/p-7775228c.entry.js +0 -1
- package/dist/web-components/p-7ad8e78b.entry.js +0 -1
- package/dist/web-components/p-85a9af42.entry.js +0 -1
- package/dist/web-components/p-9e50120b.entry.js +0 -1
- package/dist/web-components/p-a7e7f8fa.entry.js +0 -1
- package/dist/web-components/p-ad9b2a48.entry.js +0 -1
- package/dist/web-components/p-b2f03016.entry.js +0 -1
- package/dist/web-components/p-b87ad83b.entry.js +0 -1
- package/dist/web-components/p-c937bd92.entry.js +0 -1
- package/dist/web-components/p-cbcd7699.entry.js +0 -1
- package/dist/web-components/p-dbe579e8.entry.js +0 -1
- package/dist/web-components/p-e4b66277.entry.js +0 -1
- package/dist/web-components/p-e6a31881.entry.js +0 -1
- package/dist/web-components/p-f2577a3c.entry.js +0 -1
- package/dist/web-components/p-f6a92287.entry.js +0 -1
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-DJ4H_bFj.js');
|
|
4
4
|
|
|
5
|
-
const panelCss = ":host{--r-panel--min-width:
|
|
5
|
+
const panelCss = ":host{--r-panel--min-width:18.75rem;--r-panel--background-color:var(--r-background-soft, #F3F1F0);--r-panel--display:flex;--r-panel--flex-direction:column;--r-panel--position:fixed;--r-panel--align-items:flex-start;--r-panel--top:0;--r-panel--padding:8px 0;--r-panel--width:18.75rem;--r-panel--height:100%;--r-panel--color:var(--r-text-regular, #282828);--r-panel--transition:all 250ms ease-in-out;--r-panel--transform:none;--r-panel--font-family:var(--r-font-family-text);--r-panel--left:0;--r-panel--header--display:flex;--r-panel--header--padding:12px 16px;--r-panel--header--justify-content:space-between;--r-panel--header--align-items:center;--r-panel--header--align-self:stretch;--r-panel--header--icon-rotate:none;--r-panel--header--flex-direction:row;--r-panel--header--gap:3.125rem;--r-panel--header--logo--img--width:100%;--r-panel--header--logo--img--height:auto;--r-panel--header--logo--img--expanded--width:12rem;--r-panel--header--logo--img--collapsed--width:1.875rem;--r-panel--header--height:unset;--r-panel--body--display:block;--r-panel--body--flex-grow:1;--r-panel--body--align-self:stretch;--r-panel--body--overflow:auto;--r-panel--body--padding:4px 8px 0;--r-panel--body-header--color:var(--r-text-soft, #686868);--r-panel--body-header--font-size:var(--r-font-size-400, 1rem);--r-panel--body-header--font-weight:var(--r-font-weight-regular, 400);--r-panel--body-header--padding:16px 0;--r-panel--body-header--width:16.75rem;--r-panel--body-header--margin:0px;--r-panel--footer--dispay:flex;--r-panel--footer--width:100%;--r-panel--footer--padding:16px 16px 24px;--r-panel--footer--flex-direction:column;--r-panel--footer--justify-content:center;--r-panel--footer-gap:var(--spacing-100, 1rem);--r-panel--footer--align-self:stretch;--r-panel--footer--text-align:center}:host([variant=drawer]) r-button{--r-button--padding:0.625rem;--r-button--background:var(--r-background-interactive-softer, #E7E4E2);--r-button--border-radius:10%;--r-button--slot--position:relative;--r-button--left:5%}:host([variant=drawer][collapsed]){--r-panel--width:var(--r-spacing-450, 4.5rem);--r-panel--header--display:none;--r-panel--header--icon-rotate:rotate(180deg);--r-panel--header--logo--expaned--display:none;--r-panel--header--logo--collapsed--display:block;--r-panel--header--flex-direction:column;--r-panel--header--gap:0.625rem;--r-list-item--epxanded--background-color:rgba(40, 40, 40, 0.08)}:host([variant=drawer][collapsed]) r-button{--r-button--slot--position:inherit;transition:transform 250ms ease-in-out}:host([variant=modal][collapsed]){--r-panel--transform:translate(-100%)}:host([collapsed]:not([variant=modal])){--r-panel--min-width:0;--r-list-item--sr-text--display:block;--r-list-item--text--display:none;--r-list-item--trailing--display:none}:host([variant=drawer]:not([has-header]):not([collapsed])),:host([variant=drawer][has-header=false]:not([collapsed])){--r-panel--header--height:var(--spacing-150, 1.5rem);--r-panel--header--padding:12px 8px 0 16px}:host([variant=drawer]:not([has-header]):not([collapsed])) r-button,:host([variant=drawer][has-header=false]:not([collapsed])) r-button{--r-button--top:20%;--r-button--left:97%}:host([collapsed]){--r-list-item--active-parent--background-color:rgba(40, 40, 40, 0.08)}.r-panel{z-index:2;min-width:var(--r-panel--min-width);background-color:var(--r-panel--background-color);display:var(--r-panel--display);flex-direction:var(--r-panel--flex-direction);align-items:var(--r-panel--align-items);width:var(--r-panel--width);height:var(--r-panel--height);position:var(--r-panel--position);top:var(--r-panel--top);padding:var(--r-panel--padding);color:var(--r-panel--color);transition:var(--r-panel--transition);transform:var(--r-panel--transform);left:var(--r-panel--left);font-family:var(--r-panel--font-family);box-sizing:border-box}.r-panel .logo-wrapper .logo-expanded{width:var(--r-panel--header--logo--img--expanded--width)}.r-panel .logo-wrapper .logo-collapsed{width:var(--r-panel--header--logo--img--collapsed--width)}.r-panel .logo-wrapper img{width:var(--r-panel--header--logo--img--width);height:var(--r-panel--header--logo--img--height)}.r-panel .logo-wrapper:focus,.r-panel .logo-wrapper:focus-visible{box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);outline:2px solid var(--r-border-focused, #0071e3);outline-offset:2px}.r-panel--header{display:flex;padding:var(--r-panel--header--padding);justify-content:var(--r-panel--header--justify-content);align-items:var(--r-panel--header--align-items);align-self:var(--r-panel--header--align-self);flex-direction:var(--r-panel--header--flex-direction);gap:var(--r-panel--header--gap);height:var(--r-panel--header--height)}.r-panel--header r-button{--r-button--padding:0;transform:var(--r-panel--header--icon-rotate);background:var(--r-button--background);position:var(--r-button--slot--position);left:var(--r-button--left);top:var(--r-button--top);border-radius:var(--r-button--border-radius)}.r-panel--body{flex-grow:var(--r-panel--body--flex-grow);align-self:var(--r-panel--body--align-self);display:var(--r-panel--body--display);overflow:var(--r-panel--body--overflow);padding:var(--r-panel--body--padding)}.r-panel--body ::slotted(.header){color:var(--r-panel--body-header--color);font-size:var(--r-panel--body-header--font-size);font-weight:var(--r-panel--body-header--font-weight);padding:var(--r-panel--body-header--padding);display:var(--r-panel--header--display);width:var(--r-panel--body-header--width);margin:var(--r-panel--body-header--margin)}.r-panel--footer{width:var(--r-panel--footer--width)}.r-panel ::slotted([slot=footer]){display:var(--r-panel--footer--dispay);padding:var(--r-panel--footer--padding);flex-direction:var(--r-panel--footer--flex-direction);justify-content:var(--r-panel--footer--justify-content);gap:var(--r-panel--footer-gap);align-self:var(--r-panel--footer--align-self);text-align:var(--r-panel--footer--text-align)}.r-panel ::slotted(ul){margin:var(--r-panel--item-list--margin, 0);padding:var(--r-panel--item-list--padding, 0);list-style-type:var(--r-panel--item-list--list-style-type, \"\")}@media (prefers-reduced-motion){.r-panel,:host([variant=drawer][collapsed]) r-button{transition:none}}";
|
|
6
6
|
|
|
7
7
|
const Panel = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -19,9 +19,9 @@ const Panel = class {
|
|
|
19
19
|
/** A boolean property that determines the collapsed state of the component. The default state is `false`. */
|
|
20
20
|
this.collapsed = false;
|
|
21
21
|
/** Aria-label text for collapse */
|
|
22
|
-
this.labelCollapse = '
|
|
22
|
+
this.labelCollapse = 'Collapse panel';
|
|
23
23
|
/** Aria-label text for expand */
|
|
24
|
-
this.labelExpand = '
|
|
24
|
+
this.labelExpand = 'Expand panel';
|
|
25
25
|
this.isCollapsed = this.collapsed;
|
|
26
26
|
// Pre-bound method for event listeners
|
|
27
27
|
this.updateCurrentLocationBound = this.updateCurrentLocation.bind(this);
|
|
@@ -168,10 +168,10 @@ const Panel = class {
|
|
|
168
168
|
}
|
|
169
169
|
}
|
|
170
170
|
render() {
|
|
171
|
-
return (index.h(index.Host, { key: '
|
|
171
|
+
return (index.h(index.Host, { key: 'aace877d6d376afd9cbac880bdc7d462ccee34e7', role: "navigation", collapsed: this.isCollapsed }, index.h("div", { key: 'c07a80d9fbefa984af49e105c37675585241dc96', class: "r-panel" }, index.h("div", { key: '6b16c3af37e340153a9449704bee1d9925309fd6', class: "r-panel--header" }, this.hasHeader && (index.h("a", { key: '56d04db007a0305db77010fc59b23467c4ab347a', class: "logo-wrapper", href: this.logoLink }, this.isCollapsed ?
|
|
172
172
|
index.h("slot", { name: "logo-collapsed" })
|
|
173
173
|
:
|
|
174
|
-
index.h("slot", { name: "logo-expanded" }))), this.variant === 'modal' ? (index.h("r-button", { class: "r-panel--trigger", variant: "blank",
|
|
174
|
+
index.h("slot", { name: "logo-expanded" }))), this.variant === 'modal' ? (index.h("r-button", { class: "r-panel--trigger", variant: "blank", icon: "cross", rAriaLabel: `${this.labelCollapse}`, onClick: this.handleFullyCollapsedButtonClick })) : this.variant === 'drawer' ? (index.h("r-button", { class: "r-panel--trigger", variant: "blank", icon: "angle-left", rAriaLabel: this.isCollapsed ? `${this.labelExpand}` : `${this.labelCollapse}`, onClick: this.handleSemiCollapsedButtonClick })) : this.variant === 'visible' ? (null) : null), index.h("div", { key: '4d88759343c8172d7b0c8f4750ba3bbb0d027586', class: "r-panel--body" }, index.h("slot", { key: '8a238430717fa44459b784a27b45f12dcb0b20d3' })), this.hasFooter && !this.isCollapsed && (index.h("div", { key: '74bc26fe68ea907ea844f1b36ab78be45ffd1540', class: "r-panel--footer" }, index.h("slot", { key: 'bd294360e84e060493088d42b6dd022e4d3058a9', name: "footer" }))))));
|
|
175
175
|
}
|
|
176
176
|
get host() { return index.getElement(this); }
|
|
177
177
|
static get watchers() { return {
|
|
@@ -71,7 +71,7 @@ const PopoverAction = class {
|
|
|
71
71
|
return focusable.focusableElements(this.host);
|
|
72
72
|
}
|
|
73
73
|
render() {
|
|
74
|
-
return (index.h(index.Host, { key: '
|
|
74
|
+
return (index.h(index.Host, { key: '898d4a649622403956b34ea5065ca5135e67c595', slot: "action" }, index.h("slot", { key: 'f61e085a1797778c33f07eaf3987cd743d56a662', onSlotchange: this.handleSlotChange })));
|
|
75
75
|
}
|
|
76
76
|
get host() { return index.getElement(this); }
|
|
77
77
|
};
|
|
@@ -53,7 +53,7 @@ const PopoverContent = class {
|
|
|
53
53
|
return focusable.focusableElements(this.host);
|
|
54
54
|
}
|
|
55
55
|
render() {
|
|
56
|
-
return (index.h(index.Host, { key: '
|
|
56
|
+
return (index.h(index.Host, { key: 'b85780e40b627c6d859af763113bc88e21768f88', slot: "content", class: "r-typography" }, index.h("slot", { key: '7bd5e6152e29a4e20d837c21e1df7bff68a673da' })));
|
|
57
57
|
}
|
|
58
58
|
get host() { return index.getElement(this); }
|
|
59
59
|
};
|
|
@@ -19,7 +19,7 @@ const PopoverHeadline = class {
|
|
|
19
19
|
theming.stopInverseThemeAwareness(this.host, themeContextElement);
|
|
20
20
|
}
|
|
21
21
|
render() {
|
|
22
|
-
return (index.h(index.Host, { key: '
|
|
22
|
+
return (index.h(index.Host, { key: '6b604401e4e82c17a300f00d6af33902b38f493c', slot: "headline" }, index.h("slot", { key: '64c8c6ff661e0317ba3ae0d4f32f6424d91fccbe' })));
|
|
23
23
|
}
|
|
24
24
|
get host() { return index.getElement(this); }
|
|
25
25
|
};
|
|
@@ -61,7 +61,7 @@ const PopoverTrigger = class {
|
|
|
61
61
|
(_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
|
|
62
62
|
}
|
|
63
63
|
render() {
|
|
64
|
-
return (index.h(index.Host, { key: '
|
|
64
|
+
return (index.h(index.Host, { key: 'fe285ee3a91600ee0e0cebeb9f5818eb30d89f06', slot: "trigger", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, index.h("slot", { key: '3782871f7aac634d3c1ccef2f516cdf00916b4f6' })));
|
|
65
65
|
}
|
|
66
66
|
get host() { return index.getElement(this); }
|
|
67
67
|
};
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-DJ4H_bFj.js');
|
|
4
4
|
|
|
5
|
-
const popoverCss = ":host{position:relative;overflow:visible;color:var(--r-text-inverse);font-family:var(--r-font-family-text, system-ui);font-weight:var(--r-font-weight-regular, 400);font-size:var(--r-font-size-400, 1rem);text-align:left}:host slot{display:contents}:host{--board--shift:1rem;--board--min-width:304px;--board--max-width:504px;--board--max-height:320px;--pointer--width:1rem;--pointer--height:0.5rem;--pointer--spacer:0.25rem}:host([size=s]){--r-popover--board--max-width:375px}:host([size=l]){--r-popover--board--max-width:500px}:host([data-open=true]){--r-popover--pointer--display:block;--r-popover--board--visibility:visible;--r-popover--board--left:var(--r-popover--trigger--left);--r-popover--board--top:var(--r-popover--trigger--top)}:host([data-open=true]) ::slotted([slot=trigger]){--r-popover--trigger--display:none}:host([data-vertical=top]){--r-popover--pointer--top:100%;--r-popover--pointer--transform:rotate(0deg) translate(0,-1px)}:host([data-vertical=bottom]){--r-popover--pointer--bottom:100%;--r-popover--pointer--transform:rotate(180deg)}:host([data-vertical=middle]){--r-popover--pointer--top:calc(50% - var(--pointer--height)/2);--r-popover--pointer--bottom:auto}:host([data-horizontal=left]){--r-popover--board--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0) + var(--board--shift));--r-popover--pointer--left:calc(100% - var(--r-popover--trigger--width, 0)/2 - var(--board--shift) - var(--pointer--width)/2)}:host([data-horizontal=right]){--r-popover--pointer--left:calc(var(--r-popover--trigger--width, 0)/2 + var(--pointer--width)/2)}:host([data-horizontal=center]){--r-popover--pointer--left:calc(50% - var(--pointer--width)/2)}:host([data-vertical=top][data-horizontal=left]){--r-popover--board--transform:translate(-100%, calc(-100% - var(--pointer--spacer) - var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=top][data-horizontal=right]){--r-popover--board--transform:translate(calc(0px - var(--board--shift)), calc(-100% - var(--pointer--spacer) - var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=top][data-horizontal=center]){--r-popover--board--transform:translate(calc(-50% + var(--r-popover--trigger--width, 0)/2), calc(-100% - var(--pointer--spacer) - var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=top][data-horizontal=cover]){--r-popover--pointer--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0)/2 - var(--r-popover--pointer--width, var(--pointer--width))/2);--r-popover--board--left:0;--r-popover--board--transform:translate(0, calc(-100% - var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=middle][data-horizontal=left]){--r-popover--board--left:var(--r-popover--trigger--left, 0);--r-popover--board--transform:translate(calc(-100% - var(--pointer--height) - var(--pointer--spacer)), calc(-50% + var(--r-popover--trigger--height, 0)/2));--r-popover--pointer--left:100%;--r-popover--pointer--right:auto;--r-popover--pointer--transform:rotate(-90deg) translate(0, calc(0px - var(--pointer--spacer)))}:host([data-vertical=middle][data-horizontal=right]){--r-popover--board--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0) + var(--pointer--height) + var(--pointer--spacer));--r-popover--board--transform:translate(0, calc(-50% + var(--r-popover--trigger--height, 0)/2));--r-popover--pointer--top:calc(50% - var(--pointer--height)/2);--r-popover--pointer--left:auto;--r-popover--pointer--right:100%;--r-popover--pointer--transform:rotate(90deg) translate(0, calc(0px - var(--pointer--spacer)))}:host([data-vertical=middle][data-horizontal=center]){--r-popover--pointer--display:none;--r-popover--board--transform:translate(calc(-50% + var(--r-popover--trigger--width, 0)/2), calc(-50% + var(--r-popover--trigger--height, 0)/2))}:host([data-vertical=middle][data-horizontal=cover]){--r-popover--pointer--display:none;--r-popover--board--left:0;--r-popover--board--transform:translate(0, calc(-50% + var(--r-popover--trigger--height, 0)/2))}:host([data-vertical=bottom][data-horizontal=left]){--r-popover--board--transform:translate(-100%, calc(var(--r-popover--trigger--height, 0) + var(--pointer--spacer) + var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=bottom][data-horizontal=right]){--r-popover--board--transform:translate(calc(0px - var(--board--shift)), calc(var(--r-popover--trigger--height, 0) + var(--r-popover--pointer--height, var(--pointer--height)) + var(--pointer--spacer)))}:host([data-vertical=bottom][data-horizontal=center]){--r-popover--board--transform:translate(calc(-50% + var(--r-popover--trigger--width, 0)/2), calc(var(--r-popover--trigger--height, 0) + var(--pointer--spacer) + var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=bottom][data-horizontal=cover]){--r-popover--pointer--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0)/2 - var(--r-popover--pointer--width, var(--pointer--width))/2);--r-popover--board--left:0;--r-popover--board--transform:translate(0, calc(var(--r-popover--trigger--height, 0) + var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=cover]){--r-popover--board--top:0;--r-popover--board--height:100%;--r-popover--board-content--height:100%;--r-popover--pointer--top:calc(var(--r-popover--trigger--top, 0) + var(--r-popover--trigger--height)/2 - var(--pointer--height)/2);--r-popover--pointer--bottom:auto}:host([data-vertical=cover][data-content-has-scroll=false]){--r-popover--board--top:var(--r-popover--trigger--top, 0)}:host([data-vertical=cover][data-horizontal=left]){--r-popover--board--left:var(--r-popover--trigger--left, 0);--r-popover--board--transform:translate(calc(-100% - var(--pointer--spacer) - var(--pointer--height)), 0);--r-popover--pointer--left:100%;--r-popover--pointer--right:auto;--r-popover--pointer--transform:rotate(-90deg) translate(0, calc(0px - var(--pointer--spacer)))}:host([data-vertical=cover][data-horizontal=right]){--r-popover--board--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0) + var(--pointer--width));--r-popover--pointer--left:auto;--r-popover--pointer--right:100%;--r-popover--pointer--transform:rotate(90deg) translate(0, calc(0px - var(--pointer--spacer)))}:host([data-vertical=cover][data-horizontal=center]),:host([data-vertical=cover][data-horizontal=cover]){--r-popover--pointer--display:none;--r-popover--board--transform:translate(calc(-50% + var(--r-popover--trigger--width, 0)/2), 0)}:host([data-vertical=cover][data-horizontal=cover]){--r-popover--pointer--display:none;--r-popover--board--transform:none;--r-popover--board--height:100%;--r-popover--board--width:100%;--r-popover--board--left:0}:host([data-fixed-top=true]){--r-popover--board-container--height:var(--r-popover--trigger--top, var(--board--max-height))}:host([dismiss-mode=manual]){--r-popover--board-content--padding:1.5rem 3.5rem 1.5rem 1.5rem}.r-popover{position:var(--r-popover--position, relative);display:var(--r-popover--display, inline-flex)}.r-popover--dismiss{position:var(--r-popover--dismiss--position, absolute);top:var(--r-popover--dismiss--top, 20px);right:var(--r-popover--dismiss--right, 20px);color:var(--r-text-inverse)}.r-popover--dismiss:hover{--r-icon-button--background-color:var(--r-background-interactive-hovered-inverse, rgba(243, 241, 240, 0.04))}.r-popover--dismiss:active{--r-icon-button--background-color:var(--r-background-interactive-pressed-inverse, rgba(243, 241, 240, 0.12))}.r-popover--trigger{border:var(--r-popover--trigger--border, none);background:var(--r-popover--trigger--background, none);padding:var(--r-popover--trigger--padding, 0);cursor:var(--r-popover--trigger--cursor, pointer);display:var(--r-popover--trigger--display, inline-flex);align-items:var(--r-popover--trigger--align-items, center);justify-content:var(--r-popover--trigger--justify-content, center);min-width:var(--r-popover--trigger--min-width, unset);min-height:var(--r-popover--trigger--min-height, unset)}.r-popover--trigger:focus{box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);outline:2px solid var(--r-border-focused, #0071e3);outline-offset:2px}.r-popover--board{position:var(--r-popover--board--position, fixed);top:var(--r-popover--board--top, -1000em);right:var(--r-popover--board--right, auto);bottom:var(--r-popover--board--bottom, auto);left:var(--r-popover--board--left, -1000em);visibility:var(--r-popover--board--visibility, hidden);width:var(--r-popover--board--width, 100%);min-width:var(--r-popover--board--max-width, var(--board--min-width));max-width:var(--r-popover--board--max-width, var(--board--max-width));height:var(--r-popover--board--height, auto);max-height:var(--r-popover--board--max-height, var(--board--max-height));background-color:var(--r-popover--board--background-color, var(--r-background-inverse));color:var(--r-popover--board--color, var(--r-text-inverse));border:var(--r-popover--board--border, none);transform:var(--r-popover--board--transform, none);box-sizing:var(--r-popover--board--box-sizing, border-box);padding:var(--r-popover--board--padding, 0);margin:var(--r-popover--board--margin, 0);overflow:var(--r-popover--board--overflow, visible)}.r-popover--board-content{display:var(--r-popover--board-content--display, flex);flex-direction:var(--r-popover--board-content--flex-direction, column);gap:var(--r-popover--board-content--gap, 1.5rem);overflow:var(--r-popover--board-content--overflow, auto);height:var(--r-popover--board-content--height, auto);max-height:var(--r-popover--board-content--max-height, var(--board--max-height));padding:var(--r-popover--board-content--padding, 1.5rem);box-sizing:var(--r-popover--board-content--box-sizing, border-box)}.r-popover--board-pointer{display:var(--r-popover--pointer--display, flex);width:var(--r-popover--pointer--width, var(--pointer--width));height:var(--r-popover--pointer--height, var(--pointer--height));position:var(--r-popover--pointer--position, absolute);top:var(--r-popover--pointer--top, auto);right:var(--r-popover--pointer--right, auto);bottom:var(--r-popover--pointer--bottom, auto);left:var(--r-popover--pointer--left, auto);color:var(--r-popover--pointer--color, var(--r-background-inverse));transform:var(--r-popover--pointer--transform, none);transform-origin:var(--r-popover--pointer--transform-origin, center)}.r-popover--board-pointer>svg{display:flex}";
|
|
5
|
+
const popoverCss = ":host{position:relative;overflow:visible;color:var(--r-text-inverse);font-family:var(--r-font-family-text, system-ui);font-weight:var(--r-font-weight-regular, 400);font-size:var(--r-font-size-400, 1rem);text-align:left}:host slot{display:contents}:host{--board--shift:1rem;--board--min-width:304px;--board--max-width:504px;--board--max-height:320px;--pointer--width:1rem;--pointer--height:0.5rem;--pointer--spacer:0.25rem}:host([data-open=true]){--r-popover--pointer--display:block;--r-popover--board--visibility:visible;--r-popover--board--left:var(--r-popover--trigger--left);--r-popover--board--top:var(--r-popover--trigger--top)}:host([data-open=true]) ::slotted([slot=trigger]){--r-popover--trigger--display:none}:host([data-vertical=top]){--r-popover--pointer--top:100%;--r-popover--pointer--transform:rotate(0deg) translate(0,-1px)}:host([data-vertical=bottom]){--r-popover--pointer--bottom:100%;--r-popover--pointer--transform:rotate(180deg)}:host([data-vertical=middle]){--r-popover--pointer--top:calc(50% - var(--pointer--height)/2);--r-popover--pointer--bottom:auto}:host([data-horizontal=left]){--r-popover--board--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0) + var(--board--shift));--r-popover--pointer--left:calc(100% - var(--r-popover--trigger--width, 0)/2 - var(--board--shift) - var(--pointer--width)/2)}:host([data-horizontal=right]){--r-popover--pointer--left:calc(var(--r-popover--trigger--width, 0)/2 + var(--pointer--width)/2)}:host([data-horizontal=center]){--r-popover--pointer--left:calc(50% - var(--pointer--width)/2)}:host([data-vertical=top][data-horizontal=left]){--r-popover--board--transform:translate(-100%, calc(-100% - var(--pointer--spacer) - var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=top][data-horizontal=right]){--r-popover--board--transform:translate(calc(0px - var(--board--shift)), calc(-100% - var(--pointer--spacer) - var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=top][data-horizontal=center]){--r-popover--board--transform:translate(calc(-50% + var(--r-popover--trigger--width, 0)/2), calc(-100% - var(--pointer--spacer) - var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=top][data-horizontal=cover]){--r-popover--pointer--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0)/2 - var(--r-popover--pointer--width, var(--pointer--width))/2);--r-popover--board--left:0;--r-popover--board--transform:translate(0, calc(-100% - var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=middle][data-horizontal=left]){--r-popover--board--left:var(--r-popover--trigger--left, 0);--r-popover--board--transform:translate(calc(-100% - var(--pointer--height) - var(--pointer--spacer)), calc(-50% + var(--r-popover--trigger--height, 0)/2));--r-popover--pointer--left:100%;--r-popover--pointer--right:auto;--r-popover--pointer--transform:rotate(-90deg) translate(0, calc(0px - var(--pointer--spacer)))}:host([data-vertical=middle][data-horizontal=right]){--r-popover--board--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0) + var(--pointer--height) + var(--pointer--spacer));--r-popover--board--transform:translate(0, calc(-50% + var(--r-popover--trigger--height, 0)/2));--r-popover--pointer--top:calc(50% - var(--pointer--height)/2);--r-popover--pointer--left:auto;--r-popover--pointer--right:100%;--r-popover--pointer--transform:rotate(90deg) translate(0, calc(0px - var(--pointer--spacer)))}:host([data-vertical=middle][data-horizontal=center]){--r-popover--pointer--display:none;--r-popover--board--transform:translate(calc(-50% + var(--r-popover--trigger--width, 0)/2), calc(-50% + var(--r-popover--trigger--height, 0)/2))}:host([data-vertical=middle][data-horizontal=cover]){--r-popover--pointer--display:none;--r-popover--board--left:0;--r-popover--board--transform:translate(0, calc(-50% + var(--r-popover--trigger--height, 0)/2))}:host([data-vertical=bottom][data-horizontal=left]){--r-popover--board--transform:translate(-100%, calc(var(--r-popover--trigger--height, 0) + var(--pointer--spacer) + var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=bottom][data-horizontal=right]){--r-popover--board--transform:translate(calc(0px - var(--board--shift)), calc(var(--r-popover--trigger--height, 0) + var(--r-popover--pointer--height, var(--pointer--height)) + var(--pointer--spacer)))}:host([data-vertical=bottom][data-horizontal=center]){--r-popover--board--transform:translate(calc(-50% + var(--r-popover--trigger--width, 0)/2), calc(var(--r-popover--trigger--height, 0) + var(--pointer--spacer) + var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=bottom][data-horizontal=cover]){--r-popover--pointer--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0)/2 - var(--r-popover--pointer--width, var(--pointer--width))/2);--r-popover--board--left:0;--r-popover--board--transform:translate(0, calc(var(--r-popover--trigger--height, 0) + var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=cover]){--r-popover--board--top:0;--r-popover--board--height:100%;--r-popover--board-content--height:100%;--r-popover--pointer--top:calc(var(--r-popover--trigger--top, 0) + var(--r-popover--trigger--height)/2 - var(--pointer--height)/2);--r-popover--pointer--bottom:auto}:host([data-vertical=cover][data-content-has-scroll=false]){--r-popover--board--top:var(--r-popover--trigger--top, 0)}:host([data-vertical=cover][data-horizontal=left]){--r-popover--board--left:var(--r-popover--trigger--left, 0);--r-popover--board--transform:translate(calc(-100% - var(--pointer--spacer) - var(--pointer--height)), 0);--r-popover--pointer--left:100%;--r-popover--pointer--right:auto;--r-popover--pointer--transform:rotate(-90deg) translate(0, calc(0px - var(--pointer--spacer)))}:host([data-vertical=cover][data-horizontal=right]){--r-popover--board--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0) + var(--pointer--width));--r-popover--pointer--left:auto;--r-popover--pointer--right:100%;--r-popover--pointer--transform:rotate(90deg) translate(0, calc(0px - var(--pointer--spacer)))}:host([data-vertical=cover][data-horizontal=center]),:host([data-vertical=cover][data-horizontal=cover]){--r-popover--pointer--display:none;--r-popover--board--transform:translate(calc(-50% + var(--r-popover--trigger--width, 0)/2), 0)}:host([data-vertical=cover][data-horizontal=cover]){--r-popover--pointer--display:none;--r-popover--board--transform:none;--r-popover--board--height:100%;--r-popover--board--width:100%;--r-popover--board--left:0}:host([data-fixed-top=true]){--r-popover--board-container--height:var(--r-popover--trigger--top, var(--board--max-height))}:host([dismiss-mode=manual]){--r-popover--board-content--padding:1.5rem 3.5rem 1.5rem 1.5rem}.r-popover{position:var(--r-popover--position, relative);display:var(--r-popover--display, inline-flex)}.r-popover--dismiss{position:var(--r-popover--dismiss--position, absolute);top:var(--r-popover--dismiss--top, 20px);right:var(--r-popover--dismiss--right, 20px);color:var(--r-text-inverse)}.r-popover--dismiss:hover{--r-icon-button--background-color:var(--r-background-interactive-hovered-inverse, rgba(243, 241, 240, 0.04))}.r-popover--dismiss:active{--r-icon-button--background-color:var(--r-background-interactive-pressed-inverse, rgba(243, 241, 240, 0.12))}.r-popover--trigger{border:var(--r-popover--trigger--border, none);background:var(--r-popover--trigger--background, none);padding:var(--r-popover--trigger--padding, 0);cursor:var(--r-popover--trigger--cursor, pointer);display:var(--r-popover--trigger--display, inline-flex);align-items:var(--r-popover--trigger--align-items, center);justify-content:var(--r-popover--trigger--justify-content, center);min-width:var(--r-popover--trigger--min-width, unset);min-height:var(--r-popover--trigger--min-height, unset)}.r-popover--trigger:focus{box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);outline:2px solid var(--r-border-focused, #0071e3);outline-offset:2px}.r-popover--board{position:var(--r-popover--board--position, fixed);top:var(--r-popover--board--top, -1000em);right:var(--r-popover--board--right, auto);bottom:var(--r-popover--board--bottom, auto);left:var(--r-popover--board--left, -1000em);visibility:var(--r-popover--board--visibility, hidden);width:var(--r-popover--board--width, 100%);min-width:var(--board--min-width);max-width:var(--board--max-width);height:var(--r-popover--board--height, auto);max-height:var(--r-popover--board--max-height, var(--board--max-height));background-color:var(--r-popover--board--background-color, var(--r-background-inverse));color:var(--r-popover--board--color, var(--r-text-inverse));border:var(--r-popover--board--border, none);transform:var(--r-popover--board--transform, none);box-sizing:var(--r-popover--board--box-sizing, border-box);padding:var(--r-popover--board--padding, 0);margin:var(--r-popover--board--margin, 0);overflow:var(--r-popover--board--overflow, visible)}.r-popover--board-content{display:var(--r-popover--board-content--display, flex);flex-direction:var(--r-popover--board-content--flex-direction, column);gap:var(--r-popover--board-content--gap, 1.5rem);overflow:var(--r-popover--board-content--overflow, auto);height:var(--r-popover--board-content--height, auto);max-height:var(--r-popover--board-content--max-height, var(--board--max-height));padding:var(--r-popover--board-content--padding, 1.5rem);box-sizing:var(--r-popover--board-content--box-sizing, border-box)}.r-popover--board-pointer{display:var(--r-popover--pointer--display, flex);width:var(--r-popover--pointer--width, var(--pointer--width));height:var(--r-popover--pointer--height, var(--pointer--height));position:var(--r-popover--pointer--position, absolute);top:var(--r-popover--pointer--top, auto);right:var(--r-popover--pointer--right, auto);bottom:var(--r-popover--pointer--bottom, auto);left:var(--r-popover--pointer--left, auto);color:var(--r-popover--pointer--color, var(--r-background-inverse));transform:var(--r-popover--pointer--transform, none);transform-origin:var(--r-popover--pointer--transform-origin, center)}.r-popover--board-pointer>svg{display:flex}";
|
|
6
6
|
|
|
7
7
|
const Popover = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -290,8 +290,8 @@ const Popover = class {
|
|
|
290
290
|
this.open ? this.show() : this.hide();
|
|
291
291
|
}
|
|
292
292
|
render() {
|
|
293
|
-
return (index.h(index.Host, { key: '
|
|
294
|
-
index.h("r-icon-button", { key: '
|
|
293
|
+
return (index.h(index.Host, { key: '13318df823b3f54e05823c9fc9821839f56583b2', id: this.uniqueId, "data-position": this.positionState, "data-open": `${this.isOpen}`, open: this.isOpen }, index.h("div", { key: '3f750ac2a82236f6a4074fa419b44f0c42f2b7e6', class: "r-popover" }, index.h("button", { key: '46e4bb247c2eda0e0cc0c4774acac6daf8801bc4', class: "r-popover--trigger", "aria-label": this.triggerAriaLabel, ref: el => this.triggerElement = el, popoverTarget: `${this.uniqueId}-board`, popoverTargetAction: this.triggerAction }, index.h("slot", { key: 'fac2e6d0ee9ac8830df16d379a0ec5e873becd58', name: "trigger" })), index.h("div", { key: '636c2ee45476903dc8b812924081f3b45499b18a', class: "r-popover--board", id: `${this.uniqueId}-board`, popover: this.dismissMode, ref: el => this.boardElement = el, onToggle: this.onToggle, onKeyDown: this.onKeyDown }, this.hasDismiss &&
|
|
294
|
+
index.h("r-icon-button", { key: '4f6a1168587faf500cddb85981f0dd7209af4020', ref: el => this.dismissElement = el, class: "r-popover--dismiss", name: "cross", onClick: this.onClickDismiss, label: this.dismissAriaLabel }), index.h("div", { key: 'bfa17c2df8022a01192550c315ba32e3a5247e3f', class: "r-popover--board-content" }, index.h("slot", { key: '001d74737028aee0d413e9ed679ff853070d5559', name: "headline" }), index.h("slot", { key: '9a33119f2e2f6bf10f0005f83283a1e964332583', name: "content" }), index.h("slot", { key: '2ff477aed3ef83d6bfff4fb3fdaeb3501dfba7c7', name: "action" })), index.h("div", { key: '6c0b891bc2e9def0892f65fe8882deef565b2037', class: "r-popover--board-pointer", "aria-hidden": "true" }, index.h("svg", { key: 'e9da72e80bb395041f4a9cc269cf835b643a335c', width: "16", height: "8", viewBox: "0 0 16 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '44eb8e0fa2c3d294074787595097fcdf82311052', d: "M8 8L0 0L16 0L8 8Z", fill: "currentColor" })))))));
|
|
295
295
|
}
|
|
296
296
|
get host() { return index.getElement(this); }
|
|
297
297
|
static get watchers() { return {
|
|
@@ -17,7 +17,7 @@ const ProgressBar = class {
|
|
|
17
17
|
max: '100',
|
|
18
18
|
'aria-label': rAriaLabel
|
|
19
19
|
};
|
|
20
|
-
return (index.h(index.Host, { key: '
|
|
20
|
+
return (index.h(index.Host, { key: 'f79c73155a42eef63910abde1fc2cebd147b7129' }, index.h("progress", Object.assign({ key: 'ce94e9a20124fa8cd1561612e2797e17f0ebe19f' }, progressBarAttrs, { class: "r-progress-bar" }))));
|
|
21
21
|
}
|
|
22
22
|
};
|
|
23
23
|
ProgressBar.style = progressBarCss;
|
|
@@ -9,7 +9,7 @@ const RadioButtonDescription = class {
|
|
|
9
9
|
index.registerInstance(this, hostRef);
|
|
10
10
|
}
|
|
11
11
|
render() {
|
|
12
|
-
return (index.h(index.Host, { key: '
|
|
12
|
+
return (index.h(index.Host, { key: 'cd678f2b6c1e00e95ecfc56b1e460b3b3ab37597', slot: "description" }, index.h("div", { key: 'a19901417798ef6dacd6ad82c9eab7e2a8227cd5', class: "r-radio-button-description", style: { display: 'contents' } }, index.h("slot", { key: 'ba9308abf507f84affb24bb7eb8a43c8da4fd613' }))));
|
|
13
13
|
}
|
|
14
14
|
get host() { return index.getElement(this); }
|
|
15
15
|
};
|
|
@@ -9,7 +9,7 @@ const RadioButtonLeading = class {
|
|
|
9
9
|
index.registerInstance(this, hostRef);
|
|
10
10
|
}
|
|
11
11
|
render() {
|
|
12
|
-
return (index.h(index.Host, { key: '
|
|
12
|
+
return (index.h(index.Host, { key: '272870387e6e1abe3db2a67a38cfcd502a0e5aac', slot: "leading" }, index.h("div", { key: '7fd29eb8b31cda51e7a3bebebf8d80c7b0a79622', class: "r-radio-button-leading", style: { display: 'contents' } }, index.h("slot", { key: '542afc33263c2f06007b1c50225457af3e1b9051' }))));
|
|
13
13
|
}
|
|
14
14
|
get host() { return index.getElement(this); }
|
|
15
15
|
};
|
|
@@ -9,7 +9,7 @@ const RadioButtonTitle = class {
|
|
|
9
9
|
index.registerInstance(this, hostRef);
|
|
10
10
|
}
|
|
11
11
|
render() {
|
|
12
|
-
return (index.h(index.Host, { key: '
|
|
12
|
+
return (index.h(index.Host, { key: '705ecfa00df2a6e5f1976e1e45dca02c2d63d0fb', slot: "title" }, index.h("div", { key: '9845596a7638b53995157c26ee89be55677ff2e9', class: "r-radio-button-title", style: { display: 'contents' } }, index.h("slot", { key: '5ec9a59d7d71f976513dddb471676d640e13e239' }))));
|
|
13
13
|
}
|
|
14
14
|
get host() { return index.getElement(this); }
|
|
15
15
|
};
|
|
@@ -9,7 +9,7 @@ const RadioButtonTrailing = class {
|
|
|
9
9
|
index.registerInstance(this, hostRef);
|
|
10
10
|
}
|
|
11
11
|
render() {
|
|
12
|
-
return (index.h(index.Host, { key: '
|
|
12
|
+
return (index.h(index.Host, { key: '844ad8251f30a4b0b6e700d0864798957e53750b', slot: "trailing" }, index.h("div", { key: '26a3458b5a448a9d8a687081325a5aa93c83e512', class: "r-radio-button-trailing", style: { display: 'contents' } }, index.h("slot", { key: 'fc1634011f555127d3281351a8ba9d7fdc1a7a38' }))));
|
|
13
13
|
}
|
|
14
14
|
get host() { return index.getElement(this); }
|
|
15
15
|
};
|
|
@@ -14,6 +14,8 @@ const RadioButton = class {
|
|
|
14
14
|
this.radioButtonDeselect = index.createEvent(this, "radioButtonDeselect");
|
|
15
15
|
/** Value of element data within a form */
|
|
16
16
|
this.value = this.slotTextValue;
|
|
17
|
+
/** Automatically focus the radio button when the component is mounted. Note: Only one element per page should have autofocus set to true, following browser standard behavior. */
|
|
18
|
+
this.autofocus = false;
|
|
17
19
|
/** Unique id */
|
|
18
20
|
this.uniqueId = `r-radio-button-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
|
|
19
21
|
this.onClick = (event) => {
|
|
@@ -34,18 +36,25 @@ const RadioButton = class {
|
|
|
34
36
|
this.onBlur = () => {
|
|
35
37
|
this.host.classList.remove('focused');
|
|
36
38
|
};
|
|
39
|
+
this.applyAutofocus = () => {
|
|
40
|
+
queueMicrotask(() => {
|
|
41
|
+
this.setFocus();
|
|
42
|
+
});
|
|
43
|
+
};
|
|
37
44
|
}
|
|
38
45
|
/** Sets focus on the radio button element */
|
|
39
46
|
async setFocus() {
|
|
40
|
-
|
|
47
|
+
var _a;
|
|
48
|
+
(_a = this.nativeEl) === null || _a === void 0 ? void 0 : _a.focus();
|
|
41
49
|
}
|
|
42
50
|
/** Blurs the radio button element */
|
|
43
51
|
async setBlur() {
|
|
44
|
-
|
|
52
|
+
var _a;
|
|
53
|
+
(_a = this.nativeEl) === null || _a === void 0 ? void 0 : _a.blur();
|
|
45
54
|
}
|
|
46
55
|
/** Selects the radio button element */
|
|
47
56
|
async select() {
|
|
48
|
-
var _a;
|
|
57
|
+
var _a, _b, _c;
|
|
49
58
|
if (this.checked)
|
|
50
59
|
return;
|
|
51
60
|
if (this.disabled)
|
|
@@ -55,8 +64,8 @@ const RadioButton = class {
|
|
|
55
64
|
radio.shadowRoot.querySelector('.r-radio-button--input').setAttribute('tabindex', '-1');
|
|
56
65
|
});
|
|
57
66
|
this.checked = true;
|
|
58
|
-
this.nativeEl.setAttribute('tabindex', '0');
|
|
59
|
-
this.nativeEl.focus();
|
|
67
|
+
(_b = this.nativeEl) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '0');
|
|
68
|
+
(_c = this.nativeEl) === null || _c === void 0 ? void 0 : _c.focus();
|
|
60
69
|
const { host, value, checked } = this;
|
|
61
70
|
this.rChange.emit({ element: host, value, checked });
|
|
62
71
|
}
|
|
@@ -90,6 +99,9 @@ const RadioButton = class {
|
|
|
90
99
|
get isTrailing() {
|
|
91
100
|
return this.host.querySelector('[slot="trailing"]') !== null || this.host.querySelector('r-radio-button-trailing') !== null;
|
|
92
101
|
}
|
|
102
|
+
get shouldAutofocus() {
|
|
103
|
+
return this.autofocus && (!this.groupEl || !this.groupEl.autofocus);
|
|
104
|
+
}
|
|
93
105
|
componentWillLoad() {
|
|
94
106
|
if (!this.initialState)
|
|
95
107
|
this.initialState = this.checked;
|
|
@@ -97,8 +109,12 @@ const RadioButton = class {
|
|
|
97
109
|
this.name = this.groupEl.name;
|
|
98
110
|
}
|
|
99
111
|
}
|
|
112
|
+
componentDidLoad() {
|
|
113
|
+
if (this.shouldAutofocus)
|
|
114
|
+
this.applyAutofocus();
|
|
115
|
+
}
|
|
100
116
|
render() {
|
|
101
|
-
const { name, value, checked, disabled, hint, uniqueId, required, invalid, error } = this;
|
|
117
|
+
const { name, value, checked, disabled, hint, uniqueId, required, invalid, error, autofocus } = this;
|
|
102
118
|
const inputAttrs = {
|
|
103
119
|
type: 'radio',
|
|
104
120
|
tabindex: '-1',
|
|
@@ -106,13 +122,14 @@ const RadioButton = class {
|
|
|
106
122
|
value,
|
|
107
123
|
disabled,
|
|
108
124
|
checked,
|
|
109
|
-
required
|
|
125
|
+
required,
|
|
126
|
+
autofocus
|
|
110
127
|
};
|
|
111
|
-
return (index.h(index.Host, { key: '
|
|
112
|
-
index.h("div", { key: '
|
|
113
|
-
index.h("div", { key: '
|
|
114
|
-
index.h("r-hint", { key: '
|
|
115
|
-
index.h("r-hint", { key: '
|
|
128
|
+
return (index.h(index.Host, { key: '718b29840798212b4a31a2250fe79620554a9fb5' }, index.h("label", { key: 'ab86d4ca9bb300628a5b7f4bf10ba2ce88656d6d', class: "r-radio-button", onClick: this.onClick, onKeyDown: this.onKeydown }, index.h("input", Object.assign({ key: '529324a5ae32238b56ab9443a9ba3dd67b9b76bd' }, inputAttrs, { id: `${uniqueId}-input`, class: "r-radio-button--input", ref: el => this.nativeEl = el, onFocus: this.onFocus, onBlur: this.onBlur })), index.h("span", { key: 'a90a3704b4fc2d431482cca0c4064241001e09d2', class: "r-radio-button--box" }), this.isLeading &&
|
|
129
|
+
index.h("div", { key: '8a067dc10dc0f764c507be6610a8bf6f80565f8b', class: "r-radio-button--leading" }, index.h("slot", { key: 'db99a204cdf0932b203a65698f6167ede11309c4', name: "leading" }, this.icon && index.h("r-icon", { key: '8f6b1c585e0dcfcee9bb471e59f4d911ff72e7bc', name: this.icon, size: "m" }))), index.h("div", { key: 'b2ec0c20df6bffa599c5331016f3c52ce5661a17', class: "r-radio-button--text" }, index.h("slot", { key: '82ed5be7758c72ece18d4df27c0dbeb7e00ab1fc', name: "title" }, index.h("div", { key: '9c839853016eb5e7a3940bea0f9c5c755933ae55', style: { display: 'contents' } }, index.h("slot", { key: '78875045c000e5dcd0375fe2143e3032bf3a5226' }))), index.h("slot", { key: 'd75f2511dc33c734eb34c0d8953ed5be2f4cb7ea', name: "description" }, this.description)), this.isTrailing &&
|
|
130
|
+
index.h("div", { key: 'fd204a1c99ac54d60fc4479de3ca650d8ecf6508', class: "r-radio-button--trailing" }, index.h("slot", { key: '9a82590bc860567d1a60f9125622b1e63471ad94', name: "trailing" }))), invalid && error &&
|
|
131
|
+
index.h("r-hint", { key: '1fc760af1aff4ca5aaa595270c294b492fdb14e3', role: "alert", variant: "error", id: `${uniqueId}-hint` }, this.error), hint &&
|
|
132
|
+
index.h("r-hint", { key: '079a060908d285505f7093820933c173194f2348', role: "note", variant: "information", id: `${uniqueId}-hint` }, hint)));
|
|
116
133
|
}
|
|
117
134
|
get host() { return index.getElement(this); }
|
|
118
135
|
};
|
|
@@ -11,15 +11,13 @@ const RadioGroup = class {
|
|
|
11
11
|
this.rValidate = index.createEvent(this, "rValidate");
|
|
12
12
|
this.rChange = index.createEvent(this, "rChange");
|
|
13
13
|
this.rReset = index.createEvent(this, "rReset");
|
|
14
|
-
/**
|
|
15
|
-
* _DEPRECATED_ (This property will be removed in November 2025 release.)
|
|
16
|
-
* Indicates whether to show the validation state.
|
|
17
|
-
* When set to `true`, the component will display validation feedback.
|
|
18
|
-
* Defaults to `false`.
|
|
19
|
-
*/
|
|
20
|
-
this.showValid = false;
|
|
21
14
|
/** Controls the style variation of the radio buttons. */
|
|
22
15
|
this.variant = 'standard';
|
|
16
|
+
/**
|
|
17
|
+
* When set to `true`, automatically focuses the first enabled radio button in the group on mount.
|
|
18
|
+
* This will focus the selected radio button if one exists, or the first enabled radio button otherwise.
|
|
19
|
+
*/
|
|
20
|
+
this.autofocus = false;
|
|
23
21
|
this.validityState = '';
|
|
24
22
|
this.validityMessage = '';
|
|
25
23
|
/**
|
|
@@ -268,10 +266,10 @@ const RadioGroup = class {
|
|
|
268
266
|
return this.host.querySelectorAll('r-radio-button:not([disabled]:not([disabled="false"]))');
|
|
269
267
|
}
|
|
270
268
|
get selectedRadioButtonElement() {
|
|
271
|
-
return Array.from(this.radioButtonElements).find(el => el.hasAttribute('checked')) || null;
|
|
269
|
+
return Array.from(this.radioButtonElements).find(el => el.checked || el.hasAttribute('checked')) || null;
|
|
272
270
|
}
|
|
273
271
|
get hasSelected() {
|
|
274
|
-
return Array.from(this.radioButtonElements).some(el => el.hasAttribute('checked'));
|
|
272
|
+
return Array.from(this.radioButtonElements).some(el => el.checked || el.hasAttribute('checked'));
|
|
275
273
|
}
|
|
276
274
|
get nativeSelectedEl() {
|
|
277
275
|
var _a, _b;
|
|
@@ -333,21 +331,19 @@ const RadioGroup = class {
|
|
|
333
331
|
const { name, required } = this;
|
|
334
332
|
this.passPropsToGroupItems({ name, required });
|
|
335
333
|
this.setTabindex();
|
|
334
|
+
if (this.autofocus) {
|
|
335
|
+
queueMicrotask(() => {
|
|
336
|
+
this.setFocus();
|
|
337
|
+
});
|
|
338
|
+
}
|
|
336
339
|
}
|
|
337
340
|
render() {
|
|
338
|
-
const { label, hint, fieldIndicator,
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
'
|
|
343
|
-
'
|
|
344
|
-
};
|
|
345
|
-
return (index.h(index.Host, { key: '5bf5f0493d2329b07d82e332153e467239ddff0f' }, index.h("div", { key: '06f96cb1868f7cbb635137ca68eda6a326b969c3', class: "r-radio-group", onClick: this.onLabelClick }, label &&
|
|
346
|
-
index.h("div", { key: '4dca24e0cb903a2e74e55ee743ed595608af0bf4', class: "r-radio-group--label-container" }, index.h("r-label", Object.assign({ key: 'cba1398032eae164db0a00808a06116affa671ec', id: `${uniqueId}-label`, class: "r-radio-group--label", "field-indicator": fieldIndicator }, labelAttr), label), index.h("slot", { key: 'c0180f3c6c99fed7d524719aff8eb8e64236cc3c', name: "popover" })), hint &&
|
|
347
|
-
index.h("r-hint", { key: '3ae1c84630975059aa1532b4b72957967e398949', id: `${uniqueId}-hint`, class: "r-radio-group--hint", role: "note" }, hint), index.h("div", { key: '2c18a09474189e6f2719db7c6ee5fb51c460e52f', class: "r-radio-group--content" }, index.h("slot", { key: '1c79f92cc0cd2095cfe51ee5fc108b6a004c4e4e' }))), invalid && error &&
|
|
348
|
-
index.h("r-hint", { key: '86aa0f4d1400e401cc7f71259511f118a3f68ef7', "aria-live": "polite", id: `${uniqueId}-message`, role: "alert", variant: "error" }, error), this.validityState !== 'valid' && this.validityMessage &&
|
|
349
|
-
index.h("r-hint", { key: 'aa06f829a6566becdf4a1f86e26e5161526756fb', "aria-live": "polite", id: `${uniqueId}-message`, role: "alert", variant: "error" }, this.customErrorMessage || this.validityMessage), this.valid && this.validMessage && this.showValid &&
|
|
350
|
-
index.h("r-hint", { key: '11500e705487028e4312679a6757dc48d861ebba', role: "alert", variant: "success" }, this.validMessage)));
|
|
341
|
+
const { label, hint, fieldIndicator, error, uniqueId, invalid } = this;
|
|
342
|
+
return (index.h(index.Host, { key: '598a714f75ce283c76278d52fb7684c5818700f9' }, index.h("div", { key: '0c691e6738d11dcc8b621fe90b356980944ce5ec', class: "r-radio-group", onClick: this.onLabelClick }, label &&
|
|
343
|
+
index.h("div", { key: '3071e2dedc5e9935bd6f80cc3e01883d8bffacc6', class: "r-radio-group--label-container" }, index.h("r-label", { key: '6175d4620468c3d2b06790baf11673c47e797bd7', id: `${uniqueId}-label`, class: "r-radio-group--label", "field-indicator": fieldIndicator }, label), index.h("slot", { key: '9c3595a94234b99bec2001c9667c53cd41d8fdde', name: "popover" })), hint &&
|
|
344
|
+
index.h("r-hint", { key: '8d9ef5dbaacac8a9cae05a633c942c8009b3d686', id: `${uniqueId}-hint`, class: "r-radio-group--hint", role: "note" }, hint), index.h("div", { key: '9206c8f841cc20ee632f58da3775e1d967730c58', class: "r-radio-group--content" }, index.h("slot", { key: '1f7edd0e36e16956acf7dbe5dd17c16a43b39666' }))), invalid && error &&
|
|
345
|
+
index.h("r-hint", { key: 'e4780947cede5a39e553d639eb37aeb842f1cda3', "aria-live": "polite", id: `${uniqueId}-message`, role: "alert", variant: "error" }, error), this.validityState !== 'valid' && this.validityMessage &&
|
|
346
|
+
index.h("r-hint", { key: '4c9867129f7da323cc9e99b350332ac1d5740a0e', "aria-live": "polite", id: `${uniqueId}-message`, role: "alert", variant: "error" }, this.customErrorMessage || this.validityMessage)));
|
|
351
347
|
}
|
|
352
348
|
get host() { return index.getElement(this); }
|
|
353
349
|
};
|
|
@@ -121,7 +121,7 @@ const SelectOption = class {
|
|
|
121
121
|
size: iconSize,
|
|
122
122
|
color: iconColor
|
|
123
123
|
};
|
|
124
|
-
return (index.h(index.Host, { key: '
|
|
124
|
+
return (index.h(index.Host, { key: 'd059d75cec11ef39ddea8c4ddc9ce8bc9d1a57e7', id: uniqueId, role: "option", onClick: this.handleClick, onKeydown: this.handleKeydown, "aria-disabled": `${disabled}`, "aria-selected": `${this.isSelected}`, "data-value": this.definedValue, "data-focused": `${this.isFocused}` }, index.h("div", { key: '70fa5c2fc9194d197b4124b6afad296d2849032c', class: "r-select-option" }, icon && index.h("span", { key: '07bdfeb2d8330c989e6b59c34ee85cac029135cb', class: "r-select-option--icon" }, index.h("r-icon", Object.assign({ key: '358748199ca580e8a9d397ed4f5642a722703441' }, iconAttributes))), !icon && hasIconSlot && index.h("span", { key: '60a4e6059188b27d0fbe6e9b0134882cea803d90', class: "r-select-option--icon" }, index.h("slot", { key: '08b11beec2c086b21ab92ad6cab080bae1cd0eac', name: "icon" })), index.h("span", { key: '4397696c7b8ec172098d9bd82e0c89c55781bb91', class: "r-select-option--label" }, index.h("slot", { key: 'b9dddec8b9c455f130ed38577c9321cb6aced0dd' })))));
|
|
125
125
|
}
|
|
126
126
|
get host() { return index.getElement(this); }
|
|
127
127
|
};
|
|
@@ -12,19 +12,8 @@ const Select = class {
|
|
|
12
12
|
this.rValidate = index.createEvent(this, "rValidate");
|
|
13
13
|
this.rChange = index.createEvent(this, "rChange");
|
|
14
14
|
this.rReset = index.createEvent(this, "rReset");
|
|
15
|
-
/** Controls the visibility of validation indicators for the field. */
|
|
16
|
-
this.showValid = false;
|
|
17
15
|
/** Define if select should render as a text item or a block */
|
|
18
16
|
this.fullWidth = false;
|
|
19
|
-
/** _DEPRECATED_ (This property will be removed in November 2025 release. Use `leading slot` instead)
|
|
20
|
-
* Define size of an icon that serves as leading icon in select */
|
|
21
|
-
this.leadingIconSize = 's';
|
|
22
|
-
/** _DEPRECATED_ (This property will be removed in November 2025 release.)
|
|
23
|
-
* Defines the trailing icon defined by name for select, Default: 'andle-down' */
|
|
24
|
-
this.trailingIcon = 'angle-down';
|
|
25
|
-
/** _DEPRECATED_ (This property will be removed in November 2025 release.)
|
|
26
|
-
* Define size of an icon that serves as trailing icon in select */
|
|
27
|
-
this.tralingIconSize = 's';
|
|
28
17
|
/** Define wether listbox appears on top or at the bottom of the select */
|
|
29
18
|
this.listboxPosition = 'bottom';
|
|
30
19
|
/**
|
|
@@ -1028,11 +1017,8 @@ const Select = class {
|
|
|
1028
1017
|
var _a;
|
|
1029
1018
|
return this.validityState !== 'valid' && ((_a = this.validityMessage) === null || _a === void 0 ? void 0 : _a.length) > 0;
|
|
1030
1019
|
}
|
|
1031
|
-
get hasValidationSuccess() {
|
|
1032
|
-
return this.valid && this.validMessage && this.showValid;
|
|
1033
|
-
}
|
|
1034
1020
|
get hasMessage() {
|
|
1035
|
-
return this.hasError || this.hasValidationError
|
|
1021
|
+
return this.hasError || this.hasValidationError;
|
|
1036
1022
|
}
|
|
1037
1023
|
get isInteractive() {
|
|
1038
1024
|
return !this.disabled && !this.isReadonly;
|
|
@@ -1067,14 +1053,10 @@ const Select = class {
|
|
|
1067
1053
|
}
|
|
1068
1054
|
render() {
|
|
1069
1055
|
var _a;
|
|
1070
|
-
const { uniqueId, disabled, isExpanded, fieldIndicator, invalid, placeholder, required, hint, label, internal
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
tooltip,
|
|
1074
|
-
'tooltip-icon': tooltipIcon,
|
|
1075
|
-
'tooltip-icon-color': tooltipIconColor,
|
|
1056
|
+
const { uniqueId, disabled, isExpanded, fieldIndicator, invalid, placeholder, required, hint, label, internal } = this;
|
|
1057
|
+
const labelAttr = label ? {
|
|
1058
|
+
fieldIndicator
|
|
1076
1059
|
} : {};
|
|
1077
|
-
const labelAttr = label ? Object.assign({ fieldIndicator }, tooltipAttrs) : {};
|
|
1078
1060
|
const isRequired = this.isInteractive ? !!required : false;
|
|
1079
1061
|
const comboboxAttrs = {
|
|
1080
1062
|
id: `${uniqueId}-value`,
|
|
@@ -1101,8 +1083,8 @@ const Select = class {
|
|
|
1101
1083
|
disabled,
|
|
1102
1084
|
required: isRequired
|
|
1103
1085
|
};
|
|
1104
|
-
return (index.h(index.Host, { key: '
|
|
1105
|
-
index.h("r-hint", { key: '
|
|
1086
|
+
return (index.h(index.Host, { key: '7f1fb8ee95b7da1cd7aad0d212d1efa9da744dc2', "data-value": this.currentValue, expanded: !this.disabled && this.isExpanded, "data-listbox-position": this.listboxPositionState, "data-initial-value": this.initial['value'], "data-is-placeholder": `${!!this.isPlaceholder}`, "data-value-focused": `${!!this.isValueFocused}`, "data-option-focused": `${!!this.focusedOption}`, "data-validity-state": `${this.validityState || ''}`, "data-validity-message": `${this.validityMessage || ''}`, "data-readonly": `${!!this.isReadonly}`, "data-touched": `${this.touched}`, "data-dirty": `${this.dirty}` }, index.h("div", { key: 'cb2a21da12f1f1c0dc298f42338d32b709f62375', class: `r-select--label ${!internal ? 'r-select--label__margin-bottom' : ''}` }, index.h("div", { key: 'd293ba41b9846d24ba4a2c44fb8fcb9895637c03', class: internal ? 'visually-hidden' : 'r-select--label-container' }, index.h("label", { key: 'b562d22174f435deed545a94d0fd7ce0233ba3de', id: `${uniqueId}-label`, onClick: this.isInteractive ? this.onValueClick : null }, index.h("r-label", Object.assign({ key: '2412f39f04b62a1fac018b588fb463efc9760ae0' }, labelAttr), label)), index.h("slot", { key: '99c5c78534118199fc1e99daac2737b78d55bc28', name: "popover" })), hint &&
|
|
1087
|
+
index.h("r-hint", { key: '74f3cf98c25ba600e8faf8a1793d56ab14c01466', id: `${uniqueId}-hint`, class: "r-select--hint" }, hint)), index.h("div", { key: '1960780639c8896bc52d1b62269d9453645132ef', class: "r-select" }, index.h("select", Object.assign({ key: '2b9d75c37066bfeb8e06b4097ecc73bd96358702', class: "r-select--native", ref: el => this.nativeElement = el }, nativeAttrs)), index.h("div", { key: '3eff5f8f263a013e0ba7ba64eace1da6167b6d1f', class: "r-select--container" }, this.combobox ? this.renderCombobox(comboboxAttrs) : this.renderSelect(comboboxAttrs), index.h("div", Object.assign({ key: 'bbfb28e905d17feee0bd2693faac327d8ef97894', role: "listbox", tabindex: "-1", id: `${uniqueId}-list`, class: "r-select--options", ref: el => this.listboxElement = el }, listboxAttrs), (this.isNoResultsFound || !((_a = this.optionElements) === null || _a === void 0 ? void 0 : _a.length)) && index.h("r-select-option", { key: '319993c58f2133c271c2db357d22132497751958', "data-no-results": "true", value: "no_results" }, this.noResultsFound), index.h("slot", { key: 'bbb21659679bb22e3aeb9471a34e3e007ab835d8', onSlotchange: this.handleSlotChange })))), index.h("div", { key: '5971e5c4f3bbb453dcae9f3ecbdf2c2f14cf0293', id: `${uniqueId}-message`, "aria-live": "polite", "aria-atomic": "true", ref: (el) => this.messageContainer = el, class: this.hasMessage && !internal ? 'r-select--message' : 'visually-hidden' }, this.hasMessage && index.h("r-hint", { key: '1c1aba3c4f3baa93cd6ecab59dd40d99ad5bd0b2', variant: this.invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && this.validityMessage))));
|
|
1106
1088
|
}
|
|
1107
1089
|
get host() { return index.getElement(this); }
|
|
1108
1090
|
static get watchers() { return {
|
|
@@ -11,7 +11,7 @@ const SkipLink = class {
|
|
|
11
11
|
this.position = 'center';
|
|
12
12
|
}
|
|
13
13
|
render() {
|
|
14
|
-
return (index.h(index.Host, { key: '
|
|
14
|
+
return (index.h(index.Host, { key: '5097cfa89ded56bcfb98dc24ca0b1e42c389e4ae' }, index.h("slot", { key: 'bba803efc4b82b0612e270665d5f80b740a786f1' })));
|
|
15
15
|
}
|
|
16
16
|
};
|
|
17
17
|
SkipLink.style = skipLinkCss;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-DJ4H_bFj.js');
|
|
4
4
|
|
|
5
|
-
const stepperItemCss = ":host([active]){--r-stepper-item--indicator--background-color:var(--r-background-inverse, #282828);--r-stepper-item--color:var(--r-text-inverse, #FFF);--r-stepper-item--text--color:var(--r-text-regular, #282828);--r-stepper-item--indicator--border-color:transparent}:host([complete]){--r-stepper-item--indicator--background-color:var(--r-status-success-regular, #298535);--r-stepper-item--color:var(--r-text-inverse, #FFF);--r-stepper-item--text--color:var(--r-text-regular, #282828);--r-stepper-item--indicator--border-color:transparent}.r-stepper-item{display:var(--r-stepper-item--display, flex);flex-direction:var(--r-stepper-item--flex-direction, column);align-items:var(--r-stepper-item--align-items, center);justify-content:var(--r-stepper-item--justify-content, center);font-size:var(--r-stepper-item--font-size, var(--r-font-size-200, 13px));color:var(--r-stepper-item--color, var(--r-text-
|
|
5
|
+
const stepperItemCss = ":host([active]){--r-stepper-item--indicator--background-color:var(--r-background-inverse, #282828);--r-stepper-item--color:var(--r-text-inverse, #FFF);--r-stepper-item--text--color:var(--r-text-regular, #282828);--r-stepper-item--indicator--border-color:transparent}:host([complete]){--r-stepper-item--indicator--background-color:var(--r-status-success-regular, #298535);--r-stepper-item--color:var(--r-text-inverse, #FFF);--r-stepper-item--text--color:var(--r-text-regular, #282828);--r-stepper-item--indicator--border-color:transparent}.r-stepper-item{display:var(--r-stepper-item--display, flex);flex-direction:var(--r-stepper-item--flex-direction, column);align-items:var(--r-stepper-item--align-items, center);justify-content:var(--r-stepper-item--justify-content, center);font-size:var(--r-stepper-item--font-size, var(--r-font-size-200, 13px));color:var(--r-stepper-item--color, var(--r-text-regular, #282828));font-family:var(--r-stepper-item--font-family, var(--r-font-family-text, system-ui));width:var(--r-stepper-item--width, 36px);white-space:var(--r-stepper-item--white-space, nowrap);gap:var(--r-stepper-item--gap, 8px)}.r-stepper-item--indicator{width:var(--r-stepper-item--indicator--width, 20px);height:var(--r-stepper-item--indicator--height, 20px);line-height:var(--r-stepper-item--indicator--line-height, 20px);border-radius:var(--r-stepper-item--indicator--border-radius, 50%);background-color:var(--r-stepper-item--indicator--background-color, transparent);display:var(--r-stepper-item--indicator--display, flex);justify-content:var(--r-stepper-item--indicator--justify-content, center);align-items:var(--r-stepper-item--indicator--align-items, center);border-width:var(--r-stepper-item--indicator--border-width, 1px);border-style:var(--r-stepper-item--indicator--border-style, solid);border-color:var(--r-stepper-item--indicator--border-color, var(--r-text-regular, #282828));margin-left:var(--r-stepper-item--indicator--margin-left, 8px);margin-right:var(--r-stepper-item--indicator--margin-right, 8px)}.r-stepper-item--indicator--step-number{vertical-align:var(--r-stepper-item--step-number--vertical-align, middle)}.r-stepper-item--text{font-size:var(--r-stepper-item--text--font-size, var(--r-font-size-200, 13px));color:var(--r-stepper-item--text--color, var(--r-text-regular, #282828));text-align:var(--r-stepper-item--text--text-align, center)}";
|
|
6
6
|
|
|
7
7
|
const StepperItem = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -17,8 +17,8 @@ const StepperItem = class {
|
|
|
17
17
|
}
|
|
18
18
|
render() {
|
|
19
19
|
const number = this.number || this.stepNumber;
|
|
20
|
-
return (index.h(index.Host, { key: '
|
|
21
|
-
index.h("div", { key: '
|
|
20
|
+
return (index.h(index.Host, { key: '3613c92e8ac7583bf5e3db7e90edca9a921fa475' }, index.h("div", { key: 'ca2c38443d9a855baea829e99ec9c642c279a3be', class: "r-stepper-item" }, index.h("div", { key: '513f01a9a3ac3a87c3622b14f051765121308241', class: "r-stepper-item--indicator" }, this.complete ? (index.h("r-icon", { name: "check", size: "s" })) : this.icon ? (index.h("r-icon", { name: this.icon, size: "s" })) : number !== undefined ? (index.h("span", { class: "r-stepper-item--indicator--step-number" }, number)) : null), this.hasText &&
|
|
21
|
+
index.h("div", { key: 'cec8659e5ff31608b05c6f62798a8a1048cd7539', class: "r-stepper-item--text" }, index.h("slot", { key: '6a9d581948decc8a15e66401275cb85bf52bb459' })))));
|
|
22
22
|
}
|
|
23
23
|
get host() { return index.getElement(this); }
|
|
24
24
|
};
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-DJ4H_bFj.js');
|
|
4
4
|
|
|
5
|
-
const stepperCss = ".r-stepper{display:var(--r-stepper--display, flex);align-items:var(--r-stepper--align-items, top)}.r-stepper>r-stepper-item,.r-stepper ::slotted(r-stepper-item){display:var(--r-stepper--slotted--stepper-item--display, flex)}.r-stepper>r-stepper-item:not(:last-of-type),.r-stepper ::slotted(r-stepper-item:not(:last-child)){flex:var(--r-stepper--slotted--stepper-item--flex, 1)}.r-stepper>r-stepper-item:not(:last-of-type)::after,.r-stepper ::slotted(r-stepper-item:not(:last-child))::after{content:var(--r-stepper-divider--content, \"\");display:var(--r-stepper-divider--display, block);position:var(--r-stepper-divider--position, relative);width:var(--r-stepper-divider--width, 100%);height:var(--r-stepper-divider--height, 1px);top:var(--r-stepper-divider--top, 10px);background-color:var(--r-stepper-divider--background-color, var(--r-
|
|
5
|
+
const stepperCss = ".r-stepper{display:var(--r-stepper--display, flex);align-items:var(--r-stepper--align-items, top)}.r-stepper>r-stepper-item,.r-stepper ::slotted(r-stepper-item){display:var(--r-stepper--slotted--stepper-item--display, flex)}.r-stepper>r-stepper-item:not(:last-of-type),.r-stepper ::slotted(r-stepper-item:not(:last-child)){flex:var(--r-stepper--slotted--stepper-item--flex, 1)}.r-stepper>r-stepper-item:not(:last-of-type)::after,.r-stepper ::slotted(r-stepper-item:not(:last-child))::after{content:var(--r-stepper-divider--content, \"\");display:var(--r-stepper-divider--display, block);position:var(--r-stepper-divider--position, relative);width:var(--r-stepper-divider--width, 100%);height:var(--r-stepper-divider--height, 1px);top:var(--r-stepper-divider--top, 10px);background-color:var(--r-stepper-divider--background-color, var(--r-text-regular, #282828))}";
|
|
6
6
|
|
|
7
7
|
const Stepper = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -17,7 +17,7 @@ const Stepper = class {
|
|
|
17
17
|
}
|
|
18
18
|
render() {
|
|
19
19
|
const completed = this.completed || this.completeSteps;
|
|
20
|
-
return (index.h(index.Host, { key: '
|
|
20
|
+
return (index.h(index.Host, { key: '196ddb8922499f7222418d19cd6ddc994c211119' }, index.h("div", { key: '2220fcb8ec2125a15db198ec7948780d8d331e50', class: "r-stepper" }, !this.hasSteps && Array.from({ length: this.total }, (_, index$1) => (index.h("r-stepper-item", { number: index$1 + 1, complete: completed > index$1, active: completed === index$1, key: index$1 }))), index.h("slot", { key: '69c7eb87d53b67b19efc6da0ab489debc7e6b06c' }))));
|
|
21
21
|
}
|
|
22
22
|
get host() { return index.getElement(this); }
|
|
23
23
|
};
|
|
@@ -18,7 +18,7 @@ const RTabPanel = class {
|
|
|
18
18
|
active,
|
|
19
19
|
'aria-labelledby': tabId
|
|
20
20
|
};
|
|
21
|
-
return (index.h(index.Host, Object.assign({ key: '
|
|
21
|
+
return (index.h(index.Host, Object.assign({ key: 'db95a245a8aa8900e1cea5af71ac488352954299', class: "r-typography" }, hostAttrs), index.h("div", { key: '0e720978d72a9d9ba9da367794ac96c49737d854', class: "r-tab-panel" }, index.h("slot", { key: 'f16a0da6c7d3d2c1e0c57778837bdb47879468b4' }))));
|
|
22
22
|
}
|
|
23
23
|
};
|
|
24
24
|
RTabPanel.style = tabPanelCss;
|