@riverty/web-components 6.0.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 +21 -0
- package/custom-elements.json +99 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/r-alert.cjs.entry.js +1 -1
- package/dist/cjs/r-icon-button_2.cjs.entry.js +4 -4
- package/dist/cjs/r-icon.cjs.entry.js +1 -1
- package/dist/cjs/r-input-code.cjs.entry.js +7 -7
- package/dist/cjs/r-input.cjs.entry.js +4 -2
- package/dist/cjs/r-list-item.cjs.entry.js +16 -15
- package/dist/cjs/r-panel.cjs.entry.js +5 -5
- package/dist/cjs/r-stepper-item.cjs.entry.js +1 -1
- 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 +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 +1 -1
- package/dist/cjs/r-toast-group.cjs.entry.js +2 -2
- package/dist/cjs/r-toast.cjs.entry.js +30 -10
- package/dist/cjs/web-components.cjs.js +1 -1
- package/dist/collection/components/alert/alert.css +2 -3
- 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.js +54 -2
- package/dist/collection/components/input-code/exports.js +2 -2
- package/dist/collection/components/input-code/input-code.js +13 -13
- package/dist/collection/components/list-item/list-item/list-item.css +46 -12
- package/dist/collection/components/list-item/list-item/list-item.js +34 -14
- package/dist/collection/components/panel/panel.css +40 -17
- package/dist/collection/components/panel/panel.js +6 -6
- package/dist/collection/components/stepper/stepper.css +1 -1
- package/dist/collection/components/stepper-item/stepper-item.css +3 -3
- 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/toast/toast.css +35 -9
- package/dist/collection/components/toast/toast.js +43 -9
- 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/loader.js +1 -1
- package/dist/esm/r-alert.entry.js +1 -1
- package/dist/esm/r-icon-button_2.entry.js +4 -4
- package/dist/esm/r-icon.entry.js +1 -1
- package/dist/esm/r-input-code.entry.js +7 -7
- package/dist/esm/r-input.entry.js +4 -2
- package/dist/esm/r-list-item.entry.js +16 -15
- package/dist/esm/r-panel.entry.js +5 -5
- package/dist/esm/r-stepper-item.entry.js +1 -1
- 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 +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 +1 -1
- package/dist/esm/r-toast-group.entry.js +2 -2
- package/dist/esm/r-toast.entry.js +30 -10
- package/dist/esm/web-components.js +1 -1
- 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 +17 -1
- package/dist/types/components/input-code/exports.d.ts +4 -4
- package/dist/types/components/input-code/input-code.d.ts +3 -3
- package/dist/types/components/list-item/list-item/list-item.d.ts +5 -3
- 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/toast/toast.d.ts +11 -0
- package/dist/types/components.d.ts +89 -12
- package/dist/web-components/bundled-icons/riverty-kit.json +1 -1
- package/dist/web-components/{p-3a5a67e7.entry.js → p-159822fe.entry.js} +1 -1
- package/dist/web-components/p-19407a14.entry.js +1 -0
- package/dist/web-components/{p-4254a383.entry.js → p-4f261b63.entry.js} +1 -1
- package/dist/web-components/{p-673dbfd0.entry.js → p-50893211.entry.js} +1 -1
- package/dist/web-components/{p-e5945c01.entry.js → p-5eeb7002.entry.js} +1 -1
- package/dist/web-components/p-6bb44ec6.entry.js +1 -0
- package/dist/web-components/p-7ce57332.entry.js +1 -0
- package/dist/web-components/p-92c7cf33.entry.js +1 -0
- package/dist/web-components/{p-ae251d2f.entry.js → p-b96d59ca.entry.js} +1 -1
- package/dist/web-components/p-ba801820.entry.js +1 -0
- package/dist/web-components/p-bfc8c077.entry.js +1 -0
- package/dist/web-components/p-c05b05da.entry.js +1 -0
- package/dist/web-components/p-c95b6470.entry.js +1 -0
- package/dist/web-components/{p-05738503.entry.js → p-cd5daad2.entry.js} +1 -1
- package/dist/web-components/p-cdd88c5a.entry.js +1 -0
- package/dist/web-components/{p-a71485d8.entry.js → p-e4dc60f0.entry.js} +1 -1
- package/dist/web-components/web-components.esm.js +1 -1
- package/package.json +1 -1
- package/dist/web-components/p-0e4c8bf1.entry.js +0 -1
- package/dist/web-components/p-5441b746.entry.js +0 -1
- package/dist/web-components/p-60ca994e.entry.js +0 -1
- package/dist/web-components/p-6303b9fe.entry.js +0 -1
- package/dist/web-components/p-6a4f3836.entry.js +0 -1
- package/dist/web-components/p-8b4d2448.entry.js +0 -1
- package/dist/web-components/p-a0dbde7c.entry.js +0 -1
- package/dist/web-components/p-b9e3b3d6.entry.js +0 -1
- package/dist/web-components/p-e2188953.entry.js +0 -1
|
@@ -387,15 +387,15 @@ const InputCode = class {
|
|
|
387
387
|
id: `${uniqueId}-label`,
|
|
388
388
|
fieldIndicator
|
|
389
389
|
} : {};
|
|
390
|
-
return (h(Host, { key: '
|
|
390
|
+
return (h(Host, { key: '671a85d08004711f7d9ce951ebb8429a8d317189', value: this.value, onClick: this.onHostClick }, h("div", { key: '14d0018cdb5b9b40e655fd009582d41530d33ef6', class: "r-input-code--label-container" }, h("label", { key: '76986e468b00209831044af52841dd71a1036c71', htmlFor: uniqueId }, label ?
|
|
391
391
|
h("r-label", Object.assign({}, labelAttr), label)
|
|
392
392
|
:
|
|
393
|
-
h("slot", { name: "label" })), h("slot", { key: '
|
|
394
|
-
h("r-hint", { key: '
|
|
395
|
-
h("r-icon", { key: '
|
|
396
|
-
h("slot", { key: '
|
|
397
|
-
h("r-icon", { key: '
|
|
398
|
-
h("r-hint", { key: '
|
|
393
|
+
h("slot", { name: "label" })), h("slot", { key: 'efb5b41658481d1da3c151294ee3532eaf16895a', name: "popover" })), hint &&
|
|
394
|
+
h("r-hint", { key: 'f2d8731eff9bbb261589aa6296116870691e2f2e', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '063cf9b6609b6b89cf3820deeb32e95c1de81d13', class: "r-input-code--container", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.groupDescribedby }, h("slot", { key: 'ae245434620341e683a3e0ae8f8e0ec741d7bc80', name: "leading" }), Array.from({ length: this.length }).map((_, i) => (h("input", { class: "r-input-code--input", key: i, id: `${uniqueId}-input-section-${i}`, "aria-label": `${this.ariaCharacterLabel || 'Character'}: ${i + 1}`, "aria-invalid": `${this.invalid || false}`, value: this.values[i], ref: el => this.inputs[i] = el, maxlength: 1, disabled: this.disabled, required: this.required, readonly: readonly, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, autocomplete: this.autocomplete, onInput: this.createInputHandler(i), onKeyDown: this.createKeyDownHandler(i), onPaste: this.handlePaste }))), h("input", Object.assign({ key: '617e1b328bce05693055d94507ec22470a2b4980', type: "hidden" }, inputAttrs, { value: this.values.join(''), ref: el => this.nativeElement = el })), h("div", { key: '3b2f16c153cbb026b9cdb87ef58c805f893affb5', class: "r-input-code--trailing" }, this.readonly &&
|
|
395
|
+
h("r-icon", { key: '2ad664723e287702eeb9c1a77eebc75d7440d076', class: "r-input-code--readonly-icon", name: "pen-disabled", size: "s" }), this.hasTrailingSlot &&
|
|
396
|
+
h("slot", { key: 'f04d690b12b0436eb76bf38d7bd6541337eec39b', name: "trailing" }, valid &&
|
|
397
|
+
h("r-icon", { key: 'c6854eeffa43d5f5bb5b3cf962f2923fd30f806a', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" })))), h("slot", { key: 'd2e94df788dee345109bee395be72efa27a70452', name: "message" }, this.hasMessage &&
|
|
398
|
+
h("r-hint", { key: 'fa142415d2b84dea239b1bc99a98a06ffe37005c', "aria-live": "polite", id: `${uniqueId}-message`, variant: "error" }, this.message))));
|
|
399
399
|
}
|
|
400
400
|
get host() { return getElement(this); }
|
|
401
401
|
static get watchers() { return {
|
|
@@ -325,7 +325,7 @@ const RInput = class {
|
|
|
325
325
|
this.setValue(this.nativeElement.value);
|
|
326
326
|
}
|
|
327
327
|
render() {
|
|
328
|
-
const { name, placeholder, required, fieldIndicator, maxlength, minlength, min, max, value, disabled, form, pattern, invalid, valid, hint, label, internal, uniqueId, autocomplete, readonly, autofocus, passwordrules, validityMarker } = this;
|
|
328
|
+
const { name, placeholder, required, fieldIndicator, maxlength, minlength, min, max, value, disabled, form, pattern, invalid, valid, hint, label, internal, uniqueId, autocomplete, readonly, autofocus, passwordrules, enterkeyhint, validityMarker } = this;
|
|
329
329
|
const inputAttrs = {
|
|
330
330
|
disabled,
|
|
331
331
|
readonly,
|
|
@@ -342,6 +342,8 @@ const RInput = class {
|
|
|
342
342
|
autocomplete,
|
|
343
343
|
autofocus: autofocus || null,
|
|
344
344
|
passwordrules,
|
|
345
|
+
enterkeyhint,
|
|
346
|
+
inputmode: this.inputmode || null,
|
|
345
347
|
id: uniqueId,
|
|
346
348
|
'data-value': value,
|
|
347
349
|
'aria-placeholder': placeholder,
|
|
@@ -368,7 +370,7 @@ const RInput = class {
|
|
|
368
370
|
return null;
|
|
369
371
|
const iconName = shouldShowInvalidMarker ? icons.invalid : icons.valid;
|
|
370
372
|
const iconColor = shouldShowInvalidMarker ? colors.invalid : colors.valid;
|
|
371
|
-
return h("r-icon", { class: "r-input--validation-icon", "aria-hidden": true, size: "s", name: iconName, color: iconColor });
|
|
373
|
+
return h("r-icon", { class: "r-input--validation-icon", "aria-hidden": "true", size: "s", name: iconName, color: iconColor });
|
|
372
374
|
};
|
|
373
375
|
// Filter out event listener properties based on naming convention.
|
|
374
376
|
// Pass them to native element.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h, F as Fragment, H as Host, g as getElement } from './index-Da7qOBFr.js';
|
|
2
2
|
|
|
3
|
-
const listItemCss = ":host([alignment=top]){--r-list-item--trailing-text--font-weight:bold;--r-list-item--trailing--align-self:start}:host([alignment=bottom]) .r-list-item{--r-list-item--trailing--align-self:end}:host([divider]:not([divider=false])){--r-list-item--border-color:var(--r-border-soft, #686868);--r-list-item--border-width:0 0 1px 0}:host([active]) .r-list-item{--r-list-item--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([variant=navitem]:not([active]):hover:not([disabled]:not([disabled=false])))>.r-list-item,:host([href]:not([active]):hover:not([disabled]:not([disabled=false])))>.r-list-item{--r-list-item--cursor:pointer;--r-list-item--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host([variant=navitem][has-sub-items]:hover:not([disabled]:not([disabled=false])))>.r-list-item-wrapper>.r-list-item{--r-list-item--cursor:pointer;--r-list-item--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host([variant=navitem][has-sub-items]:has([active]):hover:not([disabled]:not([disabled=false])))>.r-list-item-wrapper>.r-list-item{--r-list-item--cursor:pointer;--r-list-item--background-color:transparent}:host([variant=navitem][expanded])>.r-list-item-wrapper>.r-list-item{--r-list-item--headline--font-weight:600;--r-list-item--trailing-icon--transform:rotate(180deg);--r-list-item--trailing-icon--color:var(--r-icon-regular, #282828)}:host([variant=navitem][active-parent]:not([expanded])),:host([variant=navitem][active]:not([expanded])){--r-list-item--background-color:var(--r-background-interactive-activated, rgba(40, 40, 40, 0.08))}:host([variant=subitem]) .r-list-item{--r-list-item--margin-left:27px;--r-list-item--border-width:0 0 0 1px;--r-list-item--border-color:var(--r-border-soft, #686868)}:host([variant=subitem][active]) .r-list-item{--r-list-item--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host(:focus-
|
|
3
|
+
const listItemCss = ":host([alignment=top]){--r-list-item--trailing-text--font-weight:bold;--r-list-item--trailing--align-self:start}:host([alignment=bottom]) .r-list-item{--r-list-item--trailing--align-self:end}:host([divider]:not([divider=false])){--r-list-item--border-color:var(--r-border-soft, #686868);--r-list-item--border-width:0 0 1px 0}:host([active]) .r-list-item{--r-list-item--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([variant=navitem]:not([active]):hover:not([disabled]:not([disabled=false])))>.r-list-item,:host([href]:not([active]):hover:not([disabled]:not([disabled=false])))>.r-list-item{--r-list-item--cursor:pointer;--r-list-item--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host([variant=navitem][has-sub-items]:hover:not([disabled]:not([disabled=false])))>.r-list-item-wrapper>.r-list-item{--r-list-item--cursor:pointer;--r-list-item--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host([variant=navitem][has-sub-items]:has([active]):hover:not([disabled]:not([disabled=false])))>.r-list-item-wrapper>.r-list-item{--r-list-item--cursor:pointer;--r-list-item--background-color:transparent}:host([variant=navitem][expanded])>.r-list-item-wrapper>.r-list-item{--r-list-item--headline--font-weight:600;--r-list-item--trailing-icon--transform:rotate(180deg);--r-list-item--trailing-icon--color:var(--r-icon-regular, #282828)}:host([variant=navitem][active-parent]:not([expanded])),:host([variant=navitem][active]:not([expanded])){--r-list-item--background-color:var(--r-background-interactive-activated, rgba(40, 40, 40, 0.08))}:host([variant=subitem]) .r-list-item{--r-list-item--margin-left:27px;--r-list-item--border-width:0 0 0 1px;--r-list-item--border-color:var(--r-border-soft, #686868)}:host([variant=subitem][active]) .r-list-item{--r-list-item--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host(:focus-within) .r-list-item[href]{--r-list-item--box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);--r-list-item--outline:2px solid var(--r-border-focused, #0071e3);--r-list-item--outline-offset:2px}:host([disabled]:not([disabled=false])){cursor:not-allowed;--r-list-item--background-color:transparent}:host([disabled]:not([disabled=false])[divider]:not([divider=false])){--r-list-item--border-color:rgba(104,104,104, 0.4);--r-list-item--leading-icon--color:rgba(104,104,104, 0.4)}:host([truncate-description]:not([truncate-description=false])){--r-list-item--description--white-space:nowrap}:host{display:var(--display, block);pointer-events:var(--pointer-events, auto);outline:var(--outline, none);font-family:var(--font-family, var(--r-font-family-text, system-ui));line-height:var(--line-height, var(--r-line-height-m, 1.5));color:var(--color, var(--r-text-regular, #282828))}.r-list-item{display:var(--r-list-item--display, flex);align-items:var(--r-list-item--align-items, center);justify-content:var(--r-list-item--justify-content, center);gap:var(--r-list-item--gap, var(--r-spacing-100, 1rem));width:var(--r-list-item--width, inherit);padding:var(--r-list-item--padding, var(--r-spacing-100, 1rem));margin-left:var(--r-list-item--margin-left, 0);opacity:var(--r-list-item--opacity, 1);color:var(--r-list-item--color, inherit);box-shadow:var(--r-list-item--box-shadow, none);outline:var(--r-list-item--outline, none);outline-offset:var(--r-list-item--outline-offset, 0);text-decoration:var(--r-list-item--text-decoration, none);text-align:var(--r-list-item--text-align, left);background-color:var(--r-list-item--background-color, transparent);border-style:var(--r-list-item--border-style, solid);border-width:var(--r-list-item--border-width, 0);border-color:var(--r-list-item--border-color, transparent);cursor:var(--r-list-item--cursor, inherit);font-weight:var(--r-list-item--font-weight, var(--r-font-weight-regular, 400));font-family:var(--r-list-item--font-family, var(--r-font-family-text, system-ui))}.r-list-item:focus-visible{--r-list-item--box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);--r-list-item--outline:2px solid var(--r-border-focused, #0071e3);--r-list-item--outline-offset:2px}.r-list-item--leading{display:var(--r-list-item--leading--display, flex);align-items:var(--r-list-item--leading--align-items, center);color:var(--r-list-item--leading--color, var(--r-icon-soft, #686868))}.r-list-item--leading-icon{color:var(--r-list-item--leading-icon--color, var(--r-icon-soft, #686868))}.r-list-item--trailing{display:var(--r-list-item--trailing--display, flex);align-self:var(--r-list-item--trailing--align-self, center);gap:var(--r-list-item--trailing--gap, var(--r-spacing-050, 0.5rem));color:var(--r-list-item--trailing--color, inherit)}.r-list-item--trailing-icon{transition:var(--r-list-item--trailing-icon--transition, transform 250ms ease-in-out);transform:var(--r-list-item--trailing-icon--transform, rotate(0deg));color:var(--r-list-item--trailing-icon--color, inherit)}.r-list-item--trailing-text{font-weight:var(--r-list-item--trailing-text--font-weight, 400);white-space:var(--r-list-item--trailing-text--white-space, nowrap)}.r-list-item--trailing ::slotted(*){display:var(--r-list-item--trailing-slotted--display, flex);gap:var(--r-list-item--trailing-slotted--display, var(--r-spacing-050, 0.5rem))}.r-list-item--text{display:var(--r-list-item--text--display, flex);flex-grow:var(--r-list-item--text--flex-grow, 1);flex-direction:var(--r-list-item--text--flex-direction, column);gap:var(--r-list-item--text--gap, 0.125rem);white-space:var(--r-list-item--text--white-space, normal);overflow:var(--r-list-item--text--overflow, hidden);text-overflow:var(--r-list-item--text--text-overflow, ellipsis);font-weight:var(--r-list-item--trailing-text--font-weight, inherit)}.r-list-item--sr-text{display:var(--r-list-item--sr-text--display, none)}.r-list-item--headline{font-size:var(--r-list-item--headline--font-size, 1rem);font-weight:var(--r-list-item--headline--font-weight, 600);line-height:var(--r-list-item--headline--line-height, 1.5);color:var(--r-list-item--headline--color, inherit)}.r-list-item--description{font-size:var(--r-list-item--description--font-size, 1rem);font-weight:var(--r-list-item--description--font-weight, 400);line-height:var(--r-list-item--description--line-height, 1.5);color:var(--r-list-item--description--color, var(--r-text-regular, #282828));white-space:var(--r-list-item--description--white-space, normal);overflow:var(--r-list-item--description--overflow, hidden);text-overflow:var(--r-list-item--description--text-overflow, ellipsis)}.r-list-item--description ::slotted(a){color:var(--r-list-item--description--color, inherit)}.r-list-item-wrapper{width:var(--r-list-item-wrapper--width, 100%)}.sub-items{margin:var(--r-sub-items--margin, 0);padding:var(--r-sub-items--padding, 0);list-style-type:var(--r-sub-items--list-style-type, \"\")}.sub-items[aria-hidden=true]{display:none}.visually-hidden{position:absolute;width:0.0625rem;height:0.0625rem;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}@media (prefers-reduced-motion){.r-list-item--trailing-icon{transition:none}}";
|
|
4
4
|
|
|
5
5
|
const RListItem = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -9,6 +9,8 @@ const RListItem = class {
|
|
|
9
9
|
this.variant = 'list-item';
|
|
10
10
|
/** Determines whether the list item is expanded to show its subitems. It can be toggled programmatically or through user interaction. */
|
|
11
11
|
this.expanded = false;
|
|
12
|
+
/** Unique id for each subItem list */
|
|
13
|
+
this.uniqueSubmitemsId = `r-list-item-subitems-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
|
|
12
14
|
this.isEl = (selector) => {
|
|
13
15
|
return this.host.querySelector(selector) !== null;
|
|
14
16
|
};
|
|
@@ -50,6 +52,10 @@ const RListItem = class {
|
|
|
50
52
|
get isDescriptionSlot() {
|
|
51
53
|
return this.isEl('[slot="description"]');
|
|
52
54
|
}
|
|
55
|
+
get headlineContent() {
|
|
56
|
+
var _a;
|
|
57
|
+
return ((_a = this.host.querySelector('[slot="headline"]')) === null || _a === void 0 ? void 0 : _a.textContent) || this.headline;
|
|
58
|
+
}
|
|
53
59
|
get hasSubitems() {
|
|
54
60
|
return this.isEl('[variant="subitem"]');
|
|
55
61
|
}
|
|
@@ -57,20 +63,12 @@ const RListItem = class {
|
|
|
57
63
|
var _a;
|
|
58
64
|
return (_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[variant="subitem"]');
|
|
59
65
|
}
|
|
60
|
-
handleKeyDown(event) {
|
|
61
|
-
if (event.key !== 'Enter' && event.key !== ' ')
|
|
62
|
-
return;
|
|
63
|
-
this.toggleSubitems();
|
|
64
|
-
}
|
|
65
|
-
/** Prevent the click from toggling the parent **/
|
|
66
|
-
handleSubitemClick(event) {
|
|
67
|
-
event.stopPropagation();
|
|
68
|
-
}
|
|
69
66
|
/** Function to set tabindex for sub-items */
|
|
70
67
|
setTabIndexOnSubItems() {
|
|
71
68
|
if (this.hasSubitems) {
|
|
72
69
|
this.subItems.forEach((element) => {
|
|
73
|
-
|
|
70
|
+
var _a;
|
|
71
|
+
(_a = element.shadowRoot.querySelector('a.r-list-item')) === null || _a === void 0 ? void 0 : _a.setAttribute('tabindex', this.disabled ? '-1' : null);
|
|
74
72
|
});
|
|
75
73
|
}
|
|
76
74
|
}
|
|
@@ -78,26 +76,29 @@ const RListItem = class {
|
|
|
78
76
|
this.setTabIndexOnSubItems();
|
|
79
77
|
}
|
|
80
78
|
get tagName() {
|
|
79
|
+
if (this.hasSubitems) {
|
|
80
|
+
return 'button';
|
|
81
|
+
}
|
|
81
82
|
return this.href && !this.disabled ? 'a' : 'div';
|
|
82
83
|
}
|
|
83
84
|
render() {
|
|
84
85
|
const { leadingIcon, leadingIconSrc, trailingIcon, trailingIconSrc, headline, trailingText, description } = this;
|
|
85
86
|
const TagName = this.tagName;
|
|
86
|
-
const itemAttrs = Object.assign({ href: TagName === 'a' ? this.href : null }, (this.disabled ? { role: 'link', 'aria-disabled': 'true' } : null));
|
|
87
|
-
const ListItemContent = (h(TagName, Object.assign({ class: "r-list-item" }, itemAttrs), this.isLeading &&
|
|
87
|
+
const itemAttrs = Object.assign(Object.assign(Object.assign({ href: TagName === 'a' ? this.href : null, 'aria-current': this.active && TagName === 'a' ? 'page' : null }, (this.disabled ? { role: 'link', 'aria-disabled': 'true' } : null)), (this.hasSubitems ? { 'aria-expanded': `${this.expanded}` } : null)), (this.hasSubitems ? { 'aria-controls': `${this.uniqueSubmitemsId}` } : null));
|
|
88
|
+
const ListItemContent = (h(TagName, Object.assign({ class: "r-list-item" }, itemAttrs, { onClick: () => this.hasSubitems && this.toggleSubitems() }), this.isLeading &&
|
|
88
89
|
h("span", { class: "r-list-item--leading" }, h("slot", { name: "leading" }, this.isLeadingIcon && !this.hideLeadingIcon &&
|
|
89
90
|
h("r-icon", { class: "r-list-item--leading-icon", name: leadingIcon, src: leadingIconSrc }))), h("span", { class: "r-list-item--text" }, !this.isTextSlot ?
|
|
90
91
|
h(Fragment, null, (this.isHeadlineSlot || headline) &&
|
|
91
92
|
h("span", { class: "r-list-item--headline" }, h("slot", { name: "headline" }, headline)), (description || this.isDescriptionSlot) &&
|
|
92
93
|
h("span", { class: "r-list-item--description" }, h("slot", { name: "description" }, description)))
|
|
93
94
|
:
|
|
94
|
-
h("slot", { name: "text" })), this.isTrailing &&
|
|
95
|
+
h("slot", { name: "text" })), h("span", { class: "r-list-item--sr-text visually-hidden" }, this.headlineContent), this.isTrailing &&
|
|
95
96
|
h("span", { class: "r-list-item--trailing" }, h("slot", { name: "trailing" }, this.isTrailingIcon && !trailingText &&
|
|
96
97
|
h("r-icon", { class: "r-list-item--trailing-icon", name: trailingIcon, src: trailingIconSrc }), trailingText && !this.isTrailingIcon &&
|
|
97
98
|
h("span", { class: "r-list-item--trailing-text" }, trailingText)))));
|
|
98
99
|
if (!this.hasSubitems)
|
|
99
100
|
return h(Host, null, ListItemContent);
|
|
100
|
-
return (h(Host,
|
|
101
|
+
return (h(Host, null, h("div", { class: "r-list-item-wrapper" }, ListItemContent, h("ul", { "aria-hidden": `${!this.expanded}`, id: this.uniqueSubmitemsId, class: "sub-items" }, h("slot", null)))));
|
|
101
102
|
}
|
|
102
103
|
get host() { return getElement(this); }
|
|
103
104
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
|
|
2
2
|
|
|
3
|
-
const panelCss = ":host{--r-panel--min-width:
|
|
3
|
+
const panelCss = ":host{--r-panel--min-width:18.75rem;--r-panel--background-color:var(--r-background-soft, #F3F1F0);--r-panel--display:flex;--r-panel--flex-direction:column;--r-panel--position:fixed;--r-panel--align-items:flex-start;--r-panel--top:0;--r-panel--padding:8px 0;--r-panel--width:18.75rem;--r-panel--height:100%;--r-panel--color:var(--r-text-regular, #282828);--r-panel--transition:all 250ms ease-in-out;--r-panel--transform:none;--r-panel--font-family:var(--r-font-family-text);--r-panel--left:0;--r-panel--header--display:flex;--r-panel--header--padding:12px 16px;--r-panel--header--justify-content:space-between;--r-panel--header--align-items:center;--r-panel--header--align-self:stretch;--r-panel--header--icon-rotate:none;--r-panel--header--flex-direction:row;--r-panel--header--gap:3.125rem;--r-panel--header--logo--img--width:100%;--r-panel--header--logo--img--height:auto;--r-panel--header--logo--img--expanded--width:12rem;--r-panel--header--logo--img--collapsed--width:1.875rem;--r-panel--header--height:unset;--r-panel--body--display:block;--r-panel--body--flex-grow:1;--r-panel--body--align-self:stretch;--r-panel--body--overflow:auto;--r-panel--body--padding:4px 8px 0;--r-panel--body-header--color:var(--r-text-soft, #686868);--r-panel--body-header--font-size:var(--r-font-size-400, 1rem);--r-panel--body-header--font-weight:var(--r-font-weight-regular, 400);--r-panel--body-header--padding:16px 0;--r-panel--body-header--width:16.75rem;--r-panel--body-header--margin:0px;--r-panel--footer--dispay:flex;--r-panel--footer--width:100%;--r-panel--footer--padding:16px 16px 24px;--r-panel--footer--flex-direction:column;--r-panel--footer--justify-content:center;--r-panel--footer-gap:var(--spacing-100, 1rem);--r-panel--footer--align-self:stretch;--r-panel--footer--text-align:center}:host([variant=drawer]) r-button{--r-button--padding:0.625rem;--r-button--background:var(--r-background-interactive-softer, #E7E4E2);--r-button--border-radius:10%;--r-button--slot--position:relative;--r-button--left:5%}:host([variant=drawer][collapsed]){--r-panel--width:var(--r-spacing-450, 4.5rem);--r-panel--header--display:none;--r-panel--header--icon-rotate:rotate(180deg);--r-panel--header--logo--expaned--display:none;--r-panel--header--logo--collapsed--display:block;--r-panel--header--flex-direction:column;--r-panel--header--gap:0.625rem;--r-list-item--epxanded--background-color:rgba(40, 40, 40, 0.08)}:host([variant=drawer][collapsed]) r-button{--r-button--slot--position:inherit;transition:transform 250ms ease-in-out}:host([variant=modal][collapsed]){--r-panel--transform:translate(-100%)}:host([collapsed]:not([variant=modal])){--r-panel--min-width:0;--r-list-item--sr-text--display:block;--r-list-item--text--display:none;--r-list-item--trailing--display:none}:host([variant=drawer]:not([has-header]):not([collapsed])),:host([variant=drawer][has-header=false]:not([collapsed])){--r-panel--header--height:var(--spacing-150, 1.5rem);--r-panel--header--padding:12px 8px 0 16px}:host([variant=drawer]:not([has-header]):not([collapsed])) r-button,:host([variant=drawer][has-header=false]:not([collapsed])) r-button{--r-button--top:20%;--r-button--left:97%}:host([collapsed]){--r-list-item--active-parent--background-color:rgba(40, 40, 40, 0.08)}.r-panel{z-index:2;min-width:var(--r-panel--min-width);background-color:var(--r-panel--background-color);display:var(--r-panel--display);flex-direction:var(--r-panel--flex-direction);align-items:var(--r-panel--align-items);width:var(--r-panel--width);height:var(--r-panel--height);position:var(--r-panel--position);top:var(--r-panel--top);padding:var(--r-panel--padding);color:var(--r-panel--color);transition:var(--r-panel--transition);transform:var(--r-panel--transform);left:var(--r-panel--left);font-family:var(--r-panel--font-family);box-sizing:border-box}.r-panel .logo-wrapper .logo-expanded{width:var(--r-panel--header--logo--img--expanded--width)}.r-panel .logo-wrapper .logo-collapsed{width:var(--r-panel--header--logo--img--collapsed--width)}.r-panel .logo-wrapper img{width:var(--r-panel--header--logo--img--width);height:var(--r-panel--header--logo--img--height)}.r-panel .logo-wrapper:focus,.r-panel .logo-wrapper:focus-visible{box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);outline:2px solid var(--r-border-focused, #0071e3);outline-offset:2px}.r-panel--header{display:flex;padding:var(--r-panel--header--padding);justify-content:var(--r-panel--header--justify-content);align-items:var(--r-panel--header--align-items);align-self:var(--r-panel--header--align-self);flex-direction:var(--r-panel--header--flex-direction);gap:var(--r-panel--header--gap);height:var(--r-panel--header--height)}.r-panel--header r-button{--r-button--padding:0;transform:var(--r-panel--header--icon-rotate);background:var(--r-button--background);position:var(--r-button--slot--position);left:var(--r-button--left);top:var(--r-button--top);border-radius:var(--r-button--border-radius)}.r-panel--body{flex-grow:var(--r-panel--body--flex-grow);align-self:var(--r-panel--body--align-self);display:var(--r-panel--body--display);overflow:var(--r-panel--body--overflow);padding:var(--r-panel--body--padding)}.r-panel--body ::slotted(.header){color:var(--r-panel--body-header--color);font-size:var(--r-panel--body-header--font-size);font-weight:var(--r-panel--body-header--font-weight);padding:var(--r-panel--body-header--padding);display:var(--r-panel--header--display);width:var(--r-panel--body-header--width);margin:var(--r-panel--body-header--margin)}.r-panel--footer{width:var(--r-panel--footer--width)}.r-panel ::slotted([slot=footer]){display:var(--r-panel--footer--dispay);padding:var(--r-panel--footer--padding);flex-direction:var(--r-panel--footer--flex-direction);justify-content:var(--r-panel--footer--justify-content);gap:var(--r-panel--footer-gap);align-self:var(--r-panel--footer--align-self);text-align:var(--r-panel--footer--text-align)}.r-panel ::slotted(ul){margin:var(--r-panel--item-list--margin, 0);padding:var(--r-panel--item-list--padding, 0);list-style-type:var(--r-panel--item-list--list-style-type, \"\")}@media (prefers-reduced-motion){.r-panel,:host([variant=drawer][collapsed]) r-button{transition:none}}";
|
|
4
4
|
|
|
5
5
|
const Panel = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -17,9 +17,9 @@ const Panel = class {
|
|
|
17
17
|
/** A boolean property that determines the collapsed state of the component. The default state is `false`. */
|
|
18
18
|
this.collapsed = false;
|
|
19
19
|
/** Aria-label text for collapse */
|
|
20
|
-
this.labelCollapse = '
|
|
20
|
+
this.labelCollapse = 'Collapse panel';
|
|
21
21
|
/** Aria-label text for expand */
|
|
22
|
-
this.labelExpand = '
|
|
22
|
+
this.labelExpand = 'Expand panel';
|
|
23
23
|
this.isCollapsed = this.collapsed;
|
|
24
24
|
// Pre-bound method for event listeners
|
|
25
25
|
this.updateCurrentLocationBound = this.updateCurrentLocation.bind(this);
|
|
@@ -166,10 +166,10 @@ const Panel = class {
|
|
|
166
166
|
}
|
|
167
167
|
}
|
|
168
168
|
render() {
|
|
169
|
-
return (h(Host, { key: '
|
|
169
|
+
return (h(Host, { key: 'aace877d6d376afd9cbac880bdc7d462ccee34e7', role: "navigation", collapsed: this.isCollapsed }, h("div", { key: 'c07a80d9fbefa984af49e105c37675585241dc96', class: "r-panel" }, h("div", { key: '6b16c3af37e340153a9449704bee1d9925309fd6', class: "r-panel--header" }, this.hasHeader && (h("a", { key: '56d04db007a0305db77010fc59b23467c4ab347a', class: "logo-wrapper", href: this.logoLink }, this.isCollapsed ?
|
|
170
170
|
h("slot", { name: "logo-collapsed" })
|
|
171
171
|
:
|
|
172
|
-
h("slot", { name: "logo-expanded" }))), this.variant === 'modal' ? (h("r-button", { class: "r-panel--trigger", variant: "blank",
|
|
172
|
+
h("slot", { name: "logo-expanded" }))), this.variant === 'modal' ? (h("r-button", { class: "r-panel--trigger", variant: "blank", icon: "cross", rAriaLabel: `${this.labelCollapse}`, onClick: this.handleFullyCollapsedButtonClick })) : this.variant === 'drawer' ? (h("r-button", { class: "r-panel--trigger", variant: "blank", icon: "angle-left", rAriaLabel: this.isCollapsed ? `${this.labelExpand}` : `${this.labelCollapse}`, onClick: this.handleSemiCollapsedButtonClick })) : this.variant === 'visible' ? (null) : null), h("div", { key: '4d88759343c8172d7b0c8f4750ba3bbb0d027586', class: "r-panel--body" }, h("slot", { key: '8a238430717fa44459b784a27b45f12dcb0b20d3' })), this.hasFooter && !this.isCollapsed && (h("div", { key: '74bc26fe68ea907ea844f1b36ab78be45ffd1540', class: "r-panel--footer" }, h("slot", { key: 'bd294360e84e060493088d42b6dd022e4d3058a9', name: "footer" }))))));
|
|
173
173
|
}
|
|
174
174
|
get host() { return getElement(this); }
|
|
175
175
|
static get watchers() { return {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
|
|
2
2
|
|
|
3
|
-
const stepperItemCss = ":host([active]){--r-stepper-item--indicator--background-color:var(--r-background-inverse, #282828);--r-stepper-item--color:var(--r-text-inverse, #FFF);--r-stepper-item--text--color:var(--r-text-regular, #282828);--r-stepper-item--indicator--border-color:transparent}:host([complete]){--r-stepper-item--indicator--background-color:var(--r-status-success-regular, #298535);--r-stepper-item--color:var(--r-text-inverse, #FFF);--r-stepper-item--text--color:var(--r-text-regular, #282828);--r-stepper-item--indicator--border-color:transparent}.r-stepper-item{display:var(--r-stepper-item--display, flex);flex-direction:var(--r-stepper-item--flex-direction, column);align-items:var(--r-stepper-item--align-items, center);justify-content:var(--r-stepper-item--justify-content, center);font-size:var(--r-stepper-item--font-size, var(--r-font-size-200, 13px));color:var(--r-stepper-item--color, var(--r-text-
|
|
3
|
+
const stepperItemCss = ":host([active]){--r-stepper-item--indicator--background-color:var(--r-background-inverse, #282828);--r-stepper-item--color:var(--r-text-inverse, #FFF);--r-stepper-item--text--color:var(--r-text-regular, #282828);--r-stepper-item--indicator--border-color:transparent}:host([complete]){--r-stepper-item--indicator--background-color:var(--r-status-success-regular, #298535);--r-stepper-item--color:var(--r-text-inverse, #FFF);--r-stepper-item--text--color:var(--r-text-regular, #282828);--r-stepper-item--indicator--border-color:transparent}.r-stepper-item{display:var(--r-stepper-item--display, flex);flex-direction:var(--r-stepper-item--flex-direction, column);align-items:var(--r-stepper-item--align-items, center);justify-content:var(--r-stepper-item--justify-content, center);font-size:var(--r-stepper-item--font-size, var(--r-font-size-200, 13px));color:var(--r-stepper-item--color, var(--r-text-regular, #282828));font-family:var(--r-stepper-item--font-family, var(--r-font-family-text, system-ui));width:var(--r-stepper-item--width, 36px);white-space:var(--r-stepper-item--white-space, nowrap);gap:var(--r-stepper-item--gap, 8px)}.r-stepper-item--indicator{width:var(--r-stepper-item--indicator--width, 20px);height:var(--r-stepper-item--indicator--height, 20px);line-height:var(--r-stepper-item--indicator--line-height, 20px);border-radius:var(--r-stepper-item--indicator--border-radius, 50%);background-color:var(--r-stepper-item--indicator--background-color, transparent);display:var(--r-stepper-item--indicator--display, flex);justify-content:var(--r-stepper-item--indicator--justify-content, center);align-items:var(--r-stepper-item--indicator--align-items, center);border-width:var(--r-stepper-item--indicator--border-width, 1px);border-style:var(--r-stepper-item--indicator--border-style, solid);border-color:var(--r-stepper-item--indicator--border-color, var(--r-text-regular, #282828));margin-left:var(--r-stepper-item--indicator--margin-left, 8px);margin-right:var(--r-stepper-item--indicator--margin-right, 8px)}.r-stepper-item--indicator--step-number{vertical-align:var(--r-stepper-item--step-number--vertical-align, middle)}.r-stepper-item--text{font-size:var(--r-stepper-item--text--font-size, var(--r-font-size-200, 13px));color:var(--r-stepper-item--text--color, var(--r-text-regular, #282828));text-align:var(--r-stepper-item--text--text-align, center)}";
|
|
4
4
|
|
|
5
5
|
const StepperItem = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
|
|
2
2
|
|
|
3
|
-
const stepperCss = ".r-stepper{display:var(--r-stepper--display, flex);align-items:var(--r-stepper--align-items, top)}.r-stepper>r-stepper-item,.r-stepper ::slotted(r-stepper-item){display:var(--r-stepper--slotted--stepper-item--display, flex)}.r-stepper>r-stepper-item:not(:last-of-type),.r-stepper ::slotted(r-stepper-item:not(:last-child)){flex:var(--r-stepper--slotted--stepper-item--flex, 1)}.r-stepper>r-stepper-item:not(:last-of-type)::after,.r-stepper ::slotted(r-stepper-item:not(:last-child))::after{content:var(--r-stepper-divider--content, \"\");display:var(--r-stepper-divider--display, block);position:var(--r-stepper-divider--position, relative);width:var(--r-stepper-divider--width, 100%);height:var(--r-stepper-divider--height, 1px);top:var(--r-stepper-divider--top, 10px);background-color:var(--r-stepper-divider--background-color, var(--r-
|
|
3
|
+
const stepperCss = ".r-stepper{display:var(--r-stepper--display, flex);align-items:var(--r-stepper--align-items, top)}.r-stepper>r-stepper-item,.r-stepper ::slotted(r-stepper-item){display:var(--r-stepper--slotted--stepper-item--display, flex)}.r-stepper>r-stepper-item:not(:last-of-type),.r-stepper ::slotted(r-stepper-item:not(:last-child)){flex:var(--r-stepper--slotted--stepper-item--flex, 1)}.r-stepper>r-stepper-item:not(:last-of-type)::after,.r-stepper ::slotted(r-stepper-item:not(:last-child))::after{content:var(--r-stepper-divider--content, \"\");display:var(--r-stepper-divider--display, block);position:var(--r-stepper-divider--position, relative);width:var(--r-stepper-divider--width, 100%);height:var(--r-stepper-divider--height, 1px);top:var(--r-stepper-divider--top, 10px);background-color:var(--r-stepper-divider--background-color, var(--r-text-regular, #282828))}";
|
|
4
4
|
|
|
5
5
|
const Stepper = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -16,7 +16,7 @@ const RTabPanel = class {
|
|
|
16
16
|
active,
|
|
17
17
|
'aria-labelledby': tabId
|
|
18
18
|
};
|
|
19
|
-
return (h(Host, Object.assign({ key: '
|
|
19
|
+
return (h(Host, Object.assign({ key: 'db95a245a8aa8900e1cea5af71ac488352954299', class: "r-typography" }, hostAttrs), h("div", { key: '0e720978d72a9d9ba9da367794ac96c49737d854', class: "r-tab-panel" }, h("slot", { key: 'f16a0da6c7d3d2c1e0c57778837bdb47879468b4' }))));
|
|
20
20
|
}
|
|
21
21
|
};
|
|
22
22
|
RTabPanel.style = tabPanelCss;
|
package/dist/esm/r-tab.entry.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
|
|
2
2
|
|
|
3
|
-
const tabCss = ":host{display:flex;outline:none;opacity:1;cursor:pointer}:host(:hover:not([disabled]:not([disabled=false]))){--r-tab--
|
|
3
|
+
const tabCss = ":host{display:flex;outline:none;opacity:1;cursor:pointer}:host(:hover:not([disabled]:not([disabled=false]))){--r-tab--background:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host(:active:not([disabled]:not([disabled=false]))){--r-tab--background:var(--r-background-interactive-pressed, rgba(40,40,40,0.12))}:host(:focus-visible){--r-tab--box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);--r-tab--outline:2px solid var(--r-border-focused, #0071e3);--r-tab--outline-offset:2px}:host([active]:not([active=false])){cursor:default;--r-tab--font-weight:var(--r-font-weight-semibold, 600);--r-tab--marker--visibility:visible}:host([disabled]:not([disabled=false])){cursor:not-allowed;--r-tab--pointer-events:none;--r-tab--color:var(--r-text-soft, #686868);--r-tab--marker--background-color:var(--r-border-soft, #686868)}.r-tab{position:var(--r-tab--position, relative);font-family:var(--r-tab--font-family, var(--r-font-family-text, system-ui));font-weight:var(--r-tab--font-weight, var(--r-font-weight-regular, 400));font-size:var(--r-tab--font-size, var(--r-font-size-400, 1rem));line-height:var(--r-tab--line-height, var(--r-line-height-m, 1.5));cursor:var(--r-tab--cursor, inherit);pointer-events:var(--r-tab--pointer-events, initial);display:var(--r-tab--display, flex);align-items:var(--r-tab--align-items, center);justify-content:var(--r-tab--justify-content, center);gap:var(--r-tab--gap, var(--r-spacing-050, 0.5rem));width:var(--r-tab--width, auto);padding-top:var(--r-tab--padding-top, var(--r-spacing-025, 0.25rem));padding-right:var(--r-tab--padding-right, var(--r-spacing-050, 0.5rem));padding-bottom:var(--r-tab--padding-bottom, var(--r-spacing-100, 1rem));padding-left:var(--r-tab--padding-left, var(--r-spacing-050, 0.5rem));margin-bottom:var(--r-tab--margin-bottom, -1px);opacity:var(--r-tab--opacity, 1);background:var(--r-tab--background, none);color:var(--r-tab--color, var(--r-text-regular, #282828));border:var(--r-tab--border, none);box-shadow:var(--r-tab--box-shadow, none);outline:var(--r-tab--outline, none);outline-offset:var(--r-tab--outline-offset, 0)}.r-tab::after{content:var(--r-tab--marker--content, \"\");width:var(--r-tab--marker--width, 100%);height:var(--r-tab--marker--height, 3px);position:var(--r-tab--marker--position, absolute);bottom:var(--r-tab--marker--bottom, 0);left:var(--r-tab--marker--left, 0);visibility:var(--r-tab--marker--visibility, hidden);background-color:var(--r-tab--marker--background-color, var(--r-border-regular, #282828));transition:var(--r-tab--marker--transition, all 0.1s ease-in)}.r-tab--disabled-icon,.r-tab ::slotted([slot=icon]){color:var(--r-tab--icon--color, var(--r-icon-soft, #686868))}@media (prefers-reduced-motion){.r-tab::after{transition:none}}";
|
|
4
4
|
|
|
5
5
|
const RTab = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -28,6 +28,8 @@ const RTab = class {
|
|
|
28
28
|
if (this.disabled)
|
|
29
29
|
return;
|
|
30
30
|
switch (event.code) {
|
|
31
|
+
case 'ArrowLeft':
|
|
32
|
+
case 'ArrowRight':
|
|
31
33
|
case 'Space':
|
|
32
34
|
case 'Home':
|
|
33
35
|
case 'End':
|
|
@@ -47,7 +49,9 @@ const RTab = class {
|
|
|
47
49
|
'aria-selected': `${active}`,
|
|
48
50
|
'aria-disabled': `${disabled}`
|
|
49
51
|
};
|
|
50
|
-
return (h(Host, Object.assign({ key: '
|
|
52
|
+
return (h(Host, Object.assign({ key: '619d576a8efdfa1f941be9760312d7254a922f10', onClick: this.handleClick, onKeyUp: this.handleKeyup, onKeyDown: this.handleKeydown }, hostAttrs), h("span", { key: '15d69c67544bdb845df4b10411ff3e55fb5671a2', class: "r-tab" }, disabled ?
|
|
53
|
+
h("r-icon", { class: "r-tab--disabled-icon", size: "s", name: "circle-slash" })
|
|
54
|
+
: h("slot", { name: "icon" }), h("slot", { key: '59e5f0740a92f1cfeb71ab9709db2f2a13152fb4' }))));
|
|
51
55
|
}
|
|
52
56
|
get host() { return getElement(this); }
|
|
53
57
|
};
|
|
@@ -1,14 +1,172 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host } from './index-Da7qOBFr.js';
|
|
1
|
+
import { r as registerInstance, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
|
|
2
2
|
|
|
3
|
-
const tabsListCss = ":host{display:block}.r-tabs-list{display:var(--r-tabs-list--display, flex);margin-bottom:var(--r-tabs-list--margin-bottom,
|
|
3
|
+
const tabsListCss = ":host{display:block}:host([variant=compact]){--r-tabs-list--r-tab--margin-right:0;--r-tabs-list--r-tab--flex:1;--r-tab--width:100%}:host([scrollable=true]){--r-tabs-list--tabs-container--margin:-6px 4px}:host([border=branded]){--r-tab--marker--background-color:var(--r-border-brand-vanguard, #527a42)}.r-tabs-list{display:var(--r-tabs-list--display, flex);margin-bottom:var(--r-tabs-list--margin-bottom, var(--r-spacing-250, 2.5rem));border-bottom-width:var(--r-tabs-list--border-bottom-width, 1px);border-bottom-style:var(--r-tabs-list--border-bottom-style, solid);border-bottom-color:var(--r-tabs-list--border-bottom-color, var(--r-border-softer, #c9c9c9))}.r-tabs-list--scroll-button{--r-icon-button--border-radius:var(--r-tabs-list--border-radius, 0);--r-icon-button--width:var(--r-tabs-list--scroll-button--width, var(--r-spacing-200, 2rem));--r-icon-button--height:var(--r-tabs-list--scroll-button--height, var(--r-spacing-200, 2rem))}.r-tabs-list--tabs-container{display:var(--r-tabs-list--tabs-container--display, flex);flex:var(--r-tabs-list--tabs-container--flex, 1);overflow:var(--r-tabs-list--tabs-container--overflow, scroll hidden);scroll-snap-type:var(--r-tabs-list--tabs-container--scroll-snap-type, x proximity);scrollbar-width:var(--r-tabs-list--tabs-container--scrollbar-width, none);margin:var(--r-tabs-list--tabs-container--margin, -6px);padding:var(--r-tabs-list--tabs-container--padding, 6px)}.r-tabs-list--scroll-button-container{display:var(--r-tabs-list--scroll-button-container--display, flex);align-items:var(--r-tabs-list--scroll-button-container--align-items, start);gap:var(--r-tabs-list--scroll-button-container--gap, var(--r-spacing-025, 0.25rem))}.r-tabs-list--scroll-indicator{margin-top:var(--r-tabs-list--scroll-indicator--margin, 2px);width:var(--r-tabs-list--scroll-button--after--width, 1px);height:var(--r-tabs-list--scroll-button--after--height, var(--r-spacing-175, 1.75rem));background-color:var(--r-tabs-list----scroll-indicator--background-color, var(--r-border-softer, #c9c9c9));z-index:var(--r-tabs-list----scroll-indicator--z-index, 1)}.r-tabs-list ::slotted(r-tab){margin-right:var(--r-tabs-list--r-tab--margin-right, var(--r-spacing-250, 2.5rem));flex:var(--r-tabs-list--r-tab--flex, none)}.r-tabs-list ::slotted(r-tab:last-of-type){margin-right:var(--r-tabs-list--r-tab--last-of-type--margin-right, 0)}";
|
|
4
4
|
|
|
5
5
|
const RTabsList = class {
|
|
6
6
|
constructor(hostRef) {
|
|
7
7
|
registerInstance(this, hostRef);
|
|
8
|
+
/**
|
|
9
|
+
* Visual variant of the tab list
|
|
10
|
+
* @defaulr 'expanded'
|
|
11
|
+
* */
|
|
12
|
+
this.variant = 'expanded';
|
|
13
|
+
/**
|
|
14
|
+
* Border style of the active tab
|
|
15
|
+
* @default 'standard'
|
|
16
|
+
* */
|
|
17
|
+
this.border = 'standard';
|
|
18
|
+
/** Indicates if the tab list is scrollable */
|
|
19
|
+
this.scrollable = false;
|
|
20
|
+
/** Indicates if the first tab is fully visible */
|
|
21
|
+
this.firstItemVisible = true;
|
|
22
|
+
/** Indicates if the last tab is fully visible */
|
|
23
|
+
this.lastItemVisible = false;
|
|
24
|
+
this.initiatizeResizeObserver = () => {
|
|
25
|
+
if (!this.containerRef || this.resizeObserver)
|
|
26
|
+
return;
|
|
27
|
+
this.resizeObserver = new ResizeObserver(() => this.updateScrollState());
|
|
28
|
+
this.resizeObserver.observe(this.containerRef);
|
|
29
|
+
};
|
|
30
|
+
this.updateScrollState = () => {
|
|
31
|
+
if (!this.containerRef)
|
|
32
|
+
return;
|
|
33
|
+
const { scrollWidth, clientWidth } = this.containerRef;
|
|
34
|
+
const containerRect = this.containerRef.getBoundingClientRect();
|
|
35
|
+
const tabs = Array.from(this.tabElements);
|
|
36
|
+
// Check if content is scrollable
|
|
37
|
+
this.scrollable = scrollWidth > clientWidth;
|
|
38
|
+
if (!this.scrollable || tabs.length === 0) {
|
|
39
|
+
this.firstItemVisible = true;
|
|
40
|
+
this.lastItemVisible = true;
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
43
|
+
const firstTab = tabs[0];
|
|
44
|
+
const firstTabRect = firstTab.getBoundingClientRect();
|
|
45
|
+
this.firstItemVisible = firstTabRect.left >= containerRect.left - 1;
|
|
46
|
+
const lastTab = tabs[tabs.length - 1];
|
|
47
|
+
const lastTabRect = lastTab.getBoundingClientRect();
|
|
48
|
+
this.lastItemVisible = lastTabRect.right <= containerRect.right + 1;
|
|
49
|
+
};
|
|
50
|
+
this.getVisibleTabOnLeft = () => {
|
|
51
|
+
if (!this.containerRef)
|
|
52
|
+
return null;
|
|
53
|
+
const containerRect = this.containerRef.getBoundingClientRect();
|
|
54
|
+
const tabs = Array.from(this.tabElements);
|
|
55
|
+
// Find first tab that's partially or fully visible from the left
|
|
56
|
+
for (const tab of tabs) {
|
|
57
|
+
const tabRect = tab.getBoundingClientRect();
|
|
58
|
+
if (tabRect.right > containerRect.left + 1) {
|
|
59
|
+
return tab;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
return;
|
|
63
|
+
};
|
|
64
|
+
this.getVisibleTabOnRight = () => {
|
|
65
|
+
if (!this.containerRef)
|
|
66
|
+
return null;
|
|
67
|
+
const containerRect = this.containerRef.getBoundingClientRect();
|
|
68
|
+
const tabs = Array.from(this.tabElements);
|
|
69
|
+
for (let i = tabs.length - 1; i >= 0; i--) {
|
|
70
|
+
const tab = tabs[i];
|
|
71
|
+
const tabRect = tab.getBoundingClientRect();
|
|
72
|
+
if (tabRect.left < containerRect.right - 1) {
|
|
73
|
+
return tab;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
return null;
|
|
77
|
+
};
|
|
78
|
+
this.scrollLeft = () => {
|
|
79
|
+
if (!this.containerRef)
|
|
80
|
+
return;
|
|
81
|
+
const visibleTab = this.getVisibleTabOnLeft();
|
|
82
|
+
if (!visibleTab)
|
|
83
|
+
return;
|
|
84
|
+
const tabs = Array.from(this.tabElements);
|
|
85
|
+
const currentIndex = tabs.indexOf(visibleTab);
|
|
86
|
+
const prevTab = currentIndex > 0 ? tabs[currentIndex - 1] : null;
|
|
87
|
+
if (!prevTab)
|
|
88
|
+
return;
|
|
89
|
+
const containerLeft = this.containerRef.getBoundingClientRect().left;
|
|
90
|
+
const prevTabLeft = prevTab.getBoundingClientRect().left;
|
|
91
|
+
const offset = prevTabLeft - containerLeft;
|
|
92
|
+
this.containerRef.scrollBy({
|
|
93
|
+
left: offset,
|
|
94
|
+
behavior: 'smooth'
|
|
95
|
+
});
|
|
96
|
+
};
|
|
97
|
+
this.scrollRight = () => {
|
|
98
|
+
if (!this.containerRef)
|
|
99
|
+
return;
|
|
100
|
+
const visibleTab = this.getVisibleTabOnRight();
|
|
101
|
+
if (!visibleTab)
|
|
102
|
+
return;
|
|
103
|
+
const tabs = Array.from(this.tabElements);
|
|
104
|
+
const currentIndex = tabs.indexOf(visibleTab);
|
|
105
|
+
const nextTab = currentIndex < tabs.length - 1 ? tabs[currentIndex + 1] : null;
|
|
106
|
+
if (!nextTab)
|
|
107
|
+
return;
|
|
108
|
+
const containerRight = this.containerRef.getBoundingClientRect().right;
|
|
109
|
+
const nextTabRight = nextTab.getBoundingClientRect().right;
|
|
110
|
+
const offset = nextTabRight - containerRight;
|
|
111
|
+
this.containerRef.scrollBy({
|
|
112
|
+
left: offset,
|
|
113
|
+
behavior: 'smooth'
|
|
114
|
+
});
|
|
115
|
+
};
|
|
116
|
+
this.scrollToActiveTab = (activeTabElement) => {
|
|
117
|
+
if (!this.containerRef || !this.scrollable)
|
|
118
|
+
return;
|
|
119
|
+
const activeTab = activeTabElement || this.host.querySelector('r-tab[active]');
|
|
120
|
+
if (!activeTab)
|
|
121
|
+
return;
|
|
122
|
+
const containerRect = this.containerRef.getBoundingClientRect();
|
|
123
|
+
const activeTabRect = activeTab.getBoundingClientRect();
|
|
124
|
+
// Check if already fully visible
|
|
125
|
+
const isVisible = activeTabRect.left >= containerRect.left &&
|
|
126
|
+
activeTabRect.right <= containerRect.right;
|
|
127
|
+
if (isVisible)
|
|
128
|
+
return;
|
|
129
|
+
// Center the active tab
|
|
130
|
+
const offset = (activeTabRect.left - containerRect.left) -
|
|
131
|
+
(containerRect.width / 2) +
|
|
132
|
+
(activeTabRect.width / 2);
|
|
133
|
+
this.containerRef.scrollBy({
|
|
134
|
+
left: offset,
|
|
135
|
+
behavior: 'smooth'
|
|
136
|
+
});
|
|
137
|
+
};
|
|
138
|
+
this.renderScrollButton = (direction, disabled, onClick, tooltip) => {
|
|
139
|
+
const iconName = direction === 'left' ? 'angle-left' : 'angle-right';
|
|
140
|
+
const button = (h("r-icon-button", { onRClick: onClick, disabled: disabled, name: iconName, size: "s", rTabindex: -1, class: "r-tabs-list--scroll-button" }));
|
|
141
|
+
if (tooltip) {
|
|
142
|
+
return (h("r-tooltip", { text: tooltip, position: "top" }, button));
|
|
143
|
+
}
|
|
144
|
+
return button;
|
|
145
|
+
};
|
|
146
|
+
}
|
|
147
|
+
/** Listen for "click" event on `<r-tab>` */
|
|
148
|
+
tabChangeAction(event) {
|
|
149
|
+
this.scrollToActiveTab(event.target);
|
|
150
|
+
}
|
|
151
|
+
/** `<r-tab>` group of elements */
|
|
152
|
+
get tabElements() {
|
|
153
|
+
return this.host.querySelectorAll('r-tab');
|
|
154
|
+
}
|
|
155
|
+
componentDidLoad() {
|
|
156
|
+
this.updateScrollState();
|
|
157
|
+
this.initiatizeResizeObserver();
|
|
158
|
+
this.scrollToActiveTab();
|
|
159
|
+
}
|
|
160
|
+
disconnectedCallback() {
|
|
161
|
+
var _a;
|
|
162
|
+
(_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
8
163
|
}
|
|
9
164
|
render() {
|
|
10
|
-
return (h(Host, { key: '
|
|
165
|
+
return (h(Host, { key: '8191b15343491c66259b583930ee73916c6bbd9e', scrollable: `${this.scrollable}`, role: "tablist" }, h("div", { key: 'e5c2a308889986b80549aba5b9a7bec8e6961891', class: "r-tabs-list" }, this.scrollable &&
|
|
166
|
+
h("div", { key: '62e6abb4a9e5ff9c553162c6de4176c8ce4c0407', "aria-hidden": "true", class: "r-tabs-list--scroll-button-container" }, this.renderScrollButton('left', this.firstItemVisible, this.scrollLeft, this.scrollLeftTooltip), !this.firstItemVisible && h("div", { key: '62e5c2ca7e76323ff367940cd9ab1cb6e5b6db74', class: "r-tabs-list--scroll-indicator" })), h("div", { key: '5f0b264eb4abaf51d4e2f3a85a92d89ff9e378f5', class: "r-tabs-list--tabs-container", ref: (el) => this.containerRef = el, onScroll: this.updateScrollState }, h("slot", { key: '38f6060007491fa9b50cf7cf7d36372c32e63d97' })), this.scrollable &&
|
|
167
|
+
h("div", { key: 'd51473735f550b81b5ba630126fe3bcc41848648', "aria-hidden": "true", class: "r-tabs-list--scroll-button-container" }, !this.lastItemVisible && h("div", { key: '89d712984dd7797cbca0df86989cf8eedcd95a61', class: "r-tabs-list--scroll-indicator" }), this.renderScrollButton('right', this.lastItemVisible, this.scrollRight, this.scrollRightTooltip)))));
|
|
11
168
|
}
|
|
169
|
+
get host() { return getElement(this); }
|
|
12
170
|
};
|
|
13
171
|
RTabsList.style = tabsListCss;
|
|
14
172
|
|
package/dist/esm/r-tabs.entry.js
CHANGED
|
@@ -185,23 +185,51 @@ const RTabs = class {
|
|
|
185
185
|
history.pushState({ tabId, tabsGroup }, '', url.toString());
|
|
186
186
|
}
|
|
187
187
|
_changeFocusTab(tab, keycode) {
|
|
188
|
-
var _a, _b, _c, _d;
|
|
189
188
|
const tabs = Array.from(this.tabElements).filter(element => !element.disabled);
|
|
190
189
|
const index = tabs.indexOf(tab);
|
|
190
|
+
let nextTab;
|
|
191
191
|
switch (keycode) {
|
|
192
192
|
case 'ArrowLeft':
|
|
193
|
-
index === 0 ?
|
|
193
|
+
nextTab = index === 0 ? tabs[tabs.length - 1] : tabs[index - 1];
|
|
194
194
|
break;
|
|
195
195
|
case 'ArrowRight':
|
|
196
|
-
index === tabs.length - 1 ?
|
|
196
|
+
nextTab = index === tabs.length - 1 ? tabs[0] : tabs[index + 1];
|
|
197
197
|
break;
|
|
198
198
|
case 'Home':
|
|
199
|
-
|
|
199
|
+
nextTab = tabs[0];
|
|
200
200
|
break;
|
|
201
201
|
case 'End':
|
|
202
|
-
|
|
202
|
+
nextTab = tabs[tabs.length - 1];
|
|
203
203
|
break;
|
|
204
204
|
}
|
|
205
|
+
if (nextTab) {
|
|
206
|
+
nextTab.focus();
|
|
207
|
+
this.scrollTabIntoView(nextTab);
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
scrollTabIntoView(tab) {
|
|
211
|
+
var _a;
|
|
212
|
+
const tabsList = this.host.querySelector('r-tabs-list');
|
|
213
|
+
if (!tabsList)
|
|
214
|
+
return;
|
|
215
|
+
const container = (_a = tabsList.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.r-tabs-list--tabs-container');
|
|
216
|
+
if (!container)
|
|
217
|
+
return;
|
|
218
|
+
const containerRect = container.getBoundingClientRect();
|
|
219
|
+
const tabRect = tab.getBoundingClientRect();
|
|
220
|
+
// Check if tab is fully visible
|
|
221
|
+
const isFullyVisible = tabRect.left >= containerRect.left - 1 &&
|
|
222
|
+
tabRect.right <= containerRect.right + 1;
|
|
223
|
+
if (isFullyVisible)
|
|
224
|
+
return;
|
|
225
|
+
// Calculate scroll offset to center the tab
|
|
226
|
+
const centerOffset = (tabRect.left - containerRect.left) -
|
|
227
|
+
(containerRect.width / 2) +
|
|
228
|
+
(tabRect.width / 2);
|
|
229
|
+
container.scrollBy({
|
|
230
|
+
left: centerOffset,
|
|
231
|
+
behavior: 'smooth'
|
|
232
|
+
});
|
|
205
233
|
}
|
|
206
234
|
/** Listen for "click" event on `<r-tab>` */
|
|
207
235
|
tabChangeAction(event) {
|
|
@@ -238,7 +266,7 @@ const RTabs = class {
|
|
|
238
266
|
this._changeFocusTab(e.target, e.detail.keycode);
|
|
239
267
|
}
|
|
240
268
|
render() {
|
|
241
|
-
return (h(Host, { key: '
|
|
269
|
+
return (h(Host, { key: 'b058fd461951dad54e7eb73f7dc5df838c864ebd', class: "r-tabs" }, h("slot", { key: '8e93fded06f0f01dc326e8368aac200d36613753' })));
|
|
242
270
|
}
|
|
243
271
|
get host() { return getElement(this); }
|
|
244
272
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
|
|
2
2
|
import { a as appendControlToFormData } from './formData-DvLT8-y3.js';
|
|
3
3
|
|
|
4
|
-
const textareaCss = ":host{opacity:1;display:block;outline:none;--r-label--margin-bottom:0}:host(:focus-visible){outline:none}:host([resize=none]){--r-textarea--input--resize:none}:host([resize=both]){--r-textarea--input--resize:both}:host([resize=horizontal]){--r-textarea--input--resize:horizontal}:host([resize=vertical]){--r-textarea--input--resize:vertical}:host([resize=initial]){--r-textarea--input--resize:initial}:host([resize=inherit]){--r-textarea--input--resize:inherit}:host([invalid]:not([invalid=false])){--r-textarea--container--background-color:var(--r-status-error-soft, #fef6f6);--r-textarea--container--border-color:var(--r-status-error-regular, #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,
|
|
4
|
+
const textareaCss = ":host{opacity:1;display:block;outline:none;--r-label--margin-bottom:0}:host(:focus-visible){outline:none}:host([resize=none]){--r-textarea--input--resize:none}:host([resize=both]){--r-textarea--input--resize:both}:host([resize=horizontal]){--r-textarea--input--resize:horizontal}:host([resize=vertical]){--r-textarea--input--resize:vertical}:host([resize=initial]){--r-textarea--input--resize:initial}:host([resize=inherit]){--r-textarea--input--resize:inherit}:host([invalid]:not([invalid=false])){--r-textarea--container--background-color:var(--r-status-error-soft, #fef6f6);--r-textarea--container--border-color:var(--r-status-error-regular, #b00c15)}.r-textarea--label-container{display:var(--r-textarea--label-container--display, flex);gap:var(--r-textarea--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-textarea--label-container--align-items, center);justify-content:var(--r-textarea--label-container--align-items, space-between)}.r-textarea--label-container ::slotted([slot=popover]){display:var(--r-textarea--popover--display, inline-flex);height:var(--r-textarea--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-textarea--popover--align-items, center);justify-content:var(--r-textarea--popover--justify-content, center);margin-right:var(--r-textarea--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-textarea--popover-trigger--min-width, var(--r-spacing-150, 1.5))}.r-textarea--input::placeholder{color:var(--r-textarea--input--placeholder--color, var(--r-text-soft, #686868))}.r-textarea--input{vertical-align:top;width:var(--r-textarea--input--width, 100%);max-width:var(--r-textarea--input--max-width, 100%);min-height:var(--r-textarea--input--min-height, 8.875em);font-family:var(--r-textarea--input--font-family, var(--r-font-family-text, system-ui));font-weight:var(--r-textarea--input--font-weight, var(--r-font-weight-regular, 400));font-size:var(--r-textarea--input--font-size, var(--r-font-size-400, 1rem));line-height:var(--r-textarea--input--line-height, var(--r-line-height-m, 1.5));color:var(--r-textarea--input--color, var(--r-text-regular, #282828));background-color:var(--r-textarea--input--background-color, transparent);opacity:var(--r-textarea--input--opacity, 1);border-width:var(--r-textarea--input--border-width, 0px);border-style:var(--r-textarea--input--border-style, solid);border-color:var(--r-textarea--input--border-color, var(--r-border-soft, #686868));border-radius:var(--r-textarea--input--border-radius, 0);box-sizing:var(--r-textarea--input--box-sizing, border-box);box-shadow:var(--r-textarea--input--box-shadow, none);padding:var(--r-textarea--input--padding, var(--r-textarea--input--padding-top, 0.688em) var(--r-textarea--input--padding-right, 0.625em) var(--r-textarea--input--padding-bottom, 0.688em) var(--r-textarea--input--padding-left, 0.625em));margin-top:var(--r-textarea--input--margin-top, 0);resize:var(--r-textarea--input--resize, both);z-index:var(--r-textarea--input--z-index, initial);outline:var(--r-textarea--input--outline, none);outline-offset:var(--r-textarea--input--outline-offset, 0);pointer-events:var(--r-textarea--input--pointer-events, auto);cursor:var(--r-textarea--input--cursor, inherit)}.r-textarea--container{display:flex;align-items:start;overflow:visible;background-color:var(--r-textarea--container--background-color, var(--r-background-interactive-softest, #f7f7f7));border-width:var(--r-textarea--container--border-width, 1px);border-style:var(--r-textarea--container--border-style, solid);border-color:var(--r-textarea--container--border-color, var(--r-border-soft, #686868));padding:var(--r-textarea--container--padding, 0);margin-top:var(--r-textarea--container--margin-top, var(--r-spacing-025, 0.25rem));box-shadow:var(--r-textarea--container--box-shadow, none);outline:var(--r-textarea--container--outline, none);outline-offset:var(--r-textarea--container--outline-offset, none)}.r-textarea--container[data-readonly=true]{--r-textarea--container--background-color:var(--r-background-soft, #f3f1f0);--r-textarea--container--border-color:transparent transparent var(--r-border-soft, #686868) transparent;--r-textarea--container--cursor:text}.r-textarea--container:hover:not([data-disabled=true]):not([data-readonly=true]){--r-textarea--container--background-color:var(--r-background-interactive-hovered)}.r-textarea--container:active:not([data-disabled=true]):not([data-readonly=true]){--r-textarea--container--background-color:var(--r-background-interactive-pressed)}.r-textarea--container:focus-within{--r-textarea--container--box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);--r-textarea--container--outline:2px solid var(--r-border-focused, #0071e3);--r-textarea--container--outline-offset:2px}.r-textarea--trailing{display:var(--r-textarea--trailing--display, flex);margin-top:var(--r-textarea--trailing--margin-top, 0.688em);margin-right:var(--r-textarea--trailing--margin-right, 0.625em);margin-left:var(--r-textarea--trailing--margin-left, auto);gap:var(--r-textarea--trailing--gap, 0.625rem)}.r-textarea--trailing:empty{display:none}.r-textarea--readonly-icon{color:var(--r-textarea--readonly-icon--color, var(--r-icon-soft, #686868))}.r-textarea--messages{display:flex;gap:var(--r-textarea--messages--gap, var(--r-spacing-025, 0.25rem))}.r-textarea--messages--counter{margin-left:auto}.r-textarea--messages:has(r-hint){margin-top:var(--r-spacing-025, 0.25rem)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
|
|
5
5
|
|
|
6
6
|
const RTextarea = class {
|
|
7
7
|
constructor(hostRef) {
|