@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
421 lines (413 loc) • 18.1 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { h, F as Fragment, r as registerInstance, g as getElement } from './index-BQlHOxik.js';
import { a as __rest, _ as __decorate } from './tslib.es6-QNbPBOk5.js';
import { c as clsx } from './clsx-COFh-Vc8.js';
import { g as getMsgType, i as isMsgDefinedAndInputTouched, c as getDefaultProps, a as getRenderStates, F as FormFieldStateWrapper } from './FormFieldStateWrapper-BWTMRKXT.js';
import { I as InputIconController, a as InputContainerStateWrapperFc } from './controller-icon-DekcIBGR.js';
import { H as watchJsonArrayString } from './common-Cx_AGO_M.js';
import { c as createUniqueId } from './dev.utils-02Sl9bQo.js';
import { b as directFocus, e as directClick, c as createCtaRef } from './element-interaction-Bv-mPSBn.js';
import { p as propagateSubmitEventToForm } from './controller-DRE7PRMK.js';
import { v as validateMultiple } from './multiple-DqCQ-txe.js';
import { f as fillKeyOptionMap, v as validateOptionsWithOptgroup } from './controller-DKPaX3Tu.js';
import { v as validateRequired } from './required-DFzRSWky.js';
import { v as validateRows } from './rows-htbnIG9G.js';
import './access-and-short-key-D734WtlX.js';
import './disabled-gyBUQRnY.js';
import './hide-label-6Bx1MH20.js';
import './label-Fyi30H9j.js';
import './tooltip-align-mwhvx9nK.js';
import './align-DxZmRFcp.js';
import './variant-class-name-BCcQYpIV.js';
import './events-VVvk1win.js';
import './associated.controller-Bagx9pCw.js';
import './bootstrap-DPKvOz00.js';
import './component-names-Dy77vq43.js';
import './i18n-B2d_exHc.js';
import './_Uint8Array-kJHDjtoP.js';
import './isArray-CcrBs4JM.js';
import './variant-quote-y0Z1TRdz.js';
import './normalizers-m3s9sgmq.js';
import './component-Dh0cPCxF.js';
import './component-DvjvBJeK.js';
import './bem-registry-CWvl2xho.js';
import './component-DzaT2WlJ.js';
import './controller-Bdve6A-Q.js';
import './align-floating-elements-D5XJiLiU.js';
import './tooltip-open-tracking-D3tCiiGP.js';
import './label-KTv-zMW0.js';
import './base-controller-CXhqh4cR.js';
import './i18n-Br16IAnY.js';
import './Alert-BP_7bRZF.js';
import './Heading-q2Ue3Ixd.js';
import './icons-oAzMYWgV.js';
import './element-focus-CRwW4N4R.js';
import './orientation-CjNmUJp-.js';
const NativeOptionFc = (_a) => {
var { baseClassName = 'kol-select', class: classNames, index, selectedValue, selected, value, label, disabled } = _a, other = __rest(_a, ["baseClassName", "class", "index", "selectedValue", "selected", "value", "label", "disabled"]);
if (selectedValue === undefined) {
selectedValue = [];
}
else if (!Array.isArray(selectedValue)) {
selectedValue = [selectedValue];
}
const isSelected = selected || selectedValue.includes(value);
return (h("option", Object.assign({ class: clsx(`${baseClassName}__option`, {
[`${baseClassName}__option--selected`]: isSelected,
[`${baseClassName}__option--disabled`]: disabled,
}, classNames), selected: isSelected, disabled: disabled, value: index }, other), label));
};
const NativeOptionListFc = ({ baseClassName, preKey, options, disabled, value: selectedValue, OptionProps = {}, OptionGroupProps = {}, }) => {
if (!(options === null || options === void 0 ? void 0 : options.length)) {
return null;
}
return (h(Fragment, null, options.map((option, index) => {
const key = [preKey, `-${index}`].join('');
if ('options' in option) {
if (!options.length) {
return null;
}
const { label } = option, other = __rest(option, ["label"]);
return (h("optgroup", Object.assign({ class: clsx(`${baseClassName}__optgroup`, { [`${baseClassName}__optgroup--disabled`]: disabled }), key: key }, OptionGroupProps, { label: label === null || label === void 0 ? void 0 : label.toString(), disabled: disabled }), h(NativeOptionListFc, Object.assign({ baseClassName: baseClassName, OptionGroupProps: OptionGroupProps, OptionProps: OptionProps, value: selectedValue, preKey: key }, other))));
}
if ('value' in option) {
return h(NativeOptionFc, Object.assign({ key: key, baseClassName: baseClassName }, OptionProps, { index: key, selectedValue: selectedValue }, option));
}
return null;
})));
};
const NativeSelectFc = (props) => {
const { class: classNames, msg, touched, disabled, required, options, value, OptionProps, OptionGroupProps, ariaDescribedBy, hideLabel, label } = props, other = __rest(props, ["class", "msg", "touched", "disabled", "required", "options", "value", "OptionProps", "OptionGroupProps", "ariaDescribedBy", "hideLabel", "label"]);
const stateCssClasses = {
['kol-select--disabled']: Boolean(disabled),
['kol-select--required']: Boolean(required),
['kol-select--touched']: Boolean(touched),
[`kol-select--${getMsgType(msg)}`]: isMsgDefinedAndInputTouched(msg, touched),
};
const inputProps = Object.assign(Object.assign({ class: clsx('kol-select', stateCssClasses, classNames), required: required, disabled: disabled }, getDefaultProps({ ariaDescribedBy, hideLabel, label })), other);
return (h("select", Object.assign({}, inputProps), h(NativeOptionListFc, { baseClassName: "kol-select", options: options, value: value, OptionGroupProps: OptionGroupProps, OptionProps: OptionProps })));
};
function getSelectProps(state) {
const { ariaDescribedBy } = getRenderStates(state);
const props = {
id: state._id,
hideLabel: state._hideLabel,
label: state._label,
value: state._value,
options: state._options,
accessKey: state._accessKey,
disabled: state._disabled,
name: state._name,
ariaDescribedBy: ariaDescribedBy,
size: state._rows,
multiple: state._multiple,
required: state._required,
touched: state._touched,
msg: state._msg,
};
if ('_shortKey' in state)
props['aria-keyshortcuts'] = state._shortKey;
return props;
}
const SelectStateWrapper = (_a) => {
var { state } = _a, other = __rest(_a, ["state"]);
return h(NativeSelectFc, Object.assign({}, getSelectProps(state), other));
};
class SelectController extends InputIconController {
constructor(component, name, host) {
super(component, name, host);
this.keyOptionMap = new Map();
this.getOptionByKey = (key) => this.keyOptionMap.get(key);
this.isValueInOptions = (value, options) => {
return (options.find((option) => typeof option.value === 'string'
? option.value === value
: Array.isArray(option.options)
? this.isValueInOptions(value, option.options)
: false) !== undefined);
};
this.filterValuesInOptions = (values, options) => {
return values.filter((value) => this.isValueInOptions(value, options) !== undefined);
};
this.afterPatchOptions = (value, _state, _component, key) => {
if (key === '_value') {
this.setFormAssociatedValue(value);
}
};
this.beforePatchOptions = (_value, nextState) => {
const raw = nextState.get('_value');
if (raw !== undefined && !Array.isArray(raw)) {
nextState.set('_value', [raw]);
}
const options = nextState.has('_options') ? nextState.get('_options') : this.component.state._options;
if (Array.isArray(options) && options.length > 0) {
this.keyOptionMap.clear();
fillKeyOptionMap(this.keyOptionMap, options);
const value = nextState.has('_value') ? nextState.get('_value') : this.component.state._value;
const selected = this.filterValuesInOptions(Array.isArray(value) && value.length > 0 ? value : [], options);
if (this.component._multiple === false && selected.length === 0) {
nextState.set('_value', [
options[0].value,
]);
}
else if (Array.isArray(value) && selected.length < value.length) {
nextState.set('_value', selected);
}
}
};
this.component = component;
}
validateOptions(value) {
validateOptionsWithOptgroup(this.component, value, {
hooks: {
afterPatch: this.afterPatchOptions,
beforePatch: this.beforePatchOptions,
},
});
}
validateMultiple(value) {
this.assertComponentValueMatchesMultiplicity(value === true);
validateMultiple(this.component, value, {
hooks: {
afterPatch: this.afterPatchOptions,
beforePatch: this.beforePatchOptions,
},
});
}
validateRequired(value) {
validateRequired(this.component, value);
}
validateRows(value) {
validateRows(this.component, value);
}
validateValue(value) {
this.assertValueMatchesMultiplicity(value);
watchJsonArrayString(this.component, '_value', () => true, value === undefined ? [] : Array.isArray(value) ? value : [value], undefined, {
hooks: {
afterPatch: this.afterPatchOptions,
beforePatch: this.beforePatchOptions,
},
});
}
componentWillLoad() {
super.componentWillLoad();
this.validateOptions(this.component._options);
this.validateMultiple(this.component._multiple);
this.validateRequired(this.component._required);
this.validateRows(this.component._rows);
this.validateValue(this.component._value);
}
assertValueMatchesMultiplicity(value) {
const isArray = Array.isArray(value);
const isMultiple = this.component._multiple === true;
if (isMultiple) {
if (value !== undefined && !isArray) {
throw new Error(`↑ The schema for the property (_value) is not valid for multiple mode. Expected an array. The value will not be changed. (received = ${JSON.stringify(value)})`);
}
}
else {
if (isArray) {
throw new Error(`↑ The schema for the property (_value) is not valid for single mode. Expected a single value. The value will not be changed. (received = ${JSON.stringify(value)})`);
}
}
}
assertComponentValueMatchesMultiplicity(isMultiple) {
const rawValue = this.component._value;
if (isMultiple) {
if (rawValue !== undefined && !Array.isArray(rawValue)) {
throw new Error(`↑ The schema for the property (_value) is not valid for multiple mode. Expected an array. The value will not be changed. (current = ${JSON.stringify(rawValue)})`);
}
}
else {
if (Array.isArray(rawValue)) {
throw new Error(`↑ The schema for the property (_value) is not valid for single mode. Expected a single value. The value will not be changed. (current = ${JSON.stringify(rawValue)})`);
}
}
}
}
const KolSelectWc = class {
async getValue() {
if (this._multiple) {
return this.state._value;
}
else {
return Array.isArray(this.state._value) && this.state._value.length > 0 ? this.state._value[0] : this.state._value;
}
}
async focus() { }
async click() { }
getFormFieldProps() {
return {
state: this.state,
class: clsx('kol-form-field-select', {
'kol-form-field--has-value': this.state._hasValue,
}),
tooltipAlign: this._tooltipAlign,
onClick: () => { var _a; return (_a = this.ctaRef.el) === null || _a === void 0 ? void 0 : _a.focus(); },
alert: this.showAsAlert(),
};
}
getSelectProps() {
return Object.assign(Object.assign({ ref: this.ctaRef, state: this.state }, this.controller.onFacade), { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this), onFocus: (event) => {
this.controller.onFacade.onFocus(event);
this.inputHasFocus = true;
}, onBlur: (event) => {
this.controller.onFacade.onBlur(event);
this.inputHasFocus = false;
} });
}
render() {
return (h(FormFieldStateWrapper, Object.assign({ key: '607b429939938960542769969e7089416567451b' }, this.getFormFieldProps()), h(InputContainerStateWrapperFc, { key: '6c008bd220a118d84b1861ce0434b1163102334c', state: this.state }, h("form", { key: 'e5944ee645aafd0f7cbd40a0044b909af8908ec4', onSubmit: (event) => {
event.preventDefault();
propagateSubmitEventToForm({
form: this.host});
} }, h("input", { key: '3137875efec2e47a44a414307e4a2d96a8225459', type: "submit", hidden: true }), h(SelectStateWrapper, Object.assign({ key: '132a41cde87cf09a6e0f6f0260ef6c3088a3170a' }, this.getSelectProps()))))));
}
constructor(hostRef) {
registerInstance(this, hostRef);
this.ctaRef = createCtaRef();
this._disabled = false;
this._hideMsg = false;
this._hideLabel = false;
this._hint = '';
this._multiple = false;
this._required = false;
this._tooltipAlign = 'top';
this._touched = false;
this.state = {
_hasValue: false,
_hideMsg: false,
_id: createUniqueId('select'),
_label: '',
_multiple: false,
_options: [],
_value: [],
};
this.inputHasFocus = false;
this.controller = new SelectController(this, 'select', this.host);
}
showAsAlert() {
return Boolean(this.state._touched) && !this.inputHasFocus;
}
validateAccessKey(value) {
this.controller.validateAccessKey(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);
}
validateMsg(value) {
this.controller.validateMsg(value);
}
validateMultiple(value) {
this.controller.validateMultiple(value);
}
validateName(value) {
this.controller.validateName(value);
}
validateOn(value) {
this.controller.validateOn(value);
}
validateOptions(value) {
this.controller.validateOptions(value);
}
validateRequired(value) {
this.controller.validateRequired(value);
}
validateRows(value) {
this.controller.validateRows(value);
}
validateShortKey(value) {
this.controller.validateShortKey(value);
}
validateSyncValueBySelector(value) {
this.controller.validateSyncValueBySelector(value);
}
validateTabIndex(value) {
this.controller.validateTabIndex(value);
}
validateTouched(value) {
this.controller.validateTouched(value);
}
validateValue(value) {
this.controller.validateValue(value);
}
validateVariant(value) {
this.controller.validateVariant(value);
}
componentWillLoad() {
this._touched = this._touched === true;
this.controller.componentWillLoad();
this.state._hasValue = !!this.state._value;
this.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));
}
onInput(event) {
var _a;
const selectedValues = Array.from(((_a = this.ctaRef.el) === null || _a === void 0 ? void 0 : _a.options) || [])
.filter((option) => option.selected)
.map((option) => { var _a; return (_a = this.controller.getOptionByKey(option.value)) === null || _a === void 0 ? void 0 : _a.value; });
if (this._multiple) {
this._value = selectedValues;
this.controller.onFacade.onInput(event, true, selectedValues);
}
else {
const singleValue = selectedValues.length > 0 ? selectedValues[0] : undefined;
this._value = singleValue;
this.controller.onFacade.onInput(event, true, singleValue);
}
}
onChange(event) {
if (this._multiple) {
this.controller.onFacade.onChange(event, this._value);
}
else {
this.controller.onFacade.onChange(event, this._value);
}
}
get host() { return getElement(this); }
static get watchers() { return {
"_accessKey": ["validateAccessKey"],
"_disabled": ["validateDisabled"],
"_hideMsg": ["validateHideMsg"],
"_hideLabel": ["validateHideLabel"],
"_hint": ["validateHint"],
"_icons": ["validateIcons"],
"_label": ["validateLabel"],
"_msg": ["validateMsg"],
"_multiple": ["validateMultiple"],
"_name": ["validateName"],
"_on": ["validateOn"],
"_options": ["validateOptions"],
"_required": ["validateRequired"],
"_rows": ["validateRows"],
"_shortKey": ["validateShortKey"],
"_syncValueBySelector": ["validateSyncValueBySelector"],
"_tabIndex": ["validateTabIndex"],
"_touched": ["validateTouched"],
"_value": ["validateValue"],
"_variant": ["validateVariant"]
}; }
};
__decorate([
directFocus('ctaRef')
], KolSelectWc.prototype, "focus", null);
__decorate([
directClick('ctaRef')
], KolSelectWc.prototype, "click", null);
export { KolSelectWc as kol_select_wc };
//# sourceMappingURL=kol-select-wc.entry.js.map