{"file":"patternlib-flyoutmenu-item.entry.js","mappings":";;AAAA,MAAM,2BAA2B,GAAG,2rLAA2rL;;MCSltL,wBAAwB;;;;;;iBAuBV,MAAM;;gBAUP,EAAE;kBAK6B,OAAO;oBAKrB,UAAU;gBAKb,SAAS;;EAE/C,iBAAiB;IACf,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,oBAAoB,CAAC,KAAK,IAAI,CAAC;GAClF;EAED,MAAM;IACJ,MAAM,mBAAmB,GAAe;MACtC,iBAAiB,EAAE,IAAI;MACvB,UAAU,EAAE,IAAI,CAAC,QAAQ;MACzB,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;KACjC,CAAC;IAEF,MAAM,wBAAwB,GAAe;MAC3C,QAAQ,EAAE,IAAI,CAAC,QAAQ,KAAK,UAAU;KACvC,CAAC;IAEF,MAAM,SAAS,GAAG,EAAE,aAAa,EAAE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EAAE,CAAC;IACxE,MAAM,mBAAmB,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC;IAEvD,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,SAAS,IACpB,WAAK,KAAK,EAAC,iBAAiB,IAC1B,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,EAAE,GAAG,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,SAAS,EAAE,MAAM,EAAE,GAAG,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE,IACnF,cAAQ,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,mBAAmB,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IACxG,WAAK,KAAK,EAAC,mBAAmB,IAC3B,IAAI,CAAC,WAAW,KACf,WAAK,KAAK,EAAC,wBAAwB,IACjC,YAAM,IAAI,EAAC,WAAW,GAAG,CACrB,CACP,EACD,YAAM,KAAK,EAAE,wBAAwB,IAAG,IAAI,CAAC,KAAK,CAAQ,EACzD,IAAI,CAAC,MAAM,IAAI,YAAM,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,MAAM,CAAQ,CACrE,CACC,CACP,CACA,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/patternlib-flyoutmenu-item/patternlib-flyoutmenu-item.scss?tag=patternlib-flyoutmenu-item&encapsulation=shadow","./src/components/patternlib-flyoutmenu-item/patternlib-flyoutmenu-item.tsx"],"sourcesContent":[":host {\n  @apply block overflow-hidden;\n}\n\n.flyoutmenu-item {\n  @apply select-none rounded-none border-none font-button text-copy-small text-left bg-white text-black cursor-pointer;\n  line-height: 20px;\n  padding: 8px 24px;\n  margin: 0;\n\n  .ellipsis {\n    @apply truncate;\n  }\n\n  &:focus {\n    outline: 0;\n  }\n\n  &:hover {\n    @apply bg-gray-100;\n  }\n\n  &:disabled {\n    @apply text-gray-400;\n  }\n\n  &.subtle {\n    @apply font-text;\n  }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nimport { ClassNames } from '../../utils/interfaces';\n\n@Component({\n  tag: 'patternlib-flyoutmenu-item',\n  styleUrl: 'patternlib-flyoutmenu-item.scss',\n  shadow: true,\n})\nexport class PatternlibFlyoutmenuItem {\n  private hasIconSlot: boolean;\n\n  @Element() hostElement: HTMLPatternlibFlyoutmenuItemElement;\n\n  /**\n   * Set the Flyoutmenu item label\n   */\n  @Prop() label?: string;\n\n  /**\n   * Set the Flyoutmenu item detail label\n   */\n  @Prop() detail?: string;\n\n  /**\n   * Set the Flyoutmenu item id\n   */\n  @Prop() itemId?: number | string;\n\n  /**\n   * Define the Flyoutmenu item width\n   */\n  @Prop() width?: string = '100%';\n\n  /**\n   * Disable the Flyoutmenu item\n   */\n  @Prop({ reflect: true }) disabled: boolean;\n\n  /**\n   * Set a hyperlink\n   */\n  @Prop() href?: string = '';\n\n  /**\n   * Define the target of the hyperlink\n   */\n  @Prop() target?: 'blank' | 'parent' | 'self' | 'top' = 'blank';\n\n  /**\n   * Control the text-overflow behavior of the item\n   */\n  @Prop() overflow: 'ellipsis' | 'unset' = 'ellipsis';\n\n  /**\n   * Define the text style\n   */\n  @Prop() type?: 'default' | 'subtle' = 'default';\n\n  componentWillLoad() {\n    this.hasIconSlot = this.hostElement.querySelector('[slot=\"icon-left\"]') !== null;\n  }\n\n  render() {\n    const flyoutmenuItemClass: ClassNames = {\n      'flyoutmenu-item': true,\n      'disabled': this.disabled,\n      'subtle': this.type === 'subtle',\n    };\n\n    const textOverflowControlClass: ClassNames = {\n      ellipsis: this.overflow === 'ellipsis',\n    };\n\n    const hostStyle = { pointerEvents: this.disabled ? 'none' : undefined };\n    const flyoutmenuItemStyle = { width: `${this.width}` };\n\n    return (\n      <Host style={hostStyle}>\n        <div class=\"overflow-hidden\">\n          <a href={this.href != '' ? `${this.href}` : undefined} target={`_` + `${this.target}`}>\n            <button class={flyoutmenuItemClass} style={flyoutmenuItemStyle} disabled={this.disabled} title={this.label}>\n              <div class=\"flex items-center\">\n                {this.hasIconSlot && (\n                  <div class=\"flex mr-[8px] h-[24px]\">\n                    <slot name=\"icon-left\" />\n                  </div>\n                )}\n                <span class={textOverflowControlClass}>{this.label}</span>\n                {this.detail && <span class=\"ml-[4px] text-gray-400\">{this.detail}</span>}\n              </div>\n            </button>\n          </a>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}