import{LitElement as t,html as e,css as o}from"lit";import{createRef as n,ref as i}from"lit/directives/ref.js";import{EventHandler as s}from"./lib/events.js";import"./cc-button.js";import{CcToggleEvent as c}from"./components/common.events.js";class r extends t{static get properties(){return{a11yName:{type:String,attribute:"a11y-name"},disabled:{type:Boolean,reflect:!0},hideText:{type:Boolean,attribute:"hide-text"},icon:{type:Object},isOpen:{type:Boolean,attribute:"is-open",reflect:!0},position:{type:String}}}constructor(){super(),this.a11yName=null,this.disabled=!1,this.hideText=!1,this.icon=null,this.isOpen=!1,this.position="bottom-left",this._contentRef=n(),this._buttonRef=n(),this._onOutsideClickHandler=new s(window,"click",(t=>{const e=this._contentRef.value;null==e||t.composedPath().includes(e)||this.close()})),this._onEscapeKeyHandler=new s(this,"keydown",(t=>{"Escape"===t.key&&this.close()}));let t=null;this._onCcPopoverOpenHandler=new s(window,"cc-toggle",(e=>{const{isOpen:o}=e.detail;if(o){const o=e.composedPath()[0];o!==this&&o instanceof r?t=o:(t?.close(!1),t=null)}}))}open(){this.isOpen||(this.isOpen=!0,this.dispatchEvent(new c({isOpen:!0})))}close(t=!0){this.isOpen&&(this.isOpen=!1,t&&this.focus(),this.dispatchEvent(new c({isOpen:!1})))}toggle(){this.isOpen?this.close():this.open()}focus(){this._buttonRef.value?.focus()}updated(t){t.has("isOpen")&&(this.isOpen?(this._onOutsideClickHandler.connect(),this._onEscapeKeyHandler.connect()):(this._onOutsideClickHandler.disconnect(),this._onEscapeKeyHandler.disconnect()))}connectedCallback(){super.connectedCallback(),this._onCcPopoverOpenHandler.connect()}disconnectedCallback(){super.disconnectedCallback(),this._onOutsideClickHandler.disconnect(),this._onEscapeKeyHandler.disconnect(),this._onCcPopoverOpenHandler.disconnect()}render(){return e`
      <div class="wrapper">
        <cc-button
          ${i(this._buttonRef)}
          class="trigger-button"
          .a11yExpanded=${this.isOpen}
          .a11yName=${this.a11yName}
          ?hide-text=${this.hideText}
          ?disabled=${this.disabled}
          .icon=${this.icon}
          @cc-click=${this.toggle}
        >
          <slot name="button-content"></slot>
        </cc-button>

        ${this.isOpen&&!this.disabled?e`
              <div class="content ${this.position.replace("-"," ")}" ${i(this._contentRef)}>
                <slot></slot>
              </div>
            `:null}
      </div>
    `}static get styles(){return[o`
        :host {
          display: block;

          --cc-popover-gap: 0.4em;
        }

        .wrapper {
          position: relative;
        }

        .trigger-button {
          --cc-button-font-weight: var(--cc-popover-trigger-button-font-weight);
          --cc-button-text-transform: var(--cc-popover-trigger-button-text-transform);

          width: var(--cc-popover-trigger-button-width, inherit);
        }

        .content {
          background-color: var(--cc-color-bg-default, #fff);
          border: 1px solid var(--cc-color-border-neutral, #aaa);
          border-radius: var(--cc-border-radius-default, 0.25em);
          box-shadow:
            0 2px 4px rgb(38 38 38 / 25%),
            0 5px 15px rgb(38 38 38 / 25%);
          overflow: clip;
          overflow-clip-margin: 3px;
          padding: var(--cc-popover-padding, 0.5em);
          position: absolute;
          z-index: var(--cc-popover-z-index, 999);
        }

        .content.bottom {
          top: calc(100% + var(--cc-popover-gap));
        }

        .content.top {
          bottom: calc(100% + var(--cc-popover-gap));
        }

        .content.right {
          right: 0;
        }

        .content.left {
          left: 0;
        }
      `]}}window.customElements.define("cc-popover",r);export{r as CcPopover};
//# sourceMappingURL=cc-popover.js.map
