finpro/dist/chunk-RVJNJSPB.js

Design System

import{a as m}from"./chunk-4NDHC34I.js";import{b,d as g,f as k,g as w,h as x}from"./chunk-MZYIQ6EQ.js";import{a as s}from"./chunk-ZO5WDGDN.js";import{a as p}from"./chunk-23UFIOHV.js";import{a as y}from"./chunk-2M6HTKCC.js";import{a as u}from"./chunk-JA3VZI2D.js";import{a,b as d,g as c,h as r,i as v,j as n}from"./chunk-GBPY57YZ.js";import{a as e}from"./chunk-NZ3RGSR6.js";var O=a`:host{position:relative;display:inline-block}.popover{--left:0;--top:0;--border-color:var(--fp-color-primary);position:fixed;z-index:1;display:none;flex-direction:column;align-items:flex-start;padding:var(--fp-size-m);gap:var(--fp-size-xs);overflow-y:auto;background:var(--fp-color-primary-background);border:1px solid var(--border-color);box-shadow:0 10px 15px -8px #27314226;border-radius:var(--fp-size-3xs);left:var(--left);top:var(--top);box-sizing:border-box}:host([kind='neutral']) .popover{--border-color:var(--fp-color-secondary)}:host([kind='success']) .popover{--border-color:var(--fp-color-success)}:host([kind='danger']) .popover{--border-color:var(--fp-color-danger)}.visible{display:flex}`,_=O;var f="fp-dropdown",t=class extends u{constructor(){super(...arguments);this._cleanUpPopover=null;this._isPopoverOpen=!1;this.label="Dropdown Button";this.variant="primary";this.kind="default";this.size="medium";this.disabled=!1;this._handleClickOutside=o=>{let l=o.composedPath();!l.includes(this._popover)&&!l.includes(this._dropdownButton)&&this.close()};this.focusedOptionIndex=-1}static get styles(){return[_]}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this._cleanUpPopover&&this._cleanUpPopover(),this.removeEventListener("keydown",this.handleKeyDown)}get opened(){return this._isPopoverOpen}_handleClick(){!this._isPopoverOpen&&!this.disabled?this.open():this.close()}_setupPopover(){this._cleanUpPopover=w(this._dropdownButton,this._popover,()=>{x(this._dropdownButton,this._popover,{placement:"bottom-start",strategy:"fixed",middleware:[b(),g(8),k({apply(o){Object.assign(o.elements.floating.style,{minWidth:`${o.elements.reference.getBoundingClientRect().width}px`})}})]}).then(({x:o,y:l})=>{this._popover.style.setProperty("--left",`${o}px`),this._popover.style.setProperty("--top",`${l}px`)})})}handleKeyDown(o){if(["ArrowDown","ArrowRight"].includes(o.key))this.focusedOptionIndex++;else if(["ArrowUp","ArrowLeft"].includes(o.key))this.focusedOptionIndex--;else if(o.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(),o.preventDefault()}get options(){return[].slice.call(this.querySelectorAll(h))}open(){this._isPopoverOpen=!0,this._setupPopover(),this.onOpen("Dropdown opened!"),document.addEventListener("click",this._handleClickOutside)}close(){this._isPopoverOpen=!1,this.onClose("Dropdown closed!"),this._cleanUpPopover&&this._cleanUpPopover(),document.removeEventListener("click",this._handleClickOutside)}render(){let o=y({popover:!0,visible:this.opened});return d`<fp-button
        dropdown
        .active=${this.opened}
        ?disabled=${s(this.disabled)}
        variant="${this.variant}"
        kind="${this.kind}"
        size="${this.size}"
        aria-label="${s(this.label)}"
        @fp-click="${this._handleClick}"
      >
        ${this.label}
      </fp-button>
      <div class="${o}" role="menu" aria-expanded="${this.opened}"><slot></slot></div> `}};e([n("fp-button")],t.prototype,"_dropdownButton",2),e([n(".popover")],t.prototype,"_popover",2),e([v()],t.prototype,"_isPopoverOpen",2),e([r({type:String,reflect:!0})],t.prototype,"label",2),e([r({type:String,reflect:!0})],t.prototype,"variant",2),e([r({type:String,reflect:!0})],t.prototype,"kind",2),e([r({type:String,reflect:!0})],t.prototype,"size",2),e([r({type:Boolean,reflect:!0})],t.prototype,"disabled",2),e([p("fp-dropdown-open")],t.prototype,"onOpen",2),e([p("fp-dropdown-close")],t.prototype,"onClose",2),t=e([c(f)],t);var P=a`:host{width:100%;--fp-button-display:block;--fp-button-justify:start}`,C=P;var h="fp-dropdown-item",i=class extends u{static get styles(){return[C]}_handleClick(){this.onClick("Action clicked!")}focus(){this.menuElement.focus()}connectedCallback(){super.connectedCallback(),this.FpDropdownGroupField=this.closest(m),this.FpDropdownField=this.closest(f),!this.FpDropdownField&&!this.FpDropdownGroupField&&console.warn(`fp-dropdown-item is designed to be used inside a ${m} or ${f}`,this)}disconnectedCallback(){super.disconnectedCallback()}render(){return d`<fp-button
      variant="tertiary"
      kind="neutral"
      icon="${s(this.icon)}"
      role="menuitem"
      @click="${this._handleClick}"
      ><slot></slot>
    </fp-button>`}};e([r({type:String})],i.prototype,"icon",2),e([p("fp-dropdown-item-click")],i.prototype,"onClick",2),e([n("[role=menuitem]")],i.prototype,"menuElement",2),i=e([c(h)],i);export{h as a,i as b,f as c,t as d};
//# sourceMappingURL=chunk-RVJNJSPB.js.map