@riverty/web-components 5.8.0 → 6.1.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 +107 -0
- package/custom-elements.json +215 -362
- package/dist/cjs/index-DJ4H_bFj.js +6 -10
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/r-accordion-panel.cjs.entry.js +1 -1
- package/dist/cjs/r-accordion-section.cjs.entry.js +1 -1
- package/dist/cjs/r-accordion-trigger.cjs.entry.js +5 -35
- package/dist/cjs/r-accordion.cjs.entry.js +3 -7
- package/dist/cjs/r-alert.cjs.entry.js +26 -11
- 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 +1 -11
- package/dist/cjs/r-checkbox.cjs.entry.js +76 -75
- package/dist/cjs/r-dialog.cjs.entry.js +3 -11
- package/dist/cjs/r-hint_2.cjs.entry.js +50 -0
- package/dist/cjs/{r-hint_3.cjs.entry.js → r-icon-button_2.cjs.entry.js} +64 -51
- package/dist/cjs/r-icon.cjs.entry.js +1 -1
- package/dist/cjs/r-input-code.cjs.entry.js +112 -17
- package/dist/cjs/r-input-date.cjs.entry.js +8 -14
- package/dist/cjs/r-input-password.cjs.entry.js +16 -8
- package/dist/cjs/r-input-phone-number.cjs.entry.js +7 -12
- package/dist/cjs/r-input.cjs.entry.js +90 -42
- package/dist/cjs/r-list-item.cjs.entry.js +20 -19
- package/dist/cjs/r-panel.cjs.entry.js +5 -5
- package/dist/cjs/r-popover-action.cjs.entry.js +1 -1
- package/dist/cjs/r-popover-content.cjs.entry.js +1 -1
- package/dist/cjs/r-popover-headline.cjs.entry.js +1 -1
- package/dist/cjs/r-popover-trigger.cjs.entry.js +1 -1
- package/dist/cjs/r-popover.cjs.entry.js +3 -3
- package/dist/cjs/r-progress-bar.cjs.entry.js +1 -1
- package/dist/cjs/r-radio-button-description.cjs.entry.js +1 -1
- package/dist/cjs/r-radio-button-leading.cjs.entry.js +1 -1
- package/dist/cjs/r-radio-button-title.cjs.entry.js +1 -1
- package/dist/cjs/r-radio-button-trailing.cjs.entry.js +1 -1
- package/dist/cjs/r-radio-button.cjs.entry.js +29 -12
- package/dist/cjs/r-radio-group.cjs.entry.js +18 -22
- package/dist/cjs/r-select-option.cjs.entry.js +1 -1
- package/dist/cjs/r-select.cjs.entry.js +6 -24
- package/dist/cjs/r-skip-link.cjs.entry.js +1 -1
- package/dist/cjs/r-stepper-item.cjs.entry.js +3 -3
- package/dist/cjs/r-stepper.cjs.entry.js +2 -2
- package/dist/cjs/r-tab-panel.cjs.entry.js +1 -1
- package/dist/cjs/r-tab.cjs.entry.js +6 -2
- package/dist/cjs/r-tabs-list.cjs.entry.js +160 -2
- package/dist/cjs/r-tabs.cjs.entry.js +34 -6
- package/dist/cjs/r-textarea.cjs.entry.js +7 -19
- package/dist/cjs/r-toast-group.cjs.entry.js +2 -2
- package/dist/cjs/r-toast.cjs.entry.js +31 -11
- package/dist/cjs/web-components.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +0 -1
- package/dist/collection/components/accordion/accordion.css +0 -2
- package/dist/collection/components/accordion/accordion.js +4 -8
- package/dist/collection/components/accordion/exports.js +1 -1
- package/dist/collection/components/accordion-panel/accordion-panel.js +1 -1
- package/dist/collection/components/accordion-section/accordion-section.js +1 -1
- package/dist/collection/components/accordion-trigger/accordion-trigger.css +0 -4
- package/dist/collection/components/accordion-trigger/accordion-trigger.js +4 -215
- package/dist/collection/components/alert/alert.css +8 -3
- package/dist/collection/components/alert/alert.js +48 -10
- package/dist/collection/components/badge/badge.js +1 -1
- package/dist/collection/components/button/button.js +1 -1
- package/dist/collection/components/checkbox/checkbox.js +80 -98
- package/dist/collection/components/checkbox-group/checkbox-group.js +1 -50
- package/dist/collection/components/dialog/dialog.css +1 -3
- package/dist/collection/components/dialog/dialog.js +2 -10
- package/dist/collection/components/hint/hint.js +2 -2
- package/dist/collection/components/icon/bundled-icons/riverty-kit.json +1 -1
- package/dist/collection/components/icon/riverty-kit.js +1 -1
- package/dist/collection/components/icon-button/icon-button.js +22 -3
- package/dist/collection/components/input/exports.js +2 -0
- package/dist/collection/components/input/input.css +3 -0
- package/dist/collection/components/input/input.js +233 -371
- package/dist/collection/components/input-code/exports.js +2 -0
- package/dist/collection/components/input-code/input-code.js +294 -26
- package/dist/collection/components/input-date/input-date.js +8 -77
- package/dist/collection/components/input-password/exports.js +1 -0
- package/dist/collection/components/input-password/input-password.css +1 -0
- package/dist/collection/components/input-password/input-password.js +195 -70
- package/dist/collection/components/input-phone-number/input-phone-number.js +7 -75
- package/dist/collection/components/label/label.js +3 -113
- package/dist/collection/components/list-item/list-item/list-item.css +53 -19
- package/dist/collection/components/list-item/list-item/list-item.js +38 -40
- package/dist/collection/components/panel/panel.css +40 -17
- package/dist/collection/components/panel/panel.js +6 -6
- package/dist/collection/components/popover/exports.js +0 -1
- package/dist/collection/components/popover/popover.css +2 -10
- package/dist/collection/components/popover/popover.js +2 -55
- package/dist/collection/components/popover-action/popover-action.js +1 -1
- package/dist/collection/components/popover-content/popover-content.js +1 -1
- package/dist/collection/components/popover-headline/popover-headline.js +1 -1
- package/dist/collection/components/popover-trigger/popover-trigger.js +1 -1
- package/dist/collection/components/progress-bar/progress-bar.js +1 -1
- package/dist/collection/components/radio-button/radio-button.js +49 -12
- package/dist/collection/components/radio-button-description/radio-button-description.js +1 -1
- package/dist/collection/components/radio-button-leading/radio-button-leading.js +1 -1
- package/dist/collection/components/radio-button-title/radio-button-title.js +1 -1
- package/dist/collection/components/radio-button-trailing/radio-button-trailing.js +1 -1
- package/dist/collection/components/radio-group/radio-group.js +38 -124
- package/dist/collection/components/select/select.js +6 -330
- package/dist/collection/components/select-option/select-option.js +1 -1
- package/dist/collection/components/skip-link/skip-link.js +1 -1
- package/dist/collection/components/stepper/stepper.css +1 -1
- package/dist/collection/components/stepper/stepper.js +1 -1
- package/dist/collection/components/stepper-item/stepper-item.css +3 -3
- package/dist/collection/components/stepper-item/stepper-item.js +2 -2
- package/dist/collection/components/tab/tab.css +29 -29
- package/dist/collection/components/tab/tab.js +5 -1
- package/dist/collection/components/tab-panel/tab-panel.js +1 -1
- package/dist/collection/components/tabs/tabs.js +34 -6
- package/dist/collection/components/tabs-list/exports.js +2 -0
- package/dist/collection/components/tabs-list/tabs-list.css +43 -2
- package/dist/collection/components/tabs-list/tabs-list.js +277 -1
- package/dist/collection/components/textarea/textarea.css +1 -1
- package/dist/collection/components/textarea/textarea.js +6 -158
- package/dist/collection/components/toast/toast.css +35 -9
- package/dist/collection/components/toast/toast.js +44 -32
- package/dist/collection/components/toast-group/toast-group.css +1 -1
- package/dist/collection/components/toast-group/toast-group.js +1 -1
- package/dist/collection/components/tooltip/tooltip.js +2 -2
- package/dist/esm/index-Da7qOBFr.js +6 -10
- package/dist/esm/loader.js +1 -1
- package/dist/esm/r-accordion-panel.entry.js +1 -1
- package/dist/esm/r-accordion-section.entry.js +1 -1
- package/dist/esm/r-accordion-trigger.entry.js +5 -35
- package/dist/esm/r-accordion.entry.js +3 -7
- package/dist/esm/r-alert.entry.js +26 -11
- 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 +1 -11
- package/dist/esm/r-checkbox.entry.js +76 -75
- package/dist/esm/r-dialog.entry.js +3 -11
- package/dist/esm/r-hint_2.entry.js +47 -0
- package/dist/esm/{r-hint_3.entry.js → r-icon-button_2.entry.js} +65 -51
- package/dist/esm/r-icon.entry.js +1 -1
- package/dist/esm/r-input-code.entry.js +112 -17
- package/dist/esm/r-input-date.entry.js +8 -14
- package/dist/esm/r-input-password.entry.js +16 -8
- package/dist/esm/r-input-phone-number.entry.js +7 -12
- package/dist/esm/r-input.entry.js +90 -42
- package/dist/esm/r-list-item.entry.js +20 -19
- package/dist/esm/r-panel.entry.js +5 -5
- package/dist/esm/r-popover-action.entry.js +1 -1
- package/dist/esm/r-popover-content.entry.js +1 -1
- package/dist/esm/r-popover-headline.entry.js +1 -1
- package/dist/esm/r-popover-trigger.entry.js +1 -1
- package/dist/esm/r-popover.entry.js +3 -3
- package/dist/esm/r-progress-bar.entry.js +1 -1
- package/dist/esm/r-radio-button-description.entry.js +1 -1
- package/dist/esm/r-radio-button-leading.entry.js +1 -1
- package/dist/esm/r-radio-button-title.entry.js +1 -1
- package/dist/esm/r-radio-button-trailing.entry.js +1 -1
- package/dist/esm/r-radio-button.entry.js +29 -12
- package/dist/esm/r-radio-group.entry.js +18 -22
- package/dist/esm/r-select-option.entry.js +1 -1
- package/dist/esm/r-select.entry.js +6 -24
- package/dist/esm/r-skip-link.entry.js +1 -1
- package/dist/esm/r-stepper-item.entry.js +3 -3
- package/dist/esm/r-stepper.entry.js +2 -2
- package/dist/esm/r-tab-panel.entry.js +1 -1
- package/dist/esm/r-tab.entry.js +6 -2
- package/dist/esm/r-tabs-list.entry.js +161 -3
- package/dist/esm/r-tabs.entry.js +34 -6
- package/dist/esm/r-textarea.entry.js +7 -19
- package/dist/esm/r-toast-group.entry.js +2 -2
- package/dist/esm/r-toast.entry.js +31 -11
- package/dist/esm/web-components.js +1 -1
- package/dist/types/components/accordion/accordion.d.ts +1 -5
- package/dist/types/components/accordion/exports.d.ts +1 -1
- package/dist/types/components/accordion-trigger/accordion-trigger.d.ts +0 -36
- package/dist/types/components/alert/alert.d.ts +6 -1
- package/dist/types/components/checkbox/checkbox.d.ts +24 -34
- package/dist/types/components/checkbox-group/checkbox-group.d.ts +0 -11
- package/dist/types/components/dialog/dialog.d.ts +0 -2
- package/dist/types/components/icon/exports.d.ts +1 -0
- package/dist/types/components/icon/icon-data.d.ts +1 -0
- package/dist/types/components/icon/riverty-kit.d.ts +1 -0
- package/dist/types/components/icon-button/icon-button.d.ts +4 -0
- package/dist/types/components/input/exports.d.ts +4 -0
- package/dist/types/components/input/input.d.ts +47 -73
- package/dist/types/components/input-code/exports.d.ts +4 -0
- package/dist/types/components/input-code/input-code.d.ts +49 -7
- package/dist/types/components/input-date/input-date.d.ts +0 -16
- package/dist/types/components/input-password/exports.d.ts +1 -0
- package/dist/types/components/input-password/input-password.d.ts +48 -16
- package/dist/types/components/input-phone-number/input-phone-number.d.ts +0 -16
- package/dist/types/components/label/label.d.ts +0 -18
- package/dist/types/components/list-item/list-item/list-item.d.ts +5 -9
- package/dist/types/components/popover/exports.d.ts +0 -2
- package/dist/types/components/popover/popover.d.ts +1 -14
- package/dist/types/components/radio-button/radio-button.d.ts +5 -0
- package/dist/types/components/radio-group/radio-group.d.ts +5 -26
- package/dist/types/components/select/select.d.ts +0 -50
- package/dist/types/components/tabs/tabs.d.ts +1 -0
- package/dist/types/components/tabs-list/exports.d.ts +4 -0
- package/dist/types/components/tabs-list/tabs-list.d.ts +38 -0
- package/dist/types/components/textarea/textarea.d.ts +0 -32
- package/dist/types/components/toast/toast.d.ts +11 -5
- package/dist/types/components.d.ts +280 -638
- package/dist/web-components/bundled-icons/riverty-kit.json +1 -1
- package/dist/web-components/p-0347feff.entry.js +1 -0
- package/dist/web-components/p-159822fe.entry.js +1 -0
- package/dist/web-components/p-19407a14.entry.js +1 -0
- package/dist/web-components/{p-5744d75c.entry.js → p-1da75540.entry.js} +1 -1
- package/dist/web-components/p-26ef77d6.entry.js +1 -0
- package/dist/web-components/p-3884c6e7.entry.js +1 -0
- package/dist/web-components/p-3f60c6c0.entry.js +1 -0
- package/dist/web-components/{p-87f39749.entry.js → p-4595fa8e.entry.js} +1 -1
- package/dist/web-components/{p-4e3df002.entry.js → p-4cc58c6a.entry.js} +1 -1
- package/dist/web-components/p-4f261b63.entry.js +1 -0
- package/dist/web-components/{p-e0e2f2b2.entry.js → p-50893211.entry.js} +1 -1
- package/dist/web-components/{p-72fa1fd1.entry.js → p-550e2237.entry.js} +1 -1
- package/dist/web-components/p-589baaf9.entry.js +1 -0
- package/dist/web-components/{p-3b4e3faf.entry.js → p-5eeb7002.entry.js} +1 -1
- package/dist/web-components/p-60341de2.entry.js +1 -0
- package/dist/web-components/{p-44ae9f33.entry.js → p-62b788bf.entry.js} +1 -1
- package/dist/web-components/p-63fd817d.entry.js +1 -0
- package/dist/web-components/p-67fa3f84.entry.js +1 -0
- package/dist/web-components/p-6bb44ec6.entry.js +1 -0
- package/dist/web-components/p-6cc2ea2c.entry.js +1 -0
- package/dist/web-components/p-70784685.entry.js +1 -0
- package/dist/web-components/p-7ce57332.entry.js +1 -0
- package/dist/web-components/{p-429213ea.entry.js → p-7fed6f4d.entry.js} +1 -1
- package/dist/web-components/p-8a66d20c.entry.js +1 -0
- package/dist/web-components/{p-c7f8e59b.entry.js → p-8c31cbd5.entry.js} +1 -1
- package/dist/web-components/p-8dac326b.entry.js +1 -0
- package/dist/web-components/p-92c7cf33.entry.js +1 -0
- package/dist/web-components/{p-1c2497de.entry.js → p-9ef1bbee.entry.js} +1 -1
- package/dist/web-components/p-a7d22c76.entry.js +1 -0
- package/dist/web-components/p-b96d59ca.entry.js +1 -0
- package/dist/web-components/p-ba801820.entry.js +1 -0
- package/dist/web-components/{p-a022f356.entry.js → p-bfc8c077.entry.js} +1 -1
- package/dist/web-components/p-c05b05da.entry.js +1 -0
- package/dist/web-components/p-c1e748f2.entry.js +1 -0
- package/dist/web-components/{p-5bbd6e3c.entry.js → p-c478712b.entry.js} +1 -1
- package/dist/web-components/p-c95b6470.entry.js +1 -0
- package/dist/web-components/p-cd5daad2.entry.js +1 -0
- package/dist/web-components/p-cdd88c5a.entry.js +1 -0
- package/dist/web-components/{p-3078b2b8.entry.js → p-d054eb4d.entry.js} +1 -1
- package/dist/web-components/{p-8563a1ab.entry.js → p-d433a828.entry.js} +1 -1
- package/dist/web-components/p-d7726e46.entry.js +1 -0
- package/dist/web-components/p-d819c8e5.entry.js +1 -0
- package/dist/web-components/{p-755cc697.entry.js → p-e4dc60f0.entry.js} +1 -1
- package/dist/web-components/{p-d1379ac6.entry.js → p-f9d5004c.entry.js} +1 -1
- package/dist/web-components/web-components.esm.js +1 -1
- package/package.json +1 -1
- package/dist/cjs/r-accordion-item.cjs.entry.js +0 -78
- package/dist/cjs/r-icon-button.cjs.entry.js +0 -81
- package/dist/collection/components/accordion-item/accordion-item.css +0 -121
- package/dist/collection/components/accordion-item/accordion-item.js +0 -138
- package/dist/esm/r-accordion-item.entry.js +0 -76
- package/dist/esm/r-icon-button.entry.js +0 -79
- package/dist/types/components/accordion-item/accordion-item.d.ts +0 -26
- package/dist/web-components/p-00ca474f.entry.js +0 -1
- package/dist/web-components/p-0bb04d79.entry.js +0 -1
- package/dist/web-components/p-15ac0fdd.entry.js +0 -1
- package/dist/web-components/p-1c956370.entry.js +0 -1
- package/dist/web-components/p-2a512983.entry.js +0 -1
- package/dist/web-components/p-2b2f581a.entry.js +0 -1
- package/dist/web-components/p-2e18e762.entry.js +0 -1
- package/dist/web-components/p-3bc93d65.entry.js +0 -1
- package/dist/web-components/p-4bd3e077.entry.js +0 -1
- package/dist/web-components/p-51a5804b.entry.js +0 -1
- package/dist/web-components/p-56da04d8.entry.js +0 -1
- package/dist/web-components/p-5e6aabd8.entry.js +0 -1
- package/dist/web-components/p-656229de.entry.js +0 -1
- package/dist/web-components/p-6a4f3836.entry.js +0 -1
- package/dist/web-components/p-7775228c.entry.js +0 -1
- package/dist/web-components/p-7ad8e78b.entry.js +0 -1
- package/dist/web-components/p-85a9af42.entry.js +0 -1
- package/dist/web-components/p-9e50120b.entry.js +0 -1
- package/dist/web-components/p-a7e7f8fa.entry.js +0 -1
- package/dist/web-components/p-ad9b2a48.entry.js +0 -1
- package/dist/web-components/p-b2f03016.entry.js +0 -1
- package/dist/web-components/p-b87ad83b.entry.js +0 -1
- package/dist/web-components/p-c937bd92.entry.js +0 -1
- package/dist/web-components/p-cbcd7699.entry.js +0 -1
- package/dist/web-components/p-dbe579e8.entry.js +0 -1
- package/dist/web-components/p-e4b66277.entry.js +0 -1
- package/dist/web-components/p-e6a31881.entry.js +0 -1
- package/dist/web-components/p-f2577a3c.entry.js +0 -1
- package/dist/web-components/p-f6a92287.entry.js +0 -1
|
@@ -29,7 +29,7 @@ export class RBadge {
|
|
|
29
29
|
const hostAttrs = {
|
|
30
30
|
variant
|
|
31
31
|
};
|
|
32
|
-
return (h(Host, Object.assign({ key: '
|
|
32
|
+
return (h(Host, Object.assign({ key: '414f16e5a8bde16b295420ea689be3b528b6b9d7' }, hostAttrs), h("div", { key: 'd06b6b22be283666817326c82503080c247b3cb7', class: "r-badge" }, iconVisible && h("slot", { key: '38e1c8768bbc6560294f798ba635bb6a1ecd5ee1', name: "icon" }, h("r-icon", { key: 'da0d4672b3fd929deb32944faeb2cf6676dd0751', size: "s", name: this.iconName, iconAriaLabel: iconAriaLabel })), h("slot", { key: 'f0c3ce3e33ddb887af28e03cbd9af75f0fe0346e' }))));
|
|
33
33
|
}
|
|
34
34
|
static get is() { return "r-badge"; }
|
|
35
35
|
static get encapsulation() { return "shadow"; }
|
|
@@ -131,7 +131,7 @@ export class Button {
|
|
|
131
131
|
position: iconPosition
|
|
132
132
|
};
|
|
133
133
|
const TagName = isLink ? 'a' : 'button';
|
|
134
|
-
return (h(Host, { key: '
|
|
134
|
+
return (h(Host, { key: '97dbd8b4be7ada112d733f3e8838bb98b23ea37d' }, h(TagName, Object.assign({ key: '51ac8df717d9db6901b0bf313987fca0aa3c9e0e', class: "r-button" }, attrs, { "aria-label": rAriaLabel || null, ref: (el) => (this.nativeElement = el), onClick: this.handleClick }), h("span", { key: '5d18e8d4d11946a950196113ca34b13389d380d7', class: "r-button--slot" }, icon && h("r-icon", Object.assign({ key: 'b0eab29fd53184befd2e63cc48b8e9fa5262f742', name: icon }, iconAttrs, { size: "s" })), this.hasIconSlot && h("slot", { key: '1679c43372773a8888d790afcee23d4b4a4d5969', name: "icon" }), h("div", { key: 'd3862e66255a78e2cfb0ae3741cd8f82e4efc0ea', style: { display: 'contents' } }, h("slot", { key: '68dc5cbb93492c37139d6efdbc706050271f710f', onSlotchange: this.handleSlotChange }))))));
|
|
135
135
|
}
|
|
136
136
|
static get is() { return "r-button"; }
|
|
137
137
|
static get encapsulation() { return "shadow"; }
|
|
@@ -8,14 +8,15 @@ import { appendControlToFormData } from "../../utils/formData";
|
|
|
8
8
|
*/
|
|
9
9
|
export class Checkbox {
|
|
10
10
|
constructor() {
|
|
11
|
-
/**
|
|
12
|
-
|
|
13
|
-
* Controls the visibility of validation indicators for the field.
|
|
14
|
-
* */
|
|
15
|
-
this.showValid = false;
|
|
11
|
+
/** Automatically focus the checkbox when the component is mounted. Note: Only one element per page should have autofocus set to true, following browser standard behavior. */
|
|
12
|
+
this.autofocus = false;
|
|
16
13
|
this.validityState = '';
|
|
17
14
|
this.validityMessage = '';
|
|
15
|
+
this.touched = false;
|
|
16
|
+
// Private properties
|
|
18
17
|
this.initial = {};
|
|
18
|
+
this.uniqueId = `r-checkbox-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
|
|
19
|
+
// Private methods
|
|
19
20
|
this.getValidityStateData = (element) => {
|
|
20
21
|
let validityState = '';
|
|
21
22
|
let validityMessage = '';
|
|
@@ -49,9 +50,6 @@ export class Checkbox {
|
|
|
49
50
|
message: this.validityMessage
|
|
50
51
|
});
|
|
51
52
|
};
|
|
52
|
-
/** Unique id */
|
|
53
|
-
this.uniqueId = `r-checkbox-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
|
|
54
|
-
this.touched = false;
|
|
55
53
|
this.handleClick = (event) => {
|
|
56
54
|
if (this.disabled)
|
|
57
55
|
return;
|
|
@@ -83,18 +81,13 @@ export class Checkbox {
|
|
|
83
81
|
this.contributeToFormData = (event) => {
|
|
84
82
|
appendControlToFormData(this.nativeElement || this.host, event.formData);
|
|
85
83
|
};
|
|
84
|
+
this.applyAutofocus = () => {
|
|
85
|
+
queueMicrotask(() => {
|
|
86
|
+
this.setFocus();
|
|
87
|
+
});
|
|
88
|
+
};
|
|
86
89
|
}
|
|
87
|
-
|
|
88
|
-
get parentFormEl() {
|
|
89
|
-
return this.host.closest('form') || document.querySelector(`#${this.form}`) || null;
|
|
90
|
-
}
|
|
91
|
-
/** Determine whether this element should be ignored during Constraint Validation API validation. */
|
|
92
|
-
get isNoValidate() {
|
|
93
|
-
var _a;
|
|
94
|
-
return (((_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.hasAttribute('novalidate')) ||
|
|
95
|
-
this.novalidate ||
|
|
96
|
-
false);
|
|
97
|
-
}
|
|
90
|
+
// Public Methods
|
|
98
91
|
/**
|
|
99
92
|
* Asynchronously retrieves the validity state of the checkbox.
|
|
100
93
|
*
|
|
@@ -115,50 +108,6 @@ export class Checkbox {
|
|
|
115
108
|
message: this.validityMessage
|
|
116
109
|
};
|
|
117
110
|
}
|
|
118
|
-
async handleCheckedChange() {
|
|
119
|
-
// Only proceed if checkbox has been interacted with
|
|
120
|
-
if (!this.touched)
|
|
121
|
-
return;
|
|
122
|
-
if (this.disabled)
|
|
123
|
-
return;
|
|
124
|
-
const { host, value, checked } = this;
|
|
125
|
-
this.rChange.emit({ element: host, value, checked });
|
|
126
|
-
// Update native element checked state
|
|
127
|
-
if (this.nativeElement) {
|
|
128
|
-
this.nativeElement.checked = checked;
|
|
129
|
-
}
|
|
130
|
-
// Validate if required
|
|
131
|
-
if (this.required && !this.isNoValidate) {
|
|
132
|
-
this.validateFormElement(this.nativeElement);
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
connectFormEventListeners() {
|
|
136
|
-
var _a, _b, _c;
|
|
137
|
-
(_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.addEventListener('formdata', this.contributeToFormData);
|
|
138
|
-
(_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.addEventListener('submit', this.onSubmitForm, { capture: true });
|
|
139
|
-
(_c = this.parentFormEl) === null || _c === void 0 ? void 0 : _c.addEventListener('reset', this.onResetForm);
|
|
140
|
-
}
|
|
141
|
-
disconnectFormEventListeners() {
|
|
142
|
-
var _a, _b, _c;
|
|
143
|
-
(_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('formdata', this.contributeToFormData);
|
|
144
|
-
(_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('submit', this.onSubmitForm);
|
|
145
|
-
(_c = this.parentFormEl) === null || _c === void 0 ? void 0 : _c.removeEventListener('reset', this.onResetForm);
|
|
146
|
-
}
|
|
147
|
-
componentWillLoad() {
|
|
148
|
-
this.initial['checked'] = this.checked;
|
|
149
|
-
this.initial['invalid'] = this.invalid;
|
|
150
|
-
}
|
|
151
|
-
componentDidLoad() {
|
|
152
|
-
if (this.nativeElement) {
|
|
153
|
-
this.nativeElement.indeterminate = this.indeterminate;
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
|
-
connectedCallback() {
|
|
157
|
-
this.connectFormEventListeners();
|
|
158
|
-
}
|
|
159
|
-
disconnectedCallback() {
|
|
160
|
-
this.disconnectFormEventListeners();
|
|
161
|
-
}
|
|
162
111
|
/**
|
|
163
112
|
* Sets focus on the checkbox element.
|
|
164
113
|
*/
|
|
@@ -212,6 +161,36 @@ export class Checkbox {
|
|
|
212
161
|
const { validityState } = this.getValidityStateData(this.nativeElement);
|
|
213
162
|
return validityState === 'valid';
|
|
214
163
|
}
|
|
164
|
+
// Watchers
|
|
165
|
+
async handleCheckedChange() {
|
|
166
|
+
// Only proceed if checkbox has been interacted with
|
|
167
|
+
if (!this.touched)
|
|
168
|
+
return;
|
|
169
|
+
if (this.disabled)
|
|
170
|
+
return;
|
|
171
|
+
const { host, value, checked } = this;
|
|
172
|
+
this.rChange.emit({ element: host, value, checked });
|
|
173
|
+
// Update native element checked state
|
|
174
|
+
if (this.nativeElement) {
|
|
175
|
+
this.nativeElement.checked = checked;
|
|
176
|
+
}
|
|
177
|
+
// Validate if required
|
|
178
|
+
if (this.required && !this.isNoValidate) {
|
|
179
|
+
this.validateFormElement(this.nativeElement);
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
// Getters
|
|
183
|
+
/** Identify wrapping form element */
|
|
184
|
+
get parentFormEl() {
|
|
185
|
+
return this.host.closest('form') || document.querySelector(`#${this.form}`) || null;
|
|
186
|
+
}
|
|
187
|
+
/** Determine whether this element should be ignored during Constraint Validation API validation. */
|
|
188
|
+
get isNoValidate() {
|
|
189
|
+
var _a;
|
|
190
|
+
return (((_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.hasAttribute('novalidate')) ||
|
|
191
|
+
this.novalidate ||
|
|
192
|
+
false);
|
|
193
|
+
}
|
|
215
194
|
get hasErrorMessage() {
|
|
216
195
|
var _a;
|
|
217
196
|
return typeof this.error === 'string' && ((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) > 0;
|
|
@@ -229,31 +208,53 @@ export class Checkbox {
|
|
|
229
208
|
return false;
|
|
230
209
|
return this.hasErrorMessage || this.hasCustomErrorMessage || this.hasValidationError;
|
|
231
210
|
}
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
211
|
+
connectFormEventListeners() {
|
|
212
|
+
var _a, _b, _c;
|
|
213
|
+
(_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.addEventListener('formdata', this.contributeToFormData);
|
|
214
|
+
(_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.addEventListener('submit', this.onSubmitForm, { capture: true });
|
|
215
|
+
(_c = this.parentFormEl) === null || _c === void 0 ? void 0 : _c.addEventListener('reset', this.onResetForm);
|
|
236
216
|
}
|
|
237
|
-
|
|
238
|
-
|
|
217
|
+
disconnectFormEventListeners() {
|
|
218
|
+
var _a, _b, _c;
|
|
219
|
+
(_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('formdata', this.contributeToFormData);
|
|
220
|
+
(_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('submit', this.onSubmitForm);
|
|
221
|
+
(_c = this.parentFormEl) === null || _c === void 0 ? void 0 : _c.removeEventListener('reset', this.onResetForm);
|
|
222
|
+
}
|
|
223
|
+
// Lifecycle methods
|
|
224
|
+
componentWillLoad() {
|
|
225
|
+
this.initial['checked'] = this.checked;
|
|
226
|
+
this.initial['invalid'] = this.invalid;
|
|
227
|
+
}
|
|
228
|
+
componentDidLoad() {
|
|
229
|
+
if (this.nativeElement) {
|
|
230
|
+
this.nativeElement.indeterminate = this.indeterminate;
|
|
231
|
+
}
|
|
232
|
+
if (this.autofocus)
|
|
233
|
+
this.applyAutofocus();
|
|
234
|
+
}
|
|
235
|
+
connectedCallback() {
|
|
236
|
+
this.connectFormEventListeners();
|
|
237
|
+
}
|
|
238
|
+
disconnectedCallback() {
|
|
239
|
+
this.disconnectFormEventListeners();
|
|
239
240
|
}
|
|
240
241
|
render() {
|
|
241
|
-
const { error, name, value, disabled, required, uniqueId, checked, indeterminate } = this;
|
|
242
|
+
const { error, name, value, disabled, required, uniqueId, checked, indeterminate, autofocus } = this;
|
|
242
243
|
const inputAttrs = {
|
|
243
244
|
name,
|
|
244
245
|
value,
|
|
245
246
|
disabled,
|
|
246
247
|
required,
|
|
247
248
|
checked,
|
|
248
|
-
indeterminate
|
|
249
|
+
indeterminate,
|
|
250
|
+
autofocus
|
|
249
251
|
};
|
|
250
|
-
return (h(Host, { key: '
|
|
252
|
+
return (h(Host, { key: '54a5b4a38fd2e9c2a94a95d9ad7d47cd91123d0f', onClick: this.handleClick }, h("div", { key: '089747b6032bfc4e0de581eed060558dc73a1118', class: "r-checkbox" }, h("input", Object.assign({ key: 'fa2b9640c25d4f0d1e1781f885a27f1b24c906b4', class: "r-checkbox--input", type: "checkbox" }, inputAttrs, { id: `${uniqueId}-input`, ref: el => this.nativeElement = el, "aria-describedby": this.hasInvalidMessage ? `${uniqueId}-message` : null, "aria-required": `${this.required || false}`, "aria-invalid": `${this.invalid || false}` })), h("div", { key: '49e514969fa11eccba18658d275462c8c705f8e2', class: "r-checkbox--box", "aria-hidden": "true" }, this.checked ?
|
|
251
253
|
h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.80019 15.8988L4.6002 11.6988L3.2002 13.0988L8.80019 18.6988L20.8002 6.69883L19.4002 5.29883L8.80019 15.8988Z", fill: "currentColor" }))
|
|
252
254
|
: this.indeterminate ?
|
|
253
255
|
h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("rect", { x: "4", y: "11", width: "16", height: "2", fill: "currentColor" }))
|
|
254
|
-
: null), h("div", { key: '
|
|
255
|
-
h("r-hint", { key: '
|
|
256
|
-
h("r-hint", { key: 'cdaaad06d4f0cd0e880a3f327c0eb8d2058eb91b', variant: "success" }, this.validMessage))))));
|
|
256
|
+
: null), h("div", { key: '96090e0dc6dcf564a73e061a7e75ad0a4ec0b1cb', class: "r-checkbox--description" }, h("label", { key: '524a1cba2f9ef69863c48ca536921411be743ec5', class: "r-checkbox--label", id: `${uniqueId}-label`, htmlFor: `${uniqueId}-input` }, h("slot", { key: 'cda4f61e27a86b988746465d14567f49f09eabd0' })), h("div", { key: 'be4d6ba741c2580fd1d5a6dc3e2f71716df55d71', id: `${uniqueId}-message`, class: !this.hasInvalidMessage ? 'visually-hidden' : 'r-checkbox--message', "aria-live": "polite", "aria-atomic": "true" }, this.hasInvalidMessage &&
|
|
257
|
+
h("r-hint", { key: '05b0c0d5ee3c603d19faa11006e9e3501dc8be82', variant: "error" }, error || this.customErrorMessage || this.validityMessage))))));
|
|
257
258
|
}
|
|
258
259
|
static get is() { return "r-checkbox"; }
|
|
259
260
|
static get encapsulation() { return "shadow"; }
|
|
@@ -402,9 +403,9 @@ export class Checkbox {
|
|
|
402
403
|
"setter": false,
|
|
403
404
|
"reflect": true
|
|
404
405
|
},
|
|
405
|
-
"
|
|
406
|
+
"autofocus": {
|
|
406
407
|
"type": "boolean",
|
|
407
|
-
"attribute": "
|
|
408
|
+
"attribute": "autofocus",
|
|
408
409
|
"mutable": false,
|
|
409
410
|
"complexType": {
|
|
410
411
|
"original": "boolean",
|
|
@@ -412,10 +413,10 @@ export class Checkbox {
|
|
|
412
413
|
"references": {}
|
|
413
414
|
},
|
|
414
415
|
"required": false,
|
|
415
|
-
"optional":
|
|
416
|
+
"optional": true,
|
|
416
417
|
"docs": {
|
|
417
418
|
"tags": [],
|
|
418
|
-
"text": "
|
|
419
|
+
"text": "Automatically focus the checkbox when the component is mounted. Note: Only one element per page should have autofocus set to true, following browser standard behavior."
|
|
419
420
|
},
|
|
420
421
|
"getter": false,
|
|
421
422
|
"setter": false,
|
|
@@ -441,25 +442,6 @@ export class Checkbox {
|
|
|
441
442
|
"setter": false,
|
|
442
443
|
"reflect": true
|
|
443
444
|
},
|
|
444
|
-
"validMessage": {
|
|
445
|
-
"type": "string",
|
|
446
|
-
"attribute": "valid-message",
|
|
447
|
-
"mutable": false,
|
|
448
|
-
"complexType": {
|
|
449
|
-
"original": "string",
|
|
450
|
-
"resolved": "string",
|
|
451
|
-
"references": {}
|
|
452
|
-
},
|
|
453
|
-
"required": false,
|
|
454
|
-
"optional": true,
|
|
455
|
-
"docs": {
|
|
456
|
-
"tags": [],
|
|
457
|
-
"text": "_DEPRECATED_ (This property will be removed in November 2025 release.)\nSet custom message if the element meets all its validation constraints."
|
|
458
|
-
},
|
|
459
|
-
"getter": false,
|
|
460
|
-
"setter": false,
|
|
461
|
-
"reflect": false
|
|
462
|
-
},
|
|
463
445
|
"invalid": {
|
|
464
446
|
"type": "boolean",
|
|
465
447
|
"attribute": "invalid",
|
|
@@ -9,13 +9,6 @@ export class CheckboxGroup {
|
|
|
9
9
|
* Specifies whether the `value` is required.
|
|
10
10
|
*/
|
|
11
11
|
this.required = false;
|
|
12
|
-
/**
|
|
13
|
-
* _DEPRECATED_ (This property will be removed in November 2025 release.)
|
|
14
|
-
* Indicates whether to show the validation state.
|
|
15
|
-
* When set to `true`, the component will display validation feedback.
|
|
16
|
-
* Defaults to `false`.
|
|
17
|
-
* */
|
|
18
|
-
this.showValid = false;
|
|
19
12
|
this.indeterminate = false;
|
|
20
13
|
this.allChecked = false;
|
|
21
14
|
this.noChecked = false;
|
|
@@ -154,11 +147,8 @@ export class CheckboxGroup {
|
|
|
154
147
|
this.noChecked = checkedCheckboxes.length === 0;
|
|
155
148
|
}
|
|
156
149
|
get message() {
|
|
157
|
-
const {
|
|
150
|
+
const { validityMessage, invalid, error, customErrorMessage } = this;
|
|
158
151
|
let message = null;
|
|
159
|
-
if (valid) {
|
|
160
|
-
message = validMessage || null;
|
|
161
|
-
}
|
|
162
152
|
if (invalid) {
|
|
163
153
|
message = error || customErrorMessage || validityMessage || null;
|
|
164
154
|
}
|
|
@@ -339,26 +329,6 @@ export class CheckboxGroup {
|
|
|
339
329
|
"setter": false,
|
|
340
330
|
"reflect": false
|
|
341
331
|
},
|
|
342
|
-
"showValid": {
|
|
343
|
-
"type": "boolean",
|
|
344
|
-
"attribute": "show-valid",
|
|
345
|
-
"mutable": false,
|
|
346
|
-
"complexType": {
|
|
347
|
-
"original": "boolean",
|
|
348
|
-
"resolved": "boolean",
|
|
349
|
-
"references": {}
|
|
350
|
-
},
|
|
351
|
-
"required": false,
|
|
352
|
-
"optional": false,
|
|
353
|
-
"docs": {
|
|
354
|
-
"tags": [],
|
|
355
|
-
"text": "_DEPRECATED_ (This property will be removed in November 2025 release.)\nIndicates whether to show the validation state.\nWhen set to `true`, the component will display validation feedback.\nDefaults to `false`."
|
|
356
|
-
},
|
|
357
|
-
"getter": false,
|
|
358
|
-
"setter": false,
|
|
359
|
-
"reflect": false,
|
|
360
|
-
"defaultValue": "false"
|
|
361
|
-
},
|
|
362
332
|
"valid": {
|
|
363
333
|
"type": "boolean",
|
|
364
334
|
"attribute": "valid",
|
|
@@ -378,25 +348,6 @@ export class CheckboxGroup {
|
|
|
378
348
|
"setter": false,
|
|
379
349
|
"reflect": true
|
|
380
350
|
},
|
|
381
|
-
"validMessage": {
|
|
382
|
-
"type": "string",
|
|
383
|
-
"attribute": "valid-message",
|
|
384
|
-
"mutable": false,
|
|
385
|
-
"complexType": {
|
|
386
|
-
"original": "string",
|
|
387
|
-
"resolved": "string",
|
|
388
|
-
"references": {}
|
|
389
|
-
},
|
|
390
|
-
"required": false,
|
|
391
|
-
"optional": true,
|
|
392
|
-
"docs": {
|
|
393
|
-
"tags": [],
|
|
394
|
-
"text": "_DEPRECATED_ (This property will be removed in November 2025 release.)\nSet custom message if the element meets all its validation constraints."
|
|
395
|
-
},
|
|
396
|
-
"getter": false,
|
|
397
|
-
"setter": false,
|
|
398
|
-
"reflect": false
|
|
399
|
-
},
|
|
400
351
|
"invalid": {
|
|
401
352
|
"type": "boolean",
|
|
402
353
|
"attribute": "invalid",
|
|
@@ -110,10 +110,8 @@
|
|
|
110
110
|
border-radius: 10px;
|
|
111
111
|
border: 3px solid #ffffff;
|
|
112
112
|
}
|
|
113
|
-
.r-dialog
|
|
113
|
+
.r-dialog ::slotted([slot=footer]) {
|
|
114
114
|
margin-top: var(--r-dialog--footer--margin-top, auto);
|
|
115
|
-
}
|
|
116
|
-
.r-dialog--footer ::slotted(*) {
|
|
117
115
|
display: var(--r-dialog--footer--display, flex);
|
|
118
116
|
flex-direction: var(--r-dialog--footer--flex-direction, row);
|
|
119
117
|
flex-wrap: var(--r-dialog--footer--flex-wrap, nowrap);
|
|
@@ -18,10 +18,6 @@ export class Dialog {
|
|
|
18
18
|
* */
|
|
19
19
|
this.isOpen = this.open;
|
|
20
20
|
this.uniqueId = `r-dialog-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
|
|
21
|
-
this.isElContent = (selector) => {
|
|
22
|
-
const el = this.host.querySelector(selector);
|
|
23
|
-
return el !== null && (el === null || el === void 0 ? void 0 : el.textContent.trim().length) > 0;
|
|
24
|
-
};
|
|
25
21
|
this.onTriggerClick = () => {
|
|
26
22
|
this.close();
|
|
27
23
|
};
|
|
@@ -36,9 +32,6 @@ export class Dialog {
|
|
|
36
32
|
if (this.open && !this.isOpen)
|
|
37
33
|
this.showModal();
|
|
38
34
|
}
|
|
39
|
-
get isFooterSlot() {
|
|
40
|
-
return this.isElContent('[slot="footer"]');
|
|
41
|
-
}
|
|
42
35
|
get dialogLabel() {
|
|
43
36
|
var _a, _b;
|
|
44
37
|
return this.headline || ((_b = (_a = this.host.querySelector('[slot="header"]')) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim());
|
|
@@ -94,9 +87,8 @@ export class Dialog {
|
|
|
94
87
|
}
|
|
95
88
|
}
|
|
96
89
|
render() {
|
|
97
|
-
return (h(Host, { key: '
|
|
98
|
-
h("h2", { key: '
|
|
99
|
-
h("div", { key: '02c6c9ee41bb7893955b492f4fd171e498041777', class: "r-dialog--footer" }, h("slot", { key: 'bcf48fd3ecc2378fa82ffb48aa3739ea65477dcd', name: "footer" }))))));
|
|
90
|
+
return (h(Host, { key: '6f042592347577f063f6a80d2152b1149eadcb21', open: this.isOpen }, h("dialog", { key: 'fd3f19cf69a9077585bceccebaf0d0c9bccbaa86', class: "r-dialog", "aria-label": this.dialogLabel, ref: el => this.dialogElement = el, style: { '--r-dialog--body--height': this.bodyHeight } }, h("div", { key: '974e33afe5e96d3a67501d10a4ecd0486900ed64', class: "r-dialog--content" }, h("div", { key: '57bccc4346d7234564dc22c179a7e10051bd3af7', class: "r-dialog--header", id: `${this.uniqueId}-header` }, h("slot", { key: '0a59d6a775f11378f17be41665b2c71aecb17ff9', name: "header" }, (this.headline) &&
|
|
91
|
+
h("h2", { key: '6dd6970be5bde3f92d87bef1cbbd7152ba72f88f', class: "r-dialog--headline" }, this.headline)), h("r-icon-button", { key: '37ad4f5b3366ae057240e5bcf2c7443aac3faa9b', class: "r-dialog--close", name: "cross", size: "s", onRClick: this.onTriggerClick, label: this.closeAriaLabel })), h("div", { key: '951dec5b1da5b13196916ed6b64fee89cad83a0e', class: "r-dialog--body" }, this.bodyText, h("slot", { key: '1797cb38116d9818aec51e2dc6982dad1a01cf02' }), h("slot", { key: '0f091bf0e6f6fdd16b79c69aca9814a0d76d7ee6', name: "form" })), h("slot", { key: '2b5a1cadfa9e7a13d8fc4ddca4cf69a1e4a1cb5e', name: "footer" })))));
|
|
100
92
|
}
|
|
101
93
|
static get is() { return "r-dialog"; }
|
|
102
94
|
static get encapsulation() { return "shadow"; }
|
|
@@ -22,8 +22,8 @@ export class Hint {
|
|
|
22
22
|
return this.hasIconSlot || this.iconName !== null;
|
|
23
23
|
}
|
|
24
24
|
render() {
|
|
25
|
-
return (h(Host, { key: '
|
|
26
|
-
h("div", { key: '
|
|
25
|
+
return (h(Host, { key: '1cbe08b7b3b01fc7d870416a1b14e3b1b8525797' }, h("div", { key: '17494f3ae8bdf394858e2f9337e54bd844a467d0', class: "r-hint" }, this.hasIcon &&
|
|
26
|
+
h("div", { key: 'ed406c6ae45ea4c25e6735752ced3a988c2f2274', class: "r-hint--icon" }, h("slot", { key: '9e93b83d3f9e71f722ffdb813d46b667eec556a5', name: "icon" }, this.iconName && h("r-icon", { key: '841c3e53381a21e1341191eb7a0b32fdd696c47f', name: this.iconName, size: "s" }))), h("div", { key: '946d0813297923053452519b9871cd9a0d04679f', class: "r-hint--text" }, h("slot", { key: 'f7343fcc6a4cbe9f5584f8d94feff33cfd8f2560' })))));
|
|
27
27
|
}
|
|
28
28
|
static get is() { return "r-hint"; }
|
|
29
29
|
static get encapsulation() { return "shadow"; }
|