@salla.sa/twilight-components
Version:
Salla Web Component
233 lines (227 loc) • 10.9 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { C as Cancel } from './cancel.js';
import { H as Helper } from './Helper.js';
import { d as defineCustomElement$1 } from './salla-loading2.js';
var AlertEngineIcon = `<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>alert-engine</title>
<path d="M16 18.673c-0.736 0-1.333 0.604-1.333 1.34s0.597 1.333 1.333 1.333 1.333-0.597 1.333-1.333v-0.013c0-0.736-0.597-1.327-1.333-1.327zM2.667 16c0-3.092 1.083-6.105 3.047-8.484 0.469-0.568 0.389-1.408-0.179-1.877-0.568-0.468-1.408-0.388-1.877 0.179-2.359 2.857-3.657 6.473-3.657 10.183s1.299 7.325 3.657 10.183c0.264 0.319 0.645 0.484 1.029 0.484 0.299 0 0.6-0.1 0.848-0.305 0.568-0.469 0.648-1.309 0.179-1.877-1.964-2.379-3.047-5.392-3.047-8.484zM16 10.667c-0.736 0-1.333 0.597-1.333 1.333v4c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-4c0-0.736-0.597-1.333-1.333-1.333zM16 5.333c-5.881 0-10.667 4.785-10.667 10.667s4.785 10.667 10.667 10.667 10.667-4.785 10.667-10.667-4.785-10.667-10.667-10.667zM16 24c-4.412 0-8-3.588-8-8s3.588-8 8-8 8 3.588 8 8-3.588 8-8 8zM28.343 5.817c-0.469-0.567-1.307-0.647-1.877-0.179-0.568 0.469-0.648 1.309-0.179 1.877 1.964 2.379 3.047 5.392 3.047 8.484s-1.083 6.105-3.047 8.484c-0.469 0.568-0.389 1.408 0.179 1.877 0.249 0.205 0.549 0.305 0.848 0.305 0.384 0 0.765-0.165 1.028-0.484 2.36-2.857 3.659-6.473 3.659-10.183s-1.299-7.325-3.657-10.183z"></path>
</svg>
`;
var CheckCircle2 = `<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>check-circle2</title>
<path d="M29.333 14.133c-0.8 0-1.333 0.533-1.333 1.333v1.2c0 6.667-5.333 12-12 12 0 0 0 0 0 0-6.667 0-12-5.333-12-12s5.333-12 12-12c0 0 0 0 0 0 1.733 0 3.333 0.4 4.933 1.067 0.667 0.267 1.467 0 1.733-0.667s0-1.467-0.667-1.733c-1.867-0.8-3.867-1.333-6-1.333 0 0 0 0 0 0-8.133 0-14.667 6.533-14.667 14.667s6.533 14.667 14.667 14.667c0 0 0 0 0 0 8.133 0 14.667-6.533 14.667-14.667v-1.2c0-0.8-0.533-1.333-1.333-1.333zM12.933 14.4c-0.533-0.533-1.333-0.533-1.867 0s-0.533 1.333 0 1.867l4 4c0.267 0.267 0.533 0.4 0.933 0.4s0.667-0.133 0.933-0.4l13.333-13.333c0.533-0.533 0.533-1.333 0-1.867s-1.333-0.533-1.867 0l-12.4 12.4-3.067-3.067z"></path>
</svg>
`;
const sallaModalCss = "@media screen and (max-width: 470px){.modal-is-open{position:fixed;width:100%}}";
const SallaModal = /*@__PURE__*/ proxyCustomElement(class SallaModal extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.modalVisibilityChanged = createEvent(this, "modalVisibilityChanged", 7);
/**
* Sets the modal to be closable. Defaults to `true`
*/
this.isClosable = true; //todo::rename unclude. Suggestion => persistent
/**
* The size of the modal
*/
this.width = 'md';
/**
* The position of the modal
*/
this.position = 'middle';
/**
* open the modal on rendering
*/
this.visible = false;
/**
* open the modal on rendering
*/
this.hasSkeleton = false;
/**
* Show loading in the middle
*/
this.isLoading = false;
/**
* Show subtitle before the title or not, defaults to `false` (after the title)
*/
this.subTitleFirst = false; //todo:: choose better name
/**
* Avoid padding in the modal body or not, defaults to `false`
*/
this.noPadding = false; //todo:: choose better name
/**
* Set modal sub title.
*/
this.subTitle = '';
/**
* Align modal content to center, defaults to `false`
*/
this.centered = false;
/**
* Set the style of the header icon.
*/
this.iconStyle = undefined;
salla.event.on('modal::open', target => target == this.host.id && this.open());
salla.event.on('modal::close', target => target == this.host.id && this.close());
this.modalTitle = this.host.getAttribute('modal-title');
}
handleVisible(newValue) {
if (!newValue) {
this.modalVisibilityChanged.emit(false);
this.toggleModal(false);
return;
}
this.modalVisibilityChanged.emit(true);
this.host.classList.remove('s-hidden');
setTimeout(() => this.toggleModal(true)); //small amont of time to running toggle After adding hidden
}
handleKeyUp(ev) {
if (ev.key === "KeyUp") {
this.closeModal();
}
}
/**
* Open the modal
*/
async open() {
this.host.setAttribute('visible', '');
this.handleAutoFocus();
return this.host;
}
/**
* close the modal
*/
async close() {
this.host.removeAttribute('visible');
return this.host;
}
/**
* Change the Modal Title
* @param {string} modalTitle
*/
async setTitle(modalTitle) {
this.modalTitle = modalTitle;
return this.host;
}
/**
* Start loading
*/
async loading() {
this.isLoading = true;
return this.host;
}
/**
* Stop the loading
*/
async stopLoading() {
this.isLoading = false;
return this.host;
}
handleAutoFocus() {
const firstFocusableElement = this.host.querySelector('input, textarea, select');
if (!firstFocusableElement) {
return;
}
setTimeout(() => {
firstFocusableElement.focus();
}, 100);
}
toggleModal(isOpen) {
const body = this.host.querySelector('.s-modal-body');
Helper.toggleElementClassIf(body, 's-modal-entering', 's-modal-leaving', () => isOpen)
.toggleElementClassIf(this.overlay, 's-modal-entering', 's-modal-overlay-leaving', () => isOpen)
.toggleElementClassIf(document.body, 'modal-is-open', 'modal-is-closed', () => isOpen);
if (!isOpen) {
setTimeout(() => this.host.classList.add('s-hidden'), 350);
}
}
closeModal(reason) {
if (!this.isClosable) {
return;
}
salla.event.dispatch('modal::close', { reason });
this.host.removeAttribute('visible');
}
iconBlockClasses() {
return {
's-modal-icon': true,
's-modal-bg-error': this.iconStyle == 'error',
's-modal-bg-success': this.iconStyle == 'success',
's-modal-bg-normal': !this.iconStyle,
's-modal-bg-primary': this.iconStyle == 'primary'
};
}
getWidth() {
return this.isLoading ? (this.hasSkeleton ? 'md' : 'xs') : this.width;
}
//todo:: pref for each modal
render() {
this.host.id = this.host.id || 'salla-modal';
if (this.isLoading) {
return (h(Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog", onKeyUp: e => this.handleKeyUp(e) }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal("backdropClick") }), h("div", { class: "s-modal-wrapper" }, h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.getWidth() + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, h("slot", { name: "loading" }, h("salla-loading", null)), h("div", { class: "s-hidden" }, h("slot", null))))));
}
return (h(Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal("backdropClick") }), h("div", { class: "s-modal-wrapper" }, h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.getWidth() + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.centered } }, this.isClosable ?
h("button", { class: "s-modal-close", onClick: () => this.closeModal("closeButtonClick"), type: "button" }, h("span", { innerHTML: Cancel }))
: '', this.modalTitle || this.subTitle ?
h("div", { class: "s-modal-header-inner" }, h("slot", { name: 'icon' }, !!this.iconStyle ?
h("div", { class: this.iconBlockClasses(), innerHTML: this.iconStyle == 'error' ? AlertEngineIcon : CheckCircle2 })
: ''), h("div", { class: "s-modal-header-content" }, this.modalTitle ? h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.modalTitle }) : '', this.subTitle ? h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle }) : ''))
: ''), h("slot", null), h("slot", { name: "footer" })))));
}
//move the modal as root dom, because we need the model to be outside the forms
componentDidLoad() {
document.body.append(this.host);
}
get host() { return this; }
static get watchers() { return {
"visible": ["handleVisible"]
}; }
static get style() { return sallaModalCss; }
}, [4, "salla-modal", {
"isClosable": [1028, "is-closable"],
"width": [513],
"position": [513],
"visible": [516],
"hasSkeleton": [516, "has-skeleton"],
"isLoading": [1540, "is-loading"],
"subTitleFirst": [4, "sub-title-first"],
"noPadding": [4, "no-padding"],
"subTitle": [1, "sub-title"],
"centered": [4],
"iconStyle": [1, "icon-style"],
"modalTitle": [32],
"open": [64],
"close": [64],
"setTitle": [64],
"loading": [64],
"stopLoading": [64]
}, [[0, "keyup", "handleKeyUp"]], {
"visible": ["handleVisible"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-modal", "salla-loading"];
components.forEach(tagName => { switch (tagName) {
case "salla-modal":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaModal);
}
break;
case "salla-loading":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { CheckCircle2 as C, SallaModal as S, defineCustomElement as d };
//# sourceMappingURL=salla-modal2.js.map
//# sourceMappingURL=salla-modal2.js.map