UNPKG

@kelvininc/ui-components

Version:
1 lines 17.9 kB
import{r as t,c as a,h as e,H as i,F as r,g as s}from"./p-D-JVwta2.js";import{r as n,s as o,t as d,u as c,v as h,w as l,q as p,a as v,x as f,y as b,z as u,o as y,p as k,A as m,B as g,C as x,D as w}from"./p-CMC2Wc9b.js";import{g as D}from"./p-C0GqgbWr.js";import{E as _}from"./p-SVedE_O8.js";import{D as j,C as M,a as z}from"./p-BY-Rxx_4.js";import{a as C}from"./p-DzZLIMy0.js";import"./p-DwRzddFC.js";import"./p-DVds6a5Z.js";import{i as E,b as F,a as B}from"./p-CojoW2Y2.js";import"./p-BcMhjKoS.js";import"./p-Do0EyoO8.js";import"./p-CBuzk8fR.js";import"./p-DHk26cGe.js";import"./p-7ioMFMb5.js";import{i as I}from"./p-BA_npyc9.js";import{E as $}from"./p-AOocjcjw.js";import{I as S}from"./p-B7XkO3Wx.js";import{m as A}from"./p-DkMsLawH.js";import{i as L}from"./p-DjSNdVAB.js";import"./p-BFTU3MAI.js";import"./p-CiDQ1Z66.js";import"./p-DfPM2t43.js";import"./p-Dkd2PDJ-.js";import"./p-Dp5Jdzmz.js";import"./p-CK4jS9_E.js";import"./p-DVju43gQ.js";const H=class{constructor(e){var i,r;t(this,e),this.changeMonth=a(this,"changeMonth",7),this.changeYear=a(this,"changeYear",7),this.clickDate=a(this,"clickDate",7),this.hoveredDateChange=a(this,"hoveredDateChange",7),this.selectedDates=[],this.disableHoveringStyling=!1,this.disabledDates=[],this.displayPreviousMonthArrow=!0,this.displayNextMonthArrow=!0,this.mode=E.Range,this.month=c(null!==(i=this.initialDate)&&void 0!==i?i:new Date),this.year=h(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 a=n(t,this.month,this.year);return!!l(a,this.disabledDates)||!(!this.minDate||!p(a,v(this.minDate,j)))||!(!this.maxDate||!f(a,v(this.maxDate,j)))},this.onClickDay=t=>{const a=n(t,this.month,this.year);this.clickDate.emit({date:b(a)})},this.isDayActive=t=>{const a=n(t,this.month,this.year);return l(a,this.selectedDates.filter((t=>void 0!==t)))},this.onMouseEnter=t=>{this.hoveredDay=t;const a=n(t,this.month,this.year).format(j);this.hoveredDateChange.emit(a)},this.onMouseLeave=()=>{this.hoveredDay=void 0,this.hoveredDateChange.emit("")},this.isDayInRange=t=>{const[a,e]=this.getSelectedRange();if(this.disableHoveringStyling||this.mode===E.Single||this.isDayDisabled(t)||void 0===a||void 0!==e)return!1;const i=n(t,this.month,this.year).format(j),r=((t,a,e,i)=>void 0!==t?n(t,this.month,this.year).format(j):void 0!==i?i:void 0)(this.hoveredDay,0,0,this.hoveredDate);return u(i,y(a).format(j),r,!1)},this.isSelectedStartDay=t=>{const[a]=this.getSelectedRange();if(void 0===a)return!1;const e=n(t,this.month,this.year);return k(e,a)},this.isSelectedEndDay=t=>{const a=n(t,this.month,this.year),[e,i]=this.getSelectedRange();return void 0!==e&&k(a,null!=i?i:e)},this.isToday=t=>y().format(j)===n(t,this.month,this.year).format(j),this.isInsideDataRange=t=>{const a=n(t,this.month,this.year),[e,i]=this.getSelectedRange();return void 0!==e&&void 0!==i&&u(a,e,i,!1)},this.isBackNavigationDisabled=()=>{const t=this.minDate?this.minDate:z,a=n(1,this.month,this.year),e=v(t,j);return a.isBefore(e)||a.isSame(e)},this.isNextNavigationDisabled=()=>{if(I(this.maxDate))return!1;const t=n(1,this.month,this.year),a=v(this.maxDate,j);return t.isAfter(a)}}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&&!g(t))throw new Error("Initial date should be a valid date");this.month=c(null!=t?t:new Date),this.year=h(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[a]=t;if(1===t.length)return[a];const[e]=t.slice(-1);return[a,e]}return[]})(this.selectedDates)}render(){const t=((t,a)=>{const e=o(t,a),i=d(t-1,a),r=[];let s=e;for(;s>0;)r.push(i-s+1),s-=1;return r})(this.month,this.year),a=D(d(this.month,this.year)),r=D(M-(t.length+a.length)).map((t=>t+1));return e(i,{key:"9310ba6c9b27714a18adf64a2e6cbdabe00961b1"},e("div",{key:"58cc403963167482b5b0133ec5e4e1710d074bec",class:"calendar"},e("div",{key:"1f44a313b2500392190144c2b15fce121effbb3a",class:"calendar__header"},e("div",{key:"91e41ad29bc3fcf72ed9afe8159b30e2ac88f627",class:{navigator:!0,"navigator--disabled":this.isBackNavigationDisabled()},onClick:this.onClickPreviousMonth},this.displayPreviousMonthArrow&&e("kv-icon",{key:"93ed77d6e9868dc04231aa50044c795dd597a190",name:_.NavClose})),e("div",{key:"9941068318d245e2860812f36fb926a111f505b3",class:"month"},x(this.month,this.year)),e("div",{key:"b0e489006e68111aaa7dd5284ec63b6c54f998df",class:{navigator:!0,"navigator--disabled":this.isNextNavigationDisabled()},onClick:this.onClickNextMonth},this.displayNextMonthArrow&&e("kv-icon",{key:"15efdf9a4936dadf1159a03ad1ec3eb9390eb8d1",name:_.NavOpen}))),e("div",{key:"5ddad731f73ea3a936761f181d5230f34f067686",class:"calendar__body"},e("div",{key:"e0e41bc4aebb85affdfbf9671f26e9552d98f2fb",class:"calendar-month"},e("div",{key:"d740c163935af02d2e60d27f6acd125577e1abc9",class:"calendar-month__weekdays"},w().map((t=>e("div",{key:t,class:"weekday"},t)))),e("div",{key:"8d430dd5d08e079e0c084c6293bd218b7eb67650",class:"calendar-month__days"},t.map((t=>e("kv-calendar-day",{key:`previous-${this.year}-${this.month}-${t+1}`,day:t,disabled:!0}))),a.map((t=>e("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=>e("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"]}}};H.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--calendar-width:196px;--calendar-horizontal-padding:0px;--calendar-vertical-padding:0px;--calendar-background-color:var(--kv-neutral-7, #2a2a2a);--calendar-month-title-text-color:var(--kv-neutral-2, #e5e5e5);--calendar-month-weekday-text-color:var(--kv-neutral-4, #bebebe)}.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(--kv-spacing-2x, 8px)}.calendar__header .month{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none;color:var(--calendar-month-title-text-color);user-select:none}.calendar__header .navigator{min-width:16px;cursor:pointer}.calendar__header .navigator--disabled{cursor:not-allowed}.calendar__header .navigator--disabled kv-icon{--icon-color:var(--kv-neutral-5, #707070)}.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(--kv-spacing, 4px)}.calendar__body .calendar-month__weekdays .weekday{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;text-transform:none;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 R=class{constructor(e){t(this,e),this.clickDay=a(this,"clickDay",7),this.mouseEnterDay=a(this,"mouseEnterDay",7),this.mouseLeaveDay=a(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 e(i,{key:"bbb19b4c68d581c0d89093b5b9d036cb981f72fd"},e("div",{key:"d011caf9477b14c259eb894408189c0cda9bb4b7",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))}};R.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--day-width:28px;--day-height:28px}.calendar-day{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;text-transform:none;width:var(--day-width);height:var(--day-height);display:flex;align-items:center;justify-content:center;background-color:transparent;color:var(--kv-neutral-4, #bebebe);user-select:none;cursor:pointer}.calendar-day:hover:not(.calendar-day--disabled):not(.calendar-day--active){background-color:rgba(var(--kv-info-rgb, 39, 110, 241), 0.16)}.calendar-day--today:not(.calendar-day--disabled){border:1px solid var(--kv-neutral-5, #707070);width:calc(var(--day-width) - 2px);height:calc(var(--day-height) - 2px)}.calendar-day--in-range:not(.calendar-day--disabled){background-color:rgba(var(--kv-info-rgb, 39, 110, 241), 0.16)}.calendar-day--active:not(.calendar-day--disabled){background-color:var(--kv-primary-dark, #103d73);color:var(--kv-neutral-2, #e5e5e5)}.calendar-day--active:not(.calendar-day--disabled):hover{background-color:rgba(var(--kv-info-rgb, 39, 110, 241), 0.16);color:var(--kv-neutral-4, #bebebe)}.calendar-day--range-start:not(.calendar-day--disabled){background-color:var(--kv-primary-dark, #103d73);color:var(--kv-neutral-2, #e5e5e5)}.calendar-day--range-end:not(.calendar-day--disabled){background-color:var(--kv-primary-dark, #103d73);color:var(--kv-neutral-2, #e5e5e5)}.calendar-day--between-dates:not(.calendar-day--disabled){background-color:rgba(var(--kv-info-rgb, 39, 110, 241), 0.16);color:var(--kv-neutral-4, #bebebe)}.calendar-day--disabled{cursor:not-allowed;color:var(--kv-neutral-5, #707070)}';const O={alias:"datetime",prefillYear:!1,showMaskOnHover:!1,clearMaskOnLostFocus:!1,allowMinus:!1},V=class{constructor(e){t(this,e),this.textChange=a(this,"textChange",7),this.dateTimeBlur=a(this,"dateTimeBlur",7),this.inputFocus=a(this,"inputFocus",7),this.rightIconClick=a(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=C.Large,this.forcedFocus=!1,this.highlighted=!1,this.disabled=!1,this.required=!1,this.state=F.None,this.helpText=[],this.inputStyleType=$.Separated,this.focused=!1,this.getInputMaskConfig=()=>A({},O,{inputFormat:this.dateFormat,displayFormat:this.dateFormat,placeholder:this.placeholder}),this.createInputMaskInstance=()=>{S(this.getInputMaskConfig()).mask(this.nativeInput)},this.onInputHandler=({target:t})=>{const a=t;L(a)||(null==a?void 0:a.value)===this.value||this.textChange.emit(a.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=t=>{this.rightIconClick.emit(t)}}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"),a=this.getValue();return e(i,{key:"2c4940748a70ba1e0452c128ba02bec52725930a"},e("div",{key:"5a9627e030248adbe1a2bc0255b8ca7dcf0cb134",class:"date-time-input-container"},e("kv-form-label",{key:"983972d70402b41787f33be0485df8d1485a7620",label:this.label,required:this.required}),e("div",{key:"649da9531044930b489c7ce10feb4436e3ae43a5",class:{"input-container-wrapper":!0,[`input-container-wrapper--style-${this.inputStyleType}`]:!0,[`input-container-wrapper--size-${this.size}`]:!0}},e("div",{key:"50200018e10bb1a3115b88681dbdf2c4808c279f",class:{"input-container":!0,"forced-focus":(this.focused||this.forcedFocus||this.highlighted)&&!this.disabled,invalid:this.state===F.Invalid}},e(r,{key:"c5bd8b44f73a895eb5697400df5b620d5ba1014f"},e("div",{key:"7ac7455e49fcbef073a45e6b1995badb99095ca9",class:"left-container"},this.leftIcon&&e("div",{key:"b0f4c5261abb68e86fc4f8fdcf7b1201f927d2e1",class:"left-icon"},e("kv-icon",{key:"f985a2ae950d9a0caf702053b3534e98b272c66f",name:this.leftIcon,exportparts:"icon",class:{invalid:this.state===F.Invalid,disabled:this.disabled,focus:this.focused||this.forcedFocus}})),e("input",{key:"5cf836911e9e2e7fd22b08aa2ac0d3863ed2f388",id:t,ref:t=>this.nativeInput=t,type:B.Text,name:this.inputName,disabled:this.disabled,placeholder:this.placeholder,value:a,onInput:this.onInputHandler,onBlur:this.onBlurHandler,onFocus:this.onFocusHandler,class:{"forced-focus":this.focused||this.forcedFocus}})),this.rightIcon&&e("div",{key:"66c5764aed37e6421d07d7c8729bd7911ffcc63e",class:"right-icon",onClick:this.onRightIconClickHandler},e("kv-icon",{key:"a77591fbf1a343fa0b2136a36021a2776a3a9825",name:this.rightIcon,exportparts:"icon",class:{invalid:this.state===F.Invalid,disabled:this.disabled,focus:this.focused||this.forcedFocus}})))),this.inputStyleType===$.MergedLeft&&e("div",{key:"ee8645473a297c52af6b90834e01f11096826da6",class:"input-separator"})),e("kv-form-help-text",{key:"c8d301bf44fb091e7b4c60c6850642b70ec3afcc",helpText:this.helpText,state:this.state})))}get el(){return s(this)}static get watchers(){return{forcedFocus:["forcedFocusChangeHandler"],useInputMask:["handleUseInputMask"]}}};V.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-form-label{user-select:none;--label-color:var(--kv-neutral-4, #bebebe)}input{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none;color-scheme:dark;appearance:textfield;outline:0;background:var(--kv-neutral-6, #3f3f3f);border:transparent;padding:0 var(--kv-spacing-2x, 8px);width:100%}.input-container-wrapper{display:flex;align-items:center;background-color:var(--kv-neutral-6, #3f3f3f);min-width:196px}.input-container-wrapper--size-large{height:36px}.input-container-wrapper--size-small{height:28px}.input-container-wrapper--style-merged-left{border-top-left-radius:4px;border-bottom-left-radius:4px}.input-container-wrapper--style-merged-right{border-top-right-radius:4px;border-bottom-right-radius:4px}.input-container-wrapper--style-separated{border-radius:4px}.input-container-wrapper .input-separator{width:1px;height:20px;background-color:var(--kv-neutral-5, #707070)}.input-container{position:relative;display:flex;align-items:center;justify-content:space-between;height:100%;width:100%;border-radius:4px;border:solid 1px var(--kv-neutral-6, #3f3f3f);color:var(--kv-neutral-2, #e5e5e5);overflow:hidden;box-sizing:border-box}.input-container kv-icon{--icon-color:var(--kv-neutral-4, #bebebe)}.input-container.focus,.input-container.forced-focus{color:var(--kv-neutral-2, #e5e5e5);border-color:var(--kv-neutral-0, #fff)}.input-container.focus kv-icon,.input-container.forced-focus kv-icon{--icon-color:var(--kv-neutral-2, #e5e5e5)}.input-container.focus::placeholder,.input-container.forced-focus::placeholder{color:var(--kv-neutral-4, #bebebe)}.input-container.disabled{background-color:var(--kv-neutral-7, #2a2a2a);color:var(--kv-neutral-5, #707070)}.input-container.disabled kv-icon{--icon-color:var(--kv-neutral-5, #707070)}.input-container.invalid{border-color:var(--kv-error, #e11900)}.input-container .left-container{display:flex;align-items:center;width:100%}.input-container .left-container .left-icon{padding-left:var(--kv-spacing-2x, 8px)}.input-container .left-container .left-icon kv-icon{--icon-height:20px;--icon-width:20px}.input-container .right-icon{padding-right:var(--kv-spacing-2x, 8px);cursor:pointer}.input-container .right-icon kv-icon{--icon-height:20px;--icon-width:20px}';export{H as kv_calendar,R as kv_calendar_day,V as kv_date_time_input}