@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
91 lines (87 loc) • 4.14 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { a as __rest } from './tslib.es6-QNbPBOk5.js';
import { h, F as Fragment } from './index-BQlHOxik.js';
import { c as clsx } from './clsx-COFh-Vc8.js';
import { b as KolButtonWcTag } from './component-names-Dy77vq43.js';
import { t as translate } from './i18n-Br16IAnY.js';
import { b as bem } from './bem-registry-CWvl2xho.js';
import { I as IconFC } from './component-DzaT2WlJ.js';
import { K as KolHeadingFc } from './Heading-q2Ue3Ixd.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-BP_7bRZF.js.map
//# sourceMappingURL=Alert-BP_7bRZF.js.map