@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
37 lines (36 loc) • 4.09 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { h } from "@stencil/core";
import { translate } from "../../../i18n";
const FULL_CIRCLE = 342;
const CycleSvg = ({ max, value }) => (h("svg", { width: "100", viewBox: "0 0 120 120", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { class: "kol-progress__cycle-background", cx: "60", cy: "60", r: "54.5", fill: "currentColor", stroke: "currentColor", "stroke-width": "8" }), h("circle", { class: "kol-progress__cycle-whitespace", cx: "60", cy: "60", r: "59", fill: "currentColor", stroke: "currentColor", "stroke-width": "3" }), h("circle", { class: "kol-progress__cycle-border", cx: "60", cy: "60", r: "59", fill: "currentColor", stroke: "currentColor", "stroke-width": "1" }), h("circle", { class: "kol-progress__cycle-whitespace", cx: "60", cy: "60", r: "51", fill: "currentColor", stroke: "currentColor", "stroke-width": "1" }), h("circle", { class: "kol-progress__cycle-border", cx: "60", cy: "60", r: "50", fill: "currentColor", stroke: "currentColor", "stroke-width": "1" }), h("circle", { class: "kol-progress__cycle-progress", fill: "currentColor", stroke: "currentColor", "stroke-linecap": "round", "stroke-dasharray": `${Math.round((value / max) * FULL_CIRCLE)}px ${FULL_CIRCLE}px`, "stroke-width": "6", cx: "60", cy: "60", r: "54.5" })));
const BarSvg = ({ max, value }) => {
const percentage = 100 * (value / max);
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "12", overflow: "visible" }, h("rect", { class: "kol-progress__bar-background", x: "1", y: "1", height: "11", rx: "5", fill: "currentColor", stroke: "currentColor", "stroke-width": "3", width: "100%" }), h("rect", { class: "kol-progress__bar-border", x: "1", y: "1", height: "11", rx: "5", fill: "currentColor", stroke: "currentColor", "stroke-width": "1", width: "100%" }), h("rect", { class: "kol-progress__bar-progress", x: "3", y: "3", height: "7", rx: "3.5", fill: "currentColor", stroke: "currentColor", "stroke-width": "3", style: { width: `calc(${percentage}% - 4px)` } })));
};
const createProgressSVG = (variant, max, value) => {
switch (variant) {
case 'cycle':
return h(CycleSvg, { max: max, value: value });
case 'bar':
return h(BarSvg, { max: max, value: value });
default:
throw new Error(`Progress variant ${variant} not implemented.`);
}
};
export const ProgressFC = (props) => {
const { label, max, unit, value, variant, liveValue } = props;
const isPercentage = unit === '%';
const liveProgressValue = isPercentage ? `${Math.round((liveValue / max) * 100)}` : liveValue;
const displayValue = isPercentage ? Math.round((value / max) * 100) : value;
const valueColumnWidth = `${`${(isPercentage ? 100 : max) + 1}`.length}ch`;
const liveValueText = isPercentage
? translate('kol-live-value', { placeholders: { value: String(liveProgressValue), unit } })
: translate('kol-live-value-bounded', { placeholders: { value: String(liveProgressValue), max: String(max), unit } });
return (h("div", { class: "kol-progress" }, h("div", { "aria-hidden": "true", class: {
'kol-progress__cycle': variant === 'cycle',
'kol-progress__bar': variant === 'bar',
} }, variant === 'bar' && label && h("div", { class: "kol-progress__bar-label" }, label), createProgressSVG(variant, max, value), variant === 'cycle' && (h("div", { class: "kol-progress__cycle-text" }, label && h("div", { class: "kol-progress__cycle-label" }, label), h("div", { class: "kol-progress__cycle-value" }, `${displayValue} ${unit}`))), variant === 'bar' && (h("div", { class: "kol-progress__bar-value", style: { width: valueColumnWidth } }, displayValue)), variant === 'bar' && h("div", { class: "kol-progress__bar-unit" }, unit)), h("progress", { class: "visually-hidden", "aria-busy": value < max ? 'true' : 'false', max: max, value: value }), h("span", { "aria-live": "polite", "aria-relevant": "removals text", class: "visually-hidden" }, liveValueText)));
};
//# sourceMappingURL=component.js.map