@roadtrip/components 3.51.2 → 3.52.0

package/hydrate/index.mjs

@@ -3520,7 +3520,7 @@ class Avatar {
     }; }
 }
 
-const badgeCss = ":host{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-width:1rem;min-height:1rem;padding:0 0.3125rem;font-family:var(--road-font, sans-serif);font-size:var(--road-font-size-10);font-weight:700;white-space:nowrap;border-radius:1rem}:host(.badge-bubble){min-width:0.25rem;min-height:0.25rem;padding:0}:host(.badge-primary){color:var(--road-on-primary);background-color:var(--road-primary)}:host(.badge-secondary){color:var(--road-on-secondary);background-color:var(--road-secondary)}:host(.badge-accent){color:var(--road-on-warning-surface-inverse);background-color:var(--road-warning-surface-inverse)}:host(.badge-info){color:var(--road-on-info-surface-inverse);background-color:var(--road-info-surface-inverse)}:host(.badge-success){color:var(--road-on-success-surface-inverse);background-color:var(--road-success-surface-inverse)}:host(.badge-warning){color:var(--road-on-warning-surface-inverse);background-color:var(--road-warning-surface-inverse)}:host(.badge-danger){color:var(--road-on-danger-surface-inverse);background-color:var(--road-danger-surface-inverse)}:host(.badge-inverse){color:var(--road-primary);background-color:var(--road-surface)}:host(.badge-sm){font-size:8px}:host(.badge-md){font-size:8px}:host(.badge-lg){font-size:var(--road-font-size-10)}";
+const badgeCss = ":host{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-width:1rem;min-height:1rem;padding:0 0.3125rem;font-family:var(--road-font, sans-serif);font-size:var(--road-font-size-10);font-weight:700;white-space:nowrap;border-radius:1rem}:host(.badge-bubble){min-width:0.25rem;min-height:0.25rem;padding:0}:host(.badge-primary){color:var(--road-on-primary);background-color:var(--road-primary)}:host(.badge-secondary){color:var(--road-on-secondary);background-color:var(--road-secondary)}:host(.badge-accent){color:var(--road-on-warning-surface-inverse);background-color:var(--road-warning-surface-inverse)}:host(.badge-info){color:var(--road-on-info-surface-inverse);background-color:var(--road-info-surface-inverse)}:host(.badge-success){color:var(--road-on-success-surface-inverse);background-color:var(--road-success-surface-inverse)}:host(.badge-warning){color:var(--road-on-warning-surface-inverse);background-color:var(--road-warning-surface-inverse)}:host(.badge-danger){color:var(--road-on-danger-surface-inverse);background-color:var(--road-danger-surface-inverse)}:host(.badge-inverse){color:var(--road-primary);background-color:var(--road-surface)}:host(.badge-neutral){color:var(--road-on-surface-weak);background-color:var(--road-surface-inverse)}:host(.badge-sm){font-size:8px}:host(.badge-md){font-size:8px}:host(.badge-lg){font-size:var(--road-font-size-10)}";
 var RoadBadgeStyle0 = badgeCss;
 
 /**
@@ -3917,7 +3917,7 @@ class ButtonBar {
         this.selectedTabChanged();
     }
     render() {
-        return (hAsync(Host, { key: '9d6937fa6b2840970dd93648f1e79724562d91bf', role: "tablist" }, hAsync("slot", { key: '63de3253cb8eb6e9d4fa2374a1fab04ff64b174a' })));
+        return (hAsync(Host, { key: '76466abd7a912ac1a0df83853216c3f20ac3086a', role: "tablist" }, hAsync("slot", { key: '04290019d2aea356a7fd24739b68c371455e3b70' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -13067,6 +13067,10 @@ class Drawer {
          * Override focus trap
          */
         this.enabledFocusTrap = true;
+        /**
+         * whitelisted selectors
+         */
+        this.whitelistSelectors = [];
         /**
          * Footer Content state
          */
@@ -13123,6 +13127,35 @@ class Drawer {
     async back() {
         this.onBack.emit();
     }
+    /**
+     * Update the whitelist selectors at runtime and recreate the focus trap.
+     * Use this instead of updating the prop directly to ensure the change is detected,
+     * since Stencil compares arrays by reference.
+     */
+    async updateWhitelistSelectors(selectors) {
+        var _a;
+        this.whitelistSelectors = selectors;
+        const containers = [];
+        this.whitelistSelectors.forEach(selector => {
+            const el = document.querySelector(selector);
+            if (el)
+                containers.push(el);
+        });
+        const drawerContent = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".road-drawer-wrapper");
+        if (drawerContent)
+            containers.push(drawerContent);
+        this.resetFocusTrap(containers);
+    }
+    resetFocusTrap(elements) {
+        if (this.focusTrap) {
+            const isActive = this.focusTrap.active;
+            this.focusTrap.deactivate();
+            this.focusTrap = undefined;
+            if (isActive) {
+                this.getOrCreateFocusTrap(elements).activate();
+            }
+        }
+    }
     /**
      * Enable/disable focus trap so it can be overrided by the client in case of something appearing over the drawer like a modal for example
      */
@@ -13172,16 +13205,27 @@ class Drawer {
             this.handleOpen(true);
         }
     }
-    getOrCreateFocusTrap() {
+    getOrCreateFocusTrap(elements) {
         var _a;
         if (!this.focusTrap) {
             const drawerContent = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".road-drawer-wrapper");
-            this.focusTrap = createFocusTrap(drawerContent, {
+            const elmt = (elements === null || elements === void 0 ? void 0 : elements.length) ? elements : [drawerContent];
+            this.focusTrap = createFocusTrap(elmt, {
+                initialFocus: () => {
+                    if (!elmt.length)
+                        return undefined;
+                    const allTabbables = tabbable(elmt[0], { getShadowRoot: true });
+                    return allTabbables[0];
+                },
                 onActivate: () => drawerContent === null || drawerContent === void 0 ? void 0 : drawerContent.classList.add("focus-trapped"),
                 onDeactivate: () => drawerContent === null || drawerContent === void 0 ? void 0 : drawerContent.classList.remove("focus-trapped"),
+                allowOutsideClick: (event) => {
+                    return this.whitelistSelectors.some(s => event.target.closest(s));
+                },
                 tabbableOptions: {
                     getShadowRoot: true,
                 },
+                fallbackFocus: this.el,
                 preventScroll: true,
             });
         }
@@ -13201,7 +13245,7 @@ class Drawer {
         const backIconElement = this.hasBackIcon ? (hAsync("button", { type: "button", class: "drawer-action", "aria-label": ariaLabelBack, onClick: this.onClickBack }, hAsync("road-icon", { icon: navigationChevron, rotate: "180" }), this.backText)) : null;
         const closeIconElement = this.hasCloseIcon ? (hAsync("button", { type: "button", class: "drawer-close", onClick: this.onClick, "aria-label": ariaLabelClose }, hAsync("road-icon", { icon: navigationClose, "aria-hidden": "true" }))) : null;
         const drawerWidthValue = this.position === "bottom" ? "100%" : `${this.drawerWidth}px`;
-        return (hAsync(Host, { key: 'f3f7bb36db4476325b4e7a879a739529bc79d964', class: `${drawerIsOpenClass}  drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, hAsync("div", { key: '407cd4cc74d0f94f43cb306e8e7c819b771493dd', class: "road-drawer-wrapper" }, hAsync("div", { key: '2f09ca1bfff5bf81ed94a277910dbb6017d0b984', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), hAsync("div", { key: 'ae71f5011512dd1dd2a3cdd69b7ca6c8838b787f', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document" }, hAsync("div", { key: '94cf3ed5d1a5e62cf15ec3a20a6bb786a240d61a', class: "drawer-content" }, hAsync("header", { key: '58c9716838a98d57a0f147aed96c7b06d98ac9cf', class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle ? (hAsync("h2", { class: "drawer-title" }, this.drawerTitle)) : (hAsync("div", { class: "drawer-title" }, hAsync("slot", { name: "title" }))), closeIconElement), hAsync("div", { key: '5d97f008d5514de90fac3c7d6c517882216aee00', class: `drawer-body ${removePaddingClass}` }, hAsync("slot", { key: '53a401cd8b6295017d4903e7626d2ab643ad8b26' })), hAsync("footer", { key: 'e1c65d15af977b46484d35c6b93def36c3523fdb', class: `drawer-footer ${removePaddingClass}`, hidden: !this.hasFooterContent }, hAsync("slot", { key: 'c7b7694a70fb98a9057d5292acbf6bdda42267c5', name: "footer", onSlotchange: this.onFooterSlotChange })))))));
+        return (hAsync(Host, { key: 'c7eb453776139d160c5304536e79ab0af0232290', class: `${drawerIsOpenClass}  drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, hAsync("div", { key: 'af1efa519efd2b12f49475d5a84c90767beeacf0', class: "road-drawer-wrapper" }, hAsync("div", { key: 'c43ce7162e3616b51b9e668a459d8c729b1f414f', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), hAsync("div", { key: '5c69c051e7c1eb827d2df487f58f8c5237388a7f', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document" }, hAsync("div", { key: 'fa483418e0660b8c2fdb79838581650e5f0b1174', class: "drawer-content" }, hAsync("header", { key: 'cdc22b61772f7f425f4d5f41c2ceb3d6b2d8478b', class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle ? (hAsync("h2", { class: "drawer-title" }, this.drawerTitle)) : (hAsync("div", { class: "drawer-title" }, hAsync("slot", { name: "title" }))), closeIconElement), hAsync("div", { key: '6d44de12a434ea729754187aca476c78e6e0e7a7', class: `drawer-body ${removePaddingClass}` }, hAsync("slot", { key: 'dfe2557f8ddffb9a8b6b9ed41661c726c650bd6b' })), hAsync("footer", { key: '7cd86ddeb089a5b06649a993a6315a317b543863', class: `drawer-footer ${removePaddingClass}`, hidden: !this.hasFooterContent }, hAsync("slot", { key: '58fa205ff641909acb5d1d12d660024e50ab4058', name: "footer", onSlotchange: this.onFooterSlotChange })))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -13226,11 +13270,13 @@ class Drawer {
             "ariaLabelClose": [1, "aria-label-close"],
             "hasCloseIcon": [4, "has-close-icon"],
             "enabledFocusTrap": [4, "enabled-focus-trap"],
+            "whitelistSelectors": [1040],
             "focusTrap": [32],
             "hasFooterContent": [32],
             "open": [64],
             "close": [64],
-            "back": [64]
+            "back": [64],
+            "updateWhitelistSelectors": [64]
         },
         "$listeners$": [[4, "keyup", "onEscape"]],
         "$lazyBundleId$": "-",
@@ -34564,7 +34610,7 @@ class RoadTimeRangePicker {
         return { start: this.start, end: this.end };
     }
     render() {
-        return (hAsync(Host, { key: 'f7a337665eb1016b95f56541fdf7b6cdcdc780c8', class: `time-range-picker input-${this.sizes}` }, this.label && (hAsync("p", { key: '772b61e54d0ca9502478ad77c187a5cc335428d4', class: "label m-0" }, this.label, this.required && hAsync("span", { key: 'efabe848fff7e3ce895912147f88f6761a771ab0', class: "required-indicator" }, " *"))), hAsync("div", { key: '40b1b5929465e8535e228208c7296fa4deb3854f', class: "time-range-picker-content d-flex align-items-center my-4" }, hAsync("slot", { key: 'b49add1d8f8b7ae6555313e2d5bc0f53a885d3aa', name: "start" }), hAsync("span", { key: '2cdd55b31ddbe0d5746512ad1541caf98c5a63e2', class: "separator mx-12" }, this.separator), hAsync("slot", { key: '28b5151feb9c22781cb7c0a9f0896a5cd9138d92', name: "end" })), hAsync("div", { key: '478b58bb644b82daa44f0ca9660a3f5c16b0515e', class: "messages mt-1" }, this.errorMessages.map((msg, index) => (hAsync("p", { key: index, class: "invalid-feedback m-0" }, hAsync("road-icon", { slot: "start", name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), msg.trim())))), this.helper && hAsync("p", { key: '6fe2ec16f7f8094c8a023bba654252cc6f366cbc', class: "helper mt-1" }, this.helper)));
+        return (hAsync(Host, { key: '4c05c2fcbbe5c0f7df1c3e9750873faad0fa7b5c', class: `time-range-picker input-${this.sizes}` }, this.label && (hAsync("p", { key: '2c963e240ae199d1eee6ba76d85013eac8ccfdb8', class: "label m-0" }, this.label, this.required && hAsync("span", { key: 'd8232329248063a4b3dc7b4ba746cb31d4e9f56e', class: "required-indicator" }, " *"))), hAsync("div", { key: 'a848889d0465791fb95ce1c8264212d681e60ae9', class: "time-range-picker-content d-flex align-items-center my-4" }, hAsync("slot", { key: 'a4ded18bd9a179c34616e5a176c4c96189a99de8', name: "start" }), hAsync("span", { key: 'abd5e370b9ae64e5ce7f236017c0bf02a15ef8de', class: "separator mx-12" }, this.separator), hAsync("slot", { key: 'a8445f25548d8580c6275860d330e189f64d1d4c', name: "end" })), hAsync("div", { key: '26723daafbce66f009a0b3d2708a0fa47531947d', class: "messages mt-1" }, this.errorMessages.map((msg, index) => (hAsync("p", { key: index, class: "invalid-feedback m-0" }, hAsync("road-icon", { slot: "start", name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), msg.trim())))), this.helper && hAsync("p", { key: '751b03bef9d11b330916ca30d431185034d65294', class: "helper mt-1" }, this.helper)));
     }
     get hostEl() { return getElement(this); }
     static get style() { return RoadTimeRangePickerStyle0; }
@@ -34613,7 +34659,7 @@ class Row {
     }; }
 }
 
-const segmentedButtonCss = ":host{--border-radius:0.25rem;--font-size:var(--road-button-medium);--margin-bottom:1rem;--padding-start:1.5rem;--padding-end:1.5rem;box-sizing:border-box;flex:1;align-items:center;justify-content:center;max-height:2.75rem;font-size:var(--road-button-medium);font-weight:700;color:var(--road-on-surface-weak);text-decoration:none;white-space:nowrap;vertical-align:middle;background-color:var(--road-surface);border-radius:8px;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;margin-right:var(--road-spacing-02);overflow:hidden}:host(:last-child){margin-right:0}:host(.btn-sm){height:2.5rem}:host(.btn-md){height:2.75rem}:host(.tab-selected){color:var(--road-button-primary);fill:var(--road-button-primary);background-color:var(--road-button-tertiary-variant)}:host(.tab-selected:hover){color:var(--road-button-primary);background-color:var(--road-button-tertiary-variant)}:host(:hover){color:var(--road-on-surface);background-color:var(--road-surface-inverse)}:host(.focus-visible){outline:auto}.button-native{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;padding:0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);margin:0;overflow:hidden;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;-webkit-user-drag:none;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}:host ::slotted(road-icon){margin:-0.2rem var(--road-spacing-03) -0.2rem 0;float:left}.button-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}";
+const segmentedButtonCss = ":host{--border-radius:0.25rem;--font-size:var(--road-button-medium);--margin-bottom:1rem;--padding-start:1.5rem;--padding-end:1.5rem;box-sizing:border-box;flex:1;align-items:center;justify-content:center;max-height:3rem;font-size:var(--road-button-medium);font-weight:700;color:var(--road-on-surface-weak);text-decoration:none;white-space:nowrap;vertical-align:middle;background-color:var(--road-surface);border-radius:8px;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;margin-right:var(--road-spacing-02);overflow:hidden}:host(:last-child){margin-right:0}:host(.btn-sm){height:2.5rem}:host(.btn-md){height:2.75rem}:host(.btn-lg){height:3rem}:host(.tab-selected){color:var(--road-button-primary);fill:var(--road-button-primary);background-color:var(--road-button-tertiary-variant)}:host(.tab-selected:hover){color:var(--road-button-primary);background-color:var(--road-button-tertiary-variant)}:host(:hover){color:var(--road-on-surface);background-color:var(--road-surface-inverse)}:host(.focus-visible){outline:auto}.button-native{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;padding:0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);margin:0;overflow:hidden;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;-webkit-user-drag:none;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}:host ::slotted(road-icon){margin:-0.2rem var(--road-spacing-03) -0.2rem 0;float:left}.button-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;display:flex;align-items:center}.button-content-badge{margin-left:var(--road-spacing-03)}";
 var RoadSegmentedButtonStyle0 = segmentedButtonCss;
 
 /**
@@ -34672,10 +34718,11 @@ class SegmentedButton {
     render() {
         const { tabIndex, selected, tab } = this;
         const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';
-        return (hAsync(Host, { key: '20194d71e8ca1c839c4a6287511fcb9ad1318e67', onClick: this.onClick, onKeyup: this.onKeyUp, role: "tab", tabindex: tabIndex, "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (hAsync(Host, { key: 'c32084087edad1374074d06d73fe718361396247', onClick: this.onClick, onKeyup: this.onKeyUp, role: "tab", tabindex: tabIndex, "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 'tab-selected': selected,
                 [`${sizeClass}`]: true,
-            } }, hAsync("span", { key: 'cf51481805c04571bc3ef97a150b011bd8c0e79e', tabIndex: -1, class: "button-native", part: "native", "aria-hidden": "true" }, hAsync("span", { key: '595aae2ef9621aa6a39ef2388373ec3708972bbb', class: "button-content" }, hAsync("slot", { key: '9b6e874b79e88265b6c56465e9f84a5849363016' })))));
+            } }, hAsync("span", { key: '55c39f3b6508f33537a0d0e243bc61a700d5c533', tabIndex: -1, class: "button-native", part: "native", "aria-hidden": "true" }, hAsync("span", { key: 'fa599539a08ff52bbfe0c479e809926aecabc85a', class: "button-content" }, hAsync("slot", { key: '044b41c9a2217d62aa30f4221d4a5670105e7bd5' }), this.badge &&
+            hAsync("road-badge", { key: '35a10d98aa0149976dcb21c4f7cb546753ed933f', color: this.selected ? 'primary' : 'neutral', class: "button-content-badge" }, this.badge)))));
     }
     get el() { return getElement(this); }
     static get style() { return RoadSegmentedButtonStyle0; }
@@ -34685,7 +34732,8 @@ class SegmentedButton {
         "$members$": {
             "size": [1],
             "selected": [1028],
-            "tab": [1]
+            "tab": [1],
+            "badge": [1]
         },
         "$listeners$": [[8, "roadSegmentedButtonBarChanged", "onButtonBarChanged"], [8, "roadSegmentedButtonbarchanged", "onButtonBarChanged"]],
         "$lazyBundleId$": "-",
@@ -34796,7 +34844,7 @@ class Select {
         const labelId = this.selectId + '-label';
         const hasValueClass = this.value && this.value !== '' ? 'has-value' : '';
         const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-        return (hAsync(Host, { key: 'e86d30d1fe1fd95d7b70140a57d76f3992cbc035', class: this.sizes && `select-${this.sizes}` }, hAsync("select", { key: '9a438873eedc20213b7e6c8bae2c648c9c1e0ad1', class: `form-select ${hasValueClass} ${isInvalidClass}`, id: this.selectId, "aria-disabled": this.disabled ? 'true' : null, autoFocus: this.autofocus, disabled: this.disabled, name: this.name, required: this.required, size: this.size, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }, hAsync("option", { key: '67d63f752f9f0fa2d48ee4ec07029c7e43706729', selected: !this.value, disabled: true, hidden: true, style: { display: 'none' }, value: "" }), this.options && this.options.map(option => (hAsync("option", { value: option.value, selected: this.value !== null && option.value == this.value }, option.label)))), hAsync("label", { key: 'c07e091eb4b6da4ab793c2056131c16bf9ee4723', class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && hAsync("p", { key: 'd01132cad717c35ca5a5afe2ad8effb697037a13', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && hAsync("p", { key: '2f884ebd87cf990ab093ee5a023cd698c6883a8f', class: "helper" }, this.helper)));
+        return (hAsync(Host, { key: '5bb29d6c8e7ed03e244ec3fdd239589bab5cabe0', class: this.sizes && `select-${this.sizes}` }, hAsync("select", { key: '2493089b1bb3c57c3af43ebbb5daff18ae4744e0', class: `form-select ${hasValueClass} ${isInvalidClass}`, id: this.selectId, "aria-disabled": this.disabled ? 'true' : null, autoFocus: this.autofocus, disabled: this.disabled, name: this.name, required: this.required, size: this.size, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }, hAsync("option", { key: 'e2bf03909eac53047f830ce9a655a643690f918e', selected: !this.value, disabled: true, hidden: true, style: { display: 'none' }, value: "" }), this.options && this.options.map(option => (hAsync("option", { value: option.value, selected: this.value !== null && option.value == this.value }, option.label)))), hAsync("label", { key: '8a8ad20b057bec306e122587b24f5ffbcb79a3de', class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && hAsync("p", { key: '1d5648a6e2fb46921900ff639b17ac5cc536350e', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && hAsync("p", { key: '88a14e5d848bda00fea2088013037f37559387f0', class: "helper" }, this.helper)));
     }
     static get watchers() { return {
         "value": ["valueChanged"]
@@ -36790,7 +36838,7 @@ class SelectFilter {
         const options = this.filteredOptions;
         const isActive = this.isActive ? 'true' : 'false';
         const notActive = this.isActive ? '' : 'not-active';
-        return (hAsync(Host, { key: '5d0540d59c53f2506b97fdaa40a1fae6381098f5', "is-active": isActive }, hAsync("slot", { key: 'e7b5e449426fe5364b5a12a5aa408a98a033869e' }), this.isOpen && (hAsync("div", { key: '01f532bba66042887e23c5892609e4dd174d8330', class: `${notActive} select-filter-list`, role: "listbox", onMouseLeave: this.handleMouseLeave }, options.length === 0 ? (hAsync("div", { class: "select-filter-empty" }, "Aucune option")) : (hAsync("ul", { class: "pl-0" }, options.map((option, idx) => (hAsync("li", { class: `select-filter-item ${this.activeIndex === idx ? 'active' : ''}`, role: "option", "aria-selected": this.activeIndex === idx ? 'true' : 'false', onClick: (e) => this.handleOptionClick(option.item.value, option.item.label.replace(/(<([^>]+)>)/gi, ''), e), onMouseOver: () => this.handleOptionMouseOver(idx), innerHTML: option.item.label, tabindex: this.activeIndex === idx ? 0 : -1 })))))))));
+        return (hAsync(Host, { key: '7fdfb3dadc614f4e851891dceb20e19f33074443', "is-active": isActive }, hAsync("slot", { key: 'e2be686790e0ad87e002c8f393cee0ac0864d532' }), this.isOpen && (hAsync("div", { key: '155ccb2711eaa3f8e92f25a3d3b7b9dfa34d4021', class: `${notActive} select-filter-list`, role: "listbox", onMouseLeave: this.handleMouseLeave }, options.length === 0 ? (hAsync("div", { class: "select-filter-empty" }, "Aucune option")) : (hAsync("ul", { class: "pl-0" }, options.map((option, idx) => (hAsync("li", { class: `select-filter-item ${this.activeIndex === idx ? 'active' : ''}`, role: "option", "aria-selected": this.activeIndex === idx ? 'true' : 'false', onClick: (e) => this.handleOptionClick(option.item.value, option.item.label.replace(/(<([^>]+)>)/gi, ''), e), onMouseOver: () => this.handleOptionMouseOver(idx), innerHTML: option.item.label, tabindex: this.activeIndex === idx ? 0 : -1 })))))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -36826,7 +36874,7 @@ class Skeleton {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("span", { key: 'ec2419ddcf62a6b2aeedd68ec0c1eb8e430f8185' }, "\u00A0"));
+        return (hAsync("span", { key: 'eecb6ba03a976649272ec4df632022afa71b4a1e' }, "\u00A0"));
     }
     static get style() { return RoadSkeletonStyle0; }
     static get cmpMeta() { return {
@@ -36857,7 +36905,7 @@ class Spinner {
     render() {
         const sizeClass = this.size !== undefined ? `spinner spinner--${this.size}` : 'spinner';
         const colorClass = this.size !== undefined ? `spinner-circle spinner-circle--${this.color}` : 'spinner-circle';
-        return (hAsync("svg", { key: 'fc286db53f3b74155c3221474abb9472d774e89d', class: `${sizeClass}`, viewBox: "25 25 50 50" }, hAsync("circle", { key: 'a40ef2366ff12fe69486f3db0d92b7d49affd370', class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
+        return (hAsync("svg", { key: 'eb559d1ad35ed62c6c4cb1e7280faf29e52fe2f6', class: `${sizeClass}`, viewBox: "25 25 50 50" }, hAsync("circle", { key: '8faa4a39732b5b882a2c76abed424d95846c3083', class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
     }
     static get style() { return RoadSpinnerStyle0; }
     static get cmpMeta() { return {
@@ -36898,7 +36946,7 @@ class StatusChip {
         };
     }
     render() {
-        return (hAsync(Host, { key: '178e109ebeac6b66b105e3aa12cfc1cd942e83cc', class: `chip-${this.size}`, tabindex: "0", role: "button", onClick: this.onActivate, onKeyDown: this.onKeyDown }, hAsync("div", { key: '5904c24f62ed7636205a0bf05431f698930ae615', class: "chip-description" }, hAsync("road-icon", { key: '5a6767d216edc33ba42b6788102e90469c276a7e', class: "chip-icon", color: "info", icon: alertInfoSolid }), hAsync("slot", { key: '03dfda63fce2ecbfeac0b16e1f54157f75bbe156' }))));
+        return (hAsync(Host, { key: 'f261ddcd3afd748b815d63d973724d0898b48cd7', class: `chip-${this.size}`, tabindex: "0", role: "button", onClick: this.onActivate, onKeyDown: this.onKeyDown }, hAsync("div", { key: '1a6fdaf843be1db93ee850456d662c98c6ab182b', class: "chip-description" }, hAsync("road-icon", { key: '169dc92bb2d1ef16083019799ba80573731464f4', class: "chip-icon", color: "info", icon: alertInfoSolid }), hAsync("slot", { key: '4e24bd7b4a140a532970959e5c2140a54910feb6' }))));
     }
     static get style() { return RoadStatusChipStyle0; }
     static get cmpMeta() { return {
@@ -37049,11 +37097,11 @@ class Switch {
     }
     render() {
         const labelId = this.switchId + '-label';
-        const textLabel = hAsync("label", { key: '22fa2b6f8be006647d123f0fc8eb077afad13aca', class: "form-switch-label", id: labelId, htmlFor: this.switchId }, this.label);
+        const textLabel = hAsync("label", { key: 'c232e4f3505aa5d27a54077cf9883fef864efc4d', class: "form-switch-label", id: labelId, htmlFor: this.switchId }, this.label);
         const colorClass = this.color !== undefined ? 'form-switch-' + this.color : '';
         const isSpacedClass = this.isSpaced && 'form-switch-spaced';
         const rightSwitchClass = this.hasLeftLabel ? 'form-switch-right' : '';
-        return (hAsync(Host, { key: 'afcb3cea4c1ee2740769cc1364d9175d5a144ba7' }, hAsync("input", { key: '2dace2130557a4c73b79dcd494cc33a7541e6737', class: "form-switch-input", type: "checkbox", id: this.switchId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), hAsync("label", { key: '81450123a463b3619774e65b7e49c3637b5d0037', class: `form-switch-label ${isSpacedClass} ${colorClass}`, htmlFor: this.switchId }, this.hasLeftLabel && textLabel, hAsync("div", { key: '4bf60bf353f80414ac1bba264966b0ca00405b07', class: `form-switch-lever ${rightSwitchClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
+        return (hAsync(Host, { key: '3d93be9bb557c13028dabaef2e82a1e53b814c56' }, hAsync("input", { key: '9682f18c59fa23c8bdaeb30c27ea0aea4c37b2e2', class: "form-switch-input", type: "checkbox", id: this.switchId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), hAsync("label", { key: '30340789f9d2d0182d478f7e840d705afcb4cf13', class: `form-switch-label ${isSpacedClass} ${colorClass}`, htmlFor: this.switchId }, this.hasLeftLabel && textLabel, hAsync("div", { key: '7dd93e85e3a444f92dbfb524e5ba401e1f5ecb7d', class: `form-switch-lever ${rightSwitchClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
     }
     static get watchers() { return {
         "checked": ["checkedChanged"]
@@ -37108,9 +37156,9 @@ class Tab {
     }
     render() {
         const { tab, active } = this;
-        return (hAsync(Host, { key: '1f2746fc33e9b879bc8558f18685bdf2f243fdf1', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (hAsync(Host, { key: 'e5f32c9c796b1a798eca2d24a7a660d808d060f8', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'tab-hidden': !active,
-            } }, hAsync("slot", { key: '38d4df4049aa57b8160855d33990f1b2db21d259' })));
+            } }, hAsync("slot", { key: '018740decce73c280c77ba78216623ac0f842e9d' })));
     }
     get el() { return getElement(this); }
     static get style() { return RoadTabStyle0; }
@@ -37170,11 +37218,11 @@ class TabBar {
     }
     render() {
         const { expand, center, secondary } = this;
-        return (hAsync(Host, { key: 'c44503ddd4b988d4c35891794c92998299811acb', role: "tablist", class: {
+        return (hAsync(Host, { key: '598640b2a0d7bfc657df37e30deff1a0aee2698c', role: "tablist", class: {
                 'tab-expand': expand,
                 'tab-center': center,
                 'tab-secondary': secondary,
-            } }, hAsync("slot", { key: '356756006ef297ea0933437004f703dc8eccacf9' })));
+            } }, hAsync("slot", { key: '2f8c35375effb72f15d0b37d80ff3dd3a2779b22' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -37274,7 +37322,7 @@ class TabButton {
             rel,
             target,
         };
-        return (hAsync(Host, { key: '15684e85cbefb6d8646231adfc2bd423a59edb84', onClick: (ev) => !disabled && this.onClick(ev), onKeyup: (ev) => !disabled && this.onKeyUp(ev), role: "tab", tabindex: disabled ? -1 : tabIndex, "aria-selected": selected ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (hAsync(Host, { key: 'd0232d92d13b395713e9537e4e985b9b1aef4be8', onClick: (ev) => !disabled && this.onClick(ev), onKeyup: (ev) => !disabled && this.onKeyUp(ev), role: "tab", tabindex: disabled ? -1 : tabIndex, "aria-selected": selected ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 'tab-selected': selected,
                 'tab-has-label': hasLabel,
                 'tab-has-icon': hasIcon,
@@ -37282,7 +37330,7 @@ class TabButton {
                 'tab-has-icon-only': hasIcon && !hasLabel,
                 [`tab-layout-${layout}`]: true,
                 'tab-disabled': disabled, // Classe CSS pour les styles désactivés
-            } }, hAsync("a", Object.assign({ key: '8808982bb613680dcf3e7e330d6ac113f2d2f47f' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), hAsync("span", { key: 'cc2bb1c13f607c1e3c8088179c3c6ce49f272222', class: "button-inner" }, hAsync("slot", { key: 'a471b49c35cdfc57bd2f5a7156381ea051f1649f' })))));
+            } }, hAsync("a", Object.assign({ key: '3cfffe4aef2432b2a23eb2ff6c86c5da125f0e04' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), hAsync("span", { key: '36f97b5e282bf7870228ca6651629b766d614512', class: "button-inner" }, hAsync("slot", { key: '4f963acbe1cc57893b19c0f86af05b8e754c96c1' })))));
     }
     get el() { return getElement(this); }
     static get style() { return RoadTabButtonStyle0; }
@@ -37316,7 +37364,7 @@ class Table {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("slot", { key: 'df60a444f486b688b982684f727e28468022b801' }));
+        return (hAsync("slot", { key: '81dd5f1f536cbc1362baa3027bb76b8fa5a6022b' }));
     }
     static get style() { return RoadTableStyle0; }
     static get cmpMeta() { return {
@@ -37424,7 +37472,7 @@ class Tabs$1 {
         return Array.from(this.el.querySelectorAll('road-tab'));
     }
     render() {
-        return (hAsync(Host, { key: 'df0d2cbe2bf0647686439e58ab7e47067bb85a18', onRoadSegmentedButtonClick: this.onTabClicked }, hAsync("slot", { key: '0181d346ee8cf63cab8eac42c8932e1f5477288f', name: "top" }), hAsync("slot", { key: 'c3c0f5c41618721ace911e149d1218b0f8412369' })));
+        return (hAsync(Host, { key: '74762d3d2e76c9926a2344182debdd17dbf3c011', onRoadSegmentedButtonClick: this.onTabClicked }, hAsync("slot", { key: 'f4d5f461a7fe74ebc76c181b185932759ceb0f34', name: "top" }), hAsync("slot", { key: '6b99ef4524d2aa3f55b95b33b7028097abb03712' })));
     }
     get el() { return getElement(this); }
     static get style() { return RoadSegmentedButtonsStyle0; }
@@ -37560,7 +37608,7 @@ class Tabs {
         return Array.from(this.el.querySelectorAll('road-tab'));
     }
     render() {
-        return (hAsync(Host, { key: '09627e578a4f116e875445939739ffb334429c05', onRoadTabButtonClick: this.onTabClicked }, hAsync("slot", { key: 'ffe9f5b8d3ac85e47a16650254e94376a59376de', name: "top" }), hAsync("div", { key: '1443f709510efff63fdb972db851916406321ac5', class: "tabs-inner" }, hAsync("slot", { key: 'ce206df02b9e5e4933bf1dde5447313cb2ecd900' }))));
+        return (hAsync(Host, { key: '0e0850a766229851fb10751a2c598517ea6ab666', onRoadTabButtonClick: this.onTabClicked }, hAsync("slot", { key: '449935aea69a4bb19f26ffefa9427af73dea2400', name: "top" }), hAsync("div", { key: 'cca0b8a935a1e8df7fc9ce46fab95371910e7676', class: "tabs-inner" }, hAsync("slot", { key: '649c2c4cec7a0cd43dfc668eab513ce80207ac9a' }))));
     }
     get el() { return getElement(this); }
     static get style() { return RoadTabsStyle0; }
@@ -37608,7 +37656,7 @@ class Tag {
     }
     render() {
         const contrastClass = this.contrast ? `tag-${this.color} tag-${this.color}-contrast` : `tag-${this.color}`;
-        return (hAsync(Host, { key: 'e69d81ddb79dcbc736b38c9f7f0e15d5328444ee', class: `${contrastClass}` }, hAsync("slot", { key: '0dc393d2b05bb35d1d17696ea3771ad067a30962' })));
+        return (hAsync(Host, { key: 'c17a38527980d6d453ba3846f9a3b2d57f31c071', class: `${contrastClass}` }, hAsync("slot", { key: '77293988ddc60d4defb5e1600db3340c95335cb3' })));
     }
     static get style() { return RoadTagStyle0; }
     static get cmpMeta() { return {
@@ -37640,7 +37688,7 @@ class Text {
     }
     render() {
         const colorClass = this.color !== undefined ? `text-${this.color}` : '';
-        return (hAsync(Host, { key: '0601af1046143f243308bb9923105842fe2c25ea', class: `${colorClass}` }, hAsync("slot", { key: '7aa5402a3d3bbface4a39414a5415bce1b0ac878' })));
+        return (hAsync(Host, { key: '727ee50da083fe2504862c80ed7aa5e5392e0226', class: `${colorClass}` }, hAsync("slot", { key: '6e5322eed782d23164f11060a5be01a140182d5d' })));
     }
     static get style() { return RoadTextStyle0; }
     static get cmpMeta() { return {
@@ -37718,6 +37766,8 @@ class Textarea {
          */
         this.label = `${this.textareaId}-label`;
         this.onInput = (ev) => {
+            if (this.isComposing)
+                return;
             const input = ev.target;
             if (input) {
                 this.value = input.value || '';
@@ -37726,6 +37776,14 @@ class Textarea {
             this.roadInput.emit(ev);
         };
         this.onBlur = () => {
+            var _a, _b;
+            if (this.isComposing) {
+                this.isComposing = false;
+                const domValue = (_b = (_a = this.textareaEl) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
+                if (this.value !== domValue) {
+                    this.value = domValue;
+                }
+            }
             this.roadblur.emit();
             this.roadBlur.emit();
         };
@@ -37733,6 +37791,17 @@ class Textarea {
             this.roadfocus.emit();
             this.roadFocus.emit();
         };
+        this.isComposing = false;
+        this.onCompositionStart = () => {
+            this.isComposing = true;
+        };
+        this.onCompositionUpdate = (ev) => {
+            this.onInput(ev);
+        };
+        this.onCompositionEnd = (ev) => {
+            this.isComposing = false;
+            this.onInput(ev);
+        };
     }
     /**
      * Update the native textarea element when the value changes
@@ -37750,7 +37819,7 @@ class Textarea {
         const hasValueClass = this.value !== '' ? 'has-value' : '';
         const noResizeClass = this.resize == false ? 'no-resize' : '';
         const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-        return (hAsync(Host, { key: '7f097d22080a94c592b2959db0f9102054bbdc9c', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, hAsync("textarea", { key: '96a40416be94b422af9b68d7aad0e7b3f4af3b1e', class: `form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`, id: this.textareaId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, value: value, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }), hAsync("label", { key: 'a19dd99c28772692927f4b7d5652d8c76f7d84e0', class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && hAsync("p", { key: 'cb94c1bac1f4e88df2b1b4b7502677298e09c599', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && hAsync("p", { key: '03a2fea4ed00b0c1897161812dbc01598db4296f', class: "helper" }, this.helper)));
+        return (hAsync(Host, { key: 'b11f3ddbd35f2d9b093d5a1ea8a7aadc9d22e52d', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, hAsync("textarea", { key: '9bd42480182ef1a6804c84bcec4cbcdfaf2208ba', class: `form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`, id: this.textareaId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, value: value, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onCompositionstart: this.onCompositionStart, onCompositionupdate: this.onCompositionUpdate, onCompositionend: this.onCompositionEnd, onBlur: this.onBlur, onFocus: this.onFocus, ref: el => (this.textareaEl = el) }), hAsync("label", { key: 'a46e0ff32396e011cb0bca6d65794e5e080ec633', class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && hAsync("p", { key: '703184751f1e79b0b925b1146a8a226f10d47be9', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && hAsync("p", { key: '5537817fa2cf67f3b4be1e5606c2c5eec556d5b5', class: "helper" }, this.helper)));
     }
     static get watchers() { return {
         "value": ["valueChanged"]
@@ -37881,7 +37950,7 @@ class Toast {
         if (this.color == 'danger') {
             this.timeout = 0;
         }
-        return (hAsync(Host, { key: '3a4496171b17207f7a0511b651561e8044dc5254', class: `${toastIsOpenClass}`, role: "alert" }, hAsync("div", { key: '5f3849481ca612dd87581ffe82de019c19023c33', class: `toast toast-${this.color}` }, hAsync("road-icon", { key: 'cd71e4aedb6571159d879ae2a04b003be7d35e7c', class: "toast-icon", icon: icon, "aria-hidden": "true" }), hAsync("p", { key: '4ab5b0b0ce22a200bde67b6d53ff895b3319ca70', class: "toast-label" }, this.label), hAsync("button", { key: '9c29206da5cc529f72af8423d551956574a1dfe9', type: "button", class: "toast-close", "aria-label": "Close", onClick: this.onClick }, hAsync("road-icon", { key: '1c288981ec46bd178f457103a1cf50151ed2b112', icon: navigationClose, size: "md" })), hAsync("slot", { key: '0d1a04e456a142b1b6f3d6ecc851d775a4139a9f', name: "progress" }))));
+        return (hAsync(Host, { key: '5c3caac868d79f97699af08fb0b96c1ff35ad9cc', class: `${toastIsOpenClass}`, role: "alert" }, hAsync("div", { key: 'b20177ba76a147f157605497de541dd53070a7b1', class: `toast toast-${this.color}` }, hAsync("road-icon", { key: 'f75466515c805ee5460577e9694b374b1a30ac62', class: "toast-icon", icon: icon, "aria-hidden": "true" }), hAsync("p", { key: 'a2e984002c90fbcc7f0eb8f912835c46f1f5effd', class: "toast-label" }, this.label), hAsync("button", { key: '37b9009541e949ee9ffe2350abd189a2d5bcf014', type: "button", class: "toast-close", "aria-label": "Close", onClick: this.onClick }, hAsync("road-icon", { key: '5c0cd9dbae939e8c52cb2150861b3c0f68d5518b', icon: navigationClose, size: "md" })), hAsync("slot", { key: '48469490e404f7db80d5c77aa3e08c02d769dd4f', name: "progress" }))));
     }
     static get watchers() { return {
         "isOpen": ["isOpenChanged"]
@@ -37921,7 +37990,7 @@ class Toolbar {
     }
     render() {
         const colorClass = this.color !== undefined ? `toolbar-${this.color}` : '';
-        return (hAsync(Host, { key: '1d4f69b6833dfd4450b9f5cdca4e00ecbba6e4c1', class: colorClass }, hAsync("div", { key: '44bc8ae86ca2dafca7e4b5b5c55691445068f45b', class: "toolbar-container" }, hAsync("slot", { key: 'f861b62f08a1df22de0cfa57456043fb78edf3d0', name: "start" }), hAsync("slot", { key: 'd1f4105ff8c237d6a577d16c7db1934f9e6ee166', name: "primary" }), hAsync("div", { key: 'a5a7885ed09b0d40ee52fde0d1ff501735677021', class: "toolbar-content" }, hAsync("slot", { key: '25e6d4493835360bcce26f04308a84e000b01a09' })), hAsync("slot", { key: 'f324982ed3d62bfb26c000ce47d0343a4feae90a', name: "secondary" }), hAsync("slot", { key: 'dd1bb2b044a4614d76747472c814a43ba73e41a9', name: "end" }))));
+        return (hAsync(Host, { key: '3dc7d078c8a2beddccd06b419074422f3aafbe3a', class: colorClass }, hAsync("div", { key: 'a7565dead37f8ef28f41e26cbc2b5b9a77be3827', class: "toolbar-container" }, hAsync("slot", { key: 'ecd46478a6eb7349171ea061233c1068f19eb78a', name: "start" }), hAsync("slot", { key: '7153d8935a1f361394acdd0c1d64e43a6f9ec93f', name: "primary" }), hAsync("div", { key: 'f205b0d511fd331b78c7fe4a567b7f420ece72d6', class: "toolbar-content" }, hAsync("slot", { key: '1a2671f07e4e9d098b854f783c8f6e892450a05e' })), hAsync("slot", { key: '2fd00ff4d71fc3b7e90ba3076f18665b30e63697', name: "secondary" }), hAsync("slot", { key: '83bbe556f1a94feb42faa9e3789b2515c8f85a03', name: "end" }))));
     }
     static get style() { return RoadToolbarStyle0; }
     static get cmpMeta() { return {
@@ -37947,7 +38016,7 @@ class ToolbarAppName {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("div", { key: '865af785629a79a7448df7721885cbe25eead4f1', class: "toolbar-title-page" }, hAsync("slot", { key: 'a0778c790e42b8b54db2c5407d874d5e7924ab86' })));
+        return (hAsync("div", { key: '6523ca97a8377f6af5fd0800aa5543cbc316f13f', class: "toolbar-title-page" }, hAsync("slot", { key: 'c5d3422ec09f1d54d24fb28cb2be7a84dd700703' })));
     }
     static get style() { return RoadToolbarTitlePageStyle0; }
     static get cmpMeta() { return {
@@ -37971,7 +38040,7 @@ class ToolbarTitle {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync("div", { key: '67ddb57f9717084f519746e8f19fe61f1ccf9641', class: "toolbar-title" }, hAsync("slot", { key: '6bd026b79603afd9e96a09b4d52da882681fef50' })));
+        return (hAsync("div", { key: '9ed296ef2918332630e1b5a7b7026b2edeb91b21', class: "toolbar-title" }, hAsync("slot", { key: 'a39fdb646a9bcb5aea4641575161229610d75878' })));
     }
     static get style() { return RoadToolbarTitleStyle0; }
     static get cmpMeta() { return {
@@ -38000,7 +38069,7 @@ class ToolbarV2 {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '09a228e4eafc2393b30c140b7287c6c881b8d7db', class: "toolbar" }, hAsync("div", { key: '562c83b301107143e3531f374ee4aab6c2d6a8a1', class: "toolbar-container" }, hAsync("div", { key: '9b6ddce805a701bab76529aac5c36e28161ec7e4', class: "toolbar-container-content-left" }, hAsync("slot", { key: '521da1cfda1737f3fb71b8a15380a890eded2b72', name: "start" }), hAsync("slot", { key: '4b777b4cbdabe61de6503d6f455c9952851aa1b8', name: "primary" })), hAsync("div", { key: '513270582ea6cab3852f71ebf5bbbcfa4a085bbe', class: "toolbar-content" }, hAsync("slot", { key: '41ae313ad235be1b2376199ea769fa48dec4cf20' })), hAsync("div", { key: 'd051c5ca9c5a97bb9598c25794dcfc79a446b983', class: "toolbar-container-content-right" }, hAsync("slot", { key: 'a9344e556ba87fb7041eb430ad401474bdf37385', name: "secondary" }), hAsync("slot", { key: '128c4b1aa6e53b84cb7112540f6cdbad02f942f1', name: "end" })))));
+        return (hAsync(Host, { key: '36c585d9dec920f5b72e37733e74c4134ee67185', class: "toolbar" }, hAsync("div", { key: '947c33c46e0bbc26b75d5bab2ed2c89ab228e808', class: "toolbar-container" }, hAsync("div", { key: '83d61111f17d1022ba7b54089e203277955e0a68', class: "toolbar-container-content-left" }, hAsync("slot", { key: '7ac57443795d0347afb7e5ce1070d42ac7f91017', name: "start" }), hAsync("slot", { key: 'a6089fd013186ea231d8d88d5af878239acf92f8', name: "primary" })), hAsync("div", { key: '441aaee506f1cf8a99921cf0a932303a9bdf18aa', class: "toolbar-content" }, hAsync("slot", { key: 'b72650e9913e3f0d08fbe2d2f8eed7219e132837' })), hAsync("div", { key: '48a7f37607c0ebd5a88620cd2ebac74bc12708ed', class: "toolbar-container-content-right" }, hAsync("slot", { key: '137e2d29e96b188194c0e9f82b6081a35119c371', name: "secondary" }), hAsync("slot", { key: '777d8774c10c9e4a784b193139ff10085166a103', name: "end" })))));
     }
     static get style() { return RoadToolbarV2Style0; }
     static get cmpMeta() { return {
@@ -38127,12 +38196,12 @@ class Tooltip {
         return triggers.includes(triggerType);
     }
     render() {
-        return (hAsync(Host, { key: '1c4d0674f907e8e3006c88119ecd9d4c327597a7', onMouseOver: this.onMouseOver, onMouseOut: this.onMouseOut, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur, tabindex: "0" // Makes the element focusable
+        return (hAsync(Host, { key: 'dbe023bc59f5d6637f901291cdd2c1a5d9b27450', onMouseOver: this.onMouseOver, onMouseOut: this.onMouseOut, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur, tabindex: "0" // Makes the element focusable
             ,
-            "data-tooltip-position": this.position }, hAsync("slot", { key: '9540439d97de9867f32349f2b37dd50242522744', "aria-describedby": this.tooltipId }), hAsync("div", { key: '72eee89fa5a31dd67ddae13f444a2ba40ab55d95', part: "tooltip", id: this.tooltipId, class: {
+            "data-tooltip-position": this.position }, hAsync("slot", { key: 'ba01929185c87ed190275aafa8326bbbbd70ebca', "aria-describedby": this.tooltipId }), hAsync("div", { key: 'df67e1ec087033b72259fae58fc5447ed0d20a01', part: "tooltip", id: this.tooltipId, class: {
                 tooltip: true,
                 "tooltip-open": this.isOpen,
-            }, role: "tooltip", "aria-hidden": !this.isOpen ? "true" : "false" }, this.content, hAsync("slot", { key: '974f5455db23669fd1dbc9b4c15a8919ccd0b751', name: "tooltip-content" }))));
+            }, role: "tooltip", "aria-hidden": !this.isOpen ? "true" : "false" }, this.content, hAsync("slot", { key: '8fc2ca39b71812dabd43af2a8fb3d0b2ef223a28', name: "tooltip-content" }))));
     }
     get el() { return getElement(this); }
     static get style() { return RoadTooltipStyle0; }
@@ -38224,11 +38293,11 @@ class toggle {
     }
     render() {
         const labelId = this.toggleId + '-label';
-        const textLabel = hAsync("label", { key: '8cc1a41d36f0201ba392d57fc2424aa3026f5b9e', class: "form-toggle-label", id: labelId, htmlFor: this.toggleId }, this.label);
+        const textLabel = hAsync("label", { key: '688af16c9f4a539dd13c5bb98c0f2a731b492c06', class: "form-toggle-label", id: labelId, htmlFor: this.toggleId }, this.label);
         const isSpacedClass = this.isSpaced && 'form-toggle-spaced';
         const righttoggleClass = this.hasLeftLabel ? 'form-toggle-right' : '';
         const disabledClass = this.disabled ? 'disabled' : '';
-        return (hAsync(Host, { key: 'babe45bd3028fdb56410decc3685ab608a5f73f1' }, hAsync("input", { key: 'eb99e00634ede458e45553c629a693a9faa4583e', class: "form-toggle-input", type: "checkbox", id: this.toggleId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), hAsync("label", { key: '523e11101552847180e7d9509345349940f449b0', class: `form-toggle-label ${isSpacedClass} ${disabledClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, hAsync("div", { key: 'ffc04b50698e2a4cd7ac59c1d6dd18423e298e48', class: `form-toggle-lever ${righttoggleClass}` }, this.checked ? (hAsync("road-icon", { name: "check-small-solid", class: "form-toggle-lever-check", size: "md" })) : (hAsync("road-icon", { name: "navigation-close-solid", class: "form-toggle-lever-close", size: "md" }))), this.hasLeftLabel ? '' : textLabel)));
+        return (hAsync(Host, { key: '530c7052c4b2d783599f0e997954a368bc49be45' }, hAsync("input", { key: '669fb27728139752f1e63319b86e804e7cf91da5', class: "form-toggle-input", type: "checkbox", id: this.toggleId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), hAsync("label", { key: '0f186f04ecd674c4c91458a1f6ef7aca63ee60cf', class: `form-toggle-label ${isSpacedClass} ${disabledClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, hAsync("div", { key: 'b0df7532dea735dfbd25da5307ba27d77fb7b6cc', class: `form-toggle-lever ${righttoggleClass}` }, this.checked ? (hAsync("road-icon", { name: "check-small-solid", class: "form-toggle-lever-check", size: "md" })) : (hAsync("road-icon", { name: "navigation-close-solid", class: "form-toggle-lever-close", size: "md" }))), this.hasLeftLabel ? '' : textLabel)));
     }
     static get watchers() { return {
         "checked": ["checkedChanged"]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roadtrip/components",
-  "version": "3.51.2",
+  "version": "3.52.0",
   "description": "Web Component library for Roadtrip Design System",
   "license": "Apache-2.0",
   "homepage": "https://gitlab.com/mobivia/driverservices/experience-platform/roadtrip/components",

package/dist/roadtrip/p-249b8592.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as a,H as s,a as e}from"./p-d7aae05d.js";const d=":host{display:block}:host(.tab-hidden){display:none}";const i=d;const n=class{constructor(a){t(this,a);this.active=false}async componentWillLoad(){if(this.active){await this.setActive()}}onTabBarChanged(t){this.active=this.tab===t.detail.tab}async setActive(){this.active=true}render(){const{tab:t,active:e}=this;return a(s,{key:"1f2746fc33e9b879bc8558f18685bdf2f243fdf1",role:"tabpanel","aria-hidden":!e?"true":null,"aria-labelledby":`tab-button-${t}`,class:{"tab-hidden":!e}},a("slot",{key:"38d4df4049aa57b8160855d33990f1b2db21d259"}))}get el(){return e(this)}};n.style=i;export{n as road_tab};
-//# sourceMappingURL=p-249b8592.entry.js.map

package/dist/roadtrip/p-7aceed1a.entry.js

@@ -1,2 +0,0 @@
-import{r,h as e}from"./p-d7aae05d.js";const s=":host{display:flex}.spinner{transform-origin:center;animation:road-rotate 2s linear infinite}.spinner.spinner--small{width:1rem;height:1rem}.spinner.spinner--medium{width:2rem;height:2rem}.spinner.spinner--large{width:3rem;height:3rem}.spinner.spinner--xl{width:8rem;height:8rem}.spinner-circle{animation:road-dash 1.5s ease-in-out infinite;fill:none;stroke:var(--road-primary);stroke-width:3;stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round}.spinner-circle.spinner-circle--dark{stroke:var(--road-grey-0)}.spinner-circle.spinner-circle--light{stroke:var(--road-grey-90)}@keyframes road-rotate{100%{transform:rotate(360deg)}}@keyframes road-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:90, 200;stroke-dashoffset:-35px}100%{stroke-dashoffset:-125px}}";const n=s;const i=class{constructor(e){r(this,e);this.size="large";this.color="default"}render(){const r=this.size!==undefined?`spinner spinner--${this.size}`:"spinner";const s=this.size!==undefined?`spinner-circle spinner-circle--${this.color}`:"spinner-circle";return e("svg",{key:"fc286db53f3b74155c3221474abb9472d774e89d",class:`${r}`,viewBox:"25 25 50 50"},e("circle",{key:"a40ef2366ff12fe69486f3db0d92b7d49affd370",class:`${s}`,cx:"50",cy:"50",r:"20"}))}};i.style=n;export{i as road_spinner};
-//# sourceMappingURL=p-7aceed1a.entry.js.map

package/dist/roadtrip/p-c0f2eca7.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["textareaCss","RoadTextareaStyle0","Textarea","constructor","hostRef","this","textareaId","textareaIds","autocapitalize","autofocus","disabled","name","sizes","readonly","required","spellcheck","resize","value","label","onInput","ev","input","target","roadinput","emit","roadInput","onBlur","roadblur","roadBlur","onFocus","roadfocus","roadFocus","valueChanged","roadchange","roadChange","getValue","render","labelId","hasValueClass","noResizeClass","isInvalidClass","error","undefined","h","Host","key","class","id","autoCapitalize","autoFocus","enterKeyHint","enterkeyhint","inputMode","inputmode","maxLength","maxlength","minLength","minlength","placeholder","readOnly","cols","rows","wrap","htmlFor","helper"],"sources":["src/components/textarea/textarea.css?tag=road-textarea&encapsulation=scoped","src/components/textarea/textarea.tsx"],"sourcesContent":["/*\n * Textarea\n *\n * Index\n * - Input\n * - Textarea\n * - Label\n * - Sizes\n * - Error\n * - Helper\n */\n\n:host {\n  position: relative;\n  display: block;\n  margin-bottom: 1rem;\n  font-family: var(--road-font, sans-serif);\n  color: var(--road-on-surface);\n}\n\n/* INPUT\n -------------------- */\n\n.form-control {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  height: 3rem;\n  padding: 0.75rem 1rem 0;\n  margin: 0;\n  font-size: var(--road-body-medium);\n  color: var(--road-on-surface);\n  background: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 0.25rem;\n  box-shadow: none;\n  appearance: none;\n}\n\n/**\n * Placeholder\n */\n\n.form-control::placeholder {\n  color: var(--road-on-surface-extra-weak);\n  opacity: 1;\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n  .form-control:not(:disabled):hover {\n    border-color: var(--road-input-outline-variant);\n  }\n}\n\n/**\n * Focus state\n */\n\n.form-control:focus ~ .form-label,\n.form-control[required]:valid ~ .form-label,\n.form-control.has-value ~ .form-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n\n.form-control:placeholder-shown ~ .form-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n\n/* stylelint-disable */\n\n/* IE FIX */\n\n.form-control:-ms-input-placeholder ~ .form-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n/* stylelint-enable */\n\n.form-control:not(:disabled):focus {\n  border-color: var(--road-input-outline-variant);\n}\n\n/**\n * Disabled state\n */\n\n.form-control:disabled,\n.form-control[readonly] {\n  color: var(--road-on-surface-weak);\n  cursor: not-allowed;\n  background: var(--road-surface-disabled);\n  opacity: 1;\n}\n\n/* TEXTAREA\n -------------------- */\n\n.textarea-control {\n  height: auto;\n  padding-top: 1rem;\n  padding-bottom: 0.5rem;\n  line-height: 1.5;\n}\n\n.textarea-control.no-resize {\n  resize: none;\n}\n\n/* LABEL\n -------------------- */\n\n.form-label {\n  position: absolute;\n  top: 0.75rem;\n  left: 1rem;\n  display: block;\n  font-size: var(--road-body-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface-weak);\n  pointer-events: none;\n  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n  transform-origin: 0 0;\n  width: 95%;\n  white-space: normal;\n  overflow-wrap: break-word;\n}\n\n/* SIZES\n -------------------- */\n\n:host(.input-xl) {\n  --height: 3.5rem;\n}\n\n:host(.input-xl) .form-control {\n  padding: 1.5rem 1rem 0.5rem;\n}\n\n:host(.input-xl) .form-label {\n  top: 1rem;\n}\n\n:host(.input-xl) .form-control:focus ~ .form-label,\n:host(.input-xl) .form-control[required]:valid ~ .form-label,\n:host(.input-xl) .form-control.has-value ~ .form-label,\n:host(.input-xl) .form-control[type=\"date\"] ~ .form-label,\n:host(.input-xl) .form-control[type=\"time\"] ~ .form-label {\n  width:100%;\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.input-xl) .form-control:placeholder-shown ~ .form-label {\n  width: 100%;\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n\n/* ERROR\n -------------------- */\n\n.invalid-feedback {\n  display: none;\n  width: 100%;\n  margin-top: 0.5rem;\n  font-size: var(--road-helper-medium);\n  color: var(--road-on-danger-surface);\n}\n\n.form-control.is-invalid,\n.was-validated .form-control:invalid {\n  border-color: var(--road-danger-outline);\n}\n\n.form-control.is-invalid ~ .invalid-feedback,\n.was-validated .form-control:invalid ~ .invalid-feedback {\n  display: block;\n}\n\n/* HELPER\n -------------------- */\n\n.helper {\n  margin-top: 0.5rem;\n  font-size: var(--road-helper-medium);\n  color: var(--road-on-surface-weak);\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'road-textarea',\n  styleUrl: 'textarea.css',\n  scoped: true,\n})\nexport class Textarea {\n\n  /**\n   * The id of textarea\n   */\n  @Prop() textareaId: string = `road-textarea-${textareaIds++}`;\n\n  /**\n   * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n   */\n  @Prop() autocapitalize: string = 'none';\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have focus when the page loads.\n   */\n  @Prop() autofocus: boolean = false;\n\n  /**\n   * If `true`, the user cannot interact with the textarea.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * A hint to the browser for which keyboard to display.\n   * This attribute applies when the value of the type attribute is `\"text\"`, `\"password\"`, `\"email\"`, or `\"url\"`. Possible values are: `\"verbatim\"`, `\"latin\"`, `\"latin-name\"`, `\"latin-prose\"`, `\"full-width-latin\"`, `\"kana\"`, `\"katakana\"`, `\"numeric\"`, `\"tel\"`, `\"email\"`, `\"url\"`.\n   */\n  @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\n  /**\n   * A hint to the browser for which enter key to display.\n   * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n   * `\"previous\"`, `\"search\"`, and `\"send\"`.\n   */\n  @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n  /**\n   * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n   */\n  @Prop() maxlength?: number;\n\n  /**\n   * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n   */\n  @Prop() minlength?: number;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.textareaId;\n\n  /**\n   * Instructional text that shows before the textarea has a value.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * The sizes of the input.\n   */\n   @Prop() sizes: 'lg' | 'xl' = 'lg';\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * If `true`, the element will have its spelling and grammar checked.\n   */\n  @Prop() spellcheck: boolean = false;\n\n    /**\n   * If `false`, to disabled resize.\n   */\n    @Prop() resize: boolean = true;\n\n  /**\n   * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.\n   */\n  @Prop() cols?: number;\n\n  /**\n   * The number of rows of the control.\n   */\n  @Prop() rows?: number;\n\n  /**\n   * Indicates how the control wraps text.\n   */\n  @Prop() wrap?: 'hard' | 'soft' | 'off';\n\n  /**\n   * The value of the textarea.\n   */\n  @Prop({ mutable: true }) value?: string | null = '';\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.textareaId}-label`;\n\n  /**\n   * Error message for the field\n   */\n  @Prop() error?: string;\n\n  /**\n   * Helper message for the field\n   */\n  @Prop() helper?: string;\n\n  /**\n   * Update the native textarea element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    this.roadchange.emit({ value: this.value });\n    this.roadChange.emit({ value: this.value });\n  }\n\n  /**\n   * Emitted when a keyboard input occurred.\n   */\n  @Event() roadinput!: EventEmitter<KeyboardEvent>;\n  /** @internal */\n  @Event() roadInput!: EventEmitter<KeyboardEvent>;\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    value: string | undefined | null\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    value: string | undefined | null\n  }>;\n\n  /**\n   * Emitted when the textarea loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the textarea has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  private getValue(): string {\n    return this.value || '';\n  }\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n    this.roadinput.emit(ev as KeyboardEvent);\n    this.roadInput.emit(ev as KeyboardEvent);\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  render() {\n    const value = this.getValue();\n    const labelId = this.textareaId + '-label';\n    const hasValueClass = this.value !== '' ? 'has-value' : '';\n    const noResizeClass = this.resize == false ? 'no-resize' : '';\n    const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null} class={this.sizes && `input-${this.sizes}`}>\n        <textarea\n          class={`form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`}\n          id={this.textareaId}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-labelledby={labelId}\n          disabled={this.disabled}\n          autoCapitalize={this.autocapitalize}\n          autoFocus={this.autofocus}\n          enterKeyHint={this.enterkeyhint}\n          inputMode={this.inputmode}\n          maxLength={this.maxlength}\n          minLength={this.minlength}\n          name={this.name}\n          placeholder={this.placeholder}\n          readOnly={this.readonly}\n          required={this.required}\n          value={value}\n          spellcheck={this.spellcheck}\n          cols={this.cols}\n          rows={this.rows}\n          wrap={this.wrap}\n          onInput={this.onInput}\n          onBlur={this.onBlur}\n          onFocus={this.onFocus}\n        >\n        </textarea>\n        <label class=\"form-label\" id={labelId} htmlFor={this.textareaId}>{this.label}</label>\n        {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n        {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n      </Host>\n    );\n  }\n\n}\n\nlet textareaIds = 0;\n"],"mappings":"yDAAA,MAAMA,EAAc,i5GACpB,MAAAC,EAAeD,E,MCMFE,EAAQ,MALrB,WAAAC,CAAAC,G,kTAUUC,KAAAC,WAAqB,iBAAiBC,MAKtCF,KAAAG,eAAyB,OAKzBH,KAAAI,UAAqB,MAKrBJ,KAAAK,SAAoB,MA4BpBL,KAAAM,KAAeN,KAAKC,WAUnBD,KAAAO,MAAqB,KAKtBP,KAAAQ,SAAoB,MAKpBR,KAAAS,SAAoB,MAKpBT,KAAAU,WAAsB,MAKpBV,KAAAW,OAAkB,KAoBHX,KAAAY,MAAwB,GAKzCZ,KAAAa,MAAgB,GAAGb,KAAKC,mBAyDxBD,KAAAc,QAAWC,IACjB,MAAMC,EAAQD,EAAGE,OACjB,GAAID,EAAO,CACThB,KAAKY,MAAQI,EAAMJ,OAAS,E,CAE9BZ,KAAKkB,UAAUC,KAAKJ,GACpBf,KAAKoB,UAAUD,KAAKJ,EAAoB,EAGlCf,KAAAqB,OAAS,KACfrB,KAAKsB,SAASH,OACdnB,KAAKuB,SAASJ,MAAM,EAGdnB,KAAAwB,QAAU,KAChBxB,KAAKyB,UAAUN,OACfnB,KAAK0B,UAAUP,MAAM,C,CAzDb,YAAAQ,GACR3B,KAAK4B,WAAWT,KAAK,CAAEP,MAAOZ,KAAKY,QACnCZ,KAAK6B,WAAWV,KAAK,CAAEP,MAAOZ,KAAKY,O,CAmC7B,QAAAkB,GACN,OAAO9B,KAAKY,OAAS,E,CAsBvB,MAAAmB,GACE,MAAMnB,EAAQZ,KAAK8B,WACnB,MAAME,EAAUhC,KAAKC,WAAa,SAClC,MAAMgC,EAAgBjC,KAAKY,QAAU,GAAK,YAAc,GACxD,MAAMsB,EAAgBlC,KAAKW,QAAU,MAAQ,YAAc,GAC3D,MAAMwB,EAAiBnC,KAAKoC,QAAUC,WAAarC,KAAKoC,QAAU,GAAK,aAAe,GAEtF,OACEE,EAACC,EAAI,CAAAC,IAAA,2DAAgBxC,KAAKK,SAAW,OAAS,KAAMoC,MAAOzC,KAAKO,OAAS,SAASP,KAAKO,SACrF+B,EAAA,YAAAE,IAAA,2CACEC,MAAO,iCAAiCR,KAAiBC,KAAiBC,IAC1EO,GAAI1C,KAAKC,WAAU,gBACJD,KAAKK,SAAW,OAAS,KAAI,kBAC3B2B,EACjB3B,SAAUL,KAAKK,SACfsC,eAAgB3C,KAAKG,eACrByC,UAAW5C,KAAKI,UAChByC,aAAc7C,KAAK8C,aACnBC,UAAW/C,KAAKgD,UAChBC,UAAWjD,KAAKkD,UAChBC,UAAWnD,KAAKoD,UAChB9C,KAAMN,KAAKM,KACX+C,YAAarD,KAAKqD,YAClBC,SAAUtD,KAAKQ,SACfC,SAAUT,KAAKS,SACfG,MAAOA,EACPF,WAAYV,KAAKU,WACjB6C,KAAMvD,KAAKuD,KACXC,KAAMxD,KAAKwD,KACXC,KAAMzD,KAAKyD,KACX3C,QAASd,KAAKc,QACdO,OAAQrB,KAAKqB,OACbG,QAASxB,KAAKwB,UAGhBc,EAAA,SAAAE,IAAA,2CAAOC,MAAM,aAAaC,GAAIV,EAAS0B,QAAS1D,KAAKC,YAAaD,KAAKa,OACtEb,KAAKoC,OAASpC,KAAKoC,QAAU,IAAME,EAAA,KAAAE,IAAA,2CAAGC,MAAM,oBAAoBzC,KAAKoC,OACrEpC,KAAK2D,QAAU3D,KAAK2D,SAAW,IAAMrB,EAAA,KAAAE,IAAA,2CAAGC,MAAM,UAAUzC,KAAK2D,Q,wDAOtE,IAAIzD,EAAc,E","ignoreList":[]}