@cas-smartdesign/popover 4.1.1 → 4.2.0

package/dist/popover-with-externals.js

@@ -2,7 +2,7 @@ var window;(window||={})["@cas-smartdesign/popover"]=(()=>{var It=Object.defineP
   <path d="M0 0l11.96 12L24 0z" fill="#999" class="arrow-border"/>\r
   <path d="M12 11L1 0h22z" fill="#f2f2f2" class="arrow-background"/>\r
 </svg>\r
-`,Lr=navigator.userAgent.indexOf("Trident")!==-1,Be=1,Me="sd-popover-open",je=class extends HTMLElement{constructor(){super(...arguments),this._open=!1,this._firstUpdated=!1,this.toggle=()=>{this.open=!this.open},this.show=()=>{this.open=!0},this.hide=()=>{this.open=!1},this.hideIfExternalTarget=t=>{let r=t.target;(!(r instanceof HTMLElement)||!this._container.contains(r)&&!this.targetElement.contains(r))&&this.hide()}}get triggerType(){return this.getAttribute("trigger-type")}set triggerType(t){t?this.setAttribute("trigger-type",t):this.removeAttribute("trigger-type")}get placement(){return this.getAttribute("placement")}set placement(t){t?this.setAttribute("placement",t):this.removeAttribute("placement")}get targetElement(){return this._targetElement}set targetElement(t){this.removeTargetEventListener(this.targetElement),this._targetElement&&this._targetElement.getAttribute("aria-expanded")=="true"&&this._targetElement.setAttribute("aria-expanded","false"),this._targetElement=t,t.setAttribute("aria-expanded","false"),this.addTargetEventListener(this.targetElement),this.updatePopper()}get targetSelector(){return this.getAttribute("target-selector")}set targetSelector(t){t?this.setAttribute("target-selector",t):this.removeAttribute("target-selector")}get modal(){return this.hasAttribute("modal")}set modal(t){t?this.setAttribute("modal",""):this.removeAttribute("modal")}get popoverFor(){return this.getAttribute("popover-for")}set popoverFor(t){t?this.setAttribute("popover-for",t):this.removeAttribute("popover-for")}get flipPriority(){return this._flipPriority}set flipPriority(t){t&&t.length>0?this._flipPriority=t:this._flipPriority=null,this.reConfigurePopper()}get offset(){return this.getAttribute("offset")?parseInt(this.getAttribute("offset")):0}set offset(t){t?this.setAttribute("offset",t.toString()):this.removeAttribute("offset"),this.reConfigurePopper()}reConfigurePopper(){this._popper&&this.configurePopper()}get noArrow(){return this.hasAttribute("no-arrow")}set noArrow(t){t?this.setAttribute("no-arrow",""):this.removeAttribute("no-arrow")}static get observedAttributes(){return["placement","target-selector","trigger-type"]}attributeChangedCallback(t,r){switch(t){case"placement":{this.updatePopper();break}case"trigger-type":{this.removeTargetEventListener(this.targetElement),this.addTargetEventListener(this.targetElement);break}case"target-selector":{this.handleTargetSelectorChange(r);break}}}connectedCallback(){this._firstUpdated||(this.firstUpdated(),this._firstUpdated=!0),this.targetElement?this.addTargetEventListener(this.targetElement):this.targetSelector&&requestAnimationFrame(()=>{this.isConnected&&this.handleTargetSelectorChange(null)}),this._arrow=document.createElement("div"),this._arrow.classList.add("popover-arrow"),this._arrow.setAttribute("data-popper-arrow",""),this._arrow.style.display="flex",this._arrow.innerHTML=Sr}disconnectedCallback(){this.targetElement&&(this.removeTargetEventListener(this.targetElement),this.removeTargetClassForOpen(this.targetElement)),this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null)}firstUpdated(){this.style.display="none",this.triggerType=this.triggerType||"click",this.placement=this.placement||"auto"}get open(){return this._open}set open(t){t!==this._open&&(this._open=t,this.handleOpenChange())}handleOpenChange(){this.open?(this._popper||this.configurePopper(),this._container.innerHTML="",this.popoverFor&&this._container.setAttribute("popover-for",this.popoverFor),this.content&&(this._container.prepend(this.content),Object.assign(this.content.style,{position:"relative",display:"block",zIndex:1}),window.requestAnimationFrame(()=>{let t=getComputedStyle(this.content).backgroundColor;t=="rgba(0, 0, 0, 0)"&&(this.content.style.background=t="#f2f2f2"),this._arrow.querySelector(".arrow-background").style.fill=t})),this.ensureArrowIsAdded(),this.ownerDocument.body.appendChild(this._container),this.updatePopper(),this.setAttribute("open",""),this.modal&&(window.addEventListener("click",this.hideIfExternalTarget,{capture:!0}),window.addEventListener("focus",this.hideIfExternalTarget,{capture:!0})),this.targetElement&&(this.addTargetClassForOpen(this.targetElement),this.targetElement.setAttribute("aria-expanded","true")),this.dispatchEvent(new CustomEvent("open"))):(this.ownerDocument.body.removeChild(this._container),this.removeAttribute("open"),window.removeEventListener("click",this.hideIfExternalTarget,{capture:!0}),window.removeEventListener("focus",this.hideIfExternalTarget,{capture:!0}),this.targetElement&&(this.removeTargetClassForOpen(this.targetElement),this.targetElement.setAttribute("aria-expanded","false")),this.dispatchEvent(new CustomEvent("close")))}handleTargetSelectorChange(t){let r=document.querySelector(t);r&&(this.removeTargetEventListener(r),this.removeTargetClassForOpen(r)),this.targetSelector&&(this.targetElement=document.querySelector(this.targetSelector),this.addTargetEventListener(this.targetElement))}addTargetEventListener(t){if(t)switch(this.triggerType){case"hover":{t.addEventListener("mouseenter",this.show),t.addEventListener("mouseleave",this.hide);break}case"click":{t.addEventListener("click",this.toggle);break}}}removeTargetEventListener(t){if(t)switch(this.triggerType){case"hover":{t.removeEventListener("mouseenter",this.show),t.removeEventListener("mouseleave",this.hide);break}case"click":{t.removeEventListener("click",this.toggle);break}}}configurePopper(){this.createContentContainer(),this.ensureArrowIsAdded();let t=this,r={placement:t.placement,strategy:"absolute",modifiers:[{name:"computeStyles",options:{gpuAcceleration:!Lr}},{name:"flip",options:{fallbackPlacements:t._flipPriority}},{name:"offset",options:{offset:()=>[0,t.noArrow?0+t.offset:this._arrow.clientHeight+t.offset]}},{name:"arrow",options:{padding:6}},{name:"resetArrowStyles",enabled:!0,phase:"beforeWrite",fn({state:o}){Object.assign(t._arrow.style,{top:o.styles.arrow.top||"",left:o.styles.arrow.left||"",bottom:o.styles.arrow.bottom||"",right:o.styles.arrow.right||""})}},{name:"onUpdate",enabled:!0,phase:"afterWrite",fn({state:o}){t.updateArrow(o.placement)}}]};this._popper=oe(this.targetElement,this._container,r)}createContentContainer(){this._container=document.createElement("div"),this._container.classList.add("popover-container"),this._container.tabIndex=0,this._resizeObserver&&this._resizeObserver.disconnect(),this._resizeObserver=new ResizeObserver(()=>{this._popper&&this._popper.update()}),this._resizeObserver.observe(this._container),Object.assign(this._container.style,{boxShadow:`0 4px 5px 0 rgba(0, 0, 0, 0.14),
+`,Lr=navigator.userAgent.indexOf("Trident")!==-1,Be=1,Me="sd-popover-open",je=class extends HTMLElement{constructor(){super(...arguments),this._open=!1,this._firstUpdated=!1,this.toggle=()=>{this.open=!this.open},this.show=()=>{this.open=!0},this.hide=()=>{this.open=!1},this.hideIfExternalTarget=t=>{let r=t.target;(!(r instanceof HTMLElement)||!this._container.contains(r)&&!this.targetElement.contains(r))&&this.hide()}}get triggerType(){return this.getAttribute("trigger-type")}set triggerType(t){t?this.setAttribute("trigger-type",t):this.removeAttribute("trigger-type")}get placement(){return this.getAttribute("placement")}set placement(t){t?this.setAttribute("placement",t):this.removeAttribute("placement")}get targetElement(){return this._targetElement}set targetElement(t){this.removeTargetEventListener(this.targetElement),this._targetElement&&this._targetElement.getAttribute("aria-expanded")=="true"&&this._targetElement.setAttribute("aria-expanded","false"),this._targetElement=t,t&&t.setAttribute("aria-expanded","false"),this.addTargetEventListener(this.targetElement),this.updatePopper()}get targetSelector(){return this.getAttribute("target-selector")}set targetSelector(t){t?this.setAttribute("target-selector",t):this.removeAttribute("target-selector")}get modal(){return this.hasAttribute("modal")}set modal(t){t?this.setAttribute("modal",""):this.removeAttribute("modal")}get popoverFor(){return this.getAttribute("popover-for")}set popoverFor(t){t?this.setAttribute("popover-for",t):this.removeAttribute("popover-for")}get flipPriority(){return this._flipPriority}set flipPriority(t){t&&t.length>0?this._flipPriority=t:this._flipPriority=null,this.reConfigurePopper()}get offset(){return this.getAttribute("offset")?parseInt(this.getAttribute("offset")):0}set offset(t){t?this.setAttribute("offset",t.toString()):this.removeAttribute("offset"),this.reConfigurePopper()}reConfigurePopper(){this._popper&&this.configurePopper()}get noArrow(){return this.hasAttribute("no-arrow")}set noArrow(t){t?this.setAttribute("no-arrow",""):this.removeAttribute("no-arrow")}static get observedAttributes(){return["placement","target-selector","trigger-type"]}attributeChangedCallback(t,r){switch(t){case"placement":{this.updatePopper();break}case"trigger-type":{this.removeTargetEventListener(this.targetElement),this.addTargetEventListener(this.targetElement);break}case"target-selector":{this.handleTargetSelectorChange(r);break}}}connectedCallback(){this._firstUpdated||(this.firstUpdated(),this._firstUpdated=!0),this.targetElement?this.addTargetEventListener(this.targetElement):this.targetSelector&&requestAnimationFrame(()=>{this.isConnected&&this.handleTargetSelectorChange(null)}),this._arrow=document.createElement("div"),this._arrow.classList.add("popover-arrow"),this._arrow.setAttribute("data-popper-arrow",""),this._arrow.style.display="flex",this._arrow.innerHTML=Sr}disconnectedCallback(){this.targetElement&&(this.removeTargetEventListener(this.targetElement),this.removeTargetClassForOpen(this.targetElement)),this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null)}firstUpdated(){this.style.display="none",this.triggerType=this.triggerType||"click",this.placement=this.placement||"auto"}get open(){return this._open}set open(t){t!==this._open&&(this._open=t,this.handleOpenChange())}handleOpenChange(){this.open?(this._popper||this.configurePopper(),this._container.innerHTML="",this.popoverFor&&this._container.setAttribute("popover-for",this.popoverFor),this.content&&(this._container.prepend(this.content),Object.assign(this.content.style,{position:"relative",display:"block",zIndex:1}),window.requestAnimationFrame(()=>{let t=getComputedStyle(this.content).backgroundColor;t=="rgba(0, 0, 0, 0)"&&(this.content.style.background=t="#f2f2f2"),this._arrow.querySelector(".arrow-background").style.fill=t})),this.ensureArrowIsAdded(),this.ownerDocument.body.appendChild(this._container),this.updatePopper(),this.setAttribute("open",""),this.modal&&(window.addEventListener("click",this.hideIfExternalTarget,{capture:!0}),window.addEventListener("focus",this.hideIfExternalTarget,{capture:!0})),this.targetElement&&(this.addTargetClassForOpen(this.targetElement),this.targetElement.setAttribute("aria-expanded","true")),this.dispatchEvent(new CustomEvent("open"))):(this.ownerDocument.body.removeChild(this._container),this.removeAttribute("open"),window.removeEventListener("click",this.hideIfExternalTarget,{capture:!0}),window.removeEventListener("focus",this.hideIfExternalTarget,{capture:!0}),this.targetElement&&(this.removeTargetClassForOpen(this.targetElement),this.targetElement.setAttribute("aria-expanded","false")),this.dispatchEvent(new CustomEvent("close")))}handleTargetSelectorChange(t){let r=document.querySelector(t);r&&(this.removeTargetEventListener(r),this.removeTargetClassForOpen(r)),this.targetSelector&&(this.targetElement=document.querySelector(this.targetSelector),this.addTargetEventListener(this.targetElement))}addTargetEventListener(t){if(t)switch(this.triggerType){case"hover":{t.addEventListener("mouseenter",this.show),t.addEventListener("mouseleave",this.hide);break}case"click":{t.addEventListener("click",this.toggle);break}}}removeTargetEventListener(t){if(t)switch(this.triggerType){case"hover":{t.removeEventListener("mouseenter",this.show),t.removeEventListener("mouseleave",this.hide);break}case"click":{t.removeEventListener("click",this.toggle);break}}}configurePopper(){this.createContentContainer(),this.ensureArrowIsAdded();let t=this,r={placement:t.placement,strategy:"absolute",modifiers:[{name:"computeStyles",options:{gpuAcceleration:!Lr}},{name:"flip",options:{fallbackPlacements:t._flipPriority}},{name:"offset",options:{offset:()=>[0,t.noArrow?0+t.offset:this._arrow.clientHeight+t.offset]}},{name:"arrow",options:{padding:6}},{name:"resetArrowStyles",enabled:!0,phase:"beforeWrite",fn({state:o}){Object.assign(t._arrow.style,{top:o.styles.arrow.top||"",left:o.styles.arrow.left||"",bottom:o.styles.arrow.bottom||"",right:o.styles.arrow.right||""})}},{name:"onUpdate",enabled:!0,phase:"afterWrite",fn({state:o}){t.updateArrow(o.placement)}}]};this._popper=oe(this.targetElement,this._container,r)}createContentContainer(){this._container=document.createElement("div"),this._container.classList.add("popover-container"),this._container.tabIndex=0,this._resizeObserver&&this._resizeObserver.disconnect(),this._resizeObserver=new ResizeObserver(()=>{this._popper&&this._popper.update()}),this._resizeObserver.observe(this._container),Object.assign(this._container.style,{boxShadow:`0 4px 5px 0 rgba(0, 0, 0, 0.14),
                         0 1px 10px 0 rgba(0, 0, 0, 0.12),
                         0 2px 4px -1px rgba(0, 0, 0, 0.4)`,border:"1px solid #999",boxSizing:"border-box",zIndex:2e4})}ensureArrowIsAdded(){!this.noArrow&&!this._container.contains(this._arrow)&&this._container.appendChild(this._arrow)}updatePopper(){this._popper&&(this._popper.state.elements.reference=this.targetElement,this._popper.state.options.placement=this.placement,this.open&&this._popper.update())}updateArrow(t){if(this._arrow){let r=this.getArrowVariant(t);if(this._arrow.setAttribute("variant",r),this._content){let o=this._arrow.querySelector("svg"),i=this._arrow.clientWidth,a=this._arrow.clientHeight,f=`-${a-Be}px`,s=(i-a)/2,n=`-${a+s-Be}px`;switch(r){case"bottom":{this._arrow.style.top=f,o.style.transform="rotate(180deg)";break}case"top":{this._arrow.style.bottom=f,o.style.transform="rotate(0deg)";break}case"left":{this._arrow.style.right=n,o.style.transform="rotate(270deg)";break}case"right":{this._arrow.style.left=n,o.style.transform="rotate(90deg)";break}}}}}getArrowVariant(t){if(t.indexOf("bottom")!==-1)return"bottom";if(t.indexOf("top")!==-1)return"top";if(t.indexOf("left")!==-1)return"left";if(t.indexOf("right")!==-1)return"right"}get content(){return this._content||(this._content=this.firstElementChild,this._content.setAttribute("data-popper-content","")),this._content}addTargetClassForOpen(t){t&&t.classList.add(Me)}removeTargetClassForOpen(t){t&&t.classList.remove(Me)}};je.ID="sd-popover";var Ht=je;customElements.get(Ht.ID)||customElements.define(Ht.ID,Ht);return Ye(_r);})();
 //# sourceMappingURL=popover-with-externals.js.map