npm - @public-ui/components - Versions diffs - 1.6.0-rc.11 → 1.6.0-rc.13 - Mend

@public-ui/components 1.6.0-rc.11 → 1.6.0-rc.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (499) hide show

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as e,H as t,r as i,g as a}from"./index-2c046ff1.js";import{n}from"./dev.utils-8aef00f6.js";import{a as s}from"./reuse-c2156413.js";import{g as r}from"./controller-d9fb3dc1.js";import{a as l}from"./controller-3b1a37ac.js";import"./prop.validators-683bb1d0.js";import"./a11y.tipps-e607b8b3.js";import"./index-37b5cbcf.js";import"./label-bd9566f6.js";import"./tab-index-6d37f269.js";const d=":host{--a11y-min-size:44px;font-size:inherit}*{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}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;width:100%}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}:host{--border-width:2px;--input-size:1.5em}kol-input .icons{display:none}label{cursor:pointer}input{appearance:none;border-width:var(--border-width);border-style:solid;border-radius:100%;cursor:pointer;display:flex;height:var(--input-size);margin:0;min-height:var(--input-size);min-width:var(--input-size);padding:0;width:var(--input-size)}input:before{border-radius:100%;content:'';margin:auto;height:calc(var(--input-size) / 2);width:calc(var(--input-size) / 2)}input:checked:before{background-color:#000}fieldset{display:flex}fieldset.vertical{flex-direction:column}fieldset [slot='input']{align-items:center;display:flex}.required label>span::after{content:''}",o=class{render(){const{ariaDescribedBy:i,hasError:a}=r(this.state),l=""===this.state._label,s="…"===this.state._label;return e(t,null,e("fieldset",{class:{disabled:!0===this.state._disabled,error:!0===a,required:!0===this.state._required,[this.state._orientation]:!0}},e("legend",{class:"block w-full mb-1 leading-normal"},e("span",null,l?e("slot",{name:"expert"}):s?e("slot",null):this.state._label)),this.state._list.map(((t,a)=>{const l=`${this.state._id}-${a}`,s=`radio-${a}`;return e("kol-input",{class:"radio",key:l,_disabled:this.state._disabled||t.disabled,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:l,_renderNoLabel:!0,_required:this.state._required,_slotName:s,_touched:this.state._touched},e("div",{slot:s},e("input",Object.assign({ref:this.state._value===t.value?this.catchRef:void 0,accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-labelledby":`${l}-label`,title:"",type:"radio",id:l,checked:this.state._value===t.value,name:this.state._name||this.state._id,disabled:this.state._disabled||t.disabled,required:this.state._required,tabIndex:this.state._tabIndex,value:`-${a}`},this.controller.onFacade,{onChange:this.onChange})),e("label",{htmlFor:`${l}`,id:`${l}-label`,style:{height:this.state._hideLabel&&!0!==this.state._required?"0":void 0,margin:this.state._hideLabel&&!0!==this.state._required?"0":void 0,padding:this.state._hideLabel&&!0!==this.state._required?"0":void 0,visibility:this.state._hideLabel&&!0!==this.state._required?"hidden":void 0}},e("span",null,e("span",null,t.label)))))})),a&&e("kol-alert",{id:"error",_alert:!0,_type:"error",_variant:"msg"},this.state._error)))}constructor(e){i(this,e),this.catchRef=e=>{this.ref=e,s(this.host,this.ref)},this.onChange=e=>{if(e.target instanceof HTMLInputElement){const t=this.controller.getOptionByKey(e.target.value);void 0!==t&&this.controller.setValue(e,t.value)}},this._accessKey=void 0,this._alert=!0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._id=void 0,this._label=void 0,this._list=void 0,this._name=void 0,this._on=void 0,this._orientation="vertical",this._required=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_id:n(),_label:!1,_list:[],_orientation:"vertical"},this.controller=new l(this,"radio",this.host)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateList(e){this.controller.validateList(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOrientation(e){this.controller.validateOrientation(e)}validateRequired(e){this.controller.validateRequired(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(this.onChange)}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_name:["validateName"],_on:["validateOn"],_orientation:["validateOrientation"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};o.style={default:d};export{o as kol_input_radio};
+import{h as t,H as e,r as i,g as a}from"./index-2c046ff1.js";import{n}from"./dev.utils-4290338e.js";import{a as s}from"./reuse-c2156413.js";import{g as r}from"./controller-7ae169ad.js";import{a as l}from"./controller-c69b0aaa.js";import"./prop.validators-601f1068.js";import"./a11y.tipps-9f948961.js";import"./index-37b5cbcf.js";import"./label-223fef8f.js";import"./tab-index-fc60df7a.js";const d=":host{--a11y-min-size:44px;font-size:inherit}*{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}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;width:100%}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}:host{--border-width:2px;--input-size:1.5em}kol-input .icons{display:none}label{cursor:pointer}input{appearance:none;border-width:var(--border-width);border-style:solid;border-radius:100%;cursor:pointer;display:flex;height:var(--input-size);margin:0;min-height:var(--input-size);min-width:var(--input-size);padding:0;width:var(--input-size)}input:before{border-radius:100%;content:'';margin:auto;height:calc(var(--input-size) / 2);width:calc(var(--input-size) / 2)}input:checked:before{background-color:#000}fieldset{display:flex}fieldset.vertical{flex-direction:column}fieldset [slot='input']{align-items:center;display:flex}.required label>span::after{content:''}",o=class{render(){const{ariaDescribedBy:i,hasError:a}=r(this.state),l=!1===this.state._label;return t(e,null,t("fieldset",{class:{disabled:!0===this.state._disabled,error:!0===a,required:!0===this.state._required,[this.state._orientation]:!0}},t("legend",{class:"block w-full mb-1 leading-normal"},t("span",null,t("span",{slot:"label"},l?t("slot",null):this.state._label))),this.state._list.map(((e,a)=>{const s=`${this.state._id}-${a}`,r=`radio-${a}`;return t("kol-input",{class:"radio",key:s,_disabled:this.state._disabled||e.disabled,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:s,_renderNoLabel:!0,_required:this.state._required,_slotName:r,_touched:this.state._touched},t("div",{slot:r},t("input",Object.assign({ref:this.state._value===e.value?this.catchRef:void 0,accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-labelledby":`${s}-label`,title:"",type:"radio",id:s,checked:this.state._value===e.value,name:this.state._name||this.state._id,disabled:this.state._disabled||e.disabled,required:this.state._required,tabIndex:this.state._tabIndex,value:`-${a}`},this.controller.onFacade,{onChange:this.onChange})),t("kol-tooltip",{"aria-hidden":"true",hidden:l||!this.state._hideLabel,_id:`${this.state._id}-tooltip`,_label:"string"==typeof this.state._label?this.state._label:""}),t("label",{htmlFor:`${s}`,id:`${s}-label`,style:{height:this.state._hideLabel&&!0!==this.state._required?"0":void 0,margin:this.state._hideLabel&&!0!==this.state._required?"0":void 0,padding:this.state._hideLabel&&!0!==this.state._required?"0":void 0,visibility:this.state._hideLabel&&!0!==this.state._required?"hidden":void 0}},t("span",null,t("span",null,e.label)))))})),a&&t("kol-alert",{id:"error",_alert:!0,_type:"error",_variant:"msg"},this.state._error)))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,s(this.host,this.ref)},this.onChange=t=>{if(t.target instanceof HTMLInputElement){const e=this.controller.getOptionByKey(t.target.value);void 0!==e&&this.controller.setValue(t,e.value)}},this._accessKey=void 0,this._alert=!0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._id=void 0,this._label=void 0,this._list=void 0,this._name=void 0,this._on=void 0,this._orientation="vertical",this._required=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_id:`id-${n()}`,_label:!1,_list:[],_orientation:"vertical"},this.controller=new l(this,"input-radio",this.host)}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)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.controller.validateList(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateOrientation(t){this.controller.validateOrientation(t)}validateRequired(t){this.controller.validateRequired(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(this.onChange)}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_name:["validateName"],_on:["validateOn"],_orientation:["validateOrientation"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};o.style={default:d};export{o as kol_input_radio};

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

	@@ -1 +1 @@
1	- {"version":3,"names":["defaultStyleCss","KolInputRadio","render","ariaDescribedBy","hasError","getRenderStates","this","state","showExpertSlot","_label","showDefaultSlot","h","Host","class","disabled","_disabled","error","required","_required","_orientation","name","_list","map","option","index","customId","_id","slotName","key","_hideLabel","_hint","_renderNoLabel","_slotName","_touched","slot","Object","assign","ref","_value","value","catchRef","undefined","accessKey","_accessKey","length","join","title","type","id","checked","_name","tabIndex","_tabIndex","controller","onFacade","onChange","htmlFor","style","height","margin","padding","visibility","label","_alert","_type","_variant","_error","constructor","hostRef","propagateFocus","host","event","target","HTMLInputElement","getOptionByKey","setValue","nonce","InputRadioController","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateId","validateLabel","validateList","validateName","validateOn","validateOrientation","validateRequired","validateSyncValueBySelector","validateTabIndex","validateTouched","validateValue","componentWillLoad"],"sources":["src/components/input-radio/style.css?tag=kol-input-radio&mode=default&encapsulation=shadow","src/components/input-radio/component.tsx"],"sourcesContent":["@import url(../input.css);\n:host {\n\t--border-width: 2px;\n\t--input-size: 1.5em;\n}\nkol-input .icons {\n\tdisplay: none;\n}\nlabel {\n\tcursor: pointer;\n}\ninput {\n\tappearance: none;\n\tborder-width: var(--border-width);\n\tborder-style: solid;\n\tborder-radius: 100%;\n\tcursor: pointer;\n\tdisplay: flex;\n\theight: var(--input-size);\n\tmargin: 0;\n\tmin-height: var(--input-size);\n\tmin-width: var(--input-size);\n\tpadding: 0;\n\twidth: var(--input-size);\n}\ninput:before {\n\tborder-radius: 100%;\n\tcontent: '';\n\tmargin: auto;\n\theight: calc(var(--input-size) / 2);\n\twidth: calc(var(--input-size) / 2);\n}\ninput:checked:before {\n\tbackground-color: #000;\n}\nfieldset {\n\tdisplay: flex;\n}\nfieldset.vertical {\n\tflex-direction: column;\n}\nfieldset [slot='input'] {\n\talign-items: center;\n\tdisplay: flex;\n}\n/* required star is on fieldset legend /\n.required label > span::after {\n\tcontent: '';\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { InputTypeOnDefault, Option } from '../../types/input/types';\nimport { Orientation } from '../../types/orientation';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { W3CInputValue } from '../../types/w3c';\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateFocus } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { InputRadioController } from './controller';\nimport { ComponentApi, States } from './types';\n\n/\n @slot - Die Legende/Überschrift der Radiobuttons.\n /\n@Component({\n\ttag: 'kol-input-radio',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputRadio implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputRadioElement;\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, hasError } = getRenderStates(this.state);\n\t\tconst showExpertSlot = this.state._label === ''; // _label=\"\" or _label\n\t\tconst showDefaultSlot = this.state._label === '…'; // deprecated: default slot will be removed in v2.0.0\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<fieldset\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tdisabled: this.state._disabled === true,\n\t\t\t\t\t\terror: hasError === true,\n\t\t\t\t\t\trequired: this.state._required === true,\n\t\t\t\t\t\t[this.state._orientation]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<legend class=\"block w-full mb-1 leading-normal\">\n\t\t\t\t\t\t{/ INFO: span is needed for css styling :after content like a star () or optional text ! /}\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t{/* INFO: label comes with any html tag or as plain text! /}\n\t\t\t\t\t\t\t{showExpertSlot ? <slot name=\"expert\"></slot> : showDefaultSlot ? <slot></slot> : this.state._label}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</legend>\n\t\t\t\t\t{this.state._list.map((option, index) => {\n\t\t\t\t\t\t/\n\t\t\t\t\t\t Damit der Value einer Option ein beliebigen Typ haben kann\n\t\t\t\t\t\t * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t /\n\t\t\t\t\t\tconst customId = `${this.state._id}-${index}`;\n\t\t\t\t\t\tconst slotName = `radio-${index}`;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<kol-input\n\t\t\t\t\t\t\t\tclass=\"radio\"\n\t\t\t\t\t\t\t\tkey={customId}\n\t\t\t\t\t\t\t\t_disabled={this.state._disabled \|\| option.disabled}\n\t\t\t\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t\t\t\t_id={customId}\n\t\t\t\t\t\t\t\t_renderNoLabel={true}\n\t\t\t\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t\t\t\t_slotName={slotName}\n\t\t\t\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div slot={slotName}>\n\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\tref={this.state._value === option.value ? this.catchRef : undefined}\n\t\t\t\t\t\t\t\t\t\taccessKey={this.state._accessKey} // by radio?!\n\t\t\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\t\t\taria-labelledby={`${customId}-label`}\n\t\t\t\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\t\t\tid={customId}\n\t\t\t\t\t\t\t\t\t\tchecked={this.state._value === option.value}\n\t\t\t\t\t\t\t\t\t\tname={this.state._name \|\| this.state._id}\n\t\t\t\t\t\t\t\t\t\tdisabled={this.state._disabled \|\| option.disabled}\n\t\t\t\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t\t\t\t\t\t\tvalue={`-${index}`}\n\t\t\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t\t\t\thtmlFor={`${customId}`}\n\t\t\t\t\t\t\t\t\t\tid={`${customId}-label`}\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\theight: this.state._hideLabel && this.state._required !== true ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tmargin: this.state._hideLabel && this.state._required !== true ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tpadding: this.state._hideLabel && this.state._required !== true ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tvisibility: this.state._hideLabel && this.state._required !== true ? 'hidden' : undefined,\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t<span>{option.label}</span>\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</kol-input>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t\t{hasError && (\n\t\t\t\t\t\t<kol-alert id=\"error\" _alert={true} _type=\"error\" _variant=\"msg\">\n\t\t\t\t\t\t\t{this.state._error}\n\t\t\t\t\t\t</kol-alert>\n\t\t\t\t\t)}\n\t\t\t\t</fieldset>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRadioController;\n\n\t/\n\t Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.\n\t /\n\t@Prop() public _accessKey?: string;\n\n\t/\n\t Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/\n\t Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t /\n\t@Prop() 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 Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t /\n\t@Prop() 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 Gibt die interne ID des primären Elements in der Komponente an.\n\t /\n\t@Prop() public _id?: string;\n\n\t/\n\t Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t /\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/\n\t Gibt die Liste der Optionen für das Eingabefeld an.\n\t /\n\t@Prop() public _list!: Stringified<Option<W3CInputValue>[]>;\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 die horizontale oder vertikale Ausrichtung der Komponente an.\n\t /\n\t@Prop() public _orientation?: Orientation = 'vertical';\n\n\t/\n\t Macht das Eingabeelement zu einem Pflichtfeld.\n\t /\n\t@Prop() public _required?: boolean;\n\n\t/\n\t Selector for synchronizing the value with another input element.\n\t * @internal\n\t /\n\t@Prop() public _syncValueBySelector?: string;\n\n\t/\n\t Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t /\n\t@Prop() public _tabIndex?: number;\n\n\t/\n\t 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 der Radio an. (Known Bug: https://github.com/ionic-team/stencil/issues/3902)\n\t */\n\t@Prop() public _value?: Stringified<W3CInputValue>;\n\n\t@State() public state: States = {\n\t\t_id: nonce(), // ⚠ required\n\t\t_label: false, // ⚠ required\n\t\t_list: [],\n\t\t_orientation: 'vertical',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRadioController(this, 'radio', 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('_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('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<Option<W3CInputValue>[]>): 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('_orientation')\n\tpublic validateOrientation(value?: Orientation): void {\n\t\tthis.controller.validateOrientation(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: string): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<unknown>): 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(this.onChange);\n\t}\n\n\tprivate onChange = (event: Event): void => {\n\t\tif (event.target instanceof HTMLInputElement) {\n\t\t\tconst option = this.controller.getOptionByKey(event.target.value);\n\t\t\tif (option !== undefined) {\n\t\t\t\tthis.controller.setValue(event, option.value as string); // TODO: fix type\n\t\t\t}\n\t\t}\n\t};\n}\n"],"mappings":"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"}
1	+ {"version":3,"names":["defaultStyleCss","KolInputRadio","render","ariaDescribedBy","hasError","getRenderStates","this","state","hasExpertSlot","_label","h","Host","class","disabled","_disabled","error","required","_required","_orientation","slot","_list","map","option","index","customId","_id","slotName","key","_hideLabel","_hint","_renderNoLabel","_slotName","_touched","Object","assign","ref","_value","value","catchRef","undefined","accessKey","_accessKey","length","join","title","type","id","checked","name","_name","tabIndex","_tabIndex","controller","onFacade","onChange","hidden","htmlFor","style","height","margin","padding","visibility","label","_alert","_type","_variant","_error","constructor","hostRef","propagateFocus","host","event","target","HTMLInputElement","getOptionByKey","setValue","nonce","InputRadioController","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateId","validateLabel","validateList","validateName","validateOn","validateOrientation","validateRequired","validateSyncValueBySelector","validateTabIndex","validateTouched","validateValue","componentWillLoad"],"sources":["src/components/input-radio/style.css?tag=kol-input-radio&mode=default&encapsulation=shadow","src/components/input-radio/component.tsx"],"sourcesContent":["@import url(../input.css);\n:host {\n\t--border-width: 2px;\n\t--input-size: 1.5em;\n}\nkol-input .icons {\n\tdisplay: none;\n}\nlabel {\n\tcursor: pointer;\n}\ninput {\n\tappearance: none;\n\tborder-width: var(--border-width);\n\tborder-style: solid;\n\tborder-radius: 100%;\n\tcursor: pointer;\n\tdisplay: flex;\n\theight: var(--input-size);\n\tmargin: 0;\n\tmin-height: var(--input-size);\n\tmin-width: var(--input-size);\n\tpadding: 0;\n\twidth: var(--input-size);\n}\ninput:before {\n\tborder-radius: 100%;\n\tcontent: '';\n\tmargin: auto;\n\theight: calc(var(--input-size) / 2);\n\twidth: calc(var(--input-size) / 2);\n}\ninput:checked:before {\n\tbackground-color: #000;\n}\nfieldset {\n\tdisplay: flex;\n}\nfieldset.vertical {\n\tflex-direction: column;\n}\nfieldset [slot='input'] {\n\talign-items: center;\n\tdisplay: flex;\n}\n/* required star is on fieldset legend /\n.required label > span::after {\n\tcontent: '';\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { InputTypeOnDefault, Option } from '../../types/input/types';\nimport { Orientation } from '../../types/orientation';\nimport { Align } from '../../types/props/align';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { W3CInputValue } from '../../types/w3c';\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateFocus } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { InputRadioController } from './controller';\nimport { ComponentApi, States } from './types';\n\n/\n @slot - Die Legende/Überschrift der Radiobuttons.\n /\n@Component({\n\ttag: 'kol-input-radio',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputRadio implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputRadioElement;\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, hasError } = getRenderStates(this.state);\n\t\tconst hasExpertSlot = this.state._label === false; // _label=\"\" or _label\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<fieldset\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tdisabled: this.state._disabled === true,\n\t\t\t\t\t\terror: hasError === true,\n\t\t\t\t\t\trequired: this.state._required === true,\n\t\t\t\t\t\t[this.state._orientation]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<legend class=\"block w-full mb-1 leading-normal\">\n\t\t\t\t\t\t{/ INFO: span is needed for css styling :after content like a star () or optional text ! /}\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t{/* INFO: label comes with any html tag or as plain text! /}\n\t\t\t\t\t\t\t{/ TODO: der folgende Slot ohne Name muss später entfernt werden /}\n\t\t\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</legend>\n\t\t\t\t\t{this.state._list.map((option, index) => {\n\t\t\t\t\t\t/\n\t\t\t\t\t\t Damit der Value einer Option ein beliebigen Typ haben kann\n\t\t\t\t\t\t * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t /\n\t\t\t\t\t\tconst customId = `${this.state._id}-${index}`;\n\t\t\t\t\t\tconst slotName = `radio-${index}`;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<kol-input\n\t\t\t\t\t\t\t\tclass=\"radio\"\n\t\t\t\t\t\t\t\tkey={customId}\n\t\t\t\t\t\t\t\t_disabled={this.state._disabled \|\| option.disabled}\n\t\t\t\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t\t\t\t_id={customId}\n\t\t\t\t\t\t\t\t_renderNoLabel={true}\n\t\t\t\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t\t\t\t_slotName={slotName}\n\t\t\t\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div slot={slotName}>\n\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\tref={this.state._value === option.value ? this.catchRef : undefined}\n\t\t\t\t\t\t\t\t\t\taccessKey={this.state._accessKey} // by radio?!\n\t\t\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\t\t\taria-labelledby={`${customId}-label`}\n\t\t\t\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\t\t\tid={customId}\n\t\t\t\t\t\t\t\t\t\tchecked={this.state._value === option.value}\n\t\t\t\t\t\t\t\t\t\tname={this.state._name \|\| this.state._id}\n\t\t\t\t\t\t\t\t\t\tdisabled={this.state._disabled \|\| option.disabled}\n\t\t\t\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t\t\t\t\t\t\tvalue={`-${index}`}\n\t\t\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<kol-tooltip\n\t\t\t\t\t\t\t\t\t\t/\n\t\t\t\t\t\t\t\t\t\t Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,\n\t\t\t\t\t\t\t\t\t\t * verhindert aber nicht das Aria-Labelledby vorgelesen wird.\n\t\t\t\t\t\t\t\t\t\t /\n\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\thidden={hasExpertSlot \|\| !this.state._hideLabel}\n\t\t\t\t\t\t\t\t\t\t_id={`${this.state._id}-tooltip`}\n\t\t\t\t\t\t\t\t\t\t_label={typeof this.state._label === 'string' ? this.state._label : ''}\n\t\t\t\t\t\t\t\t\t></kol-tooltip>\n\t\t\t\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t\t\t\thtmlFor={`${customId}`}\n\t\t\t\t\t\t\t\t\t\tid={`${customId}-label`}\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\theight: this.state._hideLabel && this.state._required !== true ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tmargin: this.state._hideLabel && this.state._required !== true ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tpadding: this.state._hideLabel && this.state._required !== true ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tvisibility: this.state._hideLabel && this.state._required !== true ? 'hidden' : undefined,\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t<span>{option.label}</span>\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</kol-input>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t\t{hasError && (\n\t\t\t\t\t\t<kol-alert id=\"error\" _alert={true} _type=\"error\" _variant=\"msg\">\n\t\t\t\t\t\t\t{this.state._error}\n\t\t\t\t\t\t</kol-alert>\n\t\t\t\t\t)}\n\t\t\t\t</fieldset>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRadioController;\n\n\t/\n\t Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.\n\t /\n\t@Prop() public _accessKey?: string;\n\n\t/\n\t Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/\n\t Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t /\n\t@Prop() 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 Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t /\n\t@Prop() 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 Gibt die interne ID des primären Elements in der Komponente an.\n\t /\n\t@Prop() public _id?: string;\n\n\t/\n\t Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t /\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/\n\t Gibt die Liste der Optionen für das Eingabefeld an.\n\t /\n\t@Prop() public _list!: Stringified<Option<W3CInputValue>[]>;\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 die horizontale oder vertikale Ausrichtung der Komponente an.\n\t /\n\t@Prop() public _orientation?: Orientation = 'vertical';\n\n\t/\n\t Macht das Eingabeelement zu einem Pflichtfeld.\n\t /\n\t@Prop() public _required?: boolean;\n\n\t/\n\t Selector for synchronizing the value with another input element.\n\t * @internal\n\t /\n\t@Prop() public _syncValueBySelector?: string;\n\n\t/\n\t Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t /\n\t@Prop() public _tabIndex?: number;\n\n\t/\n\t Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.\n\t /\n\t@Prop() public _tooltipAlign?: Align = 'top';\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 der Radio an. (Known Bug: https://github.com/ionic-team/stencil/issues/3902)\n\t */\n\t@Prop() public _value?: Stringified<W3CInputValue>;\n\n\t@State() public state: States = {\n\t\t_id: `id-${nonce()}`, // ⚠ required\n\t\t_label: false, // ⚠ required\n\t\t_list: [],\n\t\t_orientation: 'vertical',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRadioController(this, 'input-radio', 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('_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('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<Option<W3CInputValue>[]>): 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('_orientation')\n\tpublic validateOrientation(value?: Orientation): void {\n\t\tthis.controller.validateOrientation(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: string): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<unknown>): 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(this.onChange);\n\t}\n\n\tprivate onChange = (event: Event): void => {\n\t\tif (event.target instanceof HTMLInputElement) {\n\t\t\tconst option = this.controller.getOptionByKey(event.target.value);\n\t\t\tif (option !== undefined) {\n\t\t\t\tthis.controller.setValue(event, option.value as string); // TODO: fix type\n\t\t\t}\n\t\t}\n\t};\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,H as i,r as e,g as a}from"./index-2c046ff1.js";import{n as s}from"./dev.utils-8aef00f6.js";import{a as n}from"./reuse-c2156413.js";import{p as l}from"./controller-ca0fe64f.js";import{g as o}from"./controller-d9fb3dc1.js";import{a as d,d as r,e as h}from"./prop.validators-683bb1d0.js";import{I as p}from"./controller-icon-ba3c5351.js";import"./a11y.tipps-e607b8b3.js";import"./label-bd9566f6.js";import"./tab-index-6d37f269.js";import"./index-37b5cbcf.js";import"./icon-278d567d.js";class u extends p{constructor(t,e,i){super(t,e,i),this.component=t}validateAutoComplete(t){d(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateList(t){r(this.component,"_list",(t=>"object"==typeof t&&"string"==typeof t.label&&t.label.length>0),t)}validateMax(t){h(this.component,"_max",t)}validateMin(t){h(this.component,"_min",t)}validateStep(t){h(this.component,"_step",t)}validateValue(t){h(this.component,"_value",t),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateList(this.component._list),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateStep(this.component._step),this.validateValue(this.component._value)}}const c=":host{--a11y-min-size:44px;font-size:inherit}*{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}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;width:100%}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}input[type='range']{appearance:none;background-color:#d3d3d3;border:1px solid #000;display:inline-block;height:0.5rem;line-height:1.5em;padding:0;margin:0}input[type='range']::-webkit-slider-thumb{box-sizing:border-box;background-color:#000;height:20px;width:20px;border-radius:20px;cursor:pointer;-webkit-appearance:none}input[type='range']::-moz-range-thumb{box-sizing:border-box;background-color:#000;height:20px;width:20px;border-radius:20px;cursor:pointer;-moz-appearance:none}",f=class{render(){const{ariaDescribedBy:e}=o(this.state),a=Array.isArray(this.state._list)&&this.state._list.length>0,s=""===this.state._label,l="…"===this.state._label;return t(i,null,t("kol-input",{class:{range:!0,"hide-label":!!this.state._hideLabel},_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_touched:this.state._touched},t("span",{slot:"label"},s?t("slot",{name:"expert"}):l?t("slot",null):this.state._label),t("div",{slot:"input",class:"inputs-wrapper"},t("input",Object.assign({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:this.state._disabled,list:a?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name?`${this.state._name}-range`:void 0,spellcheck:"false",step:this.state._step,tabIndex:-1,type:"range",value:this.state._value},this.controller.onFacade,{onChange:this.onChange})),t("input",Object.assign({ref:this.catchInputNumberRef,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:this.state._disabled,id:this.state._id,list:a?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name?`${this.state._name}-number`:void 0,step:this.state._step,type:"number",value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp,onChange:this.onChange})),a&&[t("datalist",{id:`${this.state._id}-list`},this.state._list.map((e=>t("option",{value:e.value}))))])))}constructor(t){e(this,t),this.catchInputNumberRef=t=>{var e;t&&(this.ref=t,n(this.host,t),!this._value&&(null===(e=this.ref)||void 0===e?void 0:e.value)&&this.validateValue(parseFloat(this.ref.value)))},this.onChange=t=>{var e,i;let a=parseFloat(t.target.value);this.state._max&&a>this.state._max&&(a=this.state._max),this.state._min&&a<this.state._min&&(a=this.state._min),this.validateValue(a),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onChange)&&(null===(i=this.state._on)||void 0===i||i.onChange(t,a))},this.onKeyUp=t=>{"Enter"===t.code?l({form:this.host,ref:this.ref}):this.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._label=void 0,this._list=void 0,this._max=void 0,this._min=void 0,this._name=void 0,this._on=void 0,this._step=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_id:s(),_label:!1,_list:[]},this.controller=new u(this,"range",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)}validateLabel(t){this.controller.validateLabel(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)}validateStep(t){this.controller.validateStep(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._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"],_label:["validateLabel"],_list:["validateList"],_max:["validateMax"],_min:["validateMin"],_name:["validateName"],_on:["validateOn"],_step:["validateStep"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};f.style={default:c};export{f as kol_input_range};
+import{h as t,H as i,r as e,g as a}from"./index-2c046ff1.js";import{n as s}from"./dev.utils-4290338e.js";import{a as n}from"./reuse-c2156413.js";import{p as l}from"./controller-b036f128.js";import{g as o}from"./controller-7ae169ad.js";import{a as d,d as r,e as h}from"./prop.validators-601f1068.js";import{I as p}from"./controller-icon-4388a5b7.js";import"./a11y.tipps-9f948961.js";import"./label-223fef8f.js";import"./tab-index-fc60df7a.js";import"./index-37b5cbcf.js";import"./icon-e03e73f6.js";class u extends p{constructor(t,e,i){super(t,e,i),this.component=t}validateAutoComplete(t){d(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateList(t){r(this.component,"_list",(t=>"object"==typeof t&&"string"==typeof t.label&&t.label.length>0),t)}validateMax(t){h(this.component,"_max",t)}validateMin(t){h(this.component,"_min",t)}validateStep(t){h(this.component,"_step",t)}validateValue(t){h(this.component,"_value",t),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateList(this.component._list),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateStep(this.component._step),this.validateValue(this.component._value)}}const c=":host{--a11y-min-size:44px;font-size:inherit}*{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}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;width:100%}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}input[type='range']{appearance:none;background-color:#d3d3d3;border:1px solid #000;display:inline-block;height:0.5rem;line-height:1.5em;padding:0;margin:0}input[type='range']::-webkit-slider-thumb{box-sizing:border-box;background-color:#000;height:20px;width:20px;border-radius:20px;cursor:pointer;-webkit-appearance:none}input[type='range']::-moz-range-thumb{box-sizing:border-box;background-color:#000;height:20px;width:20px;border-radius:20px;cursor:pointer;-moz-appearance:none}",f=class{render(){const{ariaDescribedBy:e}=o(this.state),a=Array.isArray(this.state._list)&&this.state._list.length>0,s=!1===this.state._label;return t(i,null,t("kol-input",{class:{range:!0,"hide-label":!!this.state._hideLabel},_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_touched:this.state._touched},t("span",{slot:"label"},s?t("slot",null):this.state._label),t("div",{slot:"input",class:"inputs-wrapper"},t("input",Object.assign({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:this.state._disabled,list:a?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name?`${this.state._name}-range`:void 0,spellcheck:"false",step:this.state._step,tabIndex:-1,type:"range",value:this.state._value},this.controller.onFacade,{onChange:this.onChange})),t("input",Object.assign({ref:this.catchInputNumberRef,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:this.state._disabled,id:this.state._id,list:a?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name?`${this.state._name}-number`:void 0,step:this.state._step,type:"number",value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp,onChange:this.onChange})),t("kol-tooltip",{"aria-hidden":"true",hidden:s||!this.state._hideLabel,_align:this._tooltipAlign,_id:`${this.state._id}-tooltip`,_label:"string"==typeof this.state._label?this.state._label:""}),a&&[t("datalist",{id:`${this.state._id}-list`},this.state._list.map((e=>t("option",{value:e.value}))))])))}constructor(t){e(this,t),this.catchInputNumberRef=t=>{var e;t&&(this.ref=t,n(this.host,t),!this._value&&(null===(e=this.ref)||void 0===e?void 0:e.value)&&this.validateValue(parseFloat(this.ref.value)))},this.onChange=t=>{var e,i;let a=parseFloat(t.target.value);this.state._max&&a>this.state._max&&(a=this.state._max),this.state._min&&a<this.state._min&&(a=this.state._min),this.validateValue(a),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onChange)&&(null===(i=this.state._on)||void 0===i||i.onChange(t,a))},this.onKeyUp=t=>{"Enter"===t.code?l({form:this.host,ref:this.ref}):this.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._label=void 0,this._list=void 0,this._max=void 0,this._min=void 0,this._name=void 0,this._on=void 0,this._step=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_id:`id-${s()}`,_label:!1,_list:[]},this.controller=new u(this,"input-range",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)}validateLabel(t){this.controller.validateLabel(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)}validateStep(t){this.controller.validateStep(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._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"],_label:["validateLabel"],_list:["validateList"],_max:["validateMax"],_min:["validateMin"],_name:["validateName"],_on:["validateOn"],_step:["validateStep"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};f.style={default:c};export{f as kol_input_range};

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

	@@ -1 +1 @@
1	- {"version":3,"names":["InputRangeController","InputIconController","constructor","component","name","host","super","this","validateAutoComplete","value","watchValidator","Set","validateList","watchJsonArrayString","item","label","length","validateMax","watchNumber","validateMin","validateStep","validateValue","setFormAssociatedValue","state","_value","componentWillLoad","_autoComplete","_list","_max","_min","_step","defaultStyleCss","KolInputRange","render","ariaDescribedBy","getRenderStates","hasList","Array","isArray","showExpertSlot","_label","showDefaultSlot","h","Host","class","range","_hideLabel","_disabled","_error","_hint","_icon","_id","_touched","slot","Object","assign","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoComplete","autoCorrect","disabled","list","max","min","_name","spellcheck","step","tabIndex","type","controller","onFacade","onChange","ref","catchInputNumberRef","id","onKeyUp","map","option","hostRef","element","propagateFocus","_a","parseFloat","event","target","_on","_b","code","propagateSubmitEventToForm","form","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateLabel","validateName","validateOn","validateSyncValueBySelector","validateTabIndex","validateTouched","_alert"],"sources":["src/components/input-range/controller.ts","src/components/input-range/style.css?tag=kol-input-range&mode=default&encapsulation=shadow","src/components/input-range/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { Stringified } from '../../types/common';\nimport { InputTypeOnOff, Option } from '../../types/input/types';\nimport { watchJsonArrayString, watchNumber, watchValidator } from '../../utils/prop.validators';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { Props, Watches } from './types';\n\nexport class InputRangeController 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<Option<number>[]>): void {\n\t\twatchJsonArrayString(\n\t\t\tthis.component,\n\t\t\t'_list',\n\t\t\t(item: Option<number>) => typeof item === 'object' && typeof item.label === 'string' && item.label.length > 0,\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic validateMax(value?: number): void {\n\t\twatchNumber(this.component, '_max', value);\n\t}\n\n\tpublic validateMin(value?: number): void {\n\t\twatchNumber(this.component, '_min', value);\n\t}\n\n\tpublic validateStep(value?: number): void {\n\t\twatchNumber(this.component, '_step', value);\n\t}\n\n\tpublic validateValue(value?: number): void {\n\t\twatchNumber(this.component, '_value', value);\n\t\tthis.setFormAssociatedValue(this.component.state._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAutoComplete(this.component._autoComplete);\n\t\tthis.validateList(this.component._list);\n\t\tthis.validateMax(this.component._max);\n\t\tthis.validateMin(this.component._min);\n\t\tthis.validateStep(this.component._step);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n/\n For Chrome and Firefox is it needed to use redundant style definitions with separate selectors. The reason is unknown.\n /\ninput[type='range'] {\n\tappearance: none;\n\tbackground-color: #d3d3d3;\n\tborder: 1px solid #000;\n\tdisplay: inline-block;\n\theight: 0.5rem;\n\tline-height: 1.5em;\n\tpadding: 0;\n\tmargin: 0;\n}\ninput[type='range']::-webkit-slider-thumb {\n\tbox-sizing: border-box;\n\tbackground-color: #000;\n\theight: 20px;\n\twidth: 20px;\n\tborder-radius: 20px;\n\tcursor: pointer;\n\t-webkit-appearance: none;\n}\ninput[type='range']::-moz-range-thumb {\n\tbox-sizing: border-box;\n\tbackground-color: #000;\n\theight: 20px;\n\twidth: 20px;\n\tborder-radius: 20px;\n\tcursor: pointer;\n\t-moz-appearance: none;\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { InputTypeOnDefault, InputTypeOnOff, Option } from '../../types/input/types';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateFocus } from '../../utils/reuse';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { getRenderStates } from '../input/controller';\nimport { InputRangeController } from './controller';\nimport { ComponentApi, States } from './types';\n\n/\n @slot - Die Beschriftung des Eingabeelements.\n /\n@Component({\n\ttag: 'kol-input-range',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputRange implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputRangeElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchInputNumberRef = (element?: HTMLInputElement) => {\n\t\tif (element) {\n\t\t\tthis.ref = element;\n\t\t\tpropagateFocus(this.host, element);\n\t\t\tif (!this._value && this.ref?.value) {\n\t\t\t\tthis.validateValue(parseFloat(this.ref.value));\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tlet value = parseFloat((event.target as HTMLInputElement).value);\n\t\tif (this.state._max && value > this.state._max) value = this.state._max;\n\t\tif (this.state._min && value < this.state._min) value = this.state._min;\n\t\tthis.validateValue(value);\n\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\tthis.state._on?.onChange(event, value);\n\t\t}\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.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\tconst showExpertSlot = this.state._label === ''; // _label=\"\" or _label\n\t\tconst showDefaultSlot = this.state._label === '…'; // deprecated: default slot will be removed in v2.0.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\trange: true,\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\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_touched={this.state._touched}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">{showExpertSlot ? <slot name=\"expert\"></slot> : showDefaultSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<div slot=\"input\" class=\"inputs-wrapper\">\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\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\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tlist={hasList ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\t\t\tmin={this.state._min}\n\t\t\t\t\t\t\tname={this.state._name ? `${this.state._name}-range` : undefined}\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\tstep={this.state._step}\n\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t\t\tvalue={this.state._value as number}\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/>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tref={this.catchInputNumberRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\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\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tlist={hasList ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\t\t\tmin={this.state._min}\n\t\t\t\t\t\t\tname={this.state._name ? `${this.state._name}-number` : undefined}\n\t\t\t\t\t\t\tstep={this.state._step}\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tvalue={this.state._value}\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\tonKeyUp={this.onKeyUp}\n\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{hasList && [\n\t\t\t\t\t\t\t<datalist id={`${this.state._id}-list`}>\n\t\t\t\t\t\t\t\t{this.state._list.map((option: Option<number>) => (\n\t\t\t\t\t\t\t\t\t<option value={option.value}></option>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</datalist>,\n\t\t\t\t\t\t\t// <ul class=\"grid gap-1 text-sm grid-flow-col\">\n\t\t\t\t\t\t\t// {this.state._list.map((option: InputOption<number>) => (\n\t\t\t\t\t\t\t// <li class=\"border-1\">{option.label}</li>\n\t\t\t\t\t\t\t// ))}\n\t\t\t\t\t\t\t// </ul>,\n\t\t\t\t\t\t]}\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: InputRangeController;\n\n\t/\n\t Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.\n\t /\n\t@Prop() public _accessKey?: string;\n\n\t/\n\t Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.\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 Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t /\n\t@Prop() 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 Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t /\n\t@Prop() 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 Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t /\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/\n\t Gibt die interne ID des primären Elements in der Komponente an.\n\t /\n\t@Prop() public _id?: string;\n\n\t/\n\t Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t /\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/\n\t Gibt die Liste der Vorschlagswörter an.\n\t /\n\t@Prop() public _list?: Stringified<Option<number>[]>;\n\n\t/\n\t Gibt den größtmöglichen Eingabewert an.\n\t /\n\t@Prop() public _max?: number;\n\n\t/\n\t Gibt den kleinstmöglichen Eingabewert an.\n\t /\n\t@Prop() public _min?: number;\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 die Schrittweite der Wertveränderung an.\n\t /\n\t@Prop() public _step?: number;\n\n\t/\n\t Selector for synchronizing the value with another input element.\n\t * @internal\n\t /\n\t@Prop() public _syncValueBySelector?: string;\n\n\t/\n\t Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t /\n\t@Prop() public _tabIndex?: number;\n\n\t/\n\t 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?: number;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_id: nonce(), // ⚠ required\n\t\t_label: false, // ⚠ required\n\t\t_list: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRangeController(this, 'range', 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('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<Option<number>[]>): void {\n\t\tthis.controller.validateList(value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number): void {\n\t\tthis.controller.validateMax(value);\n\t}\n\n\t@Watch('_min')\n\tpublic validateMin(value?: number): void {\n\t\tthis.controller.validateMin(value);\n\t}\n\n\t@Watch('_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('_step')\n\tpublic validateStep(value?: number): void {\n\t\tthis.controller.validateStep(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: string): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._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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"}
1	+ {"version":3,"names":["InputRangeController","InputIconController","constructor","component","name","host","super","this","validateAutoComplete","value","watchValidator","Set","validateList","watchJsonArrayString","item","label","length","validateMax","watchNumber","validateMin","validateStep","validateValue","setFormAssociatedValue","state","_value","componentWillLoad","_autoComplete","_list","_max","_min","_step","defaultStyleCss","KolInputRange","render","ariaDescribedBy","getRenderStates","hasList","Array","isArray","hasExpertSlot","_label","h","Host","class","range","_hideLabel","_disabled","_error","_hint","_icon","_id","_touched","slot","Object","assign","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoComplete","autoCorrect","disabled","list","max","min","_name","spellcheck","step","tabIndex","type","controller","onFacade","onChange","ref","catchInputNumberRef","id","onKeyUp","hidden","_align","_tooltipAlign","map","option","hostRef","element","propagateFocus","_a","parseFloat","event","target","_on","_b","code","propagateSubmitEventToForm","form","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateLabel","validateName","validateOn","validateSyncValueBySelector","validateTabIndex","validateTouched","_alert"],"sources":["src/components/input-range/controller.ts","src/components/input-range/style.css?tag=kol-input-range&mode=default&encapsulation=shadow","src/components/input-range/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { Stringified } from '../../types/common';\nimport { InputTypeOnOff, Option } from '../../types/input/types';\nimport { watchJsonArrayString, watchNumber, watchValidator } from '../../utils/prop.validators';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { Props, Watches } from './types';\n\nexport class InputRangeController 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<Option<number>[]>): void {\n\t\twatchJsonArrayString(\n\t\t\tthis.component,\n\t\t\t'_list',\n\t\t\t(item: Option<number>) => typeof item === 'object' && typeof item.label === 'string' && item.label.length > 0,\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic validateMax(value?: number): void {\n\t\twatchNumber(this.component, '_max', value);\n\t}\n\n\tpublic validateMin(value?: number): void {\n\t\twatchNumber(this.component, '_min', value);\n\t}\n\n\tpublic validateStep(value?: number): void {\n\t\twatchNumber(this.component, '_step', value);\n\t}\n\n\tpublic validateValue(value?: number): void {\n\t\twatchNumber(this.component, '_value', value);\n\t\tthis.setFormAssociatedValue(this.component.state._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAutoComplete(this.component._autoComplete);\n\t\tthis.validateList(this.component._list);\n\t\tthis.validateMax(this.component._max);\n\t\tthis.validateMin(this.component._min);\n\t\tthis.validateStep(this.component._step);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n/\n For Chrome and Firefox is it needed to use redundant style definitions with separate selectors. The reason is unknown.\n /\ninput[type='range'] {\n\tappearance: none;\n\tbackground-color: #d3d3d3;\n\tborder: 1px solid #000;\n\tdisplay: inline-block;\n\theight: 0.5rem;\n\tline-height: 1.5em;\n\tpadding: 0;\n\tmargin: 0;\n}\ninput[type='range']::-webkit-slider-thumb {\n\tbox-sizing: border-box;\n\tbackground-color: #000;\n\theight: 20px;\n\twidth: 20px;\n\tborder-radius: 20px;\n\tcursor: pointer;\n\t-webkit-appearance: none;\n}\ninput[type='range']::-moz-range-thumb {\n\tbox-sizing: border-box;\n\tbackground-color: #000;\n\theight: 20px;\n\twidth: 20px;\n\tborder-radius: 20px;\n\tcursor: pointer;\n\t-moz-appearance: none;\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { InputTypeOnDefault, InputTypeOnOff, Option } from '../../types/input/types';\nimport { Align } from '../../types/props/align';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateFocus } from '../../utils/reuse';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { getRenderStates } from '../input/controller';\nimport { InputRangeController } from './controller';\nimport { ComponentApi, States } from './types';\n\n/\n @slot - Die Beschriftung des Eingabeelements.\n /\n@Component({\n\ttag: 'kol-input-range',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputRange implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputRangeElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchInputNumberRef = (element?: HTMLInputElement) => {\n\t\tif (element) {\n\t\t\tthis.ref = element;\n\t\t\tpropagateFocus(this.host, element);\n\t\t\tif (!this._value && this.ref?.value) {\n\t\t\t\tthis.validateValue(parseFloat(this.ref.value));\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tlet value = parseFloat((event.target as HTMLInputElement).value);\n\t\tif (this.state._max && value > this.state._max) value = this.state._max;\n\t\tif (this.state._min && value < this.state._min) value = this.state._min;\n\t\tthis.validateValue(value);\n\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\tthis.state._on?.onChange(event, value);\n\t\t}\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.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\tconst hasExpertSlot = this.state._label === false; // _label=\"\" or _label\n\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\trange: true,\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\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_touched={this.state._touched}\n\t\t\t\t>\n\t\t\t\t\t{/ TODO: der folgende Slot ohne Name muss später entfernt werden /}\n\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<div slot=\"input\" class=\"inputs-wrapper\">\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\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\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tlist={hasList ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\t\t\tmin={this.state._min}\n\t\t\t\t\t\t\tname={this.state._name ? `${this.state._name}-range` : undefined}\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\tstep={this.state._step}\n\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t\t\tvalue={this.state._value as number}\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/>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tref={this.catchInputNumberRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\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\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tlist={hasList ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\t\t\tmin={this.state._min}\n\t\t\t\t\t\t\tname={this.state._name ? `${this.state._name}-number` : undefined}\n\t\t\t\t\t\t\tstep={this.state._step}\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tvalue={this.state._value}\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\tonKeyUp={this.onKeyUp}\n\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<kol-tooltip\n\t\t\t\t\t\t\t/\n\t\t\t\t\t\t\t Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,\n\t\t\t\t\t\t\t * verhindert aber nicht das Aria-Labelledby vorgelesen wird.\n\t\t\t\t\t\t\t /\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\thidden={hasExpertSlot \|\| !this.state._hideLabel}\n\t\t\t\t\t\t\t_align={this._tooltipAlign}\n\t\t\t\t\t\t\t_id={`${this.state._id}-tooltip`}\n\t\t\t\t\t\t\t_label={typeof this.state._label === 'string' ? this.state._label : ''}\n\t\t\t\t\t\t></kol-tooltip>\n\t\t\t\t\t\t{hasList && [\n\t\t\t\t\t\t\t<datalist id={`${this.state._id}-list`}>\n\t\t\t\t\t\t\t\t{this.state._list.map((option: Option<number>) => (\n\t\t\t\t\t\t\t\t\t<option value={option.value}></option>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</datalist>,\n\t\t\t\t\t\t\t// <ul class=\"grid gap-1 text-sm grid-flow-col\">\n\t\t\t\t\t\t\t// {this.state._list.map((option: InputOption<number>) => (\n\t\t\t\t\t\t\t// <li class=\"border-1\">{option.label}</li>\n\t\t\t\t\t\t\t// ))}\n\t\t\t\t\t\t\t// </ul>,\n\t\t\t\t\t\t]}\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: InputRangeController;\n\n\t/\n\t Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.\n\t /\n\t@Prop() public _accessKey?: string;\n\n\t/\n\t Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.\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 Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t /\n\t@Prop() 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 Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t /\n\t@Prop() 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 Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t /\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/\n\t Gibt die interne ID des primären Elements in der Komponente an.\n\t /\n\t@Prop() public _id?: string;\n\n\t/\n\t Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t /\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/\n\t Gibt die Liste der Vorschlagswörter an.\n\t /\n\t@Prop() public _list?: Stringified<Option<number>[]>;\n\n\t/\n\t Gibt den größtmöglichen Eingabewert an.\n\t /\n\t@Prop() public _max?: number;\n\n\t/\n\t Gibt den kleinstmöglichen Eingabewert an.\n\t /\n\t@Prop() public _min?: number;\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 die Schrittweite der Wertveränderung an.\n\t /\n\t@Prop() public _step?: number;\n\n\t/\n\t Selector for synchronizing the value with another input element.\n\t * @internal\n\t /\n\t@Prop() public _syncValueBySelector?: string;\n\n\t/\n\t Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t /\n\t@Prop() public _tabIndex?: number;\n\n\t/\n\t Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.\n\t /\n\t@Prop() public _tooltipAlign?: Align = 'top';\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?: number;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_id: `id-${nonce()}`, // ⚠ required\n\t\t_label: false, // ⚠ required\n\t\t_list: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRangeController(this, 'input-range', 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('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<Option<number>[]>): void {\n\t\tthis.controller.validateList(value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number): void {\n\t\tthis.controller.validateMax(value);\n\t}\n\n\t@Watch('_min')\n\tpublic validateMin(value?: number): void {\n\t\tthis.controller.validateMin(value);\n\t}\n\n\t@Watch('_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('_step')\n\tpublic validateStep(value?: number): void {\n\t\tthis.controller.validateStep(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: string): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._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-text.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,H as e,r as i,g as a}from"./index-2c046ff1.js";import{b as s,s as n}from"./prop.validators-683bb1d0.js";import{v as l}from"./hide-label-e9f288ac.js";import{f as d}from"./a11y.tipps-e607b8b3.js";import{a as o}from"./reuse-c2156413.js";import{p as r}from"./controller-ca0fe64f.js";import{g as h}from"./controller-d9fb3dc1.js";import{a as u}from"./controller-ff99125c.js";import"./dev.utils-8aef00f6.js";import"./index-37b5cbcf.js";import"./label-bd9566f6.js";import"./tab-index-6d37f269.js";import"./controller-0a60db6b.js";import"./controller-icon-ba3c5351.js";import"./icon-278d567d.js";const p=(t,e)=>{s(t,"_alert",e)},c=":host{--a11y-min-size:44px;font-size:inherit}*{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}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;width:100%}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}";d("[KolInputText] Pre- und post-Label für Währung usw.");const f=class{render(){const{ariaDescribedBy:a}=h(this.state),i=Array.isArray(this.state._list)&&this.state._list.length>0,l=""===this.state._label,s="…"===this.state._label;return t(e,{class:{"has-value":this.state._hasValue}},t("kol-input",{class:{[this.state._type]:!0,"hide-label":!!this.state._hideLabel},_currentLength:this.state._currentLength,_disabled:this.state._disabled,_error:this.state._error,_hasCounter:this.state._hasCounter,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_list:this.state._list,_maxLength:this.state._maxLength,_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"},l?t("slot",{name:"expert"}):s?t("slot",null):this.state._label),t("input",Object.assign({ref:this.catchRef,accessKey:this.state._accessKey,"aria-describedby":a.length>0?a.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:i?`${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",title:"",type:this.state._type,value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp}))))}constructor(t){i(this,t),this.catchRef=t=>{var e;this.ref=t,o(this.host,this.ref),this.disconnectedCallback(),null===(e=this.ref)||void 0===e||e.addEventListener("search",this.onChange)},this.onKeyUp=t=>{n(this,"_currentLength",t.target.value.length),"Enter"===t.code||"NumpadEnter"===t.code?r({form:this.host,ref:this.ref}):this.onChange(t)},this.onChange=t=>{var e,a;this.oldValue!==(null===(e=this.ref)||void 0===e?void 0:e.value)&&(this.oldValue=null===(a=this.ref)||void 0===a?void 0:a.value,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._hasCounter=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._label=void 0,this._list=void 0,this._maxLength=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._syncValueBySelector=void 0,this._tabIndex=void 0,this._touched=!1,this._type="text",this._value=void 0,this.state={_autoComplete:"off",_currentLength:0,_id:"id",_hasValue:!1,_label:!1,_list:[],_type:"text"},this.controller=new u(this,"text",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){p(this,t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideLabel(t){l(this,t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.controller.validateList(t)}validateMaxLength(t){this.controller.validateMaxLength(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)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateType(t){this.controller.validateType(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.oldValue=this._value,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}disconnectedCallback(){var t;null===(t=this.ref)||void 0===t||t.removeEventListener("search",this.onChange)}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_size:["validateSize"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};f.style={default:c};export{f as kol_input_text};
+import{h as t,H as e,r as i,g as a}from"./index-2c046ff1.js";import{b as s,s as n}from"./prop.validators-601f1068.js";import{v as l}from"./hide-label-9248468d.js";import{f as d}from"./a11y.tipps-9f948961.js";import{n as o}from"./dev.utils-4290338e.js";import{a as r}from"./reuse-c2156413.js";import{p as h}from"./controller-b036f128.js";import{g as p}from"./controller-7ae169ad.js";import{a as u}from"./controller-a979f7a6.js";import"./index-37b5cbcf.js";import"./label-223fef8f.js";import"./tab-index-fc60df7a.js";import"./controller-d2d4a593.js";import"./controller-icon-4388a5b7.js";import"./icon-e03e73f6.js";const c=(t,e)=>{s(t,"_alert",e)},f=":host{--a11y-min-size:44px;font-size:inherit}*{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}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;width:100%}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}";d("[KolInputText] Pre- und post-Label für Währung usw.");const v=class{render(){const{ariaDescribedBy:i}=p(this.state),a=Array.isArray(this.state._list)&&this.state._list.length>0,l=!1===this.state._label;return t(e,{class:{"has-value":this.state._hasValue}},t("kol-input",{class:{[this.state._type]:!0,"hide-label":!!this.state._hideLabel},_currentLength:this.state._currentLength,_disabled:this.state._disabled,_error:this.state._error,_hasCounter:this.state._hasCounter,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_list:this.state._list,_maxLength:this.state._maxLength,_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"},l?t("slot",null):this.state._label),t("div",{slot:"input"},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`,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:a?`${this.state._id}-list`:void 0,maxlength:this.state._maxLength,name:this.state._name,pattern:this.state._pattern,placeholder:this.state._placeholder,readOnly:this.state._readOnly,required:this.state._required,size:this.state._size,spellcheck:"false",title:"",type:this.state._type,value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp})),t("kol-tooltip",{"aria-hidden":"true",hidden:l||!this.state._hideLabel,_align:this._tooltipAlign,_id:`${this.state._id}-tooltip`,_label:"string"==typeof this.state._label?this.state._label:""}))))}constructor(t){i(this,t),this.catchRef=t=>{var e;this.ref=t,r(this.host,this.ref),this.disconnectedCallback(),null===(e=this.ref)||void 0===e||e.addEventListener("search",this.onChange)},this.onKeyUp=t=>{n(this,"_currentLength",t.target.value.length),"Enter"===t.code||"NumpadEnter"===t.code?h({form:this.host,ref:this.ref}):this.onChange(t)},this.onChange=t=>{var e,i;this.oldValue!==(null===(e=this.ref)||void 0===e?void 0:e.value)&&(this.oldValue=null===(i=this.ref)||void 0===i?void 0:i.value,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._hasCounter=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._label=void 0,this._list=void 0,this._maxLength=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._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._type="text",this._value=void 0,this.state={_autoComplete:"off",_currentLength:0,_id:`id-${o()}`,_hasValue:!1,_label:!1,_list:[],_type:"text"},this.controller=new u(this,"input-text",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){c(this,t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideLabel(t){l(this,t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.controller.validateList(t)}validateMaxLength(t){this.controller.validateMaxLength(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)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateType(t){this.controller.validateType(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.oldValue=this._value,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}disconnectedCallback(){var t;null===(t=this.ref)||void 0===t||t.removeEventListener("search",this.onChange)}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_size:["validateSize"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};v.style={default:f};export{v as kol_input_text};

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

	@@ -1 +1 @@
1	- {"version":3,"names":["validateAlert","component","value","watchBoolean","defaultStyleCss","featureHint","KolInputText","render","ariaDescribedBy","getRenderStates","this","state","hasList","Array","isArray","_list","length","showExpertSlot","_label","showDefaultSlot","h","Host","class","_hasValue","_type","_hideLabel","_currentLength","_disabled","_error","_hasCounter","_hint","_icon","_id","_maxLength","_readOnly","_required","_smartButton","_touched","onClick","_a","ref","focus","slot","name","Object","assign","catchRef","accessKey","_accessKey","join","undefined","autoCapitalize","autoComplete","_autoComplete","autoCorrect","disabled","id","list","maxlength","_name","pattern","_pattern","placeholder","_placeholder","readOnly","required","size","_size","spellcheck","title","type","_value","controller","onFacade","onKeyUp","constructor","hostRef","propagateFocus","host","disconnectedCallback","addEventListener","onChange","event","setState","target","code","propagateSubmitEventToForm","form","oldValue","_b","InputTextController","validateAccessKey","validateAutoComplete","validateDisabled","validateError","validateHasCounter","validateHideLabel","validateHint","validateIcon","validateId","validateLabel","validateList","validateMaxLength","validateName","validateOn","validatePattern","validatePlaceholder","validateReadOnly","validateRequired","validateSize","validateSmartButton","validateSyncValueBySelector","validateTabIndex","validateTouched","validateType","validateValue","componentWillLoad","_alert","addValueChangeListener","v","removeEventListener"],"sources":["src/types/props/alert.ts","src/components/input-text/style.css?tag=kol-input-text&mode=default&encapsulation=shadow","src/components/input-text/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types /\n/* de\n * Macht die Fehlermeldung dieses Elements von Screenreadern lesbar.\n /\n/* en\n * Makes hints readable for screenreaders.\n /\nexport type PropAlert = {\n\talert: boolean;\n};\n\n/ validator /\nexport const validateAlert = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_alert', value);\n};\n","@import url(../input-line.css);\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { ButtonProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { InputTextType } from '../../types/input/control/text';\nimport { InputTypeOnDefault, InputTypeOnOff } from '../../types/input/types';\nimport { validateAlert } from '../../types/props/alert';\nimport { validateHideLabel } from '../../types/props/hide-label';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { setState } from '../../utils/prop.validators';\nimport { propagateFocus } from '../../utils/reuse';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { getRenderStates } from '../input/controller';\nimport { InputTextController } from './controller';\nimport { ComponentApi, States } from './types';\n\nfeatureHint(`[KolInputText] Pre- und post-Label für Währung usw.`);\n\n/\n @slot - Die Beschriftung des Eingabefeldes.\n /\n@Component({\n\ttag: 'kol-input-text',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputText implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputTextElement;\n\tprivate ref?: HTMLInputElement;\n\tprivate oldValue?: string;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t\tthis.disconnectedCallback();\n\t\tthis.ref?.addEventListener('search', this.onChange);\n\t};\n\n\tprivate readonly onKeyUp = (event: KeyboardEvent) => {\n\t\tsetState(this, '_currentLength', (event.target as HTMLInputElement).value.length);\n\t\tif (event.code === 'Enter' \|\| event.code === 'NumpadEnter') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.ref,\n\t\t\t});\n\t\t} else {\n\t\t\tthis.onChange(event);\n\t\t}\n\t};\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tif (this.oldValue !== this.ref?.value) {\n\t\t\tthis.oldValue = this.ref?.value;\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\tconst showExpertSlot = this.state._label === ''; // _label=\"\" or _label\n\t\tconst showDefaultSlot = this.state._label === '…'; // deprecated: default slot will be removed in v2.0.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\t[this.state._type]: true,\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t\t}}\n\t\t\t\t\t_currentLength={this.state._currentLength}\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_hasCounter={this.state._hasCounter}\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_maxLength={this.state._maxLength}\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\">{showExpertSlot ? <slot name=\"expert\"></slot> : showDefaultSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={this.catchRef}\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\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\ttitle=\"\"\n\t\t\t\t\t\t// title={this.state._title}\n\t\t\t\t\t\ttype={this.state._type}\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\t// onInput={this.controller.onFacade.onChange}\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: InputTextController;\n\n\t/\n\t Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.\n\t /\n\t@Prop() public _accessKey?: string;\n\n\t/\n\t Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.\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 Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t /\n\t@Prop() 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 Aktiviert den Zeichenanzahlzähler am unteren Rand des Eingabefeldes.\n\t /\n\t@Prop() public _hasCounter?: boolean;\n\n\t/\n\t Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t /\n\t@Prop() 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 Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t /\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/\n\t Gibt die interne ID des primären Elements in der Komponente an.\n\t /\n\t@Prop() public _id?: string;\n\n\t/\n\t Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t /\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\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 maximal eingegeben werden können.\n\t /\n\t@Prop() public _maxLength?: number;\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üfmuster (Pattern) 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() public _readOnly?: boolean;\n\n\t/\n\t Macht das Eingabeelement zu einem Pflichtfeld.\n\t /\n\t@Prop() 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 Selector for synchronizing the value with another input element.\n\t * @internal\n\t /\n\t@Prop() public _syncValueBySelector?: string;\n\n\t/\n\t Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t /\n\t@Prop() public _tabIndex?: number;\n\n\t/\n\t 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 Setzt den Typ der Komponente oder des interaktiven Elements in der Komponente an.\n\t /\n\t@Prop() public _type?: InputTextType = 'text';\n\n\t/\n\t Gibt den Wert des Eingabefeldes an.\n\t /\n\t@Prop({ mutable: true }) public _value?: string;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_currentLength: 0,\n\t\t_id: 'id',\n\t\t_hasValue: false,\n\t\t_label: false, // ⚠ required\n\t\t_list: [],\n\t\t_type: 'text',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputTextController(this, 'text', 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\tvalidateAlert(this, 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('_hasCounter')\n\tpublic validateHasCounter(value?: boolean): void {\n\t\tthis.controller.validateHasCounter(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tvalidateHideLabel(this, 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('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(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('_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/\n\t @deprecated\n\t */\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('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: string): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: InputTextType): void {\n\t\tthis.controller.validateType(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.oldValue = this._value;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.ref?.removeEventListener('search', this.onChange);\n\t}\n}\n"],"mappings":"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"}
1	+ {"version":3,"names":["validateAlert","component","value","watchBoolean","defaultStyleCss","featureHint","KolInputText","render","ariaDescribedBy","getRenderStates","this","state","hasList","Array","isArray","_list","length","hasExpertSlot","_label","h","Host","class","_hasValue","_type","_hideLabel","_currentLength","_disabled","_error","_hasCounter","_hint","_icon","_id","_maxLength","_readOnly","_required","_smartButton","_touched","onClick","_a","ref","focus","slot","Object","assign","catchRef","accessKey","_accessKey","join","undefined","autoCapitalize","autoComplete","_autoComplete","autoCorrect","disabled","id","list","maxlength","name","_name","pattern","_pattern","placeholder","_placeholder","readOnly","required","size","_size","spellcheck","title","type","_value","controller","onFacade","onKeyUp","hidden","_align","_tooltipAlign","constructor","hostRef","propagateFocus","host","disconnectedCallback","addEventListener","onChange","event","setState","target","code","propagateSubmitEventToForm","form","oldValue","_b","nonce","InputTextController","validateAccessKey","validateAutoComplete","validateDisabled","validateError","validateHasCounter","validateHideLabel","validateHint","validateIcon","validateId","validateLabel","validateList","validateMaxLength","validateName","validateOn","validatePattern","validatePlaceholder","validateReadOnly","validateRequired","validateSize","validateSmartButton","validateSyncValueBySelector","validateTabIndex","validateTouched","validateType","validateValue","componentWillLoad","_alert","addValueChangeListener","v","removeEventListener"],"sources":["src/types/props/alert.ts","src/components/input-text/style.css?tag=kol-input-text&mode=default&encapsulation=shadow","src/components/input-text/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types /\n/* de\n * Macht die Fehlermeldung dieses Elements von Screenreadern lesbar.\n /\n/* en\n * Makes hints readable for screenreaders.\n /\nexport type PropAlert = {\n\talert: boolean;\n};\n\n/ validator /\nexport const validateAlert = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_alert', value);\n};\n","@import url(../input-line.css);\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { ButtonProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { InputTextType } from '../../types/input/control/text';\nimport { InputTypeOnDefault, InputTypeOnOff } from '../../types/input/types';\nimport { validateAlert } from '../../types/props/alert';\nimport { Align } from '../../types/props/align';\nimport { validateHideLabel } from '../../types/props/hide-label';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { nonce } from '../../utils/dev.utils';\nimport { setState } from '../../utils/prop.validators';\nimport { propagateFocus } from '../../utils/reuse';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { getRenderStates } from '../input/controller';\nimport { InputTextController } from './controller';\nimport { ComponentApi, States } from './types';\n\nfeatureHint(`[KolInputText] Pre- und post-Label für Währung usw.`);\n\n/\n @slot - Die Beschriftung des Eingabefeldes.\n /\n@Component({\n\ttag: 'kol-input-text',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputText implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputTextElement;\n\tprivate ref?: HTMLInputElement;\n\tprivate oldValue?: string;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t\tthis.disconnectedCallback();\n\t\tthis.ref?.addEventListener('search', this.onChange);\n\t};\n\n\tprivate readonly onKeyUp = (event: KeyboardEvent) => {\n\t\tsetState(this, '_currentLength', (event.target as HTMLInputElement).value.length);\n\t\tif (event.code === 'Enter' \|\| event.code === 'NumpadEnter') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.ref,\n\t\t\t});\n\t\t} else {\n\t\t\tthis.onChange(event);\n\t\t}\n\t};\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tif (this.oldValue !== this.ref?.value) {\n\t\t\tthis.oldValue = this.ref?.value;\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\tconst hasExpertSlot = this.state._label === false; // _label=\"\" or _label\n\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\t[this.state._type]: true,\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t\t}}\n\t\t\t\t\t_currentLength={this.state._currentLength}\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_hasCounter={this.state._hasCounter}\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_maxLength={this.state._maxLength}\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{/ TODO: der folgende Slot ohne Name muss später entfernt werden /}\n\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<div slot=\"input\">\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}\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\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tlist={hasList ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\t\tmaxlength={this.state._maxLength}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\tpattern={this.state._pattern}\n\t\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\t\treadOnly={this.state._readOnly}\n\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\tsize={this.state._size}\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\t// title={this.state._title}\n\t\t\t\t\t\t\ttype={this.state._type}\n\t\t\t\t\t\t\tvalue={this.state._value as string}\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t// onInput={this.controller.onFacade.onChange}\n\t\t\t\t\t\t\tonKeyUp={this.onKeyUp}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<kol-tooltip\n\t\t\t\t\t\t\t/\n\t\t\t\t\t\t\t Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,\n\t\t\t\t\t\t\t * verhindert aber nicht das Aria-Labelledby vorgelesen wird.\n\t\t\t\t\t\t\t /\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\thidden={hasExpertSlot \|\| !this.state._hideLabel}\n\t\t\t\t\t\t\t_align={this._tooltipAlign}\n\t\t\t\t\t\t\t_id={`${this.state._id}-tooltip`}\n\t\t\t\t\t\t\t_label={typeof this.state._label === 'string' ? this.state._label : ''}\n\t\t\t\t\t\t></kol-tooltip>\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: InputTextController;\n\n\t/\n\t Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.\n\t /\n\t@Prop() public _accessKey?: string;\n\n\t/\n\t Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.\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 Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t /\n\t@Prop() 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 Aktiviert den Zeichenanzahlzähler am unteren Rand des Eingabefeldes.\n\t /\n\t@Prop() public _hasCounter?: boolean;\n\n\t/\n\t Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t /\n\t@Prop() 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 Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t /\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/\n\t Gibt die interne ID des primären Elements in der Komponente an.\n\t /\n\t@Prop() public _id?: string;\n\n\t/\n\t Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t /\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\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 maximal eingegeben werden können.\n\t /\n\t@Prop() public _maxLength?: number;\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üfmuster (Pattern) 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() public _readOnly?: boolean;\n\n\t/\n\t Macht das Eingabeelement zu einem Pflichtfeld.\n\t /\n\t@Prop() 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 Selector for synchronizing the value with another input element.\n\t * @internal\n\t /\n\t@Prop() public _syncValueBySelector?: string;\n\n\t/\n\t Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t /\n\t@Prop() public _tabIndex?: number;\n\n\t/\n\t Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.\n\t /\n\t@Prop() public _tooltipAlign?: Align = 'top';\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 Setzt den Typ der Komponente oder des interaktiven Elements in der Komponente an.\n\t /\n\t@Prop() public _type?: InputTextType = 'text';\n\n\t/\n\t Gibt den Wert des Eingabefeldes an.\n\t /\n\t@Prop({ mutable: true }) public _value?: string;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_currentLength: 0,\n\t\t_id: `id-${nonce()}`, // ⚠ required\n\t\t_hasValue: false,\n\t\t_label: false, // ⚠ required\n\t\t_list: [],\n\t\t_type: 'text',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputTextController(this, 'input-text', 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\tvalidateAlert(this, 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('_hasCounter')\n\tpublic validateHasCounter(value?: boolean): void {\n\t\tthis.controller.validateHasCounter(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tvalidateHideLabel(this, 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('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(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('_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/\n\t @deprecated\n\t */\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('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: string): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: InputTextType): void {\n\t\tthis.controller.validateType(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.oldValue = this._value;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.ref?.removeEventListener('search', this.onChange);\n\t}\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as e,H as i}from"./index-2c046ff1.js";import{a as o}from"./i18n-64b07ed9.js";import{c as a,v as s}from"./color-9d0ce5e3.js";import{d as r}from"./a11y.tipps-e607b8b3.js";import{b as n}from"./prop.validators-683bb1d0.js";import"./index-d8ac1088.js";import"./index-37b5cbcf.js";import"./dev.utils-8aef00f6.js";import"./reuse-c2156413.js";const l=":host{--a11y-min-size:44px;font-size:inherit}*{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}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}text{font-size:90px;letter-spacing:normal;word-spacing:normal}",h=360;function d(t){return t*Math.PI/180}function c(t){return Math.round((Math.cos(d(t))+1)/2*225)}const p=class{constructor(e){t(this,e),this.handleColorChange=(t,e)=>{if("string"==typeof t){const i=a(t);e.set("_color",{red:i[0],green:i[1],blue:i[2]})}else r("[KolKolibri] You used the complex color schema. For the KoliBri we use need the color as hex string.")},this._animate=void 0,this._color="#003c78",this._labeled=void 0,this.state={_animate:!1,_color:{red:0,green:60,blue:120},_labeled:!0}}render(){const t=!0===this.state._animate?`rgb(${c(this.state._color.red)},${c(this.state._color.green)},${c(this.state._color.blue)})`:`rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;return e(i,null,e("svg",{role:"img","aria-label":o("kol-kolibri-logo"),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 600 600",fill:t},e("path",{d:"M353 322L213 304V434L353 322Z"}),e("path",{d:"M209 564V304L149 434L209 564Z"}),e("path",{d:"M357 316L417 250L361 210L275 244L357 316Z"}),e("path",{d:"M329 218L237 92L250 222L272 241L329 218Z"}),e("path",{d:"M353 318L35 36L213 300L353 318Z"}),e("path",{d:"M391 286L565 272L421 252L391 286Z"}),!0===this.state._labeled&&e("text",{x:"250",y:"525",fill:t},"KoliBri")))}validateAnimate(t){n(this,"_animate",t)}validateColor(t){s(this,t,{defaultValue:"#003c78",hooks:{beforePatch:this.handleColorChange}})}validateLabeled(t){n(this,"_labeled",t)}componentWillLoad(){this.validateAnimate(this._animate),this.validateColor(this._color),this.validateLabeled(this._labeled)}componentDidRender(){clearInterval(this.interval),this.state._animate&&(this.interval=setInterval((()=>{this.state=Object.assign(Object.assign({},this.state),{_color:{red:(this.state._color.red+1)%h,green:(this.state._color.green+2)%h,blue:(this.state._color.blue+3)%h}})}),50))}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_animate:["validateAnimate"],_color:["validateColor"],_labeled:["validateLabeled"]}}};p.style={default:l};export{p as kol_kolibri};
+import{r as t,h as e,H as i}from"./index-2c046ff1.js";import{a as o}from"./i18n-23b83118.js";import{c as a,v as s}from"./color-408da8e8.js";import{d as r}from"./a11y.tipps-9f948961.js";import{b as n}from"./prop.validators-601f1068.js";import"./index-d8ac1088.js";import"./index-37b5cbcf.js";import"./dev.utils-4290338e.js";import"./reuse-c2156413.js";const l=":host{--a11y-min-size:44px;font-size:inherit}*{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}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}text{font-size:90px;letter-spacing:normal;word-spacing:normal}",h=360;function d(t){return t*Math.PI/180}function c(t){return Math.round((Math.cos(d(t))+1)/2*225)}const p=class{constructor(e){t(this,e),this.handleColorChange=(t,e)=>{if("string"==typeof t){const i=a(t);e.set("_color",{red:i[0],green:i[1],blue:i[2]})}else r("[KolKolibri] You used the complex color schema. For the KoliBri we use need the color as hex string.")},this._animate=void 0,this._color="#003c78",this._labeled=void 0,this.state={_animate:!1,_color:{red:0,green:60,blue:120},_labeled:!0}}render(){const t=!0===this.state._animate?`rgb(${c(this.state._color.red)},${c(this.state._color.green)},${c(this.state._color.blue)})`:`rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;return e(i,null,e("svg",{role:"img","aria-label":o("kol-kolibri-logo"),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 600 600",fill:t},e("path",{d:"M353 322L213 304V434L353 322Z"}),e("path",{d:"M209 564V304L149 434L209 564Z"}),e("path",{d:"M357 316L417 250L361 210L275 244L357 316Z"}),e("path",{d:"M329 218L237 92L250 222L272 241L329 218Z"}),e("path",{d:"M353 318L35 36L213 300L353 318Z"}),e("path",{d:"M391 286L565 272L421 252L391 286Z"}),!0===this.state._labeled&&e("text",{x:"250",y:"525",fill:t},"KoliBri")))}validateAnimate(t){n(this,"_animate",t)}validateColor(t){s(this,t,{defaultValue:"#003c78",hooks:{beforePatch:this.handleColorChange}})}validateLabeled(t){n(this,"_labeled",t)}componentWillLoad(){this.validateAnimate(this._animate),this.validateColor(this._color),this.validateLabeled(this._labeled)}componentDidRender(){clearInterval(this.interval),this.state._animate&&(this.interval=setInterval((()=>{this.state=Object.assign(Object.assign({},this.state),{_color:{red:(this.state._color.red+1)%h,green:(this.state._color.green+2)%h,blue:(this.state._color.blue+3)%h}})}),50))}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_animate:["validateAnimate"],_color:["validateColor"],_labeled:["validateLabeled"]}}};p.style={default:l};export{p as kol_kolibri};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as e,g as n}from"./index-2c046ff1.js";import{a as s}from"./i18n-64b07ed9.js";import{a as o}from"./reuse-c2156413.js";import"./index-d8ac1088.js";import"./index-37b5cbcf.js";import"./a11y.tipps-e607b8b3.js";import"./dev.utils-8aef00f6.js";const a=":host{--a11y-min-size:44px;font-size:inherit}*{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}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:inline-block}:is(a,button){display:inline-flex;place-items:center;text-align:center;text-decoration-line:none}:is(a,button)>kol-span-wc{margin:auto;width:100%}:is(button):disabled{cursor:not-allowed;opacity:0.5}",r=class{constructor(i){t(this,i),this.catchRef=t=>{this.ref=t,o(this.host,this.ref)},this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._download=!1,this._hideLabel=!1,this._href=void 0,this._icon=void 0,this._iconOnly=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._target=void 0,this._targetDescription=s("kol-open-link-in-tab"),this._tooltipAlign="right",this._variant="normal"}render(){return i(e,null,i("kol-link-wc",{ref:this.catchRef,class:{button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_download:this._download,_hideLabel:this._hideLabel,_href:this._href,_icon:this._icon,_label:this._label,_on:this._on,_role:"button",_tabIndex:this._tabIndex,_target:this._target,_targetDescription:this._targetDescription,_tooltipAlign:this._tooltipAlign},i("slot",{name:"expert",slot:"expert"})))}get host(){return n(this)}};r.style={default:a};export{r as kol_link_button};
+import{r as t,h as i,H as n,g as e}from"./index-2c046ff1.js";import{a as s}from"./i18n-23b83118.js";import{a as o}from"./reuse-c2156413.js";import"./index-d8ac1088.js";import"./index-37b5cbcf.js";import"./a11y.tipps-9f948961.js";import"./dev.utils-4290338e.js";const a=":host{--a11y-min-size:44px;font-size:inherit}*{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}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:inline-block}:is(a,button){display:inline-flex;place-items:center;text-align:center;text-decoration-line:none}:is(a,button)>kol-span-wc{margin:auto;width:100%}:is(button):disabled{cursor:not-allowed;opacity:0.5}",r=class{constructor(i){t(this,i),this.catchRef=t=>{this.ref=t,o(this.host,this.ref)},this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._download=!1,this._hideLabel=!1,this._href=void 0,this._icon=void 0,this._iconOnly=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._target=void 0,this._targetDescription=s("kol-open-link-in-tab"),this._tooltipAlign="right",this._variant="normal"}render(){return i(n,null,i("kol-link-wc",{ref:this.catchRef,class:{button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_download:this._download,_hideLabel:this._hideLabel,_href:this._href,_icon:this._icon,_label:this._label,_on:this._on,_role:"button",_tabIndex:this._tabIndex,_target:this._target,_targetDescription:this._targetDescription,_tooltipAlign:this._tooltipAlign},i("slot",{name:"expert",slot:"expert"})))}get host(){return e(this)}};r.style={default:a};export{r as kol_link_button};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as t}from"./index-2c046ff1.js";import{v as e}from"./label-bd9566f6.js";import{w as a,a as l,b as n}from"./prop.validators-683bb1d0.js";import{w as s}from"./validation-0efb75d3.js";import{w as r}from"./validation-1f01325c.js";import"./a11y.tipps-e607b8b3.js";import"./dev.utils-8aef00f6.js";import"./reuse-c2156413.js";import"./index-37b5cbcf.js";const o=":host{--a11y-min-size:44px;font-size:inherit}*{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}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}ul{list-style:none;margin:0;padding:0}nav.horizontal ul{display:flex;flex-wrap:wrap}nav.horizontal li{margin-left:1.25rem;margin-right:0.25rem}nav.horizontal li:first-child{margin-left:0}nav.horizontal li:last-child{margin-right:0}nav.vertical li{margin-left:1.75rem;margin-right:0.5rem}li.list-none{list-style-type:none !important;margin-left:0}",h=i=>{const e=[];return i.links.map(((a,l)=>{e.push(t("li",{key:l,class:{ident:l>0&&"vertical"===i.orientation,"list-none":0===l&&"horizontal"===i.orientation},style:{listStyleType:i.listStyleType}},t("kol-link",Object.assign({},a))))})),e},d=class{constructor(t){i(this,t),this.isUl=!0,this._ariaLabel=void 0,this._listStyleType=void 0,this._heading=void 0,this._label=void 0,this._level=void 0,this._links=void 0,this._ordered=void 0,this._orientation="vertical",this.state={_label:"…",_listStyleType:"disc",_links:[],_orientation:"vertical"}}render(){var i;return t("nav",{"aria-label":this.state._label,class:{vertical:"vertical"===this.state._orientation,horizontal:"horizontal"===this.state._orientation}},"string"==typeof this.state._heading&&(null===(i=this.state._heading)||void 0===i?void 0:i.length)>0&&t("kol-heading-wc",{_label:this.state._heading,_level:this.state._level}),!1===this.isUl?t("ol",null,t(h,{links:this.state._links,orientation:this.state._orientation,listStyleType:this.state._listStyleType})):t("ul",null,t(h,{links:this.state._links,orientation:this.state._orientation,listStyleType:this.state._listStyleType})))}validateAriaLabel(t){this.validateLabel(t)}validateHeading(t){a(this,"_heading",t)}validateLabel(t){e(this,t)}validateLevel(t){s(this,t)}validateListStyleType(t){l(this,"_listStyleType",(t=>{switch(t){case"disc":case"circle":case"square":case"none":return this.isUl=!0,!0;case"decimal":case"decimal-leading-zero":case"lower-alpha":case"lower-latin":case"lower-greek":case"lower-roman":case"upper-alpha":case"upper-latin":case"upper-roman":return this.isUl=!1,!0;default:return!1}}),new Set(["https://www.w3schools.com/tags/tag_ol.asp"]),t)}validateLinks(t){r("KolLinkGroup",this,t)}validateOrdered(t){n(this,"_ordered",t)}validateOrientation(t){l(this,"_orientation",(t=>"horizontal"===t||"vertical"===t),new Set(["Orientation {horizontal, vertical}"]),t,{defaultValue:"vertical"})}componentWillLoad(){this.validateHeading(this._heading),this.validateLabel(this._label||this._ariaLabel),this.validateLevel(this._level),this.validateListStyleType(this._listStyleType),this.validateLinks(this._links),this.validateOrientation(this._orientation)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_heading:["validateHeading"],_label:["validateLabel"],_level:["validateLevel"],_listStyleType:["validateListStyleType"],_links:["validateLinks"],_ordered:["validateOrdered"],_orientation:["validateOrientation"]}}};d.style={default:o};export{d as kol_link_group};
+import{r as i,h as t}from"./index-2c046ff1.js";import{v as e}from"./label-223fef8f.js";import{w as a,a as l,b as n}from"./prop.validators-601f1068.js";import{w as s}from"./validation-5300d0a1.js";import{w as r}from"./validation-4acc18ad.js";import"./a11y.tipps-9f948961.js";import"./dev.utils-4290338e.js";import"./reuse-c2156413.js";import"./index-37b5cbcf.js";const o=":host{--a11y-min-size:44px;font-size:inherit}*{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}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}ul{list-style:none;margin:0;padding:0}nav.horizontal ul{display:flex;flex-wrap:wrap}nav.horizontal li{margin-left:1.25rem;margin-right:0.25rem}nav.horizontal li:first-child{margin-left:0}nav.horizontal li:last-child{margin-right:0}nav.vertical li{margin-left:1.75rem;margin-right:0.5rem}li.list-none{list-style-type:none !important;margin-left:0}",h=i=>{const e=[];return i.links.map(((a,l)=>{e.push(t("li",{key:l,class:{ident:l>0&&"vertical"===i.orientation,"list-none":0===l&&"horizontal"===i.orientation},style:{listStyleType:i.listStyleType}},t("kol-link",Object.assign({},a))))})),e},d=class{constructor(t){i(this,t),this.isUl=!0,this._ariaLabel=void 0,this._listStyleType=void 0,this._heading=void 0,this._label=void 0,this._level=void 0,this._links=void 0,this._ordered=void 0,this._orientation="vertical",this.state={_label:"…",_listStyleType:"disc",_links:[],_orientation:"vertical"}}render(){var i;return t("nav",{"aria-label":this.state._label,class:{vertical:"vertical"===this.state._orientation,horizontal:"horizontal"===this.state._orientation}},"string"==typeof this.state._heading&&(null===(i=this.state._heading)||void 0===i?void 0:i.length)>0&&t("kol-heading-wc",{_label:this.state._heading,_level:this.state._level}),!1===this.isUl?t("ol",null,t(h,{links:this.state._links,orientation:this.state._orientation,listStyleType:this.state._listStyleType})):t("ul",null,t(h,{links:this.state._links,orientation:this.state._orientation,listStyleType:this.state._listStyleType})))}validateAriaLabel(t){this.validateLabel(t)}validateHeading(t){a(this,"_heading",t)}validateLabel(t){e(this,t)}validateLevel(t){s(this,t)}validateListStyleType(t){l(this,"_listStyleType",(t=>{switch(t){case"disc":case"circle":case"square":case"none":return this.isUl=!0,!0;case"decimal":case"decimal-leading-zero":case"lower-alpha":case"lower-latin":case"lower-greek":case"lower-roman":case"upper-alpha":case"upper-latin":case"upper-roman":return this.isUl=!1,!0;default:return!1}}),new Set(["https://www.w3schools.com/tags/tag_ol.asp"]),t)}validateLinks(t){r("KolLinkGroup",this,t)}validateOrdered(t){n(this,"_ordered",t)}validateOrientation(t){l(this,"_orientation",(t=>"horizontal"===t||"vertical"===t),new Set(["Orientation {horizontal, vertical}"]),t,{defaultValue:"vertical"})}componentWillLoad(){this.validateHeading(this._heading),this.validateLabel(this._label||this._ariaLabel),this.validateLevel(this._level),this.validateListStyleType(this._listStyleType),this.validateLinks(this._links),this.validateOrientation(this._orientation)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_heading:["validateHeading"],_label:["validateLabel"],_level:["validateLevel"],_listStyleType:["validateListStyleType"],_links:["validateLinks"],_ordered:["validateOrdered"],_orientation:["validateOrientation"]}}};d.style={default:o};export{d as kol_link_group};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as t,H as e,g as s}from"./index-2c046ff1.js";import{a}from"./i18n-64b07ed9.js";import{w as l}from"./button-link-2ad7f3cf.js";import{v as n,a as h}from"./aria-selected-d90aa300.js";import{b as d,w as o,f as r,h as f,i as c}from"./prop.validators-683bb1d0.js";import{v}from"./hide-label-e9f288ac.js";import{v as p,w as _}from"./icon-278d567d.js";import{a as b}from"./label-bd9566f6.js";import{d as u,g}from"./a11y.tipps-e607b8b3.js";import{n as m}from"./dev.utils-8aef00f6.js";import{a as x}from"./reuse-c2156413.js";import{v as j}from"./tab-index-6d37f269.js";import"./index-d8ac1088.js";import"./index-37b5cbcf.js";const A=(t,e)=>{"boolean"==typeof e?d(t,"_download",e):o(t,"_download",e)},k=(t,e,i={})=>{o(t,"_href",e,i)},y=(t,e)=>{d(t,"_stealth",e)},w=class{constructor(t){i(this,t),this.nonce=m(),this.catchRef=t=>{this.ref=t,x(this.host,this.ref)},this.onClick=t=>{var e,i;"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onClick)&&(t.preventDefault(),r(t,this.ref),null===(i=this.state._on)||void 0===i||i.onClick(t,this.state._href))},this.getRenderValues=()=>{let t={};"string"==typeof this.state._selector&&(t={role:"link",tabIndex:0,onClick:()=>{c(this.state._selector)},onKeyPress:()=>{c(this.state._selector)}});const e="string"==typeof this.state._target&&"_self"!==this.state._target,i={href:"string"==typeof this.state._href&&this.state._href.length>0?this.state._href:"javascript:void(0);",target:"string"==typeof this.state._target&&this.state._target.length>0?this.state._target:void 0,rel:e?"noopener":void 0};return"image"!==this.state._useCase&&!0!==this.state._hideLabel||this.state._label||u("[KolLink] Es muss ein Aria-Label gesetzt werden, wenn eine Grafik verlinkt oder der _hide-label gesetzt ist."),{isExternal:e,tagAttrs:i,goToProps:t}},this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._disabled=!1,this._download=!1,this._hideLabel=!1,this._href=void 0,this._icon=void 0,this._iconAlign=void 0,this._iconOnly=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._selector=void 0,this._stealth=!1,this._tabIndex=void 0,this._target=void 0,this._targetDescription=a("kol-open-link-in-tab"),this._tooltipAlign="right",this._useCase="text",this.state={_href:"…",_icon:{},_label:!1}}render(){const{isExternal:i,tagAttrs:a,goToProps:s}=this.getRenderValues(),l=!1===this.state._label;return t(e,null,t("a",Object.assign({ref:this.catchRef},a,{"aria-controls":this.state._ariaControls,"aria-current":this.state._ariaCurrent,"aria-expanded":f(this.state._ariaExpanded),"aria-labelledby":this.state._hideLabel?this.nonce:void 0,"aria-selected":f(this.state._ariaSelected),class:{disabled:!0===this.state._disabled,"skip ":!1!==this.state._stealth,"icon-only":!0===this.state._hideLabel,"hide-label":!0===this.state._hideLabel,"external-link":i}},this.state._on,{onClick:this.onClick,onKeyPress:this.onClick},s,{role:this.state._role,tabIndex:this.state._tabIndex}),t("kol-span-wc",{_icon:this.state._icon,_hideLabel:this.state._hideLabel,_label:!l&&(this.state._label||this.state._href)},t("slot",{name:"expert",slot:"expert"})),i&&t("kol-icon",{class:"external-link-icon",_label:this.state._targetDescription,_icon:"codicon codicon-link-external"})),t("kol-tooltip",{"aria-hidden":"true",hidden:l||!this.state._hideLabel,_align:this.state._tooltipAlign,_id:this.nonce,_label:this.state._label||this.state._href}))}validateAriaControls(t){o(this,"_ariaControls",t)}validateAriaCurrent(t){n(this,t)}validateAriaExpanded(t){d(this,"_ariaExpanded",t)}validateAriaLabel(t){this.validateLabel(t)}validateAriaSelected(t){h(this,t)}validateDisabled(t){d(this,"_disabled",t),!0===t&&g()}validateDownload(t){A(this,t)}validateHideLabel(t){v(this,t)}validateHref(t){k(this,t)}validateIcon(t){p(this,t)}validateIconAlign(t){_(this,t)}validateIconOnly(t){this.validateHideLabel(t)}validateLabel(t){b(this,t)}validateOn(t){"object"==typeof t&&"function"==typeof(null==t?void 0:t.onClick)&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validateRole(t){o(this,"_role",t)}validateSelector(t){o(this,"_selector",t)}validateStealth(t){y(this,t)}validateTabIndex(t){j(this,t)}validateTarget(t){o(this,"_target",t)}validateTargetDescription(t){o(this,"_targetDescription",t)}validateTooltipAlign(t){l(this,"_tooltipAlign",t)}validateUseCase(t){"string"==typeof t&&(this.state=Object.assign(Object.assign({},this.state),{_useCase:t}))}componentWillLoad(){this.validateAriaControls(this._ariaControls),this.validateAriaCurrent(this._ariaCurrent),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaSelected(this._ariaSelected),this.validateDisabled(this._disabled),this.validateDownload(this._download),this.validateHideLabel(this._hideLabel||this._iconOnly),this.validateHref(this._href),this.validateIcon(this._icon),this.validateIconAlign(this._iconAlign),this.validateLabel(this._label||this._ariaLabel),this.validateOn(this._on),this.validateRole(this._role),this.validateSelector(this._selector),this.validateStealth(this._stealth),this.validateTabIndex(this._tabIndex),this.validateTarget(this._target),this.validateTargetDescription(this._targetDescription),this.validateTooltipAlign(this._tooltipAlign),this.validateUseCase(this._useCase)}get host(){return s(this)}static get watchers(){return{_ariaControls:["validateAriaControls"],_ariaCurrent:["validateAriaCurrent"],_ariaExpanded:["validateAriaExpanded"],_ariaLabel:["validateAriaLabel"],_ariaSelected:["validateAriaSelected"],_disabled:["validateDisabled"],_download:["validateDownload"],_hideLabel:["validateHideLabel"],_href:["validateHref"],_icon:["validateIcon"],_iconAlign:["validateIconAlign"],_iconOnly:["validateIconOnly"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_selector:["validateSelector"],_stealth:["validateStealth"],_tabIndex:["validateTabIndex"],_target:["validateTarget"],_targetDescription:["validateTargetDescription"],_tooltipAlign:["validateTooltipAlign"],_useCase:["validateUseCase"]}}};export{w as kol_link_wc};
+import{r as i,h as t,H as e,g as s}from"./index-2c046ff1.js";import{a}from"./i18n-23b83118.js";import{w as l}from"./button-link-99acae48.js";import{v as n,a as h}from"./aria-selected-b9d7d1e4.js";import{b as d,w as o,f as r,h as f,i as c}from"./prop.validators-601f1068.js";import{v}from"./hide-label-9248468d.js";import{v as p,w as _}from"./icon-e03e73f6.js";import{a as b}from"./label-223fef8f.js";import{d as u,h as g}from"./a11y.tipps-9f948961.js";import{n as m}from"./dev.utils-4290338e.js";import{a as x}from"./reuse-c2156413.js";import{v as j}from"./tab-index-fc60df7a.js";import"./index-d8ac1088.js";import"./index-37b5cbcf.js";const A=(t,e)=>{"boolean"==typeof e?d(t,"_download",e):o(t,"_download",e)},k=(t,e,i={})=>{o(t,"_href",e,i)},y=(t,e)=>{d(t,"_stealth",e)},w=class{constructor(t){i(this,t),this.nonce=m(),this.catchRef=t=>{this.ref=t,x(this.host,this.ref)},this.onClick=t=>{var e,i;"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onClick)&&(t.preventDefault(),r(t,this.ref),null===(i=this.state._on)||void 0===i||i.onClick(t,this.state._href))},this.getRenderValues=()=>{let t={};"string"==typeof this.state._selector&&(t={role:"link",tabIndex:0,onClick:()=>{c(this.state._selector)},onKeyPress:()=>{c(this.state._selector)}});const e="string"==typeof this.state._target&&"_self"!==this.state._target,i={href:"string"==typeof this.state._href&&this.state._href.length>0?this.state._href:"javascript:void(0);",target:"string"==typeof this.state._target&&this.state._target.length>0?this.state._target:void 0,rel:e?"noopener":void 0};return"image"!==this.state._useCase&&!0!==this.state._hideLabel||this.state._label||u("[KolLink] Es muss ein Aria-Label gesetzt werden, wenn eine Grafik verlinkt oder der _hide-label gesetzt ist."),{isExternal:e,tagAttrs:i,goToProps:t}},this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._disabled=!1,this._download=!1,this._hideLabel=!1,this._href=void 0,this._icon=void 0,this._iconAlign=void 0,this._iconOnly=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._selector=void 0,this._stealth=!1,this._tabIndex=void 0,this._target=void 0,this._targetDescription=a("kol-open-link-in-tab"),this._tooltipAlign="right",this._useCase="text",this.state={_href:"…",_icon:{},_label:!1}}render(){const{isExternal:i,tagAttrs:a,goToProps:s}=this.getRenderValues(),l=!1===this.state._label;return t(e,null,t("a",Object.assign({ref:this.catchRef},a,{"aria-controls":this.state._ariaControls,"aria-current":this.state._ariaCurrent,"aria-expanded":f(this.state._ariaExpanded),"aria-labelledby":this.state._hideLabel?this.nonce:void 0,"aria-selected":f(this.state._ariaSelected),class:{disabled:!0===this.state._disabled,"skip ":!1!==this.state._stealth,"icon-only":!0===this.state._hideLabel,"hide-label":!0===this.state._hideLabel,"external-link":i}},this.state._on,{onClick:this.onClick,onKeyPress:this.onClick},s,{role:this.state._role,tabIndex:this.state._tabIndex}),t("kol-span-wc",{_icon:this.state._icon,_hideLabel:this.state._hideLabel,_label:!l&&(this.state._label||this.state._href)},t("slot",{name:"expert",slot:"expert"})),i&&t("kol-icon",{class:"external-link-icon",_label:this.state._targetDescription,_icon:"codicon codicon-link-external"})),t("kol-tooltip",{"aria-hidden":"true",hidden:l||!this.state._hideLabel,_align:this.state._tooltipAlign,_id:this.nonce,_label:this.state._label||this.state._href}))}validateAriaControls(t){o(this,"_ariaControls",t)}validateAriaCurrent(t){n(this,t)}validateAriaExpanded(t){d(this,"_ariaExpanded",t)}validateAriaLabel(t){this.validateLabel(t)}validateAriaSelected(t){h(this,t)}validateDisabled(t){d(this,"_disabled",t),!0===t&&g()}validateDownload(t){A(this,t)}validateHideLabel(t){v(this,t)}validateHref(t){k(this,t)}validateIcon(t){p(this,t)}validateIconAlign(t){_(this,t)}validateIconOnly(t){this.validateHideLabel(t)}validateLabel(t){b(this,t)}validateOn(t){"object"==typeof t&&"function"==typeof(null==t?void 0:t.onClick)&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validateRole(t){o(this,"_role",t)}validateSelector(t){o(this,"_selector",t)}validateStealth(t){y(this,t)}validateTabIndex(t){j(this,t)}validateTarget(t){o(this,"_target",t)}validateTargetDescription(t){o(this,"_targetDescription",t)}validateTooltipAlign(t){l(this,"_tooltipAlign",t)}validateUseCase(t){"string"==typeof t&&(this.state=Object.assign(Object.assign({},this.state),{_useCase:t}))}componentWillLoad(){this.validateAriaControls(this._ariaControls),this.validateAriaCurrent(this._ariaCurrent),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaSelected(this._ariaSelected),this.validateDisabled(this._disabled),this.validateDownload(this._download),this.validateHideLabel(this._hideLabel||this._iconOnly),this.validateHref(this._href),this.validateIcon(this._icon),this.validateIconAlign(this._iconAlign),this.validateLabel(this._label||this._ariaLabel),this.validateOn(this._on),this.validateRole(this._role),this.validateSelector(this._selector),this.validateStealth(this._stealth),this.validateTabIndex(this._tabIndex),this.validateTarget(this._target),this.validateTargetDescription(this._targetDescription),this.validateTooltipAlign(this._tooltipAlign),this.validateUseCase(this._useCase)}get host(){return s(this)}static get watchers(){return{_ariaControls:["validateAriaControls"],_ariaCurrent:["validateAriaCurrent"],_ariaExpanded:["validateAriaExpanded"],_ariaLabel:["validateAriaLabel"],_ariaSelected:["validateAriaSelected"],_disabled:["validateDisabled"],_download:["validateDownload"],_hideLabel:["validateHideLabel"],_href:["validateHref"],_icon:["validateIcon"],_iconAlign:["validateIconAlign"],_iconOnly:["validateIconOnly"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_selector:["validateSelector"],_stealth:["validateStealth"],_tabIndex:["validateTabIndex"],_target:["validateTarget"],_targetDescription:["validateTargetDescription"],_tooltipAlign:["validateTooltipAlign"],_useCase:["validateUseCase"]}}};export{w as kol_link_wc};