@trendyol/baklava/dist/chunk-5PMB453Q.js

Trendyol Baklava Design System

import{a as w,b as g,c as f,d as E,e as y,f as x,g as _,h as k}from"./chunk-EZSEQHRH.js";import{a as u}from"./chunk-6LT7O7T2.js";import{a as n}from"./chunk-GRL4DWKG.js";import{a as b,b as i,c as a,d as s}from"./chunk-IRDH7CN2.js";import{a as h,b as c,f as m}from"./chunk-4OT5AMS5.js";import{c as r}from"./chunk-VO7C5OZC.js";var M=h`:host{display:contents}.popover{--arrow-display:var(--bl-popover-arrow-display, none);--background-color:var(--bl-popover-background-color, var(--bl-color-neutral-full));--border-color:var(--bl-popover-border-color, var(--bl-color-primary-highlight));--border-size:var(--bl-popover-border-size, 1px);--padding:var(--bl-popover-padding, var(--bl-size-m));--border-radius:var(--bl-popover-border-radius, var(--bl-size-3xs));--position:var(--bl-popover-position, fixed);--max-width:var(--bl-popover-max-width, 100vw);--max-viewport:calc(100vw - var(--bl-size-s));position:var(--position);box-sizing:border-box;border:var(--border-size) solid var(--border-color);padding:var(--padding);border-radius:var(--border-radius);z-index:var(--bl-index-popover);max-width:min(var(--max-viewport), var(--max-width));width:max-content;hyphens:auto;background-color:var(--background-color);font:var(--bl-font-title-3-regular);color:var(--bl-color-neutral-darker)}.popover:not(.visible){visibility:hidden}.arrow{--arrow-rotation:45deg;--size:var(--bl-size-2xs);--arrow-position:calc((var(--size) / -2) - var(--border-size));box-sizing:border-box;display:var(--arrow-display);position:absolute;background-color:var(--background-color);width:var(--size);height:var(--size);transform:rotate(var(--arrow-rotation));border:var(--border-size) solid var(--border-color);border-bottom:none;border-right:none}.popover[data-placement*="bottom"] .arrow{top:var(--arrow-position)}.popover[data-placement*="top"] .arrow{--arrow-rotation:225deg;bottom:var(--arrow-position)}.popover[data-placement*="left"] .arrow{--arrow-rotation:135deg;right:var(--arrow-position)}.popover[data-placement*="right"] .arrow{--arrow-rotation:315deg;left:var(--arrow-position)}`,z=M;var t=class extends m{constructor(){super(...arguments);this.placement="bottom";this.fitSize=!1;this.offset=8;this._visible=!1;this._handleClickOutside=e=>{let o=e.composedPath();!o.includes(this._target)&&!o.includes(this)&&this.hide()}}static get styles(){return[z]}connectedCallback(){super.connectedCallback(),this._handlePopoverShowEvent=this._handlePopoverShowEvent.bind(this),this._handleKeydownEvent=this._handleKeydownEvent.bind(this),this._handleClickOutside=this._handleClickOutside.bind(this)}disconnectedCallback(){super.disconnectedCallback(),this.popoverAutoUpdateCleanup&&this.popoverAutoUpdateCleanup()}getMiddleware(){let e=[];return e.push(E(this.offset),f(),g(),y({padding:4})),this.fitSize&&e.push(x({apply(o){o.elements.floating&&o.elements.reference&&Object.assign(o.elements.floating.style,{"min-width":`${o.elements.reference.getBoundingClientRect().width}px`})}})),e.push(w({element:this.arrow,padding:5})),e}setPopover(){this.target&&(this.popoverAutoUpdateCleanup=_(this.target,this.popover,()=>{k(this.target,this.popover,{placement:this.placement,strategy:"fixed",middleware:this.getMiddleware()}).then(({x:e,y:o,placement:l,middlewareData:p})=>{if(Object.assign(this.popover.style,{left:`${e}px`,top:`${o}px`}),this.popover.dataset.placement=l,p.arrow){let{x:d,y:v}=p.arrow;Object.assign(this.arrow.style,{left:d!=null?`${d}px`:"",top:v!=null?`${v}px`:""})}})}))}get target(){return this._target}set target(e){typeof e=="string"?this._target=document.getElementById(e):e instanceof Element?this._target=e:console.warn("BlPopover target only accepts an Element instance or a string id of a DOM element.")}show(){this._visible=!0,this.setPopover(),this.onBlPopoverShow(""),document.addEventListener("click",this._handleClickOutside),document.addEventListener("keydown",this._handleKeydownEvent),document.addEventListener("bl-popover-show",this._handlePopoverShowEvent)}hide(){this._visible=!1,document.removeEventListener("click",this._handleClickOutside),document.removeEventListener("keydown",this._handleKeydownEvent),document.removeEventListener("bl-popover-show",this._handlePopoverShowEvent),this.onBlPopoverHide("")}get visible(){return this._visible}_handlePopoverShowEvent(e){if(e.target!==this){let{parentElement:o}=e.target;this.contains(o)||this.hide()}}_handleKeydownEvent(e){e.key==="Escape"&&this.visible&&(e.preventDefault(),this.hide())}render(){let e=u({popover:!0,visible:this._visible});return c`<div class=${e}>
      <slot id="popover" aria-live=${this._visible?"polite":"off"}></slot>
      <div class="arrow" aria-hidden="true"></div>
    </div>`}};r([s(".popover")],t.prototype,"popover",2),r([s(".arrow")],t.prototype,"arrow",2),r([i({type:String})],t.prototype,"placement",2),r([a()],t.prototype,"_target",2),r([i({type:Boolean,attribute:"fit-size"})],t.prototype,"fitSize",2),r([i({type:Number})],t.prototype,"offset",2),r([a()],t.prototype,"_visible",2),r([n("bl-popover-show")],t.prototype,"onBlPopoverShow",2),r([n("bl-popover-hide")],t.prototype,"onBlPopoverHide",2),r([i()],t.prototype,"target",1),t=r([b("bl-popover")],t);export{t as a};
//# sourceMappingURL=chunk-5PMB453Q.js.map