@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
222 lines (221 loc) • 9.3 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { h, Host } from "@stencil/core";
import { validateErrorList, watchBoolean, watchString } from "../../schema";
import { translate } from "../../i18n";
import { KolLinkWcTag } from "../../core/component-names";
import KolAlertFc from "../../functional-components/Alert";
import { dispatchDomEvent, KolEvent } from "../../utils/events";
export class KolForm {
constructor() {
this.translateErrorListMessage = translate('kol-error-list-message');
this.translateErrorList = translate('kol-error-list');
this.translateFormDescription = translate('kol-form-description');
this.onSubmit = (event) => {
var _a, _b;
event.preventDefault();
if (typeof ((_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onSubmit) === 'function') {
(_b = this.state._on) === null || _b === void 0 ? void 0 : _b.onSubmit(event);
}
if (this.host) {
dispatchDomEvent(this.host, KolEvent.submit);
}
};
this.onReset = (event) => {
var _a, _b;
event.preventDefault();
if (typeof ((_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onReset) === 'function') {
(_b = this.state._on) === null || _b === void 0 ? void 0 : _b.onReset(event);
}
if (this.host) {
dispatchDomEvent(this.host, KolEvent.reset);
}
};
this.handleLinkClick = (selector) => {
const targetElement = document.querySelector(selector);
if (targetElement && typeof targetElement.focus === 'function') {
targetElement.scrollIntoView({ behavior: 'smooth' });
targetElement.focus();
}
};
this.setBlockElement = (el) => (this.errorListBlock = el);
this.setFirstLinkElement = (el) => (this.errorListFirstLink = el);
this._requiredText = true;
this.state = {};
}
renderErrorList(errorList) {
return (h(KolAlertFc, { class: "kol-form__alert", ref: this.setBlockElement, type: "error", variant: "card", label: this.translateErrorListMessage }, h("nav", { "aria-label": this.translateErrorList }, h("ul", null, errorList === null || errorList === void 0 ? void 0 : errorList.map((error, index) => (h("li", { key: index }, h(KolLinkWcTag, { class: "kol-form__link", _href: "", _label: error.message, _on: { onClick: typeof error.selector === 'string' ? () => this.handleLinkClick(String(error.selector)) : error.selector }, ref: index === 0 ? this.setFirstLinkElement : undefined }))))))));
}
renderFormElement() {
return (h("form", { class: "kol-form", method: "post", onSubmit: this.onSubmit, onReset: this.onReset, noValidate: true }, this.state._requiredText === true ? (h("p", null, h("div", { class: "kol-form__mandatory-fields-hint" }, this.translateFormDescription))) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (h("p", null, h("div", { class: "kol-form__mandatory-fields-hint" }, this.state._requiredText))) : null, h("slot", null)));
}
render() {
const hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;
return (h(Host, { key: 'd002ea1e6be732b787b8e9823fb7812dd43abbc7' }, hasErrorList && this.renderErrorList(this._errorList), this.renderFormElement()));
}
scrollToErrorList() {
var _a;
(_a = this.errorListBlock) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
behavior: 'smooth',
block: 'start',
});
setTimeout(() => {
var _a, _b;
(_b = (_a = this.errorListFirstLink) === null || _a === void 0 ? void 0 : _a.querySelector('a')) === null || _b === void 0 ? void 0 : _b.focus();
}, 250);
}
async focusErrorList() {
this.scrollToErrorList();
return Promise.resolve();
}
validateOn(value) {
if (typeof value === 'object' && value !== null) {
this.state = Object.assign(Object.assign({}, this.state), { _on: value });
}
}
validateRequiredText(value) {
if (typeof value === 'boolean') {
watchBoolean(this, '_requiredText', value);
}
else {
watchString(this, '_requiredText', value);
}
}
validateErrorList(value) {
validateErrorList(this, value);
}
componentWillLoad() {
this.validateOn(this._on);
this.validateRequiredText(this._requiredText);
this.validateErrorList(this._errorList);
}
static get is() { return "kol-form"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"default": ["./style.scss"]
};
}
static get styleUrls() {
return {
"default": ["style.css"]
};
}
static get properties() {
return {
"_on": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "KoliBriFormCallbacks",
"resolved": "undefined | { onSubmit?: EventCallback<Event> | undefined; onReset?: EventCallback<Event> | undefined; }",
"references": {
"KoliBriFormCallbacks": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::KoliBriFormCallbacks"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Gibt die EventCallback-Funktionen f\u00FCr die Form-Events an."
},
"getter": false,
"setter": false
},
"_requiredText": {
"type": "any",
"mutable": false,
"complexType": {
"original": "Stringified<boolean>",
"resolved": "boolean | string | undefined",
"references": {
"Stringified": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::Stringified"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines whether the mandatory-fields-hint should be shown. A string overrides the default text."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_required-text",
"defaultValue": "true"
},
"_errorList": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "ErrorListPropType[]",
"resolved": "ErrorListPropType[] | undefined",
"references": {
"ErrorListPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::ErrorListPropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "A list of error objects that each describe an issue encountered in the form.\nEach error object contains a message and a selector for identifying the form element related to the error."
},
"getter": false,
"setter": false
}
};
}
static get states() {
return {
"state": {}
};
}
static get methods() {
return {
"focusErrorList": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Scrolls to the error list and focuses the first link.",
"tags": []
}
}
};
}
static get elementRef() { return "host"; }
static get watchers() {
return [{
"propName": "_on",
"methodName": "validateOn"
}, {
"propName": "_requiredText",
"methodName": "validateRequiredText"
}, {
"propName": "_errorList",
"methodName": "validateErrorList"
}];
}
}
//# sourceMappingURL=shadow.js.map