@public-ui/components 2.2.3 → 2.2.4

package/dist/components/controller3.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{I as InputController}from"./controller2.js";import{b as a11yHint,i as watchJsonArrayString,c as watchBoolean,w as watchValidator,x as mapString2Unknown,s as setState}from"./prop.validators.js";import{b as hasEnoughReadableChars,c as containsOnlyNumbers}from"./label.js";const validateInputSelectOptions=t=>{if("object"==typeof t&&null!==t){if("string"==typeof t.label&&t.label.length>0)return t.disabled=!0===t.disabled,t.label=`${t.label}`.trim(),!1===hasEnoughReadableChars(t.label,3)&&!1===containsOnlyNumbers(t.label)&&a11yHint(`A differing Aria-Label (${t.label}) is not accessible. A differing Aria-Label should consist of at least three readable characters.`),!Array.isArray(t.options)||void 0===t.options.find((t=>!1===validateInputSelectOptions(t)));if("number"==typeof t.label)return!0}return!1},validateOptions=(t,e,o={})=>{watchJsonArrayString(t,"_options",(t=>"object"==typeof t&&null!==t&&"string"==typeof t.label&&t.label.length>0),e,void 0,o)},validateOptionsWithOptgroup=(t,e,o={})=>{watchJsonArrayString(t,"_options",validateInputSelectOptions,e,void 0,o)},validateRequired=(t,e)=>{watchBoolean(t,"_required",e)},orientationOptions=["horizontal","vertical"],fillKeyOptionMap=(t,e,o="")=>{e.forEach(((e,a)=>{const i=`${o}-${a}`;"object"==typeof e&&null!==e&&"string"==typeof e.label&&e.label.length>0&&(Array.isArray(e.options)?fillKeyOptionMap(t,e.options,i):t.set(i,e))}))};class InputCheckboxRadioController extends InputController{constructor(t,e,o){super(t,e,o),this.component=t}validateRequired(t){validateRequired(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateRequired(this.component._required)}}class InputRadioController extends InputCheckboxRadioController{constructor(t,e,o){super(t,e,o),this.keyOptionMap=new Map,this.getOptionByKey=t=>this.keyOptionMap.get(t),this.afterPatchOptions=(t,e,o,a)=>{"_value"===a&&this.setFormAssociatedValue(t)},this.beforePatchOptions=(t,e)=>{const o=e.has("_options")?e.get("_options"):this.component.state._options;Array.isArray(o)&&o.length>0&&(this.keyOptionMap.clear(),fillKeyOptionMap(this.keyOptionMap,o))},this.component=t}validateOrientation(t){watchValidator(this.component,"_orientation",(t=>"string"==typeof t&&orientationOptions.includes(t)),new Set([`Orientation {${orientationOptions.join(", ")}`]),t,{defaultValue:"vertical"})}validateOptions(t){validateOptions(this.component,t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateValue(t){t=mapString2Unknown(t),t=Array.isArray(t)?t[0]:t,setState(this.component,"_value",t,{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions})}componentWillLoad(){super.componentWillLoad(),this.validateOrientation(this.component._orientation),this.validateOptions(this.component._options),this.validateValue(this.component._value)}}export{InputCheckboxRadioController as I,InputRadioController as a,validateOptions as b,fillKeyOptionMap as f,validateOptionsWithOptgroup as v};
+import{I as InputController}from"./controller2.js";import{a as a11yHint,j as watchJsonArrayString,c as watchBoolean,w as watchValidator,y as mapString2Unknown,s as setState}from"./prop.validators.js";import{b as hasEnoughReadableChars,c as containsOnlyNumbers}from"./label.js";const validateInputSelectOptions=t=>{if("object"==typeof t&&null!==t){if("string"==typeof t.label&&t.label.length>0)return t.disabled=!0===t.disabled,t.label=`${t.label}`.trim(),!1===hasEnoughReadableChars(t.label,3)&&!1===containsOnlyNumbers(t.label)&&a11yHint(`A differing Aria-Label (${t.label}) is not accessible. A differing Aria-Label should consist of at least three readable characters.`),!Array.isArray(t.options)||void 0===t.options.find((t=>!1===validateInputSelectOptions(t)));if("number"==typeof t.label)return!0}return!1},validateOptions=(t,e,o={})=>{watchJsonArrayString(t,"_options",(t=>"object"==typeof t&&null!==t&&"string"==typeof t.label&&t.label.length>0),e,void 0,o)},validateOptionsWithOptgroup=(t,e,o={})=>{watchJsonArrayString(t,"_options",validateInputSelectOptions,e,void 0,o)},validateRequired=(t,e)=>{watchBoolean(t,"_required",e)},orientationOptions=["horizontal","vertical"],fillKeyOptionMap=(t,e,o="")=>{e.forEach(((e,a)=>{const i=`${o}-${a}`;"object"==typeof e&&null!==e&&"string"==typeof e.label&&e.label.length>0&&(Array.isArray(e.options)?fillKeyOptionMap(t,e.options,i):t.set(i,e))}))};class InputCheckboxRadioController extends InputController{constructor(t,e,o){super(t,e,o),this.component=t}validateRequired(t){validateRequired(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateRequired(this.component._required)}}class InputRadioController extends InputCheckboxRadioController{constructor(t,e,o){super(t,e,o),this.keyOptionMap=new Map,this.getOptionByKey=t=>this.keyOptionMap.get(t),this.afterPatchOptions=(t,e,o,a)=>{"_value"===a&&this.setFormAssociatedValue(t)},this.beforePatchOptions=(t,e)=>{const o=e.has("_options")?e.get("_options"):this.component.state._options;Array.isArray(o)&&o.length>0&&(this.keyOptionMap.clear(),fillKeyOptionMap(this.keyOptionMap,o))},this.component=t}validateOrientation(t){watchValidator(this.component,"_orientation",(t=>"string"==typeof t&&orientationOptions.includes(t)),new Set([`Orientation {${orientationOptions.join(", ")}`]),t,{defaultValue:"vertical"})}validateOptions(t){validateOptions(this.component,t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateValue(t){t=mapString2Unknown(t),t=Array.isArray(t)?t[0]:t,setState(this.component,"_value",t,{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions})}componentWillLoad(){super.componentWillLoad(),this.validateOrientation(this.component._orientation),this.validateOptions(this.component._options),this.validateValue(this.component._value)}}export{InputCheckboxRadioController as I,InputRadioController as a,validateOptions as b,fillKeyOptionMap as f,validateOptionsWithOptgroup as v};

package/dist/components/controller5.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{w as watchValidator,v as watchNumber,e as watchString,c as watchBoolean}from"./prop.validators.js";import{I as InputIconController}from"./controller-icon.js";import{v as validateHasCounter}from"./has-counter.js";const PasswordVariantPropTypeOptions=["default","visibility-toggle"],validatePasswordVariant=(t,a)=>{watchValidator(t,"_variant",(t=>"string"==typeof t&&PasswordVariantPropTypeOptions.includes(t)),new Set(PasswordVariantPropTypeOptions),a)};class InputPasswordController extends InputIconController{constructor(t,a,e){super(t,a,e),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=t}validateAutoComplete(t){watchValidator(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateHasCounter(t){validateHasCounter(this.component,t,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateVariant(t){validatePasswordVariant(this.component,t)}validateMaxLength(t){watchNumber(this.component,"_maxLength",t,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePattern(t){watchString(this.component,"_pattern",t)}validatePlaceholder(t){watchString(this.component,"_placeholder",t)}validateReadOnly(t){watchBoolean(this.component,"_readOnly",t)}validateRequired(t){watchBoolean(this.component,"_required",t)}validateValue(t){watchString(this.component,"_value",t,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePattern(this.component._pattern),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validateVariant(this.component._variant)}}export{InputPasswordController as I};
+import{w as watchValidator,x as watchNumber,e as watchString,c as watchBoolean}from"./prop.validators.js";import{I as InputIconController}from"./controller-icon.js";import{v as validateHasCounter}from"./has-counter.js";const PasswordVariantPropTypeOptions=["default","visibility-toggle"],validatePasswordVariant=(t,a)=>{watchValidator(t,"_variant",(t=>"string"==typeof t&&PasswordVariantPropTypeOptions.includes(t)),new Set(PasswordVariantPropTypeOptions),a)};class InputPasswordController extends InputIconController{constructor(t,a,e){super(t,a,e),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=t}validateAutoComplete(t){watchValidator(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateHasCounter(t){validateHasCounter(this.component,t,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateVariant(t){validatePasswordVariant(this.component,t)}validateMaxLength(t){watchNumber(this.component,"_maxLength",t,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePattern(t){watchString(this.component,"_pattern",t)}validatePlaceholder(t){watchString(this.component,"_placeholder",t)}validateReadOnly(t){watchBoolean(this.component,"_readOnly",t)}validateRequired(t){watchBoolean(this.component,"_required",t)}validateValue(t){watchString(this.component,"_value",t,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePattern(this.component._pattern),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validateVariant(this.component._variant)}}export{InputPasswordController as I};

package/dist/components/devtools.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{i as initKoliBri,r as renderDevAdvice}from"./dev.utils2.js";import{e as getDevMode,g as getDocument,L as Log,a as getExperimentalMode,f as getColorContrastAnalysis,d as getWindow}from"./dev.utils.js";import{C as koliBriA11yColorContrast,A as koliBriQuerySelector,D as koliBriQuerySelectorAll,E as koliBriQuerySelectorColors,F as KoliBriUtils,p as parseJson,G as stringifyJson}from"./prop.validators.js";const getKoliBri=()=>{let e=getWindow().KoliBri;return void 0===e&&(e={},Object.defineProperty(getWindow(),"KoliBri",{value:e,writable:!1})),e};function prototypeKoliBri(e,t){try{Object.defineProperty(getKoliBri(),e,{get:function(){return t}})}catch(t){Log.debug(`KoliBri property ${e} is already bind.`)}}const metaModeLog=(e,t)=>Log.debug(`${e} ${t?"":"not "}activated`),initialize=()=>{if(initKoliBri(),getDevMode()){renderDevAdvice(),prototypeKoliBri("a11yColorContrast",koliBriA11yColorContrast),prototypeKoliBri("querySelector",koliBriQuerySelector),prototypeKoliBri("querySelectorAll",koliBriQuerySelectorAll),prototypeKoliBri("querySelectorColors",koliBriQuerySelectorColors),prototypeKoliBri("utils",(function(){return KoliBriUtils})),prototypeKoliBri("parseJson",parseJson),prototypeKoliBri("stringifyJson",stringifyJson);const e=getDocument().body,t=getDocument().createElement("svg");if(t.setAttribute("aria-label","KoliBri-DevTools"),t.setAttribute("xmlns","http://www.w3.org/2000/svg"),t.setAttribute("role","toolbar"),t.setAttribute("style","position: fixed;color: black;font-size: 200%;bottom: 0.25rem;right: 0.25rem;"),t.innerHTML='<svg\n  xmlns="http://www.w3.org/2000/svg"\n  width="50"\n  height="50"\n  viewBox="0 0 600 600"\n>\n  <path d="M353 322L213 304V434L353 322Z" fill="#047" />\n  <path d="M209 564V304L149 434L209 564Z" fill="#047" />\n  <path d="M357 316L417 250L361 210L275 244L357 316Z" fill="#047" />\n  <path d="M353 318L35 36L213 300L353 318Z" fill="#047" />\n  <path d="M329 218L237 92L250 222L272 241L329 218Z" fill="#047" />\n  <path d="M391 286L565 272L421 252L391 286Z" fill="#047" />\n</svg>',getDocument().body.appendChild(t),metaModeLog("Development mode",getDevMode()),metaModeLog("Experimental mode",getExperimentalMode()),metaModeLog("Color contrast analysis",getColorContrastAnalysis()),getColorContrastAnalysis()){const t=setTimeout((()=>{clearTimeout(t),setInterval((()=>{KoliBriUtils.queryHtmlElementColors(getDocument().createElement("div"),koliBriA11yColorContrast(e),!1,!1)}),1e4)}),2500)}}};export{initialize};
+import{i as initKoliBri,r as renderDevAdvice}from"./dev.utils2.js";import{e as getDevMode,g as getDocument,L as Log,a as getExperimentalMode,f as getColorContrastAnalysis,d as getWindow}from"./dev.utils.js";import{C as koliBriA11yColorContrast,B as koliBriQuerySelector,D as koliBriQuerySelectorAll,E as koliBriQuerySelectorColors,G as KoliBriUtils,p as parseJson,H as stringifyJson}from"./prop.validators.js";const getKoliBri=()=>{let e=getWindow().KoliBri;return void 0===e&&(e={},Object.defineProperty(getWindow(),"KoliBri",{value:e,writable:!1})),e};function prototypeKoliBri(e,t){try{Object.defineProperty(getKoliBri(),e,{get:function(){return t}})}catch(t){Log.debug(`KoliBri property ${e} is already bind.`)}}const metaModeLog=(e,t)=>Log.debug(`${e} ${t?"":"not "}activated`),initialize=()=>{if(initKoliBri(),getDevMode()){renderDevAdvice(),prototypeKoliBri("a11yColorContrast",koliBriA11yColorContrast),prototypeKoliBri("querySelector",koliBriQuerySelector),prototypeKoliBri("querySelectorAll",koliBriQuerySelectorAll),prototypeKoliBri("querySelectorColors",koliBriQuerySelectorColors),prototypeKoliBri("utils",(function(){return KoliBriUtils})),prototypeKoliBri("parseJson",parseJson),prototypeKoliBri("stringifyJson",stringifyJson);const e=getDocument().body,t=getDocument().createElement("svg");if(t.setAttribute("aria-label","KoliBri-DevTools"),t.setAttribute("xmlns","http://www.w3.org/2000/svg"),t.setAttribute("role","toolbar"),t.setAttribute("style","position: fixed;color: black;font-size: 200%;bottom: 0.25rem;right: 0.25rem;"),t.innerHTML='<svg\n  xmlns="http://www.w3.org/2000/svg"\n  width="50"\n  height="50"\n  viewBox="0 0 600 600"\n>\n  <path d="M353 322L213 304V434L353 322Z" fill="#047" />\n  <path d="M209 564V304L149 434L209 564Z" fill="#047" />\n  <path d="M357 316L417 250L361 210L275 244L357 316Z" fill="#047" />\n  <path d="M353 318L35 36L213 300L353 318Z" fill="#047" />\n  <path d="M329 218L237 92L250 222L272 241L329 218Z" fill="#047" />\n  <path d="M391 286L565 272L421 252L391 286Z" fill="#047" />\n</svg>',getDocument().body.appendChild(t),metaModeLog("Development mode",getDevMode()),metaModeLog("Experimental mode",getExperimentalMode()),metaModeLog("Color contrast analysis",getColorContrastAnalysis()),getColorContrastAnalysis()){const t=setTimeout((()=>{clearTimeout(t),setInterval((()=>{KoliBriUtils.queryHtmlElementColors(getDocument().createElement("div"),koliBriA11yColorContrast(e),!1,!1)}),1e4)}),2500)}}};export{initialize};

package/dist/components/events2.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{w as watchValidator,z as emptyStringByArrayHandler,o as objectObjectHandler,p as parseJson,s as setState}from"./prop.validators.js";import{b as isObject}from"./common.js";const validateTableCallbacks=(e,o)=>{watchValidator(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["TableCallbacksPropType {Events.onSort, Events.onSelectionChange}"]),o)},validateTableStatefulCallbacks=(e,o)=>{watchValidator(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["TableStatefulCallbacksPropType {Events.onSelectionChange}"]),o)},validateTableData=(e,o,a)=>{emptyStringByArrayHandler(o,(()=>{objectObjectHandler(o,(()=>{void 0===o&&(o=[]);try{o=parseJson(o)}catch(e){}Array.isArray(o)&&o.every((e=>"object"==typeof e&&null!==e))&&setState(e,"_data",o,a)}))}))},validateTableDataFoot=(e,o,a)=>{emptyStringByArrayHandler(o,(()=>{objectObjectHandler(o,(()=>{void 0===o&&(o=[]);try{o=parseJson(o)}catch(e){}Array.isArray(o)&&o.every((e=>"object"==typeof e&&null!==e))&&setState(e,"_dataFoot",o,a)}))}))},validateTableSelection=(e,o)=>{(e=>e&&isObject(e)&&"function"==typeof e.label&&(!e.selectedKeys||Array.isArray(e.selectedKeys)))("string"==typeof o?(()=>{try{return parseJson(o)}catch(e){return}})():o)&&setState(e,"_selection",o)};var Events;!function(e){e.onBlur="onBlur",e.onChange="onChange",e.onClick="onClick",e.onDblClick="onDblClick",e.onFocus="onFocus",e.onInput="onInput",e.onKeyDown="onKeyDown",e.onKeyPress="onKeyPress",e.onKeyUp="onKeyUp",e.onMouseDown="onMouseDown",e.onMouseMove="onMouseMove",e.onMouseOut="onMouseOut",e.onMouseOver="onMouseOver",e.onMouseUp="onMouseUp",e.onReset="onReset",e.onSelect="onSelect",e.onSort="onSort",e.onSelectionChange="onSelectionChange",e.onSubmit="onSubmit",e.onToggle="onToggle",e.onClose="onClose"}(Events||(Events={}));export{Events as E,validateTableDataFoot as a,validateTableSelection as b,validateTableStatefulCallbacks as c,validateTableCallbacks as d,validateTableData as v};
+import{w as watchValidator,A as emptyStringByArrayHandler,o as objectObjectHandler,p as parseJson,s as setState}from"./prop.validators.js";import{b as isObject}from"./common.js";const validateTableCallbacks=(e,o)=>{watchValidator(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["TableCallbacksPropType {Events.onSort, Events.onSelectionChange}"]),o)},validateTableStatefulCallbacks=(e,o)=>{watchValidator(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["TableStatefulCallbacksPropType {Events.onSelectionChange}"]),o)},validateTableData=(e,o,a)=>{emptyStringByArrayHandler(o,(()=>{objectObjectHandler(o,(()=>{void 0===o&&(o=[]);try{o=parseJson(o)}catch(e){}Array.isArray(o)&&o.every((e=>"object"==typeof e&&null!==e))&&setState(e,"_data",o,a)}))}))},validateTableDataFoot=(e,o,a)=>{emptyStringByArrayHandler(o,(()=>{objectObjectHandler(o,(()=>{void 0===o&&(o=[]);try{o=parseJson(o)}catch(e){}Array.isArray(o)&&o.every((e=>"object"==typeof e&&null!==e))&&setState(e,"_dataFoot",o,a)}))}))},validateTableSelection=(e,o)=>{(e=>e&&isObject(e)&&"function"==typeof e.label&&(!e.selectedKeys||Array.isArray(e.selectedKeys)))("string"==typeof o?(()=>{try{return parseJson(o)}catch(e){return}})():o)&&setState(e,"_selection",o)};var Events;!function(e){e.onBlur="onBlur",e.onChange="onChange",e.onClick="onClick",e.onDblClick="onDblClick",e.onFocus="onFocus",e.onInput="onInput",e.onKeyDown="onKeyDown",e.onKeyPress="onKeyPress",e.onKeyUp="onKeyUp",e.onMouseDown="onMouseDown",e.onMouseMove="onMouseMove",e.onMouseOut="onMouseOut",e.onMouseOver="onMouseOver",e.onMouseUp="onMouseUp",e.onReset="onReset",e.onSelect="onSelect",e.onSort="onSort",e.onSelectionChange="onSelectionChange",e.onSubmit="onSubmit",e.onToggle="onToggle",e.onClose="onClose"}(Events||(Events={}));export{Events as E,validateTableDataFoot as a,validateTableSelection as b,validateTableStatefulCallbacks as c,validateTableCallbacks as d,validateTableData as v};

package/dist/components/index.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{n as ne,a as ae,U,B}from"./prop.validators.js";export{K as KoliBriDevHelper}from"./prop.validators.js";import{setMode}from"@stencil/core/internal/client";export{getAssetPath,setAssetPath,setNonce,setPlatformOptions}from"@stencil/core/internal/client";import{L as Log,s as setDevMode}from"./dev.utils.js";export{s as setCurrentLocation}from"./ariaCurrentService.js";import{s as setCustomTagNames,K as KolToastContainerTag}from"./component-names.js";import{i as initializeI18n}from"./i18n.js";export{c as BUNDESAEMTER,e as BUNDESANSTALTEN,a as BUNDESMINISTERIEN,f as BUND_LOGO_TEXT_MAP,b as Bundesamt,d as Bundesanstalt,B as Bundesministerium}from"./bund.js";var KeyEnum,TagEnum;!function(t){t[t.error=0]="error",t[t.warning=1]="warning",t[t.info=2]="info",t[t.success=3]="success",t[t.message=4]="message",t[t.close=5]="close",t[t["form-description"]=6]="form-description",t[t.of=7]="of",t[t.characters=8]="characters",t[t.new=9]="new",t[t["no-entries"]=10]="no-entries",t[t["change-order"]=11]="change-order",t[t["action-running"]=12]="action-running",t[t["action-done"]=13]="action-done",t[t["page-first"]=14]="page-first",t[t["page-back"]=15]="page-back",t[t["page-next"]=16]="page-next",t[t["page-last"]=17]="page-last",t[t["entries-per-site"]=18]="entries-per-site",t[t["page-current"]=19]="page-current",t[t["page-selected"]=20]="page-selected",t[t["page-per-site"]=21]="page-per-site",t[t["logo-description"]=22]="logo-description",t[t["open-link-in-tab"]=23]="open-link-in-tab",t[t["kolibri-logo"]=24]="kolibri-logo"}(KeyEnum||(KeyEnum={})),function(t){t[t.abbr=0]="abbr",t[t.accordion=1]="accordion",t[t["accordion-group"]=2]="accordion-group",t[t.alert=3]="alert",t[t.avatar=4]="avatar",t[t.badge=5]="badge",t[t.breadcrumb=6]="breadcrumb",t[t.button=7]="button",t[t["button-group"]=8]="button-group",t[t["button-link"]=9]="button-link",t[t.card=10]="card",t[t.combobox=11]="combobox",t[t.details=12]="details",t[t.drawer=13]="drawer",t[t.form=14]="form",t[t.heading=15]="heading",t[t.icon=16]="icon",t[t.image=17]="image",t[t["indented-text"]=18]="indented-text",t[t["input-checkbox"]=19]="input-checkbox",t[t["input-color"]=20]="input-color",t[t["input-date"]=21]="input-date",t[t["input-email"]=22]="input-email",t[t["input-file"]=23]="input-file",t[t["input-number"]=24]="input-number",t[t["input-password"]=25]="input-password",t[t["input-radio"]=26]="input-radio",t[t["input-range"]=27]="input-range",t[t["input-text"]=28]="input-text",t[t.kolibri=29]="kolibri",t[t.link=30]="link",t[t["link-button"]=31]="link-button",t[t["link-group"]=32]="link-group",t[t.logo=33]="logo",t[t.modal=34]="modal",t[t.nav=35]="nav",t[t.pagination=36]="pagination",t[t.progress=37]="progress",t[t.select=38]="select",t[t.separator=39]="separator",t[t["skip-nav"]=40]="skip-nav",t[t.spin=41]="spin",t[t["single-select"]=42]="single-select",t[t["split-button"]=43]="split-button",t[t.symbol=44]="symbol",t[t.table=45]="table",t[t["table-stateless"]=46]="table-stateless",t[t["table-stateful"]=47]="table-stateful",t[t.tabs=48]="tabs",t[t.textarea=49]="textarea",t[t["toast-container"]=50]="toast-container",t[t.toolbar=51]="toolbar",t[t.tooltip=52]="tooltip",t[t.tree=53]="tree",t[t["tree-item"]=54]="tree-item"}(TagEnum||(TagEnum={}));const KoliBri=new ne("kol",KeyEnum,TagEnum);setMode((t=>{try{t.shadowRoot instanceof ShadowRoot&&ae(t,U(t))}catch(t){}return"default"})),import("./devtools.js").then((t=>{"object"==typeof t&&null!==t&&"function"==typeof t.initialize&&t.initialize()})).catch((t=>{Log.error(t)}));const globalFn=()=>{},appGlobalScript=globalFn,globalScripts=appGlobalScript;let initialized=!1;const bootstrap=async(t,e,o)=>{var n,i;setDevMode("development"===(null==o?void 0:o.environment)),initializeI18n(null!==(i=null===(n=null==o?void 0:o.translation)||void 0===n?void 0:n.name)&&void 0!==i?i:"de",null==o?void 0:o.translations),(null==o?void 0:o.transformTagName)&&setCustomTagNames(null==o?void 0:o.transformTagName);const a=await B(t,e,o);return initialized=!0,a},register=bootstrap,isInitialized=()=>initialized;class ToasterService{constructor(t,e){this.document=t,this.options=e,this.toastContainerElement=this.document.createElement(KolToastContainerTag),this.document.body.prepend(this.toastContainerElement)}static getInstance(t,e){if(!isInitialized())throw new Error("Toaster: Call KoliBri bootstrap/register method first.");let o=this.instances.get(t);return o||(o=new ToasterService(t,e),this.instances.set(t,o)),o}dispose(){const t=this.toastContainerElement;t?(this.toastContainerElement=void 0,t.remove()):Log.warn("Toaster service is already disposed.",{forceLog:!0})}enqueue(t){var e,o,n,i;if(this.toastContainerElement&&"function"==typeof this.toastContainerElement.enqueue){const a=null!==(o=null===(e=this.options)||void 0===e?void 0:e.defaultVariant)&&void 0!==o?o:void 0,r=null!==(i=null===(n=this.options)||void 0===n?void 0:n.defaultAlertVariant)&&void 0!==i?i:void 0;return t.alertVariant||t.variant||!this.options||(t.variant=null!=r?r:a),this.toastContainerElement.enqueue(t)}}closeAll(t=!1){this.toastContainerElement&&"function"==typeof this.toastContainerElement.closeAll&&this.toastContainerElement.closeAll(t)}}ToasterService.instances=new Map,globalScripts();export{KoliBri,ToasterService,bootstrap,isInitialized,register};
+import{r as re,n as ne,b,F}from"./prop.validators.js";export{K as KoliBriDevHelper}from"./prop.validators.js";import{setMode}from"@stencil/core/internal/client";export{getAssetPath,setAssetPath,setNonce,setPlatformOptions}from"@stencil/core/internal/client";import{L as Log,s as setDevMode}from"./dev.utils.js";export{s as setCurrentLocation}from"./ariaCurrentService.js";import{s as setCustomTagNames,K as KolToastContainerTag}from"./component-names.js";import{i as initializeI18n}from"./i18n.js";export{c as BUNDESAEMTER,e as BUNDESANSTALTEN,a as BUNDESMINISTERIEN,f as BUND_LOGO_TEXT_MAP,b as Bundesamt,d as Bundesanstalt,B as Bundesministerium}from"./bund.js";var KeyEnum,TagEnum;!function(t){t[t.error=0]="error",t[t.warning=1]="warning",t[t.info=2]="info",t[t.success=3]="success",t[t.message=4]="message",t[t.close=5]="close",t[t["form-description"]=6]="form-description",t[t.of=7]="of",t[t.characters=8]="characters",t[t.new=9]="new",t[t["no-entries"]=10]="no-entries",t[t["change-order"]=11]="change-order",t[t["action-running"]=12]="action-running",t[t["action-done"]=13]="action-done",t[t["page-first"]=14]="page-first",t[t["page-back"]=15]="page-back",t[t["page-next"]=16]="page-next",t[t["page-last"]=17]="page-last",t[t["entries-per-site"]=18]="entries-per-site",t[t["page-current"]=19]="page-current",t[t["page-selected"]=20]="page-selected",t[t["page-per-site"]=21]="page-per-site",t[t["logo-description"]=22]="logo-description",t[t["open-link-in-tab"]=23]="open-link-in-tab",t[t["kolibri-logo"]=24]="kolibri-logo"}(KeyEnum||(KeyEnum={})),function(t){t[t.abbr=0]="abbr",t[t.accordion=1]="accordion",t[t["accordion-group"]=2]="accordion-group",t[t.alert=3]="alert",t[t.avatar=4]="avatar",t[t.badge=5]="badge",t[t.breadcrumb=6]="breadcrumb",t[t.button=7]="button",t[t["button-group"]=8]="button-group",t[t["button-link"]=9]="button-link",t[t.card=10]="card",t[t.combobox=11]="combobox",t[t.details=12]="details",t[t.drawer=13]="drawer",t[t.form=14]="form",t[t.heading=15]="heading",t[t.icon=16]="icon",t[t.image=17]="image",t[t["indented-text"]=18]="indented-text",t[t["input-checkbox"]=19]="input-checkbox",t[t["input-color"]=20]="input-color",t[t["input-date"]=21]="input-date",t[t["input-email"]=22]="input-email",t[t["input-file"]=23]="input-file",t[t["input-number"]=24]="input-number",t[t["input-password"]=25]="input-password",t[t["input-radio"]=26]="input-radio",t[t["input-range"]=27]="input-range",t[t["input-text"]=28]="input-text",t[t.kolibri=29]="kolibri",t[t.link=30]="link",t[t["link-button"]=31]="link-button",t[t["link-group"]=32]="link-group",t[t.logo=33]="logo",t[t.modal=34]="modal",t[t.nav=35]="nav",t[t.pagination=36]="pagination",t[t.progress=37]="progress",t[t.select=38]="select",t[t.separator=39]="separator",t[t["skip-nav"]=40]="skip-nav",t[t.spin=41]="spin",t[t["single-select"]=42]="single-select",t[t["split-button"]=43]="split-button",t[t.symbol=44]="symbol",t[t.table=45]="table",t[t["table-stateless"]=46]="table-stateless",t[t["table-stateful"]=47]="table-stateful",t[t.tabs=48]="tabs",t[t.textarea=49]="textarea",t[t["toast-container"]=50]="toast-container",t[t.toolbar=51]="toolbar",t[t.tooltip=52]="tooltip",t[t.tree=53]="tree",t[t["tree-item"]=54]="tree-item"}(TagEnum||(TagEnum={}));const KoliBri=new re("kol",KeyEnum,TagEnum);setMode((t=>{try{t.shadowRoot instanceof ShadowRoot&&ne(t,b(t))}catch(t){}return"default"})),import("./devtools.js").then((t=>{"object"==typeof t&&null!==t&&"function"==typeof t.initialize&&t.initialize()})).catch((t=>{Log.error(t)}));const globalFn=()=>{},appGlobalScript=globalFn,globalScripts=appGlobalScript;let initialized=!1;const bootstrap=async(t,e,o)=>{var n,i;setDevMode("development"===(null==o?void 0:o.environment)),initializeI18n(null!==(i=null===(n=null==o?void 0:o.translation)||void 0===n?void 0:n.name)&&void 0!==i?i:"de",null==o?void 0:o.translations),(null==o?void 0:o.transformTagName)&&setCustomTagNames(null==o?void 0:o.transformTagName);const a=await F(t,e,o);return initialized=!0,a},register=bootstrap,isInitialized=()=>initialized;class ToasterService{constructor(t,e){this.document=t,this.options=e,this.toastContainerElement=this.document.createElement(KolToastContainerTag),this.document.body.prepend(this.toastContainerElement)}static getInstance(t,e){if(!isInitialized())throw new Error("Toaster: Call KoliBri bootstrap/register method first.");let o=this.instances.get(t);return o||(o=new ToasterService(t,e),this.instances.set(t,o)),o}dispose(){const t=this.toastContainerElement;t?(this.toastContainerElement=void 0,t.remove()):Log.warn("Toaster service is already disposed.",{forceLog:!0})}enqueue(t){var e,o,n,i;if(this.toastContainerElement&&"function"==typeof this.toastContainerElement.enqueue){const a=null!==(o=null===(e=this.options)||void 0===e?void 0:e.defaultVariant)&&void 0!==o?o:void 0,r=null!==(i=null===(n=this.options)||void 0===n?void 0:n.defaultAlertVariant)&&void 0!==i?i:void 0;return t.alertVariant||t.variant||!this.options||(t.variant=null!=r?r:a),this.toastContainerElement.enqueue(t)}}closeAll(t=!1){this.toastContainerElement&&"function"==typeof this.toastContainerElement.closeAll&&this.toastContainerElement.closeAll(t)}}ToasterService.instances=new Map,globalScripts();export{KoliBri,ToasterService,bootstrap,isInitialized,register};

package/dist/components/kol-breadcrumb.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Fragment,Host}from"@stencil/core/internal/client";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{w as watchNavLinks}from"./validation2.js";import{e as KolIconTag,h as KolLinkTag}from"./component-names.js";import{h as a11yHintLabelingLandmarks}from"./prop.validators.js";import{v as validateLabel}from"./label.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  li,\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: flex;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    place-items: center;\n  }\n  .kol-icon::part(separator) {\n    font-weight: 900;\n    font-size: 0.7em;\n  }\n  .kol-icon::part(separator):before {\n    content: \"\\f054\";\n    font-family: \"Font Awesome 6 Free\";\n  }\n}",KolBreadcrumbDefaultStyle0=defaultStyleCss,KolBreadcrumb$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.renderLink=(n,e)=>{const t=this.state._links.length-1;return h("li",{key:e},0!==e&&h(KolIconTag,{_label:"",_icons:"codicon codicon-chevron-right"}),e===t?h("span",null,n._hideLabel?h(KolIconTag,{_label:n._label,_icons:"string"==typeof n._icons?n._icons:"codicon codicon-symbol-event"}):h(Fragment,null,n._label)):h(KolLinkTag,Object.assign({},n)))},this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return h(Host,{key:"329c1062de3097aac33fd6ddbafd65f4df37a375",class:"kol-breadcrumb"},h("nav",{key:"dfd7dc319fdac349fd221ce266364c8e3bc6d7ab","aria-label":this.state._label},h("ul",{key:"4503b6418e33303a4763de3d1f97a5279d4fae37"},0===this.state._links.length&&h("li",{key:"6f0cddb0ad668f37c302b85f783a4a427608cf71"},h(KolIconTag,{key:"9672fa3ed1ad96eef3e98b53d89840fbb121de40",_label:"",_icons:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink))))}validateLabel(n,e,t=!1){t||removeNavLabel(this.state._label),validateLabel(this,n,{required:!0}),a11yHintLabelingLandmarks(n),addNavLabel(this.state._label)}validateLinks(n){watchNavLinks("KolBreadcrumb",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}static get style(){return{default:KolBreadcrumbDefaultStyle0}}},[33,"kol-breadcrumb",{_label:[1],_links:[1],state:[32]},void 0,{_label:["validateLabel"],_links:["validateLinks"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-breadcrumb"].forEach((n=>{if("kol-breadcrumb"===n)customElements.get(n)||customElements.define(n,KolBreadcrumb$1)}))}const KolBreadcrumb=KolBreadcrumb$1,defineCustomElement=defineCustomElement$1;export{KolBreadcrumb,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Fragment,Host}from"@stencil/core/internal/client";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{w as watchNavLinks}from"./validation2.js";import{e as KolIconTag,h as KolLinkTag}from"./component-names.js";import{i as a11yHintLabelingLandmarks}from"./prop.validators.js";import{v as validateLabel}from"./label.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  li,\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: flex;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    place-items: center;\n  }\n  .kol-icon::part(separator) {\n    font-weight: 900;\n    font-size: 0.7em;\n  }\n  .kol-icon::part(separator):before {\n    content: \"\\f054\";\n    font-family: \"Font Awesome 6 Free\";\n  }\n}",KolBreadcrumbDefaultStyle0=defaultStyleCss,KolBreadcrumb$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.renderLink=(n,e)=>{const t=this.state._links.length-1;return h("li",{key:e},0!==e&&h(KolIconTag,{_label:"",_icons:"codicon codicon-chevron-right"}),e===t?h("span",null,n._hideLabel?h(KolIconTag,{_label:n._label,_icons:"string"==typeof n._icons?n._icons:"codicon codicon-symbol-event"}):h(Fragment,null,n._label)):h(KolLinkTag,Object.assign({},n)))},this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return h(Host,{key:"329c1062de3097aac33fd6ddbafd65f4df37a375",class:"kol-breadcrumb"},h("nav",{key:"dfd7dc319fdac349fd221ce266364c8e3bc6d7ab","aria-label":this.state._label},h("ul",{key:"4503b6418e33303a4763de3d1f97a5279d4fae37"},0===this.state._links.length&&h("li",{key:"6f0cddb0ad668f37c302b85f783a4a427608cf71"},h(KolIconTag,{key:"9672fa3ed1ad96eef3e98b53d89840fbb121de40",_label:"",_icons:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink))))}validateLabel(n,e,t=!1){t||removeNavLabel(this.state._label),validateLabel(this,n,{required:!0}),a11yHintLabelingLandmarks(n),addNavLabel(this.state._label)}validateLinks(n){watchNavLinks("KolBreadcrumb",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}static get style(){return{default:KolBreadcrumbDefaultStyle0}}},[33,"kol-breadcrumb",{_label:[1],_links:[1],state:[32]},void 0,{_label:["validateLabel"],_links:["validateLinks"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-breadcrumb"].forEach((n=>{if("kol-breadcrumb"===n)customElements.get(n)||customElements.define(n,KolBreadcrumb$1)}))}const KolBreadcrumb=KolBreadcrumb$1,defineCustomElement=defineCustomElement$1;export{KolBreadcrumb,defineCustomElement};

package/dist/components/kol-button-wc.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{s as stopPropagation,t as tryToDispatchKoliBriEvent}from"./events.js";import{n as nonce}from"./dev.utils2.js";import{p as propagateSubmitEventToForm,a as propagateResetEventToForm}from"./controller.js";import{A as AssociatedInputController}from"./associated.controller.js";import{g as KolSpanWcTag,a as KolTooltipWcTag}from"./component-names.js";import{v as validateAccessKey,a as validateAccessAndShortKey,b as validateShortKey,c as validateTabIndex}from"./access-and-short-key.js";import{s as showExpertSlot}from"./reuse.js";import{e as watchString,c as watchBoolean,w as watchValidator,m as mapBoolean2String,k as mapStringOrBoolean2String,l as setEventTarget,s as setState}from"./prop.validators.js";import{v as validateAriaDescription,a as validateAriaExpanded,b as validateAlternativeButtonLinkRole}from"./aria-expanded.js";import{v as validateCustomClass}from"./custom-class.js";import{v as validateHideLabel}from"./hide-label.js";import{v as validateIcons}from"./icons.js";import{a as validateLabelWithExpertSlot}from"./label.js";import{v as validateDisabled}from"./disabled.js";import{v as validateTooltipAlign}from"./tooltip-align.js";const validateAriaControls=(t,a)=>{watchString(t,"_ariaControls",a)},validateAriaSelected=(t,a)=>{watchBoolean(t,"_ariaSelected",a)},validateButtonCallbacks=(t,a)=>{watchValidator(t,"_on",(t=>"object"==typeof t&&null!==t),new Set(["ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}"]),a)},buttonTypePropTypeOptions=["button","reset","submit"],validateButtonType=(t,a)=>{watchValidator(t,"_type",(t=>"string"==typeof t&&buttonTypePropTypeOptions.includes(t)),new Set([`KoliBriButtonType {${buttonTypePropTypeOptions.join(", ")}`]),a)},buttonVariantPropTypeOptions=["primary","secondary","normal","tertiary","danger","ghost","custom"],validateButtonVariant=(t,a)=>{watchValidator(t,"_variant",(t=>"string"==typeof t&&buttonVariantPropTypeOptions.includes(t)),new Set([`KoliBriButtonVariant {${buttonVariantPropTypeOptions.join(", ")}`]),a,{defaultValue:"normal"})},KolButtonWc$1=proxyCustomElement(class extends HTMLElement{async kolFocus(){var t;null===(t=this.buttonRef)||void 0===t||t.focus()}render(){var t,a;const e=showExpertSlot(this.state._label),i=Boolean(null===(a=null===(t=this.state._ariaDescription)||void 0===t?void 0:t.trim())||void 0===a?void 0:a.length);return h(Host,{key:"9d8a831c6f95bc452f5ceddda5e168a2de5862a3",class:"kol-button-wc"},h("button",Object.assign({key:"1436c11eee99b9923302fdf86d4abf9c0f4b39e2",ref:this.catchRef,accessKey:this.state._accessKey||void 0,"aria-controls":this.state._ariaControls,"aria-describedby":i?this.internalDescriptionById:void 0,"aria-expanded":mapBoolean2String(this.state._ariaExpanded),"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-selected":mapStringOrBoolean2String(this.state._ariaSelected),class:{button:!0,disabled:!0===this.state._disabled,[this.state._variant]:"custom"!==this.state._variant,[this.state._customClass]:"custom"===this.state._variant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0,"hide-label":!0===this.state._hideLabel},disabled:this.state._disabled,id:this.state._id,name:this.state._name},this.state._on,{onClick:this.onClick,role:this.state._role,tabIndex:this.state._tabIndex,type:this.state._type}),h(KolSpanWcTag,{key:"047f6574dafad1dd92fa799525b715197aa14de5",class:"button-inner",_badgeText:this.state._accessKey||this.state._shortKey,_icons:this.state._icons,_hideLabel:this.state._hideLabel,_label:e?"":this.state._label},h("slot",{key:"35b611de58e07a4d56684b2e4250caeecff6e035",name:"expert",slot:"expert"}))),h(KolTooltipWcTag,{key:"306f942255a1441f13fc8f165dcfe6b71e975987","aria-hidden":"true",hidden:e||!this.state._hideLabel,_badgeText:this.state._accessKey||this.state._shortKey,_align:this.state._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}),i&&h("span",{key:"069370fc301bcfcc7e19bb839555717b996ddd3f",class:"visually-hidden",id:this.internalDescriptionById},this.state._ariaDescription))}constructor(){super(),this.__registerHost(),this.internalDescriptionById=nonce(),this.catchRef=t=>{this.buttonRef=t},this.onClick=t=>{var a,e;"submit"===this.state._type?propagateSubmitEventToForm({form:this.host,ref:this.buttonRef}):"reset"===this.state._type?propagateResetEventToForm({form:this.host,ref:this.buttonRef}):(stopPropagation(t),tryToDispatchKoliBriEvent("click",this.host,this.state._value),this.controller.setFormAssociatedValue(this.state._value),"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)&&(setEventTarget(t,this.buttonRef),null===(e=this.state._on)||void 0===e||e.onClick(t,this.state._value)))},this._accessKey=void 0,this._ariaControls=void 0,this._ariaDescription=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_icons:{},_label:"",_on:{},_type:"button",_variant:"normal"},this.controller=new AssociatedInputController(this,"button",this.host)}validateAccessKey(t){validateAccessKey(this,t),validateAccessAndShortKey(t,this._shortKey)}validateAriaControls(t){validateAriaControls(this,t)}validateAriaDescription(t){validateAriaDescription(this,t)}validateAriaExpanded(t){validateAriaExpanded(this,t)}validateAriaSelected(t){validateAriaSelected(this,t)}validateCustomClass(t){validateCustomClass(this,t)}validateDisabled(t){validateDisabled(this,t)}validateHideLabel(t){validateHideLabel(this,t)}validateIcons(t){validateIcons(this,t)}validateId(t){watchString(this,"_id",t)}validateLabel(t){validateLabelWithExpertSlot(this,t,{required:!0})}validateName(t){this.controller.validateName(t)}validateOn(t){validateButtonCallbacks(this,t)}validateRole(t){validateAlternativeButtonLinkRole(this,t)}validateShortKey(t){validateShortKey(this,t),validateAccessAndShortKey(this._accessKey,t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){validateTabIndex(this,t)}validateTooltipAlign(t){validateTooltipAlign(this,t)}validateType(t){validateButtonType(this,t)}validateValue(t){setState(this,"_value",t),this.controller.setFormAssociatedValue(this.state._value)}validateVariant(t){validateButtonVariant(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaDescription(this._ariaDescription),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateHideLabel(this._hideLabel),this.validateIcons(this._icons),this.validateId(this._id),this.validateLabel(this._label),this.validateName(this._name),this.validateOn(this._on),this.validateRole(this._role),this.validateShortKey(this._shortKey),this.validateSyncValueBySelector(this._syncValueBySelector),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant),validateAccessAndShortKey(this._accessKey,this._shortKey)}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}},[4,"kol-button-wc",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaDescription:[1,"_aria-description"],_ariaExpanded:[4,"_aria-expanded"],_ariaSelected:[4,"_aria-selected"],_customClass:[1,"_custom-class"],_disabled:[4],_hideLabel:[4,"_hide-label"],_icons:[1],_id:[1],_label:[1],_name:[1],_on:[16],_role:[1],_shortKey:[1,"_short-key"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[8],_variant:[1],state:[32],kolFocus:[64]},void 0,{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-button-wc"].forEach((t=>{if("kol-button-wc"===t)customElements.get(t)||customElements.define(t,KolButtonWc$1)}))}const KolButtonWc=KolButtonWc$1,defineCustomElement=defineCustomElement$1;export{KolButtonWc,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{s as stopPropagation,t as tryToDispatchKoliBriEvent}from"./events.js";import{n as nonce}from"./dev.utils2.js";import{p as propagateSubmitEventToForm,a as propagateResetEventToForm}from"./controller.js";import{A as AssociatedInputController}from"./associated.controller.js";import{g as KolSpanWcTag,a as KolTooltipWcTag}from"./component-names.js";import{v as validateAccessKey,a as validateAccessAndShortKey,b as validateShortKey,c as validateTabIndex}from"./access-and-short-key.js";import{s as showExpertSlot}from"./reuse.js";import{e as watchString,c as watchBoolean,w as watchValidator,m as mapBoolean2String,l as mapStringOrBoolean2String,q as setEventTarget,s as setState}from"./prop.validators.js";import{v as validateAriaDescription,a as validateAriaExpanded,b as validateAlternativeButtonLinkRole}from"./aria-expanded.js";import{v as validateCustomClass}from"./custom-class.js";import{v as validateHideLabel}from"./hide-label.js";import{v as validateIcons}from"./icons.js";import{a as validateLabelWithExpertSlot}from"./label.js";import{v as validateDisabled}from"./disabled.js";import{v as validateTooltipAlign}from"./tooltip-align.js";const validateAriaControls=(t,a)=>{watchString(t,"_ariaControls",a)},validateAriaSelected=(t,a)=>{watchBoolean(t,"_ariaSelected",a)},validateButtonCallbacks=(t,a)=>{watchValidator(t,"_on",(t=>"object"==typeof t&&null!==t),new Set(["ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}"]),a)},buttonTypePropTypeOptions=["button","reset","submit"],validateButtonType=(t,a)=>{watchValidator(t,"_type",(t=>"string"==typeof t&&buttonTypePropTypeOptions.includes(t)),new Set([`KoliBriButtonType {${buttonTypePropTypeOptions.join(", ")}`]),a)},buttonVariantPropTypeOptions=["primary","secondary","normal","tertiary","danger","ghost","custom"],validateButtonVariant=(t,a)=>{watchValidator(t,"_variant",(t=>"string"==typeof t&&buttonVariantPropTypeOptions.includes(t)),new Set([`KoliBriButtonVariant {${buttonVariantPropTypeOptions.join(", ")}`]),a,{defaultValue:"normal"})},KolButtonWc$1=proxyCustomElement(class extends HTMLElement{async kolFocus(){var t;null===(t=this.buttonRef)||void 0===t||t.focus()}render(){var t,a;const e=showExpertSlot(this.state._label),i=Boolean(null===(a=null===(t=this.state._ariaDescription)||void 0===t?void 0:t.trim())||void 0===a?void 0:a.length);return h(Host,{key:"9d8a831c6f95bc452f5ceddda5e168a2de5862a3",class:"kol-button-wc"},h("button",Object.assign({key:"1436c11eee99b9923302fdf86d4abf9c0f4b39e2",ref:this.catchRef,accessKey:this.state._accessKey||void 0,"aria-controls":this.state._ariaControls,"aria-describedby":i?this.internalDescriptionById:void 0,"aria-expanded":mapBoolean2String(this.state._ariaExpanded),"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-selected":mapStringOrBoolean2String(this.state._ariaSelected),class:{button:!0,disabled:!0===this.state._disabled,[this.state._variant]:"custom"!==this.state._variant,[this.state._customClass]:"custom"===this.state._variant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0,"hide-label":!0===this.state._hideLabel},disabled:this.state._disabled,id:this.state._id,name:this.state._name},this.state._on,{onClick:this.onClick,role:this.state._role,tabIndex:this.state._tabIndex,type:this.state._type}),h(KolSpanWcTag,{key:"047f6574dafad1dd92fa799525b715197aa14de5",class:"button-inner",_badgeText:this.state._accessKey||this.state._shortKey,_icons:this.state._icons,_hideLabel:this.state._hideLabel,_label:e?"":this.state._label},h("slot",{key:"35b611de58e07a4d56684b2e4250caeecff6e035",name:"expert",slot:"expert"}))),h(KolTooltipWcTag,{key:"306f942255a1441f13fc8f165dcfe6b71e975987","aria-hidden":"true",hidden:e||!this.state._hideLabel,_badgeText:this.state._accessKey||this.state._shortKey,_align:this.state._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}),i&&h("span",{key:"069370fc301bcfcc7e19bb839555717b996ddd3f",class:"visually-hidden",id:this.internalDescriptionById},this.state._ariaDescription))}constructor(){super(),this.__registerHost(),this.internalDescriptionById=nonce(),this.catchRef=t=>{this.buttonRef=t},this.onClick=t=>{var a,e;"submit"===this.state._type?propagateSubmitEventToForm({form:this.host,ref:this.buttonRef}):"reset"===this.state._type?propagateResetEventToForm({form:this.host,ref:this.buttonRef}):(stopPropagation(t),tryToDispatchKoliBriEvent("click",this.host,this.state._value),this.controller.setFormAssociatedValue(this.state._value),"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)&&(setEventTarget(t,this.buttonRef),null===(e=this.state._on)||void 0===e||e.onClick(t,this.state._value)))},this._accessKey=void 0,this._ariaControls=void 0,this._ariaDescription=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_icons:{},_label:"",_on:{},_type:"button",_variant:"normal"},this.controller=new AssociatedInputController(this,"button",this.host)}validateAccessKey(t){validateAccessKey(this,t),validateAccessAndShortKey(t,this._shortKey)}validateAriaControls(t){validateAriaControls(this,t)}validateAriaDescription(t){validateAriaDescription(this,t)}validateAriaExpanded(t){validateAriaExpanded(this,t)}validateAriaSelected(t){validateAriaSelected(this,t)}validateCustomClass(t){validateCustomClass(this,t)}validateDisabled(t){validateDisabled(this,t)}validateHideLabel(t){validateHideLabel(this,t)}validateIcons(t){validateIcons(this,t)}validateId(t){watchString(this,"_id",t)}validateLabel(t){validateLabelWithExpertSlot(this,t,{required:!0})}validateName(t){this.controller.validateName(t)}validateOn(t){validateButtonCallbacks(this,t)}validateRole(t){validateAlternativeButtonLinkRole(this,t)}validateShortKey(t){validateShortKey(this,t),validateAccessAndShortKey(this._accessKey,t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){validateTabIndex(this,t)}validateTooltipAlign(t){validateTooltipAlign(this,t)}validateType(t){validateButtonType(this,t)}validateValue(t){setState(this,"_value",t),this.controller.setFormAssociatedValue(this.state._value)}validateVariant(t){validateButtonVariant(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaDescription(this._ariaDescription),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateHideLabel(this._hideLabel),this.validateIcons(this._icons),this.validateId(this._id),this.validateLabel(this._label),this.validateName(this._name),this.validateOn(this._on),this.validateRole(this._role),this.validateShortKey(this._shortKey),this.validateSyncValueBySelector(this._syncValueBySelector),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant),validateAccessAndShortKey(this._accessKey,this._shortKey)}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}},[4,"kol-button-wc",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaDescription:[1,"_aria-description"],_ariaExpanded:[4,"_aria-expanded"],_ariaSelected:[4,"_aria-selected"],_customClass:[1,"_custom-class"],_disabled:[4],_hideLabel:[4,"_hide-label"],_icons:[1],_id:[1],_label:[1],_name:[1],_on:[16],_role:[1],_shortKey:[1,"_short-key"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[8],_variant:[1],state:[32],kolFocus:[64]},void 0,{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-button-wc"].forEach((t=>{if("kol-button-wc"===t)customElements.get(t)||customElements.define(t,KolButtonWc$1)}))}const KolButtonWc=KolButtonWc$1,defineCustomElement=defineCustomElement$1;export{KolButtonWc,defineCustomElement};

package/dist/components/kol-input-date.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host,Fragment}from"@stencil/core/internal/client";import{n as nonce}from"./dev.utils2.js";import{p as propagateSubmitEventToForm}from"./controller.js";import{g as getRenderStates}from"./controller2.js";import{I as InternalUnderlinedBadgeText}from"./InternalUnderlinedBadgeText.js";import{I as InputIconController}from"./controller-icon.js";import{c as watchBoolean,w as watchValidator,s as setState,v as watchNumber,y as deprecatedHint}from"./prop.validators.js";import{v as validateSuggestions}from"./suggestions.js";import{k as KolInputTag}from"./component-names.js";import{s as showExpertSlot,b as buildBadgeTextString}from"./reuse.js";const validateReadOnly=(t,e)=>{watchBoolean(t,"_readOnly",e)},inputDateTypeOptions=["date","datetime-local","month","time","week"];class InputDateController extends InputIconController{constructor(t,e,n){super(t,e,n),this.validateIso8601=(t,e,n)=>watchValidator(this.component,t,(t=>void 0===t||null==t||""===t||this.validateDateString(t)),new Set(["Date","string{ISO-8601}"]),InputDateController.tryParseToString(e,this.component._type,this.component._step),{hooks:{afterPatch:t=>{"string"==typeof t&&n&&n(t)}}}),this.component=t}validateAutoComplete(t){watchValidator(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateSuggestions(t){validateSuggestions(this.component,t)}static tryParseToString(t,e,n){if("string"==typeof t||null===t)return t;if("object"==typeof t&&t instanceof Date){const a=t.getFullYear(),i=String(t.getMonth()+1).padStart(2,"0"),o=String(t.getDate()).padStart(2,"0"),l=String(t.getHours()).padStart(2,"0"),s=String(t.getMinutes()).padStart(2,"0"),r=String(t.getSeconds()).padStart(2,"0"),d=[a,i,o].join("-"),h=[l,s,r].join(":");switch(e){case"date":return d;case"datetime-local":return`${d}T${h}`;case"month":return`${a}-${i}`;case"time":return void 0===n||"60"===String(n)?`${l}:${s}`:h;case"week":return`${a}-W${this.getWeekNumberOfDate(t)}`}}}static getWeekNumberOfDate(t){const e=new Date(t),n=(e.getDay()+6)%7;e.setDate(e.getDate()-n+3);const a=e.valueOf();e.setMonth(0,1),4!==e.getDay()&&e.setMonth(0,1+(4-e.getDay()+7)%7);return(1+Math.ceil((a-e.valueOf())/6048e5)).toString().padStart(2,"0")}validateDateString(t){switch(this.component._type){case"date":return InputDateController.isoDateRegex.test(t);case"datetime-local":return InputDateController.isoLocalDateTimeRegex.test(t);case"month":return InputDateController.isoMonthRegex.test(t);case"time":return InputDateController.isoTimeRegex.test(t);case"week":return InputDateController.isoWeekRegex.test(t);default:return!1}}onBlur(t){super.onBlur(t),!!t.target.value!=!!this.component._value&&(this.component._value=t.target.value)}validateMax(t){const e=null!=t||"date"!==this.component._type&&"month"!==this.component._type&&"datetime-local"!==this.component._type?t:InputDateController.DEFAULT_MAX_DATE;this.validateIso8601("_max",e)}validateMin(t){this.validateIso8601("_min",t)}validateOn(t){setState(this.component,"_on",Object.assign(Object.assign({},t),{onChange:(e,n)=>{!!n!=!!this.component._value&&(this.component._value=n),(null==t?void 0:t.onChange)&&t.onChange(e,n)}}))}validateReadOnly(t){validateReadOnly(this.component,t)}validateRequired(t){watchBoolean(this.component,"_required",t)}validateStep(t){watchNumber(this.component,"_step",t)}validateType(t){watchValidator(this.component,"_type",(t=>"string"==typeof t&&inputDateTypeOptions.includes(t)),new Set([`String {${inputDateTypeOptions.join(", ")}`]),t)}validateValue(t){this.validateValueEx(t)}validateValueEx(t,e){this.validateIso8601("_value",t,e),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateLabel(this.component._label),this.validateSuggestions(this.component._suggestions),this.validateOn(this.component._on),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateStep(this.component._step),this.validateType(this.component._type),this.validateValue(this.component._value)}}InputDateController.isoDateRegex=/^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])/,InputDateController.isoLocalDateTimeRegex=/^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])[T ][0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/,InputDateController.isoMonthRegex=/^\d{4}-([0]\d|1[0-2])/,InputDateController.isoTimeRegex=/^[0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/,InputDateController.isoWeekRegex=/^\d{4}-W(?:[0-4]\d|5[0-3])$/,InputDateController.DEFAULT_MAX_DATE=new Date(9999,11,31,23,59,59);const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n  .input {\n    background-color: white;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-number {\n    display: block;\n  }\n}",KolInputDateDefaultStyle0=defaultStyleCss,KolInputDate$1=proxyCustomElement(class extends HTMLElement{async getValue(){var t;return this.inputRef&&this.remapValue(null===(t=this.inputRef)||void 0===t?void 0:t.value)}async focus(){await this.kolFocus()}async kolFocus(){var t;null===(t=this.inputRef)||void 0===t||t.focus()}async reset(){this.state=Object.assign(Object.assign({},this.state),{_value:null}),this.controller.setFormAssociatedValue(""),this.inputRef&&(this.inputRef.value="")}setInitialValueType(t){t instanceof Date?this._initialValueType="Date":this._initialValueType="string"==typeof t?"String":null}remapValue(t){return"Date"===this._initialValueType?new Date(t):t}render(){const{ariaDescribedBy:t}=getRenderStates(this.state),e=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,n=showExpertSlot(this.state._label);return h(Host,{key:"023c36b654230fa048f8a42c481af8d66d719ff2",class:{"kol-input-date":!0,"has-value":this.state._hasValue}},h(KolInputTag,{key:"8c62e80c2fb1d5d7556abf81c096973cb689c431",class:{[this.state._type]:!0,"hide-label":!!this.state._hideLabel},_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_disabled:this.state._disabled,_msg:this.state._msg,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_suggestions:this.state._suggestions,_readOnly:this.state._readOnly,_required:this.state._required,_shortKey:this.state._shortKey,_smartButton:this.state._smartButton,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},h("span",{key:"5ddac8288007ae72d9a2c9d4232454fcf8ced485",slot:"label"},n?h("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?h(Fragment,null,h(InternalUnderlinedBadgeText,{badgeText:buildBadgeTextString(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",h("span",{class:"access-key-hint","aria-hidden":"true"},buildBadgeTextString(this.state._accessKey||this.state._shortKey))):h("span",null,this.state._label)),h("div",{key:"93501ba3e4b31203b9eaa8710e00052a4a44b4f8",slot:"input"},h("input",Object.assign({key:"975399701d3067bfaf1b273d0758dd2035730561",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:e?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name,readOnly:this.state._readOnly,required:this.state._required,step:this.state._step,type:this.state._type,value:this.state._value||void 0},this.controller.onFacade,{onKeyDown:this.onKeyDown,onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1},onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onChange:this.onChange,onInput:this.onInput})))))}constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=t=>{this.inputRef=t},this.onChange=t=>{const e=t.target.value,n=this.remapValue(e);this.controller.onFacade.onChange(t,n)},this.onInput=t=>{const e=t.target.value,n=this.remapValue(e);this.controller.onFacade.onInput(t,!0,n)},this.onKeyDown=t=>{"Enter"!==t.code&&"NumpadEnter"!==t.code||propagateSubmitEventToForm({form:this.host,ref:this.inputRef})},this._initialValueType=null,this._accessKey=void 0,this._alert=void 0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._max=void 0,this._min=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._readOnly=!1,this._required=!1,this._shortKey=void 0,this._smartButton=void 0,this._suggestions=void 0,this._syncValueBySelector=void 0,this._step=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._type="date",this._value=void 0,this.state={_autoComplete:"off",_hasValue:!1,_hideError:!1,_id:`id-${nonce()}`,_label:"",_suggestions:[],_type:"datetime-local"},this.inputHasFocus=!1,this.controller=new InputDateController(this,"date",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMax(t){this.controller.validateMax(t)}validateMin(t){this.controller.validateMin(t)}validateMsg(t){this.controller.validateMsg(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateStep(t){this.controller.validateStep(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){t instanceof Date&&deprecatedHint("Date type will be removed in v3. Use `Iso8601` instead."),this.controller.validateValueEx(t),void 0!==t&&this.setInitialValueType(t)}componentWillLoad(){void 0!==this._value&&this.setInitialValueType(this._value),this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}static get delegatesFocus(){return!0}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_max:["validateMax"],_min:["validateMin"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_smartButton:["validateSmartButton"],_suggestions:["validateSuggestions"],_step:["validateStep"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}static get style(){return{default:KolInputDateDefaultStyle0}}},[49,"kol-input-date",{_accessKey:[1,"_access-key"],_alert:[1540],_autoComplete:[1,"_auto-complete"],_disabled:[4],_error:[1],_hideError:[1540,"_hide-error"],_hideLabel:[4,"_hide-label"],_hint:[1],_icons:[1],_id:[1],_label:[1],_max:[1],_min:[1],_msg:[1],_name:[1],_on:[16],_readOnly:[4,"_read-only"],_required:[4],_shortKey:[1,"_short-key"],_smartButton:[1,"_smart-button"],_suggestions:[1],_syncValueBySelector:[1,"_sync-value-by-selector"],_step:[2],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_type:[1],_value:[1025],_initialValueType:[32],state:[32],inputHasFocus:[32],getValue:[64],focus:[64],kolFocus:[64],reset:[64]},void 0,{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_max:["validateMax"],_min:["validateMin"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_smartButton:["validateSmartButton"],_suggestions:["validateSuggestions"],_step:["validateStep"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-input-date"].forEach((t=>{if("kol-input-date"===t)customElements.get(t)||customElements.define(t,KolInputDate$1)}))}const KolInputDate=KolInputDate$1,defineCustomElement=defineCustomElement$1;export{KolInputDate,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host,Fragment}from"@stencil/core/internal/client";import{n as nonce}from"./dev.utils2.js";import{p as propagateSubmitEventToForm}from"./controller.js";import{g as getRenderStates}from"./controller2.js";import{I as InternalUnderlinedBadgeText}from"./InternalUnderlinedBadgeText.js";import{I as InputIconController}from"./controller-icon.js";import{c as watchBoolean,w as watchValidator,s as setState,x as watchNumber,z as deprecatedHint}from"./prop.validators.js";import{v as validateSuggestions}from"./suggestions.js";import{k as KolInputTag}from"./component-names.js";import{s as showExpertSlot,b as buildBadgeTextString}from"./reuse.js";const validateReadOnly=(t,e)=>{watchBoolean(t,"_readOnly",e)},inputDateTypeOptions=["date","datetime-local","month","time","week"];class InputDateController extends InputIconController{constructor(t,e,n){super(t,e,n),this.validateIso8601=(t,e,n)=>watchValidator(this.component,t,(t=>void 0===t||null==t||""===t||this.validateDateString(t)),new Set(["Date","string{ISO-8601}"]),InputDateController.tryParseToString(e,this.component._type,this.component._step),{hooks:{afterPatch:t=>{"string"==typeof t&&n&&n(t)}}}),this.component=t}validateAutoComplete(t){watchValidator(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateSuggestions(t){validateSuggestions(this.component,t)}static tryParseToString(t,e,n){if("string"==typeof t||null===t)return t;if("object"==typeof t&&t instanceof Date){const a=t.getFullYear(),i=String(t.getMonth()+1).padStart(2,"0"),o=String(t.getDate()).padStart(2,"0"),l=String(t.getHours()).padStart(2,"0"),s=String(t.getMinutes()).padStart(2,"0"),r=String(t.getSeconds()).padStart(2,"0"),d=[a,i,o].join("-"),h=[l,s,r].join(":");switch(e){case"date":return d;case"datetime-local":return`${d}T${h}`;case"month":return`${a}-${i}`;case"time":return void 0===n||"60"===String(n)?`${l}:${s}`:h;case"week":return`${a}-W${this.getWeekNumberOfDate(t)}`}}}static getWeekNumberOfDate(t){const e=new Date(t),n=(e.getDay()+6)%7;e.setDate(e.getDate()-n+3);const a=e.valueOf();e.setMonth(0,1),4!==e.getDay()&&e.setMonth(0,1+(4-e.getDay()+7)%7);return(1+Math.ceil((a-e.valueOf())/6048e5)).toString().padStart(2,"0")}validateDateString(t){switch(this.component._type){case"date":return InputDateController.isoDateRegex.test(t);case"datetime-local":return InputDateController.isoLocalDateTimeRegex.test(t);case"month":return InputDateController.isoMonthRegex.test(t);case"time":return InputDateController.isoTimeRegex.test(t);case"week":return InputDateController.isoWeekRegex.test(t);default:return!1}}onBlur(t){super.onBlur(t),!!t.target.value!=!!this.component._value&&(this.component._value=t.target.value)}validateMax(t){const e=null!=t||"date"!==this.component._type&&"month"!==this.component._type&&"datetime-local"!==this.component._type?t:InputDateController.DEFAULT_MAX_DATE;this.validateIso8601("_max",e)}validateMin(t){this.validateIso8601("_min",t)}validateOn(t){setState(this.component,"_on",Object.assign(Object.assign({},t),{onChange:(e,n)=>{!!n!=!!this.component._value&&(this.component._value=n),(null==t?void 0:t.onChange)&&t.onChange(e,n)}}))}validateReadOnly(t){validateReadOnly(this.component,t)}validateRequired(t){watchBoolean(this.component,"_required",t)}validateStep(t){watchNumber(this.component,"_step",t)}validateType(t){watchValidator(this.component,"_type",(t=>"string"==typeof t&&inputDateTypeOptions.includes(t)),new Set([`String {${inputDateTypeOptions.join(", ")}`]),t)}validateValue(t){this.validateValueEx(t)}validateValueEx(t,e){this.validateIso8601("_value",t,e),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateLabel(this.component._label),this.validateSuggestions(this.component._suggestions),this.validateOn(this.component._on),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateStep(this.component._step),this.validateType(this.component._type),this.validateValue(this.component._value)}}InputDateController.isoDateRegex=/^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])/,InputDateController.isoLocalDateTimeRegex=/^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])[T ][0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/,InputDateController.isoMonthRegex=/^\d{4}-([0]\d|1[0-2])/,InputDateController.isoTimeRegex=/^[0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/,InputDateController.isoWeekRegex=/^\d{4}-W(?:[0-4]\d|5[0-3])$/,InputDateController.DEFAULT_MAX_DATE=new Date(9999,11,31,23,59,59);const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n  .input {\n    background-color: white;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-number {\n    display: block;\n  }\n}",KolInputDateDefaultStyle0=defaultStyleCss,KolInputDate$1=proxyCustomElement(class extends HTMLElement{async getValue(){var t;return this.inputRef&&this.remapValue(null===(t=this.inputRef)||void 0===t?void 0:t.value)}async focus(){await this.kolFocus()}async kolFocus(){var t;null===(t=this.inputRef)||void 0===t||t.focus()}async reset(){this.state=Object.assign(Object.assign({},this.state),{_value:null}),this.controller.setFormAssociatedValue(""),this.inputRef&&(this.inputRef.value="")}setInitialValueType(t){t instanceof Date?this._initialValueType="Date":this._initialValueType="string"==typeof t?"String":null}remapValue(t){return"Date"===this._initialValueType?new Date(t):t}render(){const{ariaDescribedBy:t}=getRenderStates(this.state),e=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,n=showExpertSlot(this.state._label);return h(Host,{key:"023c36b654230fa048f8a42c481af8d66d719ff2",class:{"kol-input-date":!0,"has-value":this.state._hasValue}},h(KolInputTag,{key:"8c62e80c2fb1d5d7556abf81c096973cb689c431",class:{[this.state._type]:!0,"hide-label":!!this.state._hideLabel},_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_disabled:this.state._disabled,_msg:this.state._msg,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_suggestions:this.state._suggestions,_readOnly:this.state._readOnly,_required:this.state._required,_shortKey:this.state._shortKey,_smartButton:this.state._smartButton,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},h("span",{key:"5ddac8288007ae72d9a2c9d4232454fcf8ced485",slot:"label"},n?h("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?h(Fragment,null,h(InternalUnderlinedBadgeText,{badgeText:buildBadgeTextString(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",h("span",{class:"access-key-hint","aria-hidden":"true"},buildBadgeTextString(this.state._accessKey||this.state._shortKey))):h("span",null,this.state._label)),h("div",{key:"93501ba3e4b31203b9eaa8710e00052a4a44b4f8",slot:"input"},h("input",Object.assign({key:"975399701d3067bfaf1b273d0758dd2035730561",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:e?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name,readOnly:this.state._readOnly,required:this.state._required,step:this.state._step,type:this.state._type,value:this.state._value||void 0},this.controller.onFacade,{onKeyDown:this.onKeyDown,onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1},onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onChange:this.onChange,onInput:this.onInput})))))}constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=t=>{this.inputRef=t},this.onChange=t=>{const e=t.target.value,n=this.remapValue(e);this.controller.onFacade.onChange(t,n)},this.onInput=t=>{const e=t.target.value,n=this.remapValue(e);this.controller.onFacade.onInput(t,!0,n)},this.onKeyDown=t=>{"Enter"!==t.code&&"NumpadEnter"!==t.code||propagateSubmitEventToForm({form:this.host,ref:this.inputRef})},this._initialValueType=null,this._accessKey=void 0,this._alert=void 0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._max=void 0,this._min=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._readOnly=!1,this._required=!1,this._shortKey=void 0,this._smartButton=void 0,this._suggestions=void 0,this._syncValueBySelector=void 0,this._step=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._type="date",this._value=void 0,this.state={_autoComplete:"off",_hasValue:!1,_hideError:!1,_id:`id-${nonce()}`,_label:"",_suggestions:[],_type:"datetime-local"},this.inputHasFocus=!1,this.controller=new InputDateController(this,"date",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMax(t){this.controller.validateMax(t)}validateMin(t){this.controller.validateMin(t)}validateMsg(t){this.controller.validateMsg(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateStep(t){this.controller.validateStep(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){t instanceof Date&&deprecatedHint("Date type will be removed in v3. Use `Iso8601` instead."),this.controller.validateValueEx(t),void 0!==t&&this.setInitialValueType(t)}componentWillLoad(){void 0!==this._value&&this.setInitialValueType(this._value),this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}static get delegatesFocus(){return!0}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_max:["validateMax"],_min:["validateMin"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_smartButton:["validateSmartButton"],_suggestions:["validateSuggestions"],_step:["validateStep"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}static get style(){return{default:KolInputDateDefaultStyle0}}},[49,"kol-input-date",{_accessKey:[1,"_access-key"],_alert:[1540],_autoComplete:[1,"_auto-complete"],_disabled:[4],_error:[1],_hideError:[1540,"_hide-error"],_hideLabel:[4,"_hide-label"],_hint:[1],_icons:[1],_id:[1],_label:[1],_max:[1],_min:[1],_msg:[1],_name:[1],_on:[16],_readOnly:[4,"_read-only"],_required:[4],_shortKey:[1,"_short-key"],_smartButton:[1,"_smart-button"],_suggestions:[1],_syncValueBySelector:[1,"_sync-value-by-selector"],_step:[2],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_type:[1],_value:[1025],_initialValueType:[32],state:[32],inputHasFocus:[32],getValue:[64],focus:[64],kolFocus:[64],reset:[64]},void 0,{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_max:["validateMax"],_min:["validateMin"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_smartButton:["validateSmartButton"],_suggestions:["validateSuggestions"],_step:["validateStep"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-input-date"].forEach((t=>{if("kol-input-date"===t)customElements.get(t)||customElements.define(t,KolInputDate$1)}))}const KolInputDate=KolInputDate$1,defineCustomElement=defineCustomElement$1;export{KolInputDate,defineCustomElement};

package/dist/components/kol-input-number.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host,Fragment}from"@stencil/core/internal/client";import{n as nonce}from"./dev.utils2.js";import{p as propagateSubmitEventToForm}from"./controller.js";import{g as getRenderStates}from"./controller2.js";import{I as InternalUnderlinedBadgeText}from"./InternalUnderlinedBadgeText.js";import{I as InputIconController}from"./controller-icon.js";import{w as watchValidator,e as watchString,c as watchBoolean,v as watchNumber}from"./prop.validators.js";import{v as validateSuggestions}from"./suggestions.js";import{k as KolInputTag}from"./component-names.js";import{s as showExpertSlot,b as buildBadgeTextString}from"./reuse.js";class InputNumberController extends InputIconController{constructor(e,t,n){super(e,t,n),this.numberOrIsoDateRegex=/^\d+$|(^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])([T ][0-2]\d:[0-5]\d:[0-5]\d(?:\.\d+)?([+-][0-2]\d:[0-5]\d|Z)?)?$)|(^[0-2]\d:[0-5]\d(:[0-5]\d)?$)/,this.parseToString=e=>"string"==typeof e?e:"number"==typeof e?`${e}`:"object"==typeof e&&e instanceof Date?e.toISOString():"",this.validateIso8601=(e,t,n)=>{const a=parseFloat(t),i=a==t;return watchValidator(this.component,e,(e=>void 0===e||""===e||i&&"number"==typeof a||this.numberOrIsoDateRegex.test(e)),new Set(["number","Date","string{ISO-8601}"]),this.parseToString(t),{hooks:{afterPatch:e=>{"string"==typeof e&&n&&n(e)}}})},this.component=e}validateAutoComplete(e){watchValidator(this.component,"_autoComplete",(e=>"string"==typeof e&&("on"===e||"off"===e)),new Set(["on | off"]),e)}validateSuggestions(e){validateSuggestions(this.component,e)}onChange(e){super.onChange(e),!!e.target.value!=!!this.component._value&&(this.component._value=e.target.value)}validateMax(e){this.validateIso8601("_max",e)}validateMin(e){this.validateIso8601("_min",e)}validatePlaceholder(e){watchString(this.component,"_placeholder",e)}validateReadOnly(e){watchBoolean(this.component,"_readOnly",e)}validateRequired(e){watchBoolean(this.component,"_required",e)}validateStep(e){watchNumber(this.component,"_step",e)}validateValue(e){this.validateValueEx(e)}validateValueEx(e,t){this.validateIso8601("_value",e,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.validateSuggestions(this.component._suggestions),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateStep(this.component._step),this.validateValue(this.component._value)}}const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n  .input {\n    background-color: white;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}",KolInputNumberDefaultStyle0=defaultStyleCss,KolInputNumber$1=proxyCustomElement(class extends HTMLElement{async getValue(){var e;return null===(e=this.inputRef)||void 0===e?void 0:e.value}async focus(){await this.kolFocus()}async kolFocus(){var e;null===(e=this.inputRef)||void 0===e||e.focus()}render(){const{ariaDescribedBy:e}=getRenderStates(this.state),t=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,n=showExpertSlot(this.state._label);return h(Host,{key:"f2159572d741f08d0fe496908e3e9b78bf4d4360",class:{"kol-input-number":!0,"has-value":this.state._hasValue}},h(KolInputTag,{key:"cca3c8727c315de0af6d0bfb46476b0ece3a590c",class:{number:!0,"hide-label":!!this.state._hideLabel},_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_disabled:this.state._disabled,_msg:this.state._msg,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_suggestions:this.state._suggestions,_readOnly:this.state._readOnly,_required:this.state._required,_shortKey:this.state._shortKey,_smartButton:this.state._smartButton,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},h("span",{key:"77e22ae9678676a8f3db1a4c31ccf445af311d75",slot:"label"},n?h("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?h(Fragment,null,h(InternalUnderlinedBadgeText,{badgeText:buildBadgeTextString(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",h("span",{class:"access-key-hint","aria-hidden":"true"},buildBadgeTextString(this.state._accessKey,this.state._shortKey))):h("span",null,this.state._label)),h("div",{key:"6b717a3b135d57ffaccee69534077169ef8ba3f6",slot:"input"},h("input",Object.assign({key:"ec0c34b9fd6bb3da27f94541903201599d841ff5",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:t?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name,readOnly:this.state._readOnly,required:this.state._required,placeholder:this.state._placeholder,step:this.state._step,type:"number",value:this.state._value},this.controller.onFacade,{onKeyDown:this.onKeyDown,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})))))}constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=e=>{this.inputRef=e},this.onKeyDown=e=>{"Enter"!==e.code&&"NumpadEnter"!==e.code||propagateSubmitEventToForm({form:this.host,ref:this.inputRef})},this._accessKey=void 0,this._alert=void 0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._max=void 0,this._min=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=!1,this._required=!1,this._shortKey=void 0,this._smartButton=void 0,this._suggestions=void 0,this._step=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_hasValue:!1,_hideError:!1,_id:`id-${nonce()}`,_label:"",_suggestions:[]},this.inputHasFocus=!1,this.controller=new InputNumberController(this,"number",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateAutoComplete(e){this.controller.validateAutoComplete(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHideError(e){this.controller.validateHideError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMax(e){this.controller.validateMax(e)}validateMin(e){this.controller.validateMin(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSmartButton(e){this.controller.validateSmartButton(e)}validateSuggestions(e){this.controller.validateSuggestions(e)}validateStep(e){this.controller.validateStep(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValueEx(e,(e=>{""===e&&this.inputRef&&(this.inputRef.value="")}))}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}static get delegatesFocus(){return!0}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_max:["validateMax"],_min:["validateMin"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_smartButton:["validateSmartButton"],_suggestions:["validateSuggestions"],_step:["validateStep"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}static get style(){return{default:KolInputNumberDefaultStyle0}}},[49,"kol-input-number",{_accessKey:[1,"_access-key"],_alert:[1540],_autoComplete:[1,"_auto-complete"],_disabled:[4],_error:[1],_hideError:[1540,"_hide-error"],_hideLabel:[4,"_hide-label"],_hint:[1],_icons:[1],_id:[1],_label:[1],_max:[8],_min:[8],_msg:[1],_name:[1],_on:[16],_placeholder:[1],_readOnly:[4,"_read-only"],_required:[4],_shortKey:[1,"_short-key"],_smartButton:[1,"_smart-button"],_suggestions:[1],_step:[2],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_value:[1032],state:[32],inputHasFocus:[32],getValue:[64],focus:[64],kolFocus:[64]},void 0,{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_max:["validateMax"],_min:["validateMin"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_smartButton:["validateSmartButton"],_suggestions:["validateSuggestions"],_step:["validateStep"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-input-number"].forEach((e=>{if("kol-input-number"===e)customElements.get(e)||customElements.define(e,KolInputNumber$1)}))}const KolInputNumber=KolInputNumber$1,defineCustomElement=defineCustomElement$1;export{KolInputNumber,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host,Fragment}from"@stencil/core/internal/client";import{n as nonce}from"./dev.utils2.js";import{p as propagateSubmitEventToForm}from"./controller.js";import{g as getRenderStates}from"./controller2.js";import{I as InternalUnderlinedBadgeText}from"./InternalUnderlinedBadgeText.js";import{I as InputIconController}from"./controller-icon.js";import{w as watchValidator,e as watchString,c as watchBoolean,x as watchNumber}from"./prop.validators.js";import{v as validateSuggestions}from"./suggestions.js";import{k as KolInputTag}from"./component-names.js";import{s as showExpertSlot,b as buildBadgeTextString}from"./reuse.js";class InputNumberController extends InputIconController{constructor(e,t,n){super(e,t,n),this.numberOrIsoDateRegex=/^\d+$|(^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])([T ][0-2]\d:[0-5]\d:[0-5]\d(?:\.\d+)?([+-][0-2]\d:[0-5]\d|Z)?)?$)|(^[0-2]\d:[0-5]\d(:[0-5]\d)?$)/,this.parseToString=e=>"string"==typeof e?e:"number"==typeof e?`${e}`:"object"==typeof e&&e instanceof Date?e.toISOString():"",this.validateIso8601=(e,t,n)=>{const a=parseFloat(t),i=a==t;return watchValidator(this.component,e,(e=>void 0===e||""===e||i&&"number"==typeof a||this.numberOrIsoDateRegex.test(e)),new Set(["number","Date","string{ISO-8601}"]),this.parseToString(t),{hooks:{afterPatch:e=>{"string"==typeof e&&n&&n(e)}}})},this.component=e}validateAutoComplete(e){watchValidator(this.component,"_autoComplete",(e=>"string"==typeof e&&("on"===e||"off"===e)),new Set(["on | off"]),e)}validateSuggestions(e){validateSuggestions(this.component,e)}onChange(e){super.onChange(e),!!e.target.value!=!!this.component._value&&(this.component._value=e.target.value)}validateMax(e){this.validateIso8601("_max",e)}validateMin(e){this.validateIso8601("_min",e)}validatePlaceholder(e){watchString(this.component,"_placeholder",e)}validateReadOnly(e){watchBoolean(this.component,"_readOnly",e)}validateRequired(e){watchBoolean(this.component,"_required",e)}validateStep(e){watchNumber(this.component,"_step",e)}validateValue(e){this.validateValueEx(e)}validateValueEx(e,t){this.validateIso8601("_value",e,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.validateSuggestions(this.component._suggestions),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateStep(this.component._step),this.validateValue(this.component._value)}}const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n  .input {\n    background-color: white;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}",KolInputNumberDefaultStyle0=defaultStyleCss,KolInputNumber$1=proxyCustomElement(class extends HTMLElement{async getValue(){var e;return null===(e=this.inputRef)||void 0===e?void 0:e.value}async focus(){await this.kolFocus()}async kolFocus(){var e;null===(e=this.inputRef)||void 0===e||e.focus()}render(){const{ariaDescribedBy:e}=getRenderStates(this.state),t=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,n=showExpertSlot(this.state._label);return h(Host,{key:"f2159572d741f08d0fe496908e3e9b78bf4d4360",class:{"kol-input-number":!0,"has-value":this.state._hasValue}},h(KolInputTag,{key:"cca3c8727c315de0af6d0bfb46476b0ece3a590c",class:{number:!0,"hide-label":!!this.state._hideLabel},_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_disabled:this.state._disabled,_msg:this.state._msg,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_suggestions:this.state._suggestions,_readOnly:this.state._readOnly,_required:this.state._required,_shortKey:this.state._shortKey,_smartButton:this.state._smartButton,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},h("span",{key:"77e22ae9678676a8f3db1a4c31ccf445af311d75",slot:"label"},n?h("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?h(Fragment,null,h(InternalUnderlinedBadgeText,{badgeText:buildBadgeTextString(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",h("span",{class:"access-key-hint","aria-hidden":"true"},buildBadgeTextString(this.state._accessKey,this.state._shortKey))):h("span",null,this.state._label)),h("div",{key:"6b717a3b135d57ffaccee69534077169ef8ba3f6",slot:"input"},h("input",Object.assign({key:"ec0c34b9fd6bb3da27f94541903201599d841ff5",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:t?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name,readOnly:this.state._readOnly,required:this.state._required,placeholder:this.state._placeholder,step:this.state._step,type:"number",value:this.state._value},this.controller.onFacade,{onKeyDown:this.onKeyDown,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})))))}constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=e=>{this.inputRef=e},this.onKeyDown=e=>{"Enter"!==e.code&&"NumpadEnter"!==e.code||propagateSubmitEventToForm({form:this.host,ref:this.inputRef})},this._accessKey=void 0,this._alert=void 0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._max=void 0,this._min=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=!1,this._required=!1,this._shortKey=void 0,this._smartButton=void 0,this._suggestions=void 0,this._step=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_hasValue:!1,_hideError:!1,_id:`id-${nonce()}`,_label:"",_suggestions:[]},this.inputHasFocus=!1,this.controller=new InputNumberController(this,"number",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateAutoComplete(e){this.controller.validateAutoComplete(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHideError(e){this.controller.validateHideError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMax(e){this.controller.validateMax(e)}validateMin(e){this.controller.validateMin(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSmartButton(e){this.controller.validateSmartButton(e)}validateSuggestions(e){this.controller.validateSuggestions(e)}validateStep(e){this.controller.validateStep(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValueEx(e,(e=>{""===e&&this.inputRef&&(this.inputRef.value="")}))}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}static get delegatesFocus(){return!0}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_max:["validateMax"],_min:["validateMin"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_smartButton:["validateSmartButton"],_suggestions:["validateSuggestions"],_step:["validateStep"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}static get style(){return{default:KolInputNumberDefaultStyle0}}},[49,"kol-input-number",{_accessKey:[1,"_access-key"],_alert:[1540],_autoComplete:[1,"_auto-complete"],_disabled:[4],_error:[1],_hideError:[1540,"_hide-error"],_hideLabel:[4,"_hide-label"],_hint:[1],_icons:[1],_id:[1],_label:[1],_max:[8],_min:[8],_msg:[1],_name:[1],_on:[16],_placeholder:[1],_readOnly:[4,"_read-only"],_required:[4],_shortKey:[1,"_short-key"],_smartButton:[1,"_smart-button"],_suggestions:[1],_step:[2],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_value:[1032],state:[32],inputHasFocus:[32],getValue:[64],focus:[64],kolFocus:[64]},void 0,{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_max:["validateMax"],_min:["validateMin"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_smartButton:["validateSmartButton"],_suggestions:["validateSuggestions"],_step:["validateStep"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-input-number"].forEach((e=>{if("kol-input-number"===e)customElements.get(e)||customElements.define(e,KolInputNumber$1)}))}const KolInputNumber=KolInputNumber$1,defineCustomElement=defineCustomElement$1;export{KolInputNumber,defineCustomElement};

package/dist/components/kol-input-password.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host,Fragment}from"@stencil/core/internal/client";import{n as nonce}from"./dev.utils2.js";import{p as propagateSubmitEventToForm}from"./controller.js";import{g as getRenderStates}from"./controller2.js";import{I as InternalUnderlinedBadgeText}from"./InternalUnderlinedBadgeText.js";import{I as InputPasswordController}from"./controller5.js";import{k as KolInputTag,c as KolButtonWcTag}from"./component-names.js";import{t as translate}from"./i18n2.js";import{s as showExpertSlot,b as buildBadgeTextString}from"./reuse.js";import{s as setState,q as devHint}from"./prop.validators.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n  .input {\n    background-color: white;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .password-toggle-button {\n    position: absolute;\n    transform: translateX(-100%);\n  }\n  .kol-tooltip-wc {\n    --kol-tooltip-width: calc(160rem / var(--kolibri-root-font-size, 16));\n  }\n}",KolInputPasswordDefaultStyle0=defaultStyleCss,KolInputPassword$1=proxyCustomElement(class extends HTMLElement{async getValue(){var t;return null===(t=this.inputRef)||void 0===t?void 0:t.value}async focus(){await this.kolFocus()}async kolFocus(){var t;null===(t=this.inputRef)||void 0===t||t.focus()}render(){const{ariaDescribedBy:t}=getRenderStates(this.state),e=showExpertSlot(this.state._label);return h(Host,{key:"e4bbac1ce3dd4e5d3f22168588a8932403474775",class:{"kol-input-password":!0,"has-value":this.state._hasValue}},h(KolInputTag,{key:"ea8e123c738e56d384e323e8896bae2d46fb39df",class:{"hide-label":!!this.state._hideLabel,password:!0},_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_currentLength:this.state._currentLength,_disabled:this.state._disabled,_msg:this.state._msg,_hasCounter:this.state._hasCounter,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_maxLength:this.state._maxLength,_readOnly:this.state._readOnly,_required:this.state._required,_shortKey:this.state._shortKey,_smartButton:this.state._smartButton,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.inputRef)||void 0===t?void 0:t.focus()},role:"presentation"},h("span",{key:"8b3ea92e78b33d8e2d715cd175db73d783f9dc29",slot:"label"},e?h("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?h(Fragment,null,h(InternalUnderlinedBadgeText,{badgeText:buildBadgeTextString(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",h("span",{class:"access-key-hint","aria-hidden":"true"},buildBadgeTextString(this.state._accessKey,this.state._shortKey))):h("span",null,this.state._label)),h("div",{key:"a531257549c04c2787ce78511af4cb50e3d4013e",slot:"input"},h("input",Object.assign({key:"84bf423a5e3ee87cdf094124b064869f020b17a3",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,maxlength:this.state._maxLength,name:this.state._name,pattern:this.state._pattern,placeholder:this.state._placeholder,readOnly:this.state._readOnly,required:this.state._required,type:this._passwordVisible?"text":"password",value:this.state._value},this.controller.onFacade,{onKeyDown:this.onKeyDown,onInput:this.onInput,onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1}})),"visibility-toggle"===this._variant?h(KolButtonWcTag,{class:"password-toggle-button",_label:this._passwordVisible?translate("kol-hide-password"):translate("kol-show-password"),_variant:"ghost",_disabled:this._disabled,_on:{onClick:()=>{this._passwordVisible=!this._passwordVisible}},_hideLabel:!0,_icons:this._passwordVisible?"codicon codicon-eye-closed":"codicon codicon-eye-watch"}):null)))}constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=t=>{this.inputRef=t},this.onKeyDown=t=>{"Enter"!==t.code&&"NumpadEnter"!==t.code||propagateSubmitEventToForm({form:this.host,ref:this.inputRef})},this.onInput=t=>{setState(this,"_currentLength",t.target.value.length),this.controller.onFacade.onInput(t)},this._accessKey=void 0,this._alert=void 0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=!1,this._required=!1,this._shortKey=void 0,this._smartButton=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this._variant="default",this.state={_autoComplete:"off",_currentLength:0,_hasValue:!1,_hideError:!1,_id:`id-${nonce()}`,_label:"",_variant:"default"},this._passwordVisible=!1,this.inputHasFocus=!1,this.controller=new InputPasswordController(this,"password",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t),"on"===t&&devHint("[KolInputPassword] The 'autocomplete' option should not be set to \"on\" for a password input field")}validateDisabled(t){this.controller.validateDisabled(t)}validateVariant(t){this.controller.validateVariant(t)}validateError(t){this.controller.validateError(t)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateMsg(t){this.controller.validateMsg(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePattern(t){this.controller.validatePattern(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}static get delegatesFocus(){return!0}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_variant:["validateVariant"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}static get style(){return{default:KolInputPasswordDefaultStyle0}}},[49,"kol-input-password",{_accessKey:[1,"_access-key"],_alert:[1540],_autoComplete:[1,"_auto-complete"],_disabled:[4],_error:[1],_hasCounter:[4,"_has-counter"],_hideError:[1540,"_hide-error"],_hideLabel:[4,"_hide-label"],_hint:[1],_icons:[1],_id:[1],_label:[1],_maxLength:[2,"_max-length"],_msg:[1],_name:[1],_on:[16],_pattern:[1],_placeholder:[1],_readOnly:[4,"_read-only"],_required:[4],_shortKey:[1,"_short-key"],_smartButton:[1,"_smart-button"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_value:[1],_variant:[1],state:[32],_passwordVisible:[32],inputHasFocus:[32],getValue:[64],focus:[64],kolFocus:[64]},void 0,{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_variant:["validateVariant"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-input-password"].forEach((t=>{if("kol-input-password"===t)customElements.get(t)||customElements.define(t,KolInputPassword$1)}))}const KolInputPassword=KolInputPassword$1,defineCustomElement=defineCustomElement$1;export{KolInputPassword,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host,Fragment}from"@stencil/core/internal/client";import{n as nonce}from"./dev.utils2.js";import{p as propagateSubmitEventToForm}from"./controller.js";import{g as getRenderStates}from"./controller2.js";import{I as InternalUnderlinedBadgeText}from"./InternalUnderlinedBadgeText.js";import{I as InputPasswordController}from"./controller5.js";import{k as KolInputTag,c as KolButtonWcTag}from"./component-names.js";import{t as translate}from"./i18n2.js";import{s as showExpertSlot,b as buildBadgeTextString}from"./reuse.js";import{s as setState,t as devHint}from"./prop.validators.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n  .input {\n    background-color: white;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .password-toggle-button {\n    position: absolute;\n    transform: translateX(-100%);\n  }\n  .kol-tooltip-wc {\n    --kol-tooltip-width: calc(160rem / var(--kolibri-root-font-size, 16));\n  }\n}",KolInputPasswordDefaultStyle0=defaultStyleCss,KolInputPassword$1=proxyCustomElement(class extends HTMLElement{async getValue(){var t;return null===(t=this.inputRef)||void 0===t?void 0:t.value}async focus(){await this.kolFocus()}async kolFocus(){var t;null===(t=this.inputRef)||void 0===t||t.focus()}render(){const{ariaDescribedBy:t}=getRenderStates(this.state),e=showExpertSlot(this.state._label);return h(Host,{key:"e4bbac1ce3dd4e5d3f22168588a8932403474775",class:{"kol-input-password":!0,"has-value":this.state._hasValue}},h(KolInputTag,{key:"ea8e123c738e56d384e323e8896bae2d46fb39df",class:{"hide-label":!!this.state._hideLabel,password:!0},_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_currentLength:this.state._currentLength,_disabled:this.state._disabled,_msg:this.state._msg,_hasCounter:this.state._hasCounter,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_maxLength:this.state._maxLength,_readOnly:this.state._readOnly,_required:this.state._required,_shortKey:this.state._shortKey,_smartButton:this.state._smartButton,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.inputRef)||void 0===t?void 0:t.focus()},role:"presentation"},h("span",{key:"8b3ea92e78b33d8e2d715cd175db73d783f9dc29",slot:"label"},e?h("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?h(Fragment,null,h(InternalUnderlinedBadgeText,{badgeText:buildBadgeTextString(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",h("span",{class:"access-key-hint","aria-hidden":"true"},buildBadgeTextString(this.state._accessKey,this.state._shortKey))):h("span",null,this.state._label)),h("div",{key:"a531257549c04c2787ce78511af4cb50e3d4013e",slot:"input"},h("input",Object.assign({key:"84bf423a5e3ee87cdf094124b064869f020b17a3",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,maxlength:this.state._maxLength,name:this.state._name,pattern:this.state._pattern,placeholder:this.state._placeholder,readOnly:this.state._readOnly,required:this.state._required,type:this._passwordVisible?"text":"password",value:this.state._value},this.controller.onFacade,{onKeyDown:this.onKeyDown,onInput:this.onInput,onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1}})),"visibility-toggle"===this._variant?h(KolButtonWcTag,{class:"password-toggle-button",_label:this._passwordVisible?translate("kol-hide-password"):translate("kol-show-password"),_variant:"ghost",_disabled:this._disabled,_on:{onClick:()=>{this._passwordVisible=!this._passwordVisible}},_hideLabel:!0,_icons:this._passwordVisible?"codicon codicon-eye-closed":"codicon codicon-eye-watch"}):null)))}constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=t=>{this.inputRef=t},this.onKeyDown=t=>{"Enter"!==t.code&&"NumpadEnter"!==t.code||propagateSubmitEventToForm({form:this.host,ref:this.inputRef})},this.onInput=t=>{setState(this,"_currentLength",t.target.value.length),this.controller.onFacade.onInput(t)},this._accessKey=void 0,this._alert=void 0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=!1,this._required=!1,this._shortKey=void 0,this._smartButton=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this._variant="default",this.state={_autoComplete:"off",_currentLength:0,_hasValue:!1,_hideError:!1,_id:`id-${nonce()}`,_label:"",_variant:"default"},this._passwordVisible=!1,this.inputHasFocus=!1,this.controller=new InputPasswordController(this,"password",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t),"on"===t&&devHint("[KolInputPassword] The 'autocomplete' option should not be set to \"on\" for a password input field")}validateDisabled(t){this.controller.validateDisabled(t)}validateVariant(t){this.controller.validateVariant(t)}validateError(t){this.controller.validateError(t)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateMsg(t){this.controller.validateMsg(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePattern(t){this.controller.validatePattern(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}static get delegatesFocus(){return!0}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_variant:["validateVariant"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}static get style(){return{default:KolInputPasswordDefaultStyle0}}},[49,"kol-input-password",{_accessKey:[1,"_access-key"],_alert:[1540],_autoComplete:[1,"_auto-complete"],_disabled:[4],_error:[1],_hasCounter:[4,"_has-counter"],_hideError:[1540,"_hide-error"],_hideLabel:[4,"_hide-label"],_hint:[1],_icons:[1],_id:[1],_label:[1],_maxLength:[2,"_max-length"],_msg:[1],_name:[1],_on:[16],_pattern:[1],_placeholder:[1],_readOnly:[4,"_read-only"],_required:[4],_shortKey:[1,"_short-key"],_smartButton:[1,"_smart-button"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_value:[1],_variant:[1],state:[32],_passwordVisible:[32],inputHasFocus:[32],getValue:[64],focus:[64],kolFocus:[64]},void 0,{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_variant:["validateVariant"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-input-password"].forEach((t=>{if("kol-input-password"===t)customElements.get(t)||customElements.define(t,KolInputPassword$1)}))}const KolInputPassword=KolInputPassword$1,defineCustomElement=defineCustomElement$1;export{KolInputPassword,defineCustomElement};