jb-modal 1.7.0 → 1.7.1

package/dist/jb-modal.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,i){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!i)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!i:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?i.call(e,n):i?i.value=n:t.set(e,n),n}var n,o,i,a,s=class extends HTMLElement{get id(){const t=this.getAttribute("id")||"";return e(this,i,"f")||t}set id(e){t(this,i,e,"f"),this.checkInitialOpenness()}get isOpen(){return e(this,o,"f")}constructor(){super(),n.add(this),o.set(this,!1),i.set(this,""),this.config={autoCloseOnBackgroundClick:!1},this.initWebComponent()}connectedCallback(){this.callOnLoadEvent(),this.initProp(),this.callOnInitEvent()}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-modal-web-component{position:fixed;top:0;left:0;z-index:var(--jb-modal-z-index, 1);width:100%;height:100%}.jb-modal-web-component.--closed{display:none}@media(min-width: 320px)and (max-width: 767px){.jb-modal-web-component.--closed .modal-content-wrapper{transform:translateY(100%)}}.jb-modal-web-component.--opened{display:block}@media(min-width: 320px)and (max-width: 767px){.jb-modal-web-component.--opened .modal-content-wrapper{animation-name:swipe-up;animation-duration:.3s;animation-delay:0s;animation-iteration-count:1;animation-timing-function:ease}}@keyframes swipe-up{0%{transform:translateY(100%)}100%{transform:translateY(0%)}}.jb-modal-web-component .modal-background{position:absolute;top:0;left:0;background-color:var(--jb-modal-back-bg-color, rgba(255, 255, 255, 0.1));backdrop-filter:blur(10px);z-index:2;width:100%;height:100%}.jb-modal-web-component .modal-content-wrapper{position:absolute;top:0;left:0;z-index:3;width:100%;height:100%;display:flex;align-items:center;justify-content:center;pointer-events:none}@media(min-width: 320px)and (max-width: 767px){.jb-modal-web-component .modal-content-wrapper{bottom:0;top:initial;align-items:flex-end}}.jb-modal-web-component .modal-content-wrapper .modal-content{pointer-events:all;width:auto;height:auto;background-color:var(--jb-modal-bg-color, #fff);border-radius:var(--jb-modal-border-radius, 24px)}@media(min-width: 320px)and (max-width: 767px){.jb-modal-web-component .modal-content-wrapper .modal-content{width:100%;height:auto;max-height:calc(100% - 80px);min-height:32px;border-radius:var(--jb-modal-border-radius-mobile, 24px 24px 0 0);overflow-y:auto}}</style>\n<div class="jb-modal-web-component --closed">\r\n    <div class="modal-background"></div>\r\n    <div class="modal-content-wrapper">\r\n        <div class="modal-content">\r\n            <slot name="content"></slot>\r\n        </div>\r\n    </div>\r\n</div>',e.appendChild(t.content.cloneNode(!0)),this.elements={componentWrapper:e.querySelector(".jb-modal-web-component"),background:e.querySelector(".modal-background")}}registerEventListener(){this.elements.background.addEventListener("click",this.onBackgroundClick.bind(this)),window.addEventListener("popstate",e(this,n,"m",a).bind(this))}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(){this.dispatchCloseEvent("BACKGROUND_CLICK"),this.config.autoCloseOnBackgroundClick&&this.close()}dispatchCloseEvent(e){const t=new CustomEvent("close",{detail:{eventType:e}});this.dispatchEvent(t)}close(){t(this,o,!1,"f"),this.elements.componentWrapper.classList.remove("--opened"),this.elements.componentWrapper.classList.add("--closed");const e=window.history;window.location.hash==`#${this.id}`&&e.go(-1)}open(){if(t(this,o,!0,"f"),this.elements.componentWrapper.classList.remove("--closed"),this.elements.componentWrapper.classList.add("--opened"),this.id){const e=window.history;window.location.hash!=`#${this.id}`&&e.pushState({JBModal:{}},"",`#${this.id}`)}}};o=new WeakMap,i=new WeakMap,n=new WeakSet,a=function(){this.isOpen&&(this.dispatchCloseEvent("HISTORY_BACK_EVENT"),this.config.autoCloseOnBackgroundClick&&this.close())};!customElements.get("jb-modal")&&window.customElements.define("jb-modal",s),exports.JBModalWebComponent=s;
+//# sourceMappingURL=jb-modal.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"jb-modal.cjs.js","names":[],"sources":["../lib/jb-modal.html","../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/Azad/design-system/design-system/web-component/jb-modal/lib/jb-modal.scss","../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/Azad/design-system/design-system/node_modules/jb-core/styles/medias.scss","../lib/jb-modal.ts"],"sourcesContent":["<div class=\"jb-modal-web-component --closed\">\r\n    <div class=\"modal-background\"></div>\r\n    <div class=\"modal-content-wrapper\">\r\n        <div class=\"modal-content\">\r\n            <slot name=\"content\"></slot>\r\n        </div>\r\n    </div>\r\n</div>","@use '~jb-core/styles/medias.scss' as *;\r\n.jb-modal-web-component {\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    z-index: var(--jb-modal-z-index, 1);\r\n    width: 100%;\r\n    height: 100%;\r\n    &.--closed{\r\n        display: none;\r\n        .modal-content-wrapper{\r\n            @include mobile-tablet{\r\n                transform: translateY(100%);\r\n                \r\n            }\r\n        }\r\n    }\r\n    &.--opened{\r\n        display: block;\r\n        .modal-content-wrapper{\r\n            @include mobile-tablet{\r\n                // transform: translateY(0%);\r\n                animation-name: swipe-up;\r\n                animation-duration: 0.3s;\r\n                animation-delay: 0s;\r\n                animation-iteration-count: 1;\r\n                animation-timing-function: ease;\r\n            }\r\n        }\r\n        \r\n    }\r\n    @keyframes swipe-up{\r\n        0%{\r\n            transform: translateY(100%);\r\n        }\r\n        100%{\r\n            transform: translateY(0%);\r\n        }\r\n    }\r\n    .modal-background {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        background-color:var(--jb-modal-back-bg-color, rgba(255, 255, 255, 0.1)) ;\r\n        backdrop-filter: blur(10px);\r\n        z-index: 2;\r\n        width: 100%;\r\n        height: 100%;\r\n    }\r\n    .modal-content-wrapper{\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        z-index: 3;\r\n        width: 100%;\r\n        height: 100%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        pointer-events: none;\r\n        @include mobile-tablet{\r\n            bottom: 0;\r\n            top:initial;\r\n            align-items: flex-end;\r\n        }\r\n        .modal-content{\r\n            pointer-events: all;\r\n            width: auto;\r\n            height: auto;\r\n            background-color: var(--jb-modal-bg-color, #fff);\r\n            border-radius: var(--jb-modal-border-radius, 24px);\r\n            @include mobile-tablet{\r\n                width: 100%;\r\n                height: auto;\r\n                max-height: calc(100% - 80px);\r\n                min-height: 32px;\r\n                border-radius: var(--jb-modal-border-radius-mobile, 24px 24px 0 0);\r\n                overflow-y: auto;\r\n            }\r\n        }\r\n    }\r\n    \r\n}\r\n","import HTML from \"./jb-modal.html\";\r\nimport CSS from \"./jb-modal.scss\";\r\nimport { ElementsObject } from \"./types.js\";\r\n\r\nexport * from \"./types.js\";\r\n\r\nexport class JBModalWebComponent extends HTMLElement {\r\n  #isOpen = false;\r\n  #id = \"\";\r\n  elements!: ElementsObject;\r\n  config = {\r\n    autoCloseOnBackgroundClick: false,\r\n  };\r\n  get id() {\r\n    const id: string = this.getAttribute(\"id\") || \"\";\r\n    return this.#id || id;\r\n  }\r\n  set id(value: string) {\r\n    this.#id = value;\r\n    this.checkInitialOpenness();\r\n  }\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 binded\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-modal-web-component\")!,\r\n      background: shadowRoot.querySelector(\".modal-background\")!,\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.config.autoCloseOnBackgroundClick) {\r\n      this.close();\r\n    }\r\n  }\r\n  dispatchCloseEvent(type:\"BACKGROUND_CLICK\"| \"HISTORY_BACK_EVENT\" | \"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 modal\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    const history = window.history;\r\n    const location = window.location;\r\n    if (location.hash == `#${this.id}`) {\r\n      history.go(-1);\r\n    }\r\n  }\r\n  /**\r\n   * @public\r\n   * will open modal\r\n   */\r\n  open() {\r\n    this.#isOpen = true;\r\n    this.elements.componentWrapper.classList.remove(\"--closed\");\r\n    this.elements.componentWrapper.classList.add(\"--opened\");\r\n    if (this.id) {\r\n      const history = window.history;\r\n      const location = window.location;\r\n      if (!(location.hash == `#${this.id}`)) {\r\n        history.pushState({ JBModal: {} }, \"\", `#${this.id}`);\r\n      }\r\n    }\r\n  }\r\n  #onBrowserBack() {\r\n    if (this.isOpen) {\r\n      this.dispatchCloseEvent(\"HISTORY_BACK_EVENT\");\r\n      if (this.config.autoCloseOnBackgroundClick) {\r\n        this.close();\r\n      }\r\n    }\r\n  }\r\n}\r\nconst myElementNotExists = !customElements.get(\"jb-modal\");\r\nif (myElementNotExists) {\r\n  window.customElements.define(\"jb-modal\", JBModalWebComponent);\r\n}\r\n"],"x_google_ignoreList":[2],"mappings":"2qBGMa,EAAP,cAAmC,YAOvC,MAAI,GACF,MAAM,EAAa,KAAK,aAAa,OAAS,GAC9C,OAAO,EAAA,KAAI,EAAA,MAAQ,CACpB,CACD,MAAI,CAAG,GACL,EAAA,KAAI,EAAO,EAAK,KAChB,KAAK,sBACN,CACD,UAAI,GACF,OAAO,EAAA,KAAI,EAAA,IACZ,CACD,WAAA,GACE,oBAlBF,EAAA,IAAA,MAAU,GACV,EAAA,IAAA,KAAM,IAEN,KAAA,OAAS,CACP,4BAA4B,GAe5B,KAAK,kBACN,CACD,iBAAA,GAEE,KAAK,kBACL,KAAK,WACL,KAAK,iBACN,CACD,eAAA,GACE,MAAM,EAAQ,IAAI,YAAY,OAAQ,CAAE,SAAS,EAAM,UAAU,IACjE,KAAK,cAAc,EACpB,CACD,eAAA,GACE,MAAM,EAAQ,IAAI,YAAY,OAAQ,CAAE,SAAS,EAAM,UAAU,IACjE,KAAK,cAAc,EACpB,CACD,gBAAA,GACE,MAAM,EAAa,KAAK,aAAa,CACnC,KAAM,SAGF,EAAU,SAAS,cAAc,YACvC,EAAQ,UAFF,w3DAGN,EAAW,YAAY,EAAQ,QAAQ,WAAU,IACjD,KAAK,SAAW,CACd,iBAAkB,EAAW,cAAc,2BAC3C,WAAY,EAAW,cAAc,qBAExC,CACD,qBAAA,GACE,KAAK,SAAS,WAAW,iBACvB,QACA,KAAK,kBAAkB,KAAK,OAG9B,OAAO,iBAAiB,WAAY,EAAA,KAAI,EAAA,IAAA,GAAgB,KAAK,MAC9D,CACD,QAAA,GACE,KAAK,uBACN,CACD,oBAAA,GAEmB,OAAO,SACX,MAAA,IAAY,KAAK,OAC5B,KAAK,sBACL,KAAK,OAER,CACD,mBAAA,GAEE,MAAM,EAAQ,IAAI,YAAY,UAAW,CAAE,SAAS,EAAM,UAAU,IACpE,KAAK,cAAc,EACpB,CACD,6BAAW,GACT,MAAO,CAAC,UAAW,KACpB,CACD,wBAAA,CAAyB,EAAa,EAAiB,GAErD,KAAK,kBAAkB,EAAM,EAC9B,CACD,iBAAA,CAAkB,EAAa,GAC7B,OAAQ,GACN,IAAK,UACU,QAAT,EACG,EAAA,KAAI,EAAA,MACP,KAAK,OAGH,EAAA,KAAI,EAAA,MACN,KAAK,QAGT,MACF,IAAK,KACH,KAAK,GAAK,EAGf,CACD,iBAAA,GACE,KAAK,mBAAmB,oBACpB,KAAK,OAAO,4BACd,KAAK,OAER,CACD,kBAAA,CAAmB,GAEjB,MAAM,EAAQ,IAAI,YAAY,QAAS,CAAE,OAAQ,CAAE,UAAW,KAC9D,KAAK,cAAc,EACpB,CAKD,KAAA,GACE,EAAA,KAAI,GAAW,EAAK,KACpB,KAAK,SAAS,iBAAiB,UAAU,OAAO,YAChD,KAAK,SAAS,iBAAiB,UAAU,IAAI,YAC7C,MAAM,EAAU,OAAO,QACN,OAAO,SACX,MAAA,IAAY,KAAK,MAC5B,EAAQ,IAAG,EAEd,CAKD,IAAA,GAIE,GAHA,EAAA,KAAI,GAAW,EAAI,KACnB,KAAK,SAAS,iBAAiB,UAAU,OAAO,YAChD,KAAK,SAAS,iBAAiB,UAAU,IAAI,YACzC,KAAK,GAAI,CACX,MAAM,EAAU,OAAO,QACN,OAAO,SACT,MAAA,IAAY,KAAK,MAC9B,EAAQ,UAAU,CAAE,QAAS,CAAE,GAAI,GAAA,IAAQ,KAAK,KAEnD,CACF,0DAEK,KAAK,SACP,KAAK,mBAAmB,sBACpB,KAAK,OAAO,4BACd,KAAK,QAGV,GAEyB,eAAe,IAAI,aAE7C,OAAO,eAAe,OAAO,WAAY"}

package/dist/{web-component/jb-modal/lib/JBModal.d.ts → jb-modal.d.ts}

@@ -1,4 +1,5 @@
-import { ElementsObject } from "./Types";
+import { ElementsObject } from "./types.js";
+export * from "./types.js";
 export declare class JBModalWebComponent extends HTMLElement {
     #private;
     elements: ElementsObject;

package/dist/jb-modal.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,i){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!i)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!i:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?i.call(e,n):i?i.value=n:t.set(e,n),n}var n,o,i,a,s=class extends HTMLElement{get id(){const t=this.getAttribute("id")||"";return e(this,i,"f")||t}set id(e){t(this,i,e,"f"),this.checkInitialOpenness()}get isOpen(){return e(this,o,"f")}constructor(){super(),n.add(this),o.set(this,!1),i.set(this,""),this.config={autoCloseOnBackgroundClick:!1},this.initWebComponent()}connectedCallback(){this.callOnLoadEvent(),this.initProp(),this.callOnInitEvent()}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-modal-web-component{position:fixed;top:0;left:0;z-index:var(--jb-modal-z-index, 1);width:100%;height:100%}.jb-modal-web-component.--closed{display:none}@media(min-width: 320px)and (max-width: 767px){.jb-modal-web-component.--closed .modal-content-wrapper{transform:translateY(100%)}}.jb-modal-web-component.--opened{display:block}@media(min-width: 320px)and (max-width: 767px){.jb-modal-web-component.--opened .modal-content-wrapper{animation-name:swipe-up;animation-duration:.3s;animation-delay:0s;animation-iteration-count:1;animation-timing-function:ease}}@keyframes swipe-up{0%{transform:translateY(100%)}100%{transform:translateY(0%)}}.jb-modal-web-component .modal-background{position:absolute;top:0;left:0;background-color:var(--jb-modal-back-bg-color, rgba(255, 255, 255, 0.1));backdrop-filter:blur(10px);z-index:2;width:100%;height:100%}.jb-modal-web-component .modal-content-wrapper{position:absolute;top:0;left:0;z-index:3;width:100%;height:100%;display:flex;align-items:center;justify-content:center;pointer-events:none}@media(min-width: 320px)and (max-width: 767px){.jb-modal-web-component .modal-content-wrapper{bottom:0;top:initial;align-items:flex-end}}.jb-modal-web-component .modal-content-wrapper .modal-content{pointer-events:all;width:auto;height:auto;background-color:var(--jb-modal-bg-color, #fff);border-radius:var(--jb-modal-border-radius, 24px)}@media(min-width: 320px)and (max-width: 767px){.jb-modal-web-component .modal-content-wrapper .modal-content{width:100%;height:auto;max-height:calc(100% - 80px);min-height:32px;border-radius:var(--jb-modal-border-radius-mobile, 24px 24px 0 0);overflow-y:auto}}</style>\n<div class="jb-modal-web-component --closed">\r\n    <div class="modal-background"></div>\r\n    <div class="modal-content-wrapper">\r\n        <div class="modal-content">\r\n            <slot name="content"></slot>\r\n        </div>\r\n    </div>\r\n</div>',e.appendChild(t.content.cloneNode(!0)),this.elements={componentWrapper:e.querySelector(".jb-modal-web-component"),background:e.querySelector(".modal-background")}}registerEventListener(){this.elements.background.addEventListener("click",this.onBackgroundClick.bind(this)),window.addEventListener("popstate",e(this,n,"m",a).bind(this))}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(){this.dispatchCloseEvent("BACKGROUND_CLICK"),this.config.autoCloseOnBackgroundClick&&this.close()}dispatchCloseEvent(e){const t=new CustomEvent("close",{detail:{eventType:e}});this.dispatchEvent(t)}close(){t(this,o,!1,"f"),this.elements.componentWrapper.classList.remove("--opened"),this.elements.componentWrapper.classList.add("--closed");const e=window.history;window.location.hash==`#${this.id}`&&e.go(-1)}open(){if(t(this,o,!0,"f"),this.elements.componentWrapper.classList.remove("--closed"),this.elements.componentWrapper.classList.add("--opened"),this.id){const e=window.history;window.location.hash!=`#${this.id}`&&e.pushState({JBModal:{}},"",`#${this.id}`)}}};o=new WeakMap,i=new WeakMap,n=new WeakSet,a=function(){this.isOpen&&(this.dispatchCloseEvent("HISTORY_BACK_EVENT"),this.config.autoCloseOnBackgroundClick&&this.close())};!customElements.get("jb-modal")&&window.customElements.define("jb-modal",s);export{s as JBModalWebComponent};
+//# sourceMappingURL=jb-modal.js.map

package/dist/jb-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jb-modal.js","names":[],"sources":["../lib/jb-modal.html","../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/Azad/design-system/design-system/web-component/jb-modal/lib/jb-modal.scss","../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/Azad/design-system/design-system/node_modules/jb-core/styles/medias.scss","../lib/jb-modal.ts"],"sourcesContent":["<div class=\"jb-modal-web-component --closed\">\r\n    <div class=\"modal-background\"></div>\r\n    <div class=\"modal-content-wrapper\">\r\n        <div class=\"modal-content\">\r\n            <slot name=\"content\"></slot>\r\n        </div>\r\n    </div>\r\n</div>","@use '~jb-core/styles/medias.scss' as *;\r\n.jb-modal-web-component {\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    z-index: var(--jb-modal-z-index, 1);\r\n    width: 100%;\r\n    height: 100%;\r\n    &.--closed{\r\n        display: none;\r\n        .modal-content-wrapper{\r\n            @include mobile-tablet{\r\n                transform: translateY(100%);\r\n                \r\n            }\r\n        }\r\n    }\r\n    &.--opened{\r\n        display: block;\r\n        .modal-content-wrapper{\r\n            @include mobile-tablet{\r\n                // transform: translateY(0%);\r\n                animation-name: swipe-up;\r\n                animation-duration: 0.3s;\r\n                animation-delay: 0s;\r\n                animation-iteration-count: 1;\r\n                animation-timing-function: ease;\r\n            }\r\n        }\r\n        \r\n    }\r\n    @keyframes swipe-up{\r\n        0%{\r\n            transform: translateY(100%);\r\n        }\r\n        100%{\r\n            transform: translateY(0%);\r\n        }\r\n    }\r\n    .modal-background {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        background-color:var(--jb-modal-back-bg-color, rgba(255, 255, 255, 0.1)) ;\r\n        backdrop-filter: blur(10px);\r\n        z-index: 2;\r\n        width: 100%;\r\n        height: 100%;\r\n    }\r\n    .modal-content-wrapper{\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        z-index: 3;\r\n        width: 100%;\r\n        height: 100%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        pointer-events: none;\r\n        @include mobile-tablet{\r\n            bottom: 0;\r\n            top:initial;\r\n            align-items: flex-end;\r\n        }\r\n        .modal-content{\r\n            pointer-events: all;\r\n            width: auto;\r\n            height: auto;\r\n            background-color: var(--jb-modal-bg-color, #fff);\r\n            border-radius: var(--jb-modal-border-radius, 24px);\r\n            @include mobile-tablet{\r\n                width: 100%;\r\n                height: auto;\r\n                max-height: calc(100% - 80px);\r\n                min-height: 32px;\r\n                border-radius: var(--jb-modal-border-radius-mobile, 24px 24px 0 0);\r\n                overflow-y: auto;\r\n            }\r\n        }\r\n    }\r\n    \r\n}\r\n","import HTML from \"./jb-modal.html\";\r\nimport CSS from \"./jb-modal.scss\";\r\nimport { ElementsObject } from \"./types.js\";\r\n\r\nexport * from \"./types.js\";\r\n\r\nexport class JBModalWebComponent extends HTMLElement {\r\n  #isOpen = false;\r\n  #id = \"\";\r\n  elements!: ElementsObject;\r\n  config = {\r\n    autoCloseOnBackgroundClick: false,\r\n  };\r\n  get id() {\r\n    const id: string = this.getAttribute(\"id\") || \"\";\r\n    return this.#id || id;\r\n  }\r\n  set id(value: string) {\r\n    this.#id = value;\r\n    this.checkInitialOpenness();\r\n  }\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 binded\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-modal-web-component\")!,\r\n      background: shadowRoot.querySelector(\".modal-background\")!,\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.config.autoCloseOnBackgroundClick) {\r\n      this.close();\r\n    }\r\n  }\r\n  dispatchCloseEvent(type:\"BACKGROUND_CLICK\"| \"HISTORY_BACK_EVENT\" | \"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 modal\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    const history = window.history;\r\n    const location = window.location;\r\n    if (location.hash == `#${this.id}`) {\r\n      history.go(-1);\r\n    }\r\n  }\r\n  /**\r\n   * @public\r\n   * will open modal\r\n   */\r\n  open() {\r\n    this.#isOpen = true;\r\n    this.elements.componentWrapper.classList.remove(\"--closed\");\r\n    this.elements.componentWrapper.classList.add(\"--opened\");\r\n    if (this.id) {\r\n      const history = window.history;\r\n      const location = window.location;\r\n      if (!(location.hash == `#${this.id}`)) {\r\n        history.pushState({ JBModal: {} }, \"\", `#${this.id}`);\r\n      }\r\n    }\r\n  }\r\n  #onBrowserBack() {\r\n    if (this.isOpen) {\r\n      this.dispatchCloseEvent(\"HISTORY_BACK_EVENT\");\r\n      if (this.config.autoCloseOnBackgroundClick) {\r\n        this.close();\r\n      }\r\n    }\r\n  }\r\n}\r\nconst myElementNotExists = !customElements.get(\"jb-modal\");\r\nif (myElementNotExists) {\r\n  window.customElements.define(\"jb-modal\", JBModalWebComponent);\r\n}\r\n"],"x_google_ignoreList":[2],"mappings":"8pBGMa,EAAP,cAAmC,YAOvC,MAAI,GACF,MAAM,EAAa,KAAK,aAAa,OAAS,GAC9C,OAAO,EAAA,KAAI,EAAA,MAAQ,CACpB,CACD,MAAI,CAAG,GACL,EAAA,KAAI,EAAO,EAAK,KAChB,KAAK,sBACN,CACD,UAAI,GACF,OAAO,EAAA,KAAI,EAAA,IACZ,CACD,WAAA,GACE,oBAlBF,EAAA,IAAA,MAAU,GACV,EAAA,IAAA,KAAM,IAEN,KAAA,OAAS,CACP,4BAA4B,GAe5B,KAAK,kBACN,CACD,iBAAA,GAEE,KAAK,kBACL,KAAK,WACL,KAAK,iBACN,CACD,eAAA,GACE,MAAM,EAAQ,IAAI,YAAY,OAAQ,CAAE,SAAS,EAAM,UAAU,IACjE,KAAK,cAAc,EACpB,CACD,eAAA,GACE,MAAM,EAAQ,IAAI,YAAY,OAAQ,CAAE,SAAS,EAAM,UAAU,IACjE,KAAK,cAAc,EACpB,CACD,gBAAA,GACE,MAAM,EAAa,KAAK,aAAa,CACnC,KAAM,SAGF,EAAU,SAAS,cAAc,YACvC,EAAQ,UAFF,w3DAGN,EAAW,YAAY,EAAQ,QAAQ,WAAU,IACjD,KAAK,SAAW,CACd,iBAAkB,EAAW,cAAc,2BAC3C,WAAY,EAAW,cAAc,qBAExC,CACD,qBAAA,GACE,KAAK,SAAS,WAAW,iBACvB,QACA,KAAK,kBAAkB,KAAK,OAG9B,OAAO,iBAAiB,WAAY,EAAA,KAAI,EAAA,IAAA,GAAgB,KAAK,MAC9D,CACD,QAAA,GACE,KAAK,uBACN,CACD,oBAAA,GAEmB,OAAO,SACX,MAAA,IAAY,KAAK,OAC5B,KAAK,sBACL,KAAK,OAER,CACD,mBAAA,GAEE,MAAM,EAAQ,IAAI,YAAY,UAAW,CAAE,SAAS,EAAM,UAAU,IACpE,KAAK,cAAc,EACpB,CACD,6BAAW,GACT,MAAO,CAAC,UAAW,KACpB,CACD,wBAAA,CAAyB,EAAa,EAAiB,GAErD,KAAK,kBAAkB,EAAM,EAC9B,CACD,iBAAA,CAAkB,EAAa,GAC7B,OAAQ,GACN,IAAK,UACU,QAAT,EACG,EAAA,KAAI,EAAA,MACP,KAAK,OAGH,EAAA,KAAI,EAAA,MACN,KAAK,QAGT,MACF,IAAK,KACH,KAAK,GAAK,EAGf,CACD,iBAAA,GACE,KAAK,mBAAmB,oBACpB,KAAK,OAAO,4BACd,KAAK,OAER,CACD,kBAAA,CAAmB,GAEjB,MAAM,EAAQ,IAAI,YAAY,QAAS,CAAE,OAAQ,CAAE,UAAW,KAC9D,KAAK,cAAc,EACpB,CAKD,KAAA,GACE,EAAA,KAAI,GAAW,EAAK,KACpB,KAAK,SAAS,iBAAiB,UAAU,OAAO,YAChD,KAAK,SAAS,iBAAiB,UAAU,IAAI,YAC7C,MAAM,EAAU,OAAO,QACN,OAAO,SACX,MAAA,IAAY,KAAK,MAC5B,EAAQ,IAAG,EAEd,CAKD,IAAA,GAIE,GAHA,EAAA,KAAI,GAAW,EAAI,KACnB,KAAK,SAAS,iBAAiB,UAAU,OAAO,YAChD,KAAK,SAAS,iBAAiB,UAAU,IAAI,YACzC,KAAK,GAAI,CACX,MAAM,EAAU,OAAO,QACN,OAAO,SACT,MAAA,IAAY,KAAK,MAC9B,EAAQ,UAAU,CAAE,QAAS,CAAE,GAAI,GAAA,IAAQ,KAAK,KAEnD,CACF,0DAEK,KAAK,SACP,KAAK,mBAAmB,sBACpB,KAAK,OAAO,4BACd,KAAK,QAGV,GAEyB,eAAe,IAAI,aAE7C,OAAO,eAAe,OAAO,WAAY"}

package/dist/jb-modal.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).JBModal={})}(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,i){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!i)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!i:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?i.call(e,n):i?i.value=n:t.set(e,n),n}var o,i,a,s,d=class extends HTMLElement{get id(){const e=this.getAttribute("id")||"";return t(this,a,"f")||e}set id(e){n(this,a,e,"f"),this.checkInitialOpenness()}get isOpen(){return t(this,i,"f")}constructor(){super(),o.add(this),i.set(this,!1),a.set(this,""),this.config={autoCloseOnBackgroundClick:!1},this.initWebComponent()}connectedCallback(){this.callOnLoadEvent(),this.initProp(),this.callOnInitEvent()}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-modal-web-component{position:fixed;top:0;left:0;z-index:var(--jb-modal-z-index, 1);width:100%;height:100%}.jb-modal-web-component.--closed{display:none}@media(min-width: 320px)and (max-width: 767px){.jb-modal-web-component.--closed .modal-content-wrapper{transform:translateY(100%)}}.jb-modal-web-component.--opened{display:block}@media(min-width: 320px)and (max-width: 767px){.jb-modal-web-component.--opened .modal-content-wrapper{animation-name:swipe-up;animation-duration:.3s;animation-delay:0s;animation-iteration-count:1;animation-timing-function:ease}}@keyframes swipe-up{0%{transform:translateY(100%)}100%{transform:translateY(0%)}}.jb-modal-web-component .modal-background{position:absolute;top:0;left:0;background-color:var(--jb-modal-back-bg-color, rgba(255, 255, 255, 0.1));backdrop-filter:blur(10px);z-index:2;width:100%;height:100%}.jb-modal-web-component .modal-content-wrapper{position:absolute;top:0;left:0;z-index:3;width:100%;height:100%;display:flex;align-items:center;justify-content:center;pointer-events:none}@media(min-width: 320px)and (max-width: 767px){.jb-modal-web-component .modal-content-wrapper{bottom:0;top:initial;align-items:flex-end}}.jb-modal-web-component .modal-content-wrapper .modal-content{pointer-events:all;width:auto;height:auto;background-color:var(--jb-modal-bg-color, #fff);border-radius:var(--jb-modal-border-radius, 24px)}@media(min-width: 320px)and (max-width: 767px){.jb-modal-web-component .modal-content-wrapper .modal-content{width:100%;height:auto;max-height:calc(100% - 80px);min-height:32px;border-radius:var(--jb-modal-border-radius-mobile, 24px 24px 0 0);overflow-y:auto}}</style>\n<div class="jb-modal-web-component --closed">\r\n    <div class="modal-background"></div>\r\n    <div class="modal-content-wrapper">\r\n        <div class="modal-content">\r\n            <slot name="content"></slot>\r\n        </div>\r\n    </div>\r\n</div>',e.appendChild(t.content.cloneNode(!0)),this.elements={componentWrapper:e.querySelector(".jb-modal-web-component"),background:e.querySelector(".modal-background")}}registerEventListener(){this.elements.background.addEventListener("click",this.onBackgroundClick.bind(this)),window.addEventListener("popstate",t(this,o,"m",s).bind(this))}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,i,"f")||this.open():t(this,i,"f")&&this.close();break;case"id":this.id=n}}onBackgroundClick(){this.dispatchCloseEvent("BACKGROUND_CLICK"),this.config.autoCloseOnBackgroundClick&&this.close()}dispatchCloseEvent(e){const t=new CustomEvent("close",{detail:{eventType:e}});this.dispatchEvent(t)}close(){n(this,i,!1,"f"),this.elements.componentWrapper.classList.remove("--opened"),this.elements.componentWrapper.classList.add("--closed");const e=window.history;window.location.hash==`#${this.id}`&&e.go(-1)}open(){if(n(this,i,!0,"f"),this.elements.componentWrapper.classList.remove("--closed"),this.elements.componentWrapper.classList.add("--opened"),this.id){const e=window.history;window.location.hash!=`#${this.id}`&&e.pushState({JBModal:{}},"",`#${this.id}`)}}};i=new WeakMap,a=new WeakMap,o=new WeakSet,s=function(){this.isOpen&&(this.dispatchCloseEvent("HISTORY_BACK_EVENT"),this.config.autoCloseOnBackgroundClick&&this.close())};!customElements.get("jb-modal")&&window.customElements.define("jb-modal",d),e.JBModalWebComponent=d}));
+//# sourceMappingURL=jb-modal.umd.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"jb-modal.umd.js","names":[],"sources":["../lib/jb-modal.html","../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/Azad/design-system/design-system/web-component/jb-modal/lib/jb-modal.scss","../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/Azad/design-system/design-system/node_modules/jb-core/styles/medias.scss","../lib/jb-modal.ts"],"sourcesContent":["<div class=\"jb-modal-web-component --closed\">\r\n    <div class=\"modal-background\"></div>\r\n    <div class=\"modal-content-wrapper\">\r\n        <div class=\"modal-content\">\r\n            <slot name=\"content\"></slot>\r\n        </div>\r\n    </div>\r\n</div>","@use '~jb-core/styles/medias.scss' as *;\r\n.jb-modal-web-component {\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    z-index: var(--jb-modal-z-index, 1);\r\n    width: 100%;\r\n    height: 100%;\r\n    &.--closed{\r\n        display: none;\r\n        .modal-content-wrapper{\r\n            @include mobile-tablet{\r\n                transform: translateY(100%);\r\n                \r\n            }\r\n        }\r\n    }\r\n    &.--opened{\r\n        display: block;\r\n        .modal-content-wrapper{\r\n            @include mobile-tablet{\r\n                // transform: translateY(0%);\r\n                animation-name: swipe-up;\r\n                animation-duration: 0.3s;\r\n                animation-delay: 0s;\r\n                animation-iteration-count: 1;\r\n                animation-timing-function: ease;\r\n            }\r\n        }\r\n        \r\n    }\r\n    @keyframes swipe-up{\r\n        0%{\r\n            transform: translateY(100%);\r\n        }\r\n        100%{\r\n            transform: translateY(0%);\r\n        }\r\n    }\r\n    .modal-background {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        background-color:var(--jb-modal-back-bg-color, rgba(255, 255, 255, 0.1)) ;\r\n        backdrop-filter: blur(10px);\r\n        z-index: 2;\r\n        width: 100%;\r\n        height: 100%;\r\n    }\r\n    .modal-content-wrapper{\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        z-index: 3;\r\n        width: 100%;\r\n        height: 100%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        pointer-events: none;\r\n        @include mobile-tablet{\r\n            bottom: 0;\r\n            top:initial;\r\n            align-items: flex-end;\r\n        }\r\n        .modal-content{\r\n            pointer-events: all;\r\n            width: auto;\r\n            height: auto;\r\n            background-color: var(--jb-modal-bg-color, #fff);\r\n            border-radius: var(--jb-modal-border-radius, 24px);\r\n            @include mobile-tablet{\r\n                width: 100%;\r\n                height: auto;\r\n                max-height: calc(100% - 80px);\r\n                min-height: 32px;\r\n                border-radius: var(--jb-modal-border-radius-mobile, 24px 24px 0 0);\r\n                overflow-y: auto;\r\n            }\r\n        }\r\n    }\r\n    \r\n}\r\n","import HTML from \"./jb-modal.html\";\r\nimport CSS from \"./jb-modal.scss\";\r\nimport { ElementsObject } from \"./types.js\";\r\n\r\nexport * from \"./types.js\";\r\n\r\nexport class JBModalWebComponent extends HTMLElement {\r\n  #isOpen = false;\r\n  #id = \"\";\r\n  elements!: ElementsObject;\r\n  config = {\r\n    autoCloseOnBackgroundClick: false,\r\n  };\r\n  get id() {\r\n    const id: string = this.getAttribute(\"id\") || \"\";\r\n    return this.#id || id;\r\n  }\r\n  set id(value: string) {\r\n    this.#id = value;\r\n    this.checkInitialOpenness();\r\n  }\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 binded\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-modal-web-component\")!,\r\n      background: shadowRoot.querySelector(\".modal-background\")!,\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.config.autoCloseOnBackgroundClick) {\r\n      this.close();\r\n    }\r\n  }\r\n  dispatchCloseEvent(type:\"BACKGROUND_CLICK\"| \"HISTORY_BACK_EVENT\" | \"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 modal\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    const history = window.history;\r\n    const location = window.location;\r\n    if (location.hash == `#${this.id}`) {\r\n      history.go(-1);\r\n    }\r\n  }\r\n  /**\r\n   * @public\r\n   * will open modal\r\n   */\r\n  open() {\r\n    this.#isOpen = true;\r\n    this.elements.componentWrapper.classList.remove(\"--closed\");\r\n    this.elements.componentWrapper.classList.add(\"--opened\");\r\n    if (this.id) {\r\n      const history = window.history;\r\n      const location = window.location;\r\n      if (!(location.hash == `#${this.id}`)) {\r\n        history.pushState({ JBModal: {} }, \"\", `#${this.id}`);\r\n      }\r\n    }\r\n  }\r\n  #onBrowserBack() {\r\n    if (this.isOpen) {\r\n      this.dispatchCloseEvent(\"HISTORY_BACK_EVENT\");\r\n      if (this.config.autoCloseOnBackgroundClick) {\r\n        this.close();\r\n      }\r\n    }\r\n  }\r\n}\r\nconst myElementNotExists = !customElements.get(\"jb-modal\");\r\nif (myElementNotExists) {\r\n  window.customElements.define(\"jb-modal\", JBModalWebComponent);\r\n}\r\n"],"x_google_ignoreList":[2],"mappings":"64BGMa,EAAP,cAAmC,YAOvC,MAAI,GACF,MAAM,EAAa,KAAK,aAAa,OAAS,GAC9C,OAAO,EAAA,KAAI,EAAA,MAAQ,CACpB,CACD,MAAI,CAAG,GACL,EAAA,KAAI,EAAO,EAAK,KAChB,KAAK,sBACN,CACD,UAAI,GACF,OAAO,EAAA,KAAI,EAAA,IACZ,CACD,WAAA,GACE,oBAlBF,EAAA,IAAA,MAAU,GACV,EAAA,IAAA,KAAM,IAEN,KAAA,OAAS,CACP,4BAA4B,GAe5B,KAAK,kBACN,CACD,iBAAA,GAEE,KAAK,kBACL,KAAK,WACL,KAAK,iBACN,CACD,eAAA,GACE,MAAM,EAAQ,IAAI,YAAY,OAAQ,CAAE,SAAS,EAAM,UAAU,IACjE,KAAK,cAAc,EACpB,CACD,eAAA,GACE,MAAM,EAAQ,IAAI,YAAY,OAAQ,CAAE,SAAS,EAAM,UAAU,IACjE,KAAK,cAAc,EACpB,CACD,gBAAA,GACE,MAAM,EAAa,KAAK,aAAa,CACnC,KAAM,SAGF,EAAU,SAAS,cAAc,YACvC,EAAQ,UAFF,w3DAGN,EAAW,YAAY,EAAQ,QAAQ,WAAU,IACjD,KAAK,SAAW,CACd,iBAAkB,EAAW,cAAc,2BAC3C,WAAY,EAAW,cAAc,qBAExC,CACD,qBAAA,GACE,KAAK,SAAS,WAAW,iBACvB,QACA,KAAK,kBAAkB,KAAK,OAG9B,OAAO,iBAAiB,WAAY,EAAA,KAAI,EAAA,IAAA,GAAgB,KAAK,MAC9D,CACD,QAAA,GACE,KAAK,uBACN,CACD,oBAAA,GAEmB,OAAO,SACX,MAAA,IAAY,KAAK,OAC5B,KAAK,sBACL,KAAK,OAER,CACD,mBAAA,GAEE,MAAM,EAAQ,IAAI,YAAY,UAAW,CAAE,SAAS,EAAM,UAAU,IACpE,KAAK,cAAc,EACpB,CACD,6BAAW,GACT,MAAO,CAAC,UAAW,KACpB,CACD,wBAAA,CAAyB,EAAa,EAAiB,GAErD,KAAK,kBAAkB,EAAM,EAC9B,CACD,iBAAA,CAAkB,EAAa,GAC7B,OAAQ,GACN,IAAK,UACU,QAAT,EACG,EAAA,KAAI,EAAA,MACP,KAAK,OAGH,EAAA,KAAI,EAAA,MACN,KAAK,QAGT,MACF,IAAK,KACH,KAAK,GAAK,EAGf,CACD,iBAAA,GACE,KAAK,mBAAmB,oBACpB,KAAK,OAAO,4BACd,KAAK,OAER,CACD,kBAAA,CAAmB,GAEjB,MAAM,EAAQ,IAAI,YAAY,QAAS,CAAE,OAAQ,CAAE,UAAW,KAC9D,KAAK,cAAc,EACpB,CAKD,KAAA,GACE,EAAA,KAAI,GAAW,EAAK,KACpB,KAAK,SAAS,iBAAiB,UAAU,OAAO,YAChD,KAAK,SAAS,iBAAiB,UAAU,IAAI,YAC7C,MAAM,EAAU,OAAO,QACN,OAAO,SACX,MAAA,IAAY,KAAK,MAC5B,EAAQ,IAAG,EAEd,CAKD,IAAA,GAIE,GAHA,EAAA,KAAI,GAAW,EAAI,KACnB,KAAK,SAAS,iBAAiB,UAAU,OAAO,YAChD,KAAK,SAAS,iBAAiB,UAAU,IAAI,YACzC,KAAK,GAAI,CACX,MAAM,EAAU,OAAO,QACN,OAAO,SACT,MAAA,IAAY,KAAK,MAC9B,EAAQ,UAAU,CAAE,QAAS,CAAE,GAAI,GAAA,IAAQ,KAAK,KAEnD,CACF,0DAEK,KAAK,SACP,KAAK,mBAAmB,sBACpB,KAAK,OAAO,4BACd,KAAK,QAGV,GAEyB,eAAe,IAAI,aAE7C,OAAO,eAAe,OAAO,WAAY"}

package/dist/types.d.ts

@@ -0,0 +1,7 @@
+import type { JBModalWebComponent } from "./jb-modal";
+import type { EventTypeWithTarget } from 'jb-core';
+export type ElementsObject = {
+    componentWrapper: HTMLDivElement;
+    background: HTMLDivElement;
+};
+export type JBModalEventType<TEvent> = EventTypeWithTarget<TEvent, JBModalWebComponent>;

package/index.js

@@ -1 +1 @@
-export * from './dist/JBModal.js';
+export * from './dist/jb-modal.js';

package/lib/{JBModal.scss → jb-modal.scss}

@@ -1,4 +1,4 @@
-@use '../../../common/scss/Medias.scss' as *;
+@use '~jb-core/styles/medias.scss' as *;
 .jb-modal-web-component {
     position: fixed;
     top: 0;

package/lib/{JBModal.ts → jb-modal.ts}

@@ -1,6 +1,8 @@
-import HTML from "./JBModal.html";
-import CSS from "./JBModal.scss";
-import { ElementsObject } from "./Types";
+import HTML from "./jb-modal.html";
+import CSS from "./jb-modal.scss";
+import { ElementsObject } from "./types.js";
+
+export * from "./types.js";
 
 export class JBModalWebComponent extends HTMLElement {
   #isOpen = false;

package/lib/types.ts

@@ -0,0 +1,9 @@
+import type { JBModalWebComponent } from "./jb-modal";
+import type {EventTypeWithTarget} from 'jb-core';
+
+export type ElementsObject = {
+    componentWrapper: HTMLDivElement;
+    background: HTMLDivElement;
+};
+
+export type JBModalEventType<TEvent> = EventTypeWithTarget<TEvent,JBModalWebComponent>

package/package.json

@@ -14,7 +14,7 @@
     "pop up",
     "web component"
   ],
-  "version": "1.7.0",
+  "version": "1.7.1",
   "bugs": "https://github.com/javadbat/jb-modal/issues",
   "license": "MIT",
   "files": [
@@ -26,9 +26,13 @@
     "react/dist/"
   ],
   "main": "index.js",
-  "types": "jb-modal/dist/web-component/jb-modal/lib/JBModal.d.ts",
+  "types": "./dist/jb-modal.d.ts",
   "repository": {
 		"type": "git",
 		"url": "git@github.com:javadbat/jb-modal.git"
+  },
+  "dependencies": {
+    "jb-core":">=0.4.0"
   }
+
 }

package/react/dist/JBModal.cjs.js

@@ -1,67 +1,2 @@
-'use strict';
-
-var React = require('react');
-require('jb-modal');
-
-function useBindEvent(ref, event, handler, passive = false) {
-    React.useEffect(() => {
-        const dom = ref.current;
-        if (dom) {
-            // initiate the event handler
-            dom.addEventListener(event, handler, passive);
-        }
-        // this will clean up the event every time the component is re-rendered
-        return function cleanup() {
-            if (dom) {
-                dom.removeEventListener(event, handler, passive);
-            }
-        };
-    }, [ref, event, handler, passive]);
-}
-
-const JBModal = React.forwardRef((props, ref) => {
-    const element = React.useRef(null);
-    const [refChangeCount, refChangeCountSetter] = React.useState(0);
-    React.useImperativeHandle(ref, () => (element ? element.current : {}), [element]);
-    React.useEffect(() => {
-        refChangeCountSetter(refChangeCount + 1);
-    }, [element.current]);
-    React.useEffect(() => {
-        if (element.current) {
-            if (props.isOpen == true) {
-                element.current.open();
-            }
-            else {
-                element.current.close();
-            }
-        }
-    }, [props.isOpen]);
-    React.useEffect(() => {
-        if (props.id !== undefined && element.current) {
-            element.current.addEventListener('urlOpen', onUrlOpen);
-            element.current.id = props.id;
-        }
-        return () => {
-            if (props.id !== undefined && element.current) {
-                element.current.removeEventListener('urlOpen', onUrlOpen);
-            }
-        };
-    }, [props.id]);
-    function onClose() {
-        if (props.onClose) {
-            props.onClose();
-        }
-    }
-    function onUrlOpen() {
-        if (props.onUrlOpen) {
-            props.onUrlOpen();
-        }
-    }
-    useBindEvent(element, 'close', onClose);
-    return (React.createElement("jb-modal", { ref: element, class: props.className ? props.className : '' },
-        React.createElement("div", { slot: "content" }, props.children)));
-});
-JBModal.displayName = "JBModal";
-
-exports.JBModal = JBModal;
-//# sourceMappingURL=JBModal.cjs.js.map
+"use strict";var e=Object.create,t=Object.defineProperty,r=Object.getOwnPropertyDescriptor,n=Object.getOwnPropertyNames,l=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty,c=(e,l,c,o)=>{if(l&&"object"==typeof l||"function"==typeof l)for(var a,s=n(l),d=0,f=s.length;d<f;d++)a=s[d],u.call(e,a)||a===c||t(e,a,{get:(e=>l[e]).bind(null,a),enumerable:!(o=r(l,a))||o.enumerable});return e},o=(r,n,u)=>(u=null!=r?e(l(r)):{},c(!n&&r&&r.__esModule?u:t(u,"default",{value:r,enumerable:!0}),r));const a=o(require("react"));require("jb-modal");const s=o(require("jb-core/react")),d=a.default.forwardRef((e,t)=>{let r=(0,a.useRef)(null),[n,l]=(0,a.useState)(0);return(0,a.useImperativeHandle)(t,()=>r?r.current:{},[r]),(0,a.useEffect)(()=>{l(n+1)},[r.current]),(0,a.useEffect)(()=>{r.current&&(!0==e.isOpen?r.current.open():r.current.close())},[e.isOpen]),(0,a.useEffect)(()=>{r.current&&(r.current.id=e.id)},[e.id]),(0,s.useEvent)(r,"load",e.onLoad,!0),(0,s.useEvent)(r,"init",e.onInit,!0),(0,s.useEvent)(r,"close",e.onClose),(0,s.useEvent)(r,"urlOpen",e.onUrlOpen),a.default.createElement("jb-modal",{ref:r,class:e.className?e.className:""},a.default.createElement("div",{slot:"content"},e.children))});d.displayName="JBModal",exports.JBModal=d;
+//# sourceMappingURL=JBModal.cjs.js.map

package/react/dist/JBModal.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"JBModal.cjs.js","sources":["../../../../common/hooks/use-event.ts","../lib/JBModal.tsx"],"sourcesContent":["import { useEffect } from \"react\";\r\n\r\nexport function useEvent(dom:HTMLElement, event:any, handler:any, passive = false) {\r\n  useEffect(() => {\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  });\r\n}\r\nexport function useBindEvent<TRef extends React.MutableRefObject<any|null>,TEvent>(ref:TRef, event:string, handler:(e:TEvent)=>void, passive = false) {\r\n  useEffect(() => {\r\n    const dom = ref.current;\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  },[ref,event,handler,passive]);\r\n}","import PropTypes from 'prop-types';\r\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react';\r\nimport 'jb-modal';\r\n// eslint-disable-next-line no-duplicate-imports\r\nimport { JBModalWebComponent } from 'jb-modal';\r\nimport { useBindEvent } from '../../../../common/hooks/use-event.js';\r\nexport type JBModalProps = React.PropsWithChildren<{\r\n    onClose?: () => void,\r\n    onUrlOpen?: () => void,\r\n    className?:string,\r\n    isOpen?: boolean,\r\n    id?: string,\r\n}>\r\n\r\ndeclare global {\r\n    // eslint-disable-next-line @typescript-eslint/no-namespace\r\n    namespace JSX {\r\n      interface IntrinsicElements {\r\n        'jb-modal': JBModalType;\r\n      }\r\n      interface JBModalType extends React.DetailedHTMLProps<React.HTMLAttributes<JBModalWebComponent>, JBModalWebComponent> {\r\n        class?:string,\r\n      }\r\n    }\r\n}\r\n\r\nconst JBModal = React.forwardRef((props:JBModalProps, ref) => {\r\n  const element = useRef<JBModalWebComponent>(null);\r\n  const [refChangeCount, refChangeCountSetter] = useState(0);\r\n  useImperativeHandle(\r\n    ref,\r\n    () => (element ? element.current : {}),\r\n    [element],\r\n  );\r\n  useEffect(() => {\r\n    refChangeCountSetter(refChangeCount + 1);\r\n  }, [element.current]);\r\n  useEffect(() => {\r\n    if (element.current) {\r\n      if (props.isOpen == true) {\r\n        element.current.open();\r\n      } else {\r\n        element.current.close();\r\n      }\r\n    }\r\n\r\n  }, [props.isOpen]);\r\n  useEffect(() => {\r\n    if (props.id !== undefined && element.current) {\r\n      element.current.addEventListener('urlOpen', onUrlOpen);\r\n      element.current.id = props.id;\r\n    }\r\n    return () => {\r\n      if (props.id !== undefined && element.current) {\r\n        element.current.removeEventListener('urlOpen', onUrlOpen);\r\n      }\r\n    };\r\n  }, [props.id]);\r\n  function onClose() {\r\n    if (props.onClose) {\r\n      props.onClose();\r\n    }\r\n  }\r\n  function onUrlOpen() {\r\n    if (props.onUrlOpen) {\r\n      props.onUrlOpen();\r\n    }\r\n  }\r\n  useBindEvent(element, 'close', onClose);\r\n  return (\r\n    <jb-modal ref={element} class={props.className ? props.className : ''}>\r\n      <div slot=\"content\">\r\n        {props.children}\r\n      </div>\r\n    </jb-modal>\r\n  );\r\n});\r\n\r\nJBModal.displayName = \"JBModal\";\r\nexport {JBModal};\r\n"],"names":["useEffect","useRef","useState","useImperativeHandle"],"mappings":"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"}
+{"version":3,"file":"JBModal.cjs.js","names":[],"sources":["../lib/events-hook.ts","../lib/JBModal.tsx"],"sourcesContent":["import { useEvent } from \"jb-core/react\";\r\nimport { RefObject } from \"react\";\r\nimport type {JBModalWebComponent, JBModalEventType} from 'jb-modal';\r\n\r\nexport type EventProps = {\r\n  /**\r\n   * when component loaded, in most cases component is already loaded before react mount so you dont need this but if you load web-component dynamically with lazy load it will be called after react mount\r\n   */\r\n  onLoad?: (e: JBModalEventType<CustomEvent>) => void,\r\n    /**\r\n   * when all property set and ready to use, in most cases component is already loaded before react mount so you dont need this but if you load web-component dynamically with lazy load it will be called after react mount\r\n   */\r\n  onInit?: (e: JBModalEventType<CustomEvent>) => void,\r\n  onClose?: (e: JBModalEventType<CustomEvent>) => void,\r\n  /**\r\n   * when modal opened automatically by url hash (when element have id and url has #id) use this to update open state in parent component\r\n   */\r\n  onUrlOpen?: (e: JBModalEventType<CustomEvent>) => void,\r\n}\r\nexport function useEvents(element:RefObject<JBModalWebComponent>,props:EventProps){\r\n  useEvent(element, 'load', props.onLoad, true);\r\n  useEvent(element, 'init', props.onInit, true);\r\n  useEvent(element, 'close', props.onClose);\r\n  useEvent(element, 'urlOpen', props.onUrlOpen);\r\n}","import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';\r\nimport 'jb-modal';\r\n// eslint-disable-next-line no-duplicate-imports\r\nimport { JBModalWebComponent } from 'jb-modal';\r\nimport { useEvents, EventProps } from './events-hook.js';\r\n\r\nexport type Props = EventProps & React.PropsWithChildren<{\r\n    className?:string,\r\n    isOpen?: boolean,\r\n    id?: string,\r\n}>\r\n\r\ndeclare global {\r\n    // eslint-disable-next-line @typescript-eslint/no-namespace\r\n    namespace JSX {\r\n      interface IntrinsicElements {\r\n        'jb-modal': JBModalType;\r\n      }\r\n      interface JBModalType extends React.DetailedHTMLProps<React.HTMLAttributes<JBModalWebComponent>, JBModalWebComponent> {\r\n        class?:string,\r\n      }\r\n    }\r\n}\r\n\r\nexport const JBModal = React.forwardRef((props:Props, ref) => {\r\n  const element = useRef<JBModalWebComponent>(null);\r\n  const [refChangeCount, refChangeCountSetter] = useState(0);\r\n  useImperativeHandle(\r\n    ref,\r\n    () => (element ? element.current : {}),\r\n    [element],\r\n  );\r\n  useEffect(() => {\r\n    refChangeCountSetter(refChangeCount + 1);\r\n  }, [element.current]);\r\n  useEffect(() => {\r\n    if (element.current) {\r\n      if (props.isOpen == true) {\r\n        element.current.open();\r\n      } else {\r\n        element.current.close();\r\n      }\r\n    }\r\n\r\n  }, [props.isOpen]);\r\n  useEffect(() => {\r\n    if (element.current) {\r\n      element.current.id = props.id;\r\n    }\r\n  }, [props.id]);\r\n\r\n  useEvents(element, props);\r\n  return (\r\n    <jb-modal ref={element} class={props.className ? props.className : ''}>\r\n      <div slot=\"content\">\r\n        {props.children}\r\n      </div>\r\n    </jb-modal>\r\n  );\r\n});\r\n\r\nJBModal.displayName = \"JBModal\";\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBM,SAAU,UAAU,SAAuC,OAAgB;AAC/E,6BAAS,SAAS,QAAQ,MAAM,QAAQ,KAAK;AAC7C,6BAAS,SAAS,QAAQ,MAAM,QAAQ,KAAK;AAC7C,6BAAS,SAAS,SAAS,MAAM,QAAQ;AACzC,6BAAS,SAAS,WAAW,MAAM,UAAU;AAC9C;;;;MCAY,wBAAgB,cAAY,WAAkB,CAAE,OAAA,QAAA;CAC3D,MAAM,UAAU,kBAA4B,KAAK;CACjD,MAAM,CAAC,gBAAgB,qBAAqB,GAAG,oBAAS,EAAE;AAC1D,gCACE,KACA,MAAG,UAAW,QAAG,UAAe,CAAE,GAAC,CAGrC;AAEA,sBAAI,MAAQ;AACZ,uBAAe,iBAAA,EAAA;aAEP;sBAEH,MAAA;cAAM,aACL,MAAA,UAAgB,KACjB,SAAA,QAAA,MAAA;MAGK,SAAS,QAAA,OAAA;WAIhB,MACF,EAAA;AAED,sBAAU,MAAA;AACV,MACE,QAAA,QACE,SAAA,QAAA,KAAA,MAAK;CAOX,GAAO"}

package/react/dist/JBModal.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import 'jb-modal';
+import { JBModalWebComponent } from 'jb-modal';
+import { EventProps } from './events-hook.js';
+export type Props = EventProps & React.PropsWithChildren<{
+    className?: string;
+    isOpen?: boolean;
+    id?: string;
+}>;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'jb-modal': JBModalType;
+        }
+        interface JBModalType extends React.DetailedHTMLProps<React.HTMLAttributes<JBModalWebComponent>, JBModalWebComponent> {
+            class?: string;
+        }
+    }
+}
+export declare const JBModal: React.ForwardRefExoticComponent<EventProps & {
+    className?: string;
+    isOpen?: boolean;
+    id?: string;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<unknown>>;

package/react/dist/JBModal.js

@@ -1,65 +1,2 @@
-import React, { useEffect, useRef, useState, useImperativeHandle } from 'react';
-import 'jb-modal';
-
-function useBindEvent(ref, event, handler, passive = false) {
-    useEffect(() => {
-        const dom = ref.current;
-        if (dom) {
-            // initiate the event handler
-            dom.addEventListener(event, handler, passive);
-        }
-        // this will clean up the event every time the component is re-rendered
-        return function cleanup() {
-            if (dom) {
-                dom.removeEventListener(event, handler, passive);
-            }
-        };
-    }, [ref, event, handler, passive]);
-}
-
-const JBModal = React.forwardRef((props, ref) => {
-    const element = useRef(null);
-    const [refChangeCount, refChangeCountSetter] = useState(0);
-    useImperativeHandle(ref, () => (element ? element.current : {}), [element]);
-    useEffect(() => {
-        refChangeCountSetter(refChangeCount + 1);
-    }, [element.current]);
-    useEffect(() => {
-        if (element.current) {
-            if (props.isOpen == true) {
-                element.current.open();
-            }
-            else {
-                element.current.close();
-            }
-        }
-    }, [props.isOpen]);
-    useEffect(() => {
-        if (props.id !== undefined && element.current) {
-            element.current.addEventListener('urlOpen', onUrlOpen);
-            element.current.id = props.id;
-        }
-        return () => {
-            if (props.id !== undefined && element.current) {
-                element.current.removeEventListener('urlOpen', onUrlOpen);
-            }
-        };
-    }, [props.id]);
-    function onClose() {
-        if (props.onClose) {
-            props.onClose();
-        }
-    }
-    function onUrlOpen() {
-        if (props.onUrlOpen) {
-            props.onUrlOpen();
-        }
-    }
-    useBindEvent(element, 'close', onClose);
-    return (React.createElement("jb-modal", { ref: element, class: props.className ? props.className : '' },
-        React.createElement("div", { slot: "content" }, props.children)));
-});
-JBModal.displayName = "JBModal";
-
-export { JBModal };
-//# sourceMappingURL=JBModal.js.map
+import e,{useEffect as r,useImperativeHandle as n,useRef as t,useState as o}from"react";import"jb-modal";import{useEvent as l}from"jb-core/react";let c=e.forwardRef((c,a)=>{let i=t(null),[d,s]=o(0);return n(a,()=>i?i.current:{},[i]),r(()=>{s(d+1)},[i.current]),r(()=>{i.current&&(!0==c.isOpen?i.current.open():i.current.close())},[c.isOpen]),r(()=>{i.current&&(i.current.id=c.id)},[c.id]),l(i,"load",c.onLoad,!0),l(i,"init",c.onInit,!0),l(i,"close",c.onClose),l(i,"urlOpen",c.onUrlOpen),e.createElement("jb-modal",{ref:i,class:c.className?c.className:""},e.createElement("div",{slot:"content"},c.children))});c.displayName="JBModal";export{c as JBModal};
+//# sourceMappingURL=JBModal.js.map

package/react/dist/JBModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"JBModal.js","sources":["../../../../common/hooks/use-event.ts","../lib/JBModal.tsx"],"sourcesContent":["import { useEffect } from \"react\";\r\n\r\nexport function useEvent(dom:HTMLElement, event:any, handler:any, passive = false) {\r\n  useEffect(() => {\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  });\r\n}\r\nexport function useBindEvent<TRef extends React.MutableRefObject<any|null>,TEvent>(ref:TRef, event:string, handler:(e:TEvent)=>void, passive = false) {\r\n  useEffect(() => {\r\n    const dom = ref.current;\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  },[ref,event,handler,passive]);\r\n}","import PropTypes from 'prop-types';\r\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react';\r\nimport 'jb-modal';\r\n// eslint-disable-next-line no-duplicate-imports\r\nimport { JBModalWebComponent } from 'jb-modal';\r\nimport { useBindEvent } from '../../../../common/hooks/use-event.js';\r\nexport type JBModalProps = React.PropsWithChildren<{\r\n    onClose?: () => void,\r\n    onUrlOpen?: () => void,\r\n    className?:string,\r\n    isOpen?: boolean,\r\n    id?: string,\r\n}>\r\n\r\ndeclare global {\r\n    // eslint-disable-next-line @typescript-eslint/no-namespace\r\n    namespace JSX {\r\n      interface IntrinsicElements {\r\n        'jb-modal': JBModalType;\r\n      }\r\n      interface JBModalType extends React.DetailedHTMLProps<React.HTMLAttributes<JBModalWebComponent>, JBModalWebComponent> {\r\n        class?:string,\r\n      }\r\n    }\r\n}\r\n\r\nconst JBModal = React.forwardRef((props:JBModalProps, ref) => {\r\n  const element = useRef<JBModalWebComponent>(null);\r\n  const [refChangeCount, refChangeCountSetter] = useState(0);\r\n  useImperativeHandle(\r\n    ref,\r\n    () => (element ? element.current : {}),\r\n    [element],\r\n  );\r\n  useEffect(() => {\r\n    refChangeCountSetter(refChangeCount + 1);\r\n  }, [element.current]);\r\n  useEffect(() => {\r\n    if (element.current) {\r\n      if (props.isOpen == true) {\r\n        element.current.open();\r\n      } else {\r\n        element.current.close();\r\n      }\r\n    }\r\n\r\n  }, [props.isOpen]);\r\n  useEffect(() => {\r\n    if (props.id !== undefined && element.current) {\r\n      element.current.addEventListener('urlOpen', onUrlOpen);\r\n      element.current.id = props.id;\r\n    }\r\n    return () => {\r\n      if (props.id !== undefined && element.current) {\r\n        element.current.removeEventListener('urlOpen', onUrlOpen);\r\n      }\r\n    };\r\n  }, [props.id]);\r\n  function onClose() {\r\n    if (props.onClose) {\r\n      props.onClose();\r\n    }\r\n  }\r\n  function onUrlOpen() {\r\n    if (props.onUrlOpen) {\r\n      props.onUrlOpen();\r\n    }\r\n  }\r\n  useBindEvent(element, 'close', onClose);\r\n  return (\r\n    <jb-modal ref={element} class={props.className ? props.className : ''}>\r\n      <div slot=\"content\">\r\n        {props.children}\r\n      </div>\r\n    </jb-modal>\r\n  );\r\n});\r\n\r\nJBModal.displayName = \"JBModal\";\r\nexport {JBModal};\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"JBModal.js","names":[],"sources":["../lib/events-hook.ts","../lib/JBModal.tsx"],"sourcesContent":["import { useEvent } from \"jb-core/react\";\r\nimport { RefObject } from \"react\";\r\nimport type {JBModalWebComponent, JBModalEventType} from 'jb-modal';\r\n\r\nexport type EventProps = {\r\n  /**\r\n   * when component loaded, in most cases component is already loaded before react mount so you dont need this but if you load web-component dynamically with lazy load it will be called after react mount\r\n   */\r\n  onLoad?: (e: JBModalEventType<CustomEvent>) => void,\r\n    /**\r\n   * when all property set and ready to use, in most cases component is already loaded before react mount so you dont need this but if you load web-component dynamically with lazy load it will be called after react mount\r\n   */\r\n  onInit?: (e: JBModalEventType<CustomEvent>) => void,\r\n  onClose?: (e: JBModalEventType<CustomEvent>) => void,\r\n  /**\r\n   * when modal opened automatically by url hash (when element have id and url has #id) use this to update open state in parent component\r\n   */\r\n  onUrlOpen?: (e: JBModalEventType<CustomEvent>) => void,\r\n}\r\nexport function useEvents(element:RefObject<JBModalWebComponent>,props:EventProps){\r\n  useEvent(element, 'load', props.onLoad, true);\r\n  useEvent(element, 'init', props.onInit, true);\r\n  useEvent(element, 'close', props.onClose);\r\n  useEvent(element, 'urlOpen', props.onUrlOpen);\r\n}","import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';\r\nimport 'jb-modal';\r\n// eslint-disable-next-line no-duplicate-imports\r\nimport { JBModalWebComponent } from 'jb-modal';\r\nimport { useEvents, EventProps } from './events-hook.js';\r\n\r\nexport type Props = EventProps & React.PropsWithChildren<{\r\n    className?:string,\r\n    isOpen?: boolean,\r\n    id?: string,\r\n}>\r\n\r\ndeclare global {\r\n    // eslint-disable-next-line @typescript-eslint/no-namespace\r\n    namespace JSX {\r\n      interface IntrinsicElements {\r\n        'jb-modal': JBModalType;\r\n      }\r\n      interface JBModalType extends React.DetailedHTMLProps<React.HTMLAttributes<JBModalWebComponent>, JBModalWebComponent> {\r\n        class?:string,\r\n      }\r\n    }\r\n}\r\n\r\nexport const JBModal = React.forwardRef((props:Props, ref) => {\r\n  const element = useRef<JBModalWebComponent>(null);\r\n  const [refChangeCount, refChangeCountSetter] = useState(0);\r\n  useImperativeHandle(\r\n    ref,\r\n    () => (element ? element.current : {}),\r\n    [element],\r\n  );\r\n  useEffect(() => {\r\n    refChangeCountSetter(refChangeCount + 1);\r\n  }, [element.current]);\r\n  useEffect(() => {\r\n    if (element.current) {\r\n      if (props.isOpen == true) {\r\n        element.current.open();\r\n      } else {\r\n        element.current.close();\r\n      }\r\n    }\r\n\r\n  }, [props.isOpen]);\r\n  useEffect(() => {\r\n    if (element.current) {\r\n      element.current.id = props.id;\r\n    }\r\n  }, [props.id]);\r\n\r\n  useEvents(element, props);\r\n  return (\r\n    <jb-modal ref={element} class={props.className ? props.className : ''}>\r\n      <div slot=\"content\">\r\n        {props.children}\r\n      </div>\r\n    </jb-modal>\r\n  );\r\n});\r\n\r\nJBModal.displayName = \"JBModal\";\r\n"],"mappings":";;;;;AAmBM,SAAU,UAAU,SAAuC,OAAgB;AAC/E,UAAS,SAAS,QAAQ,MAAM,QAAQ,KAAK;AAC7C,UAAS,SAAS,QAAQ,MAAM,QAAQ,KAAK;AAC7C,UAAS,SAAS,SAAS,MAAM,QAAQ;AACzC,UAAS,SAAS,WAAW,MAAM,UAAU;AAC9C;;;;MCAY,wBAAgB,MAAY,WAAkB,CAAE,OAAA,QAAA;CAC3D,MAAM,UAAU,OAA4B,KAAK;CACjD,MAAM,CAAC,gBAAgB,qBAAqB,GAAG,SAAS,EAAE;AAC1D,qBACE,KACA,MAAG,UAAW,QAAG,UAAe,CAAE,GAAC,CAGrC;AAEA,WAAI,MAAQ;AACZ,uBAAe,iBAAA,EAAA;aAEP;WAEH,MAAA;cAAM,aACL,MAAA,UAAgB,KACjB,SAAA,QAAA,MAAA;MAGK,SAAS,QAAA,OAAA;WAIhB,MACF,EAAA;AAED,WAAU,MAAA;AACV,MACE,QAAA,QACE,SAAA,QAAA,KAAA,MAAK;CAOX,GAAO"}

package/react/dist/JBModal.umd.js

@@ -1,70 +1,2 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('jb-modal')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'jb-modal'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JBModal = {}, global.React));
-})(this, (function (exports, React) { 'use strict';
-
-  function useBindEvent(ref, event, handler, passive = false) {
-      React.useEffect(() => {
-          const dom = ref.current;
-          if (dom) {
-              // initiate the event handler
-              dom.addEventListener(event, handler, passive);
-          }
-          // this will clean up the event every time the component is re-rendered
-          return function cleanup() {
-              if (dom) {
-                  dom.removeEventListener(event, handler, passive);
-              }
-          };
-      }, [ref, event, handler, passive]);
-  }
-
-  const JBModal = React.forwardRef((props, ref) => {
-      const element = React.useRef(null);
-      const [refChangeCount, refChangeCountSetter] = React.useState(0);
-      React.useImperativeHandle(ref, () => (element ? element.current : {}), [element]);
-      React.useEffect(() => {
-          refChangeCountSetter(refChangeCount + 1);
-      }, [element.current]);
-      React.useEffect(() => {
-          if (element.current) {
-              if (props.isOpen == true) {
-                  element.current.open();
-              }
-              else {
-                  element.current.close();
-              }
-          }
-      }, [props.isOpen]);
-      React.useEffect(() => {
-          if (props.id !== undefined && element.current) {
-              element.current.addEventListener('urlOpen', onUrlOpen);
-              element.current.id = props.id;
-          }
-          return () => {
-              if (props.id !== undefined && element.current) {
-                  element.current.removeEventListener('urlOpen', onUrlOpen);
-              }
-          };
-      }, [props.id]);
-      function onClose() {
-          if (props.onClose) {
-              props.onClose();
-          }
-      }
-      function onUrlOpen() {
-          if (props.onUrlOpen) {
-              props.onUrlOpen();
-          }
-      }
-      useBindEvent(element, 'close', onClose);
-      return (React.createElement("jb-modal", { ref: element, class: props.className ? props.className : '' },
-          React.createElement("div", { slot: "content" }, props.children)));
-  });
-  JBModal.displayName = "JBModal";
-
-  exports.JBModal = JBModal;
-
-}));
-//# sourceMappingURL=JBModal.umd.js.map
+var e,t;e=this,t=function(e,t,r,n){"use strict";var o=Object.create,l=Object.defineProperty,a=Object.getOwnPropertyDescriptor,c=Object.getOwnPropertyNames,u=Object.getPrototypeOf,s=Object.prototype.hasOwnProperty,d=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(var o,u=c(t),d=0,f=u.length;d<f;d++)o=u[d],s.call(e,o)||o===r||l(e,o,{get:(e=>t[e]).bind(null,o),enumerable:!(n=a(t,o))||n.enumerable});return e},f=(e,t,r)=>(r=null!=e?o(u(e)):{},d(!t&&e&&e.__esModule?r:l(r,"default",{value:e,enumerable:!0}),e));t=f(t),n=f(n);let i=t.default.forwardRef((e,r)=>{let o=(0,t.useRef)(null),[l,a]=(0,t.useState)(0);return(0,t.useImperativeHandle)(r,()=>o?o.current:{},[o]),(0,t.useEffect)(()=>{a(l+1)},[o.current]),(0,t.useEffect)(()=>{o.current&&(!0==e.isOpen?o.current.open():o.current.close())},[e.isOpen]),(0,t.useEffect)(()=>{o.current&&(o.current.id=e.id)},[e.id]),(0,n.useEvent)(o,"load",e.onLoad,!0),(0,n.useEvent)(o,"init",e.onInit,!0),(0,n.useEvent)(o,"close",e.onClose),(0,n.useEvent)(o,"urlOpen",e.onUrlOpen),t.default.createElement("jb-modal",{ref:o,class:e.className?e.className:""},t.default.createElement("div",{slot:"content"},e.children))});i.displayName="JBModal",e.JBModal=i},"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("jb-modal"),require("jb-core/react")):"function"==typeof define&&define.amd?define(["exports","react","jb-modal","jb-core/react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).JBModalReact={},e.React,e.JBModal,e.JBCoreReact);
+//# sourceMappingURL=JBModal.umd.js.map

package/react/dist/JBModal.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"JBModal.umd.js","sources":["../../../../common/hooks/use-event.ts","../lib/JBModal.tsx"],"sourcesContent":["import { useEffect } from \"react\";\r\n\r\nexport function useEvent(dom:HTMLElement, event:any, handler:any, passive = false) {\r\n  useEffect(() => {\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  });\r\n}\r\nexport function useBindEvent<TRef extends React.MutableRefObject<any|null>,TEvent>(ref:TRef, event:string, handler:(e:TEvent)=>void, passive = false) {\r\n  useEffect(() => {\r\n    const dom = ref.current;\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  },[ref,event,handler,passive]);\r\n}","import PropTypes from 'prop-types';\r\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react';\r\nimport 'jb-modal';\r\n// eslint-disable-next-line no-duplicate-imports\r\nimport { JBModalWebComponent } from 'jb-modal';\r\nimport { useBindEvent } from '../../../../common/hooks/use-event.js';\r\nexport type JBModalProps = React.PropsWithChildren<{\r\n    onClose?: () => void,\r\n    onUrlOpen?: () => void,\r\n    className?:string,\r\n    isOpen?: boolean,\r\n    id?: string,\r\n}>\r\n\r\ndeclare global {\r\n    // eslint-disable-next-line @typescript-eslint/no-namespace\r\n    namespace JSX {\r\n      interface IntrinsicElements {\r\n        'jb-modal': JBModalType;\r\n      }\r\n      interface JBModalType extends React.DetailedHTMLProps<React.HTMLAttributes<JBModalWebComponent>, JBModalWebComponent> {\r\n        class?:string,\r\n      }\r\n    }\r\n}\r\n\r\nconst JBModal = React.forwardRef((props:JBModalProps, ref) => {\r\n  const element = useRef<JBModalWebComponent>(null);\r\n  const [refChangeCount, refChangeCountSetter] = useState(0);\r\n  useImperativeHandle(\r\n    ref,\r\n    () => (element ? element.current : {}),\r\n    [element],\r\n  );\r\n  useEffect(() => {\r\n    refChangeCountSetter(refChangeCount + 1);\r\n  }, [element.current]);\r\n  useEffect(() => {\r\n    if (element.current) {\r\n      if (props.isOpen == true) {\r\n        element.current.open();\r\n      } else {\r\n        element.current.close();\r\n      }\r\n    }\r\n\r\n  }, [props.isOpen]);\r\n  useEffect(() => {\r\n    if (props.id !== undefined && element.current) {\r\n      element.current.addEventListener('urlOpen', onUrlOpen);\r\n      element.current.id = props.id;\r\n    }\r\n    return () => {\r\n      if (props.id !== undefined && element.current) {\r\n        element.current.removeEventListener('urlOpen', onUrlOpen);\r\n      }\r\n    };\r\n  }, [props.id]);\r\n  function onClose() {\r\n    if (props.onClose) {\r\n      props.onClose();\r\n    }\r\n  }\r\n  function onUrlOpen() {\r\n    if (props.onUrlOpen) {\r\n      props.onUrlOpen();\r\n    }\r\n  }\r\n  useBindEvent(element, 'close', onClose);\r\n  return (\r\n    <jb-modal ref={element} class={props.className ? props.className : ''}>\r\n      <div slot=\"content\">\r\n        {props.children}\r\n      </div>\r\n    </jb-modal>\r\n  );\r\n});\r\n\r\nJBModal.displayName = \"JBModal\";\r\nexport {JBModal};\r\n"],"names":["useEffect","useRef","useState","useImperativeHandle"],"mappings":"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"}
+{"version":3,"file":"JBModal.umd.js","names":[],"sources":["../lib/events-hook.ts","../lib/JBModal.tsx"],"sourcesContent":["import { useEvent } from \"jb-core/react\";\r\nimport { RefObject } from \"react\";\r\nimport type {JBModalWebComponent, JBModalEventType} from 'jb-modal';\r\n\r\nexport type EventProps = {\r\n  /**\r\n   * when component loaded, in most cases component is already loaded before react mount so you dont need this but if you load web-component dynamically with lazy load it will be called after react mount\r\n   */\r\n  onLoad?: (e: JBModalEventType<CustomEvent>) => void,\r\n    /**\r\n   * when all property set and ready to use, in most cases component is already loaded before react mount so you dont need this but if you load web-component dynamically with lazy load it will be called after react mount\r\n   */\r\n  onInit?: (e: JBModalEventType<CustomEvent>) => void,\r\n  onClose?: (e: JBModalEventType<CustomEvent>) => void,\r\n  /**\r\n   * when modal opened automatically by url hash (when element have id and url has #id) use this to update open state in parent component\r\n   */\r\n  onUrlOpen?: (e: JBModalEventType<CustomEvent>) => void,\r\n}\r\nexport function useEvents(element:RefObject<JBModalWebComponent>,props:EventProps){\r\n  useEvent(element, 'load', props.onLoad, true);\r\n  useEvent(element, 'init', props.onInit, true);\r\n  useEvent(element, 'close', props.onClose);\r\n  useEvent(element, 'urlOpen', props.onUrlOpen);\r\n}","import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';\r\nimport 'jb-modal';\r\n// eslint-disable-next-line no-duplicate-imports\r\nimport { JBModalWebComponent } from 'jb-modal';\r\nimport { useEvents, EventProps } from './events-hook.js';\r\n\r\nexport type Props = EventProps & React.PropsWithChildren<{\r\n    className?:string,\r\n    isOpen?: boolean,\r\n    id?: string,\r\n}>\r\n\r\ndeclare global {\r\n    // eslint-disable-next-line @typescript-eslint/no-namespace\r\n    namespace JSX {\r\n      interface IntrinsicElements {\r\n        'jb-modal': JBModalType;\r\n      }\r\n      interface JBModalType extends React.DetailedHTMLProps<React.HTMLAttributes<JBModalWebComponent>, JBModalWebComponent> {\r\n        class?:string,\r\n      }\r\n    }\r\n}\r\n\r\nexport const JBModal = React.forwardRef((props:Props, ref) => {\r\n  const element = useRef<JBModalWebComponent>(null);\r\n  const [refChangeCount, refChangeCountSetter] = useState(0);\r\n  useImperativeHandle(\r\n    ref,\r\n    () => (element ? element.current : {}),\r\n    [element],\r\n  );\r\n  useEffect(() => {\r\n    refChangeCountSetter(refChangeCount + 1);\r\n  }, [element.current]);\r\n  useEffect(() => {\r\n    if (element.current) {\r\n      if (props.isOpen == true) {\r\n        element.current.open();\r\n      } else {\r\n        element.current.close();\r\n      }\r\n    }\r\n\r\n  }, [props.isOpen]);\r\n  useEffect(() => {\r\n    if (element.current) {\r\n      element.current.id = props.id;\r\n    }\r\n  }, [props.id]);\r\n\r\n  useEvents(element, props);\r\n  return (\r\n    <jb-modal ref={element} class={props.className ? props.className : ''}>\r\n      <div slot=\"content\">\r\n        {props.children}\r\n      </div>\r\n    </jb-modal>\r\n  );\r\n});\r\n\r\nJBModal.displayName = \"JBModal\";\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBM,SAAU,UAAU,SAAuC,OAAgB;AAC/E,6BAAS,SAAS,QAAQ,MAAM,QAAQ,KAAK;AAC7C,6BAAS,SAAS,QAAQ,MAAM,QAAQ,KAAK;AAC7C,6BAAS,SAAS,SAAS,MAAM,QAAQ;AACzC,6BAAS,SAAS,WAAW,MAAM,UAAU;AAC9C;;;;MCAY,wBAAgB,cAAY,WAAkB,CAAE,OAAA,QAAA;CAC3D,MAAM,UAAU,kBAA4B,KAAK;CACjD,MAAM,CAAC,gBAAgB,qBAAqB,GAAG,oBAAS,EAAE;AAC1D,gCACE,KACA,MAAG,UAAW,QAAG,UAAe,CAAE,GAAC,CAGrC;AAEA,sBAAI,MAAQ;AACZ,uBAAe,iBAAA,EAAA;aAEP;sBAEH,MAAA;cAAM,aACL,MAAA,UAAgB,KACjB,SAAA,QAAA,MAAA;MAGK,SAAS,QAAA,OAAA;WAIhB,MACF,EAAA;AAED,sBAAU,MAAA;AACV,MACE,QAAA,QACE,SAAA,QAAA,KAAA,MAAK;CAOX,GAAO"}

package/react/dist/events-hook.d.ts

@@ -0,0 +1,18 @@
+import { RefObject } from "react";
+import type { JBModalWebComponent, JBModalEventType } from 'jb-modal';
+export type EventProps = {
+    /**
+     * when component loaded, in most cases component is already loaded before react mount so you dont need this but if you load web-component dynamically with lazy load it will be called after react mount
+     */
+    onLoad?: (e: JBModalEventType<CustomEvent>) => void;
+    /**
+   * when all property set and ready to use, in most cases component is already loaded before react mount so you dont need this but if you load web-component dynamically with lazy load it will be called after react mount
+   */
+    onInit?: (e: JBModalEventType<CustomEvent>) => void;
+    onClose?: (e: JBModalEventType<CustomEvent>) => void;
+    /**
+     * when modal opened automatically by url hash (when element have id and url has #id) use this to update open state in parent component
+     */
+    onUrlOpen?: (e: JBModalEventType<CustomEvent>) => void;
+};
+export declare function useEvents(element: RefObject<JBModalWebComponent>, props: EventProps): void;

package/react/dist/lib/JBModal.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import 'jb-modal';
+import { JBModalWebComponent } from 'jb-modal';
+import { EventProps } from './events-hook.js';
+export type Props = EventProps & React.PropsWithChildren<{
+    className?: string;
+    isOpen?: boolean;
+    id?: string;
+}>;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'jb-modal': JBModalType;
+        }
+        interface JBModalType extends React.DetailedHTMLProps<React.HTMLAttributes<JBModalWebComponent>, JBModalWebComponent> {
+            class?: string;
+        }
+    }
+}
+export declare const JBModal: React.ForwardRefExoticComponent<EventProps & {
+    className?: string;
+    isOpen?: boolean;
+    id?: string;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<unknown>>;

package/react/dist/lib/events-hook.d.ts

@@ -0,0 +1,18 @@
+import { RefObject } from "react";
+import type { JBModalWebComponent, JBModalEventType } from 'jb-modal';
+export type EventProps = {
+    /**
+     * when component loaded, in most cases component is already loaded before react mount so you dont need this but if you load web-component dynamically with lazy load it will be called after react mount
+     */
+    onLoad?: (e: JBModalEventType<CustomEvent>) => void;
+    /**
+   * when all property set and ready to use, in most cases component is already loaded before react mount so you dont need this but if you load web-component dynamically with lazy load it will be called after react mount
+   */
+    onInit?: (e: JBModalEventType<CustomEvent>) => void;
+    onClose?: (e: JBModalEventType<CustomEvent>) => void;
+    /**
+     * when modal opened automatically by url hash (when element have id and url has #id) use this to update open state in parent component
+     */
+    onUrlOpen?: (e: JBModalEventType<CustomEvent>) => void;
+};
+export declare function useEvents(element: RefObject<JBModalWebComponent>, props: EventProps): void;

package/react/dist/web-component/jb-modal/react/lib/JBModal.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
 import 'jb-modal';
 import { JBModalWebComponent } from 'jb-modal';
-export type JBModalProps = React.PropsWithChildren<{
-    onClose?: () => void;
-    onUrlOpen?: () => void;
+import { EventProps } from './events-hook.js';
+export type Props = EventProps & React.PropsWithChildren<{
     className?: string;
     isOpen?: boolean;
     id?: string;
@@ -18,13 +17,10 @@ declare global {
         }
     }
 }
-declare const JBModal: React.ForwardRefExoticComponent<{
-    onClose?: () => void;
-    onUrlOpen?: () => void;
+export declare const JBModal: React.ForwardRefExoticComponent<EventProps & {
     className?: string;
     isOpen?: boolean;
     id?: string;
 } & {
     children?: React.ReactNode;
 } & React.RefAttributes<unknown>>;
-export { JBModal };

package/react/dist/web-component/jb-modal/react/lib/events-hook.d.ts

@@ -0,0 +1,18 @@
+import { RefObject } from "react";
+import type { JBModalWebComponent, JBModalEventType } from 'jb-modal';
+export type EventProps = {
+    /**
+     * when component loaded, in most cases component is already loaded before react mount so you dont need this but if you load web-component dynamically with lazy load it will be called after react mount
+     */
+    onLoad?: (e: JBModalEventType<CustomEvent>) => void;
+    /**
+   * when all property set and ready to use, in most cases component is already loaded before react mount so you dont need this but if you load web-component dynamically with lazy load it will be called after react mount
+   */
+    onInit?: (e: JBModalEventType<CustomEvent>) => void;
+    onClose?: (e: JBModalEventType<CustomEvent>) => void;
+    /**
+     * when modal opened automatically by url hash (when element have id and url has #id) use this to update open state in parent component
+     */
+    onUrlOpen?: (e: JBModalEventType<CustomEvent>) => void;
+};
+export declare function useEvents(element: RefObject<JBModalWebComponent>, props: EventProps): void;

package/react/lib/JBModal.tsx

@@ -1,12 +1,10 @@
-import PropTypes from 'prop-types';
 import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
 import 'jb-modal';
 // eslint-disable-next-line no-duplicate-imports
 import { JBModalWebComponent } from 'jb-modal';
-import { useBindEvent } from '../../../../common/hooks/use-event.js';
-export type JBModalProps = React.PropsWithChildren<{
-    onClose?: () => void,
-    onUrlOpen?: () => void,
+import { useEvents, EventProps } from './events-hook.js';
+
+export type Props = EventProps & React.PropsWithChildren<{
     className?:string,
     isOpen?: boolean,
     id?: string,
@@ -24,7 +22,7 @@ declare global {
     }
 }
 
-const JBModal = React.forwardRef((props:JBModalProps, ref) => {
+export const JBModal = React.forwardRef((props:Props, ref) => {
   const element = useRef<JBModalWebComponent>(null);
   const [refChangeCount, refChangeCountSetter] = useState(0);
   useImperativeHandle(
@@ -46,27 +44,12 @@ const JBModal = React.forwardRef((props:JBModalProps, ref) => {
 
   }, [props.isOpen]);
   useEffect(() => {
-    if (props.id !== undefined && element.current) {
-      element.current.addEventListener('urlOpen', onUrlOpen);
+    if (element.current) {
       element.current.id = props.id;
     }
-    return () => {
-      if (props.id !== undefined && element.current) {
-        element.current.removeEventListener('urlOpen', onUrlOpen);
-      }
-    };
   }, [props.id]);
-  function onClose() {
-    if (props.onClose) {
-      props.onClose();
-    }
-  }
-  function onUrlOpen() {
-    if (props.onUrlOpen) {
-      props.onUrlOpen();
-    }
-  }
-  useBindEvent(element, 'close', onClose);
+
+  useEvents(element, props);
   return (
     <jb-modal ref={element} class={props.className ? props.className : ''}>
       <div slot="content">
@@ -77,4 +60,3 @@ const JBModal = React.forwardRef((props:JBModalProps, ref) => {
 });
 
 JBModal.displayName = "JBModal";
-export {JBModal};

package/react/lib/events-hook.ts

@@ -0,0 +1,25 @@
+import { useEvent } from "jb-core/react";
+import { RefObject } from "react";
+import type {JBModalWebComponent, JBModalEventType} from 'jb-modal';
+
+export type EventProps = {
+  /**
+   * when component loaded, in most cases component is already loaded before react mount so you dont need this but if you load web-component dynamically with lazy load it will be called after react mount
+   */
+  onLoad?: (e: JBModalEventType<CustomEvent>) => void,
+    /**
+   * when all property set and ready to use, in most cases component is already loaded before react mount so you dont need this but if you load web-component dynamically with lazy load it will be called after react mount
+   */
+  onInit?: (e: JBModalEventType<CustomEvent>) => void,
+  onClose?: (e: JBModalEventType<CustomEvent>) => void,
+  /**
+   * when modal opened automatically by url hash (when element have id and url has #id) use this to update open state in parent component
+   */
+  onUrlOpen?: (e: JBModalEventType<CustomEvent>) => void,
+}
+export function useEvents(element:RefObject<JBModalWebComponent>,props:EventProps){
+  useEvent(element, 'load', props.onLoad, true);
+  useEvent(element, 'init', props.onInit, true);
+  useEvent(element, 'close', props.onClose);
+  useEvent(element, 'urlOpen', props.onUrlOpen);
+}

package/react/package.json

@@ -27,7 +27,7 @@
     "dist/"
   ],
   "main": "index.js",
-  "types": "./dist/web-component/jb-modal/react/lib/JBModal.d.ts",
+  "types": "./dist/JBModal.d.ts",
   "repository": {
 		"type": "git",
 		"url": "git@github.com:javadbat/jb-modal.git"

package/react/tsconfig.json

@@ -1,11 +1,9 @@
 {
     "compilerOptions": {
-        "baseUrl": "."
+        "baseUrl": ".",
+        "rootDir": "./lib"
     },
     "include": [
-        "../../../common/scripts/**/*.ts",
-        "../../../common/hooks/**/*.ts",
-        "../../../common/hooks/**/*.js",
         "lib/**/*.ts",
         "lib/**/*.tsx"
     ],
@@ -14,5 +12,5 @@
         "**/*.spec.ts",
         "dist",
     ],
-    "extends":"../../tsconfig-react.json"
+    "extends":"jb-core/configs/tsconfig-react.json"
 }

package/dist/JBModal.cjs.js

@@ -1,2 +0,0 @@
-"use strict";function n(n,e,t,o){if("a"===t&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?n!==e||!o:!e.has(n))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===t?o:"a"===t?o.call(n):o?o.value:e.get(n)}function e(n,e,t,o,i){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!i)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?n!==e||!i:!e.has(n))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?i.call(n,t):i?i.value=t:e.set(n,t),t}"function"==typeof SuppressedError&&SuppressedError;var t,o,i,a;class s extends HTMLElement{get id(){const e=this.getAttribute("id")||"";return n(this,i,"f")||e}set id(n){e(this,i,n,"f"),this.checkInitialOpenness()}get isOpen(){return n(this,o,"f")}constructor(){super(),t.add(this),o.set(this,!1),i.set(this,""),this.config={autoCloseOnBackgroundClick:!1},this.initWebComponent()}connectedCallback(){this.callOnLoadEvent(),this.initProp(),this.callOnInitEvent()}callOnLoadEvent(){const n=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(n)}callOnInitEvent(){const n=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(n)}initWebComponent(){const n=this.attachShadow({mode:"open"}),e=document.createElement("template");e.innerHTML='<style>.jb-modal-web-component {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: var(--jb-modal-z-index, 1);\n  width: 100%;\n  height: 100%;\n}\n.jb-modal-web-component.--closed {\n  display: none;\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-modal-web-component.--closed .modal-content-wrapper {\n    transform: translateY(100%);\n  }\n}\n.jb-modal-web-component.--opened {\n  display: block;\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-modal-web-component.--opened .modal-content-wrapper {\n    animation-name: swipe-up;\n    animation-duration: 0.3s;\n    animation-delay: 0s;\n    animation-iteration-count: 1;\n    animation-timing-function: ease;\n  }\n}\n@keyframes swipe-up {\n  0% {\n    transform: translateY(100%);\n  }\n  100% {\n    transform: translateY(0%);\n  }\n}\n.jb-modal-web-component .modal-background {\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-color: var(--jb-modal-back-bg-color, rgba(255, 255, 255, 0.1));\n  backdrop-filter: blur(10px);\n  z-index: 2;\n  width: 100%;\n  height: 100%;\n}\n.jb-modal-web-component .modal-content-wrapper {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 3;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-modal-web-component .modal-content-wrapper {\n    bottom: 0;\n    top: initial;\n    align-items: flex-end;\n  }\n}\n.jb-modal-web-component .modal-content-wrapper .modal-content {\n  pointer-events: all;\n  width: auto;\n  height: auto;\n  background-color: var(--jb-modal-bg-color, #fff);\n  border-radius: var(--jb-modal-border-radius, 24px);\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-modal-web-component .modal-content-wrapper .modal-content {\n    width: 100%;\n    height: auto;\n    max-height: calc(100% - 80px);\n    min-height: 32px;\n    border-radius: var(--jb-modal-border-radius-mobile, 24px 24px 0 0);\n    overflow-y: auto;\n  }\n}</style>\n<div class="jb-modal-web-component --closed">\r\n    <div class="modal-background"></div>\r\n    <div class="modal-content-wrapper">\r\n        <div class="modal-content">\r\n            <slot name="content"></slot>\r\n        </div>\r\n    </div>\r\n</div>',n.appendChild(e.content.cloneNode(!0)),this.elements={componentWrapper:n.querySelector(".jb-modal-web-component"),background:n.querySelector(".modal-background")}}registerEventListener(){this.elements.background.addEventListener("click",this.onBackgroundClick.bind(this)),window.addEventListener("popstate",n(this,t,"m",a).bind(this))}initProp(){this.registerEventListener()}checkInitialOpenness(){window.location.hash==`#${this.id}`&&(this.triggerUrlOpenEvent(),this.open())}triggerUrlOpenEvent(){const n=new CustomEvent("urlOpen",{bubbles:!0,composed:!0});this.dispatchEvent(n)}static get observedAttributes(){return["is-open","id"]}attributeChangedCallback(n,e,t){this.onAttributeChange(n,t)}onAttributeChange(e,t){switch(e){case"is-open":"true"==t?n(this,o,"f")||this.open():n(this,o,"f")&&this.close();break;case"id":this.id=t}}onBackgroundClick(){this.dispatchCloseEvent("BACKGROUND_CLICK"),this.config.autoCloseOnBackgroundClick&&this.close()}dispatchCloseEvent(n){const e=new CustomEvent("close",{detail:{eventType:n}});this.dispatchEvent(e)}close(){e(this,o,!1,"f"),this.elements.componentWrapper.classList.remove("--opened"),this.elements.componentWrapper.classList.add("--closed");const n=window.history;window.location.hash==`#${this.id}`&&n.go(-1)}open(){if(e(this,o,!0,"f"),this.elements.componentWrapper.classList.remove("--closed"),this.elements.componentWrapper.classList.add("--opened"),this.id){const n=window.history;window.location.hash!=`#${this.id}`&&n.pushState({JBModal:{}},"",`#${this.id}`)}}}o=new WeakMap,i=new WeakMap,t=new WeakSet,a=function(){this.isOpen&&(this.dispatchCloseEvent("HISTORY_BACK_EVENT"),this.config.autoCloseOnBackgroundClick&&this.close())};!customElements.get("jb-modal")&&window.customElements.define("jb-modal",s),exports.JBModalWebComponent=s;
-//# sourceMappingURL=JBModal.cjs.js.map

package/dist/JBModal.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"JBModal.cjs.js","sources":["../lib/JBModal.ts"],"sourcesContent":["import HTML from \"./JBModal.html\";\r\nimport CSS from \"./JBModal.scss\";\r\nimport { ElementsObject } from \"./Types\";\r\n\r\nexport class JBModalWebComponent extends HTMLElement {\r\n  #isOpen = false;\r\n  #id = \"\";\r\n  elements!: ElementsObject;\r\n  config = {\r\n    autoCloseOnBackgroundClick: false,\r\n  };\r\n  get id() {\r\n    const id: string = this.getAttribute(\"id\") || \"\";\r\n    return this.#id || id;\r\n  }\r\n  set id(value: string) {\r\n    this.#id = value;\r\n    this.checkInitialOpenness();\r\n  }\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 binded\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-modal-web-component\")!,\r\n      background: shadowRoot.querySelector(\".modal-background\")!,\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.config.autoCloseOnBackgroundClick) {\r\n      this.close();\r\n    }\r\n  }\r\n  dispatchCloseEvent(type:\"BACKGROUND_CLICK\"| \"HISTORY_BACK_EVENT\" | \"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 modal\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    const history = window.history;\r\n    const location = window.location;\r\n    if (location.hash == `#${this.id}`) {\r\n      history.go(-1);\r\n    }\r\n  }\r\n  /**\r\n   * @public\r\n   * will open modal\r\n   */\r\n  open() {\r\n    this.#isOpen = true;\r\n    this.elements.componentWrapper.classList.remove(\"--closed\");\r\n    this.elements.componentWrapper.classList.add(\"--opened\");\r\n    if (this.id) {\r\n      const history = window.history;\r\n      const location = window.location;\r\n      if (!(location.hash == `#${this.id}`)) {\r\n        history.pushState({ JBModal: {} }, \"\", `#${this.id}`);\r\n      }\r\n    }\r\n  }\r\n  #onBrowserBack() {\r\n    if (this.isOpen) {\r\n      this.dispatchCloseEvent(\"HISTORY_BACK_EVENT\");\r\n      if (this.config.autoCloseOnBackgroundClick) {\r\n        this.close();\r\n      }\r\n    }\r\n  }\r\n}\r\nconst myElementNotExists = !customElements.get(\"jb-modal\");\r\nif (myElementNotExists) {\r\n  window.customElements.define(\"jb-modal\", JBModalWebComponent);\r\n}\r\n"],"names":["JBModalWebComponent","HTMLElement","id","this","getAttribute","__classPrivateFieldGet","_JBModalWebComponent_id","value","__classPrivateFieldSet","checkInitialOpenness","isOpen","_JBModalWebComponent_isOpen","constructor","super","set","config","autoCloseOnBackgroundClick","initWebComponent","connectedCallback","callOnLoadEvent","initProp","callOnInitEvent","event","CustomEvent","bubbles","composed","dispatchEvent","shadowRoot","attachShadow","mode","element","document","createElement","innerHTML","appendChild","content","cloneNode","elements","componentWrapper","querySelector","background","registerEventListener","addEventListener","onBackgroundClick","bind","window","_JBModalWebComponent_instances","_JBModalWebComponent_onBrowserBack","location","hash","triggerUrlOpenEvent","open","observedAttributes","attributeChangedCallback","name","oldValue","newValue","onAttributeChange","close","dispatchCloseEvent","type","detail","eventType","classList","remove","add","history","go","pushState","JBModal","customElements","get","define"],"mappings":"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"}

package/dist/JBModal.js

@@ -1,2 +0,0 @@
-function n(n,e,t,o){if("a"===t&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?n!==e||!o:!e.has(n))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===t?o:"a"===t?o.call(n):o?o.value:e.get(n)}function e(n,e,t,o,i){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!i)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?n!==e||!i:!e.has(n))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?i.call(n,t):i?i.value=t:e.set(n,t),t}"function"==typeof SuppressedError&&SuppressedError;var t,o,i,a;class s extends HTMLElement{get id(){const e=this.getAttribute("id")||"";return n(this,i,"f")||e}set id(n){e(this,i,n,"f"),this.checkInitialOpenness()}get isOpen(){return n(this,o,"f")}constructor(){super(),t.add(this),o.set(this,!1),i.set(this,""),this.config={autoCloseOnBackgroundClick:!1},this.initWebComponent()}connectedCallback(){this.callOnLoadEvent(),this.initProp(),this.callOnInitEvent()}callOnLoadEvent(){const n=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(n)}callOnInitEvent(){const n=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(n)}initWebComponent(){const n=this.attachShadow({mode:"open"}),e=document.createElement("template");e.innerHTML='<style>.jb-modal-web-component {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: var(--jb-modal-z-index, 1);\n  width: 100%;\n  height: 100%;\n}\n.jb-modal-web-component.--closed {\n  display: none;\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-modal-web-component.--closed .modal-content-wrapper {\n    transform: translateY(100%);\n  }\n}\n.jb-modal-web-component.--opened {\n  display: block;\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-modal-web-component.--opened .modal-content-wrapper {\n    animation-name: swipe-up;\n    animation-duration: 0.3s;\n    animation-delay: 0s;\n    animation-iteration-count: 1;\n    animation-timing-function: ease;\n  }\n}\n@keyframes swipe-up {\n  0% {\n    transform: translateY(100%);\n  }\n  100% {\n    transform: translateY(0%);\n  }\n}\n.jb-modal-web-component .modal-background {\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-color: var(--jb-modal-back-bg-color, rgba(255, 255, 255, 0.1));\n  backdrop-filter: blur(10px);\n  z-index: 2;\n  width: 100%;\n  height: 100%;\n}\n.jb-modal-web-component .modal-content-wrapper {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 3;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-modal-web-component .modal-content-wrapper {\n    bottom: 0;\n    top: initial;\n    align-items: flex-end;\n  }\n}\n.jb-modal-web-component .modal-content-wrapper .modal-content {\n  pointer-events: all;\n  width: auto;\n  height: auto;\n  background-color: var(--jb-modal-bg-color, #fff);\n  border-radius: var(--jb-modal-border-radius, 24px);\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-modal-web-component .modal-content-wrapper .modal-content {\n    width: 100%;\n    height: auto;\n    max-height: calc(100% - 80px);\n    min-height: 32px;\n    border-radius: var(--jb-modal-border-radius-mobile, 24px 24px 0 0);\n    overflow-y: auto;\n  }\n}</style>\n<div class="jb-modal-web-component --closed">\r\n    <div class="modal-background"></div>\r\n    <div class="modal-content-wrapper">\r\n        <div class="modal-content">\r\n            <slot name="content"></slot>\r\n        </div>\r\n    </div>\r\n</div>',n.appendChild(e.content.cloneNode(!0)),this.elements={componentWrapper:n.querySelector(".jb-modal-web-component"),background:n.querySelector(".modal-background")}}registerEventListener(){this.elements.background.addEventListener("click",this.onBackgroundClick.bind(this)),window.addEventListener("popstate",n(this,t,"m",a).bind(this))}initProp(){this.registerEventListener()}checkInitialOpenness(){window.location.hash==`#${this.id}`&&(this.triggerUrlOpenEvent(),this.open())}triggerUrlOpenEvent(){const n=new CustomEvent("urlOpen",{bubbles:!0,composed:!0});this.dispatchEvent(n)}static get observedAttributes(){return["is-open","id"]}attributeChangedCallback(n,e,t){this.onAttributeChange(n,t)}onAttributeChange(e,t){switch(e){case"is-open":"true"==t?n(this,o,"f")||this.open():n(this,o,"f")&&this.close();break;case"id":this.id=t}}onBackgroundClick(){this.dispatchCloseEvent("BACKGROUND_CLICK"),this.config.autoCloseOnBackgroundClick&&this.close()}dispatchCloseEvent(n){const e=new CustomEvent("close",{detail:{eventType:n}});this.dispatchEvent(e)}close(){e(this,o,!1,"f"),this.elements.componentWrapper.classList.remove("--opened"),this.elements.componentWrapper.classList.add("--closed");const n=window.history;window.location.hash==`#${this.id}`&&n.go(-1)}open(){if(e(this,o,!0,"f"),this.elements.componentWrapper.classList.remove("--closed"),this.elements.componentWrapper.classList.add("--opened"),this.id){const n=window.history;window.location.hash!=`#${this.id}`&&n.pushState({JBModal:{}},"",`#${this.id}`)}}}o=new WeakMap,i=new WeakMap,t=new WeakSet,a=function(){this.isOpen&&(this.dispatchCloseEvent("HISTORY_BACK_EVENT"),this.config.autoCloseOnBackgroundClick&&this.close())};!customElements.get("jb-modal")&&window.customElements.define("jb-modal",s);export{s as JBModalWebComponent};
-//# sourceMappingURL=JBModal.js.map

package/dist/JBModal.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"JBModal.js","sources":["../lib/JBModal.ts"],"sourcesContent":["import HTML from \"./JBModal.html\";\r\nimport CSS from \"./JBModal.scss\";\r\nimport { ElementsObject } from \"./Types\";\r\n\r\nexport class JBModalWebComponent extends HTMLElement {\r\n  #isOpen = false;\r\n  #id = \"\";\r\n  elements!: ElementsObject;\r\n  config = {\r\n    autoCloseOnBackgroundClick: false,\r\n  };\r\n  get id() {\r\n    const id: string = this.getAttribute(\"id\") || \"\";\r\n    return this.#id || id;\r\n  }\r\n  set id(value: string) {\r\n    this.#id = value;\r\n    this.checkInitialOpenness();\r\n  }\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 binded\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-modal-web-component\")!,\r\n      background: shadowRoot.querySelector(\".modal-background\")!,\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.config.autoCloseOnBackgroundClick) {\r\n      this.close();\r\n    }\r\n  }\r\n  dispatchCloseEvent(type:\"BACKGROUND_CLICK\"| \"HISTORY_BACK_EVENT\" | \"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 modal\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    const history = window.history;\r\n    const location = window.location;\r\n    if (location.hash == `#${this.id}`) {\r\n      history.go(-1);\r\n    }\r\n  }\r\n  /**\r\n   * @public\r\n   * will open modal\r\n   */\r\n  open() {\r\n    this.#isOpen = true;\r\n    this.elements.componentWrapper.classList.remove(\"--closed\");\r\n    this.elements.componentWrapper.classList.add(\"--opened\");\r\n    if (this.id) {\r\n      const history = window.history;\r\n      const location = window.location;\r\n      if (!(location.hash == `#${this.id}`)) {\r\n        history.pushState({ JBModal: {} }, \"\", `#${this.id}`);\r\n      }\r\n    }\r\n  }\r\n  #onBrowserBack() {\r\n    if (this.isOpen) {\r\n      this.dispatchCloseEvent(\"HISTORY_BACK_EVENT\");\r\n      if (this.config.autoCloseOnBackgroundClick) {\r\n        this.close();\r\n      }\r\n    }\r\n  }\r\n}\r\nconst myElementNotExists = !customElements.get(\"jb-modal\");\r\nif (myElementNotExists) {\r\n  window.customElements.define(\"jb-modal\", JBModalWebComponent);\r\n}\r\n"],"names":["JBModalWebComponent","HTMLElement","id","this","getAttribute","__classPrivateFieldGet","_JBModalWebComponent_id","value","__classPrivateFieldSet","checkInitialOpenness","isOpen","_JBModalWebComponent_isOpen","constructor","super","set","config","autoCloseOnBackgroundClick","initWebComponent","connectedCallback","callOnLoadEvent","initProp","callOnInitEvent","event","CustomEvent","bubbles","composed","dispatchEvent","shadowRoot","attachShadow","mode","element","document","createElement","innerHTML","appendChild","content","cloneNode","elements","componentWrapper","querySelector","background","registerEventListener","addEventListener","onBackgroundClick","bind","window","_JBModalWebComponent_instances","_JBModalWebComponent_onBrowserBack","location","hash","triggerUrlOpenEvent","open","observedAttributes","attributeChangedCallback","name","oldValue","newValue","onAttributeChange","close","dispatchCloseEvent","type","detail","eventType","classList","remove","add","history","go","pushState","JBModal","customElements","get","define"],"mappings":"ktBAIM,MAAOA,UAA4BC,YAOvC,MAAIC,GACF,MAAMA,EAAaC,KAAKC,aAAa,OAAS,GAC9C,OAAOC,EAAAF,KAAQG,EAAA,MAAIJ,CACpB,CACD,MAAIA,CAAGK,GACLC,EAAAL,KAAIG,EAAOC,EAAK,KAChBJ,KAAKM,sBACN,CACD,UAAIC,GACF,OAAOL,EAAAF,KAAIQ,EAAA,IACZ,CACD,WAAAC,GACEC,oBAlBFF,EAAAG,IAAAX,MAAU,GACVG,EAAAQ,IAAAX,KAAM,IAENA,KAAAY,OAAS,CACPC,4BAA4B,GAe5Bb,KAAKc,kBACN,CACD,iBAAAC,GAEEf,KAAKgB,kBACLhB,KAAKiB,WACLjB,KAAKkB,iBACN,CACD,eAAAF,GACE,MAAMG,EAAQ,IAAIC,YAAY,OAAQ,CAAEC,SAAS,EAAMC,UAAU,IACjEtB,KAAKuB,cAAcJ,EACpB,CACD,eAAAD,GACE,MAAMC,EAAQ,IAAIC,YAAY,OAAQ,CAAEC,SAAS,EAAMC,UAAU,IACjEtB,KAAKuB,cAAcJ,EACpB,CACD,gBAAAL,GACE,MAAMU,EAAaxB,KAAKyB,aAAa,CACnCC,KAAM,SAGFC,EAAUC,SAASC,cAAc,YACvCF,EAAQG,UAFK,0wEAGbN,EAAWO,YAAYJ,EAAQK,QAAQC,WAAU,IACjDjC,KAAKkC,SAAW,CACdC,iBAAkBX,EAAWY,cAAc,2BAC3CC,WAAYb,EAAWY,cAAc,qBAExC,CACD,qBAAAE,GACEtC,KAAKkC,SAASG,WAAWE,iBACvB,QACAvC,KAAKwC,kBAAkBC,KAAKzC,OAG9B0C,OAAOH,iBAAiB,WAAYrC,EAAAF,KAAmB2C,EAAA,IAAAC,GAACH,KAAKzC,MAC9D,CACD,QAAAiB,GACEjB,KAAKsC,uBACN,CACD,oBAAAhC,GAEmBoC,OAAOG,SACXC,MAAQ,IAAI9C,KAAKD,OAC5BC,KAAK+C,sBACL/C,KAAKgD,OAER,CACD,mBAAAD,GAEE,MAAM5B,EAAQ,IAAIC,YAAY,UAAW,CAAEC,SAAS,EAAMC,UAAU,IACpEtB,KAAKuB,cAAcJ,EACpB,CACD,6BAAW8B,GACT,MAAO,CAAC,UAAW,KACpB,CACD,wBAAAC,CAAyBC,EAAaC,EAAiBC,GAErDrD,KAAKsD,kBAAkBH,EAAME,EAC9B,CACD,iBAAAC,CAAkBH,EAAa/C,GAC7B,OAAQ+C,GACN,IAAK,UACU,QAAT/C,EACGF,EAAAF,KAAIQ,EAAA,MACPR,KAAKgD,OAGH9C,EAAAF,KAAIQ,EAAA,MACNR,KAAKuD,QAGT,MACF,IAAK,KACHvD,KAAKD,GAAKK,EAGf,CACD,iBAAAoC,GACExC,KAAKwD,mBAAmB,oBACpBxD,KAAKY,OAAOC,4BACdb,KAAKuD,OAER,CACD,kBAAAC,CAAmBC,GAEjB,MAAMtC,EAAQ,IAAIC,YAAY,QAAS,CAAEsC,OAAQ,CAAEC,UAAWF,KAC9DzD,KAAKuB,cAAcJ,EACpB,CAKD,KAAAoC,GACElD,EAAAL,KAAIQ,GAAW,EAAK,KACpBR,KAAKkC,SAASC,iBAAiByB,UAAUC,OAAO,YAChD7D,KAAKkC,SAASC,iBAAiByB,UAAUE,IAAI,YAC7C,MAAMC,EAAUrB,OAAOqB,QACNrB,OAAOG,SACXC,MAAQ,IAAI9C,KAAKD,MAC5BgE,EAAQC,IAAI,EAEf,CAKD,IAAAhB,GAIE,GAHA3C,EAAAL,KAAIQ,GAAW,EAAI,KACnBR,KAAKkC,SAASC,iBAAiByB,UAAUC,OAAO,YAChD7D,KAAKkC,SAASC,iBAAiByB,UAAUE,IAAI,YACzC9D,KAAKD,GAAI,CACX,MAAMgE,EAAUrB,OAAOqB,QACNrB,OAAOG,SACTC,MAAQ,IAAI9C,KAAKD,MAC9BgE,EAAQE,UAAU,CAAEC,QAAS,IAAM,GAAI,IAAIlE,KAAKD,KAEnD,CACF,yDAEKC,KAAKO,SACPP,KAAKwD,mBAAmB,sBACpBxD,KAAKY,OAAOC,4BACdb,KAAKuD,QAGX,GAE0BY,eAAeC,IAAI,aAE7C1B,OAAOyB,eAAeE,OAAO,WAAYxE"}

package/dist/JBModal.umd.js

@@ -1,2 +0,0 @@
-!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((n="undefined"!=typeof globalThis?globalThis:n||self).JBModal={})}(this,(function(n){"use strict";function e(n,e,t,o){if("a"===t&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?n!==e||!o:!e.has(n))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===t?o:"a"===t?o.call(n):o?o.value:e.get(n)}function t(n,e,t,o,i){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!i)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?n!==e||!i:!e.has(n))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?i.call(n,t):i?i.value=t:e.set(n,t),t}"function"==typeof SuppressedError&&SuppressedError;var o,i,a,s;class d extends HTMLElement{get id(){const n=this.getAttribute("id")||"";return e(this,a,"f")||n}set id(n){t(this,a,n,"f"),this.checkInitialOpenness()}get isOpen(){return e(this,i,"f")}constructor(){super(),o.add(this),i.set(this,!1),a.set(this,""),this.config={autoCloseOnBackgroundClick:!1},this.initWebComponent()}connectedCallback(){this.callOnLoadEvent(),this.initProp(),this.callOnInitEvent()}callOnLoadEvent(){const n=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(n)}callOnInitEvent(){const n=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(n)}initWebComponent(){const n=this.attachShadow({mode:"open"}),e=document.createElement("template");e.innerHTML='<style>.jb-modal-web-component {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: var(--jb-modal-z-index, 1);\n  width: 100%;\n  height: 100%;\n}\n.jb-modal-web-component.--closed {\n  display: none;\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-modal-web-component.--closed .modal-content-wrapper {\n    transform: translateY(100%);\n  }\n}\n.jb-modal-web-component.--opened {\n  display: block;\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-modal-web-component.--opened .modal-content-wrapper {\n    animation-name: swipe-up;\n    animation-duration: 0.3s;\n    animation-delay: 0s;\n    animation-iteration-count: 1;\n    animation-timing-function: ease;\n  }\n}\n@keyframes swipe-up {\n  0% {\n    transform: translateY(100%);\n  }\n  100% {\n    transform: translateY(0%);\n  }\n}\n.jb-modal-web-component .modal-background {\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-color: var(--jb-modal-back-bg-color, rgba(255, 255, 255, 0.1));\n  backdrop-filter: blur(10px);\n  z-index: 2;\n  width: 100%;\n  height: 100%;\n}\n.jb-modal-web-component .modal-content-wrapper {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 3;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-modal-web-component .modal-content-wrapper {\n    bottom: 0;\n    top: initial;\n    align-items: flex-end;\n  }\n}\n.jb-modal-web-component .modal-content-wrapper .modal-content {\n  pointer-events: all;\n  width: auto;\n  height: auto;\n  background-color: var(--jb-modal-bg-color, #fff);\n  border-radius: var(--jb-modal-border-radius, 24px);\n}\n@media (min-width: 320px) and (max-width: 767px) {\n  .jb-modal-web-component .modal-content-wrapper .modal-content {\n    width: 100%;\n    height: auto;\n    max-height: calc(100% - 80px);\n    min-height: 32px;\n    border-radius: var(--jb-modal-border-radius-mobile, 24px 24px 0 0);\n    overflow-y: auto;\n  }\n}</style>\n<div class="jb-modal-web-component --closed">\r\n    <div class="modal-background"></div>\r\n    <div class="modal-content-wrapper">\r\n        <div class="modal-content">\r\n            <slot name="content"></slot>\r\n        </div>\r\n    </div>\r\n</div>',n.appendChild(e.content.cloneNode(!0)),this.elements={componentWrapper:n.querySelector(".jb-modal-web-component"),background:n.querySelector(".modal-background")}}registerEventListener(){this.elements.background.addEventListener("click",this.onBackgroundClick.bind(this)),window.addEventListener("popstate",e(this,o,"m",s).bind(this))}initProp(){this.registerEventListener()}checkInitialOpenness(){window.location.hash==`#${this.id}`&&(this.triggerUrlOpenEvent(),this.open())}triggerUrlOpenEvent(){const n=new CustomEvent("urlOpen",{bubbles:!0,composed:!0});this.dispatchEvent(n)}static get observedAttributes(){return["is-open","id"]}attributeChangedCallback(n,e,t){this.onAttributeChange(n,t)}onAttributeChange(n,t){switch(n){case"is-open":"true"==t?e(this,i,"f")||this.open():e(this,i,"f")&&this.close();break;case"id":this.id=t}}onBackgroundClick(){this.dispatchCloseEvent("BACKGROUND_CLICK"),this.config.autoCloseOnBackgroundClick&&this.close()}dispatchCloseEvent(n){const e=new CustomEvent("close",{detail:{eventType:n}});this.dispatchEvent(e)}close(){t(this,i,!1,"f"),this.elements.componentWrapper.classList.remove("--opened"),this.elements.componentWrapper.classList.add("--closed");const n=window.history;window.location.hash==`#${this.id}`&&n.go(-1)}open(){if(t(this,i,!0,"f"),this.elements.componentWrapper.classList.remove("--closed"),this.elements.componentWrapper.classList.add("--opened"),this.id){const n=window.history;window.location.hash!=`#${this.id}`&&n.pushState({JBModal:{}},"",`#${this.id}`)}}}i=new WeakMap,a=new WeakMap,o=new WeakSet,s=function(){this.isOpen&&(this.dispatchCloseEvent("HISTORY_BACK_EVENT"),this.config.autoCloseOnBackgroundClick&&this.close())};!customElements.get("jb-modal")&&window.customElements.define("jb-modal",d),n.JBModalWebComponent=d}));
-//# sourceMappingURL=JBModal.umd.js.map

package/dist/JBModal.umd.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"JBModal.umd.js","sources":["../lib/JBModal.ts"],"sourcesContent":["import HTML from \"./JBModal.html\";\r\nimport CSS from \"./JBModal.scss\";\r\nimport { ElementsObject } from \"./Types\";\r\n\r\nexport class JBModalWebComponent extends HTMLElement {\r\n  #isOpen = false;\r\n  #id = \"\";\r\n  elements!: ElementsObject;\r\n  config = {\r\n    autoCloseOnBackgroundClick: false,\r\n  };\r\n  get id() {\r\n    const id: string = this.getAttribute(\"id\") || \"\";\r\n    return this.#id || id;\r\n  }\r\n  set id(value: string) {\r\n    this.#id = value;\r\n    this.checkInitialOpenness();\r\n  }\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 binded\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-modal-web-component\")!,\r\n      background: shadowRoot.querySelector(\".modal-background\")!,\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.config.autoCloseOnBackgroundClick) {\r\n      this.close();\r\n    }\r\n  }\r\n  dispatchCloseEvent(type:\"BACKGROUND_CLICK\"| \"HISTORY_BACK_EVENT\" | \"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 modal\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    const history = window.history;\r\n    const location = window.location;\r\n    if (location.hash == `#${this.id}`) {\r\n      history.go(-1);\r\n    }\r\n  }\r\n  /**\r\n   * @public\r\n   * will open modal\r\n   */\r\n  open() {\r\n    this.#isOpen = true;\r\n    this.elements.componentWrapper.classList.remove(\"--closed\");\r\n    this.elements.componentWrapper.classList.add(\"--opened\");\r\n    if (this.id) {\r\n      const history = window.history;\r\n      const location = window.location;\r\n      if (!(location.hash == `#${this.id}`)) {\r\n        history.pushState({ JBModal: {} }, \"\", `#${this.id}`);\r\n      }\r\n    }\r\n  }\r\n  #onBrowserBack() {\r\n    if (this.isOpen) {\r\n      this.dispatchCloseEvent(\"HISTORY_BACK_EVENT\");\r\n      if (this.config.autoCloseOnBackgroundClick) {\r\n        this.close();\r\n      }\r\n    }\r\n  }\r\n}\r\nconst myElementNotExists = !customElements.get(\"jb-modal\");\r\nif (myElementNotExists) {\r\n  window.customElements.define(\"jb-modal\", JBModalWebComponent);\r\n}\r\n"],"names":["JBModalWebComponent","HTMLElement","id","this","getAttribute","__classPrivateFieldGet","_JBModalWebComponent_id","value","__classPrivateFieldSet","checkInitialOpenness","isOpen","_JBModalWebComponent_isOpen","constructor","super","set","config","autoCloseOnBackgroundClick","initWebComponent","connectedCallback","callOnLoadEvent","initProp","callOnInitEvent","event","CustomEvent","bubbles","composed","dispatchEvent","shadowRoot","attachShadow","mode","element","document","createElement","innerHTML","appendChild","content","cloneNode","elements","componentWrapper","querySelector","background","registerEventListener","addEventListener","onBackgroundClick","bind","window","_JBModalWebComponent_instances","_JBModalWebComponent_onBrowserBack","location","hash","triggerUrlOpenEvent","open","observedAttributes","attributeChangedCallback","name","oldValue","newValue","onAttributeChange","close","dispatchCloseEvent","type","detail","eventType","classList","remove","add","history","go","pushState","JBModal","customElements","get","define"],"mappings":"i8BAIM,MAAOA,UAA4BC,YAOvC,MAAIC,GACF,MAAMA,EAAaC,KAAKC,aAAa,OAAS,GAC9C,OAAOC,EAAAF,KAAQG,EAAA,MAAIJ,CACpB,CACD,MAAIA,CAAGK,GACLC,EAAAL,KAAIG,EAAOC,EAAK,KAChBJ,KAAKM,sBACN,CACD,UAAIC,GACF,OAAOL,EAAAF,KAAIQ,EAAA,IACZ,CACD,WAAAC,GACEC,oBAlBFF,EAAAG,IAAAX,MAAU,GACVG,EAAAQ,IAAAX,KAAM,IAENA,KAAAY,OAAS,CACPC,4BAA4B,GAe5Bb,KAAKc,kBACN,CACD,iBAAAC,GAEEf,KAAKgB,kBACLhB,KAAKiB,WACLjB,KAAKkB,iBACN,CACD,eAAAF,GACE,MAAMG,EAAQ,IAAIC,YAAY,OAAQ,CAAEC,SAAS,EAAMC,UAAU,IACjEtB,KAAKuB,cAAcJ,EACpB,CACD,eAAAD,GACE,MAAMC,EAAQ,IAAIC,YAAY,OAAQ,CAAEC,SAAS,EAAMC,UAAU,IACjEtB,KAAKuB,cAAcJ,EACpB,CACD,gBAAAL,GACE,MAAMU,EAAaxB,KAAKyB,aAAa,CACnCC,KAAM,SAGFC,EAAUC,SAASC,cAAc,YACvCF,EAAQG,UAFK,0wEAGbN,EAAWO,YAAYJ,EAAQK,QAAQC,WAAU,IACjDjC,KAAKkC,SAAW,CACdC,iBAAkBX,EAAWY,cAAc,2BAC3CC,WAAYb,EAAWY,cAAc,qBAExC,CACD,qBAAAE,GACEtC,KAAKkC,SAASG,WAAWE,iBACvB,QACAvC,KAAKwC,kBAAkBC,KAAKzC,OAG9B0C,OAAOH,iBAAiB,WAAYrC,EAAAF,KAAmB2C,EAAA,IAAAC,GAACH,KAAKzC,MAC9D,CACD,QAAAiB,GACEjB,KAAKsC,uBACN,CACD,oBAAAhC,GAEmBoC,OAAOG,SACXC,MAAQ,IAAI9C,KAAKD,OAC5BC,KAAK+C,sBACL/C,KAAKgD,OAER,CACD,mBAAAD,GAEE,MAAM5B,EAAQ,IAAIC,YAAY,UAAW,CAAEC,SAAS,EAAMC,UAAU,IACpEtB,KAAKuB,cAAcJ,EACpB,CACD,6BAAW8B,GACT,MAAO,CAAC,UAAW,KACpB,CACD,wBAAAC,CAAyBC,EAAaC,EAAiBC,GAErDrD,KAAKsD,kBAAkBH,EAAME,EAC9B,CACD,iBAAAC,CAAkBH,EAAa/C,GAC7B,OAAQ+C,GACN,IAAK,UACU,QAAT/C,EACGF,EAAAF,KAAIQ,EAAA,MACPR,KAAKgD,OAGH9C,EAAAF,KAAIQ,EAAA,MACNR,KAAKuD,QAGT,MACF,IAAK,KACHvD,KAAKD,GAAKK,EAGf,CACD,iBAAAoC,GACExC,KAAKwD,mBAAmB,oBACpBxD,KAAKY,OAAOC,4BACdb,KAAKuD,OAER,CACD,kBAAAC,CAAmBC,GAEjB,MAAMtC,EAAQ,IAAIC,YAAY,QAAS,CAAEsC,OAAQ,CAAEC,UAAWF,KAC9DzD,KAAKuB,cAAcJ,EACpB,CAKD,KAAAoC,GACElD,EAAAL,KAAIQ,GAAW,EAAK,KACpBR,KAAKkC,SAASC,iBAAiByB,UAAUC,OAAO,YAChD7D,KAAKkC,SAASC,iBAAiByB,UAAUE,IAAI,YAC7C,MAAMC,EAAUrB,OAAOqB,QACNrB,OAAOG,SACXC,MAAQ,IAAI9C,KAAKD,MAC5BgE,EAAQC,IAAI,EAEf,CAKD,IAAAhB,GAIE,GAHA3C,EAAAL,KAAIQ,GAAW,EAAI,KACnBR,KAAKkC,SAASC,iBAAiByB,UAAUC,OAAO,YAChD7D,KAAKkC,SAASC,iBAAiByB,UAAUE,IAAI,YACzC9D,KAAKD,GAAI,CACX,MAAMgE,EAAUrB,OAAOqB,QACNrB,OAAOG,SACTC,MAAQ,IAAI9C,KAAKD,MAC9BgE,EAAQE,UAAU,CAAEC,QAAS,IAAM,GAAI,IAAIlE,KAAKD,KAEnD,CACF,yDAEKC,KAAKO,SACPP,KAAKwD,mBAAmB,sBACpBxD,KAAKY,OAAOC,4BACdb,KAAKuD,QAGX,GAE0BY,eAAeC,IAAI,aAE7C1B,OAAOyB,eAAeE,OAAO,WAAYxE"}

package/dist/web-component/jb-modal/lib/Types.d.ts

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

package/lib/Types.ts

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