@riverty/web-components 5.6.0 → 5.8.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 +56 -0
- package/custom-elements.json +28 -3
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/r-alert.cjs.entry.js +24 -8
- package/dist/cjs/r-badge.cjs.entry.js +1 -1
- package/dist/cjs/r-button.cjs.entry.js +1 -1
- package/dist/cjs/r-checkbox-group.cjs.entry.js +28 -14
- package/dist/cjs/r-checkbox.cjs.entry.js +25 -10
- package/dist/cjs/r-hint_3.cjs.entry.js +1 -1
- package/dist/cjs/r-icon-button.cjs.entry.js +1 -1
- package/dist/cjs/r-icon.cjs.entry.js +1 -1
- package/dist/cjs/r-input-code.cjs.entry.js +30 -17
- package/dist/cjs/r-input-date.cjs.entry.js +86 -16
- package/dist/cjs/r-input-password.cjs.entry.js +25 -9
- package/dist/cjs/r-input-phone-number.cjs.entry.js +27 -14
- package/dist/cjs/r-input.cjs.entry.js +27 -14
- package/dist/cjs/r-pagination.cjs.entry.js +1 -1
- package/dist/cjs/r-popover-action.cjs.entry.js +1 -1
- package/dist/cjs/r-popover.cjs.entry.js +1 -1
- package/dist/cjs/r-radio-button.cjs.entry.js +1 -1
- package/dist/cjs/r-radio-group.cjs.entry.js +21 -17
- package/dist/cjs/r-select.cjs.entry.js +113 -19
- package/dist/cjs/r-textarea.cjs.entry.js +19 -6
- package/dist/cjs/r-toast.cjs.entry.js +50 -19
- package/dist/cjs/web-components.cjs.js +1 -1
- package/dist/collection/components/alert/alert.css +56 -16
- package/dist/collection/components/alert/alert.js +48 -11
- package/dist/collection/components/alert/exports.js +1 -1
- package/dist/collection/components/badge/badge.css +8 -8
- package/dist/collection/components/button/button.css +6 -7
- package/dist/collection/components/checkbox/checkbox.js +45 -10
- package/dist/collection/components/checkbox-group/checkbox-group.css +2 -2
- package/dist/collection/components/checkbox-group/checkbox-group.js +47 -13
- package/dist/collection/components/hint/hint.css +1 -1
- 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/input/input.css +1 -1
- package/dist/collection/components/input/input.js +46 -13
- package/dist/collection/components/input-code/input-code.css +1 -1
- package/dist/collection/components/input-code/input-code.js +49 -16
- package/dist/collection/components/input-date/input-date.css +1 -1
- package/dist/collection/components/input-date/input-date.js +235 -16
- package/dist/collection/components/input-password/input-password.js +45 -9
- package/dist/collection/components/input-phone-number/input-phone-number.js +47 -14
- package/dist/collection/components/pagination/pagination.css +23 -23
- package/dist/collection/components/popover/popover.css +11 -3
- package/dist/collection/components/popover-action/popover-action.css +3 -5
- package/dist/collection/components/radio-button/radio-button.css +1 -1
- package/dist/collection/components/radio-group/radio-group.css +2 -2
- package/dist/collection/components/radio-group/radio-group.js +21 -17
- package/dist/collection/components/select/select.css +2 -2
- package/dist/collection/components/select/select.js +193 -21
- package/dist/collection/components/textarea/textarea.css +1 -1
- package/dist/collection/components/textarea/textarea.js +38 -5
- package/dist/collection/components/toast/toast.css +29 -21
- package/dist/collection/components/toast/toast.js +94 -20
- package/dist/esm/loader.js +1 -1
- package/dist/esm/r-alert.entry.js +24 -8
- package/dist/esm/r-badge.entry.js +1 -1
- package/dist/esm/r-button.entry.js +1 -1
- package/dist/esm/r-checkbox-group.entry.js +28 -14
- package/dist/esm/r-checkbox.entry.js +25 -10
- package/dist/esm/r-hint_3.entry.js +1 -1
- package/dist/esm/r-icon-button.entry.js +1 -1
- package/dist/esm/r-icon.entry.js +1 -1
- package/dist/esm/r-input-code.entry.js +30 -17
- package/dist/esm/r-input-date.entry.js +86 -16
- package/dist/esm/r-input-password.entry.js +25 -9
- package/dist/esm/r-input-phone-number.entry.js +27 -14
- package/dist/esm/r-input.entry.js +27 -14
- package/dist/esm/r-pagination.entry.js +1 -1
- package/dist/esm/r-popover-action.entry.js +1 -1
- package/dist/esm/r-popover.entry.js +1 -1
- package/dist/esm/r-radio-button.entry.js +1 -1
- package/dist/esm/r-radio-group.entry.js +21 -17
- package/dist/esm/r-select.entry.js +113 -19
- package/dist/esm/r-textarea.entry.js +19 -6
- package/dist/esm/r-toast.entry.js +50 -19
- package/dist/esm/web-components.js +1 -1
- package/dist/types/components/alert/alert.d.ts +3 -0
- package/dist/types/components/alert/exports.d.ts +1 -1
- package/dist/types/components/checkbox/checkbox.d.ts +5 -0
- package/dist/types/components/checkbox-group/checkbox-group.d.ts +6 -0
- package/dist/types/components/input/input.d.ts +5 -0
- package/dist/types/components/input-code/input-code.d.ts +5 -0
- package/dist/types/components/input-date/input-date.d.ts +30 -0
- package/dist/types/components/input-password/input-password.d.ts +5 -0
- package/dist/types/components/input-phone-number/input-phone-number.d.ts +5 -0
- package/dist/types/components/radio-group/radio-group.d.ts +1 -2
- package/dist/types/components/select/select.d.ts +34 -2
- package/dist/types/components/textarea/textarea.d.ts +5 -0
- package/dist/types/components/toast/toast.d.ts +10 -2
- package/dist/types/components.d.ts +143 -8
- package/dist/web-components/bundled-icons/riverty-kit.json +1 -1
- package/dist/web-components/p-15ac0fdd.entry.js +1 -0
- package/dist/web-components/p-1c956370.entry.js +1 -0
- package/dist/web-components/p-2a512983.entry.js +1 -0
- package/dist/web-components/p-2e18e762.entry.js +1 -0
- package/dist/web-components/{p-72c0c0d8.entry.js → p-3078b2b8.entry.js} +1 -1
- package/dist/web-components/p-56da04d8.entry.js +1 -0
- package/dist/web-components/p-5744d75c.entry.js +1 -0
- package/dist/web-components/p-5bbd6e3c.entry.js +1 -0
- package/dist/web-components/p-5e6aabd8.entry.js +1 -0
- package/dist/web-components/p-656229de.entry.js +1 -0
- package/dist/web-components/p-6a4f3836.entry.js +1 -0
- package/dist/web-components/p-7775228c.entry.js +1 -0
- package/dist/web-components/{p-29a1e75f.entry.js → p-7ad8e78b.entry.js} +1 -1
- package/dist/web-components/p-8563a1ab.entry.js +1 -0
- package/dist/web-components/p-ad9b2a48.entry.js +1 -0
- package/dist/web-components/{p-e49b1ec3.entry.js → p-b2f03016.entry.js} +1 -1
- package/dist/web-components/p-b87ad83b.entry.js +1 -0
- package/dist/web-components/{p-77155630.entry.js → p-b98ab649.entry.js} +1 -1
- package/dist/web-components/{p-f1e22caa.entry.js → p-d1379ac6.entry.js} +1 -1
- package/dist/web-components/p-dbe579e8.entry.js +1 -0
- package/dist/web-components/p-f2577a3c.entry.js +1 -0
- package/dist/web-components/web-components.esm.js +1 -1
- package/package.json +6 -6
- package/dist/web-components/p-1ae69897.entry.js +0 -1
- package/dist/web-components/p-230e44ae.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-8028c2a9.entry.js +0 -1
- package/dist/web-components/p-828cb164.entry.js +0 -1
- package/dist/web-components/p-89136369.entry.js +0 -1
- package/dist/web-components/p-8c577cda.entry.js +0 -1
- package/dist/web-components/p-96ddeb7f.entry.js +0 -1
- package/dist/web-components/p-9b08e9ee.entry.js +0 -1
- package/dist/web-components/p-9eb1f262.entry.js +0 -1
- package/dist/web-components/p-a58124c4.entry.js +0 -1
- package/dist/web-components/p-a5be3395.entry.js +0 -1
- package/dist/web-components/p-b2cec978.entry.js +0 -1
- package/dist/web-components/p-d3ff65b0.entry.js +0 -1
- package/dist/web-components/p-f770e22b.entry.js +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, F as Fragment } from './index-Da7qOBFr.js';
|
|
2
2
|
|
|
3
|
-
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
|
|
3
|
+
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)}";
|
|
4
4
|
|
|
5
5
|
const RPagination = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -3,7 +3,7 @@ import { s as setupInverseThemeAwareness, a as stopInverseThemeAwareness } from
|
|
|
3
3
|
import { f as focusableElements } from './focusable-ky1yonnS.js';
|
|
4
4
|
import './style-observer-4Uv3PpKT.js';
|
|
5
5
|
|
|
6
|
-
const popoverActionCss = ":host slot{display:contents}::slotted(r-button){--r-button--color:var(--r-text-regular);--r-button--border-
|
|
6
|
+
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)}";
|
|
7
7
|
|
|
8
8
|
const PopoverAction = class {
|
|
9
9
|
constructor(hostRef) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
|
|
2
2
|
|
|
3
|
-
const popoverCss = ":host{position:relative;overflow:visible;color:var(--r-text-inverse);font-family:var(--r-font-family-text, system-ui);font-weight:var(--r-font-weight-regular, 400);font-size:var(--r-font-size-400, 1rem);text-align:left;--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}";
|
|
3
|
+
const popoverCss = ":host{position:relative;overflow:visible;color:var(--r-text-inverse);font-family:var(--r-font-family-text, system-ui);font-weight:var(--r-font-weight-regular, 400);font-size:var(--r-font-size-400, 1rem);text-align:left}:host slot{display:contents}:host{--board--shift:1rem;--board--min-width:304px;--board--max-width:504px;--board--max-height:320px;--pointer--width:1rem;--pointer--height:0.5rem;--pointer--spacer:0.25rem}:host([size=s]){--r-popover--board--max-width:375px}:host([size=l]){--r-popover--board--max-width:500px}:host([data-open=true]){--r-popover--pointer--display:block;--r-popover--board--visibility:visible;--r-popover--board--left:var(--r-popover--trigger--left);--r-popover--board--top:var(--r-popover--trigger--top)}:host([data-open=true]) ::slotted([slot=trigger]){--r-popover--trigger--display:none}:host([data-vertical=top]){--r-popover--pointer--top:100%;--r-popover--pointer--transform:rotate(0deg) translate(0,-1px)}:host([data-vertical=bottom]){--r-popover--pointer--bottom:100%;--r-popover--pointer--transform:rotate(180deg)}:host([data-vertical=middle]){--r-popover--pointer--top:calc(50% - var(--pointer--height)/2);--r-popover--pointer--bottom:auto}:host([data-horizontal=left]){--r-popover--board--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0) + var(--board--shift));--r-popover--pointer--left:calc(100% - var(--r-popover--trigger--width, 0)/2 - var(--board--shift) - var(--pointer--width)/2)}:host([data-horizontal=right]){--r-popover--pointer--left:calc(var(--r-popover--trigger--width, 0)/2 + var(--pointer--width)/2)}:host([data-horizontal=center]){--r-popover--pointer--left:calc(50% - var(--pointer--width)/2)}:host([data-vertical=top][data-horizontal=left]){--r-popover--board--transform:translate(-100%, calc(-100% - var(--pointer--spacer) - var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=top][data-horizontal=right]){--r-popover--board--transform:translate(calc(0px - var(--board--shift)), calc(-100% - var(--pointer--spacer) - var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=top][data-horizontal=center]){--r-popover--board--transform:translate(calc(-50% + var(--r-popover--trigger--width, 0)/2), calc(-100% - var(--pointer--spacer) - var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=top][data-horizontal=cover]){--r-popover--pointer--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0)/2 - var(--r-popover--pointer--width, var(--pointer--width))/2);--r-popover--board--left:0;--r-popover--board--transform:translate(0, calc(-100% - var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=middle][data-horizontal=left]){--r-popover--board--left:var(--r-popover--trigger--left, 0);--r-popover--board--transform:translate(calc(-100% - var(--pointer--height) - var(--pointer--spacer)), calc(-50% + var(--r-popover--trigger--height, 0)/2));--r-popover--pointer--left:100%;--r-popover--pointer--right:auto;--r-popover--pointer--transform:rotate(-90deg) translate(0, calc(0px - var(--pointer--spacer)))}:host([data-vertical=middle][data-horizontal=right]){--r-popover--board--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0) + var(--pointer--height) + var(--pointer--spacer));--r-popover--board--transform:translate(0, calc(-50% + var(--r-popover--trigger--height, 0)/2));--r-popover--pointer--top:calc(50% - var(--pointer--height)/2);--r-popover--pointer--left:auto;--r-popover--pointer--right:100%;--r-popover--pointer--transform:rotate(90deg) translate(0, calc(0px - var(--pointer--spacer)))}:host([data-vertical=middle][data-horizontal=center]){--r-popover--pointer--display:none;--r-popover--board--transform:translate(calc(-50% + var(--r-popover--trigger--width, 0)/2), calc(-50% + var(--r-popover--trigger--height, 0)/2))}:host([data-vertical=middle][data-horizontal=cover]){--r-popover--pointer--display:none;--r-popover--board--left:0;--r-popover--board--transform:translate(0, calc(-50% + var(--r-popover--trigger--height, 0)/2))}:host([data-vertical=bottom][data-horizontal=left]){--r-popover--board--transform:translate(-100%, calc(var(--r-popover--trigger--height, 0) + var(--pointer--spacer) + var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=bottom][data-horizontal=right]){--r-popover--board--transform:translate(calc(0px - var(--board--shift)), calc(var(--r-popover--trigger--height, 0) + var(--r-popover--pointer--height, var(--pointer--height)) + var(--pointer--spacer)))}:host([data-vertical=bottom][data-horizontal=center]){--r-popover--board--transform:translate(calc(-50% + var(--r-popover--trigger--width, 0)/2), calc(var(--r-popover--trigger--height, 0) + var(--pointer--spacer) + var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=bottom][data-horizontal=cover]){--r-popover--pointer--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0)/2 - var(--r-popover--pointer--width, var(--pointer--width))/2);--r-popover--board--left:0;--r-popover--board--transform:translate(0, calc(var(--r-popover--trigger--height, 0) + var(--r-popover--pointer--height, var(--pointer--height))))}:host([data-vertical=cover]){--r-popover--board--top:0;--r-popover--board--height:100%;--r-popover--board-content--height:100%;--r-popover--pointer--top:calc(var(--r-popover--trigger--top, 0) + var(--r-popover--trigger--height)/2 - var(--pointer--height)/2);--r-popover--pointer--bottom:auto}:host([data-vertical=cover][data-content-has-scroll=false]){--r-popover--board--top:var(--r-popover--trigger--top, 0)}:host([data-vertical=cover][data-horizontal=left]){--r-popover--board--left:var(--r-popover--trigger--left, 0);--r-popover--board--transform:translate(calc(-100% - var(--pointer--spacer) - var(--pointer--height)), 0);--r-popover--pointer--left:100%;--r-popover--pointer--right:auto;--r-popover--pointer--transform:rotate(-90deg) translate(0, calc(0px - var(--pointer--spacer)))}:host([data-vertical=cover][data-horizontal=right]){--r-popover--board--left:calc(var(--r-popover--trigger--left, 0) + var(--r-popover--trigger--width, 0) + var(--pointer--width));--r-popover--pointer--left:auto;--r-popover--pointer--right:100%;--r-popover--pointer--transform:rotate(90deg) translate(0, calc(0px - var(--pointer--spacer)))}:host([data-vertical=cover][data-horizontal=center]),:host([data-vertical=cover][data-horizontal=cover]){--r-popover--pointer--display:none;--r-popover--board--transform:translate(calc(-50% + var(--r-popover--trigger--width, 0)/2), 0)}:host([data-vertical=cover][data-horizontal=cover]){--r-popover--pointer--display:none;--r-popover--board--transform:none;--r-popover--board--height:100%;--r-popover--board--width:100%;--r-popover--board--left:0}:host([data-fixed-top=true]){--r-popover--board-container--height:var(--r-popover--trigger--top, var(--board--max-height))}:host([dismiss-mode=manual]){--r-popover--board-content--padding:1.5rem 3.5rem 1.5rem 1.5rem}.r-popover{position:var(--r-popover--position, relative);display:var(--r-popover--display, inline-flex)}.r-popover--dismiss{position:var(--r-popover--dismiss--position, absolute);top:var(--r-popover--dismiss--top, 20px);right:var(--r-popover--dismiss--right, 20px);color:var(--r-text-inverse)}.r-popover--dismiss:hover{--r-icon-button--background-color:var(--r-background-interactive-hovered-inverse, rgba(243, 241, 240, 0.04))}.r-popover--dismiss:active{--r-icon-button--background-color:var(--r-background-interactive-pressed-inverse, rgba(243, 241, 240, 0.12))}.r-popover--trigger{border:var(--r-popover--trigger--border, none);background:var(--r-popover--trigger--background, none);padding:var(--r-popover--trigger--padding, 0);cursor:var(--r-popover--trigger--cursor, pointer);display:var(--r-popover--trigger--display, inline-flex);align-items:var(--r-popover--trigger--align-items, center);justify-content:var(--r-popover--trigger--justify-content, center);min-width:var(--r-popover--trigger--min-width, unset);min-height:var(--r-popover--trigger--min-height, unset)}.r-popover--trigger:focus{box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);outline:2px solid var(--r-border-focused, #0071e3);outline-offset:2px}.r-popover--board{position:var(--r-popover--board--position, fixed);top:var(--r-popover--board--top, -1000em);right:var(--r-popover--board--right, auto);bottom:var(--r-popover--board--bottom, auto);left:var(--r-popover--board--left, -1000em);visibility:var(--r-popover--board--visibility, hidden);width:var(--r-popover--board--width, 100%);min-width:var(--r-popover--board--max-width, var(--board--min-width));max-width:var(--r-popover--board--max-width, var(--board--max-width));height:var(--r-popover--board--height, auto);max-height:var(--r-popover--board--max-height, var(--board--max-height));background-color:var(--r-popover--board--background-color, var(--r-background-inverse));color:var(--r-popover--board--color, var(--r-text-inverse));border:var(--r-popover--board--border, none);transform:var(--r-popover--board--transform, none);box-sizing:var(--r-popover--board--box-sizing, border-box);padding:var(--r-popover--board--padding, 0);margin:var(--r-popover--board--margin, 0);overflow:var(--r-popover--board--overflow, visible)}.r-popover--board-content{display:var(--r-popover--board-content--display, flex);flex-direction:var(--r-popover--board-content--flex-direction, column);gap:var(--r-popover--board-content--gap, 1.5rem);overflow:var(--r-popover--board-content--overflow, auto);height:var(--r-popover--board-content--height, auto);max-height:var(--r-popover--board-content--max-height, var(--board--max-height));padding:var(--r-popover--board-content--padding, 1.5rem);box-sizing:var(--r-popover--board-content--box-sizing, border-box)}.r-popover--board-pointer{display:var(--r-popover--pointer--display, flex);width:var(--r-popover--pointer--width, var(--pointer--width));height:var(--r-popover--pointer--height, var(--pointer--height));position:var(--r-popover--pointer--position, absolute);top:var(--r-popover--pointer--top, auto);right:var(--r-popover--pointer--right, auto);bottom:var(--r-popover--pointer--bottom, auto);left:var(--r-popover--pointer--left, auto);color:var(--r-popover--pointer--color, var(--r-background-inverse));transform:var(--r-popover--pointer--transform, none);transform-origin:var(--r-popover--pointer--transform-origin, center)}.r-popover--board-pointer>svg{display:flex}";
|
|
4
4
|
|
|
5
5
|
const Popover = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
|
|
2
2
|
|
|
3
|
-
const radioButtonCss = ":host{display:inline-flex;outline:none;position:relative;pointer-events:auto;border:0.0625rem solid transparent;cursor:pointer;min-width:17.5rem}:host slot{display:contents}:host(:hover:not([disabled]:not([disabled=false])):not([checked]:not([checked=false]))){--r-radio-button--cursor:pointer;--r-radio-button--box--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host(:active:not([disabled]:not([disabled=false])):not([checked]:not([checked=false]))){--r-radio-button--box--border-color:var(--r-border-regular, #282828);--r-radio-button--box--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host(:focus-within),:host(.focused){--r-radio-button--box--box-shadow:0 0 0 4px var(--r-border-focused-outlined, #fff);--r-radio-button--box--outline:2px solid var(--r-border-focused, #0071e3);--r-radio-button--box--outline-offset:1px}:host([checked]:not([checked=false])),:host([checked]:not([checked=false]):hover){cursor:default;--r-radio-button--box--border-color:var(--r-border-regular, #282828);--r-radio-button--box--background-color:var(--r-background-interactive-softest, #fff);--r-radio-button--marker--transform:scale(1)}:host([invalid]:not([invalid=false])),:host([invalid]:not([invalid=false])[checked]:not([checked=false])){--r-radio-button--box--border-color:var(--r-status-error-regular, #
|
|
3
|
+
const radioButtonCss = ":host{display:inline-flex;outline:none;position:relative;pointer-events:auto;border:0.0625rem solid transparent;cursor:pointer;min-width:17.5rem}:host slot{display:contents}:host(:hover:not([disabled]:not([disabled=false])):not([checked]:not([checked=false]))){--r-radio-button--cursor:pointer;--r-radio-button--box--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host(:active:not([disabled]:not([disabled=false])):not([checked]:not([checked=false]))){--r-radio-button--box--border-color:var(--r-border-regular, #282828);--r-radio-button--box--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host(:focus-within),:host(.focused){--r-radio-button--box--box-shadow:0 0 0 4px var(--r-border-focused-outlined, #fff);--r-radio-button--box--outline:2px solid var(--r-border-focused, #0071e3);--r-radio-button--box--outline-offset:1px}:host([checked]:not([checked=false])),:host([checked]:not([checked=false]):hover){cursor:default;--r-radio-button--box--border-color:var(--r-border-regular, #282828);--r-radio-button--box--background-color:var(--r-background-interactive-softest, #fff);--r-radio-button--marker--transform:scale(1)}:host([invalid]:not([invalid=false])),:host([invalid]:not([invalid=false])[checked]:not([checked=false])){--r-radio-button--box--border-color:var(--r-status-error-regular, #b00c15);--r-radio-button--box--background-color:var(--r-status-error-soft, #fef6f6)}:host([disabled]:not([disabled=false])){--r-radio-button--box--opacity:0.4;cursor:not-allowed}.r-radio-button{display:var(--r-radio-button--display, flex);flex:var(--r-radio-button--flex, 1);gap:var(--r-radio-button--gap, var(--r-spacing-075, 0.75rem));position:var(--r-radio-button--position, relative);min-height:var(--r-radio-button--min-height, 24px);user-select:var(--r-radio-button--user-select, none);box-sizing:var(--r-radio-button--box-sizing, border-box);font-family:var(--r-radio-button--font-family, var(--r-font-family-text, system-ui));font-size:var(--r-radio-button--font-size, var(--r-font-size-400, 1rem));line-height:var(--r-radio-button--line-height, var(--r-line-height-m, 1.5rem));text-align:var(--r-radio-button--text-align, left);color:var(--r-radio-button--color, var(--r-text-regular, #282828));opacity:var(--r-radio-button--opacity, 1);box-shadow:var(--r-radio-button--box-shadow, none);outline:var(--r-radio-button--outline, none);cursor:var(--r-radio-button--cursor, inherit);padding:var(--r-radio-button--padding, var(--r-spacing-100, 1rem));margin:var(--r-radio-button--margin, 0);background-color:var(--r-radio-button--background-color, transparent);border-color:var(--r-radio-button--border-color, transparent);border-width:var(--r-radio-button--border-width, 0);border-style:var(--r-radio-button--border-style, solid)}.r-radio-button--input{position:var(--r-radio-button--input--position, absolute);z-index:var(--r-radio-button--input--z-index, -1);opacity:var(--r-radio-button--input--opacity, 0)}.r-radio-button--box{position:var(--r-radio-button--box--position, relative);display:var(--r-radio-button--box--display, block);top:var(--r-radio-button--box--top, 0);left:var(--r-radio-button--box--left, 0);width:var(--r-radio-button--box--width, 1.5rem);height:var(--r-radio-button--box--height, 1.5rem);background-color:var(--r-radio-button--box--background-color, var(--r-background-interactive-softest, #fff));border-width:var(--r-radio-button--box--border-width, 0.0625rem);border-style:var(--r-radio-button--box--border-style, solid);border-color:var(--r-radio-button--box--border-color, var(--r-border-soft, #686868));border-radius:var(--r-radio-button--box--border-radius, 50%);box-sizing:var(--r-radio-button--box--box-sizing, border-box);box-shadow:var(--r-radio-button--box--box-shadow, none);outline:var(--r-radio-button--box--outline, none);outline-offset:var(--r-radio-button--box--outline-offset, 0);cursor:var(--r-radio-button--box--cursor, inherit);opacity:var(--r-radio-button--box--opacity, 1)}.r-radio-button--box::before{content:var(--r-radio-button--marker--content, \"\");display:var(--r-radio-button--marker--display, block);width:var(--r-radio-button--marker--width, 0.75rem);height:var(--r-radio-button--marker--height, 0.75rem);position:var(--r-radio-button--marker--position, absolute);top:var(--r-radio-button--marker--top, calc(50% - 0.375rem));left:var(--r-radio-button--marker--left, calc(50% - 0.375rem));border-radius:var(--r-radio-button--marker--border-radius, 50%);background-color:var(--r-radio-button--marker--background-color, var(--r-background-interactive-regular, #282828));transition:var(--r-radio-button--marker--transition, 0.1s all);transform:var(--r-radio-button--marker--transform, scale(0));transform-origin:var(--r-radio-button--marker--transform-origin, center)}.r-radio-button--text{flex:var(--r-radio-button--text--flex, 1);display:var(--r-radio-button--text--display, flex);flex-direction:var(--r-radio-button--text--flex-direction, column);gap:var(--r-radio-button--text--gap, var(--r-spacing-025, 0.25rem));font-weight:var(--r-radio-button--text--font-weight, var(--r-font-weight-semibold, 600))}.r-radio-button--leading{min-height:var(--r-radio-button--leading--min-height, var(--r-spacing-150, 1.5rem));min-width:var(--r-radio-button--leading--min-width, calc(var(--r-spacing-150, 1.5rem) + 2 * var(--r-spacing-075, 0.75rem)));color:var(--r-radio-button--leading--color, var(--r-icon-soft, #686868));display:var(--r-radio-button--leading--display, flex);justify-content:var(--r-radio-button--leading--justify-content, center);align-items:var(--r-radio-button--leading--align-items, start)}";
|
|
4
4
|
|
|
5
5
|
const RadioButton = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
|
|
2
2
|
import { a as appendControlToFormData } from './formData-DvLT8-y3.js';
|
|
3
3
|
|
|
4
|
-
const radioGroupCss = ":host{display:flex;flex-direction:column;box-sizing:border-box;margin-bottom:var(--r-spacing-100)}:host ::slotted(r-radio-button){display:var(--r-radio-group--slotted-radio-button--display, flex)}:host ::slotted(.focused){--r-radio-button--box-shadow:0 0 0 3px var(--r-border-focused-outlined, #fff), inset 0 0 0 1px var(--r-border-focused-outlined, #fff);--r-radio-button--outline:2px solid var(--r-border-focused, #0071e3);--r-radio-button--outline-offset:2px}:host slot{display:contents}:host([variant=contained]) ::slotted(r-radio-button){padding:0;--r-radio-button--padding:var(--r-spacing-100, 1rem);--r-radio-button--border-color:var(--r-border-soft, #686868);--r-radio-button--border-width:1px}:host([invalid]:not([invalid=false])) ::slotted(r-radio-button){--r-radio-button--box--border-color:var(--r-status-error-regular, #
|
|
4
|
+
const radioGroupCss = ":host{display:flex;flex-direction:column;box-sizing:border-box;margin-bottom:var(--r-spacing-100)}:host ::slotted(r-radio-button){display:var(--r-radio-group--slotted-radio-button--display, flex)}:host ::slotted(.focused){--r-radio-button--box-shadow:0 0 0 3px var(--r-border-focused-outlined, #fff), inset 0 0 0 1px var(--r-border-focused-outlined, #fff);--r-radio-button--outline:2px solid var(--r-border-focused, #0071e3);--r-radio-button--outline-offset:2px}:host slot{display:contents}:host([variant=contained]) ::slotted(r-radio-button){padding:0;--r-radio-button--padding:var(--r-spacing-100, 1rem);--r-radio-button--border-color:var(--r-border-soft, #686868);--r-radio-button--border-width:1px}:host([invalid]:not([invalid=false])) ::slotted(r-radio-button){--r-radio-button--box--border-color:var(--r-status-error-regular, #b00c15);--r-radio-button--box--background-color:var(--r-status-error-soft, #fef6f6);--r-radio-button--marker--background-color:var(--r-status-error-regular, #b00c15)}:host .r-radio-group{display:var(--r-radio-group--display, flex);flex-direction:var(--r-radio-group--flex-direction, column)}:host .r-radio-group--label-container{display:var(--r-radio-group--label-container--display, flex);gap:var(--r-radio-group--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-radio-group--label-container--align-items, center);justify-content:var(--r-radio-group--label-container--justify-content, space-between)}:host .r-radio-group--label-container ::slotted([slot=popover]){display:var(--r-radio-group--popover--display, inline-flex);height:var(--r-radio-group--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-radio-group--popover--align-items, center);justify-content:var(--r-radio-group--popover--justify-content, center);margin-right:var(--r-radio-group--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-radio-group--popover-trigger--min-width, var(--r-spacing-150, 1.5));--r-popover--trigger--min-height:var(--r-radio-group--popover--trigger--min-height, var(--r-spacing-150, 1.5))}:host .r-radio-group--hint{margin-bottom:var(--r-radio-group--hint--margin-bottom, var(--r-spacing-100, 1rem))}:host .r-radio-group--content{display:var(--r-radio-group--content--display, flex);flex-direction:var(--r-radio-group--content--flex-direction, column);flex-wrap:var(--r-radio-group--content--flex-wrap, nowrap);gap:var(--r-radio-group--content--gap, var(--r-spacing-050, 0.5rem))}:host .r-radio-group+r-hint{margin-top:var(--r-radio-group--hint--margin-top, var(--r-spacing-050, 0.5rem))}";
|
|
5
5
|
|
|
6
6
|
const RadioGroup = class {
|
|
7
7
|
constructor(hostRef) {
|
|
@@ -27,18 +27,21 @@ const RadioGroup = class {
|
|
|
27
27
|
/** Unique id */
|
|
28
28
|
this.uniqueId = `r-radio-group-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
|
|
29
29
|
this.getValidityStateData = element => {
|
|
30
|
+
let validityState = '';
|
|
31
|
+
let validityMessage = '';
|
|
30
32
|
if (element === null)
|
|
31
|
-
return;
|
|
33
|
+
return { validityState, validityMessage };
|
|
32
34
|
for (const state in element.validity) {
|
|
33
35
|
if (element.validity[state]) {
|
|
34
|
-
|
|
36
|
+
validityState = state;
|
|
35
37
|
if (this[state + 'Message']) {
|
|
36
|
-
|
|
37
|
-
return;
|
|
38
|
+
validityMessage = this[state + 'Message'];
|
|
39
|
+
return { validityState, validityMessage };
|
|
38
40
|
}
|
|
39
|
-
|
|
41
|
+
validityMessage = element.validationMessage;
|
|
40
42
|
}
|
|
41
43
|
}
|
|
44
|
+
return { validityState, validityMessage };
|
|
42
45
|
};
|
|
43
46
|
this.validateFormElement = (element = null) => {
|
|
44
47
|
if (element === null)
|
|
@@ -47,7 +50,9 @@ const RadioGroup = class {
|
|
|
47
50
|
return;
|
|
48
51
|
if (this.error)
|
|
49
52
|
return;
|
|
50
|
-
this.getValidityStateData(element);
|
|
53
|
+
const { validityState, validityMessage } = this.getValidityStateData(element);
|
|
54
|
+
this.validityState = validityState;
|
|
55
|
+
this.validityMessage = validityMessage;
|
|
51
56
|
const isValid = this.validityState === 'valid';
|
|
52
57
|
this.valid = isValid;
|
|
53
58
|
this.invalid = !isValid;
|
|
@@ -204,14 +209,13 @@ const RadioGroup = class {
|
|
|
204
209
|
this.value = null;
|
|
205
210
|
}
|
|
206
211
|
/**
|
|
207
|
-
* Validates the radio group and returns a boolean indicating its validity.
|
|
208
|
-
*
|
|
212
|
+
* Validates the radio group without triggering UI and returns a boolean indicating its validity.
|
|
209
213
|
* @returns A boolean indicating whether the radio group is valid.
|
|
210
214
|
*/
|
|
211
215
|
async checkValidity() {
|
|
212
216
|
const element = this.nativeSelectedEl || this.nativeFirstEl || null;
|
|
213
|
-
this.getValidityStateData(element);
|
|
214
|
-
return
|
|
217
|
+
const { validityState } = this.getValidityStateData(element);
|
|
218
|
+
return validityState === 'valid';
|
|
215
219
|
}
|
|
216
220
|
/**
|
|
217
221
|
* Validates the radio group and displays the validity state.
|
|
@@ -336,12 +340,12 @@ const RadioGroup = class {
|
|
|
336
340
|
'tooltip-icon': tooltipIcon,
|
|
337
341
|
'tooltip-icon-color': tooltipIconColor
|
|
338
342
|
};
|
|
339
|
-
return (h(Host, { key: '
|
|
340
|
-
h("div", { key: '
|
|
341
|
-
h("r-hint", { key: '
|
|
342
|
-
h("r-hint", { key: '
|
|
343
|
-
h("r-hint", { key: '
|
|
344
|
-
h("r-hint", { key: '
|
|
343
|
+
return (h(Host, { key: '5bf5f0493d2329b07d82e332153e467239ddff0f' }, h("div", { key: '06f96cb1868f7cbb635137ca68eda6a326b969c3', class: "r-radio-group", onClick: this.onLabelClick }, label &&
|
|
344
|
+
h("div", { key: '4dca24e0cb903a2e74e55ee743ed595608af0bf4', class: "r-radio-group--label-container" }, h("r-label", Object.assign({ key: 'cba1398032eae164db0a00808a06116affa671ec', id: `${uniqueId}-label`, class: "r-radio-group--label", "field-indicator": fieldIndicator }, labelAttr), label), h("slot", { key: 'c0180f3c6c99fed7d524719aff8eb8e64236cc3c', name: "popover" })), hint &&
|
|
345
|
+
h("r-hint", { key: '3ae1c84630975059aa1532b4b72957967e398949', id: `${uniqueId}-hint`, class: "r-radio-group--hint", role: "note" }, hint), h("div", { key: '2c18a09474189e6f2719db7c6ee5fb51c460e52f', class: "r-radio-group--content" }, h("slot", { key: '1c79f92cc0cd2095cfe51ee5fc108b6a004c4e4e' }))), invalid && error &&
|
|
346
|
+
h("r-hint", { key: '86aa0f4d1400e401cc7f71259511f118a3f68ef7', "aria-live": "polite", id: `${uniqueId}-message`, role: "alert", variant: "error" }, error), this.validityState !== 'valid' && this.validityMessage &&
|
|
347
|
+
h("r-hint", { key: 'aa06f829a6566becdf4a1f86e26e5161526756fb', "aria-live": "polite", id: `${uniqueId}-message`, role: "alert", variant: "error" }, this.customErrorMessage || this.validityMessage), this.valid && this.validMessage && this.showValid &&
|
|
348
|
+
h("r-hint", { key: '11500e705487028e4312679a6757dc48d861ebba', role: "alert", variant: "success" }, this.validMessage)));
|
|
345
349
|
}
|
|
346
350
|
get host() { return getElement(this); }
|
|
347
351
|
};
|
|
@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
|
|
|
2
2
|
import { a as appendControlToFormData } from './formData-DvLT8-y3.js';
|
|
3
3
|
import { S as StyleObserver } from './style-observer-4Uv3PpKT.js';
|
|
4
4
|
|
|
5
|
-
const selectCss = ":host{display:inline-flex;flex-direction:column;width:var(--width, auto);transition:width 0.2s ease-out;max-width:none;opacity:1;outline:none}:host slot{display:contents}:host(:hover:not([disabled]:not([disabled=false]))){--r-select--container--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host([expanded]:not([expanded=false])){--r-select--options--visibility:visible;--r-select--options--z-index:1;--r-select--background-color:var(--r-background-interactive-softest, #fff);--r-select--value--border-color:var(--r-border-soft, #686868);--r-select--value--background-color:var(--r-background-interactive-softest, #fff);--r-select--trailing-icon--transform:rotate(180deg)}:host([invalid]:not([invalid=false])){--r-select--container--background-color:var(--r-status-error-soft, #fef6f6);--r-select--value--border-color:var(--r-status-error-regular, #
|
|
5
|
+
const selectCss = ":host{display:inline-flex;flex-direction:column;width:var(--width, auto);transition:width 0.2s ease-out;max-width:none;opacity:1;outline:none}:host slot{display:contents}:host(:hover:not([disabled]:not([disabled=false]))){--r-select--container--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host([expanded]:not([expanded=false])){--r-select--options--visibility:visible;--r-select--options--z-index:1;--r-select--background-color:var(--r-background-interactive-softest, #fff);--r-select--value--border-color:var(--r-border-soft, #686868);--r-select--value--background-color:var(--r-background-interactive-softest, #fff);--r-select--trailing-icon--transform:rotate(180deg)}:host([invalid]:not([invalid=false])){--r-select--container--background-color:var(--r-status-error-soft, #fef6f6);--r-select--value--border-color:var(--r-status-error-regular, #b00c15);--r-select--options--border-color:var(--r-status-error-regular, #b00c15)}:host([disabled]:not([disabled=false])){--r-select--opacity:0.4;--r-select--pointer-events:none;--r-select--cursor:not-allowed}:host([data-is-placeholder=true]){--r-select--value-diplay--color:var(--r-text-soft, #686868)}:host([data-max-width=set]){width:100%;--r-select--options--right:0}:host([full-width]){width:100%}:host([data-listbox-position=top]){--r-select--options--top:auto;--r-select--options--bottom:2.875em;--r-select--options--border-width:1px 1px 0 1px}:host([data-listbox-position=bottom]){--r-select--options--top:100%;--r-select--options--bottom:auto;--r-select--options--border-width:0 1px 1px 1px}:host([data-readonly=true]){--r-select--color:var(--r-text-soft, #686868);--r-select--value--background-color:var(--r-background-soft, #f3f1f0);--r-select--value--border-color:transparent transparent var(--r-border-soft, #686868) transparent;--r-select--value--cursor:text;--r-select--value-arrow--visiblility:hidden}.r-select{display:var(--r-select--display, flex);flex-grow:var(--r-select--flex-grow, 1);flex-direction:var(--r-select--flex-direction, column);position:var(--r-select--position, relative);box-sizing:var(--r-select--box-sizing, border-box);max-width:var(--r-select--max-width, 100%);min-width:var(--r-select--min-width, fit-content);font-family:var(--r-select--font-family, var(--r-font-family-text, system-ui));font-weight:var(--r-select--font-weight, var(--r-font-weight-regular, 400));font-size:var(--r-select--font-size, var(--r-font-size-400, 1rem));text-align:var(--r-select--text-align, left);color:var(--r-select--color, var(--r-text-regular, #282828));opacity:var(--r-select--opacity, 1);pointer-events:var(--r-select--pointer-events, auto);cursor:var(--r-select--cursor, pointer)}.r-select--label__margin-bottom{margin-bottom:var(--r-select--label--margin-bottom, var(--r-spacing-025, 0.25rem))}.r-select--label-container{display:var(--r-select--label-container--display, flex);gap:var(--r-select--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-select--label-container--align-items, center);justify-content:var(--r-select--label-container--align-items, space-between)}.r-select--label-container ::slotted([slot=popover]){display:var(--r-select--popover--display, inline-flex);height:var(--r-select--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-select--popover--align-items, center);justify-content:var(--r-select--popover--justify-content, center);margin-right:var(--r-select--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-select--popover-trigger--min-width, var(--r-spacing-150, 1.5));--r-popover--trigger--min-height:var(--r-select--popover--trigger--min-height, var(--r-spacing-150, 1.5))}.r-select--trailing-icon{transform:var(--r-select--trailing-icon--transform, rotate(0deg));transition:var(--r-select--trailing-icon--transition, transform 0.15s)}.r-select ::slotted([name=leading]){display:var(--r-select--value--leading-icon--display, flex);align-items:var(--r-select--value--leading-icon--align-items, center);color:var(--r-select--value--leading-icon--color, var(--r-icon-soft, #686868))}.r-select--container{background-color:var(--r-select--container--background-color, var(--r-background-softest, #fff));opacity:var(--r-select--container--opacity, 1);pointer-events:var(--r-select--container--pointer-events, auto)}.r-select--input{height:var(--r-select--input--height, 100%);width:var(--r-select--input--width, 100%);border:var(--r-select--input--border, none);outline:var(--r-select--input--outline, none);background-color:var(--r-select--input--background-color, inherit);color:var(--r-select--input--color, inherit);font-family:var(--r-select--input--font-family, inherit);font-size:var(--r-select--input--font-size, inherit);font-weight:var(--r-select--input--font-weight, inherit);padding:var(--r-select--input--padding, 0)}.r-select--native{position:var(--r-select--native--position, fixed);top:var(--r-select--native--top, -100vh);z-index:var(--r-select--native--z-index, -1);opacity:var(--r-select--native--opacity, 0);font-size:var(--r-select--native--font-size, 1rem);padding:var(--r-select--native--padding, 0 calc(48px + 0.75em) 0 0.75em)}.r-select--value:not([aria-readonly=true]):not(:has(input:read-only)):not(:has(input:disabled)):active{--r-select--value--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}.r-select--value[aria-disabled=false]:focus,.r-select--value:has(input:focus){outline:var(--r-select--value--outline, none);--r-select--value--z-index:2;--r-select--value--box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);--r-select--value--outline:2px solid var(--r-border-focused, #0071e3);--r-select--value--outline-offset:2px}.r-select--value{position:var(--r-select--value--position, relative);display:var(--r-select--value--display, inline-grid);grid-template-columns:var(--r-select--value--grid-template-columns, 1fr 1.75rem);box-sizing:var(--r-select--value--box-sizing, border-box);align-items:var(--r-select--value--align-items, center);justify-content:var(--r-select--value--justify-content, space-between);text-align:var(--r-select--value--text-align, left);min-width:var(--r-select--value--min-width, 100%);min-height:var(--r-select--value--min-height, var(--r-spacing-275, 2.75rem));padding:var(--r-select--value--padding, 0);white-space:var(--r-select--value--white-space, nowrap);background-color:var(--r-select--value--background-color, transparent);border-width:var(--r-select--value--border-width, 1px);border-style:var(--r-select--value--border-style, solid);border-color:var(--r-select--value--border-color, var(--r-border-soft, #686868));box-shadow:var(--r-select--value--box-shadow, none);outline:var(--r-select--value--outline, none);outline-offset:var(--r-select--value--outline-offset, 0);z-index:var(--r-select--value--z-index, 0);cursor:var(--r-select--value--cursor, inherit)}.r-select--value-display{display:var(--r-select--value-diplay--display, flex);gap:var(--r-select--value-diplay--gap, 0.5em);align-items:var(--r-select--value-diplay--align-tems, center);flex:var(--r-select--value-diplay--flex, 1);padding:var(--r-select--value-diplay--padding, 0 0.75em);overflow:var(--r-select--value-diplay--overflow, hidden);text-overflow:var(--r-select--value-diplay--text-overflow, ellipsis);color:var(--r-select--value-diplay--color, inherit);min-width:var(--r-select--value-diplay--min-width, fit-content);height:var(--r-select--value-diplay--height, 100%)}.r-select--value-selected{display:var(--r-select--value-diplay--display, flex);gap:var(--r-select--value-diplay--gap, 0.75em);align-items:var(--r-select--value-diplay--align-items, center)}.r-select--value-arrow{display:var(--r-select--value-arrow--display, flex);align-items:var(--r-select--value-arrow--align-items, center);justify-content:var(--r-select--value-arrow--justify-content, center);padding:var(--r-select--value-arrow--padding, 0 0.75em 0 0);visibility:var(--r-select--value-arrow--visiblility, visible)}.r-select--value-arrow-button{height:var(--r-select--value-arrow-button--height, 100%);background-color:var(--r-select--value-arrow-button--background-color, transparent);color:var(--r-select--value-arrow-button--color, inherit);border:var(--r-select--value-arrow-button--border, none);outline:var(--r-select--value-arrow-button--outline, none);cursor:var(--r-select--value-arrow-button--cursor, inherit)}.r-select--options{visibility:var(--r-select--options--visibility, hidden);position:var(--r-select--options--position, absolute);top:var(--r-select--options--top, 100%);right:var(--r-select--options--right, 0);bottom:var(--r-select--options--bottom, auto);left:var(--r-select--options--left, 0);margin:var(--r-select--options--margin, 0);padding:var(--r-select--options--padding, 0);list-style:var(--r-select--options--list-style, none);max-height:var(--r-select--options--max-height, 14.375em);min-width:var(--r-select--options--min-width, fit-content);overflow-y:var(--r-select--options--overflow-y, auto);background-color:var(--r-select--options--background-color, var(--r-background-interactive-softest, #fff));border-style:var(--r-select--options--border-style, solid);border-color:var(--r-select--options--border-color, var(--r-border-soft, #686868));border-width:var(--r-select--options--border-width, 0 1px 1px 1px);z-index:var(--r-select--options--z-index, -1)}.r-select--message{margin-top:var(--r-select--message--margin-top, var(--r-spacing-025, 0.25rem))}.hidden{display:none}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}@media (prefers-reduced-motion){:host{transition:none}}";
|
|
6
6
|
|
|
7
7
|
const Select = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -49,10 +49,13 @@ const Select = class {
|
|
|
49
49
|
this.valueToDisplay = '';
|
|
50
50
|
this.isInitializing = false;
|
|
51
51
|
this.isResetting = false;
|
|
52
|
-
this.isNewValue = false;
|
|
53
52
|
this.focusedOption = null;
|
|
54
53
|
this.isValueFocused = false;
|
|
55
54
|
this.isNoResultsFound = false;
|
|
55
|
+
/** Indicates if the user has interacted with the select (focused/clicked) */
|
|
56
|
+
this.touched = false;
|
|
57
|
+
/** Indicates if the value has been changed by user interaction */
|
|
58
|
+
this.dirty = false;
|
|
56
59
|
this.handleSlotChange = () => {
|
|
57
60
|
setTimeout(() => {
|
|
58
61
|
this.initialize();
|
|
@@ -66,16 +69,19 @@ const Select = class {
|
|
|
66
69
|
/** Unique id */
|
|
67
70
|
this.uniqueId = `r-select-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
|
|
68
71
|
this.getValidityStateData = (element) => {
|
|
72
|
+
let validityState = '';
|
|
73
|
+
let validityMessage = '';
|
|
69
74
|
for (const state in element.validity) {
|
|
70
75
|
if (element.validity[state]) {
|
|
71
|
-
|
|
76
|
+
validityState = state;
|
|
72
77
|
if (this[state + 'Message']) {
|
|
73
|
-
|
|
74
|
-
return;
|
|
78
|
+
validityMessage = this[state + 'Message'];
|
|
79
|
+
return { validityState, validityMessage };
|
|
75
80
|
}
|
|
76
|
-
|
|
81
|
+
validityMessage = element.validationMessage;
|
|
77
82
|
}
|
|
78
83
|
}
|
|
84
|
+
return { validityState, validityMessage };
|
|
79
85
|
};
|
|
80
86
|
this.validateFormElement = (element = null) => {
|
|
81
87
|
if (element === null)
|
|
@@ -84,7 +90,9 @@ const Select = class {
|
|
|
84
90
|
return;
|
|
85
91
|
if (this.error)
|
|
86
92
|
return;
|
|
87
|
-
this.getValidityStateData(element);
|
|
93
|
+
const { validityState, validityMessage } = this.getValidityStateData(element);
|
|
94
|
+
this.validityState = validityState;
|
|
95
|
+
this.validityMessage = validityMessage;
|
|
88
96
|
const isValid = this.validityState === 'valid';
|
|
89
97
|
this.valid = isValid;
|
|
90
98
|
this.invalid = !isValid;
|
|
@@ -106,6 +114,8 @@ const Select = class {
|
|
|
106
114
|
return;
|
|
107
115
|
e.preventDefault();
|
|
108
116
|
e.stopPropagation();
|
|
117
|
+
// Mark as touched when user clicks on the select
|
|
118
|
+
this.touched = true;
|
|
109
119
|
this.toggle();
|
|
110
120
|
if (!this.isExpanded)
|
|
111
121
|
return;
|
|
@@ -120,7 +130,11 @@ const Select = class {
|
|
|
120
130
|
return () => {
|
|
121
131
|
var _a;
|
|
122
132
|
if (this.isExpanded) {
|
|
123
|
-
|
|
133
|
+
const newValue = ((_a = this.focusedOption) === null || _a === void 0 ? void 0 : _a.value) || '';
|
|
134
|
+
if (newValue !== this.currentValue) {
|
|
135
|
+
this.dirty = true;
|
|
136
|
+
}
|
|
137
|
+
this.setValueFromUserInteraction(newValue);
|
|
124
138
|
return;
|
|
125
139
|
}
|
|
126
140
|
this.expand();
|
|
@@ -141,7 +155,11 @@ const Select = class {
|
|
|
141
155
|
return;
|
|
142
156
|
}
|
|
143
157
|
if (this.focusedOption && altKey) {
|
|
144
|
-
|
|
158
|
+
const newValue = ((_a = this.focusedOption) === null || _a === void 0 ? void 0 : _a.value) || '';
|
|
159
|
+
if (newValue !== this.currentValue) {
|
|
160
|
+
this.dirty = true;
|
|
161
|
+
}
|
|
162
|
+
this.setValueFromUserInteraction(newValue);
|
|
145
163
|
return;
|
|
146
164
|
}
|
|
147
165
|
if (!this.combobox && this.focusedOption === this.optionElements[0])
|
|
@@ -215,7 +233,14 @@ const Select = class {
|
|
|
215
233
|
};
|
|
216
234
|
}
|
|
217
235
|
case 'Tab':
|
|
218
|
-
return () => {
|
|
236
|
+
return () => {
|
|
237
|
+
var _a;
|
|
238
|
+
const newValue = ((_a = this.focusedOption) === null || _a === void 0 ? void 0 : _a.value) || '';
|
|
239
|
+
if (newValue !== this.currentValue) {
|
|
240
|
+
this.dirty = true;
|
|
241
|
+
}
|
|
242
|
+
this.setValueFromUserInteraction(newValue);
|
|
243
|
+
};
|
|
219
244
|
default:
|
|
220
245
|
// No matching key handler: intentional no-op
|
|
221
246
|
return () => { };
|
|
@@ -287,7 +312,11 @@ const Select = class {
|
|
|
287
312
|
return;
|
|
288
313
|
}
|
|
289
314
|
this.valueElement.value = '';
|
|
290
|
-
|
|
315
|
+
const newValue = '';
|
|
316
|
+
if (newValue !== this.currentValue) {
|
|
317
|
+
this.dirty = true;
|
|
318
|
+
}
|
|
319
|
+
this.setValueFromUserInteraction(newValue);
|
|
291
320
|
this.reportValidity();
|
|
292
321
|
break;
|
|
293
322
|
default:
|
|
@@ -304,6 +333,8 @@ const Select = class {
|
|
|
304
333
|
};
|
|
305
334
|
this.onValueFocus = () => {
|
|
306
335
|
this.isValueFocused = true;
|
|
336
|
+
// Mark as touched when user focuses on the select
|
|
337
|
+
this.touched = true;
|
|
307
338
|
};
|
|
308
339
|
this.filterOptionsListByComboboxValue = (value = '') => {
|
|
309
340
|
const options = Array.from(this.host.querySelectorAll('r-select-option:not([data-no-results="true"])'));
|
|
@@ -349,6 +380,8 @@ const Select = class {
|
|
|
349
380
|
this.onResetForm = () => {
|
|
350
381
|
// Clear validation results
|
|
351
382
|
this.resetValidation();
|
|
383
|
+
// Reset touched and dirty states
|
|
384
|
+
this.markAsPristine();
|
|
352
385
|
// Restore initial value
|
|
353
386
|
this.setValue(this.initial['value']);
|
|
354
387
|
// Emit rReset
|
|
@@ -388,15 +421,24 @@ const Select = class {
|
|
|
388
421
|
handleValueChange(value, oldValue) {
|
|
389
422
|
if (this.isInitializing)
|
|
390
423
|
return;
|
|
391
|
-
this
|
|
392
|
-
|
|
424
|
+
// Only process if this is not the initial load (oldValue is defined)
|
|
425
|
+
if (oldValue !== undefined && oldValue !== value) {
|
|
426
|
+
// This is a programmatic change from parent attribute
|
|
427
|
+
// Do NOT mark as dirty, do NOT emit rChange
|
|
428
|
+
this._renderSelected(value, false);
|
|
429
|
+
this.clearComboboxOptions();
|
|
430
|
+
}
|
|
393
431
|
}
|
|
394
432
|
/** Listen for custom event triggered by "onClick" event on `<r-select-option>` */
|
|
395
433
|
optionSelectAction(e) {
|
|
396
434
|
e.stopPropagation();
|
|
397
435
|
if (this.disabled)
|
|
398
436
|
return;
|
|
399
|
-
|
|
437
|
+
// Mark as dirty only if value actually changes
|
|
438
|
+
if (e.target.value !== this.currentValue) {
|
|
439
|
+
this.dirty = true;
|
|
440
|
+
}
|
|
441
|
+
this.setValueFromUserInteraction(e.target.value);
|
|
400
442
|
}
|
|
401
443
|
tooltipFocusAction() {
|
|
402
444
|
this.collapse();
|
|
@@ -436,11 +478,28 @@ const Select = class {
|
|
|
436
478
|
if (this.isExpanded)
|
|
437
479
|
this.defineListboxPositionState();
|
|
438
480
|
}
|
|
439
|
-
/**
|
|
481
|
+
/**
|
|
482
|
+
* Set value of the select programmatically.
|
|
483
|
+
* Does NOT mark as dirty or emit change events.
|
|
484
|
+
* Use this for programmatic value updates.
|
|
485
|
+
*/
|
|
440
486
|
async setValue(value = '') {
|
|
441
487
|
// Clear validation results
|
|
442
488
|
this.resetValidation();
|
|
443
|
-
|
|
489
|
+
// Don't emit change event for programmatic updates
|
|
490
|
+
this._renderSelected(value, false);
|
|
491
|
+
this.clearComboboxOptions();
|
|
492
|
+
}
|
|
493
|
+
/**
|
|
494
|
+
* Internal method to set value from user interaction.
|
|
495
|
+
* Assumes dirty flag is already set by the caller.
|
|
496
|
+
* Will emit rChange if dirty flag is true.
|
|
497
|
+
*/
|
|
498
|
+
setValueFromUserInteraction(value = '') {
|
|
499
|
+
// Clear validation results
|
|
500
|
+
this.resetValidation();
|
|
501
|
+
// Emit change event for user interactions (if dirty is set)
|
|
502
|
+
this._renderSelected(value, true);
|
|
444
503
|
this.clearComboboxOptions();
|
|
445
504
|
}
|
|
446
505
|
/** Set value of the select */
|
|
@@ -451,6 +510,8 @@ const Select = class {
|
|
|
451
510
|
async reset() {
|
|
452
511
|
// Clear validation results
|
|
453
512
|
this.resetValidation();
|
|
513
|
+
// Reset touched and dirty states
|
|
514
|
+
this.markAsPristine();
|
|
454
515
|
// Collapse options listbox
|
|
455
516
|
this.collapse();
|
|
456
517
|
// Restore unfiltered list
|
|
@@ -483,6 +544,35 @@ const Select = class {
|
|
|
483
544
|
this.invalid = this.initial['invalid'];
|
|
484
545
|
this.valid = !this.invalid;
|
|
485
546
|
}
|
|
547
|
+
/**
|
|
548
|
+
* Returns whether the select has been touched (focused/clicked by user).
|
|
549
|
+
* @returns A boolean indicating whether the select has been touched.
|
|
550
|
+
*/
|
|
551
|
+
async isTouched() {
|
|
552
|
+
return this.touched;
|
|
553
|
+
}
|
|
554
|
+
/**
|
|
555
|
+
* Returns whether the select value has been changed by user interaction.
|
|
556
|
+
* @returns A boolean indicating whether the select is dirty.
|
|
557
|
+
*/
|
|
558
|
+
async isDirty() {
|
|
559
|
+
return this.dirty;
|
|
560
|
+
}
|
|
561
|
+
/**
|
|
562
|
+
* Marks the select as untouched and pristine (not dirty).
|
|
563
|
+
*/
|
|
564
|
+
async markAsPristine() {
|
|
565
|
+
this.touched = false;
|
|
566
|
+
this.dirty = false;
|
|
567
|
+
}
|
|
568
|
+
/**
|
|
569
|
+
* Validates the textarea without triggering UI and returns a boolean indicating its validity.
|
|
570
|
+
* @returns A boolean indicating whether the textarea is valid.
|
|
571
|
+
*/
|
|
572
|
+
async checkValidity() {
|
|
573
|
+
const { validityState } = this.getValidityStateData(this.nativeElement);
|
|
574
|
+
return validityState === 'valid';
|
|
575
|
+
}
|
|
486
576
|
/** Check validity and reveal validation state and message */
|
|
487
577
|
async reportValidity() {
|
|
488
578
|
this.validateFormElement(this.nativeElement);
|
|
@@ -615,7 +705,11 @@ const Select = class {
|
|
|
615
705
|
if (!this.isBusy) {
|
|
616
706
|
this.reportValidity();
|
|
617
707
|
}
|
|
618
|
-
|
|
708
|
+
// Only emit rChange if:
|
|
709
|
+
// 1. emitValue is true
|
|
710
|
+
// 2. Not during initialization or reset
|
|
711
|
+
// 3. The component is dirty (user has interacted)
|
|
712
|
+
if (emitValue && !this.isBusy && this.dirty) {
|
|
619
713
|
this.rChange.emit({
|
|
620
714
|
element: this.host,
|
|
621
715
|
value: value
|
|
@@ -1005,8 +1099,8 @@ const Select = class {
|
|
|
1005
1099
|
disabled,
|
|
1006
1100
|
required: isRequired
|
|
1007
1101
|
};
|
|
1008
|
-
return (h(Host, { key: '
|
|
1009
|
-
h("r-hint", { key: '
|
|
1102
|
+
return (h(Host, { key: '9c22bae93d955802f695b20f25d3ff5c79fcc7d8', "data-value": this.currentValue, expanded: !this.disabled && this.isExpanded, "data-listbox-position": this.listboxPositionState, "data-initial-value": this.initial['value'], "data-is-placeholder": `${!!this.isPlaceholder}`, "data-value-focused": `${!!this.isValueFocused}`, "data-option-focused": `${!!this.focusedOption}`, "data-validity-state": `${this.validityState || ''}`, "data-validity-message": `${this.validityMessage || ''}`, "data-readonly": `${!!this.isReadonly}`, "data-touched": `${this.touched}`, "data-dirty": `${this.dirty}` }, h("div", { key: '2e8de0d2041d00c4d90caf5aba2aeb50fcfc86e5', class: `r-select--label ${!internal ? 'r-select--label__margin-bottom' : ''}` }, h("div", { key: '273524030b099899861c93e9bba205c6c820d425', class: internal ? 'visually-hidden' : 'r-select--label-container' }, h("label", { key: 'f050500698aa5a48d6db101074129fae09899de3', id: `${uniqueId}-label`, onClick: this.isInteractive ? this.onValueClick : null }, h("r-label", Object.assign({ key: 'b5560ba5b8ee794eb775a555dec514f4d6e6546f' }, labelAttr), label)), h("slot", { key: 'bbbbe371702b95ac3d1636756eb673dc44c0dcb4', name: "popover" })), hint &&
|
|
1103
|
+
h("r-hint", { key: '27585bacce2143f20bdb20a3e03b5700dbb87d9b', id: `${uniqueId}-hint`, class: "r-select--hint" }, hint)), h("div", { key: '92a69fbee0890d5ddab0353348cdb4d8eb772137', class: "r-select" }, h("select", Object.assign({ key: 'bc2de60d73dcebf750a99e7b88eacc701a8c0b85', class: "r-select--native", ref: el => this.nativeElement = el }, nativeAttrs)), h("div", { key: 'b561dee21bdf58abe51786564a18812a20a0e97f', class: "r-select--container" }, this.combobox ? this.renderCombobox(comboboxAttrs) : this.renderSelect(comboboxAttrs), h("div", Object.assign({ key: '06984ccf7f6740e2480ef61924676e99d40044d4', role: "listbox", tabindex: "-1", id: `${uniqueId}-list`, class: "r-select--options", ref: el => this.listboxElement = el }, listboxAttrs), (this.isNoResultsFound || !((_a = this.optionElements) === null || _a === void 0 ? void 0 : _a.length)) && h("r-select-option", { key: '67888a456006e44869081876d35cdceca754942d', "data-no-results": "true", value: "no_results" }, this.noResultsFound), h("slot", { key: '4f404790887ad37d488183d814bb69f33c262688', onSlotchange: this.handleSlotChange })))), h("div", { key: '0b223f242cfc90ce38a0cf83d38dc0c81348b36d', id: `${uniqueId}-message`, "aria-live": "polite", "aria-atomic": "true", ref: (el) => this.messageContainer = el, class: this.hasMessage && !internal ? 'r-select--message' : 'visually-hidden' }, this.hasMessage && h("r-hint", { key: '57336df2dd79b8f91be950f7a4ca05258ec26184', variant: this.invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && this.validityMessage, this.hasValidationSuccess && this.validMessage))));
|
|
1010
1104
|
}
|
|
1011
1105
|
get host() { return getElement(this); }
|
|
1012
1106
|
static get watchers() { return {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
|
|
2
2
|
import { a as appendControlToFormData } from './formData-DvLT8-y3.js';
|
|
3
3
|
|
|
4
|
-
const textareaCss = ":host{opacity:1;display:block;outline:none;--r-label--margin-bottom:0}:host(:focus-visible){outline:none}:host([resize=none]){--r-textarea--input--resize:none}:host([resize=both]){--r-textarea--input--resize:both}:host([resize=horizontal]){--r-textarea--input--resize:horizontal}:host([resize=vertical]){--r-textarea--input--resize:vertical}:host([resize=initial]){--r-textarea--input--resize:initial}:host([resize=inherit]){--r-textarea--input--resize:inherit}:host([invalid]:not([invalid=false])){--r-textarea--container--background-color:var(--r-status-error-soft, #fef6f6);--r-textarea--container--border-color:var(--r-status-error-regular, #
|
|
4
|
+
const textareaCss = ":host{opacity:1;display:block;outline:none;--r-label--margin-bottom:0}:host(:focus-visible){outline:none}:host([resize=none]){--r-textarea--input--resize:none}:host([resize=both]){--r-textarea--input--resize:both}:host([resize=horizontal]){--r-textarea--input--resize:horizontal}:host([resize=vertical]){--r-textarea--input--resize:vertical}:host([resize=initial]){--r-textarea--input--resize:initial}:host([resize=inherit]){--r-textarea--input--resize:inherit}:host([invalid]:not([invalid=false])){--r-textarea--container--background-color:var(--r-status-error-soft, #fef6f6);--r-textarea--container--border-color:var(--r-status-error-regular, #b00c15)}.r-textarea--label-container{display:var(--r-textarea--label-container--display, flex);gap:var(--r-textarea--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-textarea--label-container--align-items, center);justify-content:var(--r-textarea--label-container--align-items, space-between)}.r-textarea--label-container ::slotted([slot=popover]){display:var(--r-textarea--popover--display, inline-flex);height:var(--r-textarea--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-textarea--popover--align-items, center);justify-content:var(--r-textarea--popover--justify-content, center);margin-right:var(--r-textarea--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-textarea--popover-trigger--min-width, var(--r-spacing-150, 1.5))}.r-textarea--input::placeholder{color:var(--r-textarea--input--placeholder--color, var(--r-text-soft, #686868))}.r-textarea--input{vertical-align:top;width:var(--r-textarea--input--width, 100%);max-width:var(--r-textarea--input--max-width, 100%);min-height:var(--r-textarea--input--min-height, 8.875em);font-family:var(--r-textarea--input--font-family, var(--r-font-family-text, system-ui));font-weight:var(--r-textarea--input--font-weight, var(--r-font-weight-regular, 400));font-size:var(--r-textarea--input--font-size, var(--r-font-size-400, 1rem));line-height:var(--r-textarea--input--line-height, var(--r-line-height-m, 1.5));color:var(--r-textarea--input--color, var(--r-text-regular, #282828));background-color:var(--r-textarea--input--background-color, transparent);opacity:var(--r-textarea--input--opacity, 1);border-width:var(--r-textarea--input--border-width, 0px);border-style:var(--r-textarea--input--border-style, solid);border-color:var(--r-textarea--input--border-color, var(--r-border-soft, #686868));border-radius:var(--r-textarea--input--border-radius, 0);box-sizing:var(--r-textarea--input--box-sizing, border-box);box-shadow:var(--r-textarea--input--box-shadow, none);padding:var(--r-textarea--input--padding, var(--r-textarea--input--padding-top, 0.688em) var(--r-textarea--input--padding-right, 0.625em) var(--r-textarea--input--padding-bottom, 0.688em) var(--r-textarea--input--padding-left, 0.625em));margin-top:var(--r-textarea--input--margin-top, 0);resize:var(--r-textarea--input--resize, both);z-index:var(--r-textarea--input--z-index, 1);outline:var(--r-textarea--input--outline, none);outline-offset:var(--r-textarea--input--outline-offset, 0);pointer-events:var(--r-textarea--input--pointer-events, auto);cursor:var(--r-textarea--input--cursor, inherit)}.r-textarea--container{display:flex;align-items:start;overflow:visible;background-color:var(--r-textarea--container--background-color, var(--r-background-interactive-softest, #f7f7f7));border-width:var(--r-textarea--container--border-width, 1px);border-style:var(--r-textarea--container--border-style, solid);border-color:var(--r-textarea--container--border-color, var(--r-border-soft, #686868));padding:var(--r-textarea--container--padding, 0);margin-top:var(--r-textarea--container--margin-top, var(--r-spacing-025, 0.25rem));box-shadow:var(--r-textarea--container--box-shadow, none);outline:var(--r-textarea--container--outline, none);outline-offset:var(--r-textarea--container--outline-offset, none)}.r-textarea--container[data-readonly=true]{--r-textarea--container--background-color:var(--r-background-soft, #f3f1f0);--r-textarea--container--border-color:transparent transparent var(--r-border-soft, #686868) transparent;--r-textarea--container--cursor:text}.r-textarea--container:hover:not([data-disabled=true]):not([data-readonly=true]){--r-textarea--container--background-color:var(--r-background-interactive-hovered)}.r-textarea--container:active:not([data-disabled=true]):not([data-readonly=true]){--r-textarea--container--background-color:var(--r-background-interactive-pressed)}.r-textarea--container:focus-within{--r-textarea--container--box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);--r-textarea--container--outline:2px solid var(--r-border-focused, #0071e3);--r-textarea--container--outline-offset:2px}.r-textarea--trailing{display:var(--r-textarea--trailing--display, flex);margin-top:var(--r-textarea--trailing--margin-top, 0.688em);margin-right:var(--r-textarea--trailing--margin-right, 0.625em);margin-left:var(--r-textarea--trailing--margin-left, auto);gap:var(--r-textarea--trailing--gap, 0.625rem)}.r-textarea--trailing:empty{display:none}.r-textarea--readonly-icon{color:var(--r-textarea--readonly-icon--color, var(--r-icon-soft, #686868))}.r-textarea--messages{display:flex;gap:var(--r-textarea--messages--gap, var(--r-spacing-025, 0.25rem))}.r-textarea--messages--counter{margin-left:auto}.r-textarea--messages:has(r-hint){margin-top:var(--r-spacing-025, 0.25rem)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
|
|
5
5
|
|
|
6
6
|
const RTextarea = class {
|
|
7
7
|
constructor(hostRef) {
|
|
@@ -80,16 +80,19 @@ const RTextarea = class {
|
|
|
80
80
|
this.rReset.emit({ element: host, value });
|
|
81
81
|
};
|
|
82
82
|
this.getValidityStateData = (element) => {
|
|
83
|
+
let validityState = '';
|
|
84
|
+
let validityMessage = '';
|
|
83
85
|
for (const state in element.validity) {
|
|
84
86
|
if (element.validity[state]) {
|
|
85
|
-
|
|
87
|
+
validityState = state;
|
|
86
88
|
if (this[state + 'Message']) {
|
|
87
|
-
|
|
88
|
-
return;
|
|
89
|
+
validityMessage = this[state + 'Message'];
|
|
90
|
+
return { validityState, validityMessage };
|
|
89
91
|
}
|
|
90
|
-
|
|
92
|
+
validityMessage = element.validationMessage;
|
|
91
93
|
}
|
|
92
94
|
}
|
|
95
|
+
return { validityState, validityMessage };
|
|
93
96
|
};
|
|
94
97
|
this.validateFormElement = (element = null) => {
|
|
95
98
|
if (element === null)
|
|
@@ -98,7 +101,9 @@ const RTextarea = class {
|
|
|
98
101
|
return;
|
|
99
102
|
if (this.error)
|
|
100
103
|
return;
|
|
101
|
-
this.getValidityStateData(element);
|
|
104
|
+
const { validityState, validityMessage } = this.getValidityStateData(element);
|
|
105
|
+
this.validityState = validityState;
|
|
106
|
+
this.validityMessage = validityMessage;
|
|
102
107
|
const isValid = this.validityState === 'valid';
|
|
103
108
|
this.valid = isValid;
|
|
104
109
|
this.invalid = !isValid;
|
|
@@ -152,6 +157,14 @@ const RTextarea = class {
|
|
|
152
157
|
this.customErrorMessage = message;
|
|
153
158
|
this.validateFormElement(this.nativeElement);
|
|
154
159
|
}
|
|
160
|
+
/**
|
|
161
|
+
* Validates the textarea without triggering UI and returns a boolean indicating its validity.
|
|
162
|
+
* @returns A boolean indicating whether the textarea is valid.
|
|
163
|
+
*/
|
|
164
|
+
async checkValidity() {
|
|
165
|
+
const { validityState } = this.getValidityStateData(this.nativeElement);
|
|
166
|
+
return validityState === 'valid';
|
|
167
|
+
}
|
|
155
168
|
/** Validates an element and displays validity state. */
|
|
156
169
|
async reportValidity() {
|
|
157
170
|
this.validateFormElement(this.nativeElement);
|