@kelvininc/ui-components/dist/peacock-ui/p-3c04db96.entry.js

Kelvin UI Components

import{r as t,h as e,H as i,c as a,g as o}from"./p-WTwLUJcM.js";import{l as r,o as n,w as s,d as l,v as c,c as d}from"./p-COrzvkrr.js";import{i as p}from"./p-GpUjqmUL.js";import{i as h,g as u}from"./p-BJ9G-v5a.js";import{I as g}from"./p-Hfc8Oh0x.js";import{i as v}from"./p-DjSNdVAB.js";import{m as f}from"./p-DlXzUI51.js";import"./p-Dkd2PDJ-.js";import"./p-B85MJLTf.js";import"./p-BL_6ssnk.js";import"./p-CK4jS9_E.js";const b=class{constructor(e){t(this,e),this.type=r.Primary,this.disabled=!1}render(){return e(i,{key:"328a5d250cedc4b7e3203350524c619178929f73"},e("span",{key:"b8bebd22e6e57faf92db60bba1af4a0e20f4fe9d",class:{badge:!0,[`badge--type-${this.type}`]:!0,disabled:this.disabled},part:"badge"},e("slot",{key:"b294395e58d978304c6a6964589fceccdd9bfa39"})))}};b.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host{--badge-min-width:unset;--badge-max-width:fit-content;--badge-height:var(--size-md);--badge-width:unset;--badge-background-color-primary:var(--background-container-accent-purple-default);--badge-text-color-primary:var(--text-container-accent-purple-default);--badge-background-color-secondary:var(--background-interactive-counter-default);--badge-text-color-secondary:var(--text-interactive-counter-default)}.badge{font-family:Proxima Nova;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0;display:flex;align-items:center;justify-content:center;min-width:var(--badge-min-width);max-width:var(--badge-max-width);height:var(--badge-height);width:var(--badge-width);padding:0 var(--spacing-xs);line-height:unset;border-radius:var(--radius-full)}.badge--type-primary{color:var(--badge-text-color-primary);background-color:var(--badge-background-color-primary)}.badge--type-secondary{color:var(--badge-text-color-secondary);background-color:var(--badge-background-color-secondary)}.badge.disabled{color:var(--text-interactive-counter-disabled);background-color:var(--background-interactive-counter-disabled)}';const x=class{constructor(e){t(this,e)}render(){return e(i,{key:"920c8524ac48990e81ef9ba12cf72d533f824050"},e("kv-icon",{key:"def82cec1666feb0101bbe63531ca2ca7e270278",name:n.Circle,class:"dot",part:"dot"}))}};x.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host{--dot-color:var(--color-purple-500);--dot-height:6px;--dot-width:6px}.dot{--icon-color:var(--dot-color);--icon-height:var(--dot-height);--icon-width:var(--dot-width)}';const m=class{constructor(e){t(this,e),this.helpText=[],this.state=s.None,this.showIcon=!1}helpTextChangeHandler(t){this._helpTexts=this.buildHelpTextMessages(t)}componentWillLoad(){this._helpTexts=this.buildHelpTextMessages(this.helpText)}buildHelpTextMessages(t){return t=t||[],Array.isArray(t)?t:[t]}render(){return e(i,{key:"c5f6b34e9e4de29ef68cec33927e247676c9d940"},!p(this._helpTexts)&&e("div",{key:"9acac05c1a02f627eab11110cac4319f86d2cb7a",class:{"help-text-container":!0,invalid:this.state===s.Invalid}},this.state===s.Invalid&&this.showIcon&&e("kv-icon",{key:"cbade7410e0897cbed7a3b989aa43a69cefdc0cb",name:n.Error,customClass:"icon-16"}),this._helpTexts.map((t=>e("span",{class:"help-text"},t)))))}static get watchers(){return{helpText:["helpTextChangeHandler"]}}};m.style='@charset "UTF-8";@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host{--help-text-default-color:var(--text-surface-neutral-tertiary);--help-text-error-color:var(--text-container-status-danger-default);--help-text-top-spacing:var(--spacing-xs);--help-text-bottom-spacing:var(--spacing-none);--help-text-right-spacing:var(--spacing-none);--help-text-left-spacing:var(--spacing-md);display:flex}.help-text-container{display:inline-flex;flex-flow:wrap;flex:1;overflow:hidden;padding:var(--help-text-top-spacing) var(--help-text-right-spacing) var(--help-text-bottom-spacing) var(--help-text-left-spacing);color:var(--help-text-default-color)}.help-text-container .help-text{font-family:Proxima Nova;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0;margin-right:var(--spacing-xs);color:var(--help-text-default-color)}.help-text-container span+span::before{content:"•";padding-right:var(--spacing-xs)}.help-text-container kv-icon{--icon-color:var(--help-text-default-color);align-items:center;margin-right:var(--spacing-xs);float:left}.help-text-container.invalid{color:var(--help-text-error-color)}.help-text-container.invalid .help-text{color:var(--help-text-error-color)}.help-text-container.invalid kv-icon{--icon-color:var(--help-text-error-color)}';const k=class{constructor(e){t(this,e)}render(){return e(i,{key:"c4e38461c2b5c5857614c1bd0101e43513a411e0"},h(this.label)&&e("div",{key:"b76a5f1434976e4b7cfa9f14472ad97ee264aab3",class:"label-container"},this.required&&e("span",{key:"f13abb2a716d0ba7a3f74409ce4a54b78952fb59",class:"required"},"*"),this.label&&e("span",{key:"14062de99c40a90543bfdfa140a499705e1f641c",class:"label"},this.label)))}};k.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host{--label-color:var(--text-surface-neutral-tertiary);--label-required-color:var(--text-surface-danger-default);--label-gap:var(--spacing-2xs);--label-bottom-spacing:var(--spacing-2xs);display:inline-flex;user-select:none}.required{font-family:Proxima Nova;font-weight:600;font-size:12px;line-height:16px;letter-spacing:1.5px;text-transform:uppercase}.required+label{font-family:Proxima Nova;font-weight:600;font-size:12px;line-height:16px;letter-spacing:1.5px;text-transform:uppercase}.label{font-family:Proxima Nova;font-weight:400;font-size:12px;line-height:16px;letter-spacing:1.5px;text-transform:uppercase;color:var(--label-color)}.required{color:var(--label-required-color)}.label-container{display:inline-flex;gap:var(--label-gap);margin-bottom:var(--label-bottom-spacing)}';const y={rightAlign:!1,showMaskOnHover:!1,showMaskOnFocus:!1,clearMaskOnLostFocus:!1,placeholder:"",oncleared:function(){this.value=""}},w={alias:"datetime",inputFormat:"dd-mm-yyyy HH:MM:ss",displayFormat:"dd-mm-yyyy 00:00:00",placeholder:"dd-mm-yyyy 00:00:00",jitMasking:!0,showMaskOnHover:!1,clearMaskOnLostFocus:!1},z={position:l.TopStart,truncate:!0};function j(t){return"number"==typeof t?t.toString():(t||"").toString()}const C=class{constructor(e){t(this,e),this.textChange=a(this,"textChange",7),this.textFieldBlur=a(this,"textFieldBlur",7),this.textFieldFocus=a(this,"textFieldFocus",7),this.rightActionClick=a(this,"rightActionClick",7),this.fieldClick=a(this,"fieldClick",7),this.type=c.Text,this.placeholder="",this.size=d.Large,this.inputDisabled=!1,this.inputRequired=!1,this.loading=!1,this.state=s.None,this.inputReadonly=!1,this.helpText=[],this.forcedFocus=!1,this.value="",this.isDirty=!1,this.inputMaskRegex="",this.fitContent=!0,this.hideBadge=!1,this.focused=!1,this.onHostClick=t=>{this.inputDisabled||(t.preventDefault(),this.fieldClick.emit(t))},this.onRightActionClick=t=>{t.preventDefault(),this.rightActionClick.emit(t)},this.onInputHandler=({target:t})=>{const e=t;if(this.maxLength&&u(e.value)>this.maxLength){const t=e.selectionStart-1;return e.value=this.getValue().substring(0,this.maxLength),void e.setSelectionRange(t,t)}v(e)||(this.value=e.value||""),this.textChange.emit(this.getValue())},this.onPasteHandler=t=>{const e=u(this.nativeInput.value),i=t.clipboardData.getData("text/plain");this.maxLength&&e+u(i)>this.maxLength&&t.preventDefault()},this.onBlurHandler=({target:t})=>{this.textFieldBlur.emit(t.value),this.forcedFocus||(this.focused=!1)},this.onFocusHandler=()=>{this.textFieldFocus.emit(this.nativeInput.value),this.focused=!0},this.getTooltipConfig=()=>{var t;return f({},z,null!==(t=this.tooltipConfig)&&void 0!==t?t:{})},this.getMinValue=()=>void 0!==this.min?this.min:this.type===c.Number?Number.MIN_SAFE_INTEGER:void 0,this.getMaxValue=()=>void 0!==this.max?this.max:this.type===c.Number?Number.MAX_SAFE_INTEGER:void 0,this.getUseInputMask=()=>{var t;return null!==(t=this.useInputMask)&&void 0!==t?t:this.type===c.Number}}async focusInput(){this.nativeInput.focus()}valueChangeHandler(t){const e=j(t);this.nativeInput&&this.nativeInput.value!==e&&this.updateAndEmitValue(e)}helpTextChangeHandler(t){this._helpTexts=this.buildHelpTextMessages(t)}forcedFocusChangeHandler(t){this.focused=t,this.focused?(this.el.focus(),this.nativeInput.focus()):(this.el.blur(),this.nativeInput.blur())}handleUseInputMask(t=this.type===c.Number){var e,i,a,o,r;t&&[c.Number,c.Text,c.DateTime].includes(this.type)&&!this.maskInstance?(this.maskInstance=(e=this.nativeInput,i=this.type,a={min:this.getMinValue(),max:this.getMaxValue(),regex:this.inputMaskRegex},o=this.maxLength,Inputmask(Object.assign(Object.assign(Object.assign({},(r=i,r===c.Text?y:r===c.DateTime?w:Object.assign({alias:"numeric"},y))),a),{onBeforePaste:t=>o?u(t)<=o&&t:t})).mask(e)),this.maskInstance.shadowRoot=this.el.shadowRoot):this.nativeInput&&(g.remove(this.nativeInput),this.valueChangeHandler(this.value))}componentWillLoad(){this._helpTexts=this.buildHelpTextMessages(this.helpText),this.focused=this.forcedFocus}componentDidLoad(){var t,e;this.handleUseInputMask(this.getUseInputMask()),this.updateAndEmitValue(this.getValue()),this.focused?(this.el.focus(),null===(e=this.nativeInput)||void 0===e||e.focus()):(this.el.blur(),null===(t=this.nativeInput)||void 0===t||t.blur())}updateAndEmitValue(t){this.value=this.maxLength?t.substring(0,this.maxLength):t,this.nativeInput&&this.nativeInput.value&&(this.nativeInput.value=this.value),this.value!==t&&this.textChange.emit(this.value)}buildHelpTextMessages(t){return t=t||[],Array.isArray(t)?t:[t]}getValue(){return j(this.value)}getType(){return this.getUseInputMask()?c.Text:this.type}render(){var t;const a=this.el.getAttribute("id"),o=this.getValue(),r=this.getType();return e(i,{key:"44ee367f8924242448bd82fcfab54cfd3476febc",onClick:this.onHostClick,style:Object.assign({},this.customStyle)},e("kv-tooltip",Object.assign({key:"4adcf9b956b9a23e3e997cf1a97614aa61bceebf"},this.getTooltipConfig()),e("div",{key:"2dd4367e4420fb48361ab90b72d2c8bef98dbffe",class:"text-field-container"},this.label&&e("kv-form-label",{key:"2837e4ff1c3e996cc040b4f86b1ed147eca654b3",label:this.label,required:this.inputRequired}),this.loading?e("div",{class:{"input-container-loading":!0,[`input-container-loading--size-${this.size}`]:!0}}):e("div",{part:"input-container",class:{"input-container":!0,[`input-container--size-${this.size}`]:!0,invalid:this.state===s.Invalid,focused:this.focused,disabled:this.inputDisabled,filled:!p(o)}},e("div",{class:{"left-slot-container":!0,focus:this.focused,invalid:this.state===s.Invalid,disabled:this.inputDisabled,filled:!p(o),"has-value-prefix":this.valuePrefix&&!p(o)}},e("slot",{name:"left-slot"}),this.icon&&e("kv-icon",{name:this.icon,exportparts:"icon",class:{disabled:this.inputDisabled,focus:this.focused,filled:!p(o)}}),o&&this.valuePrefix&&e("div",{class:"value-prefix"},this.valuePrefix)),e("div",{class:"resize-container"},this.fitContent&&e("span",{class:"resize-text",part:"input-text"},o||this.placeholder),e("slot",{name:"input"},e("input",{ref:t=>this.nativeInput=t,type:r,list:v(this.examples)?void 0:`examples_${a}`,name:this.inputName,placeholder:this.placeholder,disabled:this.inputDisabled,max:this.getMaxValue(),min:this.getMinValue(),minLength:this.minLength,step:this.step,value:o,onInput:this.onInputHandler,onBlur:this.onBlurHandler,onFocus:this.onFocusHandler,onPaste:this.onPasteHandler,class:{"resize-input":!0,"forced-focus":this.focused},readonly:this.inputReadonly,part:"input-text"}))),e("div",{class:{"right-slot-container":!0,focus:this.focused,disabled:this.inputDisabled,filled:!p(o)}},e("slot",{name:"right-slot"}),this.isDirty&&e("kv-dirty-dot",null),!this.hideBadge&&(null===(t=this.badge)||void 0===t?void 0:t.trim())&&e("kv-badge",{exportparts:"badge"},this.badge),this.actionIcon&&e("kv-icon",{name:this.actionIcon,onClick:this.onRightActionClick,class:{disabled:this.inputDisabled,focus:this.focused,filled:!p(o)}}))),!p(this._helpTexts)&&e("kv-form-help-text",{key:"1e1e36bed67c4ec2fb531ac190c07a7a380623ee",helpText:this._helpTexts,state:this.state})),p(this.examples)?null:e("datalist",{id:`examples_${a}`},this.examples.map((t=>e("option",{key:t,value:t}))))))}get el(){return o(this)}static get watchers(){return{value:["valueChangeHandler"],helpText:["helpTextChangeHandler"],forcedFocus:["forcedFocusChangeHandler"],useInputMask:["handleUseInputMask"]}}};C.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host{--input-width:auto;--input-min-width:140px;--input-max-width:100%;--input-height-large:var(--input-height-regular);--input-height-small:var(--input-height-compact);--input-gap-x:var(--input-gap-vertical-default);--input-prefix-spacing-x:var(--input-gap-vertical-small);--input-gap-y:var(--input-gap-horizontal-horizontal);--input-padding-x-large:var(--input-padding-x-regular);--input-padding-x-small:var(--input-padding-x-compact);--input-radius-large:var(--input-radius-regular);--input-radius-small:var(--input-radius-compact);--input-border-thickness:var(--input-border-thickness-default);--icon-size-large:var(--input-icon-size-regular);--icon-size-small:var(--input-icon-size-regular);--action-icon-size:var(--size-lg);--text-color-input-default:var(--input-text-text-input-default);--text-color-help-text-default:var(--input-text-helper-text-default);--border-color-default:var(--input-border-color-default);--background-color-default:var(--input-background-default);--text-color-icon-default:var(--input-icon-color-default);--text-color-action-icon-default:var(--input-icon-color-default);--text-color-input-focused:var(--input-text-text-input-selected);--border-color-focused:var(--input-border-color-selected);--text-color-icon-focused:var(--icon-interactive-input-selected);--text-color-action-icon-focused:var(--icon-interactive-input-selected);--text-color-input-filled:var(--input-text-text-input-filled);--text-color-icon-filled:var(--icon-interactive-input-filled);--text-color-action-icon-filled:var(--icon-interactive-input-filled);--border-color-filled:var(--input-border-color-filled);--text-color-input-disabled:var(--input-text-text-input-disabled);--text-color-placeholder-disabled:var(--input-text-text-input-disabled);--border-color-disabled:var(--input-border-color-disabled);--background-color-disabled:var(--input-background-disabled);--text-color-icon-disabled:var(--icon-interactive-input-disabled);--text-color-action-icon-disabled:var(--icon-interactive-input-disabled);--text-color-help-text-error:var(--input-text-helper-text-error);--border-color-error:var(--input-border-color-error)}kv-form-label{--label-color:var(--input-text-label-default);--label-gap:var(--input-gap-vertical-small);--label-required-color:var(--input-text-required-default);--label-bottom-spacing:var(--spacing-none)}kv-form-help-text{--help-text-default-color:var(--text-color-help-text-default);--help-text-error-color:var(--text-color-help-text-error);--help-text-top-spacing:var(--spacing-none);--help-text-bottom-spacing:var(--spacing-none);--help-text-right-spacing:var(--spacing-none);--help-text-left-spacing:var(--spacing-none)}kv-tooltip::part(content){width:100%}.text-field-container{display:flex;flex-direction:column;gap:var(--input-gap-y)}.resize-container{display:inline-block;position:relative;flex:1;overflow:hidden}.resize-input,.resize-text{font-family:Proxima Nova;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0;flex:1;appearance:textfield;border:0;height:100%;outline:0;box-sizing:border-box;color:var(--text-color-input-filled);background-color:transparent}.resize-text{display:inline-block;visibility:hidden;white-space:pre}.resize-input{position:absolute;top:-1px;left:0;right:0;bottom:0}input{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0}input::placeholder{color:var(--text-color-input-default)}input:focus,input.forced-focus{color:var(--text-color-input-focused)}input:read-only:not(:disabled){cursor:pointer}input:disabled{color:var(--text-color-input-disabled)}input:disabled::placeholder{color:var(--text-color-placeholder-disabled)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.input-container{display:flex;width:var(--input-width);min-width:var(--input-min-width);max-width:var(--input-max-width);border:solid var(--input-border-thickness) var(--border-color-default);position:relative;overflow:hidden;background-color:var(--background-color-default);box-sizing:border-box}.input-container.filled{border-color:var(--border-color-filled)}.input-container.focused{border-color:var(--border-color-focused)}.input-container.invalid{border-color:var(--border-color-error)}.input-container.disabled{border-color:var(--border-color-disabled);background-color:var(--background-color-disabled)}.input-container:has(input:read-only:not(:disabled)){cursor:pointer}.input-container .left-slot-container,.input-container .right-slot-container{height:100%;display:flex;align-items:center;gap:var(--spacing-xs);color:var(--text-color-input-default)}.input-container .left-slot-container.filled,.input-container .right-slot-container.filled{color:var(--text-color-input-filled)}.input-container .left-slot-container.focus,.input-container .right-slot-container.focus{color:var(--text-color-input-focused)}.input-container .left-slot-container.disabled,.input-container .right-slot-container.disabled{color:var(--text-color-input-disabled)}.input-container .left-slot-container{color:var(--text-color-input-filled);overflow:hidden;user-select:none;margin-right:var(--input-gap-x)}.input-container .left-slot-container.has-value-prefix{margin-right:var(--input-prefix-spacing-x)}.input-container .left-slot-container kv-icon{--icon-color:var(--text-color-icon-default)}.input-container .left-slot-container kv-icon.filled{--icon-color:var(--text-color-icon-filled)}.input-container .left-slot-container kv-icon.focus{--icon-color:var(--text-color-icon-focused)}.input-container .left-slot-container kv-icon.disabled{--icon-color:var(--text-color-icon-disabled)}.input-container .left-slot-container .value-prefix{white-space:nowrap;font-family:Proxima Nova;font-weight:600;font-size:14px;line-height:20px;letter-spacing:0}.input-container .right-slot-container{justify-content:center;margin-left:var(--input-gap-x)}.input-container .right-slot-container kv-icon{--icon-color:var(--text-color-action-icon-default);--icon-width:var(--action-icon-size);--icon-height:var(--action-icon-size)}.input-container .right-slot-container kv-icon.filled{--icon-color:var(--text-color-action-icon-filled)}.input-container .right-slot-container kv-icon.focus{--icon-color:var(--text-color-action-icon-focused)}.input-container .right-slot-container kv-icon.disabled{--icon-color:var(--text-color-action-icon-disabled)}.input-container .right-slot-container:not(.disabled){cursor:pointer}.input-container--size-large{height:var(--input-height-large);border-radius:var(--input-radius-large);padding:0 var(--input-padding-x-large)}.input-container--size-large .left-slot-container kv-icon{--icon-width:var(--icon-size-large);--icon-height:var(--icon-size-large)}.input-container--size-small{height:var(--input-height-small);border-radius:var(--input-radius-small);padding:0 var(--input-padding-x-small)}.input-container--size-small .left-slot-container kv-icon{--icon-width:var(--icon-size-small);--icon-height:var(--icon-size-small)}.input-container-loading{width:100%;display:flex;margin-top:var(--spacing-xs);background:linear-gradient(90deg, color-mix(in srgb, var(--background-color-disabled) 30%, transparent) 0%, var(--background-color-disabled) 50%, color-mix(in srgb, var(--background-color-disabled) 30%, transparent) 100%);background-size:200%;animation:ghostGradientAnimation 0.8s infinite ease-out;border-radius:4px}@keyframes ghostGradientAnimation{0%{background-position:-100% 0}100%{background-position:100% 0}}.input-container-loading--size-large{height:var(--input-height-large)}.input-container-loading--size-small{height:var(--input-height-small)}';export{b as kv_badge,x as kv_dirty_dot,m as kv_form_help_text,k as kv_form_label,C as kv_text_field}