jb-popover 0.0.3 → 0.0.5

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;var n,o,r,s,i,a,p,l,c,d;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,l.set(this,(()=>{"SLIDE"==this.overflowHandler&&(this.elements.contentWrapper.style.transform="translateY(0px)")})),c.set(this,(()=>{if(console.log("ssss"),"SLIDE"==this.overflowHandler){const t=this.elements.contentWrapper.getBoundingClientRect(),o=e(this,n,"m",d).call(this)-t.bottom;console.log(this.overflowDom,e(this,n,"m",d).call(this),t.bottom,o),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,l=new WeakMap,c=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,c,"f")),this.elements.contentWrapper.addEventListener("mouseleave",e(this,l,"f"))},a=function(e){const t=new CustomEvent("close",{detail:{eventType:e}});this.dispatchEvent(t)},d=function(){return this.overflowDom?this.overflowDom.getBoundingClientRect().bottom:window.innerHeight};!customElements.get("jb-popover")&&window.customElements.define("jb-popover",h),exports.JBPopoverWebComponent=h;
 //# 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":"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"}
+{"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    console.log(\"ssss\");\r\n    \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      console.log(this.overflowDom,this.#getParentBottom(),bcr.bottom,overflowSize);\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","console","log","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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"}

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;var n,o,r,s,i,a,p,l,c,d;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,l.set(this,(()=>{"SLIDE"==this.overflowHandler&&(this.elements.contentWrapper.style.transform="translateY(0px)")})),c.set(this,(()=>{if(console.log("ssss"),"SLIDE"==this.overflowHandler){const t=this.elements.contentWrapper.getBoundingClientRect(),o=e(this,n,"m",d).call(this)-t.bottom;console.log(this.overflowDom,e(this,n,"m",d).call(this),t.bottom,o),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,l=new WeakMap,c=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,c,"f")),this.elements.contentWrapper.addEventListener("mouseleave",e(this,l,"f"))},a=function(e){const t=new CustomEvent("close",{detail:{eventType:e}});this.dispatchEvent(t)},d=function(){return this.overflowDom?this.overflowDom.getBoundingClientRect().bottom:window.innerHeight};!customElements.get("jb-popover")&&window.customElements.define("jb-popover",h);export{h 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":["../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    console.log(\"ssss\");\r\n    \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      console.log(this.overflowDom,this.#getParentBottom(),bcr.bottom,overflowSize);\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","console","log","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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"}

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;var o,s,r,i,a,p,l,c,d,h;class m extends HTMLElement{get JBID(){return t(this,r,"f")}get isOpen(){return t(this,s,"f")}constructor(){super(),o.add(this),s.set(this,!1),r.set(this,Symbol()),i.set(this,!1),l.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)")})),d.set(this,(()=>{if(console.log("ssss"),"SLIDE"==this.overflowHandler){const e=this.elements.contentWrapper.getBoundingClientRect(),n=t(this,o,"m",h).call(this)-e.bottom;console.log(this.overflowDom,t(this,o,"m",h).call(this),e.bottom,n),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,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")}}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,s,"f")||this.open():t(this,s,"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,s,!1,"f"),this.elements.componentWrapper.classList.remove("--opened"),this.elements.componentWrapper.classList.add("--closed")}open(){n(this,s,!0,"f"),this.elements.componentWrapper.classList.remove("--closed"),this.elements.componentWrapper.classList.add("--opened")}}s=new WeakMap,r=new WeakMap,i=new WeakMap,l=new WeakMap,c=new WeakMap,d=new WeakMap,o=new WeakSet,a=function(){this.elements.background.addEventListener("click",this.onBackgroundClick.bind(this)),window.addEventListener("popstate",t(this,l,"f")),this.elements.contentWrapper.addEventListener("mouseenter",t(this,d,"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}));
 //# 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":["../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    console.log(\"ssss\");\r\n    \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      console.log(this.overflowDom,this.#getParentBottom(),bcr.bottom,overflowSize);\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","console","log","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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"}

package/lib/jb-popover.ts

@@ -146,10 +146,13 @@ export class JBPopoverWebComponent extends HTMLElement {
     }
   }
   #fixCalendarContainerPos = () => {
+    console.log("ssss");
+    
     if (this.overflowHandler == "SLIDE") {
       //bounding client rect
       const bcr = this.elements.contentWrapper.getBoundingClientRect();
       const overflowSize = this.#getParentBottom() - bcr.bottom;
+      console.log(this.overflowDom,this.#getParentBottom(),bcr.bottom,overflowSize);
       if (overflowSize < 0) {
         this.elements.contentWrapper.style.transform = `translateY(${overflowSize}px)`;
       }

package/package.json

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