@roadtrip/components 3.28.0 → 3.30.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/dist/cjs/road-badge_14.cjs.entry.js +15 -4
  2. package/dist/cjs/road-badge_14.cjs.entry.js.map +1 -1
  3. package/dist/cjs/road-phone-number-input.cjs.entry.js +1 -1
  4. package/dist/cjs/road-phone-number-input.cjs.entry.js.map +1 -1
  5. package/dist/cjs/road-tab-button.cjs.entry.js +1 -1
  6. package/dist/cjs/road-tab-button.cjs.entry.js.map +1 -1
  7. package/dist/cjs/road-toggle.cjs.entry.js +3 -2
  8. package/dist/cjs/road-toggle.cjs.entry.js.map +1 -1
  9. package/dist/cjs/road-tooltip.cjs.entry.js +23 -3
  10. package/dist/cjs/road-tooltip.cjs.entry.js.map +1 -1
  11. package/dist/collection/components/button/button.css +42 -2
  12. package/dist/collection/components/button/button.stories.js +13 -1
  13. package/dist/collection/components/drawer/drawer.css +8 -0
  14. package/dist/collection/components/input/input.js +12 -1
  15. package/dist/collection/components/input/input.js.map +1 -1
  16. package/dist/collection/components/input-group/input-group.css +9 -0
  17. package/dist/collection/components/input-group/input-group.stories.js +1 -1
  18. package/dist/collection/components/phone-number-input/phone-number-input.js +1 -1
  19. package/dist/collection/components/phone-number-input/phone-number-input.js.map +1 -1
  20. package/dist/collection/components/tab-button/tab-button.css +3 -2
  21. package/dist/collection/components/toggle/toggle.css +4 -0
  22. package/dist/collection/components/toggle/toggle.js +2 -1
  23. package/dist/collection/components/toggle/toggle.js.map +1 -1
  24. package/dist/collection/components/tooltip/tooltip.css +2 -0
  25. package/dist/collection/components/tooltip/tooltip.js +22 -2
  26. package/dist/collection/components/tooltip/tooltip.js.map +1 -1
  27. package/dist/esm/road-badge_14.entry.js +15 -4
  28. package/dist/esm/road-badge_14.entry.js.map +1 -1
  29. package/dist/esm/road-phone-number-input.entry.js +1 -1
  30. package/dist/esm/road-phone-number-input.entry.js.map +1 -1
  31. package/dist/esm/road-tab-button.entry.js +1 -1
  32. package/dist/esm/road-tab-button.entry.js.map +1 -1
  33. package/dist/esm/road-toggle.entry.js +3 -2
  34. package/dist/esm/road-toggle.entry.js.map +1 -1
  35. package/dist/esm/road-tooltip.entry.js +23 -3
  36. package/dist/esm/road-tooltip.entry.js.map +1 -1
  37. package/dist/roadtrip/p-1115f970.entry.js +2 -0
  38. package/dist/roadtrip/p-1115f970.entry.js.map +1 -0
  39. package/dist/roadtrip/p-2e7d3440.entry.js +2 -0
  40. package/dist/roadtrip/p-2e7d3440.entry.js.map +1 -0
  41. package/dist/roadtrip/p-36895fa7.entry.js +2 -0
  42. package/dist/roadtrip/p-36895fa7.entry.js.map +1 -0
  43. package/dist/roadtrip/p-37563bb6.entry.js +2 -0
  44. package/dist/roadtrip/p-37563bb6.entry.js.map +1 -0
  45. package/dist/roadtrip/{p-026e28b6.entry.js → p-8ac960ce.entry.js} +2 -2
  46. package/dist/roadtrip/{p-026e28b6.entry.js.map → p-8ac960ce.entry.js.map} +1 -1
  47. package/dist/roadtrip/roadtrip.css +1 -1
  48. package/dist/roadtrip/roadtrip.esm.js +1 -1
  49. package/dist/types/components/input/input.d.ts +1 -0
  50. package/dist/types/components/tooltip/tooltip.d.ts +6 -0
  51. package/hydrate/index.js +44 -12
  52. package/package.json +1 -1
  53. package/dist/roadtrip/p-49025654.entry.js +0 -2
  54. package/dist/roadtrip/p-49025654.entry.js.map +0 -1
  55. package/dist/roadtrip/p-a77727f2.entry.js +0 -2
  56. package/dist/roadtrip/p-a77727f2.entry.js.map +0 -1
  57. package/dist/roadtrip/p-c1dca3cc.entry.js +0 -2
  58. package/dist/roadtrip/p-c1dca3cc.entry.js.map +0 -1
  59. package/dist/roadtrip/p-f09d5d41.entry.js +0 -2
  60. package/dist/roadtrip/p-f09d5d41.entry.js.map +0 -1
@@ -1,2 +0,0 @@
1
- import{r as t,h as o,H as i,a}from"./p-f3d586b3.js";const s=':host{--max-width:85vw;--z-index:1;--width:max-content;position:relative;display:inline-block}:host(:hover){cursor:pointer}:host([trigger="hover"]) .tooltip{display:none}@media (min-width: 1200px){:host([trigger="hover"]) .tooltip{display:block}}.tooltip{position:absolute;top:-0.5rem;left:50%;z-index:1;width:var(--width);min-width:100%;max-width:var(--max-width);padding:0.5rem;font-family:var(--road-font);font-size:var(--road-body-small);color:var(--road-on-surface);text-align:center;pointer-events:none;background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);opacity:0;transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;transform:translateX(-50%) translateY(-100%)}:host([contentalign="left"]) .tooltip{text-align:left}.tooltip.tooltip-text-left::after{text-align:left}.tooltip-open{opacity:1}:host([data-tooltip-position="top"]) .tooltip{left:50%;transform:translateX(-50%) translateY(-70%)}:host([data-tooltip-position="top"]) .tooltip-open{left:50%;transform:translateX(-50%) translateY(-100%)}:host([data-tooltip-position="top-left"]) .tooltip{left:0%;transform:translateY(-70%)}:host([data-tooltip-position="top-left"]) .tooltip-open{transform:translateY(-100%)}:host([data-tooltip-position="top-right"]) .tooltip{left:50%;transform:translateY(-70%)}:host([data-tooltip-position="top-right"]) .tooltip-open{left:100%;transform:translateY(-100%)}:host([data-tooltip-position="left"]) .tooltip{top:50%;left:0%;margin-right:0.5rem;transform:translateX(-94%) translateY(-55%)}:host([data-tooltip-position="left"]) .tooltip-open{transform:translateX(-103%) translateY(-55%)}:host([data-tooltip-position="bottom"]) .tooltip{top:100%;left:50%;margin-top:0.5rem;transform:translateX(-50%) translateY(-40%)}:host([data-tooltip-position="bottom"]) .tooltip-open{transform:translateX(-50%) translateY(-6%)}:host([data-tooltip-position="bottom-left"]) .tooltip{top:100%;left:0;margin-top:0.5rem;transform:translateY(-40%)}:host([data-tooltip-position="bottom-left"]) .tooltip-open{transform:translateY(-6%)}:host([data-tooltip-position="bottom-right"]) .tooltip{top:100%;left:100%;margin-top:0.5rem;transform:translateY(-40%)}:host([data-tooltip-position="bottom-right"]) .tooltip-open{transform:translateY(-6%)}:host([data-tooltip-position="right"]) .tooltip{top:50%;left:100%;margin-left:0.5rem;transform:translateX(-14%) translateY(-55%)}:host([data-tooltip-position="right"]) .tooltip-open{transform:translateX(-4%) translateY(-55%)}';const r=class{constructor(o){t(this,o);this.onClick=()=>{if(this.hasTrigger("click")){this.isOpen?this.close():this.open()}};this.onMouseOver=()=>{if(this.hasTrigger("hover")){this.open()}};this.onMouseOut=()=>{if(this.hasTrigger("hover")){this.close()}};this.onFocus=()=>{if(this.hasTrigger("focus")||this.hasTrigger("hover")){this.open()}};this.onBlur=()=>{if(this.hasTrigger("focus")||this.hasTrigger("hover")){this.close()}};this.tooltipId=`road-tooltip-${++e}`;this.content="";this.position="top";this.contentAlign="center";this.isOpen=false;this.trigger="hover"}async open(){this.isOpen=true}async close(){this.isOpen=false}hasTrigger(t){const o=this.trigger.split(" ");return o.includes(t)}render(){return o(i,{onMouseOver:this.onMouseOver,onMouseOut:this.onMouseOut,onClick:this.onClick,onFocus:this.onFocus,onBlur:this.onBlur,tabindex:"0","data-tooltip-position":this.position},o("slot",{"aria-describedby":this.tooltipId}),o("div",{part:"tooltip",id:this.tooltipId,class:{tooltip:true,"tooltip-open":this.isOpen},role:"tooltip","aria-hidden":!this.isOpen?"true":"false"},this.content,o("slot",{name:"tooltip-content"})))}get el(){return a(this)}};let e=0;r.style=s;export{r as road_tooltip};
2
- //# sourceMappingURL=p-a77727f2.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["tooltipCss","Tooltip","this","onClick","hasTrigger","isOpen","close","open","onMouseOver","onMouseOut","onFocus","onBlur","tooltipIds","triggerType","triggers","trigger","split","includes","render","h","Host","tabindex","position","tooltipId","part","id","class","tooltip","role","content","name"],"sources":["src/components/tooltip/tooltip.css?tag=road-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["/*\n * Tooltip\n *\n * Index\n * - Tooltip\n * - Position\n */\n\n/**\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --z-index: The z-index of the tooltip.\n * @prop --width: width of the tooltip.\n */\n\n/* TOOLTIP\n -------------------- */\n\n:host {\n --max-width: 85vw;\n --z-index: 1;\n --width: max-content;\n\n position: relative;\n display: inline-block;\n}\n\n:host(:hover) {\n cursor: pointer;\n}\n\n\n:host([trigger=\"hover\"]) .tooltip {\n display: none;\n}\n\n@media (min-width: 1200px) {\n\n :host([trigger=\"hover\"]) .tooltip {\n display: block;\n }\n}\n\n.tooltip {\n position: absolute;\n top: -0.5rem;\n left: 50%;\n z-index: 1;\n width: var(--width);\n min-width: 100%;\n max-width: var(--max-width);\n padding: 0.5rem;\n font-family: var(--road-font);\n font-size: var(--road-body-small);\n color: var(--road-on-surface);\n text-align: center;\n pointer-events: none;\n background: var(--road-surface);\n border: 1px solid var(--road-outline-weak);\n border-radius: 0.25rem;\n box-shadow: var(--road-elevation-low);\n opacity: 0;\n transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;\n transform: translateX(-50%) translateY(-100%);\n}\n\n:host([contentalign=\"left\"]) .tooltip {\n text-align: left;\n}\n\n.tooltip.tooltip-text-left::after {\n text-align: left;\n}\n\n.tooltip-open {\n opacity: 1;\n}\n\n/* POSITION\n -------------------- */\n\n/**\n * Top\n */\n\n:host([data-tooltip-position=\"top\"]) .tooltip {\n left: 50%;\n transform: translateX(-50%) translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top\"]) .tooltip-open {\n left: 50%;\n transform: translateX(-50%) translateY(-100%);\n}\n\n/**\n * Top Left\n */\n\n:host([data-tooltip-position=\"top-left\"]) .tooltip {\n left: 0%;\n transform: translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top-left\"]) .tooltip-open {\n transform: translateY(-100%);\n}\n\n/**\n * Top Right\n */\n\n:host([data-tooltip-position=\"top-right\"]) .tooltip {\n left: 50%;\n transform: translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top-right\"]) .tooltip-open {\n left: 100%;\n transform: translateY(-100%);\n}\n\n/**\n * Left\n */\n\n:host([data-tooltip-position=\"left\"]) .tooltip {\n top: 50%;\n left: 0%;\n margin-right: 0.5rem;\n transform: translateX(-94%) translateY(-55%);\n}\n\n:host([data-tooltip-position=\"left\"]) .tooltip-open {\n transform: translateX(-103%) translateY(-55%);\n}\n\n/**\n * Bottom\n */\n\n:host([data-tooltip-position=\"bottom\"]) .tooltip {\n top: 100%;\n left: 50%;\n margin-top: 0.5rem;\n transform: translateX(-50%) translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom\"]) .tooltip-open {\n transform: translateX(-50%) translateY(-6%);\n}\n\n/**\n * Bottom Left\n */\n\n:host([data-tooltip-position=\"bottom-left\"]) .tooltip {\n top: 100%;\n left: 0;\n margin-top: 0.5rem;\n transform: translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom-left\"]) .tooltip-open {\n transform: translateY(-6%);\n}\n\n/**\n * Bottom Right\n */\n\n:host([data-tooltip-position=\"bottom-right\"]) .tooltip {\n top: 100%;\n left: 100%;\n margin-top: 0.5rem;\n transform: translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom-right\"]) .tooltip-open {\n transform: translateY(-6%);\n}\n\n/**\n * Right\n */\n\n:host([data-tooltip-position=\"right\"]) .tooltip {\n top: 50%;\n left: 100%;\n margin-left: 0.5rem;\n transform: translateX(-14%) translateY(-55%);\n}\n\n:host([data-tooltip-position=\"right\"]) .tooltip-open {\n transform: translateX(-4%) translateY(-55%);\n}\n","import { Component, Host, h, Prop, Method, Element } from '@stencil/core';\n\n/**\n * @slot tooltip-content - content of the tooltip, if you need to add html content, use this slot, otherwise use directly the content prop.\n *\n * @part tooltip - tooltip container\n */\n\n@Component({\n tag: 'road-tooltip',\n styleUrl: 'tooltip.css',\n shadow: true,\n})\nexport class Tooltip {\n\n @Element() el!: HTMLRoadTooltipElement;\n\n /**\n * The id of tooltip\n */\n @Prop() tooltipId: string = `road-tooltip-${++tooltipIds}`;\n\n /**\n * The tooltip's content.\n */\n @Prop() content = '';\n\n /**\n * The position of the tooltip.\n */\n @Prop() position:\n | 'top'\n | 'right'\n | 'bottom'\n | 'top-left'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-right'\n | 'left' = 'top';\n\n /**\n * The content align of the tooltip.\n */\n @Prop() contentAlign:\n | 'center'\n | 'left' = 'center';\n\n /**\n * Indicates whether or not the tooltip is open. You can use this or the open/close methods.\n */\n @Prop({ mutable: true }) isOpen = false;\n\n /**\n * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n */\n @Prop() trigger: string = 'hover';\n\n /**\n * Open the tooltip.\n */\n @Method()\n async open() {\n this.isOpen = true;\n }\n\n /**\n * Close the tooltip.\n */\n @Method()\n async close() {\n this.isOpen = false;\n }\n\n private onClick = () => {\n if (this.hasTrigger('click')) {\n this.isOpen ? this.close() : this.open();\n }\n };\n\n private onMouseOver = () => {\n if (this.hasTrigger('hover')) {\n this.open();\n }\n };\n\n private onMouseOut = () => {\n if (this.hasTrigger('hover')) {\n this.close();\n }\n };\n\n private onFocus = () => {\n if (this.hasTrigger('focus') || this.hasTrigger('hover')) {\n this.open();\n }\n };\n\n private onBlur = () => {\n if (this.hasTrigger('focus') || this.hasTrigger('hover')) {\n this.close();\n }\n };\n\n private hasTrigger(triggerType: string) {\n const triggers = this.trigger.split(' ');\n return triggers.includes(triggerType);\n }\n\n render() {\n return (\n <Host\n onMouseOver={this.onMouseOver}\n onMouseOut={this.onMouseOut}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n tabindex=\"0\" // Makes the element focusable\n data-tooltip-position={this.position}\n >\n <slot aria-describedby={this.tooltipId} />\n\n <div\n part=\"tooltip\"\n id={this.tooltipId}\n class={{\n tooltip: true,\n 'tooltip-open': this.isOpen,\n }}\n role=\"tooltip\"\n aria-hidden={!this.isOpen ? 'true' : 'false'}\n >\n {this.content}\n <slot name=\"tooltip-content\" />\n </div>\n </Host>\n );\n }\n}\n\nlet tooltipIds = 0;\n"],"mappings":"oDAAA,MAAMA,EAAa,g+E,MCaNC,EAAO,M,yBA8DVC,KAAAC,QAAU,KAChB,GAAID,KAAKE,WAAW,SAAU,CAC5BF,KAAKG,OAASH,KAAKI,QAAUJ,KAAKK,M,GAI9BL,KAAAM,YAAc,KACpB,GAAIN,KAAKE,WAAW,SAAU,CAC5BF,KAAKK,M,GAIDL,KAAAO,WAAa,KACnB,GAAIP,KAAKE,WAAW,SAAU,CAC5BF,KAAKI,O,GAIDJ,KAAAQ,QAAU,KAChB,GAAIR,KAAKE,WAAW,UAAYF,KAAKE,WAAW,SAAU,CACxDF,KAAKK,M,GAIDL,KAAAS,OAAS,KACf,GAAIT,KAAKE,WAAW,UAAYF,KAAKE,WAAW,SAAU,CACxDF,KAAKI,O,kBAjFmB,kBAAkBM,I,aAK5B,G,cAaL,M,kBAOA,S,YAKqB,M,aAOR,O,CAM1B,UAAML,GACJL,KAAKG,OAAS,I,CAOhB,WAAMC,GACJJ,KAAKG,OAAS,K,CAiCR,UAAAD,CAAWS,GACjB,MAAMC,EAAWZ,KAAKa,QAAQC,MAAM,KACpC,OAAOF,EAASG,SAASJ,E,CAG3B,MAAAK,GACE,OACEC,EAACC,EAAI,CACHZ,YAAaN,KAAKM,YAClBC,WAAYP,KAAKO,WACjBN,QAASD,KAAKC,QACdO,QAASR,KAAKQ,QACdC,OAAQT,KAAKS,OACbU,SAAS,I,wBACcnB,KAAKoB,UAE5BH,EAAA,2BAAwBjB,KAAKqB,YAE7BJ,EAAA,OACEK,KAAK,UACLC,GAAIvB,KAAKqB,UACTG,MAAO,CACLC,QAAS,KACT,eAAgBzB,KAAKG,QAEvBuB,KAAK,UAAS,eACA1B,KAAKG,OAAS,OAAS,SAEpCH,KAAK2B,QACNV,EAAA,QAAMW,KAAK,qB,2BAOrB,IAAIlB,EAAa,E"}
@@ -1,2 +0,0 @@
1
- import{r as e,c as o,h as t,H as r}from"./p-f3d586b3.js";import"./p-1ccae339.js";const s='.sc-road-toggle-h{--toggle-lever-width:4.5rem;position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);font-size:var(--road-label-medium);color:var(--road-on-surface)}.form-toggle-input.sc-road-toggle{position:absolute;z-index:-1;opacity:0}.form-toggle-label.sc-road-toggle{display:inline-flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-toggle-lever.sc-road-toggle{position:relative;box-sizing:border-box;display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;width:var(--toggle-lever-width);height:2rem;padding:0.5rem 0.625rem;margin-right:0.75rem;font-size:0.625rem;font-weight:700;line-height:1.6;content:"";background:var(--road-on-surface-extra-weak);border:0.125rem solid transparent;border-radius:1.125rem;transition:background 0.2s ease-in-out}.form-toggle-lever.sc-road-toggle::before{font-size:0.625rem;font-weight:700;color:var(--road-surface);text-transform:uppercase;content:attr(data-off)}.form-toggle-lever.sc-road-toggle::after{position:absolute;top:0.0625rem;left:0.0625rem;display:block;width:1.625rem;height:1.625rem;content:"";background:var(--road-on-success-surface-inverse);border-radius:50%;box-shadow:var(--road-elevation-low);transition:transform 0.2s ease-in-out}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle{justify-content:flex-start;background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface);content:attr(data-on)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::after{transform:translateX(calc(var(--toggle-lever-width) - 2rem))}.form-toggle-input.focus-visible.sc-road-toggle~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle{box-shadow:0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-secondary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-right.sc-road-toggle{margin-right:0;margin-left:0.75rem}.form-toggle-spaced.sc-road-toggle{display:flex;justify-content:space-between}';const a=class{constructor(t){e(this,t);this.roadchange=o(this,"roadchange",7);this.roadChange=o(this,"roadChange",7);this.roadfocus=o(this,"roadfocus",7);this.roadFocus=o(this,"roadFocus",7);this.roadblur=o(this,"roadblur",7);this.roadBlur=o(this,"roadBlur",7);this.onClick=()=>{this.checked=!this.checked};this.onFocus=()=>{this.roadfocus.emit();this.roadFocus.emit()};this.onBlur=()=>{this.roadBlur.emit();this.roadblur.emit()};this.toggleId=`road-toggle-${g++}`;this.name=this.toggleId;this.checked=false;this.disabled=false;this.label=`${this.toggleId}-label`;this.hasLeftLabel=false;this.isSpaced=false;this.value="on";this.on="yes";this.off="no"}checkedChanged(e){this.roadchange.emit({checked:e,value:this.value});this.roadChange.emit({checked:e,value:this.value})}render(){const e=this.toggleId+"-label";const o=t("label",{class:"form-toggle-label",id:e,htmlFor:this.toggleId},this.label);const s=this.isSpaced&&"form-toggle-spaced";const a=this.hasLeftLabel?"form-toggle-right":"";return t(r,null,t("input",{class:"form-toggle-input",type:"checkbox",id:this.toggleId,name:this.name,checked:this.checked,disabled:this.disabled,value:this.value,"aria-checked":`${this.checked}`,"aria-disabled":this.disabled?"true":null,"aria-labelledby":e,onClick:this.onClick,onFocus:this.onFocus,onBlur:this.onBlur}),t("label",{class:`form-toggle-label ${s}`,htmlFor:this.toggleId},this.hasLeftLabel&&o,t("div",{class:`form-toggle-lever ${a}`,"data-off":this.off,"data-on":this.on}),this.hasLeftLabel?"":o))}static get watchers(){return{checked:["checkedChanged"]}}};let g=0;a.style=s;export{a as road_toggle};
2
- //# sourceMappingURL=p-c1dca3cc.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["toggleCss","toggle","this","onClick","checked","onFocus","roadfocus","emit","roadFocus","onBlur","roadBlur","roadblur","toggleIds","toggleId","checkedChanged","isChecked","roadchange","value","roadChange","render","labelId","textLabel","h","class","id","htmlFor","label","isSpacedClass","isSpaced","righttoggleClass","hasLeftLabel","Host","type","name","disabled","off","on"],"sources":["src/components/toggle/toggle.css?tag=road-toggle&encapsulation=scoped","src/components/toggle/toggle.tsx"],"sourcesContent":["/*\n * Toggle\n *\n * For accessibility, we provide a style for focus only on Tab,\n * for that add the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n *\n * Index\n * - Toggle\n * - Label\n * - Lever\n * - Feedback\n * - Position\n */\n\n/**\n * @prop --toggle-lever-width: width of the lever\n */\n\n/* toggle\n -------------------- */\n\n:host {\n --toggle-lever-width: 4.5rem;\n\n position: relative;\n display: block;\n margin-bottom: 1rem;\n font-family: var(--road-font, sans-serif);\n font-size: var(--road-label-medium);\n color: var(--road-on-surface);\n}\n\n/**\n * Hide input\n */\n\n.form-toggle-input {\n position: absolute;\n z-index: -1;\n opacity: 0;\n}\n\n/* LABEL\n -------------------- */\n\n.form-toggle-label {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n/* LEVER\n -------------------- */\n\n.form-toggle-lever {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: flex-end;\n width: var(--toggle-lever-width);\n height: 2rem;\n padding: 0.5rem 0.625rem;\n margin-right: 0.75rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 1.6;\n content: \"\";\n background: var(--road-on-surface-extra-weak);\n border: 0.125rem solid transparent;\n border-radius: 1.125rem;\n transition: background 0.2s ease-in-out;\n}\n\n/**\n * Text in the toggle widget\n */\n\n.form-toggle-lever::before {\n font-size: 0.625rem;\n font-weight: 700;\n color: var(--road-surface);\n text-transform: uppercase;\n content: attr(data-off);\n}\n\n/**\n * Round lever in the widget\n */\n\n.form-toggle-lever::after {\n position: absolute;\n top: 0.0625rem;\n left: 0.0625rem;\n display: block;\n width: 1.625rem;\n height: 1.625rem;\n content: \"\";\n background: var(--road-on-success-surface-inverse);\n border-radius: 50%;\n box-shadow: var(--road-elevation-low);\n transition: transform 0.2s ease-in-out;\n}\n\n/**\n * Checked state\n */\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever {\n justify-content: flex-start;\n background: var(--road-success-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::before {\n color: var(--road-surface);\n content: attr(data-on);\n}\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::after {\n transform: translateX(calc(var(--toggle-lever-width) - 2rem));\n}\n\n/**\n * Focus on Tab\n */\n\n.form-toggle-input.focus-visible ~ .form-toggle-label .form-toggle-lever {\n box-shadow: 0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary);\n}\n\n/* FEEDBACK\n -------------------- */\n\n/**\n * Secondary\n */\n\n.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever {\n background: var(--road-secondary);\n}\n\n.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever::before {\n color: var(--road-surface);\n}\n\n/**\n * Success\n */\n\n.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever {\n background: var(--road-success-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever::before {\n color: var(--road-surface);\n}\n\n\n/* POSITION\n -------------------- */\n\n.form-toggle-right {\n margin-right: 0;\n margin-left: 0.75rem;\n}\n\n.form-toggle-spaced {\n display: flex;\n justify-content: space-between;\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport '../../utils/polyfill';\n\n@Component({\n tag: 'road-toggle',\n styleUrl: 'toggle.css',\n scoped: true,\n})\nexport class toggle {\n\n /**\n * The id of toggle\n */\n @Prop() toggleId: string = `road-toggle-${toggleIds++}`;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.toggleId;\n\n /**\n * If `true`, the toggle is checked.\n */\n @Prop({ mutable: true }) checked = false;\n\n /**\n * If `true`, the user cannot interact with the toggle.\n */\n @Prop() disabled = false;\n\n /**\n * Label for the field\n */\n @Prop() label: string = `${this.toggleId}-label`;\n\n /**\n * If `true`, the label is at left of the toggle\n */\n @Prop() hasLeftLabel: boolean = false;\n\n /**\n * Add space between label and toggle element\n */\n @Prop() isSpaced: boolean = false;\n\n /**\n * Value the form will get\n */\n @Prop() value: string = 'on';\n\n /**\n * Text display for \"`on`\" state in the toggle lever\n */\n @Prop() on: string = \"yes\";\n\n /**\n * Text display for \"`off`\" state in the toggle lever\n */\n @Prop() off: string = \"no\";\n\n /**\n * Emitted when the checked property has changed.\n */\n @Event() roadchange!: EventEmitter<{\n checked: boolean;\n value: string | undefined | null\n }>;\n /** @internal */\n @Event() roadChange!: EventEmitter<{\n checked: boolean;\n value: string | undefined | null\n }>;\n\n /**\n * Emitted when the toggle has focus.\n */\n @Event() roadfocus!: EventEmitter<void>;\n /** @internal */\n @Event() roadFocus!: EventEmitter<void>;\n\n /**\n * Emitted when the toggle loses focus.\n */\n @Event() roadblur!: EventEmitter<void>;\n /** @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n @Watch('checked')\n checkedChanged(isChecked: boolean) {\n this.roadchange.emit({\n checked: isChecked,\n value: this.value,\n });\n this.roadChange.emit({\n checked: isChecked,\n value: this.value,\n });\n }\n\n private onClick = () => {\n this.checked = !this.checked;\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.toggleId + '-label';\n const textLabel = <label class=\"form-toggle-label\" id={labelId} htmlFor={this.toggleId}>{this.label}</label>;\n const isSpacedClass = this.isSpaced && 'form-toggle-spaced';\n const righttoggleClass = this.hasLeftLabel ? 'form-toggle-right' : '';\n\n return (\n <Host>\n <input\n class=\"form-toggle-input\"\n type=\"checkbox\"\n id={this.toggleId}\n name={this.name}\n checked={this.checked}\n disabled={this.disabled}\n value={this.value}\n aria-checked={`${this.checked}`}\n aria-disabled={this.disabled ? 'true' : null}\n aria-labelledby={labelId}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n <label class={`form-toggle-label ${isSpacedClass}`} htmlFor={this.toggleId}>\n {this.hasLeftLabel && textLabel}\n <div class={`form-toggle-lever ${righttoggleClass}`} data-off={this.off} data-on={this.on}></div>\n {this.hasLeftLabel ? '' : textLabel}\n </label>\n </Host>\n );\n }\n}\n\nlet toggleIds = 0;\n"],"mappings":"iFAAA,MAAMA,EAAY,6sF,MCQLC,EAAM,M,uPA2FTC,KAAAC,QAAU,KAChBD,KAAKE,SAAWF,KAAKE,OAAO,EAGtBF,KAAAG,QAAU,KAChBH,KAAKI,UAAUC,OACfL,KAAKM,UAAUD,MAAM,EAGfL,KAAAO,OAAS,KACfP,KAAKQ,SAASH,OACdL,KAAKS,SAASJ,MAAM,E,cAjGK,eAAeK,M,UAKnBV,KAAKW,S,aAKO,M,cAKhB,M,WAKK,GAAGX,KAAKW,iB,kBAKA,M,cAKJ,M,WAKJ,K,QAKH,M,SAKC,I,CA8BtB,cAAAC,CAAeC,GACbb,KAAKc,WAAWT,KAAK,CACnBH,QAASW,EACTE,MAAOf,KAAKe,QAEdf,KAAKgB,WAAWX,KAAK,CACnBH,QAASW,EACTE,MAAOf,KAAKe,O,CAkBhB,MAAAE,GACE,MAAMC,EAAUlB,KAAKW,SAAW,SAChC,MAAMQ,EAAYC,EAAA,SAAOC,MAAM,oBAAoBC,GAAIJ,EAASK,QAASvB,KAAKW,UAAWX,KAAKwB,OAC9F,MAAMC,EAAgBzB,KAAK0B,UAAY,qBACvC,MAAMC,EAAmB3B,KAAK4B,aAAe,oBAAsB,GAEnE,OACER,EAACS,EAAI,KACHT,EAAA,SACEC,MAAM,oBACNS,KAAK,WACLR,GAAItB,KAAKW,SACToB,KAAM/B,KAAK+B,KACX7B,QAASF,KAAKE,QACd8B,SAAUhC,KAAKgC,SACfjB,MAAOf,KAAKe,MAAK,eACH,GAAGf,KAAKE,UAAS,gBAChBF,KAAKgC,SAAW,OAAS,KAAI,kBAC3Bd,EACjBjB,QAASD,KAAKC,QACdE,QAASH,KAAKG,QACdI,OAAQP,KAAKO,SAEfa,EAAA,SAAOC,MAAO,qBAAqBI,IAAiBF,QAASvB,KAAKW,UAC/DX,KAAK4B,cAAgBT,EACtBC,EAAA,OAAKC,MAAO,qBAAqBM,IAAkB,WAAY3B,KAAKiC,IAAG,UAAWjC,KAAKkC,KACtFlC,KAAK4B,aAAe,GAAKT,G,4DAOpC,IAAIT,EAAY,E"}
@@ -1,2 +0,0 @@
1
- import{r as t,c as e,h as i,H as o,a}from"./p-f3d586b3.js";const n=':host{box-sizing:border-box;font-weight:700;color:var(--tab-color);outline:0;transition:background 0.15s ease-in-out}:host(.tab-secondary){--tab-underline-selected:var(--road-secondary-600)}:host(.tab-selected){color:var(--tab-color-selected)}:host(.tab-selected) ::slotted(road-icon){color:var(--tab-color-selected)}:host(.tab-selected) .button-native::after{background:var(--tab-underline-selected);opacity:1;transform:none}:host(:hover){background:var(--tab-background-hover)}:host(.focus-visible){background:var(--tab-background-focused);outline:auto}: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)}.button-native{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;min-height:3.5rem;padding:0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);margin:0;overflow:hidden;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;-webkit-user-drag:none;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.button-native::after{position:absolute;bottom:0;left:0;display:block;width:100%;height:2px;content:"";opacity:0;transition:transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transform:scaleX(0);transform-origin:center}.button-inner{position:relative;z-index:1;display:flex;flex-flow:inherit;align-items:center;justify-content:center;width:100%;height:100%}:host ::slotted(road-icon){color:var(--tab-color)}:host(.tab-layout-icon-start) ::slotted(road-icon){margin-right:0.5rem}:host(.tab-layout-icon-top) .button-inner{flex-direction:column}:host ::slotted(road-label){display:-webkit-box;max-width:12.5rem;overflow:hidden;font-size:1rem;color:var(--road-on-surface);-webkit-line-clamp:1;-webkit-box-orient:vertical;text-align:center;text-overflow:ellipsis;white-space:inherit}:host(.tab-layout-icon-top) ::slotted(road-label){margin-top:0.25rem;font-size:1rem}';const r=class{constructor(i){t(this,i);this.roadtabbuttonclick=e(this,"roadtabbuttonclick",7);this.roadTabButtonClick=e(this,"roadTabButtonClick",7);this.onKeyUp=t=>{if(t.key==="Enter"||t.key===" "){this.selectTab(t)}};this.onClick=t=>{this.selectTab(t)};this.download=undefined;this.href=undefined;this.rel=undefined;this.layout="icon-start";this.selected=false;this.disabled=false;this.tab=undefined;this.target=undefined}onTabBarChanged(t){const e=t.target;const i=this.el.parentElement;if(t.composedPath&&t.composedPath().includes(i)||e&&e.contains(this.el)){this.selected=this.tab===t.detail.tab}}selectTab(t){if(this.tab!==undefined){this.roadtabbuttonclick.emit({tab:this.tab,href:this.href,selected:this.selected});this.roadTabButtonClick.emit({tab:this.tab,href:this.href,selected:this.selected});t.preventDefault()}}get hasLabel(){return!!this.el.querySelector("road-label")}get hasIcon(){return!!this.el.querySelector("road-icon")}get tabIndex(){const t=this.el.hasAttribute("tabindex");if(t){return this.el.getAttribute("tabindex")}return 0}render(){const{hasIcon:t,hasLabel:e,tabIndex:a,href:n,rel:r,target:s,layout:l,selected:d,tab:h,disabled:b}=this;const c={download:this.download,href:!b?n:undefined,rel:r,target:s};return i(o,{onClick:t=>!b&&this.onClick(t),onKeyup:t=>!b&&this.onKeyUp(t),role:"tab",tabindex:b?-1:a,"aria-selected":d?"true":"false","aria-disabled":b?"true":null,id:h!==undefined?`tab-button-${h}`:null,class:{"tab-selected":d,"tab-has-label":e,"tab-has-icon":t,"tab-has-label-only":e&&!t,"tab-has-icon-only":t&&!e,[`tab-layout-${l}`]:true,"tab-disabled":b}},i("a",Object.assign({},c,{tabIndex:-1,class:"button-native",part:"native"}),i("span",{class:"button-inner"},i("slot",null))))}get el(){return a(this)}};r.style=n;export{r as road_tab_button};
2
- //# sourceMappingURL=p-f09d5d41.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["tabButtonCss","TabButton","this","onKeyUp","ev","key","selectTab","onClick","onTabBarChanged","dispatchedFrom","target","parent","el","parentElement","composedPath","includes","contains","selected","tab","detail","undefined","roadtabbuttonclick","emit","href","roadTabButtonClick","preventDefault","hasLabel","querySelector","hasIcon","tabIndex","hasTabIndex","hasAttribute","getAttribute","render","rel","layout","disabled","attrs","download","h","Host","onKeyup","role","tabindex","id","class","Object","assign","part"],"sources":["src/components/tab-button/tab-button.css?tag=road-tab-button&encapsulation=shadow","src/components/tab-button/tab-button.tsx"],"sourcesContent":["/*\n * Tab button\n *\n * Index\n * - Button\n * - Native\n * - Underline\n * - Inner\n * - Icon\n * - Label\n *\n */\n\n/**\n * @prop --padding-start: Left padding of the button\n * @prop --padding-end: Right padding of the button\n * @prop --tab-color: Default color of the tab button text\n * @prop --tab-color-selected: Color of the tab button text when selected\n * @prop --tab-unerline-selected: Color of the tab button underline when selected\n * @prop --tab-background-hover: Color of the tab button when hover by a mouse\n * @prop --tab-background-focused: Color of the tab button when focused with the tab key\n */\n\n\n/* BUTTON\n -------------------- */\n\n:host {\n box-sizing: border-box;\n font-weight: 700;\n color: var(--tab-color);\n outline: 0;\n transition: background 0.15s ease-in-out;\n}\n\n/**\n * Active state\n */\n\n:host(.tab-secondary) {\n --tab-underline-selected: var(--road-secondary-600);\n}\n\n:host(.tab-selected) {\n color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) ::slotted(road-icon) {\n color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) .button-native::after {\n background: var(--tab-underline-selected);\n opacity: 1;\n transform: none;\n}\n\n/**\n * Hover state\n */\n\n:host(:hover) {\n background: var(--tab-background-hover);\n}\n\n/**\n * Focus state\n */\n\n:host(.focus-visible) {\n background: var(--tab-background-focused);\n outline: auto;\n}\n\n/**\n * Disabled\n */\n\n:host(.tab-disabled) {\n background: var(--road-surface-disabled);\n}\n\n:host(.tab-disabled) .button-native{\n cursor: not-allowed;\n}\n\n:host(.tab-disabled) ::slotted(road-label) {\n color: var(--road-on-surface-disabled);\n}\n\n\n/* NATIVE\n -------------------- */\n\n.button-native {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-direction: inherit;\n align-items: inherit;\n justify-content: inherit;\n width: 100%;\n height: 100%;\n min-height: 3.5rem;\n padding: 0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);\n margin: 0;\n overflow: hidden;\n font-family: inherit;\n font-size: inherit;\n font-style: inherit;\n font-weight: inherit;\n color: inherit;\n text-align: inherit;\n text-decoration: none;\n text-indent: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n letter-spacing: inherit;\n white-space: inherit;\n cursor: pointer;\n background: transparent;\n -webkit-user-drag: none;\n border-color: initial;\n border-style: initial;\n border-width: 0;\n border-radius: inherit;\n border-image: initial;\n outline: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n/* UNDERLINE\n -------------------- */\n\n.button-native::after {\n position: absolute;\n bottom: 0;\n left: 0;\n display: block;\n width: 100%;\n height: 2px;\n content: \"\";\n opacity: 0;\n transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n transform: scaleX(0);\n transform-origin: center;\n}\n\n/* INNER\n -------------------- */\n\n.button-inner {\n position: relative;\n z-index: 1;\n display: flex;\n flex-flow: inherit;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n}\n\n/* ICON\n -------------------- */\n\n:host ::slotted(road-icon) {\n color: var(--tab-color);\n}\n\n:host(.tab-layout-icon-start) ::slotted(road-icon) {\n margin-right: 0.5rem;\n}\n\n:host(.tab-layout-icon-top) .button-inner {\n flex-direction: column;\n}\n\n/* LABEL\n -------------------- */\n\n:host ::slotted(road-label) {\n display: -webkit-box;\n max-width: 12.5rem;\n overflow: hidden;\n font-size: 1rem;\n color: var(--road-on-surface);\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n text-align: center;\n text-overflow: ellipsis;\n white-space: inherit;\n}\n\n:host(.tab-layout-icon-top) ::slotted(road-label) {\n margin-top: 0.25rem;\n font-size: 1rem;\n}\n","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"],"mappings":"2DAAA,MAAMA,EAAe,8yE,MCaRC,EAAS,M,uIA0GZC,KAAAC,QAAWC,IACjB,GAAIA,EAAGC,MAAQ,SAAWD,EAAGC,MAAQ,IAAK,CACxCH,KAAKI,UAAUF,E,GAIXF,KAAAK,QAAWH,IACjBF,KAAKI,UAAUF,EAAG,E,2EArFyB,a,cAKT,M,cAKE,M,yCAwBtC,eAAAI,CAAgBJ,GACd,MAAMK,EAAiBL,EAAGM,OAC1B,MAAMC,EAAST,KAAKU,GAAGC,cAEvB,GAAKT,EAAGU,cAAgBV,EAAGU,eAAeC,SAASJ,IAAaF,GAAkBA,EAAeO,SAASd,KAAKU,IAAM,CACnHV,KAAKe,SAAWf,KAAKgB,MAAQd,EAAGe,OAAOD,G,EAInC,SAAAZ,CAAUF,GAChB,GAAIF,KAAKgB,MAAQE,UAAW,CAC1BlB,KAAKmB,mBAAmBC,KAAK,CAC3BJ,IAAKhB,KAAKgB,IACVK,KAAMrB,KAAKqB,KACXN,SAAUf,KAAKe,WAEjBf,KAAKsB,mBAAmBF,KAAK,CAC3BJ,IAAKhB,KAAKgB,IACVK,KAAMrB,KAAKqB,KACXN,SAAUf,KAAKe,WAGjBb,EAAGqB,gB,EAIP,YAAYC,GACV,QAASxB,KAAKU,GAAGe,cAAc,a,CAGjC,WAAYC,GACV,QAAS1B,KAAKU,GAAGe,cAAc,Y,CAGjC,YAAYE,GACV,MAAMC,EAAc5B,KAAKU,GAAGmB,aAAa,YAEzC,GAAID,EAAa,CACf,OAAO5B,KAAKU,GAAGoB,aAAa,W,CAG9B,OAAO,C,CAaT,MAAAC,GACE,MAAML,QAAEA,EAAOF,SAAEA,EAAQG,SAAEA,EAAQN,KAAEA,EAAIW,IAAEA,EAAGxB,OAAEA,EAAMyB,OAAEA,EAAMlB,SAAEA,EAAQC,IAAEA,EAAGkB,SAAEA,GAAalC,KAC5F,MAAMmC,EAAQ,CACZC,SAAUpC,KAAKoC,SACff,MAAOa,EAAWb,EAAOH,UACzBc,MACAxB,UAGF,OACE6B,EAACC,EAAI,CACHjC,QAAUH,IAAegC,GAAYlC,KAAKK,QAAQH,GAClDqC,QAAUrC,IAAuBgC,GAAYlC,KAAKC,QAAQC,GAC1DsC,KAAK,MACLC,SAAUP,GAAY,EAAIP,EAAQ,gBACnBZ,EAAW,OAAS,QAAO,gBAC3BmB,EAAW,OAAS,KACnCQ,GAAI1B,IAAQE,UAAY,cAAcF,IAAQ,KAC9C2B,MAAO,CACL,eAAgB5B,EAChB,gBAAiBS,EACjB,eAAgBE,EAChB,qBAAsBF,IAAaE,EACnC,oBAAqBA,IAAYF,EACjC,CAAC,cAAcS,KAAW,KAC1B,eAAgBC,IAGlBG,EAAA,IAAAO,OAAAC,OAAA,GAAOV,EAAK,CAAER,UAAW,EAAGgB,MAAM,gBAAgBG,KAAK,WACrDT,EAAA,QAAMM,MAAM,gBACVN,EAAA,e"}