@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
59 lines (58 loc) • 3.08 kB
JavaScript
/*!
* 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