@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
4 lines • 4.09 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import{h}from"@stencil/core/internal/client";import{_ as __rest}from"./tslib.es6.js";import{d as KolButtonWcTag}from"./component-names.js";import{K as KolIconFc}from"./Icon.js";import{c as clsx}from"./clsx.js";import{w as watchValidator}from"./common.js";import{a as getMsgType,i as isMsgDefinedAndInputTouched,I as InputController}from"./controller2.js";import{i as isString}from"./InternalUnderlinedBadgeText.js";import{i as isObject}from"./isObject.js";import{v as validateIcons}from"./icons.js";const InputAdornment=(n,t)=>{var{position:o="start",class:s}=n,e=__rest(n,["position","class"]);const i="kol-input-container__adornment",r=`${i}--${o}`;return h("div",Object.assign({class:clsx(i,r,s)},e),t)};function hasItems(n){return!!n&&(Array.isArray(n)?n.length>0:Boolean(n))}const Container=(n,t)=>{var{class:o}=n,s=__rest(n,["class"]);return h("div",Object.assign({class:clsx("kol-input-container__container",o)},s),t)},KolInputContainerFc=(n,t)=>{const{class:o,startAdornment:s,endAdornment:e,disabled:i,msg:r,touched:a,containerProps:c,startAdornmentProps:l,endAdornmentProps:u}=n,d=__rest(n,["class","startAdornment","endAdornment","disabled","msg","touched","containerProps","startAdornmentProps","endAdornmentProps"]),m={"kol-input-container--disabled":i,[`kol-input-container--${getMsgType(r)}`]:isMsgDefinedAndInputTouched(r,a)},p=Object.assign({class:clsx("kol-input-container",m,o)},d);return hasItems(s)||hasItems(e)?h("div",Object.assign({},p),h(InputAdornment,Object.assign({},l,{position:"start"}),s),h(Container,Object.assign({},c),t),h(InputAdornment,Object.assign({},u,{position:"end"}),e)):h("div",Object.assign({},p),h(Container,Object.assign({},c),t))},KolButtonFc=n=>{const{label:t,icons:o,hideLabel:s,disabled:e,onClick:i}=n,r=__rest(n,["label","icons","hideLabel","disabled","onClick"]);return h(KolButtonWcTag,Object.assign({_label:t,_disabled:e,_icons:o,_hideLabel:s,_on:{onClick:i}},r))},KolIconButtonFc=n=>{const{componentName:t="button",label:o,icon:s,onClick:e}=n,i=__rest(n,["componentName","label","icon","onClick"]);return h("button"===t?KolButtonFc:KolIconFc,Object.assign({label:o||"",hideLabel:!0,icons:`${s}`,onClick:e},i))};function getInputContainerProps(n){let t,o;return"_icons"in n&&(t=n._icons),"_smartButton"in n&&(o=n._smartButton),{icons:t,smartButton:o,disabled:n._disabled,msg:n._msg,touched:n._touched}}const InputContainerStateWrapperFc=({state:n,startAdornment:t,endAdornment:o},s)=>{const{icons:e,smartButton:i,disabled:r,msg:a,touched:c}=getInputContainerProps(n);let l=null==e?void 0:e.left;isString(l)&&(l={icon:l});let u=null==e?void 0:e.right;isString(u)&&(u={icon:u});const d=[],m=[];return t&&(Array.isArray(t)?d.push(...t):d.push(t)),l&&d.push(h(KolIconButtonFc,Object.assign({componentName:"icon",class:"kol-input-container__icon"},isObject(l)?l:{}))),isObject(i)&&m.push(h(KolIconButtonFc,Object.assign({componentName:"button",class:"kol-input-container__smart-button"},i,{hideLabel:!0,disabled:r}))),u&&m.push(h(KolIconButtonFc,Object.assign({componentName:"icon",class:"kol-input-container__icon"},isObject(u)?u:{}))),o&&(Array.isArray(o)?m.push(...o):m.push(o)),h(KolInputContainerFc,{disabled:r,msg:a,touched:c,startAdornment:d,endAdornment:m},s)};class InputIconController extends InputController{constructor(n,t,o){super(n,t,o),this.numberStringRegex=/^\d+(\.\d+)?$/,this.parseToNumber=n=>"number"==typeof n?isNaN(n)?null:n:this.isNumberString(n)?parseFloat(n):null,this.validateNumber=(n,t)=>watchValidator(this.component,n,n=>null==n||"number"==typeof n||"string"==typeof n&&this.numberStringRegex.test(n),new Set(["number","NumberString"]),t,{hooks:{beforePatch:(t,o)=>{(null==o?void 0:o.has(n))&&(null==o||o.set(n,this.parseToNumber(t)))}}}),this.component=n}validateIcons(n){validateIcons(this.component,n)}isNumberString(n){return"string"==typeof n&&this.numberStringRegex.test(n)}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}export{InputIconController as I,KolIconButtonFc as K,InputContainerStateWrapperFc as a};