UNPKG

@public-ui/components

Version:

Contains all web components that belong to KoliBri - The accessible HTML-Standard.

1,024 lines (1,023 loc) 40.2 kB
/*! * KoliBri - The accessible HTML-Standard */ import { __decorate } from "tslib"; import { h } from "@stencil/core"; import clsx from "../../utils/clsx"; import { deprecatedHint } from "../../schema"; import KolFormFieldStateWrapperFc from "../../functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper"; import KolInputContainerFc from "../../functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper"; import KolInputStateWrapperFc from "../../functional-component-wrappers/InputStateWrapper/InputStateWrapper"; import { createUniqueId } from "../../utils/dev.utils"; import { createCtaRef, delegateClick, delegateFocus } from "../../utils/element-interaction"; import { propagateSubmitEventToForm } from "../form/controller"; import { InputDateController } from "./controller"; export class KolInputDate { async getValue() { var _a; return this.ctaRef.el && this.remapValue((_a = this.ctaRef.el) === null || _a === void 0 ? void 0 : _a.value); } async focus() { } async click() { } async reset() { this.state = Object.assign(Object.assign({}, this.state), { _value: null }); this.controller.setFormAssociatedValue(''); if (this.ctaRef.el) { this.ctaRef.el.value = ''; } } setInitialValueType(value) { if (value instanceof Date) { this._initialValueType = 'Date'; } else if (typeof value === 'string') { this._initialValueType = 'String'; } else { this._initialValueType = null; } } remapValue(newValue) { if (newValue === '') { return null; } return this._initialValueType === 'Date' ? new Date(newValue) : newValue; } getFormFieldProps() { return { state: this.state, class: clsx('kol-input-date', this.state._type, { 'has-value': this.state._hasValue, }), tooltipAlign: this._tooltipAlign, alert: this.showAsAlert(), }; } getInputProps() { return Object.assign(Object.assign({ ref: this.ctaRef, state: this.state }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, onChange: this.onChange, onInput: this.onInput }); } render() { return (h(KolFormFieldStateWrapperFc, Object.assign({ key: '2959080efe3259aa4ba6ca1557739396c31f4d5b' }, this.getFormFieldProps()), h(KolInputContainerFc, { key: 'd834da0c5673b5e0815b5df2e62f12ffbf6eca71', state: this.state }, h(KolInputStateWrapperFc, Object.assign({ key: 'facb14c86d03ae7bf985f44706ef4b0dcec8bb06' }, this.getInputProps()))))); } constructor() { this.ctaRef = createCtaRef(); this._initialValueType = null; this.onBlur = (event) => { this.controller.onFacade.onBlur(event); this.inputHasFocus = false; }; this.onFocus = (event) => { this.controller.onFacade.onFocus(event); this.inputHasFocus = true; }; this.onChange = (event) => { const newValue = event.target.value; const remappedValue = this.remapValue(newValue); this.controller.onFacade.onChange(event, remappedValue); }; this.onInput = (event) => { const newValue = event.target.value; const remappedValue = this.remapValue(newValue); this._value = remappedValue; this.controller.onFacade.onInput(event, true, remappedValue); }; this.isNativeCalendarIconFocused = () => { if (!this.ctaRef.el || typeof window === 'undefined' || typeof window.getComputedStyle !== 'function') { return false; } const computedStyle = window.getComputedStyle(this.ctaRef.el); return computedStyle.content.includes('native-icon-focused'); }; this.onKeyDown = (event) => { this.controller.onFacade.onKeyDown(event); if ((event.code === 'Enter' || event.code === 'NumpadEnter') && !this.isNativeCalendarIconFocused()) { propagateSubmitEventToForm({ form: this.host, ref: this.ctaRef.el, }); } if (this.state._readOnly && event.code === 'Space') { event.preventDefault(); } }; this._autoComplete = 'off'; this._disabled = false; this._hideMsg = false; this._hideLabel = false; this._hint = ''; this._readOnly = false; this._required = false; this._tooltipAlign = 'top'; this._touched = false; this._type = 'date'; this.state = { _hasValue: false, _hideMsg: false, _id: createUniqueId('input-date'), _label: '', _suggestions: [], _type: 'datetime-local', }; this.inputHasFocus = false; this.controller = new InputDateController(this, 'date', this.host); } showAsAlert() { return Boolean(this.state._touched) && !this.inputHasFocus; } validateAccessKey(value) { this.controller.validateAccessKey(value); } validateAutoComplete(value) { this.controller.validateAutoComplete(value); } validateDisabled(value) { this.controller.validateDisabled(value); } validateHideMsg(value) { this.controller.validateHideMsg(value); } validateHideLabel(value) { this.controller.validateHideLabel(value); } validateHint(value) { this.controller.validateHint(value); } validateIcons(value) { this.controller.validateIcons(value); } validateLabel(value) { this.controller.validateLabel(value); } validateMax(value) { this.controller.validateMax(value); } validateMin(value) { this.controller.validateMin(value); } validateMsg(value) { this.controller.validateMsg(value); } validateName(value) { this.controller.validateName(value); } validateOn(value) { this.controller.validateOn(value); } validateReadOnly(value) { this.controller.validateReadOnly(value); } validateRequired(value) { this.controller.validateRequired(value); } validateShortKey(value) { this.controller.validateShortKey(value); } validateSmartButton(value) { this.controller.validateSmartButton(value); } validateSuggestions(value) { this.controller.validateSuggestions(value); } validateStep(value) { this.controller.validateStep(value); } validateSyncValueBySelector(value) { this.controller.validateSyncValueBySelector(value); } validateTouched(value) { this.controller.validateTouched(value); } validateType(value) { this.controller.validateType(value); } validateValue(value) { if (value instanceof Date) { deprecatedHint('Date type will be removed in v3. Use `Iso8601` instead.'); } this.controller.validateValueEx(value); if (value !== undefined && value !== null) { this.setInitialValueType(value); } } validateVariant(value) { this.controller.validateVariant(value); } componentWillLoad() { if (this._value !== undefined) this.setInitialValueType(this._value); this._touched = this._touched === true; this.controller.componentWillLoad(); this.state._hasValue = !!this.state._value; this.controller.addValueChangeListener((v) => (this.state._hasValue = !!v)); } static get is() { return "kol-input-date"; } static get encapsulation() { return "shadow"; } static get originalStyleUrls() { return { "default": ["./style.scss"] }; } static get styleUrls() { return { "default": ["style.css"] }; } static get properties() { return { "_accessKey": { "type": "string", "mutable": false, "complexType": { "original": "string", "resolved": "string | undefined", "references": {} }, "required": false, "optional": true, "docs": { "tags": [], "text": "Defines the key combination that can be used to trigger or focus the component's interactive element." }, "getter": false, "setter": false, "reflect": false, "attribute": "_access-key" }, "_autoComplete": { "type": "string", "mutable": false, "complexType": { "original": "AutoCompletePropType", "resolved": "string | undefined", "references": { "AutoCompletePropType": { "location": "import", "path": "../../schema", "id": "src/schema/index.ts::AutoCompletePropType" } } }, "required": false, "optional": true, "docs": { "tags": [], "text": "Defines whether the input can be auto-completed." }, "getter": false, "setter": false, "reflect": false, "attribute": "_auto-complete", "defaultValue": "'off'" }, "_disabled": { "type": "boolean", "mutable": false, "complexType": { "original": "boolean", "resolved": "boolean | undefined", "references": {} }, "required": false, "optional": true, "docs": { "tags": [{ "name": "TODO", "text": ": Change type back to `DisabledPropType` after Stencil#4663 has been resolved." }], "text": "Makes the element not focusable and ignore all events." }, "getter": false, "setter": false, "reflect": false, "attribute": "_disabled", "defaultValue": "false" }, "_hideMsg": { "type": "boolean", "mutable": false, "complexType": { "original": "boolean", "resolved": "boolean | undefined", "references": {} }, "required": false, "optional": true, "docs": { "tags": [{ "name": "TODO", "text": ": Change type back to `HideMsgPropType` after Stencil#4663 has been resolved." }], "text": "Hides the error message but leaves it in the DOM for the input's aria-describedby." }, "getter": false, "setter": false, "reflect": false, "attribute": "_hide-msg", "defaultValue": "false" }, "_hideLabel": { "type": "boolean", "mutable": false, "complexType": { "original": "boolean", "resolved": "boolean | undefined", "references": {} }, "required": false, "optional": true, "docs": { "tags": [{ "name": "TODO", "text": ": Change type back to `HideLabelPropType` after Stencil#4663 has been resolved." }], "text": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it." }, "getter": false, "setter": false, "reflect": false, "attribute": "_hide-label", "defaultValue": "false" }, "_hint": { "type": "string", "mutable": false, "complexType": { "original": "string", "resolved": "string | undefined", "references": {} }, "required": false, "optional": true, "docs": { "tags": [], "text": "Defines the hint text." }, "getter": false, "setter": false, "reflect": false, "attribute": "_hint", "defaultValue": "''" }, "_icons": { "type": "string", "mutable": false, "complexType": { "original": "IconsHorizontalPropType", "resolved": "string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }", "references": { "IconsHorizontalPropType": { "location": "import", "path": "../../schema", "id": "src/schema/index.ts::IconsHorizontalPropType" } } }, "required": false, "optional": true, "docs": { "tags": [], "text": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`)." }, "getter": false, "setter": false, "reflect": false, "attribute": "_icons" }, "_label": { "type": "string", "mutable": false, "complexType": { "original": "LabelWithExpertSlotPropType", "resolved": "string", "references": { "LabelWithExpertSlotPropType": { "location": "import", "path": "../../schema", "id": "src/schema/index.ts::LabelWithExpertSlotPropType" } } }, "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.). Set to `false` to enable the expert slot." }, "getter": false, "setter": false, "reflect": false, "attribute": "_label" }, "_max": { "type": "string", "mutable": false, "complexType": { "original": "Iso8601 | Date", "resolved": "Date | `${number}-${number}-${number}T${number}:${number}:${number}` | `${number}-${number}-${number}T${number}:${number}` | `${number}-${number}-${number}` | `${number}-${number}` | `${number}-W${number}` | `${number}:${number}:${number}` | `${number}:${number}` | undefined", "references": { "Iso8601": { "location": "import", "path": "../../schema", "id": "src/schema/index.ts::Iso8601" }, "Date": { "location": "global", "id": "global::Date" } } }, "required": false, "optional": true, "docs": { "tags": [], "text": "Defines the maximum value of the element." }, "getter": false, "setter": false, "reflect": false, "attribute": "_max" }, "_min": { "type": "string", "mutable": false, "complexType": { "original": "Iso8601 | Date", "resolved": "Date | `${number}-${number}-${number}T${number}:${number}:${number}` | `${number}-${number}-${number}T${number}:${number}` | `${number}-${number}-${number}` | `${number}-${number}` | `${number}-W${number}` | `${number}:${number}:${number}` | `${number}:${number}` | undefined", "references": { "Iso8601": { "location": "import", "path": "../../schema", "id": "src/schema/index.ts::Iso8601" }, "Date": { "location": "global", "id": "global::Date" } } }, "required": false, "optional": true, "docs": { "tags": [], "text": "Defines the smallest possible input value." }, "getter": false, "setter": false, "reflect": false, "attribute": "_min" }, "_msg": { "type": "string", "mutable": false, "complexType": { "original": "Stringified<MsgPropType>", "resolved": "Omit<AlertProps, \"_on\" | \"_label\" | \"_level\" | \"_variant\" | \"_hasCloser\"> & { _description: string; } | string | undefined", "references": { "Stringified": { "location": "import", "path": "../../schema", "id": "src/schema/index.ts::Stringified" }, "MsgPropType": { "location": "import", "path": "../../schema", "id": "src/schema/index.ts::MsgPropType" } } }, "required": false, "optional": true, "docs": { "tags": [], "text": "Defines the properties for a message rendered as Alert component." }, "getter": false, "setter": false, "reflect": false, "attribute": "_msg" }, "_name": { "type": "string", "mutable": false, "complexType": { "original": "NamePropType", "resolved": "string | undefined", "references": { "NamePropType": { "location": "import", "path": "../../schema", "id": "src/schema/index.ts::NamePropType" } } }, "required": false, "optional": true, "docs": { "tags": [], "text": "Defines the technical name of an input field." }, "getter": false, "setter": false, "reflect": false, "attribute": "_name" }, "_on": { "type": "unknown", "mutable": false, "complexType": { "original": "InputTypeOnDefault", "resolved": "InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown | undefined", "references": { "InputTypeOnDefault": { "location": "import", "path": "../../schema", "id": "src/schema/index.ts::InputTypeOnDefault" } } }, "required": false, "optional": true, "docs": { "tags": [], "text": "Gibt die EventCallback-Funktionen f\u00FCr das Input-Event an." }, "getter": false, "setter": false }, "_readOnly": { "type": "boolean", "mutable": false, "complexType": { "original": "boolean", "resolved": "boolean | undefined", "references": {} }, "required": false, "optional": true, "docs": { "tags": [{ "name": "TODO", "text": ": Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved." }], "text": "Makes the input element read only." }, "getter": false, "setter": false, "reflect": false, "attribute": "_read-only", "defaultValue": "false" }, "_required": { "type": "boolean", "mutable": false, "complexType": { "original": "boolean", "resolved": "boolean | undefined", "references": {} }, "required": false, "optional": true, "docs": { "tags": [{ "name": "TODO", "text": ": Change type back to `RequiredPropType` after Stencil#4663 has been resolved." }], "text": "Makes the input element required." }, "getter": false, "setter": false, "reflect": false, "attribute": "_required", "defaultValue": "false" }, "_shortKey": { "type": "string", "mutable": false, "complexType": { "original": "ShortKeyPropType", "resolved": "string | undefined", "references": { "ShortKeyPropType": { "location": "import", "path": "../../schema", "id": "src/schema/index.ts::ShortKeyPropType" } } }, "required": false, "optional": true, "docs": { "tags": [], "text": "Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud." }, "getter": false, "setter": false, "reflect": false, "attribute": "_short-key" }, "_smartButton": { "type": "string", "mutable": false, "complexType": { "original": "Stringified<InternalButtonProps>", "resolved": "string | undefined | { _label: string; } & { _type?: \"button\" | \"reset\" | \"submit\" | undefined; _accessKey?: string | undefined; _on?: ButtonCallbacksPropType<StencilUnknown> | undefined; _ariaExpanded?: boolean | undefined; _tabIndex?: number | undefined; _value?: StencilUnknown; _role?: \"tab\" | \"treeitem\" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _inline?: boolean | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; _variant?: string | undefined; }", "references": { "Stringified": { "location": "import", "path": "../../schema", "id": "src/schema/index.ts::Stringified" }, "InternalButtonProps": { "location": "import", "path": "../../schema", "id": "src/schema/index.ts::InternalButtonProps" } } }, "required": false, "optional": true, "docs": { "tags": [], "text": "Allows to add a button with an arbitrary action within the element (_hide-label only)." }, "getter": false, "setter": false, "reflect": false, "attribute": "_smart-button" }, "_suggestions": { "type": "string", "mutable": false, "complexType": { "original": "SuggestionsPropType", "resolved": "W3CInputValue[] | string | undefined", "references": { "SuggestionsPropType": { "location": "import", "path": "../../schema", "id": "src/schema/index.ts::SuggestionsPropType" } } }, "required": false, "optional": true, "docs": { "tags": [], "text": "Suggestions to provide for the input." }, "getter": false, "setter": false, "reflect": false, "attribute": "_suggestions" }, "_syncValueBySelector": { "type": "string", "mutable": false, "complexType": { "original": "SyncValueBySelectorPropType", "resolved": "string | undefined", "references": { "SyncValueBySelectorPropType": { "location": "import", "path": "../../schema", "id": "src/schema/index.ts::SyncValueBySelectorPropType" } } }, "required": false, "optional": true, "docs": { "tags": [{ "name": "internal", "text": undefined }], "text": "Selector for synchronizing the value with another input element." }, "getter": false, "setter": false, "reflect": false, "attribute": "_sync-value-by-selector" }, "_step": { "type": "any", "mutable": false, "complexType": { "original": "number | NumberString", "resolved": "`${number}.${number}` | `${number}` | number | undefined", "references": { "NumberString": { "location": "import", "path": "../../schema", "id": "src/schema/index.ts::NumberString" } } }, "required": false, "optional": true, "docs": { "tags": [], "text": "Defines the step size for value changes." }, "getter": false, "setter": false, "reflect": false, "attribute": "_step" }, "_tooltipAlign": { "type": "string", "mutable": false, "complexType": { "original": "TooltipAlignPropType", "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined", "references": { "TooltipAlignPropType": { "location": "import", "path": "../../schema", "id": "src/schema/index.ts::TooltipAlignPropType" } } }, "required": false, "optional": true, "docs": { "tags": [], "text": "Defines where to show the Tooltip preferably: top, right, bottom or left." }, "getter": false, "setter": false, "reflect": false, "attribute": "_tooltip-align", "defaultValue": "'top'" }, "_touched": { "type": "boolean", "mutable": true, "complexType": { "original": "boolean", "resolved": "boolean | undefined", "references": {} }, "required": false, "optional": true, "docs": { "tags": [{ "name": "TODO", "text": ": Change type back to `TouchedPropType` after Stencil#4663 has been resolved." }], "text": "Shows if the input was touched by a user." }, "getter": false, "setter": false, "reflect": true, "attribute": "_touched", "defaultValue": "false" }, "_type": { "type": "string", "mutable": false, "complexType": { "original": "InputDateTypePropType", "resolved": "\"date\" | \"datetime-local\" | \"month\" | \"time\" | \"week\"", "references": { "InputDateTypePropType": { "location": "import", "path": "../../schema", "id": "src/schema/index.ts::InputDateTypePropType" } } }, "required": false, "optional": false, "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": "'date'" }, "_value": { "type": "string", "mutable": true, "complexType": { "original": "Iso8601 | Date | null", "resolved": "Date | `${number}-${number}-${number}T${number}:${number}:${number}` | `${number}-${number}-${number}T${number}:${number}` | `${number}-${number}-${number}` | `${number}-${number}` | `${number}-W${number}` | `${number}:${number}:${number}` | `${number}:${number}` | null | undefined", "references": { "Iso8601": { "location": "import", "path": "../../schema", "id": "src/schema/index.ts::Iso8601" }, "Date": { "location": "global", "id": "global::Date" } } }, "required": false, "optional": true, "docs": { "tags": [], "text": "Defines the value of the element." }, "getter": false, "setter": false, "reflect": true, "attribute": "_value" }, "_variant": { "type": "string", "mutable": false, "complexType": { "original": "VariantClassNamePropType", "resolved": "string | undefined", "references": { "VariantClassNamePropType": { "location": "import", "path": "../../schema", "id": "src/schema/index.ts::VariantClassNamePropType" } } }, "required": false, "optional": true, "docs": { "tags": [], "text": "Defines which variant should be used for presentation." }, "getter": false, "setter": false, "reflect": false, "attribute": "_variant" } }; } static get states() { return { "_initialValueType": {}, "state": {}, "inputHasFocus": {} }; } static get methods() { return { "getValue": { "complexType": { "signature": "() => Promise<string | Date | undefined | null>", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" }, "Date": { "location": "global", "id": "global::Date" } }, "return": "Promise<string | Date | null | undefined>" }, "docs": { "text": "Returns the current value.", "tags": [] } }, "focus": { "complexType": { "signature": "() => Promise<void>", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise<void>" }, "docs": { "text": "Sets focus on the internal element.", "tags": [] } }, "click": { "complexType": { "signature": "() => Promise<void>", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise<void>" }, "docs": { "text": "Clicks the primary interactive element inside this component.", "tags": [] } }, "reset": { "complexType": { "signature": "() => Promise<void>", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise<void>" }, "docs": { "text": "Resets the component's value.", "tags": [] } } }; } static get elementRef() { return "host"; } static get watchers() { return [{ "propName": "_accessKey", "methodName": "validateAccessKey" }, { "propName": "_autoComplete", "methodName": "validateAutoComplete" }, { "propName": "_disabled", "methodName": "validateDisabled" }, { "propName": "_hideMsg", "methodName": "validateHideMsg" }, { "propName": "_hideLabel", "methodName": "validateHideLabel" }, { "propName": "_hint", "methodName": "validateHint" }, { "propName": "_icons", "methodName": "validateIcons" }, { "propName": "_label", "methodName": "validateLabel" }, { "propName": "_max", "methodName": "validateMax" }, { "propName": "_min", "methodName": "validateMin" }, { "propName": "_msg", "methodName": "validateMsg" }, { "propName": "_name", "methodName": "validateName" }, { "propName": "_on", "methodName": "validateOn" }, { "propName": "_readOnly", "methodName": "validateReadOnly" }, { "propName": "_required", "methodName": "validateRequired" }, { "propName": "_shortKey", "methodName": "validateShortKey" }, { "propName": "_smartButton", "methodName": "validateSmartButton" }, { "propName": "_suggestions", "methodName": "validateSuggestions" }, { "propName": "_step", "methodName": "validateStep" }, { "propName": "_syncValueBySelector", "methodName": "validateSyncValueBySelector" }, { "propName": "_touched", "methodName": "validateTouched" }, { "propName": "_type", "methodName": "validateType" }, { "propName": "_value", "methodName": "validateValue" }, { "propName": "_variant", "methodName": "validateVariant" }]; } } __decorate([ delegateFocus('ctaRef') ], KolInputDate.prototype, "focus", null); __decorate([ delegateClick('ctaRef') ], KolInputDate.prototype, "click", null); //# sourceMappingURL=shadow.js.map