@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
214 lines (213 loc) • 8.32 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { h, Host } from "@stencil/core";
import { setState, validateHasCloser, validateLabel } from "../../schema";
import { translate } from "../../i18n";
import { watchHeadingLevel } from "../heading/validation";
import { KolButtonWcTag } from "../../core/component-names";
import { KolHeadingFc } from "../../functional-components";
import { createUniqueId } from "../../utils/dev.utils";
import { dispatchDomEvent, KolEvent } from "../../utils/events";
export class KolCardWc {
constructor() {
this.translateClose = translate('kol-close');
this.close = () => {
var _a;
if (((_a = this._on) === null || _a === void 0 ? void 0 : _a.onClose) !== undefined) {
this._on.onClose(new Event('Close'));
}
if (this.host) {
dispatchDomEvent(this.host, KolEvent.close);
}
};
this.on = {
onClick: this.close,
};
this._hasCloser = false;
this._headingId = createUniqueId('card-heading');
this._level = 0;
this.state = {
_label: '',
};
this.validateOnValue = (value) => typeof value === 'object' && value !== null && typeof value.onClose === 'function';
}
render() {
return (h(Host, { key: '909cc395209bdb2eba2f674f5fe9f4b8750fccef' }, h("article", { key: '8bbd3d853a4ea8bc6f83dedf245414e8d9421461', "aria-labelledby": this._headingId, class: "kol-card" }, h(KolHeadingFc, { key: '2609f6812d8d909de20b00162cb119b32c0d7f23', class: "kol-card__header", id: this._headingId, level: this.state._level }, this.state._label), h("div", { key: 'a953cb61794cf76980111256849685184cc5dcf9', class: "kol-card__content" }, h("slot", { key: '31d86a46cb4e9d9cee62692aeea43f08db236ccb' })), this.state._hasCloser && (h(KolButtonWcTag, { key: '763993312892b16856634e6d0d10de5cb1454629', class: "kol-card__close-button kol-close-button", "data-testid": "card-close-button", _hideLabel: true, _icons: {
left: {
icon: 'kolicon-cross',
},
}, _label: this.translateClose, _on: this.on, _tooltipAlign: "left" })))));
}
validateHasCloser(value) {
validateHasCloser(this, value);
}
validateLabel(value) {
validateLabel(this, value, {
required: true,
});
}
validateLevel(value) {
watchHeadingLevel(this, value);
}
validateOn(value) {
if (this.validateOnValue(value)) {
setState(this, '_on', {
onClose: value.onClose,
});
}
}
componentWillLoad() {
this.validateHasCloser(this._hasCloser);
this.validateLabel(this._label);
this.validateLevel(this._level);
this.validateOn(this._on);
}
static get is() { return "kol-card-wc"; }
static get properties() {
return {
"_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"
},
"_headingId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "internal",
"text": undefined
}],
"text": "Defines the ID of the heading element. If not provided, an internal ID will be generated."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_heading-id",
"defaultValue": "createUniqueId('card-heading')"
},
"_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": "KoliBriCardEventCallbacks",
"resolved": "undefined | { onClose?: EventCallback<Event> | undefined; }",
"references": {
"KoliBriCardEventCallbacks": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::KoliBriCardEventCallbacks"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines the event callback functions for the component."
},
"getter": false,
"setter": false
}
};
}
static get states() {
return {
"state": {}
};
}
static get elementRef() { return "host"; }
static get watchers() {
return [{
"propName": "_hasCloser",
"methodName": "validateHasCloser"
}, {
"propName": "_label",
"methodName": "validateLabel"
}, {
"propName": "_level",
"methodName": "validateLevel"
}, {
"propName": "_on",
"methodName": "validateOn"
}];
}
}
//# sourceMappingURL=component.js.map