@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
5 lines (4 loc) • 24.1 kB
JavaScript
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
v3.2.1 */
import{a as nt}from"./CQSTX4F7.js";import{a as st}from"./LAHMKNMM.js";import{a as it,b as x}from"./NC74EUNL.js";import{a as et,b as D,c as l,d as F,g as at,h as c,i as k}from"./UKPY76M7.js";import{g as L,h as W,i as H,k as g}from"./XDKVBD6O.js";import{a as tt}from"./FN45KTPK.js";import{a as Z,c as J,e as Q,h as X}from"./ZAT242GT.js";import{c as j,d as K}from"./JSDTVKI3.js";import{a as U,c as C,d as Y,e as _,f as q,g as y,h as G}from"./YCSOVIAT.js";import{a as M}from"./XE72EHW2.js";import{a as B,b as R}from"./BVJFCLMH.js";import"./OQOKN4KP.js";import{b as A}from"./3FSOG4LN.js";import{d as N}from"./CKRTMNFR.js";import{b as d}from"./5RDOSP2E.js";import{n as E}from"./3ADX47DD.js";import{a as $,d as z}from"./HPN2C7M6.js";import"./JOSABGK6.js";import{a as w}from"./NNVH7JUI.js";import{E as P,F as r,J as O,R as T,c as V,d as p,h as m,q as f}from"./BJZTU5BQ.js";var lt=V`:host{--calcite-icon-size: 1rem;--calcite-spacing-eighth: .125rem;--calcite-spacing-quarter: .25rem;--calcite-spacing-half: .5rem;--calcite-spacing-three-quarters: .75rem;--calcite-spacing: 1rem;--calcite-spacing-plus-quarter: 1.25rem;--calcite-spacing-plus-half: 1.5rem;--calcite-spacing-double: 2rem;--calcite-menu-min-width: 10rem;--calcite-header-min-height: 3rem;--calcite-footer-min-height: 3rem}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:inline-block;width:100%;overflow:visible;vertical-align:top;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}:host .menu-container .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:inset,left,opacity;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}:host .menu-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}:host .menu-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}:host .menu-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}:host .menu-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}:host .menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}:host([scale=s]){--calcite-toggle-spacing: .5rem;--calcite-internal-input-text-input-padding-inline-end: calc(var(--calcite-toggle-spacing) + 1rem)}:host([scale=m]){--calcite-toggle-spacing: .75rem;--calcite-internal-input-text-input-padding-inline-end: calc(var(--calcite-toggle-spacing) + 1.5rem)}:host([scale=l]){--calcite-toggle-spacing: 1rem;--calcite-internal-input-text-input-padding-inline-end: calc(var(--calcite-toggle-spacing) + 2rem)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.calendar-wrapper{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transform:translateZ(0)}.input-wrapper{position:relative}.input-wrapper .chevron-icon{color:var(--calcite-color-text-3)}.input-wrapper:focus-within .chevron-icon,.input-wrapper:active .chevron-icon,.input-wrapper:hover .chevron-icon{color:var(--calcite-color-text-1)}.input-wrapper:focus-within~.input-wrapper .chevron-icon,.input-wrapper:active~.input-wrapper .chevron-icon,.input-wrapper:hover~.input-wrapper .chevron-icon{color:var(--calcite-color-text-1)}.toggle-icon{position:absolute;display:flex;cursor:pointer;align-items:center;inset-inline-end:0;inset-block:0;padding-inline:var(--calcite-toggle-spacing)}:host([range]) .container{display:flex}:host([range]) .input-container{display:flex;flex:1 1 auto}:host([range]) .input-wrapper{flex:1 1 auto}.divider-container{display:flex;align-items:stretch;border-width:1px;border-left-width:0px;border-right-width:0px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1)}:host([layout=horizontal]) .divider-container{width:1px}.divider{display:inline-block;width:1px;margin-block:var(--calcite-spacing-xxs);background-color:var(--calcite-color-border-2)}:host([layout=vertical]) .divider-container{height:1px;width:100%;border-top-width:0px;border-bottom-width:0px;border-left-width:1px;border-right-width:0px;padding-inline:var(--calcite-spacing-md)}:host([layout=vertical]) .divider-container .divider{margin-top:0;margin-bottom:0;height:1px;width:100%}:host([range][layout=vertical]) .input-wrapper{width:100%}:host([range][layout=vertical]) .input-container{flex-direction:column;align-items:flex-start}.menu-container{--calcite-floating-ui-z-index: var(--calcite-z-index-dropdown);inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}.menu-container .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:inset,left,opacity;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.menu-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.menu-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.menu-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.menu-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}.input .calcite-input__wrapper{margin-top:0}.vertical-chevron-container{display:flex;align-items:center;border-width:1px;border-left-width:0px;border-style:solid;border-color:var(--calcite-color-border-input);padding-inline:var(--calcite-spacing-md);background-color:var(--calcite-color-foreground-1)}.vertical-chevron-container calcite-icon{color:var(--calcite-color-text-3)}.vertical-chevron-container calcite-icon:hover{color:var(--calcite-color-text-1)}:host([range][layout=vertical][scale=s]) .vertical-chevron-container,:host([range][layout=vertical][scale=s]) .divider-container{padding-inline:var(--calcite-spacing-sm)}:host([range][layout=vertical][scale=l]) .vertical-chevron-container,:host([range][layout=vertical][scale=l]) .divider-container{padding-inline:var(--calcite-spacing-lg)}.container:focus-within .vertical-chevron-container calcite-icon,.container:active .vertical-chevron-container calcite-icon,.container:hover .vertical-chevron-container calcite-icon{color:var(--calcite-color-text-1)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}.assistive-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}`,n={assistiveText:"assistive-text",calendarWrapper:"calendar-wrapper",container:"container",dividerContainer:"divider-container",divider:"divider",inputContainer:"input-container",inputNoBottomBorder:"input--no-bottom-border",inputNoRightBorder:"input--no-right-border",inputNoTopBorder:"input--no-top-border",inputNoLeftBorder:"input--no-left-border",inputWrapper:"input-wrapper",input:"input",menu:"menu-container",toggleIcon:"toggle-icon",verticalChevronContainer:"vertical-chevron-container",chevronIcon:"chevron-icon"},rt={validationMessage:"inputDatePickerValidationMessage"};function ct(v){if(!v)return!1;let{year:t}=k(v);return Number(t)<100}function ut(v){let t=new Date().getFullYear();return Math.floor(t/100)*100+v}var S=class extends P{constructor(){super(),this.commonDateSeparators=[".","-","/"],this.dialogId=`date-picker-dialog--${w()}`,this.focusOnOpen=!1,this.focusTrap=st({triggerProp:"open",focusTrapOptions:{onActivate:()=>{this.focusOnOpen&&(this.datePickerEl?.setFocus(),this.focusOnOpen=!1)},allowOutsideClick:!0,clickOutsideDeactivates:!1,initialFocus:!1,setReturnFocus:!1,onDeactivate:()=>{this.open=!1}}})(this),this.transitionProp="opacity",this.placeholderTextId=`calcite-input-date-picker-placeholder-${w()}`,this.rangeStartValueChangedByUser=!1,this.userChangedValue=!1,this._value="",this.valueAsDateChangedExternally=!1,this.messages=N({blocking:!0}),this.focusedInput="start",this.disabled=!1,this.focusTrapDisabled=!1,this.layout="horizontal",this.monthStyle="wide",this.open=!1,this.overlayPositioning="absolute",this.placement=U,this.proximitySelectionDisabled=!1,this.range=!1,this.readOnly=!1,this.required=!1,this.scale="m",this.status="idle",this.validity={valid:!1,badInput:!1,customError:!1,patternMismatch:!1,rangeOverflow:!1,rangeUnderflow:!1,stepMismatch:!1,tooLong:!1,tooShort:!1,typeMismatch:!1,valueMissing:!1},this.calciteInputDatePickerBeforeClose=f({cancelable:!1}),this.calciteInputDatePickerBeforeOpen=f({cancelable:!1}),this.calciteInputDatePickerChange=f({cancelable:!1}),this.calciteInputDatePickerClose=f({cancelable:!1}),this.calciteInputDatePickerOpen=f({cancelable:!1}),this.listen("blur",this.blurHandler),this.listen("keydown",this.keyDownHandler),this.handleDateTimeFormatChange()}static{this.properties={datePickerActiveDate:[16,{},{state:!0}],focusedInput:[16,{},{state:!0}],localeData:[16,{},{state:!0}],disabled:[7,{},{reflect:!0,type:Boolean}],flipPlacements:[0,{},{attribute:!1}],focusTrapDisabled:[7,{},{reflect:!0,type:Boolean}],form:[3,{},{reflect:!0}],headingLevel:[11,{},{type:Number,reflect:!0}],label:1,layout:[3,{},{reflect:!0}],max:[3,{},{reflect:!0}],maxAsDate:[0,{},{attribute:!1}],messageOverrides:[0,{},{attribute:!1}],min:[3,{},{reflect:!0}],minAsDate:[0,{},{attribute:!1}],monthStyle:1,name:[3,{},{reflect:!0}],numberingSystem:[3,{},{reflect:!0}],open:[7,{},{reflect:!0,type:Boolean}],overlayPositioning:[3,{},{reflect:!0}],placement:[3,{},{reflect:!0}],proximitySelectionDisabled:[5,{},{type:Boolean}],range:[7,{},{reflect:!0,type:Boolean}],readOnly:[7,{},{reflect:!0,type:Boolean}],required:[7,{},{reflect:!0,type:Boolean}],scale:[3,{},{reflect:!0}],status:[3,{},{reflect:!0}],validationIcon:[3,{converter:O},{reflect:!0}],validationMessage:1,validity:[0,{},{attribute:!1}],value:1,valueAsDate:[0,{},{attribute:!1}]}}static{this.shadowRootOptions={mode:"open",delegatesFocus:!0}}static{this.styles=lt}get value(){return this._value}set value(t){let e=t!==this._value,a=t===""&&(this.startInput?.value!==""||this.endInput?.value!=="");(e||a)&&(this._value=t,this.valueWatcher(t))}async reposition(t=!1){let{floatingEl:e,referenceEl:a,placement:i,overlayPositioning:s,filteredFlipPlacements:o}=this;return _(this,{floatingEl:e,referenceEl:a,overlayPositioning:s,placement:i,flipPlacements:o,type:"menu"},t)}async setFocus(){await z(this),E(this.el)}connectedCallback(){super.connectedCallback();let{open:t}=this;if(t&&this.openHandler(),this.min&&(this.minAsDate=l(this.min)),this.max&&(this.maxAsDate=l(this.max)),Array.isArray(this.value))this.valueAsDate=x(this.value);else if(this.value)try{let e=l(this.value),a=D(e,this.minAsDate,this.maxAsDate);this.valueAsDate=a}catch{this.warnAboutInvalidValue(this.value),this.value=""}else this.valueAsDate&&(this.range&&Array.isArray(this.valueAsDate)?this.value=[c(this.valueAsDate[0]),c(this.valueAsDate[1])]:!this.range&&!Array.isArray(this.valueAsDate)&&(this.value=c(this.valueAsDate)));j(this),J(this),this.setFilteredPlacements(),g.numberFormatOptions={numberingSystem:this.numberingSystem,locale:this.messages._lang,useGrouping:!1},y(this)}async load(){this.handleDateTimeFormatChange(),await this.loadLocaleData(),this.onMinChanged(this.min),this.onMaxChanged(this.max)}willUpdate(t){t.has("disabled")&&(this.hasUpdated||this.disabled!==!1)&&this.handleDisabledAndReadOnlyChange(this.disabled),t.has("readOnly")&&(this.hasUpdated||this.readOnly!==!1)&&this.handleDisabledAndReadOnlyChange(this.readOnly),t.has("valueAsDate")&&this.valueAsDateWatcher(this.valueAsDate),t.has("flipPlacements")&&this.flipPlacementsHandler(),t.has("min")&&this.onMinChanged(this.min),t.has("max")&&this.onMaxChanged(this.max),t.has("open")&&(this.hasUpdated||this.open!==!1)&&this.openHandler(),t.has("overlayPositioning")&&(this.hasUpdated||this.overlayPositioning!=="absolute")&&this.reposition(!0),(t.has("numberingSystem")||t.has("messages"))&&this.handleDateTimeFormatChange(),t.has("layout")&&(this.hasUpdated||this.layout!=="horizontal")&&this.setReferenceEl(),t.has("messages")&&this.loadLocaleData()}updated(){B(this)}loaded(){this.localizeInputValues(),y(this)}disconnectedCallback(){super.disconnectedCallback(),K(this),Q(this),G(this)}handleDisabledAndReadOnlyChange(t){t||(this.open=!1)}valueWatcher(t){if(!this.userChangedValue){let e;Array.isArray(t)?e=x(t):t?e=l(t):e=void 0,!this.valueAsDateChangedExternally&&e!==this.valueAsDate&&(this.valueAsDate=e),this.localizeInputValues()}this.userChangedValue=!1}valueAsDateWatcher(t){let e=Array.isArray(t)?[c(t[0]),c(t[1])]:c(t);this.datePickerActiveDate=Array.isArray(t)?t[0]:t,this.value!==e&&(this.valueAsDateChangedExternally=!0,this.value=e,this.valueAsDateChangedExternally=!1)}flipPlacementsHandler(){this.setFilteredPlacements(),this.reposition(!0)}onMinChanged(t){this.minAsDate=l(t)}onMaxChanged(t){this.maxAsDate=l(t)}openHandler(){M(this),!(this.disabled||this.readOnly)&&this.reposition(!0)}calciteInternalInputInputHandler(t){let e=t.target,a=e.value,i=this.parseNumerals(a),s=this.formatNumerals(i);e.value=s;let{year:o}=at(a,this.localeData);if(o&&o.length<4)return;let u=F(a,this.localeData);et(u,this.min,this.max)&&(this.datePickerActiveDate=u)}calciteInternalInputBlurHandler(){this.commitValue()}handleDateTimeFormatChange(){let t={numberingSystem:L(this.numberingSystem)};this.dateTimeFormat=new Intl.DateTimeFormat(H(W(this.messages._lang)),t)}setReferenceEl(){let{focusedInput:t,layout:e,endWrapper:a,startWrapper:i}=this;this.referenceEl=t==="end"||e==="vertical"?a||i:i||a,requestAnimationFrame(()=>y(this))}onInputWrapperPointerDown(){this.currentOpenInput=this.focusedInput}onInputWrapperClick(t){let{range:e,endInput:a,startInput:i,currentOpenInput:s}=this,u=t.currentTarget.getAttribute("data-position");t.composedPath().find(b=>b.classList?.contains(n.toggleIcon))&&(u==="start"?i:a).setFocus(),(!e||!this.open||s===u)&&(this.open=!this.open)}setFilteredPlacements(){let{el:t,flipPlacements:e}=this;this.filteredFlipPlacements=e?Y(e,t):null}setTransitionEl(t){t&&(this.transitionEl=t)}onLabelClick(){this.setFocus()}onBeforeOpen(){this.calciteInputDatePickerBeforeOpen.emit()}onOpen(){this.focusTrap.activate(),this.calciteInputDatePickerOpen.emit()}onBeforeClose(){this.calciteInputDatePickerBeforeClose.emit()}onClose(){this.calciteInputDatePickerClose.emit(),q(this),this.focusTrap.deactivate(),this.focusOnOpen=!1,this.datePickerEl?.reset()}syncHiddenFormInput(t){nt("date",this,t)}setStartInput(t){this.startInput=t}setEndInput(t){this.endInput=t}blurHandler(){this.open=!1}commitValue(){let{focusedInput:t,value:e}=this,a=`${t}Input`,i=this[a].value,s=F(i,this.localeData),o=c(s),u=Array.isArray(e);if(this.range){let h=t==="start"?0:1;if(u){if(o===e[h])return;s?(this.setRangeValue([t==="start"?s:l(e[0]),t==="end"?s:l(e[1])]),this.localizeInputValues()):this.setRangeValue([t==="end"&&l(e[0]),t==="start"&&l(e[1])])}else s&&(this.setRangeValue([t==="start"?s:l(e[0]),t==="end"?s:l(e[1])]),this.localizeInputValues())}else{if(o===e)return;this.setValue(s),this.localizeInputValues()}}keyDownHandler(t){let{defaultPrevented:e,key:a}=t;if(e)return;let i=t.composedPath().some(s=>s.tagName==="CALCITE-SELECT");a==="Enter"?(t.preventDefault(),this.commitValue(),this.shouldFocusRangeEnd()?this.endInput?.setFocus():this.shouldFocusRangeStart()&&this.startInput?.setFocus(),Z(this)&&this.restoreInputFocus(!0)):(a==="ArrowDown"||a==="ArrowUp")&&!i?(this.open=!0,this.focusOnOpen=!0,t.preventDefault()):this.open&&a==="Escape"&&(this.open=!1,t.preventDefault(),this.restoreInputFocus(!0))}startInputFocus(){this.focusedInput="start"}endInputFocus(){this.focusedInput="end"}setFloatingEl(t){this.floatingEl=t,y(this)}setStartWrapper(t){this.startWrapper=t,this.setReferenceEl()}setEndWrapper(t){this.endWrapper=t,this.setReferenceEl()}setDatePickerRef(t){t&&(this.datePickerEl=t,this.focusTrap.overrideFocusTrapEl(t))}async loadLocaleData(){g.numberFormatOptions={numberingSystem:this.numberingSystem,locale:this.messages._lang,useGrouping:!1},this.localeData=await it(this.messages._lang),this.localizeInputValues()}handleDateChange(t){this.range||(t.stopPropagation(),this.setValue(t.target.valueAsDate),this.localizeInputValues(),this.restoreInputFocus())}shouldFocusRangeStart(){let t=this.value[0];return!!(this.value[1]&&!t&&this.focusedInput==="end"&&this.startInput)}shouldFocusRangeEnd(){let t=this.value[0],e=this.value[1];return!!(t&&!e&&this.focusedInput==="start"&&this.endInput)}handleDateRangeChange(t){if(!this.range)return;t.stopPropagation();let e=t.target.valueAsDate;this.setRangeValue(e),this.localizeInputValues(),this.restoreInputFocus()}restoreInputFocus(t=!1){if(!this.range){this.startInput.setFocus(),this.open=!1;return}if(t){this.focusInput();return}this.rangeStartValueChangedByUser=this.focusedInput==="start",this.focusedInput="end",!(this.shouldFocusRangeStart()||this.rangeStartValueChangedByUser)&&(this.open=!1,this.focusInput())}localizeInputValues(){let t=D(this.range?Array.isArray(this.valueAsDate)&&this.valueAsDate[0]||void 0:this.valueAsDate,this.minAsDate,this.maxAsDate),e=this.range?D(Array.isArray(this.valueAsDate)&&this.valueAsDate[1]||void 0,this.minAsDate,this.maxAsDate):null;this.setInputValue((t&&this.dateTimeFormat.format(t))??"","start"),this.setInputValue((this.range&&e&&this.dateTimeFormat.format(e))??"","end")}setInputValue(t,e="start"){let a=this[`${e}Input`];a&&(a.value=t)}setRangeValue(t){if(!this.range)return;let{value:e}=this,a=Array.isArray(e),i=Array.isArray(t),s=i?t[0]:null,o=i?c(s):"";o&&(o=this.getNormalizedDate(o));let u=i?t[1]:null,h=i?c(u):"";h&&(h=this.getNormalizedDate(h));let I=o||h?[o,h]:"";if(I===e)return;this.userChangedValue=!0,this.value=I,this.valueAsDate=I?x(I):void 0;let b=this.calciteInputDatePickerChange.emit();b&&b.defaultPrevented&&(this.value=e,a?(this.setInputValue(e[0],"start"),this.setInputValue(e[1],"end")):(this.value=e,this.setInputValue(e)))}setValue(t){if(this.range)return;let e=this.value,a=c(t);if(a=this.getNormalizedDate(a),a===e)return;this.userChangedValue=!0,this.valueAsDate=a?l(a):void 0,this.value=a||"",this.calciteInputDatePickerChange.emit().defaultPrevented&&(this.value=e,this.setInputValue(e))}warnAboutInvalidValue(t){console.warn(`The specified value "${t}" does not conform to the required format, "YYYY-MM-DD".`)}formatNumerals(t){return t?t.split("").map(e=>this.commonDateSeparators?.includes(e)?this.localeData?.separator:A?.includes(e)?g?.numberFormatter?.format(Number(e)):e).join(""):""}parseNumerals(t){return t?t.split("").map(e=>A.includes(e)?g.delocalize(e):e).join(""):""}getNormalizedDate(t){if(!t)return"";if(!ct(t))return t;let{day:e,month:a,year:i}=k(t);return`${ut(Number(i))}-${a}-${e}`}focusInput(){(this.focusedInput==="start"?this.startInput:this.endInput).setFocus()}render(){let{disabled:t,messages:{_lang:e},messages:a,numberingSystem:i,readOnly:s}=this;return g.numberFormatOptions={numberingSystem:i,locale:e,useGrouping:!1},R({disabled:this.disabled,children:p`${this.localeData&&p`<div class=${r(n.container)}><div class=${r(n.inputContainer)}><div class=${r(n.inputWrapper)} data-position=start =${this.onInputWrapperClick} =${this.onInputWrapperPointerDown} ${d(this.setStartWrapper)}><calcite-input-text aria-controls=${this.dialogId??m} aria-describedby=${this.placeholderTextId??m} aria-errormessage=${rt.validationMessage} aria-autocomplete=none .ariaExpanded=${this.open} aria-haspopup=dialog .ariaInvalid=${this.status==="invalid"} class=${r({[n.input]:!0,[n.inputNoBottomBorder]:this.layout==="vertical"&&this.range,[n.inputNoRightBorder]:this.range})} .disabled=${t} icon=calendar .label=${this.label} =${this.calciteInternalInputInputHandler} =${this.calciteInternalInputBlurHandler} =${this.startInputFocus} .placeholder=${this.localeData?.placeholder} .readOnly=${s} role=combobox .scale=${this.scale} .status=${this.status} ${d(this.setStartInput)}></calcite-input-text>${!this.readOnly&&!this.range&&this.renderToggleIcon(this.open&&this.focusedInput==="start")||""}<span aria-hidden=true class=${r(n.assistiveText)} id=${this.placeholderTextId??m}>${a.dateFormat.replace("{format}",this.localeData?.placeholder)}</span></div><div .ariaHidden=${!this.open} .ariaLabel=${a.chooseDate} aria-live=polite aria-modal=true class=${r(n.menu)} id=${this.dialogId??m} role=dialog ${d(this.setFloatingEl)}><div class=${r({[n.calendarWrapper]:!0,[C.animation]:!0,[C.animationActive]:this.open})} ${d(this.setTransitionEl)}><calcite-date-picker .activeDate=${this.datePickerActiveDate} .activeRange=${this.focusedInput} .headingLevel=${this.headingLevel} .layout=${this.layout} .max=${this.max} .maxAsDate=${this.maxAsDate} .messageOverrides=${this.messageOverrides} .min=${this.min} .minAsDate=${this.minAsDate} .monthStyle=${this.monthStyle} .numberingSystem=${i} =${this.handleDateChange} =${this.handleDateRangeChange} .proximitySelectionDisabled=${this.proximitySelectionDisabled} .range=${this.range} .scale=${this.scale} tabindex=${(this.open?void 0:-1)??m} .valueAsDate=${this.valueAsDate} ${d(this.setDatePickerRef)}></calcite-date-picker></div></div>${this.range&&p`<div class=${r(n.dividerContainer)}><div class=${r(n.divider)}></div></div>`||""}${this.range&&p`<div class=${r(n.inputWrapper)} data-position=end =${this.onInputWrapperClick} =${this.onInputWrapperPointerDown} ${d(this.setEndWrapper)}><calcite-input-text aria-controls=${this.dialogId??m} aria-autocomplete=none .ariaExpanded=${this.open} aria-haspopup=dialog class=${r({[n.input]:!0,[n.inputNoTopBorder]:this.layout==="vertical"&&this.range,[n.inputNoLeftBorder]:this.layout==="horizontal"&&this.range,[n.inputNoRightBorder]:this.layout==="vertical"&&this.range})} .disabled=${t} icon=calendar .label=${this.label} =${this.calciteInternalInputInputHandler} =${this.calciteInternalInputBlurHandler} =${this.endInputFocus} .placeholder=${this.localeData?.placeholder} .readOnly=${s} role=combobox .scale=${this.scale} .status=${this.status} ${d(this.setEndInput)}></calcite-input-text>${!this.readOnly&&this.layout==="horizontal"&&this.renderToggleIcon(this.open)||""}</div>`||""}</div>${this.range&&this.layout==="vertical"&&p`<div class=${r(n.verticalChevronContainer)}><calcite-icon .icon=${this.open?"chevron-up":"chevron-down"} .scale=${$(this.scale)}></calcite-icon></div>`||""}</div>`||""}${X({component:this})}${this.validationMessage&&this.status==="invalid"?tt({icon:this.validationIcon,id:rt.validationMessage,message:this.validationMessage,scale:this.scale,status:this.status}):null}`})}renderToggleIcon(t){return p`<span class=${r(n.toggleIcon)} tabindex=-1><calcite-icon class=${r(n.chevronIcon)} .icon=${t?"chevron-up":"chevron-down"} .scale=${$(this.scale)}></calcite-icon></span>`}};T("calcite-input-date-picker",S);export{S as InputDatePicker};