@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
4 lines • 12.1 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
"use strict";const index=require("./index-94c17ce6.js"),events=require("./events-df7aa71f.js"),associated_controller=require("./associated.controller-03ae298d.js"),accessAndShortKey=require("./access-and-short-key-ba5dc318.js"),tooltipAlign=require("./tooltip-align-6938fb01.js"),hideLabel=require("./hide-label-18d6d9e2.js"),label=require("./label-7b22af75.js"),tslib_es6=require("./tslib.es6-5e301284.js"),index$1=require("./index-a40019ac.js"),clsx=require("./clsx-dd4d6dd1.js"),Alert=require("./Alert-22627abf.js"),InternalUnderlinedBadgeText=require("./InternalUnderlinedBadgeText-63e8b102.js"),i18n=require("./i18n-b01aa5d0.js"),componentNames=require("./component-names-82c4d68d.js"),validateAdjustHeight=(e,t)=>{index.watchBoolean(e,"_adjustHeight",t)},validateHideMsg=(e,t,n)=>{index.watchBoolean(e,"_hideMsg",t,n)};function transformObjectProperties(e){return Object.entries(e).reduce(((e,[t,n])=>{const i=t.startsWith("_")?t.slice(1):t;return Object.assign(Object.assign({},e),{[i]:n})}),{})}const validateMsg=(e,t)=>{index.objectObjectHandler(t,(()=>{try{t=index.parseJson(t)}catch(e){}index.watchValidator(e,"_msg",(e=>index.isObject(e)&&index.isString(null==e?void 0:e._description,1)||void 0===(null==e?void 0:e._type)),new Set(["MsgPropType"]),t)}))};function convertMsgToInternMsg(e){if(e)return transformObjectProperties(e)}function checkHasMsg(e,t){return!!e&&(!0===t||"error"!==(null==e?void 0:e.type))}const validateTouched=(e,t)=>{index.watchBoolean(e,"_touched",t)},FormFieldMsgFc=e=>{var{alert:t,msg:n,hideMsg:i,id:o,class:s}=e,l=tslib_es6.__rest(e,["alert","msg","hideMsg","id","class"]);return index$1.h(Alert.KolAlertFc,Object.assign({id:`${o}-msg`,alert:t,type:"error",class:clsx.clsx("kol-form-field__msg",{"visually-hidden":!0===i},s)},n,l,{"aria-hidden":"true"}),(null==n?void 0:n.description)||void 0)},LabelFc=({hasExpertSlot:e,accessKey:t,shortKey:n,label:i,showBadge:o=!0})=>{if(e)return index$1.h("slot",{name:"expert"});if(!i)return null;const s=InternalUnderlinedBadgeText.isString(t)||InternalUnderlinedBadgeText.isString(n);if(!o||!s)return index$1.h("span",null,i);const l=index.buildBadgeTextString(t,n);return index$1.h(index$1.Fragment,null,index$1.h(InternalUnderlinedBadgeText.KolInternalUnderlinedBadgeTextFc,{badgeText:l,label:i})," ",index$1.h("span",{class:"badge-text-hint","aria-hidden":"true"},l))},KolFormFieldLabelFc=e=>{var{component:t="label",id:n,baseClassName:i="kol-form-field",class:o,accessKey:s,shortKey:l,label:a,hideLabel:r,hasExpertSlot:d,showBadge:c}=e,h=tslib_es6.__rest(e,["component","id","baseClassName","class","accessKey","shortKey","label","hideLabel","hasExpertSlot","showBadge"]);const u=!d&&r;return index$1.h(t,Object.assign({},h,{class:clsx.clsx(`${i}__label`,o),id:u?void 0:`${n}-label`,hidden:u,htmlFor:n}),index$1.h("span",{class:clsx.clsx(`${i}__label-text`)},index$1.h(LabelFc,{hasExpertSlot:d,accessKey:s,shortKey:l,label:a,showBadge:c})))},KolFormFieldHintFc=e=>{var{id:t,class:n,hint:i,baseClassName:o="kol-form-field"}=e,s=tslib_es6.__rest(e,["id","class","hint","baseClassName"]);return i?index$1.h("span",Object.assign({class:clsx.clsx(`${o}__hint`,n),id:`${t}-hint`},s),i):null},KolFormFieldCounterFc=e=>{var{currentLength:t,maxLength:n,class:i}=e,o=tslib_es6.__rest(e,["currentLength","maxLength","class"]);return index$1.h("span",Object.assign({class:clsx.clsx("kol-form-field__counter",i)},o,{"aria-atomic":"true","aria-live":"polite","data-testid":"input-counter"}),t,n&&index$1.h(index$1.Fragment,null,index$1.h("span",{"aria-label":i18n.translate("kol-of"),role:"img"},"/"),n)," ",index$1.h("span",null,i18n.translate("kol-characters")))},FormFieldTooltipFc=({id:e,align:t,badgeText:n,hideLabel:i,label:o,class:s})=>index$1.h(componentNames.KolTooltipWcTag,{"aria-hidden":"true",class:clsx.clsx("kol-form-field__tooltip",s),_badgeText:n,_align:t,_id:i?`${e}-label`:void 0,_label:o});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,i=tslib_es6.__rest(e,["class"]);return index$1.h("div",Object.assign({class:clsx.clsx("kol-form-field__input",n)},i),t)},KolFormFieldFc=(e,t)=>{const{component:n="div",renderNoLabel:i,renderNoTooltip:o,renderNoHint:s,anotherChildren:l,id:a,required:r,alert:d,disabled:c,class:h,msg:u,hideMsg:p,hideLabel:m,label:g,hint:b,accessKey:v,shortKey:_,tooltipAlign:x,counter:f,readOnly:F,touched:y,formFieldLabelProps:K,formFieldHintProps:L,formFieldTooltipProps:j,formFieldMsgProps:C,formFieldCounterProps:M,formFieldInputProps:S}=e,T=tslib_es6.__rest(e,["component","renderNoLabel","renderNoTooltip","renderNoHint","anotherChildren","id","required","alert","disabled","class","msg","hideMsg","hideLabel","label","hint","accessKey","shortKey","tooltipAlign","counter","readOnly","touched","formFieldLabelProps","formFieldHintProps","formFieldTooltipProps","formFieldMsgProps","formFieldCounterProps","formFieldInputProps"]),$=!i,B=!s,H=!o,A=index.showExpertSlot(g),I=checkHasMsg(u,y),O=index.buildBadgeTextString(v,_),k=H&&!A&&m;let P={"kol-form-field--disabled":Boolean(c),"kol-form-field--required":Boolean(r),"kol-form-field--touched":Boolean(y),"kol-form-field--hide-label":Boolean(m),"kol-form-field--read-only":Boolean(F),"kol-form-field--hidden-msg":Boolean(p)};return I&&(P=Object.assign(Object.assign({},P),{[`kol-form-field--${(null==u?void 0:u.type)||"error"}`]:!0,[`kol-form-field--${getModifierClassNameByMsgType(u)}`]:!0})),index$1.h(n,Object.assign({class:clsx.clsx("kol-form-field",P,h)},T),$&&index$1.h(KolFormFieldLabelFc,Object.assign({},K||{},{id:a,hasExpertSlot:A,hideLabel:m,label:g,accessKey:v,shortKey:_})),index$1.h(InputContainer,Object.assign({},S),t,k&&index$1.h(FormFieldTooltipFc,Object.assign({},j||{},{id:a,label:g,hideLabel:m,align:x,badgeText:O}))),f?index$1.h(KolFormFieldCounterFc,Object.assign({},M||{},f)):null,I&&index$1.h(FormFieldMsgFc,Object.assign({},C||{},{id:a,alert:d,msg:u,hideMsg:p})),B&&index$1.h(KolFormFieldHintFc,Object.assign({},L||{},{id:a,hint:b})),l)};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}}class ControlledInputController extends associated_controller.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.component=e}validateAccessKey(e){accessAndShortKey.validateAccessKey(this.component,e),accessAndShortKey.validateAccessAndShortKey(e,this.component._shortKey)}validateAdjustHeight(e){validateAdjustHeight(this.component,e)}validateDisabled(e){index.watchBoolean(this.component,"_disabled",e),!0===e&&index.a11yHintDisabled()}validateTooltipAlign(e){tooltipAlign.validateTooltipAlign(this.component,e)}validateHideMsg(e){validateHideMsg(this.component,e,{hooks:{afterPatch:()=>{this.component.state._hideMsg&&index.a11yHint("Property _hideMsg for inputs: Only use when the error message is shown outside of the input component.")}}})}validateHideLabel(e){hideLabel.validateHideLabel(this.component,e,{hooks:{afterPatch:()=>{this.component.state._hideLabel&&index.a11yHint("Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.")}}})}validateHint(e){index.watchString(this.component,"_hint",e)}validateId(e){index.watchString(this.component,"_id",e,{minLength:1}),""!==e&&void 0!==e||index.devHint("A unique ID on the input fields is not strictly required, but it might be relevant for E2E tests.")}validateLabel(e){label.validateLabelWithExpertSlot(this.component,e,{required:!0})}validateMsg(e){validateMsg(this.component,e)}validateOn(e){"object"==typeof e&&index.setState(this.component,"_on",e)}validateShortKey(e){accessAndShortKey.validateShortKey(this.component,e),accessAndShortKey.validateAccessAndShortKey(this.component._accessKey,e)}validateSmartButton(e){index.objectObjectHandler(e,(()=>{try{e=index.parseJson(e)}catch(e){}index.setState(this.component,"_smartButton",e)}))}validateTabIndex(e){accessAndShortKey.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),accessAndShortKey.validateAccessAndShortKey(this.component._accessKey,this.component._shortKey)}emitEvent(e,t){this.host&&events.dispatchDomEvent(this.host,e,t)}onBlur(e){var t;this.component._touched=!0,this.emitEvent(events.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(events.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 i;void 0===n&&(n=e.target.value),this.emitEvent(events.KolEvent.input,n),t&&this.setFormAssociatedValue(n),"function"==typeof(null===(i=this.component._on)||void 0===i?void 0:i.onInput)&&this.component._on.onInput(e,n)}onClick(e){var t;this.emitEvent(events.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(events.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)}}function getFormFieldProps(e){const t={id:e._id,disabled:e._disabled,msg:convertMsgToInternMsg(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),"_hasCounter"in e&&"_currentLength"in e&&(t.counter=e._hasCounter?{currentLength:e._currentLength}:void 0,t.counter&&"_maxLength"in e&&(t.counter.maxLength=e._maxLength)),t}const FormFieldStateWrapper=(e,t)=>{var{state:n}=e,i=tslib_es6.__rest(e,["state"]);return index$1.h(KolFormFieldFc,Object.assign({},getFormFieldProps(n),i),t)},getRenderStates=e=>{var t,n,i;const o=Boolean((null===(t=null==e?void 0:e._msg)||void 0===t?void 0:t._description)&&(null===(n=e._msg._description)||void 0===n?void 0:n.length)>0),s="error"===(null===(i=e._msg)||void 0===i?void 0:i._type)&&o&&!0===e._touched,l="string"==typeof e._hint&&e._hint.length>0,a=[];return o&&a.push(`${e._id}-msg`),l&&a.push(`${e._id}-hint`),{hasError:s,hasHint:l,ariaDescribedBy:a}};exports.FormFieldStateWrapper=FormFieldStateWrapper,exports.FormFieldTooltipFc=FormFieldTooltipFc,exports.InputController=InputController,exports.KolFormFieldHintFc=KolFormFieldHintFc,exports.KolFormFieldLabelFc=KolFormFieldLabelFc,exports.checkHasMsg=checkHasMsg,exports.convertMsgToInternMsg=convertMsgToInternMsg,exports.getDefaultProps=getDefaultProps,exports.getRenderStates=getRenderStates;