@roadtrip/components 3.43.0 → 3.45.0

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

@@ -1,32 +1,31 @@
-import { html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { html } from "lit";
+import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
 
 export default {
-  title: 'Listing/Carousel',
-  component: 'road-carousel',
+  title: "Listing/Carousel",
+  component: "road-carousel",
   subcomponents: {
-    'road-carousel-item': 'road-carousel-item',
+    "road-carousel-item": "road-carousel-item",
   },
   parameters: {
     actions: {
       handles: [
-        'roadslidesdidload',
-        'roadslidetap',
-        'roadslidedoubletap',
-        'roadslidewillchange',
-        'roadslidedidchange',
-        'roadslidenextstart',
-        'roadslideprevstart',
-        'roadslidenextend',
-        'roadslideprevend',
-        'roadslidetransitionstart',
-        'roadslidetransitionend',
-        'roadslidedrag',
-        'roadslidereachstart',
-        'roadslidereachend',
-        'roadslidetouchstart',
-        'roadslidetouchend',
+        "roadslidesdidload",
+        "roadslidetap",
+        "roadslidedoubletap",
+        "roadslidewillchange",
+        "roadslidedidchange",
+        "roadslidenextstart",
+        "roadslideprevstart",
+        "roadslidenextend",
+        "roadslideprevend",
+        "roadslidetransitionstart",
+        "roadslidetransitionend",
+        "roadslidedrag",
+        "roadslidereachstart",
+        "roadslidereachend",
+        "roadslidetouchstart",
+        "roadslidetouchend",
       ],
     },
     docs: {
@@ -37,112 +36,172 @@ export default {
   },
   argTypes: {
     pager: {
-      control: 'boolean',
-      description: 'Shows pagination bullets below the carousel.',
+      control: "boolean",
+      description: "Shows pagination bullets below the carousel.",
+    },
+    pagertype: {
+      description: "Progress calculation base for step display.\n",
+      options: ["bullets", "fraction"],
+      control: {
+        type: "select",
+      },
+      table: {
+        defaultValue: { summary: "bullets" },
+      },
     },
     arrows: {
-      control: 'boolean',
-      description: 'Displays navigation arrows for manual slide transitions.',
+      control: "boolean",
+      description: "Displays navigation arrows for manual slide transitions.",
     },
     options: {
-      control: 'object',
-      description: 'Configuration object for the Swiper instance.',
+      control: "object",
+      description: "Configuration object for the Swiper instance.",
     },
-    ' ': {
-      control: 'text',
-      description: 'Content inside the carousel, usually multiple `<road-carousel-item>` elements.',
+    " ": {
+      control: "text",
+      description:
+        "Content inside the carousel, usually multiple `<road-carousel-item>` elements.",
     },
     // 🔹 Méthodes accessibles depuis Storybook
     getActiveIndex: {
-      description: 'Returns the index of the active slide.',
-      table: { category: 'Methods', type: { summary: '() => Promise<number>' } },
+      description: "Returns the index of the active slide.",
+      table: {
+        category: "Methods",
+        type: { summary: "() => Promise<number>" },
+      },
     },
     getPreviousIndex: {
-      description: 'Returns the index of the previous slide.',
-      table: { category: 'Methods', type: { summary: '() => Promise<number>' } },
+      description: "Returns the index of the previous slide.",
+      table: {
+        category: "Methods",
+        type: { summary: "() => Promise<number>" },
+      },
     },
     getSwiper: {
-      description: 'Returns the Swiper instance. See Swiper API for more details.',
-      table: { category: 'Methods', type: { summary: '() => Promise<any>' } },
+      description:
+        "Returns the Swiper instance. See Swiper API for more details.",
+      table: { category: "Methods", type: { summary: "() => Promise<any>" } },
     },
     isBeginning: {
-      description: 'Checks if the current slide is the first slide.',
-      table: { category: 'Methods', type: { summary: '() => Promise<boolean>' } },
+      description: "Checks if the current slide is the first slide.",
+      table: {
+        category: "Methods",
+        type: { summary: "() => Promise<boolean>" },
+      },
     },
     isEnd: {
-      description: 'Checks if the current slide is the last slide.',
-      table: { category: 'Methods', type: { summary: '() => Promise<boolean>' } },
+      description: "Checks if the current slide is the last slide.",
+      table: {
+        category: "Methods",
+        type: { summary: "() => Promise<boolean>" },
+      },
     },
     length: {
-      description: 'Returns the total number of slides.',
-      table: { category: 'Methods', type: { summary: '() => Promise<number>' } },
+      description: "Returns the total number of slides.",
+      table: {
+        category: "Methods",
+        type: { summary: "() => Promise<number>" },
+      },
     },
     lockSwipeToNext: {
-      description: 'Locks the ability to slide to the next slide.',
-      table: { category: 'Methods', type: { summary: '(lock: boolean) => Promise<void>' } },
+      description: "Locks the ability to slide to the next slide.",
+      table: {
+        category: "Methods",
+        type: { summary: "(lock: boolean) => Promise<void>" },
+      },
     },
     lockSwipeToPrev: {
-      description: 'Locks the ability to slide to the previous slide.',
-      table: { category: 'Methods', type: { summary: '(lock: boolean) => Promise<void>' } },
+      description: "Locks the ability to slide to the previous slide.",
+      table: {
+        category: "Methods",
+        type: { summary: "(lock: boolean) => Promise<void>" },
+      },
     },
     lockSwipes: {
-      description: 'Locks the ability to swipe in either direction.',
-      table: { category: 'Methods', type: { summary: '(lock: boolean) => Promise<void>' } },
+      description: "Locks the ability to swipe in either direction.",
+      table: {
+        category: "Methods",
+        type: { summary: "(lock: boolean) => Promise<void>" },
+      },
     },
     slideNext: {
-      description: 'Transitions to the next slide.',
-      table: { category: 'Methods', type: { summary: '(speed?: number, runCallbacks?: boolean) => Promise<void>' } },
+      description: "Transitions to the next slide.",
+      table: {
+        category: "Methods",
+        type: {
+          summary: "(speed?: number, runCallbacks?: boolean) => Promise<void>",
+        },
+      },
     },
     slidePrev: {
-      description: 'Transitions to the previous slide.',
-      table: { category: 'Methods', type: { summary: '(speed?: number, runCallbacks?: boolean) => Promise<void>' } },
+      description: "Transitions to the previous slide.",
+      table: {
+        category: "Methods",
+        type: {
+          summary: "(speed?: number, runCallbacks?: boolean) => Promise<void>",
+        },
+      },
     },
     slideTo: {
-      description: 'Transitions to a specified slide index.',
-      table: { category: 'Methods', type: { summary: '(index: number, speed?: number, runCallbacks?: boolean) => Promise<void>' } },
+      description: "Transitions to a specified slide index.",
+      table: {
+        category: "Methods",
+        type: {
+          summary:
+            "(index: number, speed?: number, runCallbacks?: boolean) => Promise<void>",
+        },
+      },
     },
     startAutoplay: {
-      description: 'Starts automatic slide transition.',
-      table: { category: 'Methods', type: { summary: '() => Promise<void>' } },
+      description: "Starts automatic slide transition.",
+      table: { category: "Methods", type: { summary: "() => Promise<void>" } },
     },
     stopAutoplay: {
-      description: 'Stops automatic slide transition.',
-      table: { category: 'Methods', type: { summary: '() => Promise<void>' } },
+      description: "Stops automatic slide transition.",
+      table: { category: "Methods", type: { summary: "() => Promise<void>" } },
     },
     update: {
-      description: 'Updates the carousel when slides are added or removed.',
-      table: { category: 'Methods', type: { summary: '() => Promise<void>' } },
+      description: "Updates the carousel when slides are added or removed.",
+      table: { category: "Methods", type: { summary: "() => Promise<void>" } },
     },
     updateAutoHeight: {
-      description: 'Updates carousel height when `autoHeight` is enabled.',
-      table: { category: 'Methods', type: { summary: '(speed?: number) => Promise<void>' } },
+      description: "Updates carousel height when `autoHeight` is enabled.",
+      table: {
+        category: "Methods",
+        type: { summary: "(speed?: number) => Promise<void>" },
+      },
     },
   },
   args: {
-    pager: false,
+    pager: true,
+    pagertype: "fraction",
     arrows: false,
-    ' ': `
+    " ": `
       <road-carousel-item>
-        <road-img src="https://via.placeholder.com/800x400?text=Slide+1" alt="Slide 1"></road-img>
+        <road-img src="https://placehold.co/800x400?text=Slide+1" alt="Slide 1"></road-img>
       </road-carousel-item>
       <road-carousel-item>
-        <road-img src="https://via.placeholder.com/800x400?text=Slide+2" alt="Slide 2"></road-img>
+        <road-img src="https://placehold.co/800x400?text=Slide+2" alt="Slide 2"></road-img>
       </road-carousel-item>
       <road-carousel-item>
-        <road-img src="https://via.placeholder.com/800x400?text=Slide+3" alt="Slide 3"></road-img>
+        <road-img src="https://placehold.co/800x400?text=Slide+3" alt="Slide 3"></road-img>
       </road-carousel-item>
     `,
   },
 };
 
-const Template = (args) => html`
-<road-carousel 
-  ?pager="${args.pager}" 
-  ?arrows="${args.arrows}" 
-  .options="${args.options}">
-  ${unsafeHTML(args[' '])}
-</road-carousel>
-`;
+const Template = (args) => {
+  return html`
+    <road-carousel
+      pager="${args.pager}"
+      pagertype="${args.pagertype}"
+      arrows="${args.arrows}"
+      options="${args.options}"
+    >
+      ${unsafeHTML(args[" "])}
+    </road-carousel>
+  `;
+};
 
 export const Playground = Template.bind({});
 

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

@@ -40,6 +40,14 @@ export class Drawer {
          * Show / hide close icon
          */
         this.hasCloseIcon = true;
+        /**
+         * Footer Content state
+         */
+        this.hasFooterContent = false;
+        this.onFooterSlotChange = (event) => {
+            const slot = event.target;
+            this.hasFooterContent = slot.assignedElements().length > 0;
+        };
         /**
          * Close the dialog when clicking on the cross or layer
          */
@@ -141,7 +149,7 @@ export class Drawer {
         });
     }
     render() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         const drawerIsOpenClass = this.isOpen ? 'drawer-open' : '';
         const removePaddingClass = this.removePadding ? 'remove-padding' : '';
         const inverseHeaderClass = this.hasInverseHeader ? 'drawer-header-inverse' : '';
@@ -152,9 +160,7 @@ export class Drawer {
         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`;
-        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: '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" }))))));
+        return (h(Host, { key: '926b41433f3cb5e9648d2b3a85e3617e0b088f73', class: `${drawerIsOpenClass}  drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, h("div", { key: '6a50b5ae4172dfa5b46c95e5ff8d88addc699865', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { key: 'b7a8d8295683575eda145c38b89a677b796e47c3', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document", tabindex: "0" }, h("div", { key: '334b88b55f8f99fcec5ed0a8d08110280210a9d0', class: "drawer-content" }, h("header", { key: '565780f8b032e0e13d7da8539bd9eee6eedf08d9', 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: 'ef60feb331d03b9f0c6119aa1eea39e65a83816b', class: `drawer-body ${removePaddingClass}` }, h("slot", { key: 'fc14602ad66a21a4feeb128f5ed945900b18ef0d' })), h("footer", { key: '60a25c658b4d65263c8143f270e90b4adb8d879f', class: `drawer-footer ${removePaddingClass}`, hidden: !this.hasFooterContent }, h("slot", { key: 'cff20e77ebc9e0e5efd2b1c8347078976117e23d', name: "footer", onSlotchange: this.onFooterSlotChange }))))));
     }
     static get is() { return "road-drawer"; }
     static get encapsulation() { return "shadow"; }
@@ -409,7 +415,8 @@ export class Drawer {
     }
     static get states() {
         return {
-            "focusTrap": {}
+            "focusTrap": {},
+            "hasFooterContent": {}
         };
     }
     static get events() {

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, 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}"]}
+{"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, 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   * Footer Content state\n   */\n  @State() hasFooterContent = false;\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  private onFooterSlotChange = (event: Event) => {\n  const slot = event.target as HTMLSlotElement;\n  this.hasFooterContent = slot.assignedElements().length > 0;\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    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\n            class={`drawer-footer ${removePaddingClass}`}\n            hidden={!this.hasFooterContent}\n          >\n            <slot name=\"footer\" onSlotchange={this.onFooterSlotChange} />\n          </footer>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n  \n}"]}

package/dist/collection/components/progress/progress.js

@@ -7,9 +7,9 @@ export class ProgressBar {
          */
         this.value = 0;
         /**
-         * The number of steps should be 4 or 5.
+         * The number of steps.
          */
-        this.numbersteps = 9;
+        this.numbersteps = 0;
         /**
          * Label display in progress bar
          */
@@ -34,16 +34,27 @@ export class ProgressBar {
          * The color to use from your application's color palette.
          */
         this.color = "primary";
+        /**
+         * Progress calculation base for step display
+         * - previous: step is calculated based on the previous completed step
+         * - current: step is calculated based on the current progress
+         * Default is 'current'
+         */
+        this.progresscalculationbase = "current";
     }
     render() {
-        const steps = this.numbersteps;
-        const valueRound = Math.round((this.value / 100) * steps);
         const fullwidth = this.fullwidth
             ? "progress-element-info-full-width"
             : "progress-element-info";
         const light = this.light ? "progress progress-light" : "progress";
         const animation = this.animation ? "animation" : "";
-        return (h(Host, { key: '545f84051240cbd0f58b74971dc2092066b8f473', class: "progress-element" }, h("div", { key: '7a09889955c9f8dce9521d30afe97890f9a27380', class: `${light} progress-${this.color} ${animation}` }, h("div", { key: '12bd04b41b952b3648ce823d35f3261fee236c14', class: "progress-bar", role: "progressbar", style: { width: `${this.value}%` }, "aria-valuenow": this.value, "aria-valuemin": "0", "aria-valuemax": "100", "aria-label": "progress bar" })), h("div", { key: '31b58e77438d128939167db44bf83c53885bb8a9', class: `${fullwidth}` }, h("span", { key: '244e25f42355c7af0d414c5100cfdf329bb32d54', class: "progress-element-label" }, this.label), this.showstep && (h("span", { key: 'ce858c7a9a25527ac4d5984210fa4c8c408aeb2c', class: "progress-element-step" }, valueRound, "/", this.numbersteps)))));
+        const offset = this.progresscalculationbase === "current" ? 0 : -1;
+        const percentagePerStep = 100 / this.numbersteps;
+        const progressBarFilledPercentage = this.value + (this.numbersteps ? percentagePerStep * offset : 0);
+        let step = Math.ceil((this.value / 100) * this.numbersteps);
+        step = Math.min(step, this.numbersteps);
+        step = Math.max(step, 0);
+        return (h(Host, { key: 'b95f31407c58d8d7d6a25044b76c8f2f233d74d1', class: "progress-element" }, h("div", { key: 'dfa03b1cbb5e4c417eed00d25b394fd7208e0f14', class: `${light} progress-${this.color} ${animation}` }, h("div", { key: '7f0ca4d17c77c88d24457ac9b5a5112ff11ddbf2', class: "progress-bar", role: "progressbar", style: { width: `${progressBarFilledPercentage}%` }, "aria-valuenow": progressBarFilledPercentage, "aria-valuemin": "0", "aria-valuemax": "100", "aria-labelledby": "loadinglabel", "aria-label": "progress bar" })), h("div", { key: '45cc2ee26a70152ada39408101f675ffb3470fc2', class: `${fullwidth}` }, h("span", { key: '545f2ab462c04d2f3b38b0c2de1b067f639e864a', id: "loadinglabel", class: "progress-element-label" }, this.label), this.showstep && (h("span", { key: '2d79c6432b78f9f4cbb2ae4c4afcf2a4de9c0a3a', class: "progress-element-step" }, step, "/", this.numbersteps)))));
     }
     static get is() { return "road-progress"; }
     static get encapsulation() { return "shadow"; }
@@ -83,21 +94,21 @@ export class ProgressBar {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "2 | 3 | 4 | 5 | 6 | 7 | 8 | 9",
-                    "resolved": "2 | 3 | 4 | 5 | 6 | 7 | 8 | 9",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The number of steps should be 4 or 5."
+                    "text": "The number of steps."
                 },
                 "getter": false,
                 "setter": false,
                 "attribute": "numbersteps",
                 "reflect": false,
-                "defaultValue": "9"
+                "defaultValue": "0"
             },
             "label": {
                 "type": "string",
@@ -218,6 +229,26 @@ export class ProgressBar {
                 "attribute": "color",
                 "reflect": false,
                 "defaultValue": "\"primary\""
+            },
+            "progresscalculationbase": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"previous\" | \"current\"",
+                    "resolved": "\"current\" | \"previous\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Progress calculation base for step display\n- previous: step is calculated based on the previous completed step\n- current: step is calculated based on the current progress\nDefault is 'current'"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "progresscalculationbase",
+                "reflect": false,
+                "defaultValue": "\"current\""
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"progress.js","sourceRoot":"","sources":["../../../src/components/progress/progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,WAAW;IALxB;QAME;;;WAGG;QACK,UAAK,GAAW,CAAC,CAAC;QAE1B;;WAEG;QACK,gBAAW,GAAkC,CAAC,CAAC;QAEvD;;WAEG;QACK,UAAK,GAAW,EAAE,CAAC;QAE3B;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACK,cAAS,GAAY,KAAK,CAAC;QAEnC;;WAEG;QACK,UAAK,GAAY,KAAK,CAAC;QAE/B;;WAEG;QACK,cAAS,GAAY,KAAK,CAAC;QAEnC;;WAEG;QACK,UAAK,GAOE,SAAS,CAAC;KAmC1B;IAjCC,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC;QAC/B,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC;QAC1D,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS;YAC9B,CAAC,CAAC,kCAAkC;YACpC,CAAC,CAAC,uBAAuB,CAAC;QAC5B,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,UAAU,CAAC;QAClE,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;QAEpD,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,kBAAkB;YAC5B,4DAAK,KAAK,EAAE,GAAG,KAAK,aAAa,IAAI,CAAC,KAAK,IAAI,SAAS,EAAE;gBACxD,4DACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,mBACnB,IAAI,CAAC,KAAK,mBACX,GAAG,mBACH,KAAK,gBACR,cAAc,GACpB,CACH;YACN,4DAAK,KAAK,EAAE,GAAG,SAAS,EAAE;gBACxB,6DAAM,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,KAAK,CAAQ;gBACvD,IAAI,CAAC,QAAQ,IAAI,CAChB,6DAAM,KAAK,EAAC,uBAAuB;oBAChC,UAAU;;oBAAG,IAAI,CAAC,WAAW,CACzB,CACR,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from \"@stencil/core\";\n\n@Component({\n  tag: \"road-progress\",\n  styleUrl: \"progress.css\",\n  shadow: true,\n})\nexport class ProgressBar {\n  /**\n   * The value determines how much of the active bar should display.\n   * The value should be between [0, 100].\n   */\n  @Prop() value: number = 0;\n\n  /**\n   * The number of steps should be 4 or 5.\n   */\n  @Prop() numbersteps: 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 = 9;\n\n  /**\n   * Label display in progress bar\n   */\n  @Prop() label: string = \"\";\n\n  /**\n   * Show step\n   */\n  @Prop() showstep: boolean = false;\n\n  /**\n   * Animation progress bar\n   */\n  @Prop() animation: boolean = false;\n\n  /**\n   * Light progress background\n   */\n  @Prop() light: boolean = false;\n\n  /**\n   * Add padding if the progress is full width\n   */\n  @Prop() fullwidth: boolean = false;\n\n  /**\n   * The color to use from your application's color palette.\n   */\n  @Prop() color:\n    | \"primary\"\n    | \"secondary\"\n    | \"info\"\n    | \"success\"\n    | \"warning\"\n    | \"danger\"\n    | \"rating\" = \"primary\";\n\n  render() {\n    const steps = this.numbersteps;\n    const valueRound = Math.round((this.value / 100) * steps);\n    const fullwidth = this.fullwidth\n      ? \"progress-element-info-full-width\"\n      : \"progress-element-info\";\n    const light = this.light ? \"progress progress-light\" : \"progress\";\n    const animation = this.animation ? \"animation\" : \"\";\n\n    return (\n      <Host class=\"progress-element\">\n        <div class={`${light} progress-${this.color} ${animation}`}>\n          <div\n            class=\"progress-bar\"\n            role=\"progressbar\"\n            style={{ width: `${this.value}%` }}\n            aria-valuenow={this.value}\n            aria-valuemin=\"0\"\n            aria-valuemax=\"100\"\n            aria-label=\"progress bar\"\n          ></div>\n        </div>\n        <div class={`${fullwidth}`}>\n          <span class=\"progress-element-label\">{this.label}</span>\n          {this.showstep && (\n            <span class=\"progress-element-step\">\n              {valueRound}/{this.numbersteps}\n            </span>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"progress.js","sourceRoot":"","sources":["../../../src/components/progress/progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,WAAW;IALxB;QAME;;;WAGG;QACK,UAAK,GAAW,CAAC,CAAC;QAE1B;;WAEG;QACK,gBAAW,GAAW,CAAC,CAAC;QAEhC;;WAEG;QACK,UAAK,GAAW,EAAE,CAAC;QAE3B;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACK,cAAS,GAAY,KAAK,CAAC;QAEnC;;WAEG;QACK,UAAK,GAAY,KAAK,CAAC;QAE/B;;WAEG;QACK,cAAS,GAAY,KAAK,CAAC;QAEnC;;WAEG;QACK,UAAK,GAOE,SAAS,CAAC;QAEzB;;;;;WAKG;QACK,4BAAuB,GAA2B,SAAS,CAAC;KA6CrE;IA3CC,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS;YAC9B,CAAC,CAAC,kCAAkC;YACpC,CAAC,CAAC,uBAAuB,CAAC;QAC5B,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,UAAU,CAAC;QAClE,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;QAEpD,MAAM,MAAM,GAAW,IAAI,CAAC,uBAAuB,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC3E,MAAM,iBAAiB,GAAG,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC;QACjD,MAAM,2BAA2B,GAC/B,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAEnE,IAAI,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC;QAC5D,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QACxC,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;QAEzB,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,kBAAkB;YAC5B,4DAAK,KAAK,EAAE,GAAG,KAAK,aAAa,IAAI,CAAC,KAAK,IAAI,SAAS,EAAE;gBACxD,4DACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,2BAA2B,GAAG,EAAE,mBACpC,2BAA2B,mBAC5B,GAAG,mBACH,KAAK,qBACH,cAAc,gBACnB,cAAc,GACpB,CACH;YACN,4DAAK,KAAK,EAAE,GAAG,SAAS,EAAE;gBACxB,6DAAM,EAAE,EAAC,cAAc,EAAC,KAAK,EAAC,wBAAwB,IACnD,IAAI,CAAC,KAAK,CACN;gBACN,IAAI,CAAC,QAAQ,IAAI,CAChB,6DAAM,KAAK,EAAC,uBAAuB;oBAChC,IAAI;;oBAAG,IAAI,CAAC,WAAW,CACnB,CACR,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from \"@stencil/core\";\n\n@Component({\n  tag: \"road-progress\",\n  styleUrl: \"progress.css\",\n  shadow: true,\n})\nexport class ProgressBar {\n  /**\n   * The value determines how much of the active bar should display.\n   * The value should be between [0, 100].\n   */\n  @Prop() value: number = 0;\n\n  /**\n   * The number of steps.\n   */\n  @Prop() numbersteps: number = 0;\n\n  /**\n   * Label display in progress bar\n   */\n  @Prop() label: string = \"\";\n\n  /**\n   * Show step\n   */\n  @Prop() showstep: boolean = false;\n\n  /**\n   * Animation progress bar\n   */\n  @Prop() animation: boolean = false;\n\n  /**\n   * Light progress background\n   */\n  @Prop() light: boolean = false;\n\n  /**\n   * Add padding if the progress is full width\n   */\n  @Prop() fullwidth: boolean = false;\n\n  /**\n   * The color to use from your application's color palette.\n   */\n  @Prop() color:\n    | \"primary\"\n    | \"secondary\"\n    | \"info\"\n    | \"success\"\n    | \"warning\"\n    | \"danger\"\n    | \"rating\" = \"primary\";\n\n  /**\n   * Progress calculation base for step display\n   * - previous: step is calculated based on the previous completed step\n   * - current: step is calculated based on the current progress\n   * Default is 'current'\n   */\n  @Prop() progresscalculationbase: \"previous\" | \"current\" = \"current\";\n\n  render() {\n    const fullwidth = this.fullwidth\n      ? \"progress-element-info-full-width\"\n      : \"progress-element-info\";\n    const light = this.light ? \"progress progress-light\" : \"progress\";\n    const animation = this.animation ? \"animation\" : \"\";\n\n    const offset: number = this.progresscalculationbase === \"current\" ? 0 : -1;\n    const percentagePerStep = 100 / this.numbersteps;\n    const progressBarFilledPercentage =\n      this.value + (this.numbersteps ? percentagePerStep * offset : 0);\n\n    let step = Math.ceil((this.value / 100) * this.numbersteps);\n    step = Math.min(step, this.numbersteps);\n    step = Math.max(step, 0);\n\n    return (\n      <Host class=\"progress-element\">\n        <div class={`${light} progress-${this.color} ${animation}`}>\n          <div\n            class=\"progress-bar\"\n            role=\"progressbar\"\n            style={{ width: `${progressBarFilledPercentage}%` }}\n            aria-valuenow={progressBarFilledPercentage}\n            aria-valuemin=\"0\"\n            aria-valuemax=\"100\"\n            aria-labelledby=\"loadinglabel\"\n            aria-label=\"progress bar\"\n          ></div>\n        </div>\n        <div class={`${fullwidth}`}>\n          <span id=\"loadinglabel\" class=\"progress-element-label\">\n            {this.label}\n          </span>\n          {this.showstep && (\n            <span class=\"progress-element-step\">\n              {step}/{this.numbersteps}\n            </span>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}