@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
896 lines (895 loc) • 37.2 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { __decorate } from "tslib";
import { h, Host } from "@stencil/core";
import { mapBoolean2String, mapStringOrBoolean2String, setEventTarget, setState, showExpertSlot, validateAccessKey, validateAlternativeButtonLinkRole, validateAriaControls, validateAriaDescription, validateAriaExpanded, validateAriaSelected, validateButtonCallbacks, validateButtonType, validateCustomClass, validateDisabled, validateHideLabel, validateIcons, validateInline, validateLabelWithExpertSlot, validateShortKey, validateTooltipAlign, validateVariantClassName, watchString, } from "../../schema";
import { validateTabIndex } from "../../schema/props/tab-index";
import { BaseWebComponent } from "../../internal/functional-components/base-web-component";
import { SpanFC } from "../../internal/functional-components/span/component";
import { TooltipFC } from "../../internal/functional-components/tooltip/component";
import { TooltipController } from "../../internal/functional-components/tooltip/controller";
import { validateAccessAndShortKey } from "../../schema/validators/access-and-short-key";
import clsx from "../../utils/clsx";
import { createCtaRef, directClick, directFocus } from "../../utils/element-interaction";
import { dispatchDomEvent, KolEvent } from "../../utils/events";
import { propagateResetEventToForm, propagateSubmitEventToForm } from "../form/controller";
import { AssociatedInputController } from "../input-adapter-leanup/associated.controller";
export class KolButtonWc {
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() {
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,
ref: this.ctaRef.el,
});
}
else if (this.state._type === 'reset') {
propagateResetEventToForm({
form: this.host,
ref: this.ctaRef.el,
});
}
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();
}
static get is() { return "kol-button-wc"; }
static get properties() {
return {
"_accessKey": {
"type": "string",
"mutable": false,
"complexType": {
"original": "AccessKeyPropType",
"resolved": "string | undefined",
"references": {
"AccessKeyPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::AccessKeyPropType"
}
}
},
"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"
},
"_ariaControls": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_aria-controls"
},
"_ariaDescription": {
"type": "string",
"mutable": false,
"complexType": {
"original": "AriaDescriptionPropType",
"resolved": "string | undefined",
"references": {
"AriaDescriptionPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::AriaDescriptionPropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines the value for the aria-description attribute."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_aria-description"
},
"_ariaExpanded": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_aria-expanded"
},
"_ariaHasPopup": {
"type": "string",
"mutable": false,
"complexType": {
"original": "AriaHasPopupPropType",
"resolved": "\"dialog\" | \"false\" | \"grid\" | \"listbox\" | \"menu\" | \"tree\" | \"true\" | undefined",
"references": {
"AriaHasPopupPropType": {
"location": "import",
"path": "../../schema/props/aria-has-popup",
"id": "src/schema/props/aria-has-popup.ts::AriaHasPopupPropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "internal",
"text": undefined
}],
"text": "Defines the aria-haspopup attribute. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-haspopup)"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_aria-has-popup"
},
"_ariaSelected": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_aria-selected"
},
"_customClass": {
"type": "string",
"mutable": false,
"complexType": {
"original": "CustomClassPropType",
"resolved": "string | undefined",
"references": {
"CustomClassPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::CustomClassPropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines the custom class attribute if _variant=\"custom\" is set."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_custom-class"
},
"_disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Makes the element not focusable and ignore all events."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_disabled",
"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"
},
"_icons": {
"type": "string",
"mutable": false,
"complexType": {
"original": "IconsPropType",
"resolved": "KoliBriHorizontalIcons & KoliBriVerticalIcons | string | undefined",
"references": {
"IconsPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::IconsPropType"
}
}
},
"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"
},
"_id": {
"type": "string",
"mutable": false,
"complexType": {
"original": "IdPropType",
"resolved": "string | undefined",
"references": {
"IdPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::IdPropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "internal",
"text": undefined
}],
"text": "Defines the internal ID of the primary component element."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_id"
},
"_inline": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "InlinePropType",
"resolved": "boolean | undefined",
"references": {
"InlinePropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::InlinePropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_inline",
"defaultValue": "false"
},
"_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"
},
"_name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"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": "ButtonCallbacksPropType<StencilUnknown>",
"resolved": "undefined | { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> | undefined; onMouseDown?: EventCallback<MouseEvent> | undefined; onFocus?: EventCallback<FocusEvent> | undefined; onBlur?: EventCallback<FocusEvent> | undefined; }",
"references": {
"ButtonCallbacksPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::ButtonCallbacksPropType"
},
"StencilUnknown": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::StencilUnknown"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines the callback functions for button events."
},
"getter": false,
"setter": false
},
"_role": {
"type": "string",
"mutable": false,
"complexType": {
"original": "AlternativeButtonLinkRolePropType",
"resolved": "\"tab\" | \"treeitem\" | undefined",
"references": {
"AlternativeButtonLinkRolePropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::AlternativeButtonLinkRolePropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines the role of the components primary element."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_role"
},
"_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"
},
"_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"
},
"_tabIndex": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_tab-index"
},
"_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'"
},
"_type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "ButtonTypePropType",
"resolved": "\"button\" | \"reset\" | \"submit\" | undefined",
"references": {
"ButtonTypePropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::ButtonTypePropType"
}
}
},
"required": false,
"optional": true,
"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": "'button'"
},
"_value": {
"type": "any",
"mutable": false,
"complexType": {
"original": "StencilUnknown",
"resolved": "boolean | null | number | object | string | undefined",
"references": {
"StencilUnknown": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::StencilUnknown"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines the value of the element."
},
"getter": false,
"setter": false,
"reflect": false,
"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": [{
"name": "internal",
"text": undefined
}],
"text": "Defines which variant should be used for presentation."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_variant"
}
};
}
static get states() {
return {
"state": {}
};
}
static get methods() {
return {
"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": []
}
}
};
}
static get elementRef() { return "host"; }
static get watchers() {
return [{
"propName": "_accessKey",
"methodName": "validateAccessKey"
}, {
"propName": "_ariaControls",
"methodName": "validateAriaControls"
}, {
"propName": "_ariaDescription",
"methodName": "validateAriaDescription"
}, {
"propName": "_ariaExpanded",
"methodName": "validateAriaExpanded"
}, {
"propName": "_ariaSelected",
"methodName": "validateAriaSelected"
}, {
"propName": "_customClass",
"methodName": "validateCustomClass"
}, {
"propName": "_disabled",
"methodName": "validateDisabled"
}, {
"propName": "_hideLabel",
"methodName": "validateHideLabel"
}, {
"propName": "_icons",
"methodName": "validateIcons"
}, {
"propName": "_id",
"methodName": "validateId"
}, {
"propName": "_inline",
"methodName": "validateInline"
}, {
"propName": "_label",
"methodName": "validateLabel"
}, {
"propName": "_name",
"methodName": "validateName"
}, {
"propName": "_on",
"methodName": "validateOn"
}, {
"propName": "_role",
"methodName": "validateRole"
}, {
"propName": "_shortKey",
"methodName": "validateShortKey"
}, {
"propName": "_syncValueBySelector",
"methodName": "validateSyncValueBySelector"
}, {
"propName": "_tabIndex",
"methodName": "validateTabIndex"
}, {
"propName": "_tooltipAlign",
"methodName": "validateTooltipAlign"
}, {
"propName": "_type",
"methodName": "validateType"
}, {
"propName": "_value",
"methodName": "validateValue"
}, {
"propName": "_variant",
"methodName": "validateVariant"
}];
}
}
__decorate([
directFocus('ctaRef')
], KolButtonWc.prototype, "focus", null);
__decorate([
directClick('ctaRef')
], KolButtonWc.prototype, "click", null);
//# sourceMappingURL=component.js.map