jb-popover 0.0.7 → 1.1.0

package/README.md

@@ -39,6 +39,9 @@ document.querySelector('jb-popover').overflowHandler = "SLIDE";
 // popover would check overflow status with window by default if you set overflowDom to any other DOM Element it will check overflow by it for example if ypu use it in a modal you can set it to modal dom. set this property is optional
 document.querySelector('jb-popover').overflowDom= document.querySelector('jb-modal');
 ```
+## prevent close on mobile by back button
+
+in some cases you want to prevent popover from closing in mobile. for doing so, just add id attribute to the popover element
 
 ## set custom style
 

package/dist/common/scripts/device-detection.d.ts

@@ -1 +1 @@
-export declare const isMobile: () => boolean;
+export declare const isMobile: () => boolean;

package/dist/common/scripts/persian-helper.d.ts

@@ -1,3 +1,3 @@
-declare function faToEnDigits(input: string | number): string;
-declare function enToFaDigits(input: string | number): string;
-export { enToFaDigits, faToEnDigits };
+declare function faToEnDigits(input: string | number): string;
+declare function enToFaDigits(input: string | number): string;
+export { enToFaDigits, faToEnDigits };

package/dist/jb-popover.cjs.js

@@ -1,2 +1,2 @@
-"use strict";function e(e,t,n,o){if("a"===n&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?o:"a"===n?o.call(e):o?o.value:t.get(e)}function t(e,t,n,o,r){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!r)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!r:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?r.call(e,n):r?r.value=n:t.set(e,n),n}"function"==typeof SuppressedError&&SuppressedError;var n,o,r,s,i,a,p,c,d,l;class h extends HTMLElement{get JBID(){return e(this,r,"f")}get isOpen(){return e(this,o,"f")}constructor(){super(),n.add(this),o.set(this,!1),r.set(this,Symbol()),s.set(this,!1),p.set(this,(t=>{this.isOpen&&/Mobi/i.test(window.navigator.userAgent)&&(t.preventDefault(),this.close(),e(this,n,"m",a).call(this,"HISTORY_BACK_EVENT"))})),this.overflowHandler="NONE",this.overflowDom=null,c.set(this,(()=>{"SLIDE"==this.overflowHandler&&(this.elements.contentWrapper.style.transform="translateY(0px)")})),d.set(this,(()=>{if("SLIDE"==this.overflowHandler){const t=this.elements.contentWrapper.getBoundingClientRect(),o=e(this,n,"m",l).call(this)-t.bottom;o<0&&(this.elements.contentWrapper.style.transform=`translateY(${o}px)`)}})),this.initWebComponent()}connectedCallback(){this.callOnLoadEvent(),this.initProp(),this.callOnInitEvent()}disconnectedCallback(){window.removeEventListener("popstate",e(this,p,"f"))}callOnLoadEvent(){const e=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(e)}callOnInitEvent(){const e=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(e)}initWebComponent(){const e=this.attachShadow({mode:"open"}),t=document.createElement("template");t.innerHTML='<style>.jb-popover-web-component {\n  position: absolute;\n  display: none;\n  inset-block-start: 64px;\n  inset-inline-start: 0;\n  z-index: var(--jb-popover-z-index, 10);\n  will-change: transform;\n  transition: transform 0.3s 0s ease;\n}\n@media (min-width: 320px) and (max-width: 479px) {\n  .jb-popover-web-component {\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    bottom: 0;\n    position: fixed;\n    width: 100vw;\n    height: 100vh;\n    background-color: rgba(0, 0, 0, 0.5);\n    backdrop-filter: blur(5px);\n    display: none;\n    grid-template-rows: 1fr auto;\n    grid-template-columns: 1fr;\n    grid-template-areas: "." "content-wrapper";\n    overflow-x: hidden;\n  }\n}\n.jb-popover-web-component.--opened {\n  display: grid;\n}\n.jb-popover-web-component .popover-content-wrapper {\n  background-color: var(--jb-popover-bg-color, #fff);\n  border-radius: var(--jb-popover-border-radius, 24px);\n  padding: 16px;\n  box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25), -8px -8px 12px 0 rgba(255, 255, 255, 0.3);\n  display: grid;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  will-change: transform;\n  transition: transform 0.3s 0s ease;\n}\n@media (min-width: 320px) and (max-width: 479px) {\n  .jb-popover-web-component .popover-content-wrapper {\n    border-radius: var(--jb-popover-border-radius, 24px) var(--jb-popover-border-radius, 24px) 0 0;\n    grid-area: content-wrapper;\n    padding: 0;\n    padding: 32px 0;\n  }\n}</style>\n<div class="jb-popover-web-component">\r\n  <div class="popover-background"></div>\r\n  <div class="popover-content-wrapper">\r\n      <slot></slot>\r\n  </div>\r\n</div>',e.appendChild(t.content.cloneNode(!0)),this.elements={componentWrapper:e.querySelector(".jb-popover-web-component"),background:e.querySelector(".popover-background"),contentWrapper:e.querySelector(".popover-content-wrapper")}}initProp(){e(this,n,"m",i).call(this)}checkInitialOpenness(){window.location.hash==`#${this.id}`&&(this.triggerUrlOpenEvent(),this.open())}triggerUrlOpenEvent(){const e=new CustomEvent("urlOpen",{bubbles:!0,composed:!0});this.dispatchEvent(e)}static get observedAttributes(){return["is-open","id"]}attributeChangedCallback(e,t,n){this.onAttributeChange(e,n)}onAttributeChange(t,n){switch(t){case"is-open":"true"==n?e(this,o,"f")||this.open():e(this,o,"f")&&this.close();break;case"id":this.id=n}}onBackgroundClick(){e(this,n,"m",a).call(this,"BACKGROUND_CLICK"),e(this,s,"f")&&this.close()}close(){t(this,o,!1,"f"),this.elements.componentWrapper.classList.remove("--opened"),this.elements.componentWrapper.classList.add("--closed")}open(){t(this,o,!0,"f"),this.elements.componentWrapper.classList.remove("--closed"),this.elements.componentWrapper.classList.add("--opened")}}o=new WeakMap,r=new WeakMap,s=new WeakMap,p=new WeakMap,c=new WeakMap,d=new WeakMap,n=new WeakSet,i=function(){this.elements.background.addEventListener("click",this.onBackgroundClick.bind(this)),window.addEventListener("popstate",e(this,p,"f")),this.elements.contentWrapper.addEventListener("mouseenter",e(this,d,"f")),this.elements.contentWrapper.addEventListener("mouseleave",e(this,c,"f"))},a=function(e){const t=new CustomEvent("close",{detail:{eventType:e}});this.dispatchEvent(t)},l=function(){return this.overflowDom?this.overflowDom.getBoundingClientRect().bottom:window.innerHeight};!customElements.get("jb-popover")&&window.customElements.define("jb-popover",h),exports.JBPopoverWebComponent=h;
+"use strict";function e(e,t,n,o){if("a"===n&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?o:"a"===n?o.call(e):o?o.value:t.get(e)}function t(e,t,n,o,r){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!r)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!r:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?r.call(e,n):r?r.value=n:t.set(e,n),n}"function"==typeof SuppressedError&&SuppressedError;const n=()=>/Mobi/i.test(window.navigator.userAgent);var o,r,s,i,a,p,c,d,l,h;class m extends HTMLElement{get JBID(){return e(this,s,"f")}get isOpen(){return e(this,r,"f")}get PopoverHashPath(){return this.id?`#${this.id}`:null}constructor(){super(),o.add(this),r.set(this,!1),s.set(this,Symbol()),i.set(this,!0),c.set(this,(t=>{this.isOpen&&n()&&(this.close(),e(this,o,"m",p).call(this,"HISTORY_BACK_EVENT"))})),this.overflowHandler="NONE",this.overflowDom=null,d.set(this,(()=>{"SLIDE"==this.overflowHandler&&(this.elements.contentWrapper.style.transform="translateY(0px)")})),l.set(this,(()=>{if("SLIDE"==this.overflowHandler){const t=this.elements.contentWrapper.getBoundingClientRect(),n=e(this,o,"m",h).call(this)-t.bottom;n<0&&(this.elements.contentWrapper.style.transform=`translateY(${n}px)`)}})),this.initWebComponent()}connectedCallback(){this.callOnLoadEvent(),e(this,o,"m",a).call(this),this.callOnInitEvent()}disconnectedCallback(){window.removeEventListener("popstate",e(this,c,"f"))}callOnLoadEvent(){const e=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(e)}callOnInitEvent(){const e=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(e)}initWebComponent(){const e=this.attachShadow({mode:"open"}),t=document.createElement("template");t.innerHTML='<style>.jb-popover-web-component {\n  position: absolute;\n  display: none;\n  inset-block-start: 64px;\n  inset-inline-start: 0;\n  z-index: var(--jb-popover-z-index, 10);\n  will-change: transform;\n  transition: transform 0.3s 0s ease;\n}\n@media (min-width: 320px) and (max-width: 479px) {\n  .jb-popover-web-component {\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    bottom: 0;\n    position: fixed;\n    width: 100vw;\n    height: 100vh;\n    background-color: rgba(0, 0, 0, 0.5);\n    backdrop-filter: blur(5px);\n    display: none;\n    grid-template-rows: 1fr auto;\n    grid-template-columns: 1fr;\n    grid-template-areas: "." "content-wrapper";\n    overflow-x: hidden;\n  }\n}\n.jb-popover-web-component.--opened {\n  display: grid;\n}\n.jb-popover-web-component .popover-content-wrapper {\n  background-color: var(--jb-popover-bg-color, #fff);\n  border-radius: var(--jb-popover-border-radius, 24px);\n  padding: 16px;\n  box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25), -8px -8px 12px 0 rgba(255, 255, 255, 0.3);\n  display: grid;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  will-change: transform;\n  transition: transform 0.3s 0s ease;\n}\n@media (min-width: 320px) and (max-width: 479px) {\n  .jb-popover-web-component .popover-content-wrapper {\n    border-radius: var(--jb-popover-border-radius, 24px) var(--jb-popover-border-radius, 24px) 0 0;\n    grid-area: content-wrapper;\n    padding: 0;\n    padding: 32px 0;\n  }\n}</style>\n<div class="jb-popover-web-component">\r\n  <div class="popover-background"></div>\r\n  <div class="popover-content-wrapper">\r\n      <slot></slot>\r\n  </div>\r\n</div>',e.appendChild(t.content.cloneNode(!0)),this.elements={componentWrapper:e.querySelector(".jb-popover-web-component"),background:e.querySelector(".popover-background"),contentWrapper:e.querySelector(".popover-content-wrapper")}}checkInitialOpenness(){window.location.hash==`#${this.id}`&&(this.triggerUrlOpenEvent(),this.open())}triggerUrlOpenEvent(){const e=new CustomEvent("urlOpen",{bubbles:!0,composed:!0});this.dispatchEvent(e)}static get observedAttributes(){return["is-open","id"]}attributeChangedCallback(e,t,n){this.onAttributeChange(e,n)}onAttributeChange(t,n){switch(t){case"is-open":"true"==n?e(this,r,"f")||this.open():e(this,r,"f")&&this.close();break;case"id":this.id=n}}onBackgroundClick(){e(this,o,"m",p).call(this,"BACKGROUND_CLICK"),e(this,i,"f")&&this.close()}close(){t(this,r,!1,"f"),this.elements.componentWrapper.classList.remove("--opened"),this.elements.componentWrapper.classList.add("--closed"),"jb-popover-open"==window.history.state&&null!==this.PopoverHashPath&&(window.removeEventListener("popstate",e(this,c,"f")),window.location.hash==this.PopoverHashPath&&history.go(-1))}open(){t(this,r,!0,"f"),this.elements.componentWrapper.classList.remove("--closed"),this.elements.componentWrapper.classList.add("--opened"),n()&&null!==this.PopoverHashPath&&(window.history.pushState("jb-popover-open","",this.PopoverHashPath),window.addEventListener("popstate",e(this,c,"f"),{once:!0}))}}r=new WeakMap,s=new WeakMap,i=new WeakMap,c=new WeakMap,d=new WeakMap,l=new WeakMap,o=new WeakSet,a=function(){this.elements.background.addEventListener("click",this.onBackgroundClick.bind(this)),this.elements.contentWrapper.addEventListener("mouseenter",e(this,l,"f")),this.elements.contentWrapper.addEventListener("mouseleave",e(this,d,"f"))},p=function(e){const t=new CustomEvent("close",{detail:{eventType:e}});this.dispatchEvent(t)},h=function(){return this.overflowDom?this.overflowDom.getBoundingClientRect().bottom:window.innerHeight};!customElements.get("jb-popover")&&window.customElements.define("jb-popover",m),exports.JBPopoverWebComponent=m;
 //# sourceMappingURL=jb-popover.cjs.js.map

package/dist/jb-popover.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"jb-popover.cjs.js","sources":["../lib/jb-popover.ts","../../../common/scripts/device-detection.ts"],"sourcesContent":["import { symbol } from \"prop-types\";\r\nimport HTML from \"./jb-popover.html\";\r\nimport CSS from \"./jb-popover.scss\";\r\nimport { ElementsObject } from \"./types\";\r\nimport { isMobile } from \"../../../common/scripts/device-detection\";\r\n\r\nexport class JBPopoverWebComponent extends HTMLElement {\r\n  #isOpen = false;\r\n  #JBID = Symbol();\r\n  elements: ElementsObject;\r\n  get JBID() {\r\n    return this.#JBID;\r\n  }\r\n  #autoCloseOnBackgroundClick = false;\r\n  get isOpen() {\r\n    return this.#isOpen;\r\n  }\r\n  constructor() {\r\n    super();\r\n    this.initWebComponent();\r\n  }\r\n  connectedCallback() {\r\n    // standard web component event that called when all of dom is bound\r\n    this.callOnLoadEvent();\r\n    this.initProp();\r\n    this.callOnInitEvent();\r\n  }\r\n  disconnectedCallback() {\r\n    window.removeEventListener(\"popstate\", this.#onBrowserBack);\r\n  }\r\n  callOnLoadEvent() {\r\n    const event = new CustomEvent(\"load\", { bubbles: true, composed: true });\r\n    this.dispatchEvent(event);\r\n  }\r\n  callOnInitEvent() {\r\n    const event = new CustomEvent(\"init\", { bubbles: true, composed: true });\r\n    this.dispatchEvent(event);\r\n  }\r\n  initWebComponent() {\r\n    const shadowRoot = this.attachShadow({\r\n      mode: \"open\",\r\n    });\r\n    const html = `<style>${CSS}</style>` + \"\\n\" + HTML;\r\n    const element = document.createElement(\"template\");\r\n    element.innerHTML = html;\r\n    shadowRoot.appendChild(element.content.cloneNode(true));\r\n    this.elements = {\r\n      componentWrapper: shadowRoot.querySelector(\".jb-popover-web-component\")!,\r\n      background: shadowRoot.querySelector(\".popover-background\")!,\r\n      contentWrapper: shadowRoot.querySelector(\".popover-content-wrapper\")!,\r\n    };\r\n  }\r\n  #registerEventListener() {\r\n    this.elements.background.addEventListener(\r\n      \"click\",\r\n      this.onBackgroundClick.bind(this)\r\n    );\r\n\r\n    window.addEventListener(\"popstate\", this.#onBrowserBack);\r\n    this.elements.contentWrapper.addEventListener('mouseenter', this.#fixCalendarContainerPos);\r\n    this.elements.contentWrapper.addEventListener('mouseleave', this.#resetCalendarContainerPos);\r\n  }\r\n  initProp() {\r\n    this.#registerEventListener();\r\n  }\r\n  checkInitialOpenness() {\r\n    //if page has modal url we open it automatically\r\n    const location = window.location;\r\n    if (location.hash == `#${this.id}`) {\r\n      this.triggerUrlOpenEvent();\r\n      this.open();\r\n    }\r\n  }\r\n  triggerUrlOpenEvent() {\r\n    //when modal open itself becuase url contain modal id\r\n    const event = new CustomEvent(\"urlOpen\", { bubbles: true, composed: true });\r\n    this.dispatchEvent(event);\r\n  }\r\n  static get observedAttributes() {\r\n    return [\"is-open\", \"id\"];\r\n  }\r\n  attributeChangedCallback(name: string, oldValue: string, newValue: string) {\r\n    // do something when an attribute has changed\r\n    this.onAttributeChange(name, newValue);\r\n  }\r\n  onAttributeChange(name: string, value: string) {\r\n    switch (name) {\r\n      case \"is-open\":\r\n        if (value == \"true\") {\r\n          if (!this.#isOpen) {\r\n            this.open();\r\n          }\r\n        } else {\r\n          if (this.#isOpen) {\r\n            this.close();\r\n          }\r\n        }\r\n        break;\r\n      case \"id\":\r\n        this.id = value;\r\n        break;\r\n    }\r\n  }\r\n  onBackgroundClick() {\r\n    this.#dispatchCloseEvent(\"BACKGROUND_CLICK\");\r\n    if (this.#autoCloseOnBackgroundClick) {\r\n      this.close();\r\n    }\r\n  }\r\n  #dispatchCloseEvent(type: \"BACKGROUND_CLICK\" | \"HISTORY_BACK_EVENT\" | \"OUTSIDE_CLICK\" | \"CLOSE_BUTTON_CLICK\") {\r\n    //we have many ways to dispatch close event like back button on close clicked\r\n    const event = new CustomEvent(\"close\", { detail: { eventType: type } });\r\n    this.dispatchEvent(event);\r\n  }\r\n  /**\r\n   * @public\r\n   * will close popover\r\n   */\r\n  close() {\r\n    this.#isOpen = false;\r\n    this.elements.componentWrapper.classList.remove(\"--opened\");\r\n    this.elements.componentWrapper.classList.add(\"--closed\");\r\n  }\r\n  /**\r\n   * @public\r\n   * will open popover\r\n   */\r\n  open() {\r\n    this.#isOpen = true;\r\n    this.elements.componentWrapper.classList.remove(\"--closed\");\r\n    this.elements.componentWrapper.classList.add(\"--opened\");\r\n  }\r\n  #onBrowserBack = (e: PopStateEvent) => {\r\n    if (this.isOpen && isMobile()) {\r\n      e.preventDefault();\r\n      this.close();\r\n      this.#dispatchCloseEvent(\"HISTORY_BACK_EVENT\");\r\n\r\n    }\r\n  }\r\n  overflowHandler: \"NONE\" | \"SLIDE\" = \"NONE\";\r\n  overflowDom:HTMLElement|null = null;\r\n  #resetCalendarContainerPos = () => {\r\n    if (this.overflowHandler == \"SLIDE\") {\r\n      this.elements.contentWrapper.style.transform = `translateY(${0}px)`;\r\n    }\r\n  }\r\n  #fixCalendarContainerPos = () => {\r\n    if (this.overflowHandler == \"SLIDE\") {\r\n      //bounding client rect\r\n      const bcr = this.elements.contentWrapper.getBoundingClientRect();\r\n      const overflowSize = this.#getParentBottom() - bcr.bottom;\r\n      if (overflowSize < 0) {\r\n        this.elements.contentWrapper.style.transform = `translateY(${overflowSize}px)`;\r\n      }\r\n    }\r\n\r\n  }\r\n  /**\r\n   * @description return height of element that we want to calc our overflow based on.\r\n   */\r\n  #getParentBottom():number{\r\n    if(this.overflowDom){\r\n      return this.overflowDom.getBoundingClientRect().bottom;\r\n    }\r\n    //default height of parent if no parent set\r\n    return window.innerHeight;\r\n  }\r\n}\r\nconst myElementNotExists = !customElements.get(\"jb-popover\");\r\nif (myElementNotExists) {\r\n  window.customElements.define(\"jb-popover\", JBPopoverWebComponent);\r\n}\r\n","export const isMobile = ()=>{\r\n  return /Mobi/i.test(window.navigator.userAgent);\r\n};"],"names":["JBPopoverWebComponent","HTMLElement","JBID","__classPrivateFieldGet","this","_JBPopoverWebComponent_JBID","isOpen","_JBPopoverWebComponent_isOpen","constructor","super","set","Symbol","_JBPopoverWebComponent_autoCloseOnBackgroundClick","_JBPopoverWebComponent_onBrowserBack","e","test","window","navigator","userAgent","preventDefault","close","_JBPopoverWebComponent_instances","_JBPopoverWebComponent_dispatchCloseEvent","call","overflowHandler","overflowDom","_JBPopoverWebComponent_resetCalendarContainerPos","elements","contentWrapper","style","transform","_JBPopoverWebComponent_fixCalendarContainerPos","bcr","getBoundingClientRect","overflowSize","_JBPopoverWebComponent_getParentBottom","bottom","initWebComponent","connectedCallback","callOnLoadEvent","initProp","callOnInitEvent","disconnectedCallback","removeEventListener","event","CustomEvent","bubbles","composed","dispatchEvent","shadowRoot","attachShadow","mode","element","document","createElement","innerHTML","appendChild","content","cloneNode","componentWrapper","querySelector","background","_JBPopoverWebComponent_registerEventListener","checkInitialOpenness","location","hash","id","triggerUrlOpenEvent","open","observedAttributes","attributeChangedCallback","name","oldValue","newValue","onAttributeChange","value","onBackgroundClick","__classPrivateFieldSet","classList","remove","add","addEventListener","bind","type","detail","eventType","innerHeight","customElements","get","define"],"mappings":"2uBAMM,MAAOA,UAA8BC,YAIzC,QAAIC,GACF,OAAOC,EAAAC,KAAIC,EAAA,IACZ,CAED,UAAIC,GACF,OAAOH,EAAAC,KAAIG,EAAA,IACZ,CACD,WAAAC,GACEC,oBAXFF,EAAAG,IAAAN,MAAU,GACVC,EAAQK,IAAAN,KAAAO,UAKRC,EAAAF,IAAAN,MAA8B,GAuH9BS,EAAiBH,IAAAN,MAACU,IACZV,KAAKE,QCpIJ,QAAQS,KAAKC,OAAOC,UAAUC,aDqIjCJ,EAAEK,iBACFf,KAAKgB,QACLjB,EAAAC,KAAwBiB,EAAA,IAAAC,GAAAC,KAAxBnB,KAAyB,sBAE1B,IAEHA,KAAeoB,gBAAqB,OACpCpB,KAAWqB,YAAoB,KAC/BC,EAAAhB,IAAAN,MAA6B,KACC,SAAxBA,KAAKoB,kBACPpB,KAAKuB,SAASC,eAAeC,MAAMC,UAAY,kBAChD,IAEHC,EAAArB,IAAAN,MAA2B,KACzB,GAA4B,SAAxBA,KAAKoB,gBAA4B,CAEnC,MAAMQ,EAAM5B,KAAKuB,SAASC,eAAeK,wBACnCC,EAAe/B,EAAAC,KAAqBiB,EAAA,IAAAc,GAAAZ,KAArBnB,MAA0B4B,EAAII,OAC/CF,EAAe,IACjB9B,KAAKuB,SAASC,eAAeC,MAAMC,UAAY,cAAcI,OAEhE,KAxID9B,KAAKiC,kBACN,CACD,iBAAAC,GAEElC,KAAKmC,kBACLnC,KAAKoC,WACLpC,KAAKqC,iBACN,CACD,oBAAAC,GACE1B,OAAO2B,oBAAoB,WAAYxC,EAAAC,KAAmBS,EAAA,KAC3D,CACD,eAAA0B,GACE,MAAMK,EAAQ,IAAIC,YAAY,OAAQ,CAAEC,SAAS,EAAMC,UAAU,IACjE3C,KAAK4C,cAAcJ,EACpB,CACD,eAAAH,GACE,MAAMG,EAAQ,IAAIC,YAAY,OAAQ,CAAEC,SAAS,EAAMC,UAAU,IACjE3C,KAAK4C,cAAcJ,EACpB,CACD,gBAAAP,GACE,MAAMY,EAAa7C,KAAK8C,aAAa,CACnCC,KAAM,SAGFC,EAAUC,SAASC,cAAc,YACvCF,EAAQG,UAFK,+oDAGbN,EAAWO,YAAYJ,EAAQK,QAAQC,WAAU,IACjDtD,KAAKuB,SAAW,CACdgC,iBAAkBV,EAAWW,cAAc,6BAC3CC,WAAYZ,EAAWW,cAAc,uBACrChC,eAAgBqB,EAAWW,cAAc,4BAE5C,CAWD,QAAApB,GACErC,EAAAC,KAAIiB,EAAA,IAAAyC,GAAJvC,KAAAnB,KACD,CACD,oBAAA2D,GAEmB/C,OAAOgD,SACXC,MAAQ,IAAI7D,KAAK8D,OAC5B9D,KAAK+D,sBACL/D,KAAKgE,OAER,CACD,mBAAAD,GAEE,MAAMvB,EAAQ,IAAIC,YAAY,UAAW,CAAEC,SAAS,EAAMC,UAAU,IACpE3C,KAAK4C,cAAcJ,EACpB,CACD,6BAAWyB,GACT,MAAO,CAAC,UAAW,KACpB,CACD,wBAAAC,CAAyBC,EAAcC,EAAkBC,GAEvDrE,KAAKsE,kBAAkBH,EAAME,EAC9B,CACD,iBAAAC,CAAkBH,EAAcI,GAC9B,OAAQJ,GACN,IAAK,UACU,QAATI,EACGxE,EAAAC,KAAIG,EAAA,MACPH,KAAKgE,OAGHjE,EAAAC,KAAYG,EAAA,MACdH,KAAKgB,QAGT,MACF,IAAK,KACHhB,KAAK8D,GAAKS,EAGf,CACD,iBAAAC,GACEzE,EAAAC,KAAwBiB,EAAA,IAAAC,GAAAC,KAAxBnB,KAAyB,oBACrBD,EAAAC,KAAgCQ,EAAA,MAClCR,KAAKgB,OAER,CAUD,KAAAA,GACEyD,EAAAzE,KAAIG,GAAW,EAAK,KACpBH,KAAKuB,SAASgC,iBAAiBmB,UAAUC,OAAO,YAChD3E,KAAKuB,SAASgC,iBAAiBmB,UAAUE,IAAI,WAC9C,CAKD,IAAAZ,GACES,EAAAzE,KAAIG,GAAW,EAAI,KACnBH,KAAKuB,SAASgC,iBAAiBmB,UAAUC,OAAO,YAChD3E,KAAKuB,SAASgC,iBAAiBmB,UAAUE,IAAI,WAC9C,iHA9EC5E,KAAKuB,SAASkC,WAAWoB,iBACvB,QACA7E,KAAKwE,kBAAkBM,KAAK9E,OAG9BY,OAAOiE,iBAAiB,WAAY9E,EAAAC,KAAmBS,EAAA,MACvDT,KAAKuB,SAASC,eAAeqD,iBAAiB,aAAc9E,EAAAC,KAAI2B,EAAA,MAChE3B,KAAKuB,SAASC,eAAeqD,iBAAiB,aAAc9E,EAAAC,KAAIsB,EAAA,KAClE,aAgDoByD,GAElB,MAAMvC,EAAQ,IAAIC,YAAY,QAAS,CAAEuC,OAAQ,CAAEC,UAAWF,KAC9D/E,KAAK4C,cAAcJ,EACrB,EAACT,EAAA,WAiDC,OAAG/B,KAAKqB,YACCrB,KAAKqB,YAAYQ,wBAAwBG,OAG3CpB,OAAOsE,WAChB,GAE0BC,eAAeC,IAAI,eAE7CxE,OAAOuE,eAAeE,OAAO,aAAczF"}
+{"version":3,"file":"jb-popover.cjs.js","sources":["../../../common/scripts/device-detection.ts","../lib/jb-popover.ts"],"sourcesContent":["export const isMobile = ()=>{\r\n  return /Mobi/i.test(window.navigator.userAgent);\r\n};","import { symbol } from \"prop-types\";\r\nimport HTML from \"./jb-popover.html\";\r\nimport CSS from \"./jb-popover.scss\";\r\nimport { ElementsObject } from \"./types\";\r\nimport { isMobile } from \"../../../common/scripts/device-detection\";\r\n\r\nexport class JBPopoverWebComponent extends HTMLElement {\r\n  #isOpen = false;\r\n  #JBID = Symbol();\r\n  elements: ElementsObject;\r\n  get JBID() {\r\n    return this.#JBID;\r\n  }\r\n  #autoCloseOnBackgroundClick = true;\r\n  get isOpen() {\r\n    return this.#isOpen;\r\n  }\r\n  get PopoverHashPath():string | null{\r\n    //this used to add # route to prevent back button in mobile. it only work if element have id\r\n    return this.id?`#${this.id}`:null;\r\n  }\r\n  constructor() {\r\n    super();\r\n    this.initWebComponent();\r\n  }\r\n  connectedCallback() {\r\n    // standard web component event that called when all of dom is bound\r\n    this.callOnLoadEvent();\r\n    this.#registerEventListener();\r\n    this.callOnInitEvent();\r\n  }\r\n  disconnectedCallback() {\r\n    window.removeEventListener(\"popstate\", this.#onBrowserBack);\r\n  }\r\n  callOnLoadEvent() {\r\n    const event = new CustomEvent(\"load\", { bubbles: true, composed: true });\r\n    this.dispatchEvent(event);\r\n  }\r\n  callOnInitEvent() {\r\n    const event = new CustomEvent(\"init\", { bubbles: true, composed: true });\r\n    this.dispatchEvent(event);\r\n  }\r\n  initWebComponent() {\r\n    const shadowRoot = this.attachShadow({\r\n      mode: \"open\",\r\n    });\r\n    const html = `<style>${CSS}</style>` + \"\\n\" + HTML;\r\n    const element = document.createElement(\"template\");\r\n    element.innerHTML = html;\r\n    shadowRoot.appendChild(element.content.cloneNode(true));\r\n    this.elements = {\r\n      componentWrapper: shadowRoot.querySelector(\".jb-popover-web-component\")!,\r\n      background: shadowRoot.querySelector(\".popover-background\")!,\r\n      contentWrapper: shadowRoot.querySelector(\".popover-content-wrapper\")!,\r\n    };\r\n  }\r\n  #registerEventListener() {\r\n    this.elements.background.addEventListener(\r\n      \"click\",\r\n      this.onBackgroundClick.bind(this)\r\n    );\r\n    //we add popstate event listener\r\n    this.elements.contentWrapper.addEventListener('mouseenter', this.#fixCalendarContainerPos);\r\n    this.elements.contentWrapper.addEventListener('mouseleave', this.#resetCalendarContainerPos);\r\n  }\r\n  checkInitialOpenness() {\r\n    //if page has modal url we open it automatically\r\n    const location = window.location;\r\n    if (location.hash == `#${this.id}`) {\r\n      this.triggerUrlOpenEvent();\r\n      this.open();\r\n    }\r\n  }\r\n  triggerUrlOpenEvent() {\r\n    //when modal open itself becuase url contain modal id\r\n    const event = new CustomEvent(\"urlOpen\", { bubbles: true, composed: true });\r\n    this.dispatchEvent(event);\r\n  }\r\n  static get observedAttributes() {\r\n    return [\"is-open\", \"id\"];\r\n  }\r\n  attributeChangedCallback(name: string, oldValue: string, newValue: string) {\r\n    // do something when an attribute has changed\r\n    this.onAttributeChange(name, newValue);\r\n  }\r\n  onAttributeChange(name: string, value: string) {\r\n    switch (name) {\r\n      case \"is-open\":\r\n        if (value == \"true\") {\r\n          if (!this.#isOpen) {\r\n            this.open();\r\n          }\r\n        } else {\r\n          if (this.#isOpen) {\r\n            this.close();\r\n          }\r\n        }\r\n        break;\r\n      case \"id\":\r\n        this.id = value;\r\n        break;\r\n    }\r\n  }\r\n  onBackgroundClick() {\r\n    this.#dispatchCloseEvent(\"BACKGROUND_CLICK\");\r\n    if (this.#autoCloseOnBackgroundClick) {\r\n      this.close();\r\n    }\r\n  }\r\n  #dispatchCloseEvent(type: \"BACKGROUND_CLICK\" | \"HISTORY_BACK_EVENT\" | \"OUTSIDE_CLICK\" | \"CLOSE_BUTTON_CLICK\") {\r\n    //we have many ways to dispatch close event like back button on close clicked\r\n    const event = new CustomEvent(\"close\", { detail: { eventType: type } });\r\n    this.dispatchEvent(event);\r\n  }\r\n  /**\r\n   * @public\r\n   * will close popover\r\n   */\r\n  close() {\r\n    this.#isOpen = false;\r\n    this.elements.componentWrapper.classList.remove(\"--opened\");\r\n    this.elements.componentWrapper.classList.add(\"--closed\");\r\n    // if we pushed state to the history but state doesn't popped yet we pop it.\r\n    if(window.history.state == \"jb-popover-open\" && this.PopoverHashPath !== null){\r\n      window.removeEventListener(\"popstate\", this.#onBrowserBack);\r\n      if(window.location.hash == this.PopoverHashPath){\r\n        history.go(-1);\r\n      }\r\n    }\r\n  }\r\n  /**\r\n   * @public\r\n   * will open popover\r\n   */\r\n  open() {\r\n    this.#isOpen = true;\r\n    this.elements.componentWrapper.classList.remove(\"--closed\");\r\n    this.elements.componentWrapper.classList.add(\"--opened\");\r\n    if (isMobile() && this.PopoverHashPath !== null) {\r\n      window.history.pushState('jb-popover-open',\"\",this.PopoverHashPath);\r\n      window.addEventListener(\"popstate\", this.#onBrowserBack,{once:true});\r\n    }\r\n  }\r\n  #onBrowserBack = (e: PopStateEvent) => {\r\n    if (this.isOpen && isMobile()) {\r\n      //we will push state when modal get open\r\n      this.close();\r\n      this.#dispatchCloseEvent(\"HISTORY_BACK_EVENT\");\r\n\r\n    }\r\n  }\r\n  overflowHandler: \"NONE\" | \"SLIDE\" = \"NONE\";\r\n  overflowDom:HTMLElement|null = null;\r\n  #resetCalendarContainerPos = () => {\r\n    if (this.overflowHandler == \"SLIDE\") {\r\n      this.elements.contentWrapper.style.transform = `translateY(${0}px)`;\r\n    }\r\n  }\r\n  #fixCalendarContainerPos = () => {\r\n    if (this.overflowHandler == \"SLIDE\") {\r\n      //bounding client rect\r\n      const bcr = this.elements.contentWrapper.getBoundingClientRect();\r\n      const overflowSize = this.#getParentBottom() - bcr.bottom;\r\n      if (overflowSize < 0) {\r\n        this.elements.contentWrapper.style.transform = `translateY(${overflowSize}px)`;\r\n      }\r\n    }\r\n\r\n  }\r\n  /**\r\n   * @description return height of element that we want to calc our overflow based on.\r\n   */\r\n  #getParentBottom():number{\r\n    if(this.overflowDom){\r\n      return this.overflowDom.getBoundingClientRect().bottom;\r\n    }\r\n    //default height of parent if no parent set\r\n    return window.innerHeight;\r\n  }\r\n}\r\nconst myElementNotExists = !customElements.get(\"jb-popover\");\r\nif (myElementNotExists) {\r\n  window.customElements.define(\"jb-popover\", JBPopoverWebComponent);\r\n}\r\n"],"names":["isMobile","test","window","navigator","userAgent","JBPopoverWebComponent","HTMLElement","JBID","__classPrivateFieldGet","this","_JBPopoverWebComponent_JBID","isOpen","_JBPopoverWebComponent_isOpen","PopoverHashPath","id","constructor","super","set","Symbol","_JBPopoverWebComponent_autoCloseOnBackgroundClick","_JBPopoverWebComponent_onBrowserBack","e","close","_JBPopoverWebComponent_instances","_JBPopoverWebComponent_dispatchCloseEvent","call","overflowHandler","overflowDom","_JBPopoverWebComponent_resetCalendarContainerPos","elements","contentWrapper","style","transform","_JBPopoverWebComponent_fixCalendarContainerPos","bcr","getBoundingClientRect","overflowSize","_JBPopoverWebComponent_getParentBottom","bottom","initWebComponent","connectedCallback","callOnLoadEvent","_JBPopoverWebComponent_registerEventListener","callOnInitEvent","disconnectedCallback","removeEventListener","event","CustomEvent","bubbles","composed","dispatchEvent","shadowRoot","attachShadow","mode","element","document","createElement","innerHTML","appendChild","content","cloneNode","componentWrapper","querySelector","background","checkInitialOpenness","location","hash","triggerUrlOpenEvent","open","observedAttributes","attributeChangedCallback","name","oldValue","newValue","onAttributeChange","value","onBackgroundClick","__classPrivateFieldSet","classList","remove","add","history","state","go","pushState","addEventListener","once","bind","type","detail","eventType","innerHeight","customElements","get","define"],"mappings":"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"}

package/dist/jb-popover.js

@@ -1,2 +1,2 @@
-function e(e,t,n,o){if("a"===n&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?o:"a"===n?o.call(e):o?o.value:t.get(e)}function t(e,t,n,o,r){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!r)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!r:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?r.call(e,n):r?r.value=n:t.set(e,n),n}"function"==typeof SuppressedError&&SuppressedError;var n,o,r,s,i,a,p,c,d,l;class h extends HTMLElement{get JBID(){return e(this,r,"f")}get isOpen(){return e(this,o,"f")}constructor(){super(),n.add(this),o.set(this,!1),r.set(this,Symbol()),s.set(this,!1),p.set(this,(t=>{this.isOpen&&/Mobi/i.test(window.navigator.userAgent)&&(t.preventDefault(),this.close(),e(this,n,"m",a).call(this,"HISTORY_BACK_EVENT"))})),this.overflowHandler="NONE",this.overflowDom=null,c.set(this,(()=>{"SLIDE"==this.overflowHandler&&(this.elements.contentWrapper.style.transform="translateY(0px)")})),d.set(this,(()=>{if("SLIDE"==this.overflowHandler){const t=this.elements.contentWrapper.getBoundingClientRect(),o=e(this,n,"m",l).call(this)-t.bottom;o<0&&(this.elements.contentWrapper.style.transform=`translateY(${o}px)`)}})),this.initWebComponent()}connectedCallback(){this.callOnLoadEvent(),this.initProp(),this.callOnInitEvent()}disconnectedCallback(){window.removeEventListener("popstate",e(this,p,"f"))}callOnLoadEvent(){const e=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(e)}callOnInitEvent(){const e=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(e)}initWebComponent(){const e=this.attachShadow({mode:"open"}),t=document.createElement("template");t.innerHTML='<style>.jb-popover-web-component {\n  position: absolute;\n  display: none;\n  inset-block-start: 64px;\n  inset-inline-start: 0;\n  z-index: var(--jb-popover-z-index, 10);\n  will-change: transform;\n  transition: transform 0.3s 0s ease;\n}\n@media (min-width: 320px) and (max-width: 479px) {\n  .jb-popover-web-component {\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    bottom: 0;\n    position: fixed;\n    width: 100vw;\n    height: 100vh;\n    background-color: rgba(0, 0, 0, 0.5);\n    backdrop-filter: blur(5px);\n    display: none;\n    grid-template-rows: 1fr auto;\n    grid-template-columns: 1fr;\n    grid-template-areas: "." "content-wrapper";\n    overflow-x: hidden;\n  }\n}\n.jb-popover-web-component.--opened {\n  display: grid;\n}\n.jb-popover-web-component .popover-content-wrapper {\n  background-color: var(--jb-popover-bg-color, #fff);\n  border-radius: var(--jb-popover-border-radius, 24px);\n  padding: 16px;\n  box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25), -8px -8px 12px 0 rgba(255, 255, 255, 0.3);\n  display: grid;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  will-change: transform;\n  transition: transform 0.3s 0s ease;\n}\n@media (min-width: 320px) and (max-width: 479px) {\n  .jb-popover-web-component .popover-content-wrapper {\n    border-radius: var(--jb-popover-border-radius, 24px) var(--jb-popover-border-radius, 24px) 0 0;\n    grid-area: content-wrapper;\n    padding: 0;\n    padding: 32px 0;\n  }\n}</style>\n<div class="jb-popover-web-component">\r\n  <div class="popover-background"></div>\r\n  <div class="popover-content-wrapper">\r\n      <slot></slot>\r\n  </div>\r\n</div>',e.appendChild(t.content.cloneNode(!0)),this.elements={componentWrapper:e.querySelector(".jb-popover-web-component"),background:e.querySelector(".popover-background"),contentWrapper:e.querySelector(".popover-content-wrapper")}}initProp(){e(this,n,"m",i).call(this)}checkInitialOpenness(){window.location.hash==`#${this.id}`&&(this.triggerUrlOpenEvent(),this.open())}triggerUrlOpenEvent(){const e=new CustomEvent("urlOpen",{bubbles:!0,composed:!0});this.dispatchEvent(e)}static get observedAttributes(){return["is-open","id"]}attributeChangedCallback(e,t,n){this.onAttributeChange(e,n)}onAttributeChange(t,n){switch(t){case"is-open":"true"==n?e(this,o,"f")||this.open():e(this,o,"f")&&this.close();break;case"id":this.id=n}}onBackgroundClick(){e(this,n,"m",a).call(this,"BACKGROUND_CLICK"),e(this,s,"f")&&this.close()}close(){t(this,o,!1,"f"),this.elements.componentWrapper.classList.remove("--opened"),this.elements.componentWrapper.classList.add("--closed")}open(){t(this,o,!0,"f"),this.elements.componentWrapper.classList.remove("--closed"),this.elements.componentWrapper.classList.add("--opened")}}o=new WeakMap,r=new WeakMap,s=new WeakMap,p=new WeakMap,c=new WeakMap,d=new WeakMap,n=new WeakSet,i=function(){this.elements.background.addEventListener("click",this.onBackgroundClick.bind(this)),window.addEventListener("popstate",e(this,p,"f")),this.elements.contentWrapper.addEventListener("mouseenter",e(this,d,"f")),this.elements.contentWrapper.addEventListener("mouseleave",e(this,c,"f"))},a=function(e){const t=new CustomEvent("close",{detail:{eventType:e}});this.dispatchEvent(t)},l=function(){return this.overflowDom?this.overflowDom.getBoundingClientRect().bottom:window.innerHeight};!customElements.get("jb-popover")&&window.customElements.define("jb-popover",h);export{h as JBPopoverWebComponent};
+function e(e,t,n,o){if("a"===n&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?o:"a"===n?o.call(e):o?o.value:t.get(e)}function t(e,t,n,o,r){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!r)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!r:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?r.call(e,n):r?r.value=n:t.set(e,n),n}"function"==typeof SuppressedError&&SuppressedError;const n=()=>/Mobi/i.test(window.navigator.userAgent);var o,r,s,i,a,p,d,l,c,h;class m extends HTMLElement{get JBID(){return e(this,s,"f")}get isOpen(){return e(this,r,"f")}get PopoverHashPath(){return this.id?`#${this.id}`:null}constructor(){super(),o.add(this),r.set(this,!1),s.set(this,Symbol()),i.set(this,!0),d.set(this,(t=>{this.isOpen&&n()&&(this.close(),e(this,o,"m",p).call(this,"HISTORY_BACK_EVENT"))})),this.overflowHandler="NONE",this.overflowDom=null,l.set(this,(()=>{"SLIDE"==this.overflowHandler&&(this.elements.contentWrapper.style.transform="translateY(0px)")})),c.set(this,(()=>{if("SLIDE"==this.overflowHandler){const t=this.elements.contentWrapper.getBoundingClientRect(),n=e(this,o,"m",h).call(this)-t.bottom;n<0&&(this.elements.contentWrapper.style.transform=`translateY(${n}px)`)}})),this.initWebComponent()}connectedCallback(){this.callOnLoadEvent(),e(this,o,"m",a).call(this),this.callOnInitEvent()}disconnectedCallback(){window.removeEventListener("popstate",e(this,d,"f"))}callOnLoadEvent(){const e=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(e)}callOnInitEvent(){const e=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(e)}initWebComponent(){const e=this.attachShadow({mode:"open"}),t=document.createElement("template");t.innerHTML='<style>.jb-popover-web-component {\n  position: absolute;\n  display: none;\n  inset-block-start: 64px;\n  inset-inline-start: 0;\n  z-index: var(--jb-popover-z-index, 10);\n  will-change: transform;\n  transition: transform 0.3s 0s ease;\n}\n@media (min-width: 320px) and (max-width: 479px) {\n  .jb-popover-web-component {\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    bottom: 0;\n    position: fixed;\n    width: 100vw;\n    height: 100vh;\n    background-color: rgba(0, 0, 0, 0.5);\n    backdrop-filter: blur(5px);\n    display: none;\n    grid-template-rows: 1fr auto;\n    grid-template-columns: 1fr;\n    grid-template-areas: "." "content-wrapper";\n    overflow-x: hidden;\n  }\n}\n.jb-popover-web-component.--opened {\n  display: grid;\n}\n.jb-popover-web-component .popover-content-wrapper {\n  background-color: var(--jb-popover-bg-color, #fff);\n  border-radius: var(--jb-popover-border-radius, 24px);\n  padding: 16px;\n  box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25), -8px -8px 12px 0 rgba(255, 255, 255, 0.3);\n  display: grid;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  will-change: transform;\n  transition: transform 0.3s 0s ease;\n}\n@media (min-width: 320px) and (max-width: 479px) {\n  .jb-popover-web-component .popover-content-wrapper {\n    border-radius: var(--jb-popover-border-radius, 24px) var(--jb-popover-border-radius, 24px) 0 0;\n    grid-area: content-wrapper;\n    padding: 0;\n    padding: 32px 0;\n  }\n}</style>\n<div class="jb-popover-web-component">\r\n  <div class="popover-background"></div>\r\n  <div class="popover-content-wrapper">\r\n      <slot></slot>\r\n  </div>\r\n</div>',e.appendChild(t.content.cloneNode(!0)),this.elements={componentWrapper:e.querySelector(".jb-popover-web-component"),background:e.querySelector(".popover-background"),contentWrapper:e.querySelector(".popover-content-wrapper")}}checkInitialOpenness(){window.location.hash==`#${this.id}`&&(this.triggerUrlOpenEvent(),this.open())}triggerUrlOpenEvent(){const e=new CustomEvent("urlOpen",{bubbles:!0,composed:!0});this.dispatchEvent(e)}static get observedAttributes(){return["is-open","id"]}attributeChangedCallback(e,t,n){this.onAttributeChange(e,n)}onAttributeChange(t,n){switch(t){case"is-open":"true"==n?e(this,r,"f")||this.open():e(this,r,"f")&&this.close();break;case"id":this.id=n}}onBackgroundClick(){e(this,o,"m",p).call(this,"BACKGROUND_CLICK"),e(this,i,"f")&&this.close()}close(){t(this,r,!1,"f"),this.elements.componentWrapper.classList.remove("--opened"),this.elements.componentWrapper.classList.add("--closed"),"jb-popover-open"==window.history.state&&null!==this.PopoverHashPath&&(window.removeEventListener("popstate",e(this,d,"f")),window.location.hash==this.PopoverHashPath&&history.go(-1))}open(){t(this,r,!0,"f"),this.elements.componentWrapper.classList.remove("--closed"),this.elements.componentWrapper.classList.add("--opened"),n()&&null!==this.PopoverHashPath&&(window.history.pushState("jb-popover-open","",this.PopoverHashPath),window.addEventListener("popstate",e(this,d,"f"),{once:!0}))}}r=new WeakMap,s=new WeakMap,i=new WeakMap,d=new WeakMap,l=new WeakMap,c=new WeakMap,o=new WeakSet,a=function(){this.elements.background.addEventListener("click",this.onBackgroundClick.bind(this)),this.elements.contentWrapper.addEventListener("mouseenter",e(this,c,"f")),this.elements.contentWrapper.addEventListener("mouseleave",e(this,l,"f"))},p=function(e){const t=new CustomEvent("close",{detail:{eventType:e}});this.dispatchEvent(t)},h=function(){return this.overflowDom?this.overflowDom.getBoundingClientRect().bottom:window.innerHeight};!customElements.get("jb-popover")&&window.customElements.define("jb-popover",m);export{m as JBPopoverWebComponent};
 //# sourceMappingURL=jb-popover.js.map

package/dist/jb-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"jb-popover.js","sources":["../lib/jb-popover.ts","../../../common/scripts/device-detection.ts"],"sourcesContent":["import { symbol } from \"prop-types\";\r\nimport HTML from \"./jb-popover.html\";\r\nimport CSS from \"./jb-popover.scss\";\r\nimport { ElementsObject } from \"./types\";\r\nimport { isMobile } from \"../../../common/scripts/device-detection\";\r\n\r\nexport class JBPopoverWebComponent extends HTMLElement {\r\n  #isOpen = false;\r\n  #JBID = Symbol();\r\n  elements: ElementsObject;\r\n  get JBID() {\r\n    return this.#JBID;\r\n  }\r\n  #autoCloseOnBackgroundClick = false;\r\n  get isOpen() {\r\n    return this.#isOpen;\r\n  }\r\n  constructor() {\r\n    super();\r\n    this.initWebComponent();\r\n  }\r\n  connectedCallback() {\r\n    // standard web component event that called when all of dom is bound\r\n    this.callOnLoadEvent();\r\n    this.initProp();\r\n    this.callOnInitEvent();\r\n  }\r\n  disconnectedCallback() {\r\n    window.removeEventListener(\"popstate\", this.#onBrowserBack);\r\n  }\r\n  callOnLoadEvent() {\r\n    const event = new CustomEvent(\"load\", { bubbles: true, composed: true });\r\n    this.dispatchEvent(event);\r\n  }\r\n  callOnInitEvent() {\r\n    const event = new CustomEvent(\"init\", { bubbles: true, composed: true });\r\n    this.dispatchEvent(event);\r\n  }\r\n  initWebComponent() {\r\n    const shadowRoot = this.attachShadow({\r\n      mode: \"open\",\r\n    });\r\n    const html = `<style>${CSS}</style>` + \"\\n\" + HTML;\r\n    const element = document.createElement(\"template\");\r\n    element.innerHTML = html;\r\n    shadowRoot.appendChild(element.content.cloneNode(true));\r\n    this.elements = {\r\n      componentWrapper: shadowRoot.querySelector(\".jb-popover-web-component\")!,\r\n      background: shadowRoot.querySelector(\".popover-background\")!,\r\n      contentWrapper: shadowRoot.querySelector(\".popover-content-wrapper\")!,\r\n    };\r\n  }\r\n  #registerEventListener() {\r\n    this.elements.background.addEventListener(\r\n      \"click\",\r\n      this.onBackgroundClick.bind(this)\r\n    );\r\n\r\n    window.addEventListener(\"popstate\", this.#onBrowserBack);\r\n    this.elements.contentWrapper.addEventListener('mouseenter', this.#fixCalendarContainerPos);\r\n    this.elements.contentWrapper.addEventListener('mouseleave', this.#resetCalendarContainerPos);\r\n  }\r\n  initProp() {\r\n    this.#registerEventListener();\r\n  }\r\n  checkInitialOpenness() {\r\n    //if page has modal url we open it automatically\r\n    const location = window.location;\r\n    if (location.hash == `#${this.id}`) {\r\n      this.triggerUrlOpenEvent();\r\n      this.open();\r\n    }\r\n  }\r\n  triggerUrlOpenEvent() {\r\n    //when modal open itself becuase url contain modal id\r\n    const event = new CustomEvent(\"urlOpen\", { bubbles: true, composed: true });\r\n    this.dispatchEvent(event);\r\n  }\r\n  static get observedAttributes() {\r\n    return [\"is-open\", \"id\"];\r\n  }\r\n  attributeChangedCallback(name: string, oldValue: string, newValue: string) {\r\n    // do something when an attribute has changed\r\n    this.onAttributeChange(name, newValue);\r\n  }\r\n  onAttributeChange(name: string, value: string) {\r\n    switch (name) {\r\n      case \"is-open\":\r\n        if (value == \"true\") {\r\n          if (!this.#isOpen) {\r\n            this.open();\r\n          }\r\n        } else {\r\n          if (this.#isOpen) {\r\n            this.close();\r\n          }\r\n        }\r\n        break;\r\n      case \"id\":\r\n        this.id = value;\r\n        break;\r\n    }\r\n  }\r\n  onBackgroundClick() {\r\n    this.#dispatchCloseEvent(\"BACKGROUND_CLICK\");\r\n    if (this.#autoCloseOnBackgroundClick) {\r\n      this.close();\r\n    }\r\n  }\r\n  #dispatchCloseEvent(type: \"BACKGROUND_CLICK\" | \"HISTORY_BACK_EVENT\" | \"OUTSIDE_CLICK\" | \"CLOSE_BUTTON_CLICK\") {\r\n    //we have many ways to dispatch close event like back button on close clicked\r\n    const event = new CustomEvent(\"close\", { detail: { eventType: type } });\r\n    this.dispatchEvent(event);\r\n  }\r\n  /**\r\n   * @public\r\n   * will close popover\r\n   */\r\n  close() {\r\n    this.#isOpen = false;\r\n    this.elements.componentWrapper.classList.remove(\"--opened\");\r\n    this.elements.componentWrapper.classList.add(\"--closed\");\r\n  }\r\n  /**\r\n   * @public\r\n   * will open popover\r\n   */\r\n  open() {\r\n    this.#isOpen = true;\r\n    this.elements.componentWrapper.classList.remove(\"--closed\");\r\n    this.elements.componentWrapper.classList.add(\"--opened\");\r\n  }\r\n  #onBrowserBack = (e: PopStateEvent) => {\r\n    if (this.isOpen && isMobile()) {\r\n      e.preventDefault();\r\n      this.close();\r\n      this.#dispatchCloseEvent(\"HISTORY_BACK_EVENT\");\r\n\r\n    }\r\n  }\r\n  overflowHandler: \"NONE\" | \"SLIDE\" = \"NONE\";\r\n  overflowDom:HTMLElement|null = null;\r\n  #resetCalendarContainerPos = () => {\r\n    if (this.overflowHandler == \"SLIDE\") {\r\n      this.elements.contentWrapper.style.transform = `translateY(${0}px)`;\r\n    }\r\n  }\r\n  #fixCalendarContainerPos = () => {\r\n    if (this.overflowHandler == \"SLIDE\") {\r\n      //bounding client rect\r\n      const bcr = this.elements.contentWrapper.getBoundingClientRect();\r\n      const overflowSize = this.#getParentBottom() - bcr.bottom;\r\n      if (overflowSize < 0) {\r\n        this.elements.contentWrapper.style.transform = `translateY(${overflowSize}px)`;\r\n      }\r\n    }\r\n\r\n  }\r\n  /**\r\n   * @description return height of element that we want to calc our overflow based on.\r\n   */\r\n  #getParentBottom():number{\r\n    if(this.overflowDom){\r\n      return this.overflowDom.getBoundingClientRect().bottom;\r\n    }\r\n    //default height of parent if no parent set\r\n    return window.innerHeight;\r\n  }\r\n}\r\nconst myElementNotExists = !customElements.get(\"jb-popover\");\r\nif (myElementNotExists) {\r\n  window.customElements.define(\"jb-popover\", JBPopoverWebComponent);\r\n}\r\n","export const isMobile = ()=>{\r\n  return /Mobi/i.test(window.navigator.userAgent);\r\n};"],"names":["JBPopoverWebComponent","HTMLElement","JBID","__classPrivateFieldGet","this","_JBPopoverWebComponent_JBID","isOpen","_JBPopoverWebComponent_isOpen","constructor","super","set","Symbol","_JBPopoverWebComponent_autoCloseOnBackgroundClick","_JBPopoverWebComponent_onBrowserBack","e","test","window","navigator","userAgent","preventDefault","close","_JBPopoverWebComponent_instances","_JBPopoverWebComponent_dispatchCloseEvent","call","overflowHandler","overflowDom","_JBPopoverWebComponent_resetCalendarContainerPos","elements","contentWrapper","style","transform","_JBPopoverWebComponent_fixCalendarContainerPos","bcr","getBoundingClientRect","overflowSize","_JBPopoverWebComponent_getParentBottom","bottom","initWebComponent","connectedCallback","callOnLoadEvent","initProp","callOnInitEvent","disconnectedCallback","removeEventListener","event","CustomEvent","bubbles","composed","dispatchEvent","shadowRoot","attachShadow","mode","element","document","createElement","innerHTML","appendChild","content","cloneNode","componentWrapper","querySelector","background","_JBPopoverWebComponent_registerEventListener","checkInitialOpenness","location","hash","id","triggerUrlOpenEvent","open","observedAttributes","attributeChangedCallback","name","oldValue","newValue","onAttributeChange","value","onBackgroundClick","__classPrivateFieldSet","classList","remove","add","addEventListener","bind","type","detail","eventType","innerHeight","customElements","get","define"],"mappings":"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"}
+{"version":3,"file":"jb-popover.js","sources":["../../../common/scripts/device-detection.ts","../lib/jb-popover.ts"],"sourcesContent":["export const isMobile = ()=>{\r\n  return /Mobi/i.test(window.navigator.userAgent);\r\n};","import { symbol } from \"prop-types\";\r\nimport HTML from \"./jb-popover.html\";\r\nimport CSS from \"./jb-popover.scss\";\r\nimport { ElementsObject } from \"./types\";\r\nimport { isMobile } from \"../../../common/scripts/device-detection\";\r\n\r\nexport class JBPopoverWebComponent extends HTMLElement {\r\n  #isOpen = false;\r\n  #JBID = Symbol();\r\n  elements: ElementsObject;\r\n  get JBID() {\r\n    return this.#JBID;\r\n  }\r\n  #autoCloseOnBackgroundClick = true;\r\n  get isOpen() {\r\n    return this.#isOpen;\r\n  }\r\n  get PopoverHashPath():string | null{\r\n    //this used to add # route to prevent back button in mobile. it only work if element have id\r\n    return this.id?`#${this.id}`:null;\r\n  }\r\n  constructor() {\r\n    super();\r\n    this.initWebComponent();\r\n  }\r\n  connectedCallback() {\r\n    // standard web component event that called when all of dom is bound\r\n    this.callOnLoadEvent();\r\n    this.#registerEventListener();\r\n    this.callOnInitEvent();\r\n  }\r\n  disconnectedCallback() {\r\n    window.removeEventListener(\"popstate\", this.#onBrowserBack);\r\n  }\r\n  callOnLoadEvent() {\r\n    const event = new CustomEvent(\"load\", { bubbles: true, composed: true });\r\n    this.dispatchEvent(event);\r\n  }\r\n  callOnInitEvent() {\r\n    const event = new CustomEvent(\"init\", { bubbles: true, composed: true });\r\n    this.dispatchEvent(event);\r\n  }\r\n  initWebComponent() {\r\n    const shadowRoot = this.attachShadow({\r\n      mode: \"open\",\r\n    });\r\n    const html = `<style>${CSS}</style>` + \"\\n\" + HTML;\r\n    const element = document.createElement(\"template\");\r\n    element.innerHTML = html;\r\n    shadowRoot.appendChild(element.content.cloneNode(true));\r\n    this.elements = {\r\n      componentWrapper: shadowRoot.querySelector(\".jb-popover-web-component\")!,\r\n      background: shadowRoot.querySelector(\".popover-background\")!,\r\n      contentWrapper: shadowRoot.querySelector(\".popover-content-wrapper\")!,\r\n    };\r\n  }\r\n  #registerEventListener() {\r\n    this.elements.background.addEventListener(\r\n      \"click\",\r\n      this.onBackgroundClick.bind(this)\r\n    );\r\n    //we add popstate event listener\r\n    this.elements.contentWrapper.addEventListener('mouseenter', this.#fixCalendarContainerPos);\r\n    this.elements.contentWrapper.addEventListener('mouseleave', this.#resetCalendarContainerPos);\r\n  }\r\n  checkInitialOpenness() {\r\n    //if page has modal url we open it automatically\r\n    const location = window.location;\r\n    if (location.hash == `#${this.id}`) {\r\n      this.triggerUrlOpenEvent();\r\n      this.open();\r\n    }\r\n  }\r\n  triggerUrlOpenEvent() {\r\n    //when modal open itself becuase url contain modal id\r\n    const event = new CustomEvent(\"urlOpen\", { bubbles: true, composed: true });\r\n    this.dispatchEvent(event);\r\n  }\r\n  static get observedAttributes() {\r\n    return [\"is-open\", \"id\"];\r\n  }\r\n  attributeChangedCallback(name: string, oldValue: string, newValue: string) {\r\n    // do something when an attribute has changed\r\n    this.onAttributeChange(name, newValue);\r\n  }\r\n  onAttributeChange(name: string, value: string) {\r\n    switch (name) {\r\n      case \"is-open\":\r\n        if (value == \"true\") {\r\n          if (!this.#isOpen) {\r\n            this.open();\r\n          }\r\n        } else {\r\n          if (this.#isOpen) {\r\n            this.close();\r\n          }\r\n        }\r\n        break;\r\n      case \"id\":\r\n        this.id = value;\r\n        break;\r\n    }\r\n  }\r\n  onBackgroundClick() {\r\n    this.#dispatchCloseEvent(\"BACKGROUND_CLICK\");\r\n    if (this.#autoCloseOnBackgroundClick) {\r\n      this.close();\r\n    }\r\n  }\r\n  #dispatchCloseEvent(type: \"BACKGROUND_CLICK\" | \"HISTORY_BACK_EVENT\" | \"OUTSIDE_CLICK\" | \"CLOSE_BUTTON_CLICK\") {\r\n    //we have many ways to dispatch close event like back button on close clicked\r\n    const event = new CustomEvent(\"close\", { detail: { eventType: type } });\r\n    this.dispatchEvent(event);\r\n  }\r\n  /**\r\n   * @public\r\n   * will close popover\r\n   */\r\n  close() {\r\n    this.#isOpen = false;\r\n    this.elements.componentWrapper.classList.remove(\"--opened\");\r\n    this.elements.componentWrapper.classList.add(\"--closed\");\r\n    // if we pushed state to the history but state doesn't popped yet we pop it.\r\n    if(window.history.state == \"jb-popover-open\" && this.PopoverHashPath !== null){\r\n      window.removeEventListener(\"popstate\", this.#onBrowserBack);\r\n      if(window.location.hash == this.PopoverHashPath){\r\n        history.go(-1);\r\n      }\r\n    }\r\n  }\r\n  /**\r\n   * @public\r\n   * will open popover\r\n   */\r\n  open() {\r\n    this.#isOpen = true;\r\n    this.elements.componentWrapper.classList.remove(\"--closed\");\r\n    this.elements.componentWrapper.classList.add(\"--opened\");\r\n    if (isMobile() && this.PopoverHashPath !== null) {\r\n      window.history.pushState('jb-popover-open',\"\",this.PopoverHashPath);\r\n      window.addEventListener(\"popstate\", this.#onBrowserBack,{once:true});\r\n    }\r\n  }\r\n  #onBrowserBack = (e: PopStateEvent) => {\r\n    if (this.isOpen && isMobile()) {\r\n      //we will push state when modal get open\r\n      this.close();\r\n      this.#dispatchCloseEvent(\"HISTORY_BACK_EVENT\");\r\n\r\n    }\r\n  }\r\n  overflowHandler: \"NONE\" | \"SLIDE\" = \"NONE\";\r\n  overflowDom:HTMLElement|null = null;\r\n  #resetCalendarContainerPos = () => {\r\n    if (this.overflowHandler == \"SLIDE\") {\r\n      this.elements.contentWrapper.style.transform = `translateY(${0}px)`;\r\n    }\r\n  }\r\n  #fixCalendarContainerPos = () => {\r\n    if (this.overflowHandler == \"SLIDE\") {\r\n      //bounding client rect\r\n      const bcr = this.elements.contentWrapper.getBoundingClientRect();\r\n      const overflowSize = this.#getParentBottom() - bcr.bottom;\r\n      if (overflowSize < 0) {\r\n        this.elements.contentWrapper.style.transform = `translateY(${overflowSize}px)`;\r\n      }\r\n    }\r\n\r\n  }\r\n  /**\r\n   * @description return height of element that we want to calc our overflow based on.\r\n   */\r\n  #getParentBottom():number{\r\n    if(this.overflowDom){\r\n      return this.overflowDom.getBoundingClientRect().bottom;\r\n    }\r\n    //default height of parent if no parent set\r\n    return window.innerHeight;\r\n  }\r\n}\r\nconst myElementNotExists = !customElements.get(\"jb-popover\");\r\nif (myElementNotExists) {\r\n  window.customElements.define(\"jb-popover\", JBPopoverWebComponent);\r\n}\r\n"],"names":["isMobile","test","window","navigator","userAgent","JBPopoverWebComponent","HTMLElement","JBID","__classPrivateFieldGet","this","_JBPopoverWebComponent_JBID","isOpen","_JBPopoverWebComponent_isOpen","PopoverHashPath","id","constructor","super","set","Symbol","_JBPopoverWebComponent_autoCloseOnBackgroundClick","_JBPopoverWebComponent_onBrowserBack","e","close","_JBPopoverWebComponent_instances","_JBPopoverWebComponent_dispatchCloseEvent","call","overflowHandler","overflowDom","_JBPopoverWebComponent_resetCalendarContainerPos","elements","contentWrapper","style","transform","_JBPopoverWebComponent_fixCalendarContainerPos","bcr","getBoundingClientRect","overflowSize","_JBPopoverWebComponent_getParentBottom","bottom","initWebComponent","connectedCallback","callOnLoadEvent","_JBPopoverWebComponent_registerEventListener","callOnInitEvent","disconnectedCallback","removeEventListener","event","CustomEvent","bubbles","composed","dispatchEvent","shadowRoot","attachShadow","mode","element","document","createElement","innerHTML","appendChild","content","cloneNode","componentWrapper","querySelector","background","checkInitialOpenness","location","hash","triggerUrlOpenEvent","open","observedAttributes","attributeChangedCallback","name","oldValue","newValue","onAttributeChange","value","onBackgroundClick","__classPrivateFieldSet","classList","remove","add","history","state","go","pushState","addEventListener","once","bind","type","detail","eventType","innerHeight","customElements","get","define"],"mappings":"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"}

package/dist/jb-popover.umd.js

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).JBButton={})}(this,(function(e){"use strict";function t(e,t,n,o){if("a"===n&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?o:"a"===n?o.call(e):o?o.value:t.get(e)}function n(e,t,n,o,r){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!r)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!r:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?r.call(e,n):r?r.value=n:t.set(e,n),n}"function"==typeof SuppressedError&&SuppressedError;var o,r,s,i,a,p,d,c,l,h;class m extends HTMLElement{get JBID(){return t(this,s,"f")}get isOpen(){return t(this,r,"f")}constructor(){super(),o.add(this),r.set(this,!1),s.set(this,Symbol()),i.set(this,!1),d.set(this,(e=>{this.isOpen&&/Mobi/i.test(window.navigator.userAgent)&&(e.preventDefault(),this.close(),t(this,o,"m",p).call(this,"HISTORY_BACK_EVENT"))})),this.overflowHandler="NONE",this.overflowDom=null,c.set(this,(()=>{"SLIDE"==this.overflowHandler&&(this.elements.contentWrapper.style.transform="translateY(0px)")})),l.set(this,(()=>{if("SLIDE"==this.overflowHandler){const e=this.elements.contentWrapper.getBoundingClientRect(),n=t(this,o,"m",h).call(this)-e.bottom;n<0&&(this.elements.contentWrapper.style.transform=`translateY(${n}px)`)}})),this.initWebComponent()}connectedCallback(){this.callOnLoadEvent(),this.initProp(),this.callOnInitEvent()}disconnectedCallback(){window.removeEventListener("popstate",t(this,d,"f"))}callOnLoadEvent(){const e=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(e)}callOnInitEvent(){const e=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(e)}initWebComponent(){const e=this.attachShadow({mode:"open"}),t=document.createElement("template");t.innerHTML='<style>.jb-popover-web-component {\n  position: absolute;\n  display: none;\n  inset-block-start: 64px;\n  inset-inline-start: 0;\n  z-index: var(--jb-popover-z-index, 10);\n  will-change: transform;\n  transition: transform 0.3s 0s ease;\n}\n@media (min-width: 320px) and (max-width: 479px) {\n  .jb-popover-web-component {\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    bottom: 0;\n    position: fixed;\n    width: 100vw;\n    height: 100vh;\n    background-color: rgba(0, 0, 0, 0.5);\n    backdrop-filter: blur(5px);\n    display: none;\n    grid-template-rows: 1fr auto;\n    grid-template-columns: 1fr;\n    grid-template-areas: "." "content-wrapper";\n    overflow-x: hidden;\n  }\n}\n.jb-popover-web-component.--opened {\n  display: grid;\n}\n.jb-popover-web-component .popover-content-wrapper {\n  background-color: var(--jb-popover-bg-color, #fff);\n  border-radius: var(--jb-popover-border-radius, 24px);\n  padding: 16px;\n  box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25), -8px -8px 12px 0 rgba(255, 255, 255, 0.3);\n  display: grid;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  will-change: transform;\n  transition: transform 0.3s 0s ease;\n}\n@media (min-width: 320px) and (max-width: 479px) {\n  .jb-popover-web-component .popover-content-wrapper {\n    border-radius: var(--jb-popover-border-radius, 24px) var(--jb-popover-border-radius, 24px) 0 0;\n    grid-area: content-wrapper;\n    padding: 0;\n    padding: 32px 0;\n  }\n}</style>\n<div class="jb-popover-web-component">\r\n  <div class="popover-background"></div>\r\n  <div class="popover-content-wrapper">\r\n      <slot></slot>\r\n  </div>\r\n</div>',e.appendChild(t.content.cloneNode(!0)),this.elements={componentWrapper:e.querySelector(".jb-popover-web-component"),background:e.querySelector(".popover-background"),contentWrapper:e.querySelector(".popover-content-wrapper")}}initProp(){t(this,o,"m",a).call(this)}checkInitialOpenness(){window.location.hash==`#${this.id}`&&(this.triggerUrlOpenEvent(),this.open())}triggerUrlOpenEvent(){const e=new CustomEvent("urlOpen",{bubbles:!0,composed:!0});this.dispatchEvent(e)}static get observedAttributes(){return["is-open","id"]}attributeChangedCallback(e,t,n){this.onAttributeChange(e,n)}onAttributeChange(e,n){switch(e){case"is-open":"true"==n?t(this,r,"f")||this.open():t(this,r,"f")&&this.close();break;case"id":this.id=n}}onBackgroundClick(){t(this,o,"m",p).call(this,"BACKGROUND_CLICK"),t(this,i,"f")&&this.close()}close(){n(this,r,!1,"f"),this.elements.componentWrapper.classList.remove("--opened"),this.elements.componentWrapper.classList.add("--closed")}open(){n(this,r,!0,"f"),this.elements.componentWrapper.classList.remove("--closed"),this.elements.componentWrapper.classList.add("--opened")}}r=new WeakMap,s=new WeakMap,i=new WeakMap,d=new WeakMap,c=new WeakMap,l=new WeakMap,o=new WeakSet,a=function(){this.elements.background.addEventListener("click",this.onBackgroundClick.bind(this)),window.addEventListener("popstate",t(this,d,"f")),this.elements.contentWrapper.addEventListener("mouseenter",t(this,l,"f")),this.elements.contentWrapper.addEventListener("mouseleave",t(this,c,"f"))},p=function(e){const t=new CustomEvent("close",{detail:{eventType:e}});this.dispatchEvent(t)},h=function(){return this.overflowDom?this.overflowDom.getBoundingClientRect().bottom:window.innerHeight};!customElements.get("jb-popover")&&window.customElements.define("jb-popover",m),e.JBPopoverWebComponent=m}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).JBButton={})}(this,(function(e){"use strict";function t(e,t,n,o){if("a"===n&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?o:"a"===n?o.call(e):o?o.value:t.get(e)}function n(e,t,n,o,s){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!s)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!s:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?s.call(e,n):s?s.value=n:t.set(e,n),n}"function"==typeof SuppressedError&&SuppressedError;const o=()=>/Mobi/i.test(window.navigator.userAgent);var s,r,i,a,p,d,l,c,h,m;class v extends HTMLElement{get JBID(){return t(this,i,"f")}get isOpen(){return t(this,r,"f")}get PopoverHashPath(){return this.id?`#${this.id}`:null}constructor(){super(),s.add(this),r.set(this,!1),i.set(this,Symbol()),a.set(this,!0),l.set(this,(e=>{this.isOpen&&o()&&(this.close(),t(this,s,"m",d).call(this,"HISTORY_BACK_EVENT"))})),this.overflowHandler="NONE",this.overflowDom=null,c.set(this,(()=>{"SLIDE"==this.overflowHandler&&(this.elements.contentWrapper.style.transform="translateY(0px)")})),h.set(this,(()=>{if("SLIDE"==this.overflowHandler){const e=this.elements.contentWrapper.getBoundingClientRect(),n=t(this,s,"m",m).call(this)-e.bottom;n<0&&(this.elements.contentWrapper.style.transform=`translateY(${n}px)`)}})),this.initWebComponent()}connectedCallback(){this.callOnLoadEvent(),t(this,s,"m",p).call(this),this.callOnInitEvent()}disconnectedCallback(){window.removeEventListener("popstate",t(this,l,"f"))}callOnLoadEvent(){const e=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(e)}callOnInitEvent(){const e=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(e)}initWebComponent(){const e=this.attachShadow({mode:"open"}),t=document.createElement("template");t.innerHTML='<style>.jb-popover-web-component {\n  position: absolute;\n  display: none;\n  inset-block-start: 64px;\n  inset-inline-start: 0;\n  z-index: var(--jb-popover-z-index, 10);\n  will-change: transform;\n  transition: transform 0.3s 0s ease;\n}\n@media (min-width: 320px) and (max-width: 479px) {\n  .jb-popover-web-component {\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    bottom: 0;\n    position: fixed;\n    width: 100vw;\n    height: 100vh;\n    background-color: rgba(0, 0, 0, 0.5);\n    backdrop-filter: blur(5px);\n    display: none;\n    grid-template-rows: 1fr auto;\n    grid-template-columns: 1fr;\n    grid-template-areas: "." "content-wrapper";\n    overflow-x: hidden;\n  }\n}\n.jb-popover-web-component.--opened {\n  display: grid;\n}\n.jb-popover-web-component .popover-content-wrapper {\n  background-color: var(--jb-popover-bg-color, #fff);\n  border-radius: var(--jb-popover-border-radius, 24px);\n  padding: 16px;\n  box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25), -8px -8px 12px 0 rgba(255, 255, 255, 0.3);\n  display: grid;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  will-change: transform;\n  transition: transform 0.3s 0s ease;\n}\n@media (min-width: 320px) and (max-width: 479px) {\n  .jb-popover-web-component .popover-content-wrapper {\n    border-radius: var(--jb-popover-border-radius, 24px) var(--jb-popover-border-radius, 24px) 0 0;\n    grid-area: content-wrapper;\n    padding: 0;\n    padding: 32px 0;\n  }\n}</style>\n<div class="jb-popover-web-component">\r\n  <div class="popover-background"></div>\r\n  <div class="popover-content-wrapper">\r\n      <slot></slot>\r\n  </div>\r\n</div>',e.appendChild(t.content.cloneNode(!0)),this.elements={componentWrapper:e.querySelector(".jb-popover-web-component"),background:e.querySelector(".popover-background"),contentWrapper:e.querySelector(".popover-content-wrapper")}}checkInitialOpenness(){window.location.hash==`#${this.id}`&&(this.triggerUrlOpenEvent(),this.open())}triggerUrlOpenEvent(){const e=new CustomEvent("urlOpen",{bubbles:!0,composed:!0});this.dispatchEvent(e)}static get observedAttributes(){return["is-open","id"]}attributeChangedCallback(e,t,n){this.onAttributeChange(e,n)}onAttributeChange(e,n){switch(e){case"is-open":"true"==n?t(this,r,"f")||this.open():t(this,r,"f")&&this.close();break;case"id":this.id=n}}onBackgroundClick(){t(this,s,"m",d).call(this,"BACKGROUND_CLICK"),t(this,a,"f")&&this.close()}close(){n(this,r,!1,"f"),this.elements.componentWrapper.classList.remove("--opened"),this.elements.componentWrapper.classList.add("--closed"),"jb-popover-open"==window.history.state&&null!==this.PopoverHashPath&&(window.removeEventListener("popstate",t(this,l,"f")),window.location.hash==this.PopoverHashPath&&history.go(-1))}open(){n(this,r,!0,"f"),this.elements.componentWrapper.classList.remove("--closed"),this.elements.componentWrapper.classList.add("--opened"),o()&&null!==this.PopoverHashPath&&(window.history.pushState("jb-popover-open","",this.PopoverHashPath),window.addEventListener("popstate",t(this,l,"f"),{once:!0}))}}r=new WeakMap,i=new WeakMap,a=new WeakMap,l=new WeakMap,c=new WeakMap,h=new WeakMap,s=new WeakSet,p=function(){this.elements.background.addEventListener("click",this.onBackgroundClick.bind(this)),this.elements.contentWrapper.addEventListener("mouseenter",t(this,h,"f")),this.elements.contentWrapper.addEventListener("mouseleave",t(this,c,"f"))},d=function(e){const t=new CustomEvent("close",{detail:{eventType:e}});this.dispatchEvent(t)},m=function(){return this.overflowDom?this.overflowDom.getBoundingClientRect().bottom:window.innerHeight};!customElements.get("jb-popover")&&window.customElements.define("jb-popover",v),e.JBPopoverWebComponent=v}));
 //# sourceMappingURL=jb-popover.umd.js.map

package/dist/jb-popover.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"jb-popover.umd.js","sources":["../lib/jb-popover.ts","../../../common/scripts/device-detection.ts"],"sourcesContent":["import { symbol } from \"prop-types\";\r\nimport HTML from \"./jb-popover.html\";\r\nimport CSS from \"./jb-popover.scss\";\r\nimport { ElementsObject } from \"./types\";\r\nimport { isMobile } from \"../../../common/scripts/device-detection\";\r\n\r\nexport class JBPopoverWebComponent extends HTMLElement {\r\n  #isOpen = false;\r\n  #JBID = Symbol();\r\n  elements: ElementsObject;\r\n  get JBID() {\r\n    return this.#JBID;\r\n  }\r\n  #autoCloseOnBackgroundClick = false;\r\n  get isOpen() {\r\n    return this.#isOpen;\r\n  }\r\n  constructor() {\r\n    super();\r\n    this.initWebComponent();\r\n  }\r\n  connectedCallback() {\r\n    // standard web component event that called when all of dom is bound\r\n    this.callOnLoadEvent();\r\n    this.initProp();\r\n    this.callOnInitEvent();\r\n  }\r\n  disconnectedCallback() {\r\n    window.removeEventListener(\"popstate\", this.#onBrowserBack);\r\n  }\r\n  callOnLoadEvent() {\r\n    const event = new CustomEvent(\"load\", { bubbles: true, composed: true });\r\n    this.dispatchEvent(event);\r\n  }\r\n  callOnInitEvent() {\r\n    const event = new CustomEvent(\"init\", { bubbles: true, composed: true });\r\n    this.dispatchEvent(event);\r\n  }\r\n  initWebComponent() {\r\n    const shadowRoot = this.attachShadow({\r\n      mode: \"open\",\r\n    });\r\n    const html = `<style>${CSS}</style>` + \"\\n\" + HTML;\r\n    const element = document.createElement(\"template\");\r\n    element.innerHTML = html;\r\n    shadowRoot.appendChild(element.content.cloneNode(true));\r\n    this.elements = {\r\n      componentWrapper: shadowRoot.querySelector(\".jb-popover-web-component\")!,\r\n      background: shadowRoot.querySelector(\".popover-background\")!,\r\n      contentWrapper: shadowRoot.querySelector(\".popover-content-wrapper\")!,\r\n    };\r\n  }\r\n  #registerEventListener() {\r\n    this.elements.background.addEventListener(\r\n      \"click\",\r\n      this.onBackgroundClick.bind(this)\r\n    );\r\n\r\n    window.addEventListener(\"popstate\", this.#onBrowserBack);\r\n    this.elements.contentWrapper.addEventListener('mouseenter', this.#fixCalendarContainerPos);\r\n    this.elements.contentWrapper.addEventListener('mouseleave', this.#resetCalendarContainerPos);\r\n  }\r\n  initProp() {\r\n    this.#registerEventListener();\r\n  }\r\n  checkInitialOpenness() {\r\n    //if page has modal url we open it automatically\r\n    const location = window.location;\r\n    if (location.hash == `#${this.id}`) {\r\n      this.triggerUrlOpenEvent();\r\n      this.open();\r\n    }\r\n  }\r\n  triggerUrlOpenEvent() {\r\n    //when modal open itself becuase url contain modal id\r\n    const event = new CustomEvent(\"urlOpen\", { bubbles: true, composed: true });\r\n    this.dispatchEvent(event);\r\n  }\r\n  static get observedAttributes() {\r\n    return [\"is-open\", \"id\"];\r\n  }\r\n  attributeChangedCallback(name: string, oldValue: string, newValue: string) {\r\n    // do something when an attribute has changed\r\n    this.onAttributeChange(name, newValue);\r\n  }\r\n  onAttributeChange(name: string, value: string) {\r\n    switch (name) {\r\n      case \"is-open\":\r\n        if (value == \"true\") {\r\n          if (!this.#isOpen) {\r\n            this.open();\r\n          }\r\n        } else {\r\n          if (this.#isOpen) {\r\n            this.close();\r\n          }\r\n        }\r\n        break;\r\n      case \"id\":\r\n        this.id = value;\r\n        break;\r\n    }\r\n  }\r\n  onBackgroundClick() {\r\n    this.#dispatchCloseEvent(\"BACKGROUND_CLICK\");\r\n    if (this.#autoCloseOnBackgroundClick) {\r\n      this.close();\r\n    }\r\n  }\r\n  #dispatchCloseEvent(type: \"BACKGROUND_CLICK\" | \"HISTORY_BACK_EVENT\" | \"OUTSIDE_CLICK\" | \"CLOSE_BUTTON_CLICK\") {\r\n    //we have many ways to dispatch close event like back button on close clicked\r\n    const event = new CustomEvent(\"close\", { detail: { eventType: type } });\r\n    this.dispatchEvent(event);\r\n  }\r\n  /**\r\n   * @public\r\n   * will close popover\r\n   */\r\n  close() {\r\n    this.#isOpen = false;\r\n    this.elements.componentWrapper.classList.remove(\"--opened\");\r\n    this.elements.componentWrapper.classList.add(\"--closed\");\r\n  }\r\n  /**\r\n   * @public\r\n   * will open popover\r\n   */\r\n  open() {\r\n    this.#isOpen = true;\r\n    this.elements.componentWrapper.classList.remove(\"--closed\");\r\n    this.elements.componentWrapper.classList.add(\"--opened\");\r\n  }\r\n  #onBrowserBack = (e: PopStateEvent) => {\r\n    if (this.isOpen && isMobile()) {\r\n      e.preventDefault();\r\n      this.close();\r\n      this.#dispatchCloseEvent(\"HISTORY_BACK_EVENT\");\r\n\r\n    }\r\n  }\r\n  overflowHandler: \"NONE\" | \"SLIDE\" = \"NONE\";\r\n  overflowDom:HTMLElement|null = null;\r\n  #resetCalendarContainerPos = () => {\r\n    if (this.overflowHandler == \"SLIDE\") {\r\n      this.elements.contentWrapper.style.transform = `translateY(${0}px)`;\r\n    }\r\n  }\r\n  #fixCalendarContainerPos = () => {\r\n    if (this.overflowHandler == \"SLIDE\") {\r\n      //bounding client rect\r\n      const bcr = this.elements.contentWrapper.getBoundingClientRect();\r\n      const overflowSize = this.#getParentBottom() - bcr.bottom;\r\n      if (overflowSize < 0) {\r\n        this.elements.contentWrapper.style.transform = `translateY(${overflowSize}px)`;\r\n      }\r\n    }\r\n\r\n  }\r\n  /**\r\n   * @description return height of element that we want to calc our overflow based on.\r\n   */\r\n  #getParentBottom():number{\r\n    if(this.overflowDom){\r\n      return this.overflowDom.getBoundingClientRect().bottom;\r\n    }\r\n    //default height of parent if no parent set\r\n    return window.innerHeight;\r\n  }\r\n}\r\nconst myElementNotExists = !customElements.get(\"jb-popover\");\r\nif (myElementNotExists) {\r\n  window.customElements.define(\"jb-popover\", JBPopoverWebComponent);\r\n}\r\n","export const isMobile = ()=>{\r\n  return /Mobi/i.test(window.navigator.userAgent);\r\n};"],"names":["JBPopoverWebComponent","HTMLElement","JBID","__classPrivateFieldGet","this","_JBPopoverWebComponent_JBID","isOpen","_JBPopoverWebComponent_isOpen","constructor","super","set","Symbol","_JBPopoverWebComponent_autoCloseOnBackgroundClick","_JBPopoverWebComponent_onBrowserBack","e","test","window","navigator","userAgent","preventDefault","close","_JBPopoverWebComponent_instances","_JBPopoverWebComponent_dispatchCloseEvent","call","overflowHandler","overflowDom","_JBPopoverWebComponent_resetCalendarContainerPos","elements","contentWrapper","style","transform","_JBPopoverWebComponent_fixCalendarContainerPos","bcr","getBoundingClientRect","overflowSize","_JBPopoverWebComponent_getParentBottom","bottom","initWebComponent","connectedCallback","callOnLoadEvent","initProp","callOnInitEvent","disconnectedCallback","removeEventListener","event","CustomEvent","bubbles","composed","dispatchEvent","shadowRoot","attachShadow","mode","element","document","createElement","innerHTML","appendChild","content","cloneNode","componentWrapper","querySelector","background","_JBPopoverWebComponent_registerEventListener","checkInitialOpenness","location","hash","id","triggerUrlOpenEvent","open","observedAttributes","attributeChangedCallback","name","oldValue","newValue","onAttributeChange","value","onBackgroundClick","__classPrivateFieldSet","classList","remove","add","addEventListener","bind","type","detail","eventType","innerHeight","customElements","get","define"],"mappings":"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"}
+{"version":3,"file":"jb-popover.umd.js","sources":["../../../common/scripts/device-detection.ts","../lib/jb-popover.ts"],"sourcesContent":["export const isMobile = ()=>{\r\n  return /Mobi/i.test(window.navigator.userAgent);\r\n};","import { symbol } from \"prop-types\";\r\nimport HTML from \"./jb-popover.html\";\r\nimport CSS from \"./jb-popover.scss\";\r\nimport { ElementsObject } from \"./types\";\r\nimport { isMobile } from \"../../../common/scripts/device-detection\";\r\n\r\nexport class JBPopoverWebComponent extends HTMLElement {\r\n  #isOpen = false;\r\n  #JBID = Symbol();\r\n  elements: ElementsObject;\r\n  get JBID() {\r\n    return this.#JBID;\r\n  }\r\n  #autoCloseOnBackgroundClick = true;\r\n  get isOpen() {\r\n    return this.#isOpen;\r\n  }\r\n  get PopoverHashPath():string | null{\r\n    //this used to add # route to prevent back button in mobile. it only work if element have id\r\n    return this.id?`#${this.id}`:null;\r\n  }\r\n  constructor() {\r\n    super();\r\n    this.initWebComponent();\r\n  }\r\n  connectedCallback() {\r\n    // standard web component event that called when all of dom is bound\r\n    this.callOnLoadEvent();\r\n    this.#registerEventListener();\r\n    this.callOnInitEvent();\r\n  }\r\n  disconnectedCallback() {\r\n    window.removeEventListener(\"popstate\", this.#onBrowserBack);\r\n  }\r\n  callOnLoadEvent() {\r\n    const event = new CustomEvent(\"load\", { bubbles: true, composed: true });\r\n    this.dispatchEvent(event);\r\n  }\r\n  callOnInitEvent() {\r\n    const event = new CustomEvent(\"init\", { bubbles: true, composed: true });\r\n    this.dispatchEvent(event);\r\n  }\r\n  initWebComponent() {\r\n    const shadowRoot = this.attachShadow({\r\n      mode: \"open\",\r\n    });\r\n    const html = `<style>${CSS}</style>` + \"\\n\" + HTML;\r\n    const element = document.createElement(\"template\");\r\n    element.innerHTML = html;\r\n    shadowRoot.appendChild(element.content.cloneNode(true));\r\n    this.elements = {\r\n      componentWrapper: shadowRoot.querySelector(\".jb-popover-web-component\")!,\r\n      background: shadowRoot.querySelector(\".popover-background\")!,\r\n      contentWrapper: shadowRoot.querySelector(\".popover-content-wrapper\")!,\r\n    };\r\n  }\r\n  #registerEventListener() {\r\n    this.elements.background.addEventListener(\r\n      \"click\",\r\n      this.onBackgroundClick.bind(this)\r\n    );\r\n    //we add popstate event listener\r\n    this.elements.contentWrapper.addEventListener('mouseenter', this.#fixCalendarContainerPos);\r\n    this.elements.contentWrapper.addEventListener('mouseleave', this.#resetCalendarContainerPos);\r\n  }\r\n  checkInitialOpenness() {\r\n    //if page has modal url we open it automatically\r\n    const location = window.location;\r\n    if (location.hash == `#${this.id}`) {\r\n      this.triggerUrlOpenEvent();\r\n      this.open();\r\n    }\r\n  }\r\n  triggerUrlOpenEvent() {\r\n    //when modal open itself becuase url contain modal id\r\n    const event = new CustomEvent(\"urlOpen\", { bubbles: true, composed: true });\r\n    this.dispatchEvent(event);\r\n  }\r\n  static get observedAttributes() {\r\n    return [\"is-open\", \"id\"];\r\n  }\r\n  attributeChangedCallback(name: string, oldValue: string, newValue: string) {\r\n    // do something when an attribute has changed\r\n    this.onAttributeChange(name, newValue);\r\n  }\r\n  onAttributeChange(name: string, value: string) {\r\n    switch (name) {\r\n      case \"is-open\":\r\n        if (value == \"true\") {\r\n          if (!this.#isOpen) {\r\n            this.open();\r\n          }\r\n        } else {\r\n          if (this.#isOpen) {\r\n            this.close();\r\n          }\r\n        }\r\n        break;\r\n      case \"id\":\r\n        this.id = value;\r\n        break;\r\n    }\r\n  }\r\n  onBackgroundClick() {\r\n    this.#dispatchCloseEvent(\"BACKGROUND_CLICK\");\r\n    if (this.#autoCloseOnBackgroundClick) {\r\n      this.close();\r\n    }\r\n  }\r\n  #dispatchCloseEvent(type: \"BACKGROUND_CLICK\" | \"HISTORY_BACK_EVENT\" | \"OUTSIDE_CLICK\" | \"CLOSE_BUTTON_CLICK\") {\r\n    //we have many ways to dispatch close event like back button on close clicked\r\n    const event = new CustomEvent(\"close\", { detail: { eventType: type } });\r\n    this.dispatchEvent(event);\r\n  }\r\n  /**\r\n   * @public\r\n   * will close popover\r\n   */\r\n  close() {\r\n    this.#isOpen = false;\r\n    this.elements.componentWrapper.classList.remove(\"--opened\");\r\n    this.elements.componentWrapper.classList.add(\"--closed\");\r\n    // if we pushed state to the history but state doesn't popped yet we pop it.\r\n    if(window.history.state == \"jb-popover-open\" && this.PopoverHashPath !== null){\r\n      window.removeEventListener(\"popstate\", this.#onBrowserBack);\r\n      if(window.location.hash == this.PopoverHashPath){\r\n        history.go(-1);\r\n      }\r\n    }\r\n  }\r\n  /**\r\n   * @public\r\n   * will open popover\r\n   */\r\n  open() {\r\n    this.#isOpen = true;\r\n    this.elements.componentWrapper.classList.remove(\"--closed\");\r\n    this.elements.componentWrapper.classList.add(\"--opened\");\r\n    if (isMobile() && this.PopoverHashPath !== null) {\r\n      window.history.pushState('jb-popover-open',\"\",this.PopoverHashPath);\r\n      window.addEventListener(\"popstate\", this.#onBrowserBack,{once:true});\r\n    }\r\n  }\r\n  #onBrowserBack = (e: PopStateEvent) => {\r\n    if (this.isOpen && isMobile()) {\r\n      //we will push state when modal get open\r\n      this.close();\r\n      this.#dispatchCloseEvent(\"HISTORY_BACK_EVENT\");\r\n\r\n    }\r\n  }\r\n  overflowHandler: \"NONE\" | \"SLIDE\" = \"NONE\";\r\n  overflowDom:HTMLElement|null = null;\r\n  #resetCalendarContainerPos = () => {\r\n    if (this.overflowHandler == \"SLIDE\") {\r\n      this.elements.contentWrapper.style.transform = `translateY(${0}px)`;\r\n    }\r\n  }\r\n  #fixCalendarContainerPos = () => {\r\n    if (this.overflowHandler == \"SLIDE\") {\r\n      //bounding client rect\r\n      const bcr = this.elements.contentWrapper.getBoundingClientRect();\r\n      const overflowSize = this.#getParentBottom() - bcr.bottom;\r\n      if (overflowSize < 0) {\r\n        this.elements.contentWrapper.style.transform = `translateY(${overflowSize}px)`;\r\n      }\r\n    }\r\n\r\n  }\r\n  /**\r\n   * @description return height of element that we want to calc our overflow based on.\r\n   */\r\n  #getParentBottom():number{\r\n    if(this.overflowDom){\r\n      return this.overflowDom.getBoundingClientRect().bottom;\r\n    }\r\n    //default height of parent if no parent set\r\n    return window.innerHeight;\r\n  }\r\n}\r\nconst myElementNotExists = !customElements.get(\"jb-popover\");\r\nif (myElementNotExists) {\r\n  window.customElements.define(\"jb-popover\", JBPopoverWebComponent);\r\n}\r\n"],"names":["isMobile","test","window","navigator","userAgent","JBPopoverWebComponent","HTMLElement","JBID","__classPrivateFieldGet","this","_JBPopoverWebComponent_JBID","isOpen","_JBPopoverWebComponent_isOpen","PopoverHashPath","id","constructor","super","set","Symbol","_JBPopoverWebComponent_autoCloseOnBackgroundClick","_JBPopoverWebComponent_onBrowserBack","e","close","_JBPopoverWebComponent_instances","_JBPopoverWebComponent_dispatchCloseEvent","call","overflowHandler","overflowDom","_JBPopoverWebComponent_resetCalendarContainerPos","elements","contentWrapper","style","transform","_JBPopoverWebComponent_fixCalendarContainerPos","bcr","getBoundingClientRect","overflowSize","_JBPopoverWebComponent_getParentBottom","bottom","initWebComponent","connectedCallback","callOnLoadEvent","_JBPopoverWebComponent_registerEventListener","callOnInitEvent","disconnectedCallback","removeEventListener","event","CustomEvent","bubbles","composed","dispatchEvent","shadowRoot","attachShadow","mode","element","document","createElement","innerHTML","appendChild","content","cloneNode","componentWrapper","querySelector","background","checkInitialOpenness","location","hash","triggerUrlOpenEvent","open","observedAttributes","attributeChangedCallback","name","oldValue","newValue","onAttributeChange","value","onBackgroundClick","__classPrivateFieldSet","classList","remove","add","history","state","go","pushState","addEventListener","once","bind","type","detail","eventType","innerHeight","customElements","get","define"],"mappings":"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"}

package/dist/web-component/jb-popover/lib/jb-popover.d.ts

@@ -1,32 +1,32 @@
-import { ElementsObject } from "./types";
-export declare class JBPopoverWebComponent extends HTMLElement {
-    #private;
-    elements: ElementsObject;
-    get JBID(): symbol;
-    get isOpen(): boolean;
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    callOnLoadEvent(): void;
-    callOnInitEvent(): void;
-    initWebComponent(): void;
-    initProp(): void;
-    checkInitialOpenness(): void;
-    triggerUrlOpenEvent(): void;
-    static get observedAttributes(): string[];
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    onAttributeChange(name: string, value: string): void;
-    onBackgroundClick(): void;
-    /**
-     * @public
-     * will close popover
-     */
-    close(): void;
-    /**
-     * @public
-     * will open popover
-     */
-    open(): void;
-    overflowHandler: "NONE" | "SLIDE";
-    overflowDom: HTMLElement | null;
-}
+import { ElementsObject } from "./types";
+export declare class JBPopoverWebComponent extends HTMLElement {
+    #private;
+    elements: ElementsObject;
+    get JBID(): symbol;
+    get isOpen(): boolean;
+    get PopoverHashPath(): string | null;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    callOnLoadEvent(): void;
+    callOnInitEvent(): void;
+    initWebComponent(): void;
+    checkInitialOpenness(): void;
+    triggerUrlOpenEvent(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    onAttributeChange(name: string, value: string): void;
+    onBackgroundClick(): void;
+    /**
+     * @public
+     * will close popover
+     */
+    close(): void;
+    /**
+     * @public
+     * will open popover
+     */
+    open(): void;
+    overflowHandler: "NONE" | "SLIDE";
+    overflowDom: HTMLElement | null;
+}

package/dist/web-component/jb-popover/lib/types.d.ts

@@ -1,5 +1,5 @@
-export type ElementsObject = {
-    componentWrapper: HTMLDivElement;
-    background: HTMLDivElement;
-    contentWrapper: HTMLDivElement;
-};
+export type ElementsObject = {
+    componentWrapper: HTMLDivElement;
+    background: HTMLDivElement;
+    contentWrapper: HTMLDivElement;
+};

package/lib/jb-popover.scss

@@ -1,4 +1,4 @@
-@import '../../../common/scss/Medias.scss';
+@use '../../../common/scss/Medias.scss' as *;
 
 .jb-popover-web-component {
     position: absolute;

package/lib/jb-popover.ts

@@ -11,10 +11,14 @@ export class JBPopoverWebComponent extends HTMLElement {
   get JBID() {
     return this.#JBID;
   }
-  #autoCloseOnBackgroundClick = false;
+  #autoCloseOnBackgroundClick = true;
   get isOpen() {
     return this.#isOpen;
   }
+  get PopoverHashPath():string | null{
+    //this used to add # route to prevent back button in mobile. it only work if element have id
+    return this.id?`#${this.id}`:null;
+  }
   constructor() {
     super();
     this.initWebComponent();
@@ -22,7 +26,7 @@ export class JBPopoverWebComponent extends HTMLElement {
   connectedCallback() {
     // standard web component event that called when all of dom is bound
     this.callOnLoadEvent();
-    this.initProp();
+    this.#registerEventListener();
     this.callOnInitEvent();
   }
   disconnectedCallback() {
@@ -55,14 +59,10 @@ export class JBPopoverWebComponent extends HTMLElement {
       "click",
       this.onBackgroundClick.bind(this)
     );
-
-    window.addEventListener("popstate", this.#onBrowserBack);
+    //we add popstate event listener
     this.elements.contentWrapper.addEventListener('mouseenter', this.#fixCalendarContainerPos);
     this.elements.contentWrapper.addEventListener('mouseleave', this.#resetCalendarContainerPos);
   }
-  initProp() {
-    this.#registerEventListener();
-  }
   checkInitialOpenness() {
     //if page has modal url we open it automatically
     const location = window.location;
@@ -120,6 +120,13 @@ export class JBPopoverWebComponent extends HTMLElement {
     this.#isOpen = false;
     this.elements.componentWrapper.classList.remove("--opened");
     this.elements.componentWrapper.classList.add("--closed");
+    // if we pushed state to the history but state doesn't popped yet we pop it.
+    if(window.history.state == "jb-popover-open" && this.PopoverHashPath !== null){
+      window.removeEventListener("popstate", this.#onBrowserBack);
+      if(window.location.hash == this.PopoverHashPath){
+        history.go(-1);
+      }
+    }
   }
   /**
    * @public
@@ -129,10 +136,14 @@ export class JBPopoverWebComponent extends HTMLElement {
     this.#isOpen = true;
     this.elements.componentWrapper.classList.remove("--closed");
     this.elements.componentWrapper.classList.add("--opened");
+    if (isMobile() && this.PopoverHashPath !== null) {
+      window.history.pushState('jb-popover-open',"",this.PopoverHashPath);
+      window.addEventListener("popstate", this.#onBrowserBack,{once:true});
+    }
   }
   #onBrowserBack = (e: PopStateEvent) => {
     if (this.isOpen && isMobile()) {
-      e.preventDefault();
+      //we will push state when modal get open
       this.close();
       this.#dispatchCloseEvent("HISTORY_BACK_EVENT");
 

package/package.json

@@ -13,7 +13,7 @@
     "bottomsheet",
     "web component"
   ],
-  "version": "0.0.7",
+  "version": "1.1.0",
   "bugs": "https://github.com/javadbat/jb-popover/issues",
   "license": "MIT",
   "files": [