@roadtrip/components 3.29.0 → 3.31.0

package/dist/roadtrip/p-a77727f2.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: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};
-//# sourceMappingURL=p-a77727f2.entry.js.map

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

@@ -1 +0,0 @@
-{"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"}