jb-modal 1.6.1 → 1.7.1

package/README.md

@@ -1,14 +1,25 @@
 # jb-modal
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/jb-modal)
+[![GitHub license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://raw.githubusercontent.com/javadbat/jb-modal/main/LICENSE)
+[![NPM Downloads](https://img.shields.io/npm/dw/jb-modal)](https://www.npmjs.com/package/jb-modal)
+
 modal web component with features:
 
-- customizable content
+- framework free so you can use it anywhere
+- customizable content & style
 - support typescript
 - auto close on background click
-- you can add custom route history in browser so back button can close modal and refresh (when modal is open) is open modal again
+- you can add custom route history in browser
+- back button handler to just close the modal instead of real back
+- keep modal open in case of page refresh (by just provide an id)
 
 Demo & Sample    
 in github: <https://javadbat.github.io/jb-modal/>    
 
+## using with JS frameworks
+
+to use this component in **react** see [`jb-modal/react`](https://github.com/javadbat/jb-modal/tree/main/react);
+
 ## install
 
 ```cmd
@@ -25,6 +36,33 @@ npm i jb-modal
 ```js
 document.querySelector('jb-modal').config.autoCloseOnBackgroundClick = true;
 ```
+
+## keep modal state
+
+if you want your modal to keep open when user refresh the page or you want capture back button in mobile when modal is open you just need to provide an `id` attribute.
+
+```html
+<jb-modal is-open="true" id="Something">
+</jb-modal>
+```
+## events
+
+```js
+//when web-component load and you can access modal logic
+document.querySelector('jb-modal').addEventListener("load",(e)=>{/*your function*/});
+// when modal load and initiated completely 
+document.querySelector('jb-modal').addEventListener("init",(e)=>{/*your function*/});
+// when page refresh and modal open by default because of url 
+document.querySelector('jb-modal').addEventListener("urlOpen",(e)=>{/*your function*/});
+// when modal closed
+document.querySelector('jb-modal').addEventListener("close",(e)=>{
+    // could be "BACKGROUND_CLICK"  "HISTORY_BACK_EVENT" "CLOSE_BUTTON_CLICK"
+    const closeType = e.detail.eventType 
+    /*your function*/
+});
+
+```
+
 ## customize modal look
 
 you can customize modal look by following css properties
@@ -34,3 +72,11 @@ you can customize modal look by following css properties
 | --jb-modal-back-bg-color           | modal back background color                                                                   |
 | --jb-modal-border-radius           | modal border-radius default `24px`                                                            |
 | --jb-modal-border-radius-mobile    | modal border-radius on mobile default is `24px 24px 0 0`                                      |
+
+## Other Related Docs:
+
+- see [`jb-modal/react`](https://github.com/javadbat/jb-modal/tree/main/react); if you want to use this component in react
+
+- see [All JB Design system Component List](https://github.com/javadbat/design-system/blob/main/docs/component-list.md) for more components
+
+- use [Contribution Guide](https://github.com/javadbat/design-system/blob/main/docs/contribution-guide.md) if you want to contribute in this component.

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/{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;
@@ -18,14 +19,14 @@ export declare class JBModalWebComponent extends HTMLElement {
     checkInitialOpenness(): void;
     triggerUrlOpenEvent(): void;
     static get observedAttributes(): string[];
-    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
-    onAttributeChange(name: any, value: any): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    onAttributeChange(name: string, value: string): void;
     onBackgroundClick(): void;
-    dispatchCloseEvent(type: any): void;
+    dispatchCloseEvent(type: "BACKGROUND_CLICK" | "HISTORY_BACK_EVENT" | "CLOSE_BUTTON_CLICK"): void;
     /**
- * @public
- * will close modal
- */
+     * @public
+     * will close modal
+     */
     close(): void;
     /**
      * @public

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 @@
-import './dist/JBModal.js';
+export * from './dist/jb-modal.js';

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

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

package/lib/jb-modal.ts

@@ -0,0 +1,158 @@
+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;
+  #id = "";
+  elements!: ElementsObject;
+  config = {
+    autoCloseOnBackgroundClick: false,
+  };
+  get id() {
+    const id: string = this.getAttribute("id") || "";
+    return this.#id || id;
+  }
+  set id(value: string) {
+    this.#id = value;
+    this.checkInitialOpenness();
+  }
+  get isOpen() {
+    return this.#isOpen;
+  }
+  constructor() {
+    super();
+    this.initWebComponent();
+  }
+  connectedCallback() {
+    // standard web component event that called when all of dom is binded
+    this.callOnLoadEvent();
+    this.initProp();
+    this.callOnInitEvent();
+  }
+  callOnLoadEvent() {
+    const event = new CustomEvent("load", { bubbles: true, composed: true });
+    this.dispatchEvent(event);
+  }
+  callOnInitEvent() {
+    const event = new CustomEvent("init", { bubbles: true, composed: true });
+    this.dispatchEvent(event);
+  }
+  initWebComponent() {
+    const shadowRoot = this.attachShadow({
+      mode: "open",
+    });
+    const html = `<style>${CSS}</style>` + "\n" + HTML;
+    const element = document.createElement("template");
+    element.innerHTML = html;
+    shadowRoot.appendChild(element.content.cloneNode(true));
+    this.elements = {
+      componentWrapper: shadowRoot.querySelector(".jb-modal-web-component")!,
+      background: shadowRoot.querySelector(".modal-background")!,
+    };
+  }
+  registerEventListener() {
+    this.elements.background.addEventListener(
+      "click",
+      this.onBackgroundClick.bind(this)
+    );
+    //TODO: remove listener on component unmount
+    window.addEventListener("popstate", this.#onBrowserBack.bind(this));
+  }
+  initProp() {
+    this.registerEventListener();
+  }
+  checkInitialOpenness() {
+    //if page has modal url we open it automatically
+    const location = window.location;
+    if (location.hash == `#${this.id}`) {
+      this.triggerUrlOpenEvent();
+      this.open();
+    }
+  }
+  triggerUrlOpenEvent() {
+    //when modal open itself becuase url contain modal id
+    const event = new CustomEvent("urlOpen", { bubbles: true, composed: true });
+    this.dispatchEvent(event);
+  }
+  static get observedAttributes() {
+    return ["is-open", "id"];
+  }
+  attributeChangedCallback(name:string, oldValue:string, newValue:string) {
+    // do something when an attribute has changed
+    this.onAttributeChange(name, newValue);
+  }
+  onAttributeChange(name:string, value:string) {
+    switch (name) {
+      case "is-open":
+        if (value == "true") {
+          if (!this.#isOpen) {
+            this.open();
+          }
+        } else {
+          if (this.#isOpen) {
+            this.close();
+          }
+        }
+        break;
+      case "id":
+        this.id = value;
+        break;
+    }
+  }
+  onBackgroundClick() {
+    this.dispatchCloseEvent("BACKGROUND_CLICK");
+    if (this.config.autoCloseOnBackgroundClick) {
+      this.close();
+    }
+  }
+  dispatchCloseEvent(type:"BACKGROUND_CLICK"| "HISTORY_BACK_EVENT" | "CLOSE_BUTTON_CLICK") {
+    //we have many ways to dispatch close event like back button on close clicked
+    const event = new CustomEvent("close", { detail: { eventType: type } });
+    this.dispatchEvent(event);
+  }
+  /**
+   * @public
+   * will close modal
+   */
+  close() {
+    this.#isOpen = false;
+    this.elements.componentWrapper.classList.remove("--opened");
+    this.elements.componentWrapper.classList.add("--closed");
+    const history = window.history;
+    const location = window.location;
+    if (location.hash == `#${this.id}`) {
+      history.go(-1);
+    }
+  }
+  /**
+   * @public
+   * will open modal
+   */
+  open() {
+    this.#isOpen = true;
+    this.elements.componentWrapper.classList.remove("--closed");
+    this.elements.componentWrapper.classList.add("--opened");
+    if (this.id) {
+      const history = window.history;
+      const location = window.location;
+      if (!(location.hash == `#${this.id}`)) {
+        history.pushState({ JBModal: {} }, "", `#${this.id}`);
+      }
+    }
+  }
+  #onBrowserBack() {
+    if (this.isOpen) {
+      this.dispatchCloseEvent("HISTORY_BACK_EVENT");
+      if (this.config.autoCloseOnBackgroundClick) {
+        this.close();
+      }
+    }
+  }
+}
+const myElementNotExists = !customElements.get("jb-modal");
+if (myElementNotExists) {
+  window.customElements.define("jb-modal", JBModalWebComponent);
+}

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,19 +14,25 @@
     "pop up",
     "web component"
   ],
-  "version": "1.6.1",
+  "version": "1.7.1",
   "bugs": "https://github.com/javadbat/jb-modal/issues",
   "license": "MIT",
   "files": [
     "LICENSE",
     "README.md",
     "lib/",
-    "dist/"
+    "dist/",
+    "react/",
+    "react/dist/"
   ],
   "main": "index.js",
-  "types": "./dist/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/LICENSE

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

package/react/README.md

@@ -0,0 +1,82 @@
+# JBModal
+
+a react component modal that open different in mobile and desktop
+this component is React.js wrapper for [jb-modal](https://www.npmjs.com/package/jb-modal) web component.
+
+- open like bottomsheet in mobile and open in center position in desktop
+
+- customizable layout with css variable
+
+- support typescript
+
+- support custom url to adapt "back to close" on android and "auto open modal on refresh"
+
+## installation 
+
+```command
+    npm i jb-modal
+```
+
+in your jsx file
+
+```js
+    import {JBModal} from 'jb-modal/react'
+```
+``` jsx
+    <JBModal></JBModal>
+```
+
+## use
+
+you can place your modal content in ` <JBModal></JBModal>` like:
+```jsx
+    <JBModal>
+        <div>
+            <p>this is the modal content<p>
+        </div>
+    </JBModal>
+ ```
+
+ ### props
+- onClose
+you can pass a function to onClose props so that when a user click outside of the modal, the modal closes.
+
+``` jsx
+    const [isOpen, setIsOpen] = useState(false);
+    <JBModal onClose={() => setIsOpen(false)}></JBModal>
+
+```
+
+- isOpen
+you can pass true or false to this props,this way the modal will be open based on the isOpen props.
+
+``` jsx
+    <JBModal isOpen={isOpen}></JBModal>
+    // the modal is open
+```
+
+- id
+you can set a specific id for each one of your modals,this way when the modal is open the id of the modal will be in your url.    
+when you set id modal will add `#your-id` to the url when open so when you refresh the page, modal will open automatically.
+
+``` jsx
+    <JBModal id={MYMODAL}></JBModal>
+```
+
+- onUrlOpen
+when the react copmonent first renders the default state of isModalOpen is false.
+when the url contains the id of the modal the function passed to onUrlOpen will update the react state and set the isModalOpen state to true.
+example: 
+
+```jsx
+    [isModalOpen, setOpen] = useState(false);
+    <JBModal onUrlOpen={() => setOpen(true)}></JBModal>
+```
+## customize modal look
+
+you can customize modal look by following css properties
+| css variable name                  | description                                                                                   |
+| -------------                      | -------------                                                                                 |
+| --jb-modal-bg-color                | modal background color default is black `#fff`                                                |
+| --jb-modal-border-radius           | modal border-radius default `24px`                                                            |
+| --jb-modal-border-radius-mobile    | modal border-radius on mobile default is `24px 24px 0 0`                                      |

package/react/dist/JBModal.cjs.js

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

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

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

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