@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
187 lines (186 loc) • 7.14 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { a11yHint, objectObjectHandler, parseJson, setState, validateAccessKey, validateAdjustHeight, validateDisabled, validateHideLabel, validateHideMsg, validateHint, validateLabelWithExpertSlot, validateMsg, validateShortKey, validateTooltipAlign, validateVariantClassName, } from "../../../schema";
import { validateTabIndex } from "../../../schema/props/tab-index";
import { dispatchDomEvent, KolEvent } from "../../../utils/events";
import { ControlledInputController } from "../../input-adapter-leanup/controller";
import { debounce } from "lodash-es";
import { validateAccessAndShortKey } from "../../../schema/validators/access-and-short-key";
export class InputController extends ControlledInputController {
constructor(component, name, host) {
super(component, name, host);
this.valueChangeListeners = [];
this.onFacade = {
onBlur: this.onBlur.bind(this),
onChange: this.onChange.bind(this),
onClick: this.onClick.bind(this),
onFocus: this.onFocus.bind(this),
onInput: this.onInput.bind(this),
onKeyDown: this.onKeyDown.bind(this),
};
this.updateCurrentLengthDebounced = debounce((length) => {
setState(this.component, '_currentLengthDebounced', length);
}, 500);
this.component = component;
}
validateAccessKey(value) {
validateAccessKey(this.component, value);
validateAccessAndShortKey(value, this.component._shortKey);
}
validateAdjustHeight(value) {
validateAdjustHeight(this.component, value);
}
validateDisabled(value) {
validateDisabled(this.component, value);
}
validateTooltipAlign(value) {
validateTooltipAlign(this.component, value);
}
validateHideMsg(value) {
validateHideMsg(this.component, value, {
hooks: {
afterPatch: () => {
if (this.component.state._hideMsg) {
a11yHint('Property _hideMsg for inputs: Only use when the error message is shown outside of the input component.');
}
},
},
});
}
validateHideLabel(value) {
validateHideLabel(this.component, value, {
hooks: {
afterPatch: () => {
if (this.component.state._hideLabel) {
a11yHint('Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.');
}
},
},
});
}
validateHint(value) {
validateHint(this.component, value);
}
validateLabel(value) {
validateLabelWithExpertSlot(this.component, value, {
required: true,
});
}
validateMsg(value) {
validateMsg(this.component, value);
}
validateOn(value) {
if (typeof value === 'object') {
setState(this.component, '_on', value);
}
}
validateShortKey(value) {
validateShortKey(this.component, value);
validateAccessAndShortKey(this.component._accessKey, value);
}
validateSmartButton(value) {
objectObjectHandler(value, () => {
try {
value = parseJson(value);
}
catch (_a) {
}
setState(this.component, '_smartButton', value);
});
}
validateTabIndex(value) {
validateTabIndex(this.component, value);
}
validateVariant(value) {
validateVariantClassName(this.component, value);
}
componentWillLoad() {
super.componentWillLoad();
this.validateAccessKey(this.component._accessKey);
this.validateAdjustHeight(this.component._adjustHeight);
this.validateMsg(this.component._msg);
this.validateDisabled(this.component._disabled);
this.validateHideMsg(this.component._hideMsg);
this.validateHideLabel(this.component._hideLabel);
this.validateHint(this.component._hint);
this.validateLabel(this.component._label);
this.validateShortKey(this.component._shortKey);
this.validateSmartButton(this.component._smartButton);
this.validateOn(this.component._on);
this.validateTabIndex(this.component._tabIndex);
this.validateVariant(this.component._variant);
validateAccessAndShortKey(this.component._accessKey, this.component._shortKey);
}
emitEvent(type, value) {
if (this.host) {
dispatchDomEvent(this.host, type, value);
}
}
onBlur(event) {
var _a;
if (this.component._disabled) {
return;
}
this.component._touched = true;
this.emitEvent(KolEvent.blur);
if (typeof ((_a = this.component._on) === null || _a === void 0 ? void 0 : _a.onBlur) === 'function') {
this.component._on.onBlur(event);
}
}
onChange(event, value) {
var _a;
if (typeof value === 'undefined') {
value = event.target.value;
}
this.emitEvent(KolEvent.change, value);
if (typeof ((_a = this.component._on) === null || _a === void 0 ? void 0 : _a.onChange) === 'function') {
this.component._on.onChange(event, value);
}
this.valueChangeListeners.forEach((listener) => listener(value));
}
onInput(event, shouldSetFormAssociatedValue = true, value) {
var _a;
if (typeof value === 'undefined') {
value = event.target.value;
}
this.emitEvent(KolEvent.input, value);
if (shouldSetFormAssociatedValue) {
this.setFormAssociatedValue(value);
}
if (typeof ((_a = this.component._on) === null || _a === void 0 ? void 0 : _a.onInput) === 'function') {
this.component._on.onInput(event, value);
}
}
onClick(event) {
var _a;
this.emitEvent(KolEvent.click);
if (typeof ((_a = this.component._on) === null || _a === void 0 ? void 0 : _a.onClick) === 'function') {
this.component._on.onClick(event);
}
}
onFocus(event) {
var _a;
this.emitEvent(KolEvent.focus);
if (typeof ((_a = this.component._on) === null || _a === void 0 ? void 0 : _a.onFocus) === 'function') {
this.component._on.onFocus(event);
}
}
onKeyDown(event) {
var _a;
this.emitEvent(KolEvent.keydown);
if (typeof ((_a = this.component._on) === null || _a === void 0 ? void 0 : _a.onKeyDown) === 'function') {
this.component._on.onKeyDown(event);
}
}
addValueChangeListener(listener) {
this.valueChangeListeners.push(listener);
}
hasSoftCharacterLimit() {
return typeof this.component.state._maxLength === 'number' && this.component.state._maxLengthBehavior === 'soft';
}
hasCounter() {
return this.component.state._hasCounter === true;
}
}
//# sourceMappingURL=controller.js.map