@public-ui/components 1.5.0-rc.17 → 1.5.0-rc.19

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,H as e,r as i,g as n}from"./index-50adf9a0.js";import{b as a,a as s}from"./reuse-3a02afb9.js";import{g as o}from"./controller-cbcb5b86.js";import{d as r}from"./a11y.tipps-1cea9822.js";import{b as d,a as l,s as h}from"./prop.validators-e402ad49.js";import{I as c}from"./controller-a9333e53.js";import{n as p}from"./dev.utils-157f0499.js";import"./tab-index-63d1379d.js";import"./index-81bd9b41.js";const u=(t,e)=>{d(t,"_checked",e)},b=(t,e)=>{d(t,"_indeterminate",e)};class m extends c{constructor(t,e,i){super(t,e,i),this.component=t}validateChecked(t){d(this.component,"_checked",t),this.setFormAssociatedValue(this.component.state._checked)}validateIcon(t){l(this.component,"_icons",(t=>"object"==typeof t&&null!==t&&(a(t.checked,1)||a(t.indeterminate,1)||a(t.unchecked,1))),new Set(["InputCheckboxIcons"]),t)}validateIndeterminate(t){d(this.component,"_indeterminate",t)}validateType(t){r('The "_type" prop is deprecated. Use "_variant" instead.'),this.validateVariant(t)}validateValue(t){h(this.component,"_value",t)}validateVariant(t){l(this.component,"_variant",(t=>"string"==typeof t&&("button"===t||"checkbox"===t||"switch"===t)),new Set(["String {button, checkbox, switch}"]),t)}componentWillLoad(){super.componentWillLoad(),this.validateChecked(this.component._checked),this.validateIcon(this.component._icon),this.validateIndeterminate(this.component._indeterminate),this.validateValue(this.component._value),this.validateVariant(this.component._variant||this.component._type)}}const k=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}a,button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}label{cursor:pointer}kol-input{align-items:center;display:grid;justify-items:left;width:100}kol-input.checkbox,kol-input.switch{grid-template-columns:auto 1fr}kol-input .input{align-items:center;display:grid;order:1}kol-input .input div{display:inline-flex}kol-input .input input{margin:0}kol-input label{order:2}kol-input .hint,kol-input.error>kol-alert{grid-column:span 2}kol-input kol-alert.error{order:3}kol-input .hint{order:4}input{border-width:2px;border-style:solid;line-height:24px}input[type='checkbox']{appearance:none;background-color:#fff;cursor:pointer;transition:0.5s}input[type='checkbox'].kol-disabled:before{cursor:not-allowed}input[type='checkbox']:before{content:'';cursor:pointer}.checkbox kol-icon,.switch kol-icon{display:none}.button{cursor:pointer;display:inline-flex;width:auto}.button input{display:none}.checkbox input[type='checkbox']{height:1.5em;width:1.5em}.checkbox input[type='checkbox']:before{display:block;height:1.5em;position:relative;width:1.5em}.checkbox input[type='checkbox']:checked:before{border-radius:1px;border-style:solid;border-width:0 3px 3px 0;height:0.75em;left:calc(0.375em - 2px);transform:rotate(40deg) translate(-50%, -50%);top:calc(0.7125em - 2px);width:0.375em}.checkbox input[type='checkbox']:indeterminate:before{background-color:#000;height:0.2em;left:0.24em;top:0.575em;width:0.8em}.switch input[type='checkbox']{display:inline-block;height:1.7em;min-width:3.2em;position:relative;width:3.2em}.switch input[type='checkbox']:before{background-color:#000;height:1.2em;left:calc(0.25em - 2px);top:calc(0.25em - 2px);position:absolute;-webkit-transition:0.5s;-moz-transition:0.5s;-ms-transition:0.5s;transition:0.5s;width:1.2em}.switch input[type='checkbox']:checked:before{-webkit-transform:translateX(1.5em);-moz-transform:translateX(1.5em);-ms-transform:translateX(1.5em);transform:translateX(1.5em)}.switch input[type='checkbox']:indeterminate:before{transform:translateX(0.75em)}",f=class{render(){const{ariaDiscribedBy:i}=o(this.state);return t(e,null,t("kol-input",{class:{[this.state._variant]:!0},"data-role":"button"===this.state._variant?"button":void 0,onKeyPress:"button"===this.state._variant?this.onChange:void 0,tabIndex:"button"===this.state._variant?0:void 0,_alert:this.state._alert,_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:this.state._id,_required:this.state._required,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},t("slot",null)),t("div",{slot:"input"},t("kol-icon",{onClick:this.onChange,_ariaLabel:"",_icon:this.state._indeterminate?this.state._icon.indeterminate:this.state._checked?this.state._icon.checked:this.state._icon.unchecked}),t("input",Object.assign({ref:this.catchRef,accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,checked:!0===this.state._checked,disabled:!0===this.state._disabled,id:this.state._id,indeterminate:!0===this.state._indeterminate,name:this.state._name,required:!0===this.state._required,tabIndex:this.state._tabIndex,title:"",type:"checkbox",value:"string"==typeof this.state._value?this.state._value:""},this.controller.onFacade,{onChange:this.onChange})))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,s(this.host,this.ref)},this.onChange=t=>{this._checked=!1===this._checked,this._indeterminate=!1,this.controller.setValue(t,this._checked)},this._accessKey=void 0,this._alert=!0,this._checked=!1,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._indeterminate=void 0,this._name=void 0,this._on=void 0,this._required=void 0,this._tabIndex=void 0,this._touched=!1,this._type=void 0,this._value=void 0,this._variant=void 0,this.state={_checked:!1,_icon:{checked:"codicon codicon-check",indeterminate:"codicon codicon-remove",unchecked:"codicon codicon-add"},_id:p(),_indeterminate:!1,_variant:"checkbox"},this.controller=new m(this,"checkbox",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateChecked(t){u(this,t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateIndeterminate(t){b(this,t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateRequired(t){this.controller.validateRequired(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateType(t){this.controller.validateType(t)}validateValue(t){this.controller.validateValue(t)}validateVariant(t){this.controller.validateVariant(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return n(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_checked:["validateChecked"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_indeterminate:["validateIndeterminate"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}};f.style={default:k};export{f as kol_input_checkbox};
+import{h as t,H as e,r as i,g as a}from"./index-50adf9a0.js";import{b as n,a as s}from"./reuse-3a02afb9.js";import{g as o}from"./controller-37d0d40b.js";import{d as r}from"./a11y.tipps-1cea9822.js";import{b as d,a as l,s as h}from"./prop.validators-e402ad49.js";import{I as c}from"./controller-38789301.js";import{n as p}from"./dev.utils-157f0499.js";import"./tab-index-63d1379d.js";import"./index-81bd9b41.js";const u=(t,e)=>{d(t,"_checked",e)},b=(t,e)=>{d(t,"_indeterminate",e)};class m extends c{constructor(t,e,i){super(t,e,i),this.component=t}validateChecked(t){d(this.component,"_checked",t),this.setFormAssociatedValue(this.component.state._checked)}validateIcon(t){l(this.component,"_icons",(t=>"object"==typeof t&&null!==t&&(n(t.checked,1)||n(t.indeterminate,1)||n(t.unchecked,1))),new Set(["InputCheckboxIcons"]),t)}validateIndeterminate(t){d(this.component,"_indeterminate",t)}validateType(t){r('The "_type" prop is deprecated. Use "_variant" instead.'),this.validateVariant(t)}validateValue(t){h(this.component,"_value",t)}validateVariant(t){"checkbox"===t&&(r("[KolCheckbox] The \"_variant\" value 'checkbox' is deprecated. Use the new value 'default' instead."),t="default"),l(this.component,"_variant",(t=>"string"==typeof t&&("button"===t||"default"===t||"switch"===t)),new Set(["String {button, default, switch}"]),t)}componentWillLoad(){super.componentWillLoad(),this.validateChecked(this.component._checked),this.validateIcon(this.component._icon),this.validateIndeterminate(this.component._indeterminate),this.validateValue(this.component._value),this.validateVariant(this.component._variant||this.component._type)}}const f=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}a,button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}label{cursor:pointer}kol-input{align-items:center;display:grid;justify-items:left;width:100}kol-input.default,kol-input.switch{grid-template-columns:auto 1fr}kol-input .input{align-items:center;display:grid;order:1}kol-input .input div{display:inline-flex}kol-input .input input{margin:0}kol-input label{order:2}kol-input .hint,kol-input.error>kol-alert{grid-column:span 2}kol-input kol-alert.error{order:3}kol-input .hint{order:4}input{border-width:2px;border-style:solid;line-height:24px}input[type='checkbox']{appearance:none;background-color:#fff;cursor:pointer;transition:0.5s}input[type='checkbox'].kol-disabled:before{cursor:not-allowed}input[type='checkbox']:before{content:'';cursor:pointer}.default kol-icon,.switch kol-icon{display:none}.button{cursor:pointer;display:inline-flex;width:auto}.button input{display:none}.default input[type='checkbox']{height:1.5em;width:1.5em}.default input[type='checkbox']:before{display:block;height:1.5em;position:relative;width:1.5em}.default input[type='checkbox']:checked:before{border-radius:1px;border-style:solid;border-width:0 3px 3px 0;height:0.75em;left:calc(0.375em - 2px);transform:rotate(40deg) translate(-50%, -50%);top:calc(0.7125em - 2px);width:0.375em}.default input[type='checkbox']:indeterminate:before{background-color:#000;height:0.2em;left:0.24em;top:0.575em;width:0.8em}.switch input[type='checkbox']{display:inline-block;height:1.7em;min-width:3.2em;position:relative;width:3.2em}.switch input[type='checkbox']:before{background-color:#000;height:1.2em;left:calc(0.25em - 2px);top:calc(0.25em - 2px);position:absolute;-webkit-transition:0.5s;-moz-transition:0.5s;-ms-transition:0.5s;transition:0.5s;width:1.2em}.switch input[type='checkbox']:checked:before{-webkit-transform:translateX(1.5em);-moz-transform:translateX(1.5em);-ms-transform:translateX(1.5em);transform:translateX(1.5em)}.switch input[type='checkbox']:indeterminate:before{transform:translateX(0.75em)}",y=class{render(){const{ariaDescribedBy:i}=o(this.state);return t(e,null,t("kol-input",{class:{checkbox:!0,[this.state._variant]:!0},"data-role":"button"===this.state._variant?"button":void 0,onKeyPress:"button"===this.state._variant?this.onChange:void 0,tabIndex:"button"===this.state._variant?0:void 0,_alert:this.state._alert,_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:this.state._id,_required:this.state._required,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},t("slot",null)),t("div",{slot:"input"},t("kol-icon",{onClick:this.onChange,_ariaLabel:"",_icon:this.state._indeterminate?this.state._icon.indeterminate:this.state._checked?this.state._icon.checked:this.state._icon.unchecked}),t("input",Object.assign({ref:this.catchRef,accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,checked:this.state._checked,disabled:!0===this.state._disabled,id:this.state._id,indeterminate:this.state._indeterminate,name:this.state._name,required:!0===this.state._required,tabIndex:this.state._tabIndex,title:"",type:"checkbox",value:"string"==typeof this.state._value?this.state._value:""},this.controller.onFacade,{onChange:this.onChange})))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,s(this.host,this.ref)},this.onChange=t=>{this._checked=!this._checked,this._indeterminate=!1,this.controller.setValue(t,this._checked)},this._accessKey=void 0,this._alert=!0,this._checked=!1,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._indeterminate=void 0,this._name=void 0,this._on=void 0,this._required=void 0,this._tabIndex=void 0,this._touched=!1,this._type=void 0,this._value=void 0,this._variant=void 0,this.state={_checked:!1,_icon:{checked:"codicon codicon-check",indeterminate:"codicon codicon-remove",unchecked:"codicon codicon-add"},_id:p(),_indeterminate:!1,_variant:"default"},this.controller=new m(this,"checkbox",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateChecked(t){u(this,t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateIndeterminate(t){b(this,t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateRequired(t){this.controller.validateRequired(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateType(t){this.controller.validateType(t)}validateValue(t){this.controller.validateValue(t)}validateVariant(t){this.controller.validateVariant(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_checked:["validateChecked"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_indeterminate:["validateIndeterminate"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}};y.style={default:f};export{y as kol_input_checkbox};

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

@@ -1 +1 @@
-{"version":3,"names":["validateChecked","component","value","watchBoolean","validateIndeterminate","InputCheckboxController","InputCheckboxRadioController","constructor","name","host","super","this","setFormAssociatedValue","state","_checked","validateIcon","watchValidator","isString","checked","indeterminate","unchecked","Set","validateType","devHint","validateVariant","validateValue","setState","componentWillLoad","_icon","_indeterminate","_value","_variant","_type","defaultStyleCss","KolInputCheckbox","render","ariaDiscribedBy","getRenderStates","h","Host","class","undefined","onKeyPress","onChange","tabIndex","_alert","_disabled","_error","_hideLabel","_hint","_id","_required","_touched","onClick","_a","ref","focus","slot","_ariaLabel","Object","assign","catchRef","accessKey","_accessKey","length","join","disabled","id","_name","required","_tabIndex","title","type","controller","onFacade","hostRef","propagateFocus","event","setValue","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateId","validateName","validateOn","validateRequired","validateTabIndex","validateTouched"],"sources":["./src/types/props/checked.ts","./src/types/props/indeterminate.ts","./src/components/input-checkbox/controller.ts","./src/components/input-checkbox/style.css?tag=kol-input-checkbox&mode=default&encapsulation=shadow","./src/components/input-checkbox/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Hakt die Checkbox an.\n */\n/** en\n * Checks the checkbox.\n */\nexport type PropChecked = {\n\tchecked: boolean;\n};\n\n/* validator */\nexport const validateChecked = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_checked', value);\n};\n","import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Setzt den unbestimmten Zustand auf der Checkbox, hat keine Auswirkung auf _checked.\n */\n/** en\n * Puts the checkbox in the indeterminate state, does not change the value of _checked.\n */\nexport type PropIndeterminate = {\n\tindeterminate: boolean;\n};\n\n/* validator */\nexport const validateIndeterminate = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_indeterminate', value);\n};\n","import { Generic } from '@a11y-ui/core';\nimport { Stringified } from '../../types/common';\nimport { devHint } from '../../utils/a11y.tipps';\nimport { setState, watchBoolean, watchValidator } from '../../utils/prop.validators';\nimport { isString } from '../../utils/validator';\nimport { InputCheckboxRadioController } from '../input-radio/controller';\nimport { InputCheckboxIcon, InputCheckboxVariant, Props, Watches } from './types';\n\nexport class InputCheckboxController extends InputCheckboxRadioController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateChecked(value?: boolean): void {\n\t\twatchBoolean(this.component, '_checked', value);\n\t\tthis.setFormAssociatedValue(this.component.state._checked as string);\n\t}\n\n\tpublic validateIcon(value?: Stringified<InputCheckboxIcon>): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_icons',\n\t\t\t(value): boolean => {\n\t\t\t\treturn typeof value === 'object' && value !== null && (isString(value.checked, 1) || isString(value.indeterminate, 1) || isString(value.unchecked, 1));\n\t\t\t},\n\t\t\tnew Set(['InputCheckboxIcons']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic validateIndeterminate(value?: boolean): void {\n\t\twatchBoolean(this.component, '_indeterminate', value);\n\t}\n\n\t/**\n\t * @deprecated\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateType(value?: InputCheckboxVariant): void {\n\t\tdevHint(`The \"_type\" prop is deprecated. Use \"_variant\" instead.`);\n\t\tthis.validateVariant(value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\tsetState(this.component, '_value', value);\n\t}\n\n\tpublic validateVariant(value?: InputCheckboxVariant): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_variant',\n\t\t\t(value): boolean => typeof value === 'string' && (value === 'button' || value === 'checkbox' || value === 'switch'),\n\t\t\tnew Set(['String {button, checkbox, switch}']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateChecked(this.component._checked);\n\t\tthis.validateIcon(this.component._icon);\n\t\tthis.validateIndeterminate(this.component._indeterminate);\n\t\tthis.validateValue(this.component._value);\n\t\tthis.validateVariant(this.component._variant || this.component._type);\n\t}\n}\n","@import url(../input.css);\n@import url(common.css);\n@import url(button.css);\n@import url(checkbox.css);\n@import url(switch.css);\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { InputTypeOnDefault } from '../../types/input/types';\nimport { validateChecked, validateIndeterminate } from '../../types/props';\nimport { propagateFocus } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { InputCheckboxController } from './controller';\nimport { ComponentApi, InputCheckboxIcon, InputCheckboxVariant, States } from './types';\nimport { nonce } from '../../utils/dev.utils';\n\n@Component({\n\ttag: 'kol-input-checkbox',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputCheckbox implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputCheckboxElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDiscribedBy } = getRenderStates(this.state);\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[this.state._variant]: true,\n\t\t\t\t\t}}\n\t\t\t\t\tdata-role={this.state._variant === 'button' ? 'button' : undefined}\n\t\t\t\t\tonKeyPress={this.state._variant === 'button' ? this.onChange : undefined}\n\t\t\t\t\ttabIndex={this.state._variant === 'button' ? 0 : undefined}\n\t\t\t\t\t_alert={this.state._alert}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<kol-icon\n\t\t\t\t\t\t\tonClick={this.onChange}\n\t\t\t\t\t\t\t_ariaLabel=\"\"\n\t\t\t\t\t\t\t_icon={this.state._indeterminate ? this.state._icon.indeterminate : this.state._checked ? this.state._icon.checked : this.state._icon.unchecked}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\taccessKey={this.state._accessKey} // by checkbox?!\n\t\t\t\t\t\t\taria-describedby={ariaDiscribedBy.length > 0 ? ariaDiscribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\t\tchecked={this.state._checked === true}\n\t\t\t\t\t\t\tdisabled={this.state._disabled === true}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tindeterminate={this.state._indeterminate === true}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\trequired={this.state._required === true}\n\t\t\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\tvalue={typeof this.state._value === 'string' ? this.state._value : ''}\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t></input>\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputCheckboxController;\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Gibt an, ob die Checkbox ausgewählt ist oder nicht. (kann gelesen und gesetzt werden)\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _checked?: boolean = false;\n\n\t/**\n\t * Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Versteckt das sichtbare Label des Elements.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Ermöglicht das Überschreiben der Icons für die Checkbox.\n\t */\n\t@Prop() public _icon?: Stringified<InputCheckboxIcon>;\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Gibt an, ob die Checkbox weder ausgewählt noch nicht ausgewählt ist.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _indeterminate?: boolean;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Macht das Eingabeelement zu einem Pflichtfeld.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/**\n\t * Gibt an, welchen Tab-Index dieses Input hat.\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt an, welchen Type das Input haben soll.\n\t *\n\t * @deprecated Verwende stattdessen das Attribute _variant.\n\t */\n\t@Prop() public _type?: InputCheckboxVariant;\n\n\t/**\n\t * Gibt den Schlüssel/Namen der Checkbox an. ({ [value]: [checked] })\n\t */\n\t@Prop() public _value?: string;\n\n\t/**\n\t * Gibt an, welchen Type das Input haben soll.\n\t */\n\t@Prop() public _variant?: InputCheckboxVariant; // = 'checkbox';\n\n\t@State() public state: States = {\n\t\t_checked: false,\n\t\t_icon: {\n\t\t\tchecked: 'codicon codicon-check',\n\t\t\tindeterminate: 'codicon codicon-remove',\n\t\t\tunchecked: 'codicon codicon-add',\n\t\t},\n\t\t_id: nonce(), // ⚠ required\n\t\t_indeterminate: false,\n\t\t_variant: 'checkbox',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputCheckboxController(this, 'checkbox', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_checked')\n\tpublic validateChecked(value?: boolean): void {\n\t\tvalidateChecked(this, value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<InputCheckboxIcon>): void {\n\t\tthis.controller.validateIcon(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_indeterminate')\n\tpublic validateIndeterminate(value?: boolean): void {\n\t\tvalidateIndeterminate(this, value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: InputCheckboxVariant): void {\n\t\tthis.controller.validateType(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: InputCheckboxVariant): void {\n\t\tthis.controller.validateVariant(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t}\n\n\tprivate onChange = (event: Event): void => {\n\t\tthis._checked = this._checked === false;\n\t\tthis._indeterminate = false;\n\t\tthis.controller.setValue(event, this._checked);\n\t};\n}\n"],"mappings":"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"}
+{"version":3,"names":["validateChecked","component","value","watchBoolean","validateIndeterminate","InputCheckboxController","InputCheckboxRadioController","constructor","name","host","super","this","setFormAssociatedValue","state","_checked","validateIcon","watchValidator","isString","checked","indeterminate","unchecked","Set","validateType","devHint","validateVariant","validateValue","setState","componentWillLoad","_icon","_indeterminate","_value","_variant","_type","defaultStyleCss","KolInputCheckbox","render","ariaDescribedBy","getRenderStates","h","Host","class","checkbox","undefined","onKeyPress","onChange","tabIndex","_alert","_disabled","_error","_hideLabel","_hint","_id","_required","_touched","onClick","_a","ref","focus","slot","_ariaLabel","Object","assign","catchRef","accessKey","_accessKey","length","join","disabled","id","_name","required","_tabIndex","title","type","controller","onFacade","hostRef","propagateFocus","event","setValue","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateId","validateName","validateOn","validateRequired","validateTabIndex","validateTouched"],"sources":["./src/types/props/checked.ts","./src/types/props/indeterminate.ts","./src/components/input-checkbox/controller.ts","./src/components/input-checkbox/style.css?tag=kol-input-checkbox&mode=default&encapsulation=shadow","./src/components/input-checkbox/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Hakt die Checkbox an.\n */\n/** en\n * Checks the checkbox.\n */\nexport type PropChecked = {\n\tchecked: boolean;\n};\n\n/* validator */\nexport const validateChecked = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_checked', value);\n};\n","import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Setzt den unbestimmten Zustand auf der Checkbox, hat keine Auswirkung auf _checked.\n */\n/** en\n * Puts the checkbox in the indeterminate state, does not change the value of _checked.\n */\nexport type PropIndeterminate = {\n\tindeterminate: boolean;\n};\n\n/* validator */\nexport const validateIndeterminate = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_indeterminate', value);\n};\n","import { Generic } from '@a11y-ui/core';\nimport { Stringified } from '../../types/common';\nimport { devHint } from '../../utils/a11y.tipps';\nimport { setState, watchBoolean, watchValidator } from '../../utils/prop.validators';\nimport { isString } from '../../utils/validator';\nimport { InputCheckboxRadioController } from '../input-radio/controller';\nimport { InputCheckboxIcon, InputCheckboxVariant, Props, Watches } from './types';\n\nexport class InputCheckboxController extends InputCheckboxRadioController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateChecked(value?: boolean): void {\n\t\twatchBoolean(this.component, '_checked', value);\n\t\tthis.setFormAssociatedValue(this.component.state._checked as string);\n\t}\n\n\tpublic validateIcon(value?: Stringified<InputCheckboxIcon>): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_icons',\n\t\t\t(value): boolean => {\n\t\t\t\treturn typeof value === 'object' && value !== null && (isString(value.checked, 1) || isString(value.indeterminate, 1) || isString(value.unchecked, 1));\n\t\t\t},\n\t\t\tnew Set(['InputCheckboxIcons']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic validateIndeterminate(value?: boolean): void {\n\t\twatchBoolean(this.component, '_indeterminate', value);\n\t}\n\n\t/**\n\t * @deprecated\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateType(value?: InputCheckboxVariant): void {\n\t\tdevHint(`The \"_type\" prop is deprecated. Use \"_variant\" instead.`);\n\t\tthis.validateVariant(value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\tsetState(this.component, '_value', value);\n\t}\n\n\tpublic validateVariant(value?: InputCheckboxVariant): void {\n\t\tif (value === 'checkbox') {\n\t\t\tdevHint(`[KolCheckbox] The \"_variant\" value 'checkbox' is deprecated. Use the new value 'default' instead.`);\n\t\t\tvalue = 'default';\n\t\t}\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_variant',\n\t\t\t(value): boolean => typeof value === 'string' && (value === 'button' || value === 'default' || value === 'switch'),\n\t\t\tnew Set(['String {button, default, switch}']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateChecked(this.component._checked);\n\t\tthis.validateIcon(this.component._icon);\n\t\tthis.validateIndeterminate(this.component._indeterminate);\n\t\tthis.validateValue(this.component._value);\n\t\tthis.validateVariant(this.component._variant || this.component._type);\n\t}\n}\n","@import url(../input.css);\n@import url(common.css);\n@import url(button.css);\n@import url(checkbox.css);\n@import url(switch.css);\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { InputTypeOnDefault } from '../../types/input/types';\nimport { validateChecked, validateIndeterminate } from '../../types/props';\nimport { propagateFocus } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { InputCheckboxController } from './controller';\nimport { ComponentApi, InputCheckboxIcon, InputCheckboxVariant, States } from './types';\nimport { nonce } from '../../utils/dev.utils';\n\n@Component({\n\ttag: 'kol-input-checkbox',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputCheckbox implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputCheckboxElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tcheckbox: true,\n\t\t\t\t\t\t[this.state._variant]: true,\n\t\t\t\t\t}}\n\t\t\t\t\tdata-role={this.state._variant === 'button' ? 'button' : undefined}\n\t\t\t\t\tonKeyPress={this.state._variant === 'button' ? this.onChange : undefined}\n\t\t\t\t\ttabIndex={this.state._variant === 'button' ? 0 : undefined}\n\t\t\t\t\t_alert={this.state._alert}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<kol-icon\n\t\t\t\t\t\t\tonClick={this.onChange}\n\t\t\t\t\t\t\t_ariaLabel=\"\"\n\t\t\t\t\t\t\t_icon={this.state._indeterminate ? this.state._icon.indeterminate : this.state._checked ? this.state._icon.checked : this.state._icon.unchecked}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\taccessKey={this.state._accessKey} // by checkbox?!\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\t\tchecked={this.state._checked}\n\t\t\t\t\t\t\tdisabled={this.state._disabled === true}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tindeterminate={this.state._indeterminate}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\trequired={this.state._required === true}\n\t\t\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\tvalue={typeof this.state._value === 'string' ? this.state._value : ''}\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t></input>\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputCheckboxController;\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Gibt an, ob die Checkbox ausgewählt ist oder nicht. (kann gelesen und gesetzt werden)\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _checked?: boolean = false;\n\n\t/**\n\t * Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Versteckt das sichtbare Label des Elements.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Ermöglicht das Überschreiben der Icons für die Checkbox.\n\t */\n\t@Prop() public _icon?: Stringified<InputCheckboxIcon>;\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Gibt an, ob die Checkbox weder ausgewählt noch nicht ausgewählt ist.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _indeterminate?: boolean;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Macht das Eingabeelement zu einem Pflichtfeld.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/**\n\t * Gibt an, welchen Tab-Index dieses Input hat.\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt an, welchen Type das Input haben soll.\n\t *\n\t * @deprecated Verwende stattdessen das Attribute _variant.\n\t */\n\t@Prop() public _type?: InputCheckboxVariant;\n\n\t/**\n\t * Gibt den Schlüssel/Namen der Checkbox an. ({ [value]: [checked] })\n\t */\n\t@Prop() public _value?: string;\n\n\t/**\n\t * Gibt an, welchen Type das Input haben soll.\n\t */\n\t@Prop() public _variant?: InputCheckboxVariant; // TODO: = 'default'; in v2 setzen\n\n\t@State() public state: States = {\n\t\t_checked: false,\n\t\t_icon: {\n\t\t\tchecked: 'codicon codicon-check',\n\t\t\tindeterminate: 'codicon codicon-remove',\n\t\t\tunchecked: 'codicon codicon-add',\n\t\t},\n\t\t_id: nonce(), // ⚠ required\n\t\t_indeterminate: false,\n\t\t_variant: 'default',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputCheckboxController(this, 'checkbox', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_checked')\n\tpublic validateChecked(value?: boolean): void {\n\t\tvalidateChecked(this, value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<InputCheckboxIcon>): void {\n\t\tthis.controller.validateIcon(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_indeterminate')\n\tpublic validateIndeterminate(value?: boolean): void {\n\t\tvalidateIndeterminate(this, value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: InputCheckboxVariant): void {\n\t\tthis.controller.validateType(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: InputCheckboxVariant): void {\n\t\tthis.controller.validateVariant(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t}\n\n\tprivate onChange = (event: Event): void => {\n\t\tthis._checked = !this._checked;\n\t\tthis._indeterminate = false;\n\t\tthis.controller.setValue(event, this._checked);\n\t};\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,H as i,r as e,g as a}from"./index-50adf9a0.js";import{a as s}from"./reuse-3a02afb9.js";import{g as n}from"./controller-cbcb5b86.js";import{a as o,d as l,w as r}from"./prop.validators-e402ad49.js";import{I as d}from"./controller-icon-8695323b.js";import{n as p}from"./dev.utils-157f0499.js";import"./a11y.tipps-1cea9822.js";import"./tab-index-63d1379d.js";import"./index-81bd9b41.js";import"./icon-00018c54.js";class u extends d{constructor(t,e,i){super(t,e,i),this.component=t}validateAutoComplete(t){o(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateList(t){l(this.component,"_list",(t=>"string"==typeof t),t)}validateValue(t){r(this.component,"_value",t)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateList(this.component._list),this.validateValue(this.component._value)}}const h=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}a,button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}div.input{cursor:pointer}",c=class{render(){const{ariaDiscribedBy:e}=n(this.state),a=Array.isArray(this.state._list)&&this.state._list.length>0;return t(i,null,t("kol-input",{_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_list:this.state._list,_smartButton:this.state._smartButton,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},t("slot",null)),t("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:!0===this.state._disabled,id:this.state._id,list:a?`${this.state._id}-list`:void 0,name:this.state._name,slot:"input",spellcheck:"false",type:"color",value:this.state._value},this.controller.onFacade))))}constructor(t){e(this,t),this.catchRef=t=>{this.ref=t,s(this.host,this.ref)},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._list=void 0,this._name=void 0,this._on=void 0,this._smartButton=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_id:p(),_list:[]},this.controller=new u(this,"color",this.host)}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)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateList(t){this.controller.validateList(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_list:["validateList"],_name:["validateName"],_on:["validateOn"],_smartButton:["validateSmartButton"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};c.style={default:h};export{c as kol_input_color};
+import{h as t,H as e,r as i,g as a}from"./index-50adf9a0.js";import{a as s}from"./reuse-3a02afb9.js";import{g as n}from"./controller-37d0d40b.js";import{a as o,d as l,w as r}from"./prop.validators-e402ad49.js";import{I as d}from"./controller-icon-6249a817.js";import{n as p}from"./dev.utils-157f0499.js";import"./a11y.tipps-1cea9822.js";import"./tab-index-63d1379d.js";import"./index-81bd9b41.js";import"./icon-00018c54.js";class u extends d{constructor(t,e,i){super(t,e,i),this.component=t}validateAutoComplete(t){o(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateList(t){l(this.component,"_list",(t=>"string"==typeof t),t)}validateValue(t){r(this.component,"_value",t)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateList(this.component._list),this.validateValue(this.component._value)}}const h=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}a,button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}div.input{cursor:pointer}",c=class{render(){const{ariaDescribedBy:i}=n(this.state),a=Array.isArray(this.state._list)&&this.state._list.length>0;return t(e,null,t("kol-input",{class:{color:!0},_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_list:this.state._list,_smartButton:this.state._smartButton,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},t("slot",null)),t("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:!0===this.state._disabled,id:this.state._id,list:a?`${this.state._id}-list`:void 0,name:this.state._name,slot:"input",spellcheck:"false",type:"color",value:this.state._value},this.controller.onFacade))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,s(this.host,this.ref)},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._list=void 0,this._name=void 0,this._on=void 0,this._smartButton=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_id:p(),_list:[]},this.controller=new u(this,"color",this.host)}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)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateList(t){this.controller.validateList(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_list:["validateList"],_name:["validateName"],_on:["validateOn"],_smartButton:["validateSmartButton"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};c.style={default:h};export{c as kol_input_color};

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

@@ -1 +1 @@
-{"version":3,"names":["InputColorController","InputIconController","constructor","component","name","host","super","this","validateAutoComplete","value","watchValidator","Set","validateList","watchJsonArrayString","item","validateValue","watchString","componentWillLoad","_autoComplete","_list","_value","defaultStyleCss","KolInputColor","render","ariaDiscribedBy","getRenderStates","state","hasList","Array","isArray","length","h","Host","_disabled","_error","_hideLabel","_hint","_icon","_id","_smartButton","_touched","onClick","_a","ref","focus","slot","Object","assign","catchRef","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoComplete","autoCorrect","disabled","id","list","_name","spellcheck","type","controller","onFacade","hostRef","propagateFocus","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateName","validateOn","validateSmartButton","validateTabIndex","validateTouched","_alert"],"sources":["./src/components/input-color/controller.ts","./src/components/input-color/style.css?tag=kol-input-color&mode=default&encapsulation=shadow","./src/components/input-color/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { Stringified } from '../../types/common';\nimport { InputTypeOnOff } from '../../types/input/types';\nimport { watchJsonArrayString, watchString, watchValidator } from '../../utils/prop.validators';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { Props, Watches } from './types';\n\nexport class InputColorController extends InputIconController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_autoComplete',\n\t\t\t(value): boolean => typeof value === 'string' && (value === 'on' || value === 'off'),\n\t\t\tnew Set(['on | off']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic validateList(value?: Stringified<string[]>): void {\n\t\twatchJsonArrayString(this.component, '_list', (item: string) => typeof item === 'string', value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAutoComplete(this.component._autoComplete);\n\t\tthis.validateList(this.component._list);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\ndiv.input {\n\tcursor: pointer;\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { ButtonProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\n\nimport { InputTypeOnDefault, InputTypeOnOff } from '../../types/input/types';\nimport { propagateFocus } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { InputColorController } from './controller';\nimport { ComponentApi, States } from './types';\nimport { nonce } from '../../utils/dev.utils';\n\n@Component({\n\ttag: 'kol-input-color',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputColor implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputColorElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDiscribedBy } = getRenderStates(this.state);\n\t\tconst hasList = Array.isArray(this.state._list) && this.state._list.length > 0;\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-input\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icon={this.state._icon}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_list={this.state._list}\n\t\t\t\t\t_smartButton={this.state._smartButton}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\taria-describedby={ariaDiscribedBy.length > 0 ? ariaDiscribedBy.join(' ') : undefined}\n\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\tdisabled={this.state._disabled === true}\n\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\tlist={hasList ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\ttype=\"color\"\n\t\t\t\t\t\tvalue={this.state._value as string}\n\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t/>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputColorController;\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld autovervollständigt werden kann.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\n\n\t/**\n\t * Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Versteckt das sichtbare Label des Elements.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Gibt die Liste der Vorschlagswörter an.\n\t */\n\t@Prop() public _list?: Stringified<string[]>;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label).\n\t */\n\t@Prop() public _smartButton?: ButtonProps;\n\n\t/**\n\t * Gibt an, welchen Tab-Index dieses Input hat.\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop() public _value?: string;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_id: nonce(), // ⚠ required\n\t\t_list: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputColorController(this, 'color', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<string[]>): void {\n\t\tthis.controller.validateList(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tthis.controller.validateSmartButton(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"names":["InputColorController","InputIconController","constructor","component","name","host","super","this","validateAutoComplete","value","watchValidator","Set","validateList","watchJsonArrayString","item","validateValue","watchString","componentWillLoad","_autoComplete","_list","_value","defaultStyleCss","KolInputColor","render","ariaDescribedBy","getRenderStates","state","hasList","Array","isArray","length","h","Host","class","color","_disabled","_error","_hideLabel","_hint","_icon","_id","_smartButton","_touched","onClick","_a","ref","focus","slot","Object","assign","catchRef","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoComplete","autoCorrect","disabled","id","list","_name","spellcheck","type","controller","onFacade","hostRef","propagateFocus","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateName","validateOn","validateSmartButton","validateTabIndex","validateTouched","_alert"],"sources":["./src/components/input-color/controller.ts","./src/components/input-color/style.css?tag=kol-input-color&mode=default&encapsulation=shadow","./src/components/input-color/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { Stringified } from '../../types/common';\nimport { InputTypeOnOff } from '../../types/input/types';\nimport { watchJsonArrayString, watchString, watchValidator } from '../../utils/prop.validators';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { Props, Watches } from './types';\n\nexport class InputColorController extends InputIconController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_autoComplete',\n\t\t\t(value): boolean => typeof value === 'string' && (value === 'on' || value === 'off'),\n\t\t\tnew Set(['on | off']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic validateList(value?: Stringified<string[]>): void {\n\t\twatchJsonArrayString(this.component, '_list', (item: string) => typeof item === 'string', value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAutoComplete(this.component._autoComplete);\n\t\tthis.validateList(this.component._list);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\ndiv.input {\n\tcursor: pointer;\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { ButtonProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\n\nimport { InputTypeOnDefault, InputTypeOnOff } from '../../types/input/types';\nimport { propagateFocus } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { InputColorController } from './controller';\nimport { ComponentApi, States } from './types';\nimport { nonce } from '../../utils/dev.utils';\n\n@Component({\n\ttag: 'kol-input-color',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputColor implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputColorElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasList = Array.isArray(this.state._list) && this.state._list.length > 0;\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tcolor: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icon={this.state._icon}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_list={this.state._list}\n\t\t\t\t\t_smartButton={this.state._smartButton}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\tdisabled={this.state._disabled === true}\n\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\tlist={hasList ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\ttype=\"color\"\n\t\t\t\t\t\tvalue={this.state._value as string}\n\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t/>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputColorController;\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld autovervollständigt werden kann.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\n\n\t/**\n\t * Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Versteckt das sichtbare Label des Elements.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Gibt die Liste der Vorschlagswörter an.\n\t */\n\t@Prop() public _list?: Stringified<string[]>;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label).\n\t */\n\t@Prop() public _smartButton?: ButtonProps;\n\n\t/**\n\t * Gibt an, welchen Tab-Index dieses Input hat.\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop() public _value?: string;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_id: nonce(), // ⚠ required\n\t\t_list: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputColorController(this, 'color', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<string[]>): void {\n\t\tthis.controller.validateList(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tthis.controller.validateSmartButton(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t}\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,H as e,r as i,g as a}from"./index-50adf9a0.js";import{a as s}from"./reuse-3a02afb9.js";import{p as n}from"./controller-873db1b1.js";import{g as l}from"./controller-cbcb5b86.js";import{b as d}from"./prop.validators-e402ad49.js";import{I as o}from"./controller-22781e1d.js";import{n as r}from"./dev.utils-157f0499.js";import"./a11y.tipps-1cea9822.js";import"./tab-index-63d1379d.js";import"./index-81bd9b41.js";import"./controller-0f18a72b.js";import"./controller-icon-8695323b.js";import"./icon-00018c54.js";const h=(t,e)=>{d(t,"_multiple",e)};class p extends o{constructor(t,e,i){super(t,e,i),this.component=t}validateMultiple(t){d(this.component,"_multiple",t)}componentWillLoad(){super.componentWillLoad(),this.validateMultiple(this.component._multiple)}}const u=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}a,button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}div.input{cursor:text}",c=class{render(){const{ariaDiscribedBy:i}=l(this.state),a=Array.isArray(this.state._list)&&this.state._list.length>0;return t(e,{class:{"has-value":this.state._hasValue}},t("kol-input",{_alert:this.state._alert,_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_list:this.state._list,_readOnly:this.state._readOnly,_required:this.state._required,_smartButton:this.state._smartButton,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},t("slot",null)),t("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,multiple:this.state._multiple,id:this.state._id,list:a?`${this.state._id}-list`:void 0,maxlength:this.state._maxLength,name:this.state._name,pattern:this.state._pattern,placeholder:this.state._placeholder,readOnly:this.state._readOnly,required:this.state._required,size:this.state._size,slot:"input",spellcheck:"false",type:"email",value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp}))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,s(this.host,this.ref)},this.onKeyUp=t=>{"Enter"===t.code?n({form:this.host,ref:this.ref}):this.controller.onFacade.onChange(t)},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._list=void 0,this._maxLength=void 0,this._multiple=void 0,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=void 0,this._required=void 0,this._size=void 0,this._smartButton=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_id:r(),_hasValue:!1,_list:[]},this.controller=new p(this,"email",this.host)}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)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateList(t){this.controller.validateList(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateMultiple(t){h(this,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)}validateSize(t){this.controller.validateSize(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_list:["validateList"],_maxLength:["validateMaxLength"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_size:["validateSize"],_smartButton:["validateSmartButton"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};c.style={default:u};export{c as kol_input_email};
+import{h as t,H as e,r as i,g as a}from"./index-50adf9a0.js";import{a as s}from"./reuse-3a02afb9.js";import{p as n}from"./controller-873db1b1.js";import{g as l}from"./controller-37d0d40b.js";import{b as d}from"./prop.validators-e402ad49.js";import{I as o}from"./controller-29e1bd76.js";import{n as r}from"./dev.utils-157f0499.js";import"./a11y.tipps-1cea9822.js";import"./tab-index-63d1379d.js";import"./index-81bd9b41.js";import"./controller-c5b419c7.js";import"./controller-icon-6249a817.js";import"./icon-00018c54.js";const h=(t,e)=>{d(t,"_multiple",e)};class p extends o{constructor(t,e,i){super(t,e,i),this.component=t}validateMultiple(t){d(this.component,"_multiple",t)}componentWillLoad(){super.componentWillLoad(),this.validateMultiple(this.component._multiple)}}const u=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}a,button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}div.input{cursor:text}",c=class{render(){const{ariaDescribedBy:i}=l(this.state),a=Array.isArray(this.state._list)&&this.state._list.length>0;return t(e,{class:{"has-value":this.state._hasValue}},t("kol-input",{class:{email:!0},_alert:this.state._alert,_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_list:this.state._list,_readOnly:this.state._readOnly,_required:this.state._required,_smartButton:this.state._smartButton,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},t("slot",null)),t("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,multiple:this.state._multiple,id:this.state._id,list:a?`${this.state._id}-list`:void 0,maxlength:this.state._maxLength,name:this.state._name,pattern:this.state._pattern,placeholder:this.state._placeholder,readOnly:this.state._readOnly,required:this.state._required,size:this.state._size,slot:"input",spellcheck:"false",type:"email",value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp}))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,s(this.host,this.ref)},this.onKeyUp=t=>{"Enter"===t.code?n({form:this.host,ref:this.ref}):this.controller.onFacade.onChange(t)},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._list=void 0,this._maxLength=void 0,this._multiple=void 0,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=void 0,this._required=void 0,this._size=void 0,this._smartButton=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_id:r(),_hasValue:!1,_list:[]},this.controller=new p(this,"email",this.host)}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)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateList(t){this.controller.validateList(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateMultiple(t){h(this,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)}validateSize(t){this.controller.validateSize(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_list:["validateList"],_maxLength:["validateMaxLength"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_size:["validateSize"],_smartButton:["validateSmartButton"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};c.style={default:u};export{c as kol_input_email};

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

@@ -1 +1 @@
-{"version":3,"names":["validateMultiple","component","value","watchBoolean","InputEmailController","InputTextEmailController","constructor","name","host","super","this","componentWillLoad","_multiple","defaultStyleCss","KolInputEmail","render","ariaDiscribedBy","getRenderStates","state","hasList","Array","isArray","_list","length","h","Host","class","_hasValue","_alert","_disabled","_error","_hideLabel","_hint","_icon","_id","_readOnly","_required","_smartButton","_touched","onClick","_a","ref","focus","slot","Object","assign","catchRef","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoComplete","_autoComplete","autoCorrect","disabled","multiple","id","list","maxlength","_maxLength","_name","pattern","_pattern","placeholder","_placeholder","readOnly","required","size","_size","spellcheck","type","_value","controller","onFacade","onKeyUp","hostRef","propagateFocus","event","code","propagateSubmitEventToForm","form","onChange","nonce","validateAccessKey","validateAlert","validateAutoComplete","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateList","validateMaxLength","validateName","validateOn","validatePattern","validatePlaceholder","validateReadOnly","validateRequired","validateSize","validateSmartButton","validateTabIndex","validateTouched","validateValue","addValueChangeListener","v"],"sources":["./src/types/props/multiple.ts","./src/components/input-email/controller.ts","./src/components/input-email/style.css?tag=kol-input-email&mode=default&encapsulation=shadow","./src/components/input-email/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Schlatet das Eingabefeld um, sodass es mehrere Eingaben akzeptiert.\n */\n/** en\n * Makes the input accept multiple inputs.\n */\nexport type PropMultiple = {\n\tmultiple: boolean;\n};\n\n/* validator */\nexport const validateMultiple = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_multiple', value);\n};\n","import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\nimport { InputTextEmailController } from '../input-text/controller';\nimport { Props, Watches } from './types';\n\nexport class InputEmailController extends InputTextEmailController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateMultiple(value?: boolean): void {\n\t\twatchBoolean(this.component, '_multiple', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateMultiple(this.component._multiple);\n\t}\n}\n","@import url(../input-line.css);\ndiv.input {\n\tcursor: text;\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { ButtonProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\n\nimport { InputTypeOnDefault, InputTypeOnOff } from '../../types/input/types';\nimport { propagateFocus } from '../../utils/reuse';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { getRenderStates } from '../input/controller';\nimport { InputEmailController } from './controller';\nimport { ComponentApi, States } from './types';\nimport { validateMultiple } from '../../types/props';\nimport { nonce } from '../../utils/dev.utils';\n\n@Component({\n\ttag: 'kol-input-email',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputEmail implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputEmailElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tprivate readonly onKeyUp = (event: KeyboardEvent) => {\n\t\tif (event.code === 'Enter') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.ref,\n\t\t\t});\n\t\t} else {\n\t\t\tthis.controller.onFacade.onChange(event);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDiscribedBy } = getRenderStates(this.state);\n\t\tconst hasList = Array.isArray(this.state._list) && this.state._list.length > 0;\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'has-value': this.state._hasValue,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<kol-input\n\t\t\t\t\t_alert={this.state._alert}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icon={this.state._icon}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_list={this.state._list}\n\t\t\t\t\t_readOnly={this.state._readOnly}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_smartButton={this.state._smartButton}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\taria-describedby={ariaDiscribedBy.length > 0 ? ariaDiscribedBy.join(' ') : undefined}\n\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\tmultiple={this.state._multiple}\n\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\tlist={hasList ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\tmaxlength={this.state._maxLength}\n\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\tpattern={this.state._pattern}\n\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\treadOnly={this.state._readOnly}\n\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\tsize={this.state._size}\n\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t// title={this.state._title}\n\t\t\t\t\t\ttype=\"email\"\n\t\t\t\t\t\tvalue={this.state._value as string}\n\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\tonKeyUp={this.onKeyUp}\n\t\t\t\t\t/>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputEmailController;\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld autovervollständigt werden kann.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\n\n\t/**\n\t * Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Versteckt das sichtbare Label des Elements.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Gibt die Liste der Vorschlagswörter an.\n\t */\n\t@Prop() public _list?: Stringified<string[]>;\n\n\t/**\n\t * Gibt an, wie viele Zeichen man maximal eingeben kann.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Gibt an, ob mehrere Werte eingegeben werden können.\n\t */\n\t@Prop({ reflect: true }) public _multiple?: boolean;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Gibt ein Prüfpattern für das Eingabefeld an.\n\t */\n\t@Prop() public _pattern?: string;\n\n\t/**\n\t * Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Setzt das Eingabefeld in den schreibgeschützten Modus.\n\t */\n\t@Prop({ reflect: true }) public _readOnly?: boolean;\n\n\t/**\n\t * Macht das Eingabeelement zu einem Pflichtfeld.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/**\n\t * Setzt die Breite des Eingabefeldes in Buchstabenbreiten.\n\t */\n\t@Prop() public _size?: number;\n\n\t/**\n\t * Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label).\n\t */\n\t@Prop() public _smartButton?: ButtonProps;\n\n\t/**\n\t * Gibt an, welchen Tab-Index dieses Input hat.\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop() public _value?: string;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_id: nonce(), // ⚠ required\n\t\t_hasValue: false,\n\t\t_list: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputEmailController(this, 'email', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<string[]>): void {\n\t\tthis.controller.validateList(value);\n\t}\n\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t}\n\n\t@Watch('_multiple')\n\tpublic validateMultiple(value?: boolean): void {\n\t\tvalidateMultiple(this, value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_pattern')\n\tpublic validatePattern(value?: string): void {\n\t\tthis.controller.validatePattern(value);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: boolean): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_size')\n\tpublic validateSize(value?: number): void {\n\t\tthis.controller.validateSize(value);\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tthis.controller.validateSmartButton(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"names":["validateMultiple","component","value","watchBoolean","InputEmailController","InputTextEmailController","constructor","name","host","super","this","componentWillLoad","_multiple","defaultStyleCss","KolInputEmail","render","ariaDescribedBy","getRenderStates","state","hasList","Array","isArray","_list","length","h","Host","class","_hasValue","email","_alert","_disabled","_error","_hideLabel","_hint","_icon","_id","_readOnly","_required","_smartButton","_touched","onClick","_a","ref","focus","slot","Object","assign","catchRef","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoComplete","_autoComplete","autoCorrect","disabled","multiple","id","list","maxlength","_maxLength","_name","pattern","_pattern","placeholder","_placeholder","readOnly","required","size","_size","spellcheck","type","_value","controller","onFacade","onKeyUp","hostRef","propagateFocus","event","code","propagateSubmitEventToForm","form","onChange","nonce","validateAccessKey","validateAlert","validateAutoComplete","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateList","validateMaxLength","validateName","validateOn","validatePattern","validatePlaceholder","validateReadOnly","validateRequired","validateSize","validateSmartButton","validateTabIndex","validateTouched","validateValue","addValueChangeListener","v"],"sources":["./src/types/props/multiple.ts","./src/components/input-email/controller.ts","./src/components/input-email/style.css?tag=kol-input-email&mode=default&encapsulation=shadow","./src/components/input-email/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Schlatet das Eingabefeld um, sodass es mehrere Eingaben akzeptiert.\n */\n/** en\n * Makes the input accept multiple inputs.\n */\nexport type PropMultiple = {\n\tmultiple: boolean;\n};\n\n/* validator */\nexport const validateMultiple = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_multiple', value);\n};\n","import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\nimport { InputTextEmailController } from '../input-text/controller';\nimport { Props, Watches } from './types';\n\nexport class InputEmailController extends InputTextEmailController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateMultiple(value?: boolean): void {\n\t\twatchBoolean(this.component, '_multiple', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateMultiple(this.component._multiple);\n\t}\n}\n","@import url(../input-line.css);\ndiv.input {\n\tcursor: text;\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { ButtonProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\n\nimport { InputTypeOnDefault, InputTypeOnOff } from '../../types/input/types';\nimport { propagateFocus } from '../../utils/reuse';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { getRenderStates } from '../input/controller';\nimport { InputEmailController } from './controller';\nimport { ComponentApi, States } from './types';\nimport { validateMultiple } from '../../types/props';\nimport { nonce } from '../../utils/dev.utils';\n\n@Component({\n\ttag: 'kol-input-email',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputEmail implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputEmailElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tprivate readonly onKeyUp = (event: KeyboardEvent) => {\n\t\tif (event.code === 'Enter') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.ref,\n\t\t\t});\n\t\t} else {\n\t\t\tthis.controller.onFacade.onChange(event);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasList = Array.isArray(this.state._list) && this.state._list.length > 0;\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'has-value': this.state._hasValue,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\temail: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_alert={this.state._alert}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icon={this.state._icon}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_list={this.state._list}\n\t\t\t\t\t_readOnly={this.state._readOnly}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_smartButton={this.state._smartButton}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\tmultiple={this.state._multiple}\n\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\tlist={hasList ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\tmaxlength={this.state._maxLength}\n\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\tpattern={this.state._pattern}\n\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\treadOnly={this.state._readOnly}\n\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\tsize={this.state._size}\n\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t// title={this.state._title}\n\t\t\t\t\t\ttype=\"email\"\n\t\t\t\t\t\tvalue={this.state._value as string}\n\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\tonKeyUp={this.onKeyUp}\n\t\t\t\t\t/>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputEmailController;\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld autovervollständigt werden kann.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\n\n\t/**\n\t * Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Versteckt das sichtbare Label des Elements.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Gibt die Liste der Vorschlagswörter an.\n\t */\n\t@Prop() public _list?: Stringified<string[]>;\n\n\t/**\n\t * Gibt an, wie viele Zeichen man maximal eingeben kann.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Gibt an, ob mehrere Werte eingegeben werden können.\n\t */\n\t@Prop({ reflect: true }) public _multiple?: boolean;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Gibt ein Prüfpattern für das Eingabefeld an.\n\t */\n\t@Prop() public _pattern?: string;\n\n\t/**\n\t * Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Setzt das Eingabefeld in den schreibgeschützten Modus.\n\t */\n\t@Prop({ reflect: true }) public _readOnly?: boolean;\n\n\t/**\n\t * Macht das Eingabeelement zu einem Pflichtfeld.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/**\n\t * Setzt die Breite des Eingabefeldes in Buchstabenbreiten.\n\t */\n\t@Prop() public _size?: number;\n\n\t/**\n\t * Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label).\n\t */\n\t@Prop() public _smartButton?: ButtonProps;\n\n\t/**\n\t * Gibt an, welchen Tab-Index dieses Input hat.\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop() public _value?: string;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_id: nonce(), // ⚠ required\n\t\t_hasValue: false,\n\t\t_list: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputEmailController(this, 'email', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<string[]>): void {\n\t\tthis.controller.validateList(value);\n\t}\n\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t}\n\n\t@Watch('_multiple')\n\tpublic validateMultiple(value?: boolean): void {\n\t\tvalidateMultiple(this, value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_pattern')\n\tpublic validatePattern(value?: string): void {\n\t\tthis.controller.validatePattern(value);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: boolean): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_size')\n\tpublic validateSize(value?: number): void {\n\t\tthis.controller.validateSize(value);\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tthis.controller.validateSmartButton(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,H as e,r as i,g as a}from"./index-50adf9a0.js";import{a as s}from"./reuse-3a02afb9.js";import{g as n}from"./controller-cbcb5b86.js";import{w as l,b as o}from"./prop.validators-e402ad49.js";import{I as d}from"./controller-icon-8695323b.js";import{n as r}from"./dev.utils-157f0499.js";import"./a11y.tipps-1cea9822.js";import"./tab-index-63d1379d.js";import"./index-81bd9b41.js";import"./icon-00018c54.js";class p extends d{constructor(t,e,i){super(t,e,i),this.component=t}validateAccept(t){l(this.component,"_accept",t)}validateMultiple(t){o(this.component,"_multiple",t)}validateRequired(t){o(this.component,"_required",t)}validateValue(t){l(this.component,"_value",t),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateAccept(this.component._accept),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateValue(this.component._value)}}const u=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}a,button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}label input[type='file']::-webkit-file-upload-button{display:none}label input[type='file']:before{content:'Datei auswählen'}label input[multiple]:before{content:'Dateien auswählen'}div.input{cursor:pointer}",h=class{render(){const{ariaDiscribedBy:i}=n(this.state);return t(e,null,t("kol-input",{_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_required:this.state._required,_smartButton:this.state._smartButton,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},t("slot",null)),t("input",Object.assign({ref:this.catchRef,title:"",accept:this.state._accept,accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,slot:"input",spellcheck:"false",type:"file",value:this.state._value},this.controller.onFacade,{onChange:this.onChange}))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,s(this.host,this.ref)},this.onChange=t=>{var e;this.ref instanceof HTMLInputElement&&"file"===this.ref.type&&"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onChange)&&this.state._on.onChange(t,this.ref.files)},this._accept=void 0,this._accessKey=void 0,this._alert=!0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._multiple=void 0,this._name=void 0,this._on=void 0,this._required=void 0,this._smartButton=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_id:r()},this.controller=new p(this,"file",this.host)}validateAccept(t){this.controller.validateAccept(t)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateRequired(t){this.controller.validateRequired(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return a(this)}static get watchers(){return{_accept:["validateAccept"],_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_smartButton:["validateSmartButton"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};h.style={default:u};export{h as kol_input_file};
+import{h as t,H as e,r as i,g as a}from"./index-50adf9a0.js";import{a as s}from"./reuse-3a02afb9.js";import{g as n}from"./controller-37d0d40b.js";import{w as l,b as o}from"./prop.validators-e402ad49.js";import{I as d}from"./controller-icon-6249a817.js";import{n as r}from"./dev.utils-157f0499.js";import"./a11y.tipps-1cea9822.js";import"./tab-index-63d1379d.js";import"./index-81bd9b41.js";import"./icon-00018c54.js";class p extends d{constructor(t,e,i){super(t,e,i),this.component=t}validateAccept(t){l(this.component,"_accept",t)}validateMultiple(t){o(this.component,"_multiple",t)}validateRequired(t){o(this.component,"_required",t)}validateValue(t){l(this.component,"_value",t),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateAccept(this.component._accept),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateValue(this.component._value)}}const u=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}a,button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}label input[type='file']::-webkit-file-upload-button{display:none}label input[type='file']:before{content:'Datei auswählen'}label input[multiple]:before{content:'Dateien auswählen'}div.input{cursor:pointer}",h=class{render(){const{ariaDescribedBy:i}=n(this.state);return t(e,null,t("kol-input",{class:{file:!0},_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_required:this.state._required,_smartButton:this.state._smartButton,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},t("slot",null)),t("input",Object.assign({ref:this.catchRef,title:"",accept:this.state._accept,accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,slot:"input",spellcheck:"false",type:"file",value:this.state._value},this.controller.onFacade,{onChange:this.onChange}))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,s(this.host,this.ref)},this.onChange=t=>{var e;this.ref instanceof HTMLInputElement&&"file"===this.ref.type&&"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onChange)&&this.state._on.onChange(t,this.ref.files)},this._accept=void 0,this._accessKey=void 0,this._alert=!0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._multiple=void 0,this._name=void 0,this._on=void 0,this._required=void 0,this._smartButton=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_id:r()},this.controller=new p(this,"file",this.host)}validateAccept(t){this.controller.validateAccept(t)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateRequired(t){this.controller.validateRequired(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return a(this)}static get watchers(){return{_accept:["validateAccept"],_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_smartButton:["validateSmartButton"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};h.style={default:u};export{h as kol_input_file};

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

@@ -1 +1 @@
-{"version":3,"names":["InputFileController","InputIconController","constructor","component","name","host","super","this","validateAccept","value","watchString","validateMultiple","watchBoolean","validateRequired","validateValue","setFormAssociatedValue","_value","componentWillLoad","_accept","_multiple","_required","defaultStyleCss","KolInputFile","render","ariaDiscribedBy","getRenderStates","state","h","Host","_disabled","_error","_hideLabel","_hint","_icon","_id","_smartButton","_touched","onClick","_a","ref","focus","slot","Object","assign","catchRef","title","accept","accessKey","_accessKey","length","join","undefined","autoCapitalize","autoCorrect","disabled","id","multiple","_name","required","spellcheck","type","controller","onFacade","onChange","hostRef","propagateFocus","event","HTMLInputElement","_on","files","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateName","validateOn","validateSmartButton","validateTabIndex","validateTouched","_alert"],"sources":["./src/components/input-file/controller.ts","./src/components/input-file/style.css?tag=kol-input-file&mode=default&encapsulation=shadow","./src/components/input-file/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchBoolean, watchString } from '../../utils/prop.validators';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { Props, Watches } from './types';\n\nexport class InputFileController extends InputIconController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateAccept(value?: string): void {\n\t\twatchString(this.component, '_accept', value);\n\t}\n\n\tpublic validateMultiple(value?: boolean): void {\n\t\twatchBoolean(this.component, '_multiple', value);\n\t}\n\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value);\n\t\tthis.setFormAssociatedValue(this.component._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAccept(this.component._accept);\n\t\tthis.validateMultiple(this.component._multiple);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\nlabel input[type='file']::-webkit-file-upload-button {\n\tdisplay: none;\n}\nlabel input[type='file']:before {\n\tcontent: 'Datei auswählen';\n}\nlabel input[multiple]:before {\n\tcontent: 'Dateien auswählen';\n}\ndiv.input {\n\tcursor: pointer;\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { ButtonProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\n\nimport { InputTypeOnDefault } from '../../types/input/types';\nimport { propagateFocus } from '../../utils/reuse';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { getRenderStates } from '../input/controller';\nimport { InputFileController } from './controller';\nimport { ComponentApi, States } from './types';\nimport { nonce } from '../../utils/dev.utils';\n\n@Component({\n\ttag: 'kol-input-file',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputFile implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputFileElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDiscribedBy } = getRenderStates(this.state);\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-input\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icon={this.state._icon}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_smartButton={this.state._smartButton}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\taccept={this.state._accept}\n\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\taria-describedby={ariaDiscribedBy.length > 0 ? ariaDiscribedBy.join(' ') : undefined}\n\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\tmultiple={this.state._multiple}\n\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\ttype=\"file\"\n\t\t\t\t\t\tvalue={this.state._value as string}\n\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t/>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputFileController;\n\n\t/**\n\t * Gibt an, welche Dateiformate erlaubt sind.\n\t */\n\t@Prop() public _accept?: string;\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Versteckt das sichtbare Label des Elements.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Gibt an, ob mehrere Werte eingegeben werden können.\n\t */\n\t@Prop({ reflect: true }) public _multiple?: boolean;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Macht das Eingabeelement zu einem Pflichtfeld.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/**\n\t * Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label).\n\t */\n\t@Prop() public _smartButton?: ButtonProps;\n\n\t/**\n\t * Gibt an, welchen Tab-Index dieses Input hat.\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop() public _value?: string;\n\n\t@State() public state: States = {\n\t\t_id: nonce(), // ⚠ required\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputFileController(this, 'file', this.host);\n\t}\n\n\t@Watch('_accept')\n\tpublic validateAccept(value?: string): void {\n\t\tthis.controller.validateAccept(value);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_multiple')\n\tpublic validateMultiple(value?: boolean): void {\n\t\tthis.controller.validateMultiple(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tthis.controller.validateSmartButton(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t}\n\n\tprivate onChange = (event: Event) => {\n\t\tif (this.ref instanceof HTMLInputElement && this.ref.type === 'file' && typeof this.state._on?.onChange === 'function') {\n\t\t\tthis.state._on.onChange(event, this.ref.files);\n\t\t}\n\t};\n}\n"],"mappings":"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"}
+{"version":3,"names":["InputFileController","InputIconController","constructor","component","name","host","super","this","validateAccept","value","watchString","validateMultiple","watchBoolean","validateRequired","validateValue","setFormAssociatedValue","_value","componentWillLoad","_accept","_multiple","_required","defaultStyleCss","KolInputFile","render","ariaDescribedBy","getRenderStates","state","h","Host","class","file","_disabled","_error","_hideLabel","_hint","_icon","_id","_smartButton","_touched","onClick","_a","ref","focus","slot","Object","assign","catchRef","title","accept","accessKey","_accessKey","length","join","undefined","autoCapitalize","autoCorrect","disabled","id","multiple","_name","required","spellcheck","type","controller","onFacade","onChange","hostRef","propagateFocus","event","HTMLInputElement","_on","files","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateName","validateOn","validateSmartButton","validateTabIndex","validateTouched","_alert"],"sources":["./src/components/input-file/controller.ts","./src/components/input-file/style.css?tag=kol-input-file&mode=default&encapsulation=shadow","./src/components/input-file/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchBoolean, watchString } from '../../utils/prop.validators';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { Props, Watches } from './types';\n\nexport class InputFileController extends InputIconController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateAccept(value?: string): void {\n\t\twatchString(this.component, '_accept', value);\n\t}\n\n\tpublic validateMultiple(value?: boolean): void {\n\t\twatchBoolean(this.component, '_multiple', value);\n\t}\n\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value);\n\t\tthis.setFormAssociatedValue(this.component._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAccept(this.component._accept);\n\t\tthis.validateMultiple(this.component._multiple);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\nlabel input[type='file']::-webkit-file-upload-button {\n\tdisplay: none;\n}\nlabel input[type='file']:before {\n\tcontent: 'Datei auswählen';\n}\nlabel input[multiple]:before {\n\tcontent: 'Dateien auswählen';\n}\ndiv.input {\n\tcursor: pointer;\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { ButtonProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\n\nimport { InputTypeOnDefault } from '../../types/input/types';\nimport { propagateFocus } from '../../utils/reuse';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { getRenderStates } from '../input/controller';\nimport { InputFileController } from './controller';\nimport { ComponentApi, States } from './types';\nimport { nonce } from '../../utils/dev.utils';\n\n@Component({\n\ttag: 'kol-input-file',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputFile implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputFileElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tfile: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icon={this.state._icon}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_smartButton={this.state._smartButton}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\taccept={this.state._accept}\n\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\tmultiple={this.state._multiple}\n\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\ttype=\"file\"\n\t\t\t\t\t\tvalue={this.state._value as string}\n\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t/>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputFileController;\n\n\t/**\n\t * Gibt an, welche Dateiformate erlaubt sind.\n\t */\n\t@Prop() public _accept?: string;\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Versteckt das sichtbare Label des Elements.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Gibt an, ob mehrere Werte eingegeben werden können.\n\t */\n\t@Prop({ reflect: true }) public _multiple?: boolean;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Macht das Eingabeelement zu einem Pflichtfeld.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/**\n\t * Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label).\n\t */\n\t@Prop() public _smartButton?: ButtonProps;\n\n\t/**\n\t * Gibt an, welchen Tab-Index dieses Input hat.\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop() public _value?: string;\n\n\t@State() public state: States = {\n\t\t_id: nonce(), // ⚠ required\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputFileController(this, 'file', this.host);\n\t}\n\n\t@Watch('_accept')\n\tpublic validateAccept(value?: string): void {\n\t\tthis.controller.validateAccept(value);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_multiple')\n\tpublic validateMultiple(value?: boolean): void {\n\t\tthis.controller.validateMultiple(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tthis.controller.validateSmartButton(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t}\n\n\tprivate onChange = (event: Event) => {\n\t\tif (this.ref instanceof HTMLInputElement && this.ref.type === 'file' && typeof this.state._on?.onChange === 'function') {\n\t\t\tthis.state._on.onChange(event, this.ref.files);\n\t\t}\n\t};\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,H as e,r as i,g as a}from"./index-50adf9a0.js";import{a as s}from"./reuse-3a02afb9.js";import{p as n}from"./controller-873db1b1.js";import{g as l}from"./controller-cbcb5b86.js";import{a as d,d as o,w as r,b as h,e as p}from"./prop.validators-e402ad49.js";import{I as u}from"./controller-icon-8695323b.js";import{n as c}from"./dev.utils-157f0499.js";import"./a11y.tipps-1cea9822.js";import"./tab-index-63d1379d.js";import"./index-81bd9b41.js";import"./icon-00018c54.js";class m extends u{constructor(t,e,i){super(t,e,i),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=t=>"string"==typeof t?t:"number"==typeof t?`${t}`:"object"==typeof t&&t instanceof Date?t.toISOString():"",this.validateIso8601=(t,e,i)=>{const a=parseFloat(e),o=a==e;return d(this.component,t,(t=>void 0===t||""===t||o&&"number"==typeof a||this.numberOrIsoDateRegex.test(t)),new Set(["number","Date","string{ISO-8601}"]),this.parseToString(e),{hooks:{afterPatch:t=>{"string"==typeof t&&i&&i(t)}}})},this.component=t}validateAutoComplete(t){d(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateList(t){o(this.component,"_list",(t=>"string"==typeof t),t)}onChange(t){super.onChange(t),!!t.target.value!=!!this.component._value&&(this.component._value=t.target.value)}validateMax(t){this.validateIso8601("_max",t)}validateMin(t){this.validateIso8601("_min",t)}validatePlaceholder(t){r(this.component,"_placeholder",t)}validateReadOnly(t){h(this.component,"_readOnly",t)}validateRequired(t){h(this.component,"_required",t)}validateStep(t){p(this.component,"_step",t)}validateType(t){d(this.component,"_type",(t=>"string"==typeof t&&("date"===t||"datetime-local"===t||"month"===t||"number"===t||"time"===t||"week"===t)),new Set(["String {date, datetime-local, month, number, time, week}"]),t)}validateValue(t){this.validateValueEx(t)}validateValueEx(t,e){this.validateIso8601("_value",t,e)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateList(this.component._list),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)}}const f=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}a,button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}div.input{cursor:text}",y=class{render(){const{ariaDiscribedBy:i}=l(this.state),a=Array.isArray(this.state._list)&&this.state._list.length>0;return t(e,{class:{"has-value":this.state._hasValue}},t("kol-input",{_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_list:this.state._list,_readOnly:this.state._readOnly,_required:this.state._required,_smartButton:this.state._smartButton,_touched:this.state._touched}," ",t("span",{slot:"label"},t("slot",null)),t("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:a?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name,readOnly:this.state._readOnly,required:this.state._required,placeholder:this.state._placeholder,slot:"input",step:this.state._step,spellcheck:"false",type:this.state._type,value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp}))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,s(this.host,this.ref)},this.onKeyUp=t=>{"Enter"===t.code?n({form:this.host,ref:this.ref}):this.controller.onFacade.onChange(t)},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._list=void 0,this._max=void 0,this._min=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=void 0,this._required=void 0,this._smartButton=void 0,this._step=void 0,this._tabIndex=void 0,this._touched=!1,this._type="number",this._value=void 0,this.state={_autoComplete:"off",_id:c(),_hasValue:!1,_list:[],_type:"number"},this.controller=new m(this,"number",this.host)}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)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateList(t){this.controller.validateList(t)}validateMax(t){this.controller.validateMax(t)}validateMin(t){this.controller.validateMin(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateStep(t){this.controller.validateStep(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateType(t){this.controller.validateType(t)}validateValue(t){this.controller.validateValueEx(t,(t=>{""===t&&this.ref&&(this.ref.value="")}))}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_list:["validateList"],_max:["validateMax"],_min:["validateMin"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_smartButton:["validateSmartButton"],_step:["validateStep"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};y.style={default:f};export{y as kol_input_number};
+import{h as t,H as e,r as i,g as a}from"./index-50adf9a0.js";import{a as s}from"./reuse-3a02afb9.js";import{p as n}from"./controller-873db1b1.js";import{g as l}from"./controller-37d0d40b.js";import{a as d,d as o,w as r,b as h,e as p}from"./prop.validators-e402ad49.js";import{I as u}from"./controller-icon-6249a817.js";import{n as c}from"./dev.utils-157f0499.js";import"./a11y.tipps-1cea9822.js";import"./tab-index-63d1379d.js";import"./index-81bd9b41.js";import"./icon-00018c54.js";class m extends u{constructor(t,e,i){super(t,e,i),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=t=>"string"==typeof t?t:"number"==typeof t?`${t}`:"object"==typeof t&&t instanceof Date?t.toISOString():"",this.validateIso8601=(t,e,i)=>{const a=parseFloat(e),s=a==e;return d(this.component,t,(t=>void 0===t||""===t||s&&"number"==typeof a||this.numberOrIsoDateRegex.test(t)),new Set(["number","Date","string{ISO-8601}"]),this.parseToString(e),{hooks:{afterPatch:t=>{"string"==typeof t&&i&&i(t)}}})},this.component=t}validateAutoComplete(t){d(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateList(t){o(this.component,"_list",(t=>"string"==typeof t),t)}onChange(t){super.onChange(t),!!t.target.value!=!!this.component._value&&(this.component._value=t.target.value)}validateMax(t){this.validateIso8601("_max",t)}validateMin(t){this.validateIso8601("_min",t)}validatePlaceholder(t){r(this.component,"_placeholder",t)}validateReadOnly(t){h(this.component,"_readOnly",t)}validateRequired(t){h(this.component,"_required",t)}validateStep(t){p(this.component,"_step",t)}validateType(t){d(this.component,"_type",(t=>"string"==typeof t&&("date"===t||"datetime-local"===t||"month"===t||"number"===t||"time"===t||"week"===t)),new Set(["String {date, datetime-local, month, number, time, week}"]),t)}validateValue(t){this.validateValueEx(t)}validateValueEx(t,e){this.validateIso8601("_value",t,e)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateList(this.component._list),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)}}const f=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}a,button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}div.input{cursor:text}",y=class{render(){const{ariaDescribedBy:i}=l(this.state),a=Array.isArray(this.state._list)&&this.state._list.length>0;return t(e,{class:{"has-value":this.state._hasValue}},t("kol-input",{class:{[this.state._type]:!0},_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_list:this.state._list,_readOnly:this.state._readOnly,_required:this.state._required,_smartButton:this.state._smartButton,_touched:this.state._touched}," ",t("span",{slot:"label"},t("slot",null)),t("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:a?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name,readOnly:this.state._readOnly,required:this.state._required,placeholder:this.state._placeholder,slot:"input",step:this.state._step,spellcheck:"false",type:this.state._type,value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp}))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,s(this.host,this.ref)},this.onKeyUp=t=>{"Enter"===t.code?n({form:this.host,ref:this.ref}):this.controller.onFacade.onChange(t)},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._list=void 0,this._max=void 0,this._min=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=void 0,this._required=void 0,this._smartButton=void 0,this._step=void 0,this._tabIndex=void 0,this._touched=!1,this._type="number",this._value=void 0,this.state={_autoComplete:"off",_id:c(),_hasValue:!1,_list:[],_type:"number"},this.controller=new m(this,"number",this.host)}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)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateList(t){this.controller.validateList(t)}validateMax(t){this.controller.validateMax(t)}validateMin(t){this.controller.validateMin(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateStep(t){this.controller.validateStep(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateType(t){this.controller.validateType(t)}validateValue(t){this.controller.validateValueEx(t,(t=>{""===t&&this.ref&&(this.ref.value="")}))}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_list:["validateList"],_max:["validateMax"],_min:["validateMin"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_smartButton:["validateSmartButton"],_step:["validateStep"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};y.style={default:f};export{y as kol_input_number};