@public-ui/components 3.1.0-rc.0 → 3.1.0

package/dist/cjs/kol-input-file.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-uT47A9Jc.js"),clsx=require("./clsx-CkZlkaek.js"),componentNames=require("./component-names-CuI-0Pbo.js"),FormFieldStateWrapper=require("./FormFieldStateWrapper-B2LPpMpo.js"),controllerIcon=require("./controller-icon-9udvsM5R.js"),InputStateWrapper=require("./InputStateWrapper-uvFi_BbH.js"),i18n=require("./i18n-DNWGj4j8.js"),dev_utils=require("./dev.utils-fZEgoGGu.js"),common=require("./common-Cd2qH809.js"),multiple=require("./multiple-DRhU5nKU.js"),required=require("./required-CXU7vdyH.js");require("./access-and-short-key-BExF929g.js"),require("./disabled-DT-7CUov.js"),require("./hide-label-DdGk9NfD.js"),require("./label-Nicf9N_T.js"),require("./tooltip-align-WJPFINTL.js"),require("./align-CGG5V8xM.js"),require("./events-cX8h6I3p.js"),require("./associated.controller-jhz1Ef5Z.js"),require("./bootstrap-DmmGbpjB.js"),require("./i18n-BnIFsVIa.js"),require("./isObject-DMA85Fq4.js"),require("./tslib.es6-7DbU_BSw.js"),require("./reuse-Cs36Ddzu.js"),require("./InternalUnderlinedBadgeText-uCh_T5VD.js"),require("./Alert-Bj1BTIEj.js"),require("./bem-Bu0VYjZa.js"),require("./browser-D7A31aEp.js"),require("./Heading-BZTrj6_i.js"),require("./Icon-B9T-4CsE.js"),require("./icons-D_PtPRwb.js"),require("./Input-BCYP3Fc4.js");const validateAccept=(e,n,t={})=>{common.watchString(e,"_accept",n,t)};class InputFileController extends controllerIcon.InputIconController{constructor(e,n,t){super(e,n,t),this.component=e}validateAccept(e){validateAccept(this.component,e)}validateMultiple(e){multiple.validateMultiple(this.component,e)}validateRequired(e){required.validateRequired(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateAccept(this.component._accept),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required)}}const defaultStyleCss='/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don\'t want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: "*"/"";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: "*"/"";\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n  .kol-input {\n    opacity: 0;\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 10) 0.5em;\n    cursor: pointer;\n  }\n  .kol-input::-webkit-file-upload-button, .kol-input::file-selector-button {\n    cursor: pointer;\n  }\n  .kol-input:disabled, .kol-input:disabled::-webkit-file-upload-button, .kol-input:disabled::file-selector-button {\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n  .kol-input-container__container {\n    display: flex;\n    height: var(--a11y-min-size);\n    overflow: hidden;\n    align-items: center;\n  }\n  .kol-input-container__filename {\n    margin-left: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n    overflow: hidden;\n    flex-grow: 1;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr;\n  }\n}',KolInputFile=class{async getValue(){var e;return null===(e=this.inputRef)||void 0===e?void 0:e.files}async focus(){var e;return Promise.resolve(null===(e=this.inputRef)||void 0===e?void 0:e.focus())}async kolFocus(){return this.focus()}async reset(){this.controller.setFormAssociatedValue(""),this.filename=this.translateFilenameText,this.hasFileSelected=!1,this.inputRef&&(this.inputRef.value="")}getFormFieldProps(){return{state:this.state,class:clsx.clsx("kol-input-file","file"),tooltipAlign:this._tooltipAlign,alert:this.showAsAlert()}}getInputProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state,type:"file",accept:this.state._accept,multiple:this.state._multiple},this.controller.onFacade),{onChange:this.onChange,onInput:this.onInput,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return index.h(FormFieldStateWrapper.FormFieldStateWrapper,Object.assign({key:"7deee0c8c3bf1f1c01672bcce64738117081422f"},this.getFormFieldProps()),index.h(controllerIcon.InputContainerStateWrapperFc,{key:"43825237a7bf2b2d56da97790c1b544241ebad2d",state:this.state},index.h("span",{key:"e2c2d541070fdf8607d2ddfeb9a806cdf3730d61",class:clsx.clsx("kol-input-container__filename",{"kol-input-container__filename--has-file":this.hasFileSelected})},this.filename),index.h(InputStateWrapper.InputStateWrapper,Object.assign({key:"ba08af270d798fc274d85176c5aaa880540a321d"},this.getInputProps())),index.h(componentNames.KolButtonWcTag,{key:"48746427ef21a0e1d0ea5c907ccbb53beec85f7d",class:"kol-input-container__button",_label:this.translateDataBrowseText,_buttonVariant:"primary",_disabled:this._disabled})))}constructor(e){index.registerInstance(this,e),this.translateDataBrowseText=i18n.translate("kol-data-browse-text"),this.translateFilenameText=i18n.translate("kol-filename-text"),this.catchRef=e=>{this.inputRef=e},this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._multiple=!1,this._required=!1,this._tooltipAlign="top",this._touched=!1,this.filename=this.translateFilenameText,this.hasFileSelected=!1,this.state={_hideMsg:!1,_id:`id-${dev_utils.nonce()}`,_label:""},this.inputHasFocus=!1,this.onDragOver=e=>{var n,t,i;e.preventDefault(),null===(i=null===(t=null===(n=this.inputRef)||void 0===n?void 0:n.parentElement)||void 0===t?void 0:t.parentElement)||void 0===i||i.classList.add("kol-input-container--is-dragover")},this.onDragLeave=()=>{var e,n,t;null===(t=null===(n=null===(e=this.inputRef)||void 0===e?void 0:e.parentElement)||void 0===n?void 0:n.parentElement)||void 0===t||t.classList.remove("kol-input-container--is-dragover")},this.onDrop=e=>{var n,t,i,o;if(e.preventDefault(),null===(i=null===(t=null===(n=this.inputRef)||void 0===n?void 0:n.parentElement)||void 0===t?void 0:t.parentElement)||void 0===i||i.classList.remove("kol-input-container--is-dragover"),null===(o=e.dataTransfer)||void 0===o?void 0:o.files.length){const n=e.dataTransfer.files;this.filename=Array.from(n).map(e=>e.name).join(", "),this.controller.setFormAssociatedValue(n)}},this.onChange=e=>{if(this.inputRef instanceof HTMLInputElement&&"file"===this.inputRef.type){const n=this.inputRef.files;this.hasFileSelected=!!(null==n?void 0:n.length),this.filename=(null==n?void 0:n.length)?Array.from(n).map(e=>e.name).join(", "):this.translateFilenameText,this.controller.onFacade.onChange(e,n),this.controller.setFormAssociatedValue(n)}},this.onInput=e=>{if(this.inputRef instanceof HTMLInputElement&&"file"===this.inputRef.type){const n=this.inputRef.files;this.controller.onFacade.onInput(e,!1,n)}},this.controller=new InputFileController(this,"file",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccept(e){this.controller.validateAccept(e)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateMultiple(e){this.controller.validateMultiple(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSmartButton(e){this.controller.validateSmartButton(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad()}componentDidLoad(){var e,n;const t=null===(n=null===(e=this.inputRef)||void 0===e?void 0:e.parentElement)||void 0===n?void 0:n.parentElement;null==t||t.addEventListener("dragover",this.onDragOver),null==t||t.addEventListener("dragleave",this.onDragLeave),null==t||t.addEventListener("drop",this.onDrop)}get host(){return index.getElement(this)}static get watchers(){return{_accept:["validateAccept"],_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_shortKey:["validateShortKey"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"]}}};KolInputFile.style={default:defaultStyleCss},exports.kol_input_file=KolInputFile;
+"use strict";var index=require("./index-CUwAAV9q.js"),clsx=require("./clsx-CkZlkaek.js"),componentNames=require("./component-names-CuI-0Pbo.js"),FormFieldStateWrapper=require("./FormFieldStateWrapper-BFcysaVO.js"),controllerIcon=require("./controller-icon-oRdlfcl8.js"),InputStateWrapper=require("./InputStateWrapper-Dc3UUVaW.js"),i18n=require("./i18n-DNWGj4j8.js"),dev_utils=require("./dev.utils-7DjklDXI.js"),common=require("./common-Cd2qH809.js"),multiple=require("./multiple-DRhU5nKU.js"),required=require("./required-CXU7vdyH.js");require("./access-and-short-key-BExF929g.js"),require("./disabled-DT-7CUov.js"),require("./hide-label-DdGk9NfD.js"),require("./label-Nicf9N_T.js"),require("./tooltip-align-WJPFINTL.js"),require("./align-CGG5V8xM.js"),require("./events-cX8h6I3p.js"),require("./associated.controller-jhz1Ef5Z.js"),require("./bootstrap-DmmGbpjB.js"),require("./i18n-BnIFsVIa.js"),require("./isObject-DMA85Fq4.js"),require("./tslib.es6-7DbU_BSw.js"),require("./reuse-Cs36Ddzu.js"),require("./InternalUnderlinedBadgeText-BmcMXSlV.js"),require("./Alert-iB2nNldZ.js"),require("./bem-CWXmxX43.js"),require("./browser-D7A31aEp.js"),require("./Heading-CXo3APiB.js"),require("./Icon-CA2N7E-m.js"),require("./icons-D_PtPRwb.js"),require("./Input-BG9SwAmi.js");const validateAccept=(e,t,i={})=>{common.watchString(e,"_accept",t,i)};class InputFileController extends controllerIcon.InputIconController{constructor(e,t,i){super(e,t,i),this.component=e}validateAccept(e){validateAccept(this.component,e)}validateMultiple(e){multiple.validateMultiple(this.component,e)}validateRequired(e){required.validateRequired(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateAccept(this.component._accept),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required)}}const defaultStyleCss=()=>' @layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;   @layer kol-a11y {   :host {          --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));          color: black;     background-color: white;          font-family: Verdana;          letter-spacing: inherit;          word-spacing: inherit;          text-align: left;   }   * {          hyphens: auto;          word-break: break-word;   }                  button,   .kol-input .input {     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);   }      a,   button,   h1,   h2,   h3,   h4,   h5,   h6,   input,   option,   select,   textarea {          color: inherit;          font-family: inherit;          font-size: inherit;          letter-spacing: inherit;          word-spacing: inherit;   }      .visually-hidden {     position: fixed;     top: 0;     left: 0;     width: 1px;     height: 1px;     overflow: hidden;     white-space: nowrap;     clip-path: inset(50%);   } } @layer kol-global {      :is(a, button) {     background-color: transparent;     width: 100%;     margin: 0;     padding: 0;     border: none;        }      [hidden] {     display: none !important;   }   .badge-text-hint {     color: black;     background-color: lightgray;   } } @layer kol-global {   :host {          max-width: 100%;     font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));   }   * {          box-sizing: border-box;   }   .kol-span {          display: flex;     flex-flow: column;     align-items: center;     justify-content: center;        }   .kol-span__container {     display: flex;     align-items: center;   }   a,   button {     cursor: pointer;   }   .kol-span .kol-span__label--hide-label .kol-span__label {     display: none;   }      button:disabled {     color: unset;   }   .disabled label,   .disabled:focus-within label,   [aria-disabled=true],   [aria-disabled=true]:focus,   [disabled],   [disabled]:focus {     opacity: 0.5;     outline: none;     cursor: not-allowed;   }   [aria-disabled=true]:focus .kol-span,   [disabled]:focus .kol-span {     outline: none !important;   } } @layer kol-component {   :host {     display: block;   } } @layer kol-component {   .kol-tooltip {     display: contents;   }   .kol-tooltip__floating {     opacity: 0;     display: none;     position: fixed;          top: 0;     left: 0;          width: var(--kol-tooltip-width, max-content);     min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));     max-width: 90vw;     max-height: 90vh;     animation-direction: normal;          animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);     animation-fill-mode: forwards;     animation-iteration-count: 1;     animation-timing-function: ease-in;   }   .kol-tooltip__floating.hide {     animation-name: hideTooltip;   }   .kol-tooltip__floating.show {     animation-name: showTooltip;   }   .kol-tooltip__arrow {     transform: rotate(45deg);     color: #000;     background-color: #fff;     position: absolute;     z-index: 999;     width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));     height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-tooltip__content {     color: #000;     background-color: #fff;     position: relative;     z-index: 1000;   }   @keyframes hideTooltip {     0% {       opacity: 1;     }     100% {       opacity: 0;       display: none;     }   }   @keyframes showTooltip {     0% {       opacity: 0;     }     100% {       opacity: 1;     }   } } @layer kol-component {   .kol-alert {     display: grid;   }   .kol-alert__container {     display: flex;     place-items: center;   }   .kol-alert__container-content {     flex-grow: 1;   }   .kol-alert__closer {          outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-form-field {     display: grid;   }   .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {     cursor: pointer;   }   .kol-form-field--disabled .kol-form-field__label {     opacity: 0.5;   }   .kol-form-field--required .kol-form-field__label-text::after {     content: "*"/"";   }   .kol-form-field--disabled .kol-form-field__hint {     opacity: 0.5;   }   .kol-form-field--required .kol-form-field__tooltip .span-label::after {     content: "*"/"";   }   .kol-input-container {     background-color: transparent;     display: grid;     width: 100%;     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);     align-items: center;     grid-template-columns: 1fr;   }   .kol-input-container:has(> .kol-input-container__adornment--start) {     grid-template-columns: auto 1fr;   }   .kol-input-container:has(> .kol-input-container__adornment--end) {     grid-template-columns: 1fr auto;   }   .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {     grid-template-columns: auto 1fr auto;   }   .kol-input-container__container {     position: relative;   }   .kol-input-container__adornment {     display: flex;     align-items: center;   }   .kol-input-container__adornment .kol-icon {     display: grid;     height: var(--a11y-min-size);     place-items: center;   }   .kol-input {     background-color: transparent;     width: 100%;     min-width: var(--a11y-min-size);   }   .kol-input:focus {     outline: none;   }   .kol-input {     opacity: 0;     position: absolute;     inset: 0;     width: 100%;     height: 100%;     padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 10) 0.5em;     cursor: pointer;   }   .kol-input::-webkit-file-upload-button, .kol-input::file-selector-button {     cursor: pointer;   }   .kol-input:disabled, .kol-input:disabled::-webkit-file-upload-button, .kol-input:disabled::file-selector-button {     cursor: not-allowed;     pointer-events: none;   }   .kol-input-container__container {     display: flex;     height: var(--a11y-min-size);     overflow: hidden;     align-items: center;   }   .kol-input-container__filename {     margin-left: calc(4 * 1rem / var(--kolibri-root-font-size, 16));     overflow: hidden;     flex-grow: 1;     white-space: nowrap;     text-overflow: ellipsis;   }   .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {     grid-template-columns: auto 1fr;   } }',KolInputFile=class{async getValue(){var e;return null===(e=this.inputRef)||void 0===e?void 0:e.files}async focus(){var e;return Promise.resolve(null===(e=this.inputRef)||void 0===e?void 0:e.focus())}async kolFocus(){return this.focus()}async reset(){this.controller.setFormAssociatedValue(""),this.filename=this.translateFilenameText,this.hasFileSelected=!1,this.inputRef&&(this.inputRef.value="")}getFormFieldProps(){return{state:this.state,class:clsx.clsx("kol-input-file","file"),tooltipAlign:this._tooltipAlign,alert:this.showAsAlert()}}getInputProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state,type:"file",accept:this.state._accept,multiple:this.state._multiple},this.controller.onFacade),{onChange:this.onChange,onInput:this.onInput,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return index.h(FormFieldStateWrapper.FormFieldStateWrapper,Object.assign({key:"7deee0c8c3bf1f1c01672bcce64738117081422f"},this.getFormFieldProps()),index.h(controllerIcon.InputContainerStateWrapperFc,{key:"43825237a7bf2b2d56da97790c1b544241ebad2d",state:this.state},index.h("span",{key:"e2c2d541070fdf8607d2ddfeb9a806cdf3730d61",class:clsx.clsx("kol-input-container__filename",{"kol-input-container__filename--has-file":this.hasFileSelected})},this.filename),index.h(InputStateWrapper.InputStateWrapper,Object.assign({key:"ba08af270d798fc274d85176c5aaa880540a321d"},this.getInputProps())),index.h(componentNames.KolButtonWcTag,{key:"48746427ef21a0e1d0ea5c907ccbb53beec85f7d",class:"kol-input-container__button",_label:this.translateDataBrowseText,_buttonVariant:"primary",_disabled:this._disabled})))}constructor(e){index.registerInstance(this,e),this.translateDataBrowseText=i18n.translate("kol-data-browse-text"),this.translateFilenameText=i18n.translate("kol-filename-text"),this.catchRef=e=>{this.inputRef=e},this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._multiple=!1,this._required=!1,this._tooltipAlign="top",this._touched=!1,this.filename=this.translateFilenameText,this.hasFileSelected=!1,this.state={_hideMsg:!1,_id:`id-${dev_utils.nonce()}`,_label:""},this.inputHasFocus=!1,this.onDragOver=e=>{var t,i,o;e.preventDefault(),null===(o=null===(i=null===(t=this.inputRef)||void 0===t?void 0:t.parentElement)||void 0===i?void 0:i.parentElement)||void 0===o||o.classList.add("kol-input-container--is-dragover")},this.onDragLeave=()=>{var e,t,i;null===(i=null===(t=null===(e=this.inputRef)||void 0===e?void 0:e.parentElement)||void 0===t?void 0:t.parentElement)||void 0===i||i.classList.remove("kol-input-container--is-dragover")},this.onDrop=e=>{var t,i,o,l;if(e.preventDefault(),null===(o=null===(i=null===(t=this.inputRef)||void 0===t?void 0:t.parentElement)||void 0===i?void 0:i.parentElement)||void 0===o||o.classList.remove("kol-input-container--is-dragover"),null===(l=e.dataTransfer)||void 0===l?void 0:l.files.length){const t=e.dataTransfer.files;this.filename=Array.from(t).map(e=>e.name).join(", "),this.controller.setFormAssociatedValue(t)}},this.onChange=e=>{if(this.inputRef instanceof HTMLInputElement&&"file"===this.inputRef.type){const t=this.inputRef.files;this.hasFileSelected=!!(null==t?void 0:t.length),this.filename=(null==t?void 0:t.length)?Array.from(t).map(e=>e.name).join(", "):this.translateFilenameText,this.controller.onFacade.onChange(e,t),this.controller.setFormAssociatedValue(t)}},this.onInput=e=>{if(this.inputRef instanceof HTMLInputElement&&"file"===this.inputRef.type){const t=this.inputRef.files;this.controller.onFacade.onInput(e,!1,t)}},this.controller=new InputFileController(this,"file",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccept(e){this.controller.validateAccept(e)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateMultiple(e){this.controller.validateMultiple(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSmartButton(e){this.controller.validateSmartButton(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad()}componentDidLoad(){var e,t;const i=null===(t=null===(e=this.inputRef)||void 0===e?void 0:e.parentElement)||void 0===t?void 0:t.parentElement;null==i||i.addEventListener("dragover",this.onDragOver),null==i||i.addEventListener("dragleave",this.onDragLeave),null==i||i.addEventListener("drop",this.onDrop)}get host(){return index.getElement(this)}static get watchers(){return{_accept:[{validateAccept:0}],_accessKey:[{validateAccessKey:0}],_disabled:[{validateDisabled:0}],_hideMsg:[{validateHideMsg:0}],_hideLabel:[{validateHideLabel:0}],_hint:[{validateHint:0}],_icons:[{validateIcons:0}],_id:[{validateId:0}],_label:[{validateLabel:0}],_msg:[{validateMsg:0}],_multiple:[{validateMultiple:0}],_name:[{validateName:0}],_on:[{validateOn:0}],_required:[{validateRequired:0}],_shortKey:[{validateShortKey:0}],_smartButton:[{validateSmartButton:0}],_syncValueBySelector:[{validateSyncValueBySelector:0}],_touched:[{validateTouched:0}]}}};KolInputFile.style={default:defaultStyleCss()},exports.kol_input_file=KolInputFile;

package/dist/cjs/kol-input-number.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-uT47A9Jc.js"),clsx=require("./clsx-CkZlkaek.js"),FormFieldStateWrapper=require("./FormFieldStateWrapper-B2LPpMpo.js"),controllerIcon=require("./controller-icon-9udvsM5R.js"),InputStateWrapper=require("./InputStateWrapper-uvFi_BbH.js"),dev_utils=require("./dev.utils-fZEgoGGu.js"),controller=require("./controller-Q-LXBPh4.js");require("./common-Cd2qH809.js");var autoComplete=require("./auto-complete-DQ9TPAgi.js"),placeholder=require("./placeholder-BncK-3gZ.js"),readOnly=require("./read-only-dIvCm73W.js"),required=require("./required-CXU7vdyH.js"),suggestions=require("./suggestions-BjiW0xio.js");require("./access-and-short-key-BExF929g.js"),require("./disabled-DT-7CUov.js"),require("./hide-label-DdGk9NfD.js"),require("./label-Nicf9N_T.js"),require("./tooltip-align-WJPFINTL.js"),require("./align-CGG5V8xM.js"),require("./events-cX8h6I3p.js"),require("./associated.controller-jhz1Ef5Z.js"),require("./bootstrap-DmmGbpjB.js"),require("./component-names-CuI-0Pbo.js"),require("./i18n-BnIFsVIa.js"),require("./isObject-DMA85Fq4.js"),require("./tslib.es6-7DbU_BSw.js"),require("./reuse-Cs36Ddzu.js"),require("./i18n-DNWGj4j8.js"),require("./InternalUnderlinedBadgeText-uCh_T5VD.js"),require("./Alert-Bj1BTIEj.js"),require("./bem-Bu0VYjZa.js"),require("./browser-D7A31aEp.js"),require("./Heading-BZTrj6_i.js"),require("./Icon-B9T-4CsE.js"),require("./icons-D_PtPRwb.js"),require("./Input-BCYP3Fc4.js");class InputNumberController extends controllerIcon.InputIconController{constructor(e,t,n){super(e,t,n),this.component=e}validateAutoComplete(e){autoComplete.validateAutoComplete(this.component,e)}validateSuggestions(e){suggestions.validateSuggestions(this.component,e)}validateMax(e){this.validateNumber("_max",e)}validateMin(e){this.validateNumber("_min",e)}validatePlaceholder(e){placeholder.validatePlaceholder(this.component,e)}validateReadOnly(e){readOnly.validateReadOnly(this.component,e)}validateRequired(e){required.validateRequired(this.component,e)}validateStep(e){this.validateNumber("_step",e)}validateValue(e){this.validateNumber("_value",e),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateSuggestions(this.component._suggestions),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateStep(this.component._step),this.validateValue(this.component._value)}}const defaultStyleCss='/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don\'t want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: "*"/"";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: "*"/"";\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}',KolInputNumber=class{async getValue(){return this.remapValue(this.state._value)}async focus(){var e;return Promise.resolve(null===(e=this.inputRef)||void 0===e?void 0:e.focus())}async kolFocus(){return this.focus()}setInitialValueType(e){this.controller.isNumberString(e)?this._initialValueType="NumberString":"number"!=typeof e||isNaN(e)?this._initialValueType="null":this._initialValueType="number"}remapValue(e){return null==e?null:"NumberString"===this._initialValueType?String(e):e}getFormFieldProps(){return{state:this.state,class:clsx.clsx("kol-input-number","number",{"has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,alert:this.showAsAlert()}}getInputProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state,type:"number"},this.controller.onFacade),{onInput:this.onInput,onChange:this.onChange,onKeyDown:this.onKeyDown,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return index.h(FormFieldStateWrapper.FormFieldStateWrapper,Object.assign({key:"60f3ab5d10c2382ed837f5a1b7b872141bcae69e"},this.getFormFieldProps()),index.h(controllerIcon.InputContainerStateWrapperFc,{key:"818c2e4227f8a27231c17d9971187522938d8e3f",state:this.state},index.h(InputStateWrapper.InputStateWrapper,Object.assign({key:"d42c7b5454f2282771436f736f1f1a78e614b6c4"},this.getInputProps()))))}constructor(e){index.registerInstance(this,e),this.catchRef=e=>{this.inputRef=e},this.onInput=e=>{var t;const n=null===(t=this.inputRef)||void 0===t?void 0:t.value;this._value=this.remapValue(""===n?null:Number(n)),this.controller.onFacade.onInput(e,!0,this._value)},this.onChange=e=>{var t;const n=null===(t=this.inputRef)||void 0===t?void 0:t.value,i=this.remapValue(""===n?null:Number(n));this.controller.onFacade.onChange(e,i)},this.onKeyDown=e=>{this.controller.onFacade.onKeyDown(e),"Enter"!==e.code&&"NumpadEnter"!==e.code||controller.propagateSubmitEventToForm({form:this.host})},this._autoComplete="off",this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._readOnly=!1,this._required=!1,this._tooltipAlign="top",this._touched=!1,this.state={_hasValue:!1,_hideMsg:!1,_id:`id-${dev_utils.nonce()}`,_label:"",_suggestions:[]},this._initialValueType="null",this.inputHasFocus=!1,this.controller=new InputNumberController(this,"number",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAutoComplete(e){this.controller.validateAutoComplete(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMax(e){this.controller.validateMax(e)}validateMin(e){this.controller.validateMin(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSmartButton(e){this.controller.validateSmartButton(e)}validateSuggestions(e){this.controller.validateSuggestions(e)}validateStep(e){this.controller.validateStep(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e),null!=e&&this.setInitialValueType(e)}componentWillLoad(){void 0!==this._value&&this.setInitialValueType(this._value),this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(e=>this.state._hasValue=!!e)}get host(){return index.getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_max:["validateMax"],_min:["validateMin"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_smartButton:["validateSmartButton"],_suggestions:["validateSuggestions"],_step:["validateStep"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}}};KolInputNumber.style={default:defaultStyleCss},exports.kol_input_number=KolInputNumber;
+"use strict";var index=require("./index-CUwAAV9q.js"),clsx=require("./clsx-CkZlkaek.js"),FormFieldStateWrapper=require("./FormFieldStateWrapper-BFcysaVO.js"),controllerIcon=require("./controller-icon-oRdlfcl8.js"),InputStateWrapper=require("./InputStateWrapper-Dc3UUVaW.js"),dev_utils=require("./dev.utils-7DjklDXI.js"),controller=require("./controller-Q-LXBPh4.js");require("./common-Cd2qH809.js");var autoComplete=require("./auto-complete-DQ9TPAgi.js"),placeholder=require("./placeholder-BncK-3gZ.js"),readOnly=require("./read-only-dIvCm73W.js"),required=require("./required-CXU7vdyH.js"),suggestions=require("./suggestions-BjiW0xio.js");require("./access-and-short-key-BExF929g.js"),require("./disabled-DT-7CUov.js"),require("./hide-label-DdGk9NfD.js"),require("./label-Nicf9N_T.js"),require("./tooltip-align-WJPFINTL.js"),require("./align-CGG5V8xM.js"),require("./events-cX8h6I3p.js"),require("./associated.controller-jhz1Ef5Z.js"),require("./bootstrap-DmmGbpjB.js"),require("./component-names-CuI-0Pbo.js"),require("./i18n-BnIFsVIa.js"),require("./isObject-DMA85Fq4.js"),require("./tslib.es6-7DbU_BSw.js"),require("./reuse-Cs36Ddzu.js"),require("./i18n-DNWGj4j8.js"),require("./InternalUnderlinedBadgeText-BmcMXSlV.js"),require("./Alert-iB2nNldZ.js"),require("./bem-CWXmxX43.js"),require("./browser-D7A31aEp.js"),require("./Heading-CXo3APiB.js"),require("./Icon-CA2N7E-m.js"),require("./icons-D_PtPRwb.js"),require("./Input-BG9SwAmi.js");class InputNumberController extends controllerIcon.InputIconController{constructor(e,t,i){super(e,t,i),this.component=e}validateAutoComplete(e){autoComplete.validateAutoComplete(this.component,e)}validateSuggestions(e){suggestions.validateSuggestions(this.component,e)}validateMax(e){this.validateNumber("_max",e)}validateMin(e){this.validateNumber("_min",e)}validatePlaceholder(e){placeholder.validatePlaceholder(this.component,e)}validateReadOnly(e){readOnly.validateReadOnly(this.component,e)}validateRequired(e){required.validateRequired(this.component,e)}validateStep(e){this.validateNumber("_step",e)}validateValue(e){this.validateNumber("_value",e),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateSuggestions(this.component._suggestions),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateStep(this.component._step),this.validateValue(this.component._value)}}const defaultStyleCss=()=>' @layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;   @layer kol-a11y {   :host {          --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));          color: black;     background-color: white;          font-family: Verdana;          letter-spacing: inherit;          word-spacing: inherit;          text-align: left;   }   * {          hyphens: auto;          word-break: break-word;   }                  button,   .kol-input .input {     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);   }      a,   button,   h1,   h2,   h3,   h4,   h5,   h6,   input,   option,   select,   textarea {          color: inherit;          font-family: inherit;          font-size: inherit;          letter-spacing: inherit;          word-spacing: inherit;   }      .visually-hidden {     position: fixed;     top: 0;     left: 0;     width: 1px;     height: 1px;     overflow: hidden;     white-space: nowrap;     clip-path: inset(50%);   } } @layer kol-global {      :is(a, button) {     background-color: transparent;     width: 100%;     margin: 0;     padding: 0;     border: none;        }      [hidden] {     display: none !important;   }   .badge-text-hint {     color: black;     background-color: lightgray;   } } @layer kol-global {   :host {          max-width: 100%;     font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));   }   * {          box-sizing: border-box;   }   .kol-span {          display: flex;     flex-flow: column;     align-items: center;     justify-content: center;        }   .kol-span__container {     display: flex;     align-items: center;   }   a,   button {     cursor: pointer;   }   .kol-span .kol-span__label--hide-label .kol-span__label {     display: none;   }      button:disabled {     color: unset;   }   .disabled label,   .disabled:focus-within label,   [aria-disabled=true],   [aria-disabled=true]:focus,   [disabled],   [disabled]:focus {     opacity: 0.5;     outline: none;     cursor: not-allowed;   }   [aria-disabled=true]:focus .kol-span,   [disabled]:focus .kol-span {     outline: none !important;   } } @layer kol-component {   :host {     display: block;   } } @layer kol-component {   .kol-tooltip {     display: contents;   }   .kol-tooltip__floating {     opacity: 0;     display: none;     position: fixed;          top: 0;     left: 0;          width: var(--kol-tooltip-width, max-content);     min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));     max-width: 90vw;     max-height: 90vh;     animation-direction: normal;          animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);     animation-fill-mode: forwards;     animation-iteration-count: 1;     animation-timing-function: ease-in;   }   .kol-tooltip__floating.hide {     animation-name: hideTooltip;   }   .kol-tooltip__floating.show {     animation-name: showTooltip;   }   .kol-tooltip__arrow {     transform: rotate(45deg);     color: #000;     background-color: #fff;     position: absolute;     z-index: 999;     width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));     height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-tooltip__content {     color: #000;     background-color: #fff;     position: relative;     z-index: 1000;   }   @keyframes hideTooltip {     0% {       opacity: 1;     }     100% {       opacity: 0;       display: none;     }   }   @keyframes showTooltip {     0% {       opacity: 0;     }     100% {       opacity: 1;     }   } } @layer kol-component {   .kol-alert {     display: grid;   }   .kol-alert__container {     display: flex;     place-items: center;   }   .kol-alert__container-content {     flex-grow: 1;   }   .kol-alert__closer {          outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-form-field {     display: grid;   }   .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {     cursor: pointer;   }   .kol-form-field--disabled .kol-form-field__label {     opacity: 0.5;   }   .kol-form-field--required .kol-form-field__label-text::after {     content: "*"/"";   }   .kol-form-field--disabled .kol-form-field__hint {     opacity: 0.5;   }   .kol-form-field--required .kol-form-field__tooltip .span-label::after {     content: "*"/"";   }   .kol-input-container {     background-color: transparent;     display: grid;     width: 100%;     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);     align-items: center;     grid-template-columns: 1fr;   }   .kol-input-container:has(> .kol-input-container__adornment--start) {     grid-template-columns: auto 1fr;   }   .kol-input-container:has(> .kol-input-container__adornment--end) {     grid-template-columns: 1fr auto;   }   .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {     grid-template-columns: auto 1fr auto;   }   .kol-input-container__container {     position: relative;   }   .kol-input-container__adornment {     display: flex;     align-items: center;   }   .kol-input-container__adornment .kol-icon {     display: grid;     height: var(--a11y-min-size);     place-items: center;   }   .kol-input {     background-color: transparent;     width: 100%;     min-width: var(--a11y-min-size);   }   .kol-input:focus {     outline: none;   } }',KolInputNumber=class{async getValue(){return this.remapValue(this.state._value)}async focus(){var e;return Promise.resolve(null===(e=this.inputRef)||void 0===e?void 0:e.focus())}async kolFocus(){return this.focus()}setInitialValueType(e){this.controller.isNumberString(e)?this._initialValueType="NumberString":"number"!=typeof e||isNaN(e)?this._initialValueType="null":this._initialValueType="number"}remapValue(e){return null==e?null:"NumberString"===this._initialValueType?String(e):e}getFormFieldProps(){return{state:this.state,class:clsx.clsx("kol-input-number","number",{"has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,alert:this.showAsAlert()}}getInputProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state,type:"number"},this.controller.onFacade),{onInput:this.onInput,onChange:this.onChange,onKeyDown:this.onKeyDown,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return index.h(FormFieldStateWrapper.FormFieldStateWrapper,Object.assign({key:"60f3ab5d10c2382ed837f5a1b7b872141bcae69e"},this.getFormFieldProps()),index.h(controllerIcon.InputContainerStateWrapperFc,{key:"818c2e4227f8a27231c17d9971187522938d8e3f",state:this.state},index.h(InputStateWrapper.InputStateWrapper,Object.assign({key:"d42c7b5454f2282771436f736f1f1a78e614b6c4"},this.getInputProps()))))}constructor(e){index.registerInstance(this,e),this.catchRef=e=>{this.inputRef=e},this.onInput=e=>{var t;const i=null===(t=this.inputRef)||void 0===t?void 0:t.value;this._value=this.remapValue(""===i?null:Number(i)),this.controller.onFacade.onInput(e,!0,this._value)},this.onChange=e=>{var t;const i=null===(t=this.inputRef)||void 0===t?void 0:t.value,a=this.remapValue(""===i?null:Number(i));this.controller.onFacade.onChange(e,a)},this.onKeyDown=e=>{this.controller.onFacade.onKeyDown(e),"Enter"!==e.code&&"NumpadEnter"!==e.code||controller.propagateSubmitEventToForm({form:this.host})},this._autoComplete="off",this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._readOnly=!1,this._required=!1,this._tooltipAlign="top",this._touched=!1,this.state={_hasValue:!1,_hideMsg:!1,_id:`id-${dev_utils.nonce()}`,_label:"",_suggestions:[]},this._initialValueType="null",this.inputHasFocus=!1,this.controller=new InputNumberController(this,"number",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAutoComplete(e){this.controller.validateAutoComplete(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMax(e){this.controller.validateMax(e)}validateMin(e){this.controller.validateMin(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSmartButton(e){this.controller.validateSmartButton(e)}validateSuggestions(e){this.controller.validateSuggestions(e)}validateStep(e){this.controller.validateStep(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e),null!=e&&this.setInitialValueType(e)}componentWillLoad(){void 0!==this._value&&this.setInitialValueType(this._value),this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(e=>this.state._hasValue=!!e)}get host(){return index.getElement(this)}static get watchers(){return{_accessKey:[{validateAccessKey:0}],_autoComplete:[{validateAutoComplete:0}],_disabled:[{validateDisabled:0}],_hideMsg:[{validateHideMsg:0}],_hideLabel:[{validateHideLabel:0}],_hint:[{validateHint:0}],_icons:[{validateIcons:0}],_id:[{validateId:0}],_label:[{validateLabel:0}],_max:[{validateMax:0}],_min:[{validateMin:0}],_msg:[{validateMsg:0}],_name:[{validateName:0}],_on:[{validateOn:0}],_placeholder:[{validatePlaceholder:0}],_readOnly:[{validateReadOnly:0}],_required:[{validateRequired:0}],_shortKey:[{validateShortKey:0}],_smartButton:[{validateSmartButton:0}],_suggestions:[{validateSuggestions:0}],_step:[{validateStep:0}],_syncValueBySelector:[{validateSyncValueBySelector:0}],_touched:[{validateTouched:0}],_value:[{validateValue:0}]}}};KolInputNumber.style={default:defaultStyleCss()},exports.kol_input_number=KolInputNumber;

package/dist/cjs/kol-input-password.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-uT47A9Jc.js"),clsx=require("./clsx-CkZlkaek.js"),common=require("./common-Cd2qH809.js"),FormFieldStateWrapper=require("./FormFieldStateWrapper-B2LPpMpo.js"),controllerIcon=require("./controller-icon-9udvsM5R.js"),InputStateWrapper=require("./InputStateWrapper-uvFi_BbH.js"),i18n=require("./i18n-DNWGj4j8.js"),dev_utils=require("./dev.utils-fZEgoGGu.js"),controller=require("./controller-Q-LXBPh4.js"),controller$1=require("./controller-DmfL38P4.js");require("./access-and-short-key-BExF929g.js"),require("./disabled-DT-7CUov.js"),require("./hide-label-DdGk9NfD.js"),require("./label-Nicf9N_T.js"),require("./tooltip-align-WJPFINTL.js"),require("./align-CGG5V8xM.js"),require("./events-cX8h6I3p.js"),require("./associated.controller-jhz1Ef5Z.js"),require("./bootstrap-DmmGbpjB.js"),require("./component-names-CuI-0Pbo.js"),require("./i18n-BnIFsVIa.js"),require("./isObject-DMA85Fq4.js"),require("./tslib.es6-7DbU_BSw.js"),require("./reuse-Cs36Ddzu.js"),require("./InternalUnderlinedBadgeText-uCh_T5VD.js"),require("./Alert-Bj1BTIEj.js"),require("./bem-Bu0VYjZa.js"),require("./browser-D7A31aEp.js"),require("./Heading-BZTrj6_i.js"),require("./Icon-B9T-4CsE.js"),require("./icons-D_PtPRwb.js"),require("./Input-BCYP3Fc4.js"),require("./auto-complete-DQ9TPAgi.js"),require("./max-length-behavior-Bvbwhaxv.js"),require("./placeholder-BncK-3gZ.js"),require("./read-only-dIvCm73W.js"),require("./required-CXU7vdyH.js");const defaultStyleCss='/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don\'t want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: "*"/"";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: "*"/"";\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n  .kol-input-password {\n    --kol-tooltip-width: calc(160 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}',KolInputPassword=class{async getValue(){var e;return null===(e=this.inputRef)||void 0===e?void 0:e.value}async focus(){var e;return Promise.resolve(null===(e=this.inputRef)||void 0===e?void 0:e.focus())}async kolFocus(){return this.focus()}getFormFieldProps(){return{state:this.state,class:clsx.clsx("kol-input-password","password",{"has-value":this.state._hasValue,"kol-form-field--has-counter":this.controller.hasSoftCharacterLimit()||this.controller.hasCounter()}),tooltipAlign:this._tooltipAlign,alert:this.showAsAlert()}}getInputProps(){const e="number"==typeof this.state._maxLength?[`${this.state._id}-character-limit-hint`]:void 0;return Object.assign(Object.assign({ref:this.catchRef,type:this._passwordVisible?"text":"password",state:this.state,ariaDescribedBy:e},this.controller.onFacade),{onInput:this.onInput,onKeyDown:this.onKeyDown,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}getShowPasswordButton(){return"visibility-toggle"!==this._variant?null:index.h(controllerIcon.KolIconButtonFc,{componentName:"button",class:"kol-input-password__password-toggle-button kol-input-container__smart-button","data-testid":"kol-input-password-toggle-button",label:this._passwordVisible?this.translateHidePassword:this.translateShowPassword,buttonVariant:"ghost",onClick:()=>{var e;this._passwordVisible=!this._passwordVisible,null===(e=this.inputRef)||void 0===e||e.focus()},icon:"codicon codicon-eye-"+(this._passwordVisible?"closed":"watch"),disabled:this._disabled})}render(){return index.h(FormFieldStateWrapper.FormFieldStateWrapper,Object.assign({key:"dfecc1fc1f5b43297449e1e705fa110119e6d509"},this.getFormFieldProps()),index.h(controllerIcon.InputContainerStateWrapperFc,{key:"0ac3083a7ab3c671656745de60c2275d76748a2e",state:this.state,endAdornment:this.getShowPasswordButton()},index.h(InputStateWrapper.InputStateWrapper,Object.assign({key:"a68a8e309aa062a8e2b7270aafaa352442147790"},this.getInputProps()))))}constructor(e){index.registerInstance(this,e),this.translateHidePassword=i18n.translate("kol-hide-password"),this.translateShowPassword=i18n.translate("kol-show-password"),this.catchRef=e=>{this.inputRef=e},this.onKeyDown=e=>{this.controller.onFacade.onKeyDown(e),"Enter"!==e.code&&"NumpadEnter"!==e.code||controller.propagateSubmitEventToForm({form:this.host})},this.onInput=e=>{this._value=e.target.value,this.controller.onFacade.onInput(e)},this._autoComplete="off",this._hasCounter=!1,this._maxLengthBehavior="hard",this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._readOnly=!1,this._required=!1,this._tooltipAlign="top",this._touched=!1,this._variant="default",this.state={_currentLength:0,_currentLengthDebounced:0,_hasValue:!1,_hideMsg:!1,_id:`id-${dev_utils.nonce()}`,_label:"",_variant:"default"},this._passwordVisible=!1,this.inputHasFocus=!1,this.controller=new controller$1.InputPasswordController(this,"password",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAutoComplete(e){this.controller.validateAutoComplete(e),"on"===e&&common.devHint("[KolInputPassword] The 'autocomplete' option should not be set to \"on\" for a password input field")}validateMaxLengthBehavior(e){this.controller.validateMaxLengthBehavior(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateVariant(e){this.controller.validateVariant(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHasCounter(e){this.controller.validateHasCounter(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMaxLength(e){this.controller.validateMaxLength(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePattern(e){this.controller.validatePattern(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSmartButton(e){this.controller.validateSmartButton(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(e=>this.state._hasValue=!!e)}get host(){return index.getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_autoComplete:["validateAutoComplete"],_maxLengthBehavior:["validateMaxLengthBehavior"],_disabled:["validateDisabled"],_variant:["validateVariant"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hasCounter:["validateHasCounter"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}}};KolInputPassword.style={default:defaultStyleCss},exports.kol_input_password=KolInputPassword;
+"use strict";var index=require("./index-CUwAAV9q.js"),clsx=require("./clsx-CkZlkaek.js"),common=require("./common-Cd2qH809.js"),FormFieldStateWrapper=require("./FormFieldStateWrapper-BFcysaVO.js"),controllerIcon=require("./controller-icon-oRdlfcl8.js"),InputStateWrapper=require("./InputStateWrapper-Dc3UUVaW.js"),i18n=require("./i18n-DNWGj4j8.js"),dev_utils=require("./dev.utils-7DjklDXI.js"),controller=require("./controller-Q-LXBPh4.js"),controller$1=require("./controller-DHLdEAgl.js");require("./access-and-short-key-BExF929g.js"),require("./disabled-DT-7CUov.js"),require("./hide-label-DdGk9NfD.js"),require("./label-Nicf9N_T.js"),require("./tooltip-align-WJPFINTL.js"),require("./align-CGG5V8xM.js"),require("./events-cX8h6I3p.js"),require("./associated.controller-jhz1Ef5Z.js"),require("./bootstrap-DmmGbpjB.js"),require("./component-names-CuI-0Pbo.js"),require("./i18n-BnIFsVIa.js"),require("./isObject-DMA85Fq4.js"),require("./tslib.es6-7DbU_BSw.js"),require("./reuse-Cs36Ddzu.js"),require("./InternalUnderlinedBadgeText-BmcMXSlV.js"),require("./Alert-iB2nNldZ.js"),require("./bem-CWXmxX43.js"),require("./browser-D7A31aEp.js"),require("./Heading-CXo3APiB.js"),require("./Icon-CA2N7E-m.js"),require("./icons-D_PtPRwb.js"),require("./Input-BG9SwAmi.js"),require("./auto-complete-DQ9TPAgi.js"),require("./max-length-behavior-Bvbwhaxv.js"),require("./placeholder-BncK-3gZ.js"),require("./read-only-dIvCm73W.js"),require("./required-CXU7vdyH.js");const defaultStyleCss=()=>' @layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;   @layer kol-a11y {   :host {          --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));          color: black;     background-color: white;          font-family: Verdana;          letter-spacing: inherit;          word-spacing: inherit;          text-align: left;   }   * {          hyphens: auto;          word-break: break-word;   }                  button,   .kol-input .input {     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);   }      a,   button,   h1,   h2,   h3,   h4,   h5,   h6,   input,   option,   select,   textarea {          color: inherit;          font-family: inherit;          font-size: inherit;          letter-spacing: inherit;          word-spacing: inherit;   }      .visually-hidden {     position: fixed;     top: 0;     left: 0;     width: 1px;     height: 1px;     overflow: hidden;     white-space: nowrap;     clip-path: inset(50%);   } } @layer kol-global {      :is(a, button) {     background-color: transparent;     width: 100%;     margin: 0;     padding: 0;     border: none;        }      [hidden] {     display: none !important;   }   .badge-text-hint {     color: black;     background-color: lightgray;   } } @layer kol-global {   :host {          max-width: 100%;     font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));   }   * {          box-sizing: border-box;   }   .kol-span {          display: flex;     flex-flow: column;     align-items: center;     justify-content: center;        }   .kol-span__container {     display: flex;     align-items: center;   }   a,   button {     cursor: pointer;   }   .kol-span .kol-span__label--hide-label .kol-span__label {     display: none;   }      button:disabled {     color: unset;   }   .disabled label,   .disabled:focus-within label,   [aria-disabled=true],   [aria-disabled=true]:focus,   [disabled],   [disabled]:focus {     opacity: 0.5;     outline: none;     cursor: not-allowed;   }   [aria-disabled=true]:focus .kol-span,   [disabled]:focus .kol-span {     outline: none !important;   } } @layer kol-component {   :host {     display: block;   } } @layer kol-component {   .kol-tooltip {     display: contents;   }   .kol-tooltip__floating {     opacity: 0;     display: none;     position: fixed;          top: 0;     left: 0;          width: var(--kol-tooltip-width, max-content);     min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));     max-width: 90vw;     max-height: 90vh;     animation-direction: normal;          animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);     animation-fill-mode: forwards;     animation-iteration-count: 1;     animation-timing-function: ease-in;   }   .kol-tooltip__floating.hide {     animation-name: hideTooltip;   }   .kol-tooltip__floating.show {     animation-name: showTooltip;   }   .kol-tooltip__arrow {     transform: rotate(45deg);     color: #000;     background-color: #fff;     position: absolute;     z-index: 999;     width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));     height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-tooltip__content {     color: #000;     background-color: #fff;     position: relative;     z-index: 1000;   }   @keyframes hideTooltip {     0% {       opacity: 1;     }     100% {       opacity: 0;       display: none;     }   }   @keyframes showTooltip {     0% {       opacity: 0;     }     100% {       opacity: 1;     }   } } @layer kol-component {   .kol-alert {     display: grid;   }   .kol-alert__container {     display: flex;     place-items: center;   }   .kol-alert__container-content {     flex-grow: 1;   }   .kol-alert__closer {          outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-form-field {     display: grid;   }   .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {     cursor: pointer;   }   .kol-form-field--disabled .kol-form-field__label {     opacity: 0.5;   }   .kol-form-field--required .kol-form-field__label-text::after {     content: "*"/"";   }   .kol-form-field--disabled .kol-form-field__hint {     opacity: 0.5;   }   .kol-form-field--required .kol-form-field__tooltip .span-label::after {     content: "*"/"";   }   .kol-input-container {     background-color: transparent;     display: grid;     width: 100%;     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);     align-items: center;     grid-template-columns: 1fr;   }   .kol-input-container:has(> .kol-input-container__adornment--start) {     grid-template-columns: auto 1fr;   }   .kol-input-container:has(> .kol-input-container__adornment--end) {     grid-template-columns: 1fr auto;   }   .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {     grid-template-columns: auto 1fr auto;   }   .kol-input-container__container {     position: relative;   }   .kol-input-container__adornment {     display: flex;     align-items: center;   }   .kol-input-container__adornment .kol-icon {     display: grid;     height: var(--a11y-min-size);     place-items: center;   }   .kol-input {     background-color: transparent;     width: 100%;     min-width: var(--a11y-min-size);   }   .kol-input:focus {     outline: none;   }   .kol-input-password {     --kol-tooltip-width: calc(160 * 1rem / var(--kolibri-root-font-size, 16));   } }',KolInputPassword=class{async getValue(){var e;return null===(e=this.inputRef)||void 0===e?void 0:e.value}async focus(){var e;return Promise.resolve(null===(e=this.inputRef)||void 0===e?void 0:e.focus())}async kolFocus(){return this.focus()}getFormFieldProps(){return{state:this.state,class:clsx.clsx("kol-input-password","password",{"has-value":this.state._hasValue,"kol-form-field--has-counter":this.controller.hasSoftCharacterLimit()||this.controller.hasCounter()}),tooltipAlign:this._tooltipAlign,alert:this.showAsAlert()}}getInputProps(){const e="number"==typeof this.state._maxLength?[`${this.state._id}-character-limit-hint`]:void 0;return Object.assign(Object.assign({ref:this.catchRef,type:this._passwordVisible?"text":"password",state:this.state,ariaDescribedBy:e},this.controller.onFacade),{onInput:this.onInput,onKeyDown:this.onKeyDown,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}getShowPasswordButton(){return"visibility-toggle"!==this._variant?null:index.h(controllerIcon.KolIconButtonFc,{componentName:"button",class:"kol-input-password__password-toggle-button kol-input-container__smart-button","data-testid":"kol-input-password-toggle-button",label:this._passwordVisible?this.translateHidePassword:this.translateShowPassword,buttonVariant:"ghost",onClick:()=>{var e;this._passwordVisible=!this._passwordVisible,null===(e=this.inputRef)||void 0===e||e.focus()},icon:"codicon codicon-eye-"+(this._passwordVisible?"closed":"watch"),disabled:this._disabled})}render(){return index.h(FormFieldStateWrapper.FormFieldStateWrapper,Object.assign({key:"dfecc1fc1f5b43297449e1e705fa110119e6d509"},this.getFormFieldProps()),index.h(controllerIcon.InputContainerStateWrapperFc,{key:"0ac3083a7ab3c671656745de60c2275d76748a2e",state:this.state,endAdornment:this.getShowPasswordButton()},index.h(InputStateWrapper.InputStateWrapper,Object.assign({key:"a68a8e309aa062a8e2b7270aafaa352442147790"},this.getInputProps()))))}constructor(e){index.registerInstance(this,e),this.translateHidePassword=i18n.translate("kol-hide-password"),this.translateShowPassword=i18n.translate("kol-show-password"),this.catchRef=e=>{this.inputRef=e},this.onKeyDown=e=>{this.controller.onFacade.onKeyDown(e),"Enter"!==e.code&&"NumpadEnter"!==e.code||controller.propagateSubmitEventToForm({form:this.host})},this.onInput=e=>{this._value=e.target.value,this.controller.onFacade.onInput(e)},this._autoComplete="off",this._hasCounter=!1,this._maxLengthBehavior="hard",this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._readOnly=!1,this._required=!1,this._tooltipAlign="top",this._touched=!1,this._variant="default",this.state={_currentLength:0,_currentLengthDebounced:0,_hasValue:!1,_hideMsg:!1,_id:`id-${dev_utils.nonce()}`,_label:"",_variant:"default"},this._passwordVisible=!1,this.inputHasFocus=!1,this.controller=new controller$1.InputPasswordController(this,"password",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAutoComplete(e){this.controller.validateAutoComplete(e),"on"===e&&common.devHint("[KolInputPassword] The 'autocomplete' option should not be set to \"on\" for a password input field")}validateMaxLengthBehavior(e){this.controller.validateMaxLengthBehavior(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateVariant(e){this.controller.validateVariant(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHasCounter(e){this.controller.validateHasCounter(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMaxLength(e){this.controller.validateMaxLength(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePattern(e){this.controller.validatePattern(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSmartButton(e){this.controller.validateSmartButton(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(e=>this.state._hasValue=!!e)}get host(){return index.getElement(this)}static get watchers(){return{_accessKey:[{validateAccessKey:0}],_autoComplete:[{validateAutoComplete:0}],_maxLengthBehavior:[{validateMaxLengthBehavior:0}],_disabled:[{validateDisabled:0}],_variant:[{validateVariant:0}],_hideMsg:[{validateHideMsg:0}],_hideLabel:[{validateHideLabel:0}],_hasCounter:[{validateHasCounter:0}],_hint:[{validateHint:0}],_icons:[{validateIcons:0}],_id:[{validateId:0}],_label:[{validateLabel:0}],_maxLength:[{validateMaxLength:0}],_msg:[{validateMsg:0}],_name:[{validateName:0}],_on:[{validateOn:0}],_pattern:[{validatePattern:0}],_placeholder:[{validatePlaceholder:0}],_readOnly:[{validateReadOnly:0}],_required:[{validateRequired:0}],_shortKey:[{validateShortKey:0}],_smartButton:[{validateSmartButton:0}],_syncValueBySelector:[{validateSyncValueBySelector:0}],_touched:[{validateTouched:0}],_value:[{validateValue:0}]}}};KolInputPassword.style={default:defaultStyleCss()},exports.kol_input_password=KolInputPassword;

package/dist/cjs/kol-input-radio.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-uT47A9Jc.js"),clsx=require("./clsx-CkZlkaek.js"),dev_utils=require("./dev.utils-fZEgoGGu.js"),controller=require("./controller-Q-LXBPh4.js"),controller$1=require("./controller-LxYfXuho.js"),FieldControlStateWrapper=require("./FieldControlStateWrapper-Cyr_zzt3.js"),FormFieldStateWrapper=require("./FormFieldStateWrapper-B2LPpMpo.js"),tslib_es6=require("./tslib.es6-7DbU_BSw.js");require("./common-Cd2qH809.js");var Input=require("./Input-BCYP3Fc4.js");require("./component-names-CuI-0Pbo.js"),require("./label-Nicf9N_T.js"),require("./required-CXU7vdyH.js"),require("./orientation-BGODo_Ua.js"),require("./reuse-Cs36Ddzu.js"),require("./access-and-short-key-BExF929g.js"),require("./disabled-DT-7CUov.js"),require("./hide-label-DdGk9NfD.js"),require("./tooltip-align-WJPFINTL.js"),require("./align-CGG5V8xM.js"),require("./events-cX8h6I3p.js"),require("./associated.controller-jhz1Ef5Z.js"),require("./bootstrap-DmmGbpjB.js"),require("./i18n-BnIFsVIa.js"),require("./isObject-DMA85Fq4.js"),require("./i18n-DNWGj4j8.js"),require("./InternalUnderlinedBadgeText-uCh_T5VD.js"),require("./Alert-Bj1BTIEj.js"),require("./bem-Bu0VYjZa.js"),require("./browser-D7A31aEp.js"),require("./Heading-BZTrj6_i.js");const InputWrapperFc=e=>{var{class:n}=e,t=tslib_es6.__rest(e,["class"]);return index.h(Input.InputFc,Object.assign({class:clsx.clsx("kol-input-radio__input",n)},t,{type:"radio"}))},RadioFc=e=>{var n,{class:t,inputProps:i}=e,o=tslib_es6.__rest(e,["class","inputProps"]);const l=FormFieldStateWrapper.checkHasMsg(null==i?void 0:i.msg,null==i?void 0:i.touched),a="string"==typeof(null==i?void 0:i.msg)?"error":null===(n=null==i?void 0:i.msg)||void 0===n?void 0:n._type,r={"kol-input-radio--checked":null==i?void 0:i.checked,"kol-input-radio--disabled":Boolean(null==i?void 0:i.disabled),"kol-input-radio--required":Boolean(null==i?void 0:i.required),"kol-input-radio--touched":Boolean(null==i?void 0:i.touched),[`kol-input-radio--${a||"error"}`]:Boolean(l)};return index.h("label",Object.assign({class:clsx.clsx("kol-input-radio",r,t)},o),index.h(InputWrapperFc,Object.assign({},i)))};function getRadioProps(e,n={}){const t={id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,disabled:e._disabled,name:e._name};return"_required"in e&&(t.required=e._required),"_touched"in e&&(t.touched=e._touched),"_msg"in e&&(t.msg=e._msg),Object.assign(Object.assign({},t),n)}const RadioStateWrapper=e=>{var{state:n,inputProps:t}=e,i=tslib_es6.__rest(e,["state","inputProps"]);return index.h(RadioFc,Object.assign({inputProps:getRadioProps(n,t)},i))},defaultStyleCss='/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don\'t want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-field-control {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: left;\n    grid-template-areas: "input label";\n    grid-template-columns: auto 1fr;\n    grid-template-rows: auto;\n  }\n  .kol-field-control:has(.kol-field-control__hint) {\n    grid-template-areas: "input label" "hint hint";\n    grid-template-columns: auto 1fr;\n    grid-template-rows: auto auto;\n  }\n  .kol-field-control--label-align-left:not(.kol-field-control--hide-label) {\n    grid-template-areas: "label input";\n    grid-template-columns: 1fr auto;\n    grid-template-rows: auto;\n  }\n  .kol-field-control--label-align-left:not(.kol-field-control--hide-label):has(.kol-field-control__hint) {\n    grid-template-areas: "label input" "hint hint";\n    grid-template-columns: 1fr auto;\n    grid-template-rows: auto auto;\n  }\n  .kol-field-control__input {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-area: input;\n  }\n  .kol-field-control__label {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    flex-grow: 1;\n    align-items: center;\n    cursor: pointer;\n    grid-area: label;\n  }\n  .kol-field-control__label--visually-hidden {\n    height: 0;\n    margin: 0;\n    padding: 0;\n    visibility: hidden;\n  }\n  .kol-field-control__label-text::after {\n    content: "";\n  }\n  .kol-field-control__tooltip .span-label::after {\n    content: "";\n  }\n  .kol-field-control__hint {\n    grid-area: hint;\n  }\n  .kol-field-control--disabled .kol-field-control__label {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .kol-field-control--required .kol-field-control__label-text::after {\n    content: "*";\n  }\n  .kol-field-control--required .kol-field-control__tooltip .span-label::after {\n    content: "*";\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: "*"/"";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: "*"/"";\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-form-field {\n    --border-width: 2px;\n    --input-size: 1.5em;\n  }\n  .kol-form-field__label {\n    display: contents;\n  }\n  .kol-form-field__input {\n    display: flex;\n    flex-direction: column;\n  }\n  .kol-form-field__input--orientation-horizontal {\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: flex-start;\n  }\n  .kol-form-field--disabled {\n    opacity: unset;\n  }\n  .kol-input-radio {\n    display: flex;\n    position: relative;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n  }\n  .kol-input-radio__input {\n    border-style: solid;\n    border-radius: 100%;\n    display: flex;\n    width: var(--input-size);\n    min-width: var(--input-size);\n    height: var(--input-size);\n    min-height: var(--input-size);\n    margin: 0;\n    padding: 0;\n    border-width: var(--border-width);\n    appearance: none;\n    cursor: pointer;\n  }\n  .kol-input-radio__input:before {\n    border-radius: 100%;\n    width: calc(var(--input-size) / 2);\n    height: calc(var(--input-size) / 2);\n    margin: auto;\n    content: "";\n  }\n  .kol-input-radio__input:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-input-radio__input:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n  .kol-input-radio__input:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .kol-input-radio--disabled {\n    cursor: not-allowed;\n  }\n}',KolInputRadio=class{async getValue(){return this._value}async focus(){var e;return Promise.resolve(null===(e=this.getFocusableInput())||void 0===e?void 0:e.focus())}async kolFocus(){return this.focus()}getFocusableInput(){const e=this.state._options,n=Boolean(this.state._disabled),t=e.findIndex(e=>e.value===this.state._value&&!n&&!e.disabled);if(-1!==t){const e=this.inputRefs.get(t);if(e)return e}const i=e.findIndex(e=>!n&&!e.disabled);if(-1!==i)return this.inputRefs.get(i)}getFormFieldProps(){return{state:this.state,component:"fieldset",disabled:Boolean(this.state._disabled),class:clsx.clsx("kol-form-field--radio"),formFieldLabelProps:{component:"legend",class:"kol-form-field__label--legend"},formFieldInputProps:{class:`kol-form-field__input--orientation-${this.state._orientation}`},tooltipAlign:this._tooltipAlign,alert:this.showAsAlert(),hideLabel:!1}}render(){return index.h(FormFieldStateWrapper.FormFieldStateWrapper,Object.assign({key:"1a5ada4341373c623af39a98c98c71de59b89bb4"},this.getFormFieldProps()),this.state._options.map((e,n)=>this.renderOption(e,n)))}calculateDisabled(e){return Boolean(this.state._disabled)||Boolean(e.disabled)}getOptionProps(e,n){return{state:this.state,id:n,hint:e.hint,label:e.label,required:!1,fieldControlLabelProps:{showBadge:!1},disabled:this.calculateDisabled(e)}}getInputProps(e,n,t,i){return{state:this.state,inputProps:Object.assign(Object.assign({id:n,ref:e=>{this.catchInputRef(t)(e),i&&this.catchRef(e)},"aria-label":this.state._hideLabel&&"string"==typeof e.label?e.label:void 0,type:"radio",name:this.state._name||this.state._id,value:`-${t}`,checked:i,disabled:this.calculateDisabled(e)},this.controller.onFacade),{onChange:this.onChange,onClick:void 0,onInput:this.onInput,onKeyDown:this.onKeyDown.bind(this),onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}}renderOption(e,n){const t=`${this.state._id}-${n}`,i=this.state._value===e.value;return index.h(FieldControlStateWrapper.FieldControlStateWrapper,Object.assign({key:t},this.getOptionProps(e,t)),index.h(RadioStateWrapper,Object.assign({},this.getInputProps(e,t,n,i))))}constructor(e){index.registerInstance(this,e),this.inputRefs=new Map,this.catchRef=e=>{this.inputRef=e},this.catchInputRef=e=>n=>{n?this.inputRefs.set(e,n):this.inputRefs.delete(e)},this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._orientation="vertical",this._required=!1,this._tooltipAlign="top",this._touched=!1,this._value=null,this.state={_hideMsg:!1,_id:`id-${dev_utils.nonce()}`,_label:"",_options:[],_orientation:"vertical"},this.inputHasFocus=!1,this.onInput=e=>{if(e.target instanceof HTMLInputElement){const n=this.controller.getOptionByKey(e.target.value);void 0!==n&&this.controller.onFacade.onInput(e,!0,n.value)}},this.onChange=e=>{if(e.target instanceof HTMLInputElement){const n=this.controller.getOptionByKey(e.target.value);void 0!==n&&(this.controller.onFacade.onChange(e,n.value),this._value=n.value)}},this.onKeyDown=e=>{this.controller.onFacade.onKeyDown(e),"Enter"!==e.code&&"NumpadEnter"!==e.code||controller.propagateSubmitEventToForm({form:this.host})},this.controller=new controller$1.InputRadioController(this,"radio",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateTooltipAlign(e){this.controller.validateTooltipAlign(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHint(e){this.controller.validateHint(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e)}validateOrientation(e){this.controller.validateOrientation(e)}validateRequired(e){this.controller.validateRequired(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return index.getElement(this)}static get watchers(){return{_tooltipAlign:["validateTooltipAlign"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_hideMsg:["validateHideMsg"],_hint:["validateHint"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_orientation:["validateOrientation"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}}};KolInputRadio.style={default:defaultStyleCss},exports.kol_input_radio=KolInputRadio;
+"use strict";var index=require("./index-CUwAAV9q.js"),clsx=require("./clsx-CkZlkaek.js"),dev_utils=require("./dev.utils-7DjklDXI.js"),controller=require("./controller-Q-LXBPh4.js"),controller$1=require("./controller-DT6QqMUx.js"),FieldControlStateWrapper=require("./FieldControlStateWrapper-B_0MFAHD.js"),FormFieldStateWrapper=require("./FormFieldStateWrapper-BFcysaVO.js"),tslib_es6=require("./tslib.es6-7DbU_BSw.js");require("./common-Cd2qH809.js");var Input=require("./Input-BG9SwAmi.js");require("./component-names-CuI-0Pbo.js"),require("./label-Nicf9N_T.js"),require("./required-CXU7vdyH.js"),require("./orientation-BGODo_Ua.js"),require("./reuse-Cs36Ddzu.js"),require("./access-and-short-key-BExF929g.js"),require("./disabled-DT-7CUov.js"),require("./hide-label-DdGk9NfD.js"),require("./tooltip-align-WJPFINTL.js"),require("./align-CGG5V8xM.js"),require("./events-cX8h6I3p.js"),require("./associated.controller-jhz1Ef5Z.js"),require("./bootstrap-DmmGbpjB.js"),require("./i18n-BnIFsVIa.js"),require("./isObject-DMA85Fq4.js"),require("./i18n-DNWGj4j8.js"),require("./InternalUnderlinedBadgeText-BmcMXSlV.js"),require("./Alert-iB2nNldZ.js"),require("./bem-CWXmxX43.js"),require("./browser-D7A31aEp.js"),require("./Heading-CXo3APiB.js");const InputWrapperFc=e=>{var{class:t}=e,i=tslib_es6.__rest(e,["class"]);return index.h(Input.InputFc,Object.assign({class:clsx.clsx("kol-input-radio__input",t)},i,{type:"radio"}))},RadioFc=e=>{var t,{class:i,inputProps:o}=e,l=tslib_es6.__rest(e,["class","inputProps"]);const a=FormFieldStateWrapper.checkHasMsg(null==o?void 0:o.msg,null==o?void 0:o.touched),n="string"==typeof(null==o?void 0:o.msg)?"error":null===(t=null==o?void 0:o.msg)||void 0===t?void 0:t._type,r={"kol-input-radio--checked":null==o?void 0:o.checked,"kol-input-radio--disabled":Boolean(null==o?void 0:o.disabled),"kol-input-radio--required":Boolean(null==o?void 0:o.required),"kol-input-radio--touched":Boolean(null==o?void 0:o.touched),[`kol-input-radio--${n||"error"}`]:Boolean(a)};return index.h("label",Object.assign({class:clsx.clsx("kol-input-radio",r,i)},l),index.h(InputWrapperFc,Object.assign({},o)))};function getRadioProps(e,t={}){const i={id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,disabled:e._disabled,name:e._name};return"_required"in e&&(i.required=e._required),"_touched"in e&&(i.touched=e._touched),"_msg"in e&&(i.msg=e._msg),Object.assign(Object.assign({},i),t)}const RadioStateWrapper=e=>{var{state:t,inputProps:i}=e,o=tslib_es6.__rest(e,["state","inputProps"]);return index.h(RadioFc,Object.assign({inputProps:getRadioProps(t,i)},o))},defaultStyleCss=()=>'  @layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;  @layer kol-a11y {   :host {          --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));          color: black;     background-color: white;          font-family: Verdana;          letter-spacing: inherit;          word-spacing: inherit;          text-align: left;   }   * {          hyphens: auto;          word-break: break-word;   }                  button,   .kol-input .input {     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);   }      a,   button,   h1,   h2,   h3,   h4,   h5,   h6,   input,   option,   select,   textarea {          color: inherit;          font-family: inherit;          font-size: inherit;          letter-spacing: inherit;          word-spacing: inherit;   }      .visually-hidden {     position: fixed;     top: 0;     left: 0;     width: 1px;     height: 1px;     overflow: hidden;     white-space: nowrap;     clip-path: inset(50%);   } } @layer kol-global {      :is(a, button) {     background-color: transparent;     width: 100%;     margin: 0;     padding: 0;     border: none;        }      [hidden] {     display: none !important;   }   .badge-text-hint {     color: black;     background-color: lightgray;   } } @layer kol-global {   :host {          max-width: 100%;     font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));   }   * {          box-sizing: border-box;   }   .kol-span {          display: flex;     flex-flow: column;     align-items: center;     justify-content: center;        }   .kol-span__container {     display: flex;     align-items: center;   }   a,   button {     cursor: pointer;   }   .kol-span .kol-span__label--hide-label .kol-span__label {     display: none;   }      button:disabled {     color: unset;   }   .disabled label,   .disabled:focus-within label,   [aria-disabled=true],   [aria-disabled=true]:focus,   [disabled],   [disabled]:focus {     opacity: 0.5;     outline: none;     cursor: not-allowed;   }   [aria-disabled=true]:focus .kol-span,   [disabled]:focus .kol-span {     outline: none !important;   } } @layer kol-component {   :host {     display: block;   } } @layer kol-component {   .kol-tooltip {     display: contents;   }   .kol-tooltip__floating {     opacity: 0;     display: none;     position: fixed;          top: 0;     left: 0;          width: var(--kol-tooltip-width, max-content);     min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));     max-width: 90vw;     max-height: 90vh;     animation-direction: normal;          animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);     animation-fill-mode: forwards;     animation-iteration-count: 1;     animation-timing-function: ease-in;   }   .kol-tooltip__floating.hide {     animation-name: hideTooltip;   }   .kol-tooltip__floating.show {     animation-name: showTooltip;   }   .kol-tooltip__arrow {     transform: rotate(45deg);     color: #000;     background-color: #fff;     position: absolute;     z-index: 999;     width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));     height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-tooltip__content {     color: #000;     background-color: #fff;     position: relative;     z-index: 1000;   }   @keyframes hideTooltip {     0% {       opacity: 1;     }     100% {       opacity: 0;       display: none;     }   }   @keyframes showTooltip {     0% {       opacity: 0;     }     100% {       opacity: 1;     }   } } @layer kol-component {   .kol-alert {     display: grid;   }   .kol-alert__container {     display: flex;     place-items: center;   }   .kol-alert__container-content {     flex-grow: 1;   }   .kol-alert__closer {          outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-field-control {     display: grid;     min-height: var(--a11y-min-size);     align-items: center;     justify-content: left;     grid-template-areas: "input label";     grid-template-columns: auto 1fr;     grid-template-rows: auto;   }   .kol-field-control:has(.kol-field-control__hint) {     grid-template-areas: "input label" "hint hint";     grid-template-columns: auto 1fr;     grid-template-rows: auto auto;   }   .kol-field-control--label-align-left:not(.kol-field-control--hide-label) {     grid-template-areas: "label input";     grid-template-columns: 1fr auto;     grid-template-rows: auto;   }   .kol-field-control--label-align-left:not(.kol-field-control--hide-label):has(.kol-field-control__hint) {     grid-template-areas: "label input" "hint hint";     grid-template-columns: 1fr auto;     grid-template-rows: auto auto;   }   .kol-field-control__input {     display: flex;     min-height: var(--a11y-min-size);     align-items: center;     grid-area: input;   }   .kol-field-control__label {     display: flex;     min-height: var(--a11y-min-size);     flex-grow: 1;     align-items: center;     cursor: pointer;     grid-area: label;   }   .kol-field-control__label--visually-hidden {     height: 0;     margin: 0;     padding: 0;     visibility: hidden;   }   .kol-field-control__label-text::after {     content: "";   }   .kol-field-control__tooltip .span-label::after {     content: "";   }   .kol-field-control__hint {     grid-area: hint;   }   .kol-field-control--disabled .kol-field-control__label {     opacity: 0.5;     cursor: not-allowed;   }   .kol-field-control--required .kol-field-control__label-text::after {     content: "*";   }   .kol-field-control--required .kol-field-control__tooltip .span-label::after {     content: "*";   }   .kol-form-field {     display: grid;   }   .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {     cursor: pointer;   }   .kol-form-field--disabled .kol-form-field__label {     opacity: 0.5;   }   .kol-form-field--required .kol-form-field__label-text::after {     content: "*"/"";   }   .kol-form-field--disabled .kol-form-field__hint {     opacity: 0.5;   }   .kol-form-field--required .kol-form-field__tooltip .span-label::after {     content: "*"/"";   }   .kol-input-container {     background-color: transparent;     display: grid;     width: 100%;     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);     align-items: center;     grid-template-columns: 1fr;   }   .kol-input-container:has(> .kol-input-container__adornment--start) {     grid-template-columns: auto 1fr;   }   .kol-input-container:has(> .kol-input-container__adornment--end) {     grid-template-columns: 1fr auto;   }   .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {     grid-template-columns: auto 1fr auto;   }   .kol-input-container__container {     position: relative;   }   .kol-input-container__adornment {     display: flex;     align-items: center;   }   .kol-input-container__adornment .kol-icon {     display: grid;     height: var(--a11y-min-size);     place-items: center;   }   .kol-form-field {     --border-width: 2px;     --input-size: 1.5em;   }   .kol-form-field__label {     display: contents;   }   .kol-form-field__input {     display: flex;     flex-direction: column;   }   .kol-form-field__input--orientation-horizontal {     flex-direction: row;     flex-wrap: wrap;     align-items: flex-start;   }   .kol-form-field--disabled {     opacity: unset;   }   .kol-input-radio {     display: flex;     position: relative;     width: var(--a11y-min-size);     height: var(--a11y-min-size);     align-items: center;     justify-content: center;     cursor: pointer;   }   .kol-input-radio__input {     border-style: solid;     border-radius: 100%;     display: flex;     width: var(--input-size);     min-width: var(--input-size);     height: var(--input-size);     min-height: var(--input-size);     margin: 0;     padding: 0;     border-width: var(--border-width);     appearance: none;     cursor: pointer;   }   .kol-input-radio__input:before {     border-radius: 100%;     width: calc(var(--input-size) / 2);     height: calc(var(--input-size) / 2);     margin: auto;     content: "";   }   .kol-input-radio__input:checked:before {     background-color: #000;   }   @media (forced-colors: active) {     .kol-input-radio__input:checked:before {              background-color: selectedItem !important;     }   }   .kol-input-radio__input:disabled {     opacity: 0.5;     cursor: not-allowed;   }   .kol-input-radio--disabled {     cursor: not-allowed;   } }',KolInputRadio=class{async getValue(){return this._value}async focus(){var e;return Promise.resolve(null===(e=this.getFocusableInput())||void 0===e?void 0:e.focus())}async kolFocus(){return this.focus()}getFocusableInput(){const e=this.state._options,t=Boolean(this.state._disabled),i=e.findIndex(e=>e.value===this.state._value&&!t&&!e.disabled);if(-1!==i){const e=this.inputRefs.get(i);if(e)return e}const o=e.findIndex(e=>!t&&!e.disabled);if(-1!==o)return this.inputRefs.get(o)}getFormFieldProps(){return{state:this.state,component:"fieldset",disabled:Boolean(this.state._disabled),class:clsx.clsx("kol-form-field--radio"),formFieldLabelProps:{component:"legend",class:"kol-form-field__label--legend"},formFieldInputProps:{class:`kol-form-field__input--orientation-${this.state._orientation}`},tooltipAlign:this._tooltipAlign,alert:this.showAsAlert(),hideLabel:!1}}render(){return index.h(FormFieldStateWrapper.FormFieldStateWrapper,Object.assign({key:"1a5ada4341373c623af39a98c98c71de59b89bb4"},this.getFormFieldProps()),this.state._options.map((e,t)=>this.renderOption(e,t)))}calculateDisabled(e){return Boolean(this.state._disabled)||Boolean(e.disabled)}getOptionProps(e,t){return{state:this.state,id:t,hint:e.hint,label:e.label,required:!1,fieldControlLabelProps:{showBadge:!1},disabled:this.calculateDisabled(e)}}getInputProps(e,t,i,o){return{state:this.state,inputProps:Object.assign(Object.assign({id:t,ref:e=>{this.catchInputRef(i)(e),o&&this.catchRef(e)},"aria-label":this.state._hideLabel&&"string"==typeof e.label?e.label:void 0,type:"radio",name:this.state._name||this.state._id,value:`-${i}`,checked:o,disabled:this.calculateDisabled(e)},this.controller.onFacade),{onChange:this.onChange,onClick:void 0,onInput:this.onInput,onKeyDown:this.onKeyDown.bind(this),onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}}renderOption(e,t){const i=`${this.state._id}-${t}`,o=this.state._value===e.value;return index.h(FieldControlStateWrapper.FieldControlStateWrapper,Object.assign({key:i},this.getOptionProps(e,i)),index.h(RadioStateWrapper,Object.assign({},this.getInputProps(e,i,t,o))))}constructor(e){index.registerInstance(this,e),this.inputRefs=new Map,this.catchRef=e=>{this.inputRef=e},this.catchInputRef=e=>t=>{t?this.inputRefs.set(e,t):this.inputRefs.delete(e)},this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._orientation="vertical",this._required=!1,this._tooltipAlign="top",this._touched=!1,this._value=null,this.state={_hideMsg:!1,_id:`id-${dev_utils.nonce()}`,_label:"",_options:[],_orientation:"vertical"},this.inputHasFocus=!1,this.onInput=e=>{if(e.target instanceof HTMLInputElement){const t=this.controller.getOptionByKey(e.target.value);void 0!==t&&this.controller.onFacade.onInput(e,!0,t.value)}},this.onChange=e=>{if(e.target instanceof HTMLInputElement){const t=this.controller.getOptionByKey(e.target.value);void 0!==t&&(this.controller.onFacade.onChange(e,t.value),this._value=t.value)}},this.onKeyDown=e=>{this.controller.onFacade.onKeyDown(e),"Enter"!==e.code&&"NumpadEnter"!==e.code||controller.propagateSubmitEventToForm({form:this.host})},this.controller=new controller$1.InputRadioController(this,"radio",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateTooltipAlign(e){this.controller.validateTooltipAlign(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHint(e){this.controller.validateHint(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e)}validateOrientation(e){this.controller.validateOrientation(e)}validateRequired(e){this.controller.validateRequired(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return index.getElement(this)}static get watchers(){return{_tooltipAlign:[{validateTooltipAlign:0}],_disabled:[{validateDisabled:0}],_hideLabel:[{validateHideLabel:0}],_hideMsg:[{validateHideMsg:0}],_hint:[{validateHint:0}],_id:[{validateId:0}],_label:[{validateLabel:0}],_msg:[{validateMsg:0}],_name:[{validateName:0}],_on:[{validateOn:0}],_options:[{validateOptions:0}],_orientation:[{validateOrientation:0}],_required:[{validateRequired:0}],_syncValueBySelector:[{validateSyncValueBySelector:0}],_touched:[{validateTouched:0}],_value:[{validateValue:0}]}}};KolInputRadio.style={default:defaultStyleCss()},exports.kol_input_radio=KolInputRadio;

package/dist/cjs/kol-input-range.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-uT47A9Jc.js"),tslib_es6=require("./tslib.es6-7DbU_BSw.js"),clsx=require("./clsx-CkZlkaek.js"),FormFieldStateWrapper=require("./FormFieldStateWrapper-B2LPpMpo.js"),controllerIcon=require("./controller-icon-9udvsM5R.js"),InputStateWrapper=require("./InputStateWrapper-uvFi_BbH.js"),dev_utils=require("./dev.utils-fZEgoGGu.js"),controller=require("./controller-Q-LXBPh4.js");require("./common-Cd2qH809.js");var autoComplete=require("./auto-complete-DQ9TPAgi.js"),suggestions=require("./suggestions-BjiW0xio.js");require("./access-and-short-key-BExF929g.js"),require("./disabled-DT-7CUov.js"),require("./hide-label-DdGk9NfD.js"),require("./label-Nicf9N_T.js"),require("./tooltip-align-WJPFINTL.js"),require("./align-CGG5V8xM.js"),require("./events-cX8h6I3p.js"),require("./associated.controller-jhz1Ef5Z.js"),require("./bootstrap-DmmGbpjB.js"),require("./component-names-CuI-0Pbo.js"),require("./i18n-BnIFsVIa.js"),require("./isObject-DMA85Fq4.js"),require("./reuse-Cs36Ddzu.js"),require("./i18n-DNWGj4j8.js"),require("./InternalUnderlinedBadgeText-uCh_T5VD.js"),require("./Alert-Bj1BTIEj.js"),require("./bem-Bu0VYjZa.js"),require("./browser-D7A31aEp.js"),require("./Heading-BZTrj6_i.js"),require("./Icon-B9T-4CsE.js"),require("./icons-D_PtPRwb.js"),require("./Input-BCYP3Fc4.js");class InputRangeController extends controllerIcon.InputIconController{constructor(e,n,t){super(e,n,t),this.component=e}validateAutoComplete(e){autoComplete.validateAutoComplete(this.component,e)}validateMax(e){this.validateNumber("_max",e)}validateMin(e){this.validateNumber("_min",e)}validateStep(e){this.validateNumber("_step",e)}validateSuggestions(e){suggestions.validateSuggestions(this.component,e)}validateValue(e){this.validateNumber("_value",e),this.component._value=e,this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateStep(this.component._step),this.validateSuggestions(this.component._suggestions),this.validateValue(this.component._value)}}const defaultStyleCss='/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don\'t want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: "*"/"";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: "*"/"";\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n  .kol-input-range__inputs-wrapper {\n    display: flex;\n    flex-grow: 1;\n    flex-direction: row;\n    align-items: center;\n  }\n  .kol-input-range__input--number {\n    width: var(--kolibri-input-range--input-number--width);\n  }\n  .kol-input-range__input--range {\n    background-color: #d3d3d3;\n    display: inline-block;\n    /* Design-Hack - related with flex-grow */\n    width: 0;\n    height: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    padding: 0;\n    flex-grow: 1;\n    line-height: 1.5;\n    appearance: none;\n    border: 1px solid #000;\n  }\n  .kol-input-range__input:not(:disabled).kol-input-range__input--range::-webkit-slider-thumb {\n    cursor: pointer;\n  }\n  .kol-input-range__input--range::-webkit-slider-thumb {\n    background-color: #000;\n    border-radius: 20px;\n    width: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    -webkit-appearance: none;\n  }\n  @media (prefers-contrast: more) or (forced-colors: active) {\n    .kol-input-range__input--range::-webkit-slider-thumb {\n      outline: 1px solid currentColor;\n    }\n  }\n  .kol-input-range__input:not(:disabled).kol-input-range__input--range::-moz-range-thumb {\n    cursor: pointer;\n  }\n  .kol-input-range__input--range::-moz-range-thumb {\n    background-color: #000;\n    border-radius: 20px;\n    width: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    -moz-appearance: none;\n  }\n}',KolInputRange=class{async focus(){var e;return Promise.resolve(null===(e=this.refInputNumber)||void 0===e?void 0:e.focus())}async kolFocus(){return this.focus()}getSanitizedFloatValue(e){const n=parseFloat(e);return this.state._max&&n>this.state._max?this.state._max:this.state._min&&n<this.state._min?this.state._min:n}remapValue(e){return"NumberString"===this._initialValueType?String(e):e}async getValue(){if(void 0!==this.refInputNumber){const e=this.refInputNumber.value,n=this.getSanitizedFloatValue(e);return this.remapValue(n)}}componentDidLoad(){var e;!this._value&&(null===(e=this.refInputRange)||void 0===e?void 0:e.value)&&this.validateValue(parseFloat(this.refInputRange.value))}getFormFieldProps(){return{state:this.state,class:clsx.clsx("kol-input-range","range"),tooltipAlign:this._tooltipAlign,alert:this.showAsAlert()}}getGenericInputProps(){const e=this.state,n=tslib_es6.__rest(e,["_suggestions"]);return Object.assign(Object.assign({state:Object.assign(Object.assign({},n),{_suggestions:[]})},this.controller.onFacade),{onChange:this.onChange,onInput:this.onInput,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}get hasSuggestions(){return Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0}getInputRangeProps(){return Object.assign(Object.assign({},this.getGenericInputProps()),{name:this.state._name?`${this.state._name}-range`:void 0,list:this.hasSuggestions?`${this.state._id}-list`:void 0,type:"range",tabIndex:-1,id:void 0,"aria-hidden":"true",ref:this.catchInputRangeRef})}getInputNumberProps(){return Object.assign(Object.assign({},this.getGenericInputProps()),{name:this.state._name?`${this.state._name}-number`:void 0,list:this.hasSuggestions?`${this.state._id}-list`:void 0,type:"number",ref:this.catchInputNumberRef,onKeyDown:this.onKeyDown})}setInitialValueType(e){this.controller.isNumberString(e)?this._initialValueType="NumberString":this._initialValueType="number"}render(){const e={"--kolibri-input-range--input-number--width":`calc(${String(this.state._max).length}ch + 2em)`};return index.h(FormFieldStateWrapper.FormFieldStateWrapper,Object.assign({key:"a910d0bb8de191e293db17e94c60583f4c2c77d8"},this.getFormFieldProps()),index.h(controllerIcon.InputContainerStateWrapperFc,{key:"da96a03aa89386f355fcfbba0cf2d57bbd234a95",state:this.state},index.h("div",{key:"c24b4097a08283a425c5304bbdf57ff898528495",class:"kol-input-range__inputs-wrapper",style:e},index.h(InputStateWrapper.InputStateWrapper,Object.assign({key:"600e5633f2e19b187da6f0159f72dd4e2dd45672",class:"kol-input-range__input kol-input-range__input--range"},this.getInputRangeProps())),index.h(InputStateWrapper.InputStateWrapper,Object.assign({key:"ead61404d1106e6a7beac4847b05f88e452f5edd",class:"kol-input-range__input kol-input-range__input--number"},this.getInputNumberProps()))),this.hasSuggestions&&index.h(InputStateWrapper.SuggestionsFc,{key:"f07c941fe69b6d31ccba62af4d3a567ce5e456e7",id:this.state._id,suggestions:this.state._suggestions})))}constructor(e){index.registerInstance(this,e),this.catchInputNumberRef=e=>{var n;e&&(this.refInputNumber=e,!this._value&&(null===(n=this.refInputNumber)||void 0===n?void 0:n.value)&&this.validateValue(parseFloat(this.refInputNumber.value)))},this.catchInputRangeRef=e=>{e&&(this.refInputRange=e)},this.onInput=e=>{const n=e.target.value,t=this.getSanitizedFloatValue(n);this.controller.onFacade.onInput(e,!0,this.remapValue(t))},this.onChange=e=>{const n=e.target.value,t=this.getSanitizedFloatValue(n),i=this.remapValue(t);this.validateValue(i),this.controller.onFacade.onChange(e,i)},this.onKeyDown=e=>{this.controller.onFacade.onKeyDown(e),"Enter"!==e.code&&"NumpadEnter"!==e.code||controller.propagateSubmitEventToForm({form:this.host})},this._autoComplete="off",this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._max=100,this._min=0,this._tooltipAlign="top",this._touched=!1,this.state={_hideMsg:!1,_id:`id-${dev_utils.nonce()}`,_label:"",_suggestions:[],_min:0,_max:100},this._initialValueType="number",this.inputHasFocus=!1,this.controller=new InputRangeController(this,"range",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAutoComplete(e){this.controller.validateAutoComplete(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMax(e){this.controller.validateMax(e)}validateMin(e){this.controller.validateMin(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateStep(e){this.controller.validateStep(e)}validateSuggestions(e){this.controller.validateSuggestions(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e),void 0!==e&&this.setInitialValueType(e)}componentWillLoad(){void 0!==this._value&&this.setInitialValueType(this._value),this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return index.getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_max:["validateMax"],_min:["validateMin"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_shortKey:["validateShortKey"],_step:["validateStep"],_suggestions:["validateSuggestions"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}}};KolInputRange.style={default:defaultStyleCss},exports.kol_input_range=KolInputRange;
+"use strict";var index=require("./index-CUwAAV9q.js"),tslib_es6=require("./tslib.es6-7DbU_BSw.js"),clsx=require("./clsx-CkZlkaek.js"),FormFieldStateWrapper=require("./FormFieldStateWrapper-BFcysaVO.js"),controllerIcon=require("./controller-icon-oRdlfcl8.js"),InputStateWrapper=require("./InputStateWrapper-Dc3UUVaW.js"),dev_utils=require("./dev.utils-7DjklDXI.js"),controller=require("./controller-Q-LXBPh4.js");require("./common-Cd2qH809.js");var autoComplete=require("./auto-complete-DQ9TPAgi.js"),suggestions=require("./suggestions-BjiW0xio.js");require("./access-and-short-key-BExF929g.js"),require("./disabled-DT-7CUov.js"),require("./hide-label-DdGk9NfD.js"),require("./label-Nicf9N_T.js"),require("./tooltip-align-WJPFINTL.js"),require("./align-CGG5V8xM.js"),require("./events-cX8h6I3p.js"),require("./associated.controller-jhz1Ef5Z.js"),require("./bootstrap-DmmGbpjB.js"),require("./component-names-CuI-0Pbo.js"),require("./i18n-BnIFsVIa.js"),require("./isObject-DMA85Fq4.js"),require("./reuse-Cs36Ddzu.js"),require("./i18n-DNWGj4j8.js"),require("./InternalUnderlinedBadgeText-BmcMXSlV.js"),require("./Alert-iB2nNldZ.js"),require("./bem-CWXmxX43.js"),require("./browser-D7A31aEp.js"),require("./Heading-CXo3APiB.js"),require("./Icon-CA2N7E-m.js"),require("./icons-D_PtPRwb.js"),require("./Input-BG9SwAmi.js");class InputRangeController extends controllerIcon.InputIconController{constructor(e,t,i){super(e,t,i),this.component=e}validateAutoComplete(e){autoComplete.validateAutoComplete(this.component,e)}validateMax(e){this.validateNumber("_max",e)}validateMin(e){this.validateNumber("_min",e)}validateStep(e){this.validateNumber("_step",e)}validateSuggestions(e){suggestions.validateSuggestions(this.component,e)}validateValue(e){this.validateNumber("_value",e),this.component._value=e,this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateStep(this.component._step),this.validateSuggestions(this.component._suggestions),this.validateValue(this.component._value)}}const defaultStyleCss=()=>' @layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;   @layer kol-a11y {   :host {          --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));          color: black;     background-color: white;          font-family: Verdana;          letter-spacing: inherit;          word-spacing: inherit;          text-align: left;   }   * {          hyphens: auto;          word-break: break-word;   }                  button,   .kol-input .input {     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);   }      a,   button,   h1,   h2,   h3,   h4,   h5,   h6,   input,   option,   select,   textarea {          color: inherit;          font-family: inherit;          font-size: inherit;          letter-spacing: inherit;          word-spacing: inherit;   }      .visually-hidden {     position: fixed;     top: 0;     left: 0;     width: 1px;     height: 1px;     overflow: hidden;     white-space: nowrap;     clip-path: inset(50%);   } } @layer kol-global {      :is(a, button) {     background-color: transparent;     width: 100%;     margin: 0;     padding: 0;     border: none;        }      [hidden] {     display: none !important;   }   .badge-text-hint {     color: black;     background-color: lightgray;   } } @layer kol-global {   :host {          max-width: 100%;     font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));   }   * {          box-sizing: border-box;   }   .kol-span {          display: flex;     flex-flow: column;     align-items: center;     justify-content: center;        }   .kol-span__container {     display: flex;     align-items: center;   }   a,   button {     cursor: pointer;   }   .kol-span .kol-span__label--hide-label .kol-span__label {     display: none;   }      button:disabled {     color: unset;   }   .disabled label,   .disabled:focus-within label,   [aria-disabled=true],   [aria-disabled=true]:focus,   [disabled],   [disabled]:focus {     opacity: 0.5;     outline: none;     cursor: not-allowed;   }   [aria-disabled=true]:focus .kol-span,   [disabled]:focus .kol-span {     outline: none !important;   } } @layer kol-component {   :host {     display: block;   } } @layer kol-component {   .kol-tooltip {     display: contents;   }   .kol-tooltip__floating {     opacity: 0;     display: none;     position: fixed;          top: 0;     left: 0;          width: var(--kol-tooltip-width, max-content);     min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));     max-width: 90vw;     max-height: 90vh;     animation-direction: normal;          animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);     animation-fill-mode: forwards;     animation-iteration-count: 1;     animation-timing-function: ease-in;   }   .kol-tooltip__floating.hide {     animation-name: hideTooltip;   }   .kol-tooltip__floating.show {     animation-name: showTooltip;   }   .kol-tooltip__arrow {     transform: rotate(45deg);     color: #000;     background-color: #fff;     position: absolute;     z-index: 999;     width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));     height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-tooltip__content {     color: #000;     background-color: #fff;     position: relative;     z-index: 1000;   }   @keyframes hideTooltip {     0% {       opacity: 1;     }     100% {       opacity: 0;       display: none;     }   }   @keyframes showTooltip {     0% {       opacity: 0;     }     100% {       opacity: 1;     }   } } @layer kol-component {   .kol-alert {     display: grid;   }   .kol-alert__container {     display: flex;     place-items: center;   }   .kol-alert__container-content {     flex-grow: 1;   }   .kol-alert__closer {          outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-form-field {     display: grid;   }   .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {     cursor: pointer;   }   .kol-form-field--disabled .kol-form-field__label {     opacity: 0.5;   }   .kol-form-field--required .kol-form-field__label-text::after {     content: "*"/"";   }   .kol-form-field--disabled .kol-form-field__hint {     opacity: 0.5;   }   .kol-form-field--required .kol-form-field__tooltip .span-label::after {     content: "*"/"";   }   .kol-input-container {     background-color: transparent;     display: grid;     width: 100%;     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);     align-items: center;     grid-template-columns: 1fr;   }   .kol-input-container:has(> .kol-input-container__adornment--start) {     grid-template-columns: auto 1fr;   }   .kol-input-container:has(> .kol-input-container__adornment--end) {     grid-template-columns: 1fr auto;   }   .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {     grid-template-columns: auto 1fr auto;   }   .kol-input-container__container {     position: relative;   }   .kol-input-container__adornment {     display: flex;     align-items: center;   }   .kol-input-container__adornment .kol-icon {     display: grid;     height: var(--a11y-min-size);     place-items: center;   }   .kol-input {     background-color: transparent;     width: 100%;     min-width: var(--a11y-min-size);   }   .kol-input:focus {     outline: none;   }   .kol-input-range__inputs-wrapper {     display: flex;     flex-grow: 1;     flex-direction: row;     align-items: center;   }   .kol-input-range__input--number {     width: var(--kolibri-input-range--input-number--width);   }   .kol-input-range__input--range {     background-color: #d3d3d3;     display: inline-block;          width: 0;     height: calc(8 * 1rem / var(--kolibri-root-font-size, 16));     margin: 0;     padding: 0;     flex-grow: 1;     line-height: 1.5;     appearance: none;     border: 1px solid #000;   }   .kol-input-range__input:not(:disabled).kol-input-range__input--range::-webkit-slider-thumb {     cursor: pointer;   }   .kol-input-range__input--range::-webkit-slider-thumb {     background-color: #000;     border-radius: 20px;     width: calc(20 * 1rem / var(--kolibri-root-font-size, 16));     height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));     -webkit-appearance: none;   }   @media (prefers-contrast: more) or (forced-colors: active) {     .kol-input-range__input--range::-webkit-slider-thumb {       outline: 1px solid currentColor;     }   }   .kol-input-range__input:not(:disabled).kol-input-range__input--range::-moz-range-thumb {     cursor: pointer;   }   .kol-input-range__input--range::-moz-range-thumb {     background-color: #000;     border-radius: 20px;     width: calc(20 * 1rem / var(--kolibri-root-font-size, 16));     height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));     -moz-appearance: none;   } }',KolInputRange=class{async focus(){var e;return Promise.resolve(null===(e=this.refInputNumber)||void 0===e?void 0:e.focus())}async kolFocus(){return this.focus()}getSanitizedFloatValue(e){const t=parseFloat(e);return this.state._max&&t>this.state._max?this.state._max:this.state._min&&t<this.state._min?this.state._min:t}remapValue(e){return"NumberString"===this._initialValueType?String(e):e}async getValue(){if(void 0!==this.refInputNumber){const e=this.refInputNumber.value,t=this.getSanitizedFloatValue(e);return this.remapValue(t)}}componentDidLoad(){var e;!this._value&&(null===(e=this.refInputRange)||void 0===e?void 0:e.value)&&this.validateValue(parseFloat(this.refInputRange.value))}getFormFieldProps(){return{state:this.state,class:clsx.clsx("kol-input-range","range"),tooltipAlign:this._tooltipAlign,alert:this.showAsAlert()}}getGenericInputProps(){const e=this.state,t=tslib_es6.__rest(e,["_suggestions"]);return Object.assign(Object.assign({state:Object.assign(Object.assign({},t),{_suggestions:[]})},this.controller.onFacade),{onChange:this.onChange,onInput:this.onInput,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}get hasSuggestions(){return Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0}getInputRangeProps(){return Object.assign(Object.assign({},this.getGenericInputProps()),{name:this.state._name?`${this.state._name}-range`:void 0,list:this.hasSuggestions?`${this.state._id}-list`:void 0,type:"range",tabIndex:-1,id:void 0,"aria-hidden":"true",ref:this.catchInputRangeRef})}getInputNumberProps(){return Object.assign(Object.assign({},this.getGenericInputProps()),{name:this.state._name?`${this.state._name}-number`:void 0,list:this.hasSuggestions?`${this.state._id}-list`:void 0,type:"number",ref:this.catchInputNumberRef,onKeyDown:this.onKeyDown})}setInitialValueType(e){this.controller.isNumberString(e)?this._initialValueType="NumberString":this._initialValueType="number"}render(){const e={"--kolibri-input-range--input-number--width":`calc(${String(this.state._max).length}ch + 2em)`};return index.h(FormFieldStateWrapper.FormFieldStateWrapper,Object.assign({key:"a910d0bb8de191e293db17e94c60583f4c2c77d8"},this.getFormFieldProps()),index.h(controllerIcon.InputContainerStateWrapperFc,{key:"da96a03aa89386f355fcfbba0cf2d57bbd234a95",state:this.state},index.h("div",{key:"c24b4097a08283a425c5304bbdf57ff898528495",class:"kol-input-range__inputs-wrapper",style:e},index.h(InputStateWrapper.InputStateWrapper,Object.assign({key:"600e5633f2e19b187da6f0159f72dd4e2dd45672",class:"kol-input-range__input kol-input-range__input--range"},this.getInputRangeProps())),index.h(InputStateWrapper.InputStateWrapper,Object.assign({key:"ead61404d1106e6a7beac4847b05f88e452f5edd",class:"kol-input-range__input kol-input-range__input--number"},this.getInputNumberProps()))),this.hasSuggestions&&index.h(InputStateWrapper.SuggestionsFc,{key:"f07c941fe69b6d31ccba62af4d3a567ce5e456e7",id:this.state._id,suggestions:this.state._suggestions})))}constructor(e){index.registerInstance(this,e),this.catchInputNumberRef=e=>{var t;e&&(this.refInputNumber=e,!this._value&&(null===(t=this.refInputNumber)||void 0===t?void 0:t.value)&&this.validateValue(parseFloat(this.refInputNumber.value)))},this.catchInputRangeRef=e=>{e&&(this.refInputRange=e)},this.onInput=e=>{const t=e.target.value,i=this.getSanitizedFloatValue(t);this.controller.onFacade.onInput(e,!0,this.remapValue(i))},this.onChange=e=>{const t=e.target.value,i=this.getSanitizedFloatValue(t),a=this.remapValue(i);this.validateValue(a),this.controller.onFacade.onChange(e,a)},this.onKeyDown=e=>{this.controller.onFacade.onKeyDown(e),"Enter"!==e.code&&"NumpadEnter"!==e.code||controller.propagateSubmitEventToForm({form:this.host})},this._autoComplete="off",this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._max=100,this._min=0,this._tooltipAlign="top",this._touched=!1,this.state={_hideMsg:!1,_id:`id-${dev_utils.nonce()}`,_label:"",_suggestions:[],_min:0,_max:100},this._initialValueType="number",this.inputHasFocus=!1,this.controller=new InputRangeController(this,"range",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAutoComplete(e){this.controller.validateAutoComplete(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMax(e){this.controller.validateMax(e)}validateMin(e){this.controller.validateMin(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateStep(e){this.controller.validateStep(e)}validateSuggestions(e){this.controller.validateSuggestions(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e),void 0!==e&&this.setInitialValueType(e)}componentWillLoad(){void 0!==this._value&&this.setInitialValueType(this._value),this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return index.getElement(this)}static get watchers(){return{_accessKey:[{validateAccessKey:0}],_autoComplete:[{validateAutoComplete:0}],_disabled:[{validateDisabled:0}],_hideMsg:[{validateHideMsg:0}],_hideLabel:[{validateHideLabel:0}],_hint:[{validateHint:0}],_icons:[{validateIcons:0}],_id:[{validateId:0}],_label:[{validateLabel:0}],_max:[{validateMax:0}],_min:[{validateMin:0}],_msg:[{validateMsg:0}],_name:[{validateName:0}],_on:[{validateOn:0}],_shortKey:[{validateShortKey:0}],_step:[{validateStep:0}],_suggestions:[{validateSuggestions:0}],_syncValueBySelector:[{validateSyncValueBySelector:0}],_touched:[{validateTouched:0}],_value:[{validateValue:0}]}}};KolInputRange.style={default:defaultStyleCss()},exports.kol_input_range=KolInputRange;

package/dist/cjs/kol-input-text.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-uT47A9Jc.js"),clsx=require("./clsx-CkZlkaek.js"),FormFieldStateWrapper=require("./FormFieldStateWrapper-B2LPpMpo.js"),controllerIcon=require("./controller-icon-9udvsM5R.js"),InputStateWrapper=require("./InputStateWrapper-uvFi_BbH.js"),dev_utils=require("./dev.utils-fZEgoGGu.js"),controller=require("./controller-Q-LXBPh4.js"),controller$1=require("./controller-DLwQQPHC.js");require("./common-Cd2qH809.js"),require("./access-and-short-key-BExF929g.js"),require("./disabled-DT-7CUov.js"),require("./hide-label-DdGk9NfD.js"),require("./label-Nicf9N_T.js"),require("./tooltip-align-WJPFINTL.js"),require("./align-CGG5V8xM.js"),require("./events-cX8h6I3p.js"),require("./associated.controller-jhz1Ef5Z.js"),require("./bootstrap-DmmGbpjB.js"),require("./component-names-CuI-0Pbo.js"),require("./i18n-BnIFsVIa.js"),require("./isObject-DMA85Fq4.js"),require("./tslib.es6-7DbU_BSw.js"),require("./reuse-Cs36Ddzu.js"),require("./i18n-DNWGj4j8.js"),require("./InternalUnderlinedBadgeText-uCh_T5VD.js"),require("./Alert-Bj1BTIEj.js"),require("./bem-Bu0VYjZa.js"),require("./browser-D7A31aEp.js"),require("./Heading-BZTrj6_i.js"),require("./Icon-B9T-4CsE.js"),require("./icons-D_PtPRwb.js"),require("./Input-BCYP3Fc4.js"),require("./spell-check-Bkq4G9L7.js"),require("./suggestions-BjiW0xio.js"),require("./controller-DmfL38P4.js"),require("./auto-complete-DQ9TPAgi.js"),require("./max-length-behavior-Bvbwhaxv.js"),require("./placeholder-BncK-3gZ.js"),require("./read-only-dIvCm73W.js"),require("./required-CXU7vdyH.js");const defaultStyleCss='/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don\'t want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: "*"/"";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: "*"/"";\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}',KolInputText=class{async getValue(){var e;return null===(e=this.inputRef)||void 0===e?void 0:e.value}async focus(){var e;return Promise.resolve(null===(e=this.inputRef)||void 0===e?void 0:e.focus())}async kolFocus(){return this.focus()}async selectionStart(){var e;return Promise.resolve(null===(e=this.inputRef)||void 0===e?void 0:e.selectionStart)}async selectioconEnd(){var e;return Promise.resolve(null===(e=this.inputRef)||void 0===e?void 0:e.selectionEnd)}async setSelectionRange(e,t,n){var i;null===(i=this.inputRef)||void 0===i||i.setSelectionRange(e,t,n)}async setSelectionStart(e){var t;null===(t=this.inputRef)||void 0===t||t.setSelectionRange(e,e)}async setRangeText(e,t,n,i){var o,a;t&&n?null===(o=this.inputRef)||void 0===o||o.setRangeText(e,t,n,i):null===(a=this.inputRef)||void 0===a||a.setRangeText(e)}getFormFieldProps(){return{state:this.state,class:clsx.clsx("kol-input-text",this.state._type,{"has-value":this.state._hasValue,"kol-form-field--has-counter":this.controller.hasSoftCharacterLimit()||this.controller.hasCounter()}),tooltipAlign:this._tooltipAlign,alert:this.showAsAlert()}}getInputProps(){const e="number"==typeof this.state._maxLength?[`${this.state._id}-character-limit-hint`]:void 0;return Object.assign(Object.assign({ref:this.catchRef,state:this.state,ariaDescribedBy:e},this.controller.onFacade),{onBlur:this.onBlur,onChange:this.onChange,onFocus:this.onFocus,onInput:this.onInput,onKeyDown:this.onKeyDown})}render(){return index.h(FormFieldStateWrapper.FormFieldStateWrapper,Object.assign({key:"d86ef7efc8ffb8893f60c3f5d129a1bf368f39d3"},this.getFormFieldProps()),index.h(controllerIcon.InputContainerStateWrapperFc,{key:"7038d9b03bedb83fa603ec889404c9aa2f376543",state:this.state},index.h(InputStateWrapper.InputStateWrapper,Object.assign({key:"ea63bc12e147832944b1f450d9d65bed39989dd0"},this.getInputProps()))))}constructor(e){index.registerInstance(this,e),this.catchRef=e=>{this.inputRef=e},this.onBlur=e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1},this.onChange=e=>{var t;const n=null===(t=this.inputRef)||void 0===t?void 0:t.value;this.oldValue!==n&&(this.oldValue=n),this.controller.onFacade.onChange(e)},this.onFocus=e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},this.onInput=e=>{var t,n;this._value=null!==(n=null===(t=this.inputRef)||void 0===t?void 0:t.value)&&void 0!==n?n:"",this.controller.onFacade.onInput(e)},this.onKeyDown=e=>{this.controller.onFacade.onKeyDown(e),"Enter"!==e.code&&"NumpadEnter"!==e.code||controller.propagateSubmitEventToForm({form:this.host})},this._autoComplete="off",this._hasCounter=!1,this._maxLengthBehavior="hard",this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._readOnly=!1,this._required=!1,this._tooltipAlign="top",this._touched=!1,this._type="text",this.state={_currentLength:0,_currentLengthDebounced:0,_hasValue:!1,_hideMsg:!1,_id:`id-${dev_utils.nonce()}`,_label:"",_suggestions:[],_type:"text"},this.inputHasFocus=!1,this.controller=new controller$1.InputTextController(this,"text",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAutoComplete(e){this.controller.validateAutoComplete(e)}validateMaxLengthBehavior(e){this.controller.validateMaxLengthBehavior(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHasCounter(e){this.controller.validateHasCounter(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMaxLength(e){this.controller.validateMaxLength(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePattern(e){this.controller.validatePattern(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSpellCheck(e){this.controller.validateSpellCheck(e)}validateSuggestions(e){this.controller.validateSuggestions(e)}validateSmartButton(e){this.controller.validateSmartButton(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateType(e){this.controller.validateType(e)}validateValue(e){this.controller.validateValue(e),this.oldValue=e}componentWillLoad(){this._touched=!0===this._touched,this.oldValue=this._value,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(e=>this.state._hasValue=!!e)}get host(){return index.getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_autoComplete:["validateAutoComplete"],_maxLengthBehavior:["validateMaxLengthBehavior"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hasCounter:["validateHasCounter"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_spellCheck:["validateSpellCheck"],_suggestions:["validateSuggestions"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};KolInputText.style={default:defaultStyleCss},exports.kol_input_text=KolInputText;
+"use strict";var index=require("./index-CUwAAV9q.js"),clsx=require("./clsx-CkZlkaek.js"),FormFieldStateWrapper=require("./FormFieldStateWrapper-BFcysaVO.js"),controllerIcon=require("./controller-icon-oRdlfcl8.js"),InputStateWrapper=require("./InputStateWrapper-Dc3UUVaW.js"),dev_utils=require("./dev.utils-7DjklDXI.js"),controller=require("./controller-Q-LXBPh4.js"),controller$1=require("./controller-r0aj2ftA.js");require("./common-Cd2qH809.js"),require("./access-and-short-key-BExF929g.js"),require("./disabled-DT-7CUov.js"),require("./hide-label-DdGk9NfD.js"),require("./label-Nicf9N_T.js"),require("./tooltip-align-WJPFINTL.js"),require("./align-CGG5V8xM.js"),require("./events-cX8h6I3p.js"),require("./associated.controller-jhz1Ef5Z.js"),require("./bootstrap-DmmGbpjB.js"),require("./component-names-CuI-0Pbo.js"),require("./i18n-BnIFsVIa.js"),require("./isObject-DMA85Fq4.js"),require("./tslib.es6-7DbU_BSw.js"),require("./reuse-Cs36Ddzu.js"),require("./i18n-DNWGj4j8.js"),require("./InternalUnderlinedBadgeText-BmcMXSlV.js"),require("./Alert-iB2nNldZ.js"),require("./bem-CWXmxX43.js"),require("./browser-D7A31aEp.js"),require("./Heading-CXo3APiB.js"),require("./Icon-CA2N7E-m.js"),require("./icons-D_PtPRwb.js"),require("./Input-BG9SwAmi.js"),require("./spell-check-Bkq4G9L7.js"),require("./suggestions-BjiW0xio.js"),require("./controller-DHLdEAgl.js"),require("./auto-complete-DQ9TPAgi.js"),require("./max-length-behavior-Bvbwhaxv.js"),require("./placeholder-BncK-3gZ.js"),require("./read-only-dIvCm73W.js"),require("./required-CXU7vdyH.js");const defaultStyleCss=()=>' @layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;   @layer kol-a11y {   :host {          --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));          color: black;     background-color: white;          font-family: Verdana;          letter-spacing: inherit;          word-spacing: inherit;          text-align: left;   }   * {          hyphens: auto;          word-break: break-word;   }                  button,   .kol-input .input {     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);   }      a,   button,   h1,   h2,   h3,   h4,   h5,   h6,   input,   option,   select,   textarea {          color: inherit;          font-family: inherit;          font-size: inherit;          letter-spacing: inherit;          word-spacing: inherit;   }      .visually-hidden {     position: fixed;     top: 0;     left: 0;     width: 1px;     height: 1px;     overflow: hidden;     white-space: nowrap;     clip-path: inset(50%);   } } @layer kol-global {      :is(a, button) {     background-color: transparent;     width: 100%;     margin: 0;     padding: 0;     border: none;        }      [hidden] {     display: none !important;   }   .badge-text-hint {     color: black;     background-color: lightgray;   } } @layer kol-global {   :host {          max-width: 100%;     font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));   }   * {          box-sizing: border-box;   }   .kol-span {          display: flex;     flex-flow: column;     align-items: center;     justify-content: center;        }   .kol-span__container {     display: flex;     align-items: center;   }   a,   button {     cursor: pointer;   }   .kol-span .kol-span__label--hide-label .kol-span__label {     display: none;   }      button:disabled {     color: unset;   }   .disabled label,   .disabled:focus-within label,   [aria-disabled=true],   [aria-disabled=true]:focus,   [disabled],   [disabled]:focus {     opacity: 0.5;     outline: none;     cursor: not-allowed;   }   [aria-disabled=true]:focus .kol-span,   [disabled]:focus .kol-span {     outline: none !important;   } } @layer kol-component {   :host {     display: block;   } } @layer kol-component {   .kol-tooltip {     display: contents;   }   .kol-tooltip__floating {     opacity: 0;     display: none;     position: fixed;          top: 0;     left: 0;          width: var(--kol-tooltip-width, max-content);     min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));     max-width: 90vw;     max-height: 90vh;     animation-direction: normal;          animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);     animation-fill-mode: forwards;     animation-iteration-count: 1;     animation-timing-function: ease-in;   }   .kol-tooltip__floating.hide {     animation-name: hideTooltip;   }   .kol-tooltip__floating.show {     animation-name: showTooltip;   }   .kol-tooltip__arrow {     transform: rotate(45deg);     color: #000;     background-color: #fff;     position: absolute;     z-index: 999;     width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));     height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-tooltip__content {     color: #000;     background-color: #fff;     position: relative;     z-index: 1000;   }   @keyframes hideTooltip {     0% {       opacity: 1;     }     100% {       opacity: 0;       display: none;     }   }   @keyframes showTooltip {     0% {       opacity: 0;     }     100% {       opacity: 1;     }   } } @layer kol-component {   .kol-alert {     display: grid;   }   .kol-alert__container {     display: flex;     place-items: center;   }   .kol-alert__container-content {     flex-grow: 1;   }   .kol-alert__closer {          outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-form-field {     display: grid;   }   .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {     cursor: pointer;   }   .kol-form-field--disabled .kol-form-field__label {     opacity: 0.5;   }   .kol-form-field--required .kol-form-field__label-text::after {     content: "*"/"";   }   .kol-form-field--disabled .kol-form-field__hint {     opacity: 0.5;   }   .kol-form-field--required .kol-form-field__tooltip .span-label::after {     content: "*"/"";   }   .kol-input-container {     background-color: transparent;     display: grid;     width: 100%;     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);     align-items: center;     grid-template-columns: 1fr;   }   .kol-input-container:has(> .kol-input-container__adornment--start) {     grid-template-columns: auto 1fr;   }   .kol-input-container:has(> .kol-input-container__adornment--end) {     grid-template-columns: 1fr auto;   }   .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {     grid-template-columns: auto 1fr auto;   }   .kol-input-container__container {     position: relative;   }   .kol-input-container__adornment {     display: flex;     align-items: center;   }   .kol-input-container__adornment .kol-icon {     display: grid;     height: var(--a11y-min-size);     place-items: center;   }   .kol-input {     background-color: transparent;     width: 100%;     min-width: var(--a11y-min-size);   }   .kol-input:focus {     outline: none;   } }',KolInputText=class{async getValue(){var e;return null===(e=this.inputRef)||void 0===e?void 0:e.value}async focus(){var e;return Promise.resolve(null===(e=this.inputRef)||void 0===e?void 0:e.focus())}async kolFocus(){return this.focus()}async selectionStart(){var e;return Promise.resolve(null===(e=this.inputRef)||void 0===e?void 0:e.selectionStart)}async selectioconEnd(){var e;return Promise.resolve(null===(e=this.inputRef)||void 0===e?void 0:e.selectionEnd)}async setSelectionRange(e,t,i){var o;null===(o=this.inputRef)||void 0===o||o.setSelectionRange(e,t,i)}async setSelectionStart(e){var t;null===(t=this.inputRef)||void 0===t||t.setSelectionRange(e,e)}async setRangeText(e,t,i,o){var a,l;t&&i?null===(a=this.inputRef)||void 0===a||a.setRangeText(e,t,i,o):null===(l=this.inputRef)||void 0===l||l.setRangeText(e)}getFormFieldProps(){return{state:this.state,class:clsx.clsx("kol-input-text",this.state._type,{"has-value":this.state._hasValue,"kol-form-field--has-counter":this.controller.hasSoftCharacterLimit()||this.controller.hasCounter()}),tooltipAlign:this._tooltipAlign,alert:this.showAsAlert()}}getInputProps(){const e="number"==typeof this.state._maxLength?[`${this.state._id}-character-limit-hint`]:void 0;return Object.assign(Object.assign({ref:this.catchRef,state:this.state,ariaDescribedBy:e},this.controller.onFacade),{onBlur:this.onBlur,onChange:this.onChange,onFocus:this.onFocus,onInput:this.onInput,onKeyDown:this.onKeyDown})}render(){return index.h(FormFieldStateWrapper.FormFieldStateWrapper,Object.assign({key:"d86ef7efc8ffb8893f60c3f5d129a1bf368f39d3"},this.getFormFieldProps()),index.h(controllerIcon.InputContainerStateWrapperFc,{key:"7038d9b03bedb83fa603ec889404c9aa2f376543",state:this.state},index.h(InputStateWrapper.InputStateWrapper,Object.assign({key:"ea63bc12e147832944b1f450d9d65bed39989dd0"},this.getInputProps()))))}constructor(e){index.registerInstance(this,e),this.catchRef=e=>{this.inputRef=e},this.onBlur=e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1},this.onChange=e=>{var t;const i=null===(t=this.inputRef)||void 0===t?void 0:t.value;this.oldValue!==i&&(this.oldValue=i),this.controller.onFacade.onChange(e)},this.onFocus=e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},this.onInput=e=>{var t,i;this._value=null!==(i=null===(t=this.inputRef)||void 0===t?void 0:t.value)&&void 0!==i?i:"",this.controller.onFacade.onInput(e)},this.onKeyDown=e=>{this.controller.onFacade.onKeyDown(e),"Enter"!==e.code&&"NumpadEnter"!==e.code||controller.propagateSubmitEventToForm({form:this.host})},this._autoComplete="off",this._hasCounter=!1,this._maxLengthBehavior="hard",this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._readOnly=!1,this._required=!1,this._tooltipAlign="top",this._touched=!1,this._type="text",this.state={_currentLength:0,_currentLengthDebounced:0,_hasValue:!1,_hideMsg:!1,_id:`id-${dev_utils.nonce()}`,_label:"",_suggestions:[],_type:"text"},this.inputHasFocus=!1,this.controller=new controller$1.InputTextController(this,"text",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAutoComplete(e){this.controller.validateAutoComplete(e)}validateMaxLengthBehavior(e){this.controller.validateMaxLengthBehavior(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHasCounter(e){this.controller.validateHasCounter(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMaxLength(e){this.controller.validateMaxLength(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePattern(e){this.controller.validatePattern(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSpellCheck(e){this.controller.validateSpellCheck(e)}validateSuggestions(e){this.controller.validateSuggestions(e)}validateSmartButton(e){this.controller.validateSmartButton(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateType(e){this.controller.validateType(e)}validateValue(e){this.controller.validateValue(e),this.oldValue=e}componentWillLoad(){this._touched=!0===this._touched,this.oldValue=this._value,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(e=>this.state._hasValue=!!e)}get host(){return index.getElement(this)}static get watchers(){return{_accessKey:[{validateAccessKey:0}],_autoComplete:[{validateAutoComplete:0}],_maxLengthBehavior:[{validateMaxLengthBehavior:0}],_disabled:[{validateDisabled:0}],_hideMsg:[{validateHideMsg:0}],_hideLabel:[{validateHideLabel:0}],_hasCounter:[{validateHasCounter:0}],_hint:[{validateHint:0}],_icons:[{validateIcons:0}],_id:[{validateId:0}],_label:[{validateLabel:0}],_maxLength:[{validateMaxLength:0}],_msg:[{validateMsg:0}],_name:[{validateName:0}],_on:[{validateOn:0}],_pattern:[{validatePattern:0}],_placeholder:[{validatePlaceholder:0}],_readOnly:[{validateReadOnly:0}],_required:[{validateRequired:0}],_shortKey:[{validateShortKey:0}],_spellCheck:[{validateSpellCheck:0}],_suggestions:[{validateSuggestions:0}],_smartButton:[{validateSmartButton:0}],_syncValueBySelector:[{validateSyncValueBySelector:0}],_touched:[{validateTouched:0}],_type:[{validateType:0}],_value:[{validateValue:0}]}}};KolInputText.style={default:defaultStyleCss()},exports.kol_input_text=KolInputText;

package/dist/cjs/kol-kolibri.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";var index=require("./index-uT47A9Jc.js"),common=require("./common-Cd2qH809.js"),color=require("./color-D7OxzTlF.js"),i18n=require("./i18n-DNWGj4j8.js");require("./i18n-BnIFsVIa.js");const defaultStyleCss="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-kolibri {\n    display: inline-block;\n    max-height: 100%;\n  }\n  .kol-kolibri__text {\n    font-size: calc(90 * 1rem / var(--kolibri-root-font-size, 16));\n    letter-spacing: normal;\n    word-spacing: normal;\n  }\n}",KolKolibri=class{constructor(e){index.registerInstance(this,e),this.translateKolibriLogo=i18n.translate("kol-kolibri-logo"),this._color="#003c78",this._labeled=!0,this.state={_color:{red:0,green:60,blue:120},_labeled:!0},this.handleColorChange=(e,n)=>{if("string"==typeof e){const t=color.rgba(e);n.set("_color",{red:t[0],green:t[1],blue:t[2]})}else common.devHint("[KolKolibri] You used the complex color schema. For the KoliBri we use need the color as hex string.")}}render(){const e=`rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;return index.h("svg",{key:"4341d576cfd65807c33d33058ce81cf8541681a1",class:"kol-kolibri",role:"img","aria-label":this.translateKolibriLogo,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 600 600",fill:e},index.h("path",{key:"f0372afcaa936cef7e7eb895d165e59758f2fe33",d:"M353 322L213 304V434L353 322Z"}),index.h("path",{key:"674d4025434c1cb91d202798d87bf8592984d64f",d:"M209 564V304L149 434L209 564Z"}),index.h("path",{key:"77e6aa258d29ec92d0dd7db75ef7e6d31568a2ee",d:"M357 316L417 250L361 210L275 244L357 316Z"}),index.h("path",{key:"11c7e24da5ca279c6b9842be19f369bcda4aba8a",d:"M329 218L237 92L250 222L272 241L329 218Z"}),index.h("path",{key:"a5c57698fed4ed533ae9887f4376c5729dba9dfe",d:"M353 318L35 36L213 300L353 318Z"}),index.h("path",{key:"74cce58a4864153b6364b23ef4cf7f55a94ea081",d:"M391 286L565 272L421 252L391 286Z"}),!0===this.state._labeled&&index.h("text",{key:"b013fce237fd89ff47d5786ad92a3c5b4615fa99",class:"kol-kolibri__text",x:"250",y:"525",fill:e},"KoliBri"))}validateColor(e){color.validateColor(this,e,{defaultValue:"#003c78",hooks:{beforePatch:this.handleColorChange}})}validateLabeled(e){common.watchBoolean(this,"_labeled",e,{defaultValue:!0})}componentWillLoad(){this.validateColor(this._color),this.validateLabeled(this._labeled)}static get watchers(){return{_color:["validateColor"],_labeled:["validateLabeled"]}}};KolKolibri.style={default:defaultStyleCss},exports.kol_kolibri=KolKolibri;
+"use strict";var index=require("./index-CUwAAV9q.js"),common=require("./common-Cd2qH809.js"),color=require("./color-D7OxzTlF.js"),i18n=require("./i18n-DNWGj4j8.js");require("./i18n-BnIFsVIa.js");const defaultStyleCss=()=>"  @layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;  @layer kol-a11y {   :host {          --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));          color: black;     background-color: white;          font-family: Verdana;          letter-spacing: inherit;          word-spacing: inherit;          text-align: left;   }   * {          hyphens: auto;          word-break: break-word;   }                  button,   .kol-input .input {     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);   }      a,   button,   h1,   h2,   h3,   h4,   h5,   h6,   input,   option,   select,   textarea {          color: inherit;          font-family: inherit;          font-size: inherit;          letter-spacing: inherit;          word-spacing: inherit;   }      .visually-hidden {     position: fixed;     top: 0;     left: 0;     width: 1px;     height: 1px;     overflow: hidden;     white-space: nowrap;     clip-path: inset(50%);   } } @layer kol-global {      :is(a, button) {     background-color: transparent;     width: 100%;     margin: 0;     padding: 0;     border: none;        }      [hidden] {     display: none !important;   }   .badge-text-hint {     color: black;     background-color: lightgray;   } } @layer kol-global {   :host {          max-width: 100%;     font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));   }   * {          box-sizing: border-box;   }   .kol-span {          display: flex;     flex-flow: column;     align-items: center;     justify-content: center;        }   .kol-span__container {     display: flex;     align-items: center;   }   a,   button {     cursor: pointer;   }   .kol-span .kol-span__label--hide-label .kol-span__label {     display: none;   }      button:disabled {     color: unset;   }   .disabled label,   .disabled:focus-within label,   [aria-disabled=true],   [aria-disabled=true]:focus,   [disabled],   [disabled]:focus {     opacity: 0.5;     outline: none;     cursor: not-allowed;   }   [aria-disabled=true]:focus .kol-span,   [disabled]:focus .kol-span {     outline: none !important;   } } @layer kol-component {   .kol-kolibri {     display: inline-block;     max-height: 100%;   }   .kol-kolibri__text {     font-size: calc(90 * 1rem / var(--kolibri-root-font-size, 16));     letter-spacing: normal;     word-spacing: normal;   } }",KolKolibri=class{constructor(e){index.registerInstance(this,e),this.translateKolibriLogo=i18n.translate("kol-kolibri-logo"),this._color="#003c78",this._labeled=!0,this.state={_color:{red:0,green:60,blue:120},_labeled:!0},this.handleColorChange=(e,o)=>{if("string"==typeof e){const l=color.rgba(e);o.set("_color",{red:l[0],green:l[1],blue:l[2]})}else common.devHint("[KolKolibri] You used the complex color schema. For the KoliBri we use need the color as hex string.")}}render(){const e=`rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;return index.h("svg",{key:"4341d576cfd65807c33d33058ce81cf8541681a1",class:"kol-kolibri",role:"img","aria-label":this.translateKolibriLogo,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 600 600",fill:e},index.h("path",{key:"f0372afcaa936cef7e7eb895d165e59758f2fe33",d:"M353 322L213 304V434L353 322Z"}),index.h("path",{key:"674d4025434c1cb91d202798d87bf8592984d64f",d:"M209 564V304L149 434L209 564Z"}),index.h("path",{key:"77e6aa258d29ec92d0dd7db75ef7e6d31568a2ee",d:"M357 316L417 250L361 210L275 244L357 316Z"}),index.h("path",{key:"11c7e24da5ca279c6b9842be19f369bcda4aba8a",d:"M329 218L237 92L250 222L272 241L329 218Z"}),index.h("path",{key:"a5c57698fed4ed533ae9887f4376c5729dba9dfe",d:"M353 318L35 36L213 300L353 318Z"}),index.h("path",{key:"74cce58a4864153b6364b23ef4cf7f55a94ea081",d:"M391 286L565 272L421 252L391 286Z"}),!0===this.state._labeled&&index.h("text",{key:"b013fce237fd89ff47d5786ad92a3c5b4615fa99",class:"kol-kolibri__text",x:"250",y:"525",fill:e},"KoliBri"))}validateColor(e){color.validateColor(this,e,{defaultValue:"#003c78",hooks:{beforePatch:this.handleColorChange}})}validateLabeled(e){common.watchBoolean(this,"_labeled",e,{defaultValue:!0})}componentWillLoad(){this.validateColor(this._color),this.validateLabeled(this._labeled)}static get watchers(){return{_color:[{validateColor:0}],_labeled:[{validateLabeled:0}]}}};KolKolibri.style={default:defaultStyleCss()},exports.kol_kolibri=KolKolibri;