@riverty/web-components 5.7.0 → 6.0.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 +128 -0
- package/custom-elements.json +152 -372
- package/dist/cjs/index-DJ4H_bFj.js +6 -10
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/r-accordion-panel.cjs.entry.js +1 -1
- package/dist/cjs/r-accordion-section.cjs.entry.js +1 -1
- package/dist/cjs/r-accordion-trigger.cjs.entry.js +5 -35
- package/dist/cjs/r-accordion.cjs.entry.js +3 -7
- package/dist/cjs/r-alert.cjs.entry.js +45 -14
- package/dist/cjs/r-badge.cjs.entry.js +1 -1
- package/dist/cjs/r-button.cjs.entry.js +2 -2
- package/dist/cjs/r-checkbox-group.cjs.entry.js +28 -24
- package/dist/cjs/r-checkbox.cjs.entry.js +97 -81
- package/dist/cjs/r-dialog.cjs.entry.js +3 -11
- package/dist/cjs/r-hint_2.cjs.entry.js +50 -0
- package/dist/cjs/{r-hint_3.cjs.entry.js → r-icon-button_2.cjs.entry.js} +64 -51
- package/dist/cjs/r-icon.cjs.entry.js +1 -1
- package/dist/cjs/r-input-code.cjs.entry.js +133 -25
- package/dist/cjs/r-input-date.cjs.entry.js +87 -23
- package/dist/cjs/r-input-password.cjs.entry.js +34 -13
- package/dist/cjs/r-input-phone-number.cjs.entry.js +30 -22
- package/dist/cjs/r-input.cjs.entry.js +108 -49
- package/dist/cjs/r-list-item.cjs.entry.js +5 -5
- package/dist/cjs/r-pagination.cjs.entry.js +1 -1
- package/dist/cjs/r-panel.cjs.entry.js +2 -2
- package/dist/cjs/r-popover-action.cjs.entry.js +2 -2
- package/dist/cjs/r-popover-content.cjs.entry.js +1 -1
- package/dist/cjs/r-popover-headline.cjs.entry.js +1 -1
- package/dist/cjs/r-popover-trigger.cjs.entry.js +1 -1
- package/dist/cjs/r-popover.cjs.entry.js +3 -3
- package/dist/cjs/r-progress-bar.cjs.entry.js +1 -1
- package/dist/cjs/r-radio-button-description.cjs.entry.js +1 -1
- package/dist/cjs/r-radio-button-leading.cjs.entry.js +1 -1
- package/dist/cjs/r-radio-button-title.cjs.entry.js +1 -1
- package/dist/cjs/r-radio-button-trailing.cjs.entry.js +1 -1
- package/dist/cjs/r-radio-button.cjs.entry.js +29 -12
- package/dist/cjs/r-radio-group.cjs.entry.js +32 -32
- package/dist/cjs/r-select-option.cjs.entry.js +1 -1
- package/dist/cjs/r-select.cjs.entry.js +116 -40
- package/dist/cjs/r-skip-link.cjs.entry.js +1 -1
- package/dist/cjs/r-stepper-item.cjs.entry.js +2 -2
- package/dist/cjs/r-stepper.cjs.entry.js +1 -1
- package/dist/cjs/r-tab-panel.cjs.entry.js +1 -1
- package/dist/cjs/r-tab.cjs.entry.js +1 -1
- package/dist/cjs/r-tabs-list.cjs.entry.js +1 -1
- package/dist/cjs/r-tabs.cjs.entry.js +1 -1
- package/dist/cjs/r-textarea.cjs.entry.js +24 -23
- package/dist/cjs/r-toast-group.cjs.entry.js +1 -1
- package/dist/cjs/r-toast.cjs.entry.js +51 -20
- package/dist/cjs/web-components.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +0 -1
- package/dist/collection/components/accordion/accordion.css +0 -2
- package/dist/collection/components/accordion/accordion.js +4 -8
- package/dist/collection/components/accordion/exports.js +1 -1
- package/dist/collection/components/accordion-panel/accordion-panel.js +1 -1
- package/dist/collection/components/accordion-section/accordion-section.js +1 -1
- package/dist/collection/components/accordion-trigger/accordion-trigger.css +0 -4
- package/dist/collection/components/accordion-trigger/accordion-trigger.js +4 -215
- package/dist/collection/components/alert/alert.css +58 -12
- package/dist/collection/components/alert/alert.js +92 -17
- package/dist/collection/components/alert/exports.js +1 -1
- package/dist/collection/components/badge/badge.js +1 -1
- package/dist/collection/components/button/button.css +6 -7
- package/dist/collection/components/button/button.js +1 -1
- package/dist/collection/components/checkbox/checkbox.js +121 -104
- package/dist/collection/components/checkbox-group/checkbox-group.js +48 -63
- package/dist/collection/components/dialog/dialog.css +1 -3
- package/dist/collection/components/dialog/dialog.js +2 -10
- package/dist/collection/components/hint/hint.js +2 -2
- package/dist/collection/components/icon/bundled-icons/riverty-kit.json +1 -1
- package/dist/collection/components/icon/riverty-kit.js +1 -1
- package/dist/collection/components/icon-button/icon-button.css +0 -7
- package/dist/collection/components/icon-button/icon-button.js +3 -3
- package/dist/collection/components/input/input.css +3 -0
- package/dist/collection/components/input/input.js +221 -378
- package/dist/collection/components/input-code/exports.js +2 -0
- package/dist/collection/components/input-code/input-code.js +335 -34
- package/dist/collection/components/input-date/input-date.js +237 -87
- package/dist/collection/components/input-password/exports.js +1 -0
- package/dist/collection/components/input-password/input-password.css +1 -0
- package/dist/collection/components/input-password/input-password.js +233 -75
- package/dist/collection/components/input-phone-number/input-phone-number.js +50 -85
- package/dist/collection/components/label/label.js +3 -113
- package/dist/collection/components/list-item/list-item/list-item.css +7 -7
- package/dist/collection/components/list-item/list-item/list-item.js +4 -26
- package/dist/collection/components/pagination/pagination.css +23 -23
- package/dist/collection/components/panel/panel.js +2 -2
- package/dist/collection/components/popover/exports.js +0 -1
- package/dist/collection/components/popover/popover.css +13 -13
- package/dist/collection/components/popover/popover.js +2 -55
- package/dist/collection/components/popover-action/popover-action.css +3 -5
- package/dist/collection/components/popover-action/popover-action.js +1 -1
- package/dist/collection/components/popover-content/popover-content.js +1 -1
- package/dist/collection/components/popover-headline/popover-headline.js +1 -1
- package/dist/collection/components/popover-trigger/popover-trigger.js +1 -1
- package/dist/collection/components/progress-bar/progress-bar.js +1 -1
- package/dist/collection/components/radio-button/radio-button.js +49 -12
- package/dist/collection/components/radio-button-description/radio-button-description.js +1 -1
- package/dist/collection/components/radio-button-leading/radio-button-leading.js +1 -1
- package/dist/collection/components/radio-button-title/radio-button-title.js +1 -1
- package/dist/collection/components/radio-button-trailing/radio-button-trailing.js +1 -1
- package/dist/collection/components/radio-group/radio-group.js +53 -135
- package/dist/collection/components/select/select.js +197 -349
- package/dist/collection/components/select-option/select-option.js +1 -1
- package/dist/collection/components/skip-link/skip-link.js +1 -1
- package/dist/collection/components/stepper/stepper.js +1 -1
- package/dist/collection/components/stepper-item/stepper-item.js +2 -2
- package/dist/collection/components/tab/tab.js +1 -1
- package/dist/collection/components/tab-panel/tab-panel.js +1 -1
- package/dist/collection/components/tabs/tabs.js +1 -1
- package/dist/collection/components/tabs-list/tabs-list.js +1 -1
- package/dist/collection/components/textarea/textarea.js +44 -163
- package/dist/collection/components/toast/toast.css +22 -14
- package/dist/collection/components/toast/toast.js +95 -43
- package/dist/collection/components/toast-group/toast-group.js +1 -1
- package/dist/collection/components/tooltip/tooltip.js +1 -1
- package/dist/esm/index-Da7qOBFr.js +6 -10
- package/dist/esm/loader.js +1 -1
- package/dist/esm/r-accordion-panel.entry.js +1 -1
- package/dist/esm/r-accordion-section.entry.js +1 -1
- package/dist/esm/r-accordion-trigger.entry.js +5 -35
- package/dist/esm/r-accordion.entry.js +3 -7
- package/dist/esm/r-alert.entry.js +45 -14
- package/dist/esm/r-badge.entry.js +1 -1
- package/dist/esm/r-button.entry.js +2 -2
- package/dist/esm/r-checkbox-group.entry.js +28 -24
- package/dist/esm/r-checkbox.entry.js +97 -81
- package/dist/esm/r-dialog.entry.js +3 -11
- package/dist/esm/r-hint_2.entry.js +47 -0
- package/dist/esm/{r-hint_3.entry.js → r-icon-button_2.entry.js} +65 -51
- package/dist/esm/r-icon.entry.js +1 -1
- package/dist/esm/r-input-code.entry.js +133 -25
- package/dist/esm/r-input-date.entry.js +87 -23
- package/dist/esm/r-input-password.entry.js +34 -13
- package/dist/esm/r-input-phone-number.entry.js +30 -22
- package/dist/esm/r-input.entry.js +108 -49
- package/dist/esm/r-list-item.entry.js +5 -5
- package/dist/esm/r-pagination.entry.js +1 -1
- package/dist/esm/r-panel.entry.js +2 -2
- package/dist/esm/r-popover-action.entry.js +2 -2
- package/dist/esm/r-popover-content.entry.js +1 -1
- package/dist/esm/r-popover-headline.entry.js +1 -1
- package/dist/esm/r-popover-trigger.entry.js +1 -1
- package/dist/esm/r-popover.entry.js +3 -3
- package/dist/esm/r-progress-bar.entry.js +1 -1
- package/dist/esm/r-radio-button-description.entry.js +1 -1
- package/dist/esm/r-radio-button-leading.entry.js +1 -1
- package/dist/esm/r-radio-button-title.entry.js +1 -1
- package/dist/esm/r-radio-button-trailing.entry.js +1 -1
- package/dist/esm/r-radio-button.entry.js +29 -12
- package/dist/esm/r-radio-group.entry.js +32 -32
- package/dist/esm/r-select-option.entry.js +1 -1
- package/dist/esm/r-select.entry.js +116 -40
- package/dist/esm/r-skip-link.entry.js +1 -1
- package/dist/esm/r-stepper-item.entry.js +2 -2
- package/dist/esm/r-stepper.entry.js +1 -1
- package/dist/esm/r-tab-panel.entry.js +1 -1
- package/dist/esm/r-tab.entry.js +1 -1
- package/dist/esm/r-tabs-list.entry.js +1 -1
- package/dist/esm/r-tabs.entry.js +1 -1
- package/dist/esm/r-textarea.entry.js +24 -23
- package/dist/esm/r-toast-group.entry.js +1 -1
- package/dist/esm/r-toast.entry.js +51 -20
- package/dist/esm/web-components.js +1 -1
- package/dist/types/components/accordion/accordion.d.ts +1 -5
- package/dist/types/components/accordion/exports.d.ts +1 -1
- package/dist/types/components/accordion-trigger/accordion-trigger.d.ts +0 -36
- package/dist/types/components/alert/alert.d.ts +9 -1
- package/dist/types/components/alert/exports.d.ts +1 -1
- package/dist/types/components/checkbox/checkbox.d.ts +29 -34
- package/dist/types/components/checkbox-group/checkbox-group.d.ts +6 -11
- package/dist/types/components/dialog/dialog.d.ts +0 -2
- package/dist/types/components/input/input.d.ts +35 -72
- package/dist/types/components/input-code/exports.d.ts +4 -0
- package/dist/types/components/input-code/input-code.d.ts +54 -7
- package/dist/types/components/input-date/input-date.d.ts +30 -16
- package/dist/types/components/input-password/exports.d.ts +1 -0
- package/dist/types/components/input-password/input-password.d.ts +53 -16
- package/dist/types/components/input-phone-number/input-phone-number.d.ts +5 -16
- package/dist/types/components/label/label.d.ts +0 -18
- package/dist/types/components/list-item/list-item/list-item.d.ts +0 -6
- package/dist/types/components/popover/exports.d.ts +0 -2
- package/dist/types/components/popover/popover.d.ts +1 -14
- package/dist/types/components/radio-button/radio-button.d.ts +5 -0
- package/dist/types/components/radio-group/radio-group.d.ts +6 -28
- package/dist/types/components/select/select.d.ts +34 -52
- package/dist/types/components/textarea/textarea.d.ts +5 -32
- package/dist/types/components/toast/toast.d.ts +10 -7
- package/dist/types/components.d.ts +347 -647
- package/dist/web-components/bundled-icons/riverty-kit.json +1 -1
- package/dist/web-components/p-0347feff.entry.js +1 -0
- package/dist/web-components/p-05738503.entry.js +1 -0
- package/dist/web-components/p-0e4c8bf1.entry.js +1 -0
- package/dist/web-components/p-1da75540.entry.js +1 -0
- package/dist/web-components/p-26ef77d6.entry.js +1 -0
- package/dist/web-components/p-3884c6e7.entry.js +1 -0
- package/dist/web-components/p-3a5a67e7.entry.js +1 -0
- package/dist/web-components/p-3f60c6c0.entry.js +1 -0
- package/dist/web-components/p-4254a383.entry.js +1 -0
- package/dist/web-components/{p-87f39749.entry.js → p-4595fa8e.entry.js} +1 -1
- package/dist/web-components/{p-4e3df002.entry.js → p-4cc58c6a.entry.js} +1 -1
- package/dist/web-components/p-5441b746.entry.js +1 -0
- package/dist/web-components/{p-72fa1fd1.entry.js → p-550e2237.entry.js} +1 -1
- package/dist/web-components/p-589baaf9.entry.js +1 -0
- package/dist/web-components/p-60341de2.entry.js +1 -0
- package/dist/web-components/{p-4bd3e077.entry.js → p-60ca994e.entry.js} +1 -1
- package/dist/web-components/{p-44ae9f33.entry.js → p-62b788bf.entry.js} +1 -1
- package/dist/web-components/{p-2b2f581a.entry.js → p-6303b9fe.entry.js} +1 -1
- package/dist/web-components/p-63fd817d.entry.js +1 -0
- package/dist/web-components/{p-e0e2f2b2.entry.js → p-673dbfd0.entry.js} +1 -1
- package/dist/web-components/p-67fa3f84.entry.js +1 -0
- package/dist/web-components/p-6a4f3836.entry.js +1 -0
- package/dist/web-components/p-6cc2ea2c.entry.js +1 -0
- package/dist/web-components/p-70784685.entry.js +1 -0
- package/dist/web-components/{p-429213ea.entry.js → p-7fed6f4d.entry.js} +1 -1
- package/dist/web-components/p-8a66d20c.entry.js +1 -0
- package/dist/web-components/{p-0bb04d79.entry.js → p-8b4d2448.entry.js} +1 -1
- package/dist/web-components/{p-c7f8e59b.entry.js → p-8c31cbd5.entry.js} +1 -1
- package/dist/web-components/p-8dac326b.entry.js +1 -0
- package/dist/web-components/{p-1c2497de.entry.js → p-9ef1bbee.entry.js} +1 -1
- package/dist/web-components/p-a0dbde7c.entry.js +1 -0
- package/dist/web-components/{p-755cc697.entry.js → p-a71485d8.entry.js} +1 -1
- package/dist/web-components/p-a7d22c76.entry.js +1 -0
- package/dist/web-components/{p-85a9af42.entry.js → p-ae251d2f.entry.js} +1 -1
- package/dist/web-components/{p-77155630.entry.js → p-b98ab649.entry.js} +1 -1
- package/dist/web-components/p-b9e3b3d6.entry.js +1 -0
- package/dist/web-components/p-c1e748f2.entry.js +1 -0
- package/dist/web-components/p-c478712b.entry.js +1 -0
- package/dist/web-components/{p-72c0c0d8.entry.js → p-d054eb4d.entry.js} +1 -1
- package/dist/web-components/p-d433a828.entry.js +1 -0
- package/dist/web-components/p-d7726e46.entry.js +1 -0
- package/dist/web-components/p-d819c8e5.entry.js +1 -0
- package/dist/web-components/p-e2188953.entry.js +1 -0
- package/dist/web-components/{p-3b4e3faf.entry.js → p-e5945c01.entry.js} +1 -1
- package/dist/web-components/{p-d1379ac6.entry.js → p-f9d5004c.entry.js} +1 -1
- package/dist/web-components/web-components.esm.js +1 -1
- package/package.json +1 -1
- package/dist/cjs/r-accordion-item.cjs.entry.js +0 -78
- package/dist/cjs/r-icon-button.cjs.entry.js +0 -81
- package/dist/collection/components/accordion-item/accordion-item.css +0 -121
- package/dist/collection/components/accordion-item/accordion-item.js +0 -138
- package/dist/esm/r-accordion-item.entry.js +0 -76
- package/dist/esm/r-icon-button.entry.js +0 -79
- package/dist/types/components/accordion-item/accordion-item.d.ts +0 -26
- package/dist/web-components/p-00ca474f.entry.js +0 -1
- package/dist/web-components/p-289eb4b0.entry.js +0 -1
- package/dist/web-components/p-2b8e12ae.entry.js +0 -1
- package/dist/web-components/p-2e2c8a5b.entry.js +0 -1
- package/dist/web-components/p-3a39932b.entry.js +0 -1
- package/dist/web-components/p-3bc93d65.entry.js +0 -1
- package/dist/web-components/p-44be9992.entry.js +0 -1
- package/dist/web-components/p-4652635a.entry.js +0 -1
- package/dist/web-components/p-51a5804b.entry.js +0 -1
- package/dist/web-components/p-63474b32.entry.js +0 -1
- package/dist/web-components/p-74d2a563.entry.js +0 -1
- package/dist/web-components/p-7ad8e78b.entry.js +0 -1
- package/dist/web-components/p-8028c2a9.entry.js +0 -1
- package/dist/web-components/p-96ddeb7f.entry.js +0 -1
- package/dist/web-components/p-9d898089.entry.js +0 -1
- package/dist/web-components/p-9e50120b.entry.js +0 -1
- package/dist/web-components/p-9eb1f262.entry.js +0 -1
- package/dist/web-components/p-a022f356.entry.js +0 -1
- package/dist/web-components/p-a7e7f8fa.entry.js +0 -1
- package/dist/web-components/p-b2f03016.entry.js +0 -1
- package/dist/web-components/p-c300c22f.entry.js +0 -1
- package/dist/web-components/p-c937bd92.entry.js +0 -1
- package/dist/web-components/p-cbcd7699.entry.js +0 -1
- package/dist/web-components/p-d93c240d.entry.js +0 -1
- package/dist/web-components/p-e4b66277.entry.js +0 -1
- package/dist/web-components/p-e6a31881.entry.js +0 -1
- package/dist/web-components/p-f6a92287.entry.js +0 -1
- package/dist/web-components/p-f770e22b.entry.js +0 -1
- package/dist/web-components/p-f952161b.entry.js +0 -1
|
@@ -3,12 +3,11 @@
|
|
|
3
3
|
var index = require('./index-DJ4H_bFj.js');
|
|
4
4
|
var formData = require('./formData-B2DZyLxP.js');
|
|
5
5
|
|
|
6
|
-
const inputCss = ":host{display:inline-flex;flex-direction:column;vertical-align:top;--r-label--margin-bottom:0}:host slot{display:contents}:host([readonly]:not([readonly=false])){--r-input--container--background-color:var(--r-background-soft, #f3f1f0);--r-input--container--border-color:transparent transparent var(--r-border-soft, #686868) transparent;--r-input--container--cursor:text}:host(:hover:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input--container--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host(.focused){--r-input--container--box-shadow:0 0 0 6px var(--r-border-focused-outlined);--r-input--container--outline:2px solid var(--r-border-focused);--r-input--container--outline-offset:2px}:host(:active:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input--container--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([expanded]:not([expanded=false])),:host([full-width]:not([full-width=false])){display:block}:host([disabled]:not([disabled=false])){--r-input--container--opacity:0.4;--r-input--container--cursor:not-allowed;--r-input--container--pointer-events:none;--r-input--container--background-color:transparent}:host([invalid]:not([invalid=false])){--r-input--container--border-color:var(--r-status-error-regular, #b00c15);--r-input--container--background-color:var(--r-status-error-soft, #fef6f6)}.r-input{display:var(--r-input--display, flex);flex:var(--r-input--flex, 1);flex-direction:var(--r-input--flex-direction, column);width:var(--r-input--width, auto);font-family:var(--r-input--font-family, system-ui);position:var(--r-input--position, relative);border-radius:var(--r-input--border-radius, 0);cursor:var(--r-input--cursor, inherit)}.r-input--label-container{display:var(--r-input--label-container--display, flex);gap:var(--r-input--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-input--label-container--align-items, center);justify-content:var(--r-input--label-container--align-items, space-between)}.r-input--label-container ::slotted([slot=popover]){display:var(--r-input--popover--display, inline-flex);height:var(--r-input--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-input--popover--align-items, center);justify-content:var(--r-input--popover--justify-content, center);margin-right:var(--r-input--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-input--popover-trigger--min-width, var(--r-spacing-150, 1.5));--r-popover--trigger--min-height:var(--r-input--popover--trigger--min-height, var(--r-spacing-150, 1.5))}.r-input--label{cursor:var(--r-input--label--cursor, inherit)}.r-input--input{font-family:var(--r-input--input--font-family, system-ui);font-size:var(--r-input--input--font-size, 1em);width:var(--r-input--input--width, 100%);max-width:var(--r-input--input--max-width, 100%);height:var(--r-input--input--height, var(--r-spacing-275, 2.75rem));border-radius:var(--r-input--input--border-radius, 0);border:var(--r-input--input--border, none);color:var(--r-input--input--color, var(--r-text-regular, #282828));background-color:var(--r-input--input--background-color, none);appearance:var(--r-input--input--appearance, none);box-sizing:var(--r-input--input--box-sizing, border-box);outline:var(--r-input--input--outline, none);cursor:var(--r-input--input--cursor, inherit);pointer-events:var(--r-input--input--pointer-events, auto)}.r-input--input:autofill,.r-input--input:-webkit-autofill{-webkit-background-clip:text !important}.r-input--input::-ms-reveal{display:var(--r-input--input--ms-reveal--display, none)}.r-input--input::placeholder{color:var(--r-input--input--placeholder--color, var(--r-text-soft, #686868))}.r-input--input[type=search]::-webkit-search-cancel-button{cursor:var(--r-input--input-clear--cursor, pointer);display:var(--r-input--input-clear--display, block);height:var(--r-input--input-clear--height, 0.875rem);width:var(--r-input--input-clear--width, 0.875rem);appearance:var(--r-input--input-clear--appearance, none);background-repeat:var(--r-input--input-clear--background-repeat, no-repeat);background-image:var(--r-input--input-clear--background-image, url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke-width%3D%221.5%22%20viewBox%3D%220.75%200.75%2022.5%2022.5%22%3E%3Cpath%20id%3D%22Vector%202269%22%20stroke%3D%22currentColor%22%20d%3D%22M1.5%201.5L22.5%2022.5%22%2F%3E%3Cpath%20id%3D%22Vector%202270%22%20stroke%3D%22currentColor%22%20d%3D%22M22.5%201.5L1.5%2022.5%22%2F%3E%3C%2Fsvg%3E\"));background-size:var(--r-input--input-clear--background-size, contain);margin-inline:var(--r-input--input-clear--margin-inline, 0);color:currentColor}.r-input--button{position:var(--r-input--icon-button--position, absolute);width:var(--r-input--icon-button--width, calc(1.125em + var(--r-input--icon--width)));height:var(--r-input--icon-button--height, 100%);top:var(--r-input--icon-button--top, 0);right:var(--r-input--icon-button--right, auto);bottom:var(--r-input--icon-button--bottom, auto);left:var(--r-input--icon-button--left, 0);cursor:var(--r-input--icon-button--cursor, inherit)}.r-input--container{position:var(--r-input--container--position, relative);display:var(--r-input--container--display, flex);align-items:var(--r-input--container--align-items, center);gap:var(--r-input--container--gap, 0.625rem);height:var(--r-input--container--height, var(--r-spacing-275, 2.75rem));background-color:var(--r-input--container--background-color, var(--r-background-softest, #fff));border-width:var(--r-input--container--border-width, 1px);border-style:var(--r-input--container--border-style, solid);border-color:var(--r-input--container--border-color, var(--r-border-soft, #686868));box-sizing:var(--r-input--container--box-sizing, border-box);box-shadow:var(--r-input--container--box-shadow, none);outline:var(--r-input--container--outline, none);outline-offset:var(--r-input--container--outline-offset, 0);padding-top:var(--r-input--container--padding-top, 0.6875rem);padding-right:var(--r-input--container--padding-right, var(--r-spacing-075, 0.75rem));padding-bottom:var(--r-input--container--padding-bottom, 0.6875rem);padding-left:var(--r-input--container--padding-left, var(--r-spacing-0275, 0.75rem));opacity:var(--r-input--container--opacity, 1);pointer-events:var(--r-input--container--pointer-events, auto);line-height:var(--r-input--container--line-height, 1);cursor:var(--r-input--container--cursor, inherit);margin-top:var(--r-input--container--margin-top, var(--r-spacing-025, 0.25rem))}.r-input--container slot[name=leading]{color:var(--r-input--container-leading--color, var(--r-icon-soft, #686868))}.r-input--message:has(r-hint),.r-input--message ::slotted([slot=message]){margin-top:var(--r-input--message--margin-top, var(--r-spacing-025, 0.25rem))}.r-input--trailing{display:var(--r-input--trailing--display, flex);margin-left:var(--r-input--trailing--margin-left, auto);align-items:var(--r-input--trailing--align-items, center);gap:var(--r-input--trailing--gap, 0.625rem)}.r-input--readonly-icon{color:var(--r-input--readonly-icon--color, var(--r-icon-soft, #686868))}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
|
|
6
|
+
const inputCss = ":host{display:inline-flex;flex-direction:column;vertical-align:top;--r-label--margin-bottom:0}:host slot{display:contents}:host([readonly]:not([readonly=false])){--r-input--container--background-color:var(--r-background-soft, #f3f1f0);--r-input--container--border-color:transparent transparent var(--r-border-soft, #686868) transparent;--r-input--container--cursor:text}:host(:hover:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input--container--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host(.focused){--r-input--container--box-shadow:0 0 0 6px var(--r-border-focused-outlined);--r-input--container--outline:2px solid var(--r-border-focused);--r-input--container--outline-offset:2px}:host(:active:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input--container--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([expanded]:not([expanded=false])),:host([full-width]:not([full-width=false])){display:block}:host([disabled]:not([disabled=false])){--r-input--container--opacity:0.4;--r-input--container--cursor:not-allowed;--r-input--container--pointer-events:none;--r-input--container--background-color:transparent}:host([invalid]:not([invalid=false])){--r-input--container--border-color:var(--r-status-error-regular, #b00c15);--r-input--container--background-color:var(--r-status-error-soft, #fef6f6)}.r-input{display:var(--r-input--display, flex);flex:var(--r-input--flex, 1);flex-direction:var(--r-input--flex-direction, column);width:var(--r-input--width, auto);font-family:var(--r-input--font-family, system-ui);position:var(--r-input--position, relative);border-radius:var(--r-input--border-radius, 0);cursor:var(--r-input--cursor, inherit)}.r-input--label-container{display:var(--r-input--label-container--display, flex);gap:var(--r-input--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-input--label-container--align-items, center);justify-content:var(--r-input--label-container--align-items, space-between)}.r-input--label-container ::slotted([slot=popover]){display:var(--r-input--popover--display, inline-flex);height:var(--r-input--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-input--popover--align-items, center);justify-content:var(--r-input--popover--justify-content, center);margin-right:var(--r-input--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-input--popover-trigger--min-width, var(--r-spacing-150, 1.5));--r-popover--trigger--min-height:var(--r-input--popover--trigger--min-height, var(--r-spacing-150, 1.5))}.r-input--label{cursor:var(--r-input--label--cursor, inherit)}.r-input--input{font-family:var(--r-input--input--font-family, system-ui);font-size:var(--r-input--input--font-size, 1em);width:var(--r-input--input--width, 100%);max-width:var(--r-input--input--max-width, 100%);height:var(--r-input--input--height, var(--r-spacing-275, 2.75rem));border-radius:var(--r-input--input--border-radius, 0);border:var(--r-input--input--border, none);color:var(--r-input--input--color, var(--r-text-regular, #282828));background-color:var(--r-input--input--background-color, none);appearance:var(--r-input--input--appearance, none);box-sizing:var(--r-input--input--box-sizing, border-box);outline:var(--r-input--input--outline, none);cursor:var(--r-input--input--cursor, inherit);pointer-events:var(--r-input--input--pointer-events, auto)}.r-input--input:autofill,.r-input--input:-webkit-autofill{-webkit-background-clip:text !important}.r-input--input::-ms-reveal{display:var(--r-input--input--ms-reveal--display, none)}.r-input--input::placeholder{color:var(--r-input--input--placeholder--color, var(--r-text-soft, #686868))}.r-input--input[type=search]::-webkit-search-cancel-button{cursor:var(--r-input--input-clear--cursor, pointer);display:var(--r-input--input-clear--display, block);height:var(--r-input--input-clear--height, 0.875rem);width:var(--r-input--input-clear--width, 0.875rem);appearance:var(--r-input--input-clear--appearance, none);background-repeat:var(--r-input--input-clear--background-repeat, no-repeat);background-image:var(--r-input--input-clear--background-image, url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke-width%3D%221.5%22%20viewBox%3D%220.75%200.75%2022.5%2022.5%22%3E%3Cpath%20id%3D%22Vector%202269%22%20stroke%3D%22currentColor%22%20d%3D%22M1.5%201.5L22.5%2022.5%22%2F%3E%3Cpath%20id%3D%22Vector%202270%22%20stroke%3D%22currentColor%22%20d%3D%22M22.5%201.5L1.5%2022.5%22%2F%3E%3C%2Fsvg%3E\"));background-size:var(--r-input--input-clear--background-size, contain);margin-inline:var(--r-input--input-clear--margin-inline, 0);color:currentColor}.r-input--button{position:var(--r-input--icon-button--position, absolute);width:var(--r-input--icon-button--width, calc(1.125em + var(--r-input--icon--width)));height:var(--r-input--icon-button--height, 100%);top:var(--r-input--icon-button--top, 0);right:var(--r-input--icon-button--right, auto);bottom:var(--r-input--icon-button--bottom, auto);left:var(--r-input--icon-button--left, 0);cursor:var(--r-input--icon-button--cursor, inherit)}.r-input--container{position:var(--r-input--container--position, relative);display:var(--r-input--container--display, flex);align-items:var(--r-input--container--align-items, center);gap:var(--r-input--container--gap, 0.625rem);height:var(--r-input--container--height, var(--r-spacing-275, 2.75rem));background-color:var(--r-input--container--background-color, var(--r-background-softest, #fff));border-width:var(--r-input--container--border-width, 1px);border-style:var(--r-input--container--border-style, solid);border-color:var(--r-input--container--border-color, var(--r-border-soft, #686868));box-sizing:var(--r-input--container--box-sizing, border-box);box-shadow:var(--r-input--container--box-shadow, none);outline:var(--r-input--container--outline, none);outline-offset:var(--r-input--container--outline-offset, 0);padding-top:var(--r-input--container--padding-top, 0.6875rem);padding-right:var(--r-input--container--padding-right, var(--r-spacing-075, 0.75rem));padding-bottom:var(--r-input--container--padding-bottom, 0.6875rem);padding-left:var(--r-input--container--padding-left, var(--r-spacing-0275, 0.75rem));opacity:var(--r-input--container--opacity, 1);pointer-events:var(--r-input--container--pointer-events, auto);line-height:var(--r-input--container--line-height, 1);cursor:var(--r-input--container--cursor, inherit);margin-top:var(--r-input--container--margin-top, var(--r-spacing-025, 0.25rem))}.r-input--container slot[name=leading]{color:var(--r-input--container-leading--color, var(--r-icon-soft, #686868))}.r-input--message:has(r-hint),.r-input--message ::slotted([slot=message]){margin-top:var(--r-input--message--margin-top, var(--r-spacing-025, 0.25rem))}.r-input--trailing{display:var(--r-input--trailing--display, flex);margin-left:var(--r-input--trailing--margin-left, auto);align-items:var(--r-input--trailing--align-items, center);gap:var(--r-input--trailing--gap, 0.625rem)}.r-input--validation-icon{display:var(--r-input--validation-icon--display, inline-block)}.r-input--readonly-icon{color:var(--r-input--readonly-icon--color, var(--r-icon-soft, #686868))}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
|
|
7
7
|
|
|
8
8
|
const RInput = class {
|
|
9
9
|
constructor(hostRef) {
|
|
10
10
|
index.registerInstance(this, hostRef);
|
|
11
|
-
this.rClickIcon = index.createEvent(this, "rClickIcon");
|
|
12
11
|
this.rValidate = index.createEvent(this, "rValidate");
|
|
13
12
|
this.rInput = index.createEvent(this, "rInput");
|
|
14
13
|
this.rBlur = index.createEvent(this, "rBlur");
|
|
@@ -25,24 +24,19 @@ const RInput = class {
|
|
|
25
24
|
*/
|
|
26
25
|
this.value = '';
|
|
27
26
|
/**
|
|
28
|
-
*
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
this.iconPosition = 'start';
|
|
32
|
-
/**
|
|
33
|
-
* @deprecated Will be removed November 2025.
|
|
34
|
-
* Legacy boolean to show a validation marker icon.
|
|
35
|
-
*/
|
|
36
|
-
this.validMarker = false;
|
|
37
|
-
/**
|
|
38
|
-
* @deprecated Will be removed November 2025.
|
|
39
|
-
* Icon name used when `validMarker` is active and state is valid.
|
|
40
|
-
*/
|
|
41
|
-
this.validMarkerIcon = 'circled-check';
|
|
27
|
+
* When `true` field renders valid/invalid marker within.
|
|
28
|
+
*/
|
|
29
|
+
this.validityMarker = true;
|
|
42
30
|
/** Validity state passed from validateFormElement function after validation */
|
|
43
31
|
this.validityState = '';
|
|
44
32
|
/** Validity message passed from validateFormElement function after validation */
|
|
45
33
|
this.validityMessage = '';
|
|
34
|
+
/** Defines if the component has been touched by user */
|
|
35
|
+
this.touched = false;
|
|
36
|
+
/** Defines if the value has been changed by user interaction */
|
|
37
|
+
this.dirty = false;
|
|
38
|
+
/** Private flag to prevent validation during reset */
|
|
39
|
+
this.isResetting = false;
|
|
46
40
|
this.nativeElement = null;
|
|
47
41
|
this.uniqueId = `r-input-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
|
|
48
42
|
/**
|
|
@@ -50,16 +44,29 @@ const RInput = class {
|
|
|
50
44
|
* */
|
|
51
45
|
this.initial = {};
|
|
52
46
|
this.getValidityStateData = (element) => {
|
|
47
|
+
let validityState = '';
|
|
48
|
+
let validityMessage = '';
|
|
49
|
+
if (this.type === 'email' && this.pattern) {
|
|
50
|
+
element.setCustomValidity('');
|
|
51
|
+
validityState = this.validEmailPattern ? 'valid' : 'patternMismatch';
|
|
52
|
+
validityMessage = this.validEmailPattern ? '' : this.patternMismatchMessage;
|
|
53
|
+
return { validityState, validityMessage };
|
|
54
|
+
}
|
|
53
55
|
for (const state in element.validity) {
|
|
54
56
|
if (element.validity[state]) {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
57
|
+
validityState = state;
|
|
58
|
+
const customMessage = this[state + 'Message'];
|
|
59
|
+
if (customMessage) {
|
|
60
|
+
validityMessage = customMessage;
|
|
61
|
+
return { validityState, validityMessage };
|
|
59
62
|
}
|
|
60
|
-
|
|
63
|
+
validityMessage = element.validationMessage;
|
|
64
|
+
// Found an error, use it even if no custom message
|
|
65
|
+
return { validityState, validityMessage };
|
|
61
66
|
}
|
|
62
67
|
}
|
|
68
|
+
// No errors found, field is valid
|
|
69
|
+
return { validityState: 'valid', validityMessage: '' };
|
|
63
70
|
};
|
|
64
71
|
this.validateFormElement = (element) => {
|
|
65
72
|
if (element === null)
|
|
@@ -68,13 +75,13 @@ const RInput = class {
|
|
|
68
75
|
return;
|
|
69
76
|
if (this.error)
|
|
70
77
|
return;
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
this.validityMessage = this.validEmailPattern ? '' : this.patternMismatchMessage;
|
|
78
|
+
// Trigger browser validation to populate validity states
|
|
79
|
+
if (element.checkValidity) {
|
|
80
|
+
element.checkValidity();
|
|
75
81
|
}
|
|
76
|
-
|
|
77
|
-
|
|
82
|
+
const { validityState, validityMessage } = this.getValidityStateData(element);
|
|
83
|
+
this.validityState = validityState;
|
|
84
|
+
this.validityMessage = validityMessage;
|
|
78
85
|
const isValid = this.validityState === 'valid';
|
|
79
86
|
this.valid = isValid;
|
|
80
87
|
this.invalid = !isValid;
|
|
@@ -87,6 +94,8 @@ const RInput = class {
|
|
|
87
94
|
if (this.readonly)
|
|
88
95
|
return;
|
|
89
96
|
this.value = event.target.value;
|
|
97
|
+
this.touched = true;
|
|
98
|
+
this.dirty = true;
|
|
90
99
|
const { host, value } = this;
|
|
91
100
|
this.rInput.emit({ element: host, value });
|
|
92
101
|
};
|
|
@@ -94,11 +103,14 @@ const RInput = class {
|
|
|
94
103
|
if (this.readonly)
|
|
95
104
|
return;
|
|
96
105
|
this.value = event.target.value;
|
|
106
|
+
this.touched = true;
|
|
107
|
+
this.dirty = true;
|
|
97
108
|
const { host, value } = this;
|
|
98
109
|
this.rChange.emit({ element: host, value });
|
|
99
110
|
};
|
|
100
111
|
this.onBlur = () => {
|
|
101
112
|
this.host.classList.remove('focused');
|
|
113
|
+
this.touched = true;
|
|
102
114
|
this.validateFormElement(this.nativeElement);
|
|
103
115
|
this.rBlur.emit();
|
|
104
116
|
};
|
|
@@ -112,17 +124,25 @@ const RInput = class {
|
|
|
112
124
|
this.onResetForm = () => {
|
|
113
125
|
if (this.readonly)
|
|
114
126
|
return;
|
|
127
|
+
this.isResetting = true;
|
|
128
|
+
this.markAsPristine();
|
|
115
129
|
this.validityState = null;
|
|
116
130
|
this.validityMessage = null;
|
|
117
|
-
|
|
131
|
+
// Restore initial value without triggering validation
|
|
132
|
+
if (this.nativeElement) {
|
|
133
|
+
this.nativeElement.value = this.initial['value'] || '';
|
|
134
|
+
}
|
|
135
|
+
this.value = this.initial['value'];
|
|
118
136
|
this.invalid = this.initial['invalid'];
|
|
119
137
|
this.valid = !this.invalid;
|
|
138
|
+
this.isResetting = false;
|
|
120
139
|
const { host, value } = this;
|
|
121
140
|
this.rReset.emit({ element: host, value });
|
|
122
141
|
};
|
|
123
142
|
this.onSubmitForm = (event) => {
|
|
124
143
|
if (this.isNoValidate)
|
|
125
144
|
return;
|
|
145
|
+
this.touched = true;
|
|
126
146
|
this.validateFormElement(this.nativeElement);
|
|
127
147
|
if (this.invalid) {
|
|
128
148
|
event.preventDefault();
|
|
@@ -206,9 +226,39 @@ const RInput = class {
|
|
|
206
226
|
* Set the current value programmatically (does not fire native input/change automatically).
|
|
207
227
|
*/
|
|
208
228
|
async setValue(value) {
|
|
209
|
-
this.nativeElement
|
|
229
|
+
if (this.nativeElement) {
|
|
230
|
+
this.nativeElement.value = value;
|
|
231
|
+
}
|
|
232
|
+
this.value = value;
|
|
210
233
|
this.validateFormElement(this.nativeElement);
|
|
211
234
|
}
|
|
235
|
+
/**
|
|
236
|
+
* Validates the input without triggering UI and returns a boolean indicating its validity.
|
|
237
|
+
* @returns A boolean indicating whether the input is valid.
|
|
238
|
+
*/
|
|
239
|
+
async checkValidity() {
|
|
240
|
+
const { validityState } = this.getValidityStateData(this.nativeElement);
|
|
241
|
+
return validityState === 'valid';
|
|
242
|
+
}
|
|
243
|
+
/**
|
|
244
|
+
* Gets the touched state (whether user has interacted with the input)
|
|
245
|
+
*/
|
|
246
|
+
async isTouched() {
|
|
247
|
+
return this.touched;
|
|
248
|
+
}
|
|
249
|
+
/**
|
|
250
|
+
* Gets the dirty state (whether value has been changed by user)
|
|
251
|
+
*/
|
|
252
|
+
async isDirty() {
|
|
253
|
+
return this.dirty;
|
|
254
|
+
}
|
|
255
|
+
/**
|
|
256
|
+
* Resets touched and dirty states to pristine (untouched/clean)
|
|
257
|
+
*/
|
|
258
|
+
async markAsPristine() {
|
|
259
|
+
this.touched = false;
|
|
260
|
+
this.dirty = false;
|
|
261
|
+
}
|
|
212
262
|
/** Identify wrapping form element */
|
|
213
263
|
get parentFormEl() {
|
|
214
264
|
return this.host.closest('form') || document.querySelector(`#${this.form}`) || null;
|
|
@@ -224,11 +274,8 @@ const RInput = class {
|
|
|
224
274
|
get hasValidationError() {
|
|
225
275
|
return (this.validityState !== 'valid' || this.invalid) && !!(this.validityMessage || this.customErrorMessage);
|
|
226
276
|
}
|
|
227
|
-
get hasValidationSuccess() {
|
|
228
|
-
return (this.validityState === 'valid' || this.valid) && !!this.validMessage && this.showValid;
|
|
229
|
-
}
|
|
230
277
|
get hasMessage() {
|
|
231
|
-
return this.hasError || this.hasValidationError
|
|
278
|
+
return this.hasError || this.hasValidationError;
|
|
232
279
|
}
|
|
233
280
|
/**
|
|
234
281
|
* Determine whether this element should be ignored
|
|
@@ -272,10 +319,15 @@ const RInput = class {
|
|
|
272
319
|
this.disconnectFormEventListeners();
|
|
273
320
|
}
|
|
274
321
|
handleValueChange() {
|
|
275
|
-
|
|
322
|
+
if (!this.isResetting) {
|
|
323
|
+
this.validateFormElement(this.nativeElement);
|
|
324
|
+
}
|
|
325
|
+
}
|
|
326
|
+
handleTypeChange() {
|
|
327
|
+
this.setValue(this.nativeElement.value);
|
|
276
328
|
}
|
|
277
329
|
render() {
|
|
278
|
-
const { name, placeholder, required, fieldIndicator, maxlength, minlength, min, max, value, disabled, form, pattern, invalid, valid,
|
|
330
|
+
const { name, placeholder, required, fieldIndicator, maxlength, minlength, min, max, value, disabled, form, pattern, invalid, valid, hint, label, internal, uniqueId, autocomplete, readonly, autofocus, passwordrules, validityMarker } = this;
|
|
279
331
|
const inputAttrs = {
|
|
280
332
|
disabled,
|
|
281
333
|
readonly,
|
|
@@ -291,6 +343,7 @@ const RInput = class {
|
|
|
291
343
|
pattern,
|
|
292
344
|
autocomplete,
|
|
293
345
|
autofocus: autofocus || null,
|
|
346
|
+
passwordrules,
|
|
294
347
|
id: uniqueId,
|
|
295
348
|
'data-value': value,
|
|
296
349
|
'aria-placeholder': placeholder,
|
|
@@ -298,20 +351,25 @@ const RInput = class {
|
|
|
298
351
|
'aria-required': `${required || false}`,
|
|
299
352
|
'aria-describedby': this.ariaDescribedBy
|
|
300
353
|
};
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
'tooltip-icon': tooltipIcon,
|
|
305
|
-
'tooltip-icon-color': tooltipIconColor,
|
|
354
|
+
const labelAttr = label ? {
|
|
355
|
+
id: `${uniqueId}-label`,
|
|
356
|
+
fieldIndicator
|
|
306
357
|
} : {};
|
|
307
|
-
const labelAttr = label ? Object.assign({ id: `${uniqueId}-label`, fieldIndicator }, tooltipAttrs) : {};
|
|
308
358
|
const renderValidationMarker = () => {
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
359
|
+
const icons = {
|
|
360
|
+
valid: 'circled-check',
|
|
361
|
+
invalid: 'circled-exclamation-mark'
|
|
362
|
+
};
|
|
363
|
+
const colors = {
|
|
364
|
+
valid: '--r-status-success-regular',
|
|
365
|
+
invalid: '--r-status-error-regular'
|
|
366
|
+
};
|
|
367
|
+
const shouldShowValidMarker = !!validityMarker && !!valid && !!value;
|
|
368
|
+
const shouldShowInvalidMarker = !!validityMarker && !!invalid;
|
|
369
|
+
if (!shouldShowValidMarker && !shouldShowInvalidMarker)
|
|
312
370
|
return null;
|
|
313
|
-
const iconName =
|
|
314
|
-
const iconColor =
|
|
371
|
+
const iconName = shouldShowInvalidMarker ? icons.invalid : icons.valid;
|
|
372
|
+
const iconColor = shouldShowInvalidMarker ? colors.invalid : colors.valid;
|
|
315
373
|
return index.h("r-icon", { class: "r-input--validation-icon", "aria-hidden": true, size: "s", name: iconName, color: iconColor });
|
|
316
374
|
};
|
|
317
375
|
// Filter out event listener properties based on naming convention.
|
|
@@ -322,17 +380,18 @@ const RInput = class {
|
|
|
322
380
|
}
|
|
323
381
|
return acc;
|
|
324
382
|
}, {});
|
|
325
|
-
return (index.h(index.Host, { onClick: this.handleClick, onKeyup: this.handleKeyup }, index.h("div", { class: internal ? 'visually-hidden' : 'r-input--label-container' }, index.h("label", { htmlFor: uniqueId }, label ?
|
|
383
|
+
return (index.h(index.Host, { onClick: this.handleClick, onKeyup: this.handleKeyup, "data-touched": `${this.touched}`, "data-dirty": `${this.dirty}` }, index.h("div", { class: internal ? 'visually-hidden' : 'r-input--label-container' }, index.h("label", { htmlFor: uniqueId }, label ?
|
|
326
384
|
index.h("r-label", Object.assign({ class: "r-input--label" }, labelAttr), label)
|
|
327
385
|
:
|
|
328
386
|
index.h("slot", { name: "label" })), index.h("slot", { name: "popover" })), hint &&
|
|
329
387
|
index.h("r-hint", { id: `${uniqueId}-hint`, role: "note" }, hint), index.h("div", { class: "r-input--container" }, index.h("slot", { name: "leading" }), index.h("input", Object.assign({ class: "r-input--input", type: this.type }, inputAttrs, eventListeners, { ref: el => this.nativeElement = el, value: this.value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus })), index.h("div", { class: "r-input--trailing" }, this.readonly &&
|
|
330
388
|
index.h("r-icon", { class: "r-input--readonly-icon", name: "pen-disabled", size: "s" }), renderValidationMarker(), this.hasTrailingSlot &&
|
|
331
|
-
index.h("slot", { name: "trailing" }))), index.h("div", { id: `${uniqueId}-message`, "aria-live": !internal ? 'polite' : null, class: !internal ? 'r-input--message' : 'visually-hidden' }, index.h("slot", { name: "message" }, this.hasMessage && index.h("r-hint", { variant: valid ? 'success' : 'error' }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage)
|
|
389
|
+
index.h("slot", { name: "trailing" }))), index.h("div", { id: `${uniqueId}-message`, "aria-live": !internal ? 'polite' : null, class: !internal ? 'r-input--message' : 'visually-hidden' }, index.h("slot", { name: "message" }, this.hasMessage && index.h("r-hint", { variant: valid ? 'success' : 'error' }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage))))));
|
|
332
390
|
}
|
|
333
391
|
get host() { return index.getElement(this); }
|
|
334
392
|
static get watchers() { return {
|
|
335
|
-
"value": ["handleValueChange"]
|
|
393
|
+
"value": ["handleValueChange"],
|
|
394
|
+
"type": ["handleTypeChange"]
|
|
336
395
|
}; }
|
|
337
396
|
};
|
|
338
397
|
RInput.style = inputCss;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-DJ4H_bFj.js');
|
|
4
4
|
|
|
5
|
-
const listItemCss = ":host([alignment=top]){--r-list-item--trailing-text--font-weight:bold;--r-list-item--trailing--align-self:start}:host([alignment=bottom]) .r-list-item{--r-list-item--trailing--align-self:end}:host([divider]:not([divider=false])){--r-list-item--border-color:var(--r-border-soft, #686868);--r-list-item--border-width:0 0 1px 0}:host([active]) .r-list-item{--r-list-item--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([variant=navitem]:not([active]):hover:not([disabled]:not([disabled=false])))>.r-list-item,:host([href]:not([active]):hover:not([disabled]:not([disabled=false])))>.r-list-item{--r-list-item--cursor:pointer;--r-list-item--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host([variant=navitem][has-sub-items]:hover:not([disabled]:not([disabled=false])))>.r-list-item-wrapper>.r-list-item{--r-list-item--cursor:pointer;--r-list-item--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host([variant=navitem][has-sub-items]:has([active]):hover:not([disabled]:not([disabled=false])))>.r-list-item-wrapper>.r-list-item{--r-list-item--cursor:pointer;--r-list-item--background-color:transparent}:host([variant=navitem][expanded])>.r-list-item-wrapper>.r-list-item{--r-list-item--headline--font-weight:600;--r-list-item--trailing-icon--transform:rotate(180deg);--r-list-item--trailing-icon--color:var(--r-icon-regular, #282828)}:host([variant=navitem][active-parent]:not([expanded])),:host([variant=navitem][active]:not([expanded])){--r-list-item--background-color:var(--r-background-interactive-activated, rgba(40, 40, 40, 0.08))}:host([variant=subitem]) .r-list-item{--r-list-item--margin-left:27px;--r-list-item--border-width:0 0 0 1px;--r-list-item--border-color:var(--r-border-soft, #686868)}:host([variant=subitem][active]) .r-list-item{--r-list-item--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host(:focus-visible:not(:active)) .r-list-item{--r-list-item--box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);--r-list-item--outline:2px solid var(--r-border-focused, #0071e3);--r-list-item--outline-offset:2px}:host(:focus-within) .r-list-item[href]{--r-list-item--box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);--r-list-item--outline:2px solid var(--r-border-focused, #0071e3);--r-list-item--outline-offset:2px}:host([disabled]:not([disabled=false])){cursor:not-allowed;--r-list-item--background-color:transparent}:host([disabled]:not([disabled=false])[divider]:not([divider=false])){--r-list-item--border-color:rgba(104,104,104, 0.4);--r-list-item--leading-icon--color:rgba(104,104,104, 0.4)}:host([truncate-description]:not([truncate-description=false])){--r-list-item--description--white-space:nowrap}:host{display:var(--display, block);pointer-events:var(--pointer-events, auto);outline:var(--outline, none);font-family:var(--font-family, var(--r-font-family-text, system-ui));line-height:var(--line-height, var(--r-line-height-m, 1.5));color:var(--color, var(--r-text-regular, #282828))}.r-list-item{display:var(--r-list-item--display, flex);align-items:var(--r-list-item--align-items, center);justify-content:var(--r-list-item--justify-content, center);gap:var(--r-list-item--gap, 16px);width:var(--r-list-item--width, inherit);padding:var(--r-list-item--padding, 16px);margin-left:var(--r-list-item--margin-left, 0);opacity:var(--r-list-item--opacity, 1);color:var(--r-list-item--color, inherit);box-shadow:var(--r-list-item--box-shadow, none);outline:var(--r-list-item--outline, none);outline-offset:var(--r-list-item--outline-offset, 0);text-decoration:var(--r-list-item--text-decoration, none);background-color:var(--r-list-item--background-color, transparent);border-style:var(--r-list-item--border-style, solid);border-width:var(--r-list-item--border-width, 0);border-color:var(--r-list-item--border-color, transparent);cursor:var(--r-list-item--cursor, inherit);font-weight:var(--r-list-item--font-weight, var(--r-font-weight-regular, 400));outline:var(--r-list-item--outline, none)}.r-list-item--leading{color:var(--r-list-item--leading--color, var(--r-icon-soft, #686868))}.r-list-item--leading-icon{color:var(--r-list-item--leading-icon--color, var(--r-icon-soft, #686868))}.r-list-item--trailing{display:var(--r-list-item--trailing--display, flex);align-self:var(--r-list-item--trailing--align-self, center);gap:var(--r-list-item--trailing--gap, 8px);color:var(--r-list-item--trailing--color, inherit)}.r-list-item--trailing-icon{transition:var(--r-list-item--trailing-icon--transition, transform 250ms ease-in-out);transform:var(--r-list-item--trailing-icon--transform, rotate(0deg));color:var(--r-list-item--trailing-icon--color, inherit)}.r-list-item--trailing-text{font-weight:var(--r-list-item--trailing-text--font-weight, 400);white-space:var(--r-list-item--trailing-text--white-space, nowrap)}.r-list-item--trailing ::slotted(*){display:var(--r-list-item--trailing-slotted--display, flex);gap:var(--r-list-item--trailing-slotted--display, 8px)}.r-list-item--text{display:var(--r-list-item--text--display, flex);flex-grow:var(--r-list-item--text--flex-grow, 1);flex-direction:var(--r-list-item--text--flex-direction, column);gap:var(--r-list-item--text--gap, 2px);white-space:var(--r-list-item--text--white-space, normal);overflow:var(--r-list-item--text--overflow, hidden);text-overflow:var(--r-list-item--text--text-overflow, ellipsis);font-weight:var(--r-list-item--trailing-text--font-weight, inherit)}.r-list-item--headline{font-size:var(--r-list-item--headline--font-size, 1rem);font-weight:var(--r-list-item--headline--font-weight, 600);line-height:var(--r-list-item--headline--line-height, 1.5);color:var(--r-list-item--headline--color, inherit)}.r-list-item--
|
|
5
|
+
const listItemCss = ":host([alignment=top]){--r-list-item--trailing-text--font-weight:bold;--r-list-item--trailing--align-self:start}:host([alignment=bottom]) .r-list-item{--r-list-item--trailing--align-self:end}:host([divider]:not([divider=false])){--r-list-item--border-color:var(--r-border-soft, #686868);--r-list-item--border-width:0 0 1px 0}:host([active]) .r-list-item{--r-list-item--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([variant=navitem]:not([active]):hover:not([disabled]:not([disabled=false])))>.r-list-item,:host([href]:not([active]):hover:not([disabled]:not([disabled=false])))>.r-list-item{--r-list-item--cursor:pointer;--r-list-item--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host([variant=navitem][has-sub-items]:hover:not([disabled]:not([disabled=false])))>.r-list-item-wrapper>.r-list-item{--r-list-item--cursor:pointer;--r-list-item--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host([variant=navitem][has-sub-items]:has([active]):hover:not([disabled]:not([disabled=false])))>.r-list-item-wrapper>.r-list-item{--r-list-item--cursor:pointer;--r-list-item--background-color:transparent}:host([variant=navitem][expanded])>.r-list-item-wrapper>.r-list-item{--r-list-item--headline--font-weight:600;--r-list-item--trailing-icon--transform:rotate(180deg);--r-list-item--trailing-icon--color:var(--r-icon-regular, #282828)}:host([variant=navitem][active-parent]:not([expanded])),:host([variant=navitem][active]:not([expanded])){--r-list-item--background-color:var(--r-background-interactive-activated, rgba(40, 40, 40, 0.08))}:host([variant=subitem]) .r-list-item{--r-list-item--margin-left:27px;--r-list-item--border-width:0 0 0 1px;--r-list-item--border-color:var(--r-border-soft, #686868)}:host([variant=subitem][active]) .r-list-item{--r-list-item--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host(:focus-visible:not(:active)) .r-list-item{--r-list-item--box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);--r-list-item--outline:2px solid var(--r-border-focused, #0071e3);--r-list-item--outline-offset:2px}:host(:focus-within) .r-list-item[href]{--r-list-item--box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);--r-list-item--outline:2px solid var(--r-border-focused, #0071e3);--r-list-item--outline-offset:2px}:host([disabled]:not([disabled=false])){cursor:not-allowed;--r-list-item--background-color:transparent}:host([disabled]:not([disabled=false])[divider]:not([divider=false])){--r-list-item--border-color:rgba(104,104,104, 0.4);--r-list-item--leading-icon--color:rgba(104,104,104, 0.4)}:host([truncate-description]:not([truncate-description=false])){--r-list-item--description--white-space:nowrap}:host{display:var(--display, block);pointer-events:var(--pointer-events, auto);outline:var(--outline, none);font-family:var(--font-family, var(--r-font-family-text, system-ui));line-height:var(--line-height, var(--r-line-height-m, 1.5));color:var(--color, var(--r-text-regular, #282828))}.r-list-item{display:var(--r-list-item--display, flex);align-items:var(--r-list-item--align-items, center);justify-content:var(--r-list-item--justify-content, center);gap:var(--r-list-item--gap, 16px);width:var(--r-list-item--width, inherit);padding:var(--r-list-item--padding, 16px);margin-left:var(--r-list-item--margin-left, 0);opacity:var(--r-list-item--opacity, 1);color:var(--r-list-item--color, inherit);box-shadow:var(--r-list-item--box-shadow, none);outline:var(--r-list-item--outline, none);outline-offset:var(--r-list-item--outline-offset, 0);text-decoration:var(--r-list-item--text-decoration, none);background-color:var(--r-list-item--background-color, transparent);border-style:var(--r-list-item--border-style, solid);border-width:var(--r-list-item--border-width, 0);border-color:var(--r-list-item--border-color, transparent);cursor:var(--r-list-item--cursor, inherit);font-weight:var(--r-list-item--font-weight, var(--r-font-weight-regular, 400));outline:var(--r-list-item--outline, none)}.r-list-item--leading{color:var(--r-list-item--leading--color, var(--r-icon-soft, #686868))}.r-list-item--leading-icon{color:var(--r-list-item--leading-icon--color, var(--r-icon-soft, #686868))}.r-list-item--trailing{display:var(--r-list-item--trailing--display, flex);align-self:var(--r-list-item--trailing--align-self, center);gap:var(--r-list-item--trailing--gap, 8px);color:var(--r-list-item--trailing--color, inherit)}.r-list-item--trailing-icon{transition:var(--r-list-item--trailing-icon--transition, transform 250ms ease-in-out);transform:var(--r-list-item--trailing-icon--transform, rotate(0deg));color:var(--r-list-item--trailing-icon--color, inherit)}.r-list-item--trailing-text{font-weight:var(--r-list-item--trailing-text--font-weight, 400);white-space:var(--r-list-item--trailing-text--white-space, nowrap)}.r-list-item--trailing ::slotted(*){display:var(--r-list-item--trailing-slotted--display, flex);gap:var(--r-list-item--trailing-slotted--display, 8px)}.r-list-item--text{display:var(--r-list-item--text--display, flex);flex-grow:var(--r-list-item--text--flex-grow, 1);flex-direction:var(--r-list-item--text--flex-direction, column);gap:var(--r-list-item--text--gap, 2px);white-space:var(--r-list-item--text--white-space, normal);overflow:var(--r-list-item--text--overflow, hidden);text-overflow:var(--r-list-item--text--text-overflow, ellipsis);font-weight:var(--r-list-item--trailing-text--font-weight, inherit)}.r-list-item--headline{font-size:var(--r-list-item--headline--font-size, 1rem);font-weight:var(--r-list-item--headline--font-weight, 600);line-height:var(--r-list-item--headline--line-height, 1.5);color:var(--r-list-item--headline--color, inherit)}.r-list-item--description{font-size:var(--r-list-item--description--font-size, 1rem);font-weight:var(--r-list-item--description--font-weight, 400);line-height:var(--r-list-item--description--line-height, 1.5);color:var(--r-list-item--description--color, var(--r-text-regular, #282828));white-space:var(--r-list-item--description--white-space, normal);overflow:var(--r-list-item--description--overflow, hidden);text-overflow:var(--r-list-item--description--text-overflow, ellipsis)}.r-list-item--description ::slotted(a){color:var(--r-list-item--description--color, inherit)}";
|
|
6
6
|
|
|
7
7
|
const RListItem = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -50,7 +50,7 @@ const RListItem = class {
|
|
|
50
50
|
return this.isEl('[slot="headline"]');
|
|
51
51
|
}
|
|
52
52
|
get isDescriptionSlot() {
|
|
53
|
-
return this.isEl('[slot="description"]')
|
|
53
|
+
return this.isEl('[slot="description"]');
|
|
54
54
|
}
|
|
55
55
|
get hasSubitems() {
|
|
56
56
|
return this.isEl('[variant="subitem"]');
|
|
@@ -83,15 +83,15 @@ const RListItem = class {
|
|
|
83
83
|
return this.href && !this.disabled ? 'a' : 'div';
|
|
84
84
|
}
|
|
85
85
|
render() {
|
|
86
|
-
const { leadingIcon, leadingIconSrc, trailingIcon, trailingIconSrc, headline, trailingText,
|
|
86
|
+
const { leadingIcon, leadingIconSrc, trailingIcon, trailingIconSrc, headline, trailingText, description } = this;
|
|
87
87
|
const TagName = this.tagName;
|
|
88
88
|
const itemAttrs = Object.assign({ href: TagName === 'a' ? this.href : null }, (this.disabled ? { role: 'link', 'aria-disabled': 'true' } : null));
|
|
89
89
|
const ListItemContent = (index.h(TagName, Object.assign({ class: "r-list-item" }, itemAttrs), this.isLeading &&
|
|
90
90
|
index.h("span", { class: "r-list-item--leading" }, index.h("slot", { name: "leading" }, this.isLeadingIcon && !this.hideLeadingIcon &&
|
|
91
91
|
index.h("r-icon", { class: "r-list-item--leading-icon", name: leadingIcon, src: leadingIconSrc }))), index.h("span", { class: "r-list-item--text" }, !this.isTextSlot ?
|
|
92
92
|
index.h(index.Fragment, null, (this.isHeadlineSlot || headline) &&
|
|
93
|
-
index.h("span", { class: "r-list-item--headline" }, index.h("slot", { name: "headline" }, headline)), (description || this.isDescriptionSlot
|
|
94
|
-
index.h("span", { class: "r-list-item--description" }, index.h("slot", { name: "
|
|
93
|
+
index.h("span", { class: "r-list-item--headline" }, index.h("slot", { name: "headline" }, headline)), (description || this.isDescriptionSlot) &&
|
|
94
|
+
index.h("span", { class: "r-list-item--description" }, index.h("slot", { name: "description" }, description)))
|
|
95
95
|
:
|
|
96
96
|
index.h("slot", { name: "text" })), this.isTrailing &&
|
|
97
97
|
index.h("span", { class: "r-list-item--trailing" }, index.h("slot", { name: "trailing" }, this.isTrailingIcon && !trailingText &&
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-DJ4H_bFj.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--item--display:flex;--r-pagination--item--align-items:center;--r-pagination--item--justify-content:center;--r-pagination--item--margin-right:-1px;--r-pagination--item--color:var(--r-text-regular);--r-pagination--item--background-color:transparent;--r-pagination--item--width:48px;--r-pagination--item--height:48px;--r-pagination--item--border-width:1px;--r-pagination--item--border-style:solid;--r-pagination--item--border-color:var(--r-border-softer);--r-pagination--item--z-index:0;--r-pagination--item--font-family:inherit;--r-pagination--button--width:100%;--r-pagination--button--height:100%;--r-pagination--button--color:var(--r-text-regular);--r-pagination--button--background-color:transparent;--r-pagination--button--border-width:0;--r-pagination--button--padding:0;--r-pagination--button--font-size:var(--r-font-size-300);--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--item
|
|
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--item--display:flex;--r-pagination--item--align-items:center;--r-pagination--item--justify-content:center;--r-pagination--item--margin-right:-1px;--r-pagination--item--color:var(--r-text-regular);--r-pagination--item--background-color:transparent;--r-pagination--item--width:48px;--r-pagination--item--height:48px;--r-pagination--item--border-width:1px;--r-pagination--item--border-style:solid;--r-pagination--item--border-color:var(--r-border-softer);--r-pagination--item--z-index:0;--r-pagination--item--font-family:inherit;--r-pagination--button--width:100%;--r-pagination--button--height:100%;--r-pagination--button--color:var(--r-text-regular);--r-pagination--button--background-color:transparent;--r-pagination--button--border-width:0;--r-pagination--button--padding:0;--r-pagination--button--font-size:var(--r-font-size-300);--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--item:hover{--r-pagination--item--background-color:var(--r-background-interactive-hovered)}.r-pagination--item:focus{--r-pagination--item--outline-color:var(--r-border-focused);--r-pagination--item--box-shadow:0 0 0 3px var(--r-border-focused-outlined);--r-pagination--item--z-index:1}.r-pagination--item:active{--r-pagination--item--background-color:var(--r-background-interactive-pressed)}.r-pagination--item.stepper{--r-pagination--item--background-color:transparent}.r-pagination--item.active{--r-pagination--item--color:var(--r-text-regular);--r-pagination--item--background-color:var(--r-background-interactive-activated);font-weight:var(--r-font-weight-semibold)}.r-pagination--item.arrow.previous{--r-pagination--item--margin-left:0;--r-pagination--item--margin-right:16px}.r-pagination--item.arrow.next{--r-pagination--item--margin-left:16px;--r-pagination--item--margin-right:0}.r-pagination--item.arrow.first{--r-pagination--item--margin-left:0;--r-pagination--item--margin-right:8px}.r-pagination--item.arrow.last{--r-pagination--item--margin-left:8px;--r-pagination--item--margin-right:0}.r-pagination--item.disabled,.r-pagination--item.disabled:hover{--r-pagination--item--opacity:0.4;--r-pagination--item--background-color:transparent}.r-pagination--item.number{--r-button--font-size:0.813rem}.r-pagination--item{--r-button--display:flex;--r-button--width:var(--r-pagination--button--width);--r-button--height:var(--r-pagination--button--height);--r-button--color:var(--r-pagination--button--color);--r-button--background-color:var(--r-pagination--button--background-color);--r-button--border-width:var(--r-pagination--button--border-width);--r-button--padding:var(--r-pagination--button--padding);--r-button--icon--width:auto;--r-button--icon--height:auto;align-items:var(--r-pagination--item--align-items);background-color:var(--r-pagination--item--background-color);color:var(--r-pagination--item--color);display:var(--r-pagination--item--display);font-family:var(--r-pagination--item--font-family);height:var(--r-pagination--item--height);justify-content:var(--r-pagination--item--justify-content);margin-left:var(--r-pagination--item--margin-left);margin-right:var(--r-pagination--item--margin-right);opacity:var(--r-pagination--item--opacity);width:var(--r-pagination--item--width);z-index:var(--r-pagination--item--z-index)}";
|
|
6
6
|
|
|
7
7
|
const RPagination = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -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: '4898806bfe378b36f5fc784a6a4ea4477f164d86', collapsed: this.isCollapsed }, index.h("div", { key: 'f0acaedbc5e440b20a49791d5a3544955bdcd1f7', class: "r-panel" }, index.h("div", { key: '390898c282414aecd4cfd75e4da80fb6b04e8ffa', class: "r-panel--header" }, this.hasHeader && (index.h("a", { key: '9358558193e8c7ec82d8bf40240b9fb8d00d902d', 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", title: `${this.labelCollapse}`, icon: "cross", "r-aria-label": `${this.labelCollapse}`, onClick: this.handleFullyCollapsedButtonClick })) : this.variant === 'drawer' ? (index.h("r-button", { class: "r-panel--trigger", variant: "blank", title: this.isCollapsed ? `${this.labelExpand}` : `${this.labelCollapse}`, icon: "angle-left", "r-aria-label": this.isCollapsed ? `${this.labelExpand}` : `${this.labelCollapse}`, onClick: this.handleSemiCollapsedButtonClick })) : this.variant === 'visible' ? (null) : null), index.h("div", { key: '
|
|
174
|
+
index.h("slot", { name: "logo-expanded" }))), this.variant === 'modal' ? (index.h("r-button", { class: "r-panel--trigger", variant: "blank", title: `${this.labelCollapse}`, icon: "cross", "r-aria-label": `${this.labelCollapse}`, onClick: this.handleFullyCollapsedButtonClick })) : this.variant === 'drawer' ? (index.h("r-button", { class: "r-panel--trigger", variant: "blank", title: this.isCollapsed ? `${this.labelExpand}` : `${this.labelCollapse}`, icon: "angle-left", "r-aria-label": this.isCollapsed ? `${this.labelExpand}` : `${this.labelCollapse}`, onClick: this.handleSemiCollapsedButtonClick })) : this.variant === 'visible' ? (null) : null), index.h("div", { key: '070e63b95136c2cab2bf7a1a84390568c1341c47', class: "r-panel--body" }, index.h("slot", { key: 'e595b40da67e61bb23638d5ea1a615005d705a41' })), this.hasFooter && !this.isCollapsed && (index.h("div", { key: '7adb855c7aa805299abba58795aacb27ce4e6ba5', class: "r-panel--footer" }, index.h("slot", { key: '6e438b003d443bf62b2faad2bf180a4466190e77', name: "footer" }))))));
|
|
175
175
|
}
|
|
176
176
|
get host() { return index.getElement(this); }
|
|
177
177
|
static get watchers() { return {
|
|
@@ -5,7 +5,7 @@ var theming = require('./theming-NqxjhVJS.js');
|
|
|
5
5
|
var focusable = require('./focusable-Oll_rmtP.js');
|
|
6
6
|
require('./style-observer-D9zSP9wP.js');
|
|
7
7
|
|
|
8
|
-
const popoverActionCss = ":host slot{display:contents}::slotted(r-button){--r-button--color:var(--r-text-regular);--r-button--border-
|
|
8
|
+
const popoverActionCss = ":host slot{display:contents}::slotted(r-button){--r-button--color:var(--r-text-regular);--r-button--border-width:0;--r-button--background-color:rgba(0,0,0,0);--r-button--slot--position:relative;--r-button--slot--text-decoration:underline;--r-button--padding:10px 2px 18px 2px;--r-button--slot--text-underline-offset:9px}::slotted(r-button:hover:not([disabled]):not([disabled=false])){--r-button--background-color:var(--r-background-interactive-hovered)}::slotted(r-button:active:not([disabled]):not([disabled=false])){--r-button--background-color:var(--r-background-interactive-pressed)}";
|
|
9
9
|
|
|
10
10
|
const PopoverAction = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -71,7 +71,7 @@ const PopoverAction = class {
|
|
|
71
71
|
return focusable.focusableElements(this.host);
|
|
72
72
|
}
|
|
73
73
|
render() {
|
|
74
|
-
return (index.h(index.Host, { key: '
|
|
74
|
+
return (index.h(index.Host, { key: '898d4a649622403956b34ea5065ca5135e67c595', slot: "action" }, index.h("slot", { key: 'f61e085a1797778c33f07eaf3987cd743d56a662', onSlotchange: this.handleSlotChange })));
|
|
75
75
|
}
|
|
76
76
|
get host() { return index.getElement(this); }
|
|
77
77
|
};
|
|
@@ -53,7 +53,7 @@ const PopoverContent = class {
|
|
|
53
53
|
return focusable.focusableElements(this.host);
|
|
54
54
|
}
|
|
55
55
|
render() {
|
|
56
|
-
return (index.h(index.Host, { key: '
|
|
56
|
+
return (index.h(index.Host, { key: 'b85780e40b627c6d859af763113bc88e21768f88', slot: "content", class: "r-typography" }, index.h("slot", { key: '7bd5e6152e29a4e20d837c21e1df7bff68a673da' })));
|
|
57
57
|
}
|
|
58
58
|
get host() { return index.getElement(this); }
|
|
59
59
|
};
|
|
@@ -19,7 +19,7 @@ const PopoverHeadline = class {
|
|
|
19
19
|
theming.stopInverseThemeAwareness(this.host, themeContextElement);
|
|
20
20
|
}
|
|
21
21
|
render() {
|
|
22
|
-
return (index.h(index.Host, { key: '
|
|
22
|
+
return (index.h(index.Host, { key: '6b604401e4e82c17a300f00d6af33902b38f493c', slot: "headline" }, index.h("slot", { key: '64c8c6ff661e0317ba3ae0d4f32f6424d91fccbe' })));
|
|
23
23
|
}
|
|
24
24
|
get host() { return index.getElement(this); }
|
|
25
25
|
};
|
|
@@ -61,7 +61,7 @@ const PopoverTrigger = class {
|
|
|
61
61
|
(_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
|
|
62
62
|
}
|
|
63
63
|
render() {
|
|
64
|
-
return (index.h(index.Host, { key: '
|
|
64
|
+
return (index.h(index.Host, { key: 'fe285ee3a91600ee0e0cebeb9f5818eb30d89f06', slot: "trigger", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, index.h("slot", { key: '3782871f7aac634d3c1ccef2f516cdf00916b4f6' })));
|
|
65
65
|
}
|
|
66
66
|
get host() { return index.getElement(this); }
|
|
67
67
|
};
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-DJ4H_bFj.js');
|
|
4
4
|
|
|
5
|
-
const popoverCss = ":host{position:relative;overflow:visible;color:var(--r-text-inverse);font-family:var(--r-font-family-text, system-ui);font-weight:var(--r-font-weight-regular, 400);font-size:var(--r-font-size-400, 1rem);text-align:left;--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 slot{display:contents}:host([size=s]){--r-popover--board--max-width:375px}:host([size=l]){--r-popover--board--max-width:500px}:host([data-open=true]){--r-popover--pointer--display:block;--r-popover--board--visibility:visible;--r-popover--board--left:var(--r-popover--trigger--left);--r-popover--board--top:var(--r-popover--trigger--top)}:host([data-open=true]) ::slotted([slot=trigger]){--r-popover--trigger--display:none}:host([data-vertical=top]){--r-popover--pointer--top:100%;--r-popover--pointer--transform:rotate(0deg) translate(0,-1px)}:host([data-vertical=bottom]){--r-popover--pointer--bottom:100%;--r-popover--pointer--transform:rotate(180deg)}:host([data-vertical=middle]){--r-popover--pointer--top:calc(50% - var(--pointer--height)/2);--r-popover--pointer--bottom:auto}:host([data-horizontal=left]){--r-popover--board--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0) + var(--board--shift));--r-popover--pointer--left:calc(100% - var(--r-popover--trigger--width, 0)/2 - var(--board--shift) - var(--pointer--width)/2)}:host([data-horizontal=right]){--r-popover--pointer--left:calc(var(--r-popover--trigger--width, 0)/2 + var(--pointer--width)/2)}:host([data-horizontal=center]){--r-popover--pointer--left:calc(50% - var(--pointer--width)/2)}:host([data-vertical=top][data-horizontal=left]){--r-popover--board--transform:translate(-100%, calc(-100% - var(--pointer--spacer) - var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=top][data-horizontal=right]){--r-popover--board--transform:translate(calc(0px - var(--board--shift)), calc(-100% - var(--pointer--spacer) - var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=top][data-horizontal=center]){--r-popover--board--transform:translate(calc(-50% + var(--r-popover--trigger--width, 0)/2), calc(-100% - var(--pointer--spacer) - var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=top][data-horizontal=cover]){--r-popover--pointer--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0)/2 - var(--r-popover--pointer--width, var(--pointer--width))/2);--r-popover--board--left:0;--r-popover--board--transform:translate(0, calc(-100% - var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=middle][data-horizontal=left]){--r-popover--board--left:var(--r-popover--trigger--left, 0);--r-popover--board--transform:translate(calc(-100% - var(--pointer--height) - var(--pointer--spacer)), calc(-50% + var(--r-popover--trigger--height, 0)/2));--r-popover--pointer--left:100%;--r-popover--pointer--right:auto;--r-popover--pointer--transform:rotate(-90deg) translate(0, calc(0px - var(--pointer--spacer)))}:host([data-vertical=middle][data-horizontal=right]){--r-popover--board--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0) + var(--pointer--height) + var(--pointer--spacer));--r-popover--board--transform:translate(0, calc(-50% + var(--r-popover--trigger--height, 0)/2));--r-popover--pointer--top:calc(50% - var(--pointer--height)/2);--r-popover--pointer--left:auto;--r-popover--pointer--right:100%;--r-popover--pointer--transform:rotate(90deg) translate(0, calc(0px - var(--pointer--spacer)))}:host([data-vertical=middle][data-horizontal=center]){--r-popover--pointer--display:none;--r-popover--board--transform:translate(calc(-50% + var(--r-popover--trigger--width, 0)/2), calc(-50% + var(--r-popover--trigger--height, 0)/2))}:host([data-vertical=middle][data-horizontal=cover]){--r-popover--pointer--display:none;--r-popover--board--left:0;--r-popover--board--transform:translate(0, calc(-50% + var(--r-popover--trigger--height, 0)/2))}:host([data-vertical=bottom][data-horizontal=left]){--r-popover--board--transform:translate(-100%, calc(var(--r-popover--trigger--height, 0) + var(--pointer--spacer) + var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=bottom][data-horizontal=right]){--r-popover--board--transform:translate(calc(0px - var(--board--shift)), calc(var(--r-popover--trigger--height, 0) + var(--r-popover--pointer--height, var(--pointer--height)) + var(--pointer--spacer)))}:host([data-vertical=bottom][data-horizontal=center]){--r-popover--board--transform:translate(calc(-50% + var(--r-popover--trigger--width, 0)/2), calc(var(--r-popover--trigger--height, 0) + var(--pointer--spacer) + var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=bottom][data-horizontal=cover]){--r-popover--pointer--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0)/2 - var(--r-popover--pointer--width, var(--pointer--width))/2);--r-popover--board--left:0;--r-popover--board--transform:translate(0, calc(var(--r-popover--trigger--height, 0) + var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=cover]){--r-popover--board--top:0;--r-popover--board--height:100%;--r-popover--board-content--height:100%;--r-popover--pointer--top:calc(var(--r-popover--trigger--top, 0) + var(--r-popover--trigger--height)/2 - var(--pointer--height)/2);--r-popover--pointer--bottom:auto}:host([data-vertical=cover][data-content-has-scroll=false]){--r-popover--board--top:var(--r-popover--trigger--top, 0)}:host([data-vertical=cover][data-horizontal=left]){--r-popover--board--left:var(--r-popover--trigger--left, 0);--r-popover--board--transform:translate(calc(-100% - var(--pointer--spacer) - var(--pointer--height)), 0);--r-popover--pointer--left:100%;--r-popover--pointer--right:auto;--r-popover--pointer--transform:rotate(-90deg) translate(0, calc(0px - var(--pointer--spacer)))}:host([data-vertical=cover][data-horizontal=right]){--r-popover--board--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0) + var(--pointer--width));--r-popover--pointer--left:auto;--r-popover--pointer--right:100%;--r-popover--pointer--transform:rotate(90deg) translate(0, calc(0px - var(--pointer--spacer)))}:host([data-vertical=cover][data-horizontal=center]),:host([data-vertical=cover][data-horizontal=cover]){--r-popover--pointer--display:none;--r-popover--board--transform:translate(calc(-50% + var(--r-popover--trigger--width, 0)/2), 0)}:host([data-vertical=cover][data-horizontal=cover]){--r-popover--pointer--display:none;--r-popover--board--transform:none;--r-popover--board--height:100%;--r-popover--board--width:100%;--r-popover--board--left:0}:host([data-fixed-top=true]){--r-popover--board-container--height:var(--r-popover--trigger--top, var(--board--max-height))}:host([dismiss-mode=manual]){--r-popover--board-content--padding:1.5rem 3.5rem 1.5rem 1.5rem}.r-popover{position:var(--r-popover--position, relative);display:var(--r-popover--display, inline-flex)}.r-popover--dismiss{position:var(--r-popover--dismiss--position, absolute);top:var(--r-popover--dismiss--top, 20px);right:var(--r-popover--dismiss--right, 20px);color:var(--r-text-inverse)}.r-popover--trigger{border:var(--r-popover--trigger--border, none);background:var(--r-popover--trigger--background, none);padding:var(--r-popover--trigger--padding, 0);cursor:var(--r-popover--trigger--cursor, pointer);display:var(--r-popover--trigger--display, inline-flex);align-items:var(--r-popover--trigger--align-items, center);justify-content:var(--r-popover--trigger--justify-content, center);min-width:var(--r-popover--trigger--min-width, unset);min-height:var(--r-popover--trigger--min-height, unset)}.r-popover--trigger:focus{box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);outline:2px solid var(--r-border-focused, #0071e3);outline-offset:2px}.r-popover--board{position:var(--r-popover--board--position, fixed);top:var(--r-popover--board--top, -1000em);right:var(--r-popover--board--right, auto);bottom:var(--r-popover--board--bottom, auto);left:var(--r-popover--board--left, -1000em);visibility:var(--r-popover--board--visibility, hidden);width:var(--r-popover--board--width, 100%);min-width:var(--r-popover--board--max-width, var(--board--min-width));max-width:var(--r-popover--board--max-width, var(--board--max-width));height:var(--r-popover--board--height, auto);max-height:var(--r-popover--board--max-height, var(--board--max-height));background-color:var(--r-popover--board--background-color, var(--r-background-inverse));color:var(--r-popover--board--color, var(--r-text-inverse));border:var(--r-popover--board--border, none);transform:var(--r-popover--board--transform, none);box-sizing:var(--r-popover--board--box-sizing, border-box);padding:var(--r-popover--board--padding, 0);margin:var(--r-popover--board--margin, 0);overflow:var(--r-popover--board--overflow, visible)}.r-popover--board-content{display:var(--r-popover--board-content--display, flex);flex-direction:var(--r-popover--board-content--flex-direction, column);gap:var(--r-popover--board-content--gap, 1.5rem);overflow:var(--r-popover--board-content--overflow, auto);height:var(--r-popover--board-content--height, auto);max-height:var(--r-popover--board-content--max-height, var(--board--max-height));padding:var(--r-popover--board-content--padding, 1.5rem);box-sizing:var(--r-popover--board-content--box-sizing, border-box)}.r-popover--board-pointer{display:var(--r-popover--pointer--display, flex);width:var(--r-popover--pointer--width, var(--pointer--width));height:var(--r-popover--pointer--height, var(--pointer--height));position:var(--r-popover--pointer--position, absolute);top:var(--r-popover--pointer--top, auto);right:var(--r-popover--pointer--right, auto);bottom:var(--r-popover--pointer--bottom, auto);left:var(--r-popover--pointer--left, auto);color:var(--r-popover--pointer--color, var(--r-background-inverse));transform:var(--r-popover--pointer--transform, none);transform-origin:var(--r-popover--pointer--transform-origin, center)}.r-popover--board-pointer>svg{display:flex}";
|
|
5
|
+
const popoverCss = ":host{position:relative;overflow:visible;color:var(--r-text-inverse);font-family:var(--r-font-family-text, system-ui);font-weight:var(--r-font-weight-regular, 400);font-size:var(--r-font-size-400, 1rem);text-align:left}:host slot{display:contents}:host{--board--shift:1rem;--board--min-width:304px;--board--max-width:504px;--board--max-height:320px;--pointer--width:1rem;--pointer--height:0.5rem;--pointer--spacer:0.25rem}:host([data-open=true]){--r-popover--pointer--display:block;--r-popover--board--visibility:visible;--r-popover--board--left:var(--r-popover--trigger--left);--r-popover--board--top:var(--r-popover--trigger--top)}:host([data-open=true]) ::slotted([slot=trigger]){--r-popover--trigger--display:none}:host([data-vertical=top]){--r-popover--pointer--top:100%;--r-popover--pointer--transform:rotate(0deg) translate(0,-1px)}:host([data-vertical=bottom]){--r-popover--pointer--bottom:100%;--r-popover--pointer--transform:rotate(180deg)}:host([data-vertical=middle]){--r-popover--pointer--top:calc(50% - var(--pointer--height)/2);--r-popover--pointer--bottom:auto}:host([data-horizontal=left]){--r-popover--board--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0) + var(--board--shift));--r-popover--pointer--left:calc(100% - var(--r-popover--trigger--width, 0)/2 - var(--board--shift) - var(--pointer--width)/2)}:host([data-horizontal=right]){--r-popover--pointer--left:calc(var(--r-popover--trigger--width, 0)/2 + var(--pointer--width)/2)}:host([data-horizontal=center]){--r-popover--pointer--left:calc(50% - var(--pointer--width)/2)}:host([data-vertical=top][data-horizontal=left]){--r-popover--board--transform:translate(-100%, calc(-100% - var(--pointer--spacer) - var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=top][data-horizontal=right]){--r-popover--board--transform:translate(calc(0px - var(--board--shift)), calc(-100% - var(--pointer--spacer) - var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=top][data-horizontal=center]){--r-popover--board--transform:translate(calc(-50% + var(--r-popover--trigger--width, 0)/2), calc(-100% - var(--pointer--spacer) - var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=top][data-horizontal=cover]){--r-popover--pointer--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0)/2 - var(--r-popover--pointer--width, var(--pointer--width))/2);--r-popover--board--left:0;--r-popover--board--transform:translate(0, calc(-100% - var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=middle][data-horizontal=left]){--r-popover--board--left:var(--r-popover--trigger--left, 0);--r-popover--board--transform:translate(calc(-100% - var(--pointer--height) - var(--pointer--spacer)), calc(-50% + var(--r-popover--trigger--height, 0)/2));--r-popover--pointer--left:100%;--r-popover--pointer--right:auto;--r-popover--pointer--transform:rotate(-90deg) translate(0, calc(0px - var(--pointer--spacer)))}:host([data-vertical=middle][data-horizontal=right]){--r-popover--board--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0) + var(--pointer--height) + var(--pointer--spacer));--r-popover--board--transform:translate(0, calc(-50% + var(--r-popover--trigger--height, 0)/2));--r-popover--pointer--top:calc(50% - var(--pointer--height)/2);--r-popover--pointer--left:auto;--r-popover--pointer--right:100%;--r-popover--pointer--transform:rotate(90deg) translate(0, calc(0px - var(--pointer--spacer)))}:host([data-vertical=middle][data-horizontal=center]){--r-popover--pointer--display:none;--r-popover--board--transform:translate(calc(-50% + var(--r-popover--trigger--width, 0)/2), calc(-50% + var(--r-popover--trigger--height, 0)/2))}:host([data-vertical=middle][data-horizontal=cover]){--r-popover--pointer--display:none;--r-popover--board--left:0;--r-popover--board--transform:translate(0, calc(-50% + var(--r-popover--trigger--height, 0)/2))}:host([data-vertical=bottom][data-horizontal=left]){--r-popover--board--transform:translate(-100%, calc(var(--r-popover--trigger--height, 0) + var(--pointer--spacer) + var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=bottom][data-horizontal=right]){--r-popover--board--transform:translate(calc(0px - var(--board--shift)), calc(var(--r-popover--trigger--height, 0) + var(--r-popover--pointer--height, var(--pointer--height)) + var(--pointer--spacer)))}:host([data-vertical=bottom][data-horizontal=center]){--r-popover--board--transform:translate(calc(-50% + var(--r-popover--trigger--width, 0)/2), calc(var(--r-popover--trigger--height, 0) + var(--pointer--spacer) + var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=bottom][data-horizontal=cover]){--r-popover--pointer--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0)/2 - var(--r-popover--pointer--width, var(--pointer--width))/2);--r-popover--board--left:0;--r-popover--board--transform:translate(0, calc(var(--r-popover--trigger--height, 0) + var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=cover]){--r-popover--board--top:0;--r-popover--board--height:100%;--r-popover--board-content--height:100%;--r-popover--pointer--top:calc(var(--r-popover--trigger--top, 0) + var(--r-popover--trigger--height)/2 - var(--pointer--height)/2);--r-popover--pointer--bottom:auto}:host([data-vertical=cover][data-content-has-scroll=false]){--r-popover--board--top:var(--r-popover--trigger--top, 0)}:host([data-vertical=cover][data-horizontal=left]){--r-popover--board--left:var(--r-popover--trigger--left, 0);--r-popover--board--transform:translate(calc(-100% - var(--pointer--spacer) - var(--pointer--height)), 0);--r-popover--pointer--left:100%;--r-popover--pointer--right:auto;--r-popover--pointer--transform:rotate(-90deg) translate(0, calc(0px - var(--pointer--spacer)))}:host([data-vertical=cover][data-horizontal=right]){--r-popover--board--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0) + var(--pointer--width));--r-popover--pointer--left:auto;--r-popover--pointer--right:100%;--r-popover--pointer--transform:rotate(90deg) translate(0, calc(0px - var(--pointer--spacer)))}:host([data-vertical=cover][data-horizontal=center]),:host([data-vertical=cover][data-horizontal=cover]){--r-popover--pointer--display:none;--r-popover--board--transform:translate(calc(-50% + var(--r-popover--trigger--width, 0)/2), 0)}:host([data-vertical=cover][data-horizontal=cover]){--r-popover--pointer--display:none;--r-popover--board--transform:none;--r-popover--board--height:100%;--r-popover--board--width:100%;--r-popover--board--left:0}:host([data-fixed-top=true]){--r-popover--board-container--height:var(--r-popover--trigger--top, var(--board--max-height))}:host([dismiss-mode=manual]){--r-popover--board-content--padding:1.5rem 3.5rem 1.5rem 1.5rem}.r-popover{position:var(--r-popover--position, relative);display:var(--r-popover--display, inline-flex)}.r-popover--dismiss{position:var(--r-popover--dismiss--position, absolute);top:var(--r-popover--dismiss--top, 20px);right:var(--r-popover--dismiss--right, 20px);color:var(--r-text-inverse)}.r-popover--dismiss:hover{--r-icon-button--background-color:var(--r-background-interactive-hovered-inverse, rgba(243, 241, 240, 0.04))}.r-popover--dismiss:active{--r-icon-button--background-color:var(--r-background-interactive-pressed-inverse, rgba(243, 241, 240, 0.12))}.r-popover--trigger{border:var(--r-popover--trigger--border, none);background:var(--r-popover--trigger--background, none);padding:var(--r-popover--trigger--padding, 0);cursor:var(--r-popover--trigger--cursor, pointer);display:var(--r-popover--trigger--display, inline-flex);align-items:var(--r-popover--trigger--align-items, center);justify-content:var(--r-popover--trigger--justify-content, center);min-width:var(--r-popover--trigger--min-width, unset);min-height:var(--r-popover--trigger--min-height, unset)}.r-popover--trigger:focus{box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);outline:2px solid var(--r-border-focused, #0071e3);outline-offset:2px}.r-popover--board{position:var(--r-popover--board--position, fixed);top:var(--r-popover--board--top, -1000em);right:var(--r-popover--board--right, auto);bottom:var(--r-popover--board--bottom, auto);left:var(--r-popover--board--left, -1000em);visibility:var(--r-popover--board--visibility, hidden);width:var(--r-popover--board--width, 100%);min-width:var(--board--min-width);max-width:var(--board--max-width);height:var(--r-popover--board--height, auto);max-height:var(--r-popover--board--max-height, var(--board--max-height));background-color:var(--r-popover--board--background-color, var(--r-background-inverse));color:var(--r-popover--board--color, var(--r-text-inverse));border:var(--r-popover--board--border, none);transform:var(--r-popover--board--transform, none);box-sizing:var(--r-popover--board--box-sizing, border-box);padding:var(--r-popover--board--padding, 0);margin:var(--r-popover--board--margin, 0);overflow:var(--r-popover--board--overflow, visible)}.r-popover--board-content{display:var(--r-popover--board-content--display, flex);flex-direction:var(--r-popover--board-content--flex-direction, column);gap:var(--r-popover--board-content--gap, 1.5rem);overflow:var(--r-popover--board-content--overflow, auto);height:var(--r-popover--board-content--height, auto);max-height:var(--r-popover--board-content--max-height, var(--board--max-height));padding:var(--r-popover--board-content--padding, 1.5rem);box-sizing:var(--r-popover--board-content--box-sizing, border-box)}.r-popover--board-pointer{display:var(--r-popover--pointer--display, flex);width:var(--r-popover--pointer--width, var(--pointer--width));height:var(--r-popover--pointer--height, var(--pointer--height));position:var(--r-popover--pointer--position, absolute);top:var(--r-popover--pointer--top, auto);right:var(--r-popover--pointer--right, auto);bottom:var(--r-popover--pointer--bottom, auto);left:var(--r-popover--pointer--left, auto);color:var(--r-popover--pointer--color, var(--r-background-inverse));transform:var(--r-popover--pointer--transform, none);transform-origin:var(--r-popover--pointer--transform-origin, center)}.r-popover--board-pointer>svg{display:flex}";
|
|
6
6
|
|
|
7
7
|
const Popover = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -290,8 +290,8 @@ const Popover = class {
|
|
|
290
290
|
this.open ? this.show() : this.hide();
|
|
291
291
|
}
|
|
292
292
|
render() {
|
|
293
|
-
return (index.h(index.Host, { key: '
|
|
294
|
-
index.h("r-icon-button", { key: '
|
|
293
|
+
return (index.h(index.Host, { key: '13318df823b3f54e05823c9fc9821839f56583b2', id: this.uniqueId, "data-position": this.positionState, "data-open": `${this.isOpen}`, open: this.isOpen }, index.h("div", { key: '3f750ac2a82236f6a4074fa419b44f0c42f2b7e6', class: "r-popover" }, index.h("button", { key: '46e4bb247c2eda0e0cc0c4774acac6daf8801bc4', class: "r-popover--trigger", "aria-label": this.triggerAriaLabel, ref: el => this.triggerElement = el, popoverTarget: `${this.uniqueId}-board`, popoverTargetAction: this.triggerAction }, index.h("slot", { key: 'fac2e6d0ee9ac8830df16d379a0ec5e873becd58', name: "trigger" })), index.h("div", { key: '636c2ee45476903dc8b812924081f3b45499b18a', class: "r-popover--board", id: `${this.uniqueId}-board`, popover: this.dismissMode, ref: el => this.boardElement = el, onToggle: this.onToggle, onKeyDown: this.onKeyDown }, this.hasDismiss &&
|
|
294
|
+
index.h("r-icon-button", { key: '4f6a1168587faf500cddb85981f0dd7209af4020', ref: el => this.dismissElement = el, class: "r-popover--dismiss", name: "cross", onClick: this.onClickDismiss, label: this.dismissAriaLabel }), index.h("div", { key: 'bfa17c2df8022a01192550c315ba32e3a5247e3f', class: "r-popover--board-content" }, index.h("slot", { key: '001d74737028aee0d413e9ed679ff853070d5559', name: "headline" }), index.h("slot", { key: '9a33119f2e2f6bf10f0005f83283a1e964332583', name: "content" }), index.h("slot", { key: '2ff477aed3ef83d6bfff4fb3fdaeb3501dfba7c7', name: "action" })), index.h("div", { key: '6c0b891bc2e9def0892f65fe8882deef565b2037', class: "r-popover--board-pointer", "aria-hidden": "true" }, index.h("svg", { key: 'e9da72e80bb395041f4a9cc269cf835b643a335c', width: "16", height: "8", viewBox: "0 0 16 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '44eb8e0fa2c3d294074787595097fcdf82311052', d: "M8 8L0 0L16 0L8 8Z", fill: "currentColor" })))))));
|
|
295
295
|
}
|
|
296
296
|
get host() { return index.getElement(this); }
|
|
297
297
|
static get watchers() { return {
|
|
@@ -17,7 +17,7 @@ const ProgressBar = class {
|
|
|
17
17
|
max: '100',
|
|
18
18
|
'aria-label': rAriaLabel
|
|
19
19
|
};
|
|
20
|
-
return (index.h(index.Host, { key: '
|
|
20
|
+
return (index.h(index.Host, { key: 'f79c73155a42eef63910abde1fc2cebd147b7129' }, index.h("progress", Object.assign({ key: 'ce94e9a20124fa8cd1561612e2797e17f0ebe19f' }, progressBarAttrs, { class: "r-progress-bar" }))));
|
|
21
21
|
}
|
|
22
22
|
};
|
|
23
23
|
ProgressBar.style = progressBarCss;
|
|
@@ -9,7 +9,7 @@ const RadioButtonDescription = class {
|
|
|
9
9
|
index.registerInstance(this, hostRef);
|
|
10
10
|
}
|
|
11
11
|
render() {
|
|
12
|
-
return (index.h(index.Host, { key: '
|
|
12
|
+
return (index.h(index.Host, { key: 'cd678f2b6c1e00e95ecfc56b1e460b3b3ab37597', slot: "description" }, index.h("div", { key: 'a19901417798ef6dacd6ad82c9eab7e2a8227cd5', class: "r-radio-button-description", style: { display: 'contents' } }, index.h("slot", { key: 'ba9308abf507f84affb24bb7eb8a43c8da4fd613' }))));
|
|
13
13
|
}
|
|
14
14
|
get host() { return index.getElement(this); }
|
|
15
15
|
};
|
|
@@ -9,7 +9,7 @@ const RadioButtonLeading = class {
|
|
|
9
9
|
index.registerInstance(this, hostRef);
|
|
10
10
|
}
|
|
11
11
|
render() {
|
|
12
|
-
return (index.h(index.Host, { key: '
|
|
12
|
+
return (index.h(index.Host, { key: '272870387e6e1abe3db2a67a38cfcd502a0e5aac', slot: "leading" }, index.h("div", { key: '7fd29eb8b31cda51e7a3bebebf8d80c7b0a79622', class: "r-radio-button-leading", style: { display: 'contents' } }, index.h("slot", { key: '542afc33263c2f06007b1c50225457af3e1b9051' }))));
|
|
13
13
|
}
|
|
14
14
|
get host() { return index.getElement(this); }
|
|
15
15
|
};
|
|
@@ -9,7 +9,7 @@ const RadioButtonTitle = class {
|
|
|
9
9
|
index.registerInstance(this, hostRef);
|
|
10
10
|
}
|
|
11
11
|
render() {
|
|
12
|
-
return (index.h(index.Host, { key: '
|
|
12
|
+
return (index.h(index.Host, { key: '705ecfa00df2a6e5f1976e1e45dca02c2d63d0fb', slot: "title" }, index.h("div", { key: '9845596a7638b53995157c26ee89be55677ff2e9', class: "r-radio-button-title", style: { display: 'contents' } }, index.h("slot", { key: '5ec9a59d7d71f976513dddb471676d640e13e239' }))));
|
|
13
13
|
}
|
|
14
14
|
get host() { return index.getElement(this); }
|
|
15
15
|
};
|