@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
257 lines (250 loc) • 9.86 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { h, proxyCustomElement, HTMLElement, Fragment } from '@stencil/core/internal/client';
import { a as __rest, _ as __decorate } from './tslib.es6.js';
import { b as KolButtonWcTag } from './component-names.js';
import { c as clsx } from './clsx.js';
import { a as alignFloatingElements, b as autoUpdate } from './align-floating-elements.js';
import './common.js';
import './prop.validators.js';
import { v as validateInline } from './inline.js';
import { b as validateAlignment } from './align.js';
import { c as createUniqueId } from './dev.utils.js';
import { c as createCtaRef, b as directFocus, e as directClick } from './element-interaction.js';
const validatePopoverAlign = (component, value) => {
validateAlignment(component, '_popoverAlign', value);
};
const PopoverFC = (props) => {
const { align = 'bottom', popoverRef, arrowRef, class: classNames } = props, rest = __rest(props, ["align", "popoverRef", "arrowRef", "class"]);
return (h("div", Object.assign({}, rest, { class: clsx('kol-popover', classNames), ref: popoverRef, popover: "auto" }), h("div", { class: clsx('kol-popover__arrow', `kol-popover__arrow--${align}`), ref: arrowRef }), h("slot", null)));
};
class PopoverController {
constructor() {
this.show = false;
this.align = 'bottom';
this.setPopoverElementRef = (element) => {
this.popoverElement = element;
this.arrowElement = element === null || element === void 0 ? void 0 : element.querySelector('.kol-popover__arrow');
};
this.setTriggerElement = (element) => {
this.triggerElement = element;
};
this.setAlign = (align) => {
this.align = align;
};
this.alignPopover = async () => {
if (!this.popoverElement || !this.triggerElement) {
return;
}
await alignFloatingElements({
align: this.align,
referenceElement: this.triggerElement,
arrowElement: this.arrowElement,
floatingElement: this.popoverElement,
});
};
this.setupAutoUpdate = () => {
if (!this.popoverElement || !this.triggerElement || this.cleanupAutoUpdate) {
return;
}
this.cleanupAutoUpdate = autoUpdate(this.triggerElement, this.popoverElement, () => {
void this.alignPopover();
});
};
}
setShow(value) {
this.show = value;
if (!this.popoverElement) {
return;
}
const toggleVisibility = () => {
var _a;
if (!this.popoverElement) {
return;
}
const isOpen = this.popoverElement.matches(':popover-open');
if (this.show) {
if (!isOpen) {
try {
this.popoverElement.showPopover();
this.setupAutoUpdate();
void this.alignPopover();
}
catch (_b) {
}
}
}
else {
if (isOpen) {
try {
this.popoverElement.hidePopover();
(_a = this.cleanupAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
this.cleanupAutoUpdate = undefined;
}
catch (_c) {
}
}
}
};
if (this.popoverElement.isConnected) {
toggleVisibility();
}
else {
requestAnimationFrame(() => {
toggleVisibility();
});
}
}
destroy() {
var _a;
(_a = this.cleanupAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
this.cleanupAutoUpdate = undefined;
this.popoverElement = undefined;
this.arrowElement = undefined;
this.triggerElement = undefined;
}
}
const KolPopoverButtonWc$1 = proxyCustomElement(class KolPopoverButtonWc extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
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 watchers() { return {
"_inline": ["validateInline"],
"_popoverAlign": ["validatePopoverAlign"]
}; }
}, [260, "kol-popover-button-wc", {
"_accessKey": [1, "_access-key"],
"_ariaDescription": [1, "_aria-description"],
"_customClass": [1, "_custom-class"],
"_disabled": [4],
"_hideLabel": [4, "_hide-label"],
"_icons": [1],
"_id": [1],
"_inline": [4],
"_label": [1],
"_name": [1],
"_popoverAlign": [1, "_popover-align"],
"_shortKey": [1, "_short-key"],
"_syncValueBySelector": [1, "_sync-value-by-selector"],
"_tabIndex": [2, "_tab-index"],
"_tooltipAlign": [1, "_tooltip-align"],
"_type": [1],
"_value": [8],
"_variant": [1],
"state": [32],
"popoverOpen": [32],
"hidePopover": [64],
"showPopover": [64],
"focus": [64],
"click": [64]
}, undefined, {
"_inline": ["validateInline"],
"_popoverAlign": ["validatePopoverAlign"]
}]);
__decorate([
directFocus('ctaRef')
], KolPopoverButtonWc$1.prototype, "focus", null);
__decorate([
directClick('ctaRef')
], KolPopoverButtonWc$1.prototype, "click", null);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kol-popover-button-wc"];
components.forEach(tagName => { switch (tagName) {
case "kol-popover-button-wc":
if (!customElements.get(tagName)) {
customElements.define(tagName, KolPopoverButtonWc$1);
}
break;
} });
}
const KolPopoverButtonWc = KolPopoverButtonWc$1;
const defineCustomElement = defineCustomElement$1;
export { KolPopoverButtonWc, defineCustomElement };
//# sourceMappingURL=kol-popover-button-wc.js.map
//# sourceMappingURL=kol-popover-button-wc.js.map