@public-ui/components/dist/cjs/Alert-C5eDyNdi.js

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

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

var tslib_es6 = require('./tslib.es6-Cm0ytgPY.js');
var index = require('./index-BrhW8s5h.js');
var clsx = require('./clsx-Bm_HQUnh.js');
var componentNames = require('./component-names-5KS_pYRF.js');
var i18n = require('./i18n-Cjy0vgJA.js');
var bemRegistry = require('./bem-registry-DevvgGUu.js');
var component = require('./component-CuHGwo27.js');
var Heading = require('./Heading-Zb8_ekSw.js');

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

const alertBem = bemRegistry.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 = tslib_es6.__rest(props, ["class", "alert", "hasCloser", "label", "level", "type", "variant", "onAlertTimeout", "onCloserClick"]);
    const translateCloseAlert = i18n.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.clsx(classNames, BEM_CLASS_ROOT) }, other);
    return (index.h("div", Object.assign({ role: alert ? 'alert' : undefined }, rootProps, { "data-testid": "alert" }), index.h("div", { class: "kol-alert__container" }, index.h(AlertIcon, { label: label, type: type }), index.h("div", { class: "kol-alert__container-content" }, label && (index.h(Heading.KolHeadingFc, { class: BEM_CLASS__HEADING, level: level, id: "heading" }, label)), variant === 'msg' && (index.h("span", { class: BEM_CLASS_ALERT__CONTENT, "aria-describedby": label ? 'heading' : undefined }, children))), hasCloser && (index.h(componentNames.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' && (index.h("div", { class: BEM_CLASS_ALERT__CONTENT, "aria-describedby": label ? 'heading' : undefined }, children))));
};

exports.KolAlertFc = KolAlertFc;
//# sourceMappingURL=Alert-C5eDyNdi.js.map

//# sourceMappingURL=Alert-C5eDyNdi.js.map