@roadtrip/components 3.22.0 → 3.23.1

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 (44) hide show
  1. package/dist/cjs/road-accordion.cjs.entry.js +1 -1
  2. package/dist/cjs/road-accordion.cjs.entry.js.map +1 -1
  3. package/dist/cjs/road-badge_14.cjs.entry.js +2 -2
  4. package/dist/cjs/road-badge_14.cjs.entry.js.map +1 -1
  5. package/dist/cjs/road-select-filter.cjs.entry.js +1 -1
  6. package/dist/cjs/road-select-filter.cjs.entry.js.map +1 -1
  7. package/dist/cjs/road-tooltip.cjs.entry.js +1 -1
  8. package/dist/cjs/road-tooltip.cjs.entry.js.map +1 -1
  9. package/dist/collection/components/accordion/accordion.css +0 -1
  10. package/dist/collection/components/button/button.css +4 -0
  11. package/dist/collection/components/icon/icon.css +4 -4
  12. package/dist/collection/components/select-filter/select-filter.css +1 -1
  13. package/dist/collection/components/tooltip/tooltip.css +59 -2
  14. package/dist/collection/components/tooltip/tooltip.js +2 -2
  15. package/dist/collection/components/tooltip/tooltip.js.map +1 -1
  16. package/dist/collection/components/tooltip/tooltip.stories.js +1 -1
  17. package/dist/esm/road-accordion.entry.js +1 -1
  18. package/dist/esm/road-accordion.entry.js.map +1 -1
  19. package/dist/esm/road-badge_14.entry.js +2 -2
  20. package/dist/esm/road-badge_14.entry.js.map +1 -1
  21. package/dist/esm/road-select-filter.entry.js +1 -1
  22. package/dist/esm/road-select-filter.entry.js.map +1 -1
  23. package/dist/esm/road-tooltip.entry.js +1 -1
  24. package/dist/esm/road-tooltip.entry.js.map +1 -1
  25. package/dist/html.html-data.json +12 -0
  26. package/dist/roadtrip/{p-73b4f413.entry.js → p-21b1569a.entry.js} +2 -2
  27. package/dist/roadtrip/{p-73b4f413.entry.js.map → p-21b1569a.entry.js.map} +1 -1
  28. package/dist/roadtrip/p-3c2da24f.entry.js +2 -0
  29. package/dist/roadtrip/p-3c2da24f.entry.js.map +1 -0
  30. package/dist/roadtrip/p-91455bc9.entry.js +2 -0
  31. package/dist/roadtrip/p-91455bc9.entry.js.map +1 -0
  32. package/dist/roadtrip/p-c653d32d.entry.js +2 -0
  33. package/dist/roadtrip/p-c653d32d.entry.js.map +1 -0
  34. package/dist/roadtrip/roadtrip.esm.js +1 -1
  35. package/dist/types/components/tooltip/tooltip.d.ts +1 -1
  36. package/dist/types/components.d.ts +8 -0
  37. package/hydrate/index.js +4 -4
  38. package/package.json +1 -1
  39. package/dist/roadtrip/p-648aa41f.entry.js +0 -2
  40. package/dist/roadtrip/p-648aa41f.entry.js.map +0 -1
  41. package/dist/roadtrip/p-bc671fae.entry.js +0 -2
  42. package/dist/roadtrip/p-bc671fae.entry.js.map +0 -1
  43. package/dist/roadtrip/p-c096723c.entry.js +0 -2
  44. package/dist/roadtrip/p-c096723c.entry.js.map +0 -1
@@ -1,2 +0,0 @@
1
- import{r as o,h as r}from"./p-f3d586b3.js";import{n as a}from"./p-ac7a8bca.js";import"./p-1ccae339.js";const i=':host{--accordion-header-border:1px;--content-margin:0 var(--road-spacing-05) var(--road-spacing-04);--content-padding:var(--road-spacing-04) 0 0;--header-padding:var(--road-spacing-04) var(--road-spacing-05);--icon-color:var(--road-icon);--max-height:none;display:block;margin-bottom:1rem}:host(.focus-visible){border:1px solid var(--road-primary)}.accordion{--max-height:none;overflow:hidden;font-family:var(--road-font, sans-serif);font-size:var(--road-body-small);line-height:1.5;color:var(--road-on-surface);background:var(--road-surface);border:1px solid;border-color:var(--road-outline-weak);border-radius:0.25rem;transition:max-height 0.3s ease-in-out}.accordion.accordion-light{background:none;border:0}.accordion[open]{max-height:var(--max-height)}.accordion[open] .accordion-arrow{transform:rotate(-90deg)}.accordion[open] .accordion-content{padding:var(--content-padding);margin:var(--content-margin)}.accordion-light[open] .accordion-light-content{margin:0 0 var(--road-spacing-04)}.accordion-light[open] .accordion-light-header::after{display:none}.accordion-trigger{box-sizing:border-box;display:block;border:1px solid transparent;border-radius:0.25rem;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.accordion-light .accordion-trigger:active{background:none}.accordion-trigger::-webkit-details-marker{display:none}.accordion-trigger.focus-visible{border-color:var(--road-primary)}.accordion-trigger:active{background:var(--road-surface-inverse)}.accordion-header{box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;padding:var(--header-padding);font-size:var(--road-body-medium);font-weight:700;cursor:pointer;-webkit-user-select:none;user-select:none}.accordion-light-header{position:relative;padding:var(--road-spacing-04) 0;font-size:var(--road-body-large)}.accordion-light--small .accordion-light-header{font-size:var(--road-body-medium)}.accordion-light--border .accordion-light-header::after{position:absolute;bottom:1px;width:98.3%;height:1px;content:"";background:var(--road-outline-weak)}.accordion-arrow{margin-left:auto;color:var(--icon-color);transform:rotate(90deg)}.accordion-light--small .accordion-arrow{width:1.5rem;height:1.5rem}::slotted([slot="header"]){display:flex;align-items:center}:host(.accordion-icon-left){width:1.5rem;height:1.5rem;margin-right:1rem}.accordion-content{padding:0 0.5rem;margin:0 1rem;overflow:hidden;font-size:var(--road-body-medium);border-top:var(--accordion-header-border) solid var(--road-outline-weak)}.accordion-light-content{border-top:1px solid var(--road-outline-weak)}.accordion-light--border .accordion-light-content{border-top:1px solid var(--road-outline-weak);border-bottom:1px solid var(--road-outline-weak)}';const n=class{constructor(r){o(this,r);this.onClick=()=>{this.isOpen=!this.isOpen};this.isOpen=false;this.isLight=false;this.isLightSeparator=false;this.isSmall=false}render(){const o=this.isLight?"accordion accordion-light":"accordion";const i=this.isLight?"accordion-header accordion-light-header":"accordion-header";const n=this.isLight?"accordion-content accordion-light-content":"accordion-content";const e=this.isLightSeparator?"accordion accordion-light accordion-light--border":"accordion";const c=this.isSmall?"accordion accordion-light accordion-light--small":"accordion";return r("details",{class:`${o} ${c} ${e}`,open:this.isOpen},r("summary",{class:"accordion-trigger","aria-expanded":`${this.isOpen}`,tabindex:"0",role:"button",onClick:this.onClick},r("div",{class:i},r("slot",{name:"icon-left"}),r("slot",{name:"header"}),r("road-icon",{class:"accordion-arrow",icon:a}))),r("div",{class:n},r("slot",null)))}};n.style=i;export{n as road_accordion};
2
- //# sourceMappingURL=p-bc671fae.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["accordionCss","Accordion","this","onClick","isOpen","render","accordionLight","isLight","accordionLightHeader","accordionLightContent","accordionLightSeparator","isLightSeparator","accordionSmall","isSmall","h","class","open","tabindex","role","name","icon","navigationChevron"],"sources":["src/components/accordion/accordion.css?tag=road-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx"],"sourcesContent":["/*\n * Accordion\n *\n * For accessibility, we provide a style for focus only on Tab.\n * For enable this focus, load the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n *\n * Index\n * - Accordion\n * - Button\n * - Content\n */\n\n/**\n * @prop --accordion-header-border: height of the border of the header\n * @prop --content-margin: margin of the accordion content\n * @prop --content-padding: padding of the accordion content\n * @prop --header-padding: padding of the accordion header\n * @prop --icon-color: color of the chevron icon\n * @prop --max-height: maximum height of the collapse content\n */\n\n:host {\n --accordion-header-border: 1px;\n --content-margin: 0 var(--road-spacing-05) var(--road-spacing-04);\n --content-padding: var(--road-spacing-04) 0 0;\n --header-padding: var(--road-spacing-04) var(--road-spacing-05);\n --icon-color: var(--road-icon);\n --max-height: none;\n\n display: block;\n margin-bottom: 1rem;\n}\n\n:host(.focus-visible){\n border: 1px solid var(--road-primary);\n}\n\n/* ACCORDION\n -------------------- */\n\n.accordion {\n --max-height: none;\n overflow: hidden;\n font-family: var(--road-font, sans-serif);\n font-size: var(--road-body-small);\n line-height: 1.5;\n color: var(--road-on-surface);\n background: var(--road-surface);\n border: 1px solid;\n border-color: var(--road-outline-weak);\n border-radius: 0.25rem;\n transition: max-height 0.3s ease-in-out;\n}\n\n.accordion.accordion-light {\n background: none;\n border: 0;\n}\n\n/**\n * Open state\n */\n\n.accordion[open] {\n max-height: var(--max-height);\n}\n\n.accordion[open] .accordion-arrow {\n transform: rotate(-90deg);\n}\n\n.accordion[open] .accordion-content {\n padding: var(--content-padding);\n margin: var(--content-margin);\n}\n\n.accordion-light[open] .accordion-light-content {\n margin: 0 0 var(--road-spacing-04);\n}\n\n.accordion-light[open] .accordion-light-header::after {\n display: none;\n}\n\n/* BUTTON\n -------------------- */\n\n.accordion-trigger {\n box-sizing: border-box;\n display: block;\n border: 1px solid transparent;\n border-radius: 0.25rem;\n outline: 0;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.accordion-light .accordion-trigger:active{\n background: none;\n}\n\n.accordion-trigger::-webkit-details-marker { /* Remove chrome native arrow */\n display: none;\n}\n\n/**\n * Focus on Tab\n */\n\n.accordion-trigger.focus-visible {\n border-color: var(--road-primary);\n}\n\n/**\n * Active state\n */\n\n.accordion-trigger:active {\n background: var(--road-surface-inverse);\n}\n\n/**\n * .accordion-header is an additionnal div\n * because Safari doesn't support flexbox on <summary> element\n */\n\n.accordion-header {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: var(--header-padding);\n font-size: var(--road-body-medium);\n font-weight: 700;\n cursor: pointer;\n user-select: none;\n}\n\n.accordion-light-header {\n position: relative;\n padding: var(--road-spacing-04) 0;\n font-size: var(--road-body-large);\n}\n\n.accordion-light--small .accordion-light-header {\n font-size: var(--road-body-medium);\n}\n\n.accordion-light--border .accordion-light-header::after {\n position: absolute;\n bottom: 1px;\n width: 98.3%;\n height: 1px;\n content: \"\";\n background: var(--road-outline-weak);\n}\n\n/**\n * Custom arrow\n */\n\n.accordion-arrow {\n margin-left: auto;\n color: var(--icon-color);\n transform: rotate(90deg);\n}\n\n.accordion-light--small .accordion-arrow {\n width: 1.5rem;\n height: 1.5rem;\n}\n\n::slotted([slot=\"header\"]){\n display: flex;\n align-items: center;\n}\n\n:host(.accordion-icon-left){\n width: 1.5rem;\n height: 1.5rem;\n margin-right: 1rem;\n}\n\n/* CONTENT\n -------------------- */\n\n.accordion-content {\n padding: 0 0.5rem;\n margin: 0 1rem;\n overflow: hidden;\n font-size: var(--road-body-medium);\n border-top: var(--accordion-header-border) solid var(--road-outline-weak);\n}\n\n.accordion-light-content {\n border-top: 1px solid var(--road-outline-weak);\n}\n\n.accordion-light--border .accordion-light-content {\n border-top: 1px solid var(--road-outline-weak);\n border-bottom: 1px solid var(--road-outline-weak);\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { navigationChevron } from '../../../icons';\nimport './../../utils/polyfill';\n\n/**\n * @slot header - Content of the header.\n * @slot - Content hidden in the accordion.\n * @slot icon-left - Icon of the alert, it should be a road-icon element.\n * `<road-icon name=\"alert-info-outline\" class=\"mr-16\"></road-icon>`\n\n */\n\n@Component({\n tag: 'road-accordion',\n styleUrl: 'accordion.css',\n shadow: true,\n})\nexport class Accordion {\n\n /**\n * Set to `true` to open the accordion and to `false` to close it.\n */\n @Prop({ mutable: true }) isOpen : boolean = false;\n\n /**\n * Set to `true` to remove border the accordion and to `false` to add border it.\n */\n @Prop() isLight : boolean = false;\n\n /**\n * Set to `true` to add a border in the header and the content only for the light accordion.\n */\n @Prop() isLightSeparator : boolean = false;\n\n /**\n * Set to `true` to add the small version only for the light accordion.\n */\n @Prop() isSmall : boolean = false;\n\n /**\n * Toggle the display when clicking header\n */\n private onClick = () => {\n this.isOpen = !this.isOpen;\n };\n\n render() {\n\n const accordionLight = this.isLight ? 'accordion accordion-light' : 'accordion';\n const accordionLightHeader = this.isLight ? 'accordion-header accordion-light-header' : 'accordion-header';\n const accordionLightContent = this.isLight ? 'accordion-content accordion-light-content' : 'accordion-content';\n const accordionLightSeparator = this.isLightSeparator ? 'accordion accordion-light accordion-light--border' : 'accordion';\n const accordionSmall = this.isSmall ? 'accordion accordion-light accordion-light--small' : 'accordion';\n return (\n <details class={`${accordionLight} ${accordionSmall} ${accordionLightSeparator}`} open={this.isOpen}>\n <summary class=\"accordion-trigger\" aria-expanded={`${this.isOpen}`} tabindex=\"0\" role=\"button\" onClick={this.onClick}>\n <div class={accordionLightHeader}>\n <slot name=\"icon-left\"/>\n <slot name=\"header\"/>\n <road-icon class=\"accordion-arrow\" icon={navigationChevron}></road-icon>\n </div>\n </summary>\n <div class={accordionLightContent}>\n <slot/>\n </div>\n </details>\n );\n }\n}"],"mappings":"uGAAA,MAAMA,EAAe,oqF,MCiBRC,EAAS,M,yBAyBZC,KAAAC,QAAU,KAChBD,KAAKE,QAAUF,KAAKE,MAAM,E,YArBgB,M,aAKf,M,sBAKU,M,aAKT,K,CAS9B,MAAAC,GAEE,MAAMC,EAAiBJ,KAAKK,QAAU,4BAA8B,YACpE,MAAMC,EAAuBN,KAAKK,QAAU,0CAA4C,mBACxF,MAAME,EAAwBP,KAAKK,QAAU,4CAA8C,oBAC3F,MAAMG,EAA0BR,KAAKS,iBAAmB,oDAAsD,YAC9G,MAAMC,EAAiBV,KAAKW,QAAU,mDAAqD,YAC3F,OACEC,EAAA,WAASC,MAAO,GAAGT,KAAkBM,KAAkBF,IAA2BM,KAAMd,KAAKE,QAC3FU,EAAA,WAASC,MAAM,oBAAmB,gBAAgB,GAAGb,KAAKE,SAAUa,SAAS,IAAIC,KAAK,SAASf,QAASD,KAAKC,SAC3GW,EAAA,OAAKC,MAAOP,GACVM,EAAA,QAAMK,KAAK,cACXL,EAAA,QAAMK,KAAK,WACXL,EAAA,aAAWC,MAAM,kBAAkBK,KAAMC,MAG7CP,EAAA,OAAKC,MAAON,GACVK,EAAA,c"}
@@ -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: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};
2
- //# sourceMappingURL=p-c096723c.entry.js.map
@@ -1 +0,0 @@
1
- {"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"}