jb-popover 0.0.2 → 0.0.4

package/README.md

@@ -30,6 +30,15 @@ document.querySelector('jb-popover').open();
 document.querySelector('jb-popover').close();
 ```
 <!-- in mobile view we close popover on back click and prevent real back click event -->
+## overflow
+
+we can handle overflow by set 2 ``overflowHandler`, `overflowDom` property
+```javascript
+//popover will slide soothly up if it overflow the page or any other assigned container
+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');
+```
 
 ## set custom style
 

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,i,s,a;class p 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()),i.set(this,!1),a.set(this,(t=>{this.isOpen&&/Mobi/i.test(window.navigator.userAgent)&&(t.preventDefault(),this.close(),e(this,n,"m",s).call(this,"HISTORY_BACK_EVENT"))})),this.initWebComponent()}connectedCallback(){this.callOnLoadEvent(),this.initProp(),this.callOnInitEvent()}disconnectedCallback(){window.removeEventListener("popstate",e(this,a,"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}\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")}}registerEventListener(){this.elements.background.addEventListener("click",this.onBackgroundClick.bind(this)),window.addEventListener("popstate",e(this,a,"f"))}initProp(){this.registerEventListener()}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",s).call(this,"BACKGROUND_CLICK"),e(this,i,"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,i=new WeakMap,a=new WeakMap,n=new WeakSet,s=function(e){const t=new CustomEvent("close",{detail:{eventType:e}});this.dispatchEvent(t)};!customElements.get("jb-popover")&&window.customElements.define("jb-popover",p),exports.JBPopoverWebComponent=p;
+"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,l,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,c.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(),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,c=new WeakMap,l=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,l,"f")),this.elements.contentWrapper.addEventListener("mouseleave",e(this,c,"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    window.addEventListener(\"popstate\", this.#onBrowserBack);\r\n\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}\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","initWebComponent","connectedCallback","callOnLoadEvent","initProp","callOnInitEvent","disconnectedCallback","removeEventListener","event","CustomEvent","bubbles","composed","dispatchEvent","shadowRoot","attachShadow","mode","element","document","createElement","innerHTML","appendChild","content","cloneNode","elements","componentWrapper","querySelector","background","contentWrapper","registerEventListener","addEventListener","onBackgroundClick","bind","checkInitialOpenness","location","hash","id","triggerUrlOpenEvent","open","observedAttributes","attributeChangedCallback","name","oldValue","newValue","onAttributeChange","value","__classPrivateFieldSet","classList","remove","add","type","detail","eventType","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\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","bcr","getBoundingClientRect","overflowSize","_JBPopoverWebComponent_getParentBottom","bottom","console","log","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,i,s,a;class p 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()),i.set(this,!1),a.set(this,(t=>{this.isOpen&&/Mobi/i.test(window.navigator.userAgent)&&(t.preventDefault(),this.close(),e(this,n,"m",s).call(this,"HISTORY_BACK_EVENT"))})),this.initWebComponent()}connectedCallback(){this.callOnLoadEvent(),this.initProp(),this.callOnInitEvent()}disconnectedCallback(){window.removeEventListener("popstate",e(this,a,"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}\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")}}registerEventListener(){this.elements.background.addEventListener("click",this.onBackgroundClick.bind(this)),window.addEventListener("popstate",e(this,a,"f"))}initProp(){this.registerEventListener()}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",s).call(this,"BACKGROUND_CLICK"),e(this,i,"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,i=new WeakMap,a=new WeakMap,n=new WeakSet,s=function(e){const t=new CustomEvent("close",{detail:{eventType:e}});this.dispatchEvent(t)};!customElements.get("jb-popover")&&window.customElements.define("jb-popover",p);export{p 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("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    window.addEventListener(\"popstate\", this.#onBrowserBack);\r\n\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}\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","initWebComponent","connectedCallback","callOnLoadEvent","initProp","callOnInitEvent","disconnectedCallback","removeEventListener","event","CustomEvent","bubbles","composed","dispatchEvent","shadowRoot","attachShadow","mode","element","document","createElement","innerHTML","appendChild","content","cloneNode","elements","componentWrapper","querySelector","background","contentWrapper","registerEventListener","addEventListener","onBackgroundClick","bind","checkInitialOpenness","location","hash","id","triggerUrlOpenEvent","open","observedAttributes","attributeChangedCallback","name","oldValue","newValue","onAttributeChange","value","__classPrivateFieldSet","classList","remove","add","type","detail","eventType","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\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","bcr","getBoundingClientRect","overflowSize","_JBPopoverWebComponent_getParentBottom","bottom","console","log","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,i,s,p,a;class d extends HTMLElement{get JBID(){return t(this,i,"f")}get isOpen(){return t(this,r,"f")}constructor(){super(),o.add(this),r.set(this,!1),i.set(this,Symbol()),s.set(this,!1),a.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.initWebComponent()}connectedCallback(){this.callOnLoadEvent(),this.initProp(),this.callOnInitEvent()}disconnectedCallback(){window.removeEventListener("popstate",t(this,a,"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}\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")}}registerEventListener(){this.elements.background.addEventListener("click",this.onBackgroundClick.bind(this)),window.addEventListener("popstate",t(this,a,"f"))}initProp(){this.registerEventListener()}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,s,"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,i=new WeakMap,s=new WeakMap,a=new WeakMap,o=new WeakSet,p=function(e){const t=new CustomEvent("close",{detail:{eventType:e}});this.dispatchEvent(t)};!customElements.get("jb-popover")&&window.customElements.define("jb-popover",d),e.JBPopoverWebComponent=d}));
+!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,l,c,d,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),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("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,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,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    window.addEventListener(\"popstate\", this.#onBrowserBack);\r\n\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}\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","initWebComponent","connectedCallback","callOnLoadEvent","initProp","callOnInitEvent","disconnectedCallback","removeEventListener","event","CustomEvent","bubbles","composed","dispatchEvent","shadowRoot","attachShadow","mode","element","document","createElement","innerHTML","appendChild","content","cloneNode","elements","componentWrapper","querySelector","background","contentWrapper","registerEventListener","addEventListener","onBackgroundClick","bind","checkInitialOpenness","location","hash","id","triggerUrlOpenEvent","open","observedAttributes","attributeChangedCallback","name","oldValue","newValue","onAttributeChange","value","__classPrivateFieldSet","classList","remove","add","type","detail","eventType","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\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","bcr","getBoundingClientRect","overflowSize","_JBPopoverWebComponent_getParentBottom","bottom","console","log","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/web-component/jb-popover/lib/jb-popover.d.ts

@@ -10,7 +10,6 @@ export declare class JBPopoverWebComponent extends HTMLElement {
     callOnLoadEvent(): void;
     callOnInitEvent(): void;
     initWebComponent(): void;
-    registerEventListener(): void;
     initProp(): void;
     checkInitialOpenness(): void;
     triggerUrlOpenEvent(): void;
@@ -28,4 +27,6 @@ export declare class JBPopoverWebComponent extends HTMLElement {
      * will open popover
      */
     open(): void;
+    overflowHandler: "NONE" | "SLIDE";
+    overflowDom: HTMLElement | null;
 }

package/lib/jb-popover.scss

@@ -1,47 +1,56 @@
 @import '../../../common/scss/Medias.scss';
+
 .jb-popover-web-component {
-  position: absolute;
-  display: none;
-  inset-block-start: 64px;
-  inset-inline-start: 0;
-  z-index: var(--jb-popover-z-index, 10);
-  will-change: transform;
-  transition: transform 0.3s 0s ease;
-  @include mobile{
-      inset-block-start: 0;
-      inset-inline-start: 0;
-      bottom: 0;
-      position: fixed;
-      width: 100vw;
-      height: 100vh;
-      background-color: rgba(0,0,0,0.5);
-      backdrop-filter: blur(5px);
-      display: none;
-      grid-template-rows: 1fr auto;
-      grid-template-columns: 1fr;
-      grid-template-areas: "." "content-wrapper";
-      overflow-x: hidden;
-  }
-  &.--opened {
-      display: grid;
-  }
-  .popover-background{}
-  .popover-content-wrapper{
-      background-color: var(--jb-popover-bg-color,#fff);
-      border-radius: var(--jb-popover-border-radius, 24px);
-      padding: 16px;
-      box-shadow:
-          12px 12px 16px 0 rgba(0, 0, 0, 0.25),
-          -8px -8px 12px 0 rgba(255, 255, 255, 0.3);
-      display: grid;
-      align-items: center;
-      justify-content: center;
-      box-sizing: border-box;
-      @include mobile{
-          border-radius: var(--jb-popover-border-radius, 24px) var(--jb-popover-border-radius, 24px) 0 0;
-          grid-area: content-wrapper;
-          padding: 0;
-          padding: 32px 0;
-      }
-  }
+    position: absolute;
+    display: none;
+    inset-block-start: 64px;
+    inset-inline-start: 0;
+    z-index: var(--jb-popover-z-index, 10);
+    will-change: transform;
+    transition: transform 0.3s 0s ease;
+
+    @include mobile {
+        inset-block-start: 0;
+        inset-inline-start: 0;
+        bottom: 0;
+        position: fixed;
+        width: 100vw;
+        height: 100vh;
+        background-color: rgba(0, 0, 0, 0.5);
+        backdrop-filter: blur(5px);
+        display: none;
+        grid-template-rows: 1fr auto;
+        grid-template-columns: 1fr;
+        grid-template-areas: "." "content-wrapper";
+        overflow-x: hidden;
+    }
+
+    &.--opened {
+        display: grid;
+    }
+
+    .popover-background {}
+
+    .popover-content-wrapper {
+        background-color: var(--jb-popover-bg-color, #fff);
+        border-radius: var(--jb-popover-border-radius, 24px);
+        padding: 16px;
+        box-shadow:
+            12px 12px 16px 0 rgba(0, 0, 0, 0.25),
+            -8px -8px 12px 0 rgba(255, 255, 255, 0.3);
+        display: grid;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        //animation to handle overflow move
+        will-change: transform;
+        transition: transform 0.3s 0s ease;
+
+        @include mobile {
+            border-radius: var(--jb-popover-border-radius, 24px) var(--jb-popover-border-radius, 24px) 0 0;
+            grid-area: content-wrapper;
+            padding: 0;
+            padding: 32px 0;
+        }
+    }
 }

package/lib/jb-popover.ts

@@ -11,7 +11,7 @@ export class JBPopoverWebComponent extends HTMLElement {
   get JBID() {
     return this.#JBID;
   }
-  #autoCloseOnBackgroundClick= false;
+  #autoCloseOnBackgroundClick = false;
   get isOpen() {
     return this.#isOpen;
   }
@@ -25,7 +25,7 @@ export class JBPopoverWebComponent extends HTMLElement {
     this.initProp();
     this.callOnInitEvent();
   }
-  disconnectedCallback(){
+  disconnectedCallback() {
     window.removeEventListener("popstate", this.#onBrowserBack);
   }
   callOnLoadEvent() {
@@ -50,16 +50,18 @@ export class JBPopoverWebComponent extends HTMLElement {
       contentWrapper: shadowRoot.querySelector(".popover-content-wrapper")!,
     };
   }
-  registerEventListener() {
+  #registerEventListener() {
     this.elements.background.addEventListener(
       "click",
       this.onBackgroundClick.bind(this)
     );
-    window.addEventListener("popstate", this.#onBrowserBack);
 
+    window.addEventListener("popstate", this.#onBrowserBack);
+    this.elements.contentWrapper.addEventListener('mouseenter', this.#fixCalendarContainerPos);
+    this.elements.contentWrapper.addEventListener('mouseleave', this.#resetCalendarContainerPos);
   }
   initProp() {
-    this.registerEventListener();
+    this.#registerEventListener();
   }
   checkInitialOpenness() {
     //if page has modal url we open it automatically
@@ -77,11 +79,11 @@ export class JBPopoverWebComponent extends HTMLElement {
   static get observedAttributes() {
     return ["is-open", "id"];
   }
-  attributeChangedCallback(name:string, oldValue:string, newValue:string) {
+  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
     // do something when an attribute has changed
     this.onAttributeChange(name, newValue);
   }
-  onAttributeChange(name:string, value:string) {
+  onAttributeChange(name: string, value: string) {
     switch (name) {
       case "is-open":
         if (value == "true") {
@@ -105,7 +107,7 @@ export class JBPopoverWebComponent extends HTMLElement {
       this.close();
     }
   }
-  #dispatchCloseEvent(type:"BACKGROUND_CLICK" | "HISTORY_BACK_EVENT" | "OUTSIDE_CLICK" | "CLOSE_BUTTON_CLICK") {
+  #dispatchCloseEvent(type: "BACKGROUND_CLICK" | "HISTORY_BACK_EVENT" | "OUTSIDE_CLICK" | "CLOSE_BUTTON_CLICK") {
     //we have many ways to dispatch close event like back button on close clicked
     const event = new CustomEvent("close", { detail: { eventType: type } });
     this.dispatchEvent(event);
@@ -128,7 +130,7 @@ export class JBPopoverWebComponent extends HTMLElement {
     this.elements.componentWrapper.classList.remove("--closed");
     this.elements.componentWrapper.classList.add("--opened");
   }
-  #onBrowserBack = (e:PopStateEvent)=>{
+  #onBrowserBack = (e: PopStateEvent) => {
     if (this.isOpen && isMobile()) {
       e.preventDefault();
       this.close();
@@ -136,6 +138,36 @@ export class JBPopoverWebComponent extends HTMLElement {
 
     }
   }
+  overflowHandler: "NONE" | "SLIDE" = "NONE";
+  overflowDom:HTMLElement|null = null;
+  #resetCalendarContainerPos = () => {
+    if (this.overflowHandler == "SLIDE") {
+      this.elements.contentWrapper.style.transform = `translateY(${0}px)`;
+    }
+  }
+  #fixCalendarContainerPos = () => {
+
+    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)`;
+      }
+    }
+
+  }
+  /**
+   * @description return height of element that we want to calc our overflow based on.
+   */
+  #getParentBottom():number{
+    if(this.overflowDom){
+      return this.overflowDom.getBoundingClientRect().bottom;
+    }
+    //default height of parent if no parent set
+    return window.innerHeight;
+  }
 }
 const myElementNotExists = !customElements.get("jb-popover");
 if (myElementNotExists) {

package/package.json

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

package/dist/common/scripts/validation/validation-helper-types.d.ts

@@ -1,28 +0,0 @@
-import { type ValidationHelper } from "./validation-helper";
-export interface WithValidation<TValidationValue = any> {
-    readonly validation: ValidationHelper<TValidationValue>;
-    showValidationError: ShowValidationErrorCallback;
-    clearValidationError: ClearValidationErrorCallback;
-}
-export type ValidationResultSummary = {
-    isValid: boolean | null;
-    message: string | null;
-};
-export type ValidationResultItem<ValidationValue> = {
-    isValid: boolean | null;
-    message: string | null;
-    validation: ValidationItem<ValidationValue>;
-};
-export type ValidationResult<ValidationValue> = {
-    validationList: ValidationResultItem<ValidationValue>[];
-    isAllValid: boolean;
-};
-export type ValidationItem<ValidationValue> = {
-    validator: RegExp | ((value: ValidationValue) => boolean | string);
-    message: string;
-};
-export type ShowValidationErrorCallback = (message: string) => void;
-export type ClearValidationErrorCallback = () => void;
-export type GetInputtedValueCallback<ValidationValue> = () => ValidationValue;
-export type GetValueStringCallback<ValidationValue> = (value: ValidationValue) => string;
-export type GetInsideValidationsCallback<ValidationValue> = () => ValidationItem<ValidationValue>[];

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

@@ -1,18 +0,0 @@
-import { ClearValidationErrorCallback, GetInputtedValueCallback, ShowValidationErrorCallback, ValidationItem, ValidationResult, ValidationResultSummary, GetValueStringCallback, GetInsideValidationsCallback } from "./validation-helper-types";
-export declare class ValidationHelper<ValidationValue> {
-    #private;
-    get resultSummary(): ValidationResultSummary;
-    result: ValidationResult<ValidationValue> | null;
-    constructor(showValidationError: ShowValidationErrorCallback, clearValidationError: ClearValidationErrorCallback, getInputValue: GetInputtedValueCallback<ValidationValue>, getValueString: GetValueStringCallback<ValidationValue>, getInsideValidations: GetInsideValidationsCallback<ValidationValue>);
-    get list(): ValidationItem<ValidationValue>[];
-    set list(value: ValidationItem<ValidationValue>[]);
-    /**
-     * @description check if input validation list is fulfilled or not
-     */
-    checkValidity(showError?: boolean): ValidationResult<ValidationValue>;
-    /**
-     * @description this function will register a function as validation getter sp on each validation check it will call getter function and check it's returned validation
-     * @public
-     */
-    addValidationListGetter(func: GetInsideValidationsCallback<ValidationValue>): void;
-}

package/dist/popover.cjs.js

@@ -1,175 +0,0 @@
-'use strict';
-
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
-
-
-function __classPrivateFieldGet(receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-}
-
-function __classPrivateFieldSet(receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
-var HTML = "<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>";
-
-var css_248z = ".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-date-input-calendar-wrapper-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: \".\" \"calendar-wrapper\";\n    overflow-x: hidden;\n  }\n}\n.jb-popover-web-component.--show {\n  display: grid;\n}\n.jb-popover-web-component .popover-content-wrapper {\n  background-color: var(--jb-date-input-calender-wrapper-bg-color, #fff);\n  border-radius: var(--jb-date-input-calender-wrapper-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}\n@media (min-width: 320px) and (max-width: 479px) {\n  .jb-popover-web-component .popover-content-wrapper {\n    border-radius: var(--jb-date-input-calender-wrapper-border-radius, 24px) var(--jb-date-input-calender-wrapper-border-radius, 24px) 0 0;\n    grid-area: calendar-wrapper;\n    padding: 0;\n    padding: 32px 0;\n  }\n}";
-
-var _JBPopoverWebComponent_instances, _JBPopoverWebComponent_isOpen, _JBPopoverWebComponent_JBID, _JBPopoverWebComponent_autoCloseOnBackgroundClick, _JBPopoverWebComponent_onBrowserBack;
-class JBPopoverWebComponent extends HTMLElement {
-    get JBID() {
-        return __classPrivateFieldGet(this, _JBPopoverWebComponent_JBID, "f");
-    }
-    get isOpen() {
-        return __classPrivateFieldGet(this, _JBPopoverWebComponent_isOpen, "f");
-    }
-    constructor() {
-        super();
-        _JBPopoverWebComponent_instances.add(this);
-        _JBPopoverWebComponent_isOpen.set(this, false);
-        _JBPopoverWebComponent_JBID.set(this, Symbol());
-        _JBPopoverWebComponent_autoCloseOnBackgroundClick.set(this, false);
-        this.initWebComponent();
-    }
-    connectedCallback() {
-        // standard web component event that called when all of dom is bound
-        this.callOnLoadEvent();
-        this.initProp();
-        this.callOnInitEvent();
-    }
-    callOnLoadEvent() {
-        const event = new CustomEvent("load", { bubbles: true, composed: true });
-        this.dispatchEvent(event);
-    }
-    callOnInitEvent() {
-        const event = new CustomEvent("init", { bubbles: true, composed: true });
-        this.dispatchEvent(event);
-    }
-    initWebComponent() {
-        const shadowRoot = this.attachShadow({
-            mode: "open",
-        });
-        const html = `<style>${css_248z}</style>` + "\n" + HTML;
-        const element = document.createElement("template");
-        element.innerHTML = html;
-        shadowRoot.appendChild(element.content.cloneNode(true));
-        this.elements = {
-            componentWrapper: shadowRoot.querySelector(".jb-popover-web-component"),
-            background: shadowRoot.querySelector(".popover-background"),
-            contentWrapper: shadowRoot.querySelector(".popover-content-wrapper"),
-        };
-    }
-    registerEventListener() {
-        this.elements.background.addEventListener("click", this.onBackgroundClick.bind(this));
-        //TODO: remove listener on component unmount
-        window.addEventListener("popstate", __classPrivateFieldGet(this, _JBPopoverWebComponent_instances, "m", _JBPopoverWebComponent_onBrowserBack).bind(this));
-    }
-    initProp() {
-        this.registerEventListener();
-    }
-    checkInitialOpenness() {
-        //if page has modal url we open it automatically
-        const location = window.location;
-        if (location.hash == `#${this.id}`) {
-            this.triggerUrlOpenEvent();
-            this.open();
-        }
-    }
-    triggerUrlOpenEvent() {
-        //when modal open itself becuase url contain modal id
-        const event = new CustomEvent("urlOpen", { bubbles: true, composed: true });
-        this.dispatchEvent(event);
-    }
-    static get observedAttributes() {
-        return ["is-open", "id"];
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        // do something when an attribute has changed
-        this.onAttributeChange(name, newValue);
-    }
-    onAttributeChange(name, value) {
-        switch (name) {
-            case "is-open":
-                if (value == "true") {
-                    if (!__classPrivateFieldGet(this, _JBPopoverWebComponent_isOpen, "f")) {
-                        this.open();
-                    }
-                }
-                else {
-                    if (__classPrivateFieldGet(this, _JBPopoverWebComponent_isOpen, "f")) {
-                        this.close();
-                    }
-                }
-                break;
-            case "id":
-                this.id = value;
-                break;
-        }
-    }
-    onBackgroundClick() {
-        this.dispatchCloseEvent("BACKGROUND_CLICK");
-        if (__classPrivateFieldGet(this, _JBPopoverWebComponent_autoCloseOnBackgroundClick, "f")) {
-            this.close();
-        }
-    }
-    dispatchCloseEvent(type) {
-        //we have many ways to dispatch close event like back button on close clicked
-        const event = new CustomEvent("close", { detail: { eventType: type } });
-        this.dispatchEvent(event);
-    }
-    /**
-     * @public
-     * will close popover
-     */
-    close() {
-        __classPrivateFieldSet(this, _JBPopoverWebComponent_isOpen, false, "f");
-        this.elements.componentWrapper.classList.remove("--opened");
-        this.elements.componentWrapper.classList.add("--closed");
-    }
-    /**
-     * @public
-     * will open popover
-     */
-    open() {
-        __classPrivateFieldSet(this, _JBPopoverWebComponent_isOpen, true, "f");
-        this.elements.componentWrapper.classList.remove("--closed");
-        this.elements.componentWrapper.classList.add("--opened");
-    }
-}
-_JBPopoverWebComponent_isOpen = new WeakMap(), _JBPopoverWebComponent_JBID = new WeakMap(), _JBPopoverWebComponent_autoCloseOnBackgroundClick = new WeakMap(), _JBPopoverWebComponent_instances = new WeakSet(), _JBPopoverWebComponent_onBrowserBack = function _JBPopoverWebComponent_onBrowserBack() {
-    if (this.isOpen) {
-        this.close();
-        this.dispatchCloseEvent("HISTORY_BACK_EVENT");
-    }
-};
-const myElementNotExists = !customElements.get("jb-popover");
-if (myElementNotExists) {
-    window.customElements.define("jb-popover", JBPopoverWebComponent);
-}
-
-exports.JBPopoverWebComponent = JBPopoverWebComponent;
-//# sourceMappingURL=popover.cjs.js.map

package/dist/popover.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"popover.cjs.js","sources":["../lib/jb-popover.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\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  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    //TODO: remove listener on component unmount\r\n    window.addEventListener(\"popstate\", this.#onBrowserBack.bind(this));\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() {\r\n    if (this.isOpen) {\r\n      this.close();\r\n      this.dispatchCloseEvent(\"HISTORY_BACK_EVENT\");\r\n    }\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":["CSS"],"mappings":"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"}

package/dist/popover.js

@@ -1,173 +0,0 @@
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
-
-
-function __classPrivateFieldGet(receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-}
-
-function __classPrivateFieldSet(receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
-var HTML = "<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>";
-
-var css_248z = ".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-date-input-calendar-wrapper-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: \".\" \"calendar-wrapper\";\n    overflow-x: hidden;\n  }\n}\n.jb-popover-web-component.--show {\n  display: grid;\n}\n.jb-popover-web-component .popover-content-wrapper {\n  background-color: var(--jb-date-input-calender-wrapper-bg-color, #fff);\n  border-radius: var(--jb-date-input-calender-wrapper-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}\n@media (min-width: 320px) and (max-width: 479px) {\n  .jb-popover-web-component .popover-content-wrapper {\n    border-radius: var(--jb-date-input-calender-wrapper-border-radius, 24px) var(--jb-date-input-calender-wrapper-border-radius, 24px) 0 0;\n    grid-area: calendar-wrapper;\n    padding: 0;\n    padding: 32px 0;\n  }\n}";
-
-var _JBPopoverWebComponent_instances, _JBPopoverWebComponent_isOpen, _JBPopoverWebComponent_JBID, _JBPopoverWebComponent_autoCloseOnBackgroundClick, _JBPopoverWebComponent_onBrowserBack;
-class JBPopoverWebComponent extends HTMLElement {
-    get JBID() {
-        return __classPrivateFieldGet(this, _JBPopoverWebComponent_JBID, "f");
-    }
-    get isOpen() {
-        return __classPrivateFieldGet(this, _JBPopoverWebComponent_isOpen, "f");
-    }
-    constructor() {
-        super();
-        _JBPopoverWebComponent_instances.add(this);
-        _JBPopoverWebComponent_isOpen.set(this, false);
-        _JBPopoverWebComponent_JBID.set(this, Symbol());
-        _JBPopoverWebComponent_autoCloseOnBackgroundClick.set(this, false);
-        this.initWebComponent();
-    }
-    connectedCallback() {
-        // standard web component event that called when all of dom is bound
-        this.callOnLoadEvent();
-        this.initProp();
-        this.callOnInitEvent();
-    }
-    callOnLoadEvent() {
-        const event = new CustomEvent("load", { bubbles: true, composed: true });
-        this.dispatchEvent(event);
-    }
-    callOnInitEvent() {
-        const event = new CustomEvent("init", { bubbles: true, composed: true });
-        this.dispatchEvent(event);
-    }
-    initWebComponent() {
-        const shadowRoot = this.attachShadow({
-            mode: "open",
-        });
-        const html = `<style>${css_248z}</style>` + "\n" + HTML;
-        const element = document.createElement("template");
-        element.innerHTML = html;
-        shadowRoot.appendChild(element.content.cloneNode(true));
-        this.elements = {
-            componentWrapper: shadowRoot.querySelector(".jb-popover-web-component"),
-            background: shadowRoot.querySelector(".popover-background"),
-            contentWrapper: shadowRoot.querySelector(".popover-content-wrapper"),
-        };
-    }
-    registerEventListener() {
-        this.elements.background.addEventListener("click", this.onBackgroundClick.bind(this));
-        //TODO: remove listener on component unmount
-        window.addEventListener("popstate", __classPrivateFieldGet(this, _JBPopoverWebComponent_instances, "m", _JBPopoverWebComponent_onBrowserBack).bind(this));
-    }
-    initProp() {
-        this.registerEventListener();
-    }
-    checkInitialOpenness() {
-        //if page has modal url we open it automatically
-        const location = window.location;
-        if (location.hash == `#${this.id}`) {
-            this.triggerUrlOpenEvent();
-            this.open();
-        }
-    }
-    triggerUrlOpenEvent() {
-        //when modal open itself becuase url contain modal id
-        const event = new CustomEvent("urlOpen", { bubbles: true, composed: true });
-        this.dispatchEvent(event);
-    }
-    static get observedAttributes() {
-        return ["is-open", "id"];
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        // do something when an attribute has changed
-        this.onAttributeChange(name, newValue);
-    }
-    onAttributeChange(name, value) {
-        switch (name) {
-            case "is-open":
-                if (value == "true") {
-                    if (!__classPrivateFieldGet(this, _JBPopoverWebComponent_isOpen, "f")) {
-                        this.open();
-                    }
-                }
-                else {
-                    if (__classPrivateFieldGet(this, _JBPopoverWebComponent_isOpen, "f")) {
-                        this.close();
-                    }
-                }
-                break;
-            case "id":
-                this.id = value;
-                break;
-        }
-    }
-    onBackgroundClick() {
-        this.dispatchCloseEvent("BACKGROUND_CLICK");
-        if (__classPrivateFieldGet(this, _JBPopoverWebComponent_autoCloseOnBackgroundClick, "f")) {
-            this.close();
-        }
-    }
-    dispatchCloseEvent(type) {
-        //we have many ways to dispatch close event like back button on close clicked
-        const event = new CustomEvent("close", { detail: { eventType: type } });
-        this.dispatchEvent(event);
-    }
-    /**
-     * @public
-     * will close popover
-     */
-    close() {
-        __classPrivateFieldSet(this, _JBPopoverWebComponent_isOpen, false, "f");
-        this.elements.componentWrapper.classList.remove("--opened");
-        this.elements.componentWrapper.classList.add("--closed");
-    }
-    /**
-     * @public
-     * will open popover
-     */
-    open() {
-        __classPrivateFieldSet(this, _JBPopoverWebComponent_isOpen, true, "f");
-        this.elements.componentWrapper.classList.remove("--closed");
-        this.elements.componentWrapper.classList.add("--opened");
-    }
-}
-_JBPopoverWebComponent_isOpen = new WeakMap(), _JBPopoverWebComponent_JBID = new WeakMap(), _JBPopoverWebComponent_autoCloseOnBackgroundClick = new WeakMap(), _JBPopoverWebComponent_instances = new WeakSet(), _JBPopoverWebComponent_onBrowserBack = function _JBPopoverWebComponent_onBrowserBack() {
-    if (this.isOpen) {
-        this.close();
-        this.dispatchCloseEvent("HISTORY_BACK_EVENT");
-    }
-};
-const myElementNotExists = !customElements.get("jb-popover");
-if (myElementNotExists) {
-    window.customElements.define("jb-popover", JBPopoverWebComponent);
-}
-
-export { JBPopoverWebComponent };
-//# sourceMappingURL=popover.js.map

package/dist/popover.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"popover.js","sources":["../lib/jb-popover.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\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  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    //TODO: remove listener on component unmount\r\n    window.addEventListener(\"popstate\", this.#onBrowserBack.bind(this));\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() {\r\n    if (this.isOpen) {\r\n      this.close();\r\n      this.dispatchCloseEvent(\"HISTORY_BACK_EVENT\");\r\n    }\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":["CSS"],"mappings":"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"}

package/dist/popover.umd.js

@@ -1,181 +0,0 @@
-(function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-    typeof define === 'function' && define.amd ? define(['exports'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JBButton = {}));
-})(this, (function (exports) { 'use strict';
-
-    /******************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-    /* global Reflect, Promise, SuppressedError, Symbol */
-
-
-    function __classPrivateFieldGet(receiver, state, kind, f) {
-        if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-    }
-
-    function __classPrivateFieldSet(receiver, state, value, kind, f) {
-        if (kind === "m") throw new TypeError("Private method is not writable");
-        if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-    }
-
-    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-        var e = new Error(message);
-        return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-    };
-
-    var HTML = "<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>";
-
-    var css_248z = ".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-date-input-calendar-wrapper-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: \".\" \"calendar-wrapper\";\n    overflow-x: hidden;\n  }\n}\n.jb-popover-web-component.--show {\n  display: grid;\n}\n.jb-popover-web-component .popover-content-wrapper {\n  background-color: var(--jb-date-input-calender-wrapper-bg-color, #fff);\n  border-radius: var(--jb-date-input-calender-wrapper-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}\n@media (min-width: 320px) and (max-width: 479px) {\n  .jb-popover-web-component .popover-content-wrapper {\n    border-radius: var(--jb-date-input-calender-wrapper-border-radius, 24px) var(--jb-date-input-calender-wrapper-border-radius, 24px) 0 0;\n    grid-area: calendar-wrapper;\n    padding: 0;\n    padding: 32px 0;\n  }\n}";
-
-    var _JBPopoverWebComponent_instances, _JBPopoverWebComponent_isOpen, _JBPopoverWebComponent_JBID, _JBPopoverWebComponent_autoCloseOnBackgroundClick, _JBPopoverWebComponent_onBrowserBack;
-    class JBPopoverWebComponent extends HTMLElement {
-        get JBID() {
-            return __classPrivateFieldGet(this, _JBPopoverWebComponent_JBID, "f");
-        }
-        get isOpen() {
-            return __classPrivateFieldGet(this, _JBPopoverWebComponent_isOpen, "f");
-        }
-        constructor() {
-            super();
-            _JBPopoverWebComponent_instances.add(this);
-            _JBPopoverWebComponent_isOpen.set(this, false);
-            _JBPopoverWebComponent_JBID.set(this, Symbol());
-            _JBPopoverWebComponent_autoCloseOnBackgroundClick.set(this, false);
-            this.initWebComponent();
-        }
-        connectedCallback() {
-            // standard web component event that called when all of dom is bound
-            this.callOnLoadEvent();
-            this.initProp();
-            this.callOnInitEvent();
-        }
-        callOnLoadEvent() {
-            const event = new CustomEvent("load", { bubbles: true, composed: true });
-            this.dispatchEvent(event);
-        }
-        callOnInitEvent() {
-            const event = new CustomEvent("init", { bubbles: true, composed: true });
-            this.dispatchEvent(event);
-        }
-        initWebComponent() {
-            const shadowRoot = this.attachShadow({
-                mode: "open",
-            });
-            const html = `<style>${css_248z}</style>` + "\n" + HTML;
-            const element = document.createElement("template");
-            element.innerHTML = html;
-            shadowRoot.appendChild(element.content.cloneNode(true));
-            this.elements = {
-                componentWrapper: shadowRoot.querySelector(".jb-popover-web-component"),
-                background: shadowRoot.querySelector(".popover-background"),
-                contentWrapper: shadowRoot.querySelector(".popover-content-wrapper"),
-            };
-        }
-        registerEventListener() {
-            this.elements.background.addEventListener("click", this.onBackgroundClick.bind(this));
-            //TODO: remove listener on component unmount
-            window.addEventListener("popstate", __classPrivateFieldGet(this, _JBPopoverWebComponent_instances, "m", _JBPopoverWebComponent_onBrowserBack).bind(this));
-        }
-        initProp() {
-            this.registerEventListener();
-        }
-        checkInitialOpenness() {
-            //if page has modal url we open it automatically
-            const location = window.location;
-            if (location.hash == `#${this.id}`) {
-                this.triggerUrlOpenEvent();
-                this.open();
-            }
-        }
-        triggerUrlOpenEvent() {
-            //when modal open itself becuase url contain modal id
-            const event = new CustomEvent("urlOpen", { bubbles: true, composed: true });
-            this.dispatchEvent(event);
-        }
-        static get observedAttributes() {
-            return ["is-open", "id"];
-        }
-        attributeChangedCallback(name, oldValue, newValue) {
-            // do something when an attribute has changed
-            this.onAttributeChange(name, newValue);
-        }
-        onAttributeChange(name, value) {
-            switch (name) {
-                case "is-open":
-                    if (value == "true") {
-                        if (!__classPrivateFieldGet(this, _JBPopoverWebComponent_isOpen, "f")) {
-                            this.open();
-                        }
-                    }
-                    else {
-                        if (__classPrivateFieldGet(this, _JBPopoverWebComponent_isOpen, "f")) {
-                            this.close();
-                        }
-                    }
-                    break;
-                case "id":
-                    this.id = value;
-                    break;
-            }
-        }
-        onBackgroundClick() {
-            this.dispatchCloseEvent("BACKGROUND_CLICK");
-            if (__classPrivateFieldGet(this, _JBPopoverWebComponent_autoCloseOnBackgroundClick, "f")) {
-                this.close();
-            }
-        }
-        dispatchCloseEvent(type) {
-            //we have many ways to dispatch close event like back button on close clicked
-            const event = new CustomEvent("close", { detail: { eventType: type } });
-            this.dispatchEvent(event);
-        }
-        /**
-         * @public
-         * will close popover
-         */
-        close() {
-            __classPrivateFieldSet(this, _JBPopoverWebComponent_isOpen, false, "f");
-            this.elements.componentWrapper.classList.remove("--opened");
-            this.elements.componentWrapper.classList.add("--closed");
-        }
-        /**
-         * @public
-         * will open popover
-         */
-        open() {
-            __classPrivateFieldSet(this, _JBPopoverWebComponent_isOpen, true, "f");
-            this.elements.componentWrapper.classList.remove("--closed");
-            this.elements.componentWrapper.classList.add("--opened");
-        }
-    }
-    _JBPopoverWebComponent_isOpen = new WeakMap(), _JBPopoverWebComponent_JBID = new WeakMap(), _JBPopoverWebComponent_autoCloseOnBackgroundClick = new WeakMap(), _JBPopoverWebComponent_instances = new WeakSet(), _JBPopoverWebComponent_onBrowserBack = function _JBPopoverWebComponent_onBrowserBack() {
-        if (this.isOpen) {
-            this.close();
-            this.dispatchCloseEvent("HISTORY_BACK_EVENT");
-        }
-    };
-    const myElementNotExists = !customElements.get("jb-popover");
-    if (myElementNotExists) {
-        window.customElements.define("jb-popover", JBPopoverWebComponent);
-    }
-
-    exports.JBPopoverWebComponent = JBPopoverWebComponent;
-
-}));
-//# sourceMappingURL=popover.umd.js.map

package/dist/popover.umd.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"popover.umd.js","sources":["../lib/jb-popover.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\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  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    //TODO: remove listener on component unmount\r\n    window.addEventListener(\"popstate\", this.#onBrowserBack.bind(this));\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() {\r\n    if (this.isOpen) {\r\n      this.close();\r\n      this.dispatchCloseEvent(\"HISTORY_BACK_EVENT\");\r\n    }\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":["CSS"],"mappings":"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"}