@roadtrip/components 3.52.0 → 3.53.1

package/dist/esm/road-badge_14.entry.js

@@ -148,6 +148,8 @@ const Counter = class {
         this.leftIconClasses = "";
         this.rightIconClasses = "";
         this.isDustbinVisible = false;
+        this.decreaseAriaLabel = "";
+        this.increaseAriaLabel = "";
         /**
          * The id of counter
          */
@@ -172,6 +174,22 @@ const Counter = class {
       * Set to `true` to not modify the input field
       */
         this.readonly = false;
+        /**
+       * Accessible label for the dustbin button when `dustbin` is enabled and value equals `min`.
+       */
+        this.dustbinLabelA11y = "Supprimer l'article";
+        /**
+         * Accessible label for the decrease button (suffix `, minimum {min}` is appended when not in dustbin mode).
+         */
+        this.decreaseLabelA11y = 'Diminuer la quantité';
+        /**
+         * Accessible label for the increase button (suffix `, maximum {max}` is appended when not in dustbin mode).
+         */
+        this.increaseLabelA11y = 'Augmenter la quantité';
+        /**
+        * Accessible label for the input field.
+        */
+        this.quantityLabelA11y = 'Quantité';
         this.setIsDustbinVisible = (valueInput) => {
             if (valueInput > this.min) {
                 this.isDustbinVisible = false;
@@ -243,6 +261,23 @@ const Counter = class {
     onValueChange(valueInput) {
         this.setIsDustbinVisible(valueInput);
         this.setIconsClasses(valueInput);
+        this.updateAriaLabels(valueInput);
+    }
+    onA11yLabelChange() {
+        var _a, _b, _c;
+        const currentValue = parseInt((_c = (_b = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : String(this.value));
+        this.updateAriaLabels(currentValue);
+    }
+    updateAriaLabels(valueInput) {
+        const isDustbin = this.isDustbinVisible || (valueInput <= this.min && this.dustbin);
+        this.decreaseAriaLabel = isDustbin
+            ? this.dustbinLabelA11y
+            : this.min > 0
+                ? `${this.decreaseLabelA11y}, minimum ${this.min}`
+                : this.decreaseLabelA11y;
+        this.increaseAriaLabel = this.max
+            ? `${this.increaseLabelA11y}, maximum ${this.max}`
+            : this.increaseLabelA11y;
     }
     setIconsClasses(valueInput) {
         valueInput = valueInput !== null && valueInput !== void 0 ? valueInput : parseInt(this.inputElement.querySelector('input').value);
@@ -298,12 +333,15 @@ const Counter = class {
     }
     render() {
         const dataCi = this.isDustbinVisible ? "road-dustbin" : "";
-        return (h("road-input-group", { key: '841d49424a25f1f9a14c928b24ea9edd629651a0', class: this.size && `counter-${this.size}` }, h("road-button", { key: '902ba9dce53b2b2b050e35a885b92fb16a42c47a', slot: "prepend", size: this.size, onClick: this.decrease, class: this.leftIconClasses, disabled: this.readonly, "data-cy": "road-decrease" }, h("road-icon", { key: 'ee45dbae5079038698d0eb8509d55138988ffe8b', name: this.isDustbinVisible ? "delete-forever" : "navigation-add-less", ref: (el) => this.iconCounterLess = el, size: this.size, "data-cy": dataCi, role: "button" })), h("road-input", { key: '14e20d6aacc8562a6a3673cd381a539cfd3334ff', ref: (el) => this.inputElement = el, type: "number", min: this.min.toString(), max: (this.max && this.max.toString()), step: this.step, value: this.value, onRoadChange: this.onRoadChange, onKeyUp: this.checkValue, "data-cy": "road-input-counter", readonly: this.readonly, label: "Quantit\u00E9" }), h("road-button", { key: 'fb82377f50ab44d6a6f32669af93e8af30908c67', slot: "append", size: this.size, onClick: this.increase, class: this.rightIconClasses, disabled: this.readonly, "data-cy": "road-increase" }, h("road-icon", { key: 'ea4d77b9167b9b703037d82c51e2f82fc48e5f69', name: "navigation-add-more", size: this.size, role: "button" }))));
+        return (h("road-input-group", { key: '59731a94e0d7c0d8774556692dbdc4b1f626e635', class: this.size && `counter-${this.size}` }, h("road-button", { key: '95dcb39bb1fb496f74786095af6b5e2d7a75da00', slot: "prepend", size: this.size, onClick: this.decrease, class: this.leftIconClasses, disabled: this.readonly || (this.leftIconClasses === "disabled"), "aria-label": this.decreaseAriaLabel, "data-cy": "road-decrease" }, h("road-icon", { key: '49146a633a0f249b8cc13df674ca8e4ed1825912', name: this.isDustbinVisible ? "delete-forever" : "navigation-add-less", ref: (el) => this.iconCounterLess = el, size: this.size, "data-cy": dataCi, "aria-hidden": "true" })), h("road-input", { key: 'c84bbe30befc22c50897a0765ea2364cd17f86f8', ref: (el) => this.inputElement = el, type: "number", min: this.min.toString(), max: (this.max && this.max.toString()), step: this.step, value: this.value, onRoadChange: this.onRoadChange, onKeyUp: this.checkValue, "data-cy": "road-input-counter", readonly: this.readonly, label: "Quantit\u00E9", "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-label": this.quantityLabelA11y, "aria-live": "polite" }), h("road-button", { key: 'c6518e4cd30bed6667587766a950936e91e7bb9e', slot: "append", size: this.size, onClick: this.increase, class: this.rightIconClasses, disabled: this.readonly || (this.rightIconClasses === "disabled"), "aria-label": this.increaseAriaLabel, "data-cy": "road-increase" }, h("road-icon", { key: '285031ad919ebbb4b1659aba873f99a5748ef375', name: "navigation-add-more", size: this.size, "aria-hidden": "true" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
         "value": ["onValueChange"],
-        "readonly": ["onValueChange"]
+        "readonly": ["onValueChange"],
+        "decreaseLabelA11y": ["onA11yLabelChange"],
+        "increaseLabelA11y": ["onA11yLabelChange"],
+        "dustbinLabelA11y": ["onA11yLabelChange"]
     }; }
 };
 let counterIds = 0;
@@ -1889,7 +1927,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   return trap;
 };
 
-const drawerCss = ":host{--background:var(--road-surface);--color:var(--road-on-surface);--header-icon:var(--road-on-surface);--header-color:var(--road-on-surface);--header-background:var(--road-surface);--header-delimiter:0;--back-chevron-color:var(--road-icon);--max-height:auto;--z-index:10;position:fixed;top:0;left:0;z-index:var(--z-index);display:flex;justify-content:flex-start;width:100%;height:100%;overflow:hidden;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--color);visibility:hidden !important;opacity:0;transition:opacity 0.3s ease-out, visibility 0s linear 0.3s}.drawer-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer;background:var(--road-overlay)}.road-drawer-wrapper{width:100%}.road-drawer-wrapper .drawer-dialog{position:absolute;right:0;width:100%;pointer-events:none;transition:transform 0.3s ease-out;transform:translateX(-100%)}:host(.drawer-right){justify-content:flex-end}:host(.drawer-right) .road-drawer-wrapper .drawer-dialog{transform:translateX(100%)}:host(.drawer-left) .road-drawer-wrapper .drawer-dialog{left:0}:host(.drawer-bottom){align-items:flex-end}:host(.drawer-bottom) .road-drawer-wrapper .drawer-dialog{width:100%;max-height:var(--max-height);transform:translateY(100%)}:host(.drawer-bottom) .drawer-content{height:auto}.drawer-content{position:relative;display:flex;flex-direction:column;width:100%;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;pointer-events:auto;background-color:var(--background);background-clip:padding-box;box-shadow:var(--road-elevation-hight)}.drawer-header{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;color:var(--header-color);background:var(--header-background);border-color:var(--road-grey-300);border-style:solid;border-width:var(--header-delimiter)}.drawer-header road-icon{flex-shrink:0;color:var(--header-icon)}.drawer-footer{padding:var(--road-spacing-05);background-color:var(--road-surface)}.drawer-footer.remove-padding{padding:0}.drawer-header-inverse{--header-icon:var(--road-on-primary);--header-color:var(--road-on-primary);--header-background:var(--road-primary-variant);margin-bottom:2.5rem}.drawer-action,.drawer-close{display:flex;align-items:center;justify-content:center;padding:0.5rem;font-family:inherit;font-size:0.875rem;color:inherit;cursor:pointer;background:transparent;border:0;appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.drawer-header:not(.drawer-header-inverse) .drawer-action road-icon{color:var(--back-chevron-color)}.drawer-action~.drawer-title,.drawer-close~.drawer-title{padding-left:0}.drawer-action-left,.drawer-close-left{margin-right:auto}.drawer-title{display:flex;flex-grow:1;align-items:center;justify-content:center;padding-left:3.5rem;margin:0;font-size:var(--road-body-medium)}.drawer-body{overflow-y:auto;padding:0 var(--road-spacing-05) var(--road-spacing-05)}.drawer-body.remove-padding{padding:0}:host(.drawer-right) .drawer-body,:host(.drawer-left) .drawer-body{height:calc(100vh - 3.5rem)}.drawer-inner{padding:0 1rem 2.5rem}@media (min-width: 768px){.drawer-inner{padding:0 2rem 2.5rem}.drawer-body{padding:0 var(--road-spacing-08) var(--road-spacing-05)}.drawer-body.remove-padding{padding:0}.drawer-footer{padding:var(--road-spacing-05) var(--road-spacing-08)}.drawer-footer.remove-padding{padding:0}}:host(.drawer-open){visibility:visible !important;opacity:1;transition:opacity 0.3s ease-out, visibility 0s linear 0s}:host(.drawer-open) .road-drawer-wrapper .drawer-dialog{transform:none}";
+const drawerCss = ":host{--background:var(--road-surface);--color:var(--road-on-surface);--header-icon:var(--road-on-surface);--header-color:var(--road-on-surface);--header-background:var(--road-surface);--header-delimiter:0;--back-chevron-color:var(--road-icon);--max-height:auto;--z-index:10;position:fixed;top:0;left:0;z-index:var(--z-index);display:flex;justify-content:flex-start;width:100%;height:100%;overflow:hidden;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--color);visibility:hidden !important;transition:visibility 0s linear 0.3s}.drawer-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer;background:var(--road-overlay);opacity:0}.road-drawer-wrapper{width:100%}.road-drawer-wrapper .drawer-dialog{position:absolute;right:0;width:100%;pointer-events:none;transition:transform 0.3s ease-out;opacity:0;transform:none}:host(.drawer-right){justify-content:flex-end}:host(.drawer-right) .road-drawer-wrapper .drawer-dialog{transform:translateX(100%)}:host(.drawer-left) .road-drawer-wrapper .drawer-dialog{left:0;transform:translateX(-100%)}:host(.drawer-bottom){align-items:flex-end}:host(.drawer-bottom) .road-drawer-wrapper .drawer-dialog{width:100%;max-height:var(--max-height);bottom:0;transform:translateY(100%)}:host(.drawer-bottom) .drawer-content{height:auto}.drawer-content{position:relative;display:flex;flex-direction:column;width:100%;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;pointer-events:auto;background-color:var(--background);background-clip:padding-box;box-shadow:var(--road-elevation-hight)}.drawer-header{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;color:var(--header-color);background:var(--header-background);border-color:var(--road-grey-300);border-style:solid;border-width:var(--header-delimiter)}.drawer-header road-icon{flex-shrink:0;color:var(--header-icon)}.drawer-footer{padding:var(--road-spacing-05);background-color:var(--road-surface)}.drawer-footer.remove-padding{padding:0}.drawer-header-inverse{--header-icon:var(--road-on-primary);--header-color:var(--road-on-primary);--header-background:var(--road-primary-variant);margin-bottom:2.5rem}.drawer-action,.drawer-close{display:flex;align-items:center;justify-content:center;padding:0.5rem;font-family:inherit;font-size:0.875rem;color:inherit;cursor:pointer;background:transparent;border:0;appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.drawer-header:not(.drawer-header-inverse) .drawer-action road-icon{color:var(--back-chevron-color)}.drawer-action~.drawer-title,.drawer-close~.drawer-title{padding-left:0}.drawer-action-left,.drawer-close-left{margin-right:auto}.drawer-title{display:flex;flex-grow:1;align-items:center;justify-content:center;padding-left:3.5rem;margin:0;font-size:var(--road-body-medium)}.drawer-body{overflow-y:auto;padding:0 var(--road-spacing-05) var(--road-spacing-05)}.drawer-body.remove-padding{padding:0}:host(.drawer-right) .drawer-body,:host(.drawer-left) .drawer-body{height:calc(100vh - 3.5rem)}.drawer-inner{padding:0 1rem 2.5rem}@media (min-width: 768px){.drawer-inner{padding:0 2rem 2.5rem}.drawer-body{padding:0 var(--road-spacing-08) var(--road-spacing-05)}.drawer-body.remove-padding{padding:0}.drawer-footer{padding:var(--road-spacing-05) var(--road-spacing-08)}.drawer-footer.remove-padding{padding:0}}:host(.drawer-open){visibility:visible !important;transition:visibility 0s linear 0s}:host(.drawer-open) .drawer-overlay,:host(.drawer-open) .drawer-dialog,:host(.drawer-open) .road-drawer-wrapper .drawer-dialog{opacity:1;transform:translateY(0) translateX(0)}@media (prefers-reduced-motion: no-preference){:host(.drawer-open) .drawer-overlay,:host(.drawer-open) .drawer-dialog{animation:road-drawer-fade-in 0.3s ease-out both}.drawer-overlay,.drawer-dialog{animation:road-drawer-fade-out 0.3s ease-out both}@keyframes road-drawer-fade-in{from{opacity:0}to{opacity:1}}@keyframes road-drawer-fade-out{from{opacity:1}to{opacity:0}}}";
 const RoadDrawerStyle0 = drawerCss;
 
 const Drawer = class {
@@ -1938,6 +1976,11 @@ const Drawer = class {
          * Footer Content state
          */
         this.hasFooterContent = false;
+        /**
+         * Used to ensure open transitions run when the drawer
+         * is initially mounted with `isOpen=true`.
+         */
+        this.hasMounted = false;
         this.onFooterSlotChange = (event) => {
             const slot = event.target;
             this.hasFooterContent = slot.assignedElements().length > 0;
@@ -2034,18 +2077,19 @@ const Drawer = class {
         }, 100); // Timeout is used to ensure the drawer has been rendered when client wants to update the property at the same time
     }
     handleOpen(openValue) {
-        var _a;
+        var _a, _b;
+        const dialog = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.drawer-dialog');
         if (openValue === true) {
             this.onOpen.emit();
-            this.el.addEventListener("transitionend", () => {
+            dialog === null || dialog === void 0 ? void 0 : dialog.addEventListener("transitionend", () => {
                 if (this.enabledFocusTrap) {
                     this.getOrCreateFocusTrap().activate();
                 }
             }, { once: true });
         }
         else {
-            (_a = this.focusTrap) === null || _a === void 0 ? void 0 : _a.deactivate();
-            this.el.addEventListener("transitionend", () => {
+            (_b = this.focusTrap) === null || _b === void 0 ? void 0 : _b.deactivate();
+            dialog === null || dialog === void 0 ? void 0 : dialog.addEventListener("transitionend", () => {
                 this.onClose.emit();
                 this.el.shadowRoot &&
                     (this.el.shadowRoot.querySelector(".drawer-body").scrollTop = 0);
@@ -2064,9 +2108,14 @@ const Drawer = class {
         this.el.querySelectorAll('[data-dismiss="modal"]').forEach((item) => {
             item.addEventListener("click", () => this.close());
         });
-        if (this.isOpen) {
-            this.handleOpen(true);
-        }
+        // Wait for the first paint so the "closed" transform can be applied,
+        // then open on the next frame to allow CSS transitions to run.
+        requestAnimationFrame(() => {
+            this.hasMounted = true;
+            if (this.isOpen) {
+                this.handleOpen(true);
+            }
+        });
     }
     getOrCreateFocusTrap(elements) {
         var _a;
@@ -2096,7 +2145,8 @@ const Drawer = class {
     }
     render() {
         var _a, _b, _c;
-        const drawerIsOpenClass = this.isOpen ? "drawer-open" : "";
+        const isEffectivelyOpen = this.isOpen && this.hasMounted;
+        const drawerIsOpenClass = isEffectivelyOpen ? "drawer-open" : "";
         const removePaddingClass = this.removePadding ? "remove-padding" : "";
         const inverseHeaderClass = this.hasInverseHeader
             ? "drawer-header-inverse"
@@ -2108,7 +2158,7 @@ const Drawer = class {
         const backIconElement = this.hasBackIcon ? (h("button", { type: "button", class: "drawer-action", "aria-label": ariaLabelBack, onClick: this.onClickBack }, h("road-icon", { icon: navigationChevron, rotate: "180" }), this.backText)) : null;
         const closeIconElement = this.hasCloseIcon ? (h("button", { type: "button", class: "drawer-close", onClick: this.onClick, "aria-label": ariaLabelClose }, h("road-icon", { icon: navigationClose, "aria-hidden": "true" }))) : null;
         const drawerWidthValue = this.position === "bottom" ? "100%" : `${this.drawerWidth}px`;
-        return (h(Host, { key: 'c7eb453776139d160c5304536e79ab0af0232290', class: `${drawerIsOpenClass}  drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, h("div", { key: 'af1efa519efd2b12f49475d5a84c90767beeacf0', class: "road-drawer-wrapper" }, h("div", { key: 'c43ce7162e3616b51b9e668a459d8c729b1f414f', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { key: '5c69c051e7c1eb827d2df487f58f8c5237388a7f', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document" }, h("div", { key: 'fa483418e0660b8c2fdb79838581650e5f0b1174', class: "drawer-content" }, h("header", { key: 'cdc22b61772f7f425f4d5f41c2ceb3d6b2d8478b', class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle ? (h("h2", { class: "drawer-title" }, this.drawerTitle)) : (h("div", { class: "drawer-title" }, h("slot", { name: "title" }))), closeIconElement), h("div", { key: '6d44de12a434ea729754187aca476c78e6e0e7a7', class: `drawer-body ${removePaddingClass}` }, h("slot", { key: 'dfe2557f8ddffb9a8b6b9ed41661c726c650bd6b' })), h("footer", { key: '7cd86ddeb089a5b06649a993a6315a317b543863', class: `drawer-footer ${removePaddingClass}`, hidden: !this.hasFooterContent }, h("slot", { key: '58fa205ff641909acb5d1d12d660024e50ab4058', name: "footer", onSlotchange: this.onFooterSlotChange })))))));
+        return (h(Host, { key: 'ecd747ab4372bed7cefb4647dfaf9404c7206b53', class: `${drawerIsOpenClass}  drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, h("div", { key: '1d5760b82a095696e30867669f607d5c3608c308', class: "road-drawer-wrapper" }, h("div", { key: '4d519361b71dd228e7a35a1ee20f741911e0752f', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { key: '36dc3dac85b6784b66f5a12476be608d2b43c40c', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document" }, h("div", { key: '74a7d03928a6919fa6cd95c6a66a61c9bf225e20', class: "drawer-content" }, h("header", { key: 'f4c543d1ea08ee62ea3a9f93e34499a7f5c81fa5', class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle ? (h("h2", { class: "drawer-title" }, this.drawerTitle)) : (h("div", { class: "drawer-title" }, h("slot", { name: "title" }))), closeIconElement), h("div", { key: '796030c5a5cf6661aa4c1f4c10cc039e0e550d4c', class: `drawer-body ${removePaddingClass}` }, h("slot", { key: '8c0bdfa660ace789ea5a01ada7ce3cd9c5cc3d4a' })), h("footer", { key: 'a52a747ea4c5de885fc440ac4f8247f5c9ab88b0', class: `drawer-footer ${removePaddingClass}`, hidden: !this.hasFooterContent }, h("slot", { key: '0bef80d08a9e6078f025768eb88f93df86517fb9', name: "footer", onSlotchange: this.onFooterSlotChange })))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {