UNPKG

@public-ui/components

Version:

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

5 lines 14.9 kB
/*! * KoliBri - The accessible HTML-Standard */ import{e,g as t,p as i,o as r,b as n,G as o,i as s,s as a,k as l}from"./common-Cx_AGO_M.js";import{v as d,a as c,b as u,c as h}from"./access-and-short-key-D734WtlX.js";import{v as f}from"./disabled-gyBUQRnY.js";import{v as m}from"./hide-label-6Bx1MH20.js";import{a as p}from"./label-Fyi30H9j.js";import{v}from"./tooltip-align-mwhvx9nK.js";import{v as b}from"./variant-class-name-BCcQYpIV.js";import{d as g,K as y}from"./events-VVvk1win.js";import{A as _}from"./associated.controller-Bagx9pCw.js";import{i as j}from"./_Uint8Array-kJHDjtoP.js";import{i as x,b as B,r as k}from"./isArray-CcrBs4JM.js";import{a as L}from"./tslib.es6-QNbPBOk5.js";import{h as O,F as C}from"./index-BQlHOxik.js";import{B as K}from"./variant-quote-y0Z1TRdz.js";import{T as F}from"./component-Dh0cPCxF.js";import{T as w}from"./controller-Bdve6A-Q.js";import{S,b as T,s as P}from"./component-DvjvBJeK.js";import{c as M}from"./clsx-COFh-Vc8.js";import{a as D}from"./dev.utils-02Sl9bQo.js";import{t as H}from"./i18n-Br16IAnY.js";import{K as A}from"./Alert-BP_7bRZF.js";var N="[object Symbol]";function $(e){return typeof e=="symbol"||x(e)&&B(e)==N}var I=/\s/;function E(e){var t=e.length;while(t--&&I.test(e.charAt(t))){}return t}var q=/^\s+/;function Q(e){return e?e.slice(0,E(e)+1).replace(q,""):e}var V=0/0;var R=/^[-+]0x[0-9a-f]+$/i;var W=/^0b[01]+$/i;var J=/^0o[0-7]+$/i;var Y=parseInt;function z(e){if(typeof e=="number"){return e}if($(e)){return V}if(j(e)){var t=typeof e.valueOf=="function"?e.valueOf():e;e=j(t)?t+"":t}if(typeof e!="string"){return e===0?e:+e}e=Q(e);var i=W.test(e);return i||J.test(e)?Y(e.slice(2),i?2:8):R.test(e)?V:+e}var G=function(){return k.Date.now()};var U="Expected a function";var Z=Math.max,X=Math.min;function ee(e,t,i){var r,n,o,s,a,l,d=0,c=false,u=false,h=true;if(typeof e!="function"){throw new TypeError(U)}t=z(t)||0;if(j(i)){c=!!i.leading;u="maxWait"in i;o=u?Z(z(i.maxWait)||0,t):o;h="trailing"in i?!!i.trailing:h}function f(t){var i=r,o=n;r=n=undefined;d=t;s=e.apply(o,i);return s}function m(e){d=e;a=setTimeout(b,t);return c?f(e):s}function p(e){var i=e-l,r=e-d,n=t-i;return u?X(n,o-r):n}function v(e){var i=e-l,r=e-d;return l===undefined||i>=t||i<0||u&&r>=o}function b(){var e=G();if(v(e)){return g(e)}a=setTimeout(b,p(e))}function g(e){a=undefined;if(h&&r){return f(e)}r=n=undefined;return s}function y(){if(a!==undefined){clearTimeout(a)}d=0;r=l=n=a=undefined}function _(){return a===undefined?s:g(G())}function x(){var e=G(),i=v(e);r=arguments;n=this;l=e;if(i){if(a===undefined){return m(l)}if(u){clearTimeout(a);a=setTimeout(b,t);return f(l)}}if(a===undefined){a=setTimeout(b,t)}return s}x.cancel=y;x.flush=_;return x}const te=(t,i)=>{e(t,"_adjustHeight",i)};const ie=(t,i,r)=>{e(t,"_hideMsg",i,r)};const re=(e,i)=>{t(e,"_hint",i)};const ne=(e,t)=>{r(t,(()=>{try{t=i(t)}catch(e){}n(e,`_msg`,(e=>{if(e===undefined){return true}if(typeof e==="string"&&e.length>0){return true}if(o(e)&&e!==null){const t=e._description;return s(t,1)}return false}),new Set(["MsgPropType","string"]),t)}))};function oe(e,t){return Boolean(e)&&t===true}function se(e){if(typeof e==="string"){try{return i(e)}catch(t){return{_description:e,_type:"error"}}}if(e&&typeof e==="object"&&!("_type"in e)){return Object.assign(Object.assign({},e),{_type:"error"})}return e}function ae(e){var t;if(typeof e==="string"){return"error"}return(t=e===null||e===void 0?void 0:e._type)!==null&&t!==void 0?t:"error"}const le=(t,i)=>{e(t,"_touched",i)};class de extends _{constructor(e,t,i){super(e,t,i);this.component=e}validateTouched(e){le(this.component,e)}componentWillLoad(){super.componentWillLoad();this.validateTouched(this.component._touched)}}class ce extends de{constructor(e,t,i){super(e,t,i);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=ee((e=>{a(this.component,"_currentLengthDebounced",e)}),500);this.component=e}validateAccessKey(e){d(this.component,e);c(e,this.component._shortKey)}validateAdjustHeight(e){te(this.component,e)}validateDisabled(e){f(this.component,e)}validateTooltipAlign(e){v(this.component,e)}validateHideMsg(e){ie(this.component,e,{hooks:{afterPatch:()=>{if(this.component.state._hideMsg){l("Property _hideMsg for inputs: Only use when the error message is shown outside of the input component.")}}}})}validateHideLabel(e){m(this.component,e,{hooks:{afterPatch:()=>{if(this.component.state._hideLabel){l("Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.")}}}})}validateHint(e){re(this.component,e)}validateLabel(e){p(this.component,e,{required:true})}validateMsg(e){ne(this.component,e)}validateOn(e){if(typeof e==="object"){a(this.component,"_on",e)}}validateShortKey(e){u(this.component,e);c(this.component._accessKey,e)}validateSmartButton(e){r(e,(()=>{try{e=i(e)}catch(e){}a(this.component,"_smartButton",e)}))}validateTabIndex(e){h(this.component,e)}validateVariant(e){b(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.validateLabel(this.component._label);this.validateShortKey(this.component._shortKey);this.validateSmartButton(this.component._smartButton);this.validateOn(this.component._on);this.validateTabIndex(this.component._tabIndex);this.validateVariant(this.component._variant);c(this.component._accessKey,this.component._shortKey)}emitEvent(e,t){if(this.host){g(this.host,e,t)}}onBlur(e){var t;if(this.component._disabled){return}this.component._touched=true;this.emitEvent(y.blur);if(typeof((t=this.component._on)===null||t===void 0?void 0:t.onBlur)==="function"){this.component._on.onBlur(e)}}onChange(e,t){var i;if(typeof t==="undefined"){t=e.target.value}this.emitEvent(y.change,t);if(typeof((i=this.component._on)===null||i===void 0?void 0:i.onChange)==="function"){this.component._on.onChange(e,t)}this.valueChangeListeners.forEach((e=>e(t)))}onInput(e,t=true,i){var r;if(typeof i==="undefined"){i=e.target.value}this.emitEvent(y.input,i);if(t){this.setFormAssociatedValue(i)}if(typeof((r=this.component._on)===null||r===void 0?void 0:r.onInput)==="function"){this.component._on.onInput(e,i)}}onClick(e){var t;this.emitEvent(y.click);if(typeof((t=this.component._on)===null||t===void 0?void 0:t.onClick)==="function"){this.component._on.onClick(e)}}onFocus(e){var t;this.emitEvent(y.focus);if(typeof((t=this.component._on)===null||t===void 0?void 0:t.onFocus)==="function"){this.component._on.onFocus(e)}}onKeyDown(e){var t;this.emitEvent(y.keydown);if(typeof((t=this.component._on)===null||t===void 0?void 0:t.onKeyDown)==="function"){this.component._on.onKeyDown(e)}}addValueChangeListener(e){this.valueChangeListeners.push(e)}hasSoftCharacterLimit(){return typeof this.component.state._maxLength==="number"&&this.component.state._maxLengthBehavior==="soft"}hasCounter(){return this.component.state._hasCounter===true}}function ue({ariaDescribedBy:e,hideLabel:t,label:i}){return{title:"",autoCapitalize:"off",autoCorrect:"off","aria-describedby":(e===null||e===void 0?void 0:e.length)?e.join(" "):undefined,"aria-label":t&&i?i:undefined}}const he=e=>{const t=e._msg;const i=typeof t==="string"?t:t===null||t===void 0?void 0:t._description;const r=ae(t);const n=Boolean(i&&i.length>0);const o=r==="error"&&n;const s=o&&e._touched===true;const a=typeof e._hint==="string"&&e._hint.length>0;const l=[];if(n&&!e._hideMsg){l.push(D(e._id,"msg"))}if(a===true){l.push(D(e._id,"hint"))}if(e._hasCounter){l.push(D(e._id,"counter"))}if(s===true){l.push(D(e._id,"error"))}return{hasError:s,hasHint:a,ariaDescribedBy:l}};const fe=e=>{var{id:t,class:i,hint:r,baseClassName:n="kol-form-field"}=e,o=L(e,["id","class","hint","baseClassName"]);if(!r){return null}return O("span",Object.assign({class:M(`${n}__hint`,i),id:D(t||"","hint")},o),r)};const me=e=>{var{component:t="label",id:i,baseClassName:r="kol-form-field",class:n,accessKey:o,shortKey:s,label:a,hideLabel:l,hasExpertSlot:d,showBadge:c=true,readOnly:u}=e,h=L(e,["component","id","baseClassName","class","accessKey","shortKey","label","hideLabel","hasExpertSlot","showBadge","readOnly"]);const f=!d&&l;const m=H("kol-readonly");const p=c===false?undefined:T(o,s);return O(t,Object.assign({},h,{class:M(`${r}__label`,n),id:!f?D(i,"label"):undefined,hidden:f,htmlFor:i}),O(S,{class:`${r}__label-text`,label:d?"":a!==null&&a!==void 0?a:"",badgeText:p},O("slot",{name:"expert"})),!d&&u?O("span",{class:`${r}__label__read-only`,"aria-hidden":"true"},"(",m,")"):null)};const pe=({id:e,maxLength:t})=>O("span",{id:D(e,"character-limit-hint"),class:"visually-hidden"},H("kol-character-limit-hint",{placeholders:{limit:String(t)}}));const ve=({currentLength:e,currentLengthDebounced:t,maxLength:i,maxLengthBehavior:r,id:n})=>{let o;let s;const a=["kol-form-field__counter"];if(r==="hard"){o=typeof i==="number"?H("kol-character-counter-current-of-max",{placeholders:{current:String(e),max:String(i)}}):H("kol-character-counter-current",{placeholders:{current:String(e)}});s=typeof i==="number"?H("kol-character-counter-current-of-max-aria",{placeholders:{current:String(t),max:String(i)}}):H("kol-character-counter-current",{placeholders:{current:String(t)}})}else if(typeof i==="number"){const r=i-e;const n=r<0;const l=i-t;const d=l<0;o=n?H("kol-character-limit-exceeded",{placeholders:{over:String(Math.abs(r))}}):H("kol-character-limit-remaining",{placeholders:{remaining:String(r)}});s=d?H("kol-character-limit-exceeded",{placeholders:{over:String(Math.abs(l))}}):H("kol-character-limit-remaining",{placeholders:{remaining:String(l)}});if(n){a.push("kol-form-field__counter--exceeded")}}else{return null}return O(C,null,O("span",{class:M(a),"aria-hidden":"true","data-testid":"input-counter"},o),O("span",{id:D(n||"","counter"),"aria-live":"polite",class:"visually-hidden","data-testid":"input-counter-aria"},s))};const be=e=>{var t,i;var{alert:r,msg:n,id:o,class:s}=e,a=L(e,["alert","msg","id","class"]);const l=se(n);return O(A,Object.assign({id:D(o,"msg"),alert:(t=l===null||l===void 0?void 0:l._alert)!==null&&t!==void 0?t:r,hasCloser:false,level:0,type:(i=l===null||l===void 0?void 0:l._type)!==null&&i!==void 0?i:"error",variant:"msg",class:M("kol-form-field__msg",s)},a),(l===null||l===void 0?void 0:l._description)||undefined)};const ge=new Map;const ye=e=>{const t=ge.get(e);if(t){return t}const i=new w(K.stateLess);i.componentWillLoad({label:""});ge.set(e,i);return i};const _e=e=>{const t=ge.get(e);if(t){t.destroy();ge.delete(e)}};function je(e){if(e===null||e===void 0?void 0:e.type){return{default:"msg-type-default",info:"msg-type-info",success:"msg-type-success",warning:"msg-type-warning",error:"msg-type-error"}[e===null||e===void 0?void 0:e.type]||""}return""}const xe=(e,t)=>{var{class:i}=e,r=L(e,["class"]);return O("div",Object.assign({class:M("kol-form-field__input",i)},r),t)};const Be=(e,t)=>{const{component:i="div",renderNoLabel:r,renderNoTooltip:n,renderNoHint:o,anotherChildren:s,id:a,required:l,alert:d,disabled:c,class:u,msg:h,hideMsg:f,hideLabel:m,label:p,hint:v,accessKey:b,shortKey:g,counter:y,readOnly:_,touched:j,maxLength:x,ariaDescribedBy:B,showBadge:k,tooltipAlign:C,tooltipFloatingRef:K,variant:w,formFieldLabelProps:S,formFieldHintProps:H,formFieldTooltipProps:A,formFieldMsgProps:N,formFieldInputProps:$}=e,I=L(e,["component","renderNoLabel","renderNoTooltip","renderNoHint","anotherChildren","id","required","alert","disabled","class","msg","hideMsg","hideLabel","label","hint","accessKey","shortKey","counter","readOnly","touched","maxLength","ariaDescribedBy","showBadge","tooltipAlign","tooltipFloatingRef","variant","formFieldLabelProps","formFieldHintProps","formFieldTooltipProps","formFieldMsgProps","formFieldInputProps"]);const E=!r;const q=!o;const Q=!n;const V=P(p);const R=oe(h,j);const W=T(b,g);const J=Q&&!V&&m;const Y=D(a,"label");const z=J?ye(a):undefined;if(z){z.watchAlign(C);z.watchBadgeText(W||"");z.watchId(Y);z.watchLabel(p)}else{_e(a)}const G=$===null||$===void 0?void 0:$.ref;const U=e=>{G===null||G===void 0?void 0:G(e);if(z&&e){z.initContext(e);z.syncListeners(undefined,e,true)}};let Z={["kol-form-field--disabled"]:Boolean(c),["kol-form-field--required"]:Boolean(l),["kol-form-field--touched"]:Boolean(j),["kol-form-field--hide-label"]:Boolean(m),["kol-form-field--read-only"]:Boolean(_),["kol-form-field--hidden-msg"]:Boolean(f)};if(w){Z=Object.assign(Object.assign({},Z),{[`kol-form-field--${w}`]:true})}if(R){const e=ae(h);Z=Object.assign(Object.assign({},Z),{[`kol-form-field--${e}`]:true,[`kol-form-field--${je({type:e})}`]:true})}return O(i,Object.assign({class:M("kol-form-field",Z,u),"aria-describedby":B},I),E&&O(me,Object.assign({},S||{},{id:a,hasExpertSlot:V,hideLabel:m,label:p,accessKey:b,shortKey:g,readOnly:_,showBadge:k})),O(xe,Object.assign({},$,{ref:U}),t,J&&m===true&&O("div",{class:M("kol-form-field__tooltip",A===null||A===void 0?void 0:A.class)},O(F,{badgeText:W||"",label:p,align:C,id:Y,refFloating:K!==null&&K!==void 0?K:e=>{z===null||z===void 0?void 0:z.setTooltipElementRef(e)}}))),y?O(ve,Object.assign({id:a},y)):null,x?O(pe,{id:a,maxLength:x}):null,R&&!f&&O(be,Object.assign({},N||{},{id:a,alert:d,msg:h})),q&&O(fe,Object.assign({},H||{},{id:a,hint:v})),s)};function ke(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,showBadge:"_accessKey"in e&&Boolean(e._accessKey)||"_shortKey"in e&&Boolean(e._shortKey)};if("_required"in e){t.required=e._required}if("_readOnly"in e){t.readOnly=e._readOnly}if("_accessKey"in e){t.accessKey=e._accessKey}if("_shortKey"in e){t.shortKey=e._shortKey}if("_maxLength"in e){t.maxLength=e._maxLength}if("_currentLength"in e&&typeof e._currentLength==="number"&&"_currentLengthDebounced"in e&&typeof e._currentLengthDebounced==="number"){if("_hasCounter"in e&&e._hasCounter===true){t.counter={currentLength:e._currentLength,currentLengthDebounced:e._currentLengthDebounced,maxLength:e._maxLength,maxLengthBehavior:e._maxLengthBehavior||"hard"}}}if("_variant"in e){t.variant=e._variant}return t}const Le=(e,t)=>{var{state:i}=e,r=L(e,["state"]);const{ariaDescribedBy:n}=he(i);const o=r.component==="fieldset"||"_options"in i&&"_orientation"in i;const s=o&&n.length>0?n.join(" "):undefined;const a=ke(i);return O(Be,Object.assign({},a,r,{ariaDescribedBy:s}),t)};export{Le as F,ce as I,me as K,he as a,fe as b,ue as c,ae as g,oe as i}; //# sourceMappingURL=FormFieldStateWrapper-BWTMRKXT.js.map