@public-ui/components/dist/components/kol-input.js

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

/*!
 * KoliBri - The accessible HTML-Standard
 */
import{proxyCustomElement,HTMLElement,h,Host,Fragment}from"@stencil/core/internal/client";import{c as clsx}from"./clsx.js";import{t as translate}from"./i18n2.js";import{e as KolIconTag,c as KolButtonWcTag,a as KolTooltipWcTag}from"./component-names.js";import{h as handleSlotContent,s as showExpertSlot}from"./reuse.js";import{K as KolFormFieldMsgFc}from"./FormFieldMsg.js";const KolInputWc=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.slotName="input",this.catchInputSlot=t=>{handleSlotContent(this.host,t,this.slotName)},this._accessKey=void 0,this._alert=!0,this._currentLength=void 0,this._disabled=!1,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=void 0,this._readOnly=!1,this._renderNoLabel=!1,this._required=!1,this._shortKey=void 0,this._slotName=void 0,this._suggestions=void 0,this._smartButton=void 0,this._tooltipAlign="top",this._touched=!1}componentWillRender(){this.slotName=this._slotName?this._slotName:"input"}getIconStyles(t){return t&&"object"==typeof t&&t.style?t.style:{}}render(){var t,e,s,i,o,l,n,a,r,d,_,c;const u="object"==typeof this._msg&&null!==this._msg&&"string"==typeof(null===(t=this._msg)||void 0===t?void 0:t._description)&&(null===(e=this._msg)||void 0===e?void 0:e._description.length)>0&&(!0===this._touched||"error"!==(null===(s=this._msg)||void 0===s?void 0:s._type)),m=showExpertSlot(this._label),f="string"==typeof this._hint&&this._hint.length>0,g=!m&&this._hideLabel;return h(Host,{key:"65e25236006d47c556c287f57522693a775819ef",class:clsx("kol-input",this.getModifierClassNameByMsgType(u),{disabled:!0===this._disabled,[(null===(i=this._msg)||void 0===i?void 0:i._type)||"error"]:!0===u,"read-only":!0===this._readOnly,required:!0===this._required,touched:!0===this._touched,"hidden-error":!0===this._hideError})},h("label",{key:"38b715784bbae9e94589d8a7ed1743de9c92969b",class:"input-label",id:g?void 0:`${this._id}-label`,hidden:g,htmlFor:this._id},h("span",{key:"5934f50ab92196658618fcb334af74447b47bcdb",class:"input-label-span"},h("slot",{key:"8a39a951858a36ccf7774ce7813e62deea8a2e85",name:"label"}))),f&&h("span",{key:"8db0923f2189c5c6e7ea3faf0f6120734e77f1ed",class:"hint",id:`${this._id}-hint`},this._hint),h("div",{key:"49a2bfbfcc153b68ca8b323605b9f9cb80f22900",class:{input:!0,"icon-left":"object"==typeof(null===(o=this._icons)||void 0===o?void 0:o.left),"icon-right":"object"==typeof(null===(l=this._icons)||void 0===l?void 0:l.right)}},(null===(n=this._icons)||void 0===n?void 0:n.left)&&h(KolIconTag,{key:"e7f0db71fab21ae736a66dc02f0c78357e18bf91",_label:"",_icons:(null===(a=this._icons)||void 0===a?void 0:a.left).icon,style:this.getIconStyles(null===(r=this._icons)||void 0===r?void 0:r.left)}),h("div",{key:"9669a185c1451fc77642c5e062a4c153e70abaca",ref:this.catchInputSlot,id:this.slotName,class:"input-slot"}),"object"==typeof this._smartButton&&null!==this._smartButton&&h(KolButtonWcTag,{key:"a3d9e730f5e6b026990e697d02d8cf945af5c11c",_customClass:this._smartButton._customClass,_disabled:this._smartButton._disabled,_icons:this._smartButton._icons,_hideLabel:!0,_id:this._smartButton._id,_label:this._smartButton._label,_on:this._smartButton._on,_tooltipAlign:this._smartButton._tooltipAlign,_variant:this._smartButton._variant}),(null===(d=this._icons)||void 0===d?void 0:d.right)&&h(KolIconTag,{key:"f6e6042d20148fb236129588c14cbca5b19dd873",_label:"",_icons:(null===(_=this._icons)||void 0===_?void 0:_.right).icon,style:this.getIconStyles(null===(c=this._icons)||void 0===c?void 0:c.right)})),g&&h(KolTooltipWcTag,{key:"e08bdf1c1ea0f363e3f3824809ee30d75a7868cc","aria-hidden":"true",class:"input-tooltip",_badgeText:this._accessKey||this._shortKey,_align:this._tooltipAlign,_id:this._hideLabel?`${this._id}-label`:void 0,_label:this._label}),u&&h(KolFormFieldMsgFc,{key:"4d82ed833659163c1315cd84d644f4022d2fb0ad",_alert:this._alert,_hideError:this._hideError,_msg:this._msg,_id:this._id}),Array.isArray(this._suggestions)&&this._suggestions.length>0&&h("datalist",{key:"bf391ca45c04582bc9e1d1083a3b0777c5ef433c",id:`${this._id}-list`},this._suggestions.map((t=>h("option",{value:t})))),this._hasCounter&&h("span",{key:"f6a3f6d6a14dddc4963c9a9f862899a0d7c3a9ab",class:"counter","aria-atomic":"true","aria-live":"polite","data-testid":"input-counter"},this._currentLength,this._maxLength&&h(Fragment,null,h("span",{key:"6d407c7b633fcb3f2c0fcb6901b37f8659abb808","aria-label":translate("kol-of"),role:"img"},"/"),this._maxLength)," ",h("span",{key:"c1fa9f7a068669b0802b3ad69fb1f4c7927869f1"},translate("kol-characters"))))}getModifierClassNameByMsgType(t){var e,s;if(t&&(null===(e=this._msg)||void 0===e?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"}[null===(s=this._msg)||void 0===s?void 0:s._type]}get host(){return this}},[4,"kol-input",{_accessKey:[1,"_access-key"],_alert:[4],_currentLength:[2,"_current-length"],_disabled:[4],_hasCounter:[4,"_has-counter"],_hideError:[4,"_hide-error"],_hideLabel:[4,"_hide-label"],_hint:[1],_icons:[16],_id:[1],_label:[1],_maxLength:[2,"_max-length"],_msg:[16],_readOnly:[4,"_read-only"],_renderNoLabel:[4,"_render-no-label"],_required:[4],_shortKey:[1,"_short-key"],_slotName:[1,"_slot-name"],_suggestions:[1],_smartButton:[1,"_smart-button"],_tooltipAlign:[1,"_tooltip-align"],_touched:[4]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-input"].forEach((t=>{if("kol-input"===t)customElements.get(t)||customElements.define(t,KolInputWc)}))}const KolInput=KolInputWc,defineCustomElement=defineCustomElement$1;export{KolInput,defineCustomElement};