@riverty/web-components 6.0.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 +44 -0
- package/custom-elements.json +259 -2
- 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 +27 -7
- 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 +8 -5
- package/dist/cjs/r-list-item.cjs.entry.js +17 -16
- package/dist/cjs/r-pagination.cjs.entry.js +56 -50
- package/dist/cjs/r-panel.cjs.entry.js +6 -6
- 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 +7 -3
- package/dist/cjs/r-tabs-list.cjs.entry.js +161 -3
- package/dist/cjs/r-tabs.cjs.entry.js +35 -7
- package/dist/cjs/r-textarea.cjs.entry.js +2 -2
- package/dist/cjs/r-toast-group.cjs.entry.js +13 -4
- package/dist/cjs/r-toast.cjs.entry.js +104 -15
- package/dist/cjs/web-components.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/alert/alert.css +6 -6
- 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/icon-button/icon-button.js +22 -3
- 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 +3 -0
- package/dist/collection/components/input/input.css +3 -0
- package/dist/collection/components/input/input.js +100 -3
- package/dist/collection/components/input-code/exports.js +2 -2
- package/dist/collection/components/input-code/input-code.css +6 -0
- package/dist/collection/components/input-code/input-code.js +54 -16
- 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/list-item/list-item/list-item.css +46 -12
- package/dist/collection/components/list-item/list-item/list-item.js +34 -14
- package/dist/collection/components/pagination/pagination.css +33 -72
- package/dist/collection/components/pagination/pagination.js +194 -48
- package/dist/collection/components/panel/panel.css +40 -17
- package/dist/collection/components/panel/panel.js +6 -6
- 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 +5 -2
- package/dist/collection/components/stepper/stepper.js +125 -1
- package/dist/collection/components/stepper-item/stepper-item.css +25 -12
- package/dist/collection/components/stepper-item/stepper-item.js +36 -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/toast/toast.css +37 -11
- package/dist/collection/components/toast/toast.js +140 -18
- 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 +24 -4
- 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 +27 -7
- 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 +8 -5
- package/dist/esm/r-list-item.entry.js +17 -16
- package/dist/esm/r-pagination.entry.js +56 -50
- package/dist/esm/r-panel.entry.js +6 -6
- 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 +7 -3
- package/dist/esm/r-tabs-list.entry.js +161 -3
- package/dist/esm/r-tabs.entry.js +35 -7
- package/dist/esm/r-textarea.entry.js +2 -2
- package/dist/esm/r-toast-group.entry.js +13 -4
- package/dist/esm/r-toast.entry.js +104 -15
- 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/{icon-data.d.ts → data.d.ts} +2 -1
- package/dist/types/components/icon/exports.d.ts +2 -1
- package/dist/types/components/icon/riverty-kit.d.ts +2 -1
- package/dist/types/components/icon-button/icon-button.d.ts +4 -0
- 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 +6 -0
- package/dist/types/components/input/input.d.ts +31 -1
- package/dist/types/components/input-code/exports.d.ts +4 -4
- package/dist/types/components/input-code/input-code.d.ts +18 -4
- package/dist/types/components/list-item/list-item/list-item.d.ts +5 -3
- 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/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/toast/toast.d.ts +20 -3
- package/dist/types/components/tooltip/tooltip.d.ts +5 -0
- package/dist/types/components.d.ts +360 -17
- 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-e2188953.entry.js → p-4214867d.entry.js} +1 -1
- 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-4de76291.entry.js +1 -0
- package/dist/web-components/{p-05738503.entry.js → p-55600d47.entry.js} +1 -1
- package/dist/web-components/p-562051aa.entry.js +1 -0
- 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-8e125826.entry.js +1 -0
- 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-95396b5c.entry.js +1 -0
- 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-e5945c01.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-0e4c8bf1.entry.js +0 -1
- package/dist/web-components/p-3a5a67e7.entry.js +0 -1
- package/dist/web-components/p-4254a383.entry.js +0 -1
- package/dist/web-components/p-5441b746.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-60ca994e.entry.js +0 -1
- package/dist/web-components/p-6303b9fe.entry.js +0 -1
- package/dist/web-components/p-63fd817d.entry.js +0 -1
- package/dist/web-components/p-673dbfd0.entry.js +0 -1
- package/dist/web-components/p-67fa3f84.entry.js +0 -1
- package/dist/web-components/p-6a4f3836.entry.js +0 -1
- package/dist/web-components/p-70784685.entry.js +0 -1
- package/dist/web-components/p-8b4d2448.entry.js +0 -1
- package/dist/web-components/p-Da7qOBFr.js +0 -2
- package/dist/web-components/p-a0dbde7c.entry.js +0 -1
- package/dist/web-components/p-a71485d8.entry.js +0 -1
- package/dist/web-components/p-a7d22c76.entry.js +0 -1
- package/dist/web-components/p-ae251d2f.entry.js +0 -1
- package/dist/web-components/p-b98ab649.entry.js +0 -1
- package/dist/web-components/p-b9e3b3d6.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-f7adb875.entry.js +0 -1
- /package/dist/collection/components/icon/{icon-data.js → data.js} +0 -0
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BnETQtSf.js');
|
|
4
4
|
|
|
5
|
-
const paginationCss = ":host{--r-pagination--display:flex;--r-pagination--list-style:none;--r-pagination--align-items:center;--r-pagination--justify-content:center;--r-pagination--font-family:var(--r-font-family-text);--r-pagination--margin:0 auto;--r-pagination--flex-direction:column;--r-pagination--width:100%;--r-pagination--max-width:664px;--r-pagination--margin:0 auto;--r-pagination--
|
|
5
|
+
const paginationCss = ":host{--r-pagination--display:flex;--r-pagination--list-style:none;--r-pagination--align-items:center;--r-pagination--justify-content:center;--r-pagination--font-family:var(--r-font-family-text);--r-pagination--margin:0 auto;--r-pagination--flex-direction:column;--r-pagination--width:100%;--r-pagination--max-width:664px;--r-pagination--margin:0 auto;--r-pagination--items-list--display:flex;--r-paginaition--items-list--justify-content:center;--r-paginaition--items-list--align-items:center;--r-paginaition--items-list--list-style-type:none;--r-paginaition--items-list--padding:0;--r-paginaition--items-list--margin:0;--r-pagination--item--width:var(--r-spacing-300, 3rem);--r-pagination--item--height:var(--r-spacing-300, 3rem);--r-pagination--item--border-radius:0;--r-pagination--button--border-width:0;--r-pagination--button--padding:0;--r-pagination--header--display:flex;--r-pagination--header--align-items:center;--r-pagination--header--justify-content:space-between;--r-pagination--header--min-width:287px;--r-pagination--footer--display:flex;--r-pagination--footer--justify-content:center;--r-pagination--footer--width:100%;--r-pagination--item--disabled-text:none;--r-pagination--font-size:var(--r-font-size-200);display:block}:host([variant=minimized]){--r-pagination--max-width:440px}:host([variant=standard]){--r-pagination--max-width:560px}:host([variant=maximized]){--r-pagination--max-width:664px}.r-pagination r-select{--r-select--font-size:var(--r-pagination--font-size, 12px);--r-select-option--font-size:var(--r-pagination--font-size, 12px)}.r-pagination{align-items:var(--r-pagination--align-items);display:var(--r-pagination--display);flex-direction:var(--r-pagination--flex-direction);font-family:var(--r-pagination--font-family);font-size:var(--r-pagination--font-size);justify-content:var(--r-pagination--justify-content);list-style:var(--r-pagination--list-style);margin:var(--r-pagination--margin);max-width:var(--r-pagination--max-width);user-select:var(--r-pagination--item--disabled-text);width:var(--r-pagination--width)}.r-pagination--footer{align-items:var(--r-pagination--header--align-items);display:var(--r-pagination--footer--display);justify-content:var(--r-pagination--footer--justify-content)}.r-pagination--header{align-items:var(--r-pagination--header--align-items);display:var(--r-pagination--header--display);justify-content:var(--r-pagination--header--justify-content);font-family:var(--r-pagination--font-family);min-width:var(--r-pagination--header--min-width)}.r-pagination--header--select{min-width:auto;--width:unset !important}.r-pagination--header label{font-size:var(--r-pagination--font-size)}.r-pagination--items-list{display:var(--r-pagination--items-list--display);justify-content:var(--r-paginaition--items-list--justify-content);align-items:var(--r-paginaition--items-list--align-items);list-style-type:var(--r-paginaition--items-list--list-style-type);padding:var(--r-paginaition--items-list--padding);margin:var(--r-paginaition--items-list--margin)}.r-pagination--item.active{--r-button--color:var(--r-text-regular);--r-button--background-color:var(--r-background-interactive-activated);font-weight:var(--r-font-weight-semibold)}.r-pagination--item.number{--r-button--font-size:0.813rem}.r-pagination--item{--r-icon-button--height:var(--r-pagination--item--height);--r-icon-button--width:var(--r-pagination--item--width);--r-icon-button--border-radius:var(--r-pagination--item--border-radius);--r-button--width:var(--r-pagination--item--width);--r-button--height:var(--r-pagination--item--height);--r-button--border-width:var(--r-pagination--button--border-width);--r-button--padding:var(--r-pagination--button--padding)}.visually-hidden{position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}";
|
|
6
6
|
|
|
7
7
|
const RPagination = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -36,6 +36,20 @@ const RPagination = class {
|
|
|
36
36
|
this.selectText = 'page';
|
|
37
37
|
/** Position of the list box */
|
|
38
38
|
this.listBoxPosition = 'top';
|
|
39
|
+
/** Label for Previous Page button. Important to ensure accessibility for screen reader users. */
|
|
40
|
+
this.previousPageButtonLabel = 'Go to the previous page';
|
|
41
|
+
/** Label for Next Page button. Important to ensure accessibility for screen reader users.*/
|
|
42
|
+
this.nextPageButtonLabel = 'Go to the next page';
|
|
43
|
+
/** Label for First Page button. Important to ensure accessibility for screen reader users.*/
|
|
44
|
+
this.firstPageButtonLabel = 'Go to the first page';
|
|
45
|
+
/** Label for Last Page button. Important to ensure accessibility for screen reader users.*/
|
|
46
|
+
this.lastPageButtonLabel = 'Go to the last page';
|
|
47
|
+
/** Label for Page number buttons. Important to ensure accessibility for screen reader users.*/
|
|
48
|
+
this.pageLabel = 'Page';
|
|
49
|
+
/** Label for Ellipsis stepper. Important to ensure accessibility for screen reader users.*/
|
|
50
|
+
this.ellipsisLabel = 'Ellipsis indicating skipped pages';
|
|
51
|
+
/** Label for Items per page select. */
|
|
52
|
+
this.itemsPerPageLabel = 'Items per page';
|
|
39
53
|
this.resizeObserver = null;
|
|
40
54
|
this.handleItemsPerPageChange = (event) => {
|
|
41
55
|
const newItemsPerPage = parseInt(event.detail.value, 10);
|
|
@@ -60,28 +74,17 @@ const RPagination = class {
|
|
|
60
74
|
});
|
|
61
75
|
};
|
|
62
76
|
this.handleItemChange = e => {
|
|
63
|
-
const
|
|
64
|
-
const isEnter = e.code === 'Enter';
|
|
65
|
-
const isSpace = e.code === 'Space';
|
|
66
|
-
if (isKeyup && !isEnter && !isSpace)
|
|
67
|
-
return;
|
|
68
|
-
const buttonElement = e.target.closest('r-button');
|
|
69
|
-
if (buttonElement === null)
|
|
70
|
-
return;
|
|
77
|
+
const buttonElement = e.target.closest('r-icon-button') || e.target.closest('r-button');
|
|
71
78
|
const index = Number(buttonElement.getAttribute('data-index'));
|
|
72
79
|
if (index === null)
|
|
73
80
|
return;
|
|
74
81
|
this._activateStep(index);
|
|
75
82
|
requestAnimationFrame(() => {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
if (newActiveButton) {
|
|
79
|
-
newActiveButton.focus(); // Ensure focus is set correctly
|
|
80
|
-
}
|
|
83
|
+
const focusTarget = this.getFocusTargetAfterNavigation(buttonElement);
|
|
84
|
+
focusTarget === null || focusTarget === void 0 ? void 0 : focusTarget.setFocus();
|
|
81
85
|
});
|
|
82
86
|
if (buttonElement.classList.contains('number')) {
|
|
83
87
|
this.rNumberClick.emit(this.paginationState);
|
|
84
|
-
buttonElement.blur();
|
|
85
88
|
}
|
|
86
89
|
if (buttonElement.classList.contains('arrow')) {
|
|
87
90
|
const direction = buttonElement.classList.contains('next') ? 'next' : 'previous';
|
|
@@ -160,6 +163,35 @@ const RPagination = class {
|
|
|
160
163
|
// Emit updated pagination state
|
|
161
164
|
this.rChange.emit(this.paginationState);
|
|
162
165
|
}
|
|
166
|
+
/**
|
|
167
|
+
* Determines the appropriate focus target after navigation based on button states.
|
|
168
|
+
* Handles edge cases where navigation buttons become disabled.
|
|
169
|
+
*/
|
|
170
|
+
getFocusTargetAfterNavigation(buttonElement) {
|
|
171
|
+
var _a, _b, _c, _d, _e;
|
|
172
|
+
const isArrowButton = buttonElement.classList.contains('arrow');
|
|
173
|
+
const isNextButton = buttonElement.classList.contains('next');
|
|
174
|
+
const isPrevButton = buttonElement.classList.contains('previous');
|
|
175
|
+
const isFirstButton = buttonElement.classList.contains('first');
|
|
176
|
+
const isLastButton = buttonElement.classList.contains('last');
|
|
177
|
+
const willNextBeDisabled = this.next === null;
|
|
178
|
+
const willPrevBeDisabled = this.previous === null;
|
|
179
|
+
const willLastBeDisabled = this.active === this.total;
|
|
180
|
+
const willFirstBeDisabled = this.first === null;
|
|
181
|
+
if (isNextButton && willNextBeDisabled) {
|
|
182
|
+
return (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.r-pagination--item.number[data-index="${this.total}"]`);
|
|
183
|
+
}
|
|
184
|
+
if (isPrevButton && willPrevBeDisabled) {
|
|
185
|
+
return (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(`.r-pagination--item.number[data-index="1"]`);
|
|
186
|
+
}
|
|
187
|
+
if (isLastButton && willLastBeDisabled) {
|
|
188
|
+
return (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector(`.r-pagination--item.number[data-index="${this.total}"]`);
|
|
189
|
+
}
|
|
190
|
+
if (isFirstButton && willFirstBeDisabled) {
|
|
191
|
+
return (_d = this.el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.r-pagination--item.number[data-index="1"]');
|
|
192
|
+
}
|
|
193
|
+
return isArrowButton ? buttonElement : (_e = this.el.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector(`.r-pagination--item[data-index="${this.pageActive}"]`);
|
|
194
|
+
}
|
|
163
195
|
componentWillLoad() {
|
|
164
196
|
this.setPaginationState();
|
|
165
197
|
}
|
|
@@ -178,13 +210,13 @@ const RPagination = class {
|
|
|
178
210
|
const { active, previous, next, first, itemsPerPage, itemsPerPageOptions, startText, middleText, endText, selectText, listBoxPosition } = this;
|
|
179
211
|
const itemTemplate = (type, index$1) => {
|
|
180
212
|
if (type === 'number') {
|
|
181
|
-
return (index.h("r-button", { class: "r-pagination--item number", "data-index": index$1,
|
|
213
|
+
return (index.h("li", null, index.h("r-button", { class: "r-pagination--item number", "data-index": index$1, variant: "secondary", onRClick: this.handleItemChange }, index.h("span", { class: "visually-hidden" }, this.pageLabel), " ", index$1)));
|
|
182
214
|
}
|
|
183
215
|
if (type === 'active') {
|
|
184
|
-
return (index.h("
|
|
216
|
+
return (index.h("li", null, index.h("r-button", { "data-index": index$1, class: "r-pagination--item number active", rAriaCurrent: "page" }, index.h("span", { class: "visually-hidden" }, this.pageLabel), " ", index$1)));
|
|
185
217
|
}
|
|
186
218
|
if (type === 'stepper') {
|
|
187
|
-
return (index.h("
|
|
219
|
+
return (index.h("li", { "aria-label": this.ellipsisLabel, class: "r-pagination--item stepper" }, "..."));
|
|
188
220
|
}
|
|
189
221
|
};
|
|
190
222
|
const renderNumbers = () => {
|
|
@@ -200,7 +232,7 @@ const RPagination = class {
|
|
|
200
232
|
};
|
|
201
233
|
// Case: total pages are less than or equal to maxVisiblePages
|
|
202
234
|
if (totalPages <= maxVisiblePages) {
|
|
203
|
-
return index.h(
|
|
235
|
+
return index.h("ul", { class: "r-pagination--items-list" }, [...Array(totalPages).keys()].map(_createItem));
|
|
204
236
|
}
|
|
205
237
|
// Always add startEdge
|
|
206
238
|
items.push(itemTemplate(active === startEdge ? 'active' : 'number', startEdge));
|
|
@@ -259,47 +291,21 @@ const RPagination = class {
|
|
|
259
291
|
}
|
|
260
292
|
}
|
|
261
293
|
}
|
|
262
|
-
return index.h(
|
|
294
|
+
return index.h("ul", { class: "r-pagination--items-list" }, items);
|
|
263
295
|
};
|
|
264
296
|
const renderHeader = () => {
|
|
265
297
|
const startItem = Math.min((active - 1) * itemsPerPage + 1, this.totalResults);
|
|
266
298
|
const endItem = Math.min(active * itemsPerPage, this.totalResults);
|
|
267
|
-
return (index.h(index.Fragment, null, index.h("div", { ref: el => (this.headerRef = el), class: "r-pagination--header" }, index.h("div", { class: "results-info", "aria-live": "polite" }, startText ? startText : 'Showing', " ", startItem, "\u2013", endItem, " ", middleText ? middleText : 'of', " ", this.totalResults, " ", endText ? endText : 'results'), index.h("div", null, index.h("r-select", { class: "r-pagination--header--select", value: this.itemsPerPage.toString(), id: "items-per-page", onRChange: this.handleItemsPerPageChange, label:
|
|
268
|
-
};
|
|
269
|
-
const getTagName = isNoPage => isNoPage ? 'div' : 'r-button';
|
|
270
|
-
const PrevTagName = getTagName(this.isNoPreviousPage);
|
|
271
|
-
const NextTagName = getTagName(this.isNoNextPage);
|
|
272
|
-
const FirstTagName = getTagName(this.isNotFirstPage);
|
|
273
|
-
const LastTagName = getTagName(this.isNotLastPage);
|
|
274
|
-
const prevArrowAttrs = {
|
|
275
|
-
class: `r-pagination--item arrow previous ${this.isNoPreviousPage ? 'disabled' : ''}`,
|
|
276
|
-
'data-index': previous,
|
|
277
|
-
'aria-label': `${PrevTagName === 'r-button' ? 'Previous Page' : ''}`
|
|
278
|
-
};
|
|
279
|
-
const nextArrowAttrs = {
|
|
280
|
-
class: `r-pagination--item arrow next ${this.isNoNextPage ? 'disabled' : ''}`,
|
|
281
|
-
'data-index': next,
|
|
282
|
-
'aria-label': `${NextTagName === 'r-button' ? 'Next Page' : ''}`
|
|
283
|
-
};
|
|
284
|
-
const firstArrowAttrs = {
|
|
285
|
-
class: `r-pagination--item arrow first ${first === null ? 'disabled' : ''}`,
|
|
286
|
-
'data-index': first,
|
|
287
|
-
'aria-label': `${first === null ? '' : 'First Page'}`
|
|
299
|
+
return (index.h(index.Fragment, null, index.h("div", { ref: el => (this.headerRef = el), class: "r-pagination--header" }, index.h("div", { class: "results-info", "aria-live": "polite" }, startText ? startText : 'Showing', " ", startItem, "\u2013", endItem, " ", middleText ? middleText : 'of', " ", this.totalResults, " ", endText ? endText : 'results'), index.h("div", null, index.h("r-select", { class: "r-pagination--header--select", value: this.itemsPerPage.toString(), id: "items-per-page", onRChange: this.handleItemsPerPageChange, label: this.itemsPerPageLabel, "listbox-position": listBoxPosition }, itemsPerPageOptions.map(option => (index.h("r-select-option", { value: option.toString() }, option, "/", selectText ? selectText : 'page'))))))));
|
|
288
300
|
};
|
|
289
301
|
const isLastPage = active === this.total;
|
|
290
|
-
const lastArrowAttrs = {
|
|
291
|
-
class: `r-pagination--item arrow last ${isLastPage ? 'disabled' : ''}`,
|
|
292
|
-
'data-index': isLastPage ? null : this.total,
|
|
293
|
-
'aria-label': isLastPage ? '' : 'Last Page',
|
|
294
|
-
tabindex: isLastPage ? '-1' : '0' // Make unfocusable when disabled
|
|
295
|
-
};
|
|
296
302
|
const renderList = () => {
|
|
297
303
|
if (this.variant === 'minimized') {
|
|
298
304
|
return (index.h(index.Fragment, null, index.h("div", { ref: el => (this.footerRef = el), class: "r-pagination--footer" }, renderNumbers())));
|
|
299
305
|
}
|
|
300
|
-
return (index.h(index.Fragment, null, index.h("div", { ref: el => (this.footerRef = el), class: "r-pagination--footer" }, this.variant === 'maximized' && (index.h(
|
|
306
|
+
return (index.h(index.Fragment, null, index.h("div", { ref: el => (this.footerRef = el), class: "r-pagination--footer" }, this.variant === 'maximized' && (index.h("r-icon-button", { "data-index": first, name: "angle-left-with-vertical-line", size: "s", disabled: this.isNotFirstPage, label: this.firstPageButtonLabel, class: "r-pagination--item arrow first", onRClick: this.handleItemChange })), index.h("r-icon-button", { "data-index": previous, name: "angle-left", size: "s", disabled: this.isNoPreviousPage, label: this.previousPageButtonLabel, class: "r-pagination--item arrow previous", onRClick: this.handleItemChange }), renderNumbers(), index.h("r-icon-button", { "data-index": next, name: "angle-right", size: "s", disabled: this.isNoNextPage, label: this.nextPageButtonLabel, class: "r-pagination--item arrow next", onRClick: this.handleItemChange }), this.variant === 'maximized' && (index.h("r-icon-button", { "data-index": this.total, name: "angle-right-with-vertical-line", size: "s", disabled: isLastPage, label: this.lastPageButtonLabel, class: "r-pagination--item arrow last", onRClick: this.handleItemChange })))));
|
|
301
307
|
};
|
|
302
|
-
return (index.h(index.Host,
|
|
308
|
+
return (index.h(index.Host, { role: "navigation" }, index.h("div", { class: "r-pagination" }, this.resultsLine && renderHeader(), renderList())));
|
|
303
309
|
}
|
|
304
310
|
get el() { return index.getElement(this); }
|
|
305
311
|
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BnETQtSf.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: '0404a2c3acbba8414d7baffc8c0f861e512fe7cb', role: "navigation", collapsed: this.isCollapsed }, index.h("div", { key: 'b93d1555f060793b7137fd6aac0de2a1a1f35436', class: "r-panel" }, index.h("div", { key: 'b7dd2dee4c145a21a5a963750e8b26ab2d8b9bbe', class: "r-panel--header" }, this.hasHeader && (index.h("a", { key: 'dbb02cd6271fba2a5d4a783a20d5e6d9e34ee734', 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: 'bb3d86b7a4b0890709d4a4637eca033ddaec24a6', class: "r-panel--body" }, index.h("slot", { key: '201aa3f616d3d239fc7b0edc23565a6618304ce5' })), this.hasFooter && !this.isCollapsed && (index.h("div", { key: 'a15f34fbb86ad8b16c6d036b885c7c8b13655fc6', class: "r-panel--footer" }, index.h("slot", { key: '41de73edf832d3a5ca93e4f9a79a62780fdcd68b', name: "footer" }))))));
|
|
175
175
|
}
|
|
176
176
|
get host() { return index.getElement(this); }
|
|
177
177
|
static get watchers() { return {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BnETQtSf.js');
|
|
4
4
|
var theming = require('./theming-NqxjhVJS.js');
|
|
5
5
|
var focusable = require('./focusable-Oll_rmtP.js');
|
|
6
6
|
require('./style-observer-D9zSP9wP.js');
|
|
@@ -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: '8e0de158033b48c66aa49930911e1f383c2010ae', slot: "action" }, index.h("slot", { key: 'b9c762d2c1774600a29306559253125abc21cbcd', onSlotchange: this.handleSlotChange })));
|
|
75
75
|
}
|
|
76
76
|
get host() { return index.getElement(this); }
|
|
77
77
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BnETQtSf.js');
|
|
4
4
|
var theming = require('./theming-NqxjhVJS.js');
|
|
5
5
|
var focusable = require('./focusable-Oll_rmtP.js');
|
|
6
6
|
require('./style-observer-D9zSP9wP.js');
|
|
@@ -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: 'f05a31b3948094f5f7ca657f4bd81474af2fcb6e', slot: "content", class: "r-typography" }, index.h("slot", { key: '0ecbe8de6c0ec200499aead61fc883804c4c4dd7' })));
|
|
57
57
|
}
|
|
58
58
|
get host() { return index.getElement(this); }
|
|
59
59
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BnETQtSf.js');
|
|
4
4
|
var theming = require('./theming-NqxjhVJS.js');
|
|
5
5
|
require('./style-observer-D9zSP9wP.js');
|
|
6
6
|
|
|
@@ -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: '21f1656241f40201d5eb98cfb454d9c509f6cfe1', slot: "headline" }, index.h("slot", { key: 'fa9861bd13bcb23b420c5b5aa085ba6ceecb3df4' })));
|
|
23
23
|
}
|
|
24
24
|
get host() { return index.getElement(this); }
|
|
25
25
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BnETQtSf.js');
|
|
4
4
|
|
|
5
5
|
const popoverTriggerCss = ":host{display:block;cursor:pointer}";
|
|
6
6
|
|
|
@@ -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: '313cccef6d7f463a6088581b2efc3057a97d61b2', slot: "trigger", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, index.h("slot", { key: '65ff3ba6c677c693445c0c82feae795a94768cf8' })));
|
|
65
65
|
}
|
|
66
66
|
get host() { return index.getElement(this); }
|
|
67
67
|
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BnETQtSf.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([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}";
|
|
5
|
+
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}";
|
|
6
6
|
|
|
7
7
|
const Popover = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -70,12 +70,17 @@ const Popover = class {
|
|
|
70
70
|
this.isOpen = false;
|
|
71
71
|
requestAnimationFrame(() => {
|
|
72
72
|
this.setBlur();
|
|
73
|
-
this.triggerElement
|
|
73
|
+
const interactiveElement = this.getInteractiveElement(this.activeElement || this.triggerElement);
|
|
74
|
+
interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.focus();
|
|
74
75
|
});
|
|
75
76
|
};
|
|
76
77
|
this.onClickDismiss = () => {
|
|
77
78
|
this.hide();
|
|
78
79
|
};
|
|
80
|
+
this.updateTriggerAttributes = () => {
|
|
81
|
+
const interactiveElement = this.getInteractiveElement(this.activeElement);
|
|
82
|
+
interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.setAttribute('aria-expanded', `${this.isOpen}`);
|
|
83
|
+
};
|
|
79
84
|
this.onKeyDown = async (event) => {
|
|
80
85
|
if (event.key === 'Tab') {
|
|
81
86
|
event.preventDefault();
|
|
@@ -175,6 +180,7 @@ const Popover = class {
|
|
|
175
180
|
(_h = (_g = this.hidePopover) === null || _g === void 0 ? void 0 : _g.emit) === null || _h === void 0 ? void 0 : _h.call(_g);
|
|
176
181
|
}
|
|
177
182
|
(_k = (_j = this.popoverOpenChange) === null || _j === void 0 ? void 0 : _j.emit) === null || _k === void 0 ? void 0 : _k.call(_j);
|
|
183
|
+
this.updateTriggerAttributes();
|
|
178
184
|
}
|
|
179
185
|
handlePreferredPositionChange() {
|
|
180
186
|
this.renderPosition();
|
|
@@ -204,6 +210,30 @@ const Popover = class {
|
|
|
204
210
|
var _a;
|
|
205
211
|
return (_a = this.boardElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
206
212
|
}
|
|
213
|
+
get activeElement() {
|
|
214
|
+
var _a;
|
|
215
|
+
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"])');
|
|
216
|
+
}
|
|
217
|
+
get headlineSlotContent() {
|
|
218
|
+
var _a;
|
|
219
|
+
const el = this.host.querySelector('[slot="headline"]');
|
|
220
|
+
return (_a = el === null || el === void 0 ? void 0 : el.textContent) === null || _a === void 0 ? void 0 : _a.trim();
|
|
221
|
+
}
|
|
222
|
+
/**
|
|
223
|
+
* Gets the actual interactive element (button/link) from within r-button or r-icon-button shadow DOM,
|
|
224
|
+
* or returns the element itself if it's already interactive
|
|
225
|
+
*/
|
|
226
|
+
getInteractiveElement(element) {
|
|
227
|
+
if (!element)
|
|
228
|
+
return null;
|
|
229
|
+
if (element.tagName === 'R-BUTTON' || element.tagName === 'R-ICON-BUTTON') {
|
|
230
|
+
const shadowRoot = element.shadowRoot;
|
|
231
|
+
if (shadowRoot) {
|
|
232
|
+
return shadowRoot.querySelector('button, a');
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
return element;
|
|
236
|
+
}
|
|
207
237
|
/** Position logic */
|
|
208
238
|
renderPosition() {
|
|
209
239
|
if (!this.triggerRect)
|
|
@@ -286,12 +316,23 @@ const Popover = class {
|
|
|
286
316
|
this.host.setAttribute('data-horizontal', horizontalPosition);
|
|
287
317
|
return this;
|
|
288
318
|
}
|
|
319
|
+
setTriggerInitialAttributes() {
|
|
320
|
+
const interactiveElement = this.getInteractiveElement(this.activeElement);
|
|
321
|
+
interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.setAttribute('aria-haspopup', 'dialog');
|
|
322
|
+
interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.setAttribute('aria-expanded', `${this.isOpen}`);
|
|
323
|
+
}
|
|
289
324
|
componentDidLoad() {
|
|
325
|
+
var _a;
|
|
290
326
|
this.open ? this.show() : this.hide();
|
|
327
|
+
this.setTriggerInitialAttributes();
|
|
328
|
+
(_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => {
|
|
329
|
+
this.toggle();
|
|
330
|
+
});
|
|
291
331
|
}
|
|
292
332
|
render() {
|
|
293
|
-
|
|
294
|
-
|
|
333
|
+
const TAG = !this.activeElement ? 'button' : 'div';
|
|
334
|
+
return (index.h(index.Host, { key: 'f836d35a44519d273dc399d0ae6142f17e78888e', id: this.uniqueId, "data-position": this.positionState, "data-open": `${this.isOpen}`, open: this.isOpen }, index.h("div", { key: '88146350c8695487a18028a20bf1313052b35870', class: "r-popover" }, index.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 }, index.h("slot", { key: '2946f68024273f6b7bbb250faca7794eb712cc58', name: "trigger" })), index.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 &&
|
|
335
|
+
index.h("r-icon-button", { key: '41e3e2bef98b88328984233271e7378a767eaf76', ref: el => this.dismissElement = el, class: "r-popover--dismiss", name: "cross", onClick: this.onClickDismiss, label: this.dismissAriaLabel }), index.h("div", { key: '9d47e8f5e2cb4d27118b64cfcf3eb83dd7d84ff0', class: "r-popover--board-content" }, index.h("slot", { key: '68f384a418a32a14b01adb7e3d407e4e46f8ca95', name: "headline" }), index.h("slot", { key: '3536f9f3aa738919115c1ad017cd0f66438fb044', name: "content" }), index.h("slot", { key: '4ecbf5d23cb23f9adaade04f3694a6d17f773365', name: "action" })), index.h("div", { key: '1c3acee058d689e106b9fca008d77229d52b2aea', class: "r-popover--board-pointer", "aria-hidden": "true" }, index.h("svg", { key: 'bb211b28714acc84753bbaaafee1ab1624d51b6c', width: "16", height: "8", viewBox: "0 0 16 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '0ad29cb4ef8d2d7f62738af3b1749c5b5e007d87', d: "M8 8L0 0L16 0L8 8Z", fill: "currentColor" })))))));
|
|
295
336
|
}
|
|
296
337
|
get host() { return index.getElement(this); }
|
|
297
338
|
static get watchers() { return {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BnETQtSf.js');
|
|
4
4
|
|
|
5
5
|
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)}";
|
|
6
6
|
|
|
@@ -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: '8d8307ebac0b8a231569bd86c35175d9f11e14ac' }, index.h("progress", Object.assign({ key: '631b8ecaaca4fde5c14ddabb74ff076610557832' }, progressBarAttrs, { class: "r-progress-bar" }))));
|
|
21
21
|
}
|
|
22
22
|
};
|
|
23
23
|
ProgressBar.style = progressBarCss;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BnETQtSf.js');
|
|
4
4
|
|
|
5
5
|
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)}";
|
|
6
6
|
|
|
@@ -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: '0cc8dafb54d3b65f6c3af977bde4019ac413042d', slot: "description" }, index.h("div", { key: '7347ec0238fbf3c8471cdcf6fb3cf303a0f9c4e7', class: "r-radio-button-description", style: { display: 'contents' } }, index.h("slot", { key: '940714dd9b350c10b47486454139506d38fa0366' }))));
|
|
13
13
|
}
|
|
14
14
|
get host() { return index.getElement(this); }
|
|
15
15
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BnETQtSf.js');
|
|
4
4
|
|
|
5
5
|
const radioButtonLeadingCss = ":host{color:var(--r-icon-soft, #686868)}";
|
|
6
6
|
|
|
@@ -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: '2f4f3dae827959cebf6a5b5797d8942b6fbbeded', slot: "leading" }, index.h("div", { key: '6dfda6f9bf0c88056d3d46f095b1f30e615ac5d7', class: "r-radio-button-leading", style: { display: 'contents' } }, index.h("slot", { key: 'd909c93595d5f43ad3d8b93262134b52fbfde23c' }))));
|
|
13
13
|
}
|
|
14
14
|
get host() { return index.getElement(this); }
|
|
15
15
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BnETQtSf.js');
|
|
4
4
|
|
|
5
5
|
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}";
|
|
6
6
|
|
|
@@ -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: '2d2ae73f63409f55e0d5920c351cfed20d3b69d9', slot: "title" }, index.h("div", { key: '8f0ed8680798a41ddf827e74b245e43464f51eb0', class: "r-radio-button-title", style: { display: 'contents' } }, index.h("slot", { key: '336df52466bdad5baa93b1ed6abb192bee958e30' }))));
|
|
13
13
|
}
|
|
14
14
|
get host() { return index.getElement(this); }
|
|
15
15
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BnETQtSf.js');
|
|
4
4
|
|
|
5
5
|
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)}";
|
|
6
6
|
|
|
@@ -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: '628b87d2952aad3e25f8fd6b0b61c6db06a15959', slot: "trailing" }, index.h("div", { key: '93d2888f3e10e6346fda143ba8d0757d2913a503', class: "r-radio-button-trailing", style: { display: 'contents' } }, index.h("slot", { key: '5929143a1c1b54e9e3f082dd54c2e1376a80dece' }))));
|
|
13
13
|
}
|
|
14
14
|
get host() { return index.getElement(this); }
|
|
15
15
|
};
|