UNPKG

@public-ui/components

Version:

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

4 lines 12.8 kB
/*! * KoliBri - The accessible HTML-Standard */ import{d as e,e as t,o as i,p as r,w as n,G as s,g as o,k as a,l,j as d,s as c,t as u}from"./common-7RW_NFNf.js";import{v as h,a as f,b as m,c as p}from"./access-and-short-key-CIkiLGbP.js";import{v as b}from"./disabled-DOGGfuG4.js";import{v as g}from"./hide-label-B1sxX0if.js";import{a as v}from"./label-DAfXJvJZ.js";import{v as y}from"./tooltip-align-B_X7PRrT.js";import{d as x,K as _}from"./events-CoPFQEiC.js";import{A as j}from"./associated.controller-DWb-3J2w.js";import{a as L,c as k,i as O,r as B}from"./isObject-DvSELytj.js";import{_ as K}from"./Heading-D6_TFw6T.js";import{h as S,F as T}from"./index-CElQfBOC.js";import{c as C}from"./clsx-eK3rPvPS.js";import{K as P}from"./Alert-BscBrOtx.js";import{i as F,K as M}from"./InternalUnderlinedBadgeText-DnxrXpNU.js";import{t as w}from"./i18n-yBVLeHdv.js";import{a as E}from"./component-names-CkE54Ym7.js";const $=(t,n)=>{e(t,"_adjustHeight",n)},D=(t,n,i)=>{e(t,"_hideMsg",n,i)},N=(e,n)=>{t(e,"_hint",n)};function H(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 I=(e,t)=>{i(t,(()=>{try{t=r(t)}catch(e){}n(e,"_msg",(e=>{if(void 0===e)return!0;if("string"==typeof e&&e.length>0)return!0;if(s(e)&&null!==e){return o(e._description,1)}return!1}),new Set(["MsgPropType","string"]),t)}))};function A(e){if(e)return"string"==typeof e?{description:e,type:"error"}:H(e)}function q(e,t){return!!e&&(!0===t||"error"!==(null==e?void 0:e.type))}const G=(t,n)=>{e(t,"_touched",n)},W=e=>{var{alert:t,msg:n,hideMsg:i,id:o,class:s}=e,r=K(e,["alert","msg","hideMsg","id","class"]);return S(P,Object.assign({id:`${o}-msg`,alert:t,type:"error",class:C("kol-form-field__msg",{"visually-hidden":!0===i},s)},n,r,{"aria-hidden":"true"}),(null==n?void 0:n.description)||void 0)};var X="[object Symbol]";function J(e){return"symbol"==typeof e||L(e)&&k(e)==X}var Q=/\s/;function R(e){for(var t=e.length;t--&&Q.test(e.charAt(t)););return t}var U=/^\s+/;function V(e){return e?e.slice(0,R(e)+1).replace(U,""):e}var z=NaN,Y=/^[-+]0x[0-9a-f]+$/i,Z=/^0b[01]+$/i,ee=/^0o[0-7]+$/i,te=parseInt;function ie(e){if("number"==typeof e)return e;if(J(e))return z;if(O(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=O(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=V(e);var n=Z.test(e);return n||ee.test(e)?te(e.slice(2),n?2:8):Y.test(e)?z:+e}var re=function(){return B.Date.now()},ne="Expected a function",se=Math.max,oe=Math.min;function ae(e,t,n){var i,o,s,r,a,l,c=0,d=!1,h=!1,u=!0;if("function"!=typeof e)throw new TypeError(ne);function m(t){var n=i,s=o;return i=o=void 0,c=t,r=e.apply(s,n)}function p(e){var n=e-l;return void 0===l||n>=t||n<0||h&&e-c>=s}function f(){var e=re();if(p(e))return g(e);a=setTimeout(f,function(e){var n=t-(e-l);return h?oe(n,s-(e-c)):n}(e))}function g(e){return a=void 0,u&&i?m(e):(i=o=void 0,r)}function b(){var e=re(),n=p(e);if(i=arguments,o=this,l=e,n){if(void 0===a)return function(e){return c=e,a=setTimeout(f,t),d?m(e):r}(l);if(h)return clearTimeout(a),a=setTimeout(f,t),m(l)}return void 0===a&&(a=setTimeout(f,t)),r}return t=ie(t)||0,O(n)&&(d=!!n.leading,s=(h="maxWait"in n)?se(ie(n.maxWait)||0,t):s,u="trailing"in n?!!n.trailing:u),b.cancel=function(){void 0!==a&&clearTimeout(a),c=0,i=l=o=a=void 0},b.flush=function(){return void 0===a?r:g(re())},b}const le=({hasExpertSlot:e,accessKey:t,shortKey:n,label:i,showBadge:o=!0})=>{if(e)return S("slot",{name:"expert"});if(!i)return null;const s=F(t)||F(n);if(!o||!s)return S("span",null,i);const r=a(t,n);return S(T,null,S(M,{badgeText:r,label:i})," ",S("kbd",{class:"badge-text-hint","aria-hidden":"true"},r))},de=e=>{var{component:t="label",id:n,baseClassName:i="kol-form-field",class:o,accessKey:s,shortKey:r,label:a,hideLabel:l,hasExpertSlot:c,showBadge:d}=e,h=K(e,["component","id","baseClassName","class","accessKey","shortKey","label","hideLabel","hasExpertSlot","showBadge"]);const u=!c&&l;return S(t,Object.assign({},h,{class:C(`${i}__label`,o),id:u?void 0:`${n}-label`,hidden:u,htmlFor:n}),S("span",{class:C(`${i}__label-text`)},S(le,{hasExpertSlot:c,accessKey:s,shortKey:r,label:a,showBadge:d})))},ce=e=>{var{id:t,class:n,hint:i,baseClassName:o="kol-form-field"}=e,s=K(e,["id","class","hint","baseClassName"]);return i?S("span",Object.assign({class:C(`${o}__hint`,n),id:`${t}-hint`},s),i):null},ue=({currentLength:e,currentLengthDebounced:t,maxLength:n,maxLengthBehavior:i})=>{let o,s;const r=["kol-form-field__counter"];if("hard"===i)o="number"==typeof n?w("kol-character-counter-current-of-max",{placeholders:{current:String(e),max:String(n)}}):w("kol-character-counter-current",{placeholders:{current:String(e)}}),s="number"==typeof n?w("kol-character-counter-current-of-max-aria",{placeholders:{current:String(t),max:String(n)}}):w("kol-character-counter-current",{placeholders:{current:String(t)}});else{if("number"!=typeof n)return null;{const i=n-e,a=i<0,l=n-t,c=l<0;o=a?w("kol-character-limit-exceeded",{placeholders:{over:String(Math.abs(i))}}):w("kol-character-limit-remaining",{placeholders:{remaining:String(i)}}),s=c?w("kol-character-limit-exceeded",{placeholders:{over:String(Math.abs(l))}}):w("kol-character-limit-remaining",{placeholders:{remaining:String(l)}}),a&&r.push("kol-form-field__counter--exceeded")}}return S(T,null,S("span",{class:C(r),"aria-hidden":"true","data-testid":"input-counter"},o),S("span",{"aria-live":"polite",class:"visually-hidden","data-testid":"input-counter-aria"},s))},he=({id:e,maxLength:t})=>S("span",{id:`${e}-character-limit-hint`,class:"visually-hidden"},w("kol-character-limit-hint",{placeholders:{limit:String(t)}})),fe=({id:e,align:t,badgeText:n,hideLabel:i,label:o,class:s})=>S(E,{"aria-hidden":"true",class:C("kol-form-field__tooltip",s),_badgeText:n,_align:t,_id:i?`${e}-label`:void 0,_label:o});function me(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 pe=(e,t)=>{var{class:n}=e,i=K(e,["class"]);return S("div",Object.assign({class:C("kol-form-field__input",n)},i),t)},be=(e,t)=>{const{component:n="div",renderNoLabel:i,renderNoTooltip:o,renderNoHint:s,anotherChildren:r,id:c,required:d,alert:h,disabled:u,class:m,msg:p,hideMsg:f,hideLabel:g,label:b,hint:v,accessKey:_,shortKey:y,tooltipAlign:L,counter:x,readOnly:j,touched:k,maxLength:O,formFieldLabelProps:B,formFieldHintProps:T,formFieldTooltipProps:F,formFieldMsgProps:w,formFieldInputProps:M}=e,E=K(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"]),P=!i,D=!s,H=!o,I=l(b),A=q(p,k),N=a(_,y),$=H&&!I&&g;let G={"kol-form-field--disabled":Boolean(u),"kol-form-field--required":Boolean(d),"kol-form-field--touched":Boolean(k),"kol-form-field--hide-label":Boolean(g),"kol-form-field--read-only":Boolean(j),"kol-form-field--hidden-msg":Boolean(f)};return A&&(G=Object.assign(Object.assign({},G),{[`kol-form-field--${(null==p?void 0:p.type)||"error"}`]:!0,[`kol-form-field--${me(p)}`]:!0})),S(n,Object.assign({class:C("kol-form-field",G,m)},E),P&&S(de,Object.assign({},B||{},{id:c,hasExpertSlot:I,hideLabel:g,label:b,accessKey:_,shortKey:y})),S(pe,Object.assign({},M),t,$&&S(fe,Object.assign({},F||{},{id:c,label:b,hideLabel:g,align:L,badgeText:N}))),x?S(ue,Object.assign({},x)):null,O?S(he,{id:c,maxLength:O}):null,A&&S(W,Object.assign({},w||{},{id:c,alert:h,msg:p,hideMsg:f})),D&&S(ce,Object.assign({},T||{},{id:c,hint:v})),r)};function ge({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 ve extends j{constructor(e,t,n){super(e,t,n),this.component=e}validateTouched(e){G(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateTouched(this.component._touched)}}class ye extends ve{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=ae((e=>{c(this.component,"_currentLengthDebounced",e)}),500),this.component=e}validateAccessKey(e){h(this.component,e),f(e,this.component._shortKey)}validateAdjustHeight(e){$(this.component,e)}validateDisabled(e){b(this.component,e)}validateTooltipAlign(e){y(this.component,e)}validateHideMsg(e){D(this.component,e,{hooks:{afterPatch:()=>{this.component.state._hideMsg&&u("Property _hideMsg for inputs: Only use when the error message is shown outside of the input component.")}}})}validateHideLabel(e){g(this.component,e,{hooks:{afterPatch:()=>{this.component.state._hideLabel&&u("Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.")}}})}validateHint(e){N(this.component,e)}validateId(e){t(this.component,"_id",e,{minLength:1}),""!==e&&void 0!==e||d("A unique ID on the input fields is not strictly required, but it might be relevant for E2E tests.")}validateLabel(e){v(this.component,e,{required:!0})}validateMsg(e){I(this.component,e)}validateOn(e){"object"==typeof e&&c(this.component,"_on",e)}validateShortKey(e){m(this.component,e),f(this.component._accessKey,e)}validateSmartButton(e){i(e,(()=>{try{e=r(e)}catch(e){}c(this.component,"_smartButton",e)}))}validateTabIndex(e){p(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),f(this.component._accessKey,this.component._shortKey)}emitEvent(e,t){this.host&&x(this.host,e,t)}onBlur(e){var t;this.component._touched=!0,this.emitEvent(_.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(_.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(_.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(_.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(_.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}}const xe=e=>{const t=A(e._msg),n=Boolean((null==t?void 0:t.description)&&t.description.length>0),i="error"===(null==t?void 0:t.type)&&n&&!0===e._touched,o="string"==typeof e._hint&&e._hint.length>0,s=[];return n&&s.push(`${e._id}-msg`),o&&s.push(`${e._id}-hint`),{hasError:i,hasHint:o,ariaDescribedBy:s}};function _e(e){const t={id:e._id,disabled:e._disabled,msg:A(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 je=(e,t)=>{var{state:n}=e,i=K(e,["state"]);return S(be,Object.assign({},_e(n),i),t)};export{je as F,ye as I,de as K,A as a,fe as b,q as c,ce as d,ge as e,xe as g};