@rededor/cura 1.6.0-alpha.0 → 1.6.0-alpha.2

package/dist/cura/p-3576b633.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as i,H as a,g as o}from"./p-af3ac476.js";const s=":host{display:block;box-sizing:border-box}:host .container{position:fixed;z-index:99999;display:flex;box-sizing:border-box;min-width:328px;height:fit-content;padding:16px;border:1px solid var(--color-base);border-radius:12px;background-color:var(--neutral-purewhite);overflow:hidden;box-shadow:0px 8px 16px 0px var(--neutral-black-shadow-4, rgba(38, 38, 38, 0.12))}:host .container.loader{padding:16px 16px 20px}:host .container.top{top:24px}:host .container.top.center{top:-100%;left:50%;transform:translateX(-50%);opacity:0;transition:opacity 0.5s ease-in-out, top 0.5s ease-in-out}:host .container.top.center.active{top:24px;opacity:1}:host .container.bottom{bottom:24px}:host .container.bottom.center{bottom:-100%;left:50%;transform:translateX(-50%);opacity:0;transition:opacity 0.5s ease-in-out, bottom 0.5s ease-in-out}:host .container.bottom.center.active{bottom:24px;opacity:1}:host .container.left{left:-100%;opacity:0;transition:opacity 0.5s ease-in-out, left 0.5s ease-in-out}@media (max-width: 768px){:host .container.left{right:unset;left:50%;transform:translateX(-50%)}}:host .container.left.active{left:24px;opacity:1}:host .container.right{right:-100%;opacity:0;transition:opacity 0.5s ease-in-out, right 0.5s ease-in-out}@media (max-width: 768px){:host .container.right{right:unset;left:50%;transform:translateX(-50%)}}:host .container.right.active{right:24px;opacity:1}:host .container .content{flex:1 1 0;display:flex;flex-direction:column;gap:4px}:host .container .default-icon{margin-right:12px}:host .container .close-icon{margin-left:12px;cursor:pointer}";const n=s;const r=class{constructor(i){t(this,i);this.toastClosed=e(this,"toastClosed",7);this.handleClose=()=>{this.closeContainer()};this.type="info";this.position="top-right";this.icon=undefined;this.label=undefined;this.closeButton=true;this.loader=true;this.autoCloseDelay=1e4;this.styles={};this.progress=0}handleChangeType(){this.setStyle()}connectedCallback(){this.setStyle()}render(){return i(a,{key:"cccef02cf7786461ab403fecd52476a42bb98374"},i("div",{key:"64385fa4aab3d08e0815276e0bde817b1f3c09f4",class:this.getClasses(),style:this.styles},i("cura-icon",{key:"0d759de0780902eec4276adfa3f758c1f2b0b53c",class:"default-icon",name:this.getNameIcon(),size:16,color:`${this.type}-dark`}),i("div",{key:"2c4baf72eb99c8d400eb704879febe1a57167373",class:"content"},i("cura-heading",{key:"771e4762bb36bf47064ed90a98f7786973093e8c",level:4,size:"xsmall",color:`${this.type}-dark`,weight:"bold","margin-block":"0"},this.label),i("cura-paragraph",{key:"a8ef8dca7e4ddfac612bd48f19688fae8c0a015e",color:`${this.type}-darker`,size:"xsmall",marginBlock:"0",lineHeight:"133.33%"},i("slot",{key:"86408523353f831f6ede1acaf0214a00f5fac8a5"})),i("slot",{key:"c69f99edb9577df1a6ce9b6667c719df740daa49",name:"actions"})),this.closeButton&&i("cura-icon",{key:"cacd29615f1dbff708ed10811c4e94c0b120c325",class:"close-icon",name:"close",size:16,color:"error-dark",onClick:this.handleClose}),this.loader&&!!this.autoCloseDelay&&i("cura-loader-bar",{key:"65a88d82da0ad2a9c987e26c2ffba983ff1c60b6",color:`${this.type}-base`,progress:this.progress})))}componentDidLoad(){this.openContainer();this.startAnimation()}setStyle(){this.styles=Object.assign(Object.assign({},this.styles),{"--neutral-purewhite":window.CuraAPI.theme.colors.getColor(`neutral-purewhite`),"--neutral-base":window.CuraAPI.theme.colors.getColor(`neutral-base`,.2),"--primary-base":window.CuraAPI.theme.colors.getColor(`primary-base`),"--color-base":window.CuraAPI.theme.colors.getColor(`${this.type}-base`)})}getClasses(){const[t,e]=this.position.split("-");const i={};i["container"]=true;i[t]=true;i[e]=true;if(this.loader){i["loader"]=true}return i}getNameIcon(){const t={info:"infoCircle",success:"checkCircle",warning:"alertCircle",error:"alertTriangle"};return this.icon?this.icon:t[this.type]}openContainer(){this.container=this.host.shadowRoot.querySelector(".container");this.container.classList.add("active")}closeContainer(){this.container.classList.remove("active");setTimeout((()=>{this.toastClosed.emit();this.host.remove()}),500)}startAnimation(){if(!!this.autoCloseDelay){if(this.loader){this.progress=0;let t=setInterval((()=>{if(this.progress>=100){clearInterval(t);this.closeContainer()}else{this.progress++}}),this.autoCloseDelay/100)}else{let t=setInterval((()=>{clearInterval(t);this.closeContainer()}),this.autoCloseDelay)}}}get host(){return o(this)}static get watchers(){return{type:["handleChangeType"],position:["handleChangeType"]}}};r.style=n;export{r as cura_toast};
-//# sourceMappingURL=p-3576b633.entry.js.map

package/dist/cura/p-3576b633.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["curaToastCss","CuraToastStyle0","CuraToast","this","handleClose","closeContainer","handleChangeType","setStyle","connectedCallback","render","h","Host","key","class","getClasses","style","styles","name","getNameIcon","size","color","type","level","weight","label","marginBlock","lineHeight","closeButton","onClick","loader","autoCloseDelay","progress","componentDidLoad","openContainer","startAnimation","Object","assign","window","CuraAPI","theme","colors","getColor","firstPosition","secondPosition","position","split","classes","iconMapping","info","success","warning","error","icon","container","host","shadowRoot","querySelector","classList","add","remove","setTimeout","toastClosed","emit","intervalId","setInterval","clearInterval"],"sources":["src/components/cura-toast/cura-toast.scss?tag=cura-toast&encapsulation=shadow","src/components/cura-toast/cura-toast.tsx"],"sourcesContent":["@import '../../../src/scss/mixins/responsive.scss';\n@import '../../../src/scss/mixins/shadows.scss';\n\n@mixin horizontalConfig($property) {\n  #{$property}: 24px;\n\n  &.center {\n    #{$property}: -100%;\n    left: 50%;\n    transform: translateX(-50%);\n    opacity: 0;\n    transition: opacity 0.5s ease-in-out, #{$property} 0.5s ease-in-out;\n\n    &.active {\n      #{$property}: 24px;\n      opacity: 1;\n    }\n  }\n}\n\n@mixin verticalConfig($property) {\n  #{$property}: -100%;\n  opacity: 0;\n  transition: opacity 0.5s ease-in-out, #{$property} 0.5s ease-in-out;\n  \n  @include mobile-only() {\n    right: unset;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  &.active {\n    #{$property}: 24px;\n    opacity: 1;\n  }\n}\n\n:host {\n  display: block;\n  box-sizing: border-box;\n\n  .container {\n    position: fixed;\n    z-index: 99999;\n    display: flex;\n    box-sizing: border-box;\n    min-width: 328px;\n    height: fit-content;\n    padding: 16px;\n    border: 1px solid var(--color-base);\n    border-radius: 12px;\n    background-color: var(--neutral-purewhite);\n    overflow: hidden;\n    @include shadow-level4();\n\n    &.loader {\n      padding: 16px 16px 20px;\n    }\n\n    &.top {\n      @include horizontalConfig(top);\n    }\n\n    &.bottom {\n      @include horizontalConfig(bottom);\n    }\n\n    &.left {\n      @include verticalConfig(left);\n    }\n\n    &.right {\n      @include verticalConfig(right);\n    }\n\n    .content {\n      flex: 1 1 0;\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .default-icon {\n      margin-right: 12px;\n    }\n\n    .close-icon {\n      margin-left: 12px;\n      cursor: pointer;\n    }\n  }\n}","import { Component, Element, Prop, Host, h, State, Watch, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'cura-toast',\n  styleUrl: 'cura-toast.scss',\n  shadow: true,\n})\nexport class CuraToast {\n  @Element() host: HTMLElement;\n\n  @Prop() type: 'info' | 'success' | 'warning' | 'error' = 'info';\n  @Prop() position: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' = 'top-right';\n  @Prop({ reflect: true }) icon: string;\n  @Prop({ reflect: true }) label: string;\n  @Prop({ reflect: true }) closeButton = true;\n  @Prop({ reflect: true }) loader = true;\n  @Prop({ reflect: true }) autoCloseDelay = 10000;\n\n  @State() styles = {};\n  @State() progress = 0;\n\n  @Event({ eventName: 'toastClosed' }) toastClosed: EventEmitter<void>;\n\n  @Watch('type')\n  @Watch('position')\n  handleChangeType() {\n    this.setStyle();\n  }\n\n  container: HTMLElement;\n\n  connectedCallback() {\n    this.setStyle();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getClasses()} style={this.styles}>\n          <cura-icon class=\"default-icon\" name={this.getNameIcon()} size={16} color={`${this.type}-dark`}></cura-icon>\n          <div class=\"content\">\n            <cura-heading level={4} size=\"xsmall\" color={`${this.type}-dark`} weight=\"bold\" margin-block=\"0\">\n              {this.label}\n            </cura-heading>\n            <cura-paragraph color={`${this.type}-darker`} size=\"xsmall\" marginBlock=\"0\" lineHeight=\"133.33%\">\n              <slot></slot>\n            </cura-paragraph>\n            <slot name=\"actions\"></slot>\n          </div>\n          {this.closeButton && <cura-icon class=\"close-icon\" name=\"close\" size={16} color=\"error-dark\" onClick={this.handleClose}></cura-icon>}\n          {this.loader && !!this.autoCloseDelay && <cura-loader-bar color={`${this.type}-base`} progress={this.progress}></cura-loader-bar>}\n        </div>\n      </Host>\n    );\n  }\n\n  componentDidLoad() {\n    this.openContainer();\n    this.startAnimation();\n  }\n\n  setStyle() {\n    this.styles = {\n      ...this.styles,\n      '--neutral-purewhite': window.CuraAPI.theme.colors.getColor(`neutral-purewhite`),\n      '--neutral-base': window.CuraAPI.theme.colors.getColor(`neutral-base`, 0.2),\n      '--primary-base': window.CuraAPI.theme.colors.getColor(`primary-base`),\n      '--color-base': window.CuraAPI.theme.colors.getColor(`${this.type}-base`)\n    }\n  }\n\n  getClasses() {\n    const [firstPosition, secondPosition] = this.position.split('-');\n    const classes = {};\n\n    classes['container'] = true;\n    classes[firstPosition] = true;\n    classes[secondPosition] = true;\n\n    if (this.loader) {\n      classes['loader'] = true;\n    }\n\n    return classes;\n  }\n\n  getNameIcon() {\n    const iconMapping = {\n      info: 'infoCircle',\n      success: 'checkCircle',\n      warning: 'alertCircle',\n      error: 'alertTriangle',\n    };\n    return this.icon ? this.icon : iconMapping[this.type];\n  }\n\n  openContainer() {\n    this.container = this.host.shadowRoot.querySelector('.container') as HTMLElement;\n    this.container.classList.add('active');\n  }\n\n  closeContainer() {\n    this.container.classList.remove('active');\n    setTimeout(() => {\n      this.toastClosed.emit();\n      this.host.remove();\n    }, 500);\n  }\n\n  handleClose = () => {\n    this.closeContainer();\n  };\n\n  startAnimation() {\n    if (!!this.autoCloseDelay) {\n      if (this.loader) {\n        this.progress = 0;\n        let intervalId = setInterval(() => {\n          if (this.progress >= 100) {\n            clearInterval(intervalId);\n            this.closeContainer();\n          } else {\n            this.progress++;\n          }\n        }, this.autoCloseDelay/100);\n      } else {\n        let intervalId = setInterval(() => {\n          clearInterval(intervalId);\n          this.closeContainer();\n        }, this.autoCloseDelay);\n      }\n    }\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAe,4iDACrB,MAAAC,EAAeD,E,MCMFE,EAAS,M,kEAsGpBC,KAAAC,YAAc,KACZD,KAAKE,gBAAgB,E,UApGkC,O,cACsD,Y,0DAGxE,K,YACL,K,oBACQ,I,YAExB,G,cACE,C,CAMpB,gBAAAC,GACEH,KAAKI,U,CAKP,iBAAAC,GACEL,KAAKI,U,CAGP,MAAAE,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAOV,KAAKW,aAAcC,MAAOZ,KAAKa,QACzCN,EAAA,aAAAE,IAAA,2CAAWC,MAAM,eAAeI,KAAMd,KAAKe,cAAeC,KAAM,GAAIC,MAAO,GAAGjB,KAAKkB,cACnFX,EAAA,OAAAE,IAAA,2CAAKC,MAAM,WACTH,EAAA,gBAAAE,IAAA,2CAAcU,MAAO,EAAGH,KAAK,SAASC,MAAO,GAAGjB,KAAKkB,YAAaE,OAAO,OAAM,eAAc,KAC1FpB,KAAKqB,OAERd,EAAA,kBAAAE,IAAA,2CAAgBQ,MAAO,GAAGjB,KAAKkB,cAAeF,KAAK,SAASM,YAAY,IAAIC,WAAW,WACrFhB,EAAA,QAAAE,IAAA,8CAEFF,EAAA,QAAAE,IAAA,2CAAMK,KAAK,aAEZd,KAAKwB,aAAejB,EAAA,aAAAE,IAAA,2CAAWC,MAAM,aAAaI,KAAK,QAAQE,KAAM,GAAIC,MAAM,aAAaQ,QAASzB,KAAKC,cAC1GD,KAAK0B,UAAY1B,KAAK2B,gBAAkBpB,EAAA,mBAAAE,IAAA,2CAAiBQ,MAAO,GAAGjB,KAAKkB,YAAaU,SAAU5B,KAAK4B,Y,CAM7G,gBAAAC,GACE7B,KAAK8B,gBACL9B,KAAK+B,gB,CAGP,QAAA3B,GACEJ,KAAKa,OAAMmB,OAAAC,OAAAD,OAAAC,OAAA,GACNjC,KAAKa,QAAM,CACd,sBAAuBqB,OAAOC,QAAQC,MAAMC,OAAOC,SAAS,qBAC5D,iBAAkBJ,OAAOC,QAAQC,MAAMC,OAAOC,SAAS,eAAgB,IACvE,iBAAkBJ,OAAOC,QAAQC,MAAMC,OAAOC,SAAS,gBACvD,eAAgBJ,OAAOC,QAAQC,MAAMC,OAAOC,SAAS,GAAGtC,KAAKkB,c,CAIjE,UAAAP,GACE,MAAO4B,EAAeC,GAAkBxC,KAAKyC,SAASC,MAAM,KAC5D,MAAMC,EAAU,GAEhBA,EAAQ,aAAe,KACvBA,EAAQJ,GAAiB,KACzBI,EAAQH,GAAkB,KAE1B,GAAIxC,KAAK0B,OAAQ,CACfiB,EAAQ,UAAY,I,CAGtB,OAAOA,C,CAGT,WAAA5B,GACE,MAAM6B,EAAc,CAClBC,KAAM,aACNC,QAAS,cACTC,QAAS,cACTC,MAAO,iBAET,OAAOhD,KAAKiD,KAAOjD,KAAKiD,KAAOL,EAAY5C,KAAKkB,K,CAGlD,aAAAY,GACE9B,KAAKkD,UAAYlD,KAAKmD,KAAKC,WAAWC,cAAc,cACpDrD,KAAKkD,UAAUI,UAAUC,IAAI,S,CAG/B,cAAArD,GACEF,KAAKkD,UAAUI,UAAUE,OAAO,UAChCC,YAAW,KACTzD,KAAK0D,YAAYC,OACjB3D,KAAKmD,KAAKK,QAAQ,GACjB,I,CAOL,cAAAzB,GACE,KAAM/B,KAAK2B,eAAgB,CACzB,GAAI3B,KAAK0B,OAAQ,CACf1B,KAAK4B,SAAW,EAChB,IAAIgC,EAAaC,aAAY,KAC3B,GAAI7D,KAAK4B,UAAY,IAAK,CACxBkC,cAAcF,GACd5D,KAAKE,gB,KACA,CACLF,KAAK4B,U,IAEN5B,KAAK2B,eAAe,I,KAClB,CACL,IAAIiC,EAAaC,aAAY,KAC3BC,cAAcF,GACd5D,KAAKE,gBAAgB,GACpBF,KAAK2B,e","ignoreList":[]}

package/dist/cura/p-c0f445b5.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["curaTooltipCss","CuraTooltipStyle0","BREAKPOINT_SMALL_MAX","CuraTooltip","this","styles","handleClose","closeContainer","onWindowResize","setPosition","targetElement","onWindowScroll","connectedCallback","setStyle","render","h","Host","key","role","id","elementId","class","style","level","size","color","weight","label","marginBlock","lineHeight","closeButton","isMobile","name","onClick","type","componentDidLoad","document","querySelector","interactive","host","visibility","openTimeoutID","closeTimeoutID","_a","addEventListener","clearTimeout","setTimeout","delay","_b","_c","window","getComputedStyle","_d","_e","event","contains","target","Object","assign","maxWidth","CuraAPI","theme","spacing","getSpacing","colors","getColor","getClasses","firstPosition","secondPosition","position","split","classes","element","windowWidth","innerWidth","windowHeight","innerHeight","container","shadowRoot","bottom","flexDirection","left","top","elementRect","offsetTop","offsetLeft","width","offsetWidth","height","offsetHeight","tooltipRect","getBoundingClientRect","SCREEN_LIMIT","SPACE_TO_ELEMENT","ARROW_HORIZONTAL_ADJUSTMENT","ARROW_VERTICAL_ADJUSTMENT","BORDER_COLOR","positions","keys","filter","p","includes","setArrowProperties","arrowTop","arrowLeft","translate","borderColor","setProperty","tooltipClosed","emit"],"sources":["src/components/cura-tooltip/cura-tooltip.scss?tag=cura-tooltip&encapsulation=shadow","src/components/cura-tooltip/cura-tooltip.tsx"],"sourcesContent":["@import '../../../src/scss/mixins/responsive.scss';\n@import '../../../src/scss/mixins/shadows.scss';\n@import '../../../src/scss/mixins/spacing.scss';\n\n:host {\n  position: absolute;\n  z-index: 99999;\n  display: block;\n  width: fit-content;\n  height: fit-content;\n  box-sizing: border-box;\n\n  @include mobile-only() {\n    width: 100%;\n  }\n\n  .container {\n    display: flex;\n    box-sizing: border-box;\n    max-width: var(--max-width);\n    height: auto;\n    padding: calc(#{$base-spacing} * 2px);\n    border: 1px solid var(--neutral-light);\n    border-radius: calc(#{$base-spacing} * 1px);\n    background-color: var(--neutral-purewhite);\n    @include shadow-level3(--neutral-black-shadow);\n\n    @include mobile-only() {\n      max-width: 90%;\n      height: fit-content;\n      padding: calc(#{$base-spacing} * 4px) calc(#{$base-spacing} * 4px) 0 calc(#{$base-spacing} * 4px);\n      margin: 0 auto;\n      border: 2px solid;\n      border-radius: calc(#{$base-spacing} * 3px) calc(#{$base-spacing} * 3px) 0 0;\n      border-color: var(--neutral-light) var(--neutral-light) transparent var(--neutral-light);\n    }\n\n    &::after {\n      content: '';\n      position: absolute;\n      z-index: 99999;\n      width: calc(#{$base-spacing} * 2.5px);\n      height: calc(#{$base-spacing} * 2.5px);\n      border: 1px solid;\n      border-radius: 2px;\n      background-color: var(--neutral-purewhite);\n      \n      left: var(--arrow-left);\n      top: var(--arrow-top);\n      border-color: var(--arrow-border-color);\n      transform: var(--arrow-translate) rotate(45deg);\n\n      @include mobile-only() {\n        display: none;\n      }\n    }\n\n    .content {\n      flex: 1 1 0;\n      display: flex;\n      flex-direction: column;\n      gap: calc(#{$base-spacing} * 1px);\n\n      @include mobile-only() {\n        padding-bottom: calc(#{$base-spacing} * 4px);\n        border-bottom: 1px dashed var(--neutral-light);\n      }\n    }\n\n    .close-icon {\n      margin-left: calc(#{$base-spacing} * 3px);\n      cursor: pointer;\n    }\n\n    .close-button {\n      padding: calc(#{$base-spacing} * 2px) 0;\n    }\n  }\n}","import { Component, Element, EventEmitter, Host, Prop, State, h, Event, Listen } from '@stencil/core';\n\nconst BREAKPOINT_SMALL_MAX = 768;\n\n@Component({\n  tag: 'cura-tooltip',\n  styleUrl: 'cura-tooltip.scss',\n  shadow: true,\n})\nexport class CuraTooltip {\n  @Element() host: HTMLElement;\n\n  @Prop() elementId = '';\n  @Prop() interactive = true;\n  @Prop() delay = 250;\n  @Prop() maxWidth = '280px';\n  @Prop({ reflect: true }) position: 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' = 'top';\n  @Prop({ reflect: true }) label: string;\n  @Prop({ reflect: true }) closeButton = false;\n\n  @State() isMobile = false;\n\n  @Event({ eventName: 'tooltipClosed' }) tooltipClosed: EventEmitter<void>;\n\n  targetElement: HTMLElement;\n\n  styles = {};\n\n  @Listen('resize', { target: 'window' })\n  onWindowResize() {\n    this.setPosition(this.targetElement);\n  }\n\n  @Listen('scroll', { target: 'window' })\n  onWindowScroll() {\n    this.setPosition(this.targetElement);\n  }\n\n  connectedCallback() {\n    this.setStyle();\n  }\n\n  render() {\n    return (\n      <Host role=\"tooltip\" id={this.elementId}>\n        <div class=\"container\" style={this.styles}>\n          <div class=\"content\">\n            <cura-heading level={4} size=\"xsmall\" color=\"neutral-black\" weight=\"bold\" margin-block=\"0\">\n              {this.label}\n            </cura-heading>\n            <cura-paragraph color=\"neutral-dark\" spot-color=\"secondary-darker\" size=\"xsmall\" marginBlock=\"0\" lineHeight=\"133.33%\">\n              <slot></slot>\n            </cura-paragraph>\n          </div>\n        {this.closeButton && !this.isMobile && <cura-icon class=\"close-icon\" name=\"close\" size={16} color=\"error-dark\" onClick={this.handleClose}></cura-icon>}\n        {this.isMobile && <cura-button-transparent class=\"close-button\" size=\"small\" type=\"button\" color=\"error\" icon-name=\"close\" icon-position=\"right\" onClick={this.handleClose}>OK, entendi.</cura-button-transparent>}\n        </div>\n      </Host>\n    );\n  }\n\n  componentDidLoad() {\n    this.targetElement = document.querySelector(`[aria-labelledby=\"${this.elementId}\"]`) as HTMLElement;\n\n    if (!this.interactive) {\n      this.host.style.visibility = 'visible';\n    } else {\n      this.host.style.visibility = 'hidden';\n\n      let openTimeoutID = null;\n      let closeTimeoutID = null;\n\n      this.targetElement?.addEventListener('mouseenter', () => {\n        clearTimeout(closeTimeoutID);\n        openTimeoutID = setTimeout(() => {\n          this.host.style.visibility = 'visible';\n        }, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);\n      });\n  \n      this.targetElement?.addEventListener('mouseleave', () => {\n        clearTimeout(openTimeoutID);\n        closeTimeoutID = setTimeout(() => {\n          this.handleClose();\n        }, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);\n      });\n\n      this.host?.addEventListener('mouseenter', () => {\n        if (window.getComputedStyle(this.host).visibility === 'visible') {\n          clearTimeout(closeTimeoutID);\n        }\n      });\n\n      this.host?.addEventListener('mouseleave', () => {\n        clearTimeout(openTimeoutID);\n        this.handleClose();\n      });\n\n      this.targetElement?.addEventListener('click', () => {\n        if (window.getComputedStyle(this.host).visibility === 'hidden') {\n          openTimeoutID = setTimeout(() => {\n            this.host.style.visibility = 'visible';\n          }, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);\n        } else {\n        clearTimeout(openTimeoutID);\n          this.handleClose();\n        }\n      });\n  \n      document?.addEventListener('click', (event: MouseEvent) => {\n        if(!this.targetElement.contains(event.target as HTMLElement) && !this.host.contains(event.target as HTMLElement)) {\n          clearTimeout(openTimeoutID);\n          this.handleClose();\n        }\n      });\n    }\n\n    setTimeout(() => {\n      this.setPosition(this.targetElement);\n    }, 100);\n  }\n\n  setStyle() {\n    this.styles = {\n      ...this.styles,\n      '--max-width': this.maxWidth,\n      '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(),\n      '--neutral-purewhite': window.CuraAPI.theme.colors.getColor(`neutral-purewhite`),\n      '--neutral-light': window.CuraAPI.theme.colors.getColor(`neutral-light`),\n      '--neutral-black-shadow': window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16),\n    }\n  }\n\n  getClasses() {\n    const [firstPosition, secondPosition] = this.position.split('-');\n    const classes = {};\n\n    classes['container'] = true;\n    if (firstPosition) { classes[firstPosition] = true; }\n    if (secondPosition) { classes[secondPosition] = true; }\n\n    return classes;\n  }\n\n  setPosition(element: HTMLElement) {\n    const windowWidth = window.innerWidth;\n    const windowHeight = window.innerHeight;\n    const container = this.host.shadowRoot.querySelector('.container') as HTMLElement;\n\n    this.isMobile = windowWidth <= BREAKPOINT_SMALL_MAX;\n\n    this.host.style.position = this.isMobile ? 'fixed' : 'absolute';\n    this.host.style.bottom = this.isMobile ? '0' : 'unset';\n    container.style.flexDirection = this.isMobile ? 'column' : 'row';\n\n    if (this.isMobile) {\n      this.host.style.left = '0';\n      this.host.style.top = 'unset';\n      return;\n    }\n\n    const elementRect = { \n      top: element.offsetTop, \n      left: element.offsetLeft, \n      width: element.offsetWidth, \n      height: element.offsetHeight\n    };\n    const tooltipRect = this.host.getBoundingClientRect();\n\n    const SCREEN_LIMIT = 10;\n    const SPACE_TO_ELEMENT = 10;\n    const ARROW_HORIZONTAL_ADJUSTMENT = (elementRect.width * 0.5) + 18;\n    const ARROW_VERTICAL_ADJUSTMENT = (elementRect.height * 0.5) + 18;\n    const BORDER_COLOR = this.styles['--neutral-light'];\n\n    let left = 0;\n    let top = 0;\n\n    const positions = Object.keys(this.getClasses()).filter((p) => ['top', 'left', 'bottom', 'right', 'start', 'end'].includes(p));\n\n    const setArrowProperties = ({ arrowTop = '', arrowLeft = '', translate = '', borderColor = '' }) => {\n      if (arrowLeft) this.host.style.setProperty('--arrow-left', arrowLeft);\n      if (arrowTop) this.host.style.setProperty('--arrow-top', arrowTop);\n      if (translate) this.host.style.setProperty('--arrow-translate', translate);\n      if (borderColor) this.host.style.setProperty('--arrow-border-color', borderColor);\n    };\n\n    //Posicionamento vertical\n    if (positions.includes('top') || positions.includes('bottom')) {\n      setArrowProperties({ arrowLeft: '50%', translate: 'translateX(-50%)' });\n\n      if (positions.includes('top')) {\n        top = elementRect.top - tooltipRect.height - SPACE_TO_ELEMENT;\n        setArrowProperties({ arrowTop: 'calc(100% - 6px)', borderColor: `transparent ${BORDER_COLOR} ${BORDER_COLOR} transparent` });\n\n        if (top < SCREEN_LIMIT) {\n          top = elementRect.top + elementRect.height + SPACE_TO_ELEMENT;\n          setArrowProperties({ arrowTop: '-6px', borderColor: `${BORDER_COLOR} transparent transparent ${BORDER_COLOR}` });\n        }\n      }\n\n      if (positions.includes('bottom')) {\n        top = elementRect.top + elementRect.height + SPACE_TO_ELEMENT;\n        setArrowProperties({ arrowTop: '-6px', borderColor: `${BORDER_COLOR} transparent transparent ${BORDER_COLOR}` });\n\n        if (top + tooltipRect.height > windowHeight - SCREEN_LIMIT) {\n          top = elementRect.top - tooltipRect.height - SPACE_TO_ELEMENT;\n          setArrowProperties({ arrowTop: 'calc(100% - 6px)', borderColor: `transparent ${BORDER_COLOR} ${BORDER_COLOR} transparent` });\n        }\n      }\n\n      left = elementRect.left + (elementRect.width - tooltipRect.width)/2;\n      \n      if (positions.includes('start')) {\n        left = elementRect.left - tooltipRect.width + ARROW_HORIZONTAL_ADJUSTMENT;\n        setArrowProperties({ arrowLeft: 'calc(100% - 18px)' });\n\n        if (left < SCREEN_LIMIT) {\n          left = elementRect.left + elementRect.width - ARROW_HORIZONTAL_ADJUSTMENT;\n          setArrowProperties({ arrowLeft: '18px' });\n        }\n      }\n\n      if (positions.includes('end')) {\n        left = elementRect.left + elementRect.width - ARROW_HORIZONTAL_ADJUSTMENT;\n        setArrowProperties({ arrowLeft: '18px' });\n\n        if (left + tooltipRect.width > windowWidth - SCREEN_LIMIT) {\n          left = elementRect.left - tooltipRect.width + ARROW_HORIZONTAL_ADJUSTMENT;\n          setArrowProperties({ arrowLeft: 'calc(100% - 18px)' });\n        }\n      }\n    }\n\n    //Posicionamento horizontal\n    if (positions.includes('right') || positions.includes('left')) {\n      setArrowProperties({ arrowTop: '50%', translate: 'translateY(-50%)' });\n\n      if (positions.includes('right')) {\n        left = elementRect.left + elementRect.width + SPACE_TO_ELEMENT;\n        setArrowProperties({ arrowLeft: '-6px', borderColor: `transparent transparent ${BORDER_COLOR} ${BORDER_COLOR}` });\n\n        if (left + tooltipRect.width > windowWidth - SCREEN_LIMIT) {\n          left = elementRect.left - tooltipRect.width - SPACE_TO_ELEMENT;\n          setArrowProperties({ arrowLeft: 'calc(100% - 6px)', borderColor: `${BORDER_COLOR} ${BORDER_COLOR} transparent transparent` });\n        }\n      }\n\n      if (positions.includes('left')) {\n        left = elementRect.left - tooltipRect.width - SPACE_TO_ELEMENT;\n        setArrowProperties({ arrowLeft: 'calc(100% - 6px)', borderColor: `${BORDER_COLOR} ${BORDER_COLOR} transparent transparent` });\n        \n        if (left < SCREEN_LIMIT) {\n          left = elementRect.left + elementRect.width + SPACE_TO_ELEMENT;\n          setArrowProperties({ arrowLeft: '-6px', borderColor: `transparent transparent ${BORDER_COLOR} ${BORDER_COLOR}` });\n        }\n      }\n      \n      top = elementRect.top + (elementRect.height - tooltipRect.height)/2;\n\n      if (positions.includes('start')) {\n        top = elementRect.top - tooltipRect.height + ARROW_VERTICAL_ADJUSTMENT;\n        setArrowProperties({ arrowTop: 'calc(100% - 18px)' });\n\n        if (top < SCREEN_LIMIT) {\n          top = elementRect.top + elementRect.height - ARROW_VERTICAL_ADJUSTMENT;\n          setArrowProperties({ arrowTop: '18px' });\n        }\n      }\n\n      if (positions.includes('end')) {\n        top = elementRect.top + elementRect.height - ARROW_VERTICAL_ADJUSTMENT;\n        setArrowProperties({ arrowTop: '18px' });\n\n        if (top + tooltipRect.height > windowHeight - SCREEN_LIMIT) {\n          top = elementRect.top - tooltipRect.height + ARROW_VERTICAL_ADJUSTMENT;\n          setArrowProperties({ arrowTop: 'calc(100% - 18px)' });\n        }\n      }\n    }\n\n    this.host.style.left = `${left}px`;\n    this.host.style.top = `${top}px`;\n  }\n\n  closeContainer() {\n    this.host.style.visibility = 'hidden';\n    this.tooltipClosed.emit();\n  }\n\n  handleClose = () => {\n    this.closeContainer();\n  };\n}\n"],"mappings":"gEAAA,MAAMA,EAAiB,ivDACvB,MAAAC,EAAeD,ECCf,MAAME,EAAuB,I,MAOhBC,EAAW,M,sEAiBtBC,KAAAC,OAAS,GAuQTD,KAAAE,YAAc,KACZF,KAAKG,gBAAgB,E,eAtRH,G,iBACE,K,WACN,I,cACG,Q,cAC0K,M,sCAEtJ,M,cAEnB,K,CASpB,cAAAC,GACEJ,KAAKK,YAAYL,KAAKM,c,CAIxB,cAAAC,GACEP,KAAKK,YAAYL,KAAKM,c,CAGxB,iBAAAE,GACER,KAAKS,U,CAGP,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,UAAUC,GAAIf,KAAKgB,WAC5BL,EAAA,OAAAE,IAAA,2CAAKI,MAAM,YAAYC,MAAOlB,KAAKC,QACjCU,EAAA,OAAAE,IAAA,2CAAKI,MAAM,WACTN,EAAA,gBAAAE,IAAA,2CAAcM,MAAO,EAAGC,KAAK,SAASC,MAAM,gBAAgBC,OAAO,OAAM,eAAc,KACpFtB,KAAKuB,OAERZ,EAAA,kBAAAE,IAAA,2CAAgBQ,MAAM,eAAc,aAAY,mBAAmBD,KAAK,SAASI,YAAY,IAAIC,WAAW,WAC1Gd,EAAA,QAAAE,IAAA,+CAGLb,KAAK0B,cAAgB1B,KAAK2B,UAAYhB,EAAA,aAAAE,IAAA,2CAAWI,MAAM,aAAaW,KAAK,QAAQR,KAAM,GAAIC,MAAM,aAAaQ,QAAS7B,KAAKE,cAC5HF,KAAK2B,UAAYhB,EAAA,2BAAAE,IAAA,2CAAyBI,MAAM,eAAeG,KAAK,QAAQU,KAAK,SAAST,MAAM,QAAO,YAAW,QAAO,gBAAe,QAAQQ,QAAS7B,KAAKE,aAAW,iB,CAMhL,gBAAA6B,G,cACE/B,KAAKM,cAAgB0B,SAASC,cAAc,qBAAqBjC,KAAKgB,eAEtE,IAAKhB,KAAKkC,YAAa,CACrBlC,KAAKmC,KAAKjB,MAAMkB,WAAa,S,KACxB,CACLpC,KAAKmC,KAAKjB,MAAMkB,WAAa,SAE7B,IAAIC,EAAgB,KACpB,IAAIC,EAAiB,MAErBC,EAAAvC,KAAKM,iBAAa,MAAAiC,SAAA,SAAAA,EAAEC,iBAAiB,cAAc,KACjDC,aAAaH,GACbD,EAAgBK,YAAW,KACzB1C,KAAKmC,KAAKjB,MAAMkB,WAAa,SAAS,UAC9BpC,KAAK2C,QAAU,UAAY3C,KAAK2C,MAAQ,IAAM3C,KAAK2C,MAAQ,IAAI,KAG3EC,EAAA5C,KAAKM,iBAAa,MAAAsC,SAAA,SAAAA,EAAEJ,iBAAiB,cAAc,KACjDC,aAAaJ,GACbC,EAAiBI,YAAW,KAC1B1C,KAAKE,aAAa,UACVF,KAAK2C,QAAU,UAAY3C,KAAK2C,MAAQ,IAAM3C,KAAK2C,MAAQ,IAAI,KAG3EE,EAAA7C,KAAKmC,QAAI,MAAAU,SAAA,SAAAA,EAAEL,iBAAiB,cAAc,KACxC,GAAIM,OAAOC,iBAAiB/C,KAAKmC,MAAMC,aAAe,UAAW,CAC/DK,aAAaH,E,MAIjBU,EAAAhD,KAAKmC,QAAI,MAAAa,SAAA,SAAAA,EAAER,iBAAiB,cAAc,KACxCC,aAAaJ,GACbrC,KAAKE,aAAa,KAGpB+C,EAAAjD,KAAKM,iBAAa,MAAA2C,SAAA,SAAAA,EAAET,iBAAiB,SAAS,KAC5C,GAAIM,OAAOC,iBAAiB/C,KAAKmC,MAAMC,aAAe,SAAU,CAC9DC,EAAgBK,YAAW,KACzB1C,KAAKmC,KAAKjB,MAAMkB,WAAa,SAAS,UAC9BpC,KAAK2C,QAAU,UAAY3C,KAAK2C,MAAQ,IAAM3C,KAAK2C,MAAQ,I,KAChE,CACPF,aAAaJ,GACXrC,KAAKE,a,KAIT8B,WAAQ,MAARA,gBAAQ,SAARA,SAAUQ,iBAAiB,SAAUU,IACnC,IAAIlD,KAAKM,cAAc6C,SAASD,EAAME,UAA2BpD,KAAKmC,KAAKgB,SAASD,EAAME,QAAwB,CAChHX,aAAaJ,GACbrC,KAAKE,a,KAKXwC,YAAW,KACT1C,KAAKK,YAAYL,KAAKM,cAAc,GACnC,I,CAGL,QAAAG,GACET,KAAKC,OAAMoD,OAAAC,OAAAD,OAAAC,OAAA,GACNtD,KAAKC,QAAM,CACd,cAAeD,KAAKuD,SACpB,iBAAkBT,OAAOU,QAAQC,MAAMC,QAAQC,aAC/C,sBAAuBb,OAAOU,QAAQC,MAAMG,OAAOC,SAAS,qBAC5D,kBAAmBf,OAAOU,QAAQC,MAAMG,OAAOC,SAAS,iBACxD,yBAA0Bf,OAAOU,QAAQC,MAAMG,OAAOC,SAAS,gBAAiB,M,CAIpF,UAAAC,GACE,MAAOC,EAAeC,GAAkBhE,KAAKiE,SAASC,MAAM,KAC5D,MAAMC,EAAU,GAEhBA,EAAQ,aAAe,KACvB,GAAIJ,EAAe,CAAEI,EAAQJ,GAAiB,I,CAC9C,GAAIC,EAAgB,CAAEG,EAAQH,GAAkB,I,CAEhD,OAAOG,C,CAGT,WAAA9D,CAAY+D,GACV,MAAMC,EAAcvB,OAAOwB,WAC3B,MAAMC,EAAezB,OAAO0B,YAC5B,MAAMC,EAAYzE,KAAKmC,KAAKuC,WAAWzC,cAAc,cAErDjC,KAAK2B,SAAW0C,GAAevE,EAE/BE,KAAKmC,KAAKjB,MAAM+C,SAAWjE,KAAK2B,SAAW,QAAU,WACrD3B,KAAKmC,KAAKjB,MAAMyD,OAAS3E,KAAK2B,SAAW,IAAM,QAC/C8C,EAAUvD,MAAM0D,cAAgB5E,KAAK2B,SAAW,SAAW,MAE3D,GAAI3B,KAAK2B,SAAU,CACjB3B,KAAKmC,KAAKjB,MAAM2D,KAAO,IACvB7E,KAAKmC,KAAKjB,MAAM4D,IAAM,QACtB,M,CAGF,MAAMC,EAAc,CAClBD,IAAKV,EAAQY,UACbH,KAAMT,EAAQa,WACdC,MAAOd,EAAQe,YACfC,OAAQhB,EAAQiB,cAElB,MAAMC,EAActF,KAAKmC,KAAKoD,wBAE9B,MAAMC,EAAe,GACrB,MAAMC,EAAmB,GACzB,MAAMC,EAA+BX,EAAYG,MAAQ,GAAO,GAChE,MAAMS,EAA6BZ,EAAYK,OAAS,GAAO,GAC/D,MAAMQ,EAAe5F,KAAKC,OAAO,mBAEjC,IAAI4E,EAAO,EACX,IAAIC,EAAM,EAEV,MAAMe,EAAYxC,OAAOyC,KAAK9F,KAAK8D,cAAciC,QAAQC,GAAM,CAAC,MAAO,OAAQ,SAAU,QAAS,QAAS,OAAOC,SAASD,KAE3H,MAAME,EAAqB,EAAGC,WAAW,GAAIC,YAAY,GAAIC,YAAY,GAAIC,cAAc,OACzF,GAAIF,EAAWpG,KAAKmC,KAAKjB,MAAMqF,YAAY,eAAgBH,GAC3D,GAAID,EAAUnG,KAAKmC,KAAKjB,MAAMqF,YAAY,cAAeJ,GACzD,GAAIE,EAAWrG,KAAKmC,KAAKjB,MAAMqF,YAAY,oBAAqBF,GAChE,GAAIC,EAAatG,KAAKmC,KAAKjB,MAAMqF,YAAY,uBAAwBD,EAAY,EAInF,GAAIT,EAAUI,SAAS,QAAUJ,EAAUI,SAAS,UAAW,CAC7DC,EAAmB,CAAEE,UAAW,MAAOC,UAAW,qBAElD,GAAIR,EAAUI,SAAS,OAAQ,CAC7BnB,EAAMC,EAAYD,IAAMQ,EAAYF,OAASK,EAC7CS,EAAmB,CAAEC,SAAU,mBAAoBG,YAAa,eAAeV,KAAgBA,kBAE/F,GAAId,EAAMU,EAAc,CACtBV,EAAMC,EAAYD,IAAMC,EAAYK,OAASK,EAC7CS,EAAmB,CAAEC,SAAU,OAAQG,YAAa,GAAGV,6BAAwCA,K,EAInG,GAAIC,EAAUI,SAAS,UAAW,CAChCnB,EAAMC,EAAYD,IAAMC,EAAYK,OAASK,EAC7CS,EAAmB,CAAEC,SAAU,OAAQG,YAAa,GAAGV,6BAAwCA,MAE/F,GAAId,EAAMQ,EAAYF,OAASb,EAAeiB,EAAc,CAC1DV,EAAMC,EAAYD,IAAMQ,EAAYF,OAASK,EAC7CS,EAAmB,CAAEC,SAAU,mBAAoBG,YAAa,eAAeV,KAAgBA,iB,EAInGf,EAAOE,EAAYF,MAAQE,EAAYG,MAAQI,EAAYJ,OAAO,EAElE,GAAIW,EAAUI,SAAS,SAAU,CAC/BpB,EAAOE,EAAYF,KAAOS,EAAYJ,MAAQQ,EAC9CQ,EAAmB,CAAEE,UAAW,sBAEhC,GAAIvB,EAAOW,EAAc,CACvBX,EAAOE,EAAYF,KAAOE,EAAYG,MAAQQ,EAC9CQ,EAAmB,CAAEE,UAAW,Q,EAIpC,GAAIP,EAAUI,SAAS,OAAQ,CAC7BpB,EAAOE,EAAYF,KAAOE,EAAYG,MAAQQ,EAC9CQ,EAAmB,CAAEE,UAAW,SAEhC,GAAIvB,EAAOS,EAAYJ,MAAQb,EAAcmB,EAAc,CACzDX,EAAOE,EAAYF,KAAOS,EAAYJ,MAAQQ,EAC9CQ,EAAmB,CAAEE,UAAW,qB,GAMtC,GAAIP,EAAUI,SAAS,UAAYJ,EAAUI,SAAS,QAAS,CAC7DC,EAAmB,CAAEC,SAAU,MAAOE,UAAW,qBAEjD,GAAIR,EAAUI,SAAS,SAAU,CAC/BpB,EAAOE,EAAYF,KAAOE,EAAYG,MAAQO,EAC9CS,EAAmB,CAAEE,UAAW,OAAQE,YAAa,2BAA2BV,KAAgBA,MAEhG,GAAIf,EAAOS,EAAYJ,MAAQb,EAAcmB,EAAc,CACzDX,EAAOE,EAAYF,KAAOS,EAAYJ,MAAQO,EAC9CS,EAAmB,CAAEE,UAAW,mBAAoBE,YAAa,GAAGV,KAAgBA,6B,EAIxF,GAAIC,EAAUI,SAAS,QAAS,CAC9BpB,EAAOE,EAAYF,KAAOS,EAAYJ,MAAQO,EAC9CS,EAAmB,CAAEE,UAAW,mBAAoBE,YAAa,GAAGV,KAAgBA,8BAEpF,GAAIf,EAAOW,EAAc,CACvBX,EAAOE,EAAYF,KAAOE,EAAYG,MAAQO,EAC9CS,EAAmB,CAAEE,UAAW,OAAQE,YAAa,2BAA2BV,KAAgBA,K,EAIpGd,EAAMC,EAAYD,KAAOC,EAAYK,OAASE,EAAYF,QAAQ,EAElE,GAAIS,EAAUI,SAAS,SAAU,CAC/BnB,EAAMC,EAAYD,IAAMQ,EAAYF,OAASO,EAC7CO,EAAmB,CAAEC,SAAU,sBAE/B,GAAIrB,EAAMU,EAAc,CACtBV,EAAMC,EAAYD,IAAMC,EAAYK,OAASO,EAC7CO,EAAmB,CAAEC,SAAU,Q,EAInC,GAAIN,EAAUI,SAAS,OAAQ,CAC7BnB,EAAMC,EAAYD,IAAMC,EAAYK,OAASO,EAC7CO,EAAmB,CAAEC,SAAU,SAE/B,GAAIrB,EAAMQ,EAAYF,OAASb,EAAeiB,EAAc,CAC1DV,EAAMC,EAAYD,IAAMQ,EAAYF,OAASO,EAC7CO,EAAmB,CAAEC,SAAU,qB,GAKrCnG,KAAKmC,KAAKjB,MAAM2D,KAAO,GAAGA,MAC1B7E,KAAKmC,KAAKjB,MAAM4D,IAAM,GAAGA,K,CAG3B,cAAA3E,GACEH,KAAKmC,KAAKjB,MAAMkB,WAAa,SAC7BpC,KAAKwG,cAAcC,M","ignoreList":[]}