@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
55 lines (54 loc) • 3.18 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { h } from "@stencil/core";
import { translate } from "../../../i18n";
function getMeterState(value, min, max, low, high, optimum) {
const effectiveLow = low !== null && low !== void 0 ? low : min;
const effectiveHigh = high !== null && high !== void 0 ? high : max;
if (optimum === undefined) {
const inMidRegion = value >= effectiveLow && value <= effectiveHigh;
return inMidRegion ? 'optimum' : 'suboptimal';
}
const inLowRegion = value < effectiveLow;
const inHighRegion = value > effectiveHigh;
const inMidRegion = !inLowRegion && !inHighRegion;
const optimumInLow = optimum < effectiveLow;
const optimumInHigh = optimum > effectiveHigh;
if (optimumInLow) {
if (inLowRegion)
return 'optimum';
if (inMidRegion)
return 'suboptimal';
return 'critical';
}
else if (optimumInHigh) {
if (inHighRegion)
return 'optimum';
if (inMidRegion)
return 'suboptimal';
return 'critical';
}
else {
if (inMidRegion)
return 'optimum';
return 'suboptimal';
}
}
export const MeterFC = (props) => {
const { high, label, low, liveValue, max, min, optimum, orientation, unit, value } = props;
const isVertical = orientation === 'vertical';
const isPercentage = unit === '%';
const displayValue = isPercentage ? Math.round(((value - min) / (max - min)) * 100) : value;
const liveMeterValue = isPercentage ? `${Math.round(((liveValue - min) / (max - min)) * 100)}` : liveValue;
const state = getMeterState(value, min, max, low, high, optimum);
const hasStateClassification = low !== undefined || high !== undefined;
const stateLabel = hasStateClassification ? translate(`kol-meter-state-${state}`) : '';
const liveValueText = isPercentage
? translate('kol-live-value', { placeholders: { value: String(liveMeterValue), unit } })
: translate('kol-live-value-bounded', { placeholders: { value: String(liveMeterValue), max: String(max), unit } });
const liveValueWithState = hasStateClassification ? `${liveValueText} – ${stateLabel}` : liveValueText;
const charCount = max.toString().length > min.toString().length ? max.toString().length + 'ch' : min.toString().length + 'ch';
return (h("div", { class: { 'kol-meter': true, 'kol-meter--vertical': isVertical } }, h("div", { class: "kol-meter__bar" }, h("div", { class: "kol-meter__bar-label" }, label, hasStateClassification && (h("span", { class: `kol-meter__bar-state kol-meter__bar-state--${state}` }, ' – ', stateLabel))), h("div", { class: "kol-meter__bar-track" }, h("meter", { "aria-label": label, high: high, low: low, max: max, min: min, optimum: optimum, value: value })), h("span", { class: "kol-meter__value-unit" }, h("span", { class: "kol-meter__value", style: { 'min-width': charCount } }, displayValue), h("span", { class: "kol-meter__unit" }, unit))), h("span", { "aria-live": "polite", "aria-relevant": "additions text", class: "visually-hidden" }, liveValueWithState)));
};
//# sourceMappingURL=component.js.map