@public-ui/components 2.2.0 → 2.2.1-3f35a0e390fee7a875eaf8922b28ac560293ae59.0

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-4e3a1dc7.js";import{n as o}from"./dev.utils-a25f785b.js";import{t as a,s}from"./events-29e84d75.js";import{g as r}from"./controller-d9e11e4b.js";import{I as l}from"./InternalUnderlinedBadgeText-bccc22ee.js";import{a as d}from"./controller-4e654fd8.js";import{p as h}from"./controller-f13259ef.js";import{l as c}from"./component-names-d278f819.js";import{K as p}from"./FormFieldMsg-3f74273a.js";import{s as u,b as f}from"./reuse-32931294.js";import"./dev.utils-fab45cbc.js";import"./associated.controller-1037cac7.js";import"./prop.validators-447b6d6f.js";import"./index-b8f228e7.js";import"./access-and-short-key-152ce1ef.js";import"./hide-label-b2ccddd2.js";import"./label-ec7596fe.js";import"./tooltip-align-0e8c7391.js";import"./align-9ab97987.js";import"./clsx-09a06a12.js";import"./Alert-5662dc3c.js";import"./tslib.es6-2e5096f8.js";import"./i18n-5fe08f1c.js";import"./i18n-7ea9f137.js";const b="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\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    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\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     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: 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}\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  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\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  }\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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\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  :host {\n    display: block;\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  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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  .input {\n    background-color: white;\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: calc(2rem / var(--kolibri-root-font-size, 16));\n    --input-size: 1.5em;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .icons {\n    display: none;\n  }\n  label {\n    cursor: pointer;\n  }\n  input {\n    appearance: none;\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: 100%;\n    cursor: pointer;\n    display: flex;\n    height: var(--input-size);\n    margin: 0;\n    min-height: var(--input-size);\n    min-width: var(--input-size);\n    padding: 0;\n    width: var(--input-size);\n  }\n  input:before {\n    border-radius: 100%;\n    content: \"\";\n    margin: auto;\n    height: calc(var(--input-size) / 2);\n    width: calc(var(--input-size) / 2);\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    align-items: center;\n    display: flex;\n  }\n  /* required star is on fieldset legend */\n  .required label > span::after {\n    content: \"\";\n  }\n}",m=b,y=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}=r(this.state),a=u(this.state._label),o="string"==typeof this._hint&&this._hint.length>0;return n(e,{key:"14976c2deb8bccea57990829697e0979bb4c2672",class:"kol-input-radio"},n("fieldset",{key:"911ee01df7ffb83679afb2413ccbb8bba479f9ba",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:"d285ef73194ab8825ca4c114614b09b6caf04dc6",class:"block w-full mb-1 leading-normal"},n("span",{key:"888ea60973defd00abece6839b8f23fd9c037907"},n("span",{key:"b64691ec564630c93575d411c5b42c31fd2664af",slot:"label"},a?n("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?n(l,{badgeText:f(this.state._accessKey,this.state._shortKey),label:this._label}):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,_accessKey:this.state._accessKey,_disabled:this.state._disabled||e.disabled,_hideLabel:this.state._hideLabel,_hint:e.hint,_id:a,_label:e.label,_renderNoLabel:!0,_required:this.state._required,_shortKey:this.state._shortKey,_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:"",accessKey:this.state._accessKey,"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:"04dbb2289340c968b29be621004e7a90cf04ac66",_alert:this.showAsAlert(),_hideError:this.state._hideError,_msg:this.state._msg,_id:this.state._id}),o&&n("span",{key:"5f38601a8937370cbef547392b8e356586d92cc6",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&&(a("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&&(s(e),a("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._accessKey=void 0,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._shortKey=void 0,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}validateAccessKey(e){this.controller.validateAccessKey(e)}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)}validateShortKey(e){this.controller.validateShortKey(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{_accessKey:["validateAccessKey"],_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"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};y.style={default:m};export{y as kol_input_radio};
+import{h as n,H as e,r as t,g as i}from"./index-a8771497.js";import{n as o}from"./dev.utils-e76d2676.js";import{t as a,s}from"./events-29e84d75.js";import{g as r}from"./controller-96fe2d26.js";import{I as l}from"./InternalUnderlinedBadgeText-f45a7ef4.js";import{a as d}from"./controller-dacdb561.js";import{p as h}from"./controller-172fcdb6.js";import{l as c}from"./component-names-d278f819.js";import{K as p}from"./FormFieldMsg-d2df5701.js";import{s as u,b as f}from"./reuse-32931294.js";import"./dev.utils-fab45cbc.js";import"./associated.controller-bce3d721.js";import"./prop.validators-c5e6ad2d.js";import"./index-541b643a.js";import"./access-and-short-key-864aafba.js";import"./hide-label-db0db59c.js";import"./label-d70e7c34.js";import"./common-0f1f2276.js";import"./tooltip-align-6b648461.js";import"./align-e29ed804.js";import"./clsx-09a06a12.js";import"./Alert-f9315efd.js";import"./tslib.es6-2e5096f8.js";import"./i18n-5fe08f1c.js";import"./i18n-7ea9f137.js";const b="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\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    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\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     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: 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}\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  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\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  }\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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\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  :host {\n    display: block;\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  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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  .input {\n    background-color: white;\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: calc(2rem / var(--kolibri-root-font-size, 16));\n    --input-size: 1.5em;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .icons {\n    display: none;\n  }\n  label {\n    cursor: pointer;\n  }\n  input {\n    appearance: none;\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: 100%;\n    cursor: pointer;\n    display: flex;\n    height: var(--input-size);\n    margin: 0;\n    min-height: var(--input-size);\n    min-width: var(--input-size);\n    padding: 0;\n    width: var(--input-size);\n  }\n  input:before {\n    border-radius: 100%;\n    content: \"\";\n    margin: auto;\n    height: calc(var(--input-size) / 2);\n    width: calc(var(--input-size) / 2);\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    align-items: center;\n    display: flex;\n  }\n  /* required star is on fieldset legend */\n  .required label > span::after {\n    content: \"\";\n  }\n}",m=b,y=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}=r(this.state),a=u(this.state._label),o="string"==typeof this._hint&&this._hint.length>0;return n(e,{key:"14976c2deb8bccea57990829697e0979bb4c2672",class:"kol-input-radio"},n("fieldset",{key:"911ee01df7ffb83679afb2413ccbb8bba479f9ba",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:"d285ef73194ab8825ca4c114614b09b6caf04dc6",class:"block w-full mb-1 leading-normal"},n("span",{key:"888ea60973defd00abece6839b8f23fd9c037907"},n("span",{key:"b64691ec564630c93575d411c5b42c31fd2664af",slot:"label"},a?n("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?n(l,{badgeText:f(this.state._accessKey,this.state._shortKey),label:this._label}):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,_accessKey:this.state._accessKey,_disabled:this.state._disabled||e.disabled,_hideLabel:this.state._hideLabel,_hint:e.hint,_id:a,_label:e.label,_renderNoLabel:!0,_required:this.state._required,_shortKey:this.state._shortKey,_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:"",accessKey:this.state._accessKey,"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:"04dbb2289340c968b29be621004e7a90cf04ac66",_alert:this.showAsAlert(),_hideError:this.state._hideError,_msg:this.state._msg,_id:this.state._id}),o&&n("span",{key:"5f38601a8937370cbef547392b8e356586d92cc6",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&&(a("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&&(s(e),a("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._accessKey=void 0,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._shortKey=void 0,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}validateAccessKey(e){this.controller.validateAccessKey(e)}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)}validateShortKey(e){this.controller.validateShortKey(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{_accessKey:["validateAccessKey"],_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"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};y.style={default:m};export{y as kol_input_radio};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolInputRadioDefaultStyle0","KolInputRadio","getValue","this","currentValue","focus","kolFocus","_a","inputRef","render","ariaDescribedBy","hasError","getRenderStates","state","hasExpertSlot","showExpertSlot","_label","hasHint","_hint","length","h","Host","key","class","fieldset","disabled","_disabled","error","required","_required","_hideError","_orientation","slot","name","_accessKey","_shortKey","InternalUnderlinedBadgeText","badgeText","buildBadgeTextString","label","_options","map","option","index","customId","_id","slotName","selected","_value","value","KolInputTag","radio","Boolean","_hideLabel","hint","_renderNoLabel","_slotName","_tooltipAlign","_touched","Object","assign","ref","catchRef","undefined","title","accessKey","join","type","id","checked","_name","tabIndex","_tabIndex","controller","onFacade","onChange","onClick","onInput","onKeyDown","bind","onFocus","event","inputHasFocus","onBlur","htmlFor","style","height","margin","padding","visibility","KolFormFieldMsgFc","_alert","showAsAlert","_msg","constructor","hostRef","target","HTMLInputElement","getOptionByKey","tryToDispatchKoliBriEvent","host","_on","stopPropagation","setFormAssociatedValue","code","propagateSubmitEventToForm","form","nonce","InputRadioController","validateAccessKey","validateTooltipAlign","validateAlert","validateDisabled","validateError","validateHideLabel","validateHideError","validateHint","validateId","validateLabel","validateMsg","validateName","validateOn","validateOptions","validateOrientation","validateRequired","validateShortKey","validateSyncValueBySelector","validateTabIndex","validateTouched","validateValue","componentWillLoad"],"sources":["src/components/input-radio/style.scss?tag=kol-input-radio&mode=default&encapsulation=shadow","src/components/input-radio/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n@import '../input';\n\n@include kol-alert-styles;\n\n@layer kol-component {\n\t:host {\n\t\t--border-width: #{rem(2)};\n\t\t--input-size: 1.5em;\n\t\tfont-size: rem(16);\n\t}\n\n\t.kol-input .icons {\n\t\tdisplay: none;\n\t}\n\n\tlabel {\n\t\tcursor: pointer;\n\t}\n\n\tinput {\n\t\tappearance: none;\n\t\tborder-width: var(--border-width);\n\t\tborder-style: solid;\n\t\tborder-radius: 100%;\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\theight: var(--input-size);\n\t\tmargin: 0;\n\t\tmin-height: var(--input-size);\n\t\tmin-width: var(--input-size);\n\t\tpadding: 0;\n\t\twidth: var(--input-size);\n\t}\n\n\tinput:before {\n\t\tborder-radius: 100%;\n\t\tcontent: '';\n\t\tmargin: auto;\n\t\theight: calc(var(--input-size) / 2);\n\t\twidth: calc(var(--input-size) / 2);\n\t}\n\n\tinput:checked:before {\n\t\tbackground-color: #000;\n\t}\n\n\t@media (forced-colors: active) {\n\t\tinput:checked:before {\n\t\t\t/* Give it a visible background in forced colors mode */\n\t\t\tbackground-color: selectedItem !important;\n\t\t}\n\t}\n\n\tfieldset {\n\t\tdisplay: flex;\n\t}\n\n\tfieldset.vertical {\n\t\tflex-direction: column;\n\t}\n\n\tfieldset .input-slot {\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t}\n\n\t/* required star is on fieldset legend */\n\t.required label > span::after {\n\t\tcontent: '';\n\t}\n}\n","import type {\n\tFocusableElement,\n\tHideErrorPropType,\n\tIdPropType,\n\tInputRadioAPI,\n\tInputRadioStates,\n\tInputTypeOnDefault,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tOrientation,\n\tRadioOptionsPropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tShortKeyPropType,\n} from '../../schema';\nimport { buildBadgeTextString, showExpertSlot } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { nonce } from '../../utils/dev.utils';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { getRenderStates } from '../input/controller';\nimport { InternalUnderlinedBadgeText } from '../span/InternalUnderlinedBadgeText';\nimport { InputRadioController } from './controller';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { KolInputTag } from '../../core/component-names';\nimport { KolFormFieldMsgFc } from '../../functional-components';\n\n/**\n * @slot - Die Legende/Überschrift der Radiobuttons.\n */\n@Component({\n\ttag: 'kol-input-radio',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolInputRadio implements InputRadioAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolInputRadioElement;\n\tprivate currentValue?: StencilUnknown;\n\n\tprivate inputRef?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.inputRef = ref;\n\t};\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<StencilUnknown | undefined> {\n\t\treturn this.currentValue;\n\t}\n\n\t/**\n\t * @deprecated Use kolFocus instead.\n\t */\n\t@Method()\n\tpublic async focus() {\n\t\tawait this.kolFocus();\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tthis.inputRef?.focus();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy, hasError } = getRenderStates(this.state);\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\t\tconst hasHint = typeof this._hint === 'string' && this._hint.length > 0;\n\t\treturn (\n\t\t\t<Host class=\"kol-input-radio\">\n\t\t\t\t<fieldset\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tfieldset: true,\n\t\t\t\t\t\tdisabled: this.state._disabled === true,\n\t\t\t\t\t\terror: hasError === true,\n\t\t\t\t\t\trequired: this.state._required === true,\n\t\t\t\t\t\t'hidden-error': this._hideError === true,\n\t\t\t\t\t\t[this.state._orientation]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<legend class=\"block w-full mb-1 leading-normal\">\n\t\t\t\t\t\t{/* INFO: span is needed for css styling :after content like a star (*) or optional text ! */}\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t{/* INFO: label comes with any html tag or as plain text! */}\n\t\t\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t\t\t{hasExpertSlot ? (\n\t\t\t\t\t\t\t\t\t<slot name=\"expert\"></slot>\n\t\t\t\t\t\t\t\t) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (\n\t\t\t\t\t\t\t\t\t<InternalUnderlinedBadgeText badgeText={buildBadgeTextString(this.state._accessKey, this.state._shortKey)} label={this._label} />\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\tthis._label\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</legend>\n\t\t\t\t\t{this.state._options.map((option, index) => {\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Damit der Value einer Option ein beliebigen Typ haben kann\n\t\t\t\t\t\t * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t */\n\t\t\t\t\t\tconst customId = `${this.state._id}-${index}`;\n\t\t\t\t\t\tconst slotName = `radio-${index}`;\n\t\t\t\t\t\tconst selected = this.state._value === option.value;\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<KolInputTag\n\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\tradio: true,\n\t\t\t\t\t\t\t\t\tdisabled: Boolean(this.state._disabled || option.disabled),\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tkey={customId}\n\t\t\t\t\t\t\t\t_accessKey={this.state._accessKey} // by radio?!\n\t\t\t\t\t\t\t\t_disabled={this.state._disabled || option.disabled}\n\t\t\t\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t\t\t\t_hint={option.hint}\n\t\t\t\t\t\t\t\t_id={customId}\n\t\t\t\t\t\t\t\t_label={option.label as string}\n\t\t\t\t\t\t\t\t_renderNoLabel={true}\n\t\t\t\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t\t\t\t_shortKey={this.state._shortKey}\n\t\t\t\t\t\t\t\t_slotName={slotName}\n\t\t\t\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div slot={slotName} class=\"radio-input-wrapper\">\n\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\tref={this.state._value === option.value ? this.catchRef : undefined}\n\t\t\t\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\t\t\t\taccessKey={this.state._accessKey} // by radio?!\n\t\t\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof option.label === 'string' ? option.label : undefined}\n\t\t\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\t\t\tid={customId}\n\t\t\t\t\t\t\t\t\t\tchecked={selected}\n\t\t\t\t\t\t\t\t\t\tname={this.state._name || this.state._id}\n\t\t\t\t\t\t\t\t\t\tdisabled={this.state._disabled || option.disabled}\n\t\t\t\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t\t\t\t\t\t\tvalue={`-${index}`}\n\t\t\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\t\t\t\tonClick={undefined} // onClick is not needed since onChange already triggers the correct event\n\t\t\t\t\t\t\t\t\t\tonInput={this.onInput}\n\t\t\t\t\t\t\t\t\t\tonKeyDown={this.onKeyDown.bind(this)}\n\t\t\t\t\t\t\t\t\t\tonFocus={(event) => {\n\t\t\t\t\t\t\t\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\t\t\t\t\t\t\t\tthis.inputHasFocus = true;\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonBlur={(event) => {\n\t\t\t\t\t\t\t\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\t\t\t\t\t\t\t\tthis.inputHasFocus = false;\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t\t\t\tclass=\"radio-label\"\n\t\t\t\t\t\t\t\t\t\thtmlFor={`${customId}`}\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\theight: this.state._hideLabel ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tmargin: this.state._hideLabel ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tpadding: this.state._hideLabel ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tvisibility: this.state._hideLabel ? 'hidden' : undefined,\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"radio-label-span-inner\">{option.label}</span>\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</KolInputTag>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t\t{hasError && <KolFormFieldMsgFc _alert={this.showAsAlert()} _hideError={this.state._hideError} _msg={this.state._msg} _id={this.state._id} />}\n\t\t\t\t\t{hasHint && <span class=\"hint\">{this.state._hint}</span>}\n\t\t\t\t</fieldset>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRadioController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t * @deprecated Will be removed in v3. Use automatic behaviour instead.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t * @deprecated Will be removed in v3. Use `msg` instead.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Options the user can choose from.\n\t */\n\t@Prop() public _options?: RadioOptionsPropType;\n\n\t/**\n\t * Defines whether the orientation of the component is horizontal or vertical.\n\t */\n\t@Prop() public _orientation?: Orientation = 'vertical';\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t * @see Known bug: https://github.com/ionic-team/stencil/issues/3902\n\t */\n\t@Prop() public _value?: StencilUnknown;\n\n\t@State() public state: InputRadioStates = {\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_options: [],\n\t\t_orientation: 'vertical',\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRadioController(this, 'radio', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\tif (this.state._alert === undefined) {\n\t\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t\t}\n\t\treturn this.state._alert;\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: TooltipAlignPropType): void {\n\t\tthis.controller.validateTooltipAlign(value);\n\t}\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_options')\n\tpublic validateOptions(value?: RadioOptionsPropType): void {\n\t\tthis.controller.validateOptions(value);\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: Orientation): void {\n\t\tthis.controller.validateOrientation(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<StencilUnknown>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._touched = this._touched === true;\n\t\tthis.currentValue = this._value;\n\t\tthis.controller.componentWillLoad();\n\t}\n\n\tprivate onInput = (event: Event): void => {\n\t\tif (event.target instanceof HTMLInputElement) {\n\t\t\tconst option = this.controller.getOptionByKey(event.target.value);\n\t\t\tif (option !== undefined) {\n\t\t\t\t// Event handling\n\t\t\t\ttryToDispatchKoliBriEvent('input', this.host, option.value);\n\n\t\t\t\t// Callback\n\t\t\t\tif (typeof this.state._on?.onInput === 'function') {\n\t\t\t\t\tthis.state._on.onInput(event, option.value);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate onChange = (event: Event): void => {\n\t\tif (event.target instanceof HTMLInputElement) {\n\t\t\tconst option = this.controller.getOptionByKey(event.target.value);\n\t\t\tif (option !== undefined) {\n\t\t\t\t// Event handling\n\t\t\t\tstopPropagation(event);\n\t\t\t\ttryToDispatchKoliBriEvent('change', this.host, option.value);\n\n\t\t\t\t// Static form handling\n\t\t\t\tthis.controller.setFormAssociatedValue(option.value);\n\n\t\t\t\t// Callback\n\t\t\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\t\t\tthis.state._on.onChange(event, option.value);\n\t\t\t\t}\n\n\t\t\t\tthis.currentValue = option.value;\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate readonly onKeyDown = (event: KeyboardEvent) => {\n\t\tif (event.code === 'Enter' || event.code === 'NumpadEnter') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.inputRef,\n\t\t\t});\n\t\t}\n\t};\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["defaultStyleCss","KolInputRadioDefaultStyle0","KolInputRadio","getValue","this","currentValue","focus","kolFocus","_a","inputRef","render","ariaDescribedBy","hasError","getRenderStates","state","hasExpertSlot","showExpertSlot","_label","hasHint","_hint","length","h","Host","key","class","fieldset","disabled","_disabled","error","required","_required","_hideError","_orientation","slot","name","_accessKey","_shortKey","InternalUnderlinedBadgeText","badgeText","buildBadgeTextString","label","_options","map","option","index","customId","_id","slotName","selected","_value","value","KolInputTag","radio","Boolean","_hideLabel","hint","_renderNoLabel","_slotName","_tooltipAlign","_touched","Object","assign","ref","catchRef","undefined","title","accessKey","join","type","id","checked","_name","tabIndex","_tabIndex","controller","onFacade","onChange","onClick","onInput","onKeyDown","bind","onFocus","event","inputHasFocus","onBlur","htmlFor","style","height","margin","padding","visibility","KolFormFieldMsgFc","_alert","showAsAlert","_msg","constructor","hostRef","target","HTMLInputElement","getOptionByKey","tryToDispatchKoliBriEvent","host","_on","stopPropagation","setFormAssociatedValue","code","propagateSubmitEventToForm","form","nonce","InputRadioController","validateAccessKey","validateTooltipAlign","validateAlert","validateDisabled","validateError","validateHideLabel","validateHideError","validateHint","validateId","validateLabel","validateMsg","validateName","validateOn","validateOptions","validateOrientation","validateRequired","validateShortKey","validateSyncValueBySelector","validateTabIndex","validateTouched","validateValue","componentWillLoad"],"sources":["src/components/input-radio/style.scss?tag=kol-input-radio&mode=default&encapsulation=shadow","src/components/input-radio/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n@import '../input';\n\n@include kol-alert-styles;\n\n@layer kol-component {\n\t:host {\n\t\t--border-width: #{rem(2)};\n\t\t--input-size: 1.5em;\n\t\tfont-size: rem(16);\n\t}\n\n\t.kol-input .icons {\n\t\tdisplay: none;\n\t}\n\n\tlabel {\n\t\tcursor: pointer;\n\t}\n\n\tinput {\n\t\tappearance: none;\n\t\tborder-width: var(--border-width);\n\t\tborder-style: solid;\n\t\tborder-radius: 100%;\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\theight: var(--input-size);\n\t\tmargin: 0;\n\t\tmin-height: var(--input-size);\n\t\tmin-width: var(--input-size);\n\t\tpadding: 0;\n\t\twidth: var(--input-size);\n\t}\n\n\tinput:before {\n\t\tborder-radius: 100%;\n\t\tcontent: '';\n\t\tmargin: auto;\n\t\theight: calc(var(--input-size) / 2);\n\t\twidth: calc(var(--input-size) / 2);\n\t}\n\n\tinput:checked:before {\n\t\tbackground-color: #000;\n\t}\n\n\t@media (forced-colors: active) {\n\t\tinput:checked:before {\n\t\t\t/* Give it a visible background in forced colors mode */\n\t\t\tbackground-color: selectedItem !important;\n\t\t}\n\t}\n\n\tfieldset {\n\t\tdisplay: flex;\n\t}\n\n\tfieldset.vertical {\n\t\tflex-direction: column;\n\t}\n\n\tfieldset .input-slot {\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t}\n\n\t/* required star is on fieldset legend */\n\t.required label > span::after {\n\t\tcontent: '';\n\t}\n}\n","import type {\n\tFocusableElement,\n\tHideErrorPropType,\n\tIdPropType,\n\tInputRadioAPI,\n\tInputRadioStates,\n\tInputTypeOnDefault,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tOrientation,\n\tRadioOptionsPropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tShortKeyPropType,\n} from '../../schema';\nimport { buildBadgeTextString, showExpertSlot } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { nonce } from '../../utils/dev.utils';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { getRenderStates } from '../input/controller';\nimport { InternalUnderlinedBadgeText } from '../span/InternalUnderlinedBadgeText';\nimport { InputRadioController } from './controller';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { KolInputTag } from '../../core/component-names';\nimport { KolFormFieldMsgFc } from '../../functional-components';\n\n/**\n * @slot - Die Legende/Überschrift der Radiobuttons.\n */\n@Component({\n\ttag: 'kol-input-radio',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolInputRadio implements InputRadioAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolInputRadioElement;\n\tprivate currentValue?: StencilUnknown;\n\n\tprivate inputRef?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.inputRef = ref;\n\t};\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<StencilUnknown | undefined> {\n\t\treturn this.currentValue;\n\t}\n\n\t/**\n\t * @deprecated Use kolFocus instead.\n\t */\n\t@Method()\n\tpublic async focus() {\n\t\tawait this.kolFocus();\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tthis.inputRef?.focus();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy, hasError } = getRenderStates(this.state);\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\t\tconst hasHint = typeof this._hint === 'string' && this._hint.length > 0;\n\t\treturn (\n\t\t\t<Host class=\"kol-input-radio\">\n\t\t\t\t<fieldset\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tfieldset: true,\n\t\t\t\t\t\tdisabled: this.state._disabled === true,\n\t\t\t\t\t\terror: hasError === true,\n\t\t\t\t\t\trequired: this.state._required === true,\n\t\t\t\t\t\t'hidden-error': this._hideError === true,\n\t\t\t\t\t\t[this.state._orientation]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<legend class=\"block w-full mb-1 leading-normal\">\n\t\t\t\t\t\t{/* INFO: span is needed for css styling :after content like a star (*) or optional text ! */}\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t{/* INFO: label comes with any html tag or as plain text! */}\n\t\t\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t\t\t{hasExpertSlot ? (\n\t\t\t\t\t\t\t\t\t<slot name=\"expert\"></slot>\n\t\t\t\t\t\t\t\t) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (\n\t\t\t\t\t\t\t\t\t<InternalUnderlinedBadgeText badgeText={buildBadgeTextString(this.state._accessKey, this.state._shortKey)} label={this._label} />\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\tthis._label\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</legend>\n\t\t\t\t\t{this.state._options.map((option, index) => {\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Damit der Value einer Option ein beliebigen Typ haben kann\n\t\t\t\t\t\t * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t */\n\t\t\t\t\t\tconst customId = `${this.state._id}-${index}`;\n\t\t\t\t\t\tconst slotName = `radio-${index}`;\n\t\t\t\t\t\tconst selected = this.state._value === option.value;\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<KolInputTag\n\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\tradio: true,\n\t\t\t\t\t\t\t\t\tdisabled: Boolean(this.state._disabled || option.disabled),\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tkey={customId}\n\t\t\t\t\t\t\t\t_accessKey={this.state._accessKey} // by radio?!\n\t\t\t\t\t\t\t\t_disabled={this.state._disabled || option.disabled}\n\t\t\t\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t\t\t\t_hint={option.hint}\n\t\t\t\t\t\t\t\t_id={customId}\n\t\t\t\t\t\t\t\t_label={option.label as string}\n\t\t\t\t\t\t\t\t_renderNoLabel={true}\n\t\t\t\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t\t\t\t_shortKey={this.state._shortKey}\n\t\t\t\t\t\t\t\t_slotName={slotName}\n\t\t\t\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div slot={slotName} class=\"radio-input-wrapper\">\n\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\tref={this.state._value === option.value ? this.catchRef : undefined}\n\t\t\t\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\t\t\t\taccessKey={this.state._accessKey} // by radio?!\n\t\t\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof option.label === 'string' ? option.label : undefined}\n\t\t\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\t\t\tid={customId}\n\t\t\t\t\t\t\t\t\t\tchecked={selected}\n\t\t\t\t\t\t\t\t\t\tname={this.state._name || this.state._id}\n\t\t\t\t\t\t\t\t\t\tdisabled={this.state._disabled || option.disabled}\n\t\t\t\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t\t\t\t\t\t\tvalue={`-${index}`}\n\t\t\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\t\t\t\tonClick={undefined} // onClick is not needed since onChange already triggers the correct event\n\t\t\t\t\t\t\t\t\t\tonInput={this.onInput}\n\t\t\t\t\t\t\t\t\t\tonKeyDown={this.onKeyDown.bind(this)}\n\t\t\t\t\t\t\t\t\t\tonFocus={(event) => {\n\t\t\t\t\t\t\t\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\t\t\t\t\t\t\t\tthis.inputHasFocus = true;\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonBlur={(event) => {\n\t\t\t\t\t\t\t\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\t\t\t\t\t\t\t\tthis.inputHasFocus = false;\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t\t\t\tclass=\"radio-label\"\n\t\t\t\t\t\t\t\t\t\thtmlFor={`${customId}`}\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\theight: this.state._hideLabel ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tmargin: this.state._hideLabel ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tpadding: this.state._hideLabel ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tvisibility: this.state._hideLabel ? 'hidden' : undefined,\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"radio-label-span-inner\">{option.label}</span>\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</KolInputTag>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t\t{hasError && <KolFormFieldMsgFc _alert={this.showAsAlert()} _hideError={this.state._hideError} _msg={this.state._msg} _id={this.state._id} />}\n\t\t\t\t\t{hasHint && <span class=\"hint\">{this.state._hint}</span>}\n\t\t\t\t</fieldset>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRadioController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t * @deprecated Will be removed in v3. Use automatic behaviour instead.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t * @deprecated Will be removed in v3. Use `msg` instead.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Options the user can choose from.\n\t */\n\t@Prop() public _options?: RadioOptionsPropType;\n\n\t/**\n\t * Defines whether the orientation of the component is horizontal or vertical.\n\t */\n\t@Prop() public _orientation?: Orientation = 'vertical';\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t * @see Known bug: https://github.com/ionic-team/stencil/issues/3902\n\t */\n\t@Prop() public _value?: StencilUnknown;\n\n\t@State() public state: InputRadioStates = {\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_options: [],\n\t\t_orientation: 'vertical',\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRadioController(this, 'radio', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\tif (this.state._alert === undefined) {\n\t\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t\t}\n\t\treturn this.state._alert;\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: TooltipAlignPropType): void {\n\t\tthis.controller.validateTooltipAlign(value);\n\t}\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_options')\n\tpublic validateOptions(value?: RadioOptionsPropType): void {\n\t\tthis.controller.validateOptions(value);\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: Orientation): void {\n\t\tthis.controller.validateOrientation(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<StencilUnknown>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._touched = this._touched === true;\n\t\tthis.currentValue = this._value;\n\t\tthis.controller.componentWillLoad();\n\t}\n\n\tprivate onInput = (event: Event): void => {\n\t\tif (event.target instanceof HTMLInputElement) {\n\t\t\tconst option = this.controller.getOptionByKey(event.target.value);\n\t\t\tif (option !== undefined) {\n\t\t\t\t// Event handling\n\t\t\t\ttryToDispatchKoliBriEvent('input', this.host, option.value);\n\n\t\t\t\t// Callback\n\t\t\t\tif (typeof this.state._on?.onInput === 'function') {\n\t\t\t\t\tthis.state._on.onInput(event, option.value);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate onChange = (event: Event): void => {\n\t\tif (event.target instanceof HTMLInputElement) {\n\t\t\tconst option = this.controller.getOptionByKey(event.target.value);\n\t\t\tif (option !== undefined) {\n\t\t\t\t// Event handling\n\t\t\t\tstopPropagation(event);\n\t\t\t\ttryToDispatchKoliBriEvent('change', this.host, option.value);\n\n\t\t\t\t// Static form handling\n\t\t\t\tthis.controller.setFormAssociatedValue(option.value);\n\n\t\t\t\t// Callback\n\t\t\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\t\t\tthis.state._on.onChange(event, option.value);\n\t\t\t\t}\n\n\t\t\t\tthis.currentValue = option.value;\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate readonly onKeyDown = (event: KeyboardEvent) => {\n\t\tif (event.code === 'Enter' || event.code === 'NumpadEnter') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.inputRef,\n\t\t\t});\n\t\t}\n\t};\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as n,F as e,H as t,r as i,g as o}from"./index-4e3a1dc7.js";import{n as a}from"./dev.utils-a25f785b.js";import{p as s}from"./controller-f13259ef.js";import{g as r}from"./controller-d9e11e4b.js";import{I as l}from"./InternalUnderlinedBadgeText-bccc22ee.js";import{I as d}from"./controller-icon-ce179ccc.js";import{w as h,k as c}from"./prop.validators-447b6d6f.js";import{v as p}from"./suggestions-7c4f1360.js";import{l as u}from"./component-names-d278f819.js";import{s as f,b as m}from"./reuse-32931294.js";import"./dev.utils-fab45cbc.js";import"./events-29e84d75.js";import"./associated.controller-1037cac7.js";import"./access-and-short-key-152ce1ef.js";import"./hide-label-b2ccddd2.js";import"./label-ec7596fe.js";import"./tooltip-align-0e8c7391.js";import"./align-9ab97987.js";import"./icons-d0a00e6e.js";import"./common-54bf85ba.js";import"./index-b8f228e7.js";class b extends d{constructor(t,e,n){super(t,e,n),this.component=t}validateAutoComplete(t){h(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateMax(t){c(this.component,"_max",t)}validateMin(t){c(this.component,"_min",t)}validateStep(t){c(this.component,"_step",t)}validateSuggestions(t){p(this.component,t)}validateValue(t){c(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-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\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    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\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     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: 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}\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  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\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  }\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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\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  :host {\n    display: block;\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  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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  .input {\n    background-color: white;\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:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\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    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .inputs-wrapper {\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n  }\n  input[type=number] {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: var(--kolibri-input-range--input-number--width);\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    appearance: none;\n    background-color: #d3d3d3;\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid #000;\n    display: inline-block;\n    flex-grow: 1;\n    height: calc(8rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    padding: 0;\n    margin: 0;\n    /* Design-Hack - related with flex-grow */\n    width: 0;\n  }\n  input[type=range]::-webkit-slider-thumb {\n    box-sizing: border-box;\n    background-color: #000;\n    height: calc(20rem / var(--kolibri-root-font-size, 16));\n    width: calc(20rem / var(--kolibri-root-font-size, 16));\n    border-radius: calc(20rem / var(--kolibri-root-font-size, 16));\n    cursor: pointer;\n    -webkit-appearance: none;\n  }\n  input[type=range]::-moz-range-thumb {\n    box-sizing: border-box;\n    background-color: #000;\n    height: calc(20rem / var(--kolibri-root-font-size, 16));\n    width: calc(20rem / var(--kolibri-root-font-size, 16));\n    border-radius: calc(20rem / var(--kolibri-root-font-size, 16));\n    cursor: pointer;\n    -moz-appearance: none;\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: calc(1rem / var(--kolibri-root-font-size, 16)) solid currentColor;\n  }\n}",v=y,g=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(){const{ariaDescribedBy:i}=r(this.state),a=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,o=f(this.state._label);return n(t,{key:"f164529a7ed2beab7c1e5884e2b9a10cf23fd433",class:"kol-input-range"},n(u,{key:"c15d8ea6bbabe2ce12c3ab8ebd9df2055f2465af",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:"5ff97f4eadb9d0268a86336bb1ec3c33220e9448",slot:"label"},o?n("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?n(e,null,n(l,{badgeText:m(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",n("span",{class:"access-key-hint","aria-hidden":"true"},m(this.state._accessKey,this.state._shortKey))):n("span",null,this.state._label)),n("div",{key:"9caa68963d809d85651a3711d6e00750c02012cf",slot:"input"},n("div",{key:"707405cdaa4fa35c2202af6566c00b5b18176a4a",class:"inputs-wrapper",style:{"--kolibri-input-range--input-number--width":`${this.state._max}`.length+.5+"em"}},n("input",Object.assign({key:"a583664255ac6707facf18ca608dd2219c21917d",ref:this.catchInputRangeRef,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,"aria-hidden":"true",autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,list:a?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name?`${this.state._name}-range`:void 0,spellcheck:"false",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:"e01a941549e5a12b63b830ff7797f46d35e756f1",ref:this.catchInputNumberRef,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,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}}))),a&&[n("datalist",{key:"fddd3e65079abc15ddd4a9bbf0ea5db73878b423",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||s({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=void 0,this._min=void 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-${a()}`,_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 o(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"]}}};g.style={default:v};export{g as kol_input_range};
+import{h as n,F as e,H as t,r as i,g as a}from"./index-a8771497.js";import{n as o}from"./dev.utils-e76d2676.js";import{p as s}from"./controller-172fcdb6.js";import{g as r}from"./controller-96fe2d26.js";import{I as l}from"./InternalUnderlinedBadgeText-f45a7ef4.js";import{I as d}from"./controller-icon-29af0ac7.js";import{w as h,k as c}from"./prop.validators-c5e6ad2d.js";import{v as p}from"./suggestions-33f55ec2.js";import{l as u}from"./component-names-d278f819.js";import{s as f,b as m}from"./reuse-32931294.js";import"./dev.utils-fab45cbc.js";import"./events-29e84d75.js";import"./associated.controller-bce3d721.js";import"./access-and-short-key-864aafba.js";import"./hide-label-db0db59c.js";import"./label-d70e7c34.js";import"./common-0f1f2276.js";import"./tooltip-align-6b648461.js";import"./align-e29ed804.js";import"./icons-4c339a19.js";import"./index-541b643a.js";class b extends d{constructor(t,e,n){super(t,e,n),this.component=t}validateAutoComplete(t){h(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateMax(t){c(this.component,"_max",t)}validateMin(t){c(this.component,"_min",t)}validateStep(t){c(this.component,"_step",t)}validateSuggestions(t){p(this.component,t)}validateValue(t){c(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-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\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    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\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     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: 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}\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  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\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  }\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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\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  :host {\n    display: block;\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  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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  .input {\n    background-color: white;\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:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\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    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .inputs-wrapper {\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n  }\n  input[type=number] {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: var(--kolibri-input-range--input-number--width);\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    appearance: none;\n    background-color: #d3d3d3;\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid #000;\n    display: inline-block;\n    flex-grow: 1;\n    height: calc(8rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    padding: 0;\n    margin: 0;\n    /* Design-Hack - related with flex-grow */\n    width: 0;\n  }\n  input[type=range]::-webkit-slider-thumb {\n    box-sizing: border-box;\n    background-color: #000;\n    height: calc(20rem / var(--kolibri-root-font-size, 16));\n    width: calc(20rem / var(--kolibri-root-font-size, 16));\n    border-radius: calc(20rem / var(--kolibri-root-font-size, 16));\n    cursor: pointer;\n    -webkit-appearance: none;\n  }\n  input[type=range]::-moz-range-thumb {\n    box-sizing: border-box;\n    background-color: #000;\n    height: calc(20rem / var(--kolibri-root-font-size, 16));\n    width: calc(20rem / var(--kolibri-root-font-size, 16));\n    border-radius: calc(20rem / var(--kolibri-root-font-size, 16));\n    cursor: pointer;\n    -moz-appearance: none;\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: calc(1rem / var(--kolibri-root-font-size, 16)) solid currentColor;\n  }\n}",v=y,g=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(){const{ariaDescribedBy:i}=r(this.state),a=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,o=f(this.state._label);return n(t,{key:"f164529a7ed2beab7c1e5884e2b9a10cf23fd433",class:"kol-input-range"},n(u,{key:"c15d8ea6bbabe2ce12c3ab8ebd9df2055f2465af",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:"5ff97f4eadb9d0268a86336bb1ec3c33220e9448",slot:"label"},o?n("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?n(e,null,n(l,{badgeText:m(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",n("span",{class:"access-key-hint","aria-hidden":"true"},m(this.state._accessKey,this.state._shortKey))):n("span",null,this.state._label)),n("div",{key:"9caa68963d809d85651a3711d6e00750c02012cf",slot:"input"},n("div",{key:"707405cdaa4fa35c2202af6566c00b5b18176a4a",class:"inputs-wrapper",style:{"--kolibri-input-range--input-number--width":`${this.state._max}`.length+.5+"em"}},n("input",Object.assign({key:"a583664255ac6707facf18ca608dd2219c21917d",ref:this.catchInputRangeRef,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,"aria-hidden":"true",autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,list:a?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name?`${this.state._name}-range`:void 0,spellcheck:"false",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:"e01a941549e5a12b63b830ff7797f46d35e756f1",ref:this.catchInputNumberRef,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,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}}))),a&&[n("datalist",{key:"fddd3e65079abc15ddd4a9bbf0ea5db73878b423",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||s({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=void 0,this._min=void 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-${o()}`,_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"]}}};g.style={default:v};export{g 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-4e3a1dc7.js";import{n as o}from"./dev.utils-a25f785b.js";import{p as s}from"./controller-f13259ef.js";import{g as l}from"./controller-d9e11e4b.js";import{I as r}from"./InternalUnderlinedBadgeText-bccc22ee.js";import{a as d}from"./controller-bd9a7a74.js";import{l as h}from"./component-names-d278f819.js";import{b as c,s as p}from"./prop.validators-447b6d6f.js";import{s as u,b as f}from"./reuse-32931294.js";import"./dev.utils-fab45cbc.js";import"./events-29e84d75.js";import"./associated.controller-1037cac7.js";import"./access-and-short-key-152ce1ef.js";import"./hide-label-b2ccddd2.js";import"./label-ec7596fe.js";import"./tooltip-align-0e8c7391.js";import"./align-9ab97987.js";import"./controller-49695b25.js";import"./controller-icon-ce179ccc.js";import"./icons-d0a00e6e.js";import"./common-54bf85ba.js";import"./has-counter-157bd536.js";import"./suggestions-7c4f1360.js";import"./index-b8f228e7.js";const m=(t,e)=>{c(t,"_alert",e)},b="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\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    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\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     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: 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}\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  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\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  }\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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\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  :host {\n    display: block;\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  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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  .input {\n    background-color: white;\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:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\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    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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}=l(this.state),a=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,o=u(this.state._label);return t(n,{key:"6f5750a5911ba0a9131e98c086361b88fdff6e44",class:{"has-value":this.state._hasValue,"kol-input-text":!0}},t(h,{key:"b877f65b290bb2a3f75211c2d00a8908b22e3065",class:{[this.state._type]:!0,"hide-label":!!this.state._hideLabel},_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_currentLength:this.state._currentLength,_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:"b20dd260b0869a2d398ef249076699112f36a9b3",slot:"label"},o?t("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?t(e,null,t(r,{badgeText:f(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",t("span",{class:"access-key-hint","aria-hidden":"true"},f(this.state._accessKey,this.state._shortKey))):t("span",null,this.state._label)),t("div",{key:"757f2924e80cc62765e0d56c1b061c52dbc9f08f",slot:"input"},t("input",Object.assign({key:"2a3aa54ac86aa786074a2ce39366fa5a3bc582a0",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:"false",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=>{p(this,"_currentLength",t.target.value.length),this.controller.onFacade.onInput(t)},this.onKeyDown=t=>{"Enter"!==t.code&&"NumpadEnter"!==t.code||s({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._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,_hasValue:!1,_hideError:!1,_id:`id-${o()}`,_label:"",_suggestions:[],_type:"text"},this.inputHasFocus=!1,this.controller=new d(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)}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"],_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-a8771497.js";import{n as o}from"./dev.utils-e76d2676.js";import{p as s}from"./controller-172fcdb6.js";import{g as l}from"./controller-96fe2d26.js";import{I as r}from"./InternalUnderlinedBadgeText-f45a7ef4.js";import{a as d}from"./controller-8e649926.js";import{l as h}from"./component-names-d278f819.js";import{b as c,s as p}from"./prop.validators-c5e6ad2d.js";import{s as u,b as f}from"./reuse-32931294.js";import"./dev.utils-fab45cbc.js";import"./events-29e84d75.js";import"./associated.controller-bce3d721.js";import"./access-and-short-key-864aafba.js";import"./hide-label-db0db59c.js";import"./label-d70e7c34.js";import"./common-0f1f2276.js";import"./tooltip-align-6b648461.js";import"./align-e29ed804.js";import"./controller-ff17d912.js";import"./controller-icon-29af0ac7.js";import"./icons-4c339a19.js";import"./has-counter-a9dacd37.js";import"./suggestions-33f55ec2.js";import"./index-541b643a.js";const m=(t,e)=>{c(t,"_alert",e)},b="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\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    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\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     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: 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}\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  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\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  }\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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\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  :host {\n    display: block;\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  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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  .input {\n    background-color: white;\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:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\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    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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}=l(this.state),a=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,o=u(this.state._label);return t(n,{key:"6f5750a5911ba0a9131e98c086361b88fdff6e44",class:{"has-value":this.state._hasValue,"kol-input-text":!0}},t(h,{key:"b877f65b290bb2a3f75211c2d00a8908b22e3065",class:{[this.state._type]:!0,"hide-label":!!this.state._hideLabel},_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_currentLength:this.state._currentLength,_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:"b20dd260b0869a2d398ef249076699112f36a9b3",slot:"label"},o?t("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?t(e,null,t(r,{badgeText:f(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",t("span",{class:"access-key-hint","aria-hidden":"true"},f(this.state._accessKey,this.state._shortKey))):t("span",null,this.state._label)),t("div",{key:"757f2924e80cc62765e0d56c1b061c52dbc9f08f",slot:"input"},t("input",Object.assign({key:"2a3aa54ac86aa786074a2ce39366fa5a3bc582a0",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:"false",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=>{p(this,"_currentLength",t.target.value.length),this.controller.onFacade.onInput(t)},this.onKeyDown=t=>{"Enter"!==t.code&&"NumpadEnter"!==t.code||s({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._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,_hasValue:!1,_hideError:!1,_id:`id-${o()}`,_label:"",_suggestions:[],_type:"text"},this.inputHasFocus=!1,this.controller=new d(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)}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"],_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 e,F as s,H as t,g as d}from"./index-4e3a1dc7.js";import{c as a}from"./clsx-09a06a12.js";import{t as o}from"./i18n-5fe08f1c.js";import{a as l,g as n,c as h}from"./component-names-d278f819.js";import{h as c,s as r}from"./reuse-32931294.js";import{K as f}from"./FormFieldMsg-3f74273a.js";import"./i18n-7ea9f137.js";import"./Alert-5662dc3c.js";import"./tslib.es6-2e5096f8.js";import"./dev.utils-fab45cbc.js";const b=class{constructor(t){i(this,t),this.slotName="input",this.catchInputSlot=t=>{c(this.host,t,this.slotName)},this._accessKey=void 0,this._alert=!0,this._currentLength=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,c,_,b,u,m,p,g,y,v,k;const B=Boolean("error"===(null===(i=this._msg)||void 0===i?void 0:i._type)&&this._msg._description&&(null===(d=this._msg._description)||void 0===d?void 0:d.length)>0),j=!this._readOnly&&B&&!0===this._touched,L=Boolean(j||"error"!==(null===(c=this._msg)||void 0===c?void 0:c._type)&&(null===(_=this._msg)||void 0===_?void 0:_._description)),N=r(this._label),x="string"==typeof this._hint&&this._hint.length>0,A=!N&&this._hideLabel;return e(t,{key:"8cdf8d6dde998550bced4da791d8c9c5ea31ab2e",class:a("kol-input",this.getModifierClassNameByMsgType(),{disabled:!0===this._disabled,error:!0===j,"read-only":!0===this._readOnly,required:!0===this._required,touched:!0===this._touched,"hidden-error":!0===this._hideError})},e("label",{key:"ace5b68eef432c2a34db70ac234b4488297702b2",class:"input-label",id:A?void 0:`${this._id}-label`,hidden:A,htmlFor:this._id},e("span",{key:"cf0cb4d88144b324cb61134ffd26bc3f7da64c46",class:"input-label-span"},e("slot",{key:"adce45da91af4963c7b5b00b4471ab29e4cf857b",name:"label"}))),x&&e("span",{key:"a6fe31328a8ae31bcd132d13e527c27afc52f95c",class:"hint",id:`${this._id}-hint`},this._hint),e("div",{key:"c25ad4e10b70d33a9f3be5e06bcefbacb3046d93",class:{input:!0,"icon-left":"object"==typeof(null===(b=this._icons)||void 0===b?void 0:b.left),"icon-right":"object"==typeof(null===(u=this._icons)||void 0===u?void 0:u.right)}},(null===(m=this._icons)||void 0===m?void 0:m.left)&&e(n,{key:"1ebc24cdf54e0af6924e53ebd89530b7dce7b390",_label:"",_icons:(null===(p=this._icons)||void 0===p?void 0:p.left).icon,style:this.getIconStyles(null===(g=this._icons)||void 0===g?void 0:g.left)}),e("div",{key:"a51050e6ee364e70ec8c0a2008c5696469ef0dcc",ref:this.catchInputSlot,id:this.slotName,class:"input-slot"}),"object"==typeof this._smartButton&&null!==this._smartButton&&e(h,{key:"9be371d3929093972c667445c272a08340e0d90e",_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)&&e(n,{key:"6150b39bb7458fc0064a161eab5a0be1c6fad549",_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)})),A&&e(l,{key:"96ecebd94a2d45e96d169af27d96f8beb67402dd","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}),L&&e(f,{key:"92d8c187a118275f2fa4dea8557c7a0c5b937b8a",_alert:this._alert,_hideError:this._hideError,_msg:this._msg,_id:this._id}),Array.isArray(this._suggestions)&&this._suggestions.length>0&&e("datalist",{key:"1c4c1811fd84d6f08f4dee22f783b91fdff2894a",id:`${this._id}-list`},this._suggestions.map((t=>e("option",{value:t})))),this._hasCounter&&e("span",{key:"1823a1dc667ec6f72019b29beba1bbb6fe1f827c",class:"counter","aria-atomic":"true","aria-live":"polite","data-testid":"input-counter"},this._currentLength,this._maxLength&&e(s,null,e("span",{key:"fcc12beb596bdf86c0ecc507899685218c697775","aria-label":o("kol-of"),role:"img"},"/"),this._maxLength)," ",e("span",{key:"eaaf2c17470681dc799b74f5eaebbe2496564c0e"},o("kol-characters"))))}getModifierClassNameByMsgType(){var t,i;if(null===(t=this._msg)||void 0===t?void 0:t._type)return{default:"msg-type-default",info:"msg-type-info",success:"msg-type-success",warning:"msg-type-warning",error:"msg-type-error"}[null===(i=this._msg)||void 0===i?void 0:i._type]}get host(){return d(this)}};export{b as kol_input};
+import{r as i,h as t,F as s,H as e,g as a}from"./index-a8771497.js";import{c as d}from"./clsx-09a06a12.js";import{t as l}from"./i18n-5fe08f1c.js";import{a as n,g as h,c as o}from"./component-names-d278f819.js";import{h as f,s as c}from"./reuse-32931294.js";import{K as r}from"./FormFieldMsg-d2df5701.js";import"./i18n-7ea9f137.js";import"./Alert-f9315efd.js";import"./tslib.es6-2e5096f8.js";import"./dev.utils-fab45cbc.js";const u=class{constructor(t){i(this,t),this.slotName="input",this.catchInputSlot=t=>{f(this.host,t,this.slotName)},this._accessKey=void 0,this._alert=!0,this._currentLength=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,a,_,b,f,u,m,p,g,y,v;const k="string"==typeof(null===(i=this._msg)||void 0===i?void 0:i._description)&&(null===(a=this._msg)||void 0===a?void 0:a._description.length)>0&&!0===this._touched,j=c(this._label),B="string"==typeof this._hint&&this._hint.length>0,L=!j&&this._hideLabel;return t(e,{key:"d0ceb4dd9cb440870fec781c26b3c35a0db7cf3c",class:d("kol-input",this.getModifierClassNameByMsgType(k),{disabled:!0===this._disabled,[(null===(_=this._msg)||void 0===_?void 0:_._type)||"error"]:!0===k,"read-only":!0===this._readOnly,required:!0===this._required,touched:!0===this._touched,"hidden-error":!0===this._hideError})},t("label",{key:"c67cf862ec7499d87c7a2b5c3e098f2d56e1ddc2",class:"input-label",id:L?void 0:`${this._id}-label`,hidden:L,htmlFor:this._id},t("span",{key:"ef979abf10372861c4253fdf8239fa50a8f71c34",class:"input-label-span"},t("slot",{key:"6b71f8bc1cc97c5659a721f0ca5d010bf83e9958",name:"label"}))),B&&t("span",{key:"26259043769d50abb4242ef5b3282f754c363a23",class:"hint",id:`${this._id}-hint`},this._hint),t("div",{key:"69473768e9570bb3673cf2a682226d6aa099ab8b",class:{input:!0,"icon-left":"object"==typeof(null===(b=this._icons)||void 0===b?void 0:b.left),"icon-right":"object"==typeof(null===(f=this._icons)||void 0===f?void 0:f.right)}},(null===(u=this._icons)||void 0===u?void 0:u.left)&&t(h,{key:"c6651727cbd0c84a7120b4f38096e4629461582b",_label:"",_icons:(null===(m=this._icons)||void 0===m?void 0:m.left).icon,style:this.getIconStyles(null===(p=this._icons)||void 0===p?void 0:p.left)}),t("div",{key:"7a45832f515f4a7402ded242916b638a973b4363",ref:this.catchInputSlot,id:this.slotName,class:"input-slot"}),"object"==typeof this._smartButton&&null!==this._smartButton&&t(o,{key:"b009c381aa4d445c531765b852befc836a369b32",_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===(g=this._icons)||void 0===g?void 0:g.right)&&t(h,{key:"0d8ea29a271f1bf2dde15cc0b38586d83554e2a1",_label:"",_icons:(null===(y=this._icons)||void 0===y?void 0:y.right).icon,style:this.getIconStyles(null===(v=this._icons)||void 0===v?void 0:v.right)})),L&&t(n,{key:"4bab14b17ab7f1b4ea031436eabf76f25f609186","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}),k&&t(r,{key:"7225565e2026885136416d4c8a7d488ce628da1d",_alert:this._alert,_hideError:this._hideError,_msg:this._msg,_id:this._id}),Array.isArray(this._suggestions)&&this._suggestions.length>0&&t("datalist",{key:"c16300512396ecfba9139293f6b05cb9788f90cd",id:`${this._id}-list`},this._suggestions.map((i=>t("option",{value:i})))),this._hasCounter&&t("span",{key:"22826946e07709619c37cc24a8fdd573db2fb359",class:"counter","aria-atomic":"true","aria-live":"polite","data-testid":"input-counter"},this._currentLength,this._maxLength&&t(s,null,t("span",{key:"ba72b0ee76ca6736505a8478d232646bfa88828f","aria-label":l("kol-of"),role:"img"},"/"),this._maxLength)," ",t("span",{key:"6fd9fd3ff27b29233517bfc9e84ef6656093dc36"},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 a(this)}};export{u as kol_input};

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

@@ -1 +1 @@
-{"version":3,"names":["KolInputWc","this","slotName","catchInputSlot","slot","handleSlotContent","host","componentWillRender","_slotName","getIconStyles","icon","style","render","isMessageValidError","Boolean","_a","_msg","_type","_description","_b","length","hasError","_readOnly","_touched","showFormFieldMsg","_c","_d","hasExpertSlot","showExpertSlot","_label","hasHint","_hint","useTooltopInsteadOfLabel","_hideLabel","h","Host","key","class","clsx","getModifierClassNameByMsgType","disabled","_disabled","error","required","_required","touched","_hideError","id","_id","undefined","hidden","htmlFor","name","input","_e","_icons","left","_f","right","_g","KolIconTag","_h","_j","ref","_smartButton","KolButtonWcTag","_customClass","_on","_tooltipAlign","_variant","_k","_l","_m","KolTooltipWcTag","_badgeText","_accessKey","_shortKey","_align","KolFormFieldMsgFc","_alert","Array","isArray","_suggestions","map","option","value","_hasCounter","_currentLength","_maxLength","Fragment","translate","role","default","info","success","warning"],"sources":["src/components/input/component.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/label-has-associated-control */\nimport { handleSlotContent, type MsgPropType, type ShortKeyPropType, showExpertSlot } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, Fragment, Host, Prop, h } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { translate } from '../../i18n';\n\nimport type {\n\tAccessKeyPropType,\n\tAnyIconFontClass,\n\tButtonProps,\n\tIdPropType,\n\tKoliBriCustomIcon,\n\tKoliBriHorizontalIcons,\n\tLabelWithExpertSlotPropType,\n\tStringified,\n\tSuggestionsPropType,\n\tTooltipAlignPropType,\n\tW3CInputValue,\n} from '../../schema';\nimport type { Props } from './types';\nimport { KolButtonWcTag, KolIconTag, KolTooltipWcTag } from '../../core/component-names';\nimport { KolFormFieldMsgFc } from '../../functional-components';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-input',\n\tshadow: false,\n})\nexport class KolInputWc implements Props {\n\t@Element() private readonly host?: HTMLElement;\n\n\tprivate slotName: string = 'input';\n\n\tpublic componentWillRender(): void {\n\t\tthis.slotName = this._slotName ? this._slotName : 'input';\n\t}\n\n\tprivate catchInputSlot = (slot?: HTMLDivElement): void => {\n\t\thandleSlotContent(this.host!, slot!, this.slotName);\n\t};\n\n\tprivate getIconStyles(icon?: AnyIconFontClass | KoliBriCustomIcon): Record<string, string> {\n\t\treturn icon && typeof icon === 'object' && icon.style ? icon.style : {};\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst isMessageValidError = Boolean(this._msg?._type === 'error' && this._msg._description && this._msg._description?.length > 0);\n\t\tconst hasError = !this._readOnly && isMessageValidError && this._touched === true;\n\t\tconst showFormFieldMsg = Boolean(hasError || (this._msg?._type !== 'error' && this._msg?._description));\n\t\tconst hasExpertSlot = showExpertSlot(this._label);\n\t\tconst hasHint = typeof this._hint === 'string' && this._hint.length > 0;\n\t\tconst useTooltopInsteadOfLabel = !hasExpertSlot && this._hideLabel;\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={clsx('kol-input', this.getModifierClassNameByMsgType(), {\n\t\t\t\t\tdisabled: this._disabled === true,\n\t\t\t\t\terror: hasError === true,\n\t\t\t\t\t'read-only': this._readOnly === true,\n\t\t\t\t\trequired: this._required === true,\n\t\t\t\t\ttouched: this._touched === true,\n\t\t\t\t\t'hidden-error': this._hideError === true,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<label class=\"input-label\" id={!useTooltopInsteadOfLabel ? `${this._id}-label` : undefined} hidden={useTooltopInsteadOfLabel} htmlFor={this._id}>\n\t\t\t\t\t{/* INFO: span is needed for css styling :after content like a star (*) or optional text ! */}\n\t\t\t\t\t<span class=\"input-label-span\">\n\t\t\t\t\t\t{/* INFO: label comes with any html tag or as plain text! */}\n\t\t\t\t\t\t<slot name=\"label\"></slot>\n\t\t\t\t\t</span>\n\t\t\t\t</label>\n\t\t\t\t{hasHint && (\n\t\t\t\t\t<span class=\"hint\" id={`${this._id}-hint`}>\n\t\t\t\t\t\t{this._hint}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tinput: true,\n\t\t\t\t\t\t'icon-left': typeof this._icons?.left === 'object',\n\t\t\t\t\t\t'icon-right': typeof this._icons?.right === 'object',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this._icons?.left && (\n\t\t\t\t\t\t<KolIconTag _label=\"\" _icons={(this._icons?.left as KoliBriCustomIcon).icon} style={this.getIconStyles(this._icons?.left)}></KolIconTag>\n\t\t\t\t\t)}\n\t\t\t\t\t<div ref={this.catchInputSlot} id={this.slotName} class=\"input-slot\"></div>\n\t\t\t\t\t{typeof this._smartButton === 'object' && this._smartButton !== null && (\n\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\t_customClass={this._smartButton._customClass}\n\t\t\t\t\t\t\t_disabled={this._smartButton._disabled}\n\t\t\t\t\t\t\t_icons={this._smartButton._icons}\n\t\t\t\t\t\t\t_hideLabel={true}\n\t\t\t\t\t\t\t_id={this._smartButton._id}\n\t\t\t\t\t\t\t_label={this._smartButton._label}\n\t\t\t\t\t\t\t_on={this._smartButton._on}\n\t\t\t\t\t\t\t_tooltipAlign={this._smartButton._tooltipAlign}\n\t\t\t\t\t\t\t_variant={this._smartButton._variant}\n\t\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t)}\n\t\t\t\t\t{this._icons?.right && (\n\t\t\t\t\t\t<KolIconTag _label=\"\" _icons={(this._icons?.right as KoliBriCustomIcon).icon} style={this.getIconStyles(this._icons?.right)}></KolIconTag>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{useTooltopInsteadOfLabel && (\n\t\t\t\t\t<KolTooltipWcTag\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,\n\t\t\t\t\t\t * verhindert aber nicht das Aria-Labelledby vorgelesen wird.\n\t\t\t\t\t\t */\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclass=\"input-tooltip\"\n\t\t\t\t\t\t_badgeText={this._accessKey || this._shortKey}\n\t\t\t\t\t\t_align={this._tooltipAlign}\n\t\t\t\t\t\t_id={this._hideLabel ? `${this._id}-label` : undefined}\n\t\t\t\t\t\t_label={this._label}\n\t\t\t\t\t></KolTooltipWcTag>\n\t\t\t\t)}\n\t\t\t\t{showFormFieldMsg && <KolFormFieldMsgFc _alert={this._alert} _hideError={this._hideError} _msg={this._msg} _id={this._id} />}\n\t\t\t\t{Array.isArray(this._suggestions) && this._suggestions.length > 0 && (\n\t\t\t\t\t<datalist id={`${this._id}-list`}>\n\t\t\t\t\t\t{this._suggestions.map((option: W3CInputValue) => (\n\t\t\t\t\t\t\t<option value={option} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t</datalist>\n\t\t\t\t)}\n\t\t\t\t{this._hasCounter && (\n\t\t\t\t\t<span class=\"counter\" aria-atomic=\"true\" aria-live=\"polite\" data-testid=\"input-counter\">\n\t\t\t\t\t\t{this._currentLength}\n\t\t\t\t\t\t{this._maxLength && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<span aria-label={translate('kol-of')} role=\"img\">\n\t\t\t\t\t\t\t\t\t/\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t{this._maxLength}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t<span>{translate('kol-characters')}</span>\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the elements access key.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t * @TODO: Change type back to `AlertPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _alert?: boolean = true;\n\n\t/**\n\t * @internal\n\t */\n\t@Prop() public _currentLength?: number;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Shows the character count on the lower border of the input.\n\t * @TODO: Change type back to `HasCounterPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCounter?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: KoliBriHorizontalIcons;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id!: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the maximum number of input characters.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: MsgPropType;\n\n\t/**\n\t * Makes the input element read only.\n\t * @TODO: Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _readOnly?: boolean = false;\n\n\t/**\n\t * Gibt an, ob die Komponente kein Label rendern soll.\n\t */\n\t@Prop() public _renderNoLabel?: boolean = false;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Ermöglicht den Slotnamen zu bestimmen. Wird nur verwendet, wenn sonst mehrere Slots mit dem gleichen Namen innerhalb eines Shadow DOMs existieren würden.\n\t * @internal\n\t */\n\t@Prop() public _slotName?: string;\n\n\t/**\n\t * Suggestions to provide for the input.\n\t */\n\t@Prop() public _suggestions?: SuggestionsPropType;\n\n\t/**\n\t * Allows to add a button with an arbitrary action within the element (_hide-label only).\n\t */\n\t@Prop() public _smartButton?: Stringified<ButtonProps>;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _touched?: boolean = false;\n\n\tprivate getModifierClassNameByMsgType() {\n\t\tif (this._msg?._type) {\n\t\t\treturn {\n\t\t\t\tdefault: 'msg-type-default',\n\t\t\t\tinfo: 'msg-type-info',\n\t\t\t\tsuccess: 'msg-type-success',\n\t\t\t\twarning: 'msg-type-warning',\n\t\t\t\terror: 'msg-type-error',\n\t\t\t}[this._msg?._type];\n\t\t}\n\t}\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["KolInputWc","this","slotName","catchInputSlot","slot","handleSlotContent","host","componentWillRender","_slotName","getIconStyles","icon","style","render","showMsg","_a","_msg","_description","_b","length","_touched","hasExpertSlot","showExpertSlot","_label","hasHint","_hint","useTooltopInsteadOfLabel","_hideLabel","h","Host","key","class","clsx","getModifierClassNameByMsgType","disabled","_disabled","_c","_type","_readOnly","required","_required","touched","_hideError","id","_id","undefined","hidden","htmlFor","name","input","_d","_icons","left","_e","right","_f","KolIconTag","_g","_h","ref","_smartButton","KolButtonWcTag","_customClass","_on","_tooltipAlign","_variant","_j","_k","_l","KolTooltipWcTag","_badgeText","_accessKey","_shortKey","_align","KolFormFieldMsgFc","_alert","Array","isArray","_suggestions","map","option","value","_hasCounter","_currentLength","_maxLength","Fragment","translate","role","default","info","success","warning","error"],"sources":["src/components/input/component.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/label-has-associated-control */\nimport { handleSlotContent, type MsgPropType, type ShortKeyPropType, showExpertSlot } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, Fragment, Host, Prop, h } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { translate } from '../../i18n';\n\nimport type {\n\tAccessKeyPropType,\n\tAnyIconFontClass,\n\tButtonProps,\n\tIdPropType,\n\tKoliBriCustomIcon,\n\tKoliBriHorizontalIcons,\n\tLabelWithExpertSlotPropType,\n\tStringified,\n\tSuggestionsPropType,\n\tTooltipAlignPropType,\n\tW3CInputValue,\n} from '../../schema';\nimport type { Props } from './types';\nimport { KolButtonWcTag, KolIconTag, KolTooltipWcTag } from '../../core/component-names';\nimport { KolFormFieldMsgFc } from '../../functional-components';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-input',\n\tshadow: false,\n})\nexport class KolInputWc implements Props {\n\t@Element() private readonly host?: HTMLElement;\n\n\tprivate slotName: string = 'input';\n\n\tpublic componentWillRender(): void {\n\t\tthis.slotName = this._slotName ? this._slotName : 'input';\n\t}\n\n\tprivate catchInputSlot = (slot?: HTMLDivElement): void => {\n\t\thandleSlotContent(this.host!, slot!, this.slotName);\n\t};\n\n\tprivate getIconStyles(icon?: AnyIconFontClass | KoliBriCustomIcon): Record<string, string> {\n\t\treturn icon && typeof icon === 'object' && icon.style ? icon.style : {};\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst showMsg: boolean = typeof this._msg?._description === 'string' && this._msg?._description.length > 0 && this._touched === true;\n\t\tconst hasExpertSlot = showExpertSlot(this._label);\n\t\tconst hasHint = typeof this._hint === 'string' && this._hint.length > 0;\n\t\tconst useTooltopInsteadOfLabel = !hasExpertSlot && this._hideLabel;\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={clsx('kol-input', this.getModifierClassNameByMsgType(showMsg), {\n\t\t\t\t\tdisabled: this._disabled === true,\n\t\t\t\t\t[this._msg?._type || 'error']: showMsg === true,\n\t\t\t\t\t'read-only': this._readOnly === true,\n\t\t\t\t\trequired: this._required === true,\n\t\t\t\t\ttouched: this._touched === true,\n\t\t\t\t\t'hidden-error': this._hideError === true,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<label class=\"input-label\" id={!useTooltopInsteadOfLabel ? `${this._id}-label` : undefined} hidden={useTooltopInsteadOfLabel} htmlFor={this._id}>\n\t\t\t\t\t{/* INFO: span is needed for css styling :after content like a star (*) or optional text ! */}\n\t\t\t\t\t<span class=\"input-label-span\">\n\t\t\t\t\t\t{/* INFO: label comes with any html tag or as plain text! */}\n\t\t\t\t\t\t<slot name=\"label\"></slot>\n\t\t\t\t\t</span>\n\t\t\t\t</label>\n\t\t\t\t{hasHint && (\n\t\t\t\t\t<span class=\"hint\" id={`${this._id}-hint`}>\n\t\t\t\t\t\t{this._hint}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tinput: true,\n\t\t\t\t\t\t'icon-left': typeof this._icons?.left === 'object',\n\t\t\t\t\t\t'icon-right': typeof this._icons?.right === 'object',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this._icons?.left && (\n\t\t\t\t\t\t<KolIconTag _label=\"\" _icons={(this._icons?.left as KoliBriCustomIcon).icon} style={this.getIconStyles(this._icons?.left)}></KolIconTag>\n\t\t\t\t\t)}\n\t\t\t\t\t<div ref={this.catchInputSlot} id={this.slotName} class=\"input-slot\"></div>\n\t\t\t\t\t{typeof this._smartButton === 'object' && this._smartButton !== null && (\n\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\t_customClass={this._smartButton._customClass}\n\t\t\t\t\t\t\t_disabled={this._smartButton._disabled}\n\t\t\t\t\t\t\t_icons={this._smartButton._icons}\n\t\t\t\t\t\t\t_hideLabel={true}\n\t\t\t\t\t\t\t_id={this._smartButton._id}\n\t\t\t\t\t\t\t_label={this._smartButton._label}\n\t\t\t\t\t\t\t_on={this._smartButton._on}\n\t\t\t\t\t\t\t_tooltipAlign={this._smartButton._tooltipAlign}\n\t\t\t\t\t\t\t_variant={this._smartButton._variant}\n\t\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t)}\n\t\t\t\t\t{this._icons?.right && (\n\t\t\t\t\t\t<KolIconTag _label=\"\" _icons={(this._icons?.right as KoliBriCustomIcon).icon} style={this.getIconStyles(this._icons?.right)}></KolIconTag>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{useTooltopInsteadOfLabel && (\n\t\t\t\t\t<KolTooltipWcTag\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,\n\t\t\t\t\t\t * verhindert aber nicht das Aria-Labelledby vorgelesen wird.\n\t\t\t\t\t\t */\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclass=\"input-tooltip\"\n\t\t\t\t\t\t_badgeText={this._accessKey || this._shortKey}\n\t\t\t\t\t\t_align={this._tooltipAlign}\n\t\t\t\t\t\t_id={this._hideLabel ? `${this._id}-label` : undefined}\n\t\t\t\t\t\t_label={this._label}\n\t\t\t\t\t></KolTooltipWcTag>\n\t\t\t\t)}\n\t\t\t\t{showMsg && <KolFormFieldMsgFc _alert={this._alert} _hideError={this._hideError} _msg={this._msg} _id={this._id} />}\n\t\t\t\t{Array.isArray(this._suggestions) && this._suggestions.length > 0 && (\n\t\t\t\t\t<datalist id={`${this._id}-list`}>\n\t\t\t\t\t\t{this._suggestions.map((option: W3CInputValue) => (\n\t\t\t\t\t\t\t<option value={option} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t</datalist>\n\t\t\t\t)}\n\t\t\t\t{this._hasCounter && (\n\t\t\t\t\t<span class=\"counter\" aria-atomic=\"true\" aria-live=\"polite\" data-testid=\"input-counter\">\n\t\t\t\t\t\t{this._currentLength}\n\t\t\t\t\t\t{this._maxLength && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<span aria-label={translate('kol-of')} role=\"img\">\n\t\t\t\t\t\t\t\t\t/\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t{this._maxLength}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t<span>{translate('kol-characters')}</span>\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the elements access key.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t * @TODO: Change type back to `AlertPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _alert?: boolean = true;\n\n\t/**\n\t * @internal\n\t */\n\t@Prop() public _currentLength?: number;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Shows the character count on the lower border of the input.\n\t * @TODO: Change type back to `HasCounterPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCounter?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: KoliBriHorizontalIcons;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id!: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the maximum number of input characters.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: MsgPropType;\n\n\t/**\n\t * Makes the input element read only.\n\t * @TODO: Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _readOnly?: boolean = false;\n\n\t/**\n\t * Gibt an, ob die Komponente kein Label rendern soll.\n\t */\n\t@Prop() public _renderNoLabel?: boolean = false;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Ermöglicht den Slotnamen zu bestimmen. Wird nur verwendet, wenn sonst mehrere Slots mit dem gleichen Namen innerhalb eines Shadow DOMs existieren würden.\n\t * @internal\n\t */\n\t@Prop() public _slotName?: string;\n\n\t/**\n\t * Suggestions to provide for the input.\n\t */\n\t@Prop() public _suggestions?: SuggestionsPropType;\n\n\t/**\n\t * Allows to add a button with an arbitrary action within the element (_hide-label only).\n\t */\n\t@Prop() public _smartButton?: Stringified<ButtonProps>;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _touched?: boolean = false;\n\n\tprivate getModifierClassNameByMsgType(showMsg: boolean) {\n\t\tif (showMsg && this._msg?._type) {\n\t\t\treturn {\n\t\t\t\tdefault: 'msg-type-default',\n\t\t\t\tinfo: 'msg-type-info',\n\t\t\t\tsuccess: 'msg-type-success',\n\t\t\t\twarning: 'msg-type-warning',\n\t\t\t\terror: 'msg-type-error',\n\t\t\t}[this._msg?._type];\n\t\t}\n\t}\n}\n"],"mappings":"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","ignoreList":[]}

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-4e3a1dc7.js";import{c as i,v as o}from"./color-1f72e388.js";import{t as a}from"./i18n-5fe08f1c.js";import{j as l,b as s}from"./prop.validators-447b6d6f.js";import"./dev.utils-fab45cbc.js";import"./i18n-7ea9f137.js";import"./reuse-32931294.js";import"./index-b8f228e7.js";const r="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\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    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\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     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: 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}\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  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\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  }\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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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,h=class{constructor(e){n(this,e),this.handleColorChange=(e,n)=>{if("string"==typeof e){const t=i(e);n.set("_color",{red:t[0],green:t[1],blue:t[2]})}else l("[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:"2593b75de8c17688120eb42e7324390fed465763",class:"kol-kolibri"},e("svg",{key:"40be680f8a521af17268654d3f2e544a95933385",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:"541eeb85af56c529abdc4796b35bfda08156f428",d:"M353 322L213 304V434L353 322Z"}),e("path",{key:"944f3eb528c599d0f3788041034eff7218b363dd",d:"M209 564V304L149 434L209 564Z"}),e("path",{key:"338e555f6db35fb8e8c01b3d01da91f791d29e9f",d:"M357 316L417 250L361 210L275 244L357 316Z"}),e("path",{key:"23ba66f2d1f4537c196cce1302cf28fa243465d8",d:"M329 218L237 92L250 222L272 241L329 218Z"}),e("path",{key:"51b9f0ddc19d4b8c6eec023dc80b72add57dd845",d:"M353 318L35 36L213 300L353 318Z"}),e("path",{key:"caad530bd4d12bd026bb7e01a7cd186b9719a561",d:"M391 286L565 272L421 252L391 286Z"}),!0===this.state._labeled&&e("text",{key:"8a15ddba737a8413fdeb5a80d653e5f79a5bbc6b",x:"250",y:"525",fill:n},"KoliBri")))}validateColor(e){o(this,e,{defaultValue:"#003c78",hooks:{beforePatch:this.handleColorChange}})}validateLabeled(e){s(this,"_labeled",e,{defaultValue:!0})}componentWillLoad(){this.validateColor(this._color),this.validateLabeled(this._labeled)}static get watchers(){return{_color:["validateColor"],_labeled:["validateLabeled"]}}};h.style={default:d};export{h as kol_kolibri};
+import{r as n,h as e,H as t}from"./index-a8771497.js";import{c as i,v as o}from"./color-cce3e447.js";import{t as a}from"./i18n-5fe08f1c.js";import{j as l,b as s}from"./prop.validators-c5e6ad2d.js";import"./dev.utils-fab45cbc.js";import"./i18n-7ea9f137.js";import"./reuse-32931294.js";import"./index-541b643a.js";const r="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\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    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\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     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: 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}\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  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\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  }\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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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=i(e);n.set("_color",{red:t[0],green:t[1],blue:t[2]})}else l("[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:"2593b75de8c17688120eb42e7324390fed465763",class:"kol-kolibri"},e("svg",{key:"40be680f8a521af17268654d3f2e544a95933385",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:"541eeb85af56c529abdc4796b35bfda08156f428",d:"M353 322L213 304V434L353 322Z"}),e("path",{key:"944f3eb528c599d0f3788041034eff7218b363dd",d:"M209 564V304L149 434L209 564Z"}),e("path",{key:"338e555f6db35fb8e8c01b3d01da91f791d29e9f",d:"M357 316L417 250L361 210L275 244L357 316Z"}),e("path",{key:"23ba66f2d1f4537c196cce1302cf28fa243465d8",d:"M329 218L237 92L250 222L272 241L329 218Z"}),e("path",{key:"51b9f0ddc19d4b8c6eec023dc80b72add57dd845",d:"M353 318L35 36L213 300L353 318Z"}),e("path",{key:"caad530bd4d12bd026bb7e01a7cd186b9719a561",d:"M391 286L565 272L421 252L391 286Z"}),!0===this.state._labeled&&e("text",{key:"8a15ddba737a8413fdeb5a80d653e5f79a5bbc6b",x:"250",y:"525",fill:n},"KoliBri")))}validateColor(e){o(this,e,{defaultValue:"#003c78",hooks:{beforePatch:this.handleColorChange}})}validateLabeled(e){s(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};