/*!
 * KoliBri - The accessible HTML-Standard
 */
import { a as __rest } from './tslib.es6.js';
import { h, Fragment } from '@stencil/core/internal/client';
import { c as clsx } from './clsx.js';
import { b as KolButtonWcTag } from './component-names.js';
import { t as translate } from './i18n.js';
import { b as bem } from './bem-registry.js';
import { I as IconFC } from './component3.js';
import { K as KolHeadingFc } from './Heading.js';

const alertBem$1 = bem.forBlock('kol-alert');
const BEM_CLASS_ALERT__ICON = alertBem$1('icon');
const ALERT_ICON_CONFIG = {
    error: {
        label: translate('kol-error'),
        icon: 'kolicon-alert-error',
    },
    info: {
        label: translate('kol-info'),
        icon: 'kolicon-alert-info',
    },
    warning: {
        label: translate('kol-warning'),
        icon: 'kolicon-alert-warning',
    },
    success: {
        label: translate('kol-success'),
        icon: 'kolicon-alert-success',
    },
    default: {
        label: translate('kol-message'),
        icon: 'kolicon-alert-info',
    },
};
const AlertIcon = ({ type = 'default' }) => {
    const config = ALERT_ICON_CONFIG[type || 'default'];
    return (h(Fragment, null, h("span", { class: "visually-hidden" }, config.label), h(IconFC, { class: BEM_CLASS_ALERT__ICON, label: "", icons: config.icon })));
};

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 { KolAlertFc as K };
//# sourceMappingURL=Alert.js.map

//# sourceMappingURL=Alert.js.map