UNPKG

@public-ui/components

Version:

Contains all web components that belong to KoliBri - The accessible HTML-Standard.

4 lines 9.74 kB
/*! * KoliBri - The accessible HTML-Standard */ import{h as e,o as t,j as i,w as s,v as o,q as a,B as r,l as n,i as l,b as d,A as h,D as c,k as u}from"./index-88dea7b1.js";import{d as f,K as m}from"./events-5886c68b.js";import{A as p}from"./associated.controller-4efb16f5.js";import{v as b,a as v,b as g,c as y}from"./access-and-short-key-753466cb.js";import{v as j}from"./tooltip-align-4c18152e.js";import{v as _}from"./hide-label-418cc5c0.js";import{a as L}from"./label-5982d241.js";import{_ as x}from"./tslib.es6-1173d062.js";import{h as k,F as O}from"./index-136f59ac.js";import{c as K}from"./clsx-09a06a12.js";import{K as B}from"./Alert-3c98a2ff.js";import{i as F,K as P}from"./InternalUnderlinedBadgeText-2e08c7cb.js";import{t as C}from"./i18n-01abf777.js";import{f as M}from"./component-names-799e91e2.js";const T=(t,o)=>{e(t,"_adjustHeight",o)},$=(t,o,s)=>{e(t,"_hideMsg",o,s)};function w(e){return Object.entries(e).reduce(((e,[t,o])=>{const s=t.startsWith("_")?t.slice(1):t;return Object.assign(Object.assign({},e),{[s]:o})}),{})}const H=(e,n)=>{t(n,(()=>{try{n=i(n)}catch(e){}s(e,"_msg",(e=>o(e)&&a(null==e?void 0:e._description,1)||void 0===(null==e?void 0:e._type)),new Set(["MsgPropType"]),n)}))};function N(e){if(e)return w(e)}function A(e,t){return!!e&&(!0===t||"error"!==(null==e?void 0:e.type))}const E=(t,o)=>{e(t,"_touched",o)},I=e=>{var{alert:t,msg:o,hideMsg:s,id:i,class:n}=e,a=x(e,["alert","msg","hideMsg","id","class"]);return k(B,Object.assign({id:`${i}-msg`,alert:t,type:"error",class:K("kol-form-field__msg",{"visually-hidden":!0===s},n)},o,a,{"aria-hidden":"true"}),(null==o?void 0:o.description)||void 0)},q=({hasExpertSlot:e,accessKey:t,shortKey:o,label:s,showBadge:i=!0})=>{if(e)return k("slot",{name:"expert"});if(!s)return null;const n=F(t)||F(o);if(!i||!n)return k("span",null,s);const a=r(t,o);return k(O,null,k(P,{badgeText:a,label:s})," ",k("span",{class:"badge-text-hint","aria-hidden":"true"},a))},S=e=>{var{component:t="label",id:o,baseClassName:s="kol-form-field",class:i,accessKey:n,shortKey:a,label:l,hideLabel:r,hasExpertSlot:d,showBadge:c}=e,h=x(e,["component","id","baseClassName","class","accessKey","shortKey","label","hideLabel","hasExpertSlot","showBadge"]);const m=!d&&r;return k(t,Object.assign({},h,{class:K(`${s}__label`,i),id:m?void 0:`${o}-label`,hidden:m,htmlFor:o}),k("span",{class:K(`${s}__label-text`)},k(q,{hasExpertSlot:d,accessKey:n,shortKey:a,label:l,showBadge:c})))},D=e=>{var{id:t,class:o,hint:s,baseClassName:i="kol-form-field"}=e,n=x(e,["id","class","hint","baseClassName"]);return s?k("span",Object.assign({class:K(`${i}__hint`,o),id:`${t}-hint`},n),s):null},W=e=>{var{currentLength:t,maxLength:o,class:s}=e,i=x(e,["currentLength","maxLength","class"]);return k("span",Object.assign({class:K("kol-form-field__counter",s)},i,{"aria-atomic":"true","aria-live":"polite","data-testid":"input-counter"}),t,o&&k(O,null,k("span",{"aria-label":C("kol-of"),role:"img"},"/"),o)," ",k("span",null,C("kol-characters")))},z=({id:e,align:t,badgeText:o,hideLabel:s,label:i,class:n})=>k(M,{"aria-hidden":"true",class:K("kol-form-field__tooltip",n),_badgeText:o,_align:t,_id:s?`${e}-label`:void 0,_label:i});function U(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 V=(e,t)=>{var{class:o}=e,s=x(e,["class"]);return k("div",Object.assign({class:K("kol-form-field__input",o)},s),t)},G=(e,t)=>{const{component:o="div",renderNoLabel:s,renderNoTooltip:i,renderNoHint:a,anotherChildren:l,id:d,required:c,alert:h,disabled:m,class:p,msg:u,hideMsg:b,hideLabel:g,label:f,hint:v,accessKey:_,shortKey:y,tooltipAlign:j,counter:L,readOnly:O,touched:C,formFieldLabelProps:B,formFieldHintProps:F,formFieldTooltipProps:M,formFieldMsgProps:P,formFieldCounterProps:E,formFieldInputProps:H}=e,T=x(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"]),N=!s,$=!a,q=!i,w=n(f),G=A(u,C),J=r(_,y),Q=q&&!w&&g;let R={"kol-form-field--disabled":Boolean(m),"kol-form-field--required":Boolean(c),"kol-form-field--touched":Boolean(C),"kol-form-field--hide-label":Boolean(g),"kol-form-field--read-only":Boolean(O),"kol-form-field--hidden-msg":Boolean(b)};return G&&(R=Object.assign(Object.assign({},R),{[`kol-form-field--${(null==u?void 0:u.type)||"error"}`]:!0,[`kol-form-field--${U(u)}`]:!0})),k(o,Object.assign({class:K("kol-form-field",R,p)},T),N&&k(S,Object.assign({},B||{},{id:d,hasExpertSlot:w,hideLabel:g,label:f,accessKey:_,shortKey:y})),k(V,Object.assign({},H),t,Q&&k(z,Object.assign({},M||{},{id:d,label:f,hideLabel:g,align:j,badgeText:J}))),L?k(W,Object.assign({},E||{},L)):null,G&&k(I,Object.assign({},P||{},{id:d,alert:h,msg:u,hideMsg:b})),$&&k(D,Object.assign({},F||{},{id:d,hint:v})),l)};function J({ariaDescribedBy:e,hideLabel:t,label:o}){return{title:"",autoCapitalize:"off",autoCorrect:"off","aria-describedby":(null==e?void 0:e.length)?e.join(" "):void 0,"aria-label":t&&o?o:void 0}}class Q extends p{constructor(e,t,o){super(e,t,o),this.component=e}validateTouched(e){E(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateTouched(this.component._touched)}}class R extends Q{constructor(e,t,o){super(e,t,o),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){b(this.component,e),v(e,this.component._shortKey)}validateAdjustHeight(e){T(this.component,e)}validateDisabled(t){e(this.component,"_disabled",t),!0===t&&l()}validateTooltipAlign(e){j(this.component,e)}validateHideMsg(e){$(this.component,e,{hooks:{afterPatch:()=>{this.component.state._hideMsg&&d("Property _hideMsg for inputs: Only use when the error message is shown outside of the input component.")}}})}validateHideLabel(e){_(this.component,e,{hooks:{afterPatch:()=>{this.component.state._hideLabel&&d("Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.")}}})}validateHint(e){h(this.component,"_hint",e)}validateId(e){h(this.component,"_id",e,{minLength:1}),""!==e&&void 0!==e||c("A unique ID on the input fields is not strictly required, but it might be relevant for E2E tests.")}validateLabel(e){L(this.component,e,{required:!0})}validateMsg(e){H(this.component,e)}validateOn(e){"object"==typeof e&&u(this.component,"_on",e)}validateShortKey(e){g(this.component,e),v(this.component._accessKey,e)}validateSmartButton(e){t(e,(()=>{try{e=i(e)}catch(e){}u(this.component,"_smartButton",e)}))}validateTabIndex(e){y(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),v(this.component._accessKey,this.component._shortKey)}emitEvent(e,t){this.host&&f(this.host,e,t)}onBlur(e){var t;this.component._touched=!0,this.emitEvent(m.blur),"function"==typeof(null===(t=this.component._on)||void 0===t?void 0:t.onBlur)&&this.component._on.onBlur(e)}onChange(e,t){var o;void 0===t&&(t=e.target.value),this.emitEvent(m.change,t),"function"==typeof(null===(o=this.component._on)||void 0===o?void 0:o.onChange)&&this.component._on.onChange(e,t),this.valueChangeListeners.forEach((e=>e(t)))}onInput(e,t=!0,o){var s;void 0===o&&(o=e.target.value),this.emitEvent(m.input,o),t&&this.setFormAssociatedValue(o),"function"==typeof(null===(s=this.component._on)||void 0===s?void 0:s.onInput)&&this.component._on.onInput(e,o)}onClick(e){var t;this.emitEvent(m.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(m.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 X(e){const t={id:e._id,disabled:e._disabled,msg:N(e._msg),hint:e._hint,label:e._label,hideLabel:e._hideLabel,hideMsg:e._hideMsg,touched:e._touched,accessKey:e._accessKey,shortKey:e._shortKey};return"_required"in e&&(t.required=e._required),"_readOnly"in e&&(t.readOnly=e._readOnly),"_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 Y=(e,t)=>{var{state:o}=e,s=x(e,["state"]);return k(G,Object.assign({},X(o),s),t)},Z=e=>{var t,o,s;const i=Boolean((null===(t=null==e?void 0:e._msg)||void 0===t?void 0:t._description)&&(null===(o=e._msg._description)||void 0===o?void 0:o.length)>0),n="error"===(null===(s=e._msg)||void 0===s?void 0:s._type)&&i&&!0===e._touched,a="string"==typeof e._hint&&e._hint.length>0,l=[];return i&&l.push(`${e._id}-msg`),a&&l.push(`${e._id}-hint`),{hasError:n,hasHint:a,ariaDescribedBy:l}};export{Y as F,R as I,S as K,N as a,z as b,A as c,D as d,J as e,Z as g};