@public-ui/components 3.0.0-0edf6aa20a9ac9faa46ebe0e45a8c62841b05164.0 → 3.0.0-37e952f54ae220a836264edf844556a2c45116ea.0

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as n,r as e,g as t}from"./index-06658c3d.js";import{_ as i}from"./tslib.es6-1173d062.js";import{c as o}from"./clsx-09a06a12.js";import{n as a}from"./dev.utils-f9d0242d.js";import{p as s}from"./controller-f84a4671.js";import{I as r,K as l}from"./controller-icon-b0799db4.js";import{w as d,k as h}from"./prop.validators-9feb1d92.js";import{v as c}from"./suggestions-f139f5ec.js";import{K as u,a as p}from"./InputStateWrapper-3d255d22.js";import{K as f}from"./getRenderStates-8b6bedc5.js";import"./reuse-32931294.js";import"./dev.utils-fab45cbc.js";import"./component-names-545d6582.js";import"./InternalUnderlinedBadgeText-738f2cd0.js";import"./isObject-ffcbbb76.js";import"./Icon-1eca6817.js";import"./FormFieldMsg-f1c6a975.js";import"./common-54bf85ba.js";import"./Alert-ee7dcaa7.js";import"./i18n-5fe08f1c.js";import"./i18n-7ea9f137.js";import"./Heading-e1db538b.js";import"./icons-199f1746.js";import"./index-da3e0c00.js";import"./Input-cc85529a.js";import"./events-5adf6b62.js";import"./associated.controller-52d302aa.js";import"./access-and-short-key-9cca88b8.js";import"./tooltip-align-8e0fa436.js";import"./align-4719d626.js";import"./hide-label-429a15ea.js";import"./label-d0315384.js";class m extends r{constructor(t,e,n){super(t,e,n),this.component=t}validateAutoComplete(t){d(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateMax(t){h(this.component,"_max",t)}validateMin(t){h(this.component,"_min",t)}validateStep(t){h(this.component,"_step",t)}validateSuggestions(t){c(this.component,t)}validateValue(t){h(this.component,"_value",t),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 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    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  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-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  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\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__content {\n    background-color: #fff;\n    color: #000;\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  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}\n@layer kol-component {\n  .kol-input-range__inputs-wrapper {\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n    flex-grow: 1;\n  }\n  .kol-input-range__input--number {\n    width: var(--kolibri-input-range--input-number--width);\n  }\n  .kol-input-range__input--range {\n    appearance: none;\n    background-color: #d3d3d3;\n    border: 1px 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  .kol-input-range__input--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: 20px;\n    cursor: pointer;\n    -webkit-appearance: none;\n  }\n  @media (prefers-contrast: more) or (forced-colors: active) {\n    .kol-input-range__input--range::-webkit-slider-thumb {\n      outline: 1px solid currentColor;\n    }\n  }\n  .kol-input-range__input--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: 20px;\n    cursor: pointer;\n    -moz-appearance: none;\n  }\n}",g=b,k=class{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))}getFormFieldProps(){return{state:this.state,class:o("kol-input-range","range"),tooltipAlign:this._tooltipAlign,onClick:()=>{var t;return null===(t=this.refInputRange)||void 0===t?void 0:t.focus()},alert:this.showAsAlert()}}getGenericInputProps(){const t=this.state,e=i(t,["_suggestions"]);return Object.assign(Object.assign({state:Object.assign(Object.assign({},e),{_suggestions:[]})},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}})}get hasSuggestions(){return Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0}getInputRangeProps(){return Object.assign(Object.assign({},this.getGenericInputProps()),{name:this.state._name?`${this.state._name}-range`:void 0,list:this.hasSuggestions?`${this.state._id}-list`:void 0,type:"range",tabIndex:-1,id:void 0,"aria-hidden":"true",ref:this.catchInputRangeRef})}getInputNumberProps(){return Object.assign(Object.assign({},this.getGenericInputProps()),{name:this.state._name?`${this.state._name}-number`:void 0,list:this.hasSuggestions?`${this.state._id}-list`:void 0,type:"number",ref:this.catchInputNumberRef,onKeyDown:this.onKeyDown})}render(){var t;const e={"--kolibri-input-range--input-number--width":`calc(${String(null!==(t=this.state._max)&&void 0!==t?t:1e3).length}ch + 1.5em)`};return n(f,Object.assign({key:"9ea77e4ec39eb2e03712e8b085df7b2cb214994b"},this.getFormFieldProps()),n(l,{key:"da5ee9023661a0f4d3a9cd854e953fe0e7908cc9",state:this.state},n("div",{key:"8cd004d812f0ebf9e1955c313ae2172563f8c8a4",class:"kol-input-range__inputs-wrapper",style:e},n(u,Object.assign({key:"8509182bd6ef19f0073468f9d359afd6a5e6484f",class:"kol-input-range__input kol-input-range__input--range"},this.getInputRangeProps())),n(u,Object.assign({key:"136ff474b8061c0916cb615679be2e84eb95f0fa",class:"kol-input-range__input kol-input-range__input--number"},this.getInputNumberProps()))),this.hasSuggestions&&n(p,{key:"5d732c6c442b7785bac35ae61b11e18557243ad8",id:this.state._id,suggestions:this.state._suggestions})))}constructor(t){e(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=>{const e=t.target.value,n=this.getSanitizedFloatValue(e);this.validateValue(n),this.controller.onFacade.onChange(t,n)},this.onKeyDown=t=>{"Enter"!==t.code&&"NumpadEnter"!==t.code||s({form:this.host,ref:this.refInputNumber})},this._accessKey=void 0,this._autoComplete=void 0,this._disabled=!1,this._hideMsg=!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",_hideMsg:!1,_id:`id-${a()}`,_label:"",_suggestions:[]},this.inputHasFocus=!1,this.controller=new m(this,"range",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateHideMsg(t){this.controller.validateHideMsg(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 t(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_max:["validateMax"],_min:["validateMin"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_shortKey:["validateShortKey"],_step:["validateStep"],_suggestions:["validateSuggestions"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};k.style={default:g};export{k as kol_input_range};
+import{h as n,r as e,g as t}from"./index-62ec26b4.js";import{_ as i}from"./tslib.es6-1173d062.js";import{c as o}from"./clsx-09a06a12.js";import{n as a}from"./dev.utils-ada1cd11.js";import{p as s}from"./controller-71d68376.js";import{I as r,K as l}from"./controller-icon-9397b382.js";import{w as d,k as h}from"./prop.validators-bb13c77c.js";import{v as c}from"./suggestions-935a4e0c.js";import{K as u,a as p}from"./InputStateWrapper-040f7635.js";import{K as f}from"./getRenderStates-3c94aee3.js";import"./reuse-f46e7e35.js";import"./dev.utils-fab45cbc.js";import"./component-names-7ee7402b.js";import"./InternalUnderlinedBadgeText-77ae0c4d.js";import"./isArray-7a60fa7f.js";import"./isObject-ffcbbb76.js";import"./Icon-1679f3fc.js";import"./icons-ae235ff9.js";import"./common-54bf85ba.js";import"./index-932feda8.js";import"./Input-f05ea4d5.js";import"./events-5886c68b.js";import"./associated.controller-9e991177.js";import"./access-and-short-key-7091d688.js";import"./tooltip-align-4b5c8431.js";import"./align-679f189f.js";import"./hide-label-4a7cf616.js";import"./label-5355d0b2.js";import"./Alert-362a56d6.js";import"./i18n-efbafc80.js";import"./i18n-45224cc3.js";import"./bem-e4c3a2e6.js";import"./browser-f629a56a.js";import"./Heading-a93a1765.js";class m extends r{constructor(n,t,e){super(n,t,e),this.component=n}validateAutoComplete(n){d(this.component,"_autoComplete",(n=>"string"==typeof n&&("on"===n||"off"===n)),new Set(["on | off"]),n)}validateMax(n){h(this.component,"_max",n)}validateMin(n){h(this.component,"_min",n)}validateStep(n){h(this.component,"_step",n)}validateSuggestions(n){c(this.component,n)}validateValue(n){h(this.component,"_value",n),this.component._value=n,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 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    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%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\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  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\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  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\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__content {\n    background-color: #fff;\n    color: #000;\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  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}\n@layer kol-component {\n  .kol-input-range__inputs-wrapper {\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n    flex-grow: 1;\n  }\n  .kol-input-range__input--number {\n    width: var(--kolibri-input-range--input-number--width);\n  }\n  .kol-input-range__input--range {\n    appearance: none;\n    background-color: #d3d3d3;\n    border: 1px 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  .kol-input-range__input--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: 20px;\n    -webkit-appearance: none;\n  }\n  .kol-input-range__input:not(:disabled).kol-input-range__input--range::-webkit-slider-thumb {\n    cursor: pointer;\n  }\n  @media (prefers-contrast: more) or (forced-colors: active) {\n    .kol-input-range__input--range::-webkit-slider-thumb {\n      outline: 1px solid currentColor;\n    }\n  }\n  .kol-input-range__input--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: 20px;\n    -moz-appearance: none;\n  }\n  .kol-input-range__input:not(:disabled).kol-input-range__input--range::-moz-range-thumb {\n    cursor: pointer;\n  }\n}",g=b,k=class{async kolFocus(){var n;null===(n=this.refInputNumber)||void 0===n||n.focus()}getSanitizedFloatValue(n){const t=parseFloat(n);return this.state._max&&t>this.state._max?this.state._max:this.state._min&&t<this.state._min?this.state._min:t}async getValue(){if(void 0!==this.refInputNumber){const n=this.refInputNumber.value;return this.getSanitizedFloatValue(n)}}componentDidLoad(){var n;!this._value&&(null===(n=this.refInputRange)||void 0===n?void 0:n.value)&&this.validateValue(parseFloat(this.refInputRange.value))}getFormFieldProps(){return{state:this.state,class:o("kol-input-range","range"),tooltipAlign:this._tooltipAlign,onClick:()=>{var n;return null===(n=this.refInputRange)||void 0===n?void 0:n.focus()},alert:this.showAsAlert()}}getGenericInputProps(){const n=this.state,t=i(n,["_suggestions"]);return Object.assign(Object.assign({state:Object.assign(Object.assign({},t),{_suggestions:[]})},this.controller.onFacade),{onChange:this.onChange,onFocus:n=>{this.controller.onFacade.onFocus(n),this.inputHasFocus=!0},onBlur:n=>{this.controller.onFacade.onBlur(n),this.inputHasFocus=!1}})}get hasSuggestions(){return Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0}getInputRangeProps(){return Object.assign(Object.assign({},this.getGenericInputProps()),{name:this.state._name?`${this.state._name}-range`:void 0,list:this.hasSuggestions?`${this.state._id}-list`:void 0,type:"range",tabIndex:-1,id:void 0,"aria-hidden":"true",ref:this.catchInputRangeRef})}getInputNumberProps(){return Object.assign(Object.assign({},this.getGenericInputProps()),{name:this.state._name?`${this.state._name}-number`:void 0,list:this.hasSuggestions?`${this.state._id}-list`:void 0,type:"number",ref:this.catchInputNumberRef,onKeyDown:this.onKeyDown})}render(){var t;const e={"--kolibri-input-range--input-number--width":`calc(${String(null!==(t=this.state._max)&&void 0!==t?t:1e3).length}ch + 1.5em)`};return n(f,Object.assign({key:"c48df03fc1461212e64e534a4f39a5bb5ce77e9a"},this.getFormFieldProps()),n(l,{key:"d0f5788051599b6da486f4e521da9dd2b811050f",state:this.state},n("div",{key:"4e3a9f84dd3fddd74389176fe9a0b4ab34a0c4aa",class:"kol-input-range__inputs-wrapper",style:e},n(u,Object.assign({key:"ce249e5fe71a3ffd0d22a3b6e60826d828dcf7ae",class:"kol-input-range__input kol-input-range__input--range"},this.getInputRangeProps())),n(u,Object.assign({key:"c26d486bac69e075737b7cf273dddbbd5dda16f3",class:"kol-input-range__input kol-input-range__input--number"},this.getInputNumberProps()))),this.hasSuggestions&&n(p,{key:"16ca2b65091b9336db06c7465bc9fd592450d1f8",id:this.state._id,suggestions:this.state._suggestions})))}constructor(n){e(this,n),this.catchInputNumberRef=n=>{var t;n&&(this.refInputNumber=n,!this._value&&(null===(t=this.refInputNumber)||void 0===t?void 0:t.value)&&this.validateValue(parseFloat(this.refInputNumber.value)))},this.catchInputRangeRef=n=>{n&&(this.refInputRange=n)},this.onChange=n=>{const t=n.target.value,e=this.getSanitizedFloatValue(t);this.validateValue(e),this.controller.onFacade.onChange(n,e)},this.onKeyDown=n=>{"Enter"!==n.code&&"NumpadEnter"!==n.code||s({form:this.host,ref:this.refInputNumber})},this._accessKey=void 0,this._autoComplete=void 0,this._disabled=!1,this._hideMsg=!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._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_hideMsg:!1,_id:`id-${a()}`,_label:"",_suggestions:[]},this.inputHasFocus=!1,this.controller=new m(this,"range",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(n){this.controller.validateAccessKey(n)}validateAutoComplete(n){this.controller.validateAutoComplete(n)}validateDisabled(n){this.controller.validateDisabled(n)}validateHideMsg(n){this.controller.validateHideMsg(n)}validateHideLabel(n){this.controller.validateHideLabel(n)}validateHint(n){this.controller.validateHint(n)}validateIcons(n){this.controller.validateIcons(n)}validateId(n){this.controller.validateId(n)}validateLabel(n){this.controller.validateLabel(n)}validateMax(n){this.controller.validateMax(n)}validateMin(n){this.controller.validateMin(n)}validateMsg(n){this.controller.validateMsg(n)}validateName(n){this.controller.validateName(n)}validateOn(n){this.controller.validateOn(n)}validateShortKey(n){this.controller.validateShortKey(n)}validateStep(n){this.controller.validateStep(n)}validateSuggestions(n){this.controller.validateSuggestions(n)}validateSyncValueBySelector(n){this.controller.validateSyncValueBySelector(n)}validateTouched(n){this.controller.validateTouched(n)}validateValue(n){this.controller.validateValue(n)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad()}static get delegatesFocus(){return!0}get host(){return t(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_max:["validateMax"],_min:["validateMin"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_shortKey:["validateShortKey"],_step:["validateStep"],_suggestions:["validateSuggestions"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}}};k.style={default:g};export{k as kol_input_range};

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

@@ -1 +1 @@
-{"version":3,"names":["InputRangeController","InputIconController","constructor","component","name","host","super","this","validateAutoComplete","value","watchValidator","Set","validateMax","watchNumber","validateMin","validateStep","validateSuggestions","validateValue","_value","setFormAssociatedValue","state","componentWillLoad","_autoComplete","_max","_min","_step","_suggestions","defaultStyleCss","KolInputRangeDefaultStyle0","KolInputRange","kolFocus","_a","refInputNumber","focus","getSanitizedFloatValue","floatValue","parseFloat","getValue","undefined","componentDidLoad","refInputRange","getFormFieldProps","class","clsx","tooltipAlign","_tooltipAlign","onClick","alert","showAsAlert","getGenericInputProps","other","__rest","Object","assign","controller","onFacade","onChange","onFocus","event","inputHasFocus","onBlur","hasSuggestions","Array","isArray","length","getInputRangeProps","_name","list","_id","type","tabIndex","id","ref","catchInputRangeRef","getInputNumberProps","catchInputNumberRef","onKeyDown","render","inputsWrapperStyle","String","h","KolFormFieldStateWrapperFc","key","KolInputContainerFc","style","KolInputStateWrapperFc","KolSuggestionsFc","suggestions","hostRef","element","target","code","propagateSubmitEventToForm","form","_hideMsg","nonce","_label","Boolean","_touched","validateAccessKey","validateDisabled","validateHideMsg","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateMsg","validateName","validateOn","validateShortKey","validateSyncValueBySelector","validateTabIndex","validateTouched"],"sources":["src/components/input-range/controller.ts","src/components/input-range/style.scss?tag=kol-input-range&mode=default&encapsulation=shadow","src/components/input-range/shadow.tsx"],"sourcesContent":["import type { InputRangeProps, InputRangeWatches, InputTypeOnOff, SuggestionsPropType } from '../../schema';\nimport { validateSuggestions, watchNumber, watchValidator } from '../../schema';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\n\nimport type { Generic } from 'adopted-style-sheets';\nexport class InputRangeController extends InputIconController implements InputRangeWatches {\n\tprotected readonly component: Generic.Element.Component & InputRangeProps;\n\n\tpublic constructor(component: Generic.Element.Component & InputRangeProps, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_autoComplete',\n\t\t\t(value): boolean => typeof value === 'string' && (value === 'on' || value === 'off'),\n\t\t\tnew Set(['on | off']),\n\t\t\tvalue,\n\t\t);\n\t}\n\n\tpublic validateMax(value?: number): void {\n\t\twatchNumber(this.component, '_max', value);\n\t}\n\n\tpublic validateMin(value?: number): void {\n\t\twatchNumber(this.component, '_min', value);\n\t}\n\n\tpublic validateStep(value?: number): void {\n\t\twatchNumber(this.component, '_step', value);\n\t}\n\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tvalidateSuggestions(this.component, value);\n\t}\n\n\tpublic validateValue(value?: number): void {\n\t\twatchNumber(this.component, '_value', value);\n\t\tthis.component._value = value;\n\t\tthis.setFormAssociatedValue(this.component.state._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAutoComplete(this.component._autoComplete);\n\t\tthis.validateMax(this.component._max);\n\t\tthis.validateMin(this.component._min);\n\t\tthis.validateStep(this.component._step);\n\t\tthis.validateSuggestions(this.component._suggestions);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import '../../styles/global';\n@import '../../styles/kol-alert-mixin';\n@import '../../styles/kol-form-field-mixin';\n@import '../../styles/kol-input-container-mixin';\n@import '../../styles/kol-input-mixin';\n@import '../@shared/mixins';\n\n@include kol-alert;\n@include kol-form-field;\n@include kol-input-container;\n@include kol-input;\n\n@layer kol-component {\n\t.kol-input-range {\n\t\t&__inputs-wrapper {\n\t\t\talign-items: center;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tflex-grow: 1;\n\t\t}\n\n\t\t&__input {\n\t\t\t&--number {\n\t\t\t\twidth: var(--kolibri-input-range--input-number--width);\n\t\t\t}\n\n\t\t\t&--range {\n\t\t\t\tappearance: none;\n\t\t\t\tbackground-color: #d3d3d3;\n\t\t\t\tborder: 1px solid #000;\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tflex-grow: 1;\n\t\t\t\theight: rem(8);\n\t\t\t\tline-height: 1.5;\n\t\t\t\tpadding: 0;\n\t\t\t\tmargin: 0;\n\t\t\t\t/* Design-Hack - related with flex-grow */\n\t\t\t\twidth: 0;\n\n\t\t\t\t&::-webkit-slider-thumb {\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\tbackground-color: #000;\n\t\t\t\t\theight: rem(20);\n\t\t\t\t\twidth: rem(20);\n\t\t\t\t\tborder-radius: 20px;\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t-webkit-appearance: none;\n\n\t\t\t\t\t@media (prefers-contrast: more) or (forced-colors: active) {\n\t\t\t\t\t\toutline: 1px solid currentColor;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t&::-moz-range-thumb {\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\tbackground-color: #000;\n\t\t\t\t\theight: rem(20);\n\t\t\t\t\twidth: rem(20);\n\t\t\t\t\tborder-radius: 20px;\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t-moz-appearance: none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport type {\n\tFocusableElement,\n\tHideMsgPropType,\n\tIdPropType,\n\tInputRangeAPI,\n\tInputRangeStates,\n\tInputTypeOnDefault,\n\tInputTypeOnOff,\n\tKoliBriHorizontalIcons,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tShortKeyPropType,\n\tStringified,\n\tSuggestionsPropType,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\n\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper';\nimport KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper';\nimport KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper';\nimport { InputRangeController } from './controller';\nimport KolSuggestionsFc from '../../functional-components/Suggestions';\n\n/**\n * @slot - Die Beschriftung des Eingabeelements.\n */\n@Component({\n\ttag: 'kol-input-range',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolInputRange implements InputRangeAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolInputRangeElement;\n\tprivate refInputNumber?: HTMLInputElement;\n\tprivate refInputRange?: HTMLInputElement;\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tthis.refInputNumber?.focus();\n\t}\n\n\tprivate readonly catchInputNumberRef = (element?: HTMLInputElement) => {\n\t\tif (element) {\n\t\t\tthis.refInputNumber = element;\n\t\t\tif (!this._value && this.refInputNumber?.value) {\n\t\t\t\tthis.validateValue(parseFloat(this.refInputNumber.value));\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate readonly catchInputRangeRef = (element?: HTMLInputElement) => {\n\t\tif (element) {\n\t\t\tthis.refInputRange = element;\n\t\t}\n\t};\n\n\tprivate getSanitizedFloatValue(value: string): number {\n\t\tconst floatValue = parseFloat(value);\n\t\tif (this.state._max && floatValue > this.state._max) {\n\t\t\treturn this.state._max;\n\t\t}\n\t\tif (this.state._min && floatValue < this.state._min) {\n\t\t\treturn this.state._min;\n\t\t}\n\t\treturn floatValue;\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<number | undefined> {\n\t\tif (this.refInputNumber !== undefined) {\n\t\t\tconst value = this.refInputNumber.value;\n\t\t\treturn this.getSanitizedFloatValue(value);\n\t\t}\n\t}\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tconst value = (event.target as HTMLInputElement).value;\n\t\tconst floatValue = this.getSanitizedFloatValue(value);\n\t\tthis.validateValue(floatValue);\n\t\tthis.controller.onFacade.onChange(event, floatValue);\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.refInputNumber,\n\t\t\t});\n\t\t}\n\t};\n\n\tcomponentDidLoad() {\n\t\tif (!this._value && this.refInputRange?.value) {\n\t\t\tthis.validateValue(parseFloat(this.refInputRange.value));\n\t\t}\n\t}\n\n\tprivate getFormFieldProps(): FormFieldStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tclass: clsx('kol-input-range', 'range'),\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\tonClick: () => this.refInputRange?.focus(),\n\t\t\talert: this.showAsAlert(),\n\t\t};\n\t}\n\n\tprivate getGenericInputProps() {\n\t\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\t\tconst { _suggestions, ...other } = this.state;\n\n\t\treturn {\n\t\t\tstate: { ...other, _suggestions: [] },\n\t\t\t...this.controller.onFacade,\n\t\t\tonChange: this.onChange,\n\t\t\tonFocus: (event: Event) => {\n\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\tthis.inputHasFocus = true;\n\t\t\t},\n\t\t\tonBlur: (event: Event) => {\n\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\tthis.inputHasFocus = false;\n\t\t\t},\n\t\t};\n\t}\n\n\tprivate get hasSuggestions(): boolean {\n\t\treturn Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;\n\t}\n\n\tprivate getInputRangeProps(): InputStateWrapperProps {\n\t\treturn {\n\t\t\t...this.getGenericInputProps(),\n\t\t\tname: this.state._name ? `${this.state._name}-range` : undefined,\n\t\t\tlist: this.hasSuggestions ? `${this.state._id}-list` : undefined,\n\t\t\ttype: 'range',\n\t\t\ttabIndex: -1,\n\t\t\tid: undefined,\n\t\t\t'aria-hidden': 'true',\n\t\t\tref: this.catchInputRangeRef,\n\t\t};\n\t}\n\n\tprivate getInputNumberProps(): InputStateWrapperProps {\n\t\treturn {\n\t\t\t...this.getGenericInputProps(),\n\t\t\tname: this.state._name ? `${this.state._name}-number` : undefined,\n\t\t\tlist: this.hasSuggestions ? `${this.state._id}-list` : undefined,\n\t\t\ttype: 'number',\n\t\t\tref: this.catchInputNumberRef,\n\t\t\tonKeyDown: this.onKeyDown,\n\t\t};\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst inputsWrapperStyle = {\n\t\t\t// use number of digits in max value plus some space for the number input arrow buttons\n\t\t\t'--kolibri-input-range--input-number--width': `calc(${String(this.state._max ?? 1000).length}ch + 1.5em)`,\n\t\t};\n\n\t\treturn (\n\t\t\t<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>\n\t\t\t\t<KolInputContainerFc state={this.state}>\n\t\t\t\t\t<div class=\"kol-input-range__inputs-wrapper\" style={inputsWrapperStyle}>\n\t\t\t\t\t\t<KolInputStateWrapperFc class=\"kol-input-range__input kol-input-range__input--range\" {...this.getInputRangeProps()} />\n\t\t\t\t\t\t<KolInputStateWrapperFc class=\"kol-input-range__input kol-input-range__input--number\" {...this.getInputNumberProps()} />\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.hasSuggestions && <KolSuggestionsFc id={this.state._id} suggestions={this.state._suggestions} />}\n\t\t\t\t</KolInputContainerFc>\n\t\t\t</KolFormFieldStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRangeController;\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 input can be auto-completed.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\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 * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideMsgPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideMsg?: 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?: Stringified<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 largest possible input value.\n\t */\n\t@Prop() public _max?: number;\n\n\t/**\n\t * Defines the smallest possible input value.\n\t */\n\t@Prop() public _min?: number;\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 * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Defines the step size for value changes.\n\t */\n\t@Prop() public _step?: number;\n\n\t/**\n\t * Suggestions to provide for the input.\n\t */\n\t@Prop() public _suggestions?: SuggestionsPropType;\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 */\n\t@Prop({ mutable: true, reflect: true }) public _value?: number;\n\n\t@State() public state: InputRangeStates = {\n\t\t_autoComplete: 'off',\n\t\t_hideMsg: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_suggestions: [],\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRangeController(this, 'range', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(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('_hideMsg')\n\tpublic validateHideMsg(value?: HideMsgPropType): void {\n\t\tthis.controller.validateHideMsg(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('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.controller.validateIcons(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('_max')\n\tpublic validateMax(value?: number): void {\n\t\tthis.controller.validateMax(value);\n\t}\n\n\t@Watch('_min')\n\tpublic validateMin(value?: number): void {\n\t\tthis.controller.validateMin(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('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_step')\n\tpublic validateStep(value?: number): void {\n\t\tthis.controller.validateStep(value);\n\t}\n\n\t@Watch('_suggestions')\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tthis.controller.validateSuggestions(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?: number): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t}\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["InputRangeController","InputIconController","constructor","component","name","host","super","this","validateAutoComplete","value","watchValidator","Set","validateMax","watchNumber","validateMin","validateStep","validateSuggestions","validateValue","_value","setFormAssociatedValue","state","componentWillLoad","_autoComplete","_max","_min","_step","_suggestions","defaultStyleCss","KolInputRangeDefaultStyle0","KolInputRange","kolFocus","_a","refInputNumber","focus","getSanitizedFloatValue","floatValue","parseFloat","getValue","undefined","componentDidLoad","refInputRange","getFormFieldProps","class","clsx","tooltipAlign","_tooltipAlign","onClick","alert","showAsAlert","getGenericInputProps","other","__rest","Object","assign","controller","onFacade","onChange","onFocus","event","inputHasFocus","onBlur","hasSuggestions","Array","isArray","length","getInputRangeProps","_name","list","_id","type","tabIndex","id","ref","catchInputRangeRef","getInputNumberProps","catchInputNumberRef","onKeyDown","render","inputsWrapperStyle","String","h","KolFormFieldStateWrapperFc","key","KolInputContainerFc","style","KolInputStateWrapperFc","KolSuggestionsFc","suggestions","hostRef","element","target","code","propagateSubmitEventToForm","form","_hideMsg","nonce","_label","Boolean","_touched","validateAccessKey","validateDisabled","validateHideMsg","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateMsg","validateName","validateOn","validateShortKey","validateSyncValueBySelector","validateTouched"],"sources":["src/components/input-range/controller.ts","src/components/input-range/style.scss?tag=kol-input-range&mode=default&encapsulation=shadow","src/components/input-range/shadow.tsx"],"sourcesContent":["import type { InputRangeProps, InputRangeWatches, InputTypeOnOff, SuggestionsPropType } from '../../schema';\nimport { validateSuggestions, watchNumber, watchValidator } from '../../schema';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\n\nimport type { Generic } from 'adopted-style-sheets';\nexport class InputRangeController extends InputIconController implements InputRangeWatches {\n\tprotected readonly component: Generic.Element.Component & InputRangeProps;\n\n\tpublic constructor(component: Generic.Element.Component & InputRangeProps, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_autoComplete',\n\t\t\t(value): boolean => typeof value === 'string' && (value === 'on' || value === 'off'),\n\t\t\tnew Set(['on | off']),\n\t\t\tvalue,\n\t\t);\n\t}\n\n\tpublic validateMax(value?: number): void {\n\t\twatchNumber(this.component, '_max', value);\n\t}\n\n\tpublic validateMin(value?: number): void {\n\t\twatchNumber(this.component, '_min', value);\n\t}\n\n\tpublic validateStep(value?: number): void {\n\t\twatchNumber(this.component, '_step', value);\n\t}\n\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tvalidateSuggestions(this.component, value);\n\t}\n\n\tpublic validateValue(value?: number): void {\n\t\twatchNumber(this.component, '_value', value);\n\t\tthis.component._value = value;\n\t\tthis.setFormAssociatedValue(this.component.state._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAutoComplete(this.component._autoComplete);\n\t\tthis.validateMax(this.component._max);\n\t\tthis.validateMin(this.component._min);\n\t\tthis.validateStep(this.component._step);\n\t\tthis.validateSuggestions(this.component._suggestions);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@use '../../styles/global' as *;\n@use '../../styles/kol-alert-mixin' as *;\n@use '../../styles/kol-form-field-mixin' as *;\n@use '../../styles/kol-input-container-mixin' as *;\n@use '../../styles/kol-input-mixin' as *;\n@use '../@shared/mixins' as *;\n\n@include kol-alert;\n@include kol-form-field;\n@include kol-input-container;\n@include kol-input;\n\n@layer kol-component {\n\t.kol-input-range {\n\t\t&__inputs-wrapper {\n\t\t\talign-items: center;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tflex-grow: 1;\n\t\t}\n\n\t\t&__input {\n\t\t\t$input: &;\n\n\t\t\t&--number {\n\t\t\t\twidth: var(--kolibri-input-range--input-number--width);\n\t\t\t}\n\n\t\t\t&--range {\n\t\t\t\tappearance: none;\n\t\t\t\tbackground-color: #d3d3d3;\n\t\t\t\tborder: 1px solid #000;\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tflex-grow: 1;\n\t\t\t\theight: rem(8);\n\t\t\t\tline-height: 1.5;\n\t\t\t\tpadding: 0;\n\t\t\t\tmargin: 0;\n\t\t\t\t/* Design-Hack - related with flex-grow */\n\t\t\t\twidth: 0;\n\n\t\t\t\t&::-webkit-slider-thumb {\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\tbackground-color: #000;\n\t\t\t\t\theight: rem(20);\n\t\t\t\t\twidth: rem(20);\n\t\t\t\t\tborder-radius: 20px;\n\t\t\t\t\t-webkit-appearance: none;\n\n\t\t\t\t\t@at-root #{$input}:not(:disabled)#{&} {\n\t\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t}\n\n\t\t\t\t\t@media (prefers-contrast: more) or (forced-colors: active) {\n\t\t\t\t\t\toutline: 1px solid currentColor;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t&::-moz-range-thumb {\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\tbackground-color: #000;\n\t\t\t\t\theight: rem(20);\n\t\t\t\t\twidth: rem(20);\n\t\t\t\t\tborder-radius: 20px;\n\t\t\t\t\t-moz-appearance: none;\n\n\t\t\t\t\t@at-root #{$input}:not(:disabled)#{&} {\n\t\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport type {\n\tFocusableElement,\n\tHideMsgPropType,\n\tIconsHorizontalPropType,\n\tIdPropType,\n\tInputRangeAPI,\n\tInputRangeStates,\n\tInputTypeOnDefault,\n\tInputTypeOnOff,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tShortKeyPropType,\n\tStringified,\n\tSuggestionsPropType,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\n\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper';\nimport KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper';\nimport KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper';\nimport { InputRangeController } from './controller';\nimport KolSuggestionsFc from '../../functional-components/Suggestions';\n\n/**\n * @slot - Die Beschriftung des Eingabeelements.\n */\n@Component({\n\ttag: 'kol-input-range',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolInputRange implements InputRangeAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolInputRangeElement;\n\tprivate refInputNumber?: HTMLInputElement;\n\tprivate refInputRange?: HTMLInputElement;\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tthis.refInputNumber?.focus();\n\t}\n\n\tprivate readonly catchInputNumberRef = (element?: HTMLInputElement) => {\n\t\tif (element) {\n\t\t\tthis.refInputNumber = element;\n\t\t\tif (!this._value && this.refInputNumber?.value) {\n\t\t\t\tthis.validateValue(parseFloat(this.refInputNumber.value));\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate readonly catchInputRangeRef = (element?: HTMLInputElement) => {\n\t\tif (element) {\n\t\t\tthis.refInputRange = element;\n\t\t}\n\t};\n\n\tprivate getSanitizedFloatValue(value: string): number {\n\t\tconst floatValue = parseFloat(value);\n\t\tif (this.state._max && floatValue > this.state._max) {\n\t\t\treturn this.state._max;\n\t\t}\n\t\tif (this.state._min && floatValue < this.state._min) {\n\t\t\treturn this.state._min;\n\t\t}\n\t\treturn floatValue;\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<number | undefined> {\n\t\tif (this.refInputNumber !== undefined) {\n\t\t\tconst value = this.refInputNumber.value;\n\t\t\treturn this.getSanitizedFloatValue(value);\n\t\t}\n\t}\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tconst value = (event.target as HTMLInputElement).value;\n\t\tconst floatValue = this.getSanitizedFloatValue(value);\n\t\tthis.validateValue(floatValue);\n\t\tthis.controller.onFacade.onChange(event, floatValue);\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.refInputNumber,\n\t\t\t});\n\t\t}\n\t};\n\n\tcomponentDidLoad() {\n\t\tif (!this._value && this.refInputRange?.value) {\n\t\t\tthis.validateValue(parseFloat(this.refInputRange.value));\n\t\t}\n\t}\n\n\tprivate getFormFieldProps(): FormFieldStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tclass: clsx('kol-input-range', 'range'),\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\tonClick: () => this.refInputRange?.focus(),\n\t\t\talert: this.showAsAlert(),\n\t\t};\n\t}\n\n\tprivate getGenericInputProps() {\n\t\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\t\tconst { _suggestions, ...other } = this.state;\n\n\t\treturn {\n\t\t\tstate: { ...other, _suggestions: [] },\n\t\t\t...this.controller.onFacade,\n\t\t\tonChange: this.onChange,\n\t\t\tonFocus: (event: Event) => {\n\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\tthis.inputHasFocus = true;\n\t\t\t},\n\t\t\tonBlur: (event: Event) => {\n\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\tthis.inputHasFocus = false;\n\t\t\t},\n\t\t};\n\t}\n\n\tprivate get hasSuggestions(): boolean {\n\t\treturn Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;\n\t}\n\n\tprivate getInputRangeProps(): InputStateWrapperProps {\n\t\treturn {\n\t\t\t...this.getGenericInputProps(),\n\t\t\tname: this.state._name ? `${this.state._name}-range` : undefined,\n\t\t\tlist: this.hasSuggestions ? `${this.state._id}-list` : undefined,\n\t\t\ttype: 'range',\n\t\t\ttabIndex: -1,\n\t\t\tid: undefined,\n\t\t\t'aria-hidden': 'true',\n\t\t\tref: this.catchInputRangeRef,\n\t\t};\n\t}\n\n\tprivate getInputNumberProps(): InputStateWrapperProps {\n\t\treturn {\n\t\t\t...this.getGenericInputProps(),\n\t\t\tname: this.state._name ? `${this.state._name}-number` : undefined,\n\t\t\tlist: this.hasSuggestions ? `${this.state._id}-list` : undefined,\n\t\t\ttype: 'number',\n\t\t\tref: this.catchInputNumberRef,\n\t\t\tonKeyDown: this.onKeyDown,\n\t\t};\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst inputsWrapperStyle = {\n\t\t\t// use number of digits in max value plus some space for the number input arrow buttons\n\t\t\t'--kolibri-input-range--input-number--width': `calc(${String(this.state._max ?? 1000).length}ch + 1.5em)`,\n\t\t};\n\n\t\treturn (\n\t\t\t<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>\n\t\t\t\t<KolInputContainerFc state={this.state}>\n\t\t\t\t\t<div class=\"kol-input-range__inputs-wrapper\" style={inputsWrapperStyle}>\n\t\t\t\t\t\t<KolInputStateWrapperFc class=\"kol-input-range__input kol-input-range__input--range\" {...this.getInputRangeProps()} />\n\t\t\t\t\t\t<KolInputStateWrapperFc class=\"kol-input-range__input kol-input-range__input--number\" {...this.getInputNumberProps()} />\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.hasSuggestions && <KolSuggestionsFc id={this.state._id} suggestions={this.state._suggestions} />}\n\t\t\t\t</KolInputContainerFc>\n\t\t\t</KolFormFieldStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRangeController;\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 input can be auto-completed.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\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 * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideMsgPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideMsg?: 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?: IconsHorizontalPropType;\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 largest possible input value.\n\t */\n\t@Prop() public _max?: number;\n\n\t/**\n\t * Defines the smallest possible input value.\n\t */\n\t@Prop() public _min?: number;\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 * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Defines the step size for value changes.\n\t */\n\t@Prop() public _step?: number;\n\n\t/**\n\t * Suggestions to provide for the input.\n\t */\n\t@Prop() public _suggestions?: SuggestionsPropType;\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 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 */\n\t@Prop({ mutable: true, reflect: true }) public _value?: number;\n\n\t@State() public state: InputRangeStates = {\n\t\t_autoComplete: 'off',\n\t\t_hideMsg: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_suggestions: [],\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRangeController(this, 'range', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(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('_hideMsg')\n\tpublic validateHideMsg(value?: HideMsgPropType): void {\n\t\tthis.controller.validateHideMsg(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('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsHorizontalPropType): void {\n\t\tthis.controller.validateIcons(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('_max')\n\tpublic validateMax(value?: number): void {\n\t\tthis.controller.validateMax(value);\n\t}\n\n\t@Watch('_min')\n\tpublic validateMin(value?: number): void {\n\t\tthis.controller.validateMin(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('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_step')\n\tpublic validateStep(value?: number): void {\n\t\tthis.controller.validateStep(value);\n\t}\n\n\t@Watch('_suggestions')\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tthis.controller.validateSuggestions(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('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t}\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as n,r as t,g as e}from"./index-06658c3d.js";import{c as i}from"./clsx-09a06a12.js";import{n as o}from"./dev.utils-f9d0242d.js";import{p as a}from"./controller-f84a4671.js";import{a as s}from"./controller-0953b02a.js";import{K as l}from"./controller-icon-b0799db4.js";import{K as r}from"./InputStateWrapper-3d255d22.js";import{K as d}from"./getRenderStates-8b6bedc5.js";import{s as h}from"./prop.validators-9feb1d92.js";import"./reuse-32931294.js";import"./dev.utils-fab45cbc.js";import"./component-names-545d6582.js";import"./controller-a26ccfc4.js";import"./has-counter-a43c36ef.js";import"./spell-check-60fa0b9f.js";import"./suggestions-f139f5ec.js";import"./InternalUnderlinedBadgeText-738f2cd0.js";import"./isObject-ffcbbb76.js";import"./tslib.es6-1173d062.js";import"./Icon-1eca6817.js";import"./FormFieldMsg-f1c6a975.js";import"./common-54bf85ba.js";import"./Alert-ee7dcaa7.js";import"./i18n-5fe08f1c.js";import"./i18n-7ea9f137.js";import"./Heading-e1db538b.js";import"./icons-199f1746.js";import"./Input-cc85529a.js";import"./events-5adf6b62.js";import"./associated.controller-52d302aa.js";import"./access-and-short-key-9cca88b8.js";import"./tooltip-align-8e0fa436.js";import"./align-4719d626.js";import"./hide-label-429a15ea.js";import"./label-d0315384.js";import"./index-da3e0c00.js";const c="/*\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    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  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-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  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\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__content {\n    background-color: #fff;\n    color: #000;\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  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}",m=c,p=class{async getValue(){var t;return null===(t=this.inputRef)||void 0===t?void 0:t.value}async kolFocus(){var t;null===(t=this.inputRef)||void 0===t||t.focus()}getFormFieldProps(){return{state:this.state,class:i("kol-input-text",this.state._type,{"has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var t;return null===(t=this.inputRef)||void 0===t?void 0:t.focus()},alert:this.showAsAlert()}}getInputProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state},this.controller.onFacade),{onBlur:this.onBlur,onChange:this.onChange,onFocus:this.onFocus,onInput:this.onInput,onKeyDown:this.onKeyDown})}render(){return n(d,Object.assign({key:"a94fa1f79cd14bc55ac737857a076e6929bb57bc"},this.getFormFieldProps()),n(l,{key:"6c5bfacc06d539d9c56a3e9d095a567640d824aa",state:this.state},n(r,Object.assign({key:"31200b326866b69e13064e0e8bcba4d874b9cd1d"},this.getInputProps()))))}constructor(e){t(this,e),this.catchRef=t=>{this.inputRef=t},this.onBlur=t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1},this.onChange=t=>{var e;const n=null===(e=this.inputRef)||void 0===e?void 0:e.value;this.oldValue!==n&&(this.oldValue=n),this.controller.onFacade.onChange(t)},this.onFocus=t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},this.onInput=t=>{var e,n;const i=null!==(n=null===(e=this.inputRef)||void 0===e?void 0:e.value)&&void 0!==n?n:"";h(this,"_currentLength",i.length),this._value=i,this.controller.onFacade.onInput(t)},this.onKeyDown=t=>{"Enter"!==t.code&&"NumpadEnter"!==t.code||a({form:this.host,ref:this.inputRef})},this._accessKey=void 0,this._autoComplete=void 0,this._disabled=!1,this._hasCounter=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=!1,this._required=!1,this._shortKey=void 0,this._spellCheck=void 0,this._suggestions=void 0,this._smartButton=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._type="text",this._value=void 0,this.state={_autoComplete:"off",_currentLength:0,_hasValue:!1,_hideMsg:!1,_id:`id-${o()}`,_label:"",_suggestions:[],_type:"text"},this.inputHasFocus=!1,this.controller=new s(this,"text",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideMsg(t){this.controller.validateHideMsg(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateMsg(t){this.controller.validateMsg(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePattern(t){this.controller.validatePattern(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSpellCheck(t){this.controller.validateSpellCheck(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateType(t){this.controller.validateType(t)}validateValue(t){this.controller.validateValue(t),this.oldValue=t}componentWillLoad(){this._touched=!0===this._touched,this.oldValue=this._value,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}static get delegatesFocus(){return!0}get host(){return e(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_hasCounter:["validateHasCounter"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_spellCheck:["validateSpellCheck"],_suggestions:["validateSuggestions"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};p.style={default:m};export{p as kol_input_text};
+import{h as n,r as t,g as e}from"./index-62ec26b4.js";import{c as i}from"./clsx-09a06a12.js";import{n as o}from"./dev.utils-ada1cd11.js";import{p as a}from"./controller-71d68376.js";import{a as s}from"./controller-f04a784c.js";import{K as l}from"./controller-icon-9397b382.js";import{K as r}from"./InputStateWrapper-040f7635.js";import{K as d}from"./getRenderStates-3c94aee3.js";import{s as h}from"./prop.validators-bb13c77c.js";import"./reuse-f46e7e35.js";import"./dev.utils-fab45cbc.js";import"./component-names-7ee7402b.js";import"./controller-070818e3.js";import"./has-counter-239ecfc9.js";import"./spell-check-6beed622.js";import"./suggestions-935a4e0c.js";import"./InternalUnderlinedBadgeText-77ae0c4d.js";import"./isArray-7a60fa7f.js";import"./isObject-ffcbbb76.js";import"./tslib.es6-1173d062.js";import"./Icon-1679f3fc.js";import"./icons-ae235ff9.js";import"./common-54bf85ba.js";import"./Input-f05ea4d5.js";import"./events-5886c68b.js";import"./associated.controller-9e991177.js";import"./access-and-short-key-7091d688.js";import"./tooltip-align-4b5c8431.js";import"./align-679f189f.js";import"./hide-label-4a7cf616.js";import"./label-5355d0b2.js";import"./Alert-362a56d6.js";import"./i18n-efbafc80.js";import"./i18n-45224cc3.js";import"./bem-e4c3a2e6.js";import"./browser-f629a56a.js";import"./Heading-a93a1765.js";import"./index-932feda8.js";const c="/*\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    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%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\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  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\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  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\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__content {\n    background-color: #fff;\n    color: #000;\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  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}",m=c,p=class{async getValue(){var t;return null===(t=this.inputRef)||void 0===t?void 0:t.value}async kolFocus(){var t;null===(t=this.inputRef)||void 0===t||t.focus()}getFormFieldProps(){return{state:this.state,class:i("kol-input-text",this.state._type,{"has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var t;return null===(t=this.inputRef)||void 0===t?void 0:t.focus()},alert:this.showAsAlert()}}getInputProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state},this.controller.onFacade),{onBlur:this.onBlur,onChange:this.onChange,onFocus:this.onFocus,onInput:this.onInput,onKeyDown:this.onKeyDown})}render(){return n(d,Object.assign({key:"03b91cd888725258ffc7d51f35cedd847147babf"},this.getFormFieldProps()),n(l,{key:"8a9378fb5d82ab7427c4869899da6326e0b6030d",state:this.state},n(r,Object.assign({key:"d78f3ae5645e24c5967922faa3c2b7b0908481e8"},this.getInputProps()))))}constructor(e){t(this,e),this.catchRef=t=>{this.inputRef=t},this.onBlur=t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1},this.onChange=t=>{var e;const n=null===(e=this.inputRef)||void 0===e?void 0:e.value;this.oldValue!==n&&(this.oldValue=n),this.controller.onFacade.onChange(t)},this.onFocus=t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},this.onInput=t=>{var e,n;const i=null!==(n=null===(e=this.inputRef)||void 0===e?void 0:e.value)&&void 0!==n?n:"";h(this,"_currentLength",i.length),this._value=i,this.controller.onFacade.onInput(t)},this.onKeyDown=t=>{"Enter"!==t.code&&"NumpadEnter"!==t.code||a({form:this.host,ref:this.inputRef})},this._accessKey=void 0,this._autoComplete=void 0,this._disabled=!1,this._hasCounter=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=!1,this._required=!1,this._shortKey=void 0,this._spellCheck=void 0,this._suggestions=void 0,this._smartButton=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._touched=!1,this._type="text",this._value=void 0,this.state={_autoComplete:"off",_currentLength:0,_hasValue:!1,_hideMsg:!1,_id:`id-${o()}`,_label:"",_suggestions:[],_type:"text"},this.inputHasFocus=!1,this.controller=new s(this,"text",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideMsg(t){this.controller.validateHideMsg(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateMsg(t){this.controller.validateMsg(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePattern(t){this.controller.validatePattern(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSpellCheck(t){this.controller.validateSpellCheck(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}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 e(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_hasCounter:["validateHasCounter"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_spellCheck:["validateSpellCheck"],_suggestions:["validateSuggestions"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};p.style={default:m};export{p as kol_input_text};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolInputTextDefaultStyle0","KolInputText","getValue","_a","this","inputRef","value","kolFocus","focus","getFormFieldProps","state","class","clsx","_type","_hasValue","tooltipAlign","_tooltipAlign","onClick","alert","showAsAlert","getInputProps","Object","assign","ref","catchRef","controller","onFacade","onBlur","onChange","onFocus","onInput","onKeyDown","render","h","KolFormFieldStateWrapperFc","key","KolInputContainerFc","KolInputStateWrapperFc","constructor","hostRef","event","inputHasFocus","oldValue","_b","setState","length","_value","code","propagateSubmitEventToForm","form","host","_autoComplete","_currentLength","_hideMsg","_id","nonce","_label","_suggestions","InputTextController","Boolean","_touched","validateAccessKey","validateAutoComplete","validateDisabled","validateHasCounter","validateHideMsg","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateMaxLength","validateMsg","validateName","validateOn","validatePattern","validatePlaceholder","validateReadOnly","validateRequired","validateShortKey","validateSpellCheck","validateSuggestions","validateSmartButton","validateSyncValueBySelector","validateTabIndex","validateTouched","validateType","validateValue","componentWillLoad","addValueChangeListener","v"],"sources":["src/components/input-text/style.scss?tag=kol-input-text&mode=default&encapsulation=shadow","src/components/input-text/shadow.tsx"],"sourcesContent":["@import '../../styles/global';\n@import '../../styles/kol-alert-mixin';\n@import '../../styles/kol-form-field-mixin';\n@import '../../styles/kol-input-container-mixin';\n@import '../../styles/kol-input-mixin';\n@import '../@shared/mixins';\n\n@include kol-alert;\n@include kol-form-field;\n@include kol-input-container;\n@include kol-input;\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport type {\n\tAccessKeyPropType,\n\tButtonProps,\n\tFocusableElement,\n\tHideMsgPropType,\n\tIdPropType,\n\tInputTextAPI,\n\tInputTextStates,\n\tInputTextType,\n\tInputTypeOnDefault,\n\tInputTypeOnOff,\n\tKoliBriHorizontalIcons,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tShortKeyPropType,\n\tSpellCheckPropType,\n\tStringified,\n\tSuggestionsPropType,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport { setState } from '../../schema';\n\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper';\nimport KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper';\nimport KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper';\nimport { InputTextController } from './controller';\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-input-text',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolInputText implements InputTextAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolInputTextElement;\n\tprivate inputRef?: HTMLInputElement;\n\tprivate oldValue?: string;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.inputRef = ref;\n\t};\n\n\tprivate readonly onBlur = (event: FocusEvent) => {\n\t\tthis.controller.onFacade.onBlur(event);\n\t\tthis.inputHasFocus = false;\n\t};\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tconst value = this.inputRef?.value;\n\n\t\tif (this.oldValue !== value) {\n\t\t\tthis.oldValue = value;\n\t\t}\n\n\t\tthis.controller.onFacade.onChange(event);\n\t};\n\n\tprivate readonly onFocus = (event: FocusEvent) => {\n\t\tthis.controller.onFacade.onFocus(event);\n\t\tthis.inputHasFocus = true;\n\t};\n\n\tprivate readonly onInput = (event: InputEvent) => {\n\t\tconst value = this.inputRef?.value ?? '';\n\t\tsetState(this, '_currentLength', value.length);\n\n\t\tthis._value = value;\n\n\t\tthis.controller.onFacade.onInput(event);\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\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<string | undefined> {\n\t\treturn this.inputRef?.value;\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\tprivate getFormFieldProps(): FormFieldStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tclass: clsx('kol-input-text', this.state._type as string, {\n\t\t\t\t'has-value': this.state._hasValue,\n\t\t\t}),\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\tonClick: () => this.inputRef?.focus(),\n\t\t\talert: this.showAsAlert(),\n\t\t};\n\t}\n\n\tprivate getInputProps(): InputStateWrapperProps {\n\t\treturn {\n\t\t\tref: this.catchRef,\n\t\t\tstate: this.state,\n\t\t\t...this.controller.onFacade,\n\t\t\tonBlur: this.onBlur,\n\t\t\tonChange: this.onChange,\n\t\t\tonFocus: this.onFocus,\n\t\t\tonInput: this.onInput,\n\t\t\tonKeyDown: this.onKeyDown,\n\t\t};\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>\n\t\t\t\t<KolInputContainerFc state={this.state}>\n\t\t\t\t\t<KolInputStateWrapperFc {...this.getInputProps()} />\n\t\t\t\t</KolInputContainerFc>\n\t\t\t</KolFormFieldStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputTextController;\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?: AccessKeyPropType;\n\n\t/**\n\t * Defines whether the input can be auto-completed.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\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 `HideMsgPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideMsg?: 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?: Stringified<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?: 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 * Defines a validation pattern for the input field.\n\t */\n\t@Prop() public _pattern?: string;\n\n\t/**\n\t * Defines the placeholder for input field. To be shown when there's no value.\n\t */\n\t@Prop() public _placeholder?: string;\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 * 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 * Defines whether the browser should check the spelling and grammar.\n\t */\n\t@Prop() public _spellCheck?: SpellCheckPropType;\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 * 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 either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: InputTextType = 'text';\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _value?: string;\n\n\t@State() public state: InputTextStates = {\n\t\t_autoComplete: 'off',\n\t\t_currentLength: 0,\n\t\t_hasValue: false,\n\t\t_hideMsg: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_suggestions: [],\n\t\t_type: 'text',\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new InputTextController(this, 'text', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: AccessKeyPropType): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(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('_hasCounter')\n\tpublic validateHasCounter(value?: boolean): void {\n\t\tthis.controller.validateHasCounter(value);\n\t}\n\n\t@Watch('_hideMsg')\n\tpublic validateHideMsg(value?: HideMsgPropType): void {\n\t\tthis.controller.validateHideMsg(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('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.controller.validateIcons(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('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(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('_pattern')\n\tpublic validatePattern(value?: string): void {\n\t\tthis.controller.validatePattern(value);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: boolean): void {\n\t\tthis.controller.validateReadOnly(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('_spellCheck')\n\tpublic validateSpellCheck(value?: SpellCheckPropType): void {\n\t\tthis.controller.validateSpellCheck(value);\n\t}\n\n\t@Watch('_suggestions')\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tthis.controller.validateSuggestions(value);\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tthis.controller.validateSmartButton(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('_type')\n\tpublic validateType(value?: InputTextType): void {\n\t\tthis.controller.validateType(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t\tthis.oldValue = value;\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._touched = this._touched === true;\n\t\tthis.oldValue = this._value;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["defaultStyleCss","KolInputTextDefaultStyle0","KolInputText","getValue","_a","this","inputRef","value","kolFocus","focus","getFormFieldProps","state","class","clsx","_type","_hasValue","tooltipAlign","_tooltipAlign","onClick","alert","showAsAlert","getInputProps","Object","assign","ref","catchRef","controller","onFacade","onBlur","onChange","onFocus","onInput","onKeyDown","render","h","KolFormFieldStateWrapperFc","key","KolInputContainerFc","KolInputStateWrapperFc","constructor","hostRef","event","inputHasFocus","oldValue","_b","setState","length","_value","code","propagateSubmitEventToForm","form","host","_autoComplete","_currentLength","_hideMsg","_id","nonce","_label","_suggestions","InputTextController","Boolean","_touched","validateAccessKey","validateAutoComplete","validateDisabled","validateHasCounter","validateHideMsg","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateMaxLength","validateMsg","validateName","validateOn","validatePattern","validatePlaceholder","validateReadOnly","validateRequired","validateShortKey","validateSpellCheck","validateSuggestions","validateSmartButton","validateSyncValueBySelector","validateTouched","validateType","validateValue","componentWillLoad","addValueChangeListener","v"],"sources":["src/components/input-text/style.scss?tag=kol-input-text&mode=default&encapsulation=shadow","src/components/input-text/shadow.tsx"],"sourcesContent":["@use '../../styles/global' as *;\n@use '../../styles/kol-alert-mixin' as *;\n@use '../../styles/kol-form-field-mixin' as *;\n@use '../../styles/kol-input-container-mixin' as *;\n@use '../../styles/kol-input-mixin' as *;\n@use '../@shared/mixins' as *;\n\n@include kol-alert;\n@include kol-form-field;\n@include kol-input-container;\n@include kol-input;\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport type {\n\tAccessKeyPropType,\n\tButtonProps,\n\tFocusableElement,\n\tHideMsgPropType,\n\tIconsHorizontalPropType,\n\tIdPropType,\n\tInputTextAPI,\n\tInputTextStates,\n\tInputTextType,\n\tInputTypeOnDefault,\n\tInputTypeOnOff,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tShortKeyPropType,\n\tSpellCheckPropType,\n\tStringified,\n\tSuggestionsPropType,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport { setState } from '../../schema';\n\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper';\nimport KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper';\nimport KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper';\nimport { InputTextController } from './controller';\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-input-text',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolInputText implements InputTextAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolInputTextElement;\n\tprivate inputRef?: HTMLInputElement;\n\tprivate oldValue?: string;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.inputRef = ref;\n\t};\n\n\tprivate readonly onBlur = (event: FocusEvent) => {\n\t\tthis.controller.onFacade.onBlur(event);\n\t\tthis.inputHasFocus = false;\n\t};\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tconst value = this.inputRef?.value;\n\n\t\tif (this.oldValue !== value) {\n\t\t\tthis.oldValue = value;\n\t\t}\n\n\t\tthis.controller.onFacade.onChange(event);\n\t};\n\n\tprivate readonly onFocus = (event: FocusEvent) => {\n\t\tthis.controller.onFacade.onFocus(event);\n\t\tthis.inputHasFocus = true;\n\t};\n\n\tprivate readonly onInput = (event: InputEvent) => {\n\t\tconst value = this.inputRef?.value ?? '';\n\t\tsetState(this, '_currentLength', value.length);\n\n\t\tthis._value = value;\n\n\t\tthis.controller.onFacade.onInput(event);\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\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<string | undefined> {\n\t\treturn this.inputRef?.value;\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\tprivate getFormFieldProps(): FormFieldStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tclass: clsx('kol-input-text', this.state._type as string, {\n\t\t\t\t'has-value': this.state._hasValue,\n\t\t\t}),\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\tonClick: () => this.inputRef?.focus(),\n\t\t\talert: this.showAsAlert(),\n\t\t};\n\t}\n\n\tprivate getInputProps(): InputStateWrapperProps {\n\t\treturn {\n\t\t\tref: this.catchRef,\n\t\t\tstate: this.state,\n\t\t\t...this.controller.onFacade,\n\t\t\tonBlur: this.onBlur,\n\t\t\tonChange: this.onChange,\n\t\t\tonFocus: this.onFocus,\n\t\t\tonInput: this.onInput,\n\t\t\tonKeyDown: this.onKeyDown,\n\t\t};\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>\n\t\t\t\t<KolInputContainerFc state={this.state}>\n\t\t\t\t\t<KolInputStateWrapperFc {...this.getInputProps()} />\n\t\t\t\t</KolInputContainerFc>\n\t\t\t</KolFormFieldStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputTextController;\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?: AccessKeyPropType;\n\n\t/**\n\t * Defines whether the input can be auto-completed.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\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 `HideMsgPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideMsg?: 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?: IconsHorizontalPropType;\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?: 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 * Defines a validation pattern for the input field.\n\t */\n\t@Prop() public _pattern?: string;\n\n\t/**\n\t * Defines the placeholder for input field. To be shown when there's no value.\n\t */\n\t@Prop() public _placeholder?: string;\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 * 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 * Defines whether the browser should check the spelling and grammar.\n\t */\n\t@Prop() public _spellCheck?: SpellCheckPropType;\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 * 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 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 either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: InputTextType = 'text';\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _value?: string;\n\n\t@State() public state: InputTextStates = {\n\t\t_autoComplete: 'off',\n\t\t_currentLength: 0,\n\t\t_hasValue: false,\n\t\t_hideMsg: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_suggestions: [],\n\t\t_type: 'text',\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new InputTextController(this, 'text', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: AccessKeyPropType): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(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('_hasCounter')\n\tpublic validateHasCounter(value?: boolean): void {\n\t\tthis.controller.validateHasCounter(value);\n\t}\n\n\t@Watch('_hideMsg')\n\tpublic validateHideMsg(value?: HideMsgPropType): void {\n\t\tthis.controller.validateHideMsg(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('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsHorizontalPropType): void {\n\t\tthis.controller.validateIcons(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('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(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('_pattern')\n\tpublic validatePattern(value?: string): void {\n\t\tthis.controller.validatePattern(value);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: boolean): void {\n\t\tthis.controller.validateReadOnly(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('_spellCheck')\n\tpublic validateSpellCheck(value?: SpellCheckPropType): void {\n\t\tthis.controller.validateSpellCheck(value);\n\t}\n\n\t@Watch('_suggestions')\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tthis.controller.validateSuggestions(value);\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tthis.controller.validateSmartButton(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('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: InputTextType): void {\n\t\tthis.controller.validateType(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t\tthis.oldValue = value;\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._touched = this._touched === true;\n\t\tthis.oldValue = this._value;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\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}from"./index-06658c3d.js";import{c as t,v as i}from"./color-62f7b76a.js";import{t as o}from"./i18n-5fe08f1c.js";import{j as a,b as l}from"./prop.validators-9feb1d92.js";import"./dev.utils-fab45cbc.js";import"./i18n-7ea9f137.js";import"./reuse-32931294.js";import"./index-da3e0c00.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    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  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-kolibri {\n    display: inline-block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-height: 100%;\n  }\n  .kol-kolibri__text {\n    font-size: calc(90rem / var(--kolibri-root-font-size, 16));\n    letter-spacing: normal;\n    word-spacing: normal;\n  }\n}",s=r,d=class{constructor(e){n(this,e),this.handleColorChange=(e,n)=>{if("string"==typeof e){const o=t(e);n.set("_color",{red:o[0],green:o[1],blue:o[2]})}else a("[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("svg",{key:"1432f42994b8123fda78624131dfd342c4f27c56",class:"kol-kolibri",role:"img","aria-label":o("kol-kolibri-logo"),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 600 600",fill:n},e("path",{key:"80c7bb7b94512df44c341b982e83eca6f5d15d49",d:"M353 322L213 304V434L353 322Z"}),e("path",{key:"55144ded9d2df1d5817924c04ab13774a9f9b85e",d:"M209 564V304L149 434L209 564Z"}),e("path",{key:"17ea12a96e63edf069adda463d8cfcc1c8fdb42f",d:"M357 316L417 250L361 210L275 244L357 316Z"}),e("path",{key:"878a10b284cc97bdd287cce12db4f9dc8f9f1d7a",d:"M329 218L237 92L250 222L272 241L329 218Z"}),e("path",{key:"e9977e6ac17db549e98c6fece28c37f5a6ddbf43",d:"M353 318L35 36L213 300L353 318Z"}),e("path",{key:"9cccc59000771a457f1ecac578721b9e8055ac24",d:"M391 286L565 272L421 252L391 286Z"}),!0===this.state._labeled&&e("text",{key:"39670fb38a4f6a0ec6f82f08b70db7776482f471",class:"kol-kolibri__text",x:"250",y:"525",fill:n},"KoliBri"))}validateColor(e){i(this,e,{defaultValue:"#003c78",hooks:{beforePatch:this.handleColorChange}})}validateLabeled(e){l(this,"_labeled",e,{defaultValue:!0})}componentWillLoad(){this.validateColor(this._color),this.validateLabeled(this._labeled)}static get watchers(){return{_color:["validateColor"],_labeled:["validateLabeled"]}}};d.style={default:s};export{d as kol_kolibri};
+import{r as e,h as n}from"./index-62ec26b4.js";import{c as t,v as o}from"./color-adb63076.js";import{t as i}from"./i18n-efbafc80.js";import{j as a,b as l}from"./prop.validators-bb13c77c.js";import"./dev.utils-fab45cbc.js";import"./i18n-45224cc3.js";import"./reuse-f46e7e35.js";import"./index-932feda8.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    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%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\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  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-kolibri {\n    display: inline-block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-height: 100%;\n  }\n  .kol-kolibri__text {\n    font-size: calc(90rem / var(--kolibri-root-font-size, 16));\n    letter-spacing: normal;\n    word-spacing: normal;\n  }\n}",s=r,d=class{constructor(n){e(this,n),this.handleColorChange=(e,n)=>{if("string"==typeof e){const o=t(e);n.set("_color",{red:o[0],green:o[1],blue:o[2]})}else a("[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 e=`rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;return n("svg",{key:"490680370f1d5c2e66bd77f3afcd0749d54d0c6e",class:"kol-kolibri",role:"img","aria-label":i("kol-kolibri-logo"),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 600 600",fill:e},n("path",{key:"b5d0186d1d0a1c007a0a9fa84321e4edf0e02dcf",d:"M353 322L213 304V434L353 322Z"}),n("path",{key:"d933f88df67a0e4b2e5c34a6dfb1c5c963a758da",d:"M209 564V304L149 434L209 564Z"}),n("path",{key:"8b3eb704585bac0bfceb99371d6922f4b94b170e",d:"M357 316L417 250L361 210L275 244L357 316Z"}),n("path",{key:"e07349bac5c63d8aa2cdec0929e6663d055491e9",d:"M329 218L237 92L250 222L272 241L329 218Z"}),n("path",{key:"648c28da54defcd245c3dfab02732d7e57ccbd18",d:"M353 318L35 36L213 300L353 318Z"}),n("path",{key:"14a0de9c0455a5a3c8b65cf12b1b47449666448c",d:"M391 286L565 272L421 252L391 286Z"}),!0===this.state._labeled&&n("text",{key:"5e4b6bee08779e34bee19d36ef2efee24312ed62",class:"kol-kolibri__text",x:"250",y:"525",fill:e},"KoliBri"))}validateColor(e){o(this,e,{defaultValue:"#003c78",hooks:{beforePatch:this.handleColorChange}})}validateLabeled(e){l(this,"_labeled",e,{defaultValue:!0})}componentWillLoad(){this.validateColor(this._color),this.validateLabeled(this._labeled)}static get watchers(){return{_color:["validateColor"],_labeled:["validateLabeled"]}}};d.style={default:s};export{d as kol_kolibri};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolKolibriDefaultStyle0","KolKolibri","this","handleColorChange","nextValue","nextState","rgba","colorRgba","set","red","green","blue","devHint","_color","_labeled","render","fillColor","state","h","key","class","role","translate","xmlns","viewBox","fill","d","x","y","validateColor","value","defaultValue","hooks","beforePatch","validateLabeled","watchBoolean","componentWillLoad"],"sources":["src/components/kolibri/style.scss?tag=kol-kolibri&mode=default&encapsulation=shadow","src/components/kolibri/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../../styles/global';\n\n@layer kol-component {\n\t.kol-kolibri {\n\t\tdisplay: inline-block;\n\t\tfont-size: rem(16);\n\t\tmax-height: 100%;\n\t\t&__text {\n\t\t\tfont-size: rem(90);\n\t\t\tletter-spacing: normal;\n\t\t\tword-spacing: normal;\n\t\t}\n\t}\n}\n","import { devHint, validateColor, watchBoolean } from '../../schema';\nimport { Component, Prop, State, Watch, h } from '@stencil/core';\n\nimport { colorRgba } from './color-rgba';\n\nimport { translate } from '../../i18n';\n\nimport type { JSX } from '@stencil/core';\nimport type { Generic } from 'adopted-style-sheets';\n\nimport type { KolibriAPI, KolibriStates, PropColor, Stringified } from '../../schema';\n\n@Component({\n\ttag: 'kol-kolibri',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolKolibri implements KolibriAPI {\n\tpublic render(): JSX.Element {\n\t\tconst fillColor = `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;\n\t\treturn (\n\t\t\t<svg class=\"kol-kolibri\" role=\"img\" aria-label={translate('kol-kolibri-logo')} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 600 600\" fill={fillColor}>\n\t\t\t\t<path d=\"M353 322L213 304V434L353 322Z\" />\n\t\t\t\t<path d=\"M209 564V304L149 434L209 564Z\" />\n\t\t\t\t<path d=\"M357 316L417 250L361 210L275 244L357 316Z\" />\n\t\t\t\t<path d=\"M329 218L237 92L250 222L272 241L329 218Z\" />\n\t\t\t\t<path d=\"M353 318L35 36L213 300L353 318Z\" />\n\t\t\t\t<path d=\"M391 286L565 272L421 252L391 286Z\" />\n\t\t\t\t{this.state._labeled === true && (\n\t\t\t\t\t<text class=\"kol-kolibri__text\" x=\"250\" y=\"525\" fill={fillColor}>\n\t\t\t\t\t\tKoliBri\n\t\t\t\t\t</text>\n\t\t\t\t)}\n\t\t\t</svg>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the color of the logo and label.\n\t */\n\t@Prop() public _color?: Stringified<PropColor> = '#003c78';\n\n\t/**\n\t * Defines whether the component has a label.\n\t */\n\t@Prop() public _labeled?: boolean = true;\n\n\t@State() public state: KolibriStates = {\n\t\t_color: {\n\t\t\tred: 0,\n\t\t\tgreen: 60,\n\t\t\tblue: 120,\n\t\t},\n\t\t_labeled: true,\n\t};\n\n\tprivate handleColorChange: Generic.Element.NextStateHooksCallback = (nextValue: unknown, nextState: Map<string, unknown>): void => {\n\t\tif (typeof nextValue === 'string') {\n\t\t\tconst rgba = colorRgba(nextValue);\n\t\t\tnextState.set('_color', {\n\t\t\t\tred: rgba[0],\n\t\t\t\tgreen: rgba[1],\n\t\t\t\tblue: rgba[2],\n\t\t\t});\n\t\t} else {\n\t\t\tdevHint(`[KolKolibri] You used the complex color schema. For the KoliBri we use need the color as hex string.`);\n\t\t}\n\t};\n\n\t@Watch('_color')\n\tpublic validateColor(value?: Stringified<PropColor>): void {\n\t\tvalidateColor(this, value, {\n\t\t\tdefaultValue: '#003c78',\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.handleColorChange,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_labeled')\n\tpublic validateLabeled(value?: boolean): void {\n\t\twatchBoolean(this, '_labeled', value, {\n\t\t\tdefaultValue: true,\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateColor(this._color);\n\t\tthis.validateLabeled(this._labeled);\n\t}\n}\n"],"mappings":";;;iTAAA,MAAMA,EAAkB,o3IACxB,MAAAC,EAAeD,E,MCkBFE,EAAU,M,yBAuCdC,KAAAC,kBAA4D,CAACC,EAAoBC,KACxF,UAAWD,IAAc,SAAU,CAClC,MAAME,EAAOC,EAAUH,GACvBC,EAAUG,IAAI,SAAU,CACvBC,IAAKH,EAAK,GACVI,MAAOJ,EAAK,GACZK,KAAML,EAAK,I,KAEN,CACNM,EAAQ,uG,eAzBuC,U,cAKb,K,WAEG,CACtCC,OAAQ,CACPJ,IAAK,EACLC,MAAO,GACPC,KAAM,KAEPG,SAAU,K,CAnCJ,MAAAC,GACN,MAAMC,EAAY,OAAOd,KAAKe,MAAMJ,OAAOJ,OAAOP,KAAKe,MAAMJ,OAAOH,SAASR,KAAKe,MAAMJ,OAAOF,QAC/F,OACCO,EAAA,OAAAC,IAAA,2CAAKC,MAAM,cAAcC,KAAK,MAAK,aAAaC,EAAU,oBAAqBC,MAAM,6BAA6BC,QAAQ,cAAcC,KAAMT,GAC7IE,EAAA,QAAAC,IAAA,2CAAMO,EAAE,kCACRR,EAAA,QAAAC,IAAA,2CAAMO,EAAE,kCACRR,EAAA,QAAAC,IAAA,2CAAMO,EAAE,8CACRR,EAAA,QAAAC,IAAA,2CAAMO,EAAE,6CACRR,EAAA,QAAAC,IAAA,2CAAMO,EAAE,oCACRR,EAAA,QAAAC,IAAA,2CAAMO,EAAE,sCACPxB,KAAKe,MAAMH,WAAa,MACxBI,EAAA,QAAAC,IAAA,2CAAMC,MAAM,oBAAoBO,EAAE,MAAMC,EAAE,MAAMH,KAAMT,GAAS,W,CAyC5D,aAAAa,CAAcC,GACpBD,EAAc3B,KAAM4B,EAAO,CAC1BC,aAAc,UACdC,MAAO,CACNC,YAAa/B,KAAKC,oB,CAMd,eAAA+B,CAAgBJ,GACtBK,EAAajC,KAAM,WAAY4B,EAAO,CACrCC,aAAc,M,CAIT,iBAAAK,GACNlC,KAAK2B,cAAc3B,KAAKW,QACxBX,KAAKgC,gBAAgBhC,KAAKY,S","ignoreList":[]}
+{"version":3,"names":["defaultStyleCss","KolKolibriDefaultStyle0","KolKolibri","this","handleColorChange","nextValue","nextState","rgba","colorRgba","set","red","green","blue","devHint","_color","_labeled","render","fillColor","state","h","key","class","role","translate","xmlns","viewBox","fill","d","x","y","validateColor","value","defaultValue","hooks","beforePatch","validateLabeled","watchBoolean","componentWillLoad"],"sources":["src/components/kolibri/style.scss?tag=kol-kolibri&mode=default&encapsulation=shadow","src/components/kolibri/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n\n@layer kol-component {\n\t.kol-kolibri {\n\t\tdisplay: inline-block;\n\t\tfont-size: rem(16);\n\t\tmax-height: 100%;\n\n\t\t&__text {\n\t\t\tfont-size: rem(90);\n\t\t\tletter-spacing: normal;\n\t\t\tword-spacing: normal;\n\t\t}\n\t}\n}\n","import { devHint, validateColor, watchBoolean } from '../../schema';\nimport { Component, Prop, State, Watch, h } from '@stencil/core';\n\nimport { colorRgba } from './color-rgba';\n\nimport { translate } from '../../i18n';\n\nimport type { JSX } from '@stencil/core';\nimport type { Generic } from 'adopted-style-sheets';\n\nimport type { KolibriAPI, KolibriStates, PropColor, Stringified } from '../../schema';\n\n@Component({\n\ttag: 'kol-kolibri',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolKolibri implements KolibriAPI {\n\tpublic render(): JSX.Element {\n\t\tconst fillColor = `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;\n\t\treturn (\n\t\t\t<svg class=\"kol-kolibri\" role=\"img\" aria-label={translate('kol-kolibri-logo')} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 600 600\" fill={fillColor}>\n\t\t\t\t<path d=\"M353 322L213 304V434L353 322Z\" />\n\t\t\t\t<path d=\"M209 564V304L149 434L209 564Z\" />\n\t\t\t\t<path d=\"M357 316L417 250L361 210L275 244L357 316Z\" />\n\t\t\t\t<path d=\"M329 218L237 92L250 222L272 241L329 218Z\" />\n\t\t\t\t<path d=\"M353 318L35 36L213 300L353 318Z\" />\n\t\t\t\t<path d=\"M391 286L565 272L421 252L391 286Z\" />\n\t\t\t\t{this.state._labeled === true && (\n\t\t\t\t\t<text class=\"kol-kolibri__text\" x=\"250\" y=\"525\" fill={fillColor}>\n\t\t\t\t\t\tKoliBri\n\t\t\t\t\t</text>\n\t\t\t\t)}\n\t\t\t</svg>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the color of the logo and label.\n\t */\n\t@Prop() public _color?: Stringified<PropColor> = '#003c78';\n\n\t/**\n\t * Defines whether the component has a label.\n\t */\n\t@Prop() public _labeled?: boolean = true;\n\n\t@State() public state: KolibriStates = {\n\t\t_color: {\n\t\t\tred: 0,\n\t\t\tgreen: 60,\n\t\t\tblue: 120,\n\t\t},\n\t\t_labeled: true,\n\t};\n\n\tprivate handleColorChange: Generic.Element.NextStateHooksCallback = (nextValue: unknown, nextState: Map<string, unknown>): void => {\n\t\tif (typeof nextValue === 'string') {\n\t\t\tconst rgba = colorRgba(nextValue);\n\t\t\tnextState.set('_color', {\n\t\t\t\tred: rgba[0],\n\t\t\t\tgreen: rgba[1],\n\t\t\t\tblue: rgba[2],\n\t\t\t});\n\t\t} else {\n\t\t\tdevHint(`[KolKolibri] You used the complex color schema. For the KoliBri we use need the color as hex string.`);\n\t\t}\n\t};\n\n\t@Watch('_color')\n\tpublic validateColor(value?: Stringified<PropColor>): void {\n\t\tvalidateColor(this, value, {\n\t\t\tdefaultValue: '#003c78',\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.handleColorChange,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_labeled')\n\tpublic validateLabeled(value?: boolean): void {\n\t\twatchBoolean(this, '_labeled', value, {\n\t\t\tdefaultValue: true,\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateColor(this._color);\n\t\tthis.validateLabeled(this._labeled);\n\t}\n}\n"],"mappings":";;;iTAAA,MAAMA,EAAkB,y8IACxB,MAAAC,EAAeD,E,MCkBFE,EAAU,M,yBAuCdC,KAAAC,kBAA4D,CAACC,EAAoBC,KACxF,UAAWD,IAAc,SAAU,CAClC,MAAME,EAAOC,EAAUH,GACvBC,EAAUG,IAAI,SAAU,CACvBC,IAAKH,EAAK,GACVI,MAAOJ,EAAK,GACZK,KAAML,EAAK,I,KAEN,CACNM,EAAQ,uG,eAzBuC,U,cAKb,K,WAEG,CACtCC,OAAQ,CACPJ,IAAK,EACLC,MAAO,GACPC,KAAM,KAEPG,SAAU,K,CAnCJ,MAAAC,GACN,MAAMC,EAAY,OAAOd,KAAKe,MAAMJ,OAAOJ,OAAOP,KAAKe,MAAMJ,OAAOH,SAASR,KAAKe,MAAMJ,OAAOF,QAC/F,OACCO,EAAA,OAAAC,IAAA,2CAAKC,MAAM,cAAcC,KAAK,MAAK,aAAaC,EAAU,oBAAqBC,MAAM,6BAA6BC,QAAQ,cAAcC,KAAMT,GAC7IE,EAAA,QAAAC,IAAA,2CAAMO,EAAE,kCACRR,EAAA,QAAAC,IAAA,2CAAMO,EAAE,kCACRR,EAAA,QAAAC,IAAA,2CAAMO,EAAE,8CACRR,EAAA,QAAAC,IAAA,2CAAMO,EAAE,6CACRR,EAAA,QAAAC,IAAA,2CAAMO,EAAE,oCACRR,EAAA,QAAAC,IAAA,2CAAMO,EAAE,sCACPxB,KAAKe,MAAMH,WAAa,MACxBI,EAAA,QAAAC,IAAA,2CAAMC,MAAM,oBAAoBO,EAAE,MAAMC,EAAE,MAAMH,KAAMT,GAAS,W,CAyC5D,aAAAa,CAAcC,GACpBD,EAAc3B,KAAM4B,EAAO,CAC1BC,aAAc,UACdC,MAAO,CACNC,YAAa/B,KAAKC,oB,CAMd,eAAA+B,CAAgBJ,GACtBK,EAAajC,KAAM,WAAY4B,EAAO,CACrCC,aAAc,M,CAIT,iBAAAK,GACNlC,KAAK2B,cAAc3B,KAAKW,QACxBX,KAAKgC,gBAAgBhC,KAAKY,S","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e}from"./index-06658c3d.js";import{f as t}from"./component-names-545d6582.js";const i="@charset \"UTF-8\";\n/*\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    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  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-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  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\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__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  .kol-link::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-link__text {\n    margin: auto;\n    width: 100%;\n  }\n}",o=i,a=class{constructor(e){n(this,e),this.catchRef=n=>{this.linkWcRef=n},this._accessKey=void 0,this._ariaCurrentValue=void 0,this._ariaDescription=void 0,this._customClass=void 0,this._disabled=!1,this._download=void 0,this._hideLabel=!1,this._href=void 0,this._icons=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._tabIndex=void 0,this._target=void 0,this._tooltipAlign="right",this._variant="normal"}async kolFocus(){var n;await(null===(n=this.linkWcRef)||void 0===n?void 0:n.kolFocus())}render(){return e(t,{key:"917fbc5cb48b9d2f511d66869ed8d6cd5db35f98",ref:this.catchRef,_accessKey:this._accessKey,_ariaCurrentValue:this._ariaCurrentValue,_ariaDescription:this._ariaDescription,_customClass:this._customClass,_disabled:this._disabled,_download:this._download,_hideLabel:this._hideLabel,_href:this._href,_icons:this._icons,_label:this._label,_on:this._on,_role:"button",_shortKey:this._shortKey,_tabIndex:this._tabIndex,_target:this._target,_tooltipAlign:this._tooltipAlign,_variant:this._variant},e("slot",{key:"a98d6a2de85bd8d8cfd4f61d52e203c92c038e37",name:"expert",slot:"expert"}))}static get delegatesFocus(){return!0}};a.style={default:o};export{a as kol_link_button};
+import{r as n,h as e}from"./index-62ec26b4.js";import{e as t}from"./component-names-7ee7402b.js";const i="@charset \"UTF-8\";\n/*\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    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%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\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  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\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  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\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__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  .kol-link::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-link__text {\n    margin: auto;\n    width: 100%;\n  }\n}",o=i,a=class{constructor(e){n(this,e),this.catchRef=n=>{this.linkWcRef=n},this._accessKey=void 0,this._ariaCurrentValue=void 0,this._ariaDescription=void 0,this._customClass=void 0,this._disabled=!1,this._download=void 0,this._hideLabel=!1,this._href=void 0,this._icons=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._target=void 0,this._tooltipAlign="right",this._variant="normal"}async kolFocus(){var n;await(null===(n=this.linkWcRef)||void 0===n?void 0:n.kolFocus())}render(){return e(t,{key:"63b766a0b393724d79e346a7d23318b5a044d5b8",ref:this.catchRef,_accessKey:this._accessKey,_ariaCurrentValue:this._ariaCurrentValue,_ariaDescription:this._ariaDescription,_customClass:this._customClass,_disabled:this._disabled,_download:this._download,_hideLabel:this._hideLabel,_href:this._href,_icons:this._icons,_label:this._label,_on:this._on,_role:"button",_shortKey:this._shortKey,_target:this._target,_tooltipAlign:this._tooltipAlign,_variant:this._variant},e("slot",{key:"c2cdcf59de68e99b8fa026bb7f2f5e99169b945c",name:"expert",slot:"expert"}))}static get delegatesFocus(){return!0}};a.style={default:o};export{a as kol_link_button};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolLinkButtonDefaultStyle0","KolLinkButton","this","catchRef","ref","linkWcRef","kolFocus","_a","render","h","KolLinkWcTag","key","_accessKey","_ariaCurrentValue","_ariaDescription","_customClass","_disabled","_download","_hideLabel","_href","_icons","_label","_on","_role","_shortKey","_tabIndex","_target","_tooltipAlign","_variant","name","slot"],"sources":["src/components/link-button/style.scss?tag=kol-link-button&mode=default&encapsulation=shadow","src/components/link-button/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../../styles/global';\n@import '../@shared/kol-button-mixin';\n\n@include kol-button-styles('kol-link');\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaCurrentValuePropType,\n\tAriaDescriptionPropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tDownloadPropType,\n\tFocusableElement,\n\tHrefPropType,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tLinkButtonProps,\n\tLinkOnCallbacksPropType,\n\tLinkTargetPropType,\n\tShortKeyPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Method, Prop } from '@stencil/core';\nimport { KolLinkWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-link-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolLinkButton implements LinkButtonProps, FocusableElement {\n\tprivate linkWcRef?: HTMLKolLinkWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolLinkWcElement) => {\n\t\tthis.linkWcRef = ref;\n\t};\n\n\t@Method()\n\tpublic async kolFocus() {\n\t\tawait this.linkWcRef?.kolFocus();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolLinkWcTag\n\t\t\t\tref={this.catchRef}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaCurrentValue={this._ariaCurrentValue}\n\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t_customClass={this._customClass}\n\t\t\t\t_disabled={this._disabled}\n\t\t\t\t_download={this._download}\n\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t_href={this._href}\n\t\t\t\t_icons={this._icons}\n\t\t\t\t_label={this._label}\n\t\t\t\t_on={this._on}\n\t\t\t\t_role=\"button\"\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t_target={this._target}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t_variant={this._variant}\n\t\t\t>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t</KolLinkWcTag>\n\t\t);\n\t}\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?: AccessKeyPropType;\n\n\t/**\n\t * Defines the value for the aria-current attribute.\n\t */\n\t@Prop() public _ariaCurrentValue?: AriaCurrentValuePropType;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Tells the browser that the link contains a file. Optionally sets the filename.\n\t */\n\t@Prop() public _download?: DownloadPropType;\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 target URI of the link.\n\t */\n\t@Prop() public _href!: HrefPropType;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\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 callback functions for links.\n\t */\n\t@Prop() public _on?: LinkOnCallbacksPropType;\n\n\t/**\n\t * Defines the role of the components primary element.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\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 * 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 open the link.\n\t */\n\t@Prop() public _target?: LinkTargetPropType;\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 = 'right';\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n}\n"],"mappings":";;;iGAAA,MAAMA,EAAkB,suLACxB,MAAAC,EAAeD,E,MC8BFE,EAAa,M,yBAGRC,KAAAC,SAAYC,IAC5BF,KAAKG,UAAYD,CAAG,E,sIA0DgB,M,yCAYC,M,qMA6CgB,Q,cAKJ,Q,CApH3C,cAAME,G,aACNC,EAAAL,KAAKG,aAAS,MAAAE,SAAA,SAAAA,EAAED,W,CAGhB,MAAAE,GACN,OACCC,EAACC,EAAY,CAAAC,IAAA,2CACZP,IAAKF,KAAKC,SACVS,WAAYV,KAAKU,WACjBC,kBAAmBX,KAAKW,kBACxBC,iBAAkBZ,KAAKY,iBACvBC,aAAcb,KAAKa,aACnBC,UAAWd,KAAKc,UAChBC,UAAWf,KAAKe,UAChBC,WAAYhB,KAAKgB,WACjBC,MAAOjB,KAAKiB,MACZC,OAAQlB,KAAKkB,OACbC,OAAQnB,KAAKmB,OACbC,IAAKpB,KAAKoB,IACVC,MAAM,SACNC,UAAWtB,KAAKsB,UAChBC,UAAWvB,KAAKuB,UAChBC,QAASxB,KAAKwB,QACdC,cAAezB,KAAKyB,cACpBC,SAAU1B,KAAK0B,UAEfnB,EAAA,QAAAE,IAAA,2CAAMkB,KAAK,SAASC,KAAK,W","ignoreList":[]}
+{"version":3,"names":["defaultStyleCss","KolLinkButtonDefaultStyle0","KolLinkButton","this","catchRef","ref","linkWcRef","kolFocus","_a","render","h","KolLinkWcTag","key","_accessKey","_ariaCurrentValue","_ariaDescription","_customClass","_disabled","_download","_hideLabel","_href","_icons","_label","_on","_role","_shortKey","_target","_tooltipAlign","_variant","name","slot"],"sources":["src/components/link-button/style.scss?tag=kol-link-button&mode=default&encapsulation=shadow","src/components/link-button/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../@shared/kol-button-mixin' as *;\n\n@include kol-button-styles('kol-link');\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaCurrentValuePropType,\n\tAriaDescriptionPropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tDownloadPropType,\n\tFocusableElement,\n\tHrefPropType,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tLinkButtonProps,\n\tLinkOnCallbacksPropType,\n\tLinkTargetPropType,\n\tShortKeyPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Method, Prop } from '@stencil/core';\nimport { KolLinkWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-link-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolLinkButton implements LinkButtonProps, FocusableElement {\n\tprivate linkWcRef?: HTMLKolLinkWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolLinkWcElement) => {\n\t\tthis.linkWcRef = ref;\n\t};\n\n\t@Method()\n\tpublic async kolFocus() {\n\t\tawait this.linkWcRef?.kolFocus();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolLinkWcTag\n\t\t\t\tref={this.catchRef}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaCurrentValue={this._ariaCurrentValue}\n\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t_customClass={this._customClass}\n\t\t\t\t_disabled={this._disabled}\n\t\t\t\t_download={this._download}\n\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t_href={this._href}\n\t\t\t\t_icons={this._icons}\n\t\t\t\t_label={this._label}\n\t\t\t\t_on={this._on}\n\t\t\t\t_role=\"button\"\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_target={this._target}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t_variant={this._variant}\n\t\t\t>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t</KolLinkWcTag>\n\t\t);\n\t}\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?: AccessKeyPropType;\n\n\t/**\n\t * Defines the value for the aria-current attribute.\n\t */\n\t@Prop() public _ariaCurrentValue?: AriaCurrentValuePropType;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Tells the browser that the link contains a file. Optionally sets the filename.\n\t */\n\t@Prop() public _download?: DownloadPropType;\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 target URI of the link.\n\t */\n\t@Prop() public _href!: HrefPropType;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\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 callback functions for links.\n\t */\n\t@Prop() public _on?: LinkOnCallbacksPropType;\n\n\t/**\n\t * Defines the role of the components primary element.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\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 * Defines where to open the link.\n\t */\n\t@Prop() public _target?: LinkTargetPropType;\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 = 'right';\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n}\n"],"mappings":";;;iGAAA,MAAMA,EAAkB,4zLACxB,MAAAC,EAAeD,E,MC8BFE,EAAa,M,yBAGRC,KAAAC,SAAYC,IAC5BF,KAAKG,UAAYD,CAAG,E,sIAyDgB,M,yCAYC,M,4KAwCgB,Q,cAKJ,Q,CA9G3C,cAAME,G,aACNC,EAAAL,KAAKG,aAAS,MAAAE,SAAA,SAAAA,EAAED,W,CAGhB,MAAAE,GACN,OACCC,EAACC,EAAY,CAAAC,IAAA,2CACZP,IAAKF,KAAKC,SACVS,WAAYV,KAAKU,WACjBC,kBAAmBX,KAAKW,kBACxBC,iBAAkBZ,KAAKY,iBACvBC,aAAcb,KAAKa,aACnBC,UAAWd,KAAKc,UAChBC,UAAWf,KAAKe,UAChBC,WAAYhB,KAAKgB,WACjBC,MAAOjB,KAAKiB,MACZC,OAAQlB,KAAKkB,OACbC,OAAQnB,KAAKmB,OACbC,IAAKpB,KAAKoB,IACVC,MAAM,SACNC,UAAWtB,KAAKsB,UAChBC,QAASvB,KAAKuB,QACdC,cAAexB,KAAKwB,cACpBC,SAAUzB,KAAKyB,UAEflB,EAAA,QAAAE,IAAA,2CAAMiB,KAAK,SAASC,KAAK,W","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as t,H as s,g as e}from"./index-06658c3d.js";import{o as a}from"./ariaCurrentService-6fe36ebc.js";import{d,K as n}from"./events-5adf6b62.js";import{n as o}from"./dev.utils-f9d0242d.js";import{g as h,d as l}from"./component-names-545d6582.js";import{t as r}from"./i18n-5fe08f1c.js";import{v as f,a as c,b,c as u}from"./access-and-short-key-9cca88b8.js";import{c as v}from"./clsx-09a06a12.js";import{K as p}from"./Span-a19668ac.js";import{w as m,i as _,q as k,j}from"./prop.validators-9feb1d92.js";import{v as g}from"./href-d8ec67f8.js";import{s as y}from"./reuse-32931294.js";import{v as x,a as A,b as w,c as C}from"./button-variant-ce5f212b.js";import{v as K}from"./custom-class-ac49545a.js";import{v as O}from"./disabled-dad7478c.js";import{v as V}from"./hide-label-429a15ea.js";import{v as T}from"./icons-199f1746.js";import{a as I}from"./label-d0315384.js";import{v as L}from"./tooltip-align-8e0fa436.js";import"./dev.utils-fab45cbc.js";import"./i18n-7ea9f137.js";import"./tslib.es6-1173d062.js";import"./Icon-1eca6817.js";import"./InternalUnderlinedBadgeText-738f2cd0.js";import"./isObject-ffcbbb76.js";import"./index-da3e0c00.js";import"./common-54bf85ba.js";import"./align-4719d626.js";const D=["date","location","page","step","time","true","false"],S=(t,a)=>{m(t,"_ariaCurrentValue",(t=>"string"==typeof t&&D.includes(t)),new Set([`AriaCurrentValue {${D.join(", ")}`]),a,{defaultValue:"page"})},E=(t,a)=>{_(t,"_ariaOwns",a,{defaultValue:void 0})},H=(t,a)=>{_(t,"_download",a)},$=(t,a)=>{"object"==typeof a&&"function"==typeof(null==a?void 0:a.onClick)&&(t.state=Object.assign(Object.assign({},t.state),{_on:a}))},q=(t,a)=>{_(t,"_target",a)},B=class{constructor(t){i(this,t),this.internalDescriptionById=o(),this.catchRef=t=>{this.anchorRef=t},this.onClick=t=>{var a,i;!0===this.state._disabled?t.preventDefault():("function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)&&(t.preventDefault(),k(t,this.anchorRef),null===(i=this.state._on)||void 0===i||i.onClick(t,this.state._href)),this.host&&d(this.host,n.click,this.state._href))},this.getRenderValues=()=>{const t="string"==typeof this.state._target&&"_self"!==this.state._target,a={href:"string"==typeof this.state._href&&this.state._href.length>0?this.state._href:"javascript:void(0);",target:"string"==typeof this.state._target&&this.state._target.length>0?this.state._target:void 0,rel:t?"noopener":void 0,download:"string"==typeof this.state._download?this.state._download:void 0};return!0!==this.state._hideLabel||this.state._label||j("[KolLink] An aria-label must be set when _hide-label is set."),{isExternal:t,tagAttrs:a}},this._accessKey=void 0,this._ariaCurrentValue=void 0,this._ariaDescription=void 0,this._ariaExpanded=void 0,this._ariaOwns=void 0,this._customClass=void 0,this._disabled=!1,this._download=void 0,this._hideLabel=!1,this._href=void 0,this._icons=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._tabIndex=void 0,this._target=void 0,this._tooltipAlign="right",this._variant="normal",this.state={_ariaCurrentValue:"page",_href:"",_icons:{}}}async kolFocus(){var t;null===(t=this.anchorRef)||void 0===t||t.focus()}render(){var a,i;const{isExternal:e,tagAttrs:o}=this.getRenderValues(),d=y(this.state._label),n=Boolean(null===(i=null===(a=this.state._ariaDescription)||void 0===a?void 0:a.trim())||void 0===i?void 0:i.length);return t(s,{key:"964739de8bad32dcd830f476dd815211495e6eed"},t("a",Object.assign({key:"e9561afbf742107fb3e03d8f7b781a4e78d00ebf",ref:this.catchRef},o,{accessKey:this.state._accessKey,"aria-current":this.state._ariaCurrent,"aria-describedby":n?this.internalDescriptionById:void 0,"aria-disabled":this.state._disabled?"true":void 0,"aria-expanded":"boolean"==typeof this.state._ariaExpanded?String(this.state._ariaExpanded):void 0,"aria-owns":this.state._ariaOwns,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?`${this.state._label}${e?` (${r("kol-open-link-in-tab")})`:""}`:void 0,class:v("kol-link",{"kol-link--disabled":!0===this.state._disabled,"kol-link--external-link":e,"kol-link--hide-label":!0===this.state._hideLabel,[`kol-link--${this.state._variant}`]:"button"===this.state._role&&"custom"!==this.state._variant,[this.state._customClass]:"custom"===this.state._variant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0})},this.state._on,{onClick:this.onClick,onKeyPress:this.onClick,role:this.state._role,tabIndex:this.state._disabled?-1:this.state._tabIndex}),t(p,{key:"af61946870f7d609ebfa0a64d7e374c3a5b3bf30",class:"kol-link__text",badgeText:this.state._accessKey||this.state._shortKey,icons:this.state._icons,hideLabel:this.state._hideLabel,label:d?"":this.state._label||this.state._href},t("slot",{key:"623e7a355c8d7791acc94e5b38a6f8496110ded7",name:"expert",slot:"expert"})),e&&t(l,{key:"bea61211da524a654b940b8f4504bfcd67a450db",class:"kol-link__icon",_label:this.state._hideLabel?"":r("kol-open-link-in-tab"),_icons:"codicon codicon-link-external","aria-hidden":this.state._hideLabel})),t(h,{key:"2a37f550f670b96bb540c9301c4c29732e09f89b","aria-hidden":"true",class:"kol-link__tooltip",hidden:d||!this.state._hideLabel,_badgeText:this.state._accessKey||this.state._shortKey,_align:this.state._tooltipAlign,_label:this.state._label||this.state._href}),n&&t("span",{key:"d1b50c05fdfcd7230b8be1ed6412c5d8fe096f8b",class:"visually-hidden",id:this.internalDescriptionById},this.state._ariaDescription))}validateAccessKey(t){f(this,t),c(t,this._shortKey)}validateAriaCurrentValue(t){S(this,t)}validateAriaDescription(t){x(this,t)}validateAriaExpanded(t){A(this,t)}validateAriaOwns(t){E(this,t)}validateCustomClass(t){K(this,t)}validateDisabled(t){O(this,t)}validateDownload(t){H(this,t)}validateHideLabel(t){V(this,t)}validateHref(t){g(this,t,{required:!0})}validateIcons(t){T(this,t)}validateLabel(t){I(this,t)}validateOn(t){$(this,t)}validateRole(t){w(this,t)}validateShortKey(t){b(this,t),c(this._accessKey,t)}validateTabIndex(t){u(this,t)}validateTarget(t){q(this,t)}validateTooltipAlign(t){L(this,t)}validateVariant(t){C(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaCurrentValue(this._ariaCurrentValue),this.validateAriaDescription(this._ariaDescription),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaOwns(this._ariaOwns),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateDownload(this._download),this.validateHideLabel(this._hideLabel),this.validateHref(this._href),this.validateIcons(this._icons),this.validateLabel(this._label),this.validateOn(this._on),this.validateRole(this._role),this.validateShortKey(this._shortKey),this.validateTabIndex(this._tabIndex),this.validateTarget(this._target),this.validateTooltipAlign(this._tooltipAlign),this.validateVariant(this._variant),this.unsubscribeOnLocationChange=a((t=>{this.state._ariaCurrent=t===this.state._href?this.state._ariaCurrentValue:void 0})),c(this._accessKey,this._shortKey)}disconnectedCallback(){this.unsubscribeOnLocationChange&&this.unsubscribeOnLocationChange()}get host(){return e(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaCurrentValue:["validateAriaCurrentValue"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaOwns:["validateAriaOwns"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_download:["validateDownload"],_hideLabel:["validateHideLabel"],_href:["validateHref"],_icons:["validateIcons"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_tabIndex:["validateTabIndex"],_target:["validateTarget"],_tooltipAlign:["validateTooltipAlign"],_variant:["validateVariant"]}}};export{B as kol_link_wc};
+import{r as i,h as t,H as s,g as e}from"./index-62ec26b4.js";import{o as a}from"./ariaCurrentService-6fe36ebc.js";import{d as n,K as d}from"./events-5886c68b.js";import{n as o}from"./dev.utils-ada1cd11.js";import{f as h,d as l}from"./component-names-7ee7402b.js";import{t as r}from"./i18n-efbafc80.js";import{v as c,a as f,b as u,c as b}from"./access-and-short-key-7091d688.js";import{c as v}from"./clsx-09a06a12.js";import{K as p}from"./Span-a625f565.js";import{w as m,i as _,n as j,j as k}from"./prop.validators-bb13c77c.js";import{v as g}from"./href-8cf96f1c.js";import{s as y}from"./reuse-f46e7e35.js";import{v as x,a as A,b as w,c as C}from"./button-variant-68e61ccd.js";import{v as K}from"./custom-class-7ee02f93.js";import{v as O}from"./disabled-66301c63.js";import{v as V}from"./hide-label-4a7cf616.js";import{v as T}from"./icons-ae235ff9.js";import{a as I}from"./label-5355d0b2.js";import{v as L}from"./tooltip-align-4b5c8431.js";import"./dev.utils-fab45cbc.js";import"./i18n-45224cc3.js";import"./tslib.es6-1173d062.js";import"./Icon-1679f3fc.js";import"./InternalUnderlinedBadgeText-77ae0c4d.js";import"./isArray-7a60fa7f.js";import"./isObject-ffcbbb76.js";import"./index-932feda8.js";import"./common-54bf85ba.js";import"./align-679f189f.js";const D=["date","location","page","step","time","true","false"],S=(t,a)=>{m(t,"_ariaCurrentValue",(t=>"string"==typeof t&&D.includes(t)),new Set([`AriaCurrentValue {${D.join(", ")}`]),a,{defaultValue:"page"})},E=(t,a)=>{_(t,"_ariaOwns",a,{defaultValue:void 0})},H=(t,a)=>{_(t,"_download",a)},$=(t,a)=>{"object"==typeof a&&"function"==typeof(null==a?void 0:a.onClick)&&(t.state=Object.assign(Object.assign({},t.state),{_on:a}))},B=(t,a)=>{_(t,"_target",a)},R=class{constructor(t){i(this,t),this.internalDescriptionById=o(),this.catchRef=t=>{this.anchorRef=t},this.onClick=t=>{var a,i;!0===this.state._disabled?t.preventDefault():("function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)&&(t.preventDefault(),j(t,this.anchorRef),null===(i=this.state._on)||void 0===i||i.onClick(t,this.state._href)),this.host&&n(this.host,d.click,this.state._href))},this.getRenderValues=()=>{const t="string"==typeof this.state._target&&"_self"!==this.state._target,a={href:"string"==typeof this.state._href&&this.state._href.length>0?this.state._href:"javascript:void(0);",target:"string"==typeof this.state._target&&this.state._target.length>0?this.state._target:void 0,rel:t?"noopener":void 0,download:"string"==typeof this.state._download?this.state._download:void 0};return!0!==this.state._hideLabel||this.state._label||k("[KolLink] An aria-label must be set when _hide-label is set."),{isExternal:t,tagAttrs:a}},this._accessKey=void 0,this._ariaCurrentValue=void 0,this._ariaDescription=void 0,this._ariaExpanded=void 0,this._ariaOwns=void 0,this._customClass=void 0,this._disabled=!1,this._download=void 0,this._hideLabel=!1,this._href=void 0,this._icons=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._tabIndex=void 0,this._target=void 0,this._tooltipAlign="right",this._variant="normal",this.state={_ariaCurrentValue:"page",_href:"",_icons:{}}}async kolFocus(){var t;null===(t=this.anchorRef)||void 0===t||t.focus()}render(){var a,i;const{isExternal:e,tagAttrs:o}=this.getRenderValues(),d=y(this.state._label),n=Boolean(null===(i=null===(a=this.state._ariaDescription)||void 0===a?void 0:a.trim())||void 0===i?void 0:i.length);return t(s,{key:"587357d002a1ea7744990f5ce802f96af6baef5a"},t("a",Object.assign({key:"7f3fc17c83bbcfdc184b5edea97d25ce06f55227",ref:this.catchRef},o,{accessKey:this.state._accessKey,"aria-current":this.state._ariaCurrent,"aria-describedby":n?this.internalDescriptionById:void 0,"aria-disabled":this.state._disabled?"true":void 0,"aria-expanded":"boolean"==typeof this.state._ariaExpanded?String(this.state._ariaExpanded):void 0,"aria-owns":this.state._ariaOwns,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?`${this.state._label}${e?` (${r("kol-open-link-in-tab")})`:""}`:void 0,class:v("kol-link",{"kol-link--disabled":!0===this.state._disabled,"kol-link--external-link":e,"kol-link--hide-label":!0===this.state._hideLabel,[`kol-link--${this.state._variant}`]:"button"===this.state._role&&"custom"!==this.state._variant,[this.state._customClass]:"custom"===this.state._variant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0})},this.state._on,{onClick:this.onClick,onKeyPress:this.onClick,role:this.state._role,tabIndex:this.state._disabled?-1:this.state._tabIndex}),t(p,{key:"b806611a5bb089b415a07d55dd6c070c9703c886",class:"kol-link__text",badgeText:this.state._accessKey||this.state._shortKey,icons:this.state._icons,hideLabel:this.state._hideLabel,label:d?"":this.state._label||this.state._href},t("slot",{key:"5a40e834255ae54cf719dd51a521e92874c89c47",name:"expert",slot:"expert"})),e&&t(l,{key:"f757a3dc5c051df590dc7048ae15a26e8c28ea8b",class:"kol-link__icon",_label:this.state._hideLabel?"":r("kol-open-link-in-tab"),_icons:"codicon codicon-link-external","aria-hidden":this.state._hideLabel})),t(h,{key:"1fd1e9b9fcae9a8505f29cc6962d742670d96f84","aria-hidden":"true",class:"kol-link__tooltip",hidden:d||!this.state._hideLabel,_badgeText:this.state._accessKey||this.state._shortKey,_align:this.state._tooltipAlign,_label:this.state._label||this.state._href}),n&&t("span",{key:"4d5d88f8b21c251476b31533e8c54318fd087b27",class:"visually-hidden",id:this.internalDescriptionById},this.state._ariaDescription))}validateAccessKey(t){c(this,t),f(t,this._shortKey)}validateAriaCurrentValue(t){S(this,t)}validateAriaDescription(t){x(this,t)}validateAriaExpanded(t){A(this,t)}validateAriaOwns(t){E(this,t)}validateCustomClass(t){K(this,t)}validateDisabled(t){O(this,t)}validateDownload(t){H(this,t)}validateHideLabel(t){V(this,t)}validateHref(t){g(this,t,{required:!0})}validateIcons(t){T(this,t)}validateLabel(t){I(this,t)}validateOn(t){$(this,t)}validateRole(t){w(this,t)}validateShortKey(t){u(this,t),f(this._accessKey,t)}validateTabIndex(t){b(this,t)}validateTarget(t){B(this,t)}validateTooltipAlign(t){L(this,t)}validateVariant(t){C(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaCurrentValue(this._ariaCurrentValue),this.validateAriaDescription(this._ariaDescription),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaOwns(this._ariaOwns),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateDownload(this._download),this.validateHideLabel(this._hideLabel),this.validateHref(this._href),this.validateIcons(this._icons),this.validateLabel(this._label),this.validateOn(this._on),this.validateRole(this._role),this.validateShortKey(this._shortKey),this.validateTabIndex(this._tabIndex),this.validateTarget(this._target),this.validateTooltipAlign(this._tooltipAlign),this.validateVariant(this._variant),this.unsubscribeOnLocationChange=a((t=>{this.state._ariaCurrent=t===this.state._href?this.state._ariaCurrentValue:void 0})),f(this._accessKey,this._shortKey)}disconnectedCallback(){this.unsubscribeOnLocationChange&&this.unsubscribeOnLocationChange()}get host(){return e(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaCurrentValue:["validateAriaCurrentValue"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaOwns:["validateAriaOwns"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_download:["validateDownload"],_hideLabel:["validateHideLabel"],_href:["validateHref"],_icons:["validateIcons"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_tabIndex:["validateTabIndex"],_target:["validateTarget"],_tooltipAlign:["validateTooltipAlign"],_variant:["validateVariant"]}}};export{R as kol_link_wc};