npm - @public-ui/components - Versions diffs - 3.0.6 → 3.0.7-d0e38f2b24188b03316351f07d939c4524a2fd81.0 - Mend

@public-ui/components 3.0.6 → 3.0.7-d0e38f2b24188b03316351f07d939c4524a2fd81.0

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 (399) hide show

package/dist/components/controller2.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{_ as __rest}from"./Heading.js";import{h,Fragment}from"@stencil/core/internal/client";import{c as clsx}from"./clsx.js";import{c as watchBoolean,e as watchString,p as parseJson,o as objectObjectHandler,w as watchValidator,J as isObject,j as isString,l as devHint,s as setState,r as a11yHint}from"./common.js";import{K as KolAlertFc}from"./Alert.js";import{i as isString$1,K as KolInternalUnderlinedBadgeTextFc}from"./InternalUnderlinedBadgeText.js";import{b as buildBadgeTextString,s as showExpertSlot}from"./reuse.js";import{t as translate}from"./i18n.js";import{a as KolTooltipWcTag}from"./component-names.js";import{v as validateAccessKey,a as validateAccessAndShortKey,b as validateShortKey,c as validateTabIndex}from"./access-and-short-key.js";import{v as validateDisabled}from"./disabled.js";import{v as validateHideLabel}from"./hide-label.js";import{a as validateLabelWithExpertSlot}from"./label.js";import{v as validateTooltipAlign}from"./tooltip-align.js";import{d as dispatchDomEvent,K as KolEvent}from"./events.js";import{A as AssociatedInputController}from"./associated.controller.js";import{a as isObjectLike,c as baseGetTag,i as isObject$1,r as root}from"./isObject.js";const validateAdjustHeight=(e,t)=>{watchBoolean(e,"_adjustHeight",t)},validateHideMsg=(e,t,n)=>{watchBoolean(e,"_hideMsg",t,n)},validateHint=(e,t)=>{watchString(e,"_hint",t)},validateMsg=(e,t)=>{objectObjectHandler(t,()=>{try{t=parseJson(t)}catch(e){}watchValidator(e,"_msg",e=>{if(void 0===e)return!0;if("string"==typeof e&&e.length>0)return!0;if(isObject(e)&&null!==e){const t=e._description;return isString(t,1)}return!1},new Set(["MsgPropType","string"]),t)})};function checkHasMsg(e,t){var n;if(!e)return!1;const o="string"==typeof e?"error":null!==(n=e._type)&&void 0!==n?n:"error";return!0===t||"error"!==o}function normalizeMsg(e){if("string"==typeof e)try{return parseJson(e)}catch(t){return{_description:e,_type:"error"}}return e&&"object"==typeof e&&!("_type"in e)?Object.assign(Object.assign({},e),{_type:"error"}):e}const validateTouched=(e,t)=>{watchBoolean(e,"_touched",t)},FormFieldMsgFc=e=>{var t,n,{alert:o,msg:i,id:a,class:r}=e,s=__rest(e,["alert","msg","id","class"]);const l=normalizeMsg(i);return h(KolAlertFc,Object.assign({id:`${a}-msg`,alert:null!==(t=null==l?void 0:l._alert)&&void 0!==t?t:o,hasCloser:!1,level:0,type:null!==(n=null==l?void 0:l._type)&&void 0!==n?n:"error",variant:"msg",class:clsx("kol-form-field__msg",r)},s),(null==l?void 0:l._description)||void 0)};var symbolTag="[object Symbol]";function isSymbol(e){return"symbol"==typeof e||isObjectLike(e)&&baseGetTag(e)==symbolTag}var reWhitespace=/\s/;function trimmedEndIndex(e){for(var t=e.length;t--&&reWhitespace.test(e.charAt(t)););return t}var reTrimStart=/^\s+/;function baseTrim(e){return e?e.slice(0,trimmedEndIndex(e)+1).replace(reTrimStart,""):e}var NAN=NaN,reIsBadHex=/^[-+]0x[0-9a-f]+$/i,reIsBinary=/^0b[01]+$/i,reIsOctal=/^0o[0-7]+$/i,freeParseInt=parseInt;function toNumber(e){if("number"==typeof e)return e;if(isSymbol(e))return NAN;if(isObject$1(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=isObject$1(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=baseTrim(e);var n=reIsBinary.test(e);return n||reIsOctal.test(e)?freeParseInt(e.slice(2),n?2:8):reIsBadHex.test(e)?NAN:+e}var now=function(){return root.Date.now()},FUNC_ERROR_TEXT="Expected a function",nativeMax=Math.max,nativeMin=Math.min;function debounce(e,t,n){var o,i,a,r,s,l,c=0,d=!1,h=!1,u=!0;if("function"!=typeof e)throw new TypeError(FUNC_ERROR_TEXT);function m(t){var n=o,a=i;return o=i=void 0,c=t,r=e.apply(a,n)}function p(e){var n=e-l;return void 0===l||n>=t||n<0||h&&e-c>=a}function g(){var e=now();if(p(e))return v(e);s=setTimeout(g,function(e){var n=t-(e-l);return h?nativeMin(n,a-(e-c)):n}(e))}function v(e){return s=void 0,u&&o?m(e):(o=i=void 0,r)}function b(){var e=now(),n=p(e);if(o=arguments,i=this,l=e,n){if(void 0===s)return function(e){return c=e,s=setTimeout(g,t),d?m(e):r}(l);if(h)return clearTimeout(s),s=setTimeout(g,t),m(l)}return void 0===s&&(s=setTimeout(g,t)),r}return t=toNumber(t)||0,isObject$1(n)&&(d=!!n.leading,a=(h="maxWait"in n)?nativeMax(toNumber(n.maxWait)||0,t):a,u="trailing"in n?!!n.trailing:u),b.cancel=function(){void 0!==s&&clearTimeout(s),c=0,o=l=i=s=void 0},b.flush=function(){return void 0===s?r:v(now())},b}const LabelFc=({hasExpertSlot:e,accessKey:t,shortKey:n,label:o,showBadge:i=!0})=>{if(e)return h("slot",{name:"expert"});if(!o)return null;const a=isString$1(t)||isString$1(n);if(!i||!a)return h("span",null,o);const r=buildBadgeTextString(t,n);return h(Fragment,null,h(KolInternalUnderlinedBadgeTextFc,{badgeText:r,label:o})," ",h("kbd",{class:"badge-text-hint","aria-hidden":"true"},r))},KolFormFieldLabelFc=e=>{var{component:t="label",id:n,baseClassName:o="kol-form-field",class:i,accessKey:a,shortKey:r,label:s,hideLabel:l,hasExpertSlot:c,showBadge:d}=e,u=__rest(e,["component","id","baseClassName","class","accessKey","shortKey","label","hideLabel","hasExpertSlot","showBadge"]);const m=!c&&l;return h(t,Object.assign({},u,{class:clsx(`${o}__label`,i),id:m?void 0:`${n}-label`,hidden:m,htmlFor:n}),h("span",{class:clsx(`${o}__label-text`)},h(LabelFc,{hasExpertSlot:c,accessKey:a,shortKey:r,label:s,showBadge:d})))},KolFormFieldHintFc=e=>{var{id:t,class:n,hint:o,baseClassName:i="kol-form-field"}=e,a=__rest(e,["id","class","hint","baseClassName"]);return o?h("span",Object.assign({class:clsx(`${i}__hint`,n),id:`${t}-hint`},a),o):null},KolFormFieldCounterFc=({currentLength:e,currentLengthDebounced:t,maxLength:n,maxLengthBehavior:o})=>{let i,a;const r=["kol-form-field__counter"];if("hard"===o)i="number"==typeof n?translate("kol-character-counter-current-of-max",{placeholders:{current:String(e),max:String(n)}}):translate("kol-character-counter-current",{placeholders:{current:String(e)}}),a="number"==typeof n?translate("kol-character-counter-current-of-max-aria",{placeholders:{current:String(t),max:String(n)}}):translate("kol-character-counter-current",{placeholders:{current:String(t)}});else{if("number"!=typeof n)return null;{const o=n-e,s=o<0,l=n-t,c=l<0;i=s?translate("kol-character-limit-exceeded",{placeholders:{over:String(Math.abs(o))}}):translate("kol-character-limit-remaining",{placeholders:{remaining:String(o)}}),a=c?translate("kol-character-limit-exceeded",{placeholders:{over:String(Math.abs(l))}}):translate("kol-character-limit-remaining",{placeholders:{remaining:String(l)}}),s&&r.push("kol-form-field__counter--exceeded")}}return h(Fragment,null,h("span",{class:clsx(r),"aria-hidden":"true","data-testid":"input-counter"},i),h("span",{"aria-live":"polite",class:"visually-hidden","data-testid":"input-counter-aria"},a))},KolFormFieldCharacterLimitHintFc=({id:e,maxLength:t})=>h("span",{id:`${e}-character-limit-hint`,class:"visually-hidden"},translate("kol-character-limit-hint",{placeholders:{limit:String(t)}})),FormFieldTooltipFc=({id:e,align:t,badgeText:n,hideLabel:o,label:i,class:a})=>h(KolTooltipWcTag,{"aria-hidden":"true",class:clsx("kol-form-field__tooltip",a),_badgeText:n,_align:t,_id:o?`${e}-label`:void 0,_label:i});function getModifierClassNameByMsgType(e){return(null==e?void 0:e.type)&&{default:"msg-type-default",info:"msg-type-info",success:"msg-type-success",warning:"msg-type-warning",error:"msg-type-error"}[null==e?void 0:e.type]||""}const InputContainer=(e,t)=>{var{class:n}=e,o=__rest(e,["class"]);return h("div",Object.assign({class:clsx("kol-form-field__input",n)},o),t)},KolFormFieldFc=(e,t)=>{var n;const{component:o="div",renderNoLabel:i,renderNoTooltip:a,renderNoHint:r,anotherChildren:s,id:l,required:c,alert:d,disabled:u,class:m,msg:p,hideMsg:g,hideLabel:v,label:b,hint:f,accessKey:_,shortKey:y,tooltipAlign:F,counter:x,readOnly:L,touched:K,maxLength:j,formFieldLabelProps:S,formFieldHintProps:T,formFieldTooltipProps:C,formFieldMsgProps:O,formFieldInputProps:B}=e,H=__rest(e,["component","renderNoLabel","renderNoTooltip","renderNoHint","anotherChildren","id","required","alert","disabled","class","msg","hideMsg","hideLabel","label","hint","accessKey","shortKey","tooltipAlign","counter","readOnly","touched","maxLength","formFieldLabelProps","formFieldHintProps","formFieldTooltipProps","formFieldMsgProps","formFieldInputProps"]),k=!i,M=!r,I=!a,E=showExpertSlot(b),A=checkHasMsg(p,K),w=buildBadgeTextString(_,y),N=I&&!E&&v,$="string"==typeof p?"error":null!==(n=null==p?void 0:p._type)&&void 0!==n?n:"error";let P={"kol-form-field--disabled":Boolean(u),"kol-form-field--required":Boolean(c),"kol-form-field--touched":Boolean(K),"kol-form-field--hide-label":Boolean(v),"kol-form-field--read-only":Boolean(L),"kol-form-field--hidden-msg":Boolean(g)};return A&&(P=Object.assign(Object.assign({},P),{[`kol-form-field--${$||"error"}`]:!0,[`kol-form-field--${getModifierClassNameByMsgType({type:$})}`]:!0})),h(o,Object.assign({class:clsx("kol-form-field",P,m)},H),k&&h(KolFormFieldLabelFc,Object.assign({},S||{},{id:l,hasExpertSlot:E,hideLabel:v,label:b,accessKey:_,shortKey:y})),h(InputContainer,Object.assign({},B),t,N&&h(FormFieldTooltipFc,Object.assign({},C||{},{id:l,label:b,hideLabel:v,align:F,badgeText:w}))),x?h(KolFormFieldCounterFc,Object.assign({},x)):null,j?h(KolFormFieldCharacterLimitHintFc,{id:l,maxLength:j}):null,A&&!g&&h(FormFieldMsgFc,Object.assign({},O||{},{id:l,alert:d,msg:p})),M&&h(KolFormFieldHintFc,Object.assign({},T||{},{id:l,hint:f})),s)};function getDefaultProps({ariaDescribedBy:e,hideLabel:t,label:n}){return{title:"",autoCapitalize:"off",autoCorrect:"off","aria-describedby":(null==e?void 0:e.length)?e.join(" "):void 0,"aria-label":t&&n?n:void 0}}const getRenderStates=e=>{var t;const n=e._msg,o="string"==typeof n?n:null==n?void 0:n._description,i="string"==typeof n?"error":null!==(t=null==n?void 0:n._type)&&void 0!==t?t:"error",a=Boolean(o&&o.length>0),r="error"===i&&a&&!0===e._touched,s="string"==typeof e._hint&&e._hint.length>0,l=[];return a&&!e._hideMsg&&l.push(`${e._id}-msg`),s&&l.push(`${e._id}-hint`),{hasError:r,hasHint:s,ariaDescribedBy:l}};function getFormFieldProps(e){const t={id:e._id,disabled:e._disabled,msg:e._msg,hint:e._hint,label:e._label,hideLabel:e._hideLabel,hideMsg:e._hideMsg,touched:e._touched};return"_required"in e&&(t.required=e._required),"_readOnly"in e&&(t.readOnly=e._readOnly),"_accessKey"in e&&(t.accessKey=e._accessKey),"_shortKey"in e&&(t.shortKey=e._shortKey),"_maxLength"in e&&(t.maxLength=e._maxLength),"_currentLength"in e&&"number"==typeof e._currentLength&&"_currentLengthDebounced"in e&&"number"==typeof e._currentLengthDebounced&&"_hasCounter"in e&&!0===e._hasCounter&&(t.counter={currentLength:e._currentLength,currentLengthDebounced:e._currentLengthDebounced,maxLength:e._maxLength,maxLengthBehavior:e._maxLengthBehavior||"hard"}),t}const FormFieldStateWrapper=(e,t)=>{var{state:n}=e,o=__rest(e,["state"]);return h(KolFormFieldFc,Object.assign({},getFormFieldProps(n),o),t)};class ControlledInputController extends AssociatedInputController{constructor(e,t,n){super(e,t,n),this.component=e}validateTouched(e){validateTouched(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateTouched(this.component._touched)}}class InputController extends ControlledInputController{constructor(e,t,n){super(e,t,n),this.valueChangeListeners=[],this.onFacade={onBlur:this.onBlur.bind(this),onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onFocus:this.onFocus.bind(this),onInput:this.onInput.bind(this)},this.updateCurrentLengthDebounced=debounce(e=>{setState(this.component,"_currentLengthDebounced",e)},500),this.component=e}validateAccessKey(e){validateAccessKey(this.component,e),validateAccessAndShortKey(e,this.component._shortKey)}validateAdjustHeight(e){validateAdjustHeight(this.component,e)}validateDisabled(e){validateDisabled(this.component,e)}validateTooltipAlign(e){validateTooltipAlign(this.component,e)}validateHideMsg(e){validateHideMsg(this.component,e,{hooks:{afterPatch:()=>{this.component.state._hideMsg&&a11yHint("Property _hideMsg for inputs: Only use when the error message is shown outside of the input component.")}}})}validateHideLabel(e){validateHideLabel(this.component,e,{hooks:{afterPatch:()=>{this.component.state._hideLabel&&a11yHint("Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.")}}})}validateHint(e){validateHint(this.component,e)}validateId(e){watchString(this.component,"_id",e,{minLength:1}),""!==e&&void 0!==e||devHint("A unique ID on the input fields is not strictly required, but it might be relevant for E2E tests.")}validateLabel(e){validateLabelWithExpertSlot(this.component,e,{required:!0})}validateMsg(e){validateMsg(this.component,e)}validateOn(e){"object"==typeof e&&setState(this.component,"_on",e)}validateShortKey(e){validateShortKey(this.component,e),validateAccessAndShortKey(this.component._accessKey,e)}validateSmartButton(e){objectObjectHandler(e,()=>{try{e=parseJson(e)}catch(e){}setState(this.component,"_smartButton",e)})}validateTabIndex(e){validateTabIndex(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateAccessKey(this.component._accessKey),this.validateAdjustHeight(this.component._adjustHeight),this.validateMsg(this.component._msg),this.validateDisabled(this.component._disabled),this.validateHideMsg(this.component._hideMsg),this.validateHideLabel(this.component._hideLabel),this.validateHint(this.component._hint),this.validateId(this.component._id),this.validateLabel(this.component._label),this.validateShortKey(this.component._shortKey),this.validateSmartButton(this.component._smartButton),this.validateOn(this.component._on),this.validateTabIndex(this.component._tabIndex),validateAccessAndShortKey(this.component._accessKey,this.component._shortKey)}emitEvent(e,t){this.host&&dispatchDomEvent(this.host,e,t)}onBlur(e){var t;this.component._touched=!0,this.emitEvent(KolEvent.blur),"function"==typeof(null===(t=this.component._on)||void 0===t?void 0:t.onBlur)&&this.component._on.onBlur(e)}onChange(e,t){var n;void 0===t&&(t=e.target.value),this.emitEvent(KolEvent.change,t),"function"==typeof(null===(n=this.component._on)||void 0===n?void 0:n.onChange)&&this.component._on.onChange(e,t),this.valueChangeListeners.forEach(e=>e(t))}onInput(e,t=!0,n){var o;void 0===n&&(n=e.target.value),this.emitEvent(KolEvent.input,n),t&&this.setFormAssociatedValue(n),"function"==typeof(null===(o=this.component._on)||void 0===o?void 0:o.onInput)&&this.component._on.onInput(e,n)}onClick(e){var t;this.emitEvent(KolEvent.click),"function"==typeof(null===(t=this.component._on)||void 0===t?void 0:t.onClick)&&this.component._on.onClick(e)}onFocus(e){var t;this.emitEvent(KolEvent.focus),"function"==typeof(null===(t=this.component._on)||void 0===t?void 0:t.onFocus)&&this.component._on.onFocus(e)}addValueChangeListener(e){this.valueChangeListeners.push(e)}hasSoftCharacterLimit(){return"number"==typeof this.component.state._maxLength&&"soft"===this.component.state._maxLengthBehavior}hasCounter(){return!0===this.component.state._hasCounter}}export{FormFieldStateWrapper as F,InputController as I,KolFormFieldLabelFc as K,FormFieldTooltipFc as a,KolFormFieldHintFc as b,checkHasMsg as c,getDefaultProps as d,getRenderStates as g};
+import{_ as __rest}from"./Heading.js";import{h,Fragment}from"@stencil/core/internal/client";import{c as clsx}from"./clsx.js";import{c as watchBoolean,h as watchString,p as parseJson,o as objectObjectHandler,w as watchValidator,J as isObject,j as isString,l as devHint,s as setState,r as a11yHint}from"./common.js";import{K as KolAlertFc}from"./Alert.js";import{i as isString$1,K as KolInternalUnderlinedBadgeTextFc}from"./InternalUnderlinedBadgeText.js";import{b as buildBadgeTextString,s as showExpertSlot}from"./reuse.js";import{t as translate}from"./i18n.js";import{a as KolTooltipWcTag}from"./component-names.js";import{v as validateAccessKey,a as validateAccessAndShortKey,b as validateShortKey,c as validateTabIndex}from"./access-and-short-key.js";import{v as validateDisabled}from"./disabled.js";import{v as validateHideLabel}from"./hide-label.js";import{a as validateLabelWithExpertSlot}from"./label.js";import{v as validateTooltipAlign}from"./tooltip-align.js";import{d as dispatchDomEvent,K as KolEvent}from"./events.js";import{A as AssociatedInputController}from"./associated.controller.js";import{a as isObjectLike,c as baseGetTag,i as isObject$1,r as root}from"./isObject.js";const validateAdjustHeight=(e,t)=>{watchBoolean(e,"_adjustHeight",t)},validateHideMsg=(e,t,n)=>{watchBoolean(e,"_hideMsg",t,n)},validateHint=(e,t)=>{watchString(e,"_hint",t)},validateMsg=(e,t)=>{objectObjectHandler(t,()=>{try{t=parseJson(t)}catch(e){}watchValidator(e,"_msg",e=>{if(void 0===e)return!0;if("string"==typeof e&&e.length>0)return!0;if(isObject(e)&&null!==e){const t=e._description;return isString(t,1)}return!1},new Set(["MsgPropType","string"]),t)})};function checkHasMsg(e,t){var n;if(!e)return!1;const o="string"==typeof e?"error":null!==(n=e._type)&&void 0!==n?n:"error";return!0===t||"error"!==o}function normalizeMsg(e){if("string"==typeof e)try{return parseJson(e)}catch(t){return{_description:e,_type:"error"}}return e&&"object"==typeof e&&!("_type"in e)?Object.assign(Object.assign({},e),{_type:"error"}):e}const validateTouched=(e,t)=>{watchBoolean(e,"_touched",t)},FormFieldMsgFc=e=>{var t,n,{alert:o,msg:i,id:a,class:r}=e,s=__rest(e,["alert","msg","id","class"]);const l=normalizeMsg(i);return h(KolAlertFc,Object.assign({id:`${a}-msg`,alert:null!==(t=null==l?void 0:l._alert)&&void 0!==t?t:o,hasCloser:!1,level:0,type:null!==(n=null==l?void 0:l._type)&&void 0!==n?n:"error",variant:"msg",class:clsx("kol-form-field__msg",r)},s),(null==l?void 0:l._description)||void 0)};var symbolTag="[object Symbol]";function isSymbol(e){return"symbol"==typeof e||isObjectLike(e)&&baseGetTag(e)==symbolTag}var reWhitespace=/\s/;function trimmedEndIndex(e){for(var t=e.length;t--&&reWhitespace.test(e.charAt(t)););return t}var reTrimStart=/^\s+/;function baseTrim(e){return e?e.slice(0,trimmedEndIndex(e)+1).replace(reTrimStart,""):e}var NAN=NaN,reIsBadHex=/^[-+]0x[0-9a-f]+$/i,reIsBinary=/^0b[01]+$/i,reIsOctal=/^0o[0-7]+$/i,freeParseInt=parseInt;function toNumber(e){if("number"==typeof e)return e;if(isSymbol(e))return NAN;if(isObject$1(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=isObject$1(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=baseTrim(e);var n=reIsBinary.test(e);return n||reIsOctal.test(e)?freeParseInt(e.slice(2),n?2:8):reIsBadHex.test(e)?NAN:+e}var now=function(){return root.Date.now()},FUNC_ERROR_TEXT="Expected a function",nativeMax=Math.max,nativeMin=Math.min;function debounce(e,t,n){var o,i,a,r,s,l,c=0,d=!1,h=!1,u=!0;if("function"!=typeof e)throw new TypeError(FUNC_ERROR_TEXT);function m(t){var n=o,a=i;return o=i=void 0,c=t,r=e.apply(a,n)}function p(e){var n=e-l;return void 0===l||n>=t||n<0||h&&e-c>=a}function g(){var e=now();if(p(e))return v(e);s=setTimeout(g,function(e){var n=t-(e-l);return h?nativeMin(n,a-(e-c)):n}(e))}function v(e){return s=void 0,u&&o?m(e):(o=i=void 0,r)}function b(){var e=now(),n=p(e);if(o=arguments,i=this,l=e,n){if(void 0===s)return function(e){return c=e,s=setTimeout(g,t),d?m(e):r}(l);if(h)return clearTimeout(s),s=setTimeout(g,t),m(l)}return void 0===s&&(s=setTimeout(g,t)),r}return t=toNumber(t)||0,isObject$1(n)&&(d=!!n.leading,a=(h="maxWait"in n)?nativeMax(toNumber(n.maxWait)||0,t):a,u="trailing"in n?!!n.trailing:u),b.cancel=function(){void 0!==s&&clearTimeout(s),c=0,o=l=i=s=void 0},b.flush=function(){return void 0===s?r:v(now())},b}const LabelFc=({hasExpertSlot:e,accessKey:t,shortKey:n,label:o,showBadge:i=!0})=>{if(e)return h("slot",{name:"expert"});if(!o)return null;const a=isString$1(t)||isString$1(n);if(!i||!a)return h("span",null,o);const r=buildBadgeTextString(t,n);return h(Fragment,null,h(KolInternalUnderlinedBadgeTextFc,{badgeText:r,label:o})," ",h("kbd",{class:"badge-text-hint","aria-hidden":"true"},r))},KolFormFieldLabelFc=e=>{var{component:t="label",id:n,baseClassName:o="kol-form-field",class:i,accessKey:a,shortKey:r,label:s,hideLabel:l,hasExpertSlot:c,showBadge:d}=e,u=__rest(e,["component","id","baseClassName","class","accessKey","shortKey","label","hideLabel","hasExpertSlot","showBadge"]);const m=!c&&l;return h(t,Object.assign({},u,{class:clsx(`${o}__label`,i),id:m?void 0:`${n}-label`,hidden:m,htmlFor:n}),h("span",{class:clsx(`${o}__label-text`)},h(LabelFc,{hasExpertSlot:c,accessKey:a,shortKey:r,label:s,showBadge:d})))},KolFormFieldHintFc=e=>{var{id:t,class:n,hint:o,baseClassName:i="kol-form-field"}=e,a=__rest(e,["id","class","hint","baseClassName"]);return o?h("span",Object.assign({class:clsx(`${i}__hint`,n),id:`${t}-hint`},a),o):null},KolFormFieldCounterFc=({currentLength:e,currentLengthDebounced:t,maxLength:n,maxLengthBehavior:o})=>{let i,a;const r=["kol-form-field__counter"];if("hard"===o)i="number"==typeof n?translate("kol-character-counter-current-of-max",{placeholders:{current:String(e),max:String(n)}}):translate("kol-character-counter-current",{placeholders:{current:String(e)}}),a="number"==typeof n?translate("kol-character-counter-current-of-max-aria",{placeholders:{current:String(t),max:String(n)}}):translate("kol-character-counter-current",{placeholders:{current:String(t)}});else{if("number"!=typeof n)return null;{const o=n-e,s=o<0,l=n-t,c=l<0;i=s?translate("kol-character-limit-exceeded",{placeholders:{over:String(Math.abs(o))}}):translate("kol-character-limit-remaining",{placeholders:{remaining:String(o)}}),a=c?translate("kol-character-limit-exceeded",{placeholders:{over:String(Math.abs(l))}}):translate("kol-character-limit-remaining",{placeholders:{remaining:String(l)}}),s&&r.push("kol-form-field__counter--exceeded")}}return h(Fragment,null,h("span",{class:clsx(r),"aria-hidden":"true","data-testid":"input-counter"},i),h("span",{"aria-live":"polite",class:"visually-hidden","data-testid":"input-counter-aria"},a))},KolFormFieldCharacterLimitHintFc=({id:e,maxLength:t})=>h("span",{id:`${e}-character-limit-hint`,class:"visually-hidden"},translate("kol-character-limit-hint",{placeholders:{limit:String(t)}})),FormFieldTooltipFc=({id:e,align:t,badgeText:n,hideLabel:o,label:i,class:a})=>h(KolTooltipWcTag,{"aria-hidden":"true",class:clsx("kol-form-field__tooltip",a),_badgeText:n,_align:t,_id:o?`${e}-label`:void 0,_label:i});function getModifierClassNameByMsgType(e){return(null==e?void 0:e.type)&&{default:"msg-type-default",info:"msg-type-info",success:"msg-type-success",warning:"msg-type-warning",error:"msg-type-error"}[null==e?void 0:e.type]||""}const InputContainer=(e,t)=>{var{class:n}=e,o=__rest(e,["class"]);return h("div",Object.assign({class:clsx("kol-form-field__input",n)},o),t)},KolFormFieldFc=(e,t)=>{var n;const{component:o="div",renderNoLabel:i,renderNoTooltip:a,renderNoHint:r,anotherChildren:s,id:l,required:c,alert:d,disabled:u,class:m,msg:p,hideMsg:g,hideLabel:v,label:b,hint:f,accessKey:_,shortKey:y,tooltipAlign:F,counter:x,readOnly:L,touched:K,maxLength:j,formFieldLabelProps:S,formFieldHintProps:T,formFieldTooltipProps:C,formFieldMsgProps:O,formFieldInputProps:B}=e,H=__rest(e,["component","renderNoLabel","renderNoTooltip","renderNoHint","anotherChildren","id","required","alert","disabled","class","msg","hideMsg","hideLabel","label","hint","accessKey","shortKey","tooltipAlign","counter","readOnly","touched","maxLength","formFieldLabelProps","formFieldHintProps","formFieldTooltipProps","formFieldMsgProps","formFieldInputProps"]),k=!i,M=!r,I=!a,E=showExpertSlot(b),A=checkHasMsg(p,K),w=buildBadgeTextString(_,y),N=I&&!E&&v,$="string"==typeof p?"error":null!==(n=null==p?void 0:p._type)&&void 0!==n?n:"error";let P={"kol-form-field--disabled":Boolean(u),"kol-form-field--required":Boolean(c),"kol-form-field--touched":Boolean(K),"kol-form-field--hide-label":Boolean(v),"kol-form-field--read-only":Boolean(L),"kol-form-field--hidden-msg":Boolean(g)};return A&&(P=Object.assign(Object.assign({},P),{[`kol-form-field--${$||"error"}`]:!0,[`kol-form-field--${getModifierClassNameByMsgType({type:$})}`]:!0})),h(o,Object.assign({class:clsx("kol-form-field",P,m)},H),k&&h(KolFormFieldLabelFc,Object.assign({},S||{},{id:l,hasExpertSlot:E,hideLabel:v,label:b,accessKey:_,shortKey:y})),h(InputContainer,Object.assign({},B),t,N&&h(FormFieldTooltipFc,Object.assign({},C||{},{id:l,label:b,hideLabel:v,align:F,badgeText:w}))),x?h(KolFormFieldCounterFc,Object.assign({},x)):null,j?h(KolFormFieldCharacterLimitHintFc,{id:l,maxLength:j}):null,A&&!g&&h(FormFieldMsgFc,Object.assign({},O||{},{id:l,alert:d,msg:p})),M&&h(KolFormFieldHintFc,Object.assign({},T||{},{id:l,hint:f})),s)};function getDefaultProps({ariaDescribedBy:e,hideLabel:t,label:n}){return{title:"",autoCapitalize:"off",autoCorrect:"off","aria-describedby":(null==e?void 0:e.length)?e.join(" "):void 0,"aria-label":t&&n?n:void 0}}const getRenderStates=e=>{var t;const n=e._msg,o="string"==typeof n?n:null==n?void 0:n._description,i="string"==typeof n?"error":null!==(t=null==n?void 0:n._type)&&void 0!==t?t:"error",a=Boolean(o&&o.length>0),r="error"===i&&a&&!0===e._touched,s="string"==typeof e._hint&&e._hint.length>0,l=[];return a&&!e._hideMsg&&l.push(`${e._id}-msg`),s&&l.push(`${e._id}-hint`),{hasError:r,hasHint:s,ariaDescribedBy:l}};function getFormFieldProps(e){const t={id:e._id,disabled:e._disabled,msg:e._msg,hint:e._hint,label:e._label,hideLabel:e._hideLabel,hideMsg:e._hideMsg,touched:e._touched};return"_required"in e&&(t.required=e._required),"_readOnly"in e&&(t.readOnly=e._readOnly),"_accessKey"in e&&(t.accessKey=e._accessKey),"_shortKey"in e&&(t.shortKey=e._shortKey),"_maxLength"in e&&(t.maxLength=e._maxLength),"_currentLength"in e&&"number"==typeof e._currentLength&&"_currentLengthDebounced"in e&&"number"==typeof e._currentLengthDebounced&&"_hasCounter"in e&&!0===e._hasCounter&&(t.counter={currentLength:e._currentLength,currentLengthDebounced:e._currentLengthDebounced,maxLength:e._maxLength,maxLengthBehavior:e._maxLengthBehavior||"hard"}),t}const FormFieldStateWrapper=(e,t)=>{var{state:n}=e,o=__rest(e,["state"]);return h(KolFormFieldFc,Object.assign({},getFormFieldProps(n),o),t)};class ControlledInputController extends AssociatedInputController{constructor(e,t,n){super(e,t,n),this.component=e}validateTouched(e){validateTouched(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateTouched(this.component._touched)}}class InputController extends ControlledInputController{constructor(e,t,n){super(e,t,n),this.valueChangeListeners=[],this.onFacade={onBlur:this.onBlur.bind(this),onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onFocus:this.onFocus.bind(this),onInput:this.onInput.bind(this)},this.updateCurrentLengthDebounced=debounce(e=>{setState(this.component,"_currentLengthDebounced",e)},500),this.component=e}validateAccessKey(e){validateAccessKey(this.component,e),validateAccessAndShortKey(e,this.component._shortKey)}validateAdjustHeight(e){validateAdjustHeight(this.component,e)}validateDisabled(e){validateDisabled(this.component,e)}validateTooltipAlign(e){validateTooltipAlign(this.component,e)}validateHideMsg(e){validateHideMsg(this.component,e,{hooks:{afterPatch:()=>{this.component.state._hideMsg&&a11yHint("Property _hideMsg for inputs: Only use when the error message is shown outside of the input component.")}}})}validateHideLabel(e){validateHideLabel(this.component,e,{hooks:{afterPatch:()=>{this.component.state._hideLabel&&a11yHint("Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.")}}})}validateHint(e){validateHint(this.component,e)}validateId(e){watchString(this.component,"_id",e,{minLength:1}),""!==e&&void 0!==e||devHint("A unique ID on the input fields is not strictly required, but it might be relevant for E2E tests.")}validateLabel(e){validateLabelWithExpertSlot(this.component,e,{required:!0})}validateMsg(e){validateMsg(this.component,e)}validateOn(e){"object"==typeof e&&setState(this.component,"_on",e)}validateShortKey(e){validateShortKey(this.component,e),validateAccessAndShortKey(this.component._accessKey,e)}validateSmartButton(e){objectObjectHandler(e,()=>{try{e=parseJson(e)}catch(e){}setState(this.component,"_smartButton",e)})}validateTabIndex(e){validateTabIndex(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateAccessKey(this.component._accessKey),this.validateAdjustHeight(this.component._adjustHeight),this.validateMsg(this.component._msg),this.validateDisabled(this.component._disabled),this.validateHideMsg(this.component._hideMsg),this.validateHideLabel(this.component._hideLabel),this.validateHint(this.component._hint),this.validateId(this.component._id),this.validateLabel(this.component._label),this.validateShortKey(this.component._shortKey),this.validateSmartButton(this.component._smartButton),this.validateOn(this.component._on),this.validateTabIndex(this.component._tabIndex),validateAccessAndShortKey(this.component._accessKey,this.component._shortKey)}emitEvent(e,t){this.host&&dispatchDomEvent(this.host,e,t)}onBlur(e){var t;this.component._touched=!0,this.emitEvent(KolEvent.blur),"function"==typeof(null===(t=this.component._on)||void 0===t?void 0:t.onBlur)&&this.component._on.onBlur(e)}onChange(e,t){var n;void 0===t&&(t=e.target.value),this.emitEvent(KolEvent.change,t),"function"==typeof(null===(n=this.component._on)||void 0===n?void 0:n.onChange)&&this.component._on.onChange(e,t),this.valueChangeListeners.forEach(e=>e(t))}onInput(e,t=!0,n){var o;void 0===n&&(n=e.target.value),this.emitEvent(KolEvent.input,n),t&&this.setFormAssociatedValue(n),"function"==typeof(null===(o=this.component._on)||void 0===o?void 0:o.onInput)&&this.component._on.onInput(e,n)}onClick(e){var t;this.emitEvent(KolEvent.click),"function"==typeof(null===(t=this.component._on)||void 0===t?void 0:t.onClick)&&this.component._on.onClick(e)}onFocus(e){var t;this.emitEvent(KolEvent.focus),"function"==typeof(null===(t=this.component._on)||void 0===t?void 0:t.onFocus)&&this.component._on.onFocus(e)}addValueChangeListener(e){this.valueChangeListeners.push(e)}hasSoftCharacterLimit(){return"number"==typeof this.component.state._maxLength&&"soft"===this.component.state._maxLengthBehavior}hasCounter(){return!0===this.component.state._hasCounter}}export{FormFieldStateWrapper as F,InputController as I,KolFormFieldLabelFc as K,FormFieldTooltipFc as a,KolFormFieldHintFc as b,checkHasMsg as c,getDefaultProps as d,getRenderStates as g};

package/dist/components/controller5.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{e as watchString,w as watchValidator}from"./common.js";import{v as validateAutoComplete}from"./auto-complete.js";import{a as validateHasCounter,v as validateMaxLengthBehavior,b as validateMaxLength}from"./max-length-behavior.js";import{v as validatePlaceholder}from"./placeholder.js";import{v as validateReadOnly}from"./read-only.js";import{v as validateRequired}from"./required.js";import{I as InputIconController}from"./controller-icon.js";const validatePattern=(t,a,e={})=>{watchString(t,"_pattern",a,e)},PasswordVariantPropTypeOptions=["default","visibility-toggle"],validatePasswordVariant=(t,a)=>{watchValidator(t,"_variant",t=>"string"==typeof t&&PasswordVariantPropTypeOptions.includes(t),new Set(PasswordVariantPropTypeOptions),a)};class InputPasswordController extends InputIconController{constructor(t,a,e){super(t,a,e),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&(this.component.state._currentLength=this.component._value.length,this.updateCurrentLengthDebounced(this.component._value.length))},this.component=t}validateAutoComplete(t){validateAutoComplete(this.component,t)}validateHasCounter(t){validateHasCounter(this.component,t)}validateMaxLengthBehavior(t){validateMaxLengthBehavior(this.component,t)}validateVariant(t){validatePasswordVariant(this.component,t)}validateMaxLength(t){validateMaxLength(this.component,t,{hooks:{afterPatch:this.afterSyncCharCounter}})}validatePattern(t){validatePattern(this.component,t)}validatePlaceholder(t){validatePlaceholder(this.component,t)}validateReadOnly(t){validateReadOnly(this.component,t)}validateRequired(t){validateRequired(this.component,t)}validateValue(t){watchString(this.component,"_value",t,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateHasCounter(this.component._hasCounter),this.validateMaxLengthBehavior(this.component._maxLengthBehavior),this.validateMaxLength(this.component._maxLength),this.validatePattern(this.component._pattern),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validateVariant(this.component._variant)}}export{InputPasswordController as I};
+import{h as watchString,w as watchValidator}from"./common.js";import{v as validateAutoComplete}from"./auto-complete.js";import{a as validateHasCounter,v as validateMaxLengthBehavior,b as validateMaxLength}from"./max-length-behavior.js";import{v as validatePlaceholder}from"./placeholder.js";import{v as validateReadOnly}from"./read-only.js";import{v as validateRequired}from"./required.js";import{I as InputIconController}from"./controller-icon.js";const validatePattern=(t,a,e={})=>{watchString(t,"_pattern",a,e)},PasswordVariantPropTypeOptions=["default","visibility-toggle"],validatePasswordVariant=(t,a)=>{watchValidator(t,"_variant",t=>"string"==typeof t&&PasswordVariantPropTypeOptions.includes(t),new Set(PasswordVariantPropTypeOptions),a)};class InputPasswordController extends InputIconController{constructor(t,a,e){super(t,a,e),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&(this.component.state._currentLength=this.component._value.length,this.updateCurrentLengthDebounced(this.component._value.length))},this.component=t}validateAutoComplete(t){validateAutoComplete(this.component,t)}validateHasCounter(t){validateHasCounter(this.component,t)}validateMaxLengthBehavior(t){validateMaxLengthBehavior(this.component,t)}validateVariant(t){validatePasswordVariant(this.component,t)}validateMaxLength(t){validateMaxLength(this.component,t,{hooks:{afterPatch:this.afterSyncCharCounter}})}validatePattern(t){validatePattern(this.component,t)}validatePlaceholder(t){validatePlaceholder(this.component,t)}validateReadOnly(t){validateReadOnly(this.component,t)}validateRequired(t){validateRequired(this.component,t)}validateValue(t){watchString(this.component,"_value",t,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateHasCounter(this.component._hasCounter),this.validateMaxLengthBehavior(this.component._maxLengthBehavior),this.validateMaxLength(this.component._maxLength),this.validatePattern(this.component._pattern),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validateVariant(this.component._variant)}}export{InputPasswordController as I};

package/dist/components/custom-class.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{e as watchString}from"./common.js";const validateCustomClass=(a,s)=>{watchString(a,"_customClass",s,{defaultValue:void 0})};export{validateCustomClass as v};
+import{h as watchString}from"./common.js";const validateCustomClass=(a,s)=>{watchString(a,"_customClass",s,{defaultValue:void 0})};export{validateCustomClass as v};

package/dist/components/href.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{e as watchString}from"./common.js";const validateHref=(t,a,r={})=>{watchString(t,"_href",a,r)};export{validateHref as v};
+import{h as watchString}from"./common.js";const validateHref=(t,a,r={})=>{watchString(t,"_href",a,r)};export{validateHref as v};

package/dist/components/image-source.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{e as watchString}from"./common.js";const validateImageSource=(a,t,e)=>{watchString(a,"_src",t,e)};export{validateImageSource as v};
+import{h as watchString}from"./common.js";const validateImageSource=(a,t,o)=>{watchString(a,"_src",t,o)};export{validateImageSource as v};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{e as watchString,c as watchBoolean,w as watchValidator,m as mapStringOrBoolean2String,g as mapBoolean2String,h as setEventTarget,s as setState}from"./common.js";import{v as validateAccessKey,a as validateAccessAndShortKey,b as validateShortKey,c as validateTabIndex}from"./access-and-short-key.js";import{s as showExpertSlot}from"./reuse.js";import{v as validateAriaDescription,a as validateAriaExpanded,b as validateLinkVariant,c as validateAlternativeButtonLinkRole,d as validateButtonVariant}from"./link-variant.js";import{v as validateCustomClass}from"./custom-class.js";import{v as validateDisabled}from"./disabled.js";import{v as validateHideLabel}from"./hide-label.js";import{v as validateIcons}from"./icons.js";import{a as validateLabelWithExpertSlot}from"./label.js";import{v as validateTooltipAlign}from"./tooltip-align.js";import{d as dispatchDomEvent,K as KolEvent}from"./events.js";import{n as nonce}from"./dev.utils.js";import{p as propagateSubmitEventToForm,a as propagateResetEventToForm}from"./controller.js";import{A as AssociatedInputController}from"./associated.controller.js";import{a as KolTooltipWcTag}from"./component-names.js";import"./Alert.js";import{c as clsx}from"./clsx.js";import{K as KolSpanFc}from"./Span.js";import"./i18n.js";const validateAriaControls=(t,a)=>{watchString(t,"_ariaControls",a)},validateAriaSelected=(t,a)=>{watchBoolean(t,"_ariaSelected",a)},validateButtonCallbacks=(t,a)=>{watchValidator(t,"_on",t=>"object"==typeof t&&null!==t,new Set(["ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}"]),a)},buttonTypePropTypeOptions=["button","reset","submit"],validateButtonType=(t,a)=>{watchValidator(t,"_type",t=>"string"==typeof t&&buttonTypePropTypeOptions.includes(t),new Set([`KoliBriButtonType {${buttonTypePropTypeOptions.join(", ")}`]),a)},KolButtonWc$1=proxyCustomElement(class extends HTMLElement{async kolFocus(){var t;null===(t=this.buttonRef)||void 0===t||t.focus()}async hideTooltip(){var t;null===(t=this.tooltipRef)||void 0===t||t.hideTooltip()}render(){var t,a;const e=showExpertSlot(this.state._label),i=Boolean(null===(a=null===(t=this.state._ariaDescription)||void 0===t?void 0:t.trim())||void 0===a?void 0:a.length),s=this.state._accessKey||this.state._shortKey,l=!0===this.state._disabled,o=!0===this.state._hideLabel;return h(Host,{key:"9202198cc53ca78db26cc6c7ce68da269b521f9c"},h("button",{key:"9a3d1b8f642ad673b69c5ef0d3a81822d0ec34b3",ref:t=>this.buttonRef=t,accessKey:this.state._accessKey,"aria-controls":this.state._ariaControls,"aria-describedby":i?this.internalDescriptionById:void 0,"aria-expanded":mapBoolean2String(this.state._ariaExpanded),"aria-haspopup":this._ariaHasPopup,"aria-keyshortcuts":this.state._shortKey,"aria-label":o&&"string"==typeof this.state._label?this.state._label:void 0,"aria-selected":mapStringOrBoolean2String(this.state._ariaSelected),class:clsx("kol-button",{"kol-button--disabled":l,[`kol-button--${this.state._buttonVariant}`]:"custom"!==this.state._buttonVariant,[`kol-button--${this.state._linkVariant}`]:this.state._linkVariant,"kol-button--hide-label":o,[this.state._customClass]:"custom"===this.state._buttonVariant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0}),disabled:l,id:this.state._id,name:this.state._name,onClick:this.onClick,onMouseDown:this.onMouseDown,role:this.state._role,tabIndex:this.state._tabIndex,type:this.state._type},h(KolSpanFc,{key:"717fd0e277dc8d19424eb4f46a00bd8f6c087eff",class:"kol-button__text",badgeText:s,icons:this.state._icons,hideLabel:o,label:e?"":this.state._label},h("slot",{key:"f3ddc202d34119f33efb2dc0262e61e2c7faddb7",name:"expert",slot:"expert"}))),h(KolTooltipWcTag,{key:"49b4d12189968fb4011d53f0625107d1bf6a22fe",ref:t=>this.tooltipRef=t,"aria-hidden":"true",hidden:e||!o,class:"kol-button__tooltip",_badgeText:s,_align:this.state._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}),i&&h("span",{key:"6ee695a8f9d45e456b1fd563ea68e1bc9d1fc647",class:"visually-hidden",id:this.internalDescriptionById},this.state._ariaDescription))}constructor(t){super(),!1!==t&&this.__registerHost(),this.internalDescriptionById=nonce(),this.onClick=t=>{var a,e;"submit"===this.state._type?propagateSubmitEventToForm({form:this.host}):"reset"===this.state._type?propagateResetEventToForm({form:this.host}):(this.controller.setFormAssociatedValue(this.state._value),"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)&&(setEventTarget(t,this.buttonRef),null===(e=this.state._on)||void 0===e||e.onClick(t,this.state._value))),this.host&&dispatchDomEvent(this.host,KolEvent.click,this.state._value)},this.onMouseDown=t=>{var a,e,i;null===(i=null===(e=null===(a=this.state)||void 0===a?void 0:a._on)||void 0===e?void 0:e.onMouseDown)||void 0===i||i.call(e,t),this.host&&dispatchDomEvent(this.host,KolEvent.mousedown)},this._disabled=!1,this._hideLabel=!1,this._tooltipAlign="top",this._type="button",this._buttonVariant="normal",this.state={_icons:{},_label:"",_on:{},_type:"button",_buttonVariant:"normal"},this.controller=new AssociatedInputController(this,"button",this.host)}validateAccessKey(t){validateAccessKey(this,t),validateAccessAndShortKey(t,this._shortKey)}validateAriaControls(t){validateAriaControls(this,t)}validateAriaDescription(t){validateAriaDescription(this,t)}validateAriaExpanded(t){validateAriaExpanded(this,t)}validateAriaSelected(t){validateAriaSelected(this,t)}validateCustomClass(t){validateCustomClass(this,t)}validateDisabled(t){validateDisabled(this,t)}validateHideLabel(t){validateHideLabel(this,t)}validateIcons(t){validateIcons(this,t)}validateId(t){watchString(this,"_id",t)}validateLabel(t){validateLabelWithExpertSlot(this,t,{required:!0})}validateLinkVariant(t){validateLinkVariant(this,t)}validateName(t){this.controller.validateName(t)}validateOn(t){validateButtonCallbacks(this,t)}validateRole(t){validateAlternativeButtonLinkRole(this,t)}validateShortKey(t){validateShortKey(this,t),validateAccessAndShortKey(this._accessKey,t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){validateTabIndex(this,t)}validateTooltipAlign(t){validateTooltipAlign(this,t)}validateType(t){validateButtonType(this,t)}validateValue(t){setState(this,"_value",t),this.controller.setFormAssociatedValue(this.state._value)}validateButtonVariant(t){validateButtonVariant(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaDescription(this._ariaDescription),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateHideLabel(this._hideLabel),this.validateIcons(this._icons),this.validateId(this._id),this.validateLabel(this._label),this.validateLinkVariant(this._linkVariant),this.validateName(this._name),this.validateOn(this._on),this.validateRole(this._role),this.validateShortKey(this._shortKey),this.validateSyncValueBySelector(this._syncValueBySelector),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateButtonVariant(this._buttonVariant),validateAccessAndShortKey(this._accessKey,this._shortKey)}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_linkVariant:["validateLinkVariant"],_name:["validateName"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_buttonVariant:["validateButtonVariant"]}}},[260,"kol-button-wc",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaDescription:[1,"_aria-description"],_ariaExpanded:[4,"_aria-expanded"],_ariaHasPopup:[1,"_aria-has-popup"],_ariaSelected:[4,"_aria-selected"],_customClass:[1,"_custom-class"],_disabled:[4],_hideLabel:[4,"_hide-label"],_icons:[1],_id:[1],_label:[1],_linkVariant:[1,"_link-variant"],_name:[1],_on:[16],_role:[1],_shortKey:[1,"_short-key"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[8],_buttonVariant:[1,"_button-variant"],state:[32],kolFocus:[64],hideTooltip:[64]},void 0,{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_linkVariant:["validateLinkVariant"],_name:["validateName"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_buttonVariant:["validateButtonVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-button-wc"].forEach(t=>{if("kol-button-wc"===t)customElements.get(t)||customElements.define(t,KolButtonWc$1)})}const KolButtonWc=KolButtonWc$1,defineCustomElement=defineCustomElement$1;export{KolButtonWc,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{c as watchBoolean,w as watchValidator,m as mapStringOrBoolean2String,e as mapBoolean2String,g as setEventTarget,h as watchString,s as setState}from"./common.js";import{v as validateAccessKey,a as validateAccessAndShortKey,b as validateShortKey,c as validateTabIndex}from"./access-and-short-key.js";import{s as showExpertSlot}from"./reuse.js";import{v as validateAriaControls,a as validateAriaDescription,b as validateAriaExpanded,c as validateLinkVariant,d as validateAlternativeButtonLinkRole,e as validateButtonVariant}from"./link-variant.js";import{v as validateCustomClass}from"./custom-class.js";import{v as validateDisabled}from"./disabled.js";import{v as validateHideLabel}from"./hide-label.js";import{v as validateIcons}from"./icons.js";import{a as validateLabelWithExpertSlot}from"./label.js";import{v as validateTooltipAlign}from"./tooltip-align.js";import{d as dispatchDomEvent,K as KolEvent}from"./events.js";import{n as nonce}from"./dev.utils.js";import{p as propagateSubmitEventToForm,a as propagateResetEventToForm}from"./controller.js";import{A as AssociatedInputController}from"./associated.controller.js";import{a as KolTooltipWcTag}from"./component-names.js";import"./Alert.js";import{c as clsx}from"./clsx.js";import{K as KolSpanFc}from"./Span.js";import"./i18n.js";const validateAriaSelected=(t,a)=>{watchBoolean(t,"_ariaSelected",a)},validateButtonCallbacks=(t,a)=>{watchValidator(t,"_on",t=>"object"==typeof t&&null!==t,new Set(["ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}"]),a)},buttonTypePropTypeOptions=["button","reset","submit"],validateButtonType=(t,a)=>{watchValidator(t,"_type",t=>"string"==typeof t&&buttonTypePropTypeOptions.includes(t),new Set([`KoliBriButtonType {${buttonTypePropTypeOptions.join(", ")}`]),a)},KolButtonWc$1=proxyCustomElement(class extends HTMLElement{async kolFocus(){var t;null===(t=this.buttonRef)||void 0===t||t.focus()}async hideTooltip(){var t;null===(t=this.tooltipRef)||void 0===t||t.hideTooltip()}render(){var t,a;const e=showExpertSlot(this.state._label),i=Boolean(null===(a=null===(t=this.state._ariaDescription)||void 0===t?void 0:t.trim())||void 0===a?void 0:a.length),s=this.state._accessKey||this.state._shortKey,l=!0===this.state._disabled,o=!0===this.state._hideLabel;return h(Host,{key:"9202198cc53ca78db26cc6c7ce68da269b521f9c"},h("button",{key:"9a3d1b8f642ad673b69c5ef0d3a81822d0ec34b3",ref:t=>this.buttonRef=t,accessKey:this.state._accessKey,"aria-controls":this.state._ariaControls,"aria-describedby":i?this.internalDescriptionById:void 0,"aria-expanded":mapBoolean2String(this.state._ariaExpanded),"aria-haspopup":this._ariaHasPopup,"aria-keyshortcuts":this.state._shortKey,"aria-label":o&&"string"==typeof this.state._label?this.state._label:void 0,"aria-selected":mapStringOrBoolean2String(this.state._ariaSelected),class:clsx("kol-button",{"kol-button--disabled":l,[`kol-button--${this.state._buttonVariant}`]:"custom"!==this.state._buttonVariant,[`kol-button--${this.state._linkVariant}`]:this.state._linkVariant,"kol-button--hide-label":o,[this.state._customClass]:"custom"===this.state._buttonVariant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0}),disabled:l,id:this.state._id,name:this.state._name,onClick:this.onClick,onMouseDown:this.onMouseDown,role:this.state._role,tabIndex:this.state._tabIndex,type:this.state._type},h(KolSpanFc,{key:"717fd0e277dc8d19424eb4f46a00bd8f6c087eff",class:"kol-button__text",badgeText:s,icons:this.state._icons,hideLabel:o,label:e?"":this.state._label},h("slot",{key:"f3ddc202d34119f33efb2dc0262e61e2c7faddb7",name:"expert",slot:"expert"}))),h(KolTooltipWcTag,{key:"49b4d12189968fb4011d53f0625107d1bf6a22fe",ref:t=>this.tooltipRef=t,"aria-hidden":"true",hidden:e||!o,class:"kol-button__tooltip",_badgeText:s,_align:this.state._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}),i&&h("span",{key:"6ee695a8f9d45e456b1fd563ea68e1bc9d1fc647",class:"visually-hidden",id:this.internalDescriptionById},this.state._ariaDescription))}constructor(t){super(),!1!==t&&this.__registerHost(),this.internalDescriptionById=nonce(),this.onClick=t=>{var a,e;"submit"===this.state._type?propagateSubmitEventToForm({form:this.host}):"reset"===this.state._type?propagateResetEventToForm({form:this.host}):(this.controller.setFormAssociatedValue(this.state._value),"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)&&(setEventTarget(t,this.buttonRef),null===(e=this.state._on)||void 0===e||e.onClick(t,this.state._value))),this.host&&dispatchDomEvent(this.host,KolEvent.click,this.state._value)},this.onMouseDown=t=>{var a,e,i;null===(i=null===(e=null===(a=this.state)||void 0===a?void 0:a._on)||void 0===e?void 0:e.onMouseDown)||void 0===i||i.call(e,t),this.host&&dispatchDomEvent(this.host,KolEvent.mousedown)},this._disabled=!1,this._hideLabel=!1,this._tooltipAlign="top",this._type="button",this._buttonVariant="normal",this.state={_icons:{},_label:"",_on:{},_type:"button",_buttonVariant:"normal"},this.controller=new AssociatedInputController(this,"button",this.host)}validateAccessKey(t){validateAccessKey(this,t),validateAccessAndShortKey(t,this._shortKey)}validateAriaControls(t){validateAriaControls(this,t)}validateAriaDescription(t){validateAriaDescription(this,t)}validateAriaExpanded(t){validateAriaExpanded(this,t)}validateAriaSelected(t){validateAriaSelected(this,t)}validateCustomClass(t){validateCustomClass(this,t)}validateDisabled(t){validateDisabled(this,t)}validateHideLabel(t){validateHideLabel(this,t)}validateIcons(t){validateIcons(this,t)}validateId(t){watchString(this,"_id",t)}validateLabel(t){validateLabelWithExpertSlot(this,t,{required:!0})}validateLinkVariant(t){validateLinkVariant(this,t)}validateName(t){this.controller.validateName(t)}validateOn(t){validateButtonCallbacks(this,t)}validateRole(t){validateAlternativeButtonLinkRole(this,t)}validateShortKey(t){validateShortKey(this,t),validateAccessAndShortKey(this._accessKey,t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){validateTabIndex(this,t)}validateTooltipAlign(t){validateTooltipAlign(this,t)}validateType(t){validateButtonType(this,t)}validateValue(t){setState(this,"_value",t),this.controller.setFormAssociatedValue(this.state._value)}validateButtonVariant(t){validateButtonVariant(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaDescription(this._ariaDescription),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateHideLabel(this._hideLabel),this.validateIcons(this._icons),this.validateId(this._id),this.validateLabel(this._label),this.validateLinkVariant(this._linkVariant),this.validateName(this._name),this.validateOn(this._on),this.validateRole(this._role),this.validateShortKey(this._shortKey),this.validateSyncValueBySelector(this._syncValueBySelector),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateButtonVariant(this._buttonVariant),validateAccessAndShortKey(this._accessKey,this._shortKey)}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_linkVariant:["validateLinkVariant"],_name:["validateName"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_buttonVariant:["validateButtonVariant"]}}},[260,"kol-button-wc",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaDescription:[1,"_aria-description"],_ariaExpanded:[4,"_aria-expanded"],_ariaHasPopup:[1,"_aria-has-popup"],_ariaSelected:[4,"_aria-selected"],_customClass:[1,"_custom-class"],_disabled:[4],_hideLabel:[4,"_hide-label"],_icons:[1],_id:[1],_label:[1],_linkVariant:[1,"_link-variant"],_name:[1],_on:[16],_role:[1],_shortKey:[1,"_short-key"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[8],_buttonVariant:[1,"_button-variant"],state:[32],kolFocus:[64],hideTooltip:[64]},void 0,{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_linkVariant:["validateLinkVariant"],_name:["validateName"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_buttonVariant:["validateButtonVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-button-wc"].forEach(t=>{if("kol-button-wc"===t)customElements.get(t)||customElements.define(t,KolButtonWc$1)})}const KolButtonWc=KolButtonWc$1,defineCustomElement=defineCustomElement$1;export{KolButtonWc,defineCustomElement};

package/dist/components/kol-button-wc.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"kol-button-wc.js","mappings":"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","names":["KolButtonWc","__stencil_proxyCustomElement"],"sources":["src/schema/props/aria-controls.ts","src/schema/props/aria-selected.ts","src/schema/props/button-callbacks.ts","src/schema/props/button-type.ts","src/components/button/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchString } from '../utils';\n\n/* types /\n/\n Defines which elements are being controlled. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n /\ntype AriaControlsPropType = string;\n\nexport type PropAriaControls = {\n\tariaControls: AriaControlsPropType;\n};\n\n/ validator /\nexport const validateAriaControls = (component: Generic.Element.Component, value?: AriaControlsPropType): void => {\n\twatchString(component, '_ariaControls', value);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/ types /\nexport type AriaSelectedPropType = boolean;\n\n/\n Marks this element as selected.\n * (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n /\nexport type PropAriaSelected = {\n\tariaSelected: AriaSelectedPropType;\n};\n\n/ validator /\nexport const validateAriaSelected = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_ariaSelected', value);\n};\n","import type { Callback } from '../enums';\nimport type { EventCallback, EventValueOrEventCallback } from '../types/callbacks';\nimport type { StencilUnknown } from '../types/unknown';\nimport { watchValidator } from '../utils';\n\nimport type { Generic } from 'adopted-style-sheets';\n/ types /\nexport type ButtonCallbacksPropType<T> = {\n\t[Callback.onClick]?: EventValueOrEventCallback<MouseEvent, T>;\n\t[Callback.onMouseDown]?: EventCallback<MouseEvent>;\n};\n\n/\n Defines the callback functions for button events.\n /\nexport type PropButtonCallbacks<T> = {\n\ton: ButtonCallbacksPropType<T>;\n};\n\n/ validator /\nexport const validateButtonCallbacks = (component: Generic.Element.Component, value?: ButtonCallbacksPropType<StencilUnknown>): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_on`,\n\t\t(value) => typeof value === 'object' && value !== null,\n\t\tnew Set(['ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}']),\n\t\tvalue,\n\t);\n};\n","/ types /\nimport type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../utils';\n\nconst buttonTypePropTypeOptions = ['button', 'reset', 'submit'] as const;\nexport type ButtonTypePropType = (typeof buttonTypePropTypeOptions)[number];\n\n/\n Defines either the type of the component or of the components interactive element.\n /\nexport type PropButtonType = {\n\ttype: ButtonTypePropType;\n};\n\n/ validator /\nexport const validateButtonType = (component: Generic.Element.Component, value?: ButtonTypePropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_type`,\n\t\t(value?) => typeof value === 'string' && buttonTypePropTypeOptions.includes(value),\n\t\tnew Set([`KoliBriButtonType {${buttonTypePropTypeOptions.join(', ')}`]),\n\t\tvalue,\n\t);\n};\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tAriaExpandedPropType,\n\tAriaSelectedPropType,\n\tButtonCallbacksPropType,\n\tButtonStates,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tDisabledPropType,\n\tHideLabelPropType,\n\tFocusableElement,\n\tIconsPropType,\n\tInternalButtonAPI,\n\tLabelWithExpertSlotPropType,\n\tLinkVariantPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport { validateLinkVariant } from '../../schema';\nimport {\n\tmapBoolean2String,\n\tmapStringOrBoolean2String,\n\tsetEventTarget,\n\tsetState,\n\tshowExpertSlot,\n\tvalidateAccessKey,\n\tvalidateAlternativeButtonLinkRole,\n\tvalidateAriaControls,\n\tvalidateAriaDescription,\n\tvalidateAriaExpanded,\n\tvalidateAriaSelected,\n\tvalidateButtonCallbacks,\n\tvalidateButtonType,\n\tvalidateButtonVariant,\n\tvalidateCustomClass,\n\tvalidateDisabled,\n\tvalidateHideLabel,\n\tvalidateIcons,\n\tvalidateLabelWithExpertSlot,\n\tvalidateShortKey,\n\tvalidateTooltipAlign,\n\twatchString,\n} from '../../schema';\nimport { validateTabIndex } from '../../schema/props/tab-index';\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateResetEventToForm, propagateSubmitEventToForm } from '../form/controller';\nimport { AssociatedInputController } from '../input-adapter-leanup/associated.controller';\nimport { KolTooltipWcTag } from '../../core/component-names';\nimport { validateAccessAndShortKey } from '../../schema/validators/access-and-short-key';\nimport type { AriaHasPopupPropType } from '../../schema/props/aria-has-popup';\nimport { KolSpanFc } from '../../functional-components';\nimport clsx from 'clsx';\n\n/\n @internal\n /\n@Component({\n\ttag: 'kol-button-wc',\n\tshadow: false,\n})\nexport class KolButtonWc implements InternalButtonAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolButtonWcElement;\n\tprivate buttonRef?: HTMLButtonElement;\n\tprivate tooltipRef?: HTMLKolTooltipWcElement;\n\n\tprivate readonly internalDescriptionById = nonce();\n\n\t/\n\t Sets focus on the internal element.\n\t /\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tthis.buttonRef?.focus();\n\t}\n\n\t/\n\t Hides the tooltip.\n\t /\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async hideTooltip() {\n\t\tvoid this.tooltipRef?.hideTooltip();\n\t}\n\n\tprivate readonly onClick = (event: MouseEvent) => {\n\t\tif (this.state._type === 'submit') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.buttonRef,\n\t\t\t});\n\t\t} else if (this.state._type === 'reset') {\n\t\t\tpropagateResetEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.buttonRef,\n\t\t\t});\n\t\t} else {\n\t\t\t// TODO: Static form handling\n\t\t\tthis.controller.setFormAssociatedValue(this.state._value);\n\n\t\t\t// Callback\n\t\t\tif (typeof this.state._on?.onClick === 'function') {\n\t\t\t\tsetEventTarget(event, this.buttonRef);\n\t\t\t\tthis.state._on?.onClick(event, this.state._value);\n\t\t\t}\n\t\t}\n\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.click, this.state._value);\n\t\t}\n\t};\n\n\tprivate readonly onMouseDown = (event: MouseEvent) => {\n\t\tthis.state?._on?.onMouseDown?.(event);\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.mousedown);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\t\tconst hasAriaDescription = Boolean(this.state._ariaDescription?.trim()?.length);\n\t\tconst badgeText = this.state._accessKey \|\| this.state._shortKey;\n\t\tconst isDisabled = this.state._disabled === true;\n\t\tconst hideLabel = this.state._hideLabel === true;\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<button\n\t\t\t\t\tref={(ref) => (this.buttonRef = ref)}\n\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\taria-controls={this.state._ariaControls}\n\t\t\t\t\taria-describedby={hasAriaDescription ? this.internalDescriptionById : undefined}\n\t\t\t\t\taria-expanded={mapBoolean2String(this.state._ariaExpanded)}\n\t\t\t\t\taria-haspopup={this._ariaHasPopup}\n\t\t\t\t\taria-keyshortcuts={this.state._shortKey}\n\t\t\t\t\taria-label={hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\taria-selected={mapStringOrBoolean2String(this.state._ariaSelected)}\n\t\t\t\t\tclass={clsx('kol-button', {\n\t\t\t\t\t\t'kol-button--disabled': isDisabled,\n\t\t\t\t\t\t[`kol-button--${this.state._buttonVariant as string}`]: this.state._buttonVariant !== 'custom',\n\t\t\t\t\t\t[`kol-button--${this.state._linkVariant as string}`]: this.state._linkVariant,\n\t\t\t\t\t\t'kol-button--hide-label': hideLabel,\n\t\t\t\t\t\t[this.state._customClass as string]:\n\t\t\t\t\t\t\tthis.state._buttonVariant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,\n\t\t\t\t\t})}\n\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\tid={this.state._id}\n\t\t\t\t\tname={this.state._name}\n\t\t\t\t\tonClick={this.onClick}\n\t\t\t\t\tonMouseDown={this.onMouseDown}\n\t\t\t\t\trole={this.state._role}\n\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t\ttype={this.state._type}\n\t\t\t\t>\n\t\t\t\t\t<KolSpanFc\n\t\t\t\t\t\tclass=\"kol-button__text\"\n\t\t\t\t\t\tbadgeText={badgeText}\n\t\t\t\t\t\ticons={this.state._icons}\n\t\t\t\t\t\thideLabel={hideLabel}\n\t\t\t\t\t\tlabel={hasExpertSlot ? '' : this.state._label}\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t\t</KolSpanFc>\n\t\t\t\t</button>\n\t\t\t\t<KolTooltipWcTag\n\t\t\t\t\tref={(ref) => (this.tooltipRef = ref)}\n\t\t\t\t\t/\n\t\t\t\t\t Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,\n\t\t\t\t\t * verhindert aber nicht das Aria-Labelledby vorgelesen wird.\n\t\t\t\t\t /\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\thidden={hasExpertSlot \|\| !hideLabel}\n\t\t\t\t\tclass=\"kol-button__tooltip\"\n\t\t\t\t\t_badgeText={badgeText}\n\t\t\t\t\t_align={this.state._tooltipAlign}\n\t\t\t\t\t_label={typeof this.state._label === 'string' ? this.state._label : ''}\n\t\t\t\t></KolTooltipWcTag>\n\t\t\t\t{hasAriaDescription && (\n\t\t\t\t\t<span class=\"visually-hidden\" id={this.internalDescriptionById}>\n\t\t\t\t\t\t{this.state._ariaDescription}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: AssociatedInputController;\n\n\t/\n\t Defines the key combination that can be used to trigger or focus the component’s interactive element.\n\t /\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/\n\t Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t /\n\t@Prop() public _ariaControls?: string;\n\n\t/\n\t Defines the value for the aria-description attribute.\n\t /\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/\n\t Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t /\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/\n\t Defines the aria-haspopup attribute. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-haspopup)\n\t * @internal\n\t /\n\t@Prop() public _ariaHasPopup?: AriaHasPopupPropType;\n\n\t/\n\t Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t /\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/\n\t Defines the custom class attribute if _buttonVariant=\"custom\" is set.\n\t /\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/\n\t Makes the element not focusable and ignore all events.\n\t /\n\t@Prop() public _disabled?: boolean = false;\n\n\t/\n\t Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/\n\t Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t /\n\t@Prop() public _icons?: IconsPropType;\n\n\t/\n\t Defines the internal ID of the primary component element.\n\t * @internal\n\t /\n\t@Prop() public _id?: string;\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t /\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/\n\t Defines which variant should be used for presentation.\n\t * @internal\n\t /\n\t@Prop() public _linkVariant?: LinkVariantPropType;\n\n\t/\n\t Defines the technical name of an input field.\n\t /\n\t@Prop() public _name?: string;\n\n\t/\n\t Defines the callback functions for button events.\n\t /\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/\n\t Defines the role of the components primary element.\n\t /\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/\n\t Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t /\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/\n\t Selector for synchronizing the value with another input element.\n\t * @internal\n\t /\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/\n\t Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t /\n\t@Prop() public _tabIndex?: number;\n\n\t/\n\t Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t /\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/\n\t Defines either the type of the component or of the components interactive element.\n\t /\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/\n\t Defines the value that the button emits on click.\n\t /\n\t@Prop() public _value?: StencilUnknown;\n\n\t/\n\t Defines which variant should be used for presentation.\n\t * @internal\n\t */\n\t@Prop() public _buttonVariant?: ButtonVariantPropType = 'normal';\n\n\t@State() public state: ButtonStates = {\n\t\t_icons: {},\n\t\t_label: '', // ⚠ required\n\t\t_on: {},\n\t\t_type: 'button',\n\t\t_buttonVariant: 'normal',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new AssociatedInputController(this, 'button', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: AccessKeyPropType): void {\n\t\tvalidateAccessKey(this, value);\n\t\tvalidateAccessAndShortKey(value, this._shortKey);\n\t}\n\n\t@Watch('_ariaControls')\n\tpublic validateAriaControls(value?: string): void {\n\t\tvalidateAriaControls(this, value);\n\t}\n\n\t@Watch('_ariaDescription')\n\tpublic validateAriaDescription(value?: AriaDescriptionPropType): void {\n\t\tvalidateAriaDescription(this, value);\n\t}\n\n\t@Watch('_ariaExpanded')\n\tpublic validateAriaExpanded(value?: AriaExpandedPropType): void {\n\t\tvalidateAriaExpanded(this, value);\n\t}\n\n\t@Watch('_ariaSelected')\n\tpublic validateAriaSelected(value?: AriaSelectedPropType): void {\n\t\tvalidateAriaSelected(this, value);\n\t}\n\n\t@Watch('_customClass')\n\tpublic validateCustomClass(value?: CustomClassPropType): void {\n\t\tvalidateCustomClass(this, value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tvalidateDisabled(this, value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType): void {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsPropType): void {\n\t\tvalidateIcons(this, value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\twatchString(this, '_id', value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tvalidateLabelWithExpertSlot(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_linkVariant')\n\tpublic validateLinkVariant(value?: LinkVariantPropType): void {\n\t\tvalidateLinkVariant(this, value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: ButtonCallbacksPropType<StencilUnknown>): void {\n\t\tvalidateButtonCallbacks(this, value);\n\t}\n\n\t@Watch('_role')\n\tpublic validateRole(value?: AlternativeButtonLinkRolePropType): void {\n\t\tvalidateAlternativeButtonLinkRole(this, value);\n\t}\n\n\t@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tvalidateShortKey(this, value);\n\t\tvalidateAccessAndShortKey(this._accessKey, value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tvalidateTabIndex(this, value);\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: TooltipAlignPropType): void {\n\t\tvalidateTooltipAlign(this, value);\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: ButtonTypePropType): void {\n\t\tvalidateButtonType(this, value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: StencilUnknown): void {\n\t\tsetState(this, '_value', value);\n\t\tthis.controller.setFormAssociatedValue(this.state._value);\n\t}\n\n\t@Watch('_buttonVariant')\n\tpublic validateButtonVariant(value?: ButtonVariantPropType): void {\n\t\tvalidateButtonVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAccessKey(this._accessKey);\n\t\tthis.validateAriaControls(this._ariaControls);\n\t\tthis.validateAriaDescription(this._ariaDescription);\n\t\tthis.validateAriaExpanded(this._ariaExpanded);\n\t\tthis.validateAriaSelected(this._ariaSelected);\n\t\tthis.validateCustomClass(this._customClass);\n\t\tthis.validateDisabled(this._disabled);\n\t\tthis.validateHideLabel(this._hideLabel);\n\t\tthis.validateIcons(this._icons);\n\t\tthis.validateId(this._id);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLinkVariant(this._linkVariant);\n\t\tthis.validateName(this._name);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRole(this._role);\n\t\tthis.validateShortKey(this._shortKey);\n\t\tthis.validateSyncValueBySelector(this._syncValueBySelector);\n\t\tthis.validateTabIndex(this._tabIndex);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t\tthis.validateType(this._type);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateButtonVariant(this._buttonVariant);\n\t\tvalidateAccessAndShortKey(this._accessKey, this._shortKey);\n\t}\n}\n"],"version":3}
1	+ {"file":"kol-button-wc.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAM,oBAAoB,GAAG,CAAC,SAAoC,EAAE,KAAe,KAAU;AACnG,IAAA,YAAY,CAAC,SAAS,EAAE,eAAe,EAAE,KAAK,CAAC;AAChD,CAAC;;ACEM,MAAM,uBAAuB,GAAG,CAAC,SAAoC,EAAE,KAA+C,KAAU;AACtI,IAAA,cAAc,CACb,SAAS,EACT,CAAA,GAAA,CAAK,EACL,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,EACtD,IAAI,GAAG,CAAC,CAAC,8DAA8D,CAAC,CAAC,EACzE,KAAK,CACL;AACF,CAAC;;ACxBD,MAAM,yBAAyB,GAAG,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,CAAU;AAWjE,MAAM,kBAAkB,GAAG,CAAC,SAAoC,EAAE,KAA0B,KAAU;AAC5G,IAAA,cAAc,CACb,SAAS,EACT,CAAO,KAAA,CAAA,EACP,CAAC,KAAM,KAAK,OAAO,KAAK,KAAK,QAAQ,IAAI,yBAAyB,CAAC,QAAQ,CAAC,KAAK,CAAC,EAClF,IAAI,GAAG,CAAC,CAAC,CAAA,mBAAA,EAAsB,yBAAyB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAE,CAAA,CAAC,CAAC,EACvE,KAAK,CACL;AACF,CAAC;;MC8CYA,aAAW,GAAAC,kBAAA,CAAA,MAAA,WAAA,SAAA,WAAA,CAAA;AAYhB,IAAA,MAAM,QAAQ,GAAA;;QACpB,CAAA,EAAA,GAAA,IAAI,CAAC,SAAS,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;;AAQjB,IAAA,MAAM,WAAW,GAAA;;AACvB,QAAA,MAAK,MAAA,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,WAAW,EAAE,CAAA;;IAqC7B,MAAM,GAAA;;QACZ,MAAM,aAAa,GAAG,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QACvD,MAAM,kBAAkB,GAAG,OAAO,CAAC,CAAA,EAAA,GAAA,MAAA,IAAI,CAAC,KAAK,CAAC,gBAAgB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAI,EAAE,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,MAAM,CAAC;AAC/E,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS;QAC/D,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,KAAK,IAAI;QAChD,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,KAAK,IAAI;AAEhD,QAAA,QACC,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACJ,CACC,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,EACpC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EAAA,eAAA,EACjB,IAAI,CAAC,KAAK,CAAC,aAAa,EAAA,kBAAA,EACrB,kBAAkB,GAAG,IAAI,CAAC,uBAAuB,GAAG,SAAS,EAAA,eAAA,EAChE,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,EAC3C,eAAA,EAAA,IAAI,CAAC,aAAa,EAAA,mBAAA,EACd,IAAI,CAAC,KAAK,CAAC,SAAS,EAAA,YAAA,EAC3B,SAAS,IAAI,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,SAAS,EAC/E,eAAA,EAAA,yBAAyB,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,EAClE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE;AACzB,gBAAA,sBAAsB,EAAE,UAAU;AAClC,gBAAA,CAAC,CAAe,YAAA,EAAA,IAAI,CAAC,KAAK,CAAC,cAAwB,CAAA,CAAE,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,KAAK,QAAQ;AAC9F,gBAAA,CAAC,CAAe,YAAA,EAAA,IAAI,CAAC,KAAK,CAAC,YAAsB,CAAE,CAAA,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY;AAC7E,gBAAA,wBAAwB,EAAE,SAAS;AACnC,gBAAA,CAAC,IAAI,CAAC,KAAK,CAAC,YAAsB,GACjC,IAAI,CAAC,KAAK,CAAC,cAAc,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,KAAK,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC;aAC5H,CAAC,EACF,QAAQ,EAAE,UAAU,EACpB,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EAClB,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACtB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACtB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC9B,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAA,EAEtB,CAAA,CAAC,SAAS,EACT,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EACxB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EACxB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,aAAa,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAA,EAE7C,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAQ,CAAA,CAC9B,CACJ,EACT,CAAA,CAAC,eAAe,EAAA,EAAA,GAAA,EAAA,0CAAA,EACf,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,EAAA,aAAA,EAKzB,MAAM,EAClB,MAAM,EAAE,aAAa,IAAI,CAAC,SAAS,EACnC,KAAK,EAAC,qBAAqB,EAC3B,UAAU,EAAE,SAAS,EACrB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EAChC,MAAM,EAAE,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,EACpD,CAAA,EAClB,kBAAkB,KAClB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAC,EAAE,EAAE,IAAI,CAAC,uBAAuB,EAC5D,EAAA,IAAI,CAAC,KAAK,CAAC,gBAAgB,CACtB,CACP,CACK;;AAwIT,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AA9PiB,QAAA,IAAuB,CAAA,uBAAA,GAAG,KAAK,EAAE;AAoBjC,QAAA,IAAA,CAAA,OAAO,GAAG,CAAC,KAAiB,KAAI;;YAChD,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,QAAQ,EAAE;AAClC,gBAAA,0BAA0B,CAAC;oBAC1B,IAAI,EAAE,IAAI,CAAC,IAEX,CAAA,CAAC;;iBACI,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,OAAO,EAAE;AACxC,gBAAA,yBAAyB,CAAC;oBACzB,IAAI,EAAE,IAAI,CAAC,IAEX,CAAA,CAAC;;iBACI;gBAEN,IAAI,CAAC,UAAU,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;AAGzD,gBAAA,IAAI,QAAO,CAAA,EAAA,GAAA,IAAI,CAAC,KAAK,CAAC,GAAG,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,OAAO,CAAA,KAAK,UAAU,EAAE;AAClD,oBAAA,cAAc,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC;AACrC,oBAAA,CAAA,EAAA,GAAA,IAAI,CAAC,KAAK,CAAC,GAAG,0CAAE,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;;;AAInD,YAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACd,gBAAA,gBAAgB,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;;AAEhE,SAAC;AAEgB,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;;AACpD,YAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,GAAG,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,WAAW,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,EAAA,EAAG,KAAK,CAAC;AACrC,YAAA,IAAI,IAAI,CAAC,IAAI,EAAE;gBACd,gBAAgB,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAC;;AAEjD,SAAC;AA+Gc,QAAA,IAAS,CAAA,SAAA,GAAa,KAAK;AAO3B,QAAA,IAAU,CAAA,UAAA,GAAa,KAAK;AA0D5B,QAAA,IAAa,CAAA,aAAA,GAA0B,KAAK;AAK5C,QAAA,IAAK,CAAA,KAAA,GAAwB,QAAQ;AAWrC,QAAA,IAAc,CAAA,cAAA,GAA2B,QAAQ;QAEhD,IAAA,CAAA,KAAK,GAAiB;AACrC,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,GAAG,EAAE,EAAE;AACP,YAAA,KAAK,EAAE,QAAQ;AACf,YAAA,cAAc,EAAE,QAAQ;SACxB;AAGA,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,yBAAyB,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC;AAC1E;AAGM,IAAA,iBAAiB,CAAC,KAAyB,EAAA;AACjD,QAAA,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC;AAC9B,QAAA,yBAAyB,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC;;AAI1C,IAAA,oBAAoB,CAAC,KAAc,EAAA;AACzC,QAAA,oBAAoB,CAAC,IAAI,EAAE,KAAK,CAAC;;AAI3B,IAAA,uBAAuB,CAAC,KAA+B,EAAA;AAC7D,QAAA,uBAAuB,CAAC,IAAI,EAAE,KAAK,CAAC;;AAI9B,IAAA,oBAAoB,CAAC,KAA4B,EAAA;AACvD,QAAA,oBAAoB,CAAC,IAAI,EAAE,KAAK,CAAC;;AAI3B,IAAA,oBAAoB,CAAC,KAA4B,EAAA;AACvD,QAAA,oBAAoB,CAAC,IAAI,EAAE,KAAK,CAAC;;AAI3B,IAAA,mBAAmB,CAAC,KAA2B,EAAA;AACrD,QAAA,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC;;AAI1B,IAAA,gBAAgB,CAAC,KAAwB,EAAA;AAC/C,QAAA,gBAAgB,CAAC,IAAI,EAAE,KAAK,CAAC;;AAIvB,IAAA,iBAAiB,CAAC,KAAyB,EAAA;AACjD,QAAA,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC;;AAIxB,IAAA,aAAa,CAAC,KAAqB,EAAA;AACzC,QAAA,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC;;AAIpB,IAAA,UAAU,CAAC,KAAc,EAAA;AAC/B,QAAA,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC;;AAIzB,IAAA,aAAa,CAAC,KAAmC,EAAA;AACvD,QAAA,2BAA2B,CAAC,IAAI,EAAE,KAAK,EAAE;AACxC,YAAA,QAAQ,EAAE,IAAI;AACd,SAAA,CAAC;;AAII,IAAA,mBAAmB,CAAC,KAA2B,EAAA;AACrD,QAAA,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC;;AAI1B,IAAA,YAAY,CAAC,KAAc,EAAA;AACjC,QAAA,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC;;AAI7B,IAAA,UAAU,CAAC,KAA+C,EAAA;AAChE,QAAA,uBAAuB,CAAC,IAAI,EAAE,KAAK,CAAC;;AAI9B,IAAA,YAAY,CAAC,KAAyC,EAAA;AAC5D,QAAA,iCAAiC,CAAC,IAAI,EAAE,KAAK,CAAC;;AAIxC,IAAA,gBAAgB,CAAC,KAAwB,EAAA;AAC/C,QAAA,gBAAgB,CAAC,IAAI,EAAE,KAAK,CAAC;AAC7B,QAAA,yBAAyB,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC;;AAI3C,IAAA,2BAA2B,CAAC,KAAmC,EAAA;AACrE,QAAA,IAAI,CAAC,UAAU,CAAC,2BAA2B,CAAC,KAAK,CAAC;;AAI5C,IAAA,gBAAgB,CAAC,KAAc,EAAA;AACrC,QAAA,gBAAgB,CAAC,IAAI,EAAE,KAAK,CAAC;;AAIvB,IAAA,oBAAoB,CAAC,KAA4B,EAAA;AACvD,QAAA,oBAAoB,CAAC,IAAI,EAAE,KAAK,CAAC;;AAI3B,IAAA,YAAY,CAAC,KAA0B,EAAA;AAC7C,QAAA,kBAAkB,CAAC,IAAI,EAAE,KAAK,CAAC;;AAIzB,IAAA,aAAa,CAAC,KAAsB,EAAA;AAC1C,QAAA,QAAQ,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC;QAC/B,IAAI,CAAC,UAAU,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;;AAInD,IAAA,qBAAqB,CAAC,KAA6B,EAAA;AACzD,QAAA,qBAAqB,CAAC,IAAI,EAAE,KAAK,CAAC;;IAG5B,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC;AACvC,QAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC;AAC7C,QAAA,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,gBAAgB,CAAC;AACnD,QAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC;AAC7C,QAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC;AAC7C,QAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC;AAC3C,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC;AACrC,QAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC;AACvC,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC;AAC/B,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;AACzB,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC;AAC/B,QAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC;AAC3C,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;AAC7B,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;AACzB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;AAC7B,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC;AACrC,QAAA,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,oBAAoB,CAAC;AAC3D,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC;AACrC,QAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC;AAC7C,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;AAC7B,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC;AAC/B,QAAA,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,cAAc,CAAC;QAC/C,yBAAyB,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolButtonWc","__stencil_proxyCustomElement"],"sources":["src/schema/props/aria-selected.ts","src/schema/props/button-callbacks.ts","src/schema/props/button-type.ts","src/components/button/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types /\nexport type AriaSelectedPropType = boolean;\n\n/\n Marks this element as selected.\n * (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n /\nexport type PropAriaSelected = {\n\tariaSelected: AriaSelectedPropType;\n};\n\n/ validator /\nexport const validateAriaSelected = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_ariaSelected', value);\n};\n","import type { Callback } from '../enums';\nimport type { EventCallback, EventValueOrEventCallback } from '../types/callbacks';\nimport type { StencilUnknown } from '../types/unknown';\nimport { watchValidator } from '../utils';\n\nimport type { Generic } from 'adopted-style-sheets';\n/ types /\nexport type ButtonCallbacksPropType<T> = {\n\t[Callback.onClick]?: EventValueOrEventCallback<MouseEvent, T>;\n\t[Callback.onMouseDown]?: EventCallback<MouseEvent>;\n};\n\n/\n Defines the callback functions for button events.\n /\nexport type PropButtonCallbacks<T> = {\n\ton: ButtonCallbacksPropType<T>;\n};\n\n/ validator /\nexport const validateButtonCallbacks = (component: Generic.Element.Component, value?: ButtonCallbacksPropType<StencilUnknown>): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_on`,\n\t\t(value) => typeof value === 'object' && value !== null,\n\t\tnew Set(['ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}']),\n\t\tvalue,\n\t);\n};\n","/ types /\nimport type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../utils';\n\nconst buttonTypePropTypeOptions = ['button', 'reset', 'submit'] as const;\nexport type ButtonTypePropType = (typeof buttonTypePropTypeOptions)[number];\n\n/\n Defines either the type of the component or of the components interactive element.\n /\nexport type PropButtonType = {\n\ttype: ButtonTypePropType;\n};\n\n/ validator /\nexport const validateButtonType = (component: Generic.Element.Component, value?: ButtonTypePropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_type`,\n\t\t(value?) => typeof value === 'string' && buttonTypePropTypeOptions.includes(value),\n\t\tnew Set([`KoliBriButtonType {${buttonTypePropTypeOptions.join(', ')}`]),\n\t\tvalue,\n\t);\n};\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tAriaExpandedPropType,\n\tAriaSelectedPropType,\n\tButtonCallbacksPropType,\n\tButtonStates,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tDisabledPropType,\n\tHideLabelPropType,\n\tFocusableElement,\n\tIconsPropType,\n\tInternalButtonAPI,\n\tLabelWithExpertSlotPropType,\n\tLinkVariantPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport { validateLinkVariant } from '../../schema';\nimport {\n\tmapBoolean2String,\n\tmapStringOrBoolean2String,\n\tsetEventTarget,\n\tsetState,\n\tshowExpertSlot,\n\tvalidateAccessKey,\n\tvalidateAlternativeButtonLinkRole,\n\tvalidateAriaControls,\n\tvalidateAriaDescription,\n\tvalidateAriaExpanded,\n\tvalidateAriaSelected,\n\tvalidateButtonCallbacks,\n\tvalidateButtonType,\n\tvalidateButtonVariant,\n\tvalidateCustomClass,\n\tvalidateDisabled,\n\tvalidateHideLabel,\n\tvalidateIcons,\n\tvalidateLabelWithExpertSlot,\n\tvalidateShortKey,\n\tvalidateTooltipAlign,\n\twatchString,\n} from '../../schema';\nimport { validateTabIndex } from '../../schema/props/tab-index';\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateResetEventToForm, propagateSubmitEventToForm } from '../form/controller';\nimport { AssociatedInputController } from '../input-adapter-leanup/associated.controller';\nimport { KolTooltipWcTag } from '../../core/component-names';\nimport { validateAccessAndShortKey } from '../../schema/validators/access-and-short-key';\nimport type { AriaHasPopupPropType } from '../../schema/props/aria-has-popup';\nimport { KolSpanFc } from '../../functional-components';\nimport clsx from 'clsx';\n\n/\n @internal\n /\n@Component({\n\ttag: 'kol-button-wc',\n\tshadow: false,\n})\nexport class KolButtonWc implements InternalButtonAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolButtonWcElement;\n\tprivate buttonRef?: HTMLButtonElement;\n\tprivate tooltipRef?: HTMLKolTooltipWcElement;\n\n\tprivate readonly internalDescriptionById = nonce();\n\n\t/\n\t Sets focus on the internal element.\n\t /\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tthis.buttonRef?.focus();\n\t}\n\n\t/\n\t Hides the tooltip.\n\t /\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async hideTooltip() {\n\t\tvoid this.tooltipRef?.hideTooltip();\n\t}\n\n\tprivate readonly onClick = (event: MouseEvent) => {\n\t\tif (this.state._type === 'submit') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.buttonRef,\n\t\t\t});\n\t\t} else if (this.state._type === 'reset') {\n\t\t\tpropagateResetEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.buttonRef,\n\t\t\t});\n\t\t} else {\n\t\t\t// TODO: Static form handling\n\t\t\tthis.controller.setFormAssociatedValue(this.state._value);\n\n\t\t\t// Callback\n\t\t\tif (typeof this.state._on?.onClick === 'function') {\n\t\t\t\tsetEventTarget(event, this.buttonRef);\n\t\t\t\tthis.state._on?.onClick(event, this.state._value);\n\t\t\t}\n\t\t}\n\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.click, this.state._value);\n\t\t}\n\t};\n\n\tprivate readonly onMouseDown = (event: MouseEvent) => {\n\t\tthis.state?._on?.onMouseDown?.(event);\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.mousedown);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\t\tconst hasAriaDescription = Boolean(this.state._ariaDescription?.trim()?.length);\n\t\tconst badgeText = this.state._accessKey \|\| this.state._shortKey;\n\t\tconst isDisabled = this.state._disabled === true;\n\t\tconst hideLabel = this.state._hideLabel === true;\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<button\n\t\t\t\t\tref={(ref) => (this.buttonRef = ref)}\n\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\taria-controls={this.state._ariaControls}\n\t\t\t\t\taria-describedby={hasAriaDescription ? this.internalDescriptionById : undefined}\n\t\t\t\t\taria-expanded={mapBoolean2String(this.state._ariaExpanded)}\n\t\t\t\t\taria-haspopup={this._ariaHasPopup}\n\t\t\t\t\taria-keyshortcuts={this.state._shortKey}\n\t\t\t\t\taria-label={hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\taria-selected={mapStringOrBoolean2String(this.state._ariaSelected)}\n\t\t\t\t\tclass={clsx('kol-button', {\n\t\t\t\t\t\t'kol-button--disabled': isDisabled,\n\t\t\t\t\t\t[`kol-button--${this.state._buttonVariant as string}`]: this.state._buttonVariant !== 'custom',\n\t\t\t\t\t\t[`kol-button--${this.state._linkVariant as string}`]: this.state._linkVariant,\n\t\t\t\t\t\t'kol-button--hide-label': hideLabel,\n\t\t\t\t\t\t[this.state._customClass as string]:\n\t\t\t\t\t\t\tthis.state._buttonVariant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,\n\t\t\t\t\t})}\n\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\tid={this.state._id}\n\t\t\t\t\tname={this.state._name}\n\t\t\t\t\tonClick={this.onClick}\n\t\t\t\t\tonMouseDown={this.onMouseDown}\n\t\t\t\t\trole={this.state._role}\n\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t\ttype={this.state._type}\n\t\t\t\t>\n\t\t\t\t\t<KolSpanFc\n\t\t\t\t\t\tclass=\"kol-button__text\"\n\t\t\t\t\t\tbadgeText={badgeText}\n\t\t\t\t\t\ticons={this.state._icons}\n\t\t\t\t\t\thideLabel={hideLabel}\n\t\t\t\t\t\tlabel={hasExpertSlot ? '' : this.state._label}\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t\t</KolSpanFc>\n\t\t\t\t</button>\n\t\t\t\t<KolTooltipWcTag\n\t\t\t\t\tref={(ref) => (this.tooltipRef = ref)}\n\t\t\t\t\t/\n\t\t\t\t\t Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,\n\t\t\t\t\t * verhindert aber nicht das Aria-Labelledby vorgelesen wird.\n\t\t\t\t\t /\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\thidden={hasExpertSlot \|\| !hideLabel}\n\t\t\t\t\tclass=\"kol-button__tooltip\"\n\t\t\t\t\t_badgeText={badgeText}\n\t\t\t\t\t_align={this.state._tooltipAlign}\n\t\t\t\t\t_label={typeof this.state._label === 'string' ? this.state._label : ''}\n\t\t\t\t></KolTooltipWcTag>\n\t\t\t\t{hasAriaDescription && (\n\t\t\t\t\t<span class=\"visually-hidden\" id={this.internalDescriptionById}>\n\t\t\t\t\t\t{this.state._ariaDescription}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: AssociatedInputController;\n\n\t/\n\t Defines the key combination that can be used to trigger or focus the component’s interactive element.\n\t /\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/\n\t Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t /\n\t@Prop() public _ariaControls?: string;\n\n\t/\n\t Defines the value for the aria-description attribute.\n\t /\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/\n\t Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t /\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/\n\t Defines the aria-haspopup attribute. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-haspopup)\n\t * @internal\n\t /\n\t@Prop() public _ariaHasPopup?: AriaHasPopupPropType;\n\n\t/\n\t Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t /\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/\n\t Defines the custom class attribute if _buttonVariant=\"custom\" is set.\n\t /\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/\n\t Makes the element not focusable and ignore all events.\n\t /\n\t@Prop() public _disabled?: boolean = false;\n\n\t/\n\t Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/\n\t Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t /\n\t@Prop() public _icons?: IconsPropType;\n\n\t/\n\t Defines the internal ID of the primary component element.\n\t * @internal\n\t /\n\t@Prop() public _id?: string;\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t /\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/\n\t Defines which variant should be used for presentation.\n\t * @internal\n\t /\n\t@Prop() public _linkVariant?: LinkVariantPropType;\n\n\t/\n\t Defines the technical name of an input field.\n\t /\n\t@Prop() public _name?: string;\n\n\t/\n\t Defines the callback functions for button events.\n\t /\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/\n\t Defines the role of the components primary element.\n\t /\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/\n\t Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t /\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/\n\t Selector for synchronizing the value with another input element.\n\t * @internal\n\t /\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/\n\t Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t /\n\t@Prop() public _tabIndex?: number;\n\n\t/\n\t Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t /\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/\n\t Defines either the type of the component or of the components interactive element.\n\t /\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/\n\t Defines the value that the button emits on click.\n\t /\n\t@Prop() public _value?: StencilUnknown;\n\n\t/\n\t Defines which variant should be used for presentation.\n\t * @internal\n\t */\n\t@Prop() public _buttonVariant?: ButtonVariantPropType = 'normal';\n\n\t@State() public state: ButtonStates = {\n\t\t_icons: {},\n\t\t_label: '', // ⚠ required\n\t\t_on: {},\n\t\t_type: 'button',\n\t\t_buttonVariant: 'normal',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new AssociatedInputController(this, 'button', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: AccessKeyPropType): void {\n\t\tvalidateAccessKey(this, value);\n\t\tvalidateAccessAndShortKey(value, this._shortKey);\n\t}\n\n\t@Watch('_ariaControls')\n\tpublic validateAriaControls(value?: string): void {\n\t\tvalidateAriaControls(this, value);\n\t}\n\n\t@Watch('_ariaDescription')\n\tpublic validateAriaDescription(value?: AriaDescriptionPropType): void {\n\t\tvalidateAriaDescription(this, value);\n\t}\n\n\t@Watch('_ariaExpanded')\n\tpublic validateAriaExpanded(value?: AriaExpandedPropType): void {\n\t\tvalidateAriaExpanded(this, value);\n\t}\n\n\t@Watch('_ariaSelected')\n\tpublic validateAriaSelected(value?: AriaSelectedPropType): void {\n\t\tvalidateAriaSelected(this, value);\n\t}\n\n\t@Watch('_customClass')\n\tpublic validateCustomClass(value?: CustomClassPropType): void {\n\t\tvalidateCustomClass(this, value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tvalidateDisabled(this, value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType): void {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsPropType): void {\n\t\tvalidateIcons(this, value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\twatchString(this, '_id', value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tvalidateLabelWithExpertSlot(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_linkVariant')\n\tpublic validateLinkVariant(value?: LinkVariantPropType): void {\n\t\tvalidateLinkVariant(this, value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: ButtonCallbacksPropType<StencilUnknown>): void {\n\t\tvalidateButtonCallbacks(this, value);\n\t}\n\n\t@Watch('_role')\n\tpublic validateRole(value?: AlternativeButtonLinkRolePropType): void {\n\t\tvalidateAlternativeButtonLinkRole(this, value);\n\t}\n\n\t@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tvalidateShortKey(this, value);\n\t\tvalidateAccessAndShortKey(this._accessKey, value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tvalidateTabIndex(this, value);\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: TooltipAlignPropType): void {\n\t\tvalidateTooltipAlign(this, value);\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: ButtonTypePropType): void {\n\t\tvalidateButtonType(this, value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: StencilUnknown): void {\n\t\tsetState(this, '_value', value);\n\t\tthis.controller.setFormAssociatedValue(this.state._value);\n\t}\n\n\t@Watch('_buttonVariant')\n\tpublic validateButtonVariant(value?: ButtonVariantPropType): void {\n\t\tvalidateButtonVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAccessKey(this._accessKey);\n\t\tthis.validateAriaControls(this._ariaControls);\n\t\tthis.validateAriaDescription(this._ariaDescription);\n\t\tthis.validateAriaExpanded(this._ariaExpanded);\n\t\tthis.validateAriaSelected(this._ariaSelected);\n\t\tthis.validateCustomClass(this._customClass);\n\t\tthis.validateDisabled(this._disabled);\n\t\tthis.validateHideLabel(this._hideLabel);\n\t\tthis.validateIcons(this._icons);\n\t\tthis.validateId(this._id);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLinkVariant(this._linkVariant);\n\t\tthis.validateName(this._name);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRole(this._role);\n\t\tthis.validateShortKey(this._shortKey);\n\t\tthis.validateSyncValueBySelector(this._syncValueBySelector);\n\t\tthis.validateTabIndex(this._tabIndex);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t\tthis.validateType(this._type);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateButtonVariant(this._buttonVariant);\n\t\tvalidateAccessAndShortKey(this._accessKey, this._shortKey);\n\t}\n}\n"],"version":3}

package/dist/components/kol-combobox.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{c as clsx}from"./clsx.js";import{g as getRenderStates,F as FormFieldStateWrapper}from"./controller2.js";import{I as InputIconController,a as InputContainerStateWrapperFc}from"./controller-icon.js";import{I as InputStateWrapper}from"./InputStateWrapper.js";import{C as CustomSuggestionsToggleFc,a as CustomSuggestionsOptionsGroupFc,b as CustomSuggestionsOptionFc}from"./CustomSuggestionsToggle.js";import{n as nonce}from"./dev.utils.js";import{e as watchString}from"./common.js";import{v as validatePlaceholder}from"./placeholder.js";import{v as validateRequired}from"./required.js";import{v as validateSuggestions}from"./suggestions.js";class ComboboxController extends InputIconController{constructor(e,t,n){super(e,t,n),this.component=e}validatePlaceholder(e){validatePlaceholder(this.component,e)}validateRequired(e){validateRequired(this.component,e)}validateSuggestions(e){validateSuggestions(this.component,e)}validateValue(e){watchString(this.component,"_value",e)}componentWillLoad(){super.componentWillLoad(),this.validatePlaceholder(this.component._placeholder),this.validateRequired(this.component._required),this.validateSuggestions(this.component._suggestions),this.validateValue(this.component._value)}}const defaultStyleCss="/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    line-height: 1.5;\n    white-space: normal;\n    cursor: pointer;\n    overflow-wrap: break-word;\n  }\n  .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n    cursor: none !important;\n  }\n  .kol-custom-suggestions-options-group {\n    background-color: white;\n    display: block;\n    position: absolute;\n    z-index: 2;\n    max-height: calc(250 * 1rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    padding: 0;\n    overflow-x: hidden;\n    overflow-y: auto;\n    list-style-type: none;\n  }\n  .kol-custom-suggestions-toggle {\n    display: flex;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    align-items: center;\n  }\n  .kol-custom-suggestions-toggle:not(:disabled) {\n    cursor: pointer;\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n  .kol-input-container {\n    background-color: white;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}",KolCombobox$1=proxyCustomElement(class extends HTMLElement{async getValue(){return this.state._value}async kolFocus(){var e;null===(e=this.refInput)||void 0===e||e.focus()}selectOption(e){var t;this.controller.onFacade.onInput(new CustomEvent("input",{bubbles:!0,detail:{name:this.state._name,value:e}}),!0,e),this.controller.onFacade.onChange(new CustomEvent("change",{bubbles:!0,detail:{name:this.state._name,value:e}}),e),this.controller.setFormAssociatedValue(e),this.state._value=e,null===(t=this.refInput)||void 0===t||t.focus()}onInput(e){const t=e.target;this.state._value=t.value,this._value=t.value,this.controller.onFacade.onInput(e),this.setFilteredSuggestionsByQuery(t.value),this._focusedOptionIndex=-1}handleKeyDownDropdown(e){1===e.key.length&&/[a-z0-9]/i.test(e.key)&&(this._isOpen=!0,this.focusSuggestionStartingWith(e.key))}setFilteredSuggestionsByQuery(e){""===e.trim()?this._filteredSuggestions=[...this._suggestions]:(this._filteredSuggestions=Array.isArray(this._suggestions)?this._suggestions.filter(t=>t.toLowerCase().includes(e.toLowerCase())):this._filteredSuggestions,this._isOpen=!!(this._filteredSuggestions&&this._filteredSuggestions.length>0))}moveFocus(e){if(!this._filteredSuggestions)return;let t=this._focusedOptionIndex+e;t>=this._filteredSuggestions.length&&(t=0),t<0&&(t=this._filteredSuggestions.length-1),this.focusOption(t)}focusOption(e){if(this._focusedOptionIndex=e,this.refSuggestions){const t=this.refSuggestions[e];null==t||t.focus()}}focusSuggestionStartingWith(e){const t=e.toLowerCase(),n=Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.findIndex(e=>e.toLowerCase().startsWith(t));"number"==typeof n&&this.focusOption(n)}getFormFieldProps(){return{state:this.state,class:clsx("kol-combobox",{"has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.refInput)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getInputProps(){const{ariaDescribedBy:e}=getRenderStates(this.state),t=!0===this.state._disabled;return Object.assign(Object.assign({ref:this.catchRef,state:this.state,class:"kol-combobox__input",type:"text",role:"combobox","aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,"aria-autocomplete":"both","aria-controls":"listbox","aria-describedby":e.length>0?e.join(" "):void 0,"aria-expanded":this._isOpen?"true":"false","aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-labelledby":this.state._id,"aria-keyshortcuts":this.state._shortKey,value:this.state._value,accessKey:this.state._accessKey,autocapitalize:"off",autocorrect:"off",disabled:t,customSuggestions:!0,id:this.state._id,name:this.state._name,required:this.state._required},this.controller.onFacade),{onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1},onChange:this.onChange.bind(this),onInput:this.onInput.bind(this),placeholder:this.state._placeholder})}render(){const e=!0===this.state._disabled;return h(FormFieldStateWrapper,Object.assign({key:"eb15fe58d236a7f992976c4d35e004996c1fcd4e"},this.getFormFieldProps()),h(InputContainerStateWrapperFc,{key:"80c19ad381816ef88948ac29b48fb64dc407cf29",state:this.state},h("div",{key:"96a9ea7656090a0e10024d6cc0b44e182238b217",class:"kol-combobox__group"},h(InputStateWrapper,Object.assign({key:"1f79a7c35437e4357b296118ce7ab45166966cb5"},this.getInputProps())),h(CustomSuggestionsToggleFc,{key:"5741846ebde26e7eb4cb7d7d557084c028193a8c",onClick:this.toggleListbox.bind(this),disabled:e})),this._isOpen&&!e&&h(CustomSuggestionsOptionsGroupFc,{key:"2e8c160d9ada3feb752d4efcdb2e3b281a6d7269",blockSuggestionMouseOver:this.blockSuggestionMouseOver,onKeyDown:this.handleKeyDownDropdown.bind(this)},Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.map((e,t)=>h(CustomSuggestionsOptionFc,{index:t,option:e,searchTerm:this.state._value,ref:e=>{e&&(this.refSuggestions[t]=e)},selected:this.state._value===e,onClick:()=>{this.selectOption(e),this.toggleListbox(),this._isOpen=!1,this._hasOpened=!1},onMouseOver:()=>{this.blockSuggestionMouseOver||this.focusOption(t)},onFocus:()=>{this.focusOption(t)},onKeyDown:t=>{"Enter"!==t.key&&"NumpadEnter"!==t.key||(this.selectOption(e),this.toggleListbox(),t.preventDefault())}})))))}handleKeyDown(e){var t,n;const i=(t,n)=>{var i;e.preventDefault(),void 0!==t&&(this._isOpen=t,t||null===(i=this.refInput)||void 0===i||i.focus()),null==n||n()};switch(e.key){case"Down":case"ArrowDown":this.blockSuggestionMouseOver=!0,i(!0,()=>this.moveFocus(1));break;case"Up":case"ArrowUp":this.blockSuggestionMouseOver=!0,i(!0,()=>this.moveFocus(-1));break;case"Tab":this._isOpen&&(this._isOpen=!1,null===(t=this.refInput)||void 0===t||t.focus());break;case"Esc":case"Escape":this._hasOpened=!1,this._isOpen=!1,e.preventDefault(),null===(n=this.refInput)||void 0===n||n.focus();break;case"NumpadEnter":case"Enter":this._isOpen&&this._focusedOptionIndex>=0?(this._filteredSuggestions&&this.selectOption(this._filteredSuggestions[this._focusedOptionIndex]),this._isOpen=!1,this._hasOpened=!1):this.toggleListbox(),e.preventDefault();break;case"Home":this.blockSuggestionMouseOver=!0,i(void 0,()=>{this._isOpen&&this.focusOption(0)});break;case"End":this.blockSuggestionMouseOver=!0,i(void 0,()=>{this._isOpen&&this.focusOption(this._filteredSuggestions?this._filteredSuggestions.length-1:0)});break;case"PageUp":this.blockSuggestionMouseOver=!0,i(void 0,()=>this._isOpen&&this.moveFocus(-10));break;case"PageDown":this.blockSuggestionMouseOver=!0,i(void 0,()=>this._isOpen&&this.moveFocus(10))}}handleWindowClick(e){void 0===this.host||this.host.contains(e.target)||(this._isOpen=!1)}constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.refSuggestions=[],this._focusedOptionIndex=-1,this.toggleListbox=()=>{var e;if(!0===this.state._disabled)this._isOpen=!1;else if(null===(e=this.refInput)||void 0===e||e.focus(),!this._hasOpened&&Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0){this._isOpen=!0,this._hasOpened=!0;const e=this._filteredSuggestions.findIndex(e=>e===this.state._value);this._focusedOptionIndex=e>=0?e:-1,this.focusOption(this._focusedOptionIndex)}},this.catchRef=e=>{this.refInput=e},this.blockSuggestionMouseOver=!1,this._isOpen=!1,this._hasOpened=!1,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._required=!1,this._tooltipAlign="top",this._touched=!1,this.state={_hasValue:!1,_hideMsg:!1,_id:`id-${nonce()}`,_label:"",_suggestions:[],_value:""},this.inputHasFocus=!1,this.controller=new ComboboxController(this,"combobox",this.host),this.onInput=this.onInput.bind(this)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSuggestions(e){this.controller.validateSuggestions(e),this._filteredSuggestions=e}validateRequired(e){this.controller.validateRequired(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e),this.controller.setFormAssociatedValue(e)}componentWillLoad(){this.refSuggestions=[],this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(e=>this.state._hasValue=!!e),this._filteredSuggestions=this.state._suggestions}handleMouseEvent(){this.blockSuggestionMouseOver=!1}handleFocusOut(){setTimeout(()=>{var e;(null===(e=this.host)||void 0===e?void 0:e.contains(document.activeElement))||this.onBlur()},0)}handleWindowBlur(){this.onBlur()}onBlur(){var e;this._hasOpened=!1,this._isOpen&&(this._isOpen=!this._isOpen,null===(e=this.refInput)||void 0===e||e.focus())}onChange(e){this.controller.onFacade.onChange(e),this.controller.setFormAssociatedValue(this.state._value)}static get delegatesFocus(){return!0}get host(){return this}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_shortKey:["validateShortKey"],_suggestions:["validateSuggestions"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}}static get style(){return{default:defaultStyleCss}}},[305,"kol-combobox",{_accessKey:[1,"_access-key"],_placeholder:[1],_disabled:[4],_hideMsg:[1540,"_hide-msg"],_hideLabel:[4,"_hide-label"],_hint:[1],_icons:[1],_id:[1],_label:[1],_msg:[1],_name:[1],_on:[16],_suggestions:[1],_required:[4],_shortKey:[1,"_short-key"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_value:[1537],blockSuggestionMouseOver:[32],_isOpen:[32],_filteredSuggestions:[32],_hasOpened:[32],state:[32],inputHasFocus:[32],getValue:[64],kolFocus:[64]},[[0,"keydown","handleKeyDown"],[8,"click","handleWindowClick"],[1,"mousemove","handleMouseEvent"],[8,"focusout","handleFocusOut"],[8,"blur","handleWindowBlur"]],{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_shortKey:["validateShortKey"],_suggestions:["validateSuggestions"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-combobox"].forEach(e=>{if("kol-combobox"===e)customElements.get(e)||customElements.define(e,KolCombobox$1)})}const KolCombobox=KolCombobox$1,defineCustomElement=defineCustomElement$1;export{KolCombobox,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{c as clsx}from"./clsx.js";import{g as getRenderStates,F as FormFieldStateWrapper}from"./controller2.js";import{I as InputIconController,a as InputContainerStateWrapperFc}from"./controller-icon.js";import{I as InputStateWrapper}from"./InputStateWrapper.js";import{C as CustomSuggestionsToggleFc,a as CustomSuggestionsOptionsGroupFc,b as CustomSuggestionsOptionFc}from"./CustomSuggestionsToggle.js";import{n as nonce}from"./dev.utils.js";import{h as watchString}from"./common.js";import{v as validatePlaceholder}from"./placeholder.js";import{v as validateRequired}from"./required.js";import{v as validateSuggestions}from"./suggestions.js";class ComboboxController extends InputIconController{constructor(e,t,n){super(e,t,n),this.component=e}validatePlaceholder(e){validatePlaceholder(this.component,e)}validateRequired(e){validateRequired(this.component,e)}validateSuggestions(e){validateSuggestions(this.component,e)}validateValue(e){watchString(this.component,"_value",e)}componentWillLoad(){super.componentWillLoad(),this.validatePlaceholder(this.component._placeholder),this.validateRequired(this.component._required),this.validateSuggestions(this.component._suggestions),this.validateValue(this.component._value)}}const defaultStyleCss="/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    line-height: 1.5;\n    white-space: normal;\n    cursor: pointer;\n    overflow-wrap: break-word;\n  }\n  .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n    cursor: none !important;\n  }\n  .kol-custom-suggestions-options-group {\n    background-color: white;\n    display: block;\n    position: absolute;\n    z-index: 2;\n    max-height: calc(250 * 1rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    padding: 0;\n    overflow-x: hidden;\n    overflow-y: auto;\n    list-style-type: none;\n  }\n  .kol-custom-suggestions-toggle {\n    display: flex;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    align-items: center;\n  }\n  .kol-custom-suggestions-toggle:not(:disabled) {\n    cursor: pointer;\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n  .kol-input-container {\n    background-color: white;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}",KolCombobox$1=proxyCustomElement(class extends HTMLElement{async getValue(){return this.state._value}async kolFocus(){var e;null===(e=this.refInput)||void 0===e||e.focus()}selectOption(e){var t;this.controller.onFacade.onInput(new CustomEvent("input",{bubbles:!0,detail:{name:this.state._name,value:e}}),!0,e),this.controller.onFacade.onChange(new CustomEvent("change",{bubbles:!0,detail:{name:this.state._name,value:e}}),e),this.controller.setFormAssociatedValue(e),this.state._value=e,null===(t=this.refInput)||void 0===t||t.focus()}onInput(e){const t=e.target;this.state._value=t.value,this._value=t.value,this.controller.onFacade.onInput(e),this.setFilteredSuggestionsByQuery(t.value),this._focusedOptionIndex=-1}handleKeyDownDropdown(e){1===e.key.length&&/[a-z0-9]/i.test(e.key)&&(this._isOpen=!0,this.focusSuggestionStartingWith(e.key))}setFilteredSuggestionsByQuery(e){""===e.trim()?this._filteredSuggestions=[...this._suggestions]:(this._filteredSuggestions=Array.isArray(this._suggestions)?this._suggestions.filter(t=>t.toLowerCase().includes(e.toLowerCase())):this._filteredSuggestions,this._isOpen=!!(this._filteredSuggestions&&this._filteredSuggestions.length>0))}moveFocus(e){if(!this._filteredSuggestions)return;let t=this._focusedOptionIndex+e;t>=this._filteredSuggestions.length&&(t=0),t<0&&(t=this._filteredSuggestions.length-1),this.focusOption(t)}focusOption(e){if(this._focusedOptionIndex=e,this.refSuggestions){const t=this.refSuggestions[e];null==t||t.focus()}}focusSuggestionStartingWith(e){const t=e.toLowerCase(),n=Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.findIndex(e=>e.toLowerCase().startsWith(t));"number"==typeof n&&this.focusOption(n)}getFormFieldProps(){return{state:this.state,class:clsx("kol-combobox",{"has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.refInput)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getInputProps(){const{ariaDescribedBy:e}=getRenderStates(this.state),t=!0===this.state._disabled;return Object.assign(Object.assign({ref:this.catchRef,state:this.state,class:"kol-combobox__input",type:"text",role:"combobox","aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,"aria-autocomplete":"both","aria-controls":"listbox","aria-describedby":e.length>0?e.join(" "):void 0,"aria-expanded":this._isOpen?"true":"false","aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-labelledby":this.state._id,"aria-keyshortcuts":this.state._shortKey,value:this.state._value,accessKey:this.state._accessKey,autocapitalize:"off",autocorrect:"off",disabled:t,customSuggestions:!0,id:this.state._id,name:this.state._name,required:this.state._required},this.controller.onFacade),{onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1},onChange:this.onChange.bind(this),onInput:this.onInput.bind(this),placeholder:this.state._placeholder})}render(){const e=!0===this.state._disabled;return h(FormFieldStateWrapper,Object.assign({key:"eb15fe58d236a7f992976c4d35e004996c1fcd4e"},this.getFormFieldProps()),h(InputContainerStateWrapperFc,{key:"80c19ad381816ef88948ac29b48fb64dc407cf29",state:this.state},h("div",{key:"96a9ea7656090a0e10024d6cc0b44e182238b217",class:"kol-combobox__group"},h(InputStateWrapper,Object.assign({key:"1f79a7c35437e4357b296118ce7ab45166966cb5"},this.getInputProps())),h(CustomSuggestionsToggleFc,{key:"5741846ebde26e7eb4cb7d7d557084c028193a8c",onClick:this.toggleListbox.bind(this),disabled:e})),this._isOpen&&!e&&h(CustomSuggestionsOptionsGroupFc,{key:"2e8c160d9ada3feb752d4efcdb2e3b281a6d7269",blockSuggestionMouseOver:this.blockSuggestionMouseOver,onKeyDown:this.handleKeyDownDropdown.bind(this)},Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.map((e,t)=>h(CustomSuggestionsOptionFc,{index:t,option:e,searchTerm:this.state._value,ref:e=>{e&&(this.refSuggestions[t]=e)},selected:this.state._value===e,onClick:()=>{this.selectOption(e),this.toggleListbox(),this._isOpen=!1,this._hasOpened=!1},onMouseOver:()=>{this.blockSuggestionMouseOver||this.focusOption(t)},onFocus:()=>{this.focusOption(t)},onKeyDown:t=>{"Enter"!==t.key&&"NumpadEnter"!==t.key||(this.selectOption(e),this.toggleListbox(),t.preventDefault())}})))))}handleKeyDown(e){var t,n;const i=(t,n)=>{var i;e.preventDefault(),void 0!==t&&(this._isOpen=t,t||null===(i=this.refInput)||void 0===i||i.focus()),null==n||n()};switch(e.key){case"Down":case"ArrowDown":this.blockSuggestionMouseOver=!0,i(!0,()=>this.moveFocus(1));break;case"Up":case"ArrowUp":this.blockSuggestionMouseOver=!0,i(!0,()=>this.moveFocus(-1));break;case"Tab":this._isOpen&&(this._isOpen=!1,null===(t=this.refInput)||void 0===t||t.focus());break;case"Esc":case"Escape":this._hasOpened=!1,this._isOpen=!1,e.preventDefault(),null===(n=this.refInput)||void 0===n||n.focus();break;case"NumpadEnter":case"Enter":this._isOpen&&this._focusedOptionIndex>=0?(this._filteredSuggestions&&this.selectOption(this._filteredSuggestions[this._focusedOptionIndex]),this._isOpen=!1,this._hasOpened=!1):this.toggleListbox(),e.preventDefault();break;case"Home":this.blockSuggestionMouseOver=!0,i(void 0,()=>{this._isOpen&&this.focusOption(0)});break;case"End":this.blockSuggestionMouseOver=!0,i(void 0,()=>{this._isOpen&&this.focusOption(this._filteredSuggestions?this._filteredSuggestions.length-1:0)});break;case"PageUp":this.blockSuggestionMouseOver=!0,i(void 0,()=>this._isOpen&&this.moveFocus(-10));break;case"PageDown":this.blockSuggestionMouseOver=!0,i(void 0,()=>this._isOpen&&this.moveFocus(10))}}handleWindowClick(e){void 0===this.host||this.host.contains(e.target)||(this._isOpen=!1)}constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.refSuggestions=[],this._focusedOptionIndex=-1,this.toggleListbox=()=>{var e;if(!0===this.state._disabled)this._isOpen=!1;else if(null===(e=this.refInput)||void 0===e||e.focus(),!this._hasOpened&&Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0){this._isOpen=!0,this._hasOpened=!0;const e=this._filteredSuggestions.findIndex(e=>e===this.state._value);this._focusedOptionIndex=e>=0?e:-1,this.focusOption(this._focusedOptionIndex)}},this.catchRef=e=>{this.refInput=e},this.blockSuggestionMouseOver=!1,this._isOpen=!1,this._hasOpened=!1,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._required=!1,this._tooltipAlign="top",this._touched=!1,this.state={_hasValue:!1,_hideMsg:!1,_id:`id-${nonce()}`,_label:"",_suggestions:[],_value:""},this.inputHasFocus=!1,this.controller=new ComboboxController(this,"combobox",this.host),this.onInput=this.onInput.bind(this)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSuggestions(e){this.controller.validateSuggestions(e),this._filteredSuggestions=e}validateRequired(e){this.controller.validateRequired(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e),this.controller.setFormAssociatedValue(e)}componentWillLoad(){this.refSuggestions=[],this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(e=>this.state._hasValue=!!e),this._filteredSuggestions=this.state._suggestions}handleMouseEvent(){this.blockSuggestionMouseOver=!1}handleFocusOut(){setTimeout(()=>{var e;(null===(e=this.host)||void 0===e?void 0:e.contains(document.activeElement))||this.onBlur()},0)}handleWindowBlur(){this.onBlur()}onBlur(){var e;this._hasOpened=!1,this._isOpen&&(this._isOpen=!this._isOpen,null===(e=this.refInput)||void 0===e||e.focus())}onChange(e){this.controller.onFacade.onChange(e),this.controller.setFormAssociatedValue(this.state._value)}static get delegatesFocus(){return!0}get host(){return this}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_shortKey:["validateShortKey"],_suggestions:["validateSuggestions"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}}static get style(){return{default:defaultStyleCss}}},[305,"kol-combobox",{_accessKey:[1,"_access-key"],_placeholder:[1],_disabled:[4],_hideMsg:[1540,"_hide-msg"],_hideLabel:[4,"_hide-label"],_hint:[1],_icons:[1],_id:[1],_label:[1],_msg:[1],_name:[1],_on:[16],_suggestions:[1],_required:[4],_shortKey:[1,"_short-key"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_value:[1537],blockSuggestionMouseOver:[32],_isOpen:[32],_filteredSuggestions:[32],_hasOpened:[32],state:[32],inputHasFocus:[32],getValue:[64],kolFocus:[64]},[[0,"keydown","handleKeyDown"],[8,"click","handleWindowClick"],[1,"mousemove","handleMouseEvent"],[8,"focusout","handleFocusOut"],[8,"blur","handleWindowBlur"]],{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_shortKey:["validateShortKey"],_suggestions:["validateSuggestions"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-combobox"].forEach(e=>{if("kol-combobox"===e)customElements.get(e)||customElements.define(e,KolCombobox$1)})}const KolCombobox=KolCombobox$1,defineCustomElement=defineCustomElement$1;export{KolCombobox,defineCustomElement};

package/dist/components/kol-form.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{w as watchValidator,c as watchBoolean,e as watchString}from"./common.js";import{t as translate}from"./i18n.js";import{f as KolLinkWcTag}from"./component-names.js";import{K as KolAlertFc}from"./Alert.js";import{d as dispatchDomEvent,K as KolEvent}from"./events.js";const validateErrorList=(n,e)=>{watchValidator(n,"errorList",n=>Array.isArray(n)&&void 0===n.find(n=>!("string"==typeof n||"function"==typeof n)),new Set(["string","function"]),e)},defaultStyleCss="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    display: inline-flex;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-link__text .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}",KolForm$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.translateErrorListMessage=translate("kol-error-list-message"),this.translateErrorList=translate("kol-error-list"),this.translateFormDescription=translate("kol-form-description"),this.onSubmit=n=>{var e,t;n.preventDefault(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onSubmit)&&(null===(t=this.state._on)||void 0===t||t.onSubmit(n)),this.host&&dispatchDomEvent(this.host,KolEvent.submit)},this.onReset=n=>{var e,t;n.preventDefault(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onReset)&&(null===(t=this.state._on)||void 0===t||t.onReset(n)),this.host&&dispatchDomEvent(this.host,KolEvent.reset)},this.handleLinkClick=n=>{const e=document.querySelector(n);e&&"function"==typeof e.focus&&(e.scrollIntoView({behavior:"smooth"}),e.focus())},this.setBlockElement=n=>this.errorListBlock=n,this.setFirstLinkElement=n=>this.errorListFirstLink=n,this._requiredText=!0,this.state={}}renderErrorList(n){return h(KolAlertFc,{class:"kol-form__alert",ref:this.setBlockElement,type:"error",variant:"card",label:this.translateErrorListMessage},h("nav",{"aria-label":this.translateErrorList},h("ul",null,null==n?void 0:n.map((n,e)=>h("li",{key:e},h(KolLinkWcTag,{class:"kol-form__link",_href:"",_label:n.message,_on:{onClick:"string"==typeof n.selector?()=>this.handleLinkClick(String(n.selector)):n.selector},ref:0===e?this.setFirstLinkElement:void 0}))))))}renderFormElement(){return h("form",{class:"kol-form",method:"post",onSubmit:this.onSubmit,onReset:this.onReset,noValidate:!0},!0===this.state._requiredText?h("p",null,h("div",{class:"kol-form__mandatory-fields-hint"},this.translateFormDescription)):"string"==typeof this.state._requiredText&&this.state._requiredText.length>0?h("p",null,h("div",{class:"kol-form__mandatory-fields-hint"},this.state._requiredText)):null,h("slot",null))}render(){const n=Array.isArray(this._errorList)&&this._errorList.length>0;return h(Host,{key:"129655c9f0160c5c3eb6801253953b52c9649031"},n&&this.renderErrorList(this._errorList),this.renderFormElement())}scrollToErrorList(){var n;null===(n=this.errorListBlock)||void 0===n||n.scrollIntoView({behavior:"smooth",block:"start"}),setTimeout(()=>{var n,e;null===(e=null===(n=this.errorListFirstLink)||void 0===n?void 0:n.querySelector("a"))||void 0===e||e.focus()},250)}async focusErrorList(){return this.scrollToErrorList(),Promise.resolve()}validateOn(n){"object"==typeof n&&null!==n&&(this.state=Object.assign(Object.assign({},this.state),{_on:n}))}validateRequiredText(n){"boolean"==typeof n?watchBoolean(this,"_requiredText",n):watchString(this,"_requiredText",n)}validateErrorList(n){validateErrorList(this,n)}componentWillLoad(){this.validateOn(this._on),this.validateRequiredText(this._requiredText),this.validateErrorList(this._errorList)}get host(){return this}static get watchers(){return{_on:["validateOn"],_requiredText:["validateRequiredText"],_errorList:["validateErrorList"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-form",{_on:[16],_requiredText:[8,"_required-text"],_errorList:[16,"_error-list"],state:[32],focusErrorList:[64]},void 0,{_on:["validateOn"],_requiredText:["validateRequiredText"],_errorList:["validateErrorList"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-form"].forEach(n=>{if("kol-form"===n)customElements.get(n)||customElements.define(n,KolForm$1)})}const KolForm=KolForm$1,defineCustomElement=defineCustomElement$1;export{KolForm,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{w as watchValidator,c as watchBoolean,h as watchString}from"./common.js";import{t as translate}from"./i18n.js";import{f as KolLinkWcTag}from"./component-names.js";import{K as KolAlertFc}from"./Alert.js";import{d as dispatchDomEvent,K as KolEvent}from"./events.js";const validateErrorList=(n,e)=>{watchValidator(n,"errorList",n=>Array.isArray(n)&&void 0===n.find(n=>!("string"==typeof n||"function"==typeof n)),new Set(["string","function"]),e)},defaultStyleCss="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    display: inline-flex;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-link__text .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}",KolForm$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.translateErrorListMessage=translate("kol-error-list-message"),this.translateErrorList=translate("kol-error-list"),this.translateFormDescription=translate("kol-form-description"),this.onSubmit=n=>{var e,t;n.preventDefault(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onSubmit)&&(null===(t=this.state._on)||void 0===t||t.onSubmit(n)),this.host&&dispatchDomEvent(this.host,KolEvent.submit)},this.onReset=n=>{var e,t;n.preventDefault(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onReset)&&(null===(t=this.state._on)||void 0===t||t.onReset(n)),this.host&&dispatchDomEvent(this.host,KolEvent.reset)},this.handleLinkClick=n=>{const e=document.querySelector(n);e&&"function"==typeof e.focus&&(e.scrollIntoView({behavior:"smooth"}),e.focus())},this.setBlockElement=n=>this.errorListBlock=n,this.setFirstLinkElement=n=>this.errorListFirstLink=n,this._requiredText=!0,this.state={}}renderErrorList(n){return h(KolAlertFc,{class:"kol-form__alert",ref:this.setBlockElement,type:"error",variant:"card",label:this.translateErrorListMessage},h("nav",{"aria-label":this.translateErrorList},h("ul",null,null==n?void 0:n.map((n,e)=>h("li",{key:e},h(KolLinkWcTag,{class:"kol-form__link",_href:"",_label:n.message,_on:{onClick:"string"==typeof n.selector?()=>this.handleLinkClick(String(n.selector)):n.selector},ref:0===e?this.setFirstLinkElement:void 0}))))))}renderFormElement(){return h("form",{class:"kol-form",method:"post",onSubmit:this.onSubmit,onReset:this.onReset,noValidate:!0},!0===this.state._requiredText?h("p",null,h("div",{class:"kol-form__mandatory-fields-hint"},this.translateFormDescription)):"string"==typeof this.state._requiredText&&this.state._requiredText.length>0?h("p",null,h("div",{class:"kol-form__mandatory-fields-hint"},this.state._requiredText)):null,h("slot",null))}render(){const n=Array.isArray(this._errorList)&&this._errorList.length>0;return h(Host,{key:"129655c9f0160c5c3eb6801253953b52c9649031"},n&&this.renderErrorList(this._errorList),this.renderFormElement())}scrollToErrorList(){var n;null===(n=this.errorListBlock)||void 0===n||n.scrollIntoView({behavior:"smooth",block:"start"}),setTimeout(()=>{var n,e;null===(e=null===(n=this.errorListFirstLink)||void 0===n?void 0:n.querySelector("a"))||void 0===e||e.focus()},250)}async focusErrorList(){return this.scrollToErrorList(),Promise.resolve()}validateOn(n){"object"==typeof n&&null!==n&&(this.state=Object.assign(Object.assign({},this.state),{_on:n}))}validateRequiredText(n){"boolean"==typeof n?watchBoolean(this,"_requiredText",n):watchString(this,"_requiredText",n)}validateErrorList(n){validateErrorList(this,n)}componentWillLoad(){this.validateOn(this._on),this.validateRequiredText(this._requiredText),this.validateErrorList(this._errorList)}get host(){return this}static get watchers(){return{_on:["validateOn"],_requiredText:["validateRequiredText"],_errorList:["validateErrorList"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-form",{_on:[16],_requiredText:[8,"_required-text"],_errorList:[16,"_error-list"],state:[32],focusErrorList:[64]},void 0,{_on:["validateOn"],_requiredText:["validateRequiredText"],_errorList:["validateErrorList"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-form"].forEach(n=>{if("kol-form"===n)customElements.get(n)||customElements.define(n,KolForm$1)})}const KolForm=KolForm$1,defineCustomElement=defineCustomElement$1;export{KolForm,defineCustomElement};

package/dist/components/kol-heading.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{e as watchString}from"./common.js";import{a as validateLabelWithExpertSlot}from"./label.js";import"./Alert.js";import{K as KolHeadingFc}from"./Heading.js";import"./markdown.js";import"./i18n.js";import{w as watchHeadingLevel}from"./validation.js";const defaultStyleCss="/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-headline--secondary {\n    margin: 0;\n  }\n}",KolHeading$1=proxyCustomElement(class extends HTMLElement{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this._level=0,this.state={_label:"",_level:0}}validateLabel(e){validateLabelWithExpertSlot(this,e)}validateLevel(e){watchHeadingLevel(this,e)}validateSecondaryHeadline(e){watchString(this,"_secondaryHeadline",e)}componentWillLoad(){this.validateLabel(this._label),this.validateLevel(this._level),this.validateSecondaryHeadline(this._secondaryHeadline)}render(){const{_secondaryHeadline:e,_label:n,_level:t}=this.state;return h(KolHeadingFc,{key:"bca6f091d8c15ebbd3cd448deb11b8c21253369c",secondaryHeadline:e,level:t},n,h("slot",{key:"16c1177a2937b4a31efd828e26fb316f365049a7",name:"expert",slot:"expert"}))}static get watchers(){return{_label:["validateLabel"],_level:["validateLevel"],_secondaryHeadline:["validateSecondaryHeadline"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-heading",{_label:[1],_level:[2],_secondaryHeadline:[1,"_secondary-headline"],state:[32]},void 0,{_label:["validateLabel"],_level:["validateLevel"],_secondaryHeadline:["validateSecondaryHeadline"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-heading"].forEach(e=>{if("kol-heading"===e)customElements.get(e)||customElements.define(e,KolHeading$1)})}const KolHeading=KolHeading$1,defineCustomElement=defineCustomElement$1;export{KolHeading,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{h as watchString}from"./common.js";import{a as validateLabelWithExpertSlot}from"./label.js";import"./Alert.js";import{K as KolHeadingFc}from"./Heading.js";import"./markdown.js";import"./i18n.js";import{w as watchHeadingLevel}from"./validation.js";const defaultStyleCss="/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-headline--secondary {\n    margin: 0;\n  }\n}",KolHeading$1=proxyCustomElement(class extends HTMLElement{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this._level=0,this.state={_label:"",_level:0}}validateLabel(e){validateLabelWithExpertSlot(this,e)}validateLevel(e){watchHeadingLevel(this,e)}validateSecondaryHeadline(e){watchString(this,"_secondaryHeadline",e)}componentWillLoad(){this.validateLabel(this._label),this.validateLevel(this._level),this.validateSecondaryHeadline(this._secondaryHeadline)}render(){const{_secondaryHeadline:e,_label:n,_level:t}=this.state;return h(KolHeadingFc,{key:"bca6f091d8c15ebbd3cd448deb11b8c21253369c",secondaryHeadline:e,level:t},n,h("slot",{key:"16c1177a2937b4a31efd828e26fb316f365049a7",name:"expert",slot:"expert"}))}static get watchers(){return{_label:["validateLabel"],_level:["validateLevel"],_secondaryHeadline:["validateSecondaryHeadline"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-heading",{_label:[1],_level:[2],_secondaryHeadline:[1,"_secondary-headline"],state:[32]},void 0,{_label:["validateLabel"],_level:["validateLevel"],_secondaryHeadline:["validateSecondaryHeadline"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-heading"].forEach(e=>{if("kol-heading"===e)customElements.get(e)||customElements.define(e,KolHeading$1)})}const KolHeading=KolHeading$1,defineCustomElement=defineCustomElement$1;export{KolHeading,defineCustomElement};