@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
617 lines (616 loc) • 25.2 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { __decorate } from "tslib";
import { h } from "@stencil/core";
import { KolButtonWcTag, KolPopoverButtonWcTag } from "../../core/component-names";
import { translate } from "../../i18n";
import clsx from "../../utils/clsx";
import { createCtaRef, delegateClick, delegateFocus } from "../../utils/element-interaction";
export class KolSplitButton {
constructor() {
this.ctaRef = createCtaRef();
this.setPopoverButtonRef = (ref) => {
this.popoverButtonRef = ref;
};
this.clickButtonHandler = {
onClick: (event) => {
var _a, _b;
event.stopPropagation();
if (typeof ((_a = this._on) === null || _a === void 0 ? void 0 : _a.onClick) === 'function') {
(_b = this._on) === null || _b === void 0 ? void 0 : _b.onClick(event, this._value);
}
},
};
this._disabled = false;
this._hideLabel = false;
this._tooltipAlign = 'top';
this._type = 'button';
this._variant = 'normal';
this.state = {
_show: false,
};
}
async getValue() {
return this._value;
}
async focus() { }
async click() { }
render() {
const i18nDropdownLabel = 'kol-split-button-dropdown-label';
return (h("div", { key: '17c486ad6192612f32ba5ffe684e7d4523655b3b', class: "kol-split-button" }, h("div", { key: '87e2a57f2f7949b607c156e2d3e80d1a7dce5228', class: "kol-split-button__root" }, h(KolButtonWcTag, { key: 'fb5606aca388e49380f0851629c5039a2fe66a0f', class: clsx('kol-split-button__button', {
[this._variant]: this._variant !== 'custom',
[this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
}), ref: this.ctaRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), h("div", { key: 'bf7c081ff341b59b67f3cf0a424d48873473ab2f', class: "kol-split-button__horizontal-line" }), h(KolPopoverButtonWcTag, { key: '3df8d8218b22f19b5af46b5c993067ab515659c6', class: "kol-split-button__secondary-button", ref: this.setPopoverButtonRef, _disabled: this._disabled, _hideLabel: true, _icons: "kolicon-chevron-down", _label: translate(`${i18nDropdownLabel}-open`), _popoverAlign: "bottom" }, h("slot", { key: '32e9fb77969d8a751528f3f231b5c6a8e5b97909' })))));
}
connectedCallback() {
this.state = Object.assign(Object.assign({}, this.state), { _show: false });
}
async closePopup() {
var _a;
void ((_a = this.popoverButtonRef) === null || _a === void 0 ? void 0 : _a.hidePopover());
return Promise.resolve();
}
static get is() { return "kol-split-button"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"default": ["./style.scss"]
};
}
static get styleUrls() {
return {
"default": ["style.css"]
};
}
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"
},
"_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"
},
"_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.)."
},
"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": [{
"name": "deprecated",
"text": "We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future."
}],
"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"
},
"_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": "ButtonVariantPropType",
"resolved": "\"custom\" | \"danger\" | \"ghost\" | \"normal\" | \"primary\" | \"secondary\" | \"tertiary\" | undefined",
"references": {
"ButtonVariantPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::ButtonVariantPropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines which variant should be used for presentation."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_variant",
"defaultValue": "'normal'"
}
};
}
static get states() {
return {
"state": {}
};
}
static get methods() {
return {
"getValue": {
"complexType": {
"signature": "() => Promise<StencilUnknown>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
},
"StencilUnknown": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::StencilUnknown"
}
},
"return": "Promise<StencilUnknown>"
},
"docs": {
"text": "Returns the current value.",
"tags": []
}
},
"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": []
}
},
"closePopup": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Closes the dropdown.",
"tags": []
}
}
};
}
static get elementRef() { return "host"; }
}
__decorate([
delegateFocus('ctaRef')
], KolSplitButton.prototype, "focus", null);
__decorate([
delegateClick('ctaRef')
], KolSplitButton.prototype, "click", null);
//# sourceMappingURL=shadow.js.map