@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
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-DJ4H_bFj.js');
|
|
4
4
|
|
|
5
|
-
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, #
|
|
5
|
+
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)}";
|
|
6
6
|
|
|
7
7
|
const RadioButton = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var index = require('./index-DJ4H_bFj.js');
|
|
4
4
|
var formData = require('./formData-B2DZyLxP.js');
|
|
5
5
|
|
|
6
|
-
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, #
|
|
6
|
+
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))}";
|
|
7
7
|
|
|
8
8
|
const RadioGroup = class {
|
|
9
9
|
constructor(hostRef) {
|
|
@@ -29,18 +29,21 @@ const RadioGroup = class {
|
|
|
29
29
|
/** Unique id */
|
|
30
30
|
this.uniqueId = `r-radio-group-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
|
|
31
31
|
this.getValidityStateData = element => {
|
|
32
|
+
let validityState = '';
|
|
33
|
+
let validityMessage = '';
|
|
32
34
|
if (element === null)
|
|
33
|
-
return;
|
|
35
|
+
return { validityState, validityMessage };
|
|
34
36
|
for (const state in element.validity) {
|
|
35
37
|
if (element.validity[state]) {
|
|
36
|
-
|
|
38
|
+
validityState = state;
|
|
37
39
|
if (this[state + 'Message']) {
|
|
38
|
-
|
|
39
|
-
return;
|
|
40
|
+
validityMessage = this[state + 'Message'];
|
|
41
|
+
return { validityState, validityMessage };
|
|
40
42
|
}
|
|
41
|
-
|
|
43
|
+
validityMessage = element.validationMessage;
|
|
42
44
|
}
|
|
43
45
|
}
|
|
46
|
+
return { validityState, validityMessage };
|
|
44
47
|
};
|
|
45
48
|
this.validateFormElement = (element = null) => {
|
|
46
49
|
if (element === null)
|
|
@@ -49,7 +52,9 @@ const RadioGroup = class {
|
|
|
49
52
|
return;
|
|
50
53
|
if (this.error)
|
|
51
54
|
return;
|
|
52
|
-
this.getValidityStateData(element);
|
|
55
|
+
const { validityState, validityMessage } = this.getValidityStateData(element);
|
|
56
|
+
this.validityState = validityState;
|
|
57
|
+
this.validityMessage = validityMessage;
|
|
53
58
|
const isValid = this.validityState === 'valid';
|
|
54
59
|
this.valid = isValid;
|
|
55
60
|
this.invalid = !isValid;
|
|
@@ -206,14 +211,13 @@ const RadioGroup = class {
|
|
|
206
211
|
this.value = null;
|
|
207
212
|
}
|
|
208
213
|
/**
|
|
209
|
-
* Validates the radio group and returns a boolean indicating its validity.
|
|
210
|
-
*
|
|
214
|
+
* Validates the radio group without triggering UI and returns a boolean indicating its validity.
|
|
211
215
|
* @returns A boolean indicating whether the radio group is valid.
|
|
212
216
|
*/
|
|
213
217
|
async checkValidity() {
|
|
214
218
|
const element = this.nativeSelectedEl || this.nativeFirstEl || null;
|
|
215
|
-
this.getValidityStateData(element);
|
|
216
|
-
return
|
|
219
|
+
const { validityState } = this.getValidityStateData(element);
|
|
220
|
+
return validityState === 'valid';
|
|
217
221
|
}
|
|
218
222
|
/**
|
|
219
223
|
* Validates the radio group and displays the validity state.
|
|
@@ -338,12 +342,12 @@ const RadioGroup = class {
|
|
|
338
342
|
'tooltip-icon': tooltipIcon,
|
|
339
343
|
'tooltip-icon-color': tooltipIconColor
|
|
340
344
|
};
|
|
341
|
-
return (index.h(index.Host, { key: '
|
|
342
|
-
index.h("div", { key: '
|
|
343
|
-
index.h("r-hint", { key: '
|
|
344
|
-
index.h("r-hint", { key: '
|
|
345
|
-
index.h("r-hint", { key: '
|
|
346
|
-
index.h("r-hint", { key: '
|
|
345
|
+
return (index.h(index.Host, { key: '5bf5f0493d2329b07d82e332153e467239ddff0f' }, index.h("div", { key: '06f96cb1868f7cbb635137ca68eda6a326b969c3', class: "r-radio-group", onClick: this.onLabelClick }, label &&
|
|
346
|
+
index.h("div", { key: '4dca24e0cb903a2e74e55ee743ed595608af0bf4', class: "r-radio-group--label-container" }, index.h("r-label", Object.assign({ key: 'cba1398032eae164db0a00808a06116affa671ec', id: `${uniqueId}-label`, class: "r-radio-group--label", "field-indicator": fieldIndicator }, labelAttr), label), index.h("slot", { key: 'c0180f3c6c99fed7d524719aff8eb8e64236cc3c', name: "popover" })), hint &&
|
|
347
|
+
index.h("r-hint", { key: '3ae1c84630975059aa1532b4b72957967e398949', id: `${uniqueId}-hint`, class: "r-radio-group--hint", role: "note" }, hint), index.h("div", { key: '2c18a09474189e6f2719db7c6ee5fb51c460e52f', class: "r-radio-group--content" }, index.h("slot", { key: '1c79f92cc0cd2095cfe51ee5fc108b6a004c4e4e' }))), invalid && error &&
|
|
348
|
+
index.h("r-hint", { key: '86aa0f4d1400e401cc7f71259511f118a3f68ef7', "aria-live": "polite", id: `${uniqueId}-message`, role: "alert", variant: "error" }, error), this.validityState !== 'valid' && this.validityMessage &&
|
|
349
|
+
index.h("r-hint", { key: 'aa06f829a6566becdf4a1f86e26e5161526756fb', "aria-live": "polite", id: `${uniqueId}-message`, role: "alert", variant: "error" }, this.customErrorMessage || this.validityMessage), this.valid && this.validMessage && this.showValid &&
|
|
350
|
+
index.h("r-hint", { key: '11500e705487028e4312679a6757dc48d861ebba', role: "alert", variant: "success" }, this.validMessage)));
|
|
347
351
|
}
|
|
348
352
|
get host() { return index.getElement(this); }
|
|
349
353
|
};
|
|
@@ -4,7 +4,7 @@ var index = require('./index-DJ4H_bFj.js');
|
|
|
4
4
|
var formData = require('./formData-B2DZyLxP.js');
|
|
5
5
|
var styleObserver = require('./style-observer-D9zSP9wP.js');
|
|
6
6
|
|
|
7
|
-
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, #
|
|
7
|
+
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}}";
|
|
8
8
|
|
|
9
9
|
const Select = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -51,10 +51,13 @@ const Select = class {
|
|
|
51
51
|
this.valueToDisplay = '';
|
|
52
52
|
this.isInitializing = false;
|
|
53
53
|
this.isResetting = false;
|
|
54
|
-
this.isNewValue = false;
|
|
55
54
|
this.focusedOption = null;
|
|
56
55
|
this.isValueFocused = false;
|
|
57
56
|
this.isNoResultsFound = false;
|
|
57
|
+
/** Indicates if the user has interacted with the select (focused/clicked) */
|
|
58
|
+
this.touched = false;
|
|
59
|
+
/** Indicates if the value has been changed by user interaction */
|
|
60
|
+
this.dirty = false;
|
|
58
61
|
this.handleSlotChange = () => {
|
|
59
62
|
setTimeout(() => {
|
|
60
63
|
this.initialize();
|
|
@@ -68,16 +71,19 @@ const Select = class {
|
|
|
68
71
|
/** Unique id */
|
|
69
72
|
this.uniqueId = `r-select-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
|
|
70
73
|
this.getValidityStateData = (element) => {
|
|
74
|
+
let validityState = '';
|
|
75
|
+
let validityMessage = '';
|
|
71
76
|
for (const state in element.validity) {
|
|
72
77
|
if (element.validity[state]) {
|
|
73
|
-
|
|
78
|
+
validityState = state;
|
|
74
79
|
if (this[state + 'Message']) {
|
|
75
|
-
|
|
76
|
-
return;
|
|
80
|
+
validityMessage = this[state + 'Message'];
|
|
81
|
+
return { validityState, validityMessage };
|
|
77
82
|
}
|
|
78
|
-
|
|
83
|
+
validityMessage = element.validationMessage;
|
|
79
84
|
}
|
|
80
85
|
}
|
|
86
|
+
return { validityState, validityMessage };
|
|
81
87
|
};
|
|
82
88
|
this.validateFormElement = (element = null) => {
|
|
83
89
|
if (element === null)
|
|
@@ -86,7 +92,9 @@ const Select = class {
|
|
|
86
92
|
return;
|
|
87
93
|
if (this.error)
|
|
88
94
|
return;
|
|
89
|
-
this.getValidityStateData(element);
|
|
95
|
+
const { validityState, validityMessage } = this.getValidityStateData(element);
|
|
96
|
+
this.validityState = validityState;
|
|
97
|
+
this.validityMessage = validityMessage;
|
|
90
98
|
const isValid = this.validityState === 'valid';
|
|
91
99
|
this.valid = isValid;
|
|
92
100
|
this.invalid = !isValid;
|
|
@@ -108,6 +116,8 @@ const Select = class {
|
|
|
108
116
|
return;
|
|
109
117
|
e.preventDefault();
|
|
110
118
|
e.stopPropagation();
|
|
119
|
+
// Mark as touched when user clicks on the select
|
|
120
|
+
this.touched = true;
|
|
111
121
|
this.toggle();
|
|
112
122
|
if (!this.isExpanded)
|
|
113
123
|
return;
|
|
@@ -122,7 +132,11 @@ const Select = class {
|
|
|
122
132
|
return () => {
|
|
123
133
|
var _a;
|
|
124
134
|
if (this.isExpanded) {
|
|
125
|
-
|
|
135
|
+
const newValue = ((_a = this.focusedOption) === null || _a === void 0 ? void 0 : _a.value) || '';
|
|
136
|
+
if (newValue !== this.currentValue) {
|
|
137
|
+
this.dirty = true;
|
|
138
|
+
}
|
|
139
|
+
this.setValueFromUserInteraction(newValue);
|
|
126
140
|
return;
|
|
127
141
|
}
|
|
128
142
|
this.expand();
|
|
@@ -143,7 +157,11 @@ const Select = class {
|
|
|
143
157
|
return;
|
|
144
158
|
}
|
|
145
159
|
if (this.focusedOption && altKey) {
|
|
146
|
-
|
|
160
|
+
const newValue = ((_a = this.focusedOption) === null || _a === void 0 ? void 0 : _a.value) || '';
|
|
161
|
+
if (newValue !== this.currentValue) {
|
|
162
|
+
this.dirty = true;
|
|
163
|
+
}
|
|
164
|
+
this.setValueFromUserInteraction(newValue);
|
|
147
165
|
return;
|
|
148
166
|
}
|
|
149
167
|
if (!this.combobox && this.focusedOption === this.optionElements[0])
|
|
@@ -217,7 +235,14 @@ const Select = class {
|
|
|
217
235
|
};
|
|
218
236
|
}
|
|
219
237
|
case 'Tab':
|
|
220
|
-
return () => {
|
|
238
|
+
return () => {
|
|
239
|
+
var _a;
|
|
240
|
+
const newValue = ((_a = this.focusedOption) === null || _a === void 0 ? void 0 : _a.value) || '';
|
|
241
|
+
if (newValue !== this.currentValue) {
|
|
242
|
+
this.dirty = true;
|
|
243
|
+
}
|
|
244
|
+
this.setValueFromUserInteraction(newValue);
|
|
245
|
+
};
|
|
221
246
|
default:
|
|
222
247
|
// No matching key handler: intentional no-op
|
|
223
248
|
return () => { };
|
|
@@ -289,7 +314,11 @@ const Select = class {
|
|
|
289
314
|
return;
|
|
290
315
|
}
|
|
291
316
|
this.valueElement.value = '';
|
|
292
|
-
|
|
317
|
+
const newValue = '';
|
|
318
|
+
if (newValue !== this.currentValue) {
|
|
319
|
+
this.dirty = true;
|
|
320
|
+
}
|
|
321
|
+
this.setValueFromUserInteraction(newValue);
|
|
293
322
|
this.reportValidity();
|
|
294
323
|
break;
|
|
295
324
|
default:
|
|
@@ -306,6 +335,8 @@ const Select = class {
|
|
|
306
335
|
};
|
|
307
336
|
this.onValueFocus = () => {
|
|
308
337
|
this.isValueFocused = true;
|
|
338
|
+
// Mark as touched when user focuses on the select
|
|
339
|
+
this.touched = true;
|
|
309
340
|
};
|
|
310
341
|
this.filterOptionsListByComboboxValue = (value = '') => {
|
|
311
342
|
const options = Array.from(this.host.querySelectorAll('r-select-option:not([data-no-results="true"])'));
|
|
@@ -351,6 +382,8 @@ const Select = class {
|
|
|
351
382
|
this.onResetForm = () => {
|
|
352
383
|
// Clear validation results
|
|
353
384
|
this.resetValidation();
|
|
385
|
+
// Reset touched and dirty states
|
|
386
|
+
this.markAsPristine();
|
|
354
387
|
// Restore initial value
|
|
355
388
|
this.setValue(this.initial['value']);
|
|
356
389
|
// Emit rReset
|
|
@@ -390,15 +423,24 @@ const Select = class {
|
|
|
390
423
|
handleValueChange(value, oldValue) {
|
|
391
424
|
if (this.isInitializing)
|
|
392
425
|
return;
|
|
393
|
-
this
|
|
394
|
-
|
|
426
|
+
// Only process if this is not the initial load (oldValue is defined)
|
|
427
|
+
if (oldValue !== undefined && oldValue !== value) {
|
|
428
|
+
// This is a programmatic change from parent attribute
|
|
429
|
+
// Do NOT mark as dirty, do NOT emit rChange
|
|
430
|
+
this._renderSelected(value, false);
|
|
431
|
+
this.clearComboboxOptions();
|
|
432
|
+
}
|
|
395
433
|
}
|
|
396
434
|
/** Listen for custom event triggered by "onClick" event on `<r-select-option>` */
|
|
397
435
|
optionSelectAction(e) {
|
|
398
436
|
e.stopPropagation();
|
|
399
437
|
if (this.disabled)
|
|
400
438
|
return;
|
|
401
|
-
|
|
439
|
+
// Mark as dirty only if value actually changes
|
|
440
|
+
if (e.target.value !== this.currentValue) {
|
|
441
|
+
this.dirty = true;
|
|
442
|
+
}
|
|
443
|
+
this.setValueFromUserInteraction(e.target.value);
|
|
402
444
|
}
|
|
403
445
|
tooltipFocusAction() {
|
|
404
446
|
this.collapse();
|
|
@@ -438,11 +480,28 @@ const Select = class {
|
|
|
438
480
|
if (this.isExpanded)
|
|
439
481
|
this.defineListboxPositionState();
|
|
440
482
|
}
|
|
441
|
-
/**
|
|
483
|
+
/**
|
|
484
|
+
* Set value of the select programmatically.
|
|
485
|
+
* Does NOT mark as dirty or emit change events.
|
|
486
|
+
* Use this for programmatic value updates.
|
|
487
|
+
*/
|
|
442
488
|
async setValue(value = '') {
|
|
443
489
|
// Clear validation results
|
|
444
490
|
this.resetValidation();
|
|
445
|
-
|
|
491
|
+
// Don't emit change event for programmatic updates
|
|
492
|
+
this._renderSelected(value, false);
|
|
493
|
+
this.clearComboboxOptions();
|
|
494
|
+
}
|
|
495
|
+
/**
|
|
496
|
+
* Internal method to set value from user interaction.
|
|
497
|
+
* Assumes dirty flag is already set by the caller.
|
|
498
|
+
* Will emit rChange if dirty flag is true.
|
|
499
|
+
*/
|
|
500
|
+
setValueFromUserInteraction(value = '') {
|
|
501
|
+
// Clear validation results
|
|
502
|
+
this.resetValidation();
|
|
503
|
+
// Emit change event for user interactions (if dirty is set)
|
|
504
|
+
this._renderSelected(value, true);
|
|
446
505
|
this.clearComboboxOptions();
|
|
447
506
|
}
|
|
448
507
|
/** Set value of the select */
|
|
@@ -453,6 +512,8 @@ const Select = class {
|
|
|
453
512
|
async reset() {
|
|
454
513
|
// Clear validation results
|
|
455
514
|
this.resetValidation();
|
|
515
|
+
// Reset touched and dirty states
|
|
516
|
+
this.markAsPristine();
|
|
456
517
|
// Collapse options listbox
|
|
457
518
|
this.collapse();
|
|
458
519
|
// Restore unfiltered list
|
|
@@ -485,6 +546,35 @@ const Select = class {
|
|
|
485
546
|
this.invalid = this.initial['invalid'];
|
|
486
547
|
this.valid = !this.invalid;
|
|
487
548
|
}
|
|
549
|
+
/**
|
|
550
|
+
* Returns whether the select has been touched (focused/clicked by user).
|
|
551
|
+
* @returns A boolean indicating whether the select has been touched.
|
|
552
|
+
*/
|
|
553
|
+
async isTouched() {
|
|
554
|
+
return this.touched;
|
|
555
|
+
}
|
|
556
|
+
/**
|
|
557
|
+
* Returns whether the select value has been changed by user interaction.
|
|
558
|
+
* @returns A boolean indicating whether the select is dirty.
|
|
559
|
+
*/
|
|
560
|
+
async isDirty() {
|
|
561
|
+
return this.dirty;
|
|
562
|
+
}
|
|
563
|
+
/**
|
|
564
|
+
* Marks the select as untouched and pristine (not dirty).
|
|
565
|
+
*/
|
|
566
|
+
async markAsPristine() {
|
|
567
|
+
this.touched = false;
|
|
568
|
+
this.dirty = false;
|
|
569
|
+
}
|
|
570
|
+
/**
|
|
571
|
+
* Validates the textarea without triggering UI and returns a boolean indicating its validity.
|
|
572
|
+
* @returns A boolean indicating whether the textarea is valid.
|
|
573
|
+
*/
|
|
574
|
+
async checkValidity() {
|
|
575
|
+
const { validityState } = this.getValidityStateData(this.nativeElement);
|
|
576
|
+
return validityState === 'valid';
|
|
577
|
+
}
|
|
488
578
|
/** Check validity and reveal validation state and message */
|
|
489
579
|
async reportValidity() {
|
|
490
580
|
this.validateFormElement(this.nativeElement);
|
|
@@ -617,7 +707,11 @@ const Select = class {
|
|
|
617
707
|
if (!this.isBusy) {
|
|
618
708
|
this.reportValidity();
|
|
619
709
|
}
|
|
620
|
-
|
|
710
|
+
// Only emit rChange if:
|
|
711
|
+
// 1. emitValue is true
|
|
712
|
+
// 2. Not during initialization or reset
|
|
713
|
+
// 3. The component is dirty (user has interacted)
|
|
714
|
+
if (emitValue && !this.isBusy && this.dirty) {
|
|
621
715
|
this.rChange.emit({
|
|
622
716
|
element: this.host,
|
|
623
717
|
value: value
|
|
@@ -1007,8 +1101,8 @@ const Select = class {
|
|
|
1007
1101
|
disabled,
|
|
1008
1102
|
required: isRequired
|
|
1009
1103
|
};
|
|
1010
|
-
return (index.h(index.Host, { key: '
|
|
1011
|
-
index.h("r-hint", { key: '
|
|
1104
|
+
return (index.h(index.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}` }, index.h("div", { key: '2e8de0d2041d00c4d90caf5aba2aeb50fcfc86e5', class: `r-select--label ${!internal ? 'r-select--label__margin-bottom' : ''}` }, index.h("div", { key: '273524030b099899861c93e9bba205c6c820d425', class: internal ? 'visually-hidden' : 'r-select--label-container' }, index.h("label", { key: 'f050500698aa5a48d6db101074129fae09899de3', id: `${uniqueId}-label`, onClick: this.isInteractive ? this.onValueClick : null }, index.h("r-label", Object.assign({ key: 'b5560ba5b8ee794eb775a555dec514f4d6e6546f' }, labelAttr), label)), index.h("slot", { key: 'bbbbe371702b95ac3d1636756eb673dc44c0dcb4', name: "popover" })), hint &&
|
|
1105
|
+
index.h("r-hint", { key: '27585bacce2143f20bdb20a3e03b5700dbb87d9b', id: `${uniqueId}-hint`, class: "r-select--hint" }, hint)), index.h("div", { key: '92a69fbee0890d5ddab0353348cdb4d8eb772137', class: "r-select" }, index.h("select", Object.assign({ key: 'bc2de60d73dcebf750a99e7b88eacc701a8c0b85', class: "r-select--native", ref: el => this.nativeElement = el }, nativeAttrs)), index.h("div", { key: 'b561dee21bdf58abe51786564a18812a20a0e97f', class: "r-select--container" }, this.combobox ? this.renderCombobox(comboboxAttrs) : this.renderSelect(comboboxAttrs), index.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)) && index.h("r-select-option", { key: '67888a456006e44869081876d35cdceca754942d', "data-no-results": "true", value: "no_results" }, this.noResultsFound), index.h("slot", { key: '4f404790887ad37d488183d814bb69f33c262688', onSlotchange: this.handleSlotChange })))), index.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 && index.h("r-hint", { key: '57336df2dd79b8f91be950f7a4ca05258ec26184', variant: this.invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && this.validityMessage, this.hasValidationSuccess && this.validMessage))));
|
|
1012
1106
|
}
|
|
1013
1107
|
get host() { return index.getElement(this); }
|
|
1014
1108
|
static get watchers() { return {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var index = require('./index-DJ4H_bFj.js');
|
|
4
4
|
var formData = require('./formData-B2DZyLxP.js');
|
|
5
5
|
|
|
6
|
-
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, #
|
|
6
|
+
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}";
|
|
7
7
|
|
|
8
8
|
const RTextarea = class {
|
|
9
9
|
constructor(hostRef) {
|
|
@@ -82,16 +82,19 @@ const RTextarea = class {
|
|
|
82
82
|
this.rReset.emit({ element: host, value });
|
|
83
83
|
};
|
|
84
84
|
this.getValidityStateData = (element) => {
|
|
85
|
+
let validityState = '';
|
|
86
|
+
let validityMessage = '';
|
|
85
87
|
for (const state in element.validity) {
|
|
86
88
|
if (element.validity[state]) {
|
|
87
|
-
|
|
89
|
+
validityState = state;
|
|
88
90
|
if (this[state + 'Message']) {
|
|
89
|
-
|
|
90
|
-
return;
|
|
91
|
+
validityMessage = this[state + 'Message'];
|
|
92
|
+
return { validityState, validityMessage };
|
|
91
93
|
}
|
|
92
|
-
|
|
94
|
+
validityMessage = element.validationMessage;
|
|
93
95
|
}
|
|
94
96
|
}
|
|
97
|
+
return { validityState, validityMessage };
|
|
95
98
|
};
|
|
96
99
|
this.validateFormElement = (element = null) => {
|
|
97
100
|
if (element === null)
|
|
@@ -100,7 +103,9 @@ const RTextarea = class {
|
|
|
100
103
|
return;
|
|
101
104
|
if (this.error)
|
|
102
105
|
return;
|
|
103
|
-
this.getValidityStateData(element);
|
|
106
|
+
const { validityState, validityMessage } = this.getValidityStateData(element);
|
|
107
|
+
this.validityState = validityState;
|
|
108
|
+
this.validityMessage = validityMessage;
|
|
104
109
|
const isValid = this.validityState === 'valid';
|
|
105
110
|
this.valid = isValid;
|
|
106
111
|
this.invalid = !isValid;
|
|
@@ -154,6 +159,14 @@ const RTextarea = class {
|
|
|
154
159
|
this.customErrorMessage = message;
|
|
155
160
|
this.validateFormElement(this.nativeElement);
|
|
156
161
|
}
|
|
162
|
+
/**
|
|
163
|
+
* Validates the textarea without triggering UI and returns a boolean indicating its validity.
|
|
164
|
+
* @returns A boolean indicating whether the textarea is valid.
|
|
165
|
+
*/
|
|
166
|
+
async checkValidity() {
|
|
167
|
+
const { validityState } = this.getValidityStateData(this.nativeElement);
|
|
168
|
+
return validityState === 'valid';
|
|
169
|
+
}
|
|
157
170
|
/** Validates an element and displays validity state. */
|
|
158
171
|
async reportValidity() {
|
|
159
172
|
this.validateFormElement(this.nativeElement);
|