@kelvininc/ui-components/dist/peacock-ui/p-87eaaf71.entry.js

Kelvin UI Components

import{r as t,c as e,h as a,H as i,F as r,g as n}from"./p-WTwLUJcM.js";import{h as s,p as o,s as d,k as c,l,y as h,x as p,H as u,w as v,f as b,z as f,E as g,A as y,a as m,D as k,q as w,v as x}from"./p-BS8xGxWJ.js";import{g as _}from"./p-C0GqgbWr.js";import{f as D,o as z,c as j,w as M,n as C,v as L}from"./p-COrzvkrr.js";import{D as $,C as I,a as E}from"./p-BY-Rxx_4.js";import{i as F}from"./p-GpUjqmUL.js";import{I as S}from"./p-Hfc8Oh0x.js";import{m as B}from"./p-DlXzUI51.js";import{i as H}from"./p-DjSNdVAB.js";import"./p-B85MJLTf.js";import"./p-Dkd2PDJ-.js";import"./p-BL_6ssnk.js";import"./p-CK4jS9_E.js";const q=class{constructor(a){var i,r;t(this,a),this.changeMonth=e(this,"changeMonth",7),this.changeYear=e(this,"changeYear",7),this.clickDate=e(this,"clickDate",7),this.hoveredDateChange=e(this,"hoveredDateChange",7),this.selectedDates=[],this.disableHoveringStyling=!1,this.disabledDates=[],this.displayPreviousMonthArrow=!0,this.displayNextMonthArrow=!0,this.mode=D.Range,this.month=c(null!==(i=this.initialDate)&&void 0!==i?i:new Date),this.year=l(null!==(r=this.initialDate)&&void 0!==r?r:new Date),this.onClickPreviousMonth=()=>{if(!this.isBackNavigationDisabled()){if(1===this.month)return this.year=this.year-1,this.month=12,this.changeMonth.emit({month:this.month}),void this.changeYear.emit({year:this.year});this.month=this.month-1,this.changeMonth.emit({month:this.month})}},this.onClickNextMonth=()=>{if(!this.isNextNavigationDisabled()){if(12===this.month)return this.year=this.year+1,this.month=1,this.changeMonth.emit({month:this.month}),void this.changeYear.emit({year:this.year});this.month=this.month+1,this.changeMonth.emit({month:this.month})}},this.isDayDisabled=t=>{const e=s(t,this.month,this.year);return!!h(e,this.disabledDates)||!(!this.minDate||!p(e,u(this.minDate,$)))||!(!this.maxDate||!v(e,u(this.maxDate,$)))},this.onClickDay=t=>{const e=s(t,this.month,this.year);this.clickDate.emit({date:b(e)})},this.isDayActive=t=>{const e=s(t,this.month,this.year);return h(e,this.selectedDates.filter((t=>void 0!==t)))},this.onMouseEnter=t=>{this.hoveredDay=t;const e=s(t,this.month,this.year).format($);this.hoveredDateChange.emit(e)},this.onMouseLeave=()=>{this.hoveredDay=void 0,this.hoveredDateChange.emit("")},this.isDayInRange=t=>{const[e,a]=this.getSelectedRange();if(this.disableHoveringStyling||this.mode===D.Single||this.isDayDisabled(t)||void 0===e||void 0!==a)return!1;const i=s(t,this.month,this.year).format($),r=((t,e,a,i)=>void 0!==t?s(t,this.month,this.year).format($):void 0!==i?i:void 0)(this.hoveredDay,0,0,this.hoveredDate);return f(i,g(e).format($),r,!1)},this.isSelectedStartDay=t=>{const[e]=this.getSelectedRange();if(void 0===e)return!1;const a=s(t,this.month,this.year);return y(a,e)},this.isSelectedEndDay=t=>{const e=s(t,this.month,this.year),[a,i]=this.getSelectedRange();return void 0!==a&&y(e,null!=i?i:a)},this.isToday=t=>g().format($)===s(t,this.month,this.year).format($),this.isInsideDataRange=t=>{const e=s(t,this.month,this.year),[a,i]=this.getSelectedRange();return void 0!==a&&void 0!==i&&f(e,a,i,!1)},this.isBackNavigationDisabled=()=>{const t=this.minDate?this.minDate:E,e=s(1,this.month,this.year),a=u(t,$);return e.isBefore(a)||e.isSame(a)},this.isNextNavigationDisabled=()=>{if(F(this.maxDate))return!1;const t=s(1,this.month,this.year),e=u(this.maxDate,$);return t.isAfter(e)}}validateSelectedDates(t){if(void 0!==t&&!m(t))throw new Error("Selected date should be an array with valid dates")}validateInitialDate(t){if(void 0!==t&&!k(t))throw new Error("Initial date should be a valid date");this.month=c(null!=t?t:new Date),this.year=l(null!=t?t:new Date)}validateDisabledDates(t){if(void 0!==t&&!m(t))throw new Error("Disabled dates should be an array with valid dates")}componentWillLoad(){this.validateSelectedDates(this.selectedDates),this.validateInitialDate(this.initialDate),this.validateDisabledDates(this.disabledDates)}getSelectedRange(){return((t=[])=>{if(t.length>0){const[e]=t;if(1===t.length)return[e];const[a]=t.slice(-1);return[e,a]}return[]})(this.selectedDates)}render(){const t=((t,e)=>{const a=o(t,e),i=d(t-1,e),r=[];let n=a;for(;n>0;)r.push(i-n+1),n-=1;return r})(this.month,this.year),e=_(d(this.month,this.year)),r=_(I-(t.length+e.length)).map((t=>t+1));return a(i,{key:"8f5764e3f37cdd1d2dbb68900eeaca1e77fd1cd3"},a("div",{key:"c73976a343e46594dcdbe47d8438983f61fd3082",class:"calendar"},a("div",{key:"dbada5e01ae087e2cce5f2c60626592343768c62",class:"calendar__header"},a("div",{key:"da12ffadf2ed1f3a3fd5d22e89b2c3dace26438b",class:{navigator:!0,"navigator--disabled":this.isBackNavigationDisabled()},onClick:this.onClickPreviousMonth},this.displayPreviousMonthArrow&&a("kv-icon",{key:"2058734c09beeab7e263cc50aa8e35077bb638a0",name:z.NavClose})),a("div",{key:"de22d24456eb450aac401c14651948732585e0fb",class:"month"},w(this.month,this.year)),a("div",{key:"187ad16cca89403441617b91134070f486a9a7a4",class:{navigator:!0,"navigator--disabled":this.isNextNavigationDisabled()},onClick:this.onClickNextMonth},this.displayNextMonthArrow&&a("kv-icon",{key:"6a166df8116d9c6235ae65122913ec4f5155279a",name:z.NavOpen}))),a("div",{key:"e7f86824e86c2f693ba703c5dfe009bb227541d3",class:"calendar__body"},a("div",{key:"bfe88d3c9553a40c04db2e731b2003bc04ee4441",class:"calendar-month"},a("div",{key:"62c7b6798491be9241243204337c36d2abbf1c42",class:"calendar-month__weekdays"},x().map((t=>a("div",{key:t,class:"weekday"},t)))),a("div",{key:"d5a0036cea1e6d77239b07ef2d5a8a2756cdd78b",class:"calendar-month__days"},t.map((t=>a("kv-calendar-day",{key:`previous-${this.year}-${this.month}-${t+1}`,day:t,disabled:!0}))),e.map((t=>a("kv-calendar-day",{key:`${this.year}-${this.month}-${t+1}`,day:t+1,onClickDay:this.onClickDay.bind(this,t+1),disabled:this.isDayDisabled(t+1),active:this.isDayActive(t+1),inRange:this.isDayInRange(t+1),isRangeStartDate:this.isSelectedStartDay(t+1),isRangeEndDate:this.isSelectedEndDay(t+1),isToday:this.isToday(t+1),isBetweenSelectedDates:this.isInsideDataRange(t+1),onMouseEnterDay:this.onMouseEnter.bind(this,t+1),onMouseLeaveDay:this.onMouseLeave.bind(this,t+1)}))),r.map((t=>a("kv-calendar-day",{key:`after-${this.year}-${this.month}-${t+1}`,day:t,disabled:!0}))))))))}static get watchers(){return{selectedDates:["validateSelectedDates"],initialDate:["validateInitialDate"],disabledDates:["validateDisabledDates"]}}};q.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{--calendar-width:196px;--calendar-horizontal-padding:0px;--calendar-vertical-padding:0px;--calendar-background-color:var(--transparent);--calendar-month-title-text-color:var(--text-container-neutral-default);--calendar-month-weekday-text-color:var(--text-container-neutral-subtle)}.calendar{padding:var(--calendar-vertical-padding) var(--calendar-horizontal-padding);background-color:var(--calendar-background-color);border-radius:4px;width:var(--calendar-width);box-sizing:border-box}.calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-md)}.calendar__header .month{font-family:Proxima Nova;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0;color:var(--calendar-month-title-text-color);user-select:none}.calendar__header .navigator{min-width:16px;cursor:pointer}.calendar__header .navigator kv-icon{--icon-color:var(--icon-container-table-icon-default)}.calendar__header .navigator--disabled{cursor:not-allowed}.calendar__header .navigator--disabled kv-icon{--icon-color:var(--icon-container-table-icon-disabled)}.calendar__body .calendar-month{display:grid;grid-template-columns:repeat(auto-fit, calc((var(--calendar-width) - var(--calendar-horizontal-padding) * 2) / 7 * 7))}.calendar__body .calendar-month__weekdays{display:flex;align-items:center;justify-content:space-between;user-select:none;margin-bottom:var(--spacing-xs)}.calendar__body .calendar-month__weekdays .weekday{font-family:Proxima Nova;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0;width:calc((var(--calendar-width) - var(--calendar-horizontal-padding) * 2) / 7);color:var(--calendar-month-weekday-text-color);text-align:center}.calendar__body .calendar-month__days{display:grid;grid-template-columns:repeat(auto-fit, calc((var(--calendar-width) - var(--calendar-horizontal-padding) * 2) / 7))}';const U=class{constructor(a){t(this,a),this.clickDay=e(this,"clickDay",7),this.mouseEnterDay=e(this,"mouseEnterDay",7),this.mouseLeaveDay=e(this,"mouseLeaveDay",7),this.disabled=!1,this.active=!1,this.inRange=!1,this.isRangeStartDate=!1,this.isRangeEndDate=!1,this.isToday=!1,this.isBetweenSelectedDates=!1,this.onClickDay=()=>{this.disabled||this.clickDay.emit(this.day)},this.onMouseEnterDay=()=>{this.mouseEnterDay.emit(this.day)},this.onMouseLeaveDay=()=>{this.mouseLeaveDay.emit(this.day)}}render(){return a(i,{key:"6074d9d6678ce58f1e7f60188e3b51d737c2730e"},a("div",{key:"8447c6c1d26da0d615acacb18a79db21c343d18a",onClick:this.onClickDay,class:{"calendar-day":!0,"calendar-day--disabled":this.disabled,"calendar-day--active":this.active,"calendar-day--in-range":this.inRange,"calendar-day--today":this.isToday,"calendar-day--range-start":this.isRangeStartDate,"calendar-day--range-end":this.isRangeEndDate,"calendar-day--between-dates":this.isBetweenSelectedDates},onMouseEnter:this.onMouseEnterDay,onMouseLeave:this.onMouseLeaveDay,part:"day-container"},this.day))}};U.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{--day-width:28px;--day-height:28px}.calendar-day{font-family:Proxima Nova;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0;width:var(--day-width);height:var(--day-height);display:flex;align-items:center;justify-content:center;background-color:transparent;color:var(--text-container-neutral-subtle);user-select:none;cursor:pointer}.calendar-day:hover:not(.calendar-day--disabled):not(.calendar-day--active){background-color:var(--background-interactive-calendar-hover)}.calendar-day--today:not(.calendar-day--disabled){border:1px solid var(--border-container-neutral-subtlest);width:calc(var(--day-width) - 2px);height:calc(var(--day-height) - 2px)}.calendar-day--in-range:not(.calendar-day--disabled){background-color:var(--background-interactive-calendar-selected-middle)}.calendar-day--active:not(.calendar-day--disabled){background-color:var(--background-interactive-calendar-selected);color:var(--text-container-neutral-default)}.calendar-day--active:not(.calendar-day--disabled):hover{background-color:var(--background-interactive-calendar-hover);color:var(--text-container-neutral-subtle)}.calendar-day--range-start:not(.calendar-day--disabled){background-color:var(--background-interactive-calendar-selected);color:var(--text-container-neutral-default)}.calendar-day--range-end:not(.calendar-day--disabled){background-color:var(--background-interactive-calendar-selected);color:var(--text-container-neutral-default)}.calendar-day--between-dates:not(.calendar-day--disabled){background-color:var(--background-interactive-calendar-hover);color:var(--text-container-neutral-subtle)}.calendar-day--disabled{cursor:not-allowed;color:var(--text-container-neutral-disabled)}';const N={alias:"datetime",prefillYear:!1,showMaskOnHover:!1,clearMaskOnLostFocus:!1,allowMinus:!1},P=class{constructor(a){t(this,a),this.textChange=e(this,"textChange",7),this.dateTimeBlur=e(this,"dateTimeBlur",7),this.inputFocus=e(this,"inputFocus",7),this.rightIconClick=e(this,"rightIconClick",7),this.placeholder="dd-mm-yyyy 00:00:00",this.dateFormat="dd-mm-yyyy HH:MM:ss",this.value="",this.useInputMask=!1,this.size=j.Large,this.forcedFocus=!1,this.highlighted=!1,this.disabled=!1,this.required=!1,this.state=M.None,this.helpText=[],this.inputStyleType=C.Separated,this.focused=!1,this.getInputMaskConfig=()=>B({},N,{inputFormat:this.dateFormat,displayFormat:this.dateFormat,placeholder:this.placeholder}),this.createInputMaskInstance=()=>{S(this.getInputMaskConfig()).mask(this.nativeInput)},this.onInputHandler=({target:t})=>{const e=t;H(e)||(null==e?void 0:e.value)===this.value||this.textChange.emit(e.value||"")},this.onBlurHandler=({target:t})=>{this.dateTimeBlur.emit(t.value),this.focused=!1},this.onFocusHandler=t=>{this.focused=!0,this.inputFocus.emit(t)},this.onRightIconClickHandler=()=>{this.rightIconClick.emit()}}forcedFocusChangeHandler(t){this.focused=t,this.focused||this.el.blur()}handleUseInputMask(t){t?this.createInputMaskInstance():this.nativeInput&&S.remove(this.nativeInput)}componentWillLoad(){this.focused=this.forcedFocus}componentDidLoad(){this.handleUseInputMask(this.useInputMask)}getValue(){return(this.value||"").toString()}render(){const t=this.el.getAttribute("id"),e=this.getValue();return a(i,{key:"3ae52f6d1ccf5ba70ed9e56c84468c669c7228c3"},a("div",{key:"228840c815c0cbe386f5f810490050e5d9a53120",class:"date-time-input-container"},this.label&&a("kv-form-label",{key:"6e8897a69a60727f6d1e2bf09594c37972bff4ce",label:this.label,required:this.required}),a("div",{key:"52b99762c6e8ca56c1a4ecfd3f894a12aae66ba6",class:{"input-container-wrapper":!0,[`input-container-wrapper--style-${this.inputStyleType}`]:!0,[`input-container-wrapper--size-${this.size}`]:!0,focused:(this.focused||this.forcedFocus||this.highlighted)&&!this.disabled,invalid:this.state===M.Invalid,disabled:this.disabled,filled:!F(e)}},a("div",{key:"935b59370eab00f3527791c1c4c005df9cd9ee5b",class:"input-container"},a(r,{key:"20c347c8eb0a589bd86ca5c50454d147510aca3a"},a("div",{key:"81f7984d61fc1997bd1e9cb900b2f10beae4a057",class:{"left-container":!0,focus:this.focused||this.forcedFocus,invalid:this.state===M.Invalid,disabled:this.disabled,filled:!F(e)}},this.leftIcon&&a("kv-icon",{key:"df48082bb6fb0545fca8b3afb130bafa3bba0377",name:this.leftIcon,exportparts:"icon",class:{disabled:this.disabled,focus:this.focused||this.forcedFocus,filled:!F(e)}})),a("input",{key:"77180cc4b65aadc4d39a17f84cea710296dcfa44",id:t,ref:t=>this.nativeInput=t,type:L.Text,name:this.inputName,disabled:this.disabled,placeholder:this.placeholder,value:e,onInput:this.onInputHandler,onBlur:this.onBlurHandler,onFocus:this.onFocusHandler,class:{"forced-focus":this.focused||this.forcedFocus}}),this.rightIcon&&a("div",{key:"b0760b3716f36d7e911d1c908d84bd0b5f871b65",class:{"right-container":!0,focus:this.focused||this.forcedFocus,disabled:this.disabled,filled:!F(e)},onClick:this.onRightIconClickHandler},a("kv-icon",{key:"1b1768d497117431d7f5e6bec1d0532969b736e1",name:this.rightIcon,exportparts:"icon",class:{disabled:this.disabled,focus:this.focused||this.forcedFocus,filled:!F(e)}})))),this.inputStyleType===C.MergedLeft&&a("div",{key:"a8b8c3477306f15e1c9948fc6bd7abbbc28aaa09",class:"input-separator"})),a("kv-form-help-text",{key:"4255bd4cdab979a1bcad573042a7e64d05752289",helpText:this.helpText,state:this.state})))}get el(){return n(this)}static get watchers(){return{forcedFocus:["forcedFocusChangeHandler"],useInputMask:["handleUseInputMask"]}}};P.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}.date-time-input-container{display:flex;flex-direction:column;gap:var(--input-gap-horizontal-horizontal)}.date-time-input-container 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)}.date-time-input-container kv-form-help-text{--help-text-default-color:var(--input-text-helper-text-default);--help-text-error-color:var(--input-text-helper-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)}input{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Proxima Nova;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0;appearance:textfield;outline:0;padding:0;width:100%;border:transparent;background-color:transparent;color:var(--input-text-text-input-filled)}input::placeholder{color:var(--input-text-text-input-default)}input:focus,input.forced-focus{color:var(--input-text-text-input-selected)}input:read-only:not(:disabled){cursor:pointer}input:disabled{color:var(--input-text-text-input-disabled)}input:disabled::placeholder{color:var(--input-text-text-input-disabled)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.input-container-wrapper{display:flex;align-items:center;min-width:140px;border:solid var(--input-border-thickness-default) var(--input-border-color-default);background-color:var(--input-background-default);overflow:hidden;box-sizing:border-box}.input-container-wrapper--size-large{height:var(--input-height-regular)}.input-container-wrapper--size-large .input-container{padding:0 var(--input-padding-x-regular)}.input-container-wrapper--size-small{height:var(--input-height-compact)}.input-container-wrapper--size-small .input-container{padding:0 var(--input-padding-x-compact)}.input-container-wrapper--style-merged-left{border-top-left-radius:var(--input-radius-regular);border-bottom-left-radius:var(--input-radius-regular);border-right-color:transparent}.input-container-wrapper--style-merged-right{border-top-right-radius:var(--input-radius-regular);border-bottom-right-radius:var(--input-radius-regular);border-left-color:transparent}.input-container-wrapper--style-separated{border-radius:var(--input-radius-regular)}.input-container-wrapper .input-separator{width:1px;height:22px;background-color:var(--border-container-neutral-subtlest)}.input-container-wrapper.filled{border-color:var(--input-border-color-filled)}.input-container-wrapper.filled.input-container-wrapper--style-merged-left{border-right-color:transparent}.input-container-wrapper.filled.input-container-wrapper--style-merged-right{border-left-color:transparent}.input-container-wrapper.focused{border-color:var(--input-border-color-selected)}.input-container-wrapper.focused .input-separator{background-color:transparent}.input-container-wrapper.focused.input-container-wrapper--style-merged-left{border-right-color:var(--input-border-color-selected)}.input-container-wrapper.focused.input-container-wrapper--style-merged-right{border-left-color:var(--input-border-color-selected)}.input-container-wrapper.invalid{border-color:var(--input-border-color-error)}.input-container-wrapper.invalid.input-container-wrapper--style-merged-left{border-right-color:transparent}.input-container-wrapper.invalid.input-container-wrapper--style-merged-right{border-left-color:transparent}.input-container-wrapper.disabled{border-color:var(--input-border-color-disabled);background-color:var(--input-background-disabled)}.input-container-wrapper.disabled.input-container-wrapper--style-merged-left{border-right-color:transparent}.input-container-wrapper.disabled.input-container-wrapper--style-merged-right{border-left-color:transparent}.input-container{position:relative;display:flex;align-items:center;justify-content:space-between;height:100%;width:100%}.input-container .left-container,.input-container .right-container{height:100%;display:flex;align-items:center;gap:var(--spacing-xs)}.input-container .left-container{overflow:hidden;user-select:none;margin-right:var(--input-gap-vertical-default)}.input-container .left-container kv-icon{--icon-color:var(--input-icon-color-default);--icon-with:var(--input-icon-size-regular);--icon-height:var(--input-icon-size-regular)}.input-container .left-container kv-icon.filled{--icon-color:var(--icon-interactive-input-filled)}.input-container .left-container kv-icon.focus{--icon-color:var(--icon-interactive-input-selected)}.input-container .left-container kv-icon.disabled{--icon-color:var(--icon-interactive-input-disabled)}.input-container .right-container{justify-content:center;margin-left:var(--input-gap-vertical-default)}.input-container .right-container kv-icon{--icon-color:var(--input-icon-color-default);--icon-width:var(--size-lg);--icon-height:var(--size-lg)}.input-container .right-container kv-icon.filled{--icon-color:var(--icon-interactive-input-filled)}.input-container .right-container kv-icon.focus{--icon-color:var(--icon-interactive-input-selected)}.input-container .right-container kv-icon.disabled{--icon-color:var(--icon-interactive-input-disabled)}.input-container .right-container:not(.disabled){cursor:pointer}';export{q as kv_calendar,U as kv_calendar_day,P as kv_date_time_input}