jb-modal 1.6.1 → 1.7.0

package/dist/JBModal.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"JBModal.umd.js","sources":["../../../node_modules/tslib/tslib.es6.js","../lib/JBModal.ts"],"sourcesContent":["/******************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n***************************************************************************** */\r\n/* global Reflect, Promise */\r\n\r\nvar extendStatics = function(d, b) {\r\n    extendStatics = Object.setPrototypeOf ||\r\n        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\r\n        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\r\n    return extendStatics(d, b);\r\n};\r\n\r\nexport function __extends(d, b) {\r\n    if (typeof b !== \"function\" && b !== null)\r\n        throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\r\n    extendStatics(d, b);\r\n    function __() { this.constructor = d; }\r\n    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nexport var __assign = function() {\r\n    __assign = Object.assign || function __assign(t) {\r\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n            s = arguments[i];\r\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n        }\r\n        return t;\r\n    }\r\n    return __assign.apply(this, arguments);\r\n}\r\n\r\nexport function __rest(s, e) {\r\n    var t = {};\r\n    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n        t[p] = s[p];\r\n    if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n                t[p[i]] = s[p[i]];\r\n        }\r\n    return t;\r\n}\r\n\r\nexport function __decorate(decorators, target, key, desc) {\r\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n    return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {\r\n    function accept(f) { if (f !== void 0 && typeof f !== \"function\") throw new TypeError(\"Function expected\"); return f; }\r\n    var kind = contextIn.kind, key = kind === \"getter\" ? \"get\" : kind === \"setter\" ? \"set\" : \"value\";\r\n    var target = !descriptorIn && ctor ? contextIn[\"static\"] ? ctor : ctor.prototype : null;\r\n    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});\r\n    var _, done = false;\r\n    for (var i = decorators.length - 1; i >= 0; i--) {\r\n        var context = {};\r\n        for (var p in contextIn) context[p] = p === \"access\" ? {} : contextIn[p];\r\n        for (var p in contextIn.access) context.access[p] = contextIn.access[p];\r\n        context.addInitializer = function (f) { if (done) throw new TypeError(\"Cannot add initializers after decoration has completed\"); extraInitializers.push(accept(f || null)); };\r\n        var result = (0, decorators[i])(kind === \"accessor\" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);\r\n        if (kind === \"accessor\") {\r\n            if (result === void 0) continue;\r\n            if (result === null || typeof result !== \"object\") throw new TypeError(\"Object expected\");\r\n            if (_ = accept(result.get)) descriptor.get = _;\r\n            if (_ = accept(result.set)) descriptor.set = _;\r\n            if (_ = accept(result.init)) initializers.push(_);\r\n        }\r\n        else if (_ = accept(result)) {\r\n            if (kind === \"field\") initializers.push(_);\r\n            else descriptor[key] = _;\r\n        }\r\n    }\r\n    if (target) Object.defineProperty(target, contextIn.name, descriptor);\r\n    done = true;\r\n};\r\n\r\nexport function __runInitializers(thisArg, initializers, value) {\r\n    var useValue = arguments.length > 2;\r\n    for (var i = 0; i < initializers.length; i++) {\r\n        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);\r\n    }\r\n    return useValue ? value : void 0;\r\n};\r\n\r\nexport function __propKey(x) {\r\n    return typeof x === \"symbol\" ? x : \"\".concat(x);\r\n};\r\n\r\nexport function __setFunctionName(f, name, prefix) {\r\n    if (typeof name === \"symbol\") name = name.description ? \"[\".concat(name.description, \"]\") : \"\";\r\n    return Object.defineProperty(f, \"name\", { configurable: true, value: prefix ? \"\".concat(prefix, \" \", name) : name });\r\n};\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n    if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __awaiter(thisArg, _arguments, P, generator) {\r\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\r\n    return new (P || (P = Promise))(function (resolve, reject) {\r\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\r\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\r\n    });\r\n}\r\n\r\nexport function __generator(thisArg, body) {\r\n    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\r\n    return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n    function verb(n) { return function (v) { return step([n, v]); }; }\r\n    function step(op) {\r\n        if (f) throw new TypeError(\"Generator is already executing.\");\r\n        while (g && (g = 0, op[0] && (_ = 0)), _) try {\r\n            if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\r\n            if (y = 0, t) op = [op[0] & 2, t.value];\r\n            switch (op[0]) {\r\n                case 0: case 1: t = op; break;\r\n                case 4: _.label++; return { value: op[1], done: false };\r\n                case 5: _.label++; y = op[1]; op = [0]; continue;\r\n                case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n                default:\r\n                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\r\n                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n                    if (t[2]) _.ops.pop();\r\n                    _.trys.pop(); continue;\r\n            }\r\n            op = body.call(thisArg, _);\r\n        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n    }\r\n}\r\n\r\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\r\n    if (k2 === undefined) k2 = k;\r\n    var desc = Object.getOwnPropertyDescriptor(m, k);\r\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\r\n        desc = { enumerable: true, get: function() { return m[k]; } };\r\n    }\r\n    Object.defineProperty(o, k2, desc);\r\n}) : (function(o, m, k, k2) {\r\n    if (k2 === undefined) k2 = k;\r\n    o[k2] = m[k];\r\n});\r\n\r\nexport function __exportStar(m, o) {\r\n    for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\r\n}\r\n\r\nexport function __values(o) {\r\n    var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\r\n    if (m) return m.call(o);\r\n    if (o && typeof o.length === \"number\") return {\r\n        next: function () {\r\n            if (o && i >= o.length) o = void 0;\r\n            return { value: o && o[i++], done: !o };\r\n        }\r\n    };\r\n    throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\r\n}\r\n\r\nexport function __read(o, n) {\r\n    var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n    if (!m) return o;\r\n    var i = m.call(o), r, ar = [], e;\r\n    try {\r\n        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n    }\r\n    catch (error) { e = { error: error }; }\r\n    finally {\r\n        try {\r\n            if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n        }\r\n        finally { if (e) throw e.error; }\r\n    }\r\n    return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spread() {\r\n    for (var ar = [], i = 0; i < arguments.length; i++)\r\n        ar = ar.concat(__read(arguments[i]));\r\n    return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spreadArrays() {\r\n    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\r\n    for (var r = Array(s), k = 0, i = 0; i < il; i++)\r\n        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\r\n            r[k] = a[j];\r\n    return r;\r\n}\r\n\r\nexport function __spreadArray(to, from, pack) {\r\n    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\r\n        if (ar || !(i in from)) {\r\n            if (!ar) ar = Array.prototype.slice.call(from, 0, i);\r\n            ar[i] = from[i];\r\n        }\r\n    }\r\n    return to.concat(ar || Array.prototype.slice.call(from));\r\n}\r\n\r\nexport function __await(v) {\r\n    return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n    if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n    var g = generator.apply(thisArg, _arguments || []), i, q = [];\r\n    return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n    function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }\r\n    function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n    function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n    function fulfill(value) { resume(\"next\", value); }\r\n    function reject(value) { resume(\"throw\", value); }\r\n    function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n    var i, p;\r\n    return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n    function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n    if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n    var m = o[Symbol.asyncIterator], i;\r\n    return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\r\n    function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\r\n    function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n    if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n    return cooked;\r\n};\r\n\r\nvar __setModuleDefault = Object.create ? (function(o, v) {\r\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\r\n}) : function(o, v) {\r\n    o[\"default\"] = v;\r\n};\r\n\r\nexport function __importStar(mod) {\r\n    if (mod && mod.__esModule) return mod;\r\n    var result = {};\r\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\r\n    __setModuleDefault(result, mod);\r\n    return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n    return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n\r\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\r\n    if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\r\n    if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\r\n    return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\r\n}\r\n\r\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\r\n    if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\r\n    if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\r\n    if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\r\n    return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\r\n}\r\n\r\nexport function __classPrivateFieldIn(state, receiver) {\r\n    if (receiver === null || (typeof receiver !== \"object\" && typeof receiver !== \"function\")) throw new TypeError(\"Cannot use 'in' operator on non-object\");\r\n    return typeof state === \"function\" ? receiver === state : state.has(receiver);\r\n}\r\n","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    }\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    }\r\n    registerEventListener() {\r\n        this.elements.background.addEventListener('click', this.onBackgroundClick.bind(this));\r\n        //TODO: remove listener on component unmount\r\n        window.addEventListener('popstate', this.#onBrowserBack.bind(this));\r\n    }\r\n    initProp() {\r\n        \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, oldValue, newValue) {\r\n        // do something when an attribute has changed\r\n        this.onAttributeChange(name, newValue);\r\n    }\r\n    onAttributeChange(name, value) {\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    }\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    }\r\n    dispatchCloseEvent(type) {\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(e) {\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":["CSS"],"mappings":"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"}
+{"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":"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"}

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

@@ -1,4 +1,4 @@
-import { ElementsObject } from './Types';
+import { ElementsObject } from "./Types";
 export declare class JBModalWebComponent extends HTMLElement {
     #private;
     elements: ElementsObject;
@@ -18,14 +18,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/index.js

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

package/lib/JBModal.scss

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

package/lib/JBModal.ts

@@ -1,158 +1,156 @@
-import HTML from './JBModal.html';
-import CSS from './JBModal.scss';
-import { ElementsObject } from './Types';
+import HTML from "./JBModal.html";
+import CSS from "./JBModal.scss";
+import { ElementsObject } from "./Types";
 
 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();
+  #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();
-        }
-    }
-    triggerUrlOpenEvent() {
-        //when modal open itself becuase url contain modal id
-        const event = new CustomEvent('urlOpen', { bubbles: true, composed: true });
-        this.dispatchEvent(event);
-    }
-    static get observedAttributes() {
-        return ['is-open', 'id'];
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        // do something when an attribute has changed
-        this.onAttributeChange(name, newValue);
-    }
-    onAttributeChange(name, value) {
-        switch (name) {
-            case 'is-open':
-                if (value == 'true') {
-                    if (!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) {
+          }
+        } else {
+          if (this.#isOpen) {
             this.close();
+          }
         }
-
-    }
-    dispatchCloseEvent(type) {
-        //we have many ways to dispatch close event like back button on close clicked
-        const event = new CustomEvent("close", { detail: { eventType: type } });
-        this.dispatchEvent(event);
-    }
-    /**
- * @public
- * will close 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(e) {
-        if (this.isOpen) {
-            this.dispatchCloseEvent('HISTORY_BACK_EVENT');
-            if (this.config.autoCloseOnBackgroundClick) {
-                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');
+const myElementNotExists = !customElements.get("jb-modal");
 if (myElementNotExists) {
-    window.customElements.define('jb-modal', JBModalWebComponent);
+  window.customElements.define("jb-modal", JBModalWebComponent);
 }

package/package.json

@@ -14,17 +14,19 @@
     "pop up",
     "web component"
   ],
-  "version": "1.6.1",
+  "version": "1.7.0",
   "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": "jb-modal/dist/web-component/jb-modal/lib/JBModal.d.ts",
   "repository": {
 		"type": "git",
 		"url": "git@github.com:javadbat/jb-modal.git"

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,67 @@
+'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

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

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