@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 11.6 kB
JavaScript
import{r as e,c as t,h as i,H as s}from"./p-WTwLUJcM.js";import{C as a,o,c as r}from"./p-COrzvkrr.js";import{n as c,H as n,b as l,u as h,t as d,g as m}from"./p-BS8xGxWJ.js";import{c as p,h as g,D as b}from"./p-DumtFo-s.js";import{i as v}from"./p-GpUjqmUL.js";import{a as u}from"./p-DCOsOAOy.js";import{m as w}from"./p-ShWxjiEm.js";import{D as f}from"./p-YDhuCIKq.js";import{t as k}from"./p-BMjOCSrs.js";import"./p-B85MJLTf.js";import"./p-Dkd2PDJ-.js";import"./p-BJ9G-v5a.js";const y="system-timezone",x="other-timezones",z=([e,t],i)=>`${v(i.startDateFormatter)?"":e.format(i.startDateFormatter)}${v(i.separator)?"":` ${i.separator} `}${v(i.endDateFormatter)?"":t.format(i.endDateFormatter)}`,C=(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:[]},j=e=>n(e).set("second",0).format(),S=e=>{let t={};const i=c();let s=[...e];const a=s.findIndex((({name:e})=>e===i));if(-1!==a){const e=s[a];s.splice(a,1),t={[y]:{label:"System Timezone - Default",value:y,options:{[e.name]:{value:e.name,label:e.label}}}}}let o={};v(s)||(o={[x]:{label:"Other Timezones",value:x,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),o);if(1===Object.keys(r).length){const[e]=Object.keys(r);return r[e].options}return r},O=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=l(h()),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:d(e)})},this.onSelectRelativeOption=({detail:e},t)=>{this.hasSelectedKeyRangeChanged(t,e)},this.hasSelectedKeyRangeChanged=(e,t)=>{(((e,t)=>{if(v(e))return!0;const i=j(t[0]),s=j(t[1]),a=j(e[0]),o=j(e[1]);return i!==a||s!==o})(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:c(),this.getSelectedTimezoneTitle=()=>{const e=this.getSelectedTimezone();return e?m(e):""},this.onTimezoneChange=({detail:e})=>{this.timezoneDropdownStateChange.emit(e)}}handleRelativeTimeOptionsChanges(){var e;const t=((e,t=c())=>e.map((e=>((e,t)=>e.map((e=>{const i=p(e,t);return Object.assign(Object.assign({key:e.value},e),{description:z(i,e.labelRangeFormatter),range:g(i)})})))(e,t))))(null!==(e=this.options)&&void 0!==e?e:b,this.getSelectedTimezone());if(this.relativeTimeOptions=t,!v(this.selectedTimeKey)&&this.selectedTimeKey!==a){const e=C(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+32*t.length+12),0)>347-(i?41:0)-(s?41:0)-32))}onTimezonesChange(e){this.timezoneDropdownOptions=S(e)}onTimezoneSearch(e){this.timezoneFilteredDropdownOptions=w(e,this.timezoneDropdownOptions)}onSelectedTimeKeyChange(e){e!==a&&(this.selectedOptionRange=C(this.relativeTimeOptions,this.selectedTimeKey))}onSelectedTimezoneChange(){this.handleRelativeTimeOptionsChanges()}componentWillLoad(){this.handleRelativeTimeOptionsChanges()}connectedCallback(){this.timezoneDropdownOptions=S(this.timezones),this.intervalID=window.setInterval((()=>{this.handleRelativeTimeOptionsChanges()}),1e4)}disconnectedCallback(){window.clearInterval(this.intervalID)}render(){return i(s,{key:"09ccf5ace7573c7d8f2761ce74bc6648d0de8c07"},i("div",{key:"8dfc4236cb2d635b3ff1799199e2fe494e8feb28",class:Object.assign(Object.assign({},u(this.customClass)),{"relative-time-container":!0}),style:{"--max-height":"347px","--group-gap":"12px"}},i("div",{key:"f5ac7995121a6053377531686e64b429d8867ce3",class:{"relative-time-selector":!0,"relative-time-selector--has-scroll":this.hasScroll},style:{"--option-height":"32px","--padding-size":"16px"}},this.relativeTimeOptions.map(((e,t)=>i("div",{key:t,class:"relative-time-group"},e.map((({label:e,value:t,description:s,range:a})=>i("kv-time-picker-select-option",{key:e,label:e,value:t,description:s,selected:t===this.selectedTimeKey,onItemSelected:e=>this.onSelectRelativeOption(e,a)}))))))),this.customIntervalOptionEnabled&&i("div",{key:"08f8e53eb06409eb4bc89882d4f34c0669ce99e3",class:"selectable"},i("kv-select-option",{key:a,label:"Custom Interval",value:a,selected:a===this.selectedTimeKey,onItemSelected:this.onSelectCustomizeIntervalOption})),this.timezoneSelectionEnabled&&i("div",{key:"bbc7ade1139b5ffaf821050052b214ff923da208",class:"selectable"},i("kv-input-wrapper",{key:"683512aa689c3418cec1e001e54913a8b959015e",contentVisible:this.timezoneContentVisible,contentHidden:this.disableTimezoneSelection,label:this.getSelectedTimezoneTitle(),icon:o.Edit,onContentClick:this.handleShowTimezoneContent},i("kv-single-select-dropdown",{key:"4071c243a08f49f673916396daccc2940676054b",searchable:!0,icon:o.Time,placeholder:"Select a timezone",inputSize:r.Small,searchPlaceholder:"Search for a timezone",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"]}}};O.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{--background-color:var(--background-container-elevated-slider);--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(--scrollbar-thumb-default);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(--spacing-xs) 0 var(--spacing-2xl)}.relative-time-container .selectable{border-top:1px solid var(--slider-border-color-default);padding:var(--spacing-xs) 0}.relative-time-container .selectable kv-single-select-dropdown{--dropdown-max-height:210px}';const T=class{constructor(i){e(this,i),this.switchChange=t(this,"switchChange",7),this.disabled=!1,this.checked=!1,this.size=r.Large}onStateChange(){this.disabled||(this.checked=!this.checked,this.switchChange.emit(this.checked))}connectedCallback(){this.onSwitchClick=k((()=>this.onStateChange()),f)}render(){return i(s,{key:"7736911aa53d3e8763a7dd0a71fd72edf34e9d55"},i("slot",{key:"667c99e44b9a358354ab436cef71788043062769",name:"left-slot"}),i("div",{key:"20ccf041d5282a6f6a07b509e9e3e57ab7c4f898",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:"7e9206b97182a94f1fb74b490ee4e06396e6db33",class:"icon-square",part:"icon-square"},i("kv-icon",{key:"6130a01087284d9fc14c8954d35d54d019f9d2d0",name:o.CheckState,part:"icon-svg"}))),i("slot",{key:"17367d117ac247c86990d4f6ef59c2dafa114ec0",name:"right-slot"}))}};T.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{--off-background-color:var(--switch-background-off);--on-background-color:var(--switch-background-on);--disabled-background-color:var(--switch-background-disabled);--switch-icon-color:var(--switch-icon-color-default);--switch-disabled-icon-color:var(--switch-icon-color-disabled);--switch-height-large:var(--switch-height-regular);--switch-height-small:var(--switch-height-compact);--switch-width-large:var(--switch-width-regular);--switch-width-small:var(--switch-width-compact);--switch-icon-size-large:var(--switch-icon-size-regular);--switch-icon-size-small:var(--switch-icon-size-compact);--switch-padding-large:var(--spacing-2xs);--switch-padding-small:2.5px;display:flex;align-items:center;gap:var(--spacing-md)}.switch-button{display:flex;box-sizing:border-box;border-radius:var(--switch-radius-default);background-color:var(--off-background-color);transition:background-color 0.3s ease-out;cursor:pointer}.switch-button--disabled{background-color:var(--disabled-background-color);cursor:not-allowed;user-select:none}.switch-button--disabled .icon-square kv-icon{--icon-color:var(--switch-disabled-icon-color)}.switch-button--on:not(.switch-button--disabled){background-color:var(--on-background-color)}.switch-button--large{height:var(--switch-height-large);width:var(--switch-width-large)}.switch-button--large .icon-square{width:var(--switch-icon-size-large);height:var(--switch-icon-size-large);padding:var(--switch-padding-large)}.switch-button--large .icon-square kv-icon{--icon-width:calc(var(--switch-icon-size-large) - var(--switch-padding-large) * 2);--icon-height:calc(var(--switch-icon-size-large) - var(--switch-padding-large) * 2)}.switch-button--large.switch-button--on .icon-square{transform:translateX(calc(var(--switch-width-large) - var(--switch-icon-size-large)))}.switch-button--small{height:var(--switch-height-small);width:var(--switch-width-small)}.switch-button--small .icon-square{width:var(--switch-icon-size-small);height:var(--switch-icon-size-small);padding:var(--switch-padding-small)}.switch-button--small .icon-square kv-icon{--icon-width:calc(var(--switch-icon-size-small) - var(--switch-padding-small) * 2);--icon-height:calc(var(--switch-icon-size-small) - var(--switch-padding-small) * 2)}.switch-button--small.switch-button--on .icon-square{transform:translateX(calc(var(--switch-width-small) - var(--switch-icon-size-small)))}.icon-square{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;transition:transform 0.3s ease-out}.icon-square kv-icon{--icon-color:var(--switch-icon-color)}';export{O as kv_relative_time_picker,T as kv_switch_button}