kempo 2.13.0 → 2.14.0

package/dist/components/Dialog.js

@@ -1 +1 @@
-import Component from"./Component.js";import"./FocusCapture.js";import"./Icon.js";import{firstFocusable,onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class Dialog extends Component{constructor({opened:e=!1,closeBtn:n=!0,overlayClose:t=!0,confirmText:o="",confirmClasses:i="success ml",confirmAction:s=(()=>{}),cancelText:l="",cancelClasses:a="",cancelAction:c=(()=>{}),closeCallback:r=(()=>{})}={}){super(),this.registerAttributes({opened:e,closeBtn:n,overlayClose:t,confirmText:o,confirmClasses:i,cancelText:l,cancelClasses:a}),this.registerProps({confirmAction:s,cancelAction:c,closeCallback:r,previousFocus:null,_clickHandler:e=>{const{target:{id:n}}=e;"overlay"==n&&this.overlayClose||"close"==n?this.close():"cancel"==n?(this.cancelAction(e),e.defaultPrevented||this.close()):"confirm"==n&&(this.confirmAction(e),e.defaultPrevented||this.close())},_keydownHandler:({keyCode:e})=>{27===e&&this.close()},_hasTitle:()=>!!this.querySelector('[slot="title"]')})}connectedCallback(){super.connectedCallback(),onEvent(this.shadowRoot,"click",this._clickHandler)}disconnectedCallback(){super.connectedCallback(),offEvent(this.shadowRoot,"click",this._clickHandler),offEvent(window,"keydown",this._keydownHandler)}attributeChangedCallback(e,n,t){super.attributeChangedCallback(e,n,t),"opened"===name&&dispatchEvent(this,t?"opened":"close")}open(){this.opened=!0;const e=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);e&&e.focus(),onEvent(window,"keydown",this._keydownHandler)}close(){this.opened=!1,this.blur(),this.closeCallback(),offEvent(window,"keydown",this._keydownHandler)}toggle(){this.opened?this.close():this.open()}focus(){const e=firstFocusable(this.shadowRoot);e&&(this.previousFocus=document.activeElement,e.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}get shadowTemplate(){return`\n      <k-focus-capture>\n        <button id="overlay" aria-label="Close the Dialog"></button>\n        <div id="wrapper">\n          <div\n            id="dialog"\n            role="dialog"\n            aria-modal="true"\n            aria-labelledby="title"\n          >\n            <div\n              id="header"\n              class="${this._hasTitle()?"has-title":""}"\n            >\n              <div\n                id="title"\n              ><slot name="title"></slot></div>\n              ${this.renderIf(this.closeBtn,'\n                <button\n                  id="close"\n                >\n                  <k-icon name="close"></k-icon>\n                </button>\n              ')}\n            </div>\n            <div id="body">\n              ${super.shadowTemplate}\n            </div>\n            ${this.renderIf(this.cancelText||this.confirmText,`\n              <div id="footer">\n                ${this.renderIf(this.cancelText,`\n                  <button id="cancel" class="${this.cancelClasses}">\n                    ${this.cancelText}\n                  </button>\n                `)}\n                ${this.renderIf(this.confirmText,`\n                  <button id="confirm" class="${this.confirmClasses}">\n                    ${this.confirmText}\n                  </button>\n                `)}\n              </div>\n            `)}\n          </div>\n        </div>\n      </k-focus-capture>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: inline;\n        height: 1px;\n        width: 1px;\n        position: fixed; /* The browser seems to sometimes lazy load this if its out of view, this seems to fix it*/\n        top: 0;\n        left: 0;\n        z-index: 100;\n      }\n      :host(:not([opened])){\n        display: none;\n      }\n      #overlay {\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        background-color: var(--c_overlay);\n        z-index: 100;\n        border: 0px solid transparent;\n        box-shadow: 0 0 0 transparent;\n      }\n      #wrapper {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        position: fixed;\n        width: 100%;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        z-index: 101;\n        pointer-events: none;\n      }\n      #dialog {\n        display: flex;\n        flex-direction: column;\n        min-width: var(--min_width, 20rem);\n        width: var(--width, fit-content);\n        max-width: var(--max_width, calc(100vw - 4rem));\n        min-height: var(--min_height, 12rem);\n        height: var(--height, fit-content);\n        max-height: var(--max_height, calc(100vh - 4rem));\n        background-color: var(--c_bg);\n        box-shadow: var(--drop_shadow);\n        border-radius: var(--radius);\n        pointer-events: all;\n      }\n      #header {\n        display: flex;\n        align-items: center;\n      }\n      #header.has-title {\n        border-bottom: 1px solid var(--c_border);\n      }\n      #title {\n        flex: 1 1 auto;\n      }\n      #close {\n        border: 0px;\n        background: transparent;\n        box-shadow: 0 0 0 transparent;\n        color: var(--tc);\n      }\n      #close k-icon {\n        pointer-events: none;\n      }\n      #body {\n        flex: 1 1 auto;\n      }\n      #footer {\n        display: flex;\n        justify-content: flex-end;\n        padding: var(--spacer_h);\n      }\n    `}static renderOnChange=["opened","closeBtn","overlayClose","title","confirmText","cancelText"];static create(e="",n={}){!1!==n.closeExisting&&document.querySelectorAll("k-dialog").forEach((e=>e.close()));const t=new Dialog({opened:!0,...n});return onEvent(t,"close",t.remove),e instanceof HTMLElement||e instanceof DocumentFragment?t.appendChild(e):e instanceof NodeList?e.forEach((e=>t.appendChild(e))):t.innerHTML=e,n.width&&t.style.setProperty("--width",n.width),n.minWidth&&t.style.setProperty("--min_width",n.minWidth),n.maxWidth&&t.style.setProperty("--max_width",n.maxWidth),n.height&&t.style.setProperty("--height",n.height),n.minHeight&&t.style.setProperty("--min_height",n.minHeight),n.maxHeight&&t.style.setProperty("--max_height",n.maxHeight),document.body.prepend(t),t.open(),t}static confirm(e,n,t={title:"Confirm"}){return Dialog.create(`\n      <h5 slot="title" class="pyh px m0">${t.title}</h5>\n      <p class="p">${e}</p>\n    `,{...t,closeBtn:!1,overlayClose:!1,confirmText:"Yes",confirmClasses:"success ml",confirmAction:()=>n(!0),cancelText:"No",cancelClasses:"danger",cancelAction:()=>n(!1)})}static error(e,n,t={title:"Error"}){const o=Dialog.create(`\n      <h5 slot="title" class="pyh px m0 tc-danger">${t.title}</h5>\n      <p class="p">${e}</p>\n    `,{...t,cancelText:"Ok"});return onEvent(o,"close",n),o}}window.customElements.define("k-dialog",Dialog);
+import Component from"./Component.js";import"./FocusCapture.js";import"./Icon.js";import{firstFocusable,onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class Dialog extends Component{constructor({opened:e=!1,closeBtn:n=!0,overlayClose:t=!0,confirmText:o="",confirmClasses:i="success ml",confirmAction:s=(()=>{}),cancelText:l="",cancelClasses:a="",cancelAction:c=(()=>{}),closeCallback:r=(()=>{})}={}){super(),this.registerAttributes({opened:e,closeBtn:n,overlayClose:t,confirmText:o,confirmClasses:i,cancelText:l,cancelClasses:a}),this.registerProps({confirmAction:s,cancelAction:c,closeCallback:r,previousFocus:null,_clickHandler:e=>{const{target:{id:n}}=e;"overlay"==n&&this.overlayClose||"close"==n?this.close():"cancel"==n?(this.cancelAction(e),e.defaultPrevented||this.close()):"confirm"==n&&(this.confirmAction(e),e.defaultPrevented||this.close())},_keydownHandler:({keyCode:e})=>{27===e&&this.close()},_hasTitle:()=>!!this.querySelector('[slot="title"]')})}connectedCallback(){super.connectedCallback(),onEvent(this.shadowRoot,"click",this._clickHandler)}disconnectedCallback(){super.connectedCallback(),offEvent(this.shadowRoot,"click",this._clickHandler),offEvent(window,"keydown",this._keydownHandler)}attributeChangedCallback(e,n,t){super.attributeChangedCallback(e,n,t),"opened"===name&&dispatchEvent(this,t?"opened":"close")}open(){this.opened=!0;const e=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);e&&e.focus(),onEvent(window,"keydown",this._keydownHandler)}close(){this.opened=!1,this.blur(),this.closeCallback(),offEvent(window,"keydown",this._keydownHandler)}toggle(){this.opened?this.close():this.open()}focus(){const e=firstFocusable(this.shadowRoot);e&&(this.previousFocus=document.activeElement,e.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}get shadowTemplate(){return`\n      <k-focus-capture>\n        <button id="overlay" aria-label="Close the Dialog"></button>\n        <div id="wrapper">\n          <div\n            id="dialog"\n            role="dialog"\n            aria-modal="true"\n            aria-labelledby="title"\n          >\n            <div\n              id="header"\n              class="${this._hasTitle()?"has-title":""}"\n            >\n              <div\n                id="title"\n              ><slot name="title"></slot></div>\n              ${this.renderIf(this.closeBtn,'\n                <button\n                  id="close"\n                >\n                  <k-icon name="close"></k-icon>\n                </button>\n              ')}\n            </div>\n            <div id="body">\n              ${super.shadowTemplate}\n            </div>\n            ${this.renderIf(this.cancelText||this.confirmText,`\n              <div id="footer">\n                ${this.renderIf(this.cancelText,`\n                  <button id="cancel" class="${this.cancelClasses}">\n                    ${this.cancelText}\n                  </button>\n                `)}\n                ${this.renderIf(this.confirmText,`\n                  <button id="confirm" class="${this.confirmClasses}">\n                    ${this.confirmText}\n                  </button>\n                `)}\n              </div>\n            `)}\n          </div>\n        </div>\n      </k-focus-capture>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: inline;\n        height: 1px;\n        width: 1px;\n        position: fixed; /* The browser seems to sometimes lazy load this if its out of view, this seems to fix it*/\n        top: 0;\n        left: 0;\n        z-index: 100;\n      }\n      :host(:not([opened])){\n        display: none;\n      }\n      #overlay {\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        background-color: var(--c_overlay);\n        z-index: 100;\n        border: 0px solid transparent;\n        box-shadow: 0 0 0 transparent;\n      }\n      #wrapper {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        position: fixed;\n        width: 100%;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        z-index: 101;\n        pointer-events: none;\n      }\n      #dialog {\n        display: flex;\n        flex-direction: column;\n        min-width: var(--min_width, 20rem);\n        width: var(--width, fit-content);\n        max-width: var(--max_width, calc(100vw - 4rem));\n        min-height: var(--min_height, 12rem);\n        height: var(--height, fit-content);\n        max-height: var(--max_height, calc(100vh - 4rem));\n        background-color: var(--c_bg);\n        box-shadow: var(--drop_shadow);\n        border-radius: var(--radius);\n        pointer-events: all;\n      }\n      #header {\n        display: flex;\n        align-items: center;\n      }\n      #header.has-title {\n        border-bottom: 1px solid var(--c_border);\n      }\n      #title {\n        flex: 1 1 auto;\n      }\n      #close {\n        border: 0px;\n        background: transparent;\n        box-shadow: 0 0 0 transparent;\n        color: var(--tc);\n      }\n      #close k-icon {\n        pointer-events: none;\n      }\n      #body {\n        flex: 1 1 auto;\n      }\n      #footer {\n        display: flex;\n        justify-content: flex-end;\n        padding: var(--spacer_h);\n      }\n    `}static renderOnChange=["opened","closeBtn","overlayClose","title","confirmText","cancelText"];static create(e="",n={}){!1!==n.closeExisting&&document.querySelectorAll("k-dialog").forEach((e=>e.close()));const t=new Dialog({opened:!0,...n});return onEvent(t,"close",t.remove),e instanceof HTMLElement||e instanceof DocumentFragment?t.appendChild(e):e instanceof NodeList?e.forEach((e=>t.appendChild(e))):t.innerHTML=e,n.width&&t.style.setProperty("--width",n.width),n.minWidth&&t.style.setProperty("--min_width",n.minWidth),n.maxWidth&&t.style.setProperty("--max_width",n.maxWidth),n.height&&t.style.setProperty("--height",n.height),n.minHeight&&t.style.setProperty("--min_height",n.minHeight),n.maxHeight&&t.style.setProperty("--max_height",n.maxHeight),document.body.prepend(t),t.open(),t}static alert(e="",n,t={}){return Dialog.create(e,{closeCallback:n,...t})}static confirm(e,n,t={title:"Confirm"}){return Dialog.create(`\n      <h5 slot="title" class="pyh px m0">${t.title}</h5>\n      <p class="p">${e}</p>\n    `,{...t,closeBtn:!1,overlayClose:!1,confirmText:"Yes",confirmClasses:"success ml",confirmAction:()=>n(!0),cancelText:"No",cancelClasses:"danger",cancelAction:()=>n(!1)})}static error(e,n,t={title:"Error"}){const o=Dialog.create(`\n      <h5 slot="title" class="pyh px m0 tc-danger">${t.title}</h5>\n      <p class="p">${e}</p>\n    `,{...t,cancelText:"Ok"});return onEvent(o,"close",n),o}}window.customElements.define("k-dialog",Dialog);

package/docs/kempo/components/Dialog.js

@@ -1 +1 @@
-import Component from"./Component.js";import"./FocusCapture.js";import"./Icon.js";import{firstFocusable,onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class Dialog extends Component{constructor({opened:e=!1,closeBtn:n=!0,overlayClose:t=!0,confirmText:o="",confirmClasses:i="success ml",confirmAction:s=(()=>{}),cancelText:l="",cancelClasses:a="",cancelAction:c=(()=>{}),closeCallback:r=(()=>{})}={}){super(),this.registerAttributes({opened:e,closeBtn:n,overlayClose:t,confirmText:o,confirmClasses:i,cancelText:l,cancelClasses:a}),this.registerProps({confirmAction:s,cancelAction:c,closeCallback:r,previousFocus:null,_clickHandler:e=>{const{target:{id:n}}=e;"overlay"==n&&this.overlayClose||"close"==n?this.close():"cancel"==n?(this.cancelAction(e),e.defaultPrevented||this.close()):"confirm"==n&&(this.confirmAction(e),e.defaultPrevented||this.close())},_keydownHandler:({keyCode:e})=>{27===e&&this.close()},_hasTitle:()=>!!this.querySelector('[slot="title"]')})}connectedCallback(){super.connectedCallback(),onEvent(this.shadowRoot,"click",this._clickHandler)}disconnectedCallback(){super.connectedCallback(),offEvent(this.shadowRoot,"click",this._clickHandler),offEvent(window,"keydown",this._keydownHandler)}attributeChangedCallback(e,n,t){super.attributeChangedCallback(e,n,t),"opened"===name&&dispatchEvent(this,t?"opened":"close")}open(){this.opened=!0;const e=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);e&&e.focus(),onEvent(window,"keydown",this._keydownHandler)}close(){this.opened=!1,this.blur(),this.closeCallback(),offEvent(window,"keydown",this._keydownHandler)}toggle(){this.opened?this.close():this.open()}focus(){const e=firstFocusable(this.shadowRoot);e&&(this.previousFocus=document.activeElement,e.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}get shadowTemplate(){return`\n      <k-focus-capture>\n        <button id="overlay" aria-label="Close the Dialog"></button>\n        <div id="wrapper">\n          <div\n            id="dialog"\n            role="dialog"\n            aria-modal="true"\n            aria-labelledby="title"\n          >\n            <div\n              id="header"\n              class="${this._hasTitle()?"has-title":""}"\n            >\n              <div\n                id="title"\n              ><slot name="title"></slot></div>\n              ${this.renderIf(this.closeBtn,'\n                <button\n                  id="close"\n                >\n                  <k-icon name="close"></k-icon>\n                </button>\n              ')}\n            </div>\n            <div id="body">\n              ${super.shadowTemplate}\n            </div>\n            ${this.renderIf(this.cancelText||this.confirmText,`\n              <div id="footer">\n                ${this.renderIf(this.cancelText,`\n                  <button id="cancel" class="${this.cancelClasses}">\n                    ${this.cancelText}\n                  </button>\n                `)}\n                ${this.renderIf(this.confirmText,`\n                  <button id="confirm" class="${this.confirmClasses}">\n                    ${this.confirmText}\n                  </button>\n                `)}\n              </div>\n            `)}\n          </div>\n        </div>\n      </k-focus-capture>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: inline;\n        height: 1px;\n        width: 1px;\n        position: fixed; /* The browser seems to sometimes lazy load this if its out of view, this seems to fix it*/\n        top: 0;\n        left: 0;\n        z-index: 100;\n      }\n      :host(:not([opened])){\n        display: none;\n      }\n      #overlay {\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        background-color: var(--c_overlay);\n        z-index: 100;\n        border: 0px solid transparent;\n        box-shadow: 0 0 0 transparent;\n      }\n      #wrapper {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        position: fixed;\n        width: 100%;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        z-index: 101;\n        pointer-events: none;\n      }\n      #dialog {\n        display: flex;\n        flex-direction: column;\n        min-width: var(--min_width, 20rem);\n        width: var(--width, fit-content);\n        max-width: var(--max_width, calc(100vw - 4rem));\n        min-height: var(--min_height, 12rem);\n        height: var(--height, fit-content);\n        max-height: var(--max_height, calc(100vh - 4rem));\n        background-color: var(--c_bg);\n        box-shadow: var(--drop_shadow);\n        border-radius: var(--radius);\n        pointer-events: all;\n      }\n      #header {\n        display: flex;\n        align-items: center;\n      }\n      #header.has-title {\n        border-bottom: 1px solid var(--c_border);\n      }\n      #title {\n        flex: 1 1 auto;\n      }\n      #close {\n        border: 0px;\n        background: transparent;\n        box-shadow: 0 0 0 transparent;\n        color: var(--tc);\n      }\n      #close k-icon {\n        pointer-events: none;\n      }\n      #body {\n        flex: 1 1 auto;\n      }\n      #footer {\n        display: flex;\n        justify-content: flex-end;\n        padding: var(--spacer_h);\n      }\n    `}static renderOnChange=["opened","closeBtn","overlayClose","title","confirmText","cancelText"];static create(e="",n={}){!1!==n.closeExisting&&document.querySelectorAll("k-dialog").forEach((e=>e.close()));const t=new Dialog({opened:!0,...n});return onEvent(t,"close",t.remove),e instanceof HTMLElement||e instanceof DocumentFragment?t.appendChild(e):e instanceof NodeList?e.forEach((e=>t.appendChild(e))):t.innerHTML=e,n.width&&t.style.setProperty("--width",n.width),n.minWidth&&t.style.setProperty("--min_width",n.minWidth),n.maxWidth&&t.style.setProperty("--max_width",n.maxWidth),n.height&&t.style.setProperty("--height",n.height),n.minHeight&&t.style.setProperty("--min_height",n.minHeight),n.maxHeight&&t.style.setProperty("--max_height",n.maxHeight),document.body.prepend(t),t.open(),t}static confirm(e,n,t={title:"Confirm"}){return Dialog.create(`\n      <h5 slot="title" class="pyh px m0">${t.title}</h5>\n      <p class="p">${e}</p>\n    `,{...t,closeBtn:!1,overlayClose:!1,confirmText:"Yes",confirmClasses:"success ml",confirmAction:()=>n(!0),cancelText:"No",cancelClasses:"danger",cancelAction:()=>n(!1)})}static error(e,n,t={title:"Error"}){const o=Dialog.create(`\n      <h5 slot="title" class="pyh px m0 tc-danger">${t.title}</h5>\n      <p class="p">${e}</p>\n    `,{...t,cancelText:"Ok"});return onEvent(o,"close",n),o}}window.customElements.define("k-dialog",Dialog);
+import Component from"./Component.js";import"./FocusCapture.js";import"./Icon.js";import{firstFocusable,onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class Dialog extends Component{constructor({opened:e=!1,closeBtn:n=!0,overlayClose:t=!0,confirmText:o="",confirmClasses:i="success ml",confirmAction:s=(()=>{}),cancelText:l="",cancelClasses:a="",cancelAction:c=(()=>{}),closeCallback:r=(()=>{})}={}){super(),this.registerAttributes({opened:e,closeBtn:n,overlayClose:t,confirmText:o,confirmClasses:i,cancelText:l,cancelClasses:a}),this.registerProps({confirmAction:s,cancelAction:c,closeCallback:r,previousFocus:null,_clickHandler:e=>{const{target:{id:n}}=e;"overlay"==n&&this.overlayClose||"close"==n?this.close():"cancel"==n?(this.cancelAction(e),e.defaultPrevented||this.close()):"confirm"==n&&(this.confirmAction(e),e.defaultPrevented||this.close())},_keydownHandler:({keyCode:e})=>{27===e&&this.close()},_hasTitle:()=>!!this.querySelector('[slot="title"]')})}connectedCallback(){super.connectedCallback(),onEvent(this.shadowRoot,"click",this._clickHandler)}disconnectedCallback(){super.connectedCallback(),offEvent(this.shadowRoot,"click",this._clickHandler),offEvent(window,"keydown",this._keydownHandler)}attributeChangedCallback(e,n,t){super.attributeChangedCallback(e,n,t),"opened"===name&&dispatchEvent(this,t?"opened":"close")}open(){this.opened=!0;const e=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);e&&e.focus(),onEvent(window,"keydown",this._keydownHandler)}close(){this.opened=!1,this.blur(),this.closeCallback(),offEvent(window,"keydown",this._keydownHandler)}toggle(){this.opened?this.close():this.open()}focus(){const e=firstFocusable(this.shadowRoot);e&&(this.previousFocus=document.activeElement,e.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}get shadowTemplate(){return`\n      <k-focus-capture>\n        <button id="overlay" aria-label="Close the Dialog"></button>\n        <div id="wrapper">\n          <div\n            id="dialog"\n            role="dialog"\n            aria-modal="true"\n            aria-labelledby="title"\n          >\n            <div\n              id="header"\n              class="${this._hasTitle()?"has-title":""}"\n            >\n              <div\n                id="title"\n              ><slot name="title"></slot></div>\n              ${this.renderIf(this.closeBtn,'\n                <button\n                  id="close"\n                >\n                  <k-icon name="close"></k-icon>\n                </button>\n              ')}\n            </div>\n            <div id="body">\n              ${super.shadowTemplate}\n            </div>\n            ${this.renderIf(this.cancelText||this.confirmText,`\n              <div id="footer">\n                ${this.renderIf(this.cancelText,`\n                  <button id="cancel" class="${this.cancelClasses}">\n                    ${this.cancelText}\n                  </button>\n                `)}\n                ${this.renderIf(this.confirmText,`\n                  <button id="confirm" class="${this.confirmClasses}">\n                    ${this.confirmText}\n                  </button>\n                `)}\n              </div>\n            `)}\n          </div>\n        </div>\n      </k-focus-capture>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: inline;\n        height: 1px;\n        width: 1px;\n        position: fixed; /* The browser seems to sometimes lazy load this if its out of view, this seems to fix it*/\n        top: 0;\n        left: 0;\n        z-index: 100;\n      }\n      :host(:not([opened])){\n        display: none;\n      }\n      #overlay {\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        background-color: var(--c_overlay);\n        z-index: 100;\n        border: 0px solid transparent;\n        box-shadow: 0 0 0 transparent;\n      }\n      #wrapper {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        position: fixed;\n        width: 100%;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        z-index: 101;\n        pointer-events: none;\n      }\n      #dialog {\n        display: flex;\n        flex-direction: column;\n        min-width: var(--min_width, 20rem);\n        width: var(--width, fit-content);\n        max-width: var(--max_width, calc(100vw - 4rem));\n        min-height: var(--min_height, 12rem);\n        height: var(--height, fit-content);\n        max-height: var(--max_height, calc(100vh - 4rem));\n        background-color: var(--c_bg);\n        box-shadow: var(--drop_shadow);\n        border-radius: var(--radius);\n        pointer-events: all;\n      }\n      #header {\n        display: flex;\n        align-items: center;\n      }\n      #header.has-title {\n        border-bottom: 1px solid var(--c_border);\n      }\n      #title {\n        flex: 1 1 auto;\n      }\n      #close {\n        border: 0px;\n        background: transparent;\n        box-shadow: 0 0 0 transparent;\n        color: var(--tc);\n      }\n      #close k-icon {\n        pointer-events: none;\n      }\n      #body {\n        flex: 1 1 auto;\n      }\n      #footer {\n        display: flex;\n        justify-content: flex-end;\n        padding: var(--spacer_h);\n      }\n    `}static renderOnChange=["opened","closeBtn","overlayClose","title","confirmText","cancelText"];static create(e="",n={}){!1!==n.closeExisting&&document.querySelectorAll("k-dialog").forEach((e=>e.close()));const t=new Dialog({opened:!0,...n});return onEvent(t,"close",t.remove),e instanceof HTMLElement||e instanceof DocumentFragment?t.appendChild(e):e instanceof NodeList?e.forEach((e=>t.appendChild(e))):t.innerHTML=e,n.width&&t.style.setProperty("--width",n.width),n.minWidth&&t.style.setProperty("--min_width",n.minWidth),n.maxWidth&&t.style.setProperty("--max_width",n.maxWidth),n.height&&t.style.setProperty("--height",n.height),n.minHeight&&t.style.setProperty("--min_height",n.minHeight),n.maxHeight&&t.style.setProperty("--max_height",n.maxHeight),document.body.prepend(t),t.open(),t}static alert(e="",n,t={}){return Dialog.create(e,{closeCallback:n,...t})}static confirm(e,n,t={title:"Confirm"}){return Dialog.create(`\n      <h5 slot="title" class="pyh px m0">${t.title}</h5>\n      <p class="p">${e}</p>\n    `,{...t,closeBtn:!1,overlayClose:!1,confirmText:"Yes",confirmClasses:"success ml",confirmAction:()=>n(!0),cancelText:"No",cancelClasses:"danger",cancelAction:()=>n(!1)})}static error(e,n,t={title:"Error"}){const o=Dialog.create(`\n      <h5 slot="title" class="pyh px m0 tc-danger">${t.title}</h5>\n      <p class="p">${e}</p>\n    `,{...t,cancelText:"Ok"});return onEvent(o,"close",n),o}}window.customElements.define("k-dialog",Dialog);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "type": "module",
   "description": "A web component library",
   "exports": {

package/src/components/Dialog.js

@@ -288,18 +288,41 @@ export default class Dialog extends Component {
       }
     });
   }
+  static alert(text, responseCallback, options = {
+    title: 'Alert'
+  }){
+    return Dialog.create(`
+      <h5 slot="title" class="pyh px m0">${options.title}</h5>
+      <p class="p">${text}</p>
+    `, {
+      closeCallback: responseCallback,
+      cancelText: 'Ok',
+      ...options,
+    });
+  }
   static error(text, responseCallback, options = {
     title: 'Error'
   }){
-    const $dialog = Dialog.create(`
+    return Dialog.create(`
       <h5 slot="title" class="pyh px m0 tc-danger">${options.title}</h5>
       <p class="p">${text}</p>
     `, {
+      closeCallback: responseCallback,
+      cancelText: 'Ok',
       ...options,
+    });
+  }
+  static success(text, responseCallback, options = {
+    title: 'Success'
+  }){
+    return Dialog.create(`
+      <h5 slot="title" class="pyh px m0 tc-success">${options.title}</h5>
+      <p class="p">${text}</p>
+    `, {
+      closeCallback: responseCallback,
       cancelText: 'Ok',
+      ...options,
     });
-    onEvent($dialog, 'close',  responseCallback);
-    return $dialog;
   }
 }
 window.customElements.define('k-dialog', Dialog);