@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
82 lines (81 loc) • 3.51 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { __rest } from "tslib";
import { Fragment, h } from "@stencil/core";
import { isString } from "lodash-es";
import { showExpertSlot } from "../../../schema";
import { bem } from "../../../schema/bem-registry";
import clsx from "../../../utils/clsx";
import { md } from "../../../utils/markdown";
import { IconFC } from "../icon/component";
const spanBem = bem.forBlock('kol-span');
function isCustomIcon(icon) {
return typeof icon === 'object' && icon !== null && 'icon' in icon;
}
function normalizeIcon(icon) {
if (icon !== null && icon !== undefined && isCustomIcon(icon)) {
return icon;
}
if (isString(icon)) {
return { icon };
}
return null;
}
function isAllIcons(icons) {
return typeof icons === 'object' && icons !== null && !Array.isArray(icons);
}
function renderUnderlinedBadgeText(label, badgeText) {
let badgeStr = badgeText;
let [first, ...rest] = label.split(badgeStr);
if (rest.length === 0) {
badgeStr = badgeText.toUpperCase();
[first, ...rest] = label.split(badgeStr);
}
if (rest.length === 0) {
badgeStr = badgeText.toLowerCase();
[first, ...rest] = label.split(badgeStr);
}
return (h(Fragment, null, first, rest.length ? (h(Fragment, null, h("u", null, badgeStr), rest.join(badgeStr))) : null));
}
function renderLabel(label, hideLabel, allowMarkdown, badgeText) {
if (hideLabel || !isString(label)) {
return null;
}
if (allowMarkdown) {
return h("span", { class: clsx(spanBem('label'), 'md'), innerHTML: md(label) });
}
if (badgeText) {
return h("span", { class: spanBem('label') }, renderUnderlinedBadgeText(label, badgeText));
}
return h("span", { class: spanBem('label') }, label);
}
export const SpanFC = (props, children) => {
const { allowMarkdown, badgeText, class: classNames, hideLabel = false, icons, label } = props, htmlAttributes = __rest(props, ["allowMarkdown", "badgeText", "class", "hideLabel", "icons", "label"]);
let top = null;
let left = null;
let right = null;
let bottom = null;
if (isAllIcons(icons)) {
top = normalizeIcon(icons.top);
left = normalizeIcon(icons.left);
right = normalizeIcon(icons.right);
bottom = normalizeIcon(icons.bottom);
}
else if (isString(icons)) {
left = { icon: icons };
}
const renderIcon = (iconProps, position) => {
var _a;
if (!iconProps) {
return null;
}
return h(IconFC, { class: spanBem('icon', { [position]: true }), icons: iconProps.icon, label: (_a = iconProps.label) !== null && _a !== void 0 ? _a : '', style: iconProps.style });
};
const hideExpertSlot = !showExpertSlot(label);
return (h("span", Object.assign({}, htmlAttributes, { class: clsx(spanBem({
'has-badge': !!badgeText,
'hide-label': !!hideLabel,
}), classNames) }), renderIcon(top, 'top'), h("span", { class: spanBem('container') }, renderIcon(left, 'left'), hideExpertSlot && renderLabel(label, hideLabel, allowMarkdown, badgeText), h("span", { "aria-hidden": hideExpertSlot ? 'true' : undefined, class: spanBem('slot'), hidden: hideExpertSlot }, children), isString(badgeText) && badgeText.length > 0 && (h("kbd", { "aria-hidden": "true", class: "badge-text-hint" }, badgeText)), renderIcon(right, 'right')), renderIcon(bottom, 'bottom')));
};
//# sourceMappingURL=component.js.map