@roadtrip/components 3.32.4 → 3.32.5

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

@@ -18,110 +18,96 @@ export default {
   argTypes: {
     'is-open': {
       control: 'boolean',
+      description: 'Defines whether the dialog is open or closed.',
     },
     'has-close-icon': {
       control: 'boolean',
+      description: 'Displays a close icon in the dialog header.',
     },
     color: {
       options: ['info', 'success', 'warning', 'danger'],
-      control: {
-        type: 'radio',
-      },
+      control: { type: 'radio' },
+      description: 'Sets the color theme of the dialog.',
     },
     icon: {
       options: list,
-      control: {
-        type: 'select',
-      },
+      control: { type: 'select' },
+      description: 'Defines the icon displayed in the dialog.',
     },
     label: {
       control: 'text',
+      description: 'Sets the dialog title.',
     },
     description: {
       control: 'text',
-    },
-    close: {
-      control: {
-        type: null,
-      },
+      description: 'Defines the main text content of the dialog.',
     },
     ' ': {
       control: 'text',
+      description: 'Slot for additional content (buttons, links, etc.).',
     },
     '--z-index': {
-      table: {
-        defaultValue: { summary: '3' },
-      },
-      control: {
-        type: null,
-      },
-    },
-    'dialog-icon': {
-      control: {
-        type: null,
-      },
+      table: { defaultValue: { summary: '3' } },
+      control: 'text',
+      description: 'Defines the z-index of the dialog.',
     },
   },
+  args: {
+    'is-open': true,
+    'has-close-icon': true,
+    color: 'info',
+    label: 'Dialog title',
+    description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.',
+    ' ': `<div class="road-button-group">
+      <road-button class="mb-0" color="primary" expand>Done</road-button>
+    </div>`,
+  },
 };
 
 const Template = (args) => html`
-<road-dialog 
-  is-open="${ifDefined(args['is-open'])}" 
-  color="${ifDefined(args.color)}" 
-  .icon="${ifDefined(args.icon)}" 
-  label="${ifDefined(args.label)}" 
-  description="${ifDefined(args.description)}" 
-  has-close-icon="${ifDefined(args['has-close-icon'])}"
->
-  ${unsafeHTML(args[' '])}
-</road-dialog>
+  <road-dialog 
+    ?is-open="${args['is-open']}" 
+    ?has-close-icon="${args['has-close-icon']}" 
+    color="${ifDefined(args.color)}" 
+    .icon="${ifDefined(args.icon)}" 
+    label="${ifDefined(args.label)}" 
+    description="${ifDefined(args.description)}"
+    style="--z-index: ${ifDefined(args['--z-index'])};"
+  >
+    ${unsafeHTML(args[' '])}
+  </road-dialog>
 `;
 
 export const Playground = Template.bind({});
-Playground.args = {
-  'is-open': true,
-  label: 'Dialog title',
-  description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.',
-  ' ': `<road-button class="mb-0" color="primary" expand>Done</road-button>`,
-};
 
 export const SideActions = Template.bind({});
 SideActions.args = {
-  'is-open': true,
-  label: 'Dialog title',
-  description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.',
-  ' ': `<road-button class="mb-0" outline expand data-dismiss="modal">Cancel</road-button>
-  <road-button class="mb-0" color="primary" expand style="margin-left: 1rem;">Done</road-button>`,
+  ' ': `<div class="road-button-group">
+    <road-button class="mb-0" outline expand data-dismiss="modal">Cancel</road-button>
+    <road-button class="mb-0" color="primary" expand style="margin-left: 1rem;">Done</road-button>
+  </div>`,
 };
 
 export const Info = Template.bind({});
 Info.args = {
-  'is-open': true,
   color: 'info',
   label: 'Information',
-  description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.',
 };
 
 export const Success = Template.bind({});
 Success.args = {
-  'is-open': true,
   color: 'success',
   label: 'Success',
-  description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.',
 };
 
 export const Warning = Template.bind({});
 Warning.args = {
-  'is-open': true,
   color: 'warning',
   label: 'Warning',
-  description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.',
 };
 
 export const Danger = Template.bind({});
 Danger.args = {
-  'is-open': true,
   color: 'danger',
   label: 'Danger',
-  description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.',
 };

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

@@ -120,21 +120,18 @@ export class Drawer {
             item.addEventListener('click', () => this.close());
         });
     }
-    hasFooterContent() {
-        const footerSlot = this.el.querySelector('[slot="footer"]');
-        return footerSlot !== null && footerSlot.childElementCount > 0;
-    }
     render() {
+        var _a, _b, _c;
         const drawerIsOpenClass = this.isOpen ? 'drawer-open' : '';
         const inverseHeaderClass = this.hasInverseHeader ? 'drawer-header-inverse' : '';
-        const ariaLabel = this.ariaLabel !== undefined ? this.ariaLabel : 'drawer';
-        const ariaLabelBack = this.ariaLabelBack !== undefined ? this.ariaLabelBack : 'Back';
-        const ariaLabelClose = this.ariaLabelClose !== undefined ? this.ariaLabelClose : 'Close';
-        const drawerDelimiterClass = this.drawerTitle !== undefined && !this.hasInverseHeader ? 'drawer-delimiter' : '';
-        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) : '';
-        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" })) : '';
-        const drawerWidthValue = this.position === 'bottom' ? '100%' : this.drawerWidth + 'px';
-        return (h(Host, { key: '61d6f770f9f56ddb21b19f1f8577f5e518325790', class: `${drawerIsOpenClass} drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": `${ariaLabel}` }, h("div", { key: 'e04193694e300e84f773d731619db83e1513a4db', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { key: '5b19f360e5db980562ccd3991823a31161f5349b', class: "drawer-dialog", style: { maxWidth: `${drawerWidthValue}` }, role: "document", tabindex: "0" }, h("div", { key: '09320757e8c8fdda7770160241f3d185ac933d14', class: "drawer-content" }, h("header", { key: '1b37b3c4e8ec75391f5c068585ecbe22c4c39ddd', class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle !== undefined ? h("h2", { class: "drawer-title" }, this.drawerTitle) : h("div", { class: "drawer-title" }, h("slot", { name: "title" })), closeIconElement), h("div", { key: '84ee063113d185a40f869ecee89db960d530a59f', class: "drawer-body" }, h("slot", { key: 'dd1b3ed184198ffe6ccd83f4c5698577933a55e7' })), this.hasFooterContent() && (h("footer", { key: '7e0c367c1a8309464e2ffaefaf759cd5162172c7', class: "drawer-footer" }, h("slot", { key: '1fb2d6fc4e20b8853b0a1d95a9a7169defc4a5ae', name: "footer" })))))));
+        const ariaLabel = (_a = this.ariaLabel) !== null && _a !== void 0 ? _a : 'drawer';
+        const ariaLabelBack = (_b = this.ariaLabelBack) !== null && _b !== void 0 ? _b : 'Back';
+        const ariaLabelClose = (_c = this.ariaLabelClose) !== null && _c !== void 0 ? _c : 'Close';
+        const drawerDelimiterClass = this.drawerTitle && !this.hasInverseHeader ? 'drawer-delimiter' : '';
+        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: 'fd9a5a869879812bd6abeba3ae3da032bf188e1e', class: `${drawerIsOpenClass} drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, h("div", { key: 'fcf28c064fc710f7c5a38bb98d56799d2f367cfd', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { key: 'a8e366d98d6d686cde4fbeb1c99080ca4f3cb317', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document", tabindex: "0" }, h("div", { key: '9a67f4e0e4080d2933b6fce68cc0ea38a9bc301e', class: "drawer-content" }, h("header", { key: '9c04a1b883cb9437212aeb07de19725d5fb98266', 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: 'f182bf146ffd3153bfb5b0faaa51fe8ac7b8627e', class: "drawer-body" }, h("slot", { key: 'da7ef62fdb134dad252ba7cbcc831584ac98552b' })), h("footer", { key: 'cf8ee470742208e0523eecb97dd74b9ec4303127', class: "drawer-footer" }, h("slot", { key: '50c4ed9e0e0f7dd98124a273a7af85aa8f89f319', name: "footer" }))))));
     }
     static get is() { return "road-drawer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"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","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   * 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  private hasFooterContent(): boolean {\n    const footerSlot = this.el.querySelector('[slot=\"footer\"]');\n    return footerSlot !== null && footerSlot.childElementCount > 0;\n  }\n\n  render() {\n    const drawerIsOpenClass = this.isOpen ? 'drawer-open' : '';\n    const inverseHeaderClass = this.hasInverseHeader ? 'drawer-header-inverse' : '';\n    const ariaLabel = this.ariaLabel !== undefined ? this.ariaLabel : 'drawer';\n    const ariaLabelBack = this.ariaLabelBack !== undefined ? this.ariaLabelBack : 'Back';\n    const ariaLabelClose = this.ariaLabelClose !== undefined ? this.ariaLabelClose : 'Close';\n    const drawerDelimiterClass = this.drawerTitle !== undefined && !this.hasInverseHeader ? 'drawer-delimiter' : '';\n    const backIconElement = this.hasBackIcon ? <button type=\"button\" class=\"drawer-action\" aria-label={`${ariaLabelBack}`} onClick={this.onClickBack}><road-icon icon={navigationChevron} rotate=\"180\"></road-icon>{this.backText}</button> : '';\n    const closeIconElement = this.hasCloseIcon ? <button type=\"button\" class=\"drawer-close\" onClick={this.onClick} aria-label={`${ariaLabelClose}`}><road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon></button> : '';\n    const drawerWidthValue = this.position === 'bottom' ? '100%' : this.drawerWidth + 'px';\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 !== undefined ? <h2 class=\"drawer-title\">{this.drawerTitle}</h2> : <div class=\"drawer-title\"><slot name=\"title\" /></div>}\n              {closeIconElement}\n            </header>\n            <div class=\"drawer-body\">\n              <slot/>\n            </div>\n            {this.hasFooterContent() && (\n              <footer class=\"drawer-footer\">\n                <slot name=\"footer\"/>\n              </footer>\n            )}\n          </div>\n        </div>\n      </Host>\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,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;QAEjD;;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;KAqEH;IAtJC;;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,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,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,GAAG,iBAAiB,WAAW,IAAI,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,gBAAa,SAAS;YAC3G,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,EAAC,aAAa;wBACtB,8DAAQ,CACJ;oBACN,+DAAQ,KAAK,EAAC,eAAe;wBAC3B,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   * 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 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    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\">\n              <slot />\n            </div>\n            <footer class=\"drawer-footer\">\n              <slot name=\"footer\" />\n            </footer>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n  \n}"]}

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

@@ -17,198 +17,129 @@ export default {
   argTypes: {
     'is-open': {
       control: 'boolean',
+      description: 'Defines whether the drawer is open or closed.',
     },
     'has-back-icon': {
       control: 'boolean',
+      description: 'Displays a back arrow icon in the header.',
     },
     'back-text': {
       control: 'text',
+      description: 'Text label for the back button.',
     },
     'has-close-icon': {
       control: 'boolean',
+      description: 'Displays a close (X) icon in the header.',
     },
     'has-inverse-header': {
       control: 'boolean',
+      description: 'Uses an inverse color scheme for the header.',
     },
     position: {
       options: ['left', 'bottom', 'right'],
-      control: {
-        type: 'radio',
-      },
+      control: { type: 'radio' },
+      description: 'Defines the drawer position.',
     },
     'drawer-width': {
       control: 'number',
-      min: 0,
+      description: 'Sets the width of the drawer (only applicable for side drawers).',
+      table: {
+        defaultValue: { summary: 480 },
+      },
     },
     'drawer-title': {
       control: 'text',
+      description: 'Defines the title displayed in the drawer header.',
     },
-    'footer': {
+    footer: {
       control: 'text',
+      description: ' `<div slot="footer"><road-button color="primary" outline="true" expand="true">Annuler</road-button>`\n` <road-button color="primary" expand="true">Envoyer</road-button></div>`',
     },
-    // mode: {
-    //   options: ['light', 'dark'],
-    //   control: {
-    //     type: null,
-    //   },
-    // },
-    'title': {
+    title: {
       control: 'text',
+      description: 'Custom title slot for advanced customization.',
     },
     'aria-label': {
       control: 'text',
+      description: 'ARIA label for accessibility.',
     },
     'aria-label-back': {
       control: 'text',
+      description: 'ARIA label for the back button.',
     },
     'aria-label-close': {
       control: 'text',
+      description: 'ARIA label for the close button.',
     },
     ' ': {
       control: 'text',
+      description: 'Main content inside the drawer.',
     },
-    open: {
-      control: {
-        type: null,
-      },
-    },
-    close: {
-      control: {
-        type: null,
-      },
-    },
-    back: {
-      control: {
-        type: null,
-      },
+    '--z-index': {
+      table: { defaultValue: { summary: '10' } },
+      control: 'text',
+      description: 'Defines the z-index of the drawer.',
     },
     '--background': {
-      table: {
-        defaultValue: { summary: 'var(--road-grey-000)' },
-      },
-      control: {
-        type: null,
-      },
-    },
-    '--color': {
-      table: {
-        defaultValue: { summary: 'var(--road-grey-900)' },
-      },
-      control: {
-        type: null,
-      },
-    },
-    '--header-icon': {
-      table: {
-        defaultValue: { summary: 'var(--road-grey-900)' },
-      },
-      control: {
-        type: null,
-      },
-    },
-    '--header-color': {
-      table: {
-        defaultValue: { summary: 'var(--road-grey-900)' },
-      },
-      control: {
-        type: null,
-      },
-    },
-    '--header-background': {
-      table: {
-        defaultValue: { summary: 'var(--road-grey-000)' },
-      },
-      control: {
-        type: null,
-      },
-    },
-    '--header-delimiter': {
-      table: {
-        defaultValue: { summary: '0' },
-      },
-      control: {
-        type: null,
-      },
-    },
-    '--back-chevron-color': {
-      table: {
-        defaultValue: { summary: 'var(--road-grey-900)' },
-      },
-      control: {
-        type: null,
-      },
-    },
-    '--max-height': {
-      table: {
-        defaultValue: { summary: 'auto' },
-      },
-      control: {
-        type: null,
-      },
-    },
-    '--z-index': {
-      table: {
-        defaultValue: { summary: '10' },
-      },
-      control: {
-        type: null,
-      },
+      table: { defaultValue: { summary: 'var(--road-grey-000)' } },
+      control: 'text',
+      description: 'Sets the background color of the drawer.',
     },
   },
   args: {
     'is-open': true,
-    position: null,
-    'drawer-width': null,
-    'has-inverse-header': null,
-    'has-back-icon': null,
-    'has-close-icon': undefined,
+    position: 'right',
+    'drawer-width': 480,
+    'has-inverse-header': false,
+    'has-back-icon': false,
+    'has-close-icon': true,
+    'drawer-title': 'Drawer title',
+    ' ': `<div class="p-16">
+      <p>This is the drawer content.</p>
+      <road-button color="primary" expand>Confirm</road-button>
+    </div>`,
   },
 };
 
 const Template = (args) => html`
-<road-drawer
-  is-open="${ifDefined(args['is-open'])}" 
-  position="${ifDefined(args.position)}" 
-  has-back-icon="${ifDefined(args['has-back-icon'])}" 
-  back-text="${ifDefined(args['back-text'])}" 
-  has-close-icon="${ifDefined(args['has-close-icon'])}" 
-  has-inverse-header="${ifDefined(args['has-inverse-header'])}" 
-  drawer-width="${ifDefined(args['drawer-width'])}" 
-  drawer-title="${ifDefined(args['drawer-title'])}"
-  aria-label="${ifDefined(args['aria-label'])}"
-  aria-label-back="${ifDefined(args['aria-label-back'])}"
-  aria-label-close="${ifDefined(args['aria-label-close'])}"
->
-  ${unsafeHTML(args['title'])}
-  ${unsafeHTML(args[' '])}
-  ${unsafeHTML(args.footer)}
-</road-drawer>
+  <road-drawer
+    ?is-open="${args['is-open']}"
+    ?has-back-icon="${args['has-back-icon']}"
+    ?has-close-icon="${args['has-close-icon']}"
+    ?has-inverse-header="${args['has-inverse-header']}"
+    position="${ifDefined(args.position)}"
+    drawer-width="${ifDefined(args['drawer-width'])}"
+    drawer-title="${ifDefined(args['drawer-title'])}"
+    back-text="${ifDefined(args['back-text'])}"
+    aria-label="${ifDefined(args['aria-label'])}"
+    aria-label-back="${ifDefined(args['aria-label-back'])}"
+    aria-label-close="${ifDefined(args['aria-label-close'])}"
+    style="
+      --z-index: ${ifDefined(args['--z-index'])};
+      --background: ${ifDefined(args['--background'])};
+    "
+  >
+    ${unsafeHTML(args.title)}
+    ${unsafeHTML(args[' '])}
+    ${unsafeHTML(args.footer)}
+  </road-drawer>
 `;
 
 export const Playground = Template.bind({});
 
 export const HeaderInverse = Template.bind({});
 HeaderInverse.args = {
-  'is-open': true,
-  position: 'right',
-  'drawer-width': 480,
-  'drawer-title': 'Drawer title',
+  'has-inverse-header': true,
 };
 
 export const WithBackButton = Template.bind({});
 WithBackButton.args = {
-  'is-open': true,
-  position: 'right',
-  'drawer-width': 480,
-  'drawer-title': 'Drawer title',
   'has-back-icon': true,
+  'back-text': 'Back',
 };
 
-export const customTitle = Template.bind({});
-customTitle.args = {
-  'is-open': true,
-  position: 'right',
-  'drawer-width': 480,
+export const CustomTitle = Template.bind({});
+CustomTitle.args = {
   title: `<div slot="title" class="d-flex align-items-center">
     <road-icon name="key" color="secondary" class="mr-16" role="img"></road-icon>
     <road-text color="secondary">618</road-text>
@@ -216,9 +147,8 @@ customTitle.args = {
   </div>`,
 };
 
-export const bottomDrawer = Template.bind({});
-bottomDrawer.args = {
-  'is-open': true,
+export const BottomDrawer = Template.bind({});
+BottomDrawer.args = {
   position: 'bottom',
   title: `<strong slot="title">Contact by SMS</strong>`,
   ' ': `<div class="bg-light p-16">