@roadtrip/components 3.41.1 → 3.42.0

package/dist/collection/components/card/card.stories.js

@@ -1,104 +1,359 @@
-import { html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
 
 export default {
-  title: 'Listing/Card',
-  component: 'road-card',
+  title: "Listing/Card",
+  component: "road-card",
   parameters: {
     backgrounds: {
-      default: 'grey',
+      default: "grey",
     },
     actions: {
-      handles: ['roadcardclick'],
+      handles: ["roadcardclick"],
     },
   },
   argTypes: {
     elevation: {
-      options: ['none', 'lowest', 'average'],
-      control: { type: 'select' },
-      description: 'Defines the elevation (shadow effect) of the card.',
+      options: ["none", "lowest", "average"],
+      control: { type: "select" },
+      description: "Defines the elevation (shadow effect) of the card.",
       table: {
-        defaultValue: { summary: 'none' },
+        defaultValue: { summary: "none" },
       },
     },
+    button: {
+      control: "boolean",
+      description:
+        "If `true`, a button tag will be rendered and the card will be tappable.",
+      table: {
+        defaultValue: { summary: "true" },
+      },
+    },
+    disabled: {
+      control: "boolean",
+      description:
+        "If `true`, the card is disabled and cannot be clicked. * Only applies when in button mode (button=true and no href).",
+    },
   },
   args: {
-    elevation: 'none',
+    elevation: "none",
+    button: true,
+    disabled: false,
   },
 };
 
 const Template = (args) => html`
-<road-grid>
-  <road-row>
-    <road-col class="col-4 col-md-3 col-lg-2">
-      <road-card button value="125" elevation="${ifDefined(args.elevation)}" @roadcardclick=${args.roadcardclick}>
-        <road-label>125</road-label>
-      </road-card>
-    </road-col>
-    <road-col class="col-4 col-md-3 col-lg-2">
-      <road-card button value="135" elevation="${ifDefined(args.elevation)}" @roadcardclick=${args.roadcardclick}>
-        <road-label>135</road-label>
-      </road-card>
-    </road-col>
-    <road-col class="col-4 col-md-3 col-lg-2">
-      <road-card button value="145" elevation="${ifDefined(args.elevation)}" @roadcardclick=${args.roadcardclick}>
-        <road-label>145</road-label>
-      </road-card>
-    </road-col>
-    <road-col class="col-4 col-md-3 col-lg-2">
-      <road-card button value="155" elevation="${ifDefined(args.elevation)}" @roadcardclick=${args.roadcardclick}>
-        <road-label>155</road-label>
-      </road-card>
-    </road-col>
-    <road-col class="col-4 col-md-3 col-lg-2">
-      <road-card button value="165" elevation="${ifDefined(args.elevation)}" @roadcardclick=${args.roadcardclick}>
-        <road-label>165</road-label>
-      </road-card>
-    </road-col>
-    <road-col class="col-4 col-md-3 col-lg-2">
-      <road-card button value="175" elevation="${ifDefined(args.elevation)}" @roadcardclick=${args.roadcardclick}>
-        <road-label>175</road-label>
-      </road-card>
-    </road-col>
-  </road-row>
-</road-grid>
+  <road-grid>
+    <road-row>
+      <road-col class="col-4 col-md-3 col-lg-2">
+        <road-card
+          button="${ifDefined(args.button)}"
+          disabled="${ifDefined(args.disabled)}"
+          value="125"
+          elevation="${ifDefined(args.elevation)}"
+          @roadcardclick=${args.roadcardclick}
+        >
+          <road-label>125</road-label>
+        </road-card>
+      </road-col>
+      <road-col class="col-4 col-md-3 col-lg-2">
+        <road-card
+          button="${ifDefined(args.button)}"
+          disabled="${ifDefined(args.disabled)}"
+          value="135"
+          elevation="${ifDefined(args.elevation)}"
+          @roadcardclick=${args.roadcardclick}
+        >
+          <road-label>135</road-label>
+        </road-card>
+      </road-col>
+      <road-col class="col-4 col-md-3 col-lg-2">
+        <road-card
+          button="${ifDefined(args.button)}"
+          disabled="${ifDefined(args.disabled)}"
+          value="145"
+          elevation="${ifDefined(args.elevation)}"
+          @roadcardclick=${args.roadcardclick}
+        >
+          <road-label>145</road-label>
+        </road-card>
+      </road-col>
+      <road-col class="col-4 col-md-3 col-lg-2">
+        <road-card
+          button="${ifDefined(args.button)}"
+          disabled="${ifDefined(args.disabled)}"
+          value="155"
+          elevation="${ifDefined(args.elevation)}"
+          @roadcardclick=${args.roadcardclick}
+        >
+          <road-label>155</road-label>
+        </road-card>
+      </road-col>
+      <road-col class="col-4 col-md-3 col-lg-2">
+        <road-card
+          button="${ifDefined(args.button)}"
+          disabled="${ifDefined(args.disabled)}"
+          value="165"
+          elevation="${ifDefined(args.elevation)}"
+          @roadcardclick=${args.roadcardclick}
+        >
+          <road-label>165</road-label>
+        </road-card>
+      </road-col>
+      <road-col class="col-4 col-md-3 col-lg-2">
+        <road-card
+          button="${ifDefined(args.button)}"
+          disabled="${ifDefined(args.disabled)}"
+          value="175"
+          elevation="${ifDefined(args.elevation)}"
+          @roadcardclick=${args.roadcardclick}
+        >
+          <road-label>175</road-label>
+        </road-card>
+      </road-col>
+    </road-row>
+  </road-grid>
 `;
 
 export const Value = Template.bind({});
 Value.args = {
-  elevation: 'average',
+  elevation: "average",
+  button: true,
+  disabled: false,
 };
 
 export const Vehicle = (args) => html`
-<road-grid>
-  <road-row>
-    <road-col class="col-6 col-md-4 col-lg-3">
-      <road-card button value="car" elevation="${ifDefined(args.elevation)}" @roadcardclick=${args.roadcardclick}>
-        <road-icon name="vehicle-car" size="3x" role="img"></road-icon>
-        <road-label>Car</road-label>
-      </road-card>
-    </road-col>
-    <road-col class="col-6 col-md-4 col-lg-3">
-      <road-card button value="4x4" elevation="${ifDefined(args.elevation)}" @roadcardclick=${args.roadcardclick}>
-        <road-icon name="vehicle-suv" size="3x" role="img"></road-icon>
-        <road-label>4x4</road-label>
-      </road-card>
-    </road-col>
-    <road-col class="col-6 col-md-4 col-lg-3">
-      <road-card button value="truck" elevation="${ifDefined(args.elevation)}" @roadcardclick=${args.roadcardclick}>
-        <road-icon name="vehicle-pickup-van" size="3x" role="img"></road-icon>
-        <road-label>Truck</road-label>
-      </road-card>
-    </road-col>
-    <road-col class="col-6 col-md-4 col-lg-3">
-      <road-card button value="bike" elevation="${ifDefined(args.elevation)}" @roadcardclick=${args.roadcardclick}>
-        <road-icon name="vehicle-moto" size="3x" role="img"></road-icon>
-        <road-label>Bike</road-label>
-      </road-card>
-    </road-col>
-  </road-row>
-</road-grid>
+  <road-grid>
+    <road-row>
+      <road-col class="col-6 col-md-4 col-lg-3">
+        <road-card
+          button="${ifDefined(args.button)}"
+          disabled="${ifDefined(args.disabled)}"
+          value="car"
+          elevation="${ifDefined(args.elevation)}"
+          @roadcardclick=${args.roadcardclick}
+        >
+          <road-icon name="vehicle-car" size="3x" role="img"></road-icon>
+          <road-label>Car</road-label>
+        </road-card>
+      </road-col>
+      <road-col class="col-6 col-md-4 col-lg-3">
+        <road-card
+          button="${ifDefined(args.button)}"
+          disabled="${ifDefined(args.disabled)}"
+          value="4x4"
+          elevation="${ifDefined(args.elevation)}"
+          @roadcardclick=${args.roadcardclick}
+        >
+          <road-icon name="vehicle-suv" size="3x" role="img"></road-icon>
+          <road-label>4x4</road-label>
+        </road-card>
+      </road-col>
+      <road-col class="col-6 col-md-4 col-lg-3">
+        <road-card
+          button="${ifDefined(args.button)}"
+          disabled="${ifDefined(args.disabled)}"
+          value="truck"
+          elevation="${ifDefined(args.elevation)}"
+          @roadcardclick=${args.roadcardclick}
+        >
+          <road-icon name="vehicle-pickup-van" size="3x" role="img"></road-icon>
+          <road-label>Truck</road-label>
+        </road-card>
+      </road-col>
+      <road-col class="col-6 col-md-4 col-lg-3">
+        <road-card
+          button="${ifDefined(args.button)}"
+          disabled="${ifDefined(args.disabled)}"
+          value="bike"
+          elevation="${ifDefined(args.elevation)}"
+          @roadcardclick=${args.roadcardclick}
+        >
+          <road-icon name="vehicle-moto" size="3x" role="img"></road-icon>
+          <road-label>Bike</road-label>
+        </road-card>
+      </road-col>
+    </road-row>
+  </road-grid>
 `;
 Vehicle.args = {
-  elevation: 'average',
+  elevation: "average",
+  button: true,
+  disabled: false,
+};
+
+export const SelectTyreBrand = (args) => html`
+  <div class="container-max mb-24">
+    <road-grid>
+      <road-row>
+        Just a card:
+        <road-col class="col-12 col-md-6 col-lg-4">
+          <road-card
+            id="221"
+            elevation="${ifDefined(args.elevation)}"
+            @roadcardclick=${args.roadcardclick}
+          >
+            <road-label>GOODYEAR</road-label>
+          </road-card>
+        </road-col>
+        A card button disabled (not selected)
+        <road-col class="col-12 col-md-6 col-lg-4">
+          <road-card
+            button
+            disabled
+            id="178"
+            elevation="${ifDefined(args.elevation)}"
+            @roadcardclick=${args.roadcardclick}
+          >
+            <road-label>CONTINENTAL</road-label>
+          </road-card>
+        </road-col>
+        A card button disabled (selected)
+        <road-col class="col-12 col-md-6 col-lg-4">
+          <road-card
+            button
+            selected
+            disabled
+            id="200"
+            elevation="${ifDefined(args.elevation)}"
+            @roadcardclick=${args.roadcardclick}
+          >
+            <road-label>HANKOOK</road-label>
+          </road-card>
+        </road-col>
+        Test the different states (hover, focus, selected):
+        <road-col class="col-12 col-md-6 col-lg-4">
+          <road-card
+            button="${ifDefined(args.button)}"
+            disabled="${ifDefined(args.disabled)}"
+            id="344"
+            elevation="${ifDefined(args.elevation)}"
+            @roadcardclick=${args.roadcardclick}
+          >
+            <img
+              src="https://cdn.dam.norauto.fr/sg-tyre-kumho.png?com=refresh"
+              alt="kumho"
+            />
+          </road-card>
+        </road-col>
+        <road-col class="col-12 col-md-6 col-lg-4">
+          <road-card
+            button="${ifDefined(args.button)}"
+            disabled="${ifDefined(args.disabled)}"
+            id="5bd"
+            elevation="${ifDefined(args.elevation)}"
+            @roadcardclick=${args.roadcardclick}
+          >
+            <img
+              src="https://cdn.dam.norauto.fr/sg-tyre-fortuna.png?com=refresh"
+              alt="fortuna"
+            />
+          </road-card>
+        </road-col>
+        <road-col class="col-12 col-md-6 col-lg-4">
+          <road-card
+            button="${ifDefined(args.button)}"
+            disabled="${ifDefined(args.disabled)}"
+            id="a24"
+            elevation="${ifDefined(args.elevation)}"
+            @roadcardclick=${args.roadcardclick}
+          >
+            <img
+              src="https://cdn.dam.norauto.fr/sg-tyre-barum.png?com=refresh"
+              alt="barum"
+            />
+          </road-card>
+        </road-col>
+        <road-col class="col-12 col-md-6 col-lg-4">
+          <road-card
+            button="${ifDefined(args.button)}"
+            disabled="${ifDefined(args.disabled)}"
+            id="0eg"
+            elevation="${ifDefined(args.elevation)}"
+            @roadcardclick=${args.roadcardclick}
+          >
+            <img
+              src="https://cdn.dam.norauto.fr/sg-tyre-minerva.png?com=refresh"
+              alt="minerva"
+            />
+          </road-card>
+        </road-col>
+        <road-col class="col-12 col-md-6 col-lg-4">
+          <road-card
+            button="${ifDefined(args.button)}"
+            disabled="${ifDefined(args.disabled)}"
+            id="a66"
+            elevation="${ifDefined(args.elevation)}"
+            @roadcardclick=${args.roadcardclick}
+          >
+            <img
+              src="https://cdn.dam.norauto.fr/sg-tyre-nexen.png?com=refresh"
+              alt="nexen"
+            />
+          </road-card>
+        </road-col>
+        <road-col class="col-12 col-md-6 col-lg-4">
+          <road-card
+            button="${ifDefined(args.button)}"
+            disabled="${ifDefined(args.disabled)}"
+            id="ce1"
+            elevation="${ifDefined(args.elevation)}"
+            @roadcardclick=${args.roadcardclick}
+          >
+            <img
+              src="https://cdn.dam.norauto.fr/sg-tyre-superia.png?com=refresh"
+              alt="superia"
+            />
+          </road-card>
+        </road-col>
+        <road-col class="col-12 col-md-6 col-lg-4">
+          <road-card
+            button="${ifDefined(args.button)}"
+            disabled="${ifDefined(args.disabled)}"
+            id="176"
+            elevation="${ifDefined(args.elevation)}"
+            @roadcardclick=${args.roadcardclick}
+          >
+            <img
+              src="https://cdn.dam.norauto.fr/sg-tyre-uniroyal.png?com=refresh"
+              alt="uniroyal"
+            />
+          </road-card>
+        </road-col>
+        <road-col class="col-12 col-md-6 col-lg-4">
+          <road-card
+            button="${ifDefined(args.button)}"
+            disabled="${ifDefined(args.disabled)}"
+            id="38c"
+            elevation="${ifDefined(args.elevation)}"
+            @roadcardclick=${args.roadcardclick}
+          >
+            <img
+              src="https://cdn.dam.norauto.fr/sg-tyre-vredestein.png?com=refresh"
+              alt="vredestein"
+            />
+          </road-card>
+        </road-col>
+        <road-col class="col-12 col-md-6 col-lg-4">
+          <road-card
+            button="${ifDefined(args.button)}"
+            disabled="${ifDefined(args.disabled)}"
+            id="282"
+            elevation="${ifDefined(args.elevation)}"
+            @roadcardclick=${args.roadcardclick}
+          >
+            <img
+              src="https://cdn.dam.norauto.fr/sg-tyre-yokohama.png?com=refresh"
+              alt="yokohama"
+            />
+          </road-card>
+        </road-col>
+      </road-row>
+    </road-grid>
+  </div>
+`;
+SelectTyreBrand.args = {
+  elevation: "none",
+  button: true,
+  disabled: false,
 };

package/dist/collection/components/drawer/drawer.css

@@ -135,7 +135,6 @@
   flex-shrink: 0;
   align-items: center;
   justify-content: flex-end;
-  height: 3.5rem;
   color: var(--header-color);
   background: var(--header-background);
   border-color: var(--road-grey-300);
@@ -177,7 +176,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 3.5rem;
   padding: 0.5rem;
   font-family: inherit;
   font-size: 0.875rem;
@@ -211,7 +209,6 @@
   flex-grow: 1;
   align-items: center;
   justify-content: center;
-  height: 3.5rem;
   padding-left: 3.5rem;
   margin: 0;
   font-size: var(--road-body-medium);

package/dist/collection/components/drawer/drawer.js

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { navigationClose, navigationChevron } from "../../../icons";
+import { createFocusTrap } from "focus-trap";
 /**
  * @slot  - Content of the drawer.
  * @slot title - replace the title with a custom title section when `'drawerTitle'` is not set
@@ -16,8 +17,8 @@ export class Drawer {
          */
         this.isOpen = false;
         /**
-       * Set removePadding property to true to remove padding for drawer body
-       */
+         * Set removePadding property to true to remove padding for drawer body
+         */
         this.removePadding = false;
         /**
          * position of the drawer. e.g. left, right, bottom
@@ -88,24 +89,30 @@ export class Drawer {
     handleOpen(openValue) {
         if (openValue === true) {
             this.onOpen.emit();
-            // Focus the first button element after the drawer is opened
-            setTimeout(() => this.focusFirstButton(), 50); // Add a slight delay to ensure the element is rendered
+            // Focus the first button element after the drawer is opened then focus trap
+            setTimeout(() => {
+                var _a;
+                this.focusFirstElement();
+                (_a = this.focusTrap) === null || _a === void 0 ? void 0 : _a.activate();
+            }, 50); // Add a slight delay to ensure the element is rendered
         }
         else {
             this.el.addEventListener('transitionend', () => {
+                var _a;
+                (_a = this.focusTrap) === null || _a === void 0 ? void 0 : _a.deactivate();
                 this.onClose.emit();
                 this.el.shadowRoot && (this.el.shadowRoot.querySelector('.drawer-body').scrollTop = 0);
             }, { once: true });
         }
     }
     /**
-     * Find and focus the first button element in the drawer
+     * Find and focus the first element in the drawer
      */
-    focusFirstButton() {
+    focusFirstElement() {
         var _a;
-        const buttonElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button');
-        if (buttonElement) {
-            buttonElement.focus(); // Focus the first button element
+        const firstElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [contenteditable], [tabindex]:not([tabindex="-1"])')[0];
+        if (firstElement) {
+            firstElement.focus();
         }
     }
     /**
@@ -120,9 +127,18 @@ export class Drawer {
      * Call close function when clicking an element with data-dismiss="modal" attribute
      */
     componentDidLoad() {
+        var _a;
         this.el.querySelectorAll('[data-dismiss="modal"]').forEach(item => {
             item.addEventListener('click', () => this.close());
         });
+        const drawerContent = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".drawer-dialog");
+        this.focusTrap = createFocusTrap(drawerContent, {
+            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"),
+            tabbableOptions: {
+                getShadowRoot: true,
+            },
+        });
     }
     render() {
         var _a, _b, _c, _d;
@@ -138,7 +154,7 @@ export class Drawer {
         const drawerWidthValue = this.position === 'bottom' ? '100%' : `${this.drawerWidth}px`;
         const footerSlotElement = (_d = this.el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('slot[name="footer"]');
         const hasFooterContent = footerSlotElement instanceof HTMLSlotElement && footerSlotElement.assignedNodes().length > 0;
-        return (h(Host, { key: '8a221daad83a03c6635059b21b807ea546f94033', class: `${drawerIsOpenClass}  drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, h("div", { key: '28de6daf4125334413589e02b3c568936fd54596', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { key: '555dd191eb27d3b5b0e97d1a0a29065e1d019195', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document", tabindex: "0" }, h("div", { key: 'ca12f58fd65bec534130f96de55781440a99a3f3', class: "drawer-content" }, h("header", { key: '3fbdbf60e39f0bb41de438fca2f90dd7368d2360', 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: '2c87df1cd3e5aeaff575e06a21cc95bb58e123d5', class: `drawer-body ${removePaddingClass}` }, h("slot", { key: '146a53a578800960a1ec69a9ad73fab9f7ec1d08' })), h("footer", { key: 'b67cf3313766e0b1ec4e903c536c68f8dfbc3cc9', class: `drawer-footer ${removePaddingClass}`, style: { display: hasFooterContent ? 'block' : 'none' } }, h("slot", { key: '2fa3f2e7b39ec3b03fba1a76ceb3a5c64d00c0e5', name: "footer" }))))));
+        return (h(Host, { key: 'a2f62ec1ecc2d5452041c1aef21c219dfb7d37e5', class: `${drawerIsOpenClass}  drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, h("div", { key: '483e792abee343f79a36594eb391203521dac055', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { key: 'b0692ac024a6f402915f482177b867f1d3fa5144', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document", tabindex: "0" }, h("div", { key: '6afd92780745fe0f6817adb5fba8649a9de0cdd9', class: "drawer-content" }, h("header", { key: '5248706c77aeaa4ce3332acfe7f3b605cbe7fd54', 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: '42ade4a899a1f381af1463ac5217c245de22c241', class: `drawer-body ${removePaddingClass}` }, h("slot", { key: 'adb1a893b61941e6488ba3bc233540ca18d90252' })), h("footer", { key: '7fb54e5564e98777a3fbf3474d323f7fe1eb0e07', class: `drawer-footer ${removePaddingClass}`, style: { display: hasFooterContent ? 'block' : 'none' } }, h("slot", { key: '37f2d0ec86cccc74795bc9a8fb509c5ded347f92', name: "footer" }))))));
     }
     static get is() { return "road-drawer"; }
     static get encapsulation() { return "shadow"; }
@@ -391,6 +407,11 @@ export class Drawer {
             }
         };
     }
+    static get states() {
+        return {
+            "focusTrap": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "onOpen",

package/dist/collection/components/drawer/drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9G,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEpE;;;;;;;;GAQG;AAQH,MAAM,OAAO,MAAM;IALnB;QAYE;;WAEG;QACsB,WAAM,GAAY,KAAK,CAAC;QAE/C;;SAEC;QACwB,kBAAa,GAAY,KAAK,CAAC;QAE1D;;WAEG;QACK,aAAQ,GAAW,MAAM,CAAC;QAElC;;WAEG;QACK,gBAAW,GAAW,GAAG,CAAC;QAElC;;WAEG;QACK,qBAAgB,GAAY,KAAK,CAAC;QAE1C;;WAEG;QACK,gBAAW,GAAY,KAAK,CAAC;QA2BrC;;WAEG;QACK,iBAAY,GAAY,IAAI,CAAC;QAgFrC;;WAEG;QACK,YAAO,GAAG,CAAC,EAAW,EAAE,EAAE;YAChC,EAAE,CAAC,eAAe,EAAE,CAAC;YACrB,EAAE,CAAC,cAAc,EAAE,CAAC;YAEpB,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC,CAAC;QAEF;;WAEG;QACK,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC1C,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,KAAK,CAAC,cAAc,EAAE,CAAC;YAEvB,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC,CAAC;KAyEH;IA1JC;;OAEG;IAEH,KAAK,CAAC,IAAI;QACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACrB,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,KAAK;QACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACtB,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,IAAI;QACR,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAED,mBAAmB;IACnB,mCAAmC;IACnC,6BAA6B;IAC7B,0BAA0B;IAC1B,aAAa;IACb,wDAAwD;IACxD,6BAA6B;IAC7B,iHAAiH;IACjH,yBAAyB;IACzB,MAAM;IACN,IAAI;IAIJ,UAAU,CAAC,SAAkB;QAC3B,IAAG,SAAS,KAAK,IAAI,EAAE,CAAC;YACtB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YACnB,4DAA4D;YAC5D,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,uDAAuD;QACxG,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,GAAG,EAAE;gBAC7C,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;gBACpB,IAAI,CAAC,EAAE,CAAC,UAAU,IAAI,CAAE,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAiB,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC;YAC1G,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;QACrB,CAAC;IACH,CAAC;IAED;;OAEG;IACK,gBAAgB;;QACtB,MAAM,aAAa,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,QAAQ,CAAgB,CAAC;QAEjF,IAAI,aAAa,EAAE,CAAC;YAClB,aAAa,CAAC,KAAK,EAAE,CAAC,CAAC,iCAAiC;QAC1D,CAAC;IACH,CAAC;IAuBD;;OAEG;IAEH,QAAQ,CAAC,KAAoB;QAC3B,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;YAClD,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC;IACH,CAAC;IAED;;OAEG;IACH,gBAAgB;QACd,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YAChE,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QACrD,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM;;QACJ,MAAM,iBAAiB,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;QAC3D,MAAM,kBAAkB,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC;QACtE,MAAM,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,CAAC;QAChF,MAAM,SAAS,GAAG,MAAA,IAAI,CAAC,SAAS,mCAAI,QAAQ,CAAC;QAC7C,MAAM,aAAa,GAAG,MAAA,IAAI,CAAC,aAAa,mCAAI,MAAM,CAAC;QACnD,MAAM,cAAc,GAAG,MAAA,IAAI,CAAC,cAAc,mCAAI,OAAO,CAAC;QACtD,MAAM,oBAAoB,GAAG,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;QAClG,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CACzC,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,eAAe,gBAAa,aAAa,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW;YAC9F,iBAAW,IAAI,EAAE,iBAAiB,EAAE,MAAM,EAAC,KAAK,GAAa;YAC5D,IAAI,CAAC,QAAQ,CACP,CACV,CAAC,CAAC,CAAC,IAAI,CAAC;QACT,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAC3C,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,gBAAc,cAAc;YAC1F,iBAAW,IAAI,EAAE,eAAe,iBAAc,MAAM,GAAa,CAC1D,CACV,CAAC,CAAC,CAAC,IAAI,CAAC;QACT,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,WAAW,IAAI,CAAC;QAEvF,MAAM,iBAAiB,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,qBAAqB,CAAC,CAAC;QACnF,MAAM,gBAAgB,GAAG,iBAAiB,YAAY,eAAe,IAAI,iBAAiB,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;QAEtH,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,GAAG,iBAAiB,YAAY,IAAI,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,gBAAa,SAAS;YAC5G,4DAAK,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAC,IAAI,GAAO;YACvE,4DAAK,KAAK,EAAC,eAAe,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,EAAE,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAC,GAAG;gBAC5F,4DAAK,KAAK,EAAC,gBAAgB;oBACzB,+DAAQ,KAAK,EAAE,iBAAiB,kBAAkB,IAAI,oBAAoB,EAAE;wBACzE,eAAe;wBACf,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAClB,UAAI,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,WAAW,CAAM,CACjD,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,cAAc;4BACvB,YAAM,IAAI,EAAC,OAAO,GAAG,CACjB,CACP;wBACA,gBAAgB,CACV;oBACT,4DAAK,KAAK,EAAE,eAAe,kBAAkB,EAAE;wBAC7C,8DAAQ,CACJ;oBACN,+DAAQ,KAAK,EAAE,iBAAiB,kBAAkB,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE;wBAC3G,6DAAM,IAAI,EAAC,QAAQ,GAAG,CACf,CACL,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host, Watch } from '@stencil/core';\nimport { navigationClose, navigationChevron } from '../../../icons';\n\n/**\n * @slot  - Content of the drawer.\n * @slot title - replace the title with a custom title section when `'drawerTitle'` is not set\n * @slot footer - footer of the drawer\n * `<div slot=\"footer\">`\n   `<road-button color=\"primary\" outline=\"true\" expand=\"true\">Annuler</road-button>`\n   `<road-button color=\"primary\" expand=\"true\" class=\"mb-0\">Valider</road-button>`\n   ` </div>`\n */\n\n\n@Component({\n  tag: 'road-drawer',\n  styleUrl: 'drawer.css',\n  shadow: true,\n})\nexport class Drawer {\n\n  /**\n   * Current reference of the drawer\n   */\n  @Element() el!: HTMLRoadDrawerElement;\n\n  /**\n   * Set isOpen property to true to open the drawer\n   */\n  @Prop({ mutable: true }) isOpen: boolean = false;\n\n    /**\n   * Set removePadding property to true to remove padding for drawer body\n   */\n    @Prop({ mutable: true }) removePadding: boolean = false;\n\n  /**\n   * position of the drawer. e.g. left, right, bottom\n   */\n  @Prop() position: string = 'left';\n\n  /**\n   * Width of the drawer\n   */\n  @Prop() drawerWidth: number = 480;\n\n  /**\n   * Inverse header colors\n   */\n  @Prop() hasInverseHeader: boolean = false;\n\n  /**\n   * Show / hide back icon\n   */\n  @Prop() hasBackIcon: boolean = false;\n\n  /**\n   * Show / hide back icon\n   */\n  @Prop() backText?: string;\n\n  /**\n   * Title of the drawer in the header bar\n   */\n  @Prop() drawerTitle?: string;\n\n   /**\n   * Aria label of the drawer\n   */\n   @Prop() ariaLabel?: string;\n\n  /**\n   * Aria label of the drawer\n   */\n    @Prop() ariaLabelBack?: string;\n\n  /**\n   * Aria label of the drawer\n   */\n   @Prop() ariaLabelClose?: string;\n\n  /**\n   * Show / hide close icon\n   */\n  @Prop() hasCloseIcon: boolean = true;\n\n  /**\n   * Indicate when opening the drawer\n   */\n  @Event({ eventName: 'open' }) onOpen!: EventEmitter<void>;\n\n  /**\n   * Indicate when closing the drawer\n   */\n  @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n  /**\n   * Indicate when return to previous state of the drawer content\n   */\n  @Event({ eventName: 'back' }) onBack!: EventEmitter<void>;\n\n  /**\n   * Open the drawer\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n  }\n\n  /**\n   * Close the drawer\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n  }\n\n  /**\n   * Return to previous state of the drawer content\n   */\n  @Method()\n  async back() {\n    this.onBack.emit();\n  }\n\n  // @Watch('isOpen')\n  // handleOpen(openValue: boolean) {\n  //   if(openValue === true) {\n  //     this.onOpen.emit();\n  //   } else {\n  //     this.el.addEventListener('transitionend', () => {\n  //       this.onClose.emit();\n  //       this.el.shadowRoot && ((this.el.shadowRoot.querySelector('.drawer-body') as HTMLElement).scrollTop = 0);\n  //     }, { once: true});\n  //   }\n  // }\n\n\n  @Watch('isOpen')\n  handleOpen(openValue: boolean) {\n    if(openValue === true) {\n      this.onOpen.emit();\n      // Focus the first button element after the drawer is opened\n      setTimeout(() => this.focusFirstButton(), 50); // Add a slight delay to ensure the element is rendered\n    } else {\n      this.el.addEventListener('transitionend', () => {\n        this.onClose.emit();\n        this.el.shadowRoot && ((this.el.shadowRoot.querySelector('.drawer-body') as HTMLElement).scrollTop = 0);\n      }, { once: true });\n    }\n  }\n  \n  /**\n   * Find and focus the first button element in the drawer\n   */\n  private focusFirstButton() {\n    const buttonElement = this.el.shadowRoot?.querySelector('button') as HTMLElement;\n  \n    if (buttonElement) {\n      buttonElement.focus(); // Focus the first button element\n    }\n  }\n  \n\n  /**\n   * Close the dialog when clicking on the cross or layer\n   */\n  private onClick = (ev: UIEvent) => {\n    ev.stopPropagation();\n    ev.preventDefault();\n\n    this.close();\n  };\n\n  /**\n   * Close the dialog when clicking on the cross or layer\n   */\n  private onClickBack = (event: MouseEvent) => {\n    event.stopPropagation();\n    event.preventDefault();\n\n    this.back();\n  };\n\n  /**\n   * Close the dialog when press Escape key\n   */\n  @Listen('keyup', { target: 'document' })\n  onEscape(event: KeyboardEvent) {\n    if (event.key === 'Escape' || event.key === \"Esc\") {\n      this.close();\n    }\n  }\n\n  /**\n   * Call close function when clicking an element with data-dismiss=\"modal\" attribute\n   */\n  componentDidLoad() {\n    this.el.querySelectorAll('[data-dismiss=\"modal\"]').forEach(item => {\n      item.addEventListener('click', () => this.close());\n    });\n  }\n\n  render() {\n    const drawerIsOpenClass = this.isOpen ? 'drawer-open' : '';\n    const removePaddingClass = this.removePadding ? 'remove-padding' : '';\n    const inverseHeaderClass = this.hasInverseHeader ? 'drawer-header-inverse' : '';\n    const ariaLabel = this.ariaLabel ?? 'drawer';\n    const ariaLabelBack = this.ariaLabelBack ?? 'Back';\n    const ariaLabelClose = this.ariaLabelClose ?? 'Close';\n    const drawerDelimiterClass = this.drawerTitle && !this.hasInverseHeader ? 'drawer-delimiter' : '';\n    const backIconElement = this.hasBackIcon ? (\n      <button type=\"button\" class=\"drawer-action\" aria-label={ariaLabelBack} onClick={this.onClickBack}>\n        <road-icon icon={navigationChevron} rotate=\"180\"></road-icon>\n        {this.backText}\n      </button>\n    ) : null;\n    const closeIconElement = this.hasCloseIcon ? (\n      <button type=\"button\" class=\"drawer-close\" onClick={this.onClick} aria-label={ariaLabelClose}>\n        <road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon>\n      </button>\n    ) : null;\n    const drawerWidthValue = this.position === 'bottom' ? '100%' : `${this.drawerWidth}px`;\n    \n    const footerSlotElement = this.el.shadowRoot?.querySelector('slot[name=\"footer\"]');\n    const hasFooterContent = footerSlotElement instanceof HTMLSlotElement && footerSlotElement.assignedNodes().length > 0;\n  \n    return (\n      <Host class={`${drawerIsOpenClass}  drawer-${this.position}`} tabindex=\"0\" role=\"dialog\" aria-label={ariaLabel}>\n        <div class=\"drawer-overlay\" onClick={this.onClick} tabindex=\"-1\"></div>\n        <div class=\"drawer-dialog\" style={{ maxWidth: drawerWidthValue }} role=\"document\" tabindex=\"0\">\n          <div class=\"drawer-content\">\n            <header class={`drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}`}>\n              {backIconElement}\n              {this.drawerTitle ? (\n                <h2 class=\"drawer-title\">{this.drawerTitle}</h2>\n              ) : (\n                <div class=\"drawer-title\">\n                  <slot name=\"title\" />\n                </div>\n              )}\n              {closeIconElement}\n            </header>\n            <div class={`drawer-body ${removePaddingClass}`}>\n              <slot />\n            </div>\n            <footer class={`drawer-footer ${removePaddingClass}`} style={{ display: hasFooterContent ? 'block' : 'none' }}>\n              <slot name=\"footer\" />\n            </footer>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n  \n}"]}
+{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACrH,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACpE,OAAO,EAAE,eAAe,EAAa,MAAM,YAAY,CAAC;AAExD;;;;;;;;GAQG;AAQH,MAAM,OAAO,MAAM;IALnB;QAYE;;WAEG;QACsB,WAAM,GAAY,KAAK,CAAC;QAEjD;;WAEG;QACsB,kBAAa,GAAY,KAAK,CAAC;QAExD;;WAEG;QACK,aAAQ,GAAW,MAAM,CAAC;QAElC;;WAEG;QACK,gBAAW,GAAW,GAAG,CAAC;QAElC;;WAEG;QACK,qBAAgB,GAAY,KAAK,CAAC;QAE1C;;WAEG;QACK,gBAAW,GAAY,KAAK,CAAC;QA2BrC;;WAEG;QACK,iBAAY,GAAY,IAAI,CAAC;QAyFrC;;WAEG;QACK,YAAO,GAAG,CAAC,EAAW,EAAE,EAAE;YAChC,EAAE,CAAC,eAAe,EAAE,CAAC;YACrB,EAAE,CAAC,cAAc,EAAE,CAAC;YAEpB,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC,CAAC;QAEF;;WAEG;QACK,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC1C,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,KAAK,CAAC,cAAc,EAAE,CAAC;YAEvB,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC,CAAC;KAkFH;IAvKC;;OAEG;IAEH,KAAK,CAAC,IAAI;QACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACrB,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,KAAK;QACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACtB,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,IAAI;QACR,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAED,mBAAmB;IACnB,mCAAmC;IACnC,6BAA6B;IAC7B,0BAA0B;IAC1B,aAAa;IACb,wDAAwD;IACxD,6BAA6B;IAC7B,iHAAiH;IACjH,yBAAyB;IACzB,MAAM;IACN,IAAI;IAIJ,UAAU,CAAC,SAAkB;QAC3B,IAAG,SAAS,KAAK,IAAI,EAAE,CAAC;YACtB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YACnB,4EAA4E;YAC5E,UAAU,CAAC,GAAG,EAAE;;gBACd,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBACzB,MAAA,IAAI,CAAC,SAAS,0CAAE,QAAQ,EAAE,CAAC;YAC7B,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,uDAAuD;QACjE,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,GAAG,EAAE;;gBAC7C,MAAA,IAAI,CAAC,SAAS,0CAAE,UAAU,EAAE,CAAC;gBAC7B,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;gBACpB,IAAI,CAAC,EAAE,CAAC,UAAU,IAAI,CAAE,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAiB,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC;YAC1G,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;QACrB,CAAC;IACH,CAAC;IAED;;OAEG;IACK,iBAAiB;;QACvB,MAAM,YAAY,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CAAE,gBAAgB,CAAC,iMAAiM,EAAE,CAAC,CAAgB,CAAC;QAE/Q,IAAI,YAAY,EAAE,CAAC;YACjB,YAAY,CAAC,KAAK,EAAE,CAAC;QACvB,CAAC;IACH,CAAC;IAuBD;;OAEG;IAEH,QAAQ,CAAC,KAAoB;QAC3B,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;YAClD,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC;IACH,CAAC;IAED;;OAEG;IACH,gBAAgB;;QACd,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YAChE,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QACrD,CAAC,CAAC,CAAC;QAEH,MAAM,aAAa,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAC1E,IAAI,CAAC,SAAS,GAAG,eAAe,CAAC,aAA4B,EAAE;YAC7D,UAAU,EAAE,GAAG,EAAE,CAAC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC;YAC/D,YAAY,EAAE,GAAG,EAAE,CAAC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,SAAS,CAAC,MAAM,CAAC,eAAe,CAAC;YACpE,eAAe,EAAE;gBACf,aAAa,EAAE,IAAI;aACpB;SACF,CAAC,CAAC;IACL,CAAC;IAED,MAAM;;QACJ,MAAM,iBAAiB,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;QAC3D,MAAM,kBAAkB,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC;QACtE,MAAM,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,CAAC;QAChF,MAAM,SAAS,GAAG,MAAA,IAAI,CAAC,SAAS,mCAAI,QAAQ,CAAC;QAC7C,MAAM,aAAa,GAAG,MAAA,IAAI,CAAC,aAAa,mCAAI,MAAM,CAAC;QACnD,MAAM,cAAc,GAAG,MAAA,IAAI,CAAC,cAAc,mCAAI,OAAO,CAAC;QACtD,MAAM,oBAAoB,GAAG,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;QAClG,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CACzC,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,eAAe,gBAAa,aAAa,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW;YAC9F,iBAAW,IAAI,EAAE,iBAAiB,EAAE,MAAM,EAAC,KAAK,GAAa;YAC5D,IAAI,CAAC,QAAQ,CACP,CACV,CAAC,CAAC,CAAC,IAAI,CAAC;QACT,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAC3C,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,gBAAc,cAAc;YAC1F,iBAAW,IAAI,EAAE,eAAe,iBAAc,MAAM,GAAa,CAC1D,CACV,CAAC,CAAC,CAAC,IAAI,CAAC;QACT,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,WAAW,IAAI,CAAC;QAEvF,MAAM,iBAAiB,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,qBAAqB,CAAC,CAAC;QACnF,MAAM,gBAAgB,GAAG,iBAAiB,YAAY,eAAe,IAAI,iBAAiB,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;QAEtH,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,GAAG,iBAAiB,YAAY,IAAI,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,gBAAa,SAAS;YAC5G,4DAAK,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAC,IAAI,GAAO;YACvE,4DAAK,KAAK,EAAC,eAAe,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,EAAE,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAC,GAAG;gBAC5F,4DAAK,KAAK,EAAC,gBAAgB;oBACzB,+DAAQ,KAAK,EAAE,iBAAiB,kBAAkB,IAAI,oBAAoB,EAAE;wBACzE,eAAe;wBACf,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAClB,UAAI,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,WAAW,CAAM,CACjD,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,cAAc;4BACvB,YAAM,IAAI,EAAC,OAAO,GAAG,CACjB,CACP;wBACA,gBAAgB,CACV;oBACT,4DAAK,KAAK,EAAE,eAAe,kBAAkB,EAAE;wBAC7C,8DAAQ,CACJ;oBACN,+DAAQ,KAAK,EAAE,iBAAiB,kBAAkB,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE;wBAC3G,6DAAM,IAAI,EAAC,QAAQ,GAAG,CACf,CACL,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host, Watch, State } from '@stencil/core';\nimport { navigationClose, navigationChevron } from '../../../icons';\nimport { createFocusTrap, FocusTrap } from 'focus-trap';\n\n/**\n * @slot  - Content of the drawer.\n * @slot title - replace the title with a custom title section when `'drawerTitle'` is not set\n * @slot footer - footer of the drawer\n * `<div slot=\"footer\">`\n   `<road-button color=\"primary\" outline=\"true\" expand=\"true\">Annuler</road-button>`\n   `<road-button color=\"primary\" expand=\"true\" class=\"mb-0\">Valider</road-button>`\n   ` </div>`\n */\n\n\n@Component({\n  tag: 'road-drawer',\n  styleUrl: 'drawer.css',\n  shadow: true,\n})\nexport class Drawer {\n\n  /**\n   * Current reference of the drawer\n   */\n  @Element() el!: HTMLRoadDrawerElement;\n\n  /**\n   * Set isOpen property to true to open the drawer\n   */\n  @Prop({ mutable: true }) isOpen: boolean = false;\n\n  /**\n   * Set removePadding property to true to remove padding for drawer body\n   */\n  @Prop({ mutable: true }) removePadding: boolean = false;\n\n  /**\n   * position of the drawer. e.g. left, right, bottom\n   */\n  @Prop() position: string = 'left';\n\n  /**\n   * Width of the drawer\n   */\n  @Prop() drawerWidth: number = 480;\n\n  /**\n   * Inverse header colors\n   */\n  @Prop() hasInverseHeader: boolean = false;\n\n  /**\n   * Show / hide back icon\n   */\n  @Prop() hasBackIcon: boolean = false;\n\n  /**\n   * Show / hide back icon\n   */\n  @Prop() backText?: string;\n\n  /**\n   * Title of the drawer in the header bar\n   */\n  @Prop() drawerTitle?: string;\n\n   /**\n   * Aria label of the drawer\n   */\n   @Prop() ariaLabel?: string;\n\n  /**\n   * Aria label of the drawer\n   */\n    @Prop() ariaLabelBack?: string;\n\n  /**\n   * Aria label of the drawer\n   */\n   @Prop() ariaLabelClose?: string;\n\n  /**\n   * Show / hide close icon\n   */\n  @Prop() hasCloseIcon: boolean = true;\n\n  /**\n   * Indicate when opening the drawer\n   */\n  @Event({ eventName: 'open' }) onOpen!: EventEmitter<void>;\n\n  /**\n   * Indicate when closing the drawer\n   */\n  @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n  /**\n   * Indicate when return to previous state of the drawer content\n   */\n  @Event({ eventName: 'back' }) onBack!: EventEmitter<void>;\n\n  /**\n   * Focus trap state\n   */\n  @State() focusTrap?: FocusTrap;\n\n  /**\n   * Open the drawer\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n  }\n\n  /**\n   * Close the drawer\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n  }\n\n  /**\n   * Return to previous state of the drawer content\n   */\n  @Method()\n  async back() {\n    this.onBack.emit();\n  }\n\n  // @Watch('isOpen')\n  // handleOpen(openValue: boolean) {\n  //   if(openValue === true) {\n  //     this.onOpen.emit();\n  //   } else {\n  //     this.el.addEventListener('transitionend', () => {\n  //       this.onClose.emit();\n  //       this.el.shadowRoot && ((this.el.shadowRoot.querySelector('.drawer-body') as HTMLElement).scrollTop = 0);\n  //     }, { once: true});\n  //   }\n  // }\n\n\n  @Watch('isOpen')\n  handleOpen(openValue: boolean) {\n    if(openValue === true) {\n      this.onOpen.emit();\n      // Focus the first button element after the drawer is opened then focus trap\n      setTimeout(() => {\n        this.focusFirstElement();\n        this.focusTrap?.activate();\n      }, 50); // Add a slight delay to ensure the element is rendered\n    } else {\n      this.el.addEventListener('transitionend', () => {\n        this.focusTrap?.deactivate();\n        this.onClose.emit();\n        this.el.shadowRoot && ((this.el.shadowRoot.querySelector('.drawer-body') as HTMLElement).scrollTop = 0);\n      }, { once: true });\n    }\n  }\n  \n  /**\n   * Find and focus the first element in the drawer\n   */\n  private focusFirstElement() {\n    const firstElement = this.el.shadowRoot?.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [contenteditable], [tabindex]:not([tabindex=\"-1\"])')[0] as HTMLElement;\n  \n    if (firstElement) {\n      firstElement.focus();\n    }\n  }\n  \n\n  /**\n   * Close the dialog when clicking on the cross or layer\n   */\n  private onClick = (ev: UIEvent) => {\n    ev.stopPropagation();\n    ev.preventDefault();\n\n    this.close();\n  };\n\n  /**\n   * Close the dialog when clicking on the cross or layer\n   */\n  private onClickBack = (event: MouseEvent) => {\n    event.stopPropagation();\n    event.preventDefault();\n\n    this.back();\n  };\n\n  /**\n   * Close the dialog when press Escape key\n   */\n  @Listen('keyup', { target: 'document' })\n  onEscape(event: KeyboardEvent) {\n    if (event.key === 'Escape' || event.key === \"Esc\") {\n      this.close();\n    }\n  }\n\n  /**\n   * Call close function when clicking an element with data-dismiss=\"modal\" attribute\n   */\n  componentDidLoad() {\n    this.el.querySelectorAll('[data-dismiss=\"modal\"]').forEach(item => {\n      item.addEventListener('click', () => this.close());\n    });\n\n    const drawerContent = this.el.shadowRoot?.querySelector(\".drawer-dialog\");\n    this.focusTrap = createFocusTrap(drawerContent as HTMLElement, {\n      onActivate: () => drawerContent?.classList.add(\"focus-trapped\"),\n      onDeactivate: () => drawerContent?.classList.remove(\"focus-trapped\"),\n      tabbableOptions: {\n        getShadowRoot: true,\n      },\n    });\n  }\n\n  render() {\n    const drawerIsOpenClass = this.isOpen ? 'drawer-open' : '';\n    const removePaddingClass = this.removePadding ? 'remove-padding' : '';\n    const inverseHeaderClass = this.hasInverseHeader ? 'drawer-header-inverse' : '';\n    const ariaLabel = this.ariaLabel ?? 'drawer';\n    const ariaLabelBack = this.ariaLabelBack ?? 'Back';\n    const ariaLabelClose = this.ariaLabelClose ?? 'Close';\n    const drawerDelimiterClass = this.drawerTitle && !this.hasInverseHeader ? 'drawer-delimiter' : '';\n    const backIconElement = this.hasBackIcon ? (\n      <button type=\"button\" class=\"drawer-action\" aria-label={ariaLabelBack} onClick={this.onClickBack}>\n        <road-icon icon={navigationChevron} rotate=\"180\"></road-icon>\n        {this.backText}\n      </button>\n    ) : null;\n    const closeIconElement = this.hasCloseIcon ? (\n      <button type=\"button\" class=\"drawer-close\" onClick={this.onClick} aria-label={ariaLabelClose}>\n        <road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon>\n      </button>\n    ) : null;\n    const drawerWidthValue = this.position === 'bottom' ? '100%' : `${this.drawerWidth}px`;\n    \n    const footerSlotElement = this.el.shadowRoot?.querySelector('slot[name=\"footer\"]');\n    const hasFooterContent = footerSlotElement instanceof HTMLSlotElement && footerSlotElement.assignedNodes().length > 0;\n  \n    return (\n      <Host class={`${drawerIsOpenClass}  drawer-${this.position}`} tabindex=\"0\" role=\"dialog\" aria-label={ariaLabel}>\n        <div class=\"drawer-overlay\" onClick={this.onClick} tabindex=\"-1\"></div>\n        <div class=\"drawer-dialog\" style={{ maxWidth: drawerWidthValue }} role=\"document\" tabindex=\"0\">\n          <div class=\"drawer-content\">\n            <header class={`drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}`}>\n              {backIconElement}\n              {this.drawerTitle ? (\n                <h2 class=\"drawer-title\">{this.drawerTitle}</h2>\n              ) : (\n                <div class=\"drawer-title\">\n                  <slot name=\"title\" />\n                </div>\n              )}\n              {closeIconElement}\n            </header>\n            <div class={`drawer-body ${removePaddingClass}`}>\n              <slot />\n            </div>\n            <footer class={`drawer-footer ${removePaddingClass}`} style={{ display: hasFooterContent ? 'block' : 'none' }}>\n              <slot name=\"footer\" />\n            </footer>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n  \n}"]}