@aqua-ds/web-components
Version:
AquaDS Web Components
223 lines (218 loc) • 12.1 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { U as UniqueIdGenerator } from './uidGenerator.js';
import { Z as ZIndex } from './zIndex.js';
import { e as emitEvent } from './eventEmitter.js';
import { d as defineCustomElement$3 } from './aq-divider2.js';
import { d as defineCustomElement$2 } from './aq-transition2.js';
const aqDialogCss = ".aq-dialog__content{position:fixed;top:50%;right:50%;z-index:1150;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%);width:448px;max-width:100%;max-height:calc(100% - 30px);background:var(--color-white);-webkit-box-shadow:var(--shadow-basic);box-shadow:var(--shadow-basic);border-radius:var(--spacing-size-minor);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}.aq-dialog__content--small{width:448px}.aq-dialog__content--medium{width:640px}.aq-dialog__content--large{width:960px}.aq-dialog__content--full{width:calc(100% - 30px) !important;height:calc(100% - 30px) !important;-webkit-transform:none;transform:none;top:15px !important;left:15px}.aq-dialog__content--full .aq-dialog__body{-ms-flex-positive:1;flex-grow:1}.aq-dialog__header{display:block;width:100%}.aq-dialog__header-content{position:relative;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-item-align:stretch;align-self:stretch;-ms-flex-align:center;align-items:center;padding:var(--spacing-size-moderate) var(--spacing-size-moderate) var(--spacing-size-moderate) var(--spacing-size-large);font-size:var(--font-size-m);line-height:var(--font-line-height-6)}.aq-dialog__header-content span{color:var(--color-paper-darker);font-style:normal;font-weight:var(--font-weight-semi-bold)}.aq-dialog__body{padding:var(--spacing-size-moderate) var(--spacing-size-large);width:100%;overflow:auto;-ms-flex-order:1;order:1}.aq-dialog__body--wo-padding{padding:0}.aq-dialog__close{margin-left:var(--spacing-size-short);cursor:pointer}.aq-dialog__maximize{margin:0px 0px 0px var(--spacing-size-short);cursor:pointer}.aq-dialog__header-left{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--spacing-size-minor)}.aq-dialog__title-before{margin-right:var(--spacing-size-minor)}.aq-dialog__title-after{margin-left:var(--spacing-size-minor)}.aq-dialog__header-right{display:-ms-flexbox;display:flex;-ms-flex-item-align:end;align-self:flex-end;-ms-flex-align:center;align-items:center;height:1.25rem;min-height:1.25rem}.aq-dialog__footer{width:100%;-ms-flex-order:1;order:1}.aq-dialog__footer-content{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:var(--spacing-size-medium)}.aq-dialog__backdrop{position:fixed;background-color:#000;opacity:0.1;top:0;right:0;bottom:0;left:0;z-index:1148}.aq-dialog__state--info{color:var(--color-primary-base)}.aq-dialog__state--success{color:var(--color-success-base)}.aq-dialog__state--warning{color:var(--color-warning-base)}.aq-dialog__state--danger{color:var(--color-danger-base)}";
const AqDialog$1 = /*@__PURE__*/ proxyCustomElement(class AqDialog extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.close = createEvent(this, "close", 7);
this.open = createEvent(this, "open", 7);
this.value = false;
this.hasCloseIcon = true;
this.closeOnBackdrop = true;
this.closeOnEscape = true;
this.titleDialog = '';
this.size = 'small';
this.state = '';
this.hasHeader = true;
this.allowMaximize = false;
this.woPadding = false;
this.footer = true;
this.idDialog = '';
this.uid = '';
this.baseZIndex = 0;
this.isMaximize = false;
this.zIndexManager = ZIndex.getInstance();
}
watchHandlerValue(newValue) {
if (newValue)
this.show();
else
this.hide();
emitEvent('input', this.el, { value: this.value });
}
handleKeyDown(event) {
event.stopPropagation();
if (event.key === 'Escape' && this.closeOnEscape) {
if (this.zIndexManager.getLastIndex(this.uid)) {
this.zIndexManager.deleteZIndex(this.uid);
this.value = false;
}
}
}
handleDirectiveClick(event) {
const target = event.target;
const idToggle = this.el.id;
const directive = `aq-dialog-${idToggle}`;
const getElement = target.closest(`[aq-dialog], .${directive}`);
if (getElement) {
const hasDirective = getElement.classList.contains(directive);
if (hasDirective && !this.value) {
this.value = true;
}
}
}
validateUid() {
this.uid = this.idDialog.length > 0 ? this.idDialog : new UniqueIdGenerator().generateId();
}
getIcon() {
let icon = '';
switch (this.state.toLowerCase()) {
case 'info':
icon = 'aq-icon-info-circle-fill';
break;
case 'success':
icon = 'aq-icon-check-circle-fill';
break;
case 'warning':
icon = 'aq-icon-info-major-triangle-up-fill';
break;
case 'danger':
icon = 'aq-icon-alert-circle-fill';
break;
default:
icon = '';
}
const classIcon = {
['aq-dialog__state--' + this.getState]: true,
[icon]: true,
};
return h("em", { class: classIcon });
}
get getState() {
return this.state.toLowerCase();
}
get contentStyle() {
return {
zIndex: JSON.stringify(this.baseZIndex + 1),
};
}
get backDropStyle() {
return {
zIndex: JSON.stringify(this.baseZIndex),
};
}
get showHeader() {
return this.hasHeader && this.titleDialog;
}
get showMaximize() {
return this.allowMaximize && this.size !== 'full';
}
getStyleAqDialogMaximize() {
return {
'aq-dialog__maximize': true,
'aq-icon-arrows-in': this.isMaximize,
'aq-icon-arrows-out': !this.isMaximize,
};
}
handleMaximize() {
this.isMaximize = !this.isMaximize;
}
getIconMaximize() {
const cssClassAqDialogMaximize = this.getStyleAqDialogMaximize();
return this.showMaximize && h("em", { class: cssClassAqDialogMaximize, onClick: () => this.handleMaximize() });
}
async hide() {
this.value = false;
this.isMaximize = false;
this.zIndexManager.deleteZIndex(this.uid);
this.close.emit();
}
async show() {
this.value = true;
this.baseZIndex = this.zIndexManager.setZIndex(this.uid);
this.open.emit();
}
handleClose(event) {
this.value = false;
event.stopPropagation();
}
getIconClose() {
return this.hasCloseIcon && h("em", { class: "aq-icon-close aq-dialog__close", onClick: event => this.handleClose(event) });
}
getStyleAqDialogBody() {
return {
'aq-dialog__body aq-scroll-bar': true,
'aq-dialog__body--wo-padding ': this.woPadding,
};
}
componentWillLoad() {
this.validateUid();
}
getStyleAqDialogContent() {
return {
'aq-dialog__content': true,
'aq-dialog__content--full': this.isMaximize,
['aq-dialog__content--' + this.size]: !this.isMaximize,
};
}
closeBackdrop() {
if (this.closeOnBackdrop)
this.value = false;
}
render() {
const cssClassAqDialogContent = this.getStyleAqDialogContent();
const icon = this.getIcon();
const iconMaximize = this.getIconMaximize();
const iconClose = this.getIconClose();
const cssClassAqDialogBody = this.getStyleAqDialogBody();
return (h(Host, { key: 'ab7d1b5719d3edcc8813f7a55efa1d33289539cf', class: "aq-dialog" }, h("aq-transition", { key: '2f450a38a04b03b929c9c0f59d0385dae8ef6f16', transitionType: "fade" }, h("div", { key: 'f21023ce84b58cbc824ade02730d4580e7954637', class: cssClassAqDialogContent, style: { display: this.value ? 'flex' : 'none', ...this.contentStyle } }, this.hasHeader && (h("div", { key: '70726a1d764e0f2ef9efce9967147aeee7b84449', class: "aq-dialog__header" }, h("div", { key: '9db5f5c459018d2a53e1c21671986c15b5c11a3b', class: "aq-dialog__header-content" }, h("div", { key: 'a729cd1af3780abfa77195f9832276e50af1c72d', class: "aq-dialog__header-left" }, icon, h("slot", { key: '063e1665befffe563f9395f5278aeebdc66c2b3a', name: "before-title", slot: "before-title" }), h("span", { key: '186b988cbd0d5064d61c8266266dd875a6ff56a3' }, this.titleDialog), h("slot", { key: 'cce2da8af1fafd5bf66d0dd081b93f41b0aa708c', name: "after-title", slot: "after-title" })), h("div", { key: 'fdf67ead00b50449205850f2a7f13eef66a4e77a', class: "aq-dialog__header-right" }, h("slot", { key: '26602ffe38e9e1368cc48cb0a6a64f1c24d1ebca', name: "header-right", slot: "header-right" }), iconMaximize, iconClose)), this.showHeader && h("aq-divider", { key: '92cb43c7931c4aa6e408d0dc0b6506b5c1da1993' }))), h("div", { key: '226e49e60b6508d79143d43b79ca2ade471f3e20', class: cssClassAqDialogBody }, h("slot", { key: 'b892b65906d719377a49e830df2bead2bcfd4e4d' })), this.footer && (h("div", { key: '95042192b1a44f468cdf16de8f4a91abe6abba7e', class: "aq-dialog__footer" }, h("aq-divider", { key: '329ce3906d44170e3001146ae875f3f76ee7e586' }), h("div", { key: '827956b7bffa147aa0ad4b451b3ac1c7f4c4411a', class: "aq-dialog__footer-content" }, h("slot", { key: '6b6d8d1ff967adc1a21d915dea237cb9fc1e0715', name: "footer-left", slot: "footer-left" }), h("slot", { key: 'b11eb46a6299d2f13acfa9d312abe9781dece42a', name: "footer-right", slot: "footer-right" })))))), h("aq-transition", { key: 'e2e15cd88fd8fbdb1151542a2d66c646fd72d76f', transitionType: "fade" }, h("div", { key: '08f3f8f9d9cdf59dadb1618278fe8e9f6ded43c9', class: "aq-dialog__backdrop", style: { display: this.value ? 'block' : 'none', ...this.backDropStyle }, onClick: () => this.closeBackdrop() }))));
}
get el() { return this; }
static get watchers() { return {
"value": ["watchHandlerValue"]
}; }
static get style() { return aqDialogCss; }
}, [260, "aq-dialog", {
"value": [1540],
"hasCloseIcon": [4, "has-close-icon"],
"closeOnBackdrop": [4, "close-on-backdrop"],
"closeOnEscape": [4, "close-on-escape"],
"titleDialog": [1, "title-dialog"],
"size": [1],
"state": [1],
"hasHeader": [4, "has-header"],
"allowMaximize": [4, "allow-maximize"],
"woPadding": [4, "wo-padding"],
"footer": [4],
"idDialog": [1, "id-dialog"],
"uid": [32],
"baseZIndex": [32],
"isMaximize": [32],
"hide": [64],
"show": [64]
}, [[8, "keydown", "handleKeyDown"], [8, "click", "handleDirectiveClick"]], {
"value": ["watchHandlerValue"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-dialog", "aq-divider", "aq-transition"];
components.forEach(tagName => { switch (tagName) {
case "aq-dialog":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqDialog$1);
}
break;
case "aq-divider":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "aq-transition":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const AqDialog = AqDialog$1;
const defineCustomElement = defineCustomElement$1;
export { AqDialog, defineCustomElement };