UNPKG

@public-ui/components

Version:

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

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