@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
282 lines (276 loc) • 13.4 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { h, H as Host, r as registerInstance, g as getElement } from './index-BQlHOxik.js';
import { _ as __decorate } from './tslib.es6-QNbPBOk5.js';
import { e as watchBoolean, b as watchValidator, R as mapStringOrBoolean2String, S as mapBoolean2String, M as setEventTarget, g as watchString, s as setState } from './common-Cx_AGO_M.js';
import { S as SpanFC, s as showExpertSlot } from './component-DvjvBJeK.js';
import { v as validateAccessKey, a as validateAccessAndShortKey, b as validateShortKey, c as validateTabIndex } from './access-and-short-key-D734WtlX.js';
import { v as validateAriaControls, a as validateAriaDescription, b as validateAriaExpanded, c as validateAlternativeButtonLinkRole } from './aria-expanded-hGdEA1jy.js';
import { v as validateCustomClass } from './custom-class-DlT-QmWF.js';
import { v as validateDisabled } from './disabled-gyBUQRnY.js';
import { v as validateHideLabel } from './hide-label-6Bx1MH20.js';
import { v as validateIcons } from './icons-oAzMYWgV.js';
import { v as validateInline } from './inline-DnwpECF8.js';
import { a as validateLabelWithExpertSlot } from './label-Fyi30H9j.js';
import { v as validateTooltipAlign } from './tooltip-align-mwhvx9nK.js';
import { v as validateVariantClassName } from './variant-class-name-BCcQYpIV.js';
import { B as BaseWebComponent } from './variant-quote-y0Z1TRdz.js';
import { T as TooltipFC } from './component-Dh0cPCxF.js';
import { T as TooltipController } from './controller-Bdve6A-Q.js';
import { c as clsx } from './clsx-COFh-Vc8.js';
import { b as directFocus, e as directClick, c as createCtaRef } from './element-interaction-Bv-mPSBn.js';
import { d as dispatchDomEvent, K as KolEvent } from './events-VVvk1win.js';
import { p as propagateSubmitEventToForm, a as propagateResetEventToForm } from './controller-DRE7PRMK.js';
import { A as AssociatedInputController } from './associated.controller-Bagx9pCw.js';
import './bem-registry-CWvl2xho.js';
import './component-DzaT2WlJ.js';
import './isArray-CcrBs4JM.js';
import './align-DxZmRFcp.js';
import './normalizers-m3s9sgmq.js';
import './_Uint8Array-kJHDjtoP.js';
import './align-floating-elements-D5XJiLiU.js';
import './tooltip-open-tracking-D3tCiiGP.js';
import './label-KTv-zMW0.js';
import './base-controller-CXhqh4cR.js';
import './element-focus-CRwW4N4R.js';
import './component-names-Dy77vq43.js';
import './bootstrap-DPKvOz00.js';
import './i18n-B2d_exHc.js';
const validateAriaSelected = (component, value) => {
watchBoolean(component, '_ariaSelected', value);
};
const validateButtonCallbacks = (component, value) => {
watchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['ButtonCallbacksPropType {Events.onClick, Events.onMouseDown, Events.onFocus, Events.onBlur}']), value);
};
const buttonTypePropTypeOptions = ['button', 'reset', 'submit'];
const validateButtonType = (component, value) => {
watchValidator(component, `_type`, (value) => typeof value === 'string' && buttonTypePropTypeOptions.includes(value), new Set([`KoliBriButtonType {${buttonTypePropTypeOptions.join(', ')}`]), value);
};
const KolButtonWc = class {
async focus() { }
async click() { }
render() {
var _a;
const hasExpertSlot = showExpertSlot(this.state._label);
const ariaDescription = (_a = this.state._ariaDescription) === null || _a === void 0 ? void 0 : _a.trim();
const badgeText = this.state._accessKey || this.state._shortKey;
const isDisabled = this.state._disabled === true;
const hideLabel = this.state._hideLabel === true;
return (h(Host, { key: '16666b7bbc5590d87a4278b11b42eed9305905d7' }, h("button", { key: 'cbe00d5dd3039399bca51581b4610a7628829f62', ref: this.ctaRef, accessKey: this.state._accessKey, "aria-controls": this.state._ariaControls, "aria-description": ariaDescription || undefined, "aria-expanded": mapBoolean2String(this.state._ariaExpanded), "aria-haspopup": this._ariaHasPopup, "aria-keyshortcuts": this.state._shortKey, "aria-label": hideLabel && typeof this.state._label === 'string' && this.state._label.length > 0 ? this.state._label : undefined, "aria-selected": mapStringOrBoolean2String(this.state._ariaSelected), class: clsx('kol-button', {
'kol-button--disabled': isDisabled,
[`kol-button--${this.state._variant}`]: this.state._variant !== 'custom',
'kol-button--inline': this.state._inline === true,
'kol-button--standalone': this.state._inline === false,
'kol-button--hide-label': hideLabel,
[this.state._customClass]: typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
}), disabled: isDisabled, id: this.state._id, name: this.state._name, onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }, h(SpanFC, { key: '0bcd901be3e67d7d49d3edd0e2de43a46a09eb43', class: "kol-button__text", badgeText: badgeText, icons: this.state._icons, hideLabel: hideLabel, label: hasExpertSlot ? '' : this.state._label }, h("slot", { key: 'c60cec4abe221171e48dcc5cd5b4be2ad32ac03a', name: "expert", slot: "expert" }))), hideLabel && typeof this.state._label === 'string' && this.state._label.length > 0 && (h("div", { key: 'f8c1b2830178a37482cd1ae7b25e4186954c3195', class: "kol-button__tooltip" }, h(TooltipFC, { key: '3e6110b1ddf4188efd8546cd20635c9732940a5e', badgeText: badgeText || '', label: this.state._label, id: this.tooltipCtrl.getRenderProp('id'), refFloating: this.tooltipCtrl.setTooltipElementRef })))));
}
constructor(hostRef) {
registerInstance(this, hostRef);
this.ctaRef = createCtaRef();
this.tooltipCtrl = new TooltipController(BaseWebComponent.stateLess);
this.onClick = (event) => {
var _a, _b;
event.stopPropagation();
this.tooltipCtrl.hideTooltip();
if (this.state._type === 'submit') {
propagateSubmitEventToForm({
form: this.host});
}
else if (this.state._type === 'reset') {
propagateResetEventToForm({
form: this.host});
}
else {
this.controller.setFormAssociatedValue(this.state._value);
if (typeof ((_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onClick) === 'function') {
setEventTarget(event, this.ctaRef.el);
(_b = this.state._on) === null || _b === void 0 ? void 0 : _b.onClick(event, this.state._value);
}
}
if (this.host) {
dispatchDomEvent(this.host, KolEvent.click, this.state._value);
}
};
this.onMouseDown = (event) => {
var _a, _b, _c;
(_c = (_b = (_a = this.state) === null || _a === void 0 ? void 0 : _a._on) === null || _b === void 0 ? void 0 : _b.onMouseDown) === null || _c === void 0 ? void 0 : _c.call(_b, event);
if (this.host) {
dispatchDomEvent(this.host, KolEvent.mousedown);
}
};
this.onFocus = (event) => {
var _a, _b, _c;
(_c = (_b = (_a = this.state) === null || _a === void 0 ? void 0 : _a._on) === null || _b === void 0 ? void 0 : _b.onFocus) === null || _c === void 0 ? void 0 : _c.call(_b, event);
if (this.host) {
dispatchDomEvent(this.host, KolEvent.focus);
}
};
this.onBlur = (event) => {
var _a, _b, _c;
(_c = (_b = (_a = this.state) === null || _a === void 0 ? void 0 : _a._on) === null || _b === void 0 ? void 0 : _b.onBlur) === null || _c === void 0 ? void 0 : _c.call(_b, event);
if (this.host) {
dispatchDomEvent(this.host, KolEvent.blur);
}
};
this._disabled = false;
this._hideLabel = false;
this._inline = false;
this._tooltipAlign = 'top';
this._type = 'button';
this.state = {
_icons: {},
_label: '',
_on: {},
_type: 'button',
_variant: 'normal',
};
this.controller = new AssociatedInputController(this, 'button', this.host);
}
validateAccessKey(value) {
validateAccessKey(this, value);
validateAccessAndShortKey(value, this._shortKey);
}
validateAriaControls(value) {
validateAriaControls(this, value);
}
validateAriaDescription(value) {
validateAriaDescription(this, value);
}
validateAriaExpanded(value) {
validateAriaExpanded(this, value);
}
validateAriaSelected(value) {
validateAriaSelected(this, value);
}
validateCustomClass(value) {
validateCustomClass(this, value);
}
validateDisabled(value) {
validateDisabled(this, value);
}
validateHideLabel(value) {
validateHideLabel(this, value);
}
validateIcons(value) {
validateIcons(this, value);
}
validateId(value) {
watchString(this, '_id', value);
}
validateInline(value) {
validateInline(this, value, {
defaultValue: false,
});
}
validateLabel(value) {
validateLabelWithExpertSlot(this, value, {
required: true,
});
this.tooltipCtrl.watchLabel(typeof value === 'string' ? value : undefined);
}
validateName(value) {
this.controller.validateName(value);
}
validateOn(value) {
validateButtonCallbacks(this, value);
}
validateRole(value) {
validateAlternativeButtonLinkRole(this, value);
}
validateShortKey(value) {
validateShortKey(this, value);
validateAccessAndShortKey(this._accessKey, value);
}
validateSyncValueBySelector(value) {
this.controller.validateSyncValueBySelector(value);
}
validateTabIndex(value) {
validateTabIndex(this, value);
}
validateTooltipAlign(value) {
validateTooltipAlign(this, value);
this.tooltipCtrl.watchAlign(value);
}
validateType(value) {
validateButtonType(this, value);
}
validateValue(value) {
setState(this, '_value', value);
this.controller.setFormAssociatedValue(this.state._value);
}
validateVariant(value) {
validateVariantClassName(this, value);
}
componentWillLoad() {
this.validateAccessKey(this._accessKey);
this.validateAriaControls(this._ariaControls);
this.validateAriaDescription(this._ariaDescription);
this.validateAriaExpanded(this._ariaExpanded);
this.validateAriaSelected(this._ariaSelected);
this.validateCustomClass(this._customClass);
this.validateDisabled(this._disabled);
this.validateHideLabel(this._hideLabel);
this.validateIcons(this._icons);
this.validateId(this._id);
this.validateInline(this._inline);
this.validateLabel(this._label);
this.validateName(this._name);
this.validateOn(this._on);
this.validateRole(this._role);
this.validateShortKey(this._shortKey);
this.validateSyncValueBySelector(this._syncValueBySelector);
this.validateTabIndex(this._tabIndex);
this.validateTooltipAlign(this._tooltipAlign);
this.validateType(this._type);
this.validateValue(this._value);
this.validateVariant(this._variant);
validateAccessAndShortKey(this._accessKey, this._shortKey);
this.tooltipCtrl.componentWillLoad({
label: typeof this.state._label === 'string' ? this.state._label : '',
align: this._tooltipAlign,
});
}
componentDidRender() {
if (this.ctaRef.el) {
this.tooltipCtrl.syncListeners(undefined, this.ctaRef.el, true);
}
}
disconnectedCallback() {
this.tooltipCtrl.destroy();
}
get host() { return getElement(this); }
static get watchers() { return {
"_accessKey": ["validateAccessKey"],
"_ariaControls": ["validateAriaControls"],
"_ariaDescription": ["validateAriaDescription"],
"_ariaExpanded": ["validateAriaExpanded"],
"_ariaSelected": ["validateAriaSelected"],
"_customClass": ["validateCustomClass"],
"_disabled": ["validateDisabled"],
"_hideLabel": ["validateHideLabel"],
"_icons": ["validateIcons"],
"_id": ["validateId"],
"_inline": ["validateInline"],
"_label": ["validateLabel"],
"_name": ["validateName"],
"_on": ["validateOn"],
"_role": ["validateRole"],
"_shortKey": ["validateShortKey"],
"_syncValueBySelector": ["validateSyncValueBySelector"],
"_tabIndex": ["validateTabIndex"],
"_tooltipAlign": ["validateTooltipAlign"],
"_type": ["validateType"],
"_value": ["validateValue"],
"_variant": ["validateVariant"]
}; }
};
__decorate([
directFocus('ctaRef')
], KolButtonWc.prototype, "focus", null);
__decorate([
directClick('ctaRef')
], KolButtonWc.prototype, "click", null);
export { KolButtonWc as kol_button_wc };
//# sourceMappingURL=kol-button-wc.entry.js.map