@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
285 lines (284 loc) • 10.4 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { h } from "@stencil/core";
import KolAlertFc from "../../functional-components/Alert";
import { setState, validateAlertType, validateAlertVariant, validateHasCloser, validateLabel, watchBoolean } from "../../schema";
import { dispatchDomEvent, KolEvent } from "../../utils/events";
import { watchHeadingLevel } from "../heading/validation";
export class KolAlertWc {
constructor() {
this.close = () => {
var _a, _b;
(_b = (_a = this._on) === null || _a === void 0 ? void 0 : _a.onClose) === null || _b === void 0 ? void 0 : _b.call(_a, new Event('Close'));
if (this.host) {
dispatchDomEvent(this.host, KolEvent.close);
}
};
this.handleAlertTimeout = () => {
this.validateAlert(false);
};
this._alert = false;
this._hasCloser = false;
this._level = 0;
this._type = 'default';
this._variant = 'msg';
this.state = {
_level: 0,
};
this.validateOnValue = (value) => typeof value === 'object' && value !== null && typeof value.onClose === 'function';
}
render() {
const { _alert, _hasCloser, _label, _level, _type, _variant } = this.state;
const props = {
alert: _alert,
hasCloser: _hasCloser,
label: _label,
level: _level,
type: _type,
variant: _variant,
onCloserClick: this.close,
onAlertTimeout: this.handleAlertTimeout,
};
return (h(KolAlertFc, Object.assign({ key: 'ab90b52cbda1d61514c3acd292d0bd6d91f0c9d5' }, props), h("slot", { key: '6a7e2a89cfabde71c1140d4cf5de28e99bc09ef4' })));
}
validateAlert(value) {
watchBoolean(this, '_alert', value);
}
validateHasCloser(value) {
validateHasCloser(this, value);
}
validateLabel(value) {
validateLabel(this, value);
}
validateLevel(value) {
watchHeadingLevel(this, value);
}
validateOn(value) {
if (this.validateOnValue(value)) {
setState(this, '_on', {
onClose: value.onClose,
});
}
}
validateType(value) {
validateAlertType(this, value);
}
validateVariant(value) {
validateAlertVariant(this, value);
}
componentWillLoad() {
this.validateAlert(this._alert);
this.validateHasCloser(this._hasCloser);
this.validateLabel(this._label);
this.validateLevel(this._level);
this.validateOn(this._on);
this.validateType(this._type);
this.validateVariant(this._variant);
}
static get is() { return "kol-alert-wc"; }
static get properties() {
return {
"_alert": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines whether the screen-readers should read out the notification."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_alert",
"defaultValue": "false"
},
"_hasCloser": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "TODO",
"text": ": Change type back to `HasCloserPropType` after Stencil#4663 has been resolved."
}],
"text": "Defines whether the element can be closed."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_has-closer",
"defaultValue": "false"
},
"_label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "LabelPropType",
"resolved": "string | undefined",
"references": {
"LabelPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::LabelPropType"
}
}
},
"required": false,
"optional": true,
"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": "KoliBriAlertEventCallbacks",
"resolved": "undefined | { onClose?: EventCallback<Event> | undefined; }",
"references": {
"KoliBriAlertEventCallbacks": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::KoliBriAlertEventCallbacks"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Gibt die EventCallback-Function f\u00FCr das Schlie\u00DFen des Alerts an."
},
"getter": false,
"setter": false
},
"_type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "AlertTypePropType",
"resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\" | undefined",
"references": {
"AlertTypePropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::AlertTypePropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines either the type of the component or of the components interactive element."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_type",
"defaultValue": "'default'"
},
"_variant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "AlertVariantPropType",
"resolved": "\"card\" | \"msg\" | undefined",
"references": {
"AlertVariantPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::AlertVariantPropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines which variant should be used for presentation."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_variant",
"defaultValue": "'msg'"
}
};
}
static get states() {
return {
"state": {}
};
}
static get elementRef() { return "host"; }
static get watchers() {
return [{
"propName": "_alert",
"methodName": "validateAlert"
}, {
"propName": "_hasCloser",
"methodName": "validateHasCloser"
}, {
"propName": "_label",
"methodName": "validateLabel"
}, {
"propName": "_level",
"methodName": "validateLevel"
}, {
"propName": "_on",
"methodName": "validateOn"
}, {
"propName": "_type",
"methodName": "validateType"
}, {
"propName": "_variant",
"methodName": "validateVariant"
}];
}
}
//# sourceMappingURL=component.js.map