@trendyol/baklava/dist/chunk-4HHOA5GY.js

Trendyol Baklava Design System

import{a as m}from"./chunk-5HXMVHTD.js";import{a as s}from"./chunk-GRL4DWKG.js";import{a as c,b as o,c as b,d as l}from"./chunk-IRDH7CN2.js";import{a as n}from"./chunk-DINNT5P2.js";import{a as p,b as a,f as d}from"./chunk-4OT5AMS5.js";import{c as e}from"./chunk-VO7C5OZC.js";var g=p`:host{position:relative;display:inline-block}:host([kind="neutral"]) bl-popover{--bl-popover-border-color:var(--bl-color-neutral-darker)}:host([kind="success"]) bl-popover{--bl-popover-border-color:var(--bl-color-success)}:host([kind="danger"]) bl-popover{--bl-popover-border-color:var(--bl-color-danger)}`,f=g;var u="bl-dropdown",t=class extends d{constructor(){super(...arguments);this._isPopoverOpen=!1;this.label="Dropdown Button";this.variant="primary";this.kind="default";this.size="medium";this.disabled=!1;this.focusedOptionIndex=-1}static get styles(){return[f]}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.handleKeyDown)}firstUpdated(){this._popover.target=this._button}get opened(){return this._isPopoverOpen}_handleClick(){!this._isPopoverOpen&&!this.disabled?this.open():this.close()}handleKeyDown(i){if(["ArrowDown","ArrowRight"].includes(i.key))this.focusedOptionIndex++;else if(["ArrowUp","ArrowLeft"].includes(i.key))this.focusedOptionIndex--;else if(i.key==="Escape"){this.focusedOptionIndex=-1,this.close();return}else return;this.focusedOptionIndex=Math.max(0,Math.min(this.focusedOptionIndex,this.options.length-1)),this.options[this.focusedOptionIndex].focus(),i.preventDefault()}get options(){return[...this.querySelectorAll(h)]}open(){this._isPopoverOpen=!0,this._popover.show(),this.onOpen("Dropdown opened!")}close(){this._isPopoverOpen=!1,this._popover.visible&&this._popover.hide(),this.onClose("Dropdown closed!")}render(){return a`<bl-button
        dropdown
        .active=${this.opened}
        ?disabled=${n(this.disabled)}
        variant="${this.variant}"
        kind="${this.kind}"
        size="${this.size}"
        aria-label="${n(this.label)}"
        @bl-click="${this._handleClick}"
      >
        ${this.label}
      </bl-button>
      <bl-popover fit-size placement="bottom-start" @bl-popover-hide="${this.close}">
        <slot></slot>
      </bl-popover> `}};e([l("bl-popover")],t.prototype,"_popover",2),e([l("bl-button")],t.prototype,"_button",2),e([b()],t.prototype,"_isPopoverOpen",2),e([o({type:String,reflect:!0})],t.prototype,"label",2),e([o({type:String,reflect:!0})],t.prototype,"variant",2),e([o({type:String,reflect:!0})],t.prototype,"kind",2),e([o({type:String,reflect:!0})],t.prototype,"size",2),e([o({type:Boolean,reflect:!0})],t.prototype,"disabled",2),e([s("bl-dropdown-open")],t.prototype,"onOpen",2),e([s("bl-dropdown-close")],t.prototype,"onClose",2),t=e([c(u)],t);var w=p`:host{width:100%;--bl-button-display:block;--bl-button-justify:start}`,v=w;var h="bl-dropdown-item",r=class extends d{static get styles(){return[v]}_handleClick(){var i;(i=this.BlDropdownField)==null||i.close(),this.onClick("Action clicked!")}focus(){this.menuElement.focus()}connectedCallback(){super.connectedCallback(),this.BlDropdownGroupField=this.closest(m),this.BlDropdownField=this.closest(u),!this.BlDropdownField&&!this.BlDropdownGroupField&&console.warn(`bl-dropdown-item is designed to be used inside a ${m} or ${u}`,this)}disconnectedCallback(){super.disconnectedCallback()}render(){return a`<bl-button
      variant="tertiary"
      kind="neutral"
      icon="${n(this.icon)}"
      role="menuitem"
      @click="${this._handleClick}"
      ><slot></slot>
    </bl-button>`}};e([o({type:String})],r.prototype,"icon",2),e([s("bl-dropdown-item-click")],r.prototype,"onClick",2),e([l("[role=menuitem]")],r.prototype,"menuElement",2),r=e([c(h)],r);export{h as a,r as b,u as c,t as d};
//# sourceMappingURL=chunk-4HHOA5GY.js.map