@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
5 lines (4 loc) • 22.4 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 x,b as p,c as I,e as D,f as g,g as N,h as T,i as H,j as S,l as z,m as E}from"./QPBXEGXZ.js";import{b as w,c as k}from"./5VPUXQOI.js";import{b as d}from"./XDKVBD6O.js";import{b}from"./3FSOG4LN.js";import{d as L}from"./CKRTMNFR.js";import{b as f}from"./5RDOSP2E.js";import{e as U}from"./3ADX47DD.js";import{a as C,d as $}from"./HPN2C7M6.js";import"./JOSABGK6.js";import"./NNVH7JUI.js";import{E as A,F as r,R as V,c as P,d as m,q as y}from"./BJZTU5BQ.js";var t={button:"button",buttonBottomLeft:"button--bottom-left",buttonBottomRight:"button--bottom-right",buttonFractionalSecondDown:"button--fractionalSecond-down",buttonFractionalSecondUp:"button--fractionalSecond-up",buttonHourDown:"button--hour-down",buttonHourUp:"button--hour-up",buttonMeridiemDown:"button--meridiem-down",buttonMeridiemUp:"button--meridiem-up",buttonMinuteDown:"button--minute-down",buttonMinuteUp:"button--minute-up",buttonSecondDown:"button--second-down",buttonSecondUp:"button--second-up",buttonTopLeft:"button--top-left",buttonTopRight:"button--top-right",column:"column",decimalSeparator:"decimal-separator",delimiter:"delimiter",fractionalSecond:"fractionalSecond",hour:"hour",hourSuffix:"hour-suffix",input:"input",inputFocus:"inputFocus",meridiem:"meridiem",minute:"minute",minuteSuffix:"minute-suffix",second:"second",secondSuffix:"second-suffix",showMeridiem:"show-meridiem",showSecond:"show-second","scale-s":"scale-s","scale-m":"scale-m","scale-l":"scale-l",timePicker:"time-picker",meridiemStart:"meridiem--start"},q=P`:host{display:inline-block}.time-picker{display:flex;-webkit-user-select:none;user-select:none;align-items:center;font-weight:var(--calcite-font-weight-medium);--tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);--tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);border-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round));color:var(--calcite-time-picker-color, var(--calcite-color-text-1));background-color:var(--calcite-time-picker-background-color, var(--calcite-color-foreground-1))}.time-picker .column{display:flex;flex-direction:column}.time-picker .meridiem--start{order:-1}.time-picker .button{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-time-picker-background-color, var(--calcite-color-foreground-1))}.time-picker .button:hover,.time-picker .button:focus{outline:2px solid transparent;outline-offset:2px;z-index:var(--calcite-z-index-header);outline-offset:0;background-color:var(--calcite-time-picker-button-background-color-hover, var(--calcite-color-foreground-2))}.time-picker .button:active{background-color:var(--calcite-time-picker-button-background-color-press, var(--calcite-color-foreground-3))}.time-picker .button.top-left{border-start-start-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round))}.time-picker .button.bottom-left{border-end-start-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round))}.time-picker .button.top-right{border-start-end-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round))}.time-picker .button.bottom-right{border-end-end-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round))}.time-picker .button calcite-icon{color:var(--calcite-time-picker-icon-color, var(--calcite-color-text-3))}.time-picker .input{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;font-weight:var(--calcite-font-weight-medium);background-color:var(--calcite-time-picker-background-color, var(--calcite-color-foreground-1))}.time-picker .input:hover{box-shadow:inset 0 0 0 2px var(--calcite-time-picker-input-border-color-hover, var(--calcite-color-foreground-2));z-index:var(--calcite-z-index-header)}.time-picker .input:focus,.time-picker .input:hover:focus{outline:2px solid transparent;outline-offset:2px;outline-offset:0}.time-picker .input.inputFocus,.time-picker .input:hover.inputFocus{box-shadow:inset 0 0 0 2px var(--calcite-time-picker-input-border-color-press, var(--calcite-color-brand));z-index:var(--calcite-z-index-header)}.time-picker.scale-s{font-size:var(--calcite-font-size--1)}.time-picker.scale-s .button,.time-picker.scale-s .input{padding-inline:var(--calcite-spacing-md);padding-block:var(--calcite-spacing-xxs)}.time-picker.scale-s:not(.show-meridiem) .delimiter:last-child{padding-inline-end:var(--calcite-spacing-md)}.time-picker.scale-m{font-size:var(--calcite-font-size-0)}.time-picker.scale-m .button,.time-picker.scale-m .input{padding-inline:var(--calcite-spacing-xl);padding-block:var(--calcite-spacing-sm)}.time-picker.scale-m:not(.show-meridiem) .delimiter:last-child{padding-inline-end:var(--calcite-spacing-xl)}.time-picker.scale-l{font-size:var(--calcite-font-size-1)}.time-picker.scale-l .button,.time-picker.scale-l .input{padding-inline:var(--calcite-spacing-xxl);padding-block:var(--calcite-spacing-md)}.time-picker.scale-l:not(.show-meridiem) .delimiter:last-child{padding-inline-end:var(--calcite-spacing-xxl)}:host([hidden]){display:none}[hidden]{display:none}`;function G(v){return v.charAt(0).toUpperCase()+v.slice(1)}var F=class extends A{constructor(){super(),this.pointerActivated=!1,this.messages=L(),this.localizedDecimalSeparator=".",this.hourFormat="user",this.scale="m",this.step=60,this.value=null,this.calciteTimePickerChange=y({cancelable:!1}),this.listen("blur",this.blurHandler),this.listen("keydown",this.keyDownHandler),this.listen("pointerdown",this.pointerDownHandler)}static{this.properties={activeEl:[16,{},{state:!0}],effectiveHourFormat:[16,{},{state:!0}],fractionalSecond:[16,{},{state:!0}],hour:[16,{},{state:!0}],localizedDecimalSeparator:[16,{},{state:!0}],localizedFractionalSecond:[16,{},{state:!0}],localizedHour:[16,{},{state:!0}],localizedHourSuffix:[16,{},{state:!0}],localizedMeridiem:[16,{},{state:!0}],localizedMinute:[16,{},{state:!0}],localizedMinuteSuffix:[16,{},{state:!0}],localizedSecond:[16,{},{state:!0}],localizedSecondSuffix:[16,{},{state:!0}],meridiem:[16,{},{state:!0}],minute:[16,{},{state:!0}],second:[16,{},{state:!0}],showFractionalSecond:[16,{},{state:!0}],showSecond:[16,{},{state:!0}],hourFormat:[3,{},{reflect:!0}],messageOverrides:[0,{},{attribute:!1}],numberingSystem:1,scale:[3,{},{reflect:!0}],step:[11,{},{reflect:!0,type:Number}],value:1}}static{this.shadowRootOptions={mode:"open",delegatesFocus:!0}}static{this.styles=q}async setFocus(){await $(this),this.el?.focus()}connectedCallback(){super.connectedCallback(),this.updateLocale(),this.toggleSecond()}willUpdate(e){e.has("step")&&(this.hasUpdated||this.step!==60)&&this.toggleSecond(),e.has("value")&&(this.hasUpdated||this.value!==null)&&this.setValue(this.value),(e.has("hourFormat")||e.has("messages"))&&this.updateLocale()}blurHandler(){this.activeEl=void 0,this.pointerActivated=!1}keyDownHandler(e){this.pointerActivated=!1;let{defaultPrevented:i,key:a}=e;if(!i)switch(this.activeEl){case this.hourEl:a==="ArrowRight"&&(this.focusPart("minute"),e.preventDefault());break;case this.minuteEl:switch(a){case"ArrowLeft":this.focusPart("hour"),e.preventDefault();break;case"ArrowRight":this.step!==60?(this.focusPart("second"),e.preventDefault()):this.effectiveHourFormat==="12"&&(this.focusPart("meridiem"),e.preventDefault());break}break;case this.secondEl:switch(a){case"ArrowLeft":this.focusPart("minute"),e.preventDefault();break;case"ArrowRight":this.showFractionalSecond?this.focusPart("fractionalSecond"):this.effectiveHourFormat==="12"&&(this.focusPart("meridiem"),e.preventDefault());break}break;case this.fractionalSecondEl:switch(a){case"ArrowLeft":this.focusPart("second"),e.preventDefault();break;case"ArrowRight":this.effectiveHourFormat==="12"&&(this.focusPart("meridiem"),e.preventDefault());break}break;case this.meridiemEl:switch(a){case"ArrowLeft":this.showFractionalSecond?this.focusPart("fractionalSecond"):this.step!==60?(this.focusPart("second"),e.preventDefault()):(this.focusPart("minute"),e.preventDefault());break}break}}pointerDownHandler(){this.pointerActivated=!0}async focusPart(e){await $(this),this[`${e||"hour"}El`]?.focus()}decrementHour(){let e=this.hour?parseInt(this.hour)===0?23:parseInt(this.hour)-1:0;this.setValuePart("hour",e)}decrementMeridiem(){let e=this.meridiem==="PM"?"AM":"PM";this.setValuePart("meridiem",e)}decrementMinuteOrSecond(e){let i;if(d(this[e])){let a=parseInt(this[e]);i=a===0?59:a-1}else i=59;this.setValuePart(e,i)}decrementMinute(){this.decrementMinuteOrSecond("minute")}decrementSecond(){this.decrementMinuteOrSecond("second")}focusHandler(e){this.pointerActivated||(this.activeEl=e.currentTarget)}fractionalSecondKeyDownHandler(e){let{key:i}=e;if(b.includes(i)){let{stepPrecision:a}=this,s=parseInt(this.fractionalSecond),o=s.toString().length,c;o>=a?c=i.padStart(a,"0"):o<a&&(c=`${s}${i}`.padStart(a,"0")),this.setValuePart("fractionalSecond",parseFloat(`0.${c}`))}else switch(i){case"Backspace":case"Delete":this.setValuePart("fractionalSecond",null);break;case"ArrowDown":e.preventDefault(),this.nudgeFractionalSecond("down");break;case"ArrowUp":e.preventDefault(),this.nudgeFractionalSecond("up");break;case" ":e.preventDefault();break}}fractionalSecondDownClickHandler(){this.activeEl=this.fractionalSecondEl,this.fractionalSecondEl.focus(),this.nudgeFractionalSecond("down")}fractionalSecondUpClickHandler(){this.activeEl=this.fractionalSecondEl,this.fractionalSecondEl.focus(),this.nudgeFractionalSecond("up")}hourDownClickHandler(){this.activeEl=this.hourEl,this.hourEl.focus(),this.decrementHour()}hourKeyDownHandler(e){let{key:i}=e;if(b.includes(i)){let a=parseInt(i),s;if(d(this.hour))switch(this.effectiveHourFormat){case"12":s=this.hour==="01"&&a>=0&&a<=2?`1${a}`:a;break;case"24":this.hour==="01"?s=`1${a}`:this.hour==="02"&&a>=0&&a<=3?s=`2${a}`:s=a;break}else s=a;this.setValuePart("hour",s)}else switch(i){case"Backspace":case"Delete":this.setValuePart("hour",null);break;case"ArrowDown":e.preventDefault(),this.decrementHour();break;case"ArrowUp":e.preventDefault(),this.incrementHour();break;case" ":e.preventDefault();break}}hourUpClickHandler(){this.activeEl=this.hourEl,this.hourEl.focus(),this.incrementHour()}incrementMeridiem(){let e=this.meridiem==="AM"?"PM":"AM";this.setValuePart("meridiem",e)}incrementHour(){let e=d(this.hour)?this.hour==="23"?0:parseInt(this.hour)+1:1;this.setValuePart("hour",e)}incrementMinuteOrSecond(e){let i=d(this[e])?this[e]==="59"?0:parseInt(this[e])+1:0;this.setValuePart(e,i)}incrementMinute(){this.incrementMinuteOrSecond("minute")}incrementSecond(){this.incrementMinuteOrSecond("second")}inputClickHandler(e){this.activeEl=e.target}meridiemUpClickHandler(){this.activeEl=this.meridiemEl,this.meridiemEl.focus(),this.incrementMeridiem()}meridiemKeyDownHandler(e){switch(e.key){case"a":this.setValuePart("meridiem","AM");break;case"p":this.setValuePart("meridiem","PM");break;case"Backspace":case"Delete":this.setValuePart("meridiem",null);break;case"ArrowUp":e.preventDefault(),this.incrementMeridiem();break;case"ArrowDown":e.preventDefault(),this.decrementMeridiem();break;case" ":e.preventDefault();break}}meridiemDownClickHandler(){this.activeEl=this.meridiemEl,this.meridiemEl.focus(),this.decrementMeridiem()}minuteDownClickHandler(){this.activeEl=this.minuteEl,this.minuteEl.focus(),this.decrementMinute()}minuteUpClickHandler(){this.activeEl=this.minuteEl,this.minuteEl.focus(),this.incrementMinute()}minuteKeyDownHandler(e){let{key:i}=e;if(b.includes(i)){let a=parseInt(i),s;if(d(this.minute)&&this.minute.startsWith("0")){let o=parseInt(this.minute);s=o>x?a:`${o}${a}`}else s=a;this.setValuePart("minute",s)}else switch(i){case"Backspace":case"Delete":this.setValuePart("minute",null);break;case"ArrowDown":e.preventDefault(),this.decrementMinute();break;case"ArrowUp":e.preventDefault(),this.incrementMinute();break;case" ":e.preventDefault();break}}nudgeFractionalSecond(e){let i=k(this.step),{stepPrecision:a}=this,s=parseInt(this.fractionalSecond),o=parseFloat(`0.${this.fractionalSecond}`),c,n,u,l;e==="up"&&(c=isNaN(s)?0:o+i,n=parseFloat(c.toFixed(a)),u=k(n),l=n<1&&w(u)>0?p(u,a):"".padStart(a,"0")),e==="down"&&(c=isNaN(s)||s===0?1-i:o-i,n=parseFloat(c.toFixed(a)),u=k(n),l=n<1&&w(u)>0&&Math.sign(u)===1?p(u,a):"".padStart(a,"0")),this.setValuePart("fractionalSecond",l)}sanitizeValue(e){let{hour:i,minute:a,second:s,fractionalSecond:o}=E(e);if(o){let c=this.sanitizeFractionalSecond(o);return`${i}:${a}:${s}.${c}`}return H(e)&&e}sanitizeFractionalSecond(e){let{stepPrecision:i}=this;return e&&i!==e.length?parseFloat(`0.${e}`).toFixed(i).replace("0.",""):e}secondKeyDownHandler(e){let{key:i}=e;if(b.includes(i)){let a=parseInt(i),s;if(d(this.second)&&this.second.startsWith("0")){let o=parseInt(this.second);s=o>x?a:`${o}${a}`}else s=a;this.setValuePart("second",s)}else switch(i){case"Backspace":case"Delete":this.setValuePart("second",null);break;case"ArrowDown":e.preventDefault(),this.decrementSecond();break;case"ArrowUp":e.preventDefault(),this.incrementSecond();break;case" ":e.preventDefault();break}}secondDownClickHandler(){this.activeEl=this.secondEl,this.secondEl.focus(),this.decrementSecond()}secondUpClickHandler(){this.activeEl=this.secondEl,this.secondEl.focus(),this.incrementSecond()}setHourEl(e){this.hourEl=e}setMeridiemEl(e){this.meridiemEl=e}setMinuteEl(e){this.minuteEl=e}setSecondEl(e){this.secondEl=e}setFractionalSecondEl(e){this.fractionalSecondEl=e}setValue(e){if(H(e)){let{hour:i,minute:a,second:s,fractionalSecond:o}=E(e),{effectiveHourFormat:c,messages:{_lang:n},numberingSystem:u,step:l}=this,{hour:h,hourSuffix:K,minute:O,minuteSuffix:R,second:_,secondSuffix:B,decimalSeparator:j,fractionalSecond:W,meridiem:M}=z({value:e,locale:n,numberingSystem:u,hour12:c==="12",step:l});this.hour=i,this.minute=a,this.second=s,this.fractionalSecond=this.sanitizeFractionalSecond(o),this.localizedHour=h,this.localizedHourSuffix=K,this.localizedMinute=O,this.localizedMinuteSuffix=R,this.localizedSecond=_,this.localizedDecimalSeparator=j,this.localizedFractionalSecond=W,this.localizedSecondSuffix=B,M&&(this.localizedMeridiem=M,this.meridiem=N(this.hour))}else this.hour=null,this.fractionalSecond=null,this.localizedHour=null,this.localizedHourSuffix=g("hour",this.messages._lang,this.numberingSystem),this.localizedMeridiem=null,this.localizedMinute=null,this.localizedMinuteSuffix=g("minute",this.messages._lang,this.numberingSystem),this.localizedSecond=null,this.localizedDecimalSeparator=D(this.messages._lang,this.numberingSystem),this.localizedFractionalSecond=null,this.localizedSecondSuffix=g("second",this.messages._lang,this.numberingSystem),this.meridiem=null,this.minute=null,this.second=null,this.value=null}setValuePart(e,i){let{effectiveHourFormat:a,messages:{_lang:s},numberingSystem:o,step:c}=this,n=a==="12";if(e==="meridiem"){if(this.meridiem=i,d(this.hour)){let h=parseInt(this.hour);switch(i){case"AM":h>=12&&(this.hour=p(h-12));break;case"PM":h<12&&(this.hour=p(h+12));break}this.localizedHour=S({value:this.hour,part:"hour",locale:s,numberingSystem:o,hour12:n})}}else if(e==="fractionalSecond"){let{stepPrecision:h}=this;typeof i=="number"?this.fractionalSecond=i===0?"".padStart(h,"0"):p(i,h):this.fractionalSecond=i,this.localizedFractionalSecond=S({value:this.fractionalSecond,part:"fractionalSecond",locale:s,numberingSystem:o,hour12:n})}else this[e]=typeof i=="number"?p(i):i,this[`localized${G(e)}`]=S({value:this[e],part:e,locale:s,numberingSystem:o,hour12:n});let u=!1,l;this.hour&&this.minute?(l=`${this.hour}:${this.minute}`,this.showSecond&&(l=`${l}:${this.second??"00"}`,this.showFractionalSecond&&this.fractionalSecond&&(l=`${l}.${this.fractionalSecond}`))):l=null,this.value!==l&&(u=!0),this.value=l,this.localizedMeridiem=this.value?z({hour12:n,locale:s,numberingSystem:o,step:c,value:this.value})?.meridiem||null:S({hour12:n,value:this.meridiem,part:"meridiem",locale:s,numberingSystem:o}),u&&this.calciteTimePickerChange.emit()}toggleSecond(){this.showSecond=this.step<60,this.stepPrecision=w(this.step),this.showFractionalSecond=this.stepPrecision>0}updateLocale(){this.effectiveHourFormat=this.hourFormat==="user"?I(this.messages._lang):this.hourFormat,this.localizedDecimalSeparator=D(this.messages._lang,this.numberingSystem),this.meridiemOrder=T(this.messages._lang),this.setValue(this.sanitizeValue(this.value))}render(){let e=d(this.hour),i=C(this.scale),a=d(this.minute),s=d(this.second),o=d(this.fractionalSecond),c=this.messages._lang!=="bg"&&this.localizedSecondSuffix,n=this.effectiveHourFormat==="12";return m`<div class=${r({[t.timePicker]:!0,[t.showMeridiem]:n,[t.showSecond]:this.showSecond,[t[`scale-${this.scale}`]]:!0})} dir=ltr><div class=${r(t.column)} role=group><span .ariaLabel=${this.messages.hourUp} class=${r({[t.button]:!0,[t.buttonHourUp]:!0,[t.buttonTopLeft]:!0})} =${this.hourUpClickHandler} role=button><calcite-icon icon=chevron-up .scale=${i}></calcite-icon></span><span .ariaLabel=${this.messages.hour} aria-valuemax=23 aria-valuemin=1 .ariaValueNow=${e&&parseInt(this.hour)||"0"} .ariaValueText=${this.hour} class=${r({[t.input]:!0,[t.hour]:!0,[t.inputFocus]:this.activeEl&&this.activeEl===this.hourEl})} =${this.inputClickHandler} =${this.focusHandler} =${this.hourKeyDownHandler} role=spinbutton tabindex=0 ${f(this.setHourEl)}>${this.localizedHour||"--"}</span><span .ariaLabel=${this.messages.hourDown} class=${r({[t.button]:!0,[t.buttonHourDown]:!0,[t.buttonBottomLeft]:!0})} =${this.hourDownClickHandler} role=button><calcite-icon icon=chevron-down .scale=${i}></calcite-icon></span></div><span class=${r({[t.delimiter]:!0,[t.hourSuffix]:!0})}>${this.localizedHourSuffix}</span><div class=${r(t.column)} role=group><span .ariaLabel=${this.messages.minuteUp} class=${r({[t.button]:!0,[t.buttonMinuteUp]:!0})} =${this.minuteUpClickHandler} role=button><calcite-icon icon=chevron-up .scale=${i}></calcite-icon></span><span .ariaLabel=${this.messages.minute} aria-valuemax=12 aria-valuemin=1 .ariaValueNow=${a&&parseInt(this.minute)||"0"} .ariaValueText=${this.minute} class=${r({[t.input]:!0,[t.minute]:!0,[t.inputFocus]:this.activeEl&&this.activeEl===this.minuteEl})} =${this.inputClickHandler} =${this.focusHandler} =${this.minuteKeyDownHandler} role=spinbutton tabindex=0 ${f(this.setMinuteEl)}>${this.localizedMinute||"--"}</span><span .ariaLabel=${this.messages.minuteDown} class=${r({[t.button]:!0,[t.buttonMinuteDown]:!0})} =${this.minuteDownClickHandler} role=button><calcite-icon icon=chevron-down .scale=${i}></calcite-icon></span></div>${this.showSecond&&m`<span class=${r({[t.delimiter]:!0,[t.minuteSuffix]:!0})}>${this.localizedMinuteSuffix}</span>`||""}${this.showSecond&&m`<div class=${r(t.column)} role=group><span .ariaLabel=${this.messages.secondUp} class=${r({[t.button]:!0,[t.buttonSecondUp]:!0})} =${this.secondUpClickHandler} role=button><calcite-icon icon=chevron-up .scale=${i}></calcite-icon></span><span .ariaLabel=${this.messages.second} aria-valuemax=59 aria-valuemin=0 .ariaValueNow=${s&&parseInt(this.second)||"0"} .ariaValueText=${this.second} class=${r({[t.input]:!0,[t.second]:!0,[t.inputFocus]:this.activeEl&&this.activeEl===this.secondEl})} =${this.inputClickHandler} =${this.focusHandler} =${this.secondKeyDownHandler} role=spinbutton tabindex=0 ${f(this.setSecondEl)}>${this.localizedSecond||"--"}</span><span .ariaLabel=${this.messages.secondDown} class=${r({[t.button]:!0,[t.buttonSecondDown]:!0})} =${this.secondDownClickHandler} role=button><calcite-icon icon=chevron-down .scale=${i}></calcite-icon></span></div>`||""}${this.showFractionalSecond&&m`<span class=${r({[t.delimiter]:!0,[t.decimalSeparator]:!0})}>${this.localizedDecimalSeparator}</span>`||""}${this.showFractionalSecond&&m`<div class=${r(t.column)} role=group><span .ariaLabel=${this.messages.fractionalSecondUp} class=${r({[t.button]:!0,[t.buttonFractionalSecondUp]:!0})} =${this.fractionalSecondUpClickHandler} role=button><calcite-icon icon=chevron-up .scale=${i}></calcite-icon></span><span .ariaLabel=${this.messages.fractionalSecond} aria-valuemax=999 aria-valuemin=1 .ariaValueNow=${o&&parseInt(this.fractionalSecond)||"0"} .ariaValueText=${this.localizedFractionalSecond} class=${r({[t.input]:!0,[t.fractionalSecond]:!0,[t.inputFocus]:this.activeEl&&this.activeEl===this.fractionalSecondEl})} =${this.inputClickHandler} =${this.focusHandler} =${this.fractionalSecondKeyDownHandler} role=spinbutton tabindex=0 ${f(this.setFractionalSecondEl)}>${this.localizedFractionalSecond||"".padStart(this.stepPrecision,"-")}</span><span .ariaLabel=${this.messages.fractionalSecondDown} class=${r({[t.button]:!0,[t.buttonFractionalSecondDown]:!0})} =${this.fractionalSecondDownClickHandler} role=button><calcite-icon icon=chevron-down .scale=${i}></calcite-icon></span></div>`||""}${c&&m`<span class=${r({[t.delimiter]:!0,[t.secondSuffix]:!0})}>${this.localizedSecondSuffix}</span>`||""}${n&&m`<div class=${r({[t.column]:!0,[t.meridiemStart]:this.meridiemOrder===0||U(this.el)==="rtl"})} role=group><span .ariaLabel=${this.messages.meridiemUp} class=${r({[t.button]:!0,[t.buttonMeridiemUp]:!0,[t.buttonTopRight]:!0})} =${this.meridiemUpClickHandler} role=button><calcite-icon icon=chevron-up .scale=${i}></calcite-icon></span><span .ariaLabel=${this.messages.meridiem} aria-valuemax=2 aria-valuemin=1 .ariaValueNow=${this.meridiem==="PM"&&"2"||"1"} .ariaValueText=${this.meridiem} class=${r({[t.input]:!0,[t.meridiem]:!0,[t.inputFocus]:this.activeEl&&this.activeEl===this.meridiemEl})} =${this.inputClickHandler} =${this.focusHandler} =${this.meridiemKeyDownHandler} role=spinbutton tabindex=0 ${f(this.setMeridiemEl)}>${this.localizedMeridiem||"--"}</span><span .ariaLabel=${this.messages.meridiemDown} class=${r({[t.button]:!0,[t.buttonMeridiemDown]:!0,[t.buttonBottomRight]:!0})} =${this.meridiemDownClickHandler} role=button><calcite-icon icon=chevron-down .scale=${i}></calcite-icon></span></div>`||""}</div>`}};V("calcite-time-picker",F);export{F as TimePicker};