@roadtrip/components 3.21.0 → 3.23.0

package/dist/roadtrip/p-418ca731.entry.js

@@ -1,2 +0,0 @@
-import{r,c as e,h as a,H as o,a as i}from"./p-f3d586b3.js";import{h as n,i as t}from"./p-ac7a8bca.js";const s='.sc-road-range-h{display:block}.form-group.sc-road-range{width:100%}.form-range.sc-road-range{position:relative;display:flex;flex-direction:column;width:100%;margin-bottom:6px}.form-range-input.sc-road-range{position:relative;z-index:1;width:100%;background:transparent;outline:0;appearance:none}.form-range.sc-road-range>output.sc-road-range::after{display:block;font-size:var(--road-label-medium);text-align:right;content:counter(variable);counter-reset:variable var(--value)}.form-range-label.sc-road-range{position:absolute;top:0;left:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}.form-range-progress.sc-road-range{position:relative;z-index:0;display:block;width:100%;margin-top:-1rem}.form-range-input.sc-road-range::-webkit-slider-runnable-track{border:0;appearance:none}.form-range-input.sc-road-range::-moz-range-track{height:0.5rem;border:0;appearance:none}.form-range-progress.sc-road-range::before{display:block;height:0.5rem;content:"";background-color:var(--road-on-surface-disabled);border:0;border-radius:1.125rem}.form-range-progress.sc-road-range::after{position:absolute;top:0;right:0;left:0;display:block;width:calc((var(--value) * 100%) / var(--max));height:0.5rem;content:"";background:var(--road-primary);border-radius:1.125rem}.form-range-input.sc-road-range::-webkit-slider-thumb{position:relative;z-index:1;width:1.625rem;height:1.625rem;cursor:grab;background:var(--road-surface);border:none;border-radius:1.625rem;box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);appearance:none}.form-range-input.sc-road-range::-moz-range-thumb{position:relative;z-index:1;box-sizing:border-box;width:1.625rem;height:1.625rem;margin-top:-0.625rem;cursor:grab;background:var(--road-surface);border:none;border-radius:1.625rem;box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);appearance:none}.focus-visible.sc-road-range-h .form-range-input.sc-road-range::-webkit-slider-thumb,.sc-road-range-h:active .form-range-input.sc-road-range::-webkit-slider-thumb,.sc-road-range-h:focus .form-range-input.sc-road-range::-webkit-slider-thumb{background:var(--road-input-surface-variant);border:0.5rem solid var(--road-grey-100-new)}.focus-visible.sc-road-range-h .form-range-input.sc-road-range::-moz-range-thumb,.sc-road-range-h:active .form-range-input.sc-road-range::-moz-range-thumb,.sc-road-range-h:focus .form-range-input.sc-road-range::-moz-range-thumb{background:var(--road-input-surface-variant);border:0.5rem solid var(--road-grey-100-new)}.sc-road-range-s>datalist{display:flex;justify-content:space-between}.sc-road-range-s>datalist option{width:32px;margin:0;font-size:var(--road-label-medium);text-align:center}';const d=class{constructor(a){r(this,a);this.roadchange=e(this,"roadchange",7);this.roadChange=e(this,"roadChange",7);this.onInput=r=>{const e=r.target;if(e){this.value=e.value||""}if(this.value!==null&&this.value!==undefined){this.el.style.setProperty("--value",`${this.value}`)}};this.rangeId=`road-range-${c++}`;this.value="";this.min=undefined;this.max=undefined;this.step=undefined;this.showValue=false;this.showTick=false;this.showLabels=false}valueChanged(){this.roadchange.emit({value:this.value==null?this.value:this.value.toString()});this.roadChange.emit({value:this.value==null?this.value:this.value.toString()})}getValue(){return typeof this.value==="number"?this.value.toString():(this.value||"").toString()}handleFocus(){this.el.classList.add("focus-visible")}handleBlur(){this.el.classList.remove("focus-visible")}componentDidLoad(){const r=this.el.querySelector(".form-label");const e=this.el.querySelector(".form-control.sc-road-input");if(r){r.style.clip="rect(0 0 0 0)";r.style.border="0";r.style.height="1px";r.style.left="0";r.style.margin="-1px";r.style.overflow="hidden";r.style.padding="0";r.style.position="absolute";r.style.top="0";r.style.width="1px";e.style.padding="0 1rem 0"}}render(){const r=this.getValue();const e=this.showLabels!==undefined?`tickmarks`:"";return a(o,{tabindex:"0"},a("div",{class:"form-group d-flex align-items-end"},this.showTick&&a("road-icon",{icon:n,class:"mr-8",size:"sm"}),a("div",{class:"form-range",style:{"--min:":this.min,"--max":this.max,"--value":r}},this.showValue&&a("output",null),this.showLabels&&a("slot",{name:"datalist"}),a("input",{type:"range",class:"form-range-input",id:this.rangeId,min:this.min,max:this.max,value:r,onInput:this.onInput,list:e,"aria-label":"Valeur",tabindex:"0"}),a("label",{class:"form-range-label"},"Valeur"),a("div",{class:"form-range-progress"})),this.showTick&&a("road-icon",{icon:t,class:"ml-8",size:"sm"})))}get el(){return i(this)}static get watchers(){return{value:["valueChanged"]}}};let c=0;d.style=s;export{d as road_range};
-//# sourceMappingURL=p-418ca731.entry.js.map

package/dist/roadtrip/p-418ca731.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["rangeCss","Range","this","onInput","ev","input","target","value","undefined","el","style","setProperty","rangeIds","valueChanged","roadchange","emit","toString","roadChange","getValue","handleFocus","classList","add","handleBlur","remove","componentDidLoad","label","querySelector","clip","border","height","left","margin","overflow","padding","position","top","width","render","datalist","showLabels","h","Host","tabindex","class","showTick","icon","navigationAddLessSolid","size","min","max","showValue","name","type","id","rangeId","list","navigationAddMoreSolid"],"sources":["src/components/range/range.css?tag=road-range&encapsulation=scoped","src/components/range/range.tsx"],"sourcesContent":["/*\n * Range\n *\n *\n * Index\n * - Input\n * - Value\n * - Slider\n * - Progress\n * - Cursor\n */\n\n:host {\n  display: block;\n}\n\n.form-group{\n  width: 100%;\n}\n\n.form-range {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  margin-bottom: 6px;\n}\n\n/* INPUT\n -------------------- */\n\n.form-range-input {\n  position: relative;\n  z-index: 1;\n  width: 100%;\n  background: transparent;\n  outline: 0;\n  appearance: none;\n}\n\n/* VALUE\n -------------------- */\n\n.form-range > output::after {\n  display: block;\n  font-size: var(--road-label-medium);\n  text-align: right;\n  content: counter(variable);\n  counter-reset: variable var(--value);\n}\n\n/* SLIDER\n -------------------- */\n\n.form-range-label {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  border: 0;\n}\n\n.form-range-progress {\n  position: relative;\n  z-index: 0;\n  display: block;\n  width: 100%;\n  margin-top: -1rem;\n}\n\n.form-range-input::-webkit-slider-runnable-track {\n  border: 0;\n  appearance: none;\n}\n\n.form-range-input::-moz-range-track {\n  height: 0.5rem;\n  border: 0;\n  appearance: none;\n}\n\n.form-range-progress::before {\n  display: block;\n  height: 0.5rem;\n  content: \"\";\n  background-color: var(--road-on-surface-disabled);\n  border: 0;\n  border-radius: 1.125rem;\n}\n\n/* PROGRESS\n -------------------- */\n\n.form-range-progress::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  display: block;\n  width: calc((var(--value) * 100%) / var(--max));\n  height: 0.5rem;\n  content: \"\";\n  background: var(--road-primary);\n  border-radius: 1.125rem;\n}\n\n/* CURSOR\n-------------------- */\n\n.form-range-input::-webkit-slider-thumb {\n  position: relative;\n  z-index: 1;\n  width: 1.625rem;\n  height: 1.625rem;\n  cursor: grab;\n  background: var(--road-surface);\n  border: none;\n  border-radius: 1.625rem;\n  box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);\n  appearance: none;\n}\n\n.form-range-input::-moz-range-thumb {\n  position: relative;\n  z-index: 1;\n  box-sizing: border-box;\n  width: 1.625rem;\n  height: 1.625rem;\n  margin-top: -0.625rem;\n  cursor: grab;\n  background: var(--road-surface);\n  border: none;\n  border-radius: 1.625rem;\n  box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);\n  appearance: none;\n}\n\n/**\n *  Focus state\n */\n\n:host(.focus-visible) .form-range-input::-webkit-slider-thumb,\n:host(:active) .form-range-input::-webkit-slider-thumb,\n:host(:focus) .form-range-input::-webkit-slider-thumb {\n  background: var(--road-input-surface-variant);\n  border: 0.5rem solid var(--road-grey-100-new);\n}\n\n:host(.focus-visible) .form-range-input::-moz-range-thumb,\n:host(:active) .form-range-input::-moz-range-thumb,\n:host(:focus) .form-range-input::-moz-range-thumb {\n  background: var(--road-input-surface-variant);\n  border: 0.5rem solid var(--road-grey-100-new);\n}\n\n/* DATALIST\n -------------------- */\n\n::slotted(datalist) {\n  display: flex;\n  justify-content: space-between;\n}\n\n::slotted(datalist) option {\n  width: 32px;\n  margin: 0;\n  font-size: var(--road-label-medium);\n  text-align: center;\n}\n\n","import { Component, h, Element, Prop, Event, Host, EventEmitter, Watch, Listen } from '@stencil/core';\nimport { navigationAddLessSolid, navigationAddMoreSolid } from '../../../icons';\n\n/**\n * @slot datalist - list of labels. also put show-labels=\"true\" and max=\"10\" for this exemple\n * `<datalist id=\"tickmarks\" slot=\"datalist\" class=\"tickmarks\">`\n      `<option value=\"0\" label=\"0%\"></option>`\n      `<option value=\"10\" label=\"10%\"></option>`\n      `<option value=\"20\" label=\"20%\"></option>`\n      `<option value=\"30\" label=\"30%\"></option>`\n      `<option value=\"40\" label=\"40%\"></option>`\n      `<option value=\"50\" label=\"50%\"></option>`\n      `<option value=\"60\" label=\"60%\"></option>`\n     `<option value=\"70\" label=\"70%\"></option>`\n     `<option value=\"80\" label=\"80%\"></option>`\n      `<option value=\"90\" label=\"90%\"></option>`\n      `<option value=\"100\" label=\"100%\"></option>`\n    `</datalist>`\n */\n\n@Component({\n  tag: 'road-range',\n  styleUrl: 'range.css',\n  scoped: true,\n})\nexport class Range {\n\n  @Element() el!: HTMLRoadRangeElement;\n\n  /**\n   * The id of range\n   */\n  @Prop() rangeId: string = `road-range-${rangeIds++}`;\n\n  /**\n   * The value of the range.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * The minimum value, which must not be greater than its maximum (max attribute) value.\n   */\n  @Prop() min!: string;\n\n  /**\n   * The maximum value, which must not be less than its minimum (min attribute) value.\n   */\n  @Prop() max!: string;\n\n  /**\n   * Works with the min and max attributes to limit the increments at which a value can be set.\n   * Possible values are: `\"any\"` or a positive floating point number.\n   */\n  @Prop() step?: string;\n\n  /**\n   * Display the current value of the range\n   */\n  @Prop() showValue: boolean = false;\n\n  /**\n   * Display Tick of the range\n   */\n  @Prop() showTick: boolean = false;\n\n    /**\n   * Display labels of the range\n   */\n     @Prop() showLabels: boolean = false;\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    this.roadchange.emit({ value: this.value == null ? this.value : this.value.toString() });\n    this.roadChange.emit({ value: this.value == null ? this.value : this.value.toString() });\n  }\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    value: string | undefined | null;\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    value: string | undefined | null;\n  }>;\n\n  private getValue(): string {\n    return typeof this.value === 'number'\n      ? this.value.toString()\n      : (this.value || '').toString();\n  }\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n    if(this.value !== null && this.value !== undefined) {\n      this.el.style.setProperty('--value', `${this.value}`);\n    }\n  };\n\n  @Listen('focus', { capture: true })\n  handleFocus() {\n    this.el.classList.add('focus-visible');\n  }\n\n  @Listen('blur', { capture: true })\n  handleBlur() {\n    this.el.classList.remove('focus-visible');\n  }\n\n  componentDidLoad() {\n    // Cacher le label pour accessibilité\n\n  const label = this.el.querySelector('.form-label') as HTMLElement;\n  const input = this.el.querySelector('.form-control.sc-road-input') as HTMLElement;\n  if (label) {\n    label.style.clip = 'rect(0 0 0 0)';\n    label.style.border = '0';\n    label.style.height = '1px';\n    label.style.left = '0';\n    label.style.margin = '-1px';\n    label.style.overflow = 'hidden';\n    label.style.padding = '0';\n    label.style.position = 'absolute';\n    label.style.top = '0';\n    label.style.width = '1px';\n\n    input.style.padding = '0 1rem 0';\n    \n  }\n}\n\n  render() {\n    const value = this.getValue();\n    const datalist = this.showLabels !== undefined ? `tickmarks` : '';\n\n    return (\n      <Host tabindex=\"0\">\n      <div class=\"form-group d-flex align-items-end\">\n        {this.showTick && <road-icon icon={navigationAddLessSolid} class=\"mr-8\" size='sm'></road-icon>}\n        <div class=\"form-range\" style={{'--min:': this.min, '--max': this.max, '--value': value}}>\n          {this.showValue && <output></output>}\n          {this.showLabels && <slot name=\"datalist\"/>}\n          <input\n            type=\"range\"\n            class=\"form-range-input\"\n            id={this.rangeId}\n            min={this.min}\n            max={this.max}\n            value={value}\n            onInput={this.onInput}\n            list={datalist}\n            aria-label=\"Valeur\"\n            tabindex=\"0\"\n          />\n          <label class=\"form-range-label\">Valeur</label>\n          <div class=\"form-range-progress\"></div>\n        </div>\n        {this.showTick && <road-icon icon={navigationAddMoreSolid} class=\"ml-8\" size='sm'></road-icon>}\n      </div>\n      </Host>\n    );\n  }\n\n}\n\nlet rangeIds = 0;\n"],"mappings":"sGAAA,MAAMA,EAAW,qnF,MCyBJC,EAAK,M,uGAuERC,KAAAC,QAAWC,IACjB,MAAMC,EAAQD,EAAGE,OACjB,GAAID,EAAO,CACTH,KAAKK,MAAQF,EAAME,OAAS,E,CAE9B,GAAGL,KAAKK,QAAU,MAAQL,KAAKK,QAAUC,UAAW,CAClDN,KAAKO,GAAGC,MAAMC,YAAY,UAAW,GAAGT,KAAKK,Q,gBAtEvB,cAAcK,M,WAKkB,G,yEAqB7B,M,cAKD,M,gBAKK,K,CAMvB,YAAAC,GACRX,KAAKY,WAAWC,KAAK,CAAER,MAAOL,KAAKK,OAAS,KAAOL,KAAKK,MAAQL,KAAKK,MAAMS,aAC3Ed,KAAKe,WAAWF,KAAK,CAAER,MAAOL,KAAKK,OAAS,KAAOL,KAAKK,MAAQL,KAAKK,MAAMS,Y,CAcrE,QAAAE,GACN,cAAchB,KAAKK,QAAU,SACzBL,KAAKK,MAAMS,YACVd,KAAKK,OAAS,IAAIS,U,CAczB,WAAAG,GACEjB,KAAKO,GAAGW,UAAUC,IAAI,gB,CAIxB,UAAAC,GACEpB,KAAKO,GAAGW,UAAUG,OAAO,gB,CAG3B,gBAAAC,GAGA,MAAMC,EAAQvB,KAAKO,GAAGiB,cAAc,eACpC,MAAMrB,EAAQH,KAAKO,GAAGiB,cAAc,+BACpC,GAAID,EAAO,CACTA,EAAMf,MAAMiB,KAAO,gBACnBF,EAAMf,MAAMkB,OAAS,IACrBH,EAAMf,MAAMmB,OAAS,MACrBJ,EAAMf,MAAMoB,KAAO,IACnBL,EAAMf,MAAMqB,OAAS,OACrBN,EAAMf,MAAMsB,SAAW,SACvBP,EAAMf,MAAMuB,QAAU,IACtBR,EAAMf,MAAMwB,SAAW,WACvBT,EAAMf,MAAMyB,IAAM,IAClBV,EAAMf,MAAM0B,MAAQ,MAEpB/B,EAAMK,MAAMuB,QAAU,U,EAKxB,MAAAI,GACE,MAAM9B,EAAQL,KAAKgB,WACnB,MAAMoB,EAAWpC,KAAKqC,aAAe/B,UAAY,YAAc,GAE/D,OACEgC,EAACC,EAAI,CAACC,SAAS,KACfF,EAAA,OAAKG,MAAM,qCACRzC,KAAK0C,UAAYJ,EAAA,aAAWK,KAAMC,EAAwBH,MAAM,OAAOI,KAAK,OAC7EP,EAAA,OAAKG,MAAM,aAAajC,MAAO,CAAC,SAAUR,KAAK8C,IAAK,QAAS9C,KAAK+C,IAAK,UAAW1C,IAC/EL,KAAKgD,WAAaV,EAAA,eAClBtC,KAAKqC,YAAcC,EAAA,QAAMW,KAAK,aAC/BX,EAAA,SACEY,KAAK,QACLT,MAAM,mBACNU,GAAInD,KAAKoD,QACTN,IAAK9C,KAAK8C,IACVC,IAAK/C,KAAK+C,IACV1C,MAAOA,EACPJ,QAASD,KAAKC,QACdoD,KAAMjB,EAAQ,aACH,SACXI,SAAS,MAEXF,EAAA,SAAOG,MAAM,oBAAkB,UAC/BH,EAAA,OAAKG,MAAM,yBAEZzC,KAAK0C,UAAYJ,EAAA,aAAWK,KAAMW,EAAwBb,MAAM,OAAOI,KAAK,Q,gFAQrF,IAAInC,EAAW,E"}

package/dist/roadtrip/p-c096723c.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as o,H as i,a}from"./p-f3d586b3.js";const s=':host{--max-width:16rem;--z-index:1;--width:auto;position:relative;display:inline-block}: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:6rem;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="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="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.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,"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};
-//# sourceMappingURL=p-c096723c.entry.js.map

package/dist/roadtrip/p-c096723c.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["tooltipCss","Tooltip","this","onClick","hasTrigger","isOpen","close","open","onMouseOver","onMouseOut","tooltipIds","triggerType","triggers","trigger","split","includes","render","h","Host","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: 16rem;\n  --z-index: 1;\n  --width: auto;\n\n  position: relative;\n  display: inline-block;\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: 6rem;\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 * 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 * 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    | '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`. 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 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        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,usD,MCaNC,EAAO,M,yBA0DVC,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,kBAjEmB,kBAAkBI,I,aAK5B,G,cASL,M,kBAOA,S,YAKqB,M,aAOR,O,CAM1B,UAAMH,GACJL,KAAKG,OAAS,I,CAOhB,WAAMC,GACJJ,KAAKG,OAAS,K,CAqBR,UAAAD,CAAWO,GACjB,MAAMC,EAAWV,KAAKW,QAAQC,MAAM,KACpC,OAAOF,EAASG,SAASJ,E,CAG3B,MAAAK,GACE,OACEC,EAACC,EAAI,CACHV,YAAaN,KAAKM,YAClBC,WAAYP,KAAKO,WACjBN,QAASD,KAAKC,QAAO,wBACED,KAAKiB,UAE5BF,EAAA,2BAAwBf,KAAKkB,YAE7BH,EAAA,OACEI,KAAK,UACLC,GAAIpB,KAAKkB,UACTG,MAAO,CACLC,QAAS,KACT,eAAgBtB,KAAKG,QAEvBoB,KAAK,UAAS,eACAvB,KAAKG,OAAS,OAAS,SAEpCH,KAAKwB,QACNT,EAAA,QAAMU,KAAK,qB,2BAOrB,IAAIjB,EAAa,E"}