@riverty/web-components 6.1.0 → 6.2.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 +23 -0
- package/custom-elements.json +160 -1
- package/dist/cjs/{index-DJ4H_bFj.js → index-BnETQtSf.js} +9 -382
- package/dist/cjs/loader.cjs.js +2 -2
- 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 +1 -1
- package/dist/cjs/r-accordion.cjs.entry.js +1 -1
- package/dist/cjs/r-alert.cjs.entry.js +9 -6
- package/dist/cjs/r-badge.cjs.entry.js +1 -1
- package/dist/cjs/r-button.cjs.entry.js +6 -2
- package/dist/cjs/r-checkbox-group.cjs.entry.js +1 -1
- package/dist/cjs/r-checkbox.cjs.entry.js +4 -4
- package/dist/cjs/r-design-system-devtools.cjs.entry.js +1 -1
- package/dist/cjs/r-dialog.cjs.entry.js +1 -1
- package/dist/cjs/r-hint_2.cjs.entry.js +3 -3
- package/dist/cjs/r-icon-button_2.cjs.entry.js +24 -4
- package/dist/cjs/r-icon.cjs.entry.js +2 -2
- package/dist/cjs/r-illustration.cjs.entry.js +396 -0
- package/dist/cjs/r-input-code.cjs.entry.js +34 -12
- package/dist/cjs/r-input-date.cjs.entry.js +7 -7
- package/dist/cjs/r-input-password.cjs.entry.js +3 -3
- package/dist/cjs/r-input-phone-number.cjs.entry.js +4 -4
- package/dist/cjs/r-input.cjs.entry.js +5 -4
- package/dist/cjs/r-list-item.cjs.entry.js +1 -1
- package/dist/cjs/r-pagination.cjs.entry.js +56 -50
- package/dist/cjs/r-panel.cjs.entry.js +3 -3
- package/dist/cjs/r-popover-action.cjs.entry.js +2 -2
- package/dist/cjs/r-popover-content.cjs.entry.js +2 -2
- package/dist/cjs/r-popover-headline.cjs.entry.js +2 -2
- package/dist/cjs/r-popover-trigger.cjs.entry.js +2 -2
- package/dist/cjs/r-popover.cjs.entry.js +46 -5
- package/dist/cjs/r-progress-bar.cjs.entry.js +2 -2
- package/dist/cjs/r-radio-button-description.cjs.entry.js +2 -2
- package/dist/cjs/r-radio-button-leading.cjs.entry.js +2 -2
- package/dist/cjs/r-radio-button-title.cjs.entry.js +2 -2
- package/dist/cjs/r-radio-button-trailing.cjs.entry.js +2 -2
- package/dist/cjs/r-radio-button.cjs.entry.js +8 -7
- package/dist/cjs/r-radio-group.cjs.entry.js +83 -10
- package/dist/cjs/r-select-option.cjs.entry.js +2 -2
- package/dist/cjs/r-select.cjs.entry.js +6 -4
- package/dist/cjs/r-skip-link.cjs.entry.js +2 -2
- package/dist/cjs/r-stepper-item.cjs.entry.js +19 -4
- package/dist/cjs/r-stepper.cjs.entry.js +76 -3
- package/dist/cjs/r-tab-panel.cjs.entry.js +2 -2
- package/dist/cjs/r-tab.cjs.entry.js +3 -3
- package/dist/cjs/r-tabs-list.cjs.entry.js +4 -4
- package/dist/cjs/r-tabs.cjs.entry.js +2 -2
- package/dist/cjs/r-textarea.cjs.entry.js +1 -1
- package/dist/cjs/r-toast-group.cjs.entry.js +13 -4
- package/dist/cjs/r-toast.cjs.entry.js +87 -18
- package/dist/cjs/web-components.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/alert/alert.css +4 -3
- package/dist/collection/components/alert/alert.js +7 -4
- package/dist/collection/components/button/button.js +30 -1
- package/dist/collection/components/button/exports.js +1 -0
- package/dist/collection/components/checkbox/checkbox.js +3 -3
- package/dist/collection/components/icon/exports.js +1 -1
- package/dist/collection/components/icon/icon.js +1 -1
- package/dist/collection/components/icon/riverty-kit.js +1 -1
- package/dist/collection/components/illustration/data.js +112 -0
- package/dist/collection/components/illustration/exports.js +3 -0
- package/dist/collection/components/illustration/illustration.js +540 -0
- package/dist/collection/components/illustration/illustration.scss +56 -0
- package/dist/collection/components/illustration/illustrations-ui-kit.js +2 -0
- package/dist/collection/components/input/exports.js +1 -0
- package/dist/collection/components/input/input.css +3 -0
- package/dist/collection/components/input/input.js +47 -2
- package/dist/collection/components/input-code/input-code.css +6 -0
- package/dist/collection/components/input-code/input-code.js +48 -10
- package/dist/collection/components/input-date/input-date.js +6 -6
- package/dist/collection/components/input-password/input-password.js +2 -2
- package/dist/collection/components/input-phone-number/input-phone-number.js +3 -3
- package/dist/collection/components/label/label.js +2 -2
- package/dist/collection/components/pagination/pagination.css +33 -72
- package/dist/collection/components/pagination/pagination.js +194 -48
- package/dist/collection/components/panel/panel.js +2 -2
- package/dist/collection/components/popover/popover.css +0 -1
- package/dist/collection/components/popover/popover.js +44 -3
- 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 +7 -6
- 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.css +4 -1
- package/dist/collection/components/radio-group/radio-group.js +100 -8
- package/dist/collection/components/select/select.js +5 -3
- 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 +4 -1
- package/dist/collection/components/stepper/stepper.js +125 -1
- package/dist/collection/components/stepper-item/stepper-item.css +22 -9
- package/dist/collection/components/stepper-item/stepper-item.js +36 -2
- package/dist/collection/components/tab/tab.js +2 -2
- package/dist/collection/components/tab-panel/tab-panel.js +1 -1
- package/dist/collection/components/tabs/tabs.js +1 -1
- package/dist/collection/components/tabs-list/tabs-list.js +3 -3
- package/dist/collection/components/toast/toast.css +9 -9
- package/dist/collection/components/toast/toast.js +109 -21
- package/dist/collection/components/toast-group/toast-group.css +5 -11
- package/dist/collection/components/toast-group/toast-group.js +12 -3
- package/dist/collection/components/tooltip/tooltip.js +23 -3
- package/dist/esm/{index-Da7qOBFr.js → index-CTxpqopm.js} +9 -382
- package/dist/esm/loader.js +3 -3
- 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 +1 -1
- package/dist/esm/r-accordion.entry.js +1 -1
- package/dist/esm/r-alert.entry.js +9 -6
- package/dist/esm/r-badge.entry.js +1 -1
- package/dist/esm/r-button.entry.js +6 -2
- package/dist/esm/r-checkbox-group.entry.js +1 -1
- package/dist/esm/r-checkbox.entry.js +4 -4
- package/dist/esm/r-design-system-devtools.entry.js +1 -1
- package/dist/esm/r-dialog.entry.js +1 -1
- package/dist/esm/r-hint_2.entry.js +3 -3
- package/dist/esm/r-icon-button_2.entry.js +24 -4
- package/dist/esm/r-icon.entry.js +2 -2
- package/dist/esm/r-illustration.entry.js +394 -0
- package/dist/esm/r-input-code.entry.js +34 -12
- package/dist/esm/r-input-date.entry.js +7 -7
- package/dist/esm/r-input-password.entry.js +3 -3
- package/dist/esm/r-input-phone-number.entry.js +4 -4
- package/dist/esm/r-input.entry.js +5 -4
- package/dist/esm/r-list-item.entry.js +1 -1
- package/dist/esm/r-pagination.entry.js +56 -50
- package/dist/esm/r-panel.entry.js +3 -3
- package/dist/esm/r-popover-action.entry.js +2 -2
- package/dist/esm/r-popover-content.entry.js +2 -2
- package/dist/esm/r-popover-headline.entry.js +2 -2
- package/dist/esm/r-popover-trigger.entry.js +2 -2
- package/dist/esm/r-popover.entry.js +46 -5
- package/dist/esm/r-progress-bar.entry.js +2 -2
- package/dist/esm/r-radio-button-description.entry.js +2 -2
- package/dist/esm/r-radio-button-leading.entry.js +2 -2
- package/dist/esm/r-radio-button-title.entry.js +2 -2
- package/dist/esm/r-radio-button-trailing.entry.js +2 -2
- package/dist/esm/r-radio-button.entry.js +8 -7
- package/dist/esm/r-radio-group.entry.js +83 -10
- package/dist/esm/r-select-option.entry.js +2 -2
- package/dist/esm/r-select.entry.js +6 -4
- package/dist/esm/r-skip-link.entry.js +2 -2
- package/dist/esm/r-stepper-item.entry.js +19 -4
- package/dist/esm/r-stepper.entry.js +76 -3
- package/dist/esm/r-tab-panel.entry.js +2 -2
- package/dist/esm/r-tab.entry.js +3 -3
- package/dist/esm/r-tabs-list.entry.js +4 -4
- package/dist/esm/r-tabs.entry.js +2 -2
- package/dist/esm/r-textarea.entry.js +1 -1
- package/dist/esm/r-toast-group.entry.js +13 -4
- package/dist/esm/r-toast.entry.js +87 -18
- package/dist/esm/web-components.js +3 -3
- package/dist/types/components/alert/alert.d.ts +1 -0
- package/dist/types/components/button/button.d.ts +8 -1
- package/dist/types/components/button/exports.d.ts +2 -0
- package/dist/types/components/icon/exports.d.ts +1 -1
- package/dist/types/components/icon/riverty-kit.d.ts +1 -1
- package/dist/types/components/illustration/data.d.ts +52 -0
- package/dist/types/components/illustration/exports.d.ts +23 -0
- package/dist/types/components/illustration/illustration.d.ts +51 -0
- package/dist/types/components/illustration/illustrations-ui-kit.d.ts +21 -0
- package/dist/types/components/input/exports.d.ts +2 -0
- package/dist/types/components/input/input.d.ts +15 -1
- package/dist/types/components/input-code/input-code.d.ts +15 -1
- package/dist/types/components/pagination/pagination.d.ts +19 -0
- package/dist/types/components/popover/popover.d.ts +9 -0
- package/dist/types/components/radio-group/radio-group.d.ts +16 -0
- package/dist/types/components/stepper/stepper.d.ts +11 -0
- package/dist/types/components/stepper-item/stepper-item.d.ts +7 -0
- package/dist/types/components/toast/toast.d.ts +10 -4
- package/dist/types/components/tooltip/tooltip.d.ts +5 -0
- package/dist/types/components.d.ts +273 -7
- package/dist/web-components/p-02b22f8e.entry.js +1 -0
- package/dist/web-components/{p-d054eb4d.entry.js → p-075a8dc8.entry.js} +1 -1
- package/dist/web-components/{p-8a66d20c.entry.js → p-0a34d33b.entry.js} +1 -1
- package/dist/web-components/{p-8c31cbd5.entry.js → p-10cc9983.entry.js} +1 -1
- package/dist/web-components/{p-d7726e46.entry.js → p-253068b9.entry.js} +1 -1
- package/dist/web-components/{p-3884c6e7.entry.js → p-3b8c8951.entry.js} +1 -1
- package/dist/web-components/{p-550e2237.entry.js → p-3beacdab.entry.js} +1 -1
- package/dist/web-components/p-4214867d.entry.js +1 -0
- package/dist/web-components/{p-3f60c6c0.entry.js → p-42c857e9.entry.js} +1 -1
- package/dist/web-components/{p-7fed6f4d.entry.js → p-44f87e16.entry.js} +1 -1
- package/dist/web-components/p-477614c5.entry.js +1 -0
- package/dist/web-components/{p-1da75540.entry.js → p-495ba3d2.entry.js} +1 -1
- package/dist/web-components/{p-19407a14.entry.js → p-4de76291.entry.js} +1 -1
- package/dist/web-components/{p-cd5daad2.entry.js → p-55600d47.entry.js} +1 -1
- package/dist/web-components/{p-c95b6470.entry.js → p-562051aa.entry.js} +1 -1
- package/dist/web-components/p-5b850e0f.entry.js +1 -0
- package/dist/web-components/p-6013dfc8.entry.js +1 -0
- package/dist/web-components/{p-6cc2ea2c.entry.js → p-62e7ae04.entry.js} +1 -1
- package/dist/web-components/p-71519d37.entry.js +1 -0
- package/dist/web-components/p-88f7b47f.entry.js +1 -0
- package/dist/web-components/p-8975a6a3.entry.js +1 -0
- package/dist/web-components/{p-6bb44ec6.entry.js → p-8e125826.entry.js} +1 -1
- package/dist/web-components/p-91cc0bde.entry.js +1 -0
- package/dist/web-components/{p-0347feff.entry.js → p-93435fcd.entry.js} +1 -1
- package/dist/web-components/p-947969d7.entry.js +1 -0
- package/dist/web-components/{p-cdd88c5a.entry.js → p-95396b5c.entry.js} +1 -1
- package/dist/web-components/p-9de3a1a5.entry.js +1 -0
- package/dist/web-components/p-9f583ed1.entry.js +1 -0
- package/dist/web-components/p-CTxpqopm.js +2 -0
- package/dist/web-components/{p-5eeb7002.entry.js → p-a1086abe.entry.js} +1 -1
- package/dist/web-components/{p-f9d5004c.entry.js → p-bbba6d79.entry.js} +1 -1
- package/dist/web-components/{p-c478712b.entry.js → p-bde44ec4.entry.js} +1 -1
- package/dist/web-components/p-bfc7e6c0.entry.js +1 -0
- package/dist/web-components/p-c1030394.entry.js +1 -0
- package/dist/web-components/p-c1f59ed1.entry.js +1 -0
- package/dist/web-components/{p-26ef77d6.entry.js → p-c80a5541.entry.js} +1 -1
- package/dist/web-components/{p-9ef1bbee.entry.js → p-c96ee61a.entry.js} +1 -1
- package/dist/web-components/{p-8dac326b.entry.js → p-caf8f067.entry.js} +1 -1
- package/dist/web-components/p-cc363c3d.entry.js +1 -0
- package/dist/web-components/p-cf4ff357.entry.js +1 -0
- package/dist/web-components/p-d0310ed4.entry.js +1 -0
- package/dist/web-components/p-d1412932.entry.js +1 -0
- package/dist/web-components/{p-62b788bf.entry.js → p-d2447e30.entry.js} +1 -1
- package/dist/web-components/p-dc9cca06.entry.js +1 -0
- package/dist/web-components/p-e5b943a2.entry.js +1 -0
- package/dist/web-components/{p-4cc58c6a.entry.js → p-e67b13df.entry.js} +1 -1
- package/dist/web-components/p-efec231a.entry.js +1 -0
- package/dist/web-components/{p-4595fa8e.entry.js → p-f867e4c3.entry.js} +1 -1
- package/dist/web-components/web-components.esm.js +1 -1
- package/package.json +5 -2
- package/dist/collection/components/icon/bundled-icons/all-kit.json +0 -1
- package/dist/collection/components/icon/bundled-icons/riverty-kit.json +0 -1
- package/dist/web-components/bundled-icons/all-kit.json +0 -1
- package/dist/web-components/bundled-icons/riverty-kit.json +0 -1
- package/dist/web-components/p-159822fe.entry.js +0 -1
- package/dist/web-components/p-4f261b63.entry.js +0 -1
- package/dist/web-components/p-50893211.entry.js +0 -1
- package/dist/web-components/p-589baaf9.entry.js +0 -1
- package/dist/web-components/p-60341de2.entry.js +0 -1
- package/dist/web-components/p-63fd817d.entry.js +0 -1
- package/dist/web-components/p-67fa3f84.entry.js +0 -1
- package/dist/web-components/p-70784685.entry.js +0 -1
- package/dist/web-components/p-7ce57332.entry.js +0 -1
- package/dist/web-components/p-92c7cf33.entry.js +0 -1
- package/dist/web-components/p-Da7qOBFr.js +0 -2
- package/dist/web-components/p-a7d22c76.entry.js +0 -1
- package/dist/web-components/p-b96d59ca.entry.js +0 -1
- package/dist/web-components/p-b98ab649.entry.js +0 -1
- package/dist/web-components/p-ba801820.entry.js +0 -1
- package/dist/web-components/p-bfc8c077.entry.js +0 -1
- package/dist/web-components/p-c05b05da.entry.js +0 -1
- package/dist/web-components/p-c1e748f2.entry.js +0 -1
- package/dist/web-components/p-d433a828.entry.js +0 -1
- package/dist/web-components/p-d819c8e5.entry.js +0 -1
- package/dist/web-components/p-e4dc60f0.entry.js +0 -1
- package/dist/web-components/p-f7adb875.entry.js +0 -1
- package/dist/collection/components/icon/{icon-data.js → data.js} +0 -0
- package/dist/types/components/icon/{icon-data.d.ts → data.d.ts} +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CTxpqopm.js';
|
|
2
2
|
|
|
3
3
|
const popoverTriggerCss = ":host{display:block;cursor:pointer}";
|
|
4
4
|
|
|
@@ -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: '313cccef6d7f463a6088581b2efc3057a97d61b2', slot: "trigger", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("slot", { key: '65ff3ba6c677c693445c0c82feae795a94768cf8' })));
|
|
63
63
|
}
|
|
64
64
|
get host() { return getElement(this); }
|
|
65
65
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CTxpqopm.js';
|
|
2
2
|
|
|
3
|
-
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}";
|
|
3
|
+
const popoverCss = ":host{position:relative;overflow:visible;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}";
|
|
4
4
|
|
|
5
5
|
const Popover = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -68,12 +68,17 @@ const Popover = class {
|
|
|
68
68
|
this.isOpen = false;
|
|
69
69
|
requestAnimationFrame(() => {
|
|
70
70
|
this.setBlur();
|
|
71
|
-
this.triggerElement
|
|
71
|
+
const interactiveElement = this.getInteractiveElement(this.activeElement || this.triggerElement);
|
|
72
|
+
interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.focus();
|
|
72
73
|
});
|
|
73
74
|
};
|
|
74
75
|
this.onClickDismiss = () => {
|
|
75
76
|
this.hide();
|
|
76
77
|
};
|
|
78
|
+
this.updateTriggerAttributes = () => {
|
|
79
|
+
const interactiveElement = this.getInteractiveElement(this.activeElement);
|
|
80
|
+
interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.setAttribute('aria-expanded', `${this.isOpen}`);
|
|
81
|
+
};
|
|
77
82
|
this.onKeyDown = async (event) => {
|
|
78
83
|
if (event.key === 'Tab') {
|
|
79
84
|
event.preventDefault();
|
|
@@ -173,6 +178,7 @@ const Popover = class {
|
|
|
173
178
|
(_h = (_g = this.hidePopover) === null || _g === void 0 ? void 0 : _g.emit) === null || _h === void 0 ? void 0 : _h.call(_g);
|
|
174
179
|
}
|
|
175
180
|
(_k = (_j = this.popoverOpenChange) === null || _j === void 0 ? void 0 : _j.emit) === null || _k === void 0 ? void 0 : _k.call(_j);
|
|
181
|
+
this.updateTriggerAttributes();
|
|
176
182
|
}
|
|
177
183
|
handlePreferredPositionChange() {
|
|
178
184
|
this.renderPosition();
|
|
@@ -202,6 +208,30 @@ const Popover = class {
|
|
|
202
208
|
var _a;
|
|
203
209
|
return (_a = this.boardElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
204
210
|
}
|
|
211
|
+
get activeElement() {
|
|
212
|
+
var _a;
|
|
213
|
+
return (_a = this.host.querySelector('r-popover-trigger')) === null || _a === void 0 ? void 0 : _a.querySelector('r-button, r-icon-button, a, button, [tabindex]:not([tabindex="-1"])');
|
|
214
|
+
}
|
|
215
|
+
get headlineSlotContent() {
|
|
216
|
+
var _a;
|
|
217
|
+
const el = this.host.querySelector('[slot="headline"]');
|
|
218
|
+
return (_a = el === null || el === void 0 ? void 0 : el.textContent) === null || _a === void 0 ? void 0 : _a.trim();
|
|
219
|
+
}
|
|
220
|
+
/**
|
|
221
|
+
* Gets the actual interactive element (button/link) from within r-button or r-icon-button shadow DOM,
|
|
222
|
+
* or returns the element itself if it's already interactive
|
|
223
|
+
*/
|
|
224
|
+
getInteractiveElement(element) {
|
|
225
|
+
if (!element)
|
|
226
|
+
return null;
|
|
227
|
+
if (element.tagName === 'R-BUTTON' || element.tagName === 'R-ICON-BUTTON') {
|
|
228
|
+
const shadowRoot = element.shadowRoot;
|
|
229
|
+
if (shadowRoot) {
|
|
230
|
+
return shadowRoot.querySelector('button, a');
|
|
231
|
+
}
|
|
232
|
+
}
|
|
233
|
+
return element;
|
|
234
|
+
}
|
|
205
235
|
/** Position logic */
|
|
206
236
|
renderPosition() {
|
|
207
237
|
if (!this.triggerRect)
|
|
@@ -284,12 +314,23 @@ const Popover = class {
|
|
|
284
314
|
this.host.setAttribute('data-horizontal', horizontalPosition);
|
|
285
315
|
return this;
|
|
286
316
|
}
|
|
317
|
+
setTriggerInitialAttributes() {
|
|
318
|
+
const interactiveElement = this.getInteractiveElement(this.activeElement);
|
|
319
|
+
interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.setAttribute('aria-haspopup', 'dialog');
|
|
320
|
+
interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.setAttribute('aria-expanded', `${this.isOpen}`);
|
|
321
|
+
}
|
|
287
322
|
componentDidLoad() {
|
|
323
|
+
var _a;
|
|
288
324
|
this.open ? this.show() : this.hide();
|
|
325
|
+
this.setTriggerInitialAttributes();
|
|
326
|
+
(_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => {
|
|
327
|
+
this.toggle();
|
|
328
|
+
});
|
|
289
329
|
}
|
|
290
330
|
render() {
|
|
291
|
-
|
|
292
|
-
|
|
331
|
+
const TAG = !this.activeElement ? 'button' : 'div';
|
|
332
|
+
return (h(Host, { key: 'f836d35a44519d273dc399d0ae6142f17e78888e', id: this.uniqueId, "data-position": this.positionState, "data-open": `${this.isOpen}`, open: this.isOpen }, h("div", { key: '88146350c8695487a18028a20bf1313052b35870', class: "r-popover" }, h(TAG, { key: 'de1a53f1f921acc223ebd0276b46e43832e5a82f', class: "r-popover--trigger", "aria-label": !this.activeElement ? this.triggerAriaLabel : null, ref: el => this.triggerElement = el, "aria-haspopup": "dialog", popoverTarget: !this.activeElement ? `${this.uniqueId}-board` : null, popoverTargetAction: !this.activeElement ? this.triggerAction : null }, h("slot", { key: '2946f68024273f6b7bbb250faca7794eb712cc58', name: "trigger" })), h("div", { key: 'cf44066fb1ec34178d73b812f5bcca3b1977575d', class: "r-popover--board", id: `${this.uniqueId}-board`, role: "dialog", "aria-label": this.headlineSlotContent, popover: this.dismissMode, ref: el => this.boardElement = el, onToggle: this.onToggle, onKeyDown: this.onKeyDown }, this.hasDismiss &&
|
|
333
|
+
h("r-icon-button", { key: '41e3e2bef98b88328984233271e7378a767eaf76', ref: el => this.dismissElement = el, class: "r-popover--dismiss", name: "cross", onClick: this.onClickDismiss, label: this.dismissAriaLabel }), h("div", { key: '9d47e8f5e2cb4d27118b64cfcf3eb83dd7d84ff0', class: "r-popover--board-content" }, h("slot", { key: '68f384a418a32a14b01adb7e3d407e4e46f8ca95', name: "headline" }), h("slot", { key: '3536f9f3aa738919115c1ad017cd0f66438fb044', name: "content" }), h("slot", { key: '4ecbf5d23cb23f9adaade04f3694a6d17f773365', name: "action" })), h("div", { key: '1c3acee058d689e106b9fca008d77229d52b2aea', class: "r-popover--board-pointer", "aria-hidden": "true" }, h("svg", { key: 'bb211b28714acc84753bbaaafee1ab1624d51b6c', width: "16", height: "8", viewBox: "0 0 16 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '0ad29cb4ef8d2d7f62738af3b1749c5b5e007d87', d: "M8 8L0 0L16 0L8 8Z", fill: "currentColor" })))))));
|
|
293
334
|
}
|
|
294
335
|
get host() { return getElement(this); }
|
|
295
336
|
static get watchers() { return {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host } from './index-
|
|
1
|
+
import { r as registerInstance, h, H as Host } from './index-CTxpqopm.js';
|
|
2
2
|
|
|
3
3
|
const progressBarCss = ":host{--r-progress-bar--appearance:none;--r-progress-bar--width:100%;--r-progress-bar--height:8px;--r-progress-bar--background-color:var(--r-background-soft);--r-progress-bar--border-radius:0;--r-progress-bar--border:none;--progress-bar--value--background-color:var(--r-background-interactive-regular);--progress-bar--value--border-radius:0;--progress-bar--value--transition:all 0.6s ease;display:block}.r-progress-bar{appearance:var(--r-progress-bar--appearance);width:var(--r-progress-bar--width);height:var(--r-progress-bar--height);background-color:var(--r-progress-bar--background-color);border-radius:var(--r-progress-bar--border-radius);border:var(--r-progress-bar--border)}.r-progress-bar::-webkit-progress-bar{background-color:var(--r-progress-bar--background-color);border-radius:var(--r-progress-bar--border-radius);border:var(--r-progress-bar--border)}.r-progress-bar::-webkit-progress-value{background-color:var(--progress-bar--value--background-color);border-radius:var(--progress-bar--value--border-radius);transition:var(--progress-bar--value--transition)}.r-progress-bar::-moz-progress-bar{background-color:var(--progress-bar--value--background-color);border-radius:var(--progress-bar--value--border-radius);transition:var(--progress-bar--value--transition)}.r-progress-bar::-ms-fill{background-color:var(--progress-bar--value--background-color);border-radius:var(--progress-bar--value--border-radius);transition:var(--progress-bar--value--transition)}";
|
|
4
4
|
|
|
@@ -15,7 +15,7 @@ const ProgressBar = class {
|
|
|
15
15
|
max: '100',
|
|
16
16
|
'aria-label': rAriaLabel
|
|
17
17
|
};
|
|
18
|
-
return (h(Host, { key: '
|
|
18
|
+
return (h(Host, { key: '8d8307ebac0b8a231569bd86c35175d9f11e14ac' }, h("progress", Object.assign({ key: '631b8ecaaca4fde5c14ddabb74ff076610557832' }, progressBarAttrs, { class: "r-progress-bar" }))));
|
|
19
19
|
}
|
|
20
20
|
};
|
|
21
21
|
ProgressBar.style = progressBarCss;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, h, H as Host, g as getElement } from './index-CTxpqopm.js';
|
|
2
2
|
|
|
3
3
|
const radioButtonDescriptionCss = ":host{font-size:var(--r-font-size-400, 1rem);font-weight:var(--r-font-weight-regular, 400);color:var(--r-text-regular, #282828)}";
|
|
4
4
|
|
|
@@ -7,7 +7,7 @@ const RadioButtonDescription = class {
|
|
|
7
7
|
registerInstance(this, hostRef);
|
|
8
8
|
}
|
|
9
9
|
render() {
|
|
10
|
-
return (h(Host, { key: '
|
|
10
|
+
return (h(Host, { key: '0cc8dafb54d3b65f6c3af977bde4019ac413042d', slot: "description" }, h("div", { key: '7347ec0238fbf3c8471cdcf6fb3cf303a0f9c4e7', class: "r-radio-button-description", style: { display: 'contents' } }, h("slot", { key: '940714dd9b350c10b47486454139506d38fa0366' }))));
|
|
11
11
|
}
|
|
12
12
|
get host() { return getElement(this); }
|
|
13
13
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, h, H as Host, g as getElement } from './index-CTxpqopm.js';
|
|
2
2
|
|
|
3
3
|
const radioButtonLeadingCss = ":host{color:var(--r-icon-soft, #686868)}";
|
|
4
4
|
|
|
@@ -7,7 +7,7 @@ const RadioButtonLeading = class {
|
|
|
7
7
|
registerInstance(this, hostRef);
|
|
8
8
|
}
|
|
9
9
|
render() {
|
|
10
|
-
return (h(Host, { key: '
|
|
10
|
+
return (h(Host, { key: '2f4f3dae827959cebf6a5b5797d8942b6fbbeded', slot: "leading" }, h("div", { key: '6dfda6f9bf0c88056d3d46f095b1f30e615ac5d7', class: "r-radio-button-leading", style: { display: 'contents' } }, h("slot", { key: 'd909c93595d5f43ad3d8b93262134b52fbfde23c' }))));
|
|
11
11
|
}
|
|
12
12
|
get host() { return getElement(this); }
|
|
13
13
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, h, H as Host, g as getElement } from './index-CTxpqopm.js';
|
|
2
2
|
|
|
3
3
|
const radioButtonTitleCss = ":host{font-weight:var(--r-font-weight-semibold, 600);font-size:var(--r-font-size-400, 1rem);line-height:var(--r-line-height-m, 1.5);color:var(--r-text-regular, #282828);text-align:left;cursor:inherit}";
|
|
4
4
|
|
|
@@ -7,7 +7,7 @@ const RadioButtonTitle = class {
|
|
|
7
7
|
registerInstance(this, hostRef);
|
|
8
8
|
}
|
|
9
9
|
render() {
|
|
10
|
-
return (h(Host, { key: '
|
|
10
|
+
return (h(Host, { key: '2d2ae73f63409f55e0d5920c351cfed20d3b69d9', slot: "title" }, h("div", { key: '8f0ed8680798a41ddf827e74b245e43464f51eb0', class: "r-radio-button-title", style: { display: 'contents' } }, h("slot", { key: '336df52466bdad5baa93b1ed6abb192bee958e30' }))));
|
|
11
11
|
}
|
|
12
12
|
get host() { return getElement(this); }
|
|
13
13
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, h, H as Host, g as getElement } from './index-CTxpqopm.js';
|
|
2
2
|
|
|
3
3
|
const radioButtonTrailingCss = ":host{font-weight:var(--r-font-weight-regular, 400);font-size:var(--r-font-size-400, 1rem);text-align:right;color:var(--r-text-regular, #282828)}";
|
|
4
4
|
|
|
@@ -7,7 +7,7 @@ const RadioButtonTrailing = class {
|
|
|
7
7
|
registerInstance(this, hostRef);
|
|
8
8
|
}
|
|
9
9
|
render() {
|
|
10
|
-
return (h(Host, { key: '
|
|
10
|
+
return (h(Host, { key: '628b87d2952aad3e25f8fd6b0b61c6db06a15959', slot: "trailing" }, h("div", { key: '93d2888f3e10e6346fda143ba8d0757d2913a503', class: "r-radio-button-trailing", style: { display: 'contents' } }, h("slot", { key: '5929143a1c1b54e9e3f082dd54c2e1376a80dece' }))));
|
|
11
11
|
}
|
|
12
12
|
get host() { return getElement(this); }
|
|
13
13
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CTxpqopm.js';
|
|
2
2
|
|
|
3
3
|
const radioButtonCss = ":host{display:inline-flex;outline:none;position:relative;pointer-events:auto;border:0.0625rem solid transparent;cursor:pointer;min-width:17.5rem}:host slot{display:contents}:host(:hover:not([disabled]:not([disabled=false])):not([checked]:not([checked=false]))){--r-radio-button--cursor:pointer;--r-radio-button--box--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host(:active:not([disabled]:not([disabled=false])):not([checked]:not([checked=false]))){--r-radio-button--box--border-color:var(--r-border-regular, #282828);--r-radio-button--box--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host(:focus-within),:host(.focused){--r-radio-button--box--box-shadow:0 0 0 4px var(--r-border-focused-outlined, #fff);--r-radio-button--box--outline:2px solid var(--r-border-focused, #0071e3);--r-radio-button--box--outline-offset:1px}:host([checked]:not([checked=false])),:host([checked]:not([checked=false]):hover){cursor:default;--r-radio-button--box--border-color:var(--r-border-regular, #282828);--r-radio-button--box--background-color:var(--r-background-interactive-softest, #fff);--r-radio-button--marker--transform:scale(1)}:host([invalid]:not([invalid=false])),:host([invalid]:not([invalid=false])[checked]:not([checked=false])){--r-radio-button--box--border-color:var(--r-status-error-regular, #b00c15);--r-radio-button--box--background-color:var(--r-status-error-soft, #fef6f6)}:host([disabled]:not([disabled=false])){--r-radio-button--box--opacity:0.4;cursor:not-allowed}.r-radio-button{display:var(--r-radio-button--display, flex);flex:var(--r-radio-button--flex, 1);gap:var(--r-radio-button--gap, var(--r-spacing-075, 0.75rem));position:var(--r-radio-button--position, relative);min-height:var(--r-radio-button--min-height, 24px);user-select:var(--r-radio-button--user-select, none);box-sizing:var(--r-radio-button--box-sizing, border-box);font-family:var(--r-radio-button--font-family, var(--r-font-family-text, system-ui));font-size:var(--r-radio-button--font-size, var(--r-font-size-400, 1rem));line-height:var(--r-radio-button--line-height, var(--r-line-height-m, 1.5rem));text-align:var(--r-radio-button--text-align, left);color:var(--r-radio-button--color, var(--r-text-regular, #282828));opacity:var(--r-radio-button--opacity, 1);box-shadow:var(--r-radio-button--box-shadow, none);outline:var(--r-radio-button--outline, none);cursor:var(--r-radio-button--cursor, inherit);padding:var(--r-radio-button--padding, var(--r-spacing-100, 1rem));margin:var(--r-radio-button--margin, 0);background-color:var(--r-radio-button--background-color, transparent);border-color:var(--r-radio-button--border-color, transparent);border-width:var(--r-radio-button--border-width, 0);border-style:var(--r-radio-button--border-style, solid)}.r-radio-button--input{position:var(--r-radio-button--input--position, absolute);z-index:var(--r-radio-button--input--z-index, -1);opacity:var(--r-radio-button--input--opacity, 0)}.r-radio-button--box{position:var(--r-radio-button--box--position, relative);display:var(--r-radio-button--box--display, block);top:var(--r-radio-button--box--top, 0);left:var(--r-radio-button--box--left, 0);width:var(--r-radio-button--box--width, 1.5rem);height:var(--r-radio-button--box--height, 1.5rem);background-color:var(--r-radio-button--box--background-color, var(--r-background-interactive-softest, #fff));border-width:var(--r-radio-button--box--border-width, 0.0625rem);border-style:var(--r-radio-button--box--border-style, solid);border-color:var(--r-radio-button--box--border-color, var(--r-border-soft, #686868));border-radius:var(--r-radio-button--box--border-radius, 50%);box-sizing:var(--r-radio-button--box--box-sizing, border-box);box-shadow:var(--r-radio-button--box--box-shadow, none);outline:var(--r-radio-button--box--outline, none);outline-offset:var(--r-radio-button--box--outline-offset, 0);cursor:var(--r-radio-button--box--cursor, inherit);opacity:var(--r-radio-button--box--opacity, 1)}.r-radio-button--box::before{content:var(--r-radio-button--marker--content, \"\");display:var(--r-radio-button--marker--display, block);width:var(--r-radio-button--marker--width, 0.75rem);height:var(--r-radio-button--marker--height, 0.75rem);position:var(--r-radio-button--marker--position, absolute);top:var(--r-radio-button--marker--top, calc(50% - 0.375rem));left:var(--r-radio-button--marker--left, calc(50% - 0.375rem));border-radius:var(--r-radio-button--marker--border-radius, 50%);background-color:var(--r-radio-button--marker--background-color, var(--r-background-interactive-regular, #282828));transition:var(--r-radio-button--marker--transition, 0.1s all);transform:var(--r-radio-button--marker--transform, scale(0));transform-origin:var(--r-radio-button--marker--transform-origin, center)}.r-radio-button--text{flex:var(--r-radio-button--text--flex, 1);display:var(--r-radio-button--text--display, flex);flex-direction:var(--r-radio-button--text--flex-direction, column);gap:var(--r-radio-button--text--gap, var(--r-spacing-025, 0.25rem));font-weight:var(--r-radio-button--text--font-weight, var(--r-font-weight-semibold, 600))}.r-radio-button--leading{min-height:var(--r-radio-button--leading--min-height, var(--r-spacing-150, 1.5rem));min-width:var(--r-radio-button--leading--min-width, calc(var(--r-spacing-150, 1.5rem) + 2 * var(--r-spacing-075, 0.75rem)));color:var(--r-radio-button--leading--color, var(--r-icon-soft, #686868));display:var(--r-radio-button--leading--display, flex);justify-content:var(--r-radio-button--leading--justify-content, center);align-items:var(--r-radio-button--leading--align-items, start)}";
|
|
4
4
|
|
|
@@ -70,7 +70,8 @@ const RadioButton = class {
|
|
|
70
70
|
/** Reference to the radio button elements */
|
|
71
71
|
get radioElements() {
|
|
72
72
|
if (this.groupEl) {
|
|
73
|
-
|
|
73
|
+
// Use :scope > to only select direct children, excluding nested radio-group buttons
|
|
74
|
+
return this.groupEl.querySelectorAll(`:scope > r-radio-button`);
|
|
74
75
|
}
|
|
75
76
|
if (this.parentFormEl) {
|
|
76
77
|
return this.parentFormEl.querySelectorAll(`r-radio-button[name=${this.name}]`);
|
|
@@ -123,11 +124,11 @@ const RadioButton = class {
|
|
|
123
124
|
required,
|
|
124
125
|
autofocus
|
|
125
126
|
};
|
|
126
|
-
return (h(Host, { key: '
|
|
127
|
-
h("div", { key: '
|
|
128
|
-
h("div", { key: '
|
|
129
|
-
h("r-hint", { key: '
|
|
130
|
-
h("r-hint", { key: '
|
|
127
|
+
return (h(Host, { key: 'cf6b1b5db202773a2c6eea4df6a9303275054a73' }, h("label", { key: '4e203583a2b779e239c2893eadccc3514f84b0c4', class: "r-radio-button", onClick: this.onClick, onKeyDown: this.onKeydown }, h("input", Object.assign({ key: '14e89b050928abd51b66e8637c39bbd8da8e9856' }, inputAttrs, { id: `${uniqueId}-input`, class: "r-radio-button--input", ref: el => this.nativeEl = el, onFocus: this.onFocus, onBlur: this.onBlur })), h("span", { key: 'ee55afd60c5dbb947e9c12fffc401f7acfcefada', class: "r-radio-button--box" }), this.isLeading &&
|
|
128
|
+
h("div", { key: 'eabd27b399dee0bc2cef0fb7a92adad55095708b', class: "r-radio-button--leading" }, h("slot", { key: '5ec99653141268456cf9c8b2398f70c7b1afd36d', name: "leading" }, this.icon && h("r-icon", { key: '47662e84ad1aac02e867ddd040b5b7e1890ba986', name: this.icon, size: "m" }))), h("div", { key: 'bcaaf67c6cdf95a0bfa0dd5784d69c237e551a0e', class: "r-radio-button--text" }, h("slot", { key: 'a54f1823afe368d85f9bd4743ac0aa1df7298049', name: "title" }, h("div", { key: 'b531b659b920d7f064f10e622b83099d14270935', style: { display: 'contents' } }, h("slot", { key: 'b51f3e83234681804c49cb1043d90de70e4929db' }))), h("slot", { key: 'd217abfd3675898afd5b41a543200f7104019aed', name: "description" }, this.description)), this.isTrailing &&
|
|
129
|
+
h("div", { key: '664ddcc19dba3029343532caa13b05a6e3834977', class: "r-radio-button--trailing" }, h("slot", { key: 'b4ec626236a01c9c74b20ae09194ea414bc7699c', name: "trailing" }))), invalid && error &&
|
|
130
|
+
h("r-hint", { key: 'bd60d4337984662f410613b470b6e3be695343f5', role: "alert", variant: "error", id: `${uniqueId}-hint` }, this.error), hint &&
|
|
131
|
+
h("r-hint", { key: '31c5712fe6f2164219e28484a40ce5452a836743', role: "note", variant: "information", id: `${uniqueId}-hint` }, hint)));
|
|
131
132
|
}
|
|
132
133
|
get host() { return getElement(this); }
|
|
133
134
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-
|
|
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 radioGroupCss = ":host{display:flex;flex-direction:column;box-sizing:border-box;margin-bottom:var(--r-spacing-100)}:host ::slotted(r-radio-button){display:var(--r-radio-group--slotted-radio-button--display, flex)}:host ::slotted(.focused){--r-radio-button--box-shadow:0 0 0 3px var(--r-border-focused-outlined, #fff), inset 0 0 0 1px var(--r-border-focused-outlined, #fff);--r-radio-button--outline:2px solid var(--r-border-focused, #0071e3);--r-radio-button--outline-offset:2px}:host slot{display:contents}:host([variant=contained]) ::slotted(r-radio-button){padding:0;--r-radio-button--padding:var(--r-spacing-100, 1rem);--r-radio-button--border-color:var(--r-border-soft, #686868);--r-radio-button--border-width:1px}:host([invalid]:not([invalid=false])) ::slotted(r-radio-button){--r-radio-button--box--border-color:var(--r-status-error-regular, #b00c15);--r-radio-button--box--background-color:var(--r-status-error-soft, #fef6f6);--r-radio-button--marker--background-color:var(--r-status-error-regular, #b00c15)}:host .r-radio-group{display:var(--r-radio-group--display, flex);flex-direction:var(--r-radio-group--flex-direction, column)}:host .r-radio-group--label-container{display:var(--r-radio-group--label-container--display, flex);gap:var(--r-radio-group--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-radio-group--label-container--align-items, center);justify-content:var(--r-radio-group--label-container--justify-content, space-between)}:host .r-radio-group--label-container ::slotted([slot=popover]){display:var(--r-radio-group--popover--display, inline-flex);height:var(--r-radio-group--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-radio-group--popover--align-items, center);justify-content:var(--r-radio-group--popover--justify-content, center);margin-right:var(--r-radio-group--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-radio-group--popover-trigger--min-width, var(--r-spacing-150, 1.5));--r-popover--trigger--min-height:var(--r-radio-group--popover--trigger--min-height, var(--r-spacing-150, 1.5))}:host .r-radio-group--hint{margin-bottom:var(--r-radio-group--hint--margin-bottom, var(--r-spacing-100, 1rem))}:host .r-radio-group--content{display:var(--r-radio-group--content--display, flex);flex-direction:var(--r-radio-group--content--flex-direction, column);flex-wrap:var(--r-radio-group--content--flex-wrap, nowrap);gap:var(--r-radio-group--content--gap, var(--r-spacing-050, 0.5rem))}:host .r-radio-group
|
|
4
|
+
const radioGroupCss = ":host{display:flex;flex-direction:column;box-sizing:border-box;margin-bottom:var(--r-spacing-100)}:host ::slotted(r-radio-button){display:var(--r-radio-group--slotted-radio-button--display, flex)}:host ::slotted(.focused){--r-radio-button--box-shadow:0 0 0 3px var(--r-border-focused-outlined, #fff), inset 0 0 0 1px var(--r-border-focused-outlined, #fff);--r-radio-button--outline:2px solid var(--r-border-focused, #0071e3);--r-radio-button--outline-offset:2px}:host slot{display:contents}:host([variant=contained]) ::slotted(r-radio-button){padding:0;--r-radio-button--padding:var(--r-spacing-100, 1rem);--r-radio-button--border-color:var(--r-border-soft, #686868);--r-radio-button--border-width:1px}:host([invalid]:not([invalid=false])) ::slotted(r-radio-button){--r-radio-button--box--border-color:var(--r-status-error-regular, #b00c15);--r-radio-button--box--background-color:var(--r-status-error-soft, #fef6f6);--r-radio-button--marker--background-color:var(--r-status-error-regular, #b00c15)}:host .r-radio-group{display:var(--r-radio-group--display, flex);flex-direction:var(--r-radio-group--flex-direction, column);padding:var(--r-radio-group--padding, 0);margin:var(--r-radio-group--margin, 0);border:var(--r-radio-group--border, none)}:host .r-radio-group--label-container{display:var(--r-radio-group--label-container--display, flex);gap:var(--r-radio-group--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-radio-group--label-container--align-items, center);justify-content:var(--r-radio-group--label-container--justify-content, space-between)}:host .r-radio-group--label-container ::slotted([slot=popover]){display:var(--r-radio-group--popover--display, inline-flex);height:var(--r-radio-group--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-radio-group--popover--align-items, center);justify-content:var(--r-radio-group--popover--justify-content, center);margin-right:var(--r-radio-group--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-radio-group--popover-trigger--min-width, var(--r-spacing-150, 1.5));--r-popover--trigger--min-height:var(--r-radio-group--popover--trigger--min-height, var(--r-spacing-150, 1.5))}:host .r-radio-group--hint{margin-bottom:var(--r-radio-group--hint--margin-bottom, var(--r-spacing-100, 1rem))}:host .r-radio-group--content{display:var(--r-radio-group--content--display, flex);flex-direction:var(--r-radio-group--content--flex-direction, column);flex-wrap:var(--r-radio-group--content--flex-wrap, nowrap);gap:var(--r-radio-group--content--gap, var(--r-spacing-050, 0.5rem))}:host .r-radio-group+.r-radio-group--message r-hint{margin-top:var(--r-radio-group--hint--margin-top, var(--r-spacing-050, 0.5rem))}";
|
|
5
5
|
|
|
6
6
|
const RadioGroup = class {
|
|
7
7
|
constructor(hostRef) {
|
|
@@ -78,8 +78,36 @@ const RadioGroup = class {
|
|
|
78
78
|
this.contributeToFormData = (event) => {
|
|
79
79
|
appendControlToFormData(this.host, event.formData);
|
|
80
80
|
};
|
|
81
|
+
/**
|
|
82
|
+
* Handles parent radio group value changes for nested groups.
|
|
83
|
+
* If this is a nested group with a parentValue specified, it will reset when
|
|
84
|
+
* the parent group's value changes to something other than the parentValue.
|
|
85
|
+
*/
|
|
86
|
+
this.onParentGroupChange = (event) => {
|
|
87
|
+
// Only proceed if this group has a parentValue specified (indicating it's nested)
|
|
88
|
+
if (!this.parentValue)
|
|
89
|
+
return;
|
|
90
|
+
const parentNewValue = event.detail.value;
|
|
91
|
+
// If parent changed to a different value than our parentValue, reset this nested group
|
|
92
|
+
if (parentNewValue !== this.parentValue) {
|
|
93
|
+
this.clearValue();
|
|
94
|
+
// Emit rReset event to notify that the nested group was automatically reset
|
|
95
|
+
this.rReset.emit({
|
|
96
|
+
element: this.host,
|
|
97
|
+
value: null
|
|
98
|
+
});
|
|
99
|
+
}
|
|
100
|
+
};
|
|
81
101
|
}
|
|
82
102
|
rChangeAction(event) {
|
|
103
|
+
// Only handle events from direct children, not from nested radio-groups
|
|
104
|
+
const targetElement = event.target;
|
|
105
|
+
const isDirectChild = targetElement.parentElement === this.host;
|
|
106
|
+
if (!isDirectChild) {
|
|
107
|
+
return; // Ignore events from nested radio-groups
|
|
108
|
+
}
|
|
109
|
+
// Stop event from bubbling to parent radio-groups
|
|
110
|
+
event.stopPropagation();
|
|
83
111
|
this.resetValidity();
|
|
84
112
|
this.setValue(event.detail.value);
|
|
85
113
|
}
|
|
@@ -89,6 +117,14 @@ const RadioGroup = class {
|
|
|
89
117
|
* to their initial values.
|
|
90
118
|
*/
|
|
91
119
|
radioButtonClickAction(event) {
|
|
120
|
+
// Only handle events from direct children, not from nested radio-groups
|
|
121
|
+
const targetElement = event.target;
|
|
122
|
+
const isDirectChild = targetElement.parentElement === this.host;
|
|
123
|
+
if (!isDirectChild) {
|
|
124
|
+
return; // Ignore events from nested radio-groups
|
|
125
|
+
}
|
|
126
|
+
// Stop event from bubbling to parent radio-groups
|
|
127
|
+
event.stopPropagation();
|
|
92
128
|
!event.target.disabled && event.target.select();
|
|
93
129
|
}
|
|
94
130
|
get selectedIndex() {
|
|
@@ -100,6 +136,7 @@ const RadioGroup = class {
|
|
|
100
136
|
return isnativeFirstElement || isNoSelected ? this.radioButtonElements.length - 1 : this.selectedIndex - 1;
|
|
101
137
|
}
|
|
102
138
|
get focusedRadioButtonEl() {
|
|
139
|
+
// Query all descendants to find focused element, but it will only be used for direct children
|
|
103
140
|
return this.host.querySelector('r-radio-button.focused');
|
|
104
141
|
}
|
|
105
142
|
get focusedRadioButtonElIndex() {
|
|
@@ -115,6 +152,14 @@ const RadioGroup = class {
|
|
|
115
152
|
}
|
|
116
153
|
radioButtonKeydownAction(event) {
|
|
117
154
|
var _a;
|
|
155
|
+
// Only handle events from direct children, not from nested radio-groups
|
|
156
|
+
const targetElement = event.target;
|
|
157
|
+
const isDirectChild = targetElement.parentElement === this.host;
|
|
158
|
+
if (!isDirectChild) {
|
|
159
|
+
return; // Ignore events from nested radio-groups
|
|
160
|
+
}
|
|
161
|
+
// Stop event from bubbling to parent radio-groups
|
|
162
|
+
event.stopPropagation();
|
|
118
163
|
switch (event.detail.code) {
|
|
119
164
|
case 'ArrowUp':
|
|
120
165
|
case 'ArrowLeft':
|
|
@@ -261,7 +306,8 @@ const RadioGroup = class {
|
|
|
261
306
|
return this.host.closest('form') || document.querySelector(`#${this.form}`) || null;
|
|
262
307
|
}
|
|
263
308
|
get radioButtonElements() {
|
|
264
|
-
|
|
309
|
+
// Use :scope > to only select direct children, excluding nested radio-group buttons
|
|
310
|
+
return this.host.querySelectorAll(':scope > r-radio-button:not([disabled]:not([disabled="false"]))');
|
|
265
311
|
}
|
|
266
312
|
get selectedRadioButtonElement() {
|
|
267
313
|
return Array.from(this.radioButtonElements).find(el => el.checked || el.hasAttribute('checked')) || null;
|
|
@@ -299,6 +345,11 @@ const RadioGroup = class {
|
|
|
299
345
|
const el = this.nativeSelectedEl || this.nativeFirstEl;
|
|
300
346
|
el === null || el === void 0 ? void 0 : el.setAttribute('tabindex', '0');
|
|
301
347
|
}
|
|
348
|
+
get parentRadioGroup() {
|
|
349
|
+
var _a;
|
|
350
|
+
// Find the parent radio group element
|
|
351
|
+
return ((_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.closest('r-radio-group')) || null;
|
|
352
|
+
}
|
|
302
353
|
connectFormEventListeners() {
|
|
303
354
|
var _a, _b, _c;
|
|
304
355
|
(_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.addEventListener('formdata', this.contributeToFormData);
|
|
@@ -311,11 +362,28 @@ const RadioGroup = class {
|
|
|
311
362
|
(_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('reset', this.onResetForm);
|
|
312
363
|
(_c = this.parentFormEl) === null || _c === void 0 ? void 0 : _c.removeEventListener('submit', this.onSubmitForm);
|
|
313
364
|
}
|
|
365
|
+
connectParentGroupListener() {
|
|
366
|
+
// Only connect if this is a nested group (has parentValue specified)
|
|
367
|
+
if (this.parentValue && this.parentRadioGroup) {
|
|
368
|
+
this.parentRadioGroup.addEventListener('rChange', this.onParentGroupChange);
|
|
369
|
+
}
|
|
370
|
+
}
|
|
371
|
+
disconnectParentGroupListener() {
|
|
372
|
+
if (this.parentValue && this.parentRadioGroup) {
|
|
373
|
+
this.parentRadioGroup.removeEventListener('rChange', this.onParentGroupChange);
|
|
374
|
+
}
|
|
375
|
+
}
|
|
376
|
+
get ariaDescribedBy() {
|
|
377
|
+
const messageId = `${this.uniqueId}-message`;
|
|
378
|
+
return this.hint ? `${this.uniqueId}-hint ${messageId}` : messageId;
|
|
379
|
+
}
|
|
314
380
|
connectedCallback() {
|
|
315
381
|
this.connectFormEventListeners();
|
|
382
|
+
this.connectParentGroupListener();
|
|
316
383
|
}
|
|
317
384
|
disconnectedCallback() {
|
|
318
385
|
this.disconnectFormEventListeners();
|
|
386
|
+
this.disconnectParentGroupListener();
|
|
319
387
|
}
|
|
320
388
|
componentWillLoad() {
|
|
321
389
|
const { required, name } = this;
|
|
@@ -330,18 +398,23 @@ const RadioGroup = class {
|
|
|
330
398
|
this.passPropsToGroupItems({ name, required });
|
|
331
399
|
this.setTabindex();
|
|
332
400
|
if (this.autofocus) {
|
|
333
|
-
|
|
401
|
+
// Use setTimeout to ensure setValue has completed and checked state is synced
|
|
402
|
+
setTimeout(() => {
|
|
334
403
|
this.setFocus();
|
|
335
|
-
});
|
|
404
|
+
}, 0);
|
|
336
405
|
}
|
|
337
406
|
}
|
|
338
407
|
render() {
|
|
339
408
|
const { label, hint, fieldIndicator, error, uniqueId, invalid } = this;
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
409
|
+
const fieldsetAttrs = {
|
|
410
|
+
'aria-invalid': `${invalid || false}`,
|
|
411
|
+
'aria-describedby': this.ariaDescribedBy
|
|
412
|
+
};
|
|
413
|
+
return (h(Host, { key: 'bd1b1d42f3efab78cf0a2cce7b1a1e2568f21765' }, h("fieldset", Object.assign({ key: 'c449667b014cf8aeea4176b0d94c82573b661182', class: "r-radio-group" }, fieldsetAttrs, { onClick: this.onLabelClick }), label &&
|
|
414
|
+
h("legend", { key: '212e27fd8d20b31cf6d84078870ec59796bb59c6', class: "r-radio-group--label-container" }, h("r-label", { key: '69907b0e2bdb49bcdea00d1849bc0c5c4d3404ae', id: `${uniqueId}-label`, class: "r-radio-group--label", "field-indicator": fieldIndicator }, label), h("slot", { key: 'd208c147248154ba26ecc5b412233d2cf479bb68', name: "popover" })), hint &&
|
|
415
|
+
h("r-hint", { key: 'b409e053226d88ac3619524b2d63864b49972985', id: `${uniqueId}-hint`, class: "r-radio-group--hint", role: "note" }, hint), h("div", { key: 'c8e98214e9b14f6fdcf97677b392abd14d653a56', class: "r-radio-group--content" }, h("slot", { key: '5e4aa07801e8f1bd7ec3262511d28f553d8740a7' })), h("div", { key: 'a576e8c91d33877eb677d5551ac18d10924586fd', id: `${uniqueId}-message`, "aria-live": "polite", role: "alert", class: "r-radio-group--message" }, invalid && error &&
|
|
416
|
+
h("r-hint", { key: '98f7fa6855c0803ae5d31a3a248c146679204af9', variant: "error" }, error), this.validityState !== 'valid' && this.validityMessage &&
|
|
417
|
+
h("r-hint", { key: 'de1997af842a7e5fdb887a830fd0fe701e4fa5ce', variant: "error" }, this.customErrorMessage || this.validityMessage)))));
|
|
345
418
|
}
|
|
346
419
|
get host() { return getElement(this); }
|
|
347
420
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CTxpqopm.js';
|
|
2
2
|
|
|
3
3
|
const selectOptionCss = ":host(:hover){--r-select-option--background-color:var(--r-background-interactive-hovered)}:host(:not([aria-disabled=true]):focus){outline:var(--outline, none);--r-select-option--background-color:var(--r-background-interactive-hovered);--r-select-option--border-color:var(--r-background-interactive-softest);--r-select-option--box-shadow:inset 0px 0px 0px 1px var(--r-border-focused-outlined, #fff), inset 0 0 0 3px var(--r-border-focused, #0071e3), inset 0 0 0 4px var(--r-border-focused-outlined, #fff);--r-select-option--outline:2px solid var(--r-border-focused, #0071e3);--r-select-option--outline-offset:-4px;--r-select-option--z-index:1}:host([data-focused=true]){outline:var(--outline, none);--r-select-option--background-color:var(--r-background-interactive-hovered);--r-select-option--border-color:var(--r-background-interactive-softest);--r-select-option--box-shadow:inset 0px 0px 0px 1px var(--r-border-focused-outlined, #fff), inset 0 0 0 3px var(--r-border-focused, #0071e3), inset 0 0 0 4px var(--r-border-focused-outlined, #fff);--r-select-option--outline:2px solid var(--r-border-focused, #0071e3);--r-select-option--outline-offset:-4px}:host(:not([aria-disabled=true]):active){--r-select-option--background-color:var(--r-background-interactive-pressed)}:host([aria-disabled=true]),:host([aria-disabled=true]:hover),:host([aria-disabled=true]:focus){--r-select-option--opacity:0.4;--r-select-option--background-color:transparent}:host([aria-selected=true]){--r-select-option--font-weight:600;--r-select-option--background-color:var(--r-background-interactive-hovered)}:host([aria-hidden=true]){--r-select-option--display:none}:host([icon-position=end]){--r-select-option--flex-direction:row-reverse;--r-select-option--icon--margin-left:0.75em;--r-select-option--icon--margin-right:0}.r-select-option{box-sizing:var(--r-select-option--box-sizing);position:var(--r-select-option--position);display:var(--r-select-option--display, flex);flex-direction:var(--r-select-option--flex-direction, row);min-height:var(--r-select-option--min-height, 1.125em);width:var(--r-select-option--width, auto);font-size:var(--r-select-option--font-size, 1rem);line-height:var(--r-select-option--line-height, 1.2);font-weight:var(--r-select-option--font-weight, normal);padding-top:var(--r-select-option--padding-top, 0.75em);padding-right:var(--r-select-option--padding-right, 0.75em);padding-bottom:var(--r-select-option--padding-bottom, 0.75em);padding-left:var(--r-select-option--padding-left, 0.75em);align-items:var(--r-select-option--align-items, center);color:var(--r-select-option--color, inherit);background-color:var(--r-select-option--background-color, rgba(0, 0, 0, 0));border-color:var(--r-select-option--border-color, rgba(0, 0, 0, 0));border-radius:var(--r-select-option--border-radius, 0);border-width:var(--r-select-option--border-width, 1px);border-style:var(--r-select-option--border-style, solid);box-shadow:var(--r-select-option--box-shadow, none);outline:var(--r-select-option--outline, none);outline-offset:var(--r-select-option--outline-offset, 0);transform:var(--r-select-option--transform, none);z-index:var(--r-select-option--z-index, 0);opacity:var(--r-select-option--opacity, 1)}.r-select-option--icon{display:var(--r-select-option--icon--display, inline-flex);align-items:var(--r-select-option--icon--align-items, center);justify-content:var(--r-select-option--icon--justify-content, center);margin-top:var(--r-select-option--icon--margin-top, 0.05em);margin-left:var(--r-select-option--icon--margin-left, 0);margin-right:var(--r-select-option--icon--margin-right, 0.75em)}.r-select-option--icon svg{display:var(--r-select-option--icon--svg--display, inline-flex)}.r-select-option--label{max-width:var(--r-select-option--label--max-width, 100%);text-overflow:var(--r-select-option--label--text-overflow, ellipsis);white-space:var(--r-select-option--label--white-space, normal)}";
|
|
4
4
|
|
|
@@ -119,7 +119,7 @@ const SelectOption = class {
|
|
|
119
119
|
size: iconSize,
|
|
120
120
|
color: iconColor
|
|
121
121
|
};
|
|
122
|
-
return (h(Host, { key: '
|
|
122
|
+
return (h(Host, { key: 'd75c7a753d325360d4bee79ef7b96fbedd2d9b96', 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}` }, h("div", { key: '8d8d449a5352f90d7731df10ea011856537b02f4', class: "r-select-option" }, icon && h("span", { key: 'f74192805472c8023b921f0a2869772f4c007d78', class: "r-select-option--icon" }, h("r-icon", Object.assign({ key: '6ac112921c222e83df33b2cf0113f3b158a98407' }, iconAttributes))), !icon && hasIconSlot && h("span", { key: '8c5779ab3446a8d4b8880bf1f9958f02d32ca5e4', class: "r-select-option--icon" }, h("slot", { key: '05647b1a0f7fb6f3c996461a825d8d60bb966b50', name: "icon" })), h("span", { key: 'a4de330d788288995da81cd7cbe7a9f8e9ba44c0', class: "r-select-option--label" }, h("slot", { key: '2cb6ac3d005a3bf9b75b0c23d27cbf1930bc15cc' })))));
|
|
123
123
|
}
|
|
124
124
|
get host() { return getElement(this); }
|
|
125
125
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-
|
|
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
|
import { S as StyleObserver } from './style-observer-4Uv3PpKT.js';
|
|
4
4
|
|
|
@@ -446,7 +446,9 @@ const Select = class {
|
|
|
446
446
|
if (!this.isExpanded)
|
|
447
447
|
return;
|
|
448
448
|
e.stopPropagation();
|
|
449
|
-
|
|
449
|
+
const path = e.composedPath ? e.composedPath() : [];
|
|
450
|
+
const isInsideSelect = path.includes(this.host);
|
|
451
|
+
if (!isInsideSelect) {
|
|
450
452
|
this.collapse();
|
|
451
453
|
this.reportValidity();
|
|
452
454
|
}
|
|
@@ -1081,8 +1083,8 @@ const Select = class {
|
|
|
1081
1083
|
disabled,
|
|
1082
1084
|
required: isRequired
|
|
1083
1085
|
};
|
|
1084
|
-
return (h(Host, { key: '
|
|
1085
|
-
h("r-hint", { key: '
|
|
1086
|
+
return (h(Host, { key: 'f52fa96bdacace6070cd2baa15f8fab939d05916', "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}` }, h("div", { key: '80326d43674f8caac11678ca4d5a6ca8178f9454', class: `r-select--label ${!internal ? 'r-select--label__margin-bottom' : ''}` }, h("div", { key: '25fa25960350a338c7c9156d38c974c0ad8a0861', class: internal ? 'visually-hidden' : 'r-select--label-container' }, h("label", { key: 'b52ac4d91e32df39459492bbeaf166d2a71d165c', id: `${uniqueId}-label`, onClick: this.isInteractive ? this.onValueClick : null }, h("r-label", Object.assign({ key: 'ac75955086f424e781baf66e6853cbc89ec20d56' }, labelAttr), label)), h("slot", { key: '4cd953da5c64a473070ce4b8a3e5721a36561685', name: "popover" })), hint &&
|
|
1087
|
+
h("r-hint", { key: '2d6a2e9eae51d56f31886725274c637e76ab4d75', id: `${uniqueId}-hint`, class: "r-select--hint" }, hint)), h("div", { key: '8107a1d2475d11d6e827d7394ade84f9c4c85ea5', class: "r-select" }, h("select", Object.assign({ key: 'd7a60a4ff2f8f568da1ea90d859d5de78a1e73ef', class: "r-select--native", ref: el => this.nativeElement = el }, nativeAttrs)), h("div", { key: '9d49470c7e4cc179dfd93cb1233e2bbf86ac7641', class: "r-select--container" }, this.combobox ? this.renderCombobox(comboboxAttrs) : this.renderSelect(comboboxAttrs), h("div", Object.assign({ key: '9594f3439c7591a4e4ef359a205a55d1c56dbb80', 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)) && h("r-select-option", { key: 'ae0ef701ff3e7db4c17aba7d57265122c3bf6587', "data-no-results": "true", value: "no_results" }, this.noResultsFound), h("slot", { key: '012fcee55283c7bc5a3230ff23b692eca33d853b', onSlotchange: this.handleSlotChange })))), h("div", { key: '94fc769d8eeb0bd92f1d12d553b033a3de9ad8dc', 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 && h("r-hint", { key: '881e60130bd3cbc9004aacbb027911357286a516', variant: this.invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && this.validityMessage))));
|
|
1086
1088
|
}
|
|
1087
1089
|
get host() { return getElement(this); }
|
|
1088
1090
|
static get watchers() { return {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host } from './index-
|
|
1
|
+
import { r as registerInstance, h, H as Host } from './index-CTxpqopm.js';
|
|
2
2
|
|
|
3
3
|
const skipLinkCss = ":host{display:inline-block;position:absolute;z-index:99999}:host:has(:not(:focus-within)){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host:has(:focus-within){top:var(--r-spacing-100);padding:var(--r-spacing-100);border:1px solid var(--r-border-regular);background:var(--r-background-softest);left:var(--r-skip-link--left, 50%);transform:var(--r-skip-link--transform, translateX(-50%))}:host([position=left]){--r-skip-link--left:var(--r-spacing-100);--r-skip-link--transform:none}::slotted(*:not(:focus-within)){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";
|
|
4
4
|
|
|
@@ -9,7 +9,7 @@ const SkipLink = class {
|
|
|
9
9
|
this.position = 'center';
|
|
10
10
|
}
|
|
11
11
|
render() {
|
|
12
|
-
return (h(Host, { key: '
|
|
12
|
+
return (h(Host, { key: '08280b6003ccf78bf96eba9778fd3ddcaebc8947' }, h("slot", { key: '7808e8156601912e0192fe0b74bdedda2c359e1c' })));
|
|
13
13
|
}
|
|
14
14
|
};
|
|
15
15
|
SkipLink.style = skipLinkCss;
|