/*!
 * KoliBri - The accessible HTML-Standard
 */
import { __rest } from "tslib";
import { h } from "@stencil/core";
import clsx from "../../utils/clsx";
import { KolButtonWcTag } from "../../core/component-names";
import { translate } from "../../i18n";
import { bem } from "../../schema/bem-registry";
import AlertIcon from "../AlertIcon";
import KolHeadingFc from "../Heading";
const alertBem = bem.forBlock('kol-alert');
const BEM_CLASS_ALERT__CLOSER = alertBem('closer');
const BEM_CLASS_ALERT__CONTENT = alertBem('content');
const vibrateOnError = () => {
    if (typeof navigator === 'undefined' || typeof navigator.vibrate !== 'function') {
        return;
    }
    const ua = navigator.userActivation;
    const hasGesture = (ua === null || ua === void 0 ? void 0 : ua.isActive) || (ua === null || ua === void 0 ? void 0 : ua.hasBeenActive);
    if (!hasGesture) {
        return;
    }
    if (!matchMedia('(any-pointer: coarse)').matches) {
        return;
    }
    try {
        navigator.vibrate([100, 75, 100, 75, 100]);
    }
    catch (_a) {
    }
};
const KolAlertFc = (props, children) => {
    const { class: classNames = {}, alert = false, hasCloser = false, label, level = 0, type = 'default', variant = 'msg', onAlertTimeout, onCloserClick } = props, other = __rest(props, ["class", "alert", "hasCloser", "label", "level", "type", "variant", "onAlertTimeout", "onCloserClick"]);
    const translateCloseAlert = translate('kol-close-alert');
    if (alert) {
        vibrateOnError();
        setTimeout(() => {
            onAlertTimeout === null || onAlertTimeout === void 0 ? void 0 : onAlertTimeout();
        }, 10000);
    }
    const BEM_CLASS_ROOT = alertBem({
        hasCloser: !!hasCloser,
        [`type-${type}`]: true,
        [`variant-${variant}`]: true,
    });
    const BEM_CLASS__HEADING = alertBem('heading', {
        [`h${level}`]: true,
    });
    const rootProps = Object.assign({ class: clsx(classNames, BEM_CLASS_ROOT) }, other);
    return (h("div", Object.assign({ role: alert ? 'alert' : undefined }, rootProps, { "data-testid": "alert" }), h("div", { class: "kol-alert__container" }, h(AlertIcon, { label: label, type: type }), h("div", { class: "kol-alert__container-content" }, label && (h(KolHeadingFc, { class: BEM_CLASS__HEADING, level: level, id: "heading" }, label)), variant === 'msg' && (h("span", { class: BEM_CLASS_ALERT__CONTENT, "aria-describedby": label ? 'heading' : undefined }, children))), hasCloser && (h(KolButtonWcTag, { class: BEM_CLASS_ALERT__CLOSER + ' kol-close-button', "data-testid": "alert-close-button", _ariaDescription: (label === null || label === void 0 ? void 0 : label.trim()) || '', _hideLabel: true, _icons: {
            left: {
                icon: 'kolicon-cross',
            },
        }, _label: translateCloseAlert, _on: { onClick: onCloserClick }, _tooltipAlign: "left" }))), variant === 'card' && (h("div", { class: BEM_CLASS_ALERT__CONTENT, "aria-describedby": label ? 'heading' : undefined }, children))));
};
export default KolAlertFc;
//# sourceMappingURL=Alert.js.map
