jb-popover 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 javad
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,42 @@
+# jb-popover
+sometimes you need a to open a small window next to a element to show more detail or more available actions. jb-popover will be doing that for you with some benefits:
+
+- handle overflow if popover could not fit into it's designed place.
+- show popover as a small window next to element in desktop and show it as a bottom-sheet in mobile
+- handle animations in standard manner with overflow handler
+
+## usage
+
+install:
+```cmd
+npm i jb-popover
+```
+usage:
+```js
+import 'jb-popover
+```
+```html
+<jb-popover>
+  <!-- put your content here   -->
+   <div>my custom content</div>
+<jb-popover>
+```
+## open & close popover
+
+by just calling `open` and `close` method:
+
+```javascript
+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 -->
+
+## set custom style
+
+you can customize jb-popover styles by just set some css variable. here is the variable list:    
+
+| css variable name                       | description                                                                     |
+| -------------                           | -------------                                                                   |
+| --jb-popover-z-index                    | z-index of opened popover                                                       |
+| --jb-popover-bg-color                   | background color of popover content                                             |
+| --jb-popover-border-radius              | border-radius of popover (must be single like 24px and not 24px 24px 24px 24px) |

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

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

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

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

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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,18 @@
+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/jb-popover.cjs.js

@@ -0,0 +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;
+//# sourceMappingURL=jb-popover.cjs.js.map

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

@@ -0,0 +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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"}

package/dist/jb-popover.js

@@ -0,0 +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};
+//# sourceMappingURL=jb-popover.js.map

package/dist/jb-popover.js.map

@@ -0,0 +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":"stBAMM,MAAOA,UAA8BC,YAIzC,QAAIC,GACF,OAAOC,EAAAC,KAAIC,EAAA,IACZ,CAED,UAAIC,GACF,OAAOH,EAAAC,KAAIG,EAAA,IACZ,CACD,WAAAC,GACEC,oBAXFF,EAAAG,IAAAN,MAAU,GACVC,EAAQK,IAAAN,KAAAO,UAKRC,EAAAF,IAAAN,MAA6B,GAqH7BS,EAAiBH,IAAAN,MAACU,IACZV,KAAKE,QClIJ,QAAQS,KAAKC,OAAOC,UAAUC,aDmIjCJ,EAAEK,iBACFf,KAAKgB,QACLjB,EAAAC,KAAwBiB,EAAA,IAAAC,GAAAC,KAAxBnB,KAAyB,sBAE1B,IArHDA,KAAKoB,kBACN,CACD,iBAAAC,GAEErB,KAAKsB,kBACLtB,KAAKuB,WACLvB,KAAKwB,iBACN,CACD,oBAAAC,GACEb,OAAOc,oBAAoB,WAAY3B,EAAAC,KAAmBS,EAAA,KAC3D,CACD,eAAAa,GACE,MAAMK,EAAQ,IAAIC,YAAY,OAAQ,CAAEC,SAAS,EAAMC,UAAU,IACjE9B,KAAK+B,cAAcJ,EACpB,CACD,eAAAH,GACE,MAAMG,EAAQ,IAAIC,YAAY,OAAQ,CAAEC,SAAS,EAAMC,UAAU,IACjE9B,KAAK+B,cAAcJ,EACpB,CACD,gBAAAP,GACE,MAAMY,EAAahC,KAAKiC,aAAa,CACnCC,KAAM,SAGFC,EAAUC,SAASC,cAAc,YACvCF,EAAQG,UAFK,6kDAGbN,EAAWO,YAAYJ,EAAQK,QAAQC,WAAU,IACjDzC,KAAK0C,SAAW,CACdC,iBAAkBX,EAAWY,cAAc,6BAC3CC,WAAYb,EAAWY,cAAc,uBACrCE,eAAgBd,EAAWY,cAAc,4BAE5C,CACD,qBAAAG,GACE/C,KAAK0C,SAASG,WAAWG,iBACvB,QACAhD,KAAKiD,kBAAkBC,KAAKlD,OAE9BY,OAAOoC,iBAAiB,WAAYjD,EAAAC,KAAmBS,EAAA,KAExD,CACD,QAAAc,GACEvB,KAAK+C,uBACN,CACD,oBAAAI,GAEmBvC,OAAOwC,SACXC,MAAQ,IAAIrD,KAAKsD,OAC5BtD,KAAKuD,sBACLvD,KAAKwD,OAER,CACD,mBAAAD,GAEE,MAAM5B,EAAQ,IAAIC,YAAY,UAAW,CAAEC,SAAS,EAAMC,UAAU,IACpE9B,KAAK+B,cAAcJ,EACpB,CACD,6BAAW8B,GACT,MAAO,CAAC,UAAW,KACpB,CACD,wBAAAC,CAAyBC,EAAaC,EAAiBC,GAErD7D,KAAK8D,kBAAkBH,EAAME,EAC9B,CACD,iBAAAC,CAAkBH,EAAaI,GAC7B,OAAQJ,GACN,IAAK,UACU,QAATI,EACGhE,EAAAC,KAAIG,EAAA,MACPH,KAAKwD,OAGHzD,EAAAC,KAAYG,EAAA,MACdH,KAAKgB,QAGT,MACF,IAAK,KACHhB,KAAKsD,GAAKS,EAGf,CACD,iBAAAd,GACElD,EAAAC,KAAwBiB,EAAA,IAAAC,GAAAC,KAAxBnB,KAAyB,oBACrBD,EAAAC,KAAgCQ,EAAA,MAClCR,KAAKgB,OAER,CAUD,KAAAA,GACEgD,EAAAhE,KAAIG,GAAW,EAAK,KACpBH,KAAK0C,SAASC,iBAAiBsB,UAAUC,OAAO,YAChDlE,KAAK0C,SAASC,iBAAiBsB,UAAUE,IAAI,WAC9C,CAKD,IAAAX,GACEQ,EAAAhE,KAAIG,GAAW,EAAI,KACnBH,KAAK0C,SAASC,iBAAiBsB,UAAUC,OAAO,YAChDlE,KAAK0C,SAASC,iBAAiBsB,UAAUE,IAAI,WAC9C,mFAtBmBC,GAElB,MAAMzC,EAAQ,IAAIC,YAAY,QAAS,CAAEyC,OAAQ,CAAEC,UAAWF,KAC9DpE,KAAK+B,cAAcJ,EACrB,GA4B0B4C,eAAeC,IAAI,eAE7C5D,OAAO2D,eAAeE,OAAO,aAAc7E"}

package/dist/jb-popover.umd.js

@@ -0,0 +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}));
+//# sourceMappingURL=jb-popover.umd.js.map

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

@@ -0,0 +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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"}

package/dist/popover.cjs.js

@@ -0,0 +1,175 @@
+'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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,173 @@
+/******************************************************************************
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,181 @@
+(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

@@ -0,0 +1 @@
+{"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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"}

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

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

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

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

package/index.js

@@ -0,0 +1 @@
+export {JBPopoverWebComponent} from './dist/jb-popover.js';

package/lib/jb-popover.html

@@ -0,0 +1,6 @@
+<div class="jb-popover-web-component">
+  <div class="popover-background"></div>
+  <div class="popover-content-wrapper">
+      <slot></slot>
+  </div>
+</div>

package/lib/jb-popover.scss

@@ -0,0 +1,47 @@
+@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;
+      }
+  }
+}

package/lib/jb-popover.ts

@@ -0,0 +1,143 @@
+import { symbol } from "prop-types";
+import HTML from "./jb-popover.html";
+import CSS from "./jb-popover.scss";
+import { ElementsObject } from "./types";
+import { isMobile } from "../../../common/scripts/device-detection";
+
+export class JBPopoverWebComponent extends HTMLElement {
+  #isOpen = false;
+  #JBID = Symbol();
+  elements: ElementsObject;
+  get JBID() {
+    return this.#JBID;
+  }
+  #autoCloseOnBackgroundClick= false;
+  get isOpen() {
+    return this.#isOpen;
+  }
+  constructor() {
+    super();
+    this.initWebComponent();
+  }
+  connectedCallback() {
+    // standard web component event that called when all of dom is bound
+    this.callOnLoadEvent();
+    this.initProp();
+    this.callOnInitEvent();
+  }
+  disconnectedCallback(){
+    window.removeEventListener("popstate", this.#onBrowserBack);
+  }
+  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}</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)
+    );
+    window.addEventListener("popstate", this.#onBrowserBack);
+
+  }
+  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:string, oldValue:string, newValue:string) {
+    // do something when an attribute has changed
+    this.onAttributeChange(name, newValue);
+  }
+  onAttributeChange(name:string, value:string) {
+    switch (name) {
+      case "is-open":
+        if (value == "true") {
+          if (!this.#isOpen) {
+            this.open();
+          }
+        } else {
+          if (this.#isOpen) {
+            this.close();
+          }
+        }
+        break;
+      case "id":
+        this.id = value;
+        break;
+    }
+  }
+  onBackgroundClick() {
+    this.#dispatchCloseEvent("BACKGROUND_CLICK");
+    if (this.#autoCloseOnBackgroundClick) {
+      this.close();
+    }
+  }
+  #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);
+  }
+  /**
+   * @public
+   * will close popover
+   */
+  close() {
+    this.#isOpen = false;
+    this.elements.componentWrapper.classList.remove("--opened");
+    this.elements.componentWrapper.classList.add("--closed");
+  }
+  /**
+   * @public
+   * will open popover
+   */
+  open() {
+    this.#isOpen = true;
+    this.elements.componentWrapper.classList.remove("--closed");
+    this.elements.componentWrapper.classList.add("--opened");
+  }
+  #onBrowserBack = (e:PopStateEvent)=>{
+    if (this.isOpen && isMobile()) {
+      e.preventDefault();
+      this.close();
+      this.#dispatchCloseEvent("HISTORY_BACK_EVENT");
+
+    }
+  }
+}
+const myElementNotExists = !customElements.get("jb-popover");
+if (myElementNotExists) {
+  window.customElements.define("jb-popover", JBPopoverWebComponent);
+}

package/lib/types.ts

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

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "jb-popover",
+  "description": "popover web component",
+  "type": "module",
+  "author": {
+		"name": "mohammad javad bathaei",
+		"email": "javadbat@gmail.com"
+	},
+  "keywords": [
+    "jb",
+    "jb-popover",
+    "popover",
+    "bottomsheet",
+    "web component"
+  ],
+  "version": "0.0.2",
+  "bugs": "https://github.com/javadbat/jb-popover/issues",
+  "license": "MIT",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "lib/",
+    "dist/"
+  ],
+  "main": "index.js",
+  "types": "./dist/web-component/jb-popover/lib/jb-popover.d.ts",
+  "repository": {
+		"type": "git",
+		"url": "git@github.com:javadbat/jb-popover.git"
+  }
+}