@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
637 lines (636 loc) • 25.1 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { __decorate } from "tslib";
import { Fragment, h } from "@stencil/core";
import { KolButtonWcTag } from "../../core/component-names";
import { PopoverFC } from "../../internal/functional-components/popover/component";
import { PopoverController } from "../../internal/functional-components/popover/controller";
import { validateInline, validatePopoverAlign } from "../../schema";
import clsx from "../../utils/clsx";
import { createUniqueId } from "../../utils/dev.utils";
import { createCtaRef, directClick, directFocus } from "../../utils/element-interaction";
export class KolPopoverButtonWc {
constructor() {
this.ctaRef = createCtaRef();
this.popoverCtrl = new PopoverController();
this.popoverId = createUniqueId('popover');
this.setPopoverElementRef = (element) => {
this.popoverElement = element;
this.popoverCtrl.setPopoverElementRef(element);
};
this.setButtonElementRef = (element) => {
this.ctaRef(element);
if (element) {
this.popoverCtrl.setTriggerElement(element);
}
};
this.on = {
onClick: () => {
this.popoverCtrl.setShow(!this.popoverOpen);
},
};
this.state = {
_label: '',
_popoverAlign: 'bottom',
_inline: false,
};
this.popoverOpen = false;
this.handleToggle = (event) => {
this.popoverOpen = event.newState === 'open';
};
this._disabled = false;
this._hideLabel = false;
this._inline = false;
this._popoverAlign = 'bottom';
this._tooltipAlign = 'top';
this._type = 'button';
this._variant = 'normal';
}
async hidePopover() {
this.popoverCtrl.setShow(false);
}
async showPopover() {
this.popoverCtrl.setShow(true);
}
async focus() { }
async click() { }
render() {
return (h(Fragment, null, h(KolButtonWcTag, { key: 'f3b3f92128fb4d6c275ea87dacc9626d496f91c1', class: clsx('kol-popover-button', {
'kol-popover-button--open': this.popoverOpen,
'kol-popover-button--inline': this.state._inline === true,
'kol-popover-button--standalone': this.state._inline === false,
}), _accessKey: this._accessKey, _ariaControls: this.popoverId, _ariaDescription: this._ariaDescription, _ariaExpanded: this.popoverOpen, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _inline: this._inline, _label: this._label, _name: this._name, _on: this.on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant, ref: this.setButtonElementRef }, h("slot", { key: '299356030a1b0dfcd250ae79abfa32ac27669a3d', name: "expert", slot: "expert" })), h(PopoverFC, { key: '34827eb9859dbea0378d1d4f9cbc259a28d152e2', align: this.state._popoverAlign || 'bottom', popoverRef: this.setPopoverElementRef, class: "kol-popover-button__popover", id: this.popoverId }, h("slot", { key: '98c648d7ce7aa3c9bdf8b7e43703e3b7df4bf8d3' }))));
}
validateInline(value) {
validateInline(this, value, {
defaultValue: false,
});
}
validatePopoverAlign(value) {
validatePopoverAlign(this, value);
if (value) {
this.popoverCtrl.setAlign(value);
}
}
componentWillLoad() {
this.validateInline(this._inline);
this.validatePopoverAlign(this._popoverAlign);
}
componentDidRender() {
if (this.popoverElement) {
this.popoverElement.addEventListener('toggle', this.handleToggle);
}
if (this.state._popoverAlign) {
this.popoverCtrl.setAlign(this.state._popoverAlign);
}
}
disconnectedCallback() {
if (this.popoverElement) {
this.popoverElement.removeEventListener('toggle', this.handleToggle);
}
this.popoverCtrl.destroy();
this.popoverElement = undefined;
}
static get is() { return "kol-popover-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"
},
"_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"
},
"_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"
},
"_popoverAlign": {
"type": "string",
"mutable": false,
"complexType": {
"original": "PopoverAlignPropType",
"resolved": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined",
"references": {
"PopoverAlignPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::PopoverAlignPropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines where to show the Popover preferably: top, right, bottom or left."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_popover-align",
"defaultValue": "'bottom'"
},
"_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": "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": {},
"popoverOpen": {}
};
}
static get methods() {
return {
"hidePopover": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Hides the popover programmatically by calling the PopoverController.",
"tags": []
}
},
"showPopover": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Show the popover programmatically by calling the PopoverController.",
"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": []
}
}
};
}
static get watchers() {
return [{
"propName": "_inline",
"methodName": "validateInline"
}, {
"propName": "_popoverAlign",
"methodName": "validatePopoverAlign"
}];
}
}
__decorate([
directFocus('ctaRef')
], KolPopoverButtonWc.prototype, "focus", null);
__decorate([
directClick('ctaRef')
], KolPopoverButtonWc.prototype, "click", null);
//# sourceMappingURL=component.js.map