@public-ui/components/dist/cjs/controller-DiB9pVnb.js

Contains all web components that belong to KoliBri - The accessible HTML-Standard.

/*!
 * KoliBri - The accessible HTML-Standard
 */
'use strict';

var alignFloatingElements = require('./align-floating-elements-BkrTeMF3.js');
var common = require('./common-DPb6NWR4.js');
var tooltipOpenTracking = require('./tooltip-open-tracking-Ba0udJRU.js');
var normalizers = require('./normalizers-BCLslVaT.js');
var align = require('./align-B8NMKvjk.js');
var label = require('./label-DRrPbj-j.js');
require('./variant-quote-DpNzmCtr.js');
var baseController = require('./base-controller-DAzsTqX9.js');

const VISIBLE_OVERLAYS = new Set();
let lastOverlay = null;
function showOverlay(overlay) {
    if (lastOverlay !== overlay) {
        if (lastOverlay) {
            lastOverlay.style.setProperty('z-index', '999');
        }
        VISIBLE_OVERLAYS.delete(overlay);
        VISIBLE_OVERLAYS.add(overlay);
        overlay.style.setProperty('z-index', '1000');
        lastOverlay = overlay;
    }
}
function hideOverlay(overlay) {
    if (!VISIBLE_OVERLAYS.delete(overlay)) {
        return;
    }
    if (lastOverlay === overlay) {
        lastOverlay = null;
        for (const el of VISIBLE_OVERLAYS) {
            lastOverlay = el;
        }
        if (lastOverlay) {
            lastOverlay.style.setProperty('z-index', '1000');
        }
    }
}

const alignProp = normalizers.createPropDefinition('align', 'top', (value) => {
    const str = normalizers.normalizeString(value);
    if (align.alignPropTypeOptions.includes(str)) {
        return str;
    }
    throw new Error(`Invalid align value: ${str}`);
}, (v) => align.alignPropTypeOptions.includes(v));

const badgeTextProp = normalizers.createPropDefinition('badgeText', '', normalizers.normalizeString);

const idProp = normalizers.createPropDefinition('id', '', normalizers.normalizeString);

const tooltipPropsConfig = {
    required: [label.labelProp],
    optional: [alignProp, badgeTextProp, idProp],
};

class TooltipController extends baseController.BaseController {
    constructor(stateAccess) {
        super(stateAccess, tooltipPropsConfig);
        this.hasFocusIn = false;
        this.hasMouseIn = false;
        this.isHiddenForCurrentVisit = false;
        this.setTooltipElementRef = (el) => {
            this.tooltipElement = el;
            if (this.tooltipElement) {
                this.addListeners(this.tooltipElement);
            }
        };
        this.hideTooltipByEscape = (event) => {
            if (event.key === 'Escape') {
                this.hideTooltip();
            }
        };
        this.handleMouseEnter = () => {
            const isNewVisit = this.isNewVisit();
            this.hasMouseIn = true;
            if (isNewVisit) {
                this.isHiddenForCurrentVisit = false;
            }
            this.showOrHideTooltip();
        };
        this.handleMouseLeave = () => {
            this.hasMouseIn = false;
            this.resetHideFlag();
            this.showOrHideTooltip();
        };
        this.handleFocusIn = () => {
            const isNewVisit = this.isNewVisit();
            this.hasFocusIn = true;
            if (isNewVisit) {
                this.isHiddenForCurrentVisit = false;
            }
            this.showOrHideTooltip();
        };
        this.handleFocusOut = () => {
            this.hasFocusIn = false;
            this.resetHideFlag();
            this.showOrHideTooltip();
        };
    }
    componentWillLoad(props) {
        this.watchLabel(props.label);
        this.watchAlign(props.align);
        this.watchBadgeText(props.badgeText);
        this.watchId(props.id);
    }
    watchLabel(value) {
        label.labelProp.apply(value, (v) => {
            this.setRenderProp('label', v);
        });
    }
    watchAlign(value) {
        alignProp.apply(value, (v) => {
            this.setRenderProp('align', v);
        });
    }
    watchBadgeText(value) {
        badgeTextProp.apply(value, (v) => {
            this.setRenderProp('badgeText', v);
        });
    }
    watchId(value) {
        idProp.apply(value, (v) => {
            this.setRenderProp('id', v);
        });
    }
    initContext(previousSibling) {
        this.previousSibling = previousSibling;
    }
    syncListeners(last, next, replacePreviousSibling = false) {
        if (last) {
            this.removeListeners(last);
        }
        if (next) {
            if (replacePreviousSibling) {
                this.previousSibling = next;
            }
            this.addListeners(next);
        }
    }
    handleEventListeners(host) {
        const nextSibling = host.previousElementSibling;
        this.syncListeners(this.previousSibling, nextSibling, true);
    }
    hideTooltip() {
        this.isHiddenForCurrentVisit = true;
        if (this.tooltipElement) {
            hideOverlay(this.tooltipElement);
            tooltipOpenTracking.tooltipClosed();
            this.tooltipElement.classList.remove('show');
            this.tooltipElement.classList.add('hide');
            if (this.cleanupAutoPositioning) {
                this.cleanupAutoPositioning();
                this.cleanupAutoPositioning = undefined;
            }
        }
        common.getDocument().removeEventListener('keyup', this.hideTooltipByEscape);
    }
    destroy() {
        clearTimeout(this.overFocusTimeout);
        if (this.previousSibling) {
            this.removeListeners(this.previousSibling);
            this.previousSibling = undefined;
        }
        if (this.tooltipElement) {
            this.removeListeners(this.tooltipElement);
        }
        if (this.cleanupAutoPositioning) {
            this.cleanupAutoPositioning();
            this.cleanupAutoPositioning = undefined;
        }
        common.getDocument().removeEventListener('keyup', this.hideTooltipByEscape);
    }
    isNewVisit() {
        return !this.hasMouseIn && !this.hasFocusIn;
    }
    resetHideFlag() {
        if (this.isNewVisit()) {
            this.isHiddenForCurrentVisit = false;
        }
    }
    async alignTooltip() {
        if (this.tooltipElement && this.previousSibling) {
            await alignFloatingElements.alignFloatingElements({
                align: this.getRenderProp('align'),
                arrowElement: this.tooltipElement.querySelector('.kol-tooltip__arrow'),
                floatingElement: this.tooltipElement,
                referenceElement: this.previousSibling,
            });
        }
    }
    showTooltip() {
        if (this.isHiddenForCurrentVisit) {
            return;
        }
        if (this.previousSibling && this.tooltipElement) {
            showOverlay(this.tooltipElement);
            tooltipOpenTracking.tooltipOpened();
            this.tooltipElement.classList.remove('hide');
            this.tooltipElement.classList.add('show');
            this.tooltipElement.style.setProperty('display', 'block');
            common.getDocument().addEventListener('keyup', this.hideTooltipByEscape, { once: true });
            const target = this.previousSibling;
            const tooltipEl = this.tooltipElement;
            this.cleanupAutoPositioning = alignFloatingElements.autoUpdate(target, tooltipEl, () => {
                void this.alignTooltip();
            });
        }
    }
    showOrHideTooltip() {
        clearTimeout(this.overFocusTimeout);
        this.overFocusTimeout = setTimeout(() => {
            if (this.hasMouseIn || this.hasFocusIn) {
                this.showTooltip();
            }
            else {
                this.hideTooltip();
            }
        }, 300);
    }
    addListeners(el) {
        el.addEventListener('mouseover', this.handleMouseEnter);
        el.addEventListener('mouseout', this.handleMouseLeave);
        el.addEventListener('focusin', this.handleFocusIn);
        el.addEventListener('focusout', this.handleFocusOut);
    }
    removeListeners(el) {
        el.removeEventListener('mouseover', this.handleMouseEnter);
        el.removeEventListener('mouseout', this.handleMouseLeave);
        el.removeEventListener('focusin', this.handleFocusIn);
        el.removeEventListener('focusout', this.handleFocusOut);
    }
}

exports.TooltipController = TooltipController;
//# sourceMappingURL=controller-DiB9pVnb.js.map

//# sourceMappingURL=controller-DiB9pVnb.js.map