@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
209 lines (203 loc) • 8.31 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { h, r as registerInstance, F as Fragment } from './index-BQlHOxik.js';
import { a as __rest, _ as __decorate } from './tslib.es6-QNbPBOk5.js';
import { b as KolButtonWcTag } from './component-names-Dy77vq43.js';
import { c as clsx } from './clsx-COFh-Vc8.js';
import { a as alignFloatingElements, b as autoUpdate } from './align-floating-elements-D5XJiLiU.js';
import './common-Cx_AGO_M.js';
import { v as validateInline } from './inline-DnwpECF8.js';
import { b as validateAlignment } from './align-DxZmRFcp.js';
import { c as createUniqueId } from './dev.utils-02Sl9bQo.js';
import { b as directFocus, e as directClick, c as createCtaRef } from './element-interaction-Bv-mPSBn.js';
import './element-focus-CRwW4N4R.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 = class {
constructor(hostRef) {
registerInstance(this, hostRef);
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"]
}; }
};
__decorate([
directFocus('ctaRef')
], KolPopoverButtonWc.prototype, "focus", null);
__decorate([
directClick('ctaRef')
], KolPopoverButtonWc.prototype, "click", null);
export { KolPopoverButtonWc as kol_popover_button_wc };
//# sourceMappingURL=kol-popover-button-wc.entry.js.map