@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
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-DJ4H_bFj.js');
|
|
4
4
|
|
|
5
|
-
const panelCss = ":host{--r-panel--min-width:
|
|
5
|
+
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}}";
|
|
6
6
|
|
|
7
7
|
const Panel = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -19,9 +19,9 @@ const Panel = class {
|
|
|
19
19
|
/** A boolean property that determines the collapsed state of the component. The default state is `false`. */
|
|
20
20
|
this.collapsed = false;
|
|
21
21
|
/** Aria-label text for collapse */
|
|
22
|
-
this.labelCollapse = '
|
|
22
|
+
this.labelCollapse = 'Collapse panel';
|
|
23
23
|
/** Aria-label text for expand */
|
|
24
|
-
this.labelExpand = '
|
|
24
|
+
this.labelExpand = 'Expand panel';
|
|
25
25
|
this.isCollapsed = this.collapsed;
|
|
26
26
|
// Pre-bound method for event listeners
|
|
27
27
|
this.updateCurrentLocationBound = this.updateCurrentLocation.bind(this);
|
|
@@ -168,10 +168,10 @@ const Panel = class {
|
|
|
168
168
|
}
|
|
169
169
|
}
|
|
170
170
|
render() {
|
|
171
|
-
return (index.h(index.Host, { key: '
|
|
171
|
+
return (index.h(index.Host, { key: 'aace877d6d376afd9cbac880bdc7d462ccee34e7', role: "navigation", collapsed: this.isCollapsed }, index.h("div", { key: 'c07a80d9fbefa984af49e105c37675585241dc96', class: "r-panel" }, index.h("div", { key: '6b16c3af37e340153a9449704bee1d9925309fd6', class: "r-panel--header" }, this.hasHeader && (index.h("a", { key: '56d04db007a0305db77010fc59b23467c4ab347a', class: "logo-wrapper", href: this.logoLink }, this.isCollapsed ?
|
|
172
172
|
index.h("slot", { name: "logo-collapsed" })
|
|
173
173
|
:
|
|
174
|
-
index.h("slot", { name: "logo-expanded" }))), this.variant === 'modal' ? (index.h("r-button", { class: "r-panel--trigger", variant: "blank",
|
|
174
|
+
index.h("slot", { name: "logo-expanded" }))), this.variant === 'modal' ? (index.h("r-button", { class: "r-panel--trigger", variant: "blank", icon: "cross", rAriaLabel: `${this.labelCollapse}`, onClick: this.handleFullyCollapsedButtonClick })) : this.variant === 'drawer' ? (index.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), index.h("div", { key: '4d88759343c8172d7b0c8f4750ba3bbb0d027586', class: "r-panel--body" }, index.h("slot", { key: '8a238430717fa44459b784a27b45f12dcb0b20d3' })), this.hasFooter && !this.isCollapsed && (index.h("div", { key: '74bc26fe68ea907ea844f1b36ab78be45ffd1540', class: "r-panel--footer" }, index.h("slot", { key: 'bd294360e84e060493088d42b6dd022e4d3058a9', name: "footer" }))))));
|
|
175
175
|
}
|
|
176
176
|
get host() { return index.getElement(this); }
|
|
177
177
|
static get watchers() { return {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-DJ4H_bFj.js');
|
|
4
4
|
|
|
5
|
-
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-
|
|
5
|
+
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)}";
|
|
6
6
|
|
|
7
7
|
const StepperItem = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-DJ4H_bFj.js');
|
|
4
4
|
|
|
5
|
-
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-
|
|
5
|
+
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))}";
|
|
6
6
|
|
|
7
7
|
const Stepper = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -18,7 +18,7 @@ const RTabPanel = class {
|
|
|
18
18
|
active,
|
|
19
19
|
'aria-labelledby': tabId
|
|
20
20
|
};
|
|
21
|
-
return (index.h(index.Host, Object.assign({ key: '
|
|
21
|
+
return (index.h(index.Host, Object.assign({ key: 'db95a245a8aa8900e1cea5af71ac488352954299', class: "r-typography" }, hostAttrs), index.h("div", { key: '0e720978d72a9d9ba9da367794ac96c49737d854', class: "r-tab-panel" }, index.h("slot", { key: 'f16a0da6c7d3d2c1e0c57778837bdb47879468b4' }))));
|
|
22
22
|
}
|
|
23
23
|
};
|
|
24
24
|
RTabPanel.style = tabPanelCss;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-DJ4H_bFj.js');
|
|
4
4
|
|
|
5
|
-
const tabCss = ":host{display:flex;outline:none;opacity:1;cursor:pointer}:host(:hover:not([disabled]:not([disabled=false]))){--r-tab--
|
|
5
|
+
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}}";
|
|
6
6
|
|
|
7
7
|
const RTab = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -30,6 +30,8 @@ const RTab = class {
|
|
|
30
30
|
if (this.disabled)
|
|
31
31
|
return;
|
|
32
32
|
switch (event.code) {
|
|
33
|
+
case 'ArrowLeft':
|
|
34
|
+
case 'ArrowRight':
|
|
33
35
|
case 'Space':
|
|
34
36
|
case 'Home':
|
|
35
37
|
case 'End':
|
|
@@ -49,7 +51,9 @@ const RTab = class {
|
|
|
49
51
|
'aria-selected': `${active}`,
|
|
50
52
|
'aria-disabled': `${disabled}`
|
|
51
53
|
};
|
|
52
|
-
return (index.h(index.Host, Object.assign({ key: '
|
|
54
|
+
return (index.h(index.Host, Object.assign({ key: '619d576a8efdfa1f941be9760312d7254a922f10', onClick: this.handleClick, onKeyUp: this.handleKeyup, onKeyDown: this.handleKeydown }, hostAttrs), index.h("span", { key: '15d69c67544bdb845df4b10411ff3e55fb5671a2', class: "r-tab" }, disabled ?
|
|
55
|
+
index.h("r-icon", { class: "r-tab--disabled-icon", size: "s", name: "circle-slash" })
|
|
56
|
+
: index.h("slot", { name: "icon" }), index.h("slot", { key: '59e5f0740a92f1cfeb71ab9709db2f2a13152fb4' }))));
|
|
53
57
|
}
|
|
54
58
|
get host() { return index.getElement(this); }
|
|
55
59
|
};
|
|
@@ -2,15 +2,173 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-DJ4H_bFj.js');
|
|
4
4
|
|
|
5
|
-
const tabsListCss = ":host{display:block}.r-tabs-list{display:var(--r-tabs-list--display, flex);margin-bottom:var(--r-tabs-list--margin-bottom,
|
|
5
|
+
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)}";
|
|
6
6
|
|
|
7
7
|
const RTabsList = class {
|
|
8
8
|
constructor(hostRef) {
|
|
9
9
|
index.registerInstance(this, hostRef);
|
|
10
|
+
/**
|
|
11
|
+
* Visual variant of the tab list
|
|
12
|
+
* @defaulr 'expanded'
|
|
13
|
+
* */
|
|
14
|
+
this.variant = 'expanded';
|
|
15
|
+
/**
|
|
16
|
+
* Border style of the active tab
|
|
17
|
+
* @default 'standard'
|
|
18
|
+
* */
|
|
19
|
+
this.border = 'standard';
|
|
20
|
+
/** Indicates if the tab list is scrollable */
|
|
21
|
+
this.scrollable = false;
|
|
22
|
+
/** Indicates if the first tab is fully visible */
|
|
23
|
+
this.firstItemVisible = true;
|
|
24
|
+
/** Indicates if the last tab is fully visible */
|
|
25
|
+
this.lastItemVisible = false;
|
|
26
|
+
this.initiatizeResizeObserver = () => {
|
|
27
|
+
if (!this.containerRef || this.resizeObserver)
|
|
28
|
+
return;
|
|
29
|
+
this.resizeObserver = new ResizeObserver(() => this.updateScrollState());
|
|
30
|
+
this.resizeObserver.observe(this.containerRef);
|
|
31
|
+
};
|
|
32
|
+
this.updateScrollState = () => {
|
|
33
|
+
if (!this.containerRef)
|
|
34
|
+
return;
|
|
35
|
+
const { scrollWidth, clientWidth } = this.containerRef;
|
|
36
|
+
const containerRect = this.containerRef.getBoundingClientRect();
|
|
37
|
+
const tabs = Array.from(this.tabElements);
|
|
38
|
+
// Check if content is scrollable
|
|
39
|
+
this.scrollable = scrollWidth > clientWidth;
|
|
40
|
+
if (!this.scrollable || tabs.length === 0) {
|
|
41
|
+
this.firstItemVisible = true;
|
|
42
|
+
this.lastItemVisible = true;
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
const firstTab = tabs[0];
|
|
46
|
+
const firstTabRect = firstTab.getBoundingClientRect();
|
|
47
|
+
this.firstItemVisible = firstTabRect.left >= containerRect.left - 1;
|
|
48
|
+
const lastTab = tabs[tabs.length - 1];
|
|
49
|
+
const lastTabRect = lastTab.getBoundingClientRect();
|
|
50
|
+
this.lastItemVisible = lastTabRect.right <= containerRect.right + 1;
|
|
51
|
+
};
|
|
52
|
+
this.getVisibleTabOnLeft = () => {
|
|
53
|
+
if (!this.containerRef)
|
|
54
|
+
return null;
|
|
55
|
+
const containerRect = this.containerRef.getBoundingClientRect();
|
|
56
|
+
const tabs = Array.from(this.tabElements);
|
|
57
|
+
// Find first tab that's partially or fully visible from the left
|
|
58
|
+
for (const tab of tabs) {
|
|
59
|
+
const tabRect = tab.getBoundingClientRect();
|
|
60
|
+
if (tabRect.right > containerRect.left + 1) {
|
|
61
|
+
return tab;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
return;
|
|
65
|
+
};
|
|
66
|
+
this.getVisibleTabOnRight = () => {
|
|
67
|
+
if (!this.containerRef)
|
|
68
|
+
return null;
|
|
69
|
+
const containerRect = this.containerRef.getBoundingClientRect();
|
|
70
|
+
const tabs = Array.from(this.tabElements);
|
|
71
|
+
for (let i = tabs.length - 1; i >= 0; i--) {
|
|
72
|
+
const tab = tabs[i];
|
|
73
|
+
const tabRect = tab.getBoundingClientRect();
|
|
74
|
+
if (tabRect.left < containerRect.right - 1) {
|
|
75
|
+
return tab;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
return null;
|
|
79
|
+
};
|
|
80
|
+
this.scrollLeft = () => {
|
|
81
|
+
if (!this.containerRef)
|
|
82
|
+
return;
|
|
83
|
+
const visibleTab = this.getVisibleTabOnLeft();
|
|
84
|
+
if (!visibleTab)
|
|
85
|
+
return;
|
|
86
|
+
const tabs = Array.from(this.tabElements);
|
|
87
|
+
const currentIndex = tabs.indexOf(visibleTab);
|
|
88
|
+
const prevTab = currentIndex > 0 ? tabs[currentIndex - 1] : null;
|
|
89
|
+
if (!prevTab)
|
|
90
|
+
return;
|
|
91
|
+
const containerLeft = this.containerRef.getBoundingClientRect().left;
|
|
92
|
+
const prevTabLeft = prevTab.getBoundingClientRect().left;
|
|
93
|
+
const offset = prevTabLeft - containerLeft;
|
|
94
|
+
this.containerRef.scrollBy({
|
|
95
|
+
left: offset,
|
|
96
|
+
behavior: 'smooth'
|
|
97
|
+
});
|
|
98
|
+
};
|
|
99
|
+
this.scrollRight = () => {
|
|
100
|
+
if (!this.containerRef)
|
|
101
|
+
return;
|
|
102
|
+
const visibleTab = this.getVisibleTabOnRight();
|
|
103
|
+
if (!visibleTab)
|
|
104
|
+
return;
|
|
105
|
+
const tabs = Array.from(this.tabElements);
|
|
106
|
+
const currentIndex = tabs.indexOf(visibleTab);
|
|
107
|
+
const nextTab = currentIndex < tabs.length - 1 ? tabs[currentIndex + 1] : null;
|
|
108
|
+
if (!nextTab)
|
|
109
|
+
return;
|
|
110
|
+
const containerRight = this.containerRef.getBoundingClientRect().right;
|
|
111
|
+
const nextTabRight = nextTab.getBoundingClientRect().right;
|
|
112
|
+
const offset = nextTabRight - containerRight;
|
|
113
|
+
this.containerRef.scrollBy({
|
|
114
|
+
left: offset,
|
|
115
|
+
behavior: 'smooth'
|
|
116
|
+
});
|
|
117
|
+
};
|
|
118
|
+
this.scrollToActiveTab = (activeTabElement) => {
|
|
119
|
+
if (!this.containerRef || !this.scrollable)
|
|
120
|
+
return;
|
|
121
|
+
const activeTab = activeTabElement || this.host.querySelector('r-tab[active]');
|
|
122
|
+
if (!activeTab)
|
|
123
|
+
return;
|
|
124
|
+
const containerRect = this.containerRef.getBoundingClientRect();
|
|
125
|
+
const activeTabRect = activeTab.getBoundingClientRect();
|
|
126
|
+
// Check if already fully visible
|
|
127
|
+
const isVisible = activeTabRect.left >= containerRect.left &&
|
|
128
|
+
activeTabRect.right <= containerRect.right;
|
|
129
|
+
if (isVisible)
|
|
130
|
+
return;
|
|
131
|
+
// Center the active tab
|
|
132
|
+
const offset = (activeTabRect.left - containerRect.left) -
|
|
133
|
+
(containerRect.width / 2) +
|
|
134
|
+
(activeTabRect.width / 2);
|
|
135
|
+
this.containerRef.scrollBy({
|
|
136
|
+
left: offset,
|
|
137
|
+
behavior: 'smooth'
|
|
138
|
+
});
|
|
139
|
+
};
|
|
140
|
+
this.renderScrollButton = (direction, disabled, onClick, tooltip) => {
|
|
141
|
+
const iconName = direction === 'left' ? 'angle-left' : 'angle-right';
|
|
142
|
+
const button = (index.h("r-icon-button", { onRClick: onClick, disabled: disabled, name: iconName, size: "s", rTabindex: -1, class: "r-tabs-list--scroll-button" }));
|
|
143
|
+
if (tooltip) {
|
|
144
|
+
return (index.h("r-tooltip", { text: tooltip, position: "top" }, button));
|
|
145
|
+
}
|
|
146
|
+
return button;
|
|
147
|
+
};
|
|
148
|
+
}
|
|
149
|
+
/** Listen for "click" event on `<r-tab>` */
|
|
150
|
+
tabChangeAction(event) {
|
|
151
|
+
this.scrollToActiveTab(event.target);
|
|
152
|
+
}
|
|
153
|
+
/** `<r-tab>` group of elements */
|
|
154
|
+
get tabElements() {
|
|
155
|
+
return this.host.querySelectorAll('r-tab');
|
|
156
|
+
}
|
|
157
|
+
componentDidLoad() {
|
|
158
|
+
this.updateScrollState();
|
|
159
|
+
this.initiatizeResizeObserver();
|
|
160
|
+
this.scrollToActiveTab();
|
|
161
|
+
}
|
|
162
|
+
disconnectedCallback() {
|
|
163
|
+
var _a;
|
|
164
|
+
(_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
10
165
|
}
|
|
11
166
|
render() {
|
|
12
|
-
return (index.h(index.Host, { key: '
|
|
167
|
+
return (index.h(index.Host, { key: '8191b15343491c66259b583930ee73916c6bbd9e', scrollable: `${this.scrollable}`, role: "tablist" }, index.h("div", { key: 'e5c2a308889986b80549aba5b9a7bec8e6961891', class: "r-tabs-list" }, this.scrollable &&
|
|
168
|
+
index.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 && index.h("div", { key: '62e5c2ca7e76323ff367940cd9ab1cb6e5b6db74', class: "r-tabs-list--scroll-indicator" })), index.h("div", { key: '5f0b264eb4abaf51d4e2f3a85a92d89ff9e378f5', class: "r-tabs-list--tabs-container", ref: (el) => this.containerRef = el, onScroll: this.updateScrollState }, index.h("slot", { key: '38f6060007491fa9b50cf7cf7d36372c32e63d97' })), this.scrollable &&
|
|
169
|
+
index.h("div", { key: 'd51473735f550b81b5ba630126fe3bcc41848648', "aria-hidden": "true", class: "r-tabs-list--scroll-button-container" }, !this.lastItemVisible && index.h("div", { key: '89d712984dd7797cbca0df86989cf8eedcd95a61', class: "r-tabs-list--scroll-indicator" }), this.renderScrollButton('right', this.lastItemVisible, this.scrollRight, this.scrollRightTooltip)))));
|
|
13
170
|
}
|
|
171
|
+
get host() { return index.getElement(this); }
|
|
14
172
|
};
|
|
15
173
|
RTabsList.style = tabsListCss;
|
|
16
174
|
|
|
@@ -187,23 +187,51 @@ const RTabs = class {
|
|
|
187
187
|
history.pushState({ tabId, tabsGroup }, '', url.toString());
|
|
188
188
|
}
|
|
189
189
|
_changeFocusTab(tab, keycode) {
|
|
190
|
-
var _a, _b, _c, _d;
|
|
191
190
|
const tabs = Array.from(this.tabElements).filter(element => !element.disabled);
|
|
192
191
|
const index = tabs.indexOf(tab);
|
|
192
|
+
let nextTab;
|
|
193
193
|
switch (keycode) {
|
|
194
194
|
case 'ArrowLeft':
|
|
195
|
-
index === 0 ?
|
|
195
|
+
nextTab = index === 0 ? tabs[tabs.length - 1] : tabs[index - 1];
|
|
196
196
|
break;
|
|
197
197
|
case 'ArrowRight':
|
|
198
|
-
index === tabs.length - 1 ?
|
|
198
|
+
nextTab = index === tabs.length - 1 ? tabs[0] : tabs[index + 1];
|
|
199
199
|
break;
|
|
200
200
|
case 'Home':
|
|
201
|
-
|
|
201
|
+
nextTab = tabs[0];
|
|
202
202
|
break;
|
|
203
203
|
case 'End':
|
|
204
|
-
|
|
204
|
+
nextTab = tabs[tabs.length - 1];
|
|
205
205
|
break;
|
|
206
206
|
}
|
|
207
|
+
if (nextTab) {
|
|
208
|
+
nextTab.focus();
|
|
209
|
+
this.scrollTabIntoView(nextTab);
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
scrollTabIntoView(tab) {
|
|
213
|
+
var _a;
|
|
214
|
+
const tabsList = this.host.querySelector('r-tabs-list');
|
|
215
|
+
if (!tabsList)
|
|
216
|
+
return;
|
|
217
|
+
const container = (_a = tabsList.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.r-tabs-list--tabs-container');
|
|
218
|
+
if (!container)
|
|
219
|
+
return;
|
|
220
|
+
const containerRect = container.getBoundingClientRect();
|
|
221
|
+
const tabRect = tab.getBoundingClientRect();
|
|
222
|
+
// Check if tab is fully visible
|
|
223
|
+
const isFullyVisible = tabRect.left >= containerRect.left - 1 &&
|
|
224
|
+
tabRect.right <= containerRect.right + 1;
|
|
225
|
+
if (isFullyVisible)
|
|
226
|
+
return;
|
|
227
|
+
// Calculate scroll offset to center the tab
|
|
228
|
+
const centerOffset = (tabRect.left - containerRect.left) -
|
|
229
|
+
(containerRect.width / 2) +
|
|
230
|
+
(tabRect.width / 2);
|
|
231
|
+
container.scrollBy({
|
|
232
|
+
left: centerOffset,
|
|
233
|
+
behavior: 'smooth'
|
|
234
|
+
});
|
|
207
235
|
}
|
|
208
236
|
/** Listen for "click" event on `<r-tab>` */
|
|
209
237
|
tabChangeAction(event) {
|
|
@@ -240,7 +268,7 @@ const RTabs = class {
|
|
|
240
268
|
this._changeFocusTab(e.target, e.detail.keycode);
|
|
241
269
|
}
|
|
242
270
|
render() {
|
|
243
|
-
return (index.h(index.Host, { key: '
|
|
271
|
+
return (index.h(index.Host, { key: 'b058fd461951dad54e7eb73f7dc5df838c864ebd', class: "r-tabs" }, index.h("slot", { key: '8e93fded06f0f01dc326e8368aac200d36613753' })));
|
|
244
272
|
}
|
|
245
273
|
get host() { return index.getElement(this); }
|
|
246
274
|
};
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var index = require('./index-DJ4H_bFj.js');
|
|
4
4
|
var formData = require('./formData-B2DZyLxP.js');
|
|
5
5
|
|
|
6
|
-
const textareaCss = ":host{opacity:1;display:block;outline:none;--r-label--margin-bottom:0}:host(:focus-visible){outline:none}:host([resize=none]){--r-textarea--input--resize:none}:host([resize=both]){--r-textarea--input--resize:both}:host([resize=horizontal]){--r-textarea--input--resize:horizontal}:host([resize=vertical]){--r-textarea--input--resize:vertical}:host([resize=initial]){--r-textarea--input--resize:initial}:host([resize=inherit]){--r-textarea--input--resize:inherit}:host([invalid]:not([invalid=false])){--r-textarea--container--background-color:var(--r-status-error-soft, #fef6f6);--r-textarea--container--border-color:var(--r-status-error-regular, #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,
|
|
6
|
+
const textareaCss = ":host{opacity:1;display:block;outline:none;--r-label--margin-bottom:0}:host(:focus-visible){outline:none}:host([resize=none]){--r-textarea--input--resize:none}:host([resize=both]){--r-textarea--input--resize:both}:host([resize=horizontal]){--r-textarea--input--resize:horizontal}:host([resize=vertical]){--r-textarea--input--resize:vertical}:host([resize=initial]){--r-textarea--input--resize:initial}:host([resize=inherit]){--r-textarea--input--resize:inherit}:host([invalid]:not([invalid=false])){--r-textarea--container--background-color:var(--r-status-error-soft, #fef6f6);--r-textarea--container--border-color:var(--r-status-error-regular, #b00c15)}.r-textarea--label-container{display:var(--r-textarea--label-container--display, flex);gap:var(--r-textarea--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-textarea--label-container--align-items, center);justify-content:var(--r-textarea--label-container--align-items, space-between)}.r-textarea--label-container ::slotted([slot=popover]){display:var(--r-textarea--popover--display, inline-flex);height:var(--r-textarea--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-textarea--popover--align-items, center);justify-content:var(--r-textarea--popover--justify-content, center);margin-right:var(--r-textarea--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-textarea--popover-trigger--min-width, var(--r-spacing-150, 1.5))}.r-textarea--input::placeholder{color:var(--r-textarea--input--placeholder--color, var(--r-text-soft, #686868))}.r-textarea--input{vertical-align:top;width:var(--r-textarea--input--width, 100%);max-width:var(--r-textarea--input--max-width, 100%);min-height:var(--r-textarea--input--min-height, 8.875em);font-family:var(--r-textarea--input--font-family, var(--r-font-family-text, system-ui));font-weight:var(--r-textarea--input--font-weight, var(--r-font-weight-regular, 400));font-size:var(--r-textarea--input--font-size, var(--r-font-size-400, 1rem));line-height:var(--r-textarea--input--line-height, var(--r-line-height-m, 1.5));color:var(--r-textarea--input--color, var(--r-text-regular, #282828));background-color:var(--r-textarea--input--background-color, transparent);opacity:var(--r-textarea--input--opacity, 1);border-width:var(--r-textarea--input--border-width, 0px);border-style:var(--r-textarea--input--border-style, solid);border-color:var(--r-textarea--input--border-color, var(--r-border-soft, #686868));border-radius:var(--r-textarea--input--border-radius, 0);box-sizing:var(--r-textarea--input--box-sizing, border-box);box-shadow:var(--r-textarea--input--box-shadow, none);padding:var(--r-textarea--input--padding, var(--r-textarea--input--padding-top, 0.688em) var(--r-textarea--input--padding-right, 0.625em) var(--r-textarea--input--padding-bottom, 0.688em) var(--r-textarea--input--padding-left, 0.625em));margin-top:var(--r-textarea--input--margin-top, 0);resize:var(--r-textarea--input--resize, both);z-index:var(--r-textarea--input--z-index, 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}";
|
|
7
7
|
|
|
8
8
|
const RTextarea = class {
|
|
9
9
|
constructor(hostRef) {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-DJ4H_bFj.js');
|
|
4
4
|
|
|
5
|
-
const toastGroupCss = "@media (max-width: 48rem){.sc-r-toast-group-h{--width:auto;--right:24px;--bottom:auto;--left:24px;--padding-right:0}}[data-visually-hidden=true].sc-r-toast-group-h{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sc-r-toast-group-h{display:var(--display, block);position:var(--position, fixed);top:var(--top, 32px);right:var(--right, 0);bottom:var(--bottom, auto);left:var(--left, auto);overflow:var(--overflow, hidden);overflow-y:var(--overflow-y, auto);width:var(--width, 352px);max-height:var(--max-height, calc(100vh - 64px));padding-right:var(--padding-right, 32px);padding-bottom:var(--padding-bottom, 32px);z-index:var(--z-index, 1)}.r-toast-group.sc-r-toast-group{position:relative;display:var(--r-toast-group--display, flex);flex-direction:var(--r-toast-group--flex-direction, column);justify-content:var(--r-toast-group--justify-content, flex-start)
|
|
5
|
+
const toastGroupCss = "@media (max-width: 48rem){.sc-r-toast-group-h{--width:auto;--right:24px;--bottom:auto;--left:24px;--padding-right:0}}[data-visually-hidden=true].sc-r-toast-group-h{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sc-r-toast-group-h{display:var(--display, block);position:var(--position, fixed);top:var(--top, 32px);right:var(--right, 0);bottom:var(--bottom, auto);left:var(--left, auto);overflow:var(--overflow, hidden);overflow-y:var(--overflow-y, auto);width:var(--width, 352px);max-height:var(--max-height, calc(100vh - 64px));padding-right:var(--padding-right, 32px);padding-bottom:var(--padding-bottom, 32px);z-index:var(--z-index, 1)}.r-toast-group.sc-r-toast-group{position:relative;display:var(--r-toast-group--display, flex);flex-direction:var(--r-toast-group--flex-direction, column);justify-content:var(--r-toast-group--justify-content, flex-start);--r-toast-group--spacing:var(--r-spacing-100, 1rem)}";
|
|
6
6
|
|
|
7
7
|
const ToastGroup = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -28,7 +28,7 @@ const ToastGroup = class {
|
|
|
28
28
|
this.observeSlotContentChange();
|
|
29
29
|
}
|
|
30
30
|
render() {
|
|
31
|
-
return (index.h(index.Host, { key: '
|
|
31
|
+
return (index.h(index.Host, { key: 'fa291737910745721236d14e38c54e7bf351b85e' }, index.h("div", { key: 'b755a032ee5b1152846946df270fd69ef4370a1a', class: "r-toast-group" }, index.h("slot", { key: 'd73b1e701b6b27b2e46f7f130bee1a16af2de53e' }))));
|
|
32
32
|
}
|
|
33
33
|
get host() { return index.getElement(this); }
|
|
34
34
|
};
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-DJ4H_bFj.js');
|
|
4
4
|
|
|
5
|
-
const toastCss = ":host([status=info]){--r-toast--border-color:var(--r-status-info-regular, #3e5c73);--r-toast--background-color:var(--r-status-info-soft, #f8fafb);--r-toast--leading-icon--color:var(--r-status-info-regular, #3e5c73)}:host([status=warning]){--r-toast--border-color:var(--r-status-warning-regular, #ff7429);--r-toast--background-color:var(--r-status-warning-soft, #fef9f5);--r-toast--leading-icon--color:var(--r-status-warning-regular, #89411A)}:host([status=error]){--r-toast--border-color:var(--r-status-error-regular, #b00c15);--r-toast--background-color:var(--r-status-error-soft, #fef6f6);--r-toast--leading-icon--color:var(--r-status-error-regular, #b00c15)}:host([status=success]){--r-toast--border-color:var(--r-status-success-regular, #298535);--r-toast--background-color:var(--r-status-success-soft, #f7fdf8);--r-toast--leading-icon--color:var(--r-status-success-regular, #298535)}:host([is-content=false]){--r-toast--content--display:none}:host([headline]){--r-toast--content--margin-top:var(--r-spacing-050, 0.5rem)}:host([data-visually-hidden=true]){--r-toast--host--
|
|
5
|
+
const toastCss = ":host([status=info]){--r-toast--border-color:var(--r-status-info-regular, #3e5c73);--r-toast--background-color:var(--r-status-info-soft, #f8fafb);--r-toast--leading-icon--color:var(--r-status-info-regular, #3e5c73)}:host([status=warning]){--r-toast--border-color:var(--r-status-warning-regular, #ff7429);--r-toast--background-color:var(--r-status-warning-soft, #fef9f5);--r-toast--leading-icon--color:var(--r-status-warning-regular, #89411A)}:host([status=error]){--r-toast--border-color:var(--r-status-error-regular, #b00c15);--r-toast--background-color:var(--r-status-error-soft, #fef6f6);--r-toast--leading-icon--color:var(--r-status-error-regular, #b00c15)}:host([status=success]){--r-toast--border-color:var(--r-status-success-regular, #298535);--r-toast--background-color:var(--r-status-success-soft, #f7fdf8);--r-toast--leading-icon--color:var(--r-status-success-regular, #298535)}:host([is-content=false]){--r-toast--content--display:none}:host([headline]){--r-toast--content--margin-top:var(--r-spacing-050, 0.5rem)}:host([data-visually-hidden=true]){--r-toast--host--animation-name:fade-out}:host(:not(:last-child)){margin-bottom:var(--r-toast-group--spacing, 0)}:host{animation-duration:var(--r-toast--host--animation-duration, 0.3s);animation-fill-mode:var(--r-toast--host--animation-fill-mode, forwards);animation-name:var(--r-toast--host--animation-name, fade-in);animation-timing-function:var(--r-toast--host--animation-timing-function, ease-in-out);box-sizing:var(--r-toast--host--box-sizing, border-box);display:var(--r-toast--host--display, block);height:var(--r-toast--host--height, var(--r-toast--host--height-expanded, auto));opacity:var(--r-toast--host--opacity, 1);overflow:var(--r-toast--host--overflow, hidden);position:var(--r-toast--host--position, relative);transition:var(--r-toast--host--transition, none);transition-delay:var(--r-toast--host--transition-delay, 0s)}:host ::slotted(p){margin:0}:host ::slotted(p+p),:host ::slotted(p+ul),:host ::slotted(p+ol){margin-top:1rem}:host .r-toast--trailing-button{--r-button--width:2.75rem;--r-button--height:2.75rem;--r-button--color:var(--r-text-regular, #282828);--r-button--border-color:transparent;--r-button--background-color:transparent;position:relative;top:-8px;right:-8px}:host .r-toast--trailing-button:hover{--r-button--color:var(--r-text-strong, #000000);--r-button--background-color:var(--r-background-interactive-hovered, #000000)}:host .r-toast--trailing-button:active{--r-button--transform:scale(0.94)}@media (prefers-reduced-motion){:host{transition:none;animation-name:none}}@keyframes fade-in{from{opacity:0;max-height:0;margin-bottom:0}to{opacity:1;max-height:fit-content;margin-bottom:var(--r-toast-group--spacing, 0)}}@keyframes fade-out{from{opacity:1;max-height:fit-content;margin-bottom:var(--r-toast-group--spacing, 0)}to{opacity:0;max-height:0;margin-bottom:0}}.r-toast{font-family:var(--r-toast--font-family, var(--r-font-family-text, system-ui));font-size:var(--r-toast--font-size, var(--r-font-size-400, 1rem));display:var(--r-toast--display, flex);flex-direction:var(--r-toast--flex-direction, row);align-items:var(--r-toast--align-items, stretch);gap:var(--r-toast--gap, var(--r-spacing-050, 0.5rem));padding:var(--r-toast--padding, 12px);border-width:var(--r-toast--border-width, 1px);border-style:var(--r-toast--border-style, solid);border-color:var(--r-toast--border-color, var(--r-status-info-regular, #3e5c73));background-color:var(--r-toast--background-color, var(--r-status-info-soft, #f8fafb));box-sizing:var(--r-toast--box-sizing, border-box);transition:var(--r-toast--transition, none)}.r-toast--main{flex:var(--r-toast--content--flex, 1)}.r-toast--leading-icon{color:var(--r-toast--leading-icon--color, var(--r-status-info-regular, #3e5c73));margin-top:var(--r-toast--leading-icon--margin-top, 0);margin-right:var(--r-toast--leading-icon--margin-right, var(--r-spacing-025, 0.25rem))}.r-toast--headline{color:var(--r-toast--headline--color, var(--r-text-regular, #282828));font-size:var(--r-toast--headline--font-size, var(--r-font-size-400, 1rem));font-weight:var(--r-toast--headline--font-weight, var(--r-font-weight-semibold, 600));line-height:var(--r-toast--headline--line-height, var(--r-line-height-m, 1.5));margin:var(--r-toast--headline--margin, 0)}.r-toast--content{display:var(--r-toast--content--display, block);color:var(--r-toast--content--color, var(--r-text-regular, #282828));line-height:var(--r-toast--content--line-height, var(--r-line-height-m, 1.5));font-size:var(--r-toast--content--font-size, var(--r-font-size-300, 0.875rem));font-weight:var(--r-toast--content--font-weight, var(--r-font-weight-regular, 400));margin-top:var(--r-toast--content--margin-top, 0)}.r-toast--action{display:var(--r-toast--action--display, flex);margin-top:var(--r-toast--action--margin-top, var(--r-spacing-050, 0.5rem));color:var(--r-toast--action--color, var(--r-text-regular, #282828));font-size:var(--r-toast--action--font-size, var(--r-font-size-300, 0.875rem));font-weight:var(--r-toast--action--font-weight, var(--r-font-weight-light, 300))}.r-toast--action-link,.r-toast--action ::slotted(r-button){--r-button--background-color:transparent;--r-button--border-width:0;--r-button--color:var(--r-text-regular);--r-button--padding:10px 2px 18px 2px;--r-button--slot--text-decoration:underline;--r-button--slot--text-underline-offset:9px}.r-toast--action-link:hover,.r-toast--action ::slotted(r-button:hover:not([disabled]):not([disabled=true])){--r-button--background-color:var(--r-background-interactive-hovered)}.r-toast--action-link:active,.r-toast--action ::slotted(r-button:active:not([disabled]):not([disabled=true])){--r-button--background-color:var(--r-background-interactive-pressed)}.r-toast--action ::slotted(*){font-size:inherit;color:inherit}.r-toast--action ::slotted(a){color:var(--r-toast--action--color, var(--r-text-regular, #282828))}";
|
|
6
6
|
|
|
7
7
|
const Toast = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -11,6 +11,7 @@ const Toast = class {
|
|
|
11
11
|
this.toastDismiss = index.createEvent(this, "dismiss");
|
|
12
12
|
this.toastReveal = index.createEvent(this, "reveal");
|
|
13
13
|
this.toastHide = index.createEvent(this, "hide");
|
|
14
|
+
this.toastDismissed = index.createEvent(this, "dismissed");
|
|
14
15
|
/**
|
|
15
16
|
* Controls if toast is initially shown.
|
|
16
17
|
* */
|
|
@@ -51,6 +52,7 @@ const Toast = class {
|
|
|
51
52
|
* @default 300
|
|
52
53
|
* */
|
|
53
54
|
this.delayBeforeRemoval = 300;
|
|
55
|
+
this.animationCompleted = false;
|
|
54
56
|
/** Unique id for each accordion item/row */
|
|
55
57
|
this.uniqueId = `r-toast-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
|
|
56
58
|
this.hasElContent = (selector) => {
|
|
@@ -69,6 +71,12 @@ const Toast = class {
|
|
|
69
71
|
clearTimeout(this.delayTimer);
|
|
70
72
|
}, time);
|
|
71
73
|
};
|
|
74
|
+
this.handleAnimationEnd = (event) => {
|
|
75
|
+
if (event.animationName === 'fade-out') {
|
|
76
|
+
this.animationCompleted = true;
|
|
77
|
+
this.toastDismissed.emit();
|
|
78
|
+
}
|
|
79
|
+
};
|
|
72
80
|
this.handleTrailingButtonClick = () => {
|
|
73
81
|
this.rClickToastTrailingIcon.emit();
|
|
74
82
|
this.dismiss();
|
|
@@ -86,9 +94,15 @@ const Toast = class {
|
|
|
86
94
|
this.host.style.setProperty('--r-toast--host--height-expanded', `${this.host.offsetHeight}px`);
|
|
87
95
|
this.isOpen = false;
|
|
88
96
|
this.toastDismiss.emit();
|
|
97
|
+
this.animationCompleted = false;
|
|
89
98
|
if (this.removalTimer)
|
|
90
99
|
clearTimeout(this.removalTimer);
|
|
91
|
-
this.removalTimer = setTimeout(() =>
|
|
100
|
+
this.removalTimer = setTimeout(() => {
|
|
101
|
+
if (!this.animationCompleted) {
|
|
102
|
+
this.toastDismissed.emit();
|
|
103
|
+
}
|
|
104
|
+
this.host.remove();
|
|
105
|
+
}, this.delayBeforeRemoval);
|
|
92
106
|
}
|
|
93
107
|
/**
|
|
94
108
|
* Reveals the toast notification by setting it to a visible state.
|
|
@@ -180,6 +194,12 @@ const Toast = class {
|
|
|
180
194
|
componentWillLoad() {
|
|
181
195
|
this.open ? this.reveal() : this.hide();
|
|
182
196
|
}
|
|
197
|
+
componentDidLoad() {
|
|
198
|
+
this.host.addEventListener('animationend', this.handleAnimationEnd);
|
|
199
|
+
}
|
|
200
|
+
disconnectedCallback() {
|
|
201
|
+
this.host.removeEventListener('animationend', this.handleAnimationEnd);
|
|
202
|
+
}
|
|
183
203
|
render() {
|
|
184
204
|
const { headline, href, action, target, trailingIcon } = this;
|
|
185
205
|
const hostAttrs = this.announced ? {
|
|
@@ -198,14 +218,14 @@ const Toast = class {
|
|
|
198
218
|
name: trailingIcon,
|
|
199
219
|
size: 'm'
|
|
200
220
|
};
|
|
201
|
-
return (index.h(index.Host, Object.assign({ key: '
|
|
202
|
-
index.h("div", { key: '
|
|
203
|
-
index.h("h2", { key: '
|
|
204
|
-
index.h("div", { key: '
|
|
205
|
-
index.h("div", { key: '
|
|
206
|
-
index.h("r-button", Object.assign({ key: '
|
|
207
|
-
index.h("div", { key: '
|
|
208
|
-
index.h("r-icon-button", Object.assign({ key: '
|
|
221
|
+
return (index.h(index.Host, Object.assign({ key: '72b7c716dc4cdb477d038c53d74909ccc25b2969' }, hostAttrs, { id: this.uniqueId, "data-visually-hidden": `${this.isOpen ? 'false' : 'true'}` }), index.h("div", { key: '1432abcf651e29aca897b15fe84f7f587ad276dc', class: "r-toast" }, this.hasLeading &&
|
|
222
|
+
index.h("div", { key: 'd7b672519074880fa6f6f3c4c2177dc11b73a872', class: "r-toast--leading" }, this.hasLeadingSlot && index.h("slot", { key: 'bbe0f9862ff7cb439116b2eb3041ce98ed1ddcb8', name: "leading" }), this.leadingIconVisible && index.h("r-icon", Object.assign({ key: 'ecf6d11d1a699b5d37d5a18eb9df678629cff3af', class: "r-toast--leading-icon" }, leadingIconAttrs))), index.h("div", { key: '2e90162bc7cb3144356efc4072db6d8743bb08d1', class: "r-toast--main" }, this.hasHeadline &&
|
|
223
|
+
index.h("h2", { key: 'd2872eb73463a0b074524d279f94c4482abe1e82', class: "r-toast--headline" }, index.h("slot", { key: '20086f692f4de101e874bef083dfaa299a09a849', name: "headline" }, headline)), this.hasContent &&
|
|
224
|
+
index.h("div", { key: '91cf6f661abe2442e362826b735c5448aeac8953', class: "r-toast--content r-typography" }, index.h("slot", { key: 'e156039d4cdbc81511cb8135570523b86b360007', onSlotchange: this.handleSlotChange })), this.hasAction &&
|
|
225
|
+
index.h("div", { key: '3e1e1d09dbbcd144c3ff426b0611ea9e2b8bf664', class: "r-toast--action" }, index.h("slot", { key: 'c746ab13ece27873eef3fbef5e8be29992f8a416', name: "action" }, this.hasActionLink &&
|
|
226
|
+
index.h("r-button", Object.assign({ key: '36a864ecd40815f2b0a7241d635d5a3966e75997', class: "r-toast--action-link", variant: "text-inline", size: "small" }, actionAttrs), action)))), this.hasTrailing &&
|
|
227
|
+
index.h("div", { key: 'becd53f1c89e40e314f79d45886151a8f56c6e84', class: "r-toast--trailing" }, this.hasTrailingSlot && index.h("slot", { key: '818cf3bb17290a498d7c626e64662e42a6d5242d', name: "trailing" }), this.isDismissManual &&
|
|
228
|
+
index.h("r-icon-button", Object.assign({ key: '28c2963f0a1f673bb72991ba6c888b99c48b69bb' }, trailingIconAttrs, { class: "r-toast--trailing-button", onClick: this.handleTrailingButtonClick, label: this.dismissLabel }), index.h("slot", { key: '437e527e868b58e47f6b972220ddf2c657d3a7f2', name: "dismiss" }))))));
|
|
209
229
|
}
|
|
210
230
|
get host() { return index.getElement(this); }
|
|
211
231
|
static get watchers() { return {
|