@roadtrip/components 3.26.0 → 3.28.0

package/dist/collection/components/input-group/input-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.js","sourceRoot":"","sources":["../../../src/components/input-group/input-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEtD;;;;GAIG;AAOH,MAAM,OAAO,UAAU;EAIrB,gBAAgB;;IACd,IAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,EAAE;MAChD,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,aAAa,CAAC,0CAAE,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;KACpE;EACH,CAAC;EAGD,MAAM;IACJ,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAClF,MAAM,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;IACzF,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,QAAS,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAA0B,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAElJ,OAAO,CACL,WAAK,KAAK,EAAE,eAAe,UAAU,IAAI,aAAa,IAAI,SAAS,EAAE;MACnE,WAAK,KAAK,EAAC,qBAAqB;QAC9B,YAAM,IAAI,EAAC,SAAS,GAAE,CAClB;MACN,eAAO;MACP,WAAK,KAAK,EAAC,oBAAoB;QAC7B,YAAM,IAAI,EAAC,QAAQ,GAAE,CACjB,CACF,CACP,CAAC;EACJ,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h } from '@stencil/core';\n\n/**\n * @slot prepend - Add icon or button before the field.\n * @slot  - Add the road-input or road-select here.\n * @slot append - Add icon or button after the field.\n */\n\n@Component({\n  tag: 'road-input-group',\n  styleUrl: 'input-group.css',\n  shadow: true,\n})\nexport class InputGroup {\n\n  @Element() el!: HTMLRoadInputGroupElement;\n\n  componentDidLoad() {\n    if(this.el.querySelector(\"road-input[disabled]\")) {\n      this.el.querySelector(\"road-button\")?.setAttribute('disabled', \"\");\n    }\n  }\n\n\n  render() {\n    const errorClass = this.el.querySelector(\"road-input[error]\") ? 'is-invalid' : '';\n    const disabledClass = this.el.querySelector(\"road-input[disabled]\") ? 'is-disabled' : '';\n    const sizeClass = this.el.querySelector(\"road-input[sizes]\") ? `size-${(this.el.querySelector(\"road-input\") as HTMLRoadInputElement).sizes}` : '';\n\n    return (\n      <div class={`input-group ${errorClass} ${disabledClass} ${sizeClass}`}>\n        <div class=\"input-group-prepend\">\n          <slot name=\"prepend\"/>\n        </div>\n        <slot/>\n        <div class=\"input-group-append\">\n          <slot name=\"append\"/>\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"input-group.js","sourceRoot":"","sources":["../../../src/components/input-group/input-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEnE;;;;GAIG;AAOH,MAAM,OAAO,UAAU;;oBAIO,KAAK;;EAEjC,6EAA6E;EAE7E,oBAAoB,CAAC,QAAiB;IACpC,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC;EACrC,CAAC;EAED,oEAAoE;EAC5D,mBAAmB,CAAC,UAAmB;IAC7C,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,sCAAsC,CAAC,CAAC;IAClF,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;MACvB,IAAI,UAAU,EAAE;QACd,KAAK,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;OACpC;WAAM;QACL,KAAK,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;OACnC;IACH,CAAC,CAAC,CAAC;EACL,CAAC;EAED,iBAAiB;IACf,mEAAmE;IACnE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;EAC1C,CAAC;EAED,MAAM;IACJ,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAClF,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC;MAC1D,CAAC,CAAC,QAAS,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAA0B,CAAC,KAAK,EAAE;MAC/E,CAAC,CAAC,EAAE,CAAC;IACP,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;IAEzD,OAAO,CACL,WAAK,KAAK,EAAE,eAAe,UAAU,IAAI,aAAa,IAAI,SAAS,EAAE;MACnE,WAAK,KAAK,EAAC,qBAAqB;QAC9B,YAAM,IAAI,EAAC,SAAS,GAAG,CACnB;MACN,eAAQ;MACR,WAAK,KAAK,EAAC,oBAAoB;QAC7B,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACF,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @slot prepend - Add icon or button before the field.\n * @slot  - Add the road-input or road-select here.\n * @slot append - Add icon or button after the field.\n */\n\n@Component({\n  tag: 'road-input-group',\n  styleUrl: 'input-group.css',\n  shadow: true,\n})\nexport class InputGroup {\n  @Element() el!: HTMLRoadInputGroupElement;\n\n  /** Disables the entire input group and propagates the state to children. */\n  @Prop() disabled: boolean = false;\n\n  /** Watches for changes in the `disabled` prop and updates child elements. */\n  @Watch('disabled')\n  handleDisabledChange(newValue: boolean) {\n    this.updateDisabledState(newValue);\n  }\n\n  /** Applies or removes the `disabled` attribute to/from children. */\n  private updateDisabledState(isDisabled: boolean) {\n    const children = this.el.querySelectorAll('road-input, road-button, road-select');\n    children.forEach(child => {\n      if (isDisabled) {\n        child.setAttribute('disabled', '');\n      } else {\n        child.removeAttribute('disabled');\n      }\n    });\n  }\n\n  componentWillLoad() {\n    // Ensure the initial state of `disabled` is applied before render.\n    this.updateDisabledState(this.disabled);\n  }\n\n  render() {\n    const errorClass = this.el.querySelector('road-input[error]') ? 'is-invalid' : '';\n    const sizeClass = this.el.querySelector('road-input[sizes]') \n      ? `size-${(this.el.querySelector('road-input') as HTMLRoadInputElement).sizes}` \n      : '';\n    const disabledClass = this.disabled ? 'is-disabled' : '';\n\n    return (\n      <div class={`input-group ${errorClass} ${disabledClass} ${sizeClass}`}>\n        <div class=\"input-group-prepend\">\n          <slot name=\"prepend\" />\n        </div>\n        <slot />\n        <div class=\"input-group-append\">\n          <slot name=\"append\" />\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/input-group/input-group.stories.js

@@ -14,14 +14,20 @@ export default {
     append: {
       control: 'text',
     },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    disabled: false, // Défaut : non désactivé
   },
 };
 
 const Template = (args) => html`
-<road-input-group>
-  ${unsafeHTML(args[' '])}
-  ${unsafeHTML(args.prepend)}
-  ${unsafeHTML(args.append)}
+<road-input-group ?disabled=${args.disabled}>
+  ${unsafeHTML(args.prepend || '')}
+  ${unsafeHTML(args[' '] || '')}
+  ${unsafeHTML(args.append || '')}
 </road-input-group>
 `;
 
@@ -37,30 +43,34 @@ export const Button = Template.bind({});
 Button.args = {
   ' ': `<road-input input-id="newsletter" sizes="xl" label="Newsletter"></road-input>`,
   append: `<road-button slot="append" outline="true">
-  OK
-</road-button>`,
+    OK
+  </road-button>`,
 };
 
 export const Disabled = Template.bind({});
 Disabled.args = {
-  ' ': `<road-input input-id="inputGroupDisabled" sizes="xl" label="Label" disabled="true"></road-input>`,
-  append: `<road-button slot="append" outline="true">
-  <road-icon color="secondary" name="alert-info-outline"></road-icon>
-</road-button>`,
+  disabled: true, // Désactive tout le groupe
+  ' ': `<road-input input-id="inputGroupDisabled" sizes="xl" label="Label" disabled></road-input>`,
+  prepend: `<road-button slot="prepend" outline="true" disabled>
+    <road-icon color="secondary" name="alert-info-outline"></road-icon>
+  </road-button>`,
+  append: `<road-button slot="append" outline="true" disabled>
+    <road-icon color="secondary" name="alert-info-outline"></road-icon>
+  </road-button>`,
 };
 
 export const Error = Template.bind({});
 Error.args = {
   ' ': `<road-input input-id="inputGroupError" sizes="xl" label="Label" error="error message here"></road-input>`,
   append: `<label slot="append">
-  <road-icon name="payment-card" role="img"></road-icon>
-</label>`,
+    <road-icon name="payment-card" role="img"></road-icon>
+  </label>`,
 };
 
 export const Password = Template.bind({});
 Password.args = {
   ' ': `<road-input input-id="password" sizes="xl" label="password" type="password"></road-input>`,
   append: `<road-button slot="append" outline="true">
-  <road-icon name="visibility-off-outline" role="button"></road-icon>
-</road-button>`,
+    <road-icon name="visibility-off-outline" role="button"></road-icon>
+  </road-button>`,
 };

package/dist/collection/components/navbar-item/navbar-item.js

@@ -25,6 +25,14 @@ export class NavbarItem {
   onNavbarChanged(ev) {
     this.selected = this.tab === ev.detail.tab;
   }
+  /**
+   * Watch for changes to `selected` and move focus to this element if `selected` is true.
+   */
+  handleSelectedChange(newValue) {
+    if (newValue) {
+      this.el.focus();
+    }
+  }
   selectTab(ev) {
     if (this.tab !== undefined) {
       if (!this.disabled) {
@@ -52,7 +60,7 @@ export class NavbarItem {
       rel,
       target,
     };
-    return (h(Host, { onClick: this.onClick, onKeyup: this.onKeyUp, role: "menu", tabindex: "0", "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `navbar-item-${tab}` : null, disabled: disabled, class: {
+    return (h(Host, { onClick: this.onClick, onKeyup: this.onKeyUp, role: "menuitem", tabindex: "0", "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `navbar-item-${tab}` : null, disabled: disabled, class: {
         'navbar-item': true,
         'tab-selected': selected,
         'tab-disabled': disabled,
@@ -235,6 +243,12 @@ export class NavbarItem {
       }];
   }
   static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "selected",
+        "methodName": "handleSelectedChange"
+      }];
+  }
   static get listeners() {
     return [{
         "name": "roadNavbarChanged",

package/dist/collection/components/navbar-item/navbar-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar-item.js","sourceRoot":"","sources":["../../../src/components/navbar-item/navbar-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAE/F;;;;GAIG;AAOH,MAAM,OAAO,UAAU;;IAiFb,YAAO,GAAG,CAAC,EAAiB,EAAE,EAAE;MACtC,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,EAAE;QACxC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;OACpB;IACH,CAAC,CAAC;IAEM,YAAO,GAAG,CAAC,EAAS,EAAE,EAAE;MAC9B,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;IACrB,CAAC,CAAC;oBAlFiB,KAAK;;;;oBAyBY,KAAK;;;;EAyBzC,eAAe,CAAC,EAAe;IAC7B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;EAC7C,CAAC;EAEO,SAAS,CAAC,EAAyB;IACzC,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,EAAE;MAC1B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAClB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;UAC5B,GAAG,EAAE,IAAI,CAAC,GAAG;UACb,IAAI,EAAE,IAAI,CAAC,IAAI;UACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;QACH,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;UAC5B,GAAG,EAAE,IAAI,CAAC,GAAG;UACb,IAAI,EAAE,IAAI,CAAC,IAAI;UACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;OACJ;MACD,IAAG,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;QAC1B,EAAE,CAAC,cAAc,EAAE,CAAC;OACrB;KACF;EACH,CAAC;EAYD,MAAM;IACJ,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;IAC5D,MAAM,KAAK,GAAG;MACZ,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,IAAI;MACJ,GAAG;MACH,MAAM;KACP,CAAC;IAEF,OAAO,CACL,EAAC,IAAI,IACH,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,MAAM,EACX,QAAQ,EAAC,GAAG,mBACG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EACvC,EAAE,EAAE,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,eAAe,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,EACnD,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,cAAc,EAAE,QAAQ;QACxB,cAAc,EAAE,QAAQ;OACzB;MAED,yBAAO,KAAK,IAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ;QAC7D,YAAM,KAAK,EAAC,cAAc;UACxB,eAAO,CACF,CACL,CACC,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Element, Prop, Event, EventEmitter, Listen } from '@stencil/core';\n\n/**\n * @slot  - Content of the item, it should be road-icon and road-label elements.\n *\n * @part native - The native HTML anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-navbar-item',\n  styleUrl: 'navbar-item.css',\n  shadow: true,\n})\nexport class NavbarItem {\n\n  @Element() el!: HTMLRoadNavbarItemElement;\n\n  /**\n   * If `true`, the user cannot interact with the tab button.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download: string | undefined;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href: string | undefined;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel: string | undefined;\n\n  /**\n   * The selected tab component\n   */\n  @Prop({ mutable: true }) selected = false;\n\n  /**\n   * A tab id must be provided for each `road-tab`. It's used internally to reference\n   * the selected tab.\n   */\n  @Prop() tab?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target: string | undefined;\n\n  /**\n   * Emitted when the tab bar is clicked\n   * @internal\n   */\n  @Event() roadnavbaritemclick!: EventEmitter;\n  /** @internal */\n  @Event() roadNavbarItemClick!: EventEmitter;\n\n  @Listen('roadNavbarChanged', { target: 'window' })\n  @Listen('roadnavbarchanged', { target: 'window' })\n  onNavbarChanged(ev: CustomEvent) {\n    this.selected = this.tab === ev.detail.tab;\n  }\n\n  private selectTab(ev: Event | KeyboardEvent) {\n    if (this.tab !== undefined) {\n      if (!this.disabled) {\n        this.roadnavbaritemclick.emit({\n          tab: this.tab,\n          href: this.href,\n          selected: this.selected,\n        });\n        this.roadNavbarItemClick.emit({\n          tab: this.tab,\n          href: this.href,\n          selected: this.selected,\n        });\n      }\n      if(this.href === undefined) {\n        ev.preventDefault();\n      }\n    }\n  }\n\n  private onKeyUp = (ev: KeyboardEvent) => {\n    if (ev.key === 'Enter' || ev.key === ' ') {\n      this.selectTab(ev);\n    }\n  };\n\n  private onClick = (ev: Event) => {\n    this.selectTab(ev);\n  };\n\n  render() {\n    const { href, rel, target, selected, tab, disabled } = this;\n    const attrs = {\n      download: this.download,\n      href,\n      rel,\n      target,\n    };\n\n    return (\n      <Host\n        onClick={this.onClick}\n        onKeyup={this.onKeyUp}\n        role=\"menu\"\n        tabindex=\"0\"\n        aria-selected={selected ? 'true' : null}\n        id={tab !== undefined ? `navbar-item-${tab}` : null}\n        disabled={disabled}\n        class={{\n          'navbar-item': true,\n          'tab-selected': selected,\n          'tab-disabled': disabled,\n        }}\n      >\n        <a {...attrs} tabIndex={-1} class=\"button-native\" part=\"native\">\n          <span class=\"button-inner\">\n            <slot/>\n          </span>\n        </a>\n      </Host>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"navbar-item.js","sourceRoot":"","sources":["../../../src/components/navbar-item/navbar-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop, Event, EventEmitter, Listen, Watch } from '@stencil/core';\n\n/**\n * @slot  - Content of the item, it should be road-icon and road-label elements.\n *\n * @part native - The native HTML anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-navbar-item',\n  styleUrl: 'navbar-item.css',\n  shadow: true,\n})\nexport class NavbarItem {\n\n  @Element() el!: HTMLRoadNavbarItemElement;\n\n  /**\n   * If `true`, the user cannot interact with the tab button.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download: string | undefined;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href: string | undefined;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel: string | undefined;\n\n  /**\n   * The selected tab component\n   */\n  @Prop({ mutable: true }) selected = false;\n\n  /**\n   * A tab id must be provided for each `road-tab`. It's used internally to reference\n   * the selected tab.\n   */\n  @Prop() tab?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target: string | undefined;\n\n  /**\n   * Emitted when the tab bar is clicked\n   * @internal\n   */\n  @Event() roadnavbaritemclick!: EventEmitter;\n  /** @internal */\n  @Event() roadNavbarItemClick!: EventEmitter;\n\n  @Listen('roadNavbarChanged', { target: 'window' })\n  @Listen('roadnavbarchanged', { target: 'window' })\n  onNavbarChanged(ev: CustomEvent) {\n    this.selected = this.tab === ev.detail.tab;\n  }\n\n  /**\n   * Watch for changes to `selected` and move focus to this element if `selected` is true.\n   */\n  @Watch('selected')\n  handleSelectedChange(newValue: boolean) {\n    if (newValue) {\n      this.el.focus();\n    }\n  }\n\n  private selectTab(ev: Event | KeyboardEvent) {\n    if (this.tab !== undefined) {\n      if (!this.disabled) {\n        this.roadnavbaritemclick.emit({\n          tab: this.tab,\n          href: this.href,\n          selected: this.selected,\n        });\n        this.roadNavbarItemClick.emit({\n          tab: this.tab,\n          href: this.href,\n          selected: this.selected,\n        });\n      }\n      if(this.href === undefined) {\n        ev.preventDefault();\n      }\n    }\n  }\n\n  private onKeyUp = (ev: KeyboardEvent) => {\n    if (ev.key === 'Enter' || ev.key === ' ') {\n      this.selectTab(ev);\n    }\n  };\n\n  private onClick = (ev: Event) => {\n    this.selectTab(ev);\n  };\n\n  render() {\n    const { href, rel, target, selected, tab, disabled } = this;\n    const attrs = {\n      download: this.download,\n      href,\n      rel,\n      target,\n    };\n\n    return (\n      <Host\n        onClick={this.onClick}\n        onKeyup={this.onKeyUp}\n        role=\"menuitem\"\n        tabindex=\"0\"\n        aria-selected={selected ? 'true' : null}\n        id={tab !== undefined ? `navbar-item-${tab}` : null}\n        disabled={disabled}\n        class={{\n          'navbar-item': true,\n          'tab-selected': selected,\n          'tab-disabled': disabled,\n        }}\n      >\n        <a {...attrs} tabIndex={-1} class=\"button-native\" part=\"native\">\n          <span class=\"button-inner\">\n            <slot/>\n          </span>\n        </a>\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/progress-indicator-horizontal/progress-indicator-horizontal.css

@@ -171,7 +171,8 @@
   background: var(--road-primary);
 }
 
-.progress-indicator-horizontal-header .completed:not(:last-child)::after {
+.progress-indicator-horizontal-header .completed:not(:last-child)::after,
+.progress-indicator-horizontal-header .in-progress:not(:last-child)::after {
   background: var(--road-header-badge);
 }
 
@@ -181,7 +182,8 @@
   border: 0;
 }
 
-.completed .progress-indicator-horizontal-icon{
+.completed .progress-indicator-horizontal-icon,
+.in-progress .progress-indicator-horizontal-icon{
   width: calc(1.5rem - 4px);
   height: calc(1.5rem - 4px);
   color: var(--road-primary);
@@ -189,7 +191,8 @@
   border: 2px solid var(--road-primary);
 }
 
-.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-icon {
+.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-icon,
+.progress-indicator-horizontal-header .in-progress .progress-indicator-horizontal-icon  {
   color: var(--road-header-badge);
   background: none;
   border: 2px solid var(--road-header-badge);
@@ -204,13 +207,29 @@
 }
 
 .current .progress-indicator-horizontal-title,
-.completed .progress-indicator-horizontal-title {
+.completed .progress-indicator-horizontal-title,
+.in-progress .progress-indicator-horizontal-title {
   font-weight: 700;
   color: var(--road-on-surface);
 }
 
 .progress-indicator-horizontal-header .current .progress-indicator-horizontal-title,
-.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-title {
+.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-title,
+.progress-indicator-horizontal-header .in-progress .progress-indicator-horizontal-title {
   font-weight: 700;
   color: var(--road-on-header-surface);
 }
+
+/* IN PROGRESS
+-------------------- */
+
+.in-progress.progress-indicator-horizontal-item:not(:last-child)::before {
+  position: relative;
+  top: 0.93rem;
+  left: calc(50% + 12px);
+  order: -1;
+  width: calc(50% - 24px);
+  height: 2px;
+  content: "";
+  background: var(--road-primary);
+}

package/dist/collection/components/progress-indicator-horizontal/progress-indicator-horizontal.js

@@ -85,8 +85,8 @@ export class Stepper {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'default' | 'current' | 'comleted'",
-          "resolved": "\"comleted\" | \"current\" | \"default\" | undefined",
+          "original": "'default' | 'current' | 'comleted' | 'in-progress'",
+          "resolved": "\"comleted\" | \"current\" | \"default\" | \"in-progress\" | undefined",
           "references": {}
         },
         "required": false,
@@ -102,8 +102,8 @@ export class Stepper {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'default' | 'current' | 'comleted'",
-          "resolved": "\"comleted\" | \"current\" | \"default\" | undefined",
+          "original": "'default' | 'current' | 'comleted' | 'in-progress'",
+          "resolved": "\"comleted\" | \"current\" | \"default\" | \"in-progress\" | undefined",
           "references": {}
         },
         "required": false,
@@ -119,8 +119,8 @@ export class Stepper {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'default' | 'current' | 'comleted'",
-          "resolved": "\"comleted\" | \"current\" | \"default\" | undefined",
+          "original": "'default' | 'current' | 'comleted' | 'in-progress'",
+          "resolved": "\"comleted\" | \"current\" | \"default\" | \"in-progress\" | undefined",
           "references": {}
         },
         "required": false,

package/dist/collection/components/progress-indicator-horizontal/progress-indicator-horizontal.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-indicator-horizontal.js","sourceRoot":"","sources":["../../../src/components/progress-indicator-horizontal/progress-indicator-horizontal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;;;;GAUG;AAOH,MAAM,OAAO,OAAO;;iBAKwC,SAAS;sBAKpC,CAAC;;;;;;;;EAiC7B,MAAM;IAEJ,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,+DAA+D,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,+BAA+B,CAAC;IAC5J,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,sCAAsC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,oCAAoC,CAAC;IAC1J,MAAM,oBAAoB,GAAG,IAAI,CAAC,eAAe,KAAK,SAAS,CAAC,CAAC,CAAC,sCAAsC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,oCAAoC,CAAC;IACtK,MAAM,mBAAmB,GAAG,IAAI,CAAC,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,sCAAsC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,oCAAoC,CAAC;IACnK,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;IACxE,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;IACxE,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;IAExE,OAAO,CACL,EAAC,IAAI;MACH;QACK,UAAI,KAAK,EAAE,GAAG,UAAU,EAAE;UAC1B,UAAI,KAAK,EAAE,GAAG,UAAU,EAAE;YACxB,SAAG,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,GAAG,QAAQ,EAAE;cAC/D,YAAM,KAAK,EAAC,oCAAoC;gBAC9C,YAAM,IAAI,EAAC,oCAAoC,GAAE,CAC5C;cACP,YAAM,KAAK,EAAC,qCAAqC;gBAC/C,YAAM,IAAI,EAAC,qCAAqC,GAAE,CAC7C,CACL,CACD;UACL,UAAI,KAAK,EAAE,GAAG,oBAAoB,EAAE;YACnC,SAAG,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,GAAG,QAAQ,EAAE;cAC/D,YAAM,KAAK,EAAC,oCAAoC;gBAC9C,YAAM,IAAI,EAAC,qCAAqC,GAAE,CAC7C;cACP,YAAM,KAAK,EAAC,qCAAqC;gBAC/C,YAAM,IAAI,EAAC,sCAAsC,GAAE,CAC9C,CACL,CACD;UACJ,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,UAAI,KAAK,EAAE,GAAG,mBAAmB,EAAE;YAC1D,SAAG,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,GAAG,QAAQ,EAAE;cAC/D,YAAM,KAAK,EAAC,oCAAoC;gBAC9C,YAAM,IAAI,EAAC,qCAAqC,GAAE,CAC7C;cACP,YAAM,KAAK,EAAC,qCAAqC;gBAC/C,YAAM,IAAI,EAAC,sCAAsC,GAAE,CAC9C,CACL,CACD,CAEF,CACD,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEL","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @slot progress-indicator-horizontal-icon - if the state of the step 1 is completed add\n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>` by default.\n * @slot progress-indicator-horizontal-title \n * @slot progress-indicator-horizontal-icon2 - if the state of the step 2 is completed add\n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>` by default.\n * @slot progress-indicator-horizontal-title2 \n * @slot progress-indicator-horizontal-icon3 - if the state of the step 3 is completed add\n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>` by default.\n * @slot progress-indicator-horizontal-title3\n */\n\n@Component({\n  tag: 'road-progress-indicator-horizontal',\n  styleUrl: 'progress-indicator-horizontal.css',\n  shadow: true,\n})\nexport class Stepper {\n\n  /**\n    * The color progress-indicator-horizontal.\n    */\n    @Prop({ reflect: true }) color?: 'default' | 'header' = 'default';\n\n    /**\n    * The nombre of steps.\n    */\n    @Prop() numberStep?: 3 | 2 = 3;\n\n    /**\n   * The color of the first step.\n   */\n   @Prop() stateFirstStep?: 'default' | 'current' | 'comleted';\n\n    /**\n   * The color of the second step.\n   */\n    @Prop() stateSecondStep?: 'default' | 'current' | 'comleted';\n\n    /**\n   * The color of the third step.\n   */\n     @Prop() stateThirdStep?: 'default' | 'current' | 'comleted';\n\n    /**\n   * The url of the first step.\n   */\n    @Prop() urlStep1?: string;\n\n    /**\n   * The url of the first step.\n   */\n    @Prop() urlStep2?: string;\n\n    /**\n   * The url of the first step.\n   */\n    @Prop() urlStep3?: string;\n    \n\n     render() {\n\n       const colorClass = this.color !== undefined ? `progress-indicator-horizontal progress-indicator-horizontal-${this.color}` : 'progress-indicator-horizontal';\n       const stateClass = this.stateFirstStep !== undefined ? `progress-indicator-horizontal-item ${this.stateFirstStep}` : 'progress-indicator-horizontal-item';\n       const stateSecondStepClass = this.stateSecondStep !== undefined ? `progress-indicator-horizontal-item ${this.stateSecondStep}` : 'progress-indicator-horizontal-item';\n       const stateThirdStepClass = this.stateThirdStep !== undefined ? `progress-indicator-horizontal-item ${this.stateThirdStep}` : 'progress-indicator-horizontal-item';\n       const urlStep1 = this.urlStep1 !== undefined ? `${this.urlStep1}` : '#';\n       const urlStep2 = this.urlStep2 !== undefined ? `${this.urlStep2}` : '#';\n       const urlStep3 = this.urlStep3 !== undefined ? `${this.urlStep3}` : '#';\n\n       return (\n         <Host>\n           <nav>\n                <ul class={`${colorClass}`}>\n                <li class={`${stateClass}`}>\n                  <a class=\"progress-indicator-horizontal-link\" href={`${urlStep1}`}>\n                    <span class=\"progress-indicator-horizontal-icon\">\n                      <slot name=\"progress-indicator-horizontal-icon\"/>\n                    </span>\n                    <span class=\"progress-indicator-horizontal-title\">\n                      <slot name=\"progress-indicator-horizontal-title\"/>\n                    </span>\n                  </a>\n                </li>\n                <li class={`${stateSecondStepClass}`}>\n                 <a class=\"progress-indicator-horizontal-link\" href={`${urlStep2}`}>\n                   <span class=\"progress-indicator-horizontal-icon\">\n                     <slot name=\"progress-indicator-horizontal-icon2\"/>\n                   </span>\n                   <span class=\"progress-indicator-horizontal-title\">\n                     <slot name=\"progress-indicator-horizontal-title2\"/>\n                   </span>\n                 </a>\n               </li>\n               {this.numberStep == 3 && <li class={`${stateThirdStepClass}`}>\n                 <a class=\"progress-indicator-horizontal-link\" href={`${urlStep3}`}>\n                   <span class=\"progress-indicator-horizontal-icon\">\n                     <slot name=\"progress-indicator-horizontal-icon3\"/>\n                   </span>\n                   <span class=\"progress-indicator-horizontal-title\">\n                     <slot name=\"progress-indicator-horizontal-title3\"/>\n                   </span>\n                 </a>\n               </li>}\n               \n             </ul>\n           </nav>\n         </Host>\n       );\n     }\n\n}\n"]}
+{"version":3,"file":"progress-indicator-horizontal.js","sourceRoot":"","sources":["../../../src/components/progress-indicator-horizontal/progress-indicator-horizontal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;;;;GAUG;AAOH,MAAM,OAAO,OAAO;;iBAKwC,SAAS;sBAKpC,CAAC;;;;;;;;EAiC7B,MAAM;IAEJ,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,+DAA+D,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,+BAA+B,CAAC;IAC5J,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,sCAAsC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,oCAAoC,CAAC;IAC1J,MAAM,oBAAoB,GAAG,IAAI,CAAC,eAAe,KAAK,SAAS,CAAC,CAAC,CAAC,sCAAsC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,oCAAoC,CAAC;IACtK,MAAM,mBAAmB,GAAG,IAAI,CAAC,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,sCAAsC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,oCAAoC,CAAC;IACnK,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;IACxE,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;IACxE,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;IAExE,OAAO,CACL,EAAC,IAAI;MACH;QACK,UAAI,KAAK,EAAE,GAAG,UAAU,EAAE;UAC1B,UAAI,KAAK,EAAE,GAAG,UAAU,EAAE;YACxB,SAAG,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,GAAG,QAAQ,EAAE;cAC/D,YAAM,KAAK,EAAC,oCAAoC;gBAC9C,YAAM,IAAI,EAAC,oCAAoC,GAAE,CAC5C;cACP,YAAM,KAAK,EAAC,qCAAqC;gBAC/C,YAAM,IAAI,EAAC,qCAAqC,GAAE,CAC7C,CACL,CACD;UACL,UAAI,KAAK,EAAE,GAAG,oBAAoB,EAAE;YACnC,SAAG,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,GAAG,QAAQ,EAAE;cAC/D,YAAM,KAAK,EAAC,oCAAoC;gBAC9C,YAAM,IAAI,EAAC,qCAAqC,GAAE,CAC7C;cACP,YAAM,KAAK,EAAC,qCAAqC;gBAC/C,YAAM,IAAI,EAAC,sCAAsC,GAAE,CAC9C,CACL,CACD;UACJ,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,UAAI,KAAK,EAAE,GAAG,mBAAmB,EAAE;YAC1D,SAAG,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,GAAG,QAAQ,EAAE;cAC/D,YAAM,KAAK,EAAC,oCAAoC;gBAC9C,YAAM,IAAI,EAAC,qCAAqC,GAAE,CAC7C;cACP,YAAM,KAAK,EAAC,qCAAqC;gBAC/C,YAAM,IAAI,EAAC,sCAAsC,GAAE,CAC9C,CACL,CACD,CAEF,CACD,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEL","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @slot progress-indicator-horizontal-icon - if the state of the step 1 is completed add\n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>` by default.\n * @slot progress-indicator-horizontal-title \n * @slot progress-indicator-horizontal-icon2 - if the state of the step 2 is completed add\n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>` by default.\n * @slot progress-indicator-horizontal-title2 \n * @slot progress-indicator-horizontal-icon3 - if the state of the step 3 is completed add\n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>` by default.\n * @slot progress-indicator-horizontal-title3\n */\n\n@Component({\n  tag: 'road-progress-indicator-horizontal',\n  styleUrl: 'progress-indicator-horizontal.css',\n  shadow: true,\n})\nexport class Stepper {\n\n  /**\n    * The color progress-indicator-horizontal.\n    */\n    @Prop({ reflect: true }) color?: 'default' | 'header' = 'default';\n\n    /**\n    * The nombre of steps.\n    */\n    @Prop() numberStep?: 3 | 2 = 3;\n\n    /**\n   * The color of the first step.\n   */\n   @Prop() stateFirstStep?: 'default' | 'current' | 'comleted' | 'in-progress';\n\n    /**\n   * The color of the second step.\n   */\n    @Prop() stateSecondStep?: 'default' | 'current' | 'comleted' | 'in-progress';\n\n    /**\n   * The color of the third step.\n   */\n     @Prop() stateThirdStep?: 'default' | 'current' | 'comleted' | 'in-progress';\n\n    /**\n   * The url of the first step.\n   */\n    @Prop() urlStep1?: string;\n\n    /**\n   * The url of the first step.\n   */\n    @Prop() urlStep2?: string;\n\n    /**\n   * The url of the first step.\n   */\n    @Prop() urlStep3?: string;\n    \n\n     render() {\n\n       const colorClass = this.color !== undefined ? `progress-indicator-horizontal progress-indicator-horizontal-${this.color}` : 'progress-indicator-horizontal';\n       const stateClass = this.stateFirstStep !== undefined ? `progress-indicator-horizontal-item ${this.stateFirstStep}` : 'progress-indicator-horizontal-item';\n       const stateSecondStepClass = this.stateSecondStep !== undefined ? `progress-indicator-horizontal-item ${this.stateSecondStep}` : 'progress-indicator-horizontal-item';\n       const stateThirdStepClass = this.stateThirdStep !== undefined ? `progress-indicator-horizontal-item ${this.stateThirdStep}` : 'progress-indicator-horizontal-item';\n       const urlStep1 = this.urlStep1 !== undefined ? `${this.urlStep1}` : '#';\n       const urlStep2 = this.urlStep2 !== undefined ? `${this.urlStep2}` : '#';\n       const urlStep3 = this.urlStep3 !== undefined ? `${this.urlStep3}` : '#';\n\n       return (\n         <Host>\n           <nav>\n                <ul class={`${colorClass}`}>\n                <li class={`${stateClass}`}>\n                  <a class=\"progress-indicator-horizontal-link\" href={`${urlStep1}`}>\n                    <span class=\"progress-indicator-horizontal-icon\">\n                      <slot name=\"progress-indicator-horizontal-icon\"/>\n                    </span>\n                    <span class=\"progress-indicator-horizontal-title\">\n                      <slot name=\"progress-indicator-horizontal-title\"/>\n                    </span>\n                  </a>\n                </li>\n                <li class={`${stateSecondStepClass}`}>\n                 <a class=\"progress-indicator-horizontal-link\" href={`${urlStep2}`}>\n                   <span class=\"progress-indicator-horizontal-icon\">\n                     <slot name=\"progress-indicator-horizontal-icon2\"/>\n                   </span>\n                   <span class=\"progress-indicator-horizontal-title\">\n                     <slot name=\"progress-indicator-horizontal-title2\"/>\n                   </span>\n                 </a>\n               </li>\n               {this.numberStep == 3 && <li class={`${stateThirdStepClass}`}>\n                 <a class=\"progress-indicator-horizontal-link\" href={`${urlStep3}`}>\n                   <span class=\"progress-indicator-horizontal-icon\">\n                     <slot name=\"progress-indicator-horizontal-icon3\"/>\n                   </span>\n                   <span class=\"progress-indicator-horizontal-title\">\n                     <slot name=\"progress-indicator-horizontal-title3\"/>\n                   </span>\n                 </a>\n               </li>}\n               \n             </ul>\n           </nav>\n         </Host>\n       );\n     }\n\n}\n"]}

package/dist/collection/components/progress-indicator-horizontal/progress-indicator-horizontal.stories.js

@@ -19,19 +19,19 @@ export default {
       },
     },
     'state-first-step': {
-      options: ['default', 'current', 'completed'],
+      options: ['default', 'current', 'completed', 'in-progress'],
       control: {
         type: 'select',
       },
     },
     'state-second-step': {
-      options: ['default', 'current', 'completed'],
+      options: ['default', 'current', 'completed', 'in-progress'],
       control: {
         type: 'select',
       },
     },
     'state-third-step': {
-      options: ['default', 'current', 'completed'],
+      options: ['default', 'current', 'completed', 'in-progress'],
       control: {
         type: 'select',
       },

package/dist/collection/components/radio/radio.css

@@ -81,6 +81,11 @@
   transition: border-color 0.2s ease-in-out;
 }
 
+.form-radio-label-span {
+  margin-left: var(--road-spacing-02);
+  color: var(--road-on-surface-weak);
+}
+
 .form-radio-label::after {
   position: absolute;
   top: 0.285rem;

package/dist/collection/components/radio/radio.js

@@ -23,6 +23,7 @@ export class Radio {
     this.disabled = false;
     this.value = undefined;
     this.label = `${this.radioId}-label`;
+    this.secondaryLabel = undefined;
     this.inverse = false;
     this.error = undefined;
     this.helper = undefined;
@@ -51,7 +52,7 @@ export class Radio {
     const inverseClass = this.inverse && 'form-radio-inverse';
     const isInvalidClass = this.error ? 'is-invalid' : '';
     const inlineClass = this.inline ? 'form-radio-inline' : '';
-    return (h(Host, { class: `form-radio ${inlineClass}` }, h("input", { class: `form-radio-input ${isInvalidClass}`, type: "radio", id: this.radioId, name: this.name, required: this.required, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, checked: this.checked, "aria-checked": `${this.checked}`, "aria-labelledby": labelId, value: this.value, onFocus: this.onFocus, onBlur: this.onBlur }), h("label", { class: `form-radio-label ${inverseClass}`, id: labelId, htmlFor: this.radioId }, this.label)));
+    return (h(Host, { class: `form-radio ${inlineClass}` }, h("input", { class: `form-radio-input ${isInvalidClass}`, type: "radio", id: this.radioId, name: this.name, required: this.required, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, checked: this.checked, "aria-checked": `${this.checked}`, "aria-labelledby": labelId, value: this.value, onFocus: this.onFocus, onBlur: this.onBlur }), h("label", { class: `form-radio-label ${inverseClass}`, id: labelId, htmlFor: this.radioId }, this.label, " ", h("span", { class: "form-radio-label-span" }, this.secondaryLabel))));
   }
   static get is() { return "road-radio"; }
   static get encapsulation() { return "scoped"; }
@@ -174,6 +175,23 @@ export class Radio {
         "reflect": false,
         "defaultValue": "`${this.radioId}-label`"
       },
+      "secondaryLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Secondary Label for the field"
+        },
+        "attribute": "secondary-label",
+        "reflect": false
+      },
       "inverse": {
         "type": "boolean",
         "mutable": false,

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

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, State, h, Listen } from '@stencil/core';\nimport './../../utils/polyfill';\n\n@Component({\n  tag: 'road-radio',\n  styleUrl: 'radio.css',\n  scoped: true,\n})\nexport class Radio {\n\n  private radioGroup: HTMLRoadRadioGroupElement | null = null;\n\n  @Element() el!: HTMLRoadRadioElement;\n\n  /**\n   * The id of radio\n   */\n  @Prop() radioId: string = `road-radio-${radioIds++}`;\n\n  /**\n   * If `true`, the radio is selected.\n   */\n  @State() checked: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.radioId;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * If `true`, the user cannot interact with the radio.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Value the form will get\n   */\n  @Prop() value?: any | null;\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.radioId}-label`;\n\n  /**\n   * If `true`, the label and the radio are inverse and spaced\n   */\n  @Prop() inverse: boolean = false;\n\n  /**\n   * Error message for the field\n   */\n  @Prop() error?: boolean;\n\n  /**\n   * Helper message for the field\n   */\n  @Prop() helper?: string;\n\n  /**\n   * Inline multiple radio\n   */\n  @Prop() inline: boolean = true;\n\n  /**\n   * Emitted when the radio button has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the radio button loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  connectedCallback() {\n    if (this.value === undefined) {\n      this.value = this.radioId;\n    }\n    const radioGroup = this.radioGroup = this.el.closest('road-radio-group');\n    if (radioGroup) {\n      this.updateState();\n    }\n  }\n\n  disconnectedCallback() {\n    const radioGroup = this.radioGroup;\n    if (radioGroup) {\n      this.radioGroup = null;\n    }\n  }\n\n  @Listen('roadChange', {target: 'window'})\n  @Listen('roadchange', {target: 'window'})\n  onRoadChangedChanged() {\n    this.updateState();\n  }\n\n  private updateState = () => {\n    if (this.radioGroup) {\n      this.checked = this.radioGroup.value === this.value;\n    }\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  render() {\n    const labelId = this.radioId + '-label';\n    const inverseClass = this.inverse && 'form-radio-inverse';\n    const isInvalidClass = this.error ? 'is-invalid' : '';\n    const inlineClass = this.inline ? 'form-radio-inline' : '';\n\n    return (\n      <Host class={`form-radio ${inlineClass}`}>\n        <input\n          class={`form-radio-input ${isInvalidClass}`}\n          type=\"radio\"\n          id={this.radioId}\n          name={this.name}\n          required={this.required}\n          disabled={this.disabled}\n          aria-disabled={this.disabled ? 'true' : null}\n          checked={this.checked}\n          aria-checked={`${this.checked}`}\n          aria-labelledby={labelId}\n          value={this.value}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        />\n        <label class={`form-radio-label ${inverseClass}`} id={labelId} htmlFor={this.radioId}>{this.label}</label>\n      </Host>\n    );\n  }\n}\n\nlet radioIds = 0;\n"]}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, State, h, Listen } from '@stencil/core';\nimport './../../utils/polyfill';\n\n@Component({\n  tag: 'road-radio',\n  styleUrl: 'radio.css',\n  scoped: true,\n})\nexport class Radio {\n\n  private radioGroup: HTMLRoadRadioGroupElement | null = null;\n\n  @Element() el!: HTMLRoadRadioElement;\n\n  /**\n   * The id of radio\n   */\n  @Prop() radioId: string = `road-radio-${radioIds++}`;\n\n  /**\n   * If `true`, the radio is selected.\n   */\n  @State() checked: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.radioId;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * If `true`, the user cannot interact with the radio.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Value the form will get\n   */\n  @Prop() value?: any | null;\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.radioId}-label`;\n\n  /**\n  * Secondary Label for the field\n  */\n  @Prop() secondaryLabel?: string;\n\n  /**\n   * If `true`, the label and the radio are inverse and spaced\n   */\n  @Prop() inverse: boolean = false;\n\n  /**\n   * Error message for the field\n   */\n  @Prop() error?: boolean;\n\n  /**\n   * Helper message for the field\n   */\n  @Prop() helper?: string;\n\n  /**\n   * Inline multiple radio\n   */\n  @Prop() inline: boolean = true;\n\n  /**\n   * Emitted when the radio button has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the radio button loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  connectedCallback() {\n    if (this.value === undefined) {\n      this.value = this.radioId;\n    }\n    const radioGroup = this.radioGroup = this.el.closest('road-radio-group');\n    if (radioGroup) {\n      this.updateState();\n    }\n  }\n\n  disconnectedCallback() {\n    const radioGroup = this.radioGroup;\n    if (radioGroup) {\n      this.radioGroup = null;\n    }\n  }\n\n  @Listen('roadChange', {target: 'window'})\n  @Listen('roadchange', {target: 'window'})\n  onRoadChangedChanged() {\n    this.updateState();\n  }\n\n  private updateState = () => {\n    if (this.radioGroup) {\n      this.checked = this.radioGroup.value === this.value;\n    }\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  render() {\n    const labelId = this.radioId + '-label';\n    const inverseClass = this.inverse && 'form-radio-inverse';\n    const isInvalidClass = this.error ? 'is-invalid' : '';\n    const inlineClass = this.inline ? 'form-radio-inline' : '';\n\n    return (\n      <Host class={`form-radio ${inlineClass}`}>\n        <input\n          class={`form-radio-input ${isInvalidClass}`}\n          type=\"radio\"\n          id={this.radioId}\n          name={this.name}\n          required={this.required}\n          disabled={this.disabled}\n          aria-disabled={this.disabled ? 'true' : null}\n          checked={this.checked}\n          aria-checked={`${this.checked}`}\n          aria-labelledby={labelId}\n          value={this.value}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        />\n        <label class={`form-radio-label ${inverseClass}`} id={labelId} htmlFor={this.radioId}>{this.label} <span class=\"form-radio-label-span\">{this.secondaryLabel}</span></label>\n      </Host>\n    );\n  }\n}\n\nlet radioIds = 0;\n"]}

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

@@ -32,6 +32,7 @@ export const Playground = (args) => html`
     disabled="${ifDefined(args.disabled)}"
     required="${ifDefined(args.required)}"
     label="${ifDefined(args.label)}"
+    secondary-label="${ifDefined(args['secondary-label'])}"
     inverse="${ifDefined(args.inverse)}"
     inline="${ifDefined(args.inline)}"
     value="${ifDefined(args.value)}"
@@ -45,6 +46,7 @@ Playground.args = {
   inverse: null,
   inline: undefined,
   label: 'Label',
+  'secondary-label': undefined,
   value: 'on',
   asterisk: null,
 };
@@ -70,6 +72,9 @@ Playground.argTypes = {
   label: {
     control: 'text',
   },
+  'secondary-label': {
+    control: 'text',
+  },
   asterisk: {
     control: 'boolean',
   },

package/dist/collection/components/select-filter/select-filter.js

@@ -79,6 +79,11 @@ export class SelectFilter {
           this.onClick(activeOption.item.value, activeOption.item.label);
         }
       }
+      else if (event.key === 'Escape') {
+        event.preventDefault();
+        this.isOpen = false;
+        this.isActive = false;
+      }
     }
   }
   get filteredOptions() {

package/dist/collection/components/select-filter/select-filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-filter.js","sourceRoot":"","sources":["../../../src/components/select-filter/select-filter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Listen, Prop, State, h, Event, EventEmitter } from '@stencil/core';\nimport Fuse from 'fuse.js';\n\n/**\n * @slot  - Input element for the widget, it should be a road-input element.\n */\n\n@Component({\n  tag: 'road-select-filter',\n  styleUrl: 'select-filter.css',\n  scoped: true,\n})\nexport class SelectFilter {\n\n  @Element() el!: HTMLRoadSelectFilterElement;\n\n  @State() isOpen: boolean = false;\n\n  @State() currentValue: string = '';\n\n  @State() activeIndex: number = -1;\n\n  /**\n   * List of options of the select\n   */\n  @Prop() options: Array<{\n    value: string | number;\n    label: string;\n  }> = [];\n\n  /**\n   * Options to pass to the fuse.js instance.\n   * See https://fusejs.io/api/options.html for valid options\n   */\n  @Prop() parameters: any = {\n    keys: [\"value\", \"label\"],\n    threshold: 0.3,\n    ignoreLocation: true,\n  };\n\n  /**\n   * If `true`, add class Active\n   */\n  @Prop() isActive: boolean = false;\n\n  /**\n   * If `false`, the user can submit custom value\n   */\n  @Prop() onlySelect: boolean = true;\n\n  @Listen('roadFocus')\n  @Listen('roadfocus')\n  handleFocus() {\n    this.isOpen = true;\n    this.isActive = true;\n  }\n\n  @Listen('roadBlur')\n  @Listen('roadblur')\n  handleBlur() {\n    this.isActive = false;\n  }\n\n  @Listen('roadChange')\n  @Listen('roadchange')\n  handleChange(event: CustomEvent) {\n    this.currentValue = event.detail.value.toLowerCase();\n  }\n\n  @Listen('click', { target: 'document' })\n  onClickOutside(event: MouseEvent) {\n    if (this.isOpen && !this.el.contains(event.target as Node)) {\n      this.isOpen = false;\n      this.isActive = false;\n      const value = (this.el.querySelector('road-input') as HTMLRoadInputElement).value;\n      if (this.onlySelect && !this.options.some(option => option['label'] === value)) {\n        (this.el.querySelector('road-input') as HTMLRoadInputElement).value = '';\n      }\n    }\n  }\n\n  @Listen('keydown', { target: 'window' })\n  handleKeydown(event: KeyboardEvent) {\n    if (this.isOpen) {\n      if (event.key === 'ArrowDown') {\n        event.preventDefault();\n        this.activeIndex = (this.activeIndex + 1) % this.filteredOptions.length;\n      } else if (event.key === 'ArrowUp') {\n        event.preventDefault();\n        this.activeIndex = (this.activeIndex - 1 + this.filteredOptions.length) % this.filteredOptions.length;\n      } else if (event.key === 'Enter') {\n        event.preventDefault();\n        const activeOption = this.filteredOptions[this.activeIndex];\n        if (activeOption) {\n          this.onClick(activeOption.item.value, activeOption.item.label);\n        }\n      }\n    }\n  }\n\n  get filteredOptions() {\n    const fuseSearch = new Fuse(this.options, this.parameters);\n    return this.currentValue === '' ? this.options.map((doc, idx) => ({ item: doc, score: 1, refIndex: idx })) : fuseSearch.search(this.currentValue);\n  }\n\n  @Event() roadselected!: EventEmitter<{\n    value: string | undefined | null,\n    label: string\n  }>;\n\n  @Event() roadSelected!: EventEmitter<{\n    value: string | undefined | null,\n    label: string\n  }>;\n\n  private onClick = (value: string | number, label: string) => {\n    (this.el.querySelector('road-input') as HTMLRoadInputElement).value = label;\n    if (document.getElementsByClassName('phone-number-label-icon').length > 0) {\n      (this.el.querySelector('road-icon') as HTMLRoadIconElement).name = 'flag-' + label;\n    }\n    this.isOpen = false;\n    this.roadselected.emit({\n      value: value.toString(),\n      label: label,\n    });\n    this.roadSelected.emit({\n      value: value.toString(),\n      label: label,\n    });\n    this.activeIndex = -1;\n  };\n\n  private handleOptionMouseOver = (index: number) => {\n    this.activeIndex = index;\n  };\n\n  private handleOptionClick = (value: string | number, label: string) => {\n    this.onClick(value, label);\n  };\n\n  private handleMouseLeave = () => {\n    this.activeIndex = -1;\n  };\n\n  render() {\n    const options = this.filteredOptions;\n    const isActive = this.isActive ? 'true' : 'false';\n    const notActive = this.isActive ? '' : 'not-active';\n\n    return (\n      <Host is-active={isActive}>\n        <slot />\n        {this.isOpen &&\n          <ul \n            class={`${notActive} select-filter-list`} \n            role=\"listbox\"\n            onMouseLeave={this.handleMouseLeave}\n          >\n            {options.map((option, idx) => (\n              <li\n                class={`select-filter-item ${this.activeIndex === idx ? 'active' : ''}`}\n                role=\"option\"\n                aria-selected={this.activeIndex === idx ? 'true' : 'false'}\n                onClick={() => this.handleOptionClick(option.item.value, option.item.label.replace(/(<([^>]+)>)/gi, \"\"))}\n                onMouseOver={() => this.handleOptionMouseOver(idx)}\n                innerHTML={option.item.label}\n                tabindex={this.activeIndex === idx ? 0 : -1}\n              >\n              </li>\n            ))}\n          </ul>}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"select-filter.js","sourceRoot":"","sources":["../../../src/components/select-filter/select-filter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Listen, Prop, State, h, Event, EventEmitter } from '@stencil/core';\nimport Fuse from 'fuse.js';\n\n/**\n * @slot  - Input element for the widget, it should be a road-input element.\n */\n\n@Component({\n  tag: 'road-select-filter',\n  styleUrl: 'select-filter.css',\n  scoped: true,\n})\nexport class SelectFilter {\n\n  @Element() el!: HTMLRoadSelectFilterElement;\n\n  @State() isOpen: boolean = false;\n\n  @State() currentValue: string = '';\n\n  @State() activeIndex: number = -1;\n\n  /**\n   * List of options of the select\n   */\n  @Prop() options: Array<{\n    value: string | number;\n    label: string;\n  }> = [];\n\n  /**\n   * Options to pass to the fuse.js instance.\n   * See https://fusejs.io/api/options.html for valid options\n   */\n  @Prop() parameters: any = {\n    keys: [\"value\", \"label\"],\n    threshold: 0.3,\n    ignoreLocation: true,\n  };\n\n  /**\n   * If `true`, add class Active\n   */\n  @Prop() isActive: boolean = false;\n\n  /**\n   * If `false`, the user can submit custom value\n   */\n  @Prop() onlySelect: boolean = true;\n\n  @Listen('roadFocus')\n  @Listen('roadfocus')\n  handleFocus() {\n    this.isOpen = true;\n    this.isActive = true;\n  }\n\n  @Listen('roadBlur')\n  @Listen('roadblur')\n  handleBlur() {\n    this.isActive = false;\n  }\n\n  @Listen('roadChange')\n  @Listen('roadchange')\n  handleChange(event: CustomEvent) {\n    this.currentValue = event.detail.value.toLowerCase();\n  }\n\n  @Listen('click', { target: 'document' })\n  onClickOutside(event: MouseEvent) {\n    if (this.isOpen && !this.el.contains(event.target as Node)) {\n      this.isOpen = false;\n      this.isActive = false;\n      const value = (this.el.querySelector('road-input') as HTMLRoadInputElement).value;\n      if (this.onlySelect && !this.options.some(option => option['label'] === value)) {\n        (this.el.querySelector('road-input') as HTMLRoadInputElement).value = '';\n      }\n    }\n  }\n\n  @Listen('keydown', { target: 'window' })\n  handleKeydown(event: KeyboardEvent) {\n  if (this.isOpen) {\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      this.activeIndex = (this.activeIndex + 1) % this.filteredOptions.length;\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      this.activeIndex = (this.activeIndex - 1 + this.filteredOptions.length) % this.filteredOptions.length;\n    } else if (event.key === 'Enter') {\n      event.preventDefault();\n      const activeOption = this.filteredOptions[this.activeIndex];\n      if (activeOption) {\n        this.onClick(activeOption.item.value, activeOption.item.label);\n      }\n    } else if (event.key === 'Escape') {\n      event.preventDefault();\n      this.isOpen = false;\n      this.isActive = false;\n    }\n  }\n}\n\n\n  get filteredOptions() {\n    const fuseSearch = new Fuse(this.options, this.parameters);\n    return this.currentValue === '' ? this.options.map((doc, idx) => ({ item: doc, score: 1, refIndex: idx })) : fuseSearch.search(this.currentValue);\n  }\n\n  @Event() roadselected!: EventEmitter<{\n    value: string | undefined | null,\n    label: string\n  }>;\n\n  @Event() roadSelected!: EventEmitter<{\n    value: string | undefined | null,\n    label: string\n  }>;\n\n  private onClick = (value: string | number, label: string) => {\n    (this.el.querySelector('road-input') as HTMLRoadInputElement).value = label;\n    if (document.getElementsByClassName('phone-number-label-icon').length > 0) {\n      (this.el.querySelector('road-icon') as HTMLRoadIconElement).name = 'flag-' + label;\n    }\n    this.isOpen = false;\n    this.roadselected.emit({\n      value: value.toString(),\n      label: label,\n    });\n    this.roadSelected.emit({\n      value: value.toString(),\n      label: label,\n    });\n    this.activeIndex = -1;\n  };\n\n  private handleOptionMouseOver = (index: number) => {\n    this.activeIndex = index;\n  };\n\n  private handleOptionClick = (value: string | number, label: string) => {\n    this.onClick(value, label);\n  };\n\n  private handleMouseLeave = () => {\n    this.activeIndex = -1;\n  };\n\n  render() {\n    const options = this.filteredOptions;\n    const isActive = this.isActive ? 'true' : 'false';\n    const notActive = this.isActive ? '' : 'not-active';\n\n    return (\n      <Host is-active={isActive}>\n        <slot />\n        {this.isOpen &&\n          <ul \n            class={`${notActive} select-filter-list`} \n            role=\"listbox\"\n            onMouseLeave={this.handleMouseLeave}\n          >\n            {options.map((option, idx) => (\n              <li\n                class={`select-filter-item ${this.activeIndex === idx ? 'active' : ''}`}\n                role=\"option\"\n                aria-selected={this.activeIndex === idx ? 'true' : 'false'}\n                onClick={() => this.handleOptionClick(option.item.value, option.item.label.replace(/(<([^>]+)>)/gi, \"\"))}\n                onMouseOver={() => this.handleOptionMouseOver(idx)}\n                innerHTML={option.item.label}\n                tabindex={this.activeIndex === idx ? 0 : -1}\n              >\n              </li>\n            ))}\n          </ul>}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/tab-button/tab-button.css

@@ -72,6 +72,22 @@
   outline: auto;
 }
 
+/**
+ * Disabled
+ */
+
+:host(.tab-disabled) {
+  background: var(--road-surface-disabled);
+}
+
+:host(.tab-disabled) .button-native{
+  cursor: not-allowed;
+}
+
+:host(.tab-disabled) ::slotted(road-label) {
+  color: var(--road-on-surface-disabled);
+}
+
 
 /* NATIVE
  -------------------- */

package/dist/collection/components/tab-button/tab-button.js

@@ -19,6 +19,7 @@ export class TabButton {
     this.rel = undefined;
     this.layout = 'icon-start';
     this.selected = false;
+    this.disabled = false;
     this.tab = undefined;
     this.target = undefined;
   }
@@ -58,20 +59,21 @@ export class TabButton {
     return 0;
   }
   render() {
-    const { hasIcon, hasLabel, tabIndex, href, rel, target, layout, selected, tab } = this;
+    const { hasIcon, hasLabel, tabIndex, href, rel, target, layout, selected, tab, disabled } = this;
     const attrs = {
       download: this.download,
-      href,
+      href: !disabled ? href : undefined,
       rel,
       target,
     };
-    return (h(Host, { onClick: this.onClick, onKeyup: this.onKeyUp, role: "tab", tabindex: tabIndex, "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+    return (h(Host, { onClick: (ev) => !disabled && this.onClick(ev), onKeyup: (ev) => !disabled && this.onKeyUp(ev), role: "tab", tabindex: disabled ? -1 : tabIndex, "aria-selected": selected ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
         'tab-selected': selected,
         'tab-has-label': hasLabel,
         'tab-has-icon': hasIcon,
         'tab-has-label-only': hasLabel && !hasIcon,
         'tab-has-icon-only': hasIcon && !hasLabel,
         [`tab-layout-${layout}`]: true,
+        'tab-disabled': disabled, // Classe CSS pour les styles désactivés
       } }, h("a", Object.assign({}, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { class: "button-inner" }, h("slot", null)))));
   }
   static get is() { return "road-tab-button"; }
@@ -175,6 +177,24 @@ export class TabButton {
         "reflect": false,
         "defaultValue": "false"
       },
+      "disabled": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The disabled tab"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "tab": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/tab-button/tab-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-button.js","sourceRoot":"","sources":["../../../src/components/tab-button/tab-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n/**\n * @slot  - Content of the tab-button, it should be road-icon and road-label elements.\n *\n * @part native - The native HTML anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-tab-button',\n  styleUrl: 'tab-button.css',\n  shadow: true,\n})\nexport class TabButton {\n\n  @Element() el!: HTMLRoadTabButtonElement;\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download: string | undefined;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href: string | undefined;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel: string | undefined;\n\n  /**\n   * Set the layout of the text and icon in the tab bar.\n   * It defaults to `'icon-start'`.\n   */\n  @Prop() layout?: 'icon-start' | 'icon-top' = 'icon-start';\n\n  /**\n   * The selected tab component\n   */\n  @Prop({ mutable: true }) selected = false;\n\n  /**\n   * A tab id must be provided for each `road-tab`. It's used internally to reference\n   */\n  @Prop() tab?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target: string | undefined;\n\n  /**\n   * Emitted when the tab bar is clicked\n   * @internal\n   */\n  @Event() roadtabbuttonclick!: EventEmitter;\n  /** @internal */\n  @Event() roadTabButtonClick!: EventEmitter;\n\n  @Listen('roadTabBarChanged', { target: 'window' })\n  @Listen('roadTabbarchanged', { target: 'window' })\n  onTabBarChanged(ev: CustomEvent) {\n    const dispatchedFrom = ev.target as HTMLElement;\n    const parent = this.el.parentElement as EventTarget;\n\n    if ((ev.composedPath && ev.composedPath().includes(parent)) || (dispatchedFrom && dispatchedFrom.contains(this.el))) {\n      this.selected = this.tab === ev.detail.tab;\n    }\n  }\n\n  private selectTab(ev: Event | KeyboardEvent) {\n    if (this.tab !== undefined) {\n      this.roadtabbuttonclick.emit({\n        tab: this.tab,\n        href: this.href,\n        selected: this.selected,\n      });\n      this.roadTabButtonClick.emit({\n        tab: this.tab,\n        href: this.href,\n        selected: this.selected,\n      });\n\n      ev.preventDefault();\n    }\n  }\n\n  private get hasLabel() {\n    return !!this.el.querySelector('road-label');\n  }\n\n  private get hasIcon() {\n    return !!this.el.querySelector('road-icon');\n  }\n\n  private get tabIndex() {\n    const hasTabIndex = this.el.hasAttribute('tabindex');\n\n    if (hasTabIndex) {\n      return this.el.getAttribute('tabindex');\n    }\n\n    return 0;\n  }\n\n  private onKeyUp = (ev: KeyboardEvent) => {\n    if (ev.key === 'Enter' || ev.key === ' ') {\n      this.selectTab(ev);\n    }\n  };\n\n  private onClick = (ev: Event) => {\n    this.selectTab(ev);\n  };\n\n  render() {\n    const { hasIcon, hasLabel, tabIndex, href, rel, target, layout, selected, tab } = this;\n    const attrs = {\n      download: this.download,\n      href,\n      rel,\n      target,\n    };\n\n    return (\n      <Host\n        onClick={this.onClick}\n        onKeyup={this.onKeyUp}\n        role=\"tab\"\n        tabindex={tabIndex}\n        aria-selected={selected ? 'true' : null}\n        id={tab !== undefined ? `tab-button-${tab}` : null}\n        class={{\n          'tab-selected': selected,\n          'tab-has-label': hasLabel,\n          'tab-has-icon': hasIcon,\n          'tab-has-label-only': hasLabel && !hasIcon,\n          'tab-has-icon-only': hasIcon && !hasLabel,\n          [`tab-layout-${layout}`]: true,\n        }}\n      >\n        <a {...attrs} tabIndex={-1} class=\"button-native\" part=\"native\">\n          <span class=\"button-inner\">\n            <slot/>\n          </span>\n        </a>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"tab-button.js","sourceRoot":"","sources":["../../../src/components/tab-button/tab-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n/**\n * @slot  - Content of the tab-button, it should be road-icon and road-label elements.\n *\n * @part native - The native HTML anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-tab-button',\n  styleUrl: 'tab-button.css',\n  shadow: true,\n})\nexport class TabButton {\n\n  @Element() el!: HTMLRoadTabButtonElement;\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download: string | undefined;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href: string | undefined;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel: string | undefined;\n\n  /**\n   * Set the layout of the text and icon in the tab bar.\n   * It defaults to `'icon-start'`.\n   */\n  @Prop() layout?: 'icon-start' | 'icon-top' = 'icon-start';\n\n  /**\n   * The selected tab component\n   */\n  @Prop({ mutable: true }) selected = false;\n\n    /**\n   * The disabled tab \n   */\n    @Prop({ mutable: true }) disabled = false;\n\n  /**\n   * A tab id must be provided for each `road-tab`. It's used internally to reference\n   */\n  @Prop() tab?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target: string | undefined;\n\n  /**\n   * Emitted when the tab bar is clicked\n   * @internal\n   */\n  @Event() roadtabbuttonclick!: EventEmitter;\n  /** @internal */\n  @Event() roadTabButtonClick!: EventEmitter;\n\n  @Listen('roadTabBarChanged', { target: 'window' })\n  @Listen('roadTabbarchanged', { target: 'window' })\n  onTabBarChanged(ev: CustomEvent) {\n    const dispatchedFrom = ev.target as HTMLElement;\n    const parent = this.el.parentElement as EventTarget;\n\n    if ((ev.composedPath && ev.composedPath().includes(parent)) || (dispatchedFrom && dispatchedFrom.contains(this.el))) {\n      this.selected = this.tab === ev.detail.tab;\n    }\n  }\n\n  private selectTab(ev: Event | KeyboardEvent) {\n    if (this.tab !== undefined) {\n      this.roadtabbuttonclick.emit({\n        tab: this.tab,\n        href: this.href,\n        selected: this.selected,\n      });\n      this.roadTabButtonClick.emit({\n        tab: this.tab,\n        href: this.href,\n        selected: this.selected,\n      });\n\n      ev.preventDefault();\n    }\n  }\n\n  private get hasLabel() {\n    return !!this.el.querySelector('road-label');\n  }\n\n  private get hasIcon() {\n    return !!this.el.querySelector('road-icon');\n  }\n\n  private get tabIndex() {\n    const hasTabIndex = this.el.hasAttribute('tabindex');\n\n    if (hasTabIndex) {\n      return this.el.getAttribute('tabindex');\n    }\n\n    return 0;\n  }\n\n  private onKeyUp = (ev: KeyboardEvent) => {\n    if (ev.key === 'Enter' || ev.key === ' ') {\n      this.selectTab(ev);\n    }\n  };\n\n  private onClick = (ev: Event) => {\n    this.selectTab(ev);\n  };\n\n  render() {\n    const { hasIcon, hasLabel, tabIndex, href, rel, target, layout, selected, tab, disabled } = this;\n    const attrs = {\n      download: this.download,\n      href: !disabled ? href : undefined, // Ne pas inclure le lien si désactivé\n      rel,\n      target,\n    };\n  \n    return (\n      <Host\n        onClick={(ev: Event) => !disabled && this.onClick(ev)} // Bloquer les clics si désactivé\n        onKeyup={(ev: KeyboardEvent) => !disabled && this.onKeyUp(ev)} // Bloquer les interactions clavier si désactivé\n        role=\"tab\"\n        tabindex={disabled ? -1 : tabIndex} // Désactiver le focus si désactivé\n        aria-selected={selected ? 'true' : 'false'}\n        aria-disabled={disabled ? 'true' : null} // Ajout pour l'accessibilité\n        id={tab !== undefined ? `tab-button-${tab}` : null}\n        class={{\n          'tab-selected': selected,\n          'tab-has-label': hasLabel,\n          'tab-has-icon': hasIcon,\n          'tab-has-label-only': hasLabel && !hasIcon,\n          'tab-has-icon-only': hasIcon && !hasLabel,\n          [`tab-layout-${layout}`]: true,\n          'tab-disabled': disabled, // Classe CSS pour les styles désactivés\n        }}\n      >\n        <a {...attrs} tabIndex={-1} class=\"button-native\" part=\"native\">\n          <span class=\"button-inner\">\n            <slot/>\n          </span>\n        </a>\n      </Host>\n    );\n  }\n}\n"]}