@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
375 lines (374 loc) • 14.1 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { h } from "@stencil/core";
import { KolCardWcTag } from "../../core/component-names";
import { setState, validateLabel, validateWidth } from "../../schema";
import { validateModalVariant } from "../../schema/props/variant/modal";
import clsx from "../../utils/clsx";
import { createUniqueId } from "../../utils/dev.utils";
import { dispatchDomEvent, KolEvent } from "../../utils/events";
import { handleCancelOverlay } from "../../utils/tooltip-open-tracking";
import { watchHeadingLevel } from "../heading/validation";
export class KolDialogWc {
constructor() {
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) {
validateModalVariant(this, value);
}
componentWillLoad() {
this.validateLabel(this._label);
this.validateLevel(this._level);
this.validateOn(this._on);
this.validateWidth(this._width);
this.validateVariant(this._variant);
}
static get is() { return "kol-dialog-wc"; }
static get properties() {
return {
"_label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "LabelPropType",
"resolved": "string",
"references": {
"LabelPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::LabelPropType"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_label"
},
"_level": {
"type": "number",
"mutable": false,
"complexType": {
"original": "HeadingLevel",
"resolved": "0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined",
"references": {
"HeadingLevel": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::HeadingLevel"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_level",
"defaultValue": "0"
},
"_on": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "KoliBriDialogEventCallbacks",
"resolved": "undefined | ({ onCancel?: ((event: Event) => void) | undefined; onClose?: (() => void) | undefined; onToggle?: ((open: boolean) => void) | undefined; })",
"references": {
"KoliBriDialogEventCallbacks": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::KoliBriDialogEventCallbacks"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines the modal callback functions."
},
"getter": false,
"setter": false
},
"_width": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines the width of the modal. (max-width: 100%)"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_width",
"defaultValue": "'100%'"
},
"_variant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "ModalVariantPropType",
"resolved": "\"blank\" | \"card\" | undefined",
"references": {
"ModalVariantPropType": {
"location": "import",
"path": "../../schema/props/variant/modal",
"id": "src/schema/props/variant/modal.ts::ModalVariantPropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines the variant of the modal."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_variant",
"defaultValue": "'blank'"
}
};
}
static get states() {
return {
"isModal": {},
"state": {}
};
}
static get methods() {
return {
"show": {
"complexType": {
"signature": "(modal?: boolean) => Promise<void>",
"parameters": [{
"name": "modal",
"type": "boolean",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Opens the dialog. Pass true to open as a modal dialog.",
"tags": []
}
},
"showModal": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Opens the dialog as a modal.",
"tags": []
}
},
"openModal": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Opens the dialog as a modal.",
"tags": [{
"name": "deprecated",
"text": "Use showModal() instead."
}]
}
},
"close": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Closes the dialog.",
"tags": []
}
},
"closeModal": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Closes the dialog.",
"tags": [{
"name": "deprecated",
"text": "Use close() instead."
}]
}
}
};
}
static get elementRef() { return "host"; }
static get watchers() {
return [{
"propName": "_label",
"methodName": "validateLabel"
}, {
"propName": "_level",
"methodName": "validateLevel"
}, {
"propName": "_on",
"methodName": "validateOn"
}, {
"propName": "_width",
"methodName": "validateWidth"
}, {
"propName": "_variant",
"methodName": "validateVariant"
}];
}
}
//# sourceMappingURL=component.js.map