@public-ui/components 4.3.0-rc.4 → 4.3.0-rc.5

package/dist/components/controller3.js

@@ -2,351 +2,25 @@
  * KoliBri - The accessible HTML-Standard
  */
 import { a as __rest } from './tslib.es6.js';
-import { h, Fragment } from '@stencil/core/internal/client';
+import { h } from '@stencil/core/internal/client';
+import { t as translate } from './i18n.js';
 import { B as BaseWebComponent } from './base-web-component.js';
-import { T as TooltipFC } from './component.js';
+import { T as TooltipFC } from './component3.js';
 import { T as TooltipController } from './controller.js';
-import { b as isObject$1, i as isString } from './common.js';
-import { b as watchBoolean, h as watchString, p as parseJson, o as objectObjectHandler, a as watchValidator, s as setState, u as a11yHint } from './prop.validators.js';
-import { S as SpanFC, b as buildBadgeTextString, s as showExpertSlot } from './component2.js';
+import { b as isObject, i as isString } from './common.js';
+import { a as watchBoolean, e as watchString, p as parseJson, o as objectObjectHandler, w as watchValidator, s as setState, k as a11yHint } from './prop.validators.js';
+import { S as SpanFC, b as buildBadgeTextString, s as showExpertSlot } from './component.js';
+import { c as classNameFromVariant, v as validateVariantClassName } from './variant-class-name.js';
 import { c as clsx } from './clsx.js';
 import { a as createRelatedUniqueId } from './dev.utils.js';
-import { t as translate } from './i18n.js';
 import { K as KolAlertFc } from './Alert.js';
 import { v as validateAccessKey, a as validateAccessAndShortKey, b as validateShortKey, c as validateTabIndex } from './access-and-short-key.js';
 import { v as validateDisabled } from './disabled.js';
 import { v as validateHideLabel } from './hide-label.js';
-import { a as validateLabelWithExpertSlot } from './label2.js';
+import { a as validateLabelWithExpertSlot } from './label.js';
 import { v as validateTooltipAlign } from './tooltip-align.js';
-import { v as validateVariantClassName } from './variant-class-name.js';
 import { d as dispatchDomEvent, K as KolEvent } from './events.js';
 import { A as AssociatedInputController } from './associated.controller.js';
-import { i as isObject } from './_Uint8Array.js';
-import { i as isObjectLike, b as baseGetTag, r as root } from './isArray.js';
-
-/** `Object#toString` result references. */
-var symbolTag = '[object Symbol]';
-
-/**
- * Checks if `value` is classified as a `Symbol` primitive or object.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
- * @example
- *
- * _.isSymbol(Symbol.iterator);
- * // => true
- *
- * _.isSymbol('abc');
- * // => false
- */
-function isSymbol(value) {
-  return typeof value == 'symbol' ||
-    (isObjectLike(value) && baseGetTag(value) == symbolTag);
-}
-
-/** Used to match a single whitespace character. */
-var reWhitespace = /\s/;
-
-/**
- * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace
- * character of `string`.
- *
- * @private
- * @param {string} string The string to inspect.
- * @returns {number} Returns the index of the last non-whitespace character.
- */
-function trimmedEndIndex(string) {
-  var index = string.length;
-
-  while (index-- && reWhitespace.test(string.charAt(index))) {}
-  return index;
-}
-
-/** Used to match leading whitespace. */
-var reTrimStart = /^\s+/;
-
-/**
- * The base implementation of `_.trim`.
- *
- * @private
- * @param {string} string The string to trim.
- * @returns {string} Returns the trimmed string.
- */
-function baseTrim(string) {
-  return string
-    ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '')
-    : string;
-}
-
-/** Used as references for various `Number` constants. */
-var NAN = 0 / 0;
-
-/** Used to detect bad signed hexadecimal string values. */
-var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
-
-/** Used to detect binary string values. */
-var reIsBinary = /^0b[01]+$/i;
-
-/** Used to detect octal string values. */
-var reIsOctal = /^0o[0-7]+$/i;
-
-/** Built-in method references without a dependency on `root`. */
-var freeParseInt = parseInt;
-
-/**
- * Converts `value` to a number.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to process.
- * @returns {number} Returns the number.
- * @example
- *
- * _.toNumber(3.2);
- * // => 3.2
- *
- * _.toNumber(Number.MIN_VALUE);
- * // => 5e-324
- *
- * _.toNumber(Infinity);
- * // => Infinity
- *
- * _.toNumber('3.2');
- * // => 3.2
- */
-function toNumber(value) {
-  if (typeof value == 'number') {
-    return value;
-  }
-  if (isSymbol(value)) {
-    return NAN;
-  }
-  if (isObject(value)) {
-    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
-    value = isObject(other) ? (other + '') : other;
-  }
-  if (typeof value != 'string') {
-    return value === 0 ? value : +value;
-  }
-  value = baseTrim(value);
-  var isBinary = reIsBinary.test(value);
-  return (isBinary || reIsOctal.test(value))
-    ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
-    : (reIsBadHex.test(value) ? NAN : +value);
-}
-
-/**
- * Gets the timestamp of the number of milliseconds that have elapsed since
- * the Unix epoch (1 January 1970 00:00:00 UTC).
- *
- * @static
- * @memberOf _
- * @since 2.4.0
- * @category Date
- * @returns {number} Returns the timestamp.
- * @example
- *
- * _.defer(function(stamp) {
- *   console.log(_.now() - stamp);
- * }, _.now());
- * // => Logs the number of milliseconds it took for the deferred invocation.
- */
-var now = function() {
-  return root.Date.now();
-};
-
-/** Error message constants. */
-var FUNC_ERROR_TEXT = 'Expected a function';
-
-/* Built-in method references for those with the same name as other `lodash` methods. */
-var nativeMax = Math.max,
-    nativeMin = Math.min;
-
-/**
- * Creates a debounced function that delays invoking `func` until after `wait`
- * milliseconds have elapsed since the last time the debounced function was
- * invoked. The debounced function comes with a `cancel` method to cancel
- * delayed `func` invocations and a `flush` method to immediately invoke them.
- * Provide `options` to indicate whether `func` should be invoked on the
- * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
- * with the last arguments provided to the debounced function. Subsequent
- * calls to the debounced function return the result of the last `func`
- * invocation.
- *
- * **Note:** If `leading` and `trailing` options are `true`, `func` is
- * invoked on the trailing edge of the timeout only if the debounced function
- * is invoked more than once during the `wait` timeout.
- *
- * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
- * until to the next tick, similar to `setTimeout` with a timeout of `0`.
- *
- * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
- * for details over the differences between `_.debounce` and `_.throttle`.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Function
- * @param {Function} func The function to debounce.
- * @param {number} [wait=0] The number of milliseconds to delay.
- * @param {Object} [options={}] The options object.
- * @param {boolean} [options.leading=false]
- *  Specify invoking on the leading edge of the timeout.
- * @param {number} [options.maxWait]
- *  The maximum time `func` is allowed to be delayed before it's invoked.
- * @param {boolean} [options.trailing=true]
- *  Specify invoking on the trailing edge of the timeout.
- * @returns {Function} Returns the new debounced function.
- * @example
- *
- * // Avoid costly calculations while the window size is in flux.
- * jQuery(window).on('resize', _.debounce(calculateLayout, 150));
- *
- * // Invoke `sendMail` when clicked, debouncing subsequent calls.
- * jQuery(element).on('click', _.debounce(sendMail, 300, {
- *   'leading': true,
- *   'trailing': false
- * }));
- *
- * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
- * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
- * var source = new EventSource('/stream');
- * jQuery(source).on('message', debounced);
- *
- * // Cancel the trailing debounced invocation.
- * jQuery(window).on('popstate', debounced.cancel);
- */
-function debounce(func, wait, options) {
-  var lastArgs,
-      lastThis,
-      maxWait,
-      result,
-      timerId,
-      lastCallTime,
-      lastInvokeTime = 0,
-      leading = false,
-      maxing = false,
-      trailing = true;
-
-  if (typeof func != 'function') {
-    throw new TypeError(FUNC_ERROR_TEXT);
-  }
-  wait = toNumber(wait) || 0;
-  if (isObject(options)) {
-    leading = !!options.leading;
-    maxing = 'maxWait' in options;
-    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
-    trailing = 'trailing' in options ? !!options.trailing : trailing;
-  }
-
-  function invokeFunc(time) {
-    var args = lastArgs,
-        thisArg = lastThis;
-
-    lastArgs = lastThis = undefined;
-    lastInvokeTime = time;
-    result = func.apply(thisArg, args);
-    return result;
-  }
-
-  function leadingEdge(time) {
-    // Reset any `maxWait` timer.
-    lastInvokeTime = time;
-    // Start the timer for the trailing edge.
-    timerId = setTimeout(timerExpired, wait);
-    // Invoke the leading edge.
-    return leading ? invokeFunc(time) : result;
-  }
-
-  function remainingWait(time) {
-    var timeSinceLastCall = time - lastCallTime,
-        timeSinceLastInvoke = time - lastInvokeTime,
-        timeWaiting = wait - timeSinceLastCall;
-
-    return maxing
-      ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke)
-      : timeWaiting;
-  }
-
-  function shouldInvoke(time) {
-    var timeSinceLastCall = time - lastCallTime,
-        timeSinceLastInvoke = time - lastInvokeTime;
-
-    // Either this is the first call, activity has stopped and we're at the
-    // trailing edge, the system time has gone backwards and we're treating
-    // it as the trailing edge, or we've hit the `maxWait` limit.
-    return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
-      (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
-  }
-
-  function timerExpired() {
-    var time = now();
-    if (shouldInvoke(time)) {
-      return trailingEdge(time);
-    }
-    // Restart the timer.
-    timerId = setTimeout(timerExpired, remainingWait(time));
-  }
-
-  function trailingEdge(time) {
-    timerId = undefined;
-
-    // Only invoke if we have `lastArgs` which means `func` has been
-    // debounced at least once.
-    if (trailing && lastArgs) {
-      return invokeFunc(time);
-    }
-    lastArgs = lastThis = undefined;
-    return result;
-  }
-
-  function cancel() {
-    if (timerId !== undefined) {
-      clearTimeout(timerId);
-    }
-    lastInvokeTime = 0;
-    lastArgs = lastCallTime = lastThis = timerId = undefined;
-  }
-
-  function flush() {
-    return timerId === undefined ? result : trailingEdge(now());
-  }
-
-  function debounced() {
-    var time = now(),
-        isInvoking = shouldInvoke(time);
-
-    lastArgs = arguments;
-    lastThis = this;
-    lastCallTime = time;
-
-    if (isInvoking) {
-      if (timerId === undefined) {
-        return leadingEdge(lastCallTime);
-      }
-      if (maxing) {
-        // Handle invocations in a tight loop.
-        clearTimeout(timerId);
-        timerId = setTimeout(timerExpired, wait);
-        return invokeFunc(lastCallTime);
-      }
-    }
-    if (timerId === undefined) {
-      timerId = setTimeout(timerExpired, wait);
-    }
-    return result;
-  }
-  debounced.cancel = cancel;
-  debounced.flush = flush;
-  return debounced;
-}
 
 const validateAdjustHeight = (component, value) => {
     watchBoolean(component, '_adjustHeight', value);
@@ -374,7 +48,7 @@ const validateMsg = (component, value) => {
             if (typeof value === 'string' && value.length > 0) {
                 return true;
             }
-            if (isObject$1(value) && value !== null) {
+            if (isObject(value) && value !== null) {
                 const desc = value._description;
                 return isString(desc, 1);
             }
@@ -411,45 +85,6 @@ const validateTouched = (component, value) => {
     watchBoolean(component, '_touched', value);
 };
 
-const KolFormFieldCharacterLimitHintFc = ({ id, maxLength }) => {
-    return (h("span", { id: createRelatedUniqueId(id, 'character-limit-hint'), class: "visually-hidden" }, translate('kol-character-limit-hint', { placeholders: { limit: String(maxLength) } })));
-};
-
-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)));
-};
-
 const KolFormFieldHintFc = (_a) => {
     var { id, class: classNames, hint, baseClassName = 'kol-form-field' } = _a, other = __rest(_a, ["id", "class", "hint", "baseClassName"]);
     if (!hint) {
@@ -544,7 +179,7 @@ const KolFormFieldFc = (props, children) => {
         ['kol-form-field--hidden-msg']: Boolean(hideMsg),
     };
     if (variant) {
-        stateCssClasses = Object.assign(Object.assign({}, stateCssClasses), { [`kol-form-field--${variant}`]: true });
+        stateCssClasses = Object.assign(Object.assign({}, stateCssClasses), { [classNameFromVariant(variant, 'form-field')]: true });
     }
     if (showMsg) {
         const msgType = getMsgType(msg);
@@ -552,7 +187,7 @@ const KolFormFieldFc = (props, children) => {
     }
     return (h(Component, Object.assign({ class: clsx('kol-form-field', stateCssClasses, classNames), "aria-describedby": ariaDescribedBy }, other), showLabel && (h(KolFormFieldLabelFc, Object.assign({}, (formFieldLabelProps || {}), { id: id, hasExpertSlot: hasExpertSlot, hideLabel: hideLabel, label: label, accessKey: accessKey, shortKey: shortKey, readOnly: readOnly, showBadge: showBadge }))), h(InputContainer, Object.assign({}, formFieldInputProps, { ref: setInputContainerRef }), children, useTooltipInsteadOfLabel && hideLabel === true && (h("div", { class: clsx('kol-form-field__tooltip', formFieldTooltipProps === null || formFieldTooltipProps === void 0 ? void 0 : formFieldTooltipProps.class) }, h(TooltipFC, { badgeText: badgeText || '', label: label, align: tooltipAlign, id: labelId, refFloating: tooltipFloatingRef !== null && tooltipFloatingRef !== void 0 ? tooltipFloatingRef : ((el) => {
             tooltipController === null || tooltipController === void 0 ? void 0 : tooltipController.setTooltipElementRef(el);
-        }) })))), counter ? h(KolFormFieldCounterFc, Object.assign({ id: id }, counter)) : null, maxLength ? h(KolFormFieldCharacterLimitHintFc, { id: id, maxLength: maxLength }) : null, showMsg && !hideMsg && h(FormFieldMsgFc, Object.assign({}, (formFieldMsgProps || {}), { id: id, alert: alert, msg: msg })), showHint && h(KolFormFieldHintFc, Object.assign({}, (formFieldHintProps || {}), { id: id, hint: hint })), anotherChildren));
+        }) })))), counter && !(counter.maxLengthBehavior === 'soft' && typeof counter.maxLength !== 'number') && (h("div", { class: "kol-form-field__counter" }, h("span", { "data-testid": "input-counter", "aria-hidden": "true", class: "kol-form-field__counter", ref: counter.visualRef }), h("span", { "aria-live": "polite", class: "visually-hidden", "data-testid": "input-counter-aria", id: createRelatedUniqueId(id, 'counter'), ref: counter.ariaRef }))), showMsg && !hideMsg && h(FormFieldMsgFc, Object.assign({}, (formFieldMsgProps || {}), { id: id, alert: alert, msg: msg })), showHint && h(KolFormFieldHintFc, Object.assign({}, (formFieldHintProps || {}), { id: id, hint: hint })), anotherChildren, typeof maxLength === 'number' && !counter && (h("span", { id: createRelatedUniqueId(id, 'character-limit-hint'), class: "visually-hidden" }, translate('kol-character-limit-hint', { placeholders: { limit: String(maxLength) } })))));
 };
 
 function getDefaultProps({ ariaDescribedBy, hideLabel, label }) {
@@ -580,16 +215,13 @@ const getRenderStates = (state) => {
     if (hasHint === true) {
         ariaDescribedBy.push(createRelatedUniqueId(state._id, 'hint'));
     }
-    if (state._hasCounter) {
-        ariaDescribedBy.push(createRelatedUniqueId(state._id, 'counter'));
-    }
     if (hasError === true) {
         ariaDescribedBy.push(createRelatedUniqueId(state._id, 'error'));
     }
     return { hasError, hasHint, ariaDescribedBy };
 };
 
-function getFormFieldProps(state) {
+function getFormFieldProps(state, counterRefs) {
     const props = {
         id: state._id,
         disabled: state._disabled,
@@ -616,18 +248,8 @@ function getFormFieldProps(state) {
     if ('_maxLength' in state) {
         props.maxLength = state._maxLength;
     }
-    if ('_currentLength' in state &&
-        typeof state._currentLength === 'number' &&
-        '_currentLengthDebounced' in state &&
-        typeof state._currentLengthDebounced === 'number') {
-        if ('_hasCounter' in state && state._hasCounter === true) {
-            props.counter = {
-                currentLength: state._currentLength,
-                currentLengthDebounced: state._currentLengthDebounced,
-                maxLength: state._maxLength,
-                maxLengthBehavior: state._maxLengthBehavior || 'hard',
-            };
-        }
+    if ('_hasCounter' in state && state._hasCounter === true) {
+        props.counter = Object.assign({ maxLength: '_maxLength' in state ? state._maxLength : undefined, maxLengthBehavior: ('_maxLengthBehavior' in state ? state._maxLengthBehavior : undefined) || 'hard' }, counterRefs);
     }
     if ('_variant' in state) {
         props.variant = state._variant;
@@ -635,11 +257,11 @@ function getFormFieldProps(state) {
     return props;
 }
 const FormFieldStateWrapper = (_a, children) => {
-    var { state } = _a, other = __rest(_a, ["state"]);
+    var { state, counterRefs } = _a, other = __rest(_a, ["state", "counterRefs"]);
     const { ariaDescribedBy: ariaDescribedByArray } = getRenderStates(state);
     const isRadioVariant = other.component === 'fieldset' || ('_options' in state && '_orientation' in state);
     const ariaDescribedBy = isRadioVariant && ariaDescribedByArray.length > 0 ? ariaDescribedByArray.join(' ') : undefined;
-    const baseProps = getFormFieldProps(state);
+    const baseProps = getFormFieldProps(state, counterRefs);
     return (h(KolFormFieldFc, Object.assign({}, baseProps, other, { ariaDescribedBy: ariaDescribedBy }), children));
 };
 
@@ -670,9 +292,6 @@ class InputController extends ControlledInputController {
             onInput: this.onInput.bind(this),
             onKeyDown: this.onKeyDown.bind(this),
         };
-        this.updateCurrentLengthDebounced = debounce((length) => {
-            setState(this.component, '_currentLengthDebounced', length);
-        }, 500);
         this.component = component;
     }
     validateAccessKey(value) {