@public-ui/components 2.2.16-rc.0 → 2.2.16-rc.1

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,F as n,H as e,r as i,g as a}from"./index-8a68d70d.js";import{A as o,m as s,C as l,B as r}from"./index-7a63e9eb.js";import{l as d,c as h}from"./component-names-4cb1c62b.js";import{t as c}from"./i18n-3dd5729d.js";import{n as p}from"./dev.utils-73ce9898.js";import{p as u}from"./controller-728fbdd1.js";import{g as f}from"./controller-c87b8bd9.js";import{I as m}from"./InternalUnderlinedBadgeText-c9ba3be5.js";import{I as b}from"./controller-fa5508b8.js";import"./i18n-b14e6088.js";import"./events-29e84d75.js";import"./associated.controller-d302adf7.js";import"./access-and-short-key-914780a7.js";import"./hide-label-0d754c8e.js";import"./label-7d1ce375.js";import"./tooltip-align-6964dd71.js";import"./align-f3101425.js";import"./controller-icon-b3eb5a58.js";import"./icons-adcda9b0.js";import"./debounce-99d34c2d.js";const y="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\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  * {\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 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 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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\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}\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(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip-wc .tooltip-floating {\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);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  option,\n  select,\n  textarea {\n    background-color: transparent;\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    background-color: white;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n  button:not([role=link]) {\n    min-height: auto;\n  }\n  .input > .kol-icon {\n    display: grid;\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  [slot=input] {\n    display: grid;\n    grid-template-columns: 1fr auto;\n  }\n  [slot=input] .kol-button button,\n  [slot=input] .kol-button-wc button {\n    min-height: var(--a11y-min-size);\n  }\n}",v=y,g=class{async getValue(){var t;return null===(t=this.inputRef)||void 0===t?void 0:t.value}async focus(){await this.kolFocus()}async kolFocus(){var t;null===(t=this.inputRef)||void 0===t||t.focus()}render(){const{ariaDescribedBy:i}=f(this.state),a=r(this.state._label);return t(e,{key:"a84046c03a4585fd36795d37eddfabeeb18c76d5",class:{"kol-input-password":!0,"has-value":this.state._hasValue}},t(d,{key:"048d9a4e598a6b4533f764cca09ce233e736e45f",class:{"hide-label":!!this.state._hideLabel,password:!0},_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_currentLength:this.state._currentLength,_currentLengthDebounced:this.state._currentLengthDebounced,_disabled:this.state._disabled,_msg:this.state._msg,_hasCounter:this.state._hasCounter,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_maxLength:this.state._maxLength,_readOnly:this.state._readOnly,_required:this.state._required,_shortKey:this.state._shortKey,_smartButton:this.state._smartButton,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.inputRef)||void 0===t?void 0:t.focus()},role:"presentation"},t("span",{key:"78cdb4e9cca607018f3ea7ccb32ee147ef0faf45",slot:"label"},a?t("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?t(n,null,t(m,{badgeText:o(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",t("kbd",{class:"badge-text-hint","aria-hidden":"true"},o(this.state._accessKey,this.state._shortKey))):t("span",null,this.state._label)),t("div",{key:"1865764ad5fbaffd38d743a36e138cb49ec4e976",slot:"input"},t("input",Object.assign({key:"27b3f85439a924a279e5c0d8aa1b82b4c567a200",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,maxlength:this.state._maxLength,name:this.state._name,pattern:this.state._pattern,placeholder:this.state._placeholder,readOnly:this.state._readOnly,required:this.state._required,type:this._passwordVisible?"text":"password",value:this.state._value},this.controller.onFacade,{onKeyDown:this.onKeyDown,onInput:this.onInput,onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1}})),"visibility-toggle"===this._variant?t(h,{class:"password-toggle-button",_label:this._passwordVisible?c("kol-hide-password"):c("kol-show-password"),_variant:"ghost",_disabled:this._disabled,_on:{onClick:()=>{this._passwordVisible=!this._passwordVisible}},_hideLabel:!0,_icons:this._passwordVisible?"codicon codicon-eye-closed":"codicon codicon-eye-watch"}):null)))}constructor(t){i(this,t),this.catchRef=t=>{this.inputRef=t},this.onKeyDown=t=>{"Enter"!==t.code&&"NumpadEnter"!==t.code||u({form:this.host,ref:this.inputRef})},this.onInput=t=>{s(this,"_currentLength",t.target.value.length),this.controller.updateCurrentLengthDebounced(t.target.value.length),this.controller.onFacade.onInput(t)},this._accessKey=void 0,this._alert=void 0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=!1,this._required=!1,this._shortKey=void 0,this._smartButton=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this._variant="default",this.state={_autoComplete:"off",_currentLength:0,_currentLengthDebounced:0,_hasValue:!1,_hideError:!1,_id:`id-${p()}`,_label:"",_variant:"default"},this._passwordVisible=!1,this.inputHasFocus=!1,this.controller=new b(this,"password",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t),"on"===t&&l("[KolInputPassword] The 'autocomplete' option should not be set to \"on\" for a password input field")}validateDisabled(t){this.controller.validateDisabled(t)}validateVariant(t){this.controller.validateVariant(t)}validateError(t){this.controller.validateError(t)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateMsg(t){this.controller.validateMsg(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePattern(t){this.controller.validatePattern(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(t=>this.state._hasValue=!!t)}static get delegatesFocus(){return!0}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_variant:["validateVariant"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_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"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};g.style={default:v};export{g as kol_input_password};
+import{h as t,F as n,H as e,r as i,g as a}from"./index-e850ccc2.js";import{A as o,m as s,C as l,B as r}from"./index-7a63e9eb.js";import{l as d,c as h}from"./component-names-4cb1c62b.js";import{t as c}from"./i18n-3dd5729d.js";import{n as p}from"./dev.utils-da85e627.js";import{p as u}from"./controller-728fbdd1.js";import{g as f}from"./controller-c87b8bd9.js";import{I as m}from"./InternalUnderlinedBadgeText-40aac46d.js";import{I as b}from"./controller-fa5508b8.js";import"./i18n-b14e6088.js";import"./events-29e84d75.js";import"./associated.controller-d302adf7.js";import"./access-and-short-key-914780a7.js";import"./hide-label-0d754c8e.js";import"./label-7d1ce375.js";import"./tooltip-align-6964dd71.js";import"./align-f3101425.js";import"./controller-icon-b3eb5a58.js";import"./icons-adcda9b0.js";import"./debounce-99d34c2d.js";const y="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\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  * {\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 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 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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\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}\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(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip-wc .tooltip-floating {\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);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  option,\n  select,\n  textarea {\n    background-color: transparent;\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    background-color: white;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n  button:not([role=link]) {\n    min-height: auto;\n  }\n  .input > .kol-icon {\n    display: grid;\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  [slot=input] {\n    display: grid;\n    grid-template-columns: 1fr auto;\n  }\n  [slot=input] .kol-button button,\n  [slot=input] .kol-button-wc button {\n    min-height: var(--a11y-min-size);\n  }\n}",v=y,g=class{async getValue(){var t;return null===(t=this.inputRef)||void 0===t?void 0:t.value}async focus(){await this.kolFocus()}async kolFocus(){var t;null===(t=this.inputRef)||void 0===t||t.focus()}render(){const{ariaDescribedBy:i}=f(this.state),a=r(this.state._label);return t(e,{key:"a84046c03a4585fd36795d37eddfabeeb18c76d5",class:{"kol-input-password":!0,"has-value":this.state._hasValue}},t(d,{key:"048d9a4e598a6b4533f764cca09ce233e736e45f",class:{"hide-label":!!this.state._hideLabel,password:!0},_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_currentLength:this.state._currentLength,_currentLengthDebounced:this.state._currentLengthDebounced,_disabled:this.state._disabled,_msg:this.state._msg,_hasCounter:this.state._hasCounter,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_maxLength:this.state._maxLength,_readOnly:this.state._readOnly,_required:this.state._required,_shortKey:this.state._shortKey,_smartButton:this.state._smartButton,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.inputRef)||void 0===t?void 0:t.focus()},role:"presentation"},t("span",{key:"78cdb4e9cca607018f3ea7ccb32ee147ef0faf45",slot:"label"},a?t("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?t(n,null,t(m,{badgeText:o(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",t("kbd",{class:"badge-text-hint","aria-hidden":"true"},o(this.state._accessKey,this.state._shortKey))):t("span",null,this.state._label)),t("div",{key:"1865764ad5fbaffd38d743a36e138cb49ec4e976",slot:"input"},t("input",Object.assign({key:"27b3f85439a924a279e5c0d8aa1b82b4c567a200",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,maxlength:this.state._maxLength,name:this.state._name,pattern:this.state._pattern,placeholder:this.state._placeholder,readOnly:this.state._readOnly,required:this.state._required,type:this._passwordVisible?"text":"password",value:this.state._value},this.controller.onFacade,{onKeyDown:this.onKeyDown,onInput:this.onInput,onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1}})),"visibility-toggle"===this._variant?t(h,{class:"password-toggle-button",_label:this._passwordVisible?c("kol-hide-password"):c("kol-show-password"),_variant:"ghost",_disabled:this._disabled,_on:{onClick:()=>{this._passwordVisible=!this._passwordVisible}},_hideLabel:!0,_icons:this._passwordVisible?"codicon codicon-eye-closed":"codicon codicon-eye-watch"}):null)))}constructor(t){i(this,t),this.catchRef=t=>{this.inputRef=t},this.onKeyDown=t=>{"Enter"!==t.code&&"NumpadEnter"!==t.code||u({form:this.host,ref:this.inputRef})},this.onInput=t=>{s(this,"_currentLength",t.target.value.length),this.controller.updateCurrentLengthDebounced(t.target.value.length),this.controller.onFacade.onInput(t)},this._accessKey=void 0,this._alert=void 0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=!1,this._required=!1,this._shortKey=void 0,this._smartButton=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this._variant="default",this.state={_autoComplete:"off",_currentLength:0,_currentLengthDebounced:0,_hasValue:!1,_hideError:!1,_id:`id-${p()}`,_label:"",_variant:"default"},this._passwordVisible=!1,this.inputHasFocus=!1,this.controller=new b(this,"password",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t),"on"===t&&l("[KolInputPassword] The 'autocomplete' option should not be set to \"on\" for a password input field")}validateDisabled(t){this.controller.validateDisabled(t)}validateVariant(t){this.controller.validateVariant(t)}validateError(t){this.controller.validateError(t)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateMsg(t){this.controller.validateMsg(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePattern(t){this.controller.validatePattern(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(t=>this.state._hasValue=!!t)}static get delegatesFocus(){return!0}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_variant:["validateVariant"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_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"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};g.style={default:v};export{g as kol_input_password};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as n,H as e,r as t,g as i}from"./index-8a68d70d.js";import{B as a}from"./index-7a63e9eb.js";import{n as o}from"./dev.utils-73ce9898.js";import{t as s,s as r}from"./events-29e84d75.js";import{g as l}from"./controller-c87b8bd9.js";import{a as d}from"./controller-06c08e87.js";import{p as h}from"./controller-728fbdd1.js";import{l as c}from"./component-names-4cb1c62b.js";import"./i18n-3dd5729d.js";import{F as p}from"./FormFieldMsg-0da7f228.js";import"./associated.controller-d302adf7.js";import"./access-and-short-key-914780a7.js";import"./hide-label-0d754c8e.js";import"./label-7d1ce375.js";import"./tooltip-align-6964dd71.js";import"./align-f3101425.js";import"./i18n-b14e6088.js";import"./clsx-09a06a12.js";import"./Alert-981ed837.js";import"./tslib.es6-1173d062.js";const u="@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip-wc .tooltip-floating {\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);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\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  * {\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 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 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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\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}\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(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  option,\n  select,\n  textarea {\n    background-color: transparent;\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    --border-width: 2px;\n    --input-size: 1.5em;\n  }\n  .kol-input .icons {\n    display: none;\n  }\n  label {\n    cursor: pointer;\n  }\n  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  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  input:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    input:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n  fieldset {\n    display: flex;\n  }\n  fieldset.vertical {\n    flex-direction: column;\n  }\n  fieldset .input-slot {\n    display: flex;\n    align-items: center;\n  }\n  /* required star is on fieldset legend */\n  .required label > span::after {\n    content: \"\";\n  }\n}",f=u,b=class{async getValue(){return this.currentValue}async focus(){await this.kolFocus()}async kolFocus(){var e;null===(e=this.inputRef)||void 0===e||e.focus()}render(){const{ariaDescribedBy:t,hasError:i}=l(this.state),o=a(this.state._label),s="string"==typeof this._hint&&this._hint.length>0;return n(e,{key:"9e1dd1757957c297b11a6a1397c4798483be7cbf",class:"kol-input-radio"},n("fieldset",{key:"a491fbb474a5b434ecb2bfa70315d2e721dc6242",class:{fieldset:!0,disabled:!0===this.state._disabled,error:!0===i,required:!0===this.state._required,"hidden-error":!0===this._hideError,[this.state._orientation]:!0}},n("legend",{key:"391765f9966448c4e33378c2efa67f0526ef5b7c",class:"block w-full mb-1 leading-normal"},n("span",{key:"d1fb781c73c034ee3f4ba29843508b89c1c7de1f"},n("span",{key:"a84e547d80e71f316509b523e4cad582da1ea809",slot:"label"},o?n("slot",{name:"expert"}):this._label))),this.state._options.map((e,i)=>{const a=`${this.state._id}-${i}`,o=`radio-${i}`,l=this.state._value===e.value;return n(c,{class:{radio:!0,disabled:Boolean(this.state._disabled||e.disabled)},key:a,_disabled:this.state._disabled||e.disabled,_hideLabel:this.state._hideLabel,_hint:e.hint,_id:a,_label:e.label,_renderNoLabel:!0,_required:this.state._required,_slotName:o,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},n("div",{slot:o,class:"radio-input-wrapper"},n("input",Object.assign({ref:this.state._value===e.value?this.catchRef:void 0,title:"","aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof e.label?e.label:void 0,type:"radio",id:a,checked:l,name:this.state._name||this.state._id,disabled:this.state._disabled||e.disabled,required:this.state._required,tabIndex:this.state._tabIndex,value:`-${i}`},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}})),n("label",{class:"radio-label",htmlFor:`${a}`,style:{height:this.state._hideLabel?"0":void 0,margin:this.state._hideLabel?"0":void 0,padding:this.state._hideLabel?"0":void 0,visibility:this.state._hideLabel?"hidden":void 0}},n("span",null,n("span",{class:"radio-label-span-inner"},e.label)))))}),i&&n(p,{key:"1bdc5e320c739f3df2493ae0eca86763ef084e3a",_alert:this.showAsAlert(),_hideError:this.state._hideError,_msg:this.state._msg,_id:this.state._id}),s&&n("span",{key:"462b070dc98bbb10a4f3888c69855f0c455bcb18",class:"hint"},this.state._hint)))}constructor(e){t(this,e),this.catchRef=e=>{this.inputRef=e},this.onInput=e=>{var t;if(e.target instanceof HTMLInputElement){const n=this.controller.getOptionByKey(e.target.value);void 0!==n&&(s("input",this.host,n.value),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onInput)&&this.state._on.onInput(e,n.value))}},this.onChange=e=>{var t;if(e.target instanceof HTMLInputElement){const n=this.controller.getOptionByKey(e.target.value);void 0!==n&&(r(e),s("change",this.host,n.value),this.controller.setFormAssociatedValue(n.value),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onChange)&&this.state._on.onChange(e,n.value),this.currentValue=n.value)}},this.onKeyDown=e=>{"Enter"!==e.code&&"NumpadEnter"!==e.code||h({form:this.host,ref:this.inputRef})},this._alert=void 0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._id=void 0,this._label=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._options=void 0,this._orientation="vertical",this._required=!1,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hideError:!1,_id:`id-${o()}`,_label:"",_options:[],_orientation:"vertical"},this.inputHasFocus=!1,this.controller=new d(this,"radio",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validateTooltipAlign(e){this.controller.validateTooltipAlign(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHideError(e){this.controller.validateHideError(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)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._touched=!0===this._touched,this.currentValue=this._value,this.controller.componentWillLoad()}static get delegatesFocus(){return!0}get host(){return i(this)}static get watchers(){return{_tooltipAlign:["validateTooltipAlign"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hideError:["validateHideError"],_hint:["validateHint"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_orientation:["validateOrientation"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};b.style={default:f};export{b as kol_input_radio};
+import{h as n,H as e,r as t,g as i}from"./index-e850ccc2.js";import{B as a}from"./index-7a63e9eb.js";import{n as o}from"./dev.utils-da85e627.js";import{t as s,s as r}from"./events-29e84d75.js";import{g as l}from"./controller-c87b8bd9.js";import{a as d}from"./controller-06c08e87.js";import{p as h}from"./controller-728fbdd1.js";import{l as c}from"./component-names-4cb1c62b.js";import"./i18n-3dd5729d.js";import{F as p}from"./FormFieldMsg-1c17f4ff.js";import"./associated.controller-d302adf7.js";import"./access-and-short-key-914780a7.js";import"./hide-label-0d754c8e.js";import"./label-7d1ce375.js";import"./tooltip-align-6964dd71.js";import"./align-f3101425.js";import"./i18n-b14e6088.js";import"./clsx-09a06a12.js";import"./Alert-9a37a638.js";import"./tslib.es6-1173d062.js";const u="@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip-wc .tooltip-floating {\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);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\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  * {\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 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 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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\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}\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(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  option,\n  select,\n  textarea {\n    background-color: transparent;\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    --border-width: 2px;\n    --input-size: 1.5em;\n  }\n  .kol-input .icons {\n    display: none;\n  }\n  label {\n    cursor: pointer;\n  }\n  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  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  input:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    input:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n  fieldset {\n    display: flex;\n  }\n  fieldset.vertical {\n    flex-direction: column;\n  }\n  fieldset .input-slot {\n    display: flex;\n    align-items: center;\n  }\n  /* required star is on fieldset legend */\n  .required label > span::after {\n    content: \"\";\n  }\n}",f=u,b=class{async getValue(){return this.currentValue}async focus(){await this.kolFocus()}async kolFocus(){var e;null===(e=this.inputRef)||void 0===e||e.focus()}render(){const{ariaDescribedBy:t,hasError:i}=l(this.state),o=a(this.state._label),s="string"==typeof this._hint&&this._hint.length>0;return n(e,{key:"9e1dd1757957c297b11a6a1397c4798483be7cbf",class:"kol-input-radio"},n("fieldset",{key:"a491fbb474a5b434ecb2bfa70315d2e721dc6242",class:{fieldset:!0,disabled:!0===this.state._disabled,error:!0===i,required:!0===this.state._required,"hidden-error":!0===this._hideError,[this.state._orientation]:!0}},n("legend",{key:"391765f9966448c4e33378c2efa67f0526ef5b7c",class:"block w-full mb-1 leading-normal"},n("span",{key:"d1fb781c73c034ee3f4ba29843508b89c1c7de1f"},n("span",{key:"a84e547d80e71f316509b523e4cad582da1ea809",slot:"label"},o?n("slot",{name:"expert"}):this._label))),this.state._options.map((e,i)=>{const a=`${this.state._id}-${i}`,o=`radio-${i}`,l=this.state._value===e.value;return n(c,{class:{radio:!0,disabled:Boolean(this.state._disabled||e.disabled)},key:a,_disabled:this.state._disabled||e.disabled,_hideLabel:this.state._hideLabel,_hint:e.hint,_id:a,_label:e.label,_renderNoLabel:!0,_required:this.state._required,_slotName:o,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},n("div",{slot:o,class:"radio-input-wrapper"},n("input",Object.assign({ref:this.state._value===e.value?this.catchRef:void 0,title:"","aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof e.label?e.label:void 0,type:"radio",id:a,checked:l,name:this.state._name||this.state._id,disabled:this.state._disabled||e.disabled,required:this.state._required,tabIndex:this.state._tabIndex,value:`-${i}`},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}})),n("label",{class:"radio-label",htmlFor:`${a}`,style:{height:this.state._hideLabel?"0":void 0,margin:this.state._hideLabel?"0":void 0,padding:this.state._hideLabel?"0":void 0,visibility:this.state._hideLabel?"hidden":void 0}},n("span",null,n("span",{class:"radio-label-span-inner"},e.label)))))}),i&&n(p,{key:"1bdc5e320c739f3df2493ae0eca86763ef084e3a",_alert:this.showAsAlert(),_hideError:this.state._hideError,_msg:this.state._msg,_id:this.state._id}),s&&n("span",{key:"462b070dc98bbb10a4f3888c69855f0c455bcb18",class:"hint"},this.state._hint)))}constructor(e){t(this,e),this.catchRef=e=>{this.inputRef=e},this.onInput=e=>{var t;if(e.target instanceof HTMLInputElement){const n=this.controller.getOptionByKey(e.target.value);void 0!==n&&(s("input",this.host,n.value),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onInput)&&this.state._on.onInput(e,n.value))}},this.onChange=e=>{var t;if(e.target instanceof HTMLInputElement){const n=this.controller.getOptionByKey(e.target.value);void 0!==n&&(r(e),s("change",this.host,n.value),this.controller.setFormAssociatedValue(n.value),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onChange)&&this.state._on.onChange(e,n.value),this.currentValue=n.value)}},this.onKeyDown=e=>{"Enter"!==e.code&&"NumpadEnter"!==e.code||h({form:this.host,ref:this.inputRef})},this._alert=void 0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._id=void 0,this._label=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._options=void 0,this._orientation="vertical",this._required=!1,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hideError:!1,_id:`id-${o()}`,_label:"",_options:[],_orientation:"vertical"},this.inputHasFocus=!1,this.controller=new d(this,"radio",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validateTooltipAlign(e){this.controller.validateTooltipAlign(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHideError(e){this.controller.validateHideError(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)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._touched=!0===this._touched,this.currentValue=this._value,this.controller.componentWillLoad()}static get delegatesFocus(){return!0}get host(){return i(this)}static get watchers(){return{_tooltipAlign:["validateTooltipAlign"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hideError:["validateHideError"],_hint:["validateHint"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_orientation:["validateOrientation"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};b.style={default:f};export{b as kol_input_radio};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as n,F as t,H as e,r as i,g as a}from"./index-8a68d70d.js";import{w as o,F as s,A as r,B as l}from"./index-7a63e9eb.js";import{l as d}from"./component-names-4cb1c62b.js";import{n as h}from"./dev.utils-73ce9898.js";import{p as c}from"./controller-728fbdd1.js";import{g as p}from"./controller-c87b8bd9.js";import{I as u}from"./InternalUnderlinedBadgeText-c9ba3be5.js";import{I as f}from"./controller-icon-b3eb5a58.js";import{v as m}from"./suggestions-506c439a.js";import"./events-29e84d75.js";import"./associated.controller-d302adf7.js";import"./access-and-short-key-914780a7.js";import"./hide-label-0d754c8e.js";import"./label-7d1ce375.js";import"./tooltip-align-6964dd71.js";import"./align-f3101425.js";import"./icons-adcda9b0.js";class b extends f{constructor(t,e,n){super(t,e,n),this.component=t}validateAutoComplete(t){o(this.component,"_autoComplete",t=>"string"==typeof t&&("on"===t||"off"===t),new Set(["on | off"]),t)}validateMax(t){s(this.component,"_max",t)}validateMin(t){s(this.component,"_min",t)}validateStep(t){s(this.component,"_step",t)}validateSuggestions(t){m(this.component,t)}validateValue(t){s(this.component,"_value",t),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 y="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\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  * {\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 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 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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\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}\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(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip-wc .tooltip-floating {\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);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  option,\n  select,\n  textarea {\n    background-color: transparent;\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    background-color: white;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n  button:not([role=link]) {\n    min-height: auto;\n  }\n  .input > .kol-icon {\n    display: grid;\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .inputs-wrapper {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  }\n  input[type=number] {\n    width: var(--kolibri-input-range--input-number--width);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    border: none;\n  }\n  /*\n    * For Chrome and Firefox is it needed to use redundant style definitions with separate selectors. The reason is unknown.\n    */\n  input[type=range] {\n    background-color: #d3d3d3;\n    display: inline-block;\n    /* Design-Hack - related with flex-grow */\n    width: 0;\n    height: calc(8rem / 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  input[type=range]::-webkit-slider-thumb {\n    background-color: #000;\n    border-radius: 20px;\n    width: calc(20rem / var(--kolibri-root-font-size, 16));\n    height: calc(20rem / var(--kolibri-root-font-size, 16));\n    -webkit-appearance: none;\n    cursor: pointer;\n  }\n  input[type=range]::-moz-range-thumb {\n    background-color: #000;\n    border-radius: 20px;\n    width: calc(20rem / var(--kolibri-root-font-size, 16));\n    height: calc(20rem / var(--kolibri-root-font-size, 16));\n    -moz-appearance: none;\n    cursor: pointer;\n  }\n}\n/* Fix missing outline in Chromium-based browsers on Windows in high contrast mode. */\n@media (prefers-contrast: more) {\n  ::-webkit-slider-thumb {\n    outline: 1px solid currentColor;\n  }\n}",g=y,v=class{async focus(){await this.kolFocus()}async kolFocus(){var t;null===(t=this.refInputNumber)||void 0===t||t.focus()}getSanitizedFloatValue(t){const e=parseFloat(t);return this.state._max&&e>this.state._max?this.state._max:this.state._min&&e<this.state._min?this.state._min:e}async getValue(){if(void 0!==this.refInputNumber){const t=this.refInputNumber.value;return this.getSanitizedFloatValue(t)}}componentDidLoad(){var t;!this._value&&(null===(t=this.refInputRange)||void 0===t?void 0:t.value)&&this.validateValue(parseFloat(this.refInputRange.value))}render(){var i;const{ariaDescribedBy:a}=p(this.state),o=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,s=l(this.state._label);return n(e,{key:"12c7619cb78fdc5ca7c93d8229d0b03ec1184a1d",class:"kol-input-range"},n(d,{key:"d03419a917666df8fe18f1a65641f4ebd0821b52",class:{range:!0,"hide-label":!!this.state._hideLabel},_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_disabled:this.state._disabled,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_msg:this.state._msg,_shortKey:this.state._shortKey,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},n("span",{key:"b2bc64f1194f6cb03795c2866847b6521b4f5ca7",slot:"label"},s?n("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?n(t,null,n(u,{badgeText:r(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",n("kbd",{class:"badge-text-hint","aria-hidden":"true"},r(this.state._accessKey,this.state._shortKey))):n("span",null,this.state._label)),n("div",{key:"f07fc1f84f62c34fa698fec424f33c5a20c09d78",slot:"input"},n("div",{key:"ab6085f852f2f5f253c89824089b4d2ffbbacaaf",class:"inputs-wrapper",style:{"--kolibri-input-range--input-number--width":`calc(${String(null!==(i=this.state._max)&&void 0!==i?i:100).length}ch + 2em)`}},n("input",Object.assign({key:"47ac2fded7ba8fb0e2567dca6295c455fe289379",ref:this.catchInputRangeRef,title:"",accessKey:this.state._accessKey,"aria-describedby":a.length>0?a.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-hidden":"true",autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,list:o?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name?`${this.state._name}-range`:void 0,step:this.state._step,tabIndex:-1,type:"range",value:this.state._value},this.controller.onFacade,{onChange:this.onChange,onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1}})),n("input",Object.assign({key:"5fc4f65e401d4f05c6396bd963c3d5a35063a524",ref:this.catchInputNumberRef,title:"",accessKey:this.state._accessKey,"aria-describedby":a.length>0?a.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:o?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name?`${this.state._name}-number`:void 0,step:this.state._step,type:"number",value:this.state._value},this.controller.onFacade,{onKeyDown:this.onKeyDown,onChange:this.onChange,onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1}}))),o&&[n("datalist",{key:"e48823af5daffeb0288b99cd8c96c1bb825a36c1",id:`${this.state._id}-list`},this.state._suggestions.map(t=>n("option",{value:t})))])))}constructor(t){i(this,t),this.catchInputNumberRef=t=>{var e;t&&(this.refInputNumber=t,!this._value&&(null===(e=this.refInputNumber)||void 0===e?void 0:e.value)&&this.validateValue(parseFloat(this.refInputNumber.value)))},this.catchInputRangeRef=t=>{t&&(this.refInputRange=t)},this.onChange=t=>{var e,n;const i=t.target.value,a=this.getSanitizedFloatValue(i);this.validateValue(a),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onChange)&&(null===(n=this.state._on)||void 0===n||n.onChange(t,a))},this.onKeyDown=t=>{"Enter"!==t.code&&"NumpadEnter"!==t.code||c({form:this.host,ref:this.refInputNumber})},this._accessKey=void 0,this._alert=void 0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._max=100,this._min=0,this._msg=void 0,this._name=void 0,this._on=void 0,this._shortKey=void 0,this._step=void 0,this._suggestions=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_hideError:!1,_id:`id-${h()}`,_label:"",_suggestions:[]},this.inputHasFocus=!1,this.controller=new b(this,"range",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMax(t){this.controller.validateMax(t)}validateMin(t){this.controller.validateMin(t)}validateMsg(t){this.controller.validateMsg(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateStep(t){this.controller.validateStep(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad()}static get delegatesFocus(){return!0}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_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"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};v.style={default:g};export{v as kol_input_range};
+import{h as n,F as t,H as e,r as i,g as a}from"./index-e850ccc2.js";import{w as o,F as s,A as r,B as l}from"./index-7a63e9eb.js";import{l as d}from"./component-names-4cb1c62b.js";import{n as h}from"./dev.utils-da85e627.js";import{p as c}from"./controller-728fbdd1.js";import{g as p}from"./controller-c87b8bd9.js";import{I as u}from"./InternalUnderlinedBadgeText-40aac46d.js";import{I as f}from"./controller-icon-b3eb5a58.js";import{v as m}from"./suggestions-506c439a.js";import"./events-29e84d75.js";import"./associated.controller-d302adf7.js";import"./access-and-short-key-914780a7.js";import"./hide-label-0d754c8e.js";import"./label-7d1ce375.js";import"./tooltip-align-6964dd71.js";import"./align-f3101425.js";import"./icons-adcda9b0.js";class b extends f{constructor(t,e,n){super(t,e,n),this.component=t}validateAutoComplete(t){o(this.component,"_autoComplete",t=>"string"==typeof t&&("on"===t||"off"===t),new Set(["on | off"]),t)}validateMax(t){s(this.component,"_max",t)}validateMin(t){s(this.component,"_min",t)}validateStep(t){s(this.component,"_step",t)}validateSuggestions(t){m(this.component,t)}validateValue(t){s(this.component,"_value",t),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 y="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\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  * {\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 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 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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\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}\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(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip-wc .tooltip-floating {\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);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  option,\n  select,\n  textarea {\n    background-color: transparent;\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    background-color: white;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n  button:not([role=link]) {\n    min-height: auto;\n  }\n  .input > .kol-icon {\n    display: grid;\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .inputs-wrapper {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  }\n  input[type=number] {\n    width: var(--kolibri-input-range--input-number--width);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    border: none;\n  }\n  /*\n    * For Chrome and Firefox is it needed to use redundant style definitions with separate selectors. The reason is unknown.\n    */\n  input[type=range] {\n    background-color: #d3d3d3;\n    display: inline-block;\n    /* Design-Hack - related with flex-grow */\n    width: 0;\n    height: calc(8rem / 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  input[type=range]::-webkit-slider-thumb {\n    background-color: #000;\n    border-radius: 20px;\n    width: calc(20rem / var(--kolibri-root-font-size, 16));\n    height: calc(20rem / var(--kolibri-root-font-size, 16));\n    -webkit-appearance: none;\n    cursor: pointer;\n  }\n  input[type=range]::-moz-range-thumb {\n    background-color: #000;\n    border-radius: 20px;\n    width: calc(20rem / var(--kolibri-root-font-size, 16));\n    height: calc(20rem / var(--kolibri-root-font-size, 16));\n    -moz-appearance: none;\n    cursor: pointer;\n  }\n}\n/* Fix missing outline in Chromium-based browsers on Windows in high contrast mode. */\n@media (prefers-contrast: more) {\n  ::-webkit-slider-thumb {\n    outline: 1px solid currentColor;\n  }\n}",g=y,v=class{async focus(){await this.kolFocus()}async kolFocus(){var t;null===(t=this.refInputNumber)||void 0===t||t.focus()}getSanitizedFloatValue(t){const e=parseFloat(t);return this.state._max&&e>this.state._max?this.state._max:this.state._min&&e<this.state._min?this.state._min:e}async getValue(){if(void 0!==this.refInputNumber){const t=this.refInputNumber.value;return this.getSanitizedFloatValue(t)}}componentDidLoad(){var t;!this._value&&(null===(t=this.refInputRange)||void 0===t?void 0:t.value)&&this.validateValue(parseFloat(this.refInputRange.value))}render(){var i;const{ariaDescribedBy:a}=p(this.state),o=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,s=l(this.state._label);return n(e,{key:"12c7619cb78fdc5ca7c93d8229d0b03ec1184a1d",class:"kol-input-range"},n(d,{key:"d03419a917666df8fe18f1a65641f4ebd0821b52",class:{range:!0,"hide-label":!!this.state._hideLabel},_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_disabled:this.state._disabled,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_msg:this.state._msg,_shortKey:this.state._shortKey,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},n("span",{key:"b2bc64f1194f6cb03795c2866847b6521b4f5ca7",slot:"label"},s?n("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?n(t,null,n(u,{badgeText:r(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",n("kbd",{class:"badge-text-hint","aria-hidden":"true"},r(this.state._accessKey,this.state._shortKey))):n("span",null,this.state._label)),n("div",{key:"f07fc1f84f62c34fa698fec424f33c5a20c09d78",slot:"input"},n("div",{key:"ab6085f852f2f5f253c89824089b4d2ffbbacaaf",class:"inputs-wrapper",style:{"--kolibri-input-range--input-number--width":`calc(${String(null!==(i=this.state._max)&&void 0!==i?i:100).length}ch + 2em)`}},n("input",Object.assign({key:"47ac2fded7ba8fb0e2567dca6295c455fe289379",ref:this.catchInputRangeRef,title:"",accessKey:this.state._accessKey,"aria-describedby":a.length>0?a.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-hidden":"true",autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,list:o?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name?`${this.state._name}-range`:void 0,step:this.state._step,tabIndex:-1,type:"range",value:this.state._value},this.controller.onFacade,{onChange:this.onChange,onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1}})),n("input",Object.assign({key:"5fc4f65e401d4f05c6396bd963c3d5a35063a524",ref:this.catchInputNumberRef,title:"",accessKey:this.state._accessKey,"aria-describedby":a.length>0?a.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:o?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name?`${this.state._name}-number`:void 0,step:this.state._step,type:"number",value:this.state._value},this.controller.onFacade,{onKeyDown:this.onKeyDown,onChange:this.onChange,onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1}}))),o&&[n("datalist",{key:"e48823af5daffeb0288b99cd8c96c1bb825a36c1",id:`${this.state._id}-list`},this.state._suggestions.map(t=>n("option",{value:t})))])))}constructor(t){i(this,t),this.catchInputNumberRef=t=>{var e;t&&(this.refInputNumber=t,!this._value&&(null===(e=this.refInputNumber)||void 0===e?void 0:e.value)&&this.validateValue(parseFloat(this.refInputNumber.value)))},this.catchInputRangeRef=t=>{t&&(this.refInputRange=t)},this.onChange=t=>{var e,n;const i=t.target.value,a=this.getSanitizedFloatValue(i);this.validateValue(a),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onChange)&&(null===(n=this.state._on)||void 0===n||n.onChange(t,a))},this.onKeyDown=t=>{"Enter"!==t.code&&"NumpadEnter"!==t.code||c({form:this.host,ref:this.refInputNumber})},this._accessKey=void 0,this._alert=void 0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._max=100,this._min=0,this._msg=void 0,this._name=void 0,this._on=void 0,this._shortKey=void 0,this._step=void 0,this._suggestions=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_hideError:!1,_id:`id-${h()}`,_label:"",_suggestions:[]},this.inputHasFocus=!1,this.controller=new b(this,"range",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMax(t){this.controller.validateMax(t)}validateMin(t){this.controller.validateMin(t)}validateMsg(t){this.controller.validateMsg(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateStep(t){this.controller.validateStep(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad()}static get delegatesFocus(){return!0}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_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"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};v.style={default:g};export{v as kol_input_range};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,F as e,H as n,r as i,g as a}from"./index-8a68d70d.js";import{j as o,A as s,m as l,B as r}from"./index-7a63e9eb.js";import{l as d}from"./component-names-4cb1c62b.js";import{n as h}from"./dev.utils-73ce9898.js";import{p as c}from"./controller-728fbdd1.js";import{g as p}from"./controller-c87b8bd9.js";import{I as u}from"./InternalUnderlinedBadgeText-c9ba3be5.js";import{a as f}from"./controller-b19ef5c0.js";import"./events-29e84d75.js";import"./associated.controller-d302adf7.js";import"./access-and-short-key-914780a7.js";import"./hide-label-0d754c8e.js";import"./label-7d1ce375.js";import"./tooltip-align-6964dd71.js";import"./align-f3101425.js";import"./controller-fa5508b8.js";import"./controller-icon-b3eb5a58.js";import"./icons-adcda9b0.js";import"./debounce-99d34c2d.js";import"./spell-check-82b14d35.js";import"./suggestions-506c439a.js";const m=(t,e)=>{o(t,"_alert",e)},b="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\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  * {\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 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 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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\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}\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(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip-wc .tooltip-floating {\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);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  option,\n  select,\n  textarea {\n    background-color: transparent;\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    background-color: white;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n  button:not([role=link]) {\n    min-height: auto;\n  }\n  .input > .kol-icon {\n    display: grid;\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}",y=b,v=class{async getValue(){var t;return null===(t=this.inputRef)||void 0===t?void 0:t.value}async focus(){await this.kolFocus()}async kolFocus(){var t;null===(t=this.inputRef)||void 0===t||t.focus()}render(){const{ariaDescribedBy:i}=p(this.state),a=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,o=r(this.state._label);return t(n,{key:"0589a7c26d609cbfd8a558823337595b786dc7e2",class:{"has-value":this.state._hasValue,"kol-input-text":!0}},t(d,{key:"683fdcbf6d18f55934c467160cb24ff8b5fb9c77",class:{[this.state._type]:!0,"hide-label":!!this.state._hideLabel},_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_currentLength:this.state._currentLength,_currentLengthDebounced:this.state._currentLengthDebounced,_disabled:this.state._disabled,_hasCounter:this.state._hasCounter,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_maxLength:this.state._maxLength,_msg:this.state._msg,_readOnly:this.state._readOnly,_required:this.state._required,_shortKey:this.state._shortKey,_smartButton:this.state._smartButton,_suggestions:this.state._suggestions,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.inputRef)||void 0===t?void 0:t.focus()},role:"presentation"},t("span",{key:"91054ddb0072e2f640cb20f40ba29c942f88a8c3",slot:"label"},o?t("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?t(e,null,t(u,{badgeText:s(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",t("kbd",{class:"badge-text-hint","aria-hidden":"true"},s(this.state._accessKey,this.state._shortKey))):t("span",null,this.state._label)),t("div",{key:"045478c632017b140113e56395139a95f906b94a",slot:"input"},t("input",Object.assign({key:"cc0c43d8cc2963c930fd8353cb21275243811e44",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:a?`${this.state._id}-list`:void 0,maxlength:this.state._maxLength,name:this.state._name,pattern:this.state._pattern,placeholder:this.state._placeholder,readOnly:this.state._readOnly,required:this.state._required,spellcheck:this.state._spellCheck,type:this.state._type,value:this.state._value},this.controller.onFacade,{onChange:this.onChange,onInput:this.onInput,onKeyDown:this.onKeyDown,onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1}})))))}constructor(t){i(this,t),this.catchRef=t=>{this.inputRef=t},this.onChange=t=>{var e,n;this.oldValue!==(null===(e=this.inputRef)||void 0===e?void 0:e.value)&&(this.oldValue=null===(n=this.inputRef)||void 0===n?void 0:n.value,this.controller.onFacade.onChange(t))},this.onInput=t=>{l(this,"_currentLength",t.target.value.length),this.controller.updateCurrentLengthDebounced(t.target.value.length),this.controller.onFacade.onInput(t)},this.onKeyDown=t=>{"Enter"!==t.code&&"NumpadEnter"!==t.code||c({form:this.host,ref:this.inputRef})},this._accessKey=void 0,this._alert=void 0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=!1,this._required=!1,this._shortKey=void 0,this._spellCheck=void 0,this._suggestions=void 0,this._smartButton=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._type="text",this._value=void 0,this.state={_autoComplete:"off",_currentLength:0,_currentLengthDebounced:0,_hasValue:!1,_hideError:!1,_id:`id-${h()}`,_label:"",_suggestions:[],_type:"text"},this.inputHasFocus=!1,this.controller=new f(this,"text",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){m(this,t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateMsg(t){this.controller.validateMsg(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePattern(t){this.controller.validatePattern(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSpellCheck(t){this.controller.validateSpellCheck(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateType(t){this.controller.validateType(t)}validateValue(t){this.controller.validateValue(t),this.oldValue=t}componentWillLoad(){this._touched=!0===this._touched,this.oldValue=this._value,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(t=>this.state._hasValue=!!t)}static get delegatesFocus(){return!0}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_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"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};v.style={default:y};export{v as kol_input_text};
+import{h as t,F as e,H as n,r as i,g as a}from"./index-e850ccc2.js";import{j as o,A as s,m as l,B as r}from"./index-7a63e9eb.js";import{l as d}from"./component-names-4cb1c62b.js";import{n as h}from"./dev.utils-da85e627.js";import{p as c}from"./controller-728fbdd1.js";import{g as p}from"./controller-c87b8bd9.js";import{I as u}from"./InternalUnderlinedBadgeText-40aac46d.js";import{a as f}from"./controller-b19ef5c0.js";import"./events-29e84d75.js";import"./associated.controller-d302adf7.js";import"./access-and-short-key-914780a7.js";import"./hide-label-0d754c8e.js";import"./label-7d1ce375.js";import"./tooltip-align-6964dd71.js";import"./align-f3101425.js";import"./controller-fa5508b8.js";import"./controller-icon-b3eb5a58.js";import"./icons-adcda9b0.js";import"./debounce-99d34c2d.js";import"./spell-check-82b14d35.js";import"./suggestions-506c439a.js";const m=(t,e)=>{o(t,"_alert",e)},b="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\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  * {\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 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 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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\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}\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(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip-wc .tooltip-floating {\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);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  option,\n  select,\n  textarea {\n    background-color: transparent;\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    background-color: white;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n  button:not([role=link]) {\n    min-height: auto;\n  }\n  .input > .kol-icon {\n    display: grid;\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}",y=b,v=class{async getValue(){var t;return null===(t=this.inputRef)||void 0===t?void 0:t.value}async focus(){await this.kolFocus()}async kolFocus(){var t;null===(t=this.inputRef)||void 0===t||t.focus()}render(){const{ariaDescribedBy:i}=p(this.state),a=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,o=r(this.state._label);return t(n,{key:"0589a7c26d609cbfd8a558823337595b786dc7e2",class:{"has-value":this.state._hasValue,"kol-input-text":!0}},t(d,{key:"683fdcbf6d18f55934c467160cb24ff8b5fb9c77",class:{[this.state._type]:!0,"hide-label":!!this.state._hideLabel},_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_currentLength:this.state._currentLength,_currentLengthDebounced:this.state._currentLengthDebounced,_disabled:this.state._disabled,_hasCounter:this.state._hasCounter,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_maxLength:this.state._maxLength,_msg:this.state._msg,_readOnly:this.state._readOnly,_required:this.state._required,_shortKey:this.state._shortKey,_smartButton:this.state._smartButton,_suggestions:this.state._suggestions,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.inputRef)||void 0===t?void 0:t.focus()},role:"presentation"},t("span",{key:"91054ddb0072e2f640cb20f40ba29c942f88a8c3",slot:"label"},o?t("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?t(e,null,t(u,{badgeText:s(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",t("kbd",{class:"badge-text-hint","aria-hidden":"true"},s(this.state._accessKey,this.state._shortKey))):t("span",null,this.state._label)),t("div",{key:"045478c632017b140113e56395139a95f906b94a",slot:"input"},t("input",Object.assign({key:"cc0c43d8cc2963c930fd8353cb21275243811e44",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:a?`${this.state._id}-list`:void 0,maxlength:this.state._maxLength,name:this.state._name,pattern:this.state._pattern,placeholder:this.state._placeholder,readOnly:this.state._readOnly,required:this.state._required,spellcheck:this.state._spellCheck,type:this.state._type,value:this.state._value},this.controller.onFacade,{onChange:this.onChange,onInput:this.onInput,onKeyDown:this.onKeyDown,onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1}})))))}constructor(t){i(this,t),this.catchRef=t=>{this.inputRef=t},this.onChange=t=>{var e,n;this.oldValue!==(null===(e=this.inputRef)||void 0===e?void 0:e.value)&&(this.oldValue=null===(n=this.inputRef)||void 0===n?void 0:n.value,this.controller.onFacade.onChange(t))},this.onInput=t=>{l(this,"_currentLength",t.target.value.length),this.controller.updateCurrentLengthDebounced(t.target.value.length),this.controller.onFacade.onInput(t)},this.onKeyDown=t=>{"Enter"!==t.code&&"NumpadEnter"!==t.code||c({form:this.host,ref:this.inputRef})},this._accessKey=void 0,this._alert=void 0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=!1,this._required=!1,this._shortKey=void 0,this._spellCheck=void 0,this._suggestions=void 0,this._smartButton=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._type="text",this._value=void 0,this.state={_autoComplete:"off",_currentLength:0,_currentLengthDebounced:0,_hasValue:!1,_hideError:!1,_id:`id-${h()}`,_label:"",_suggestions:[],_type:"text"},this.inputHasFocus=!1,this.controller=new f(this,"text",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){m(this,t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateMsg(t){this.controller.validateMsg(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePattern(t){this.controller.validatePattern(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSpellCheck(t){this.controller.validateSpellCheck(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateType(t){this.controller.validateType(t)}validateValue(t){this.controller.validateValue(t),this.oldValue=t}componentWillLoad(){this._touched=!0===this._touched,this.oldValue=this._value,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(t=>this.state._hasValue=!!t)}static get delegatesFocus(){return!0}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_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"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};v.style={default:y};export{v as kol_input_text};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as t,F as e,H as s,g as d}from"./index-8a68d70d.js";import{c as a}from"./clsx-09a06a12.js";import{Q as n,B as h}from"./index-7a63e9eb.js";import{t as l}from"./i18n-3dd5729d.js";import{a as o,g as r,c as f}from"./component-names-4cb1c62b.js";import{F as c}from"./FormFieldMsg-0da7f228.js";import"./i18n-b14e6088.js";import"./Alert-981ed837.js";import"./tslib.es6-1173d062.js";const u=class{constructor(t){i(this,t),this.slotName="input",this.catchInputSlot=t=>{n(this.host,t,this.slotName)},this._accessKey=void 0,this._alert=!0,this._currentLength=void 0,this._currentLengthDebounced=void 0,this._disabled=!1,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=void 0,this._readOnly=!1,this._renderNoLabel=!1,this._required=!1,this._shortKey=void 0,this._slotName=void 0,this._suggestions=void 0,this._smartButton=void 0,this._tooltipAlign="top",this._touched=!1}componentWillRender(){this.slotName=this._slotName?this._slotName:"input"}getIconStyles(t){return t&&"object"==typeof t&&t.style?t.style:{}}render(){var i,d,n,_,u,b,m,g,p,y,v,k;const j="object"==typeof this._msg&&null!==this._msg&&"string"==typeof(null===(i=this._msg)||void 0===i?void 0:i._description)&&(null===(d=this._msg)||void 0===d?void 0:d._description.length)>0&&(!0===this._touched||"error"!==(null===(n=this._msg)||void 0===n?void 0:n._type)),B=h(this._label),L="string"==typeof this._hint&&this._hint.length>0,x=!B&&this._hideLabel;return t(s,{key:"97a275ca1a9441bbc2b08647a9f7bb15422abe39",class:a("kol-input",this.getModifierClassNameByMsgType(j),{disabled:!0===this._disabled,[(null===(_=this._msg)||void 0===_?void 0:_._type)||"error"]:!0===j,"read-only":!0===this._readOnly,required:!0===this._required,touched:!0===this._touched,"hidden-error":!0===this._hideError})},t("label",{key:"f9840afaadb54e828df2360b35206bd474d6e6ae",class:"input-label",id:x?void 0:`${this._id}-label`,hidden:x,htmlFor:this._id},t("span",{key:"b9a24b60ba19d4af9018c4c0b0974c1976634683",class:"input-label-span"},t("slot",{key:"6dd64696bf929479eb707d3380301251e1d83457",name:"label"}))),L&&t("span",{key:"8957e1a38b7ab3e4e1b79308ac21cce40c1b87c9",class:"hint",id:`${this._id}-hint`},this._hint),t("div",{key:"4830f1ea34aba0d7affe33bb4416b1ef1d0365dd",class:{input:!0,"icon-left":"object"==typeof(null===(u=this._icons)||void 0===u?void 0:u.left),"icon-right":"object"==typeof(null===(b=this._icons)||void 0===b?void 0:b.right)}},(null===(m=this._icons)||void 0===m?void 0:m.left)&&t(r,{key:"3afaeb25f8bf25451dc92e32021742df0280ac5f",_label:"",_icons:(null===(g=this._icons)||void 0===g?void 0:g.left).icon,style:this.getIconStyles(null===(p=this._icons)||void 0===p?void 0:p.left)}),t("div",{key:"132a91efcb02a2e9f554df8d202078787de2fdc7",ref:this.catchInputSlot,id:this.slotName,class:"input-slot"}),"object"==typeof this._smartButton&&null!==this._smartButton&&t(f,{key:"eae26e05ed4265ccd3d22d0ab59da0b374d352a6",_customClass:this._smartButton._customClass,_disabled:this._smartButton._disabled,_icons:this._smartButton._icons,_hideLabel:!0,_id:this._smartButton._id,_label:this._smartButton._label,_on:this._smartButton._on,_tooltipAlign:this._smartButton._tooltipAlign,_variant:this._smartButton._variant}),(null===(y=this._icons)||void 0===y?void 0:y.right)&&t(r,{key:"4975557b0114b0e7901148a6159d3d28ee56fada",_label:"",_icons:(null===(v=this._icons)||void 0===v?void 0:v.right).icon,style:this.getIconStyles(null===(k=this._icons)||void 0===k?void 0:k.right)})),x&&t(o,{key:"6d5f028bd4ca6930fe0127ee292ca225e5dad8d4","aria-hidden":"true",class:"input-tooltip",_badgeText:this._accessKey||this._shortKey,_align:this._tooltipAlign,_id:this._hideLabel?`${this._id}-label`:void 0,_label:this._label}),j&&t(c,{key:"1ad8ac23b1bff22f8a29edfd0a58d0f192eec80c",_alert:this._alert,_hideError:this._hideError,_msg:this._msg,_id:this._id}),Array.isArray(this._suggestions)&&this._suggestions.length>0&&t("datalist",{key:"79af0e327c2e1bb571e43587478188a38899a647",id:`${this._id}-list`},this._suggestions.map(i=>t("option",{value:i}))),this._hasCounter&&t(e,null,t("span",{key:"416b8380d001dea36f8e087633ecd1d6fe523ba8",class:"counter","aria-hidden":"true","data-testid":"input-counter"},this._currentLength,this._maxLength&&`/${this._maxLength}`," ",l("kol-characters")),t("span",{key:"6fed61b8e5a0e8b01ce392f500e8f47b9b9cab45","aria-live":"polite","aria-atomic":"true",class:"visually-hidden","data-testid":"input-counter-aria"},this._currentLengthDebounced,this._maxLength&&` ${l("kol-of")} ${this._maxLength}`," ",l("kol-characters"))))}getModifierClassNameByMsgType(t){var i,s;if(t&&(null===(i=this._msg)||void 0===i?void 0:i._type))return{default:"msg-type-default",info:"msg-type-info",success:"msg-type-success",warning:"msg-type-warning",error:"msg-type-error"}[null===(s=this._msg)||void 0===s?void 0:s._type]}get host(){return d(this)}};export{u as kol_input};
+import{r as i,h as t,F as e,H as s,g as d}from"./index-e850ccc2.js";import{c as a}from"./clsx-09a06a12.js";import{Q as n,B as h}from"./index-7a63e9eb.js";import{t as l}from"./i18n-3dd5729d.js";import{a as o,g as r,c as f}from"./component-names-4cb1c62b.js";import{F as c}from"./FormFieldMsg-1c17f4ff.js";import"./i18n-b14e6088.js";import"./Alert-9a37a638.js";import"./tslib.es6-1173d062.js";const u=class{constructor(t){i(this,t),this.slotName="input",this.catchInputSlot=t=>{n(this.host,t,this.slotName)},this._accessKey=void 0,this._alert=!0,this._currentLength=void 0,this._currentLengthDebounced=void 0,this._disabled=!1,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=void 0,this._readOnly=!1,this._renderNoLabel=!1,this._required=!1,this._shortKey=void 0,this._slotName=void 0,this._suggestions=void 0,this._smartButton=void 0,this._tooltipAlign="top",this._touched=!1}componentWillRender(){this.slotName=this._slotName?this._slotName:"input"}getIconStyles(t){return t&&"object"==typeof t&&t.style?t.style:{}}render(){var i,d,n,_,u,b,m,g,p,y,v,k;const j="object"==typeof this._msg&&null!==this._msg&&"string"==typeof(null===(i=this._msg)||void 0===i?void 0:i._description)&&(null===(d=this._msg)||void 0===d?void 0:d._description.length)>0&&(!0===this._touched||"error"!==(null===(n=this._msg)||void 0===n?void 0:n._type)),B=h(this._label),L="string"==typeof this._hint&&this._hint.length>0,x=!B&&this._hideLabel;return t(s,{key:"97a275ca1a9441bbc2b08647a9f7bb15422abe39",class:a("kol-input",this.getModifierClassNameByMsgType(j),{disabled:!0===this._disabled,[(null===(_=this._msg)||void 0===_?void 0:_._type)||"error"]:!0===j,"read-only":!0===this._readOnly,required:!0===this._required,touched:!0===this._touched,"hidden-error":!0===this._hideError})},t("label",{key:"f9840afaadb54e828df2360b35206bd474d6e6ae",class:"input-label",id:x?void 0:`${this._id}-label`,hidden:x,htmlFor:this._id},t("span",{key:"b9a24b60ba19d4af9018c4c0b0974c1976634683",class:"input-label-span"},t("slot",{key:"6dd64696bf929479eb707d3380301251e1d83457",name:"label"}))),L&&t("span",{key:"8957e1a38b7ab3e4e1b79308ac21cce40c1b87c9",class:"hint",id:`${this._id}-hint`},this._hint),t("div",{key:"4830f1ea34aba0d7affe33bb4416b1ef1d0365dd",class:{input:!0,"icon-left":"object"==typeof(null===(u=this._icons)||void 0===u?void 0:u.left),"icon-right":"object"==typeof(null===(b=this._icons)||void 0===b?void 0:b.right)}},(null===(m=this._icons)||void 0===m?void 0:m.left)&&t(r,{key:"3afaeb25f8bf25451dc92e32021742df0280ac5f",_label:"",_icons:(null===(g=this._icons)||void 0===g?void 0:g.left).icon,style:this.getIconStyles(null===(p=this._icons)||void 0===p?void 0:p.left)}),t("div",{key:"132a91efcb02a2e9f554df8d202078787de2fdc7",ref:this.catchInputSlot,id:this.slotName,class:"input-slot"}),"object"==typeof this._smartButton&&null!==this._smartButton&&t(f,{key:"eae26e05ed4265ccd3d22d0ab59da0b374d352a6",_customClass:this._smartButton._customClass,_disabled:this._smartButton._disabled,_icons:this._smartButton._icons,_hideLabel:!0,_id:this._smartButton._id,_label:this._smartButton._label,_on:this._smartButton._on,_tooltipAlign:this._smartButton._tooltipAlign,_variant:this._smartButton._variant}),(null===(y=this._icons)||void 0===y?void 0:y.right)&&t(r,{key:"4975557b0114b0e7901148a6159d3d28ee56fada",_label:"",_icons:(null===(v=this._icons)||void 0===v?void 0:v.right).icon,style:this.getIconStyles(null===(k=this._icons)||void 0===k?void 0:k.right)})),x&&t(o,{key:"6d5f028bd4ca6930fe0127ee292ca225e5dad8d4","aria-hidden":"true",class:"input-tooltip",_badgeText:this._accessKey||this._shortKey,_align:this._tooltipAlign,_id:this._hideLabel?`${this._id}-label`:void 0,_label:this._label}),j&&t(c,{key:"1ad8ac23b1bff22f8a29edfd0a58d0f192eec80c",_alert:this._alert,_hideError:this._hideError,_msg:this._msg,_id:this._id}),Array.isArray(this._suggestions)&&this._suggestions.length>0&&t("datalist",{key:"79af0e327c2e1bb571e43587478188a38899a647",id:`${this._id}-list`},this._suggestions.map(i=>t("option",{value:i}))),this._hasCounter&&t(e,null,t("span",{key:"416b8380d001dea36f8e087633ecd1d6fe523ba8",class:"counter","aria-hidden":"true","data-testid":"input-counter"},this._currentLength,this._maxLength&&`/${this._maxLength}`," ",l("kol-characters")),t("span",{key:"6fed61b8e5a0e8b01ce392f500e8f47b9b9cab45","aria-live":"polite","aria-atomic":"true",class:"visually-hidden","data-testid":"input-counter-aria"},this._currentLengthDebounced,this._maxLength&&` ${l("kol-of")} ${this._maxLength}`," ",l("kol-characters"))))}getModifierClassNameByMsgType(t){var i,s;if(t&&(null===(i=this._msg)||void 0===i?void 0:i._type))return{default:"msg-type-default",info:"msg-type-info",success:"msg-type-success",warning:"msg-type-warning",error:"msg-type-error"}[null===(s=this._msg)||void 0===s?void 0:s._type]}get host(){return d(this)}};export{u as kol_input};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t}from"./index-8a68d70d.js";import{C as i,j as o}from"./index-7a63e9eb.js";import{t as a}from"./i18n-3dd5729d.js";import{c as l,v as s}from"./color-48d7fdf1.js";import"./i18n-b14e6088.js";const r="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\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  * {\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 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 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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\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}\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(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  text {\n    font-size: calc(90rem / var(--kolibri-root-font-size, 16));\n    letter-spacing: normal;\n    word-spacing: normal;\n  }\n  svg {\n    max-height: 100%;\n  }\n}",d=r,c=class{constructor(e){n(this,e),this.handleColorChange=(e,n)=>{if("string"==typeof e){const t=l(e);n.set("_color",{red:t[0],green:t[1],blue:t[2]})}else i("[KolKolibri] You used the complex color schema. For the KoliBri we use need the color as hex string.")},this._color="#003c78",this._labeled=!0,this.state={_color:{red:0,green:60,blue:120},_labeled:!0}}render(){const n=`rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;return e(t,{key:"d6b28053214b3db88ffe73f002bff63d4b7ed6b6",class:"kol-kolibri"},e("svg",{key:"77a38f9cff5c4f708ce40260438ce621ab771826",role:"img","aria-label":a("kol-kolibri-logo"),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 600 600",fill:n},e("path",{key:"3c52e2798eef27de8c16c326e1d5da0c2c65c3ee",d:"M353 322L213 304V434L353 322Z"}),e("path",{key:"a182ec4c97daa4f48633cde95ae8e3556cfae338",d:"M209 564V304L149 434L209 564Z"}),e("path",{key:"e95f8cb5d3ab502bc66048010678618ae6d51aef",d:"M357 316L417 250L361 210L275 244L357 316Z"}),e("path",{key:"e69b894a54c051ba43f83436ecc72a620af50b45",d:"M329 218L237 92L250 222L272 241L329 218Z"}),e("path",{key:"db53142aed93c5fdbc2c6d0b2af924ba7e6b444c",d:"M353 318L35 36L213 300L353 318Z"}),e("path",{key:"28a961c943698c2bd28b3e3d6605362a9b10ce9c",d:"M391 286L565 272L421 252L391 286Z"}),!0===this.state._labeled&&e("text",{key:"d24faf032bf07683f1c6cf20a9a3233853d0f9aa",x:"250",y:"525",fill:n},"KoliBri")))}validateColor(e){s(this,e,{defaultValue:"#003c78",hooks:{beforePatch:this.handleColorChange}})}validateLabeled(e){o(this,"_labeled",e,{defaultValue:!0})}componentWillLoad(){this.validateColor(this._color),this.validateLabeled(this._labeled)}static get watchers(){return{_color:["validateColor"],_labeled:["validateLabeled"]}}};c.style={default:d};export{c as kol_kolibri};
+import{r as n,h as e,H as t}from"./index-e850ccc2.js";import{C as i,j as o}from"./index-7a63e9eb.js";import{t as a}from"./i18n-3dd5729d.js";import{c as l,v as s}from"./color-48d7fdf1.js";import"./i18n-b14e6088.js";const r="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\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  * {\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 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 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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\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}\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(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  text {\n    font-size: calc(90rem / var(--kolibri-root-font-size, 16));\n    letter-spacing: normal;\n    word-spacing: normal;\n  }\n  svg {\n    max-height: 100%;\n  }\n}",d=r,c=class{constructor(e){n(this,e),this.handleColorChange=(e,n)=>{if("string"==typeof e){const t=l(e);n.set("_color",{red:t[0],green:t[1],blue:t[2]})}else i("[KolKolibri] You used the complex color schema. For the KoliBri we use need the color as hex string.")},this._color="#003c78",this._labeled=!0,this.state={_color:{red:0,green:60,blue:120},_labeled:!0}}render(){const n=`rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;return e(t,{key:"d6b28053214b3db88ffe73f002bff63d4b7ed6b6",class:"kol-kolibri"},e("svg",{key:"77a38f9cff5c4f708ce40260438ce621ab771826",role:"img","aria-label":a("kol-kolibri-logo"),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 600 600",fill:n},e("path",{key:"3c52e2798eef27de8c16c326e1d5da0c2c65c3ee",d:"M353 322L213 304V434L353 322Z"}),e("path",{key:"a182ec4c97daa4f48633cde95ae8e3556cfae338",d:"M209 564V304L149 434L209 564Z"}),e("path",{key:"e95f8cb5d3ab502bc66048010678618ae6d51aef",d:"M357 316L417 250L361 210L275 244L357 316Z"}),e("path",{key:"e69b894a54c051ba43f83436ecc72a620af50b45",d:"M329 218L237 92L250 222L272 241L329 218Z"}),e("path",{key:"db53142aed93c5fdbc2c6d0b2af924ba7e6b444c",d:"M353 318L35 36L213 300L353 318Z"}),e("path",{key:"28a961c943698c2bd28b3e3d6605362a9b10ce9c",d:"M391 286L565 272L421 252L391 286Z"}),!0===this.state._labeled&&e("text",{key:"d24faf032bf07683f1c6cf20a9a3233853d0f9aa",x:"250",y:"525",fill:n},"KoliBri")))}validateColor(e){s(this,e,{defaultValue:"#003c78",hooks:{beforePatch:this.handleColorChange}})}validateLabeled(e){o(this,"_labeled",e,{defaultValue:!0})}componentWillLoad(){this.validateColor(this._color),this.validateLabeled(this._labeled)}static get watchers(){return{_color:["validateColor"],_labeled:["validateLabeled"]}}};c.style={default:d};export{c as kol_kolibri};

package/dist/kolibri/kol-link-button.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t}from"./index-8a68d70d.js";import{j as i}from"./component-names-4cb1c62b.js";const o="@charset \"UTF-8\";\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\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  * {\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 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 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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\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}\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(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip-wc .tooltip-floating {\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);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  :is(a, button) {\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  :is(a, button)::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  /* TODO: Why we need this? */\n  :is(a, button) > .kol-span-wc {\n    width: 100%;\n    margin: auto;\n  }\n}",a=o,s=class{constructor(t){n(this,t),this.catchRef=n=>{this.linkWcRef=n},this._accessKey=void 0,this._ariaCurrentValue=void 0,this._ariaDescription=void 0,this._customClass=void 0,this._disabled=!1,this._download=void 0,this._hideLabel=!1,this._href=void 0,this._icons=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._tabIndex=void 0,this._target=void 0,this._tooltipAlign="right",this._variant="normal"}async focus(){await this.kolFocus()}async kolFocus(){var n;await(null===(n=this.linkWcRef)||void 0===n?void 0:n.kolFocus())}render(){return e(t,{key:"6d487fb585b6611f00f61eee36078393626e47fc",class:"kol-link-button"},e(i,{key:"79fcc7ec08bea51d91e2eaa63136937e066cfd8e",ref:this.catchRef,class:{button:!0},_accessKey:this._accessKey,_ariaCurrentValue:this._ariaCurrentValue,_ariaDescription:this._ariaDescription,_customClass:this._customClass,_disabled:this._disabled,_download:this._download,_hideLabel:this._hideLabel,_href:this._href,_icons:this._icons,_label:this._label,_on:this._on,_shortKey:this._shortKey,_tabIndex:this._tabIndex,_target:this._target,_tooltipAlign:this._tooltipAlign,_variant:this._variant},e("slot",{key:"dae8e678732a9860afa4d84d0a37932e5a604dd7",name:"expert",slot:"expert"})))}static get delegatesFocus(){return!0}};s.style={default:a};export{s as kol_link_button};
+import{r as n,h as e,H as t}from"./index-e850ccc2.js";import{j as i}from"./component-names-4cb1c62b.js";const o="@charset \"UTF-8\";\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\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  * {\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 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 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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\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}\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(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip-wc .tooltip-floating {\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);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  :is(a, button) {\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  :is(a, button)::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  /* TODO: Why we need this? */\n  :is(a, button) > .kol-span-wc {\n    width: 100%;\n    margin: auto;\n  }\n}",a=o,s=class{constructor(t){n(this,t),this.catchRef=n=>{this.linkWcRef=n},this._accessKey=void 0,this._ariaCurrentValue=void 0,this._ariaDescription=void 0,this._customClass=void 0,this._disabled=!1,this._download=void 0,this._hideLabel=!1,this._href=void 0,this._icons=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._tabIndex=void 0,this._target=void 0,this._tooltipAlign="right",this._variant="normal"}async focus(){await this.kolFocus()}async kolFocus(){var n;await(null===(n=this.linkWcRef)||void 0===n?void 0:n.kolFocus())}render(){return e(t,{key:"6d487fb585b6611f00f61eee36078393626e47fc",class:"kol-link-button"},e(i,{key:"79fcc7ec08bea51d91e2eaa63136937e066cfd8e",ref:this.catchRef,class:{button:!0},_accessKey:this._accessKey,_ariaCurrentValue:this._ariaCurrentValue,_ariaDescription:this._ariaDescription,_customClass:this._customClass,_disabled:this._disabled,_download:this._download,_hideLabel:this._hideLabel,_href:this._href,_icons:this._icons,_label:this._label,_on:this._on,_shortKey:this._shortKey,_tabIndex:this._tabIndex,_target:this._target,_tooltipAlign:this._tooltipAlign,_variant:this._variant},e("slot",{key:"dae8e678732a9860afa4d84d0a37932e5a604dd7",name:"expert",slot:"expert"})))}static get delegatesFocus(){return!0}};s.style={default:a};export{s as kol_link_button};

package/dist/kolibri/kol-link-group.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t}from"./index-8a68d70d.js";import{w as i}from"./index-7a63e9eb.js";import{r as a,a as o}from"./unique-nav-labels-4be6182a.js";import{w as l}from"./validation-7170ea32.js";import{h as s}from"./component-names-4cb1c62b.js";import{v as r}from"./label-7d1ce375.js";const d="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\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  * {\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 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 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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\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}\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(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  :is(ol, ul).horizontal {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  :is(ol, ul).horizontal li {\n    margin-right: calc(4rem / var(--kolibri-root-font-size, 16));\n    margin-left: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :is(ol, ul).horizontal li:first-child {\n    margin-left: 0;\n  }\n  :is(ol, ul).horizontal li:last-child {\n    margin-right: 0;\n  }\n  :is(ol, ul).vertical li {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n    margin-left: calc(28rem / var(--kolibri-root-font-size, 16));\n  }\n  li.list-none {\n    margin-left: 0;\n    list-style-type: none !important;\n  }\n}",h=d,c=n=>{const t=[];return n.links.map((i,a)=>{t.push(e("li",{key:a,class:{ident:a>0&&"vertical"===n.orientation,"list-none":0===a&&"horizontal"===n.orientation},style:{listStyleType:n.listStyleType}},e(s,Object.assign({},i))))}),t},p=class{constructor(e){n(this,e),this.isUl=!0,this._listStyleType=void 0,this._label=void 0,this._links=void 0,this._orientation="vertical",this.state={_listStyleType:"disc",_links:[],_orientation:"vertical"}}render(){const n=this.isUl?"ul":"ol";return e(t,{key:"9262137a23f23bd03cb95521856950754c8278a7",class:"kol-link-group"},e(n,{key:"1faf48bc506641b5973025f7a3c0ebb8eb7248d0","aria-label":this.state._label,class:{vertical:"vertical"===this.state._orientation,horizontal:"horizontal"===this.state._orientation}},e(c,{key:"9feb34993b9bf40c62c6982b2ec24b394989e3d6",links:this.state._links,orientation:this.state._orientation,listStyleType:this.state._listStyleType})))}validateLabel(n,e,t=!1){!t&&this.state._label&&a(this.state._label),r(this,n),this.state._label&&o(this.state._label)}validateListStyleType(n){i(this,"_listStyleType",n=>{switch(n){case"disc":case"circle":case"square":case"none":return this.isUl=!0,!0;case"decimal":case"decimal-leading-zero":case"lower-alpha":case"lower-latin":case"lower-greek":case"lower-roman":case"upper-alpha":case"upper-latin":case"upper-roman":return this.isUl=!1,!0;default:return!1}},new Set(["https://www.w3schools.com/tags/tag_ol.asp"]),n,{defaultValue:"disc"})}validateLinks(n){l("KolLinkGroup",this,n)}validateOrientation(n){i(this,"_orientation",n=>"horizontal"===n||"vertical"===n,new Set(["Orientation {horizontal, vertical}"]),n,{defaultValue:"vertical"})}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateListStyleType(this._listStyleType),this.validateLinks(this._links),this.validateOrientation(this._orientation)}disconnectedCallback(){this.state._label&&a(this.state._label)}static get watchers(){return{_label:["validateLabel"],_listStyleType:["validateListStyleType"],_links:["validateLinks"],_orientation:["validateOrientation"]}}};p.style={default:h};export{p as kol_link_group};
+import{r as n,h as e,H as t}from"./index-e850ccc2.js";import{w as i}from"./index-7a63e9eb.js";import{r as a,a as o}from"./unique-nav-labels-4be6182a.js";import{w as l}from"./validation-7170ea32.js";import{h as s}from"./component-names-4cb1c62b.js";import{v as r}from"./label-7d1ce375.js";const d="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\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  * {\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 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 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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\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}\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(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  :is(ol, ul).horizontal {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  :is(ol, ul).horizontal li {\n    margin-right: calc(4rem / var(--kolibri-root-font-size, 16));\n    margin-left: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :is(ol, ul).horizontal li:first-child {\n    margin-left: 0;\n  }\n  :is(ol, ul).horizontal li:last-child {\n    margin-right: 0;\n  }\n  :is(ol, ul).vertical li {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n    margin-left: calc(28rem / var(--kolibri-root-font-size, 16));\n  }\n  li.list-none {\n    margin-left: 0;\n    list-style-type: none !important;\n  }\n}",c=d,h=n=>{const t=[];return n.links.map((i,a)=>{t.push(e("li",{key:a,class:{ident:a>0&&"vertical"===n.orientation,"list-none":0===a&&"horizontal"===n.orientation},style:{listStyleType:n.listStyleType}},e(s,Object.assign({},i))))}),t},p=class{constructor(e){n(this,e),this.isUl=!0,this._listStyleType=void 0,this._label=void 0,this._links=void 0,this._orientation="vertical",this.state={_listStyleType:"disc",_links:[],_orientation:"vertical"}}render(){const n=this.isUl?"ul":"ol";return e(t,{key:"9262137a23f23bd03cb95521856950754c8278a7",class:"kol-link-group"},e(n,{key:"1faf48bc506641b5973025f7a3c0ebb8eb7248d0","aria-label":this.state._label,class:{vertical:"vertical"===this.state._orientation,horizontal:"horizontal"===this.state._orientation}},e(h,{key:"9feb34993b9bf40c62c6982b2ec24b394989e3d6",links:this.state._links,orientation:this.state._orientation,listStyleType:this.state._listStyleType})))}validateLabel(n,e,t=!1){!t&&this.state._label&&a(this.state._label),r(this,n),this.state._label&&o(this.state._label)}validateListStyleType(n){i(this,"_listStyleType",n=>{switch(n){case"disc":case"circle":case"square":case"none":return this.isUl=!0,!0;case"decimal":case"decimal-leading-zero":case"lower-alpha":case"lower-latin":case"lower-greek":case"lower-roman":case"upper-alpha":case"upper-latin":case"upper-roman":return this.isUl=!1,!0;default:return!1}},new Set(["https://www.w3schools.com/tags/tag_ol.asp"]),n,{defaultValue:"disc"})}validateLinks(n){l("KolLinkGroup",this,n)}validateOrientation(n){i(this,"_orientation",n=>"horizontal"===n||"vertical"===n,new Set(["Orientation {horizontal, vertical}"]),n,{defaultValue:"vertical"})}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateListStyleType(this._listStyleType),this.validateLinks(this._links),this.validateOrientation(this._orientation)}disconnectedCallback(){this.state._label&&a(this.state._label)}static get watchers(){return{_label:["validateLabel"],_listStyleType:["validateListStyleType"],_links:["validateLinks"],_orientation:["validateOrientation"]}}};p.style={default:c};export{p as kol_link_group};

package/dist/kolibri/kol-link-wc.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as t,H as s}from"./index-8a68d70d.js";import{w as e,y as a,D as d,C as n,B as h}from"./index-7a63e9eb.js";import{o as l}from"./ariaCurrentService-6fe36ebc.js";import{p as o}from"./events-29e84d75.js";import{n as r}from"./dev.utils-73ce9898.js";import{a as c,f,g as u}from"./component-names-4cb1c62b.js";import{t as b}from"./i18n-3dd5729d.js";import{v,a as p,b as m,c as _}from"./access-and-short-key-914780a7.js";import{v as y}from"./href-3ee53c2c.js";import{v as g,a as j,b as k,c as x}from"./button-variant-ebe4a1ea.js";import{v as A}from"./custom-class-14f41251.js";import{v as w}from"./disabled-26405bb8.js";import{v as C}from"./hide-label-0d754c8e.js";import{v as V}from"./icons-adcda9b0.js";import{a as K}from"./label-7d1ce375.js";import{v as O}from"./tooltip-align-6964dd71.js";import"./i18n-b14e6088.js";import"./align-f3101425.js";const D=["date","location","page","step","time","true","false"],L=(t,a)=>{e(t,"_ariaCurrentValue",t=>"string"==typeof t&&D.includes(t),new Set([`AriaCurrentValue {${D.join(", ")}`]),a,{defaultValue:"page"})},T=(t,i)=>{a(t,"_ariaOwns",i,{defaultValue:void 0})},I=(t,i)=>{a(t,"_download",i)},E=(t,a)=>{"object"==typeof a&&"function"==typeof(null==a?void 0:a.onClick)&&(t.state=Object.assign(Object.assign({},t.state),{_on:a}))},H=(t,i)=>{a(t,"_target",i)},S=class{constructor(t){i(this,t),this.internalDescriptionById=r(),this.catchRef=t=>{this.anchorRef=t},this.onClick=t=>{var a,i;!0===this.state._disabled?o(t):"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)&&(t.preventDefault(),t.stopPropagation(),d(t,this.anchorRef),null===(i=this.state._on)||void 0===i||i.onClick(t,this.state._href))},this.getRenderValues=()=>{const t="string"==typeof this.state._target&&"_self"!==this.state._target,a={href:"string"==typeof this.state._href&&this.state._href.length>0?this.state._href:"javascript:void(0);",target:"string"==typeof this.state._target&&this.state._target.length>0?this.state._target:void 0,rel:t?"noopener":void 0,download:"string"==typeof this.state._download?this.state._download:void 0};return!0!==this.state._hideLabel||this.state._label||n("[KolLink] An aria-label must be set when _hide-label is set."),{isExternal:t,tagAttrs:a}},this._accessKey=void 0,this._ariaCurrentValue=void 0,this._ariaDescription=void 0,this._ariaExpanded=void 0,this._ariaOwns=void 0,this._customClass=void 0,this._disabled=!1,this._download=void 0,this._hideLabel=!1,this._href=void 0,this._icons=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._tabIndex=void 0,this._target=void 0,this._tooltipAlign="right",this._variant="normal",this.state={_ariaCurrentValue:"page",_href:"",_icons:{}}}async kolFocus(){var t;null===(t=this.anchorRef)||void 0===t||t.focus()}render(){var a,i;const{isExternal:e,tagAttrs:l}=this.getRenderValues(),d=h(this.state._label),o=Boolean(null===(i=null===(a=this.state._ariaDescription)||void 0===a?void 0:a.trim())||void 0===i?void 0:i.length);return t(s,{key:"c49c578ca62676b33a74c33e27bb4033852af9ba",class:"kol-link-wc"},t("a",Object.assign({key:"b42dacd815f4d6f55d872342451a54a6dc8b370d",ref:this.catchRef},l,{accessKey:this.state._accessKey,"aria-current":this.state._ariaCurrent,"aria-describedby":o?this.internalDescriptionById:void 0,"aria-disabled":this.state._disabled?"true":void 0,"aria-expanded":"boolean"==typeof this.state._ariaExpanded?String(this.state._ariaExpanded):void 0,"aria-owns":this.state._ariaOwns,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?`${this.state._label}${e?` (${b("kol-open-link-in-tab")})`:""}`:void 0,class:{disabled:!0===this.state._disabled,"external-link":e,"hide-label":!0===this.state._hideLabel,[this.state._variant]:"custom"!==this.state._variant,[this.state._customClass]:"custom"===this.state._variant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0}},this.state._on,{onClick:this.onClick,onKeyPress:this.onClick,role:this.state._role,tabIndex:this.state._disabled?-1:this.state._tabIndex}),t(f,{key:"50aaeb25b8d5af5e114d24ce363f84c1d22b4f9d",_badgeText:this.state._accessKey||this.state._shortKey,_icons:this.state._icons,_hideLabel:this.state._hideLabel,_label:d?"":this.state._label||this.state._href},t("slot",{key:"8c27e1625da7713c731734eff25b5611281c0aae",name:"expert",slot:"expert"})),e&&t(u,{key:"61d2042428745bb5a99338b2ddae19b717e1e302",class:"external-link-icon",_label:this.state._hideLabel?"":b("kol-open-link-in-tab"),_icons:"codicon codicon-link-external","aria-hidden":this.state._hideLabel})),t(c,{key:"68eafe0ab64a670ddccf5cc9f8d57cc1cbca087d","aria-hidden":"true",hidden:d||!this.state._hideLabel,_badgeText:this.state._accessKey||this.state._shortKey,_align:this.state._tooltipAlign,_label:this.state._label||this.state._href}),o&&t("span",{key:"9eef9ed488ab280b4e32c2a7961d225d307eaf62",class:"visually-hidden",id:this.internalDescriptionById},this.state._ariaDescription))}validateAccessKey(t){v(this,t),p(t,this._shortKey)}validateAriaCurrentValue(t){L(this,t)}validateAriaDescription(t){g(this,t)}validateAriaExpanded(t){j(this,t)}validateAriaOwns(t){T(this,t)}validateCustomClass(t){A(this,t)}validateDisabled(t){w(this,t)}validateDownload(t){I(this,t)}validateHideLabel(t){C(this,t)}validateHref(t){y(this,t,{required:!0})}validateIcons(t){V(this,t)}validateLabel(t){K(this,t)}validateOn(t){E(this,t)}validateRole(t){k(this,t)}validateShortKey(t){m(this,t),p(this._accessKey,t)}validateTabIndex(t){_(this,t)}validateTarget(t){H(this,t)}validateTooltipAlign(t){O(this,t)}validateVariant(t){x(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaCurrentValue(this._ariaCurrentValue),this.validateAriaDescription(this._ariaDescription),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaOwns(this._ariaOwns),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateDownload(this._download),this.validateHideLabel(this._hideLabel),this.validateHref(this._href),this.validateIcons(this._icons),this.validateLabel(this._label),this.validateOn(this._on),this.validateRole(this._role),this.validateShortKey(this._shortKey),this.validateTabIndex(this._tabIndex),this.validateTarget(this._target),this.validateTooltipAlign(this._tooltipAlign),this.validateVariant(this._variant),this.unsubscribeOnLocationChange=l(t=>{this.state._ariaCurrent=t===this.state._href?this.state._ariaCurrentValue:void 0}),p(this._accessKey,this._shortKey)}disconnectedCallback(){this.unsubscribeOnLocationChange&&this.unsubscribeOnLocationChange()}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaCurrentValue:["validateAriaCurrentValue"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaOwns:["validateAriaOwns"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_download:["validateDownload"],_hideLabel:["validateHideLabel"],_href:["validateHref"],_icons:["validateIcons"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_tabIndex:["validateTabIndex"],_target:["validateTarget"],_tooltipAlign:["validateTooltipAlign"],_variant:["validateVariant"]}}};export{S as kol_link_wc};
+import{r as i,h as t,H as s}from"./index-e850ccc2.js";import{w as e,y as a,D as d,C as n,B as h}from"./index-7a63e9eb.js";import{o as l}from"./ariaCurrentService-6fe36ebc.js";import{p as o}from"./events-29e84d75.js";import{n as r}from"./dev.utils-da85e627.js";import{a as c,f,g as u}from"./component-names-4cb1c62b.js";import{t as b}from"./i18n-3dd5729d.js";import{v,a as p,b as m,c as _}from"./access-and-short-key-914780a7.js";import{v as y}from"./href-3ee53c2c.js";import{v as g,a as j,b as k,c as x}from"./button-variant-ebe4a1ea.js";import{v as A}from"./custom-class-14f41251.js";import{v as w}from"./disabled-26405bb8.js";import{v as C}from"./hide-label-0d754c8e.js";import{v as V}from"./icons-adcda9b0.js";import{a as K}from"./label-7d1ce375.js";import{v as O}from"./tooltip-align-6964dd71.js";import"./i18n-b14e6088.js";import"./align-f3101425.js";const D=["date","location","page","step","time","true","false"],L=(t,a)=>{e(t,"_ariaCurrentValue",t=>"string"==typeof t&&D.includes(t),new Set([`AriaCurrentValue {${D.join(", ")}`]),a,{defaultValue:"page"})},T=(t,e)=>{a(t,"_ariaOwns",e,{defaultValue:void 0})},I=(t,e)=>{a(t,"_download",e)},E=(t,a)=>{"object"==typeof a&&"function"==typeof(null==a?void 0:a.onClick)&&(t.state=Object.assign(Object.assign({},t.state),{_on:a}))},H=(t,e)=>{a(t,"_target",e)},S=class{constructor(t){i(this,t),this.internalDescriptionById=r(),this.catchRef=t=>{this.anchorRef=t},this.onClick=t=>{var a,e;!0===this.state._disabled?o(t):"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)&&(t.preventDefault(),t.stopPropagation(),d(t,this.anchorRef),null===(e=this.state._on)||void 0===e||e.onClick(t,this.state._href))},this.getRenderValues=()=>{const t="string"==typeof this.state._target&&"_self"!==this.state._target,a={href:"string"==typeof this.state._href&&this.state._href.length>0?this.state._href:"javascript:void(0);",target:"string"==typeof this.state._target&&this.state._target.length>0?this.state._target:void 0,rel:t?"noopener":void 0,download:"string"==typeof this.state._download?this.state._download:void 0};return!0!==this.state._hideLabel||this.state._label||n("[KolLink] An aria-label must be set when _hide-label is set."),{isExternal:t,tagAttrs:a}},this._accessKey=void 0,this._ariaCurrentValue=void 0,this._ariaDescription=void 0,this._ariaExpanded=void 0,this._ariaOwns=void 0,this._customClass=void 0,this._disabled=!1,this._download=void 0,this._hideLabel=!1,this._href=void 0,this._icons=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._tabIndex=void 0,this._target=void 0,this._tooltipAlign="right",this._variant="normal",this.state={_ariaCurrentValue:"page",_href:"",_icons:{}}}async kolFocus(){var t;null===(t=this.anchorRef)||void 0===t||t.focus()}render(){var a,e;const{isExternal:i,tagAttrs:l}=this.getRenderValues(),o=h(this.state._label),d=Boolean(null===(e=null===(a=this.state._ariaDescription)||void 0===a?void 0:a.trim())||void 0===e?void 0:e.length);return t(s,{key:"c49c578ca62676b33a74c33e27bb4033852af9ba",class:"kol-link-wc"},t("a",Object.assign({key:"b42dacd815f4d6f55d872342451a54a6dc8b370d",ref:this.catchRef},l,{accessKey:this.state._accessKey,"aria-current":this.state._ariaCurrent,"aria-describedby":d?this.internalDescriptionById:void 0,"aria-disabled":this.state._disabled?"true":void 0,"aria-expanded":"boolean"==typeof this.state._ariaExpanded?String(this.state._ariaExpanded):void 0,"aria-owns":this.state._ariaOwns,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?`${this.state._label}${i?` (${b("kol-open-link-in-tab")})`:""}`:void 0,class:{disabled:!0===this.state._disabled,"external-link":i,"hide-label":!0===this.state._hideLabel,[this.state._variant]:"custom"!==this.state._variant,[this.state._customClass]:"custom"===this.state._variant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0}},this.state._on,{onClick:this.onClick,onKeyPress:this.onClick,role:this.state._role,tabIndex:this.state._disabled?-1:this.state._tabIndex}),t(f,{key:"50aaeb25b8d5af5e114d24ce363f84c1d22b4f9d",_badgeText:this.state._accessKey||this.state._shortKey,_icons:this.state._icons,_hideLabel:this.state._hideLabel,_label:o?"":this.state._label||this.state._href},t("slot",{key:"8c27e1625da7713c731734eff25b5611281c0aae",name:"expert",slot:"expert"})),i&&t(u,{key:"61d2042428745bb5a99338b2ddae19b717e1e302",class:"external-link-icon",_label:this.state._hideLabel?"":b("kol-open-link-in-tab"),_icons:"codicon codicon-link-external","aria-hidden":this.state._hideLabel})),t(c,{key:"68eafe0ab64a670ddccf5cc9f8d57cc1cbca087d","aria-hidden":"true",hidden:o||!this.state._hideLabel,_badgeText:this.state._accessKey||this.state._shortKey,_align:this.state._tooltipAlign,_label:this.state._label||this.state._href}),d&&t("span",{key:"9eef9ed488ab280b4e32c2a7961d225d307eaf62",class:"visually-hidden",id:this.internalDescriptionById},this.state._ariaDescription))}validateAccessKey(t){v(this,t),p(t,this._shortKey)}validateAriaCurrentValue(t){L(this,t)}validateAriaDescription(t){g(this,t)}validateAriaExpanded(t){j(this,t)}validateAriaOwns(t){T(this,t)}validateCustomClass(t){A(this,t)}validateDisabled(t){w(this,t)}validateDownload(t){I(this,t)}validateHideLabel(t){C(this,t)}validateHref(t){y(this,t,{required:!0})}validateIcons(t){V(this,t)}validateLabel(t){K(this,t)}validateOn(t){E(this,t)}validateRole(t){k(this,t)}validateShortKey(t){m(this,t),p(this._accessKey,t)}validateTabIndex(t){_(this,t)}validateTarget(t){H(this,t)}validateTooltipAlign(t){O(this,t)}validateVariant(t){x(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaCurrentValue(this._ariaCurrentValue),this.validateAriaDescription(this._ariaDescription),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaOwns(this._ariaOwns),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateDownload(this._download),this.validateHideLabel(this._hideLabel),this.validateHref(this._href),this.validateIcons(this._icons),this.validateLabel(this._label),this.validateOn(this._on),this.validateRole(this._role),this.validateShortKey(this._shortKey),this.validateTabIndex(this._tabIndex),this.validateTarget(this._target),this.validateTooltipAlign(this._tooltipAlign),this.validateVariant(this._variant),this.unsubscribeOnLocationChange=l(t=>{this.state._ariaCurrent=t===this.state._href?this.state._ariaCurrentValue:void 0}),p(this._accessKey,this._shortKey)}disconnectedCallback(){this.unsubscribeOnLocationChange&&this.unsubscribeOnLocationChange()}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaCurrentValue:["validateAriaCurrentValue"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaOwns:["validateAriaOwns"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_download:["validateDownload"],_hideLabel:["validateHideLabel"],_href:["validateHref"],_icons:["validateIcons"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_tabIndex:["validateTabIndex"],_target:["validateTarget"],_tooltipAlign:["validateTooltipAlign"],_variant:["validateVariant"]}}};export{S as kol_link_wc};