@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
151 lines (146 loc) • 6.16 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { r as registerInstance, h, g as getElement } from './index-BQlHOxik.js';
import { d as KolCardWcTag } from './component-names-Dy77vq43.js';
import { g as watchString, b as watchValidator, s as setState } from './common-Cx_AGO_M.js';
import { v as validateLabel } from './label-Fyi30H9j.js';
import { c as clsx } from './clsx-COFh-Vc8.js';
import { c as createUniqueId } from './dev.utils-02Sl9bQo.js';
import { d as dispatchDomEvent, K as KolEvent } from './events-VVvk1win.js';
import { h as handleCancelOverlay } from './tooltip-open-tracking-D3tCiiGP.js';
import { w as watchHeadingLevel } from './validation-D6nATCh8.js';
import './level-1jyaYIAE.js';
import './normalizers-m3s9sgmq.js';
import './_Uint8Array-kJHDjtoP.js';
import './isArray-CcrBs4JM.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 = class {
constructor(hostRef) {
registerInstance(this, hostRef);
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 getElement(this); }
static get watchers() { return {
"_label": ["validateLabel"],
"_level": ["validateLevel"],
"_on": ["validateOn"],
"_width": ["validateWidth"],
"_variant": ["validateVariant"]
}; }
};
export { KolDialogWc as kol_dialog_wc };
//# sourceMappingURL=kol-dialog-wc.entry.js.map