import{proxyCustomElement as e,HTMLElement as t,createEvent as i,h as r,transformTag as a}from"@stencil/core/internal/client";import{d as l}from"./date-picker.js";const s=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.changeStartTime=i(this,"changeStartTime",7),this.changeEndTime=i(this,"changeEndTime",7),this.handleStartTimeChange=e=>{e.stopPropagation(),this.changeStartTime.emit(e.detail)},this.handleEndTimeChange=e=>{e.stopPropagation(),this.changeEndTime.emit(e.detail)}}componentWillLoad(){this.originalStartTime=this.startTime,this.originalEndTime=this.endTime}render(){return r("div",{key:"8dc6bd4fda6f6e713d422bf0f03b10dd7a613c48",class:"date-pickers"},this.renderStartDatePicker(),this.renderEndDatePicker())}renderStartDatePicker(){if(this.originalStartTime)return r("div",{class:"start-time"},this.renderDatePicker(this.startTimeLabel,this.startTime,!this.startTime,this.handleStartTimeChange))}renderEndDatePicker(){if(this.originalEndTime)return r("div",{class:"end-time"},this.renderDatePicker(this.endTimeLabel,this.endTime,!this.endTime,this.handleEndTimeChange))}renderDatePicker(e,t,i,a){const l=this.platform&&r("limebb-date-picker",{platform:this.platform,context:this.context,type:this.type,value:t,onChange:a,invalid:i});return[r("div",{class:"label-group"},r("span",{class:"circle"}),r("span",{class:"label"},e),r("span",{class:"line"})),l||r("limel-date-picker",{type:this.type,value:t,format:this.timeFormat,language:this.language,onChange:a,invalid:i})]}static get style(){return":host(limebb-date-range){isolation:isolate;display:block;position:relative}*{box-sizing:border-box}.date-pickers{display:grid;grid-template-columns:repeat(auto-fit, minmax(13.5rem, 1fr));gap:0.5rem;padding:0.75rem 1rem 1.25rem 1rem}.label-group{display:flex;align-items:center;margin-bottom:0.25rem}.end-time .label-group{flex-direction:row-reverse}.label-group .label{font-size:0.75rem;padding:0 0.25rem}.label-group .circle{flex-shrink:0;width:0.5rem;height:0.5rem;border-radius:50%}.start-time .label-group .circle{background-color:rgb(var(--color-green-default))}.end-time .label-group .circle{background-color:rgb(var(--color-coral-default))}.label-group .line{flex-grow:1;height:0.25rem;border-radius:1rem}.start-time .label-group .line{background-image:linear-gradient(to right, rgb(var(--color-green-light)), rgb(var(--contrast-400)) 30%)}.end-time .label-group .line{background-image:linear-gradient(to left, rgb(var(--color-coral-light)), rgb(var(--contrast-400)) 30%)}.date-pickers:has(>:last-child:nth-child(2)) .start-time .line{margin-right:-0.5rem}.date-pickers:has(>:last-child:nth-child(2)) .end-time .line{margin-left:-0.5rem}"}},[1,"limebb-date-range",{platform:[16],context:[16],startTime:[16],endTime:[16],startTimeLabel:[1,"start-time-label"],endTimeLabel:[1,"end-time-label"],language:[1],timeFormat:[1,"time-format"],type:[1]}]),n=s,o=function(){"undefined"!=typeof customElements&&["limebb-date-range","limebb-date-picker"].forEach((e=>{switch(e){case"limebb-date-range":customElements.get(a(e))||customElements.define(a(e),s);break;case"limebb-date-picker":customElements.get(a(e))||l()}}))};export{n as LimebbDateRange,o as defineCustomElement}