@riverty/web-components 5.8.0 → 6.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +86 -0
- package/custom-elements.json +124 -369
- 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-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 +87 -41
- package/dist/cjs/r-list-item.cjs.entry.js +5 -5
- package/dist/cjs/r-panel.cjs.entry.js +2 -2
- 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 +2 -2
- package/dist/cjs/r-stepper.cjs.entry.js +1 -1
- package/dist/cjs/r-tab-panel.cjs.entry.js +1 -1
- package/dist/cjs/r-tab.cjs.entry.js +1 -1
- package/dist/cjs/r-tabs-list.cjs.entry.js +1 -1
- package/dist/cjs/r-tabs.cjs.entry.js +1 -1
- package/dist/cjs/r-textarea.cjs.entry.js +6 -18
- package/dist/cjs/r-toast-group.cjs.entry.js +1 -1
- package/dist/cjs/r-toast.cjs.entry.js +9 -9
- 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 +6 -0
- 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-button/icon-button.js +3 -3
- package/dist/collection/components/input/input.css +3 -0
- package/dist/collection/components/input/input.js +180 -370
- 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 +7 -7
- package/dist/collection/components/list-item/list-item/list-item.js +4 -26
- package/dist/collection/components/panel/panel.js +2 -2
- package/dist/collection/components/popover/exports.js +0 -1
- package/dist/collection/components/popover/popover.css +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.js +1 -1
- package/dist/collection/components/stepper-item/stepper-item.js +2 -2
- package/dist/collection/components/tab/tab.js +1 -1
- package/dist/collection/components/tab-panel/tab-panel.js +1 -1
- package/dist/collection/components/tabs/tabs.js +1 -1
- package/dist/collection/components/tabs-list/tabs-list.js +1 -1
- package/dist/collection/components/textarea/textarea.js +6 -158
- package/dist/collection/components/toast/toast.js +9 -31
- package/dist/collection/components/toast-group/toast-group.js +1 -1
- package/dist/collection/components/tooltip/tooltip.js +1 -1
- package/dist/esm/index-Da7qOBFr.js +6 -10
- package/dist/esm/loader.js +1 -1
- package/dist/esm/r-accordion-panel.entry.js +1 -1
- package/dist/esm/r-accordion-section.entry.js +1 -1
- package/dist/esm/r-accordion-trigger.entry.js +5 -35
- package/dist/esm/r-accordion.entry.js +3 -7
- package/dist/esm/r-alert.entry.js +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-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 +87 -41
- package/dist/esm/r-list-item.entry.js +5 -5
- package/dist/esm/r-panel.entry.js +2 -2
- 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 +2 -2
- package/dist/esm/r-stepper.entry.js +1 -1
- package/dist/esm/r-tab-panel.entry.js +1 -1
- package/dist/esm/r-tab.entry.js +1 -1
- package/dist/esm/r-tabs-list.entry.js +1 -1
- package/dist/esm/r-tabs.entry.js +1 -1
- package/dist/esm/r-textarea.entry.js +6 -18
- package/dist/esm/r-toast-group.entry.js +1 -1
- package/dist/esm/r-toast.entry.js +9 -9
- 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/input/input.d.ts +30 -72
- 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 +0 -6
- package/dist/types/components/popover/exports.d.ts +0 -2
- package/dist/types/components/popover/popover.d.ts +1 -14
- package/dist/types/components/radio-button/radio-button.d.ts +5 -0
- package/dist/types/components/radio-group/radio-group.d.ts +5 -26
- package/dist/types/components/select/select.d.ts +0 -50
- package/dist/types/components/textarea/textarea.d.ts +0 -32
- package/dist/types/components/toast/toast.d.ts +0 -5
- package/dist/types/components.d.ts +201 -636
- package/dist/web-components/p-0347feff.entry.js +1 -0
- package/dist/web-components/p-05738503.entry.js +1 -0
- package/dist/web-components/p-0e4c8bf1.entry.js +1 -0
- package/dist/web-components/{p-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-3a5a67e7.entry.js +1 -0
- package/dist/web-components/p-3f60c6c0.entry.js +1 -0
- package/dist/web-components/p-4254a383.entry.js +1 -0
- package/dist/web-components/{p-87f39749.entry.js → p-4595fa8e.entry.js} +1 -1
- package/dist/web-components/{p-4e3df002.entry.js → p-4cc58c6a.entry.js} +1 -1
- package/dist/web-components/p-5441b746.entry.js +1 -0
- package/dist/web-components/{p-72fa1fd1.entry.js → p-550e2237.entry.js} +1 -1
- package/dist/web-components/p-589baaf9.entry.js +1 -0
- package/dist/web-components/p-60341de2.entry.js +1 -0
- package/dist/web-components/{p-4bd3e077.entry.js → p-60ca994e.entry.js} +1 -1
- package/dist/web-components/{p-44ae9f33.entry.js → p-62b788bf.entry.js} +1 -1
- package/dist/web-components/{p-2b2f581a.entry.js → p-6303b9fe.entry.js} +1 -1
- package/dist/web-components/p-63fd817d.entry.js +1 -0
- package/dist/web-components/{p-e0e2f2b2.entry.js → p-673dbfd0.entry.js} +1 -1
- package/dist/web-components/p-67fa3f84.entry.js +1 -0
- package/dist/web-components/p-6cc2ea2c.entry.js +1 -0
- package/dist/web-components/p-70784685.entry.js +1 -0
- package/dist/web-components/{p-429213ea.entry.js → p-7fed6f4d.entry.js} +1 -1
- package/dist/web-components/p-8a66d20c.entry.js +1 -0
- package/dist/web-components/{p-0bb04d79.entry.js → p-8b4d2448.entry.js} +1 -1
- package/dist/web-components/{p-c7f8e59b.entry.js → p-8c31cbd5.entry.js} +1 -1
- package/dist/web-components/p-8dac326b.entry.js +1 -0
- package/dist/web-components/{p-1c2497de.entry.js → p-9ef1bbee.entry.js} +1 -1
- package/dist/web-components/p-a0dbde7c.entry.js +1 -0
- package/dist/web-components/{p-755cc697.entry.js → p-a71485d8.entry.js} +1 -1
- package/dist/web-components/p-a7d22c76.entry.js +1 -0
- package/dist/web-components/{p-85a9af42.entry.js → p-ae251d2f.entry.js} +1 -1
- package/dist/web-components/p-b9e3b3d6.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-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-e2188953.entry.js +1 -0
- package/dist/web-components/{p-3b4e3faf.entry.js → p-e5945c01.entry.js} +1 -1
- package/dist/web-components/{p-d1379ac6.entry.js → p-f9d5004c.entry.js} +1 -1
- package/dist/web-components/web-components.esm.js +1 -1
- package/package.json +1 -1
- package/dist/cjs/r-accordion-item.cjs.entry.js +0 -78
- package/dist/cjs/r-icon-button.cjs.entry.js +0 -81
- package/dist/collection/components/accordion-item/accordion-item.css +0 -121
- package/dist/collection/components/accordion-item/accordion-item.js +0 -138
- package/dist/esm/r-accordion-item.entry.js +0 -76
- package/dist/esm/r-icon-button.entry.js +0 -79
- package/dist/types/components/accordion-item/accordion-item.d.ts +0 -26
- package/dist/web-components/p-00ca474f.entry.js +0 -1
- package/dist/web-components/p-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-2e18e762.entry.js +0 -1
- package/dist/web-components/p-3bc93d65.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-7775228c.entry.js +0 -1
- package/dist/web-components/p-7ad8e78b.entry.js +0 -1
- package/dist/web-components/p-9e50120b.entry.js +0 -1
- package/dist/web-components/p-a022f356.entry.js +0 -1
- package/dist/web-components/p-a7e7f8fa.entry.js +0 -1
- package/dist/web-components/p-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
|
@@ -142,6 +142,7 @@ export class InputPassword {
|
|
|
142
142
|
async showPassword() {
|
|
143
143
|
this.showed = true;
|
|
144
144
|
this.alertOnPasswordVisibilityChange();
|
|
145
|
+
this.rVisibilityChange.emit({ element: this.host, visible: true });
|
|
145
146
|
}
|
|
146
147
|
/**
|
|
147
148
|
* Hide password text.
|
|
@@ -149,6 +150,7 @@ export class InputPassword {
|
|
|
149
150
|
async hidePassword() {
|
|
150
151
|
this.showed = false;
|
|
151
152
|
this.alertOnPasswordVisibilityChange();
|
|
153
|
+
this.rVisibilityChange.emit({ element: this.host, visible: false });
|
|
152
154
|
}
|
|
153
155
|
/** Get the input value */
|
|
154
156
|
async getValue() {
|
|
@@ -217,11 +219,14 @@ export class InputPassword {
|
|
|
217
219
|
this.disconnectFormEventListeners();
|
|
218
220
|
}
|
|
219
221
|
render() {
|
|
220
|
-
const { name, placeholder, required, fieldIndicator, value, disabled, form, invalid, valid, hint, label,
|
|
222
|
+
const { name, placeholder, required, minlength, maxlength, pattern, fieldIndicator, value, disabled, form, invalid, valid, hint, label, fullWidth, showPasswordAriaLabel, hidePasswordAriaLabel, showed, readonly, passwordrules, autocomplete, tooLongMessage, tooShortMessage, patternMismatchMessage } = this;
|
|
221
223
|
const inputAttrs = {
|
|
222
224
|
name,
|
|
223
225
|
placeholder,
|
|
224
226
|
required,
|
|
227
|
+
minlength,
|
|
228
|
+
maxlength,
|
|
229
|
+
pattern,
|
|
225
230
|
fieldIndicator,
|
|
226
231
|
value,
|
|
227
232
|
disabled,
|
|
@@ -230,15 +235,17 @@ export class InputPassword {
|
|
|
230
235
|
valid,
|
|
231
236
|
hint,
|
|
232
237
|
label,
|
|
233
|
-
tooltip,
|
|
234
|
-
tooltipIcon,
|
|
235
|
-
tooltipIconColor,
|
|
236
238
|
fullWidth,
|
|
237
239
|
novalidate: true,
|
|
238
|
-
readonly
|
|
240
|
+
readonly,
|
|
241
|
+
passwordrules,
|
|
242
|
+
autocomplete,
|
|
243
|
+
tooLongMessage,
|
|
244
|
+
tooShortMessage,
|
|
245
|
+
patternMismatchMessage
|
|
239
246
|
};
|
|
240
|
-
return (h(Host, { key: '
|
|
241
|
-
h("r-hint", { key: '
|
|
247
|
+
return (h(Host, { key: '15d9cac9269a816de47d1ae4d3818a99f6229979' }, h("r-input", Object.assign({ key: 'eea64612b319eae93c0fc6591c22020bf2e3d4fb' }, inputAttrs, { ref: (el) => this.nativeElement = el, type: showed ? 'text' : 'password', onRInput: this.onInput, onRChange: this.onChange, onKeyUp: this.handleKeyup, onRBlur: this.handleBlur }), h("r-icon", { key: 'd7a425d45f7897d7f6f11b7bf37595e25da3295b', name: "padlock-closed", size: "s", slot: "leading" }), h("slot", { key: '6ae8e4dc4633e692ae4280d9cd1420bf7e02d0c0', name: "popover", slot: "popover" }), h("r-icon-button", { key: 'e51d43f5966477dc1c35bf6a8114d5b206a58187', slot: "trailing", name: showed ? 'eye-crossed-out' : 'eye', size: "s", disabled: disabled, label: showed ? hidePasswordAriaLabel : showPasswordAriaLabel, onClick: this.onShowClick }), this.hasMessage &&
|
|
248
|
+
h("r-hint", { key: 'bcee0a5b7f75a4ddd2e2fa6a2dd44cd0392170dc', slot: "message", variant: "error" }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage))), h("div", { key: '995e229dfab56b03e0a177c6952c2135777f7899', class: "visually-hidden", ref: el => this.passwordVisibilityChangeAlertContainer = el, "aria-live": "polite" })));
|
|
242
249
|
}
|
|
243
250
|
static get is() { return "r-input-password"; }
|
|
244
251
|
static get encapsulation() { return "shadow"; }
|
|
@@ -388,69 +395,6 @@ export class InputPassword {
|
|
|
388
395
|
"setter": false,
|
|
389
396
|
"reflect": false
|
|
390
397
|
},
|
|
391
|
-
"tooltip": {
|
|
392
|
-
"type": "string",
|
|
393
|
-
"attribute": "tooltip",
|
|
394
|
-
"mutable": false,
|
|
395
|
-
"complexType": {
|
|
396
|
-
"original": "string",
|
|
397
|
-
"resolved": "string",
|
|
398
|
-
"references": {}
|
|
399
|
-
},
|
|
400
|
-
"required": false,
|
|
401
|
-
"optional": true,
|
|
402
|
-
"docs": {
|
|
403
|
-
"tags": [],
|
|
404
|
-
"text": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)\nLabel tooltip text"
|
|
405
|
-
},
|
|
406
|
-
"getter": false,
|
|
407
|
-
"setter": false,
|
|
408
|
-
"reflect": false
|
|
409
|
-
},
|
|
410
|
-
"tooltipIcon": {
|
|
411
|
-
"type": "string",
|
|
412
|
-
"attribute": "tooltip-icon",
|
|
413
|
-
"mutable": false,
|
|
414
|
-
"complexType": {
|
|
415
|
-
"original": "IconName",
|
|
416
|
-
"resolved": "string",
|
|
417
|
-
"references": {
|
|
418
|
-
"IconName": {
|
|
419
|
-
"location": "import",
|
|
420
|
-
"path": "../icon/exports",
|
|
421
|
-
"id": "src/components/icon/exports.ts::IconName"
|
|
422
|
-
}
|
|
423
|
-
}
|
|
424
|
-
},
|
|
425
|
-
"required": false,
|
|
426
|
-
"optional": true,
|
|
427
|
-
"docs": {
|
|
428
|
-
"tags": [],
|
|
429
|
-
"text": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)\nTooltip trigger icon by name from [Riverty icons set](https://storybook.riverty.design/?path=/story/components-icon--riverty-kit)"
|
|
430
|
-
},
|
|
431
|
-
"getter": false,
|
|
432
|
-
"setter": false,
|
|
433
|
-
"reflect": false
|
|
434
|
-
},
|
|
435
|
-
"tooltipIconColor": {
|
|
436
|
-
"type": "string",
|
|
437
|
-
"attribute": "tooltip-icon-color",
|
|
438
|
-
"mutable": false,
|
|
439
|
-
"complexType": {
|
|
440
|
-
"original": "string",
|
|
441
|
-
"resolved": "string",
|
|
442
|
-
"references": {}
|
|
443
|
-
},
|
|
444
|
-
"required": false,
|
|
445
|
-
"optional": true,
|
|
446
|
-
"docs": {
|
|
447
|
-
"tags": [],
|
|
448
|
-
"text": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)\nChange color of an icon that triggers tooltip to one of the Riverty color tokens"
|
|
449
|
-
},
|
|
450
|
-
"getter": false,
|
|
451
|
-
"setter": false,
|
|
452
|
-
"reflect": false
|
|
453
|
-
},
|
|
454
398
|
"hint": {
|
|
455
399
|
"type": "string",
|
|
456
400
|
"attribute": "hint",
|
|
@@ -603,6 +547,63 @@ export class InputPassword {
|
|
|
603
547
|
"setter": false,
|
|
604
548
|
"reflect": true
|
|
605
549
|
},
|
|
550
|
+
"maxlength": {
|
|
551
|
+
"type": "number",
|
|
552
|
+
"attribute": "maxlength",
|
|
553
|
+
"mutable": false,
|
|
554
|
+
"complexType": {
|
|
555
|
+
"original": "number",
|
|
556
|
+
"resolved": "number",
|
|
557
|
+
"references": {}
|
|
558
|
+
},
|
|
559
|
+
"required": false,
|
|
560
|
+
"optional": true,
|
|
561
|
+
"docs": {
|
|
562
|
+
"tags": [],
|
|
563
|
+
"text": "Maximum character length (enforced by native input)."
|
|
564
|
+
},
|
|
565
|
+
"getter": false,
|
|
566
|
+
"setter": false,
|
|
567
|
+
"reflect": false
|
|
568
|
+
},
|
|
569
|
+
"minlength": {
|
|
570
|
+
"type": "number",
|
|
571
|
+
"attribute": "minlength",
|
|
572
|
+
"mutable": false,
|
|
573
|
+
"complexType": {
|
|
574
|
+
"original": "number",
|
|
575
|
+
"resolved": "number",
|
|
576
|
+
"references": {}
|
|
577
|
+
},
|
|
578
|
+
"required": false,
|
|
579
|
+
"optional": true,
|
|
580
|
+
"docs": {
|
|
581
|
+
"tags": [],
|
|
582
|
+
"text": "Minimum character length (validation only)."
|
|
583
|
+
},
|
|
584
|
+
"getter": false,
|
|
585
|
+
"setter": false,
|
|
586
|
+
"reflect": false
|
|
587
|
+
},
|
|
588
|
+
"pattern": {
|
|
589
|
+
"type": "string",
|
|
590
|
+
"attribute": "pattern",
|
|
591
|
+
"mutable": false,
|
|
592
|
+
"complexType": {
|
|
593
|
+
"original": "string",
|
|
594
|
+
"resolved": "string",
|
|
595
|
+
"references": {}
|
|
596
|
+
},
|
|
597
|
+
"required": false,
|
|
598
|
+
"optional": true,
|
|
599
|
+
"docs": {
|
|
600
|
+
"tags": [],
|
|
601
|
+
"text": "Regex pattern the value must match (string form)."
|
|
602
|
+
},
|
|
603
|
+
"getter": false,
|
|
604
|
+
"setter": false,
|
|
605
|
+
"reflect": false
|
|
606
|
+
},
|
|
606
607
|
"valueMissingMessage": {
|
|
607
608
|
"type": "string",
|
|
608
609
|
"attribute": "value-missing-message",
|
|
@@ -622,6 +623,63 @@ export class InputPassword {
|
|
|
622
623
|
"setter": false,
|
|
623
624
|
"reflect": false
|
|
624
625
|
},
|
|
626
|
+
"tooLongMessage": {
|
|
627
|
+
"type": "string",
|
|
628
|
+
"attribute": "too-long-message",
|
|
629
|
+
"mutable": false,
|
|
630
|
+
"complexType": {
|
|
631
|
+
"original": "string",
|
|
632
|
+
"resolved": "string",
|
|
633
|
+
"references": {}
|
|
634
|
+
},
|
|
635
|
+
"required": false,
|
|
636
|
+
"optional": true,
|
|
637
|
+
"docs": {
|
|
638
|
+
"tags": [],
|
|
639
|
+
"text": "Custom message for `tooLong`."
|
|
640
|
+
},
|
|
641
|
+
"getter": false,
|
|
642
|
+
"setter": false,
|
|
643
|
+
"reflect": false
|
|
644
|
+
},
|
|
645
|
+
"tooShortMessage": {
|
|
646
|
+
"type": "string",
|
|
647
|
+
"attribute": "too-short-message",
|
|
648
|
+
"mutable": false,
|
|
649
|
+
"complexType": {
|
|
650
|
+
"original": "string",
|
|
651
|
+
"resolved": "string",
|
|
652
|
+
"references": {}
|
|
653
|
+
},
|
|
654
|
+
"required": false,
|
|
655
|
+
"optional": true,
|
|
656
|
+
"docs": {
|
|
657
|
+
"tags": [],
|
|
658
|
+
"text": "Custom message for `tooShort`."
|
|
659
|
+
},
|
|
660
|
+
"getter": false,
|
|
661
|
+
"setter": false,
|
|
662
|
+
"reflect": false
|
|
663
|
+
},
|
|
664
|
+
"patternMismatchMessage": {
|
|
665
|
+
"type": "string",
|
|
666
|
+
"attribute": "pattern-mismatch-message",
|
|
667
|
+
"mutable": false,
|
|
668
|
+
"complexType": {
|
|
669
|
+
"original": "string",
|
|
670
|
+
"resolved": "string",
|
|
671
|
+
"references": {}
|
|
672
|
+
},
|
|
673
|
+
"required": false,
|
|
674
|
+
"optional": true,
|
|
675
|
+
"docs": {
|
|
676
|
+
"tags": [],
|
|
677
|
+
"text": "Custom message for `patternMismatch`."
|
|
678
|
+
},
|
|
679
|
+
"getter": false,
|
|
680
|
+
"setter": false,
|
|
681
|
+
"reflect": false
|
|
682
|
+
},
|
|
625
683
|
"customErrorMessage": {
|
|
626
684
|
"type": "string",
|
|
627
685
|
"attribute": "custom-error-message",
|
|
@@ -720,6 +778,53 @@ export class InputPassword {
|
|
|
720
778
|
"setter": false,
|
|
721
779
|
"reflect": false,
|
|
722
780
|
"defaultValue": "\"Your password is hidden.\""
|
|
781
|
+
},
|
|
782
|
+
"passwordrules": {
|
|
783
|
+
"type": "string",
|
|
784
|
+
"attribute": "passwordrules",
|
|
785
|
+
"mutable": false,
|
|
786
|
+
"complexType": {
|
|
787
|
+
"original": "string",
|
|
788
|
+
"resolved": "string",
|
|
789
|
+
"references": {}
|
|
790
|
+
},
|
|
791
|
+
"required": false,
|
|
792
|
+
"optional": true,
|
|
793
|
+
"docs": {
|
|
794
|
+
"tags": [],
|
|
795
|
+
"text": "Safari-specific password rules for strong password generation.\nFormat: \"minlength: X; required: lower; required: upper; required: digit; required: special;\"\nExample: \"minlength: 8; required: lower; required: upper; required: digit; required: special;\"\nNote: This attribute is Safari-specific and will be ignored by other browsers.\nSee: https://developer.apple.com/documentation/security/password_autofill/customizing_password_autofill_rules"
|
|
796
|
+
},
|
|
797
|
+
"getter": false,
|
|
798
|
+
"setter": false,
|
|
799
|
+
"reflect": false
|
|
800
|
+
},
|
|
801
|
+
"autocomplete": {
|
|
802
|
+
"type": "string",
|
|
803
|
+
"attribute": "autocomplete",
|
|
804
|
+
"mutable": false,
|
|
805
|
+
"complexType": {
|
|
806
|
+
"original": "PasswordAutocomplete",
|
|
807
|
+
"resolved": "\"current-password\" | \"new-password\" | \"off\"",
|
|
808
|
+
"references": {
|
|
809
|
+
"PasswordAutocomplete": {
|
|
810
|
+
"location": "import",
|
|
811
|
+
"path": "./exports",
|
|
812
|
+
"id": "src/components/input-password/exports.ts::PasswordAutocomplete"
|
|
813
|
+
}
|
|
814
|
+
}
|
|
815
|
+
},
|
|
816
|
+
"required": false,
|
|
817
|
+
"optional": true,
|
|
818
|
+
"docs": {
|
|
819
|
+
"tags": [{
|
|
820
|
+
"name": "example",
|
|
821
|
+
"text": "**Usage Guidelines:**\n- `'current-password'`: Use in login forms where users enter their existing password\n- `'new-password'`: Use in registration forms or password change forms for the new password field\n- `'off'`: Disable autofill in sensitive contexts where password managers should not suggest values\n\n**Common Patterns:**\n```tsx\n// Login form\n<r-input-password autocomplete=\"current-password\" />\n\n// Registration form\n<r-input-password autocomplete=\"new-password\" />\n\n// Sensitive form (e.g., admin panel)\n<r-input-password autocomplete=\"off\" />\n```"
|
|
822
|
+
}],
|
|
823
|
+
"text": "Password-specific autocomplete behavior for browser password managers."
|
|
824
|
+
},
|
|
825
|
+
"getter": false,
|
|
826
|
+
"setter": false,
|
|
827
|
+
"reflect": false
|
|
723
828
|
}
|
|
724
829
|
};
|
|
725
830
|
}
|
|
@@ -807,6 +912,26 @@ export class InputPassword {
|
|
|
807
912
|
}
|
|
808
913
|
}
|
|
809
914
|
}
|
|
915
|
+
}, {
|
|
916
|
+
"method": "rVisibilityChange",
|
|
917
|
+
"name": "rVisibilityChange",
|
|
918
|
+
"bubbles": true,
|
|
919
|
+
"cancelable": true,
|
|
920
|
+
"composed": true,
|
|
921
|
+
"docs": {
|
|
922
|
+
"tags": [],
|
|
923
|
+
"text": "Emits 'rVisibilityChange' event when password visibility is toggled"
|
|
924
|
+
},
|
|
925
|
+
"complexType": {
|
|
926
|
+
"original": "{\n element: HTMLRInputPasswordElement,\n visible: boolean\n }",
|
|
927
|
+
"resolved": "{ element: HTMLRInputPasswordElement; visible: boolean; }",
|
|
928
|
+
"references": {
|
|
929
|
+
"HTMLRInputPasswordElement": {
|
|
930
|
+
"location": "global",
|
|
931
|
+
"id": "global::HTMLRInputPasswordElement"
|
|
932
|
+
}
|
|
933
|
+
}
|
|
934
|
+
}
|
|
810
935
|
}];
|
|
811
936
|
}
|
|
812
937
|
static get methods() {
|
|
@@ -271,14 +271,10 @@ export class InputPhoneNumber {
|
|
|
271
271
|
this.disconnectEventListeners();
|
|
272
272
|
}
|
|
273
273
|
render() {
|
|
274
|
-
const { label, fieldIndicator, hint, name, form, inputLabel,
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
'tooltip-icon': tooltipIcon,
|
|
279
|
-
'tooltip-icon-color': tooltipIconColor,
|
|
280
|
-
} : {};
|
|
281
|
-
const labelAttr = Object.assign({ fieldIndicator }, tooltipAttrs);
|
|
274
|
+
const { label, fieldIndicator, hint, name, form, inputLabel, disabled, uniqueId, required, valid, invalid, novalidate, phoneNumber, fullPhoneNumber, fullWidth } = this;
|
|
275
|
+
const labelAttr = {
|
|
276
|
+
fieldIndicator
|
|
277
|
+
};
|
|
282
278
|
const inputAttrs = {
|
|
283
279
|
id: uniqueId,
|
|
284
280
|
form,
|
|
@@ -288,10 +284,9 @@ export class InputPhoneNumber {
|
|
|
288
284
|
disabled,
|
|
289
285
|
'aria-describedby': this.ariaDescribedBy
|
|
290
286
|
};
|
|
291
|
-
return (h(Host, { key: '
|
|
292
|
-
h("r-label", Object.assign({ key: '
|
|
293
|
-
h("r-hint", { key: '
|
|
294
|
-
h("r-icon", { key: '09c721cb014d6d7ece724bcf7de9ec5928624dac', slot: "trailing", name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }))), h("input", Object.assign({ key: 'e2eef2512f9125f0dd3d1b09120cbb77955350bd', type: "hidden" }, inputAttrs, { readonly: this.readonly, value: fullPhoneNumber, ref: el => this.nativeElement = el })), h("r-hint", { key: 'a12e9640bcf2df7b754de4e54b111e4ead2d023e', "aria-live": "polite", "aria-atomic": "true", id: `${uniqueId}-message`, class: !this.hasMessage && 'visually-hidden', variant: "error" }, this.hasMessage ? (this.hasError ? this.error : this.validityMessage) : '')));
|
|
287
|
+
return (h(Host, { key: '97edc0f9bbc4a3823e628bb08be3b3abbbcfe6ec' }, h("div", { key: '8a5236c58655d47368bfaa9bcea6bde3c39c6a22', class: "r-input-phone-number--label-container" }, h("label", { key: 'ae6e6e72381864d67d98f4429856cf5b1943943c', id: `${uniqueId}-label` }, label &&
|
|
288
|
+
h("r-label", Object.assign({ key: 'd760960dbf5806084b0a10d14fef218ca5e4cd79' }, labelAttr), label)), h("slot", { key: '4f9bcaba34f2f49592a3167958bd091eeac9f6be', name: "popover" })), hint &&
|
|
289
|
+
h("r-hint", { key: '0c3f402b7f9369dcea2c84478e12ed0ea241fd0a', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '43e5dbd9ca897cfc2ca05e6ab020c321871f3961', class: "r-input-phone-number", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.ariaDescribedBy }, h("slot", { key: '4e3f891eb21f15927d6a33e7ba6728c09d20e981' }), h("r-input", { key: '6bd6e929e396bf515511fdd978d00df9de54cc37', label: inputLabel, value: phoneNumber, internal: true, valid: valid, invalid: invalid, required: required, readonly: this.readonly, novalidate: true, fullWidth: fullWidth, type: "tel", error: this.errorMessage || '', onRInput: this.handleOnInput, onRChange: this.handleInputOnChange, disabled: disabled })), h("input", Object.assign({ key: 'f113123ef2fa2096b686d132ce11ca11970ab1be', type: "hidden" }, inputAttrs, { readonly: this.readonly, value: fullPhoneNumber, ref: el => this.nativeElement = el })), h("r-hint", { key: 'd00477c3a27f999c4a3079710c34266ed47e0e57', "aria-live": "polite", "aria-atomic": "true", id: `${uniqueId}-message`, class: !this.hasMessage && 'visually-hidden', variant: "error" }, this.hasMessage ? (this.hasError ? this.error : this.validityMessage) : '')));
|
|
295
290
|
}
|
|
296
291
|
static get is() { return "r-input-phone-number"; }
|
|
297
292
|
static get encapsulation() { return "shadow"; }
|
|
@@ -421,69 +416,6 @@ export class InputPhoneNumber {
|
|
|
421
416
|
"setter": false,
|
|
422
417
|
"reflect": false
|
|
423
418
|
},
|
|
424
|
-
"tooltip": {
|
|
425
|
-
"type": "string",
|
|
426
|
-
"attribute": "tooltip",
|
|
427
|
-
"mutable": false,
|
|
428
|
-
"complexType": {
|
|
429
|
-
"original": "string",
|
|
430
|
-
"resolved": "string",
|
|
431
|
-
"references": {}
|
|
432
|
-
},
|
|
433
|
-
"required": false,
|
|
434
|
-
"optional": true,
|
|
435
|
-
"docs": {
|
|
436
|
-
"tags": [],
|
|
437
|
-
"text": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)\nLabel tooltip text"
|
|
438
|
-
},
|
|
439
|
-
"getter": false,
|
|
440
|
-
"setter": false,
|
|
441
|
-
"reflect": true
|
|
442
|
-
},
|
|
443
|
-
"tooltipIcon": {
|
|
444
|
-
"type": "string",
|
|
445
|
-
"attribute": "tooltip-icon",
|
|
446
|
-
"mutable": false,
|
|
447
|
-
"complexType": {
|
|
448
|
-
"original": "IconName",
|
|
449
|
-
"resolved": "string",
|
|
450
|
-
"references": {
|
|
451
|
-
"IconName": {
|
|
452
|
-
"location": "import",
|
|
453
|
-
"path": "../icon/exports",
|
|
454
|
-
"id": "src/components/icon/exports.ts::IconName"
|
|
455
|
-
}
|
|
456
|
-
}
|
|
457
|
-
},
|
|
458
|
-
"required": false,
|
|
459
|
-
"optional": true,
|
|
460
|
-
"docs": {
|
|
461
|
-
"tags": [],
|
|
462
|
-
"text": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)\nLabel tooltip trigger icon"
|
|
463
|
-
},
|
|
464
|
-
"getter": false,
|
|
465
|
-
"setter": false,
|
|
466
|
-
"reflect": false
|
|
467
|
-
},
|
|
468
|
-
"tooltipIconColor": {
|
|
469
|
-
"type": "string",
|
|
470
|
-
"attribute": "tooltip-icon-color",
|
|
471
|
-
"mutable": false,
|
|
472
|
-
"complexType": {
|
|
473
|
-
"original": "string",
|
|
474
|
-
"resolved": "string",
|
|
475
|
-
"references": {}
|
|
476
|
-
},
|
|
477
|
-
"required": false,
|
|
478
|
-
"optional": true,
|
|
479
|
-
"docs": {
|
|
480
|
-
"tags": [],
|
|
481
|
-
"text": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)\nChange color of an icon that triggers tooltip to one of the Riverty color tokens"
|
|
482
|
-
},
|
|
483
|
-
"getter": false,
|
|
484
|
-
"setter": false,
|
|
485
|
-
"reflect": false
|
|
486
|
-
},
|
|
487
419
|
"name": {
|
|
488
420
|
"type": "string",
|
|
489
421
|
"attribute": "name",
|
|
@@ -4,30 +4,10 @@ import { Host, h } from "@stencil/core";
|
|
|
4
4
|
* for consistent presentation of text with optional associated tooltip.
|
|
5
5
|
*/
|
|
6
6
|
export class RLabel {
|
|
7
|
-
constructor() {
|
|
8
|
-
/**
|
|
9
|
-
* _DEPRECATED_ (This property will be removed in November 2025 release.)
|
|
10
|
-
* Defines preferable position of the tooltip */
|
|
11
|
-
this.tooltipPosition = 'right';
|
|
12
|
-
/**
|
|
13
|
-
* _DEPRECATED_ (This property will be removed in November 2025 release.)
|
|
14
|
-
* Icon tooltip trigger by name from the set */
|
|
15
|
-
this.tooltipIcon = 'circled-question-mark';
|
|
16
|
-
}
|
|
17
7
|
render() {
|
|
18
|
-
const {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
position: tooltipPosition
|
|
22
|
-
};
|
|
23
|
-
const tooltipIconAttrs = {
|
|
24
|
-
name: tooltipIcon,
|
|
25
|
-
size: 's',
|
|
26
|
-
color: tooltipIconColor
|
|
27
|
-
};
|
|
28
|
-
return (h(Host, { key: '2d7da94197a774e5b3399ff59dba01f946f0d8df' }, h("div", { key: '56baaf39a736e1f504502c9f49b4cf5fbff2f911', class: "r-label" }, h("span", { key: '5b0032c31e83b628d73a207eeaa915368edc7237', class: "r-label--slot" }, h("slot", { key: 'fbcd30c185b9eef55ea43c8ca8b082a0308953e2' }), fieldIndicator &&
|
|
29
|
-
h("span", { key: '0d355d5857e515e735dc543d3416540e0a0ffdba', class: "r-label--marker" }, fieldIndicator)), tooltip &&
|
|
30
|
-
h("span", { key: 'b450b3e7ee2b33dbdc02d9fce04bd2ef6a97713d', class: "r-label--tooltip-icon" }, h("r-tooltip", Object.assign({ key: 'a1b2a24a312b7eabd5acd43273658bce3199ef1b' }, tooltipAttrs), h("r-icon", Object.assign({ key: 'c22f6349b9c67a82b29f4a5758a77fb1b2910b75' }, tooltipIconAttrs)))))));
|
|
8
|
+
const { fieldIndicator } = this;
|
|
9
|
+
return (h(Host, { key: 'd823556813a282022aa18e138a3ac89d7f22af2a' }, h("div", { key: '1cea58412a4599e009080eb224d17324d5cad0b3', class: "r-label" }, h("span", { key: 'c0ade32425b07866b7a3096f203c7848eaa83e55', class: "r-label--slot" }, h("slot", { key: '9c782ed621889966189bba0d4c46de620315c9c4' }), fieldIndicator &&
|
|
10
|
+
h("span", { key: 'c4a4fcbed3e744bed679d8e9c6416a51407a686a', class: "r-label--marker" }, fieldIndicator)))));
|
|
31
11
|
}
|
|
32
12
|
static get is() { return "r-label"; }
|
|
33
13
|
static get encapsulation() { return "shadow"; }
|
|
@@ -43,96 +23,6 @@ export class RLabel {
|
|
|
43
23
|
}
|
|
44
24
|
static get properties() {
|
|
45
25
|
return {
|
|
46
|
-
"tooltip": {
|
|
47
|
-
"type": "string",
|
|
48
|
-
"attribute": "tooltip",
|
|
49
|
-
"mutable": false,
|
|
50
|
-
"complexType": {
|
|
51
|
-
"original": "string",
|
|
52
|
-
"resolved": "string",
|
|
53
|
-
"references": {}
|
|
54
|
-
},
|
|
55
|
-
"required": false,
|
|
56
|
-
"optional": true,
|
|
57
|
-
"docs": {
|
|
58
|
-
"tags": [],
|
|
59
|
-
"text": "_DEPRECATED_ (This property will be removed in November 2025 release.)\nTooltip represents additional description"
|
|
60
|
-
},
|
|
61
|
-
"getter": false,
|
|
62
|
-
"setter": false,
|
|
63
|
-
"reflect": false
|
|
64
|
-
},
|
|
65
|
-
"tooltipPosition": {
|
|
66
|
-
"type": "string",
|
|
67
|
-
"attribute": "tooltip-position",
|
|
68
|
-
"mutable": false,
|
|
69
|
-
"complexType": {
|
|
70
|
-
"original": "TooltipPosition",
|
|
71
|
-
"resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
|
|
72
|
-
"references": {
|
|
73
|
-
"TooltipPosition": {
|
|
74
|
-
"location": "import",
|
|
75
|
-
"path": "../tooltip/exports",
|
|
76
|
-
"id": "src/components/tooltip/exports.ts::TooltipPosition"
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
},
|
|
80
|
-
"required": false,
|
|
81
|
-
"optional": true,
|
|
82
|
-
"docs": {
|
|
83
|
-
"tags": [],
|
|
84
|
-
"text": "_DEPRECATED_ (This property will be removed in November 2025 release.)\nDefines preferable position of the tooltip"
|
|
85
|
-
},
|
|
86
|
-
"getter": false,
|
|
87
|
-
"setter": false,
|
|
88
|
-
"reflect": false,
|
|
89
|
-
"defaultValue": "'right'"
|
|
90
|
-
},
|
|
91
|
-
"tooltipIcon": {
|
|
92
|
-
"type": "string",
|
|
93
|
-
"attribute": "tooltip-icon",
|
|
94
|
-
"mutable": false,
|
|
95
|
-
"complexType": {
|
|
96
|
-
"original": "IconName",
|
|
97
|
-
"resolved": "string",
|
|
98
|
-
"references": {
|
|
99
|
-
"IconName": {
|
|
100
|
-
"location": "import",
|
|
101
|
-
"path": "../icon/exports",
|
|
102
|
-
"id": "src/components/icon/exports.ts::IconName"
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
},
|
|
106
|
-
"required": false,
|
|
107
|
-
"optional": true,
|
|
108
|
-
"docs": {
|
|
109
|
-
"tags": [],
|
|
110
|
-
"text": "_DEPRECATED_ (This property will be removed in November 2025 release.)\nIcon tooltip trigger by name from the set"
|
|
111
|
-
},
|
|
112
|
-
"getter": false,
|
|
113
|
-
"setter": false,
|
|
114
|
-
"reflect": false,
|
|
115
|
-
"defaultValue": "'circled-question-mark'"
|
|
116
|
-
},
|
|
117
|
-
"tooltipIconColor": {
|
|
118
|
-
"type": "string",
|
|
119
|
-
"attribute": "tooltip-icon-color",
|
|
120
|
-
"mutable": false,
|
|
121
|
-
"complexType": {
|
|
122
|
-
"original": "string",
|
|
123
|
-
"resolved": "string",
|
|
124
|
-
"references": {}
|
|
125
|
-
},
|
|
126
|
-
"required": false,
|
|
127
|
-
"optional": true,
|
|
128
|
-
"docs": {
|
|
129
|
-
"tags": [],
|
|
130
|
-
"text": "_DEPRECATED_ (This property will be removed in November 2025 release.)\nChange color of an icon that triggers tooltip to one of the Riverty color tokens"
|
|
131
|
-
},
|
|
132
|
-
"getter": false,
|
|
133
|
-
"setter": false,
|
|
134
|
-
"reflect": true
|
|
135
|
-
},
|
|
136
26
|
"fieldIndicator": {
|
|
137
27
|
"type": "string",
|
|
138
28
|
"attribute": "field-indicator",
|
|
@@ -151,15 +151,15 @@
|
|
|
151
151
|
line-height: var(--r-list-item--headline--line-height, 1.5);
|
|
152
152
|
color: var(--r-list-item--headline--color, inherit);
|
|
153
153
|
}
|
|
154
|
-
.r-list-item--
|
|
155
|
-
font-size: var(--r-list-item--description--font-size,
|
|
156
|
-
font-weight: var(--r-list-item--description--font-weight,
|
|
157
|
-
line-height: var(--r-list-item--description--line-height,
|
|
158
|
-
color: var(--r-list-item--description--color, var(--r-
|
|
154
|
+
.r-list-item--description {
|
|
155
|
+
font-size: var(--r-list-item--description--font-size, 1rem);
|
|
156
|
+
font-weight: var(--r-list-item--description--font-weight, 400);
|
|
157
|
+
line-height: var(--r-list-item--description--line-height, 1.5);
|
|
158
|
+
color: var(--r-list-item--description--color, var(--r-text-regular, #282828));
|
|
159
159
|
white-space: var(--r-list-item--description--white-space, normal);
|
|
160
160
|
overflow: var(--r-list-item--description--overflow, hidden);
|
|
161
161
|
text-overflow: var(--r-list-item--description--text-overflow, ellipsis);
|
|
162
162
|
}
|
|
163
|
-
.r-list-item--
|
|
164
|
-
color: var(--r-list-item--description--color,
|
|
163
|
+
.r-list-item--description ::slotted(a) {
|
|
164
|
+
color: var(--r-list-item--description--color, inherit);
|
|
165
165
|
}
|
|
@@ -44,7 +44,7 @@ export class RListItem {
|
|
|
44
44
|
return this.isEl('[slot="headline"]');
|
|
45
45
|
}
|
|
46
46
|
get isDescriptionSlot() {
|
|
47
|
-
return this.isEl('[slot="description"]')
|
|
47
|
+
return this.isEl('[slot="description"]');
|
|
48
48
|
}
|
|
49
49
|
get hasSubitems() {
|
|
50
50
|
return this.isEl('[variant="subitem"]');
|
|
@@ -77,15 +77,15 @@ export class RListItem {
|
|
|
77
77
|
return this.href && !this.disabled ? 'a' : 'div';
|
|
78
78
|
}
|
|
79
79
|
render() {
|
|
80
|
-
const { leadingIcon, leadingIconSrc, trailingIcon, trailingIconSrc, headline, trailingText,
|
|
80
|
+
const { leadingIcon, leadingIconSrc, trailingIcon, trailingIconSrc, headline, trailingText, description } = this;
|
|
81
81
|
const TagName = this.tagName;
|
|
82
82
|
const itemAttrs = Object.assign({ href: TagName === 'a' ? this.href : null }, (this.disabled ? { role: 'link', 'aria-disabled': 'true' } : null));
|
|
83
83
|
const ListItemContent = (h(TagName, Object.assign({ class: "r-list-item" }, itemAttrs), this.isLeading &&
|
|
84
84
|
h("span", { class: "r-list-item--leading" }, h("slot", { name: "leading" }, this.isLeadingIcon && !this.hideLeadingIcon &&
|
|
85
85
|
h("r-icon", { class: "r-list-item--leading-icon", name: leadingIcon, src: leadingIconSrc }))), h("span", { class: "r-list-item--text" }, !this.isTextSlot ?
|
|
86
86
|
h(Fragment, null, (this.isHeadlineSlot || headline) &&
|
|
87
|
-
h("span", { class: "r-list-item--headline" }, h("slot", { name: "headline" }, headline)), (description || this.isDescriptionSlot
|
|
88
|
-
h("span", { class: "r-list-item--description" }, h("slot", { name: "
|
|
87
|
+
h("span", { class: "r-list-item--headline" }, h("slot", { name: "headline" }, headline)), (description || this.isDescriptionSlot) &&
|
|
88
|
+
h("span", { class: "r-list-item--description" }, h("slot", { name: "description" }, description)))
|
|
89
89
|
:
|
|
90
90
|
h("slot", { name: "text" })), this.isTrailing &&
|
|
91
91
|
h("span", { class: "r-list-item--trailing" }, h("slot", { name: "trailing" }, this.isTrailingIcon && !trailingText &&
|
|
@@ -128,28 +128,6 @@ export class RListItem {
|
|
|
128
128
|
"setter": false,
|
|
129
129
|
"reflect": false
|
|
130
130
|
},
|
|
131
|
-
"subtext": {
|
|
132
|
-
"type": "string",
|
|
133
|
-
"attribute": "subtext",
|
|
134
|
-
"mutable": false,
|
|
135
|
-
"complexType": {
|
|
136
|
-
"original": "string",
|
|
137
|
-
"resolved": "string",
|
|
138
|
-
"references": {}
|
|
139
|
-
},
|
|
140
|
-
"required": false,
|
|
141
|
-
"optional": true,
|
|
142
|
-
"docs": {
|
|
143
|
-
"tags": [{
|
|
144
|
-
"name": "deprecated",
|
|
145
|
-
"text": "Use `description` instead. Will be removed November 2025.\nSecondary text displayed below the headline (2nd slot), used for additional details or context."
|
|
146
|
-
}],
|
|
147
|
-
"text": ""
|
|
148
|
-
},
|
|
149
|
-
"getter": false,
|
|
150
|
-
"setter": false,
|
|
151
|
-
"reflect": false
|
|
152
|
-
},
|
|
153
131
|
"description": {
|
|
154
132
|
"type": "string",
|
|
155
133
|
"attribute": "description",
|