@salla.sa/twilight-components 2.14.244 → 2.14.246

package/dist/twilight/{p-DsPsvNzB.system.js.map → p-C3hekSf2.system.js.map}

@@ -1 +1 @@
-{"version":3,"file":"p-DsPsvNzB.system.js","sources":["src/components/salla-price-range/salla-price-range.scss?tag=salla-price-range","src/components/salla-price-range/salla-price-range.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n\n.rtl, [dir=\"rtl\"] {\n  .rtl-range-slider {\n      transform: rotateY(180deg);\n  }\n\n  .rtl-range-numbers{\n      flex-direction: row-reverse;\n  }\n\n  .form-select, select{\n      background-position: left 0.5rem center;\n      padding-right: 12px;\n  }   \n\n  // divide\n.menu-divide {\n  li {\n      &:not(:last-child) {\n          &:after {\n              left: 0;\n              right: auto;\n          }\n      }\n  }\n}\n}\n\ninput[type=range]::-webkit-slider-thumb {\n  pointer-events: all;\n  width: 24px;\n  height: 24px;\n  -webkit-appearance: none;\n}\n\n[type='checkbox']:checked{\n  background-size: 80%;\n}","import { Component, Host, h, State, Prop, Event, Method } from '@stencil/core';\nimport { Filter, FilterValue } from \"../salla-filters/interfaces\";\nimport arrowLeft from '../../assets/svg/arrow-left.svg'\nimport arrowRight from '../../assets/svg/arrow-right.svg'\n\n\n@Component({\n  tag: 'salla-price-range',\n  styleUrl: 'salla-price-range.scss',\n})\nexport class SallaPriceRange {\n  /**\n   * Minimum price threshold value\n   */\n  @Prop({ mutable: true }) minPrice;\n\n  /**\n   * Maximum price threshold value\n   */\n  @Prop({ mutable: true }) maxPrice;\n\n  /**\n   * Product price range filter option object instance\n   */\n  @Prop({ reflect: true }) option: Filter;\n\n  /**\n   * Currently selected price filter data\n   */\n  @Prop({ reflect: true }) filtersData: any;\n\n\n  @State() min = 0;\n  @State() max = 10000;\n  @State() priceOptions: any;\n  @State() moreThanLabel: string = \"أكثر من\";\n  @State() lessThanLabel: string = \"أقل من\";\n  @State() toLabel: string = \"الى\";\n  @State() fromLabel: string = \"من\";\n  @State() typing: boolean = false;\n  @State() isMin: boolean = false;\n  @State() isRTL: Boolean = salla.config.get('theme.is_rtl', true);\n\n\n  /**\n   * Custome event emitted when there is a change in price input.\n   */\n  @Event() changed: any;\n\n  isReady: Boolean;\n  minInput: HTMLInputElement;\n  maxInput: HTMLInputElement;\n  filterValues: Array<FilterValue> = [];\n\n\n  connectedCallback() {\n    if (this.filtersData && this.filtersData?.price) {\n      this.minPrice = this.filtersData.price.min;\n      this.maxPrice = this.filtersData.price.max;\n    }\n    salla.lang.onLoaded(() => {\n      this.moreThanLabel = salla.lang.getWithDefault('common.elements.more_than', this.moreThanLabel)\n      this.lessThanLabel = salla.lang.getWithDefault('common.elements.less_than', this.lessThanLabel)\n      this.toLabel = salla.lang.getWithDefault('common.elements.to', this.toLabel)\n      this.fromLabel = salla.lang.getWithDefault('common.elements.from', this.fromLabel)\n    })\n\n    //no need to show one option only\n    if (this.option.values.length == 1) {\n      return;\n    }\n    //here we may receive too many prices, we will group all inputs to\n    if (this.option.values.length <= 5) {\n      this.filterValues = this.option.values;\n      return;\n    }\n    const chunkSize = Math.ceil(this.option.values.length / 5);\n    for (let i = 0; i < this.option.values.length; i += chunkSize) {\n      this.filterValues.push(\n        this.option.values\n          .slice(i, i + chunkSize)\n          .reduce((final: FilterValue, currentValue: FilterValue) => {\n            final.to = currentValue.to;\n            final.count += currentValue.count;\n            return final;\n          })\n      );\n      // do whatever\n    }\n  }\n\n  /**\n   * reset the price range inputs\n   */\n  @Method()\n  async reset() {\n    //@ts-ignore\n    this.minInput.value = null;\n    this.maxInput.value = null;\n    this.minPrice=null\n    this.maxPrice=null\n  }\n\n  private getPriceLabel(filterValue: FilterValue) {\n    // @ts-ignore\n    if (isNaN(filterValue.from) || filterValue.from < 1) {\n      return `${this.lessThanLabel} ${salla.money(filterValue.to)}`;\n    }\n    // @ts-ignore\n    if (isNaN(filterValue.to) || filterValue.to < 1) {\n      return `${this.moreThanLabel} ${salla.money(filterValue.from)}`;\n    }\n\n    return `${salla.money(filterValue.from)} ${this.toLabel} ${salla.money(filterValue.to)}`;\n  }\n\n  minInputValidation(value: number) {\n    if (value && (value > this.max || (this.maxPrice && value > this.maxPrice))) {\n      // this.minPrice = this.maxPrice;\n      return;\n    }\n\n    if (value < this.min) {\n      this.minPrice = this.min;\n      return;\n    }\n\n    if (value) {\n      this.minPrice = value;\n    }\n  }\n\n  maxInputValidation(value) {\n    if (value && (value < this.min || (this.minPrice && value < this.minPrice))) {\n      // this.maxPrice = this.minPrice;\n      return;\n    }\n    if (value > this.max) {\n      this.maxPrice = this.max;\n      return;\n    }\n  }\n\n  private async changedEventHandler(event) {\n    salla.helpers.inputDigitsOnly(this.minInput)\n    salla.helpers.inputDigitsOnly(this.maxInput)\n\n    const minInputValue = this.minPrice ? +this.minPrice * 1 : null\n    const maxInputValue = this.maxPrice ? +this.maxPrice * 1 : null\n      \n    if (!this.maxPrice) {\n      this.maxPrice = '';\n    }\n    if (this.isMin) {\n      this.minInputValidation(minInputValue);\n    } else {\n      if (!this.minPrice) {\n        this.minPrice = 0;\n      }\n      this.maxInputValidation(maxInputValue)\n    }\n\n    this.isReady && this.changed.emit({\n      event: event,\n      option: this.option,\n      value: { max: this.maxPrice, min: this.minPrice }\n    })\n  }\n  private handleMinMaxPrice(event: Event, value: FilterValue): void {\n    //todo:: cover when from is star\n    this.minPrice = value.from;\n    this.maxPrice = value.to !== '*' ? value.to : \"\";\n\n    this.changedEventHandler(event);\n  }\n\n\n\n  private isChecked(filterValue: FilterValue) {\n    if (!this.minPrice && !this.maxPrice) {\n      return false;\n    }\n\n    //1 filterValue.from zero or * and this.minPrice not set or zero\n    //2 filterValue.from == this.minPrice\n    //@ts-ignore\n    let isMinEqual = ((filterValue.from < 1 || filterValue.from == '*') && this.minPrice == 0) || filterValue.from == this.minPrice;\n\n    //1 filterValue.to == \"*\" or null\n    //2 filterValue.to == this.max\n    let isMaxEqual = filterValue.to == '*' || !filterValue.to || filterValue.to == this.maxPrice;\n    return isMinEqual && isMaxEqual;\n  }\n\n  private handleMinPrice(event: Event) {\n    this.isMin = true\n    const value = (event.target as HTMLInputElement).value\n    this.minPrice = value ==='' ? 0 : value\n  }\n  private handleMaxPrice(event: Event) {\n    this.isMin = false\n    const value = (event.target as HTMLInputElement).value\n    this.maxPrice = value === undefined ? '' : value\n  }\n\n\n  render() {\n    return (\n      <Host>\n        {\n          this.filterValues.map((filterValue, index) => {\n\n            return <label class=\"s-filters-label\" htmlFor={`${this.option.key}-${index}`} key={index}>\n              <input\n                id={`${this.option.key}-${index}`}\n                name=\"price\"\n                type=\"radio\"\n                checked={this.isChecked(filterValue)}\n                class=\"s-filters-radio\"\n                onChange={e => this.handleMinMaxPrice(e, filterValue)}\n              />\n              <span innerHTML={this.getPriceLabel(filterValue)}></span>\n            </label>\n          })\n        }\n\n\n        <div class=\"flex justify-center items-center\">\n          <div class=\"relative max-w-xl w-full\">\n            <div class=\"s-price-range-inputs\">\n              <div class=\"s-price-range-relative\">\n                <div class=\"s-price-range-currency\"> {salla.config.currency().symbol}</div>\n                <input\n                  type=\"number\"\n                  maxlength=\"5\"\n                  ref={el => this.minInput = el}\n                  onBlur={(e) => this.handleMinPrice(e)}\n                  value={this.minPrice}\n                  placeholder={this.fromLabel}\n                  class=\"s-price-range-number-input\"\n\n                />\n              </div>\n\n              <div class=\"s-price-range-gray-text\"> -</div>\n              <div class=\"s-price-range-relative\">\n                <div class=\"s-price-range-currency\"> {salla.config.currency().symbol}</div>\n                <input\n                  type=\"number\"\n                  maxlength=\"5\"\n                  ref={el => this.maxInput = el}\n                  onBlur={(e) => this.handleMaxPrice(e)}\n                  value={this.maxPrice}\n                  placeholder={this.toLabel}\n                  class=\"s-price-range-number-input\" aria-describedby=\"price-currency\" />\n              </div>\n              <salla-button color='gray' shape='icon' size='small' fill='outline' onClick={(event) => this.changedEventHandler(event)}>\n                <span innerHTML={this.isRTL ? arrowLeft : arrowRight} />\n              </salla-button>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n  componentDidLoad() {\n    this.isReady = true;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"p-C3hekSf2.system.js","sources":["src/components/salla-price-range/salla-price-range.scss?tag=salla-price-range","src/components/salla-price-range/salla-price-range.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n\n.rtl, [dir=\"rtl\"] {\n  .rtl-range-slider {\n      transform: rotateY(180deg);\n  }\n\n  .rtl-range-numbers{\n      flex-direction: row-reverse;\n  }\n\n  .form-select, select{\n      background-position: left 0.5rem center;\n      padding-right: 12px;\n  }   \n\n  // divide\n.menu-divide {\n  li {\n      &:not(:last-child) {\n          &:after {\n              left: 0;\n              right: auto;\n          }\n      }\n  }\n}\n}\n\ninput[type=range]::-webkit-slider-thumb {\n  pointer-events: all;\n  width: 24px;\n  height: 24px;\n  -webkit-appearance: none;\n}\n\n[type='checkbox']:checked{\n  background-size: 80%;\n}","import { Component, Host, h, State, Prop, Event, Method } from '@stencil/core';\nimport { Filter, FilterValue } from \"../salla-filters/interfaces\";\nimport arrowLeft from '../../assets/svg/arrow-left.svg'\nimport arrowRight from '../../assets/svg/arrow-right.svg'\n\n\n@Component({\n  tag: 'salla-price-range',\n  styleUrl: 'salla-price-range.scss',\n})\nexport class SallaPriceRange {\n  /**\n   * Minimum price threshold value\n   */\n  @Prop({ mutable: true }) minPrice;\n\n  /**\n   * Maximum price threshold value\n   */\n  @Prop({ mutable: true }) maxPrice;\n\n  /**\n   * Product price range filter option object instance\n   */\n  @Prop({ reflect: true }) option: Filter;\n\n  /**\n   * Currently selected price filter data\n   */\n  @Prop({ reflect: true }) filtersData: any;\n\n\n  @State() min = 0;\n  @State() max = 10000;\n  @State() priceOptions: any;\n  @State() moreThanLabel: string = \"أكثر من\";\n  @State() lessThanLabel: string = \"أقل من\";\n  @State() toLabel: string = \"الى\";\n  @State() fromLabel: string = \"من\";\n  @State() typing: boolean = false;\n  @State() isMin: boolean = false;\n  @State() isRTL: Boolean = salla.config.get('theme.is_rtl', true);\n\n\n  /**\n   * Custome event emitted when there is a change in price input.\n   */\n  @Event() changed: any;\n\n  isReady: Boolean;\n  minInput: HTMLInputElement;\n  maxInput: HTMLInputElement;\n  filterValues: Array<FilterValue> = [];\n\n\n  connectedCallback() {\n    if (this.filtersData && this.filtersData?.price) {\n      this.minPrice = this.filtersData.price.min;\n      this.maxPrice = this.filtersData.price.max;\n    }\n    salla.lang.onLoaded(() => {\n      this.moreThanLabel = salla.lang.getWithDefault('common.elements.more_than', this.moreThanLabel)\n      this.lessThanLabel = salla.lang.getWithDefault('common.elements.less_than', this.lessThanLabel)\n      this.toLabel = salla.lang.getWithDefault('common.elements.to', this.toLabel)\n      this.fromLabel = salla.lang.getWithDefault('common.elements.from', this.fromLabel)\n    })\n\n    //no need to show one option only\n    if (this.option.values.length == 1) {\n      return;\n    }\n    //here we may receive too many prices, we will group all inputs to\n    if (this.option.values.length <= 5) {\n      this.filterValues = this.option.values;\n      return;\n    }\n    const chunkSize = Math.ceil(this.option.values.length / 5);\n    for (let i = 0; i < this.option.values.length; i += chunkSize) {\n      this.filterValues.push(\n        this.option.values\n          .slice(i, i + chunkSize)\n          .reduce((final: FilterValue, currentValue: FilterValue) => {\n            final.to = currentValue.to;\n            final.count += currentValue.count;\n            return final;\n          })\n      );\n      // do whatever\n    }\n  }\n\n  /**\n   * reset the price range inputs\n   */\n  @Method()\n  async reset() {\n    //@ts-ignore\n    this.minInput.value = null;\n    this.maxInput.value = null;\n    this.minPrice=null\n    this.maxPrice=null\n  }\n\n  private getPriceLabel(filterValue: FilterValue) {\n    // @ts-ignore\n    if (isNaN(filterValue.from) || filterValue.from < 1) {\n      return `${this.lessThanLabel} ${salla.money(filterValue.to)}`;\n    }\n    // @ts-ignore\n    if (isNaN(filterValue.to) || filterValue.to < 1) {\n      return `${this.moreThanLabel} ${salla.money(filterValue.from)}`;\n    }\n\n    return `${salla.money(filterValue.from)} ${this.toLabel} ${salla.money(filterValue.to)}`;\n  }\n\n  minInputValidation(value: number) {\n    if (value && (value > this.max || (this.maxPrice && value > this.maxPrice))) {\n      // this.minPrice = this.maxPrice;\n      return;\n    }\n\n    if (value < this.min) {\n      this.minPrice = this.min;\n      return;\n    }\n\n    if (value) {\n      this.minPrice = value;\n    }\n  }\n\n  maxInputValidation(value) {\n    if (value && (value < this.min || (this.minPrice && value < this.minPrice))) {\n      // this.maxPrice = this.minPrice;\n      return;\n    }\n    if (value > this.max) {\n      this.maxPrice = this.max;\n      return;\n    }\n  }\n\n  private async changedEventHandler(event) {\n    salla.helpers.inputDigitsOnly(this.minInput)\n    salla.helpers.inputDigitsOnly(this.maxInput)\n\n    const minInputValue = this.minPrice ? +this.minPrice * 1 : null\n    const maxInputValue = this.maxPrice ? +this.maxPrice * 1 : null\n      \n    if (!this.maxPrice) {\n      this.maxPrice = '';\n    }\n    if (this.isMin) {\n      this.minInputValidation(minInputValue);\n    } else {\n      if (!this.minPrice) {\n        this.minPrice = 0;\n      }\n      this.maxInputValidation(maxInputValue)\n    }\n\n    this.isReady && this.changed.emit({\n      event: event,\n      option: this.option,\n      value: { max: this.maxPrice, min: this.minPrice }\n    })\n  }\n  private handleMinMaxPrice(event: Event, value: FilterValue): void {\n    //todo:: cover when from is star\n    this.minPrice = value.from;\n    this.maxPrice = value.to !== '*' ? value.to : \"\";\n\n    this.changedEventHandler(event);\n  }\n\n\n\n  private isChecked(filterValue: FilterValue) {\n    if (!this.minPrice && !this.maxPrice) {\n      return false;\n    }\n\n    //1 filterValue.from zero or * and this.minPrice not set or zero\n    //2 filterValue.from == this.minPrice\n    //@ts-ignore\n    let isMinEqual = ((filterValue.from < 1 || filterValue.from == '*') && this.minPrice == 0) || filterValue.from == this.minPrice;\n\n    //1 filterValue.to == \"*\" or null\n    //2 filterValue.to == this.max\n    let isMaxEqual = filterValue.to == '*' || !filterValue.to || filterValue.to == this.maxPrice;\n    return isMinEqual && isMaxEqual;\n  }\n\n  private handleMinPrice(event: Event) {\n    this.isMin = true\n    const value = (event.target as HTMLInputElement).value\n    this.minPrice = value ==='' ? 0 : value\n  }\n  private handleMaxPrice(event: Event) {\n    this.isMin = false\n    const value = (event.target as HTMLInputElement).value\n    this.maxPrice = value === undefined ? '' : value\n  }\n\n\n  render() {\n    return (\n      <Host>\n        {\n          this.filterValues.map((filterValue, index) => {\n\n            return <label class=\"s-filters-label\" htmlFor={`${this.option.key}-${index}`} key={index}>\n              <input\n                id={`${this.option.key}-${index}`}\n                name=\"price\"\n                type=\"radio\"\n                checked={this.isChecked(filterValue)}\n                class=\"s-filters-radio\"\n                onChange={e => this.handleMinMaxPrice(e, filterValue)}\n              />\n              <span innerHTML={this.getPriceLabel(filterValue)}></span>\n            </label>\n          })\n        }\n\n\n        <div class=\"flex justify-center items-center\">\n          <div class=\"relative max-w-xl w-full\">\n            <div class=\"s-price-range-inputs\">\n              <div class=\"s-price-range-relative\">\n                <div class=\"s-price-range-currency\"> {salla.config.currency().symbol}</div>\n                <input\n                  type=\"number\"\n                  maxlength=\"5\"\n                  ref={el => this.minInput = el}\n                  onBlur={(e) => this.handleMinPrice(e)}\n                  value={this.minPrice}\n                  placeholder={this.fromLabel}\n                  class=\"s-price-range-number-input\"\n\n                />\n              </div>\n\n              <div class=\"s-price-range-gray-text\"> -</div>\n              <div class=\"s-price-range-relative\">\n                <div class=\"s-price-range-currency\"> {salla.config.currency().symbol}</div>\n                <input\n                  type=\"number\"\n                  maxlength=\"5\"\n                  ref={el => this.maxInput = el}\n                  onBlur={(e) => this.handleMaxPrice(e)}\n                  value={this.maxPrice}\n                  placeholder={this.toLabel}\n                  class=\"s-price-range-number-input\" aria-describedby=\"price-currency\" />\n              </div>\n              <salla-button color='gray' shape='icon' size='small' fill='outline' onClick={(event) => this.changedEventHandler(event)}>\n                <span innerHTML={this.isRTL ? arrowLeft : arrowRight} />\n              </salla-button>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n  componentDidLoad() {\n    this.isReady = true;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/twilight/{p-CO7ZfKkK.system.js.map → p-C7A6mH1h.system.js.map}

@@ -1 +1 @@
-{"version":3,"file":"p-CO7ZfKkK.system.js","sources":["src/components/salla-tooltip/salla-tooltip.scss?tag=salla-tooltip","src/components/salla-tooltip/salla-tooltip.tsx"],"sourcesContent":[".s-tooltip {\n  &-container {\n    position: relative;\n    display: inline-block;\n  }\n\n  &-item {\n    position: absolute;\n    transform: translateX(-39%);\n    background-color: #baf3e6;\n    color: #004d5a;\n    bottom: 100%;\n    left: 50%;\n    text-align: center;\n    border-radius: 5px;\n    z-index: 1;\n    white-space: nowrap;\n    opacity: 0;\n    transition: opacity 0.3s;\n    pointer-events: none;\n    margin: 0 0 16px 8px;\n    padding: 12px;\n    max-width: 150px;\n    width: 190px;\n    white-space: normal;\n    opacity: 1;\n\n    &::after {\n      content: '';\n      position: absolute;\n      bottom: -10px; // Position the arrow just below the tooltip\n      left: 50%;\n      margin-left: -5px; // Center the arrow\n      border-width: 5px;\n      border-style: solid;\n      border-color: #baf3e6 transparent transparent transparent; // Arrow color and shape\n    }\n    &:dir(ltr) {\n      transform: translateX(-72%);\n    }\n  }\n}\n","import { Component, Prop, h, State, Element, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'salla-tooltip',\n  styleUrl: 'salla-tooltip.scss',\n  shadow: false,\n})\nexport class SallaTooltip {\n  /**\n   * The text content to display in the tooltip\n   */\n  @Prop() text: string;\n  /**\n   * The ID of the target element to which the tooltip is attached\n   */\n  @Prop() targetId: string;\n  @State() show: boolean = false;\n  @Element() el: HTMLElement;\n\n  private targetElement: HTMLElement | null = null;\n\n  @Listen('mouseover', { target: 'window' })\n  handleMouseOver(event: MouseEvent) {\n    if (this.targetElement && this.targetElement.contains(event.target as Node)) {\n      this.show = true;\n    }\n  }\n\n  @Listen('mouseout', { target: 'window' })\n  handleMouseOut(event: MouseEvent) {\n    if (this.targetElement && this.targetElement.contains(event.target as Node)) {\n      this.show = false;\n    }\n  }\n\n  componentDidLoad() {\n    // Find the target element based on the targetSelector prop\n    this.targetElement = document.getElementById(this.targetId);\n  }\n\n  render() {\n    return (\n      <div class=\"s-tooltip-container\">\n        <slot></slot>\n        {this.show && <div class=\"s-tooltip-item\">{this.text}</div>}\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;MAAA,MAAM,eAAe,GAAG,4tBAA4tB;;YCOvuB,YAAY,4BAAA,MAAA;MALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;MAcW,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;MAGtB,QAAA,IAAa,CAAA,aAAA,GAAuB,IAAI;MA6BjD;MA1BC,IAAA,eAAe,CAAC,KAAiB,EAAA;MAC/B,QAAA,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;MAC3E,YAAA,IAAI,CAAC,IAAI,GAAG,IAAI;;;MAKpB,IAAA,cAAc,CAAC,KAAiB,EAAA;MAC9B,QAAA,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;MAC3E,YAAA,IAAI,CAAC,IAAI,GAAG,KAAK;;;UAIrB,gBAAgB,GAAA;;cAEd,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC;;UAG7D,MAAM,GAAA;cACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,qBAAqB,EAAA,EAC9B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACZ,IAAI,CAAC,IAAI,IAAI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAE,EAAA,IAAI,CAAC,IAAI,CAAO,CACvD;;;;;;;;;;;;"}
+{"version":3,"file":"p-C7A6mH1h.system.js","sources":["src/components/salla-tooltip/salla-tooltip.scss?tag=salla-tooltip","src/components/salla-tooltip/salla-tooltip.tsx"],"sourcesContent":[".s-tooltip {\n  &-container {\n    position: relative;\n    display: inline-block;\n  }\n\n  &-item {\n    position: absolute;\n    transform: translateX(-39%);\n    background-color: #baf3e6;\n    color: #004d5a;\n    bottom: 100%;\n    left: 50%;\n    text-align: center;\n    border-radius: 5px;\n    z-index: 1;\n    white-space: nowrap;\n    opacity: 0;\n    transition: opacity 0.3s;\n    pointer-events: none;\n    margin: 0 0 16px 8px;\n    padding: 12px;\n    max-width: 150px;\n    width: 190px;\n    white-space: normal;\n    opacity: 1;\n\n    &::after {\n      content: '';\n      position: absolute;\n      bottom: -10px; // Position the arrow just below the tooltip\n      left: 50%;\n      margin-left: -5px; // Center the arrow\n      border-width: 5px;\n      border-style: solid;\n      border-color: #baf3e6 transparent transparent transparent; // Arrow color and shape\n    }\n    &:dir(ltr) {\n      transform: translateX(-72%);\n    }\n  }\n}\n","import { Component, Prop, h, State, Element, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'salla-tooltip',\n  styleUrl: 'salla-tooltip.scss',\n  shadow: false,\n})\nexport class SallaTooltip {\n  /**\n   * The text content to display in the tooltip\n   */\n  @Prop() text: string;\n  /**\n   * The ID of the target element to which the tooltip is attached\n   */\n  @Prop() targetId: string;\n  @State() show: boolean = false;\n  @Element() el: HTMLElement;\n\n  private targetElement: HTMLElement | null = null;\n\n  @Listen('mouseover', { target: 'window' })\n  handleMouseOver(event: MouseEvent) {\n    if (this.targetElement && this.targetElement.contains(event.target as Node)) {\n      this.show = true;\n    }\n  }\n\n  @Listen('mouseout', { target: 'window' })\n  handleMouseOut(event: MouseEvent) {\n    if (this.targetElement && this.targetElement.contains(event.target as Node)) {\n      this.show = false;\n    }\n  }\n\n  componentDidLoad() {\n    // Find the target element based on the targetSelector prop\n    this.targetElement = document.getElementById(this.targetId);\n  }\n\n  render() {\n    return (\n      <div class=\"s-tooltip-container\">\n        <slot></slot>\n        {this.show && <div class=\"s-tooltip-item\">{this.text}</div>}\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;MAAA,MAAM,eAAe,GAAG,4tBAA4tB;;YCOvuB,YAAY,4BAAA,MAAA;MALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;MAcW,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;MAGtB,QAAA,IAAa,CAAA,aAAA,GAAuB,IAAI;MA6BjD;MA1BC,IAAA,eAAe,CAAC,KAAiB,EAAA;MAC/B,QAAA,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;MAC3E,YAAA,IAAI,CAAC,IAAI,GAAG,IAAI;;;MAKpB,IAAA,cAAc,CAAC,KAAiB,EAAA;MAC9B,QAAA,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;MAC3E,YAAA,IAAI,CAAC,IAAI,GAAG,KAAK;;;UAIrB,gBAAgB,GAAA;;cAEd,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC;;UAG7D,MAAM,GAAA;cACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,qBAAqB,EAAA,EAC9B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACZ,IAAI,CAAC,IAAI,IAAI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAE,EAAA,IAAI,CAAC,IAAI,CAAO,CACvD;;;;;;;;;;;;"}