@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 10.6 kB
JavaScript
import{r as e,c as t,h as i,H as s}from"./p-D-JVwta2.js";import{G as o,M as a,P as r,O as n,a as c,S as l,B as h,b as d,c as p,D as b,C as m,T as u,d as v,e as g,f}from"./p-DulScpJD.js";import{E as k}from"./p-SVedE_O8.js";import{c as x,a as w,b as y,g as j,e as C,l as z}from"./p-CMC2Wc9b.js";import{b as D,a as S}from"./p-D0vNSFZR.js";import{i as O}from"./p-BA_npyc9.js";import{a as T}from"./p-DzZLIMy0.js";import"./p-DwRzddFC.js";import"./p-DVds6a5Z.js";import"./p-CojoW2Y2.js";import"./p-BcMhjKoS.js";import"./p-Do0EyoO8.js";import"./p-CBuzk8fR.js";import"./p-DHk26cGe.js";import"./p-7ioMFMb5.js";import{g as q}from"./p-DKOxy79t.js";import{a as $}from"./p-CKk8_-cJ.js";import{D as M}from"./p-YDhuCIKq.js";import{t as _}from"./p-BlTxH6qj.js";import"./p-BFTU3MAI.js";import"./p-CiDQ1Z66.js";import"./p-DfPM2t43.js";import"./p-Dkd2PDJ-.js";import"./p-DQfCDnBw.js";import"./p-CqZa0G50.js";const B=([e,t],i)=>`${O(i.startDateFormatter)?"":e.format(i.startDateFormatter)}${O(i.separator)?"":` ${i.separator} `}${O(i.endDateFormatter)?"":t.format(i.endDateFormatter)}`,I=(e,t)=>{var i;const s=e.flat().find((e=>e.key===t));return null!==(i=null==s?void 0:s.range)&&void 0!==i?i:[]},K=e=>w(e).set("second",0).format(),R=e=>{let t={};const i=x();let s=[...e];const o=s.findIndex((({name:e})=>e===i));if(-1!==o){const e=s[o];s.splice(o,1),t={[d]:{label:p,value:d,options:{[e.name]:{value:e.name,label:e.label}}}}}let a={};O(s)||(a={[n]:{label:c,value:n,options:s.reduce(((e,{label:t,name:i})=>{var s;return e[i]=null!==(s=e[i])&&void 0!==s?s:{value:i,label:t},e}),{})}});const r=Object.assign(Object.assign({},t),a);if(1===Object.keys(r).length){const[e]=Object.keys(r);return r[e].options}return r},Z=class{constructor(i){e(this,i),this.selectedRelativeTimeChange=t(this,"selectedRelativeTimeChange",7),this.customizeIntervalClicked=t(this,"customizeIntervalClicked",7),this.timezoneChange=t(this,"timezoneChange",7),this.timezoneInputClicked=t(this,"timezoneInputClicked",7),this.timezoneDropdownStateChange=t(this,"timezoneDropdownStateChange",3),this.options=b,this.timezones=y(j()),this.customIntervalOptionEnabled=!0,this.timezoneSelectionEnabled=!0,this.timezoneContentVisible=!1,this.disableTimezoneSelection=!1,this.customClass="",this.relativeTimeOptions=[],this.timezonesSearchTerm="",this.hasScroll=!1,this.onTimezoneSearchTermChange=({detail:e})=>{this.timezonesSearchTerm=e},this.onTimezoneSelected=({detail:e})=>{this.timezoneChange.emit({name:e,offset:C(e)})},this.onSelectRelativeOption=({detail:e},t)=>{this.hasSelectedKeyRangeChanged(t,e)},this.hasSelectedKeyRangeChanged=(e,t)=>{(((e,t)=>{if(O(e))return!0;const i=K(t[0]),s=K(t[1]),o=K(e[0]),a=K(e[1]);return i!==o||s!==a})(this.selectedOptionRange,e)||t!==this.selectedTimeKey)&&(this.selectedOptionRange=e,this.selectedRelativeTimeChange.emit({key:t,range:e}))},this.onSelectCustomizeIntervalOption=({detail:e})=>{this.selectedOptionRange=[],this.customizeIntervalClicked.emit(e)},this.handleShowTimezoneContent=()=>{this.timezoneInputClicked.emit(!0)},this.getSelectedTimezone=()=>void 0!==this.selectedTimezone?this.selectedTimezone:x(),this.getSelectedTimezoneTitle=()=>{const e=this.getSelectedTimezone();return e?z(e):""},this.onTimezoneChange=({detail:e})=>{this.timezoneDropdownStateChange.emit(e)}}handleRelativeTimeOptionsChanges(){var e;const t=((e,t=x())=>e.map((e=>((e,t)=>e.map((e=>{const i=D(e,t);return Object.assign(Object.assign({key:e.value},e),{description:B(i,e.labelRangeFormatter),range:S(i)})})))(e,t))))(null!==(e=this.options)&&void 0!==e?e:b,this.getSelectedTimezone());if(this.relativeTimeOptions=t,!O(this.selectedTimeKey)&&this.selectedTimeKey!==m){const e=I(t,this.selectedTimeKey);this.hasSelectedKeyRangeChanged(e,this.selectedTimeKey)}var i,s;this.relativeTimeOptions&&0===this.relativeTimeOptions.length||(this.hasScroll=(i=this.customIntervalOptionEnabled,s=this.timezoneSelectionEnabled,this.options.reduce(((e,t)=>e+t.length*l+o),0)>a-(i?h:0)-(s?h:0)-2*r))}onTimezonesChange(e){this.timezoneDropdownOptions=R(e)}onTimezoneSearch(e){this.timezoneFilteredDropdownOptions=$(e,this.timezoneDropdownOptions)}onSelectedTimeKeyChange(e){e!==m&&(this.selectedOptionRange=I(this.relativeTimeOptions,this.selectedTimeKey))}onSelectedTimezoneChange(){this.handleRelativeTimeOptionsChanges()}componentWillLoad(){this.handleRelativeTimeOptionsChanges()}connectedCallback(){this.timezoneDropdownOptions=R(this.timezones),this.intervalID=window.setInterval((()=>{this.handleRelativeTimeOptionsChanges()}),u)}disconnectedCallback(){window.clearInterval(this.intervalID)}render(){return i(s,{key:"159ef2bf1c3c804bb4e55830b3a44cb68da5df81"},i("div",{key:"87e0efe593ace59a3e6ba2c775e0dbad8e3e38db",class:Object.assign(Object.assign({},q(this.customClass)),{"relative-time-container":!0}),style:{"--max-height":`${a}px`,"--group-gap":`${o}px`}},i("div",{key:"13a3d0ae03e84d4f511041439f031fb6a321c378",class:{"relative-time-selector":!0,"relative-time-selector--has-scroll":this.hasScroll},style:{"--option-height":`${l}px`,"--padding-size":`${r}px`}},this.relativeTimeOptions.map(((e,t)=>i("div",{key:t,class:"relative-time-group"},e.map((({label:e,value:t,description:s,range:o})=>i("kv-time-picker-select-option",{key:e,label:e,value:t,description:s,selected:t===this.selectedTimeKey,onItemSelected:e=>this.onSelectRelativeOption(e,o)}))))))),this.customIntervalOptionEnabled&&i("div",{key:"bb65f776eb7f73ccbe4e3e04a8474a1c16069ed5",class:"selectable"},i("kv-select-option",{key:m,label:v,value:m,selected:m===this.selectedTimeKey,onItemSelected:this.onSelectCustomizeIntervalOption})),this.timezoneSelectionEnabled&&i("div",{key:"d0dd57d61c78b2b942fc9887c9ddbed06f65c8d9",class:"selectable"},i("kv-input-wrapper",{key:"79ca55c922e3ca1737c35bda3f936fdda4115eea",contentVisible:this.timezoneContentVisible,contentHidden:this.disableTimezoneSelection,label:this.getSelectedTimezoneTitle(),icon:k.Edit,onContentClick:this.handleShowTimezoneContent},i("kv-single-select-dropdown",{key:"bd31dbb789b3d64cf14432c8758c17b6c30e8e2c",searchable:!0,icon:k.Time,placeholder:f,inputSize:T.Small,searchPlaceholder:g,options:this.timezoneDropdownOptions,filteredOptions:this.timezoneFilteredDropdownOptions,selectedOption:this.getSelectedTimezone(),onSearchChange:this.onTimezoneSearchTermChange,onOptionSelected:this.onTimezoneSelected,onOpenStateChange:this.onTimezoneChange})))))}static get watchers(){return{options:["handleRelativeTimeOptionsChanges"],timezones:["onTimezonesChange"],timezonesSearchTerm:["onTimezoneSearch"],selectedTimeKey:["onSelectedTimeKeyChange"],selectedTimezone:["onSelectedTimezoneChange"]}}};Z.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--background-color:var(--kv-neutral-7, #2a2a2a);--min-height:233px}.relative-time-container{display:flex;flex-direction:column;width:328px;max-height:var(--max-height);background-color:var(--background-color)}.relative-time-container .relative-time-selector{padding:var(--padding-size) 0;display:flex;flex-direction:column;gap:var(--group-gap);overflow:auto;min-height:var(--min-height)}.relative-time-container .relative-time-selector::-webkit-scrollbar{width:15px;height:15px}.relative-time-container .relative-time-selector::-webkit-scrollbar-thumb{border-radius:10px;background-color:var(--kv-neutral-6, #3f3f3f);border:4px solid transparent;background-clip:content-box}.relative-time-container .relative-time-selector::-webkit-scrollbar-corner{background-color:transparent}.relative-time-container .relative-time-selector kv-time-picker-select-option{--time-picker-select-option-height:var(--option-height)}.relative-time-container .relative-time-selector--has-scroll kv-time-picker-select-option{--time-picker-select-option-padding:0 var(--kv-spacing, 4px) 0 var(--kv-spacing-4x, 16px)}.relative-time-container .selectable{border-top:1px solid var(--kv-neutral-6, #3f3f3f);padding:var(--kv-spacing, 4px) 0}.relative-time-container .selectable kv-single-select-dropdown{--dropdown-max-height:210px}';const F=class{constructor(i){e(this,i),this.switchChange=t(this,"switchChange",7),this.disabled=!1,this.checked=!1,this.size=T.Large}onStateChange(){this.disabled||(this.checked=!this.checked,this.switchChange.emit(this.checked))}connectedCallback(){this.onSwitchClick=_((()=>this.onStateChange()),M)}render(){const e=this.disabled?k.Lock:k.DoneAll;return i(s,{key:"34f0a04060c25d556253bdb0a31350180fdcb560"},i("slot",{key:"adfffd71bb675a3e50e6ce765308bdb4e9a716ce",name:"left-slot"}),i("div",{key:"8d4739d60a8c1157be500384cdc1cd383df46de6",class:{"switch-button":!0,"switch-button--disabled":this.disabled,"switch-button--on":this.checked,[`switch-button--${this.size}`]:!0},part:"button",onClick:this.onSwitchClick},i("div",{key:"9d07c60351217da43c60dec6c8d6a03e3d70c419",class:"icon-square",part:"icon-square"},i("kv-icon",{key:"f901cb72307f1137e5dff79497ef020d7d9bb7dd",name:e,part:"icon-svg"}))),i("slot",{key:"1a3eddf7f7ea2cb25e13c37f07f75d4898fe3250",name:"right-slot"}))}};F.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--off-background-color:var(--kv-neutral-5, #707070);--on-background-color:var(--kv-primary, #005cc7);--sqr-background-color:var(--kv-primary-contrast, #fff);display:flex;align-items:center;gap:var(--kv-spacing-2x, 8px)}.switch-button{display:flex;box-sizing:border-box;cursor:pointer;border-radius:4px;background-color:var(--off-background-color);transition:background-color 0.3s ease-out}.switch-button--disabled{cursor:not-allowed;user-select:none}.switch-button--on{background-color:var(--on-background-color)}.switch-button--on .icon-square kv-icon::part(icon){fill:var(--on-background-color)}.switch-button--large{height:20px;width:40px;padding:2px 2px}.switch-button--large .icon-square{height:16px;width:16px}.switch-button--large .icon-square kv-icon{--icon-width:12px;--icon-height:12px}.switch-button--large.switch-button--on .icon-square{transform:translateX(20px)}.switch-button--small{height:16px;width:32px;padding:2.5px 2.5px}.switch-button--small .icon-square{height:11px;width:11px}.switch-button--small .icon-square kv-icon{--icon-width:8px;--icon-height:8px}.switch-button--small.switch-button--on .icon-square{transform:translateX(16px)}.icon-square{display:inline-flex;align-items:center;justify-content:center;transition:transform 0.3s ease-out;border-radius:2px;background-color:var(--sqr-background-color);font-size:0}.icon-square kv-icon{--icon-color:var(--off-background-color)}';export{Z as kv_relative_time_picker,F as kv_switch_button}