@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
423 lines (414 loc) • 18.2 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
'use strict';
var index = require('./index-BrhW8s5h.js');
var tslib_es6 = require('./tslib.es6-Cm0ytgPY.js');
var clsx = require('./clsx-Bm_HQUnh.js');
var FormFieldStateWrapper = require('./FormFieldStateWrapper-BZsSDU0S.js');
var controllerIcon = require('./controller-icon-j62graYQ.js');
var common = require('./common-DPb6NWR4.js');
var dev_utils = require('./dev.utils-BeTuwcHU.js');
var elementInteraction = require('./element-interaction-CXkAVgKs.js');
var controller$1 = require('./controller-BMDxsRHs.js');
var multiple = require('./multiple-BEGQDyov.js');
var controller = require('./controller-TgxV2kV0.js');
var required = require('./required-DriHzqmx.js');
var rows = require('./rows-DS0wBUTI.js');
require('./access-and-short-key-CspEpGOV.js');
require('./disabled-GY6LfYNH.js');
require('./hide-label-BnMTmbm4.js');
require('./label-8vcJJEVI.js');
require('./tooltip-align-BeYhiCq6.js');
require('./align-B8NMKvjk.js');
require('./variant-class-name-BCWuCRd0.js');
require('./events-Jc2wxPjR.js');
require('./associated.controller-DLy6rpeW.js');
require('./bootstrap-ByVQ9oF5.js');
require('./component-names-5KS_pYRF.js');
require('./i18n-CgUN6lev.js');
require('./_Uint8Array-BAQUGozM.js');
require('./isArray-BOIOdEQh.js');
require('./variant-quote-DpNzmCtr.js');
require('./normalizers-BCLslVaT.js');
require('./component-kXVnT0Wy.js');
require('./component-BUJSMbIY.js');
require('./bem-registry-DevvgGUu.js');
require('./component-CuHGwo27.js');
require('./controller-DiB9pVnb.js');
require('./align-floating-elements-BkrTeMF3.js');
require('./tooltip-open-tracking-Ba0udJRU.js');
require('./label-DRrPbj-j.js');
require('./base-controller-DAzsTqX9.js');
require('./i18n-Cjy0vgJA.js');
require('./Alert-C5eDyNdi.js');
require('./Heading-Zb8_ekSw.js');
require('./icons-C4O3H4TU.js');
require('./element-focus-DeVevBcF.js');
require('./orientation-CZeybVrr.js');
const NativeOptionFc = (_a) => {
var { baseClassName = 'kol-select', class: classNames, index: index$1, selectedValue, selected, value, label, disabled } = _a, other = tslib_es6.__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 (index.h("option", Object.assign({ class: clsx.clsx(`${baseClassName}__option`, {
[`${baseClassName}__option--selected`]: isSelected,
[`${baseClassName}__option--disabled`]: disabled,
}, classNames), selected: isSelected, disabled: disabled, value: index$1 }, 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 (index.h(index.Fragment, null, options.map((option, index$1) => {
const key = [preKey, `-${index$1}`].join('');
if ('options' in option) {
if (!options.length) {
return null;
}
const { label } = option, other = tslib_es6.__rest(option, ["label"]);
return (index.h("optgroup", Object.assign({ class: clsx.clsx(`${baseClassName}__optgroup`, { [`${baseClassName}__optgroup--disabled`]: disabled }), key: key }, OptionGroupProps, { label: label === null || label === void 0 ? void 0 : label.toString(), disabled: disabled }), index.h(NativeOptionListFc, Object.assign({ baseClassName: baseClassName, OptionGroupProps: OptionGroupProps, OptionProps: OptionProps, value: selectedValue, preKey: key }, other))));
}
if ('value' in option) {
return index.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 = tslib_es6.__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--${FormFieldStateWrapper.getMsgType(msg)}`]: FormFieldStateWrapper.isMsgDefinedAndInputTouched(msg, touched),
};
const inputProps = Object.assign(Object.assign({ class: clsx.clsx('kol-select', stateCssClasses, classNames), required: required, disabled: disabled }, FormFieldStateWrapper.getDefaultProps({ ariaDescribedBy, hideLabel, label })), other);
return (index.h("select", Object.assign({}, inputProps), index.h(NativeOptionListFc, { baseClassName: "kol-select", options: options, value: value, OptionGroupProps: OptionGroupProps, OptionProps: OptionProps })));
};
function getSelectProps(state) {
const { ariaDescribedBy } = FormFieldStateWrapper.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 = tslib_es6.__rest(_a, ["state"]);
return index.h(NativeSelectFc, Object.assign({}, getSelectProps(state), other));
};
class SelectController extends controllerIcon.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();
controller.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) {
controller.validateOptionsWithOptgroup(this.component, value, {
hooks: {
afterPatch: this.afterPatchOptions,
beforePatch: this.beforePatchOptions,
},
});
}
validateMultiple(value) {
this.assertComponentValueMatchesMultiplicity(value === true);
multiple.validateMultiple(this.component, value, {
hooks: {
afterPatch: this.afterPatchOptions,
beforePatch: this.beforePatchOptions,
},
});
}
validateRequired(value) {
required.validateRequired(this.component, value);
}
validateRows(value) {
rows.validateRows(this.component, value);
}
validateValue(value) {
this.assertValueMatchesMultiplicity(value);
common.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.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 (index.h(FormFieldStateWrapper.FormFieldStateWrapper, Object.assign({ key: '607b429939938960542769969e7089416567451b' }, this.getFormFieldProps()), index.h(controllerIcon.InputContainerStateWrapperFc, { key: '6c008bd220a118d84b1861ce0434b1163102334c', state: this.state }, index.h("form", { key: 'e5944ee645aafd0f7cbd40a0044b909af8908ec4', onSubmit: (event) => {
event.preventDefault();
controller$1.propagateSubmitEventToForm({
form: this.host});
} }, index.h("input", { key: '3137875efec2e47a44a414307e4a2d96a8225459', type: "submit", hidden: true }), index.h(SelectStateWrapper, Object.assign({ key: '132a41cde87cf09a6e0f6f0260ef6c3088a3170a' }, this.getSelectProps()))))));
}
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.ctaRef = elementInteraction.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: dev_utils.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 index.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"]
}; }
};
tslib_es6.__decorate([
elementInteraction.directFocus('ctaRef')
], KolSelectWc.prototype, "focus", null);
tslib_es6.__decorate([
elementInteraction.directClick('ctaRef')
], KolSelectWc.prototype, "click", null);
exports.kol_select_wc = KolSelectWc;
//# sourceMappingURL=kol-select-wc.entry.cjs.js.map