@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
187 lines (181 loc) • 7.13 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { d as KolCardWcTag } from './component-names.js';
import './common.js';
import { h as watchString, a as watchValidator, s as setState } from './prop.validators.js';
import { v as validateLabel } from './label.js';
import { c as clsx } from './clsx.js';
import { c as createUniqueId } from './dev.utils.js';
import { d as dispatchDomEvent, K as KolEvent } from './events.js';
import { h as handleCancelOverlay } from './tooltip-open-tracking.js';
import { w as watchHeadingLevel } from './validation.js';
const validateWidth = (component, value, options) => {
watchString(component, '_width', value, Object.assign({ defaultValue: '100%' }, options));
};
const DialogVariantPropTypeOptions = ['blank', 'card'];
const validateDialogVariant = (component, value) => {
watchValidator(component, '_variant', (value) => typeof value === 'string' && DialogVariantPropTypeOptions.includes(value), new Set(DialogVariantPropTypeOptions), value);
};
const KolDialogWc$1 = proxyCustomElement(class KolDialogWc extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.cardHeadingId = createUniqueId('dialog-heading');
this.isModal = true;
this._cardOn = { onClose: () => void this.close() };
this.handleCancelEvent = (event) => {
var _a, _b;
handleCancelOverlay(event);
if (event.defaultPrevented)
return;
(_b = (_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onCancel) === null || _b === void 0 ? void 0 : _b.call(_a, event);
if (event.defaultPrevented)
return;
if (this.host && !dispatchDomEvent(this.host, KolEvent.cancel)) {
event.preventDefault();
}
};
this._level = 0;
this._width = '100%';
this._variant = 'blank';
this.state = {
_label: '',
_width: '100%',
};
}
disconnectedCallback() {
void this.close();
}
handleNativeCloseEvent(event) {
var _a;
if (event.target !== this.refDialog) {
return;
}
if (typeof ((_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onClose) === 'function') {
this.state._on.onClose();
}
if (this.host) {
dispatchDomEvent(this.host, KolEvent.close);
}
}
async show(modal = false) {
var _a, _b, _c, _d, _e;
if ((_a = this.refDialog) === null || _a === void 0 ? void 0 : _a.open) {
return;
}
this.isModal = modal;
if (modal) {
(_c = (_b = this.refDialog) === null || _b === void 0 ? void 0 : _b.showModal) === null || _c === void 0 ? void 0 : _c.call(_b);
}
else {
(_e = (_d = this.refDialog) === null || _d === void 0 ? void 0 : _d.show) === null || _e === void 0 ? void 0 : _e.call(_d);
}
}
showModal() {
return this.show(true);
}
openModal() {
return this.showModal();
}
async close() {
var _a, _b;
(_b = (_a = this.refDialog) === null || _a === void 0 ? void 0 : _a.close) === null || _b === void 0 ? void 0 : _b.call(_a);
}
closeModal() {
return this.close();
}
render() {
return (h("dialog", { key: '740fd9b18343e873a7961173848be648bbd0ff8a', "aria-label": this.state._variant === 'blank' ? this.state._label : undefined, "aria-labelledby": this.state._variant === 'card' ? this.cardHeadingId : undefined, "aria-modal": this.isModal ? 'true' : 'false', class: clsx('kol-dialog', 'kol-modal', {
'kol-dialog__blank': this.state._variant === 'blank',
'kol-dialog__card': this.state._variant === 'card',
'kol-modal__blank': this.state._variant === 'blank',
'kol-modal__card': this.state._variant === 'card',
}), onCancel: this.handleCancelEvent, onClose: this.handleNativeCloseEvent.bind(this), ref: (el) => {
this.refDialog = el;
}, style: {
width: this.state._width,
} }, this.state._variant === 'blank' && h("slot", { key: '183bbb7224ca0ec06bbd84e354fa7b58882a4879' }), this.state._variant === 'card' && (h(KolCardWcTag, { key: 'e0270ea31e33d61760aa8fca356c08f88a56fffe', _hasCloser: true, _headingId: this.cardHeadingId, _label: this.state._label, _level: this._level, _on: this._cardOn }, h("slot", { key: 'a18c03fd1f0cdcc25a8bddfffd5b0753fc81cdb5' })))));
}
validateLabel(value) {
validateLabel(this, value, {
required: true,
});
}
validateLevel(value) {
watchHeadingLevel(this, value);
}
validateOn(value) {
if (typeof value === 'object' && value !== null) {
const callbacks = {};
if (typeof value.onCancel === 'function') {
callbacks.onCancel = value.onCancel;
}
if (typeof value.onClose === 'function') {
callbacks.onClose = value.onClose;
}
setState(this, '_on', callbacks);
}
}
validateWidth(value) {
validateWidth(this, value);
}
validateVariant(value) {
validateDialogVariant(this, value);
}
componentWillLoad() {
this.validateLabel(this._label);
this.validateLevel(this._level);
this.validateOn(this._on);
this.validateWidth(this._width);
this.validateVariant(this._variant);
}
get host() { return this; }
static get watchers() { return {
"_label": ["validateLabel"],
"_level": ["validateLevel"],
"_on": ["validateOn"],
"_width": ["validateWidth"],
"_variant": ["validateVariant"]
}; }
}, [260, "kol-dialog-wc", {
"_label": [1],
"_level": [2],
"_on": [16],
"_width": [1],
"_variant": [1],
"isModal": [32],
"state": [32],
"show": [64],
"showModal": [64],
"openModal": [64],
"close": [64],
"closeModal": [64]
}, undefined, {
"_label": ["validateLabel"],
"_level": ["validateLevel"],
"_on": ["validateOn"],
"_width": ["validateWidth"],
"_variant": ["validateVariant"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kol-dialog-wc"];
components.forEach(tagName => { switch (tagName) {
case "kol-dialog-wc":
if (!customElements.get(tagName)) {
customElements.define(tagName, KolDialogWc$1);
}
break;
} });
}
const KolDialogWc = KolDialogWc$1;
const defineCustomElement = defineCustomElement$1;
export { KolDialogWc, defineCustomElement };
//# sourceMappingURL=kol-dialog-wc.js.map
//# sourceMappingURL=kol-dialog-wc.js.map