@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
44 lines (43 loc) • 2.52 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { Fragment, h } from "@stencil/core";
import { translate } from "../../i18n";
import clsx from "../../utils/clsx";
import { createRelatedUniqueId } from "../../utils/dev.utils";
const KolFormFieldCounterFc = ({ currentLength, currentLengthDebounced, maxLength, maxLengthBehavior, id }) => {
let visualText;
let ariaText;
const counterClasses = ['kol-form-field__counter'];
if (maxLengthBehavior === 'hard') {
visualText =
typeof maxLength === 'number'
? translate('kol-character-counter-current-of-max', { placeholders: { current: String(currentLength), max: String(maxLength) } })
: translate('kol-character-counter-current', { placeholders: { current: String(currentLength) } });
ariaText =
typeof maxLength === 'number'
? translate('kol-character-counter-current-of-max-aria', { placeholders: { current: String(currentLengthDebounced), max: String(maxLength) } })
: translate('kol-character-counter-current', { placeholders: { current: String(currentLengthDebounced) } });
}
else if (typeof maxLength === 'number') {
const remainingLive = maxLength - currentLength;
const exceededLive = remainingLive < 0;
const remainingDebounced = maxLength - currentLengthDebounced;
const exceededDebounced = remainingDebounced < 0;
visualText = exceededLive
? translate('kol-character-limit-exceeded', { placeholders: { over: String(Math.abs(remainingLive)) } })
: translate('kol-character-limit-remaining', { placeholders: { remaining: String(remainingLive) } });
ariaText = exceededDebounced
? translate('kol-character-limit-exceeded', { placeholders: { over: String(Math.abs(remainingDebounced)) } })
: translate('kol-character-limit-remaining', { placeholders: { remaining: String(remainingDebounced) } });
if (exceededLive) {
counterClasses.push('kol-form-field__counter--exceeded');
}
}
else {
return null;
}
return (h(Fragment, null, h("span", { class: clsx(counterClasses), "aria-hidden": "true", "data-testid": "input-counter" }, visualText), h("span", { id: createRelatedUniqueId(id || '', 'counter'), "aria-live": "polite", class: "visually-hidden", "data-testid": "input-counter-aria" }, ariaText)));
};
export default KolFormFieldCounterFc;
//# sourceMappingURL=FormFieldCounter.js.map