@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
3 lines (2 loc) • 18.1 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import{a as X}from"./IBWP5RY2.js";import{a as W}from"./MONAHAME.js";import{b as h}from"./53QSHFZE.js";import{b as u}from"./4PBM4ZLG.js";import{a as Q}from"./VO26MCLG.js";import{a as J}from"./MN4PER7E.js";import{c as j,d as _,e as G}from"./LCVNP3EO.js";import"./5OKRPEGU.js";import{a as V,c as U,e as A,h as N}from"./GTD2HZYS.js";import{a as K}from"./77EQHO2G.js";import"./K7LRDT5O.js";import{a as L}from"./SQ6RHDDF.js";import{a as q}from"./3XLPUKLV.js";import{a as B}from"./3YEM2IPT.js";import"./QUTTHRH3.js";import"./MNIRD7Q7.js";import{e as D}from"./ZQBZ5QPB.js";import"./CIYXQ5G6.js";import{C as l,D as o,E as O,F as r,J as E,Q as M,g as z,h as c,l as t,p}from"./G7AHLVJ5.js";var le=z`: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{display:inline-block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}::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}calcite-time-picker{--calcite-time-picker-color: var(--calcite-input-time-picker-digit-text-color);--calcite-time-picker-icon-color: var(--calcite-input-time-picker-digit-icon-color);--calcite-time-picker-border-color: var(--calcite-input-time-picker-border-color);--calcite-time-picker-button-background-color-hover: var(--calcite-input-time-picker-action-background-color-hover);--calcite-time-picker-button-background-color-press: var(--calcite-input-time-picker-action-background-color-press);--calcite-time-picker-input-border-color-hover: var(--calcite-input-time-picker-digit-border-color-hover);--calcite-time-picker-input-border-color-press: var(--calcite-input-time-picker-digit-border-color-press)}.container{--calcite-icon-color: var( --calcite-input-time-picker-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-text-3)) );align-items:center;background-color:var(--calcite-input-time-picker-input-background-color, var(--calcite-color-foreground-1));border:1px solid var(--calcite-input-time-picker-input-border-color, var(--calcite-color-border-input));border-radius:var(--calcite-input-time-picker-input-corner-radius, var(--calcite-corner-radius-none));box-shadow:var(--calcite-input-time-picker-input-shadow, var(--calcite-shadow-none));box-sizing:border-box;display:flex;color:var(--calcite-input-time-picker-input-text-color, var(--calcite-color-text-1));flex-wrap:nowrap;font-weight:var(--calcite-font-weight-normal);inline-size:100%;padding-block:var(--calcite-spacing-base);-webkit-user-select:none;user-select:none}.container:focus-within{border-color:var(--calcite-color-brand);outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.container.read-only{background-color:var(--calcite-color-background);font-weight:var(--calcite-font-weight-medium)}.clock-icon{--calcite-icon-color: var( --calcite-input-time-picker-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-text-3)) )}.hour-suffix,.minute-suffix,.second-suffix{white-space:pre}.input-container{display:flex;flex-grow:1}.input{align-items:center;display:flex;block-size:100%;justify-content:center;min-inline-size:max-content}.input.empty{inline-size:var(--calcite-spacing-xl)}.input:focus,.input:hover:focus{background-color:Highlight;color:HighlightText;outline:2px solid transparent;outline-offset:2px}.toggle-icon{--calcite-icon-color: var(--calcite-input-time-picker-icon-color, var(--calcite-color-text-3));align-items:center;block-size:24px;cursor:pointer;display:flex;inline-size:24px;justify-content:center}.toggle-icon:hover{--calcite-icon-color: var(--calcite-input-time-picker-icon-color-hover, var(--calcite-color-text-1))}:host([scale=s]) .container{block-size:1.5rem;font-size:var(--calcite-font-size-sm);gap:var(--calcite-spacing-sm);padding-inline-start:var(--calcite-spacing-sm);padding-inline-end:var(--calcite-spacing-xxs)}:host([scale=s]) .input-container{line-height:1rem}:host([scale=m]) .container{block-size:2rem;font-size:var(--calcite-font-size);gap:var(--calcite-spacing-md);padding-inline-start:var(--calcite-spacing-md);padding-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .input-container{line-height:1.5rem}:host([scale=l]) .container{block-size:2.75rem;font-size:var(--calcite-font-size-md);gap:var(--calcite-spacing-lg);padding-inline:var(--calcite-spacing-lg)}:host([scale=l]) .input-container{line-height:2.25rem}:host([status=invalid]) .container{border-color:var(--calcite-color-status-danger)}:host([status=invalid]) .container:focus-within{outline:var(--calcite-border-width-md) solid var(--calcite-color-status-danger);outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}calcite-time-picker{--calcite-time-picker-background-color: var(--calcite-input-time-picker-background-color);--calcite-time-picker-border-color: var(--calcite-input-time-picker-border-color, transparent);--calcite-time-picker-corner-radius: var( --calcite-input-time-picker-corner-radius, var(--calcite-corner-radius-round) )}calcite-popover{--calcite-popover-corner-radius: var(--calcite-input-time-picker-corner-radius, var(--calcite-corner-radius-round))}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}.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}:host([hidden]){display:none}[hidden]{display:none}`,i={clockIcon:"clock-icon",container:"container",decimalSeparator:"decimal-separator",empty:"empty",fractionalSecond:"fractional-second",hour:"hour",hourSuffix:"hour-suffix",input:"input",inputContainer:"input-container",meridiem:"meridiem",minute:"minute",minuteSuffix:"minute-suffix",readOnly:"read-only",second:"second",secondSuffix:"second-suffix",toggleIcon:"toggle-icon"},f={inputContainer:"inputContainer",validationMessage:"inputTimePickerValidationMessage"},w={clock:"clock",chevronUp:"chevron-up",chevronDown:"chevron-down"},P=class extends O{constructor(){super(),this.messages=L(),this.containerRef=l(),this.focusSetter=q()(this),this.fractionalSecondRef=l(),this.hourRef=l(),this.meridiemRef=l(),this.minuteRef=l(),this.secondRef=l(),this.time=X(this),this.interactiveContainer=K(this),this.timePickerRef=l(),this.disabled=!1,this.focusTrapDisabled=!1,this.hourFormat="user",this.open=!1,this.overlayPositioning="absolute",this.placement="auto",this.readOnly=!1,this.required=!1,this.scale="m",this.status="idle",this.step=60,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.calciteInputTimePickerBeforeClose=p({cancelable:!1}),this.calciteInputTimePickerBeforeOpen=p({cancelable:!1}),this.calciteInputTimePickerChange=p(),this.calciteInputTimePickerClose=p({cancelable:!1}),this.calciteInputTimePickerOpen=p({cancelable:!1}),this.listen("blur",this.blurHandler),this.listen("keydown",this.keyDownHandler),this.listen("calciteTimeChange",this.timeChangeHandler)}static{this.properties={disabled:[7,{},{reflect:!0,type:Boolean}],focusTrapDisabled:[7,{},{reflect:!0,type:Boolean}],form:[3,{},{reflect:!0}],hourFormat:[3,{},{reflect:!0}],label:1,labelText:1,max:[3,{},{reflect:!0}],messageOverrides:[0,{},{attribute:!1}],min:[3,{},{reflect:!0}],name:1,numberingSystem:[3,{},{reflect:!0}],open:[7,{},{reflect:!0,type:Boolean}],overlayPositioning:1,placement:[3,{},{reflect:!0}],readOnly:[7,{},{reflect:!0,type:Boolean}],required:[7,{},{reflect:!0,type:Boolean}],scale:[3,{},{reflect:!0}],status:[3,{},{reflect:!0}],step:[11,{},{reflect:!0,type:Number}],validationIcon:[3,{converter:E,type:String},{reflect:!0}],validationMessage:1,validity:[0,{},{attribute:!1}],value:1}}static{this.shadowRootOptions={mode:"open",delegatesFocus:!0}}static{this.styles=le}async reposition(e=!1){this.popoverEl?.reposition(e)}async setFocus(e){return this.focusSetter(()=>this.el,e)}connectedCallback(){super.connectedCallback(),j(this),U(this)}willUpdate(e){e.has("open")&&(this.hasUpdated||this.open!==!1)&&this.openHandler(),e.has("disabled")&&(this.hasUpdated||this.disabled!==!1)&&(this.disabled||(this.open=!1)),e.has("readOnly")&&(this.hasUpdated||this.readOnly!==!1)&&(this.readOnly||(this.open=!1)),e.has("value")&&(this.hasUpdated?(this.time.userChangedValue||(this.previousEmittedValue=this.value),this.time.setValue(this.value),this.requestTimePickerUpdate()):this.previousEmittedValue=this.value)}disconnectedCallback(){super.disconnectedCallback(),_(this),A(this)}blurHandler(){this.changeEventHandler()}changeEventHandler(){let{previousEmittedValue:e,value:s}=this;e!==s&&(this.calciteInputTimePickerChange.emit().defaultPrevented?this.time.setValue(this.previousEmittedValue):this.previousEmittedValue=s)}keyDownHandler(e){let{defaultPrevented:s,key:a}=e,{hourFormat:n,meridiemOrder:d}=this.time;if(!s)if(a==="Enter")V(this)&&e.preventDefault(),this.changeEventHandler();else if(this.open&&a==="Escape")this.open=!1,e.preventDefault();else{let v=h(this.step)>0,g=this.step<60;switch(this.activeEl){case this.hourRef.value:a==="ArrowRight"?this.setFocusPart("minute"):a==="ArrowLeft"&&n==="12"&&d===0&&this.setFocusPart("meridiem");break;case this.minuteRef.value:switch(a){case"ArrowLeft":this.setFocusPart("hour");break;case"ArrowRight":this.step!==60?this.setFocusPart("second"):n==="12"&&this.setFocusPart("meridiem");break}break;case this.secondRef.value:switch(a){case"ArrowLeft":this.setFocusPart("minute");break;case"ArrowRight":h(this.step)>0?this.setFocusPart("fractionalSecond"):n==="12"&&this.setFocusPart("meridiem");break}break;case this.fractionalSecondRef.value:switch(a){case"ArrowLeft":this.setFocusPart("second");break;case"ArrowRight":n==="12"&&d!==0&&this.setFocusPart("meridiem");break}break;case this.meridiemRef.value:a==="ArrowLeft"&&d!==0?v?this.setFocusPart("fractionalSecond"):g?this.setFocusPart("second"):this.setFocusPart("minute"):a==="ArrowRight"&&d===0&&this.setFocusPart("hour");break}}}onLabelClick(){this.setFocus()}openHandler(){this.disabled||this.readOnly||this.popoverEl&&(this.popoverEl.open=this.open)}popoverBeforeOpenHandler(e){e.stopPropagation(),this.calciteInputTimePickerBeforeOpen.emit()}popoverOpenHandler(e){e.stopPropagation(),this.calciteInputTimePickerOpen.emit()}popoverBeforeCloseHandler(e){e.stopPropagation(),this.calciteInputTimePickerBeforeClose.emit()}popoverCloseHandler(e){e.stopPropagation(),this.calciteInputTimePickerClose.emit(),this.open=!1}requestTimePickerUpdate(){this.timePickerRef.value.manager?.component.requestUpdate()}setCalcitePopoverEl(e){this.popoverEl=e,this.openHandler()}async setFocusPart(e){(e==="hour"?this.hourRef:e==="minute"?this.minuteRef:e==="second"?this.secondRef:e==="fractionalSecond"?this.fractionalSecondRef:this.meridiemRef).value?.focus()}syncHiddenFormInput(e){W("time",this,e)}timeChangeHandler(e){if(e.stopPropagation(),this.disabled)return;let s=e.detail;s!==this.value?this.value=s:this.requestTimePickerUpdate()}timePartFocusHandler(e){this.activeEl=e.currentTarget}timePickerChangeHandler(e){e.stopPropagation()}toggleIconClickHandler(){this.open=!this.open}render(){let{messages:e,readOnly:s,scale:a}=this,{fractionalSecond:n,handleHourKeyDownEvent:d,handleMinuteKeyDownEvent:v,handleSecondKeyDownEvent:g,handleFractionalSecondKeyDownEvent:Y,hour:b,hourFormat:Z,localizedDecimalSeparator:ee,localizedFractionalSecond:k,localizedHour:S,localizedHourSuffix:ie,localizedMinute:C,localizedMinuteSuffix:te,localizedSecond:F,localizedSecondSuffix:H,meridiemOrder:ae,minute:$,second:y}=this.time,x="--",re=u(n),se=u(b),ne=u($),oe=u(y),I=h(this.step)>0,R=Z==="12",ce=this.step<60,T=ae===0||D(this.el)==="rtl",m=!this.disabled&&!this.readOnly;return this.interactiveContainer({disabled:this.disabled,children:c`${this.labelText&&J({labelText:this.labelText,onClick:this.onLabelClick,required:this.required,tooltipText:this.messages.required})||""}<div aria-controls=${f.inputContainer} aria-labelledby=${f.inputContainer} class=${r({[i.container]:!0,[i.readOnly]:s})} role=combobox ${o(this.containerRef)}><calcite-icon class=${r(i.clockIcon)} .icon=${w.clock} .scale=${a==="l"?"m":"s"}></calcite-icon><div aria-label=${G(this)??t} .ariaRequired=${this.required} class=${r(i.inputContainer)} dir=ltr id=${f.inputContainer} role=group>${R&&T&&this.renderMeridiem()||""}<span aria-label=${this.messages.hour??t} aria-valuemax=23 aria-valuemin=1 aria-valuenow=${(se&&parseInt(b)||"0")??t} aria-valuetext=${b??t} class=${r({[i.empty]:!S,[i.hour]:!0,[i.input]:!0})} =${this.timePartFocusHandler} =${m?d:void 0} role=spinbutton tabindex=0 ${o(this.hourRef)}>${S||x}</span><span class=${r(i.hourSuffix)}>${ie}</span><span aria-label=${this.messages.minute??t} aria-valuemax=12 aria-valuemin=1 aria-valuenow=${(ne&&parseInt($)||"0")??t} aria-valuetext=${$??t} class=${r({[i.empty]:!C,[i.input]:!0,[i.minute]:!0})} =${this.timePartFocusHandler} =${m?v:void 0} role=spinbutton tabindex=0 ${o(this.minuteRef)}>${C||x}</span><span class=${r(i.minuteSuffix)}>${te}</span>${ce&&c`<span aria-label=${this.messages.second??t} aria-valuemax=59 aria-valuemin=0 aria-valuenow=${(oe&&parseInt(y)||"0")??t} aria-valuetext=${y??t} class=${r({[i.empty]:!F,[i.input]:!0,[i.second]:!0})} =${this.timePartFocusHandler} =${m?g:void 0} role=spinbutton tabindex=0 ${o(this.secondRef)}>${F||x}</span>`||""}${I&&c`<span class=${r(i.decimalSeparator)}>${ee}</span>`||""}${I&&c`<span aria-label=${this.messages.fractionalSecond??t} aria-valuemax=999 aria-valuemin=1 aria-valuenow=${(re&&parseInt(n)||"0")??t} aria-valuetext=${k??t} class=${r({[i.empty]:!k,[i.fractionalSecond]:!0,[i.input]:!0})} =${this.timePartFocusHandler} =${m?Y:void 0} role=spinbutton tabindex=0 ${o(this.fractionalSecondRef)}>${k||"".padStart(h(this.step),"-")}</span>`||""}${H&&c`<span class=${r(i.secondSuffix)}>${H}</span>`||""}${R&&!T&&this.renderMeridiem()||""}</div>${!this.readOnly&&this.renderToggleIcon(this.open)||""}</div><calcite-popover auto-close .focusTrapDisabled=${this.focusTrapDisabled} .focusTrapOptions=${{initialFocus:!1}} .label=${e.chooseTime} lang=${this.messages._lang??t} offset-distance=0 =${this.popoverBeforeCloseHandler} =${this.popoverBeforeOpenHandler} =${this.popoverCloseHandler} =${this.popoverOpenHandler} .overlayPositioning=${this.overlayPositioning} .placement=${this.placement} pointer-disabled .referenceElement=${this.containerRef.value} trigger-disabled ${o(this.setCalcitePopoverEl)}><calcite-time-picker .hourFormat=${this.time.hourFormat} lang=${this.messages._lang??t} .messageOverrides=${this.messageOverrides} .numberingSystem=${this.numberingSystem} =${this.timePickerChangeHandler} .scale=${this.scale} .step=${this.step} tabindex=${(this.open?void 0:-1)??t} .time=${this.time} .value=${this.value} ${o(this.timePickerRef)}></calcite-time-picker></calcite-popover>${N({component:this})}${this.validationMessage&&this.status==="invalid"?Q({icon:this.validationIcon,id:f.validationMessage,message:this.validationMessage,scale:this.scale,status:this.status}):null}`})}renderMeridiem(){let{handleMeridiemKeyDownEvent:e,localizedMeridiem:s,meridiem:a}=this.time,n=!this.disabled&&!this.readOnly;return c`<span aria-label=${this.messages.meridiem??t} aria-valuemax=2 aria-valuemin=1 aria-valuenow=${a==="PM"&&"2"||"1"} aria-valuetext=${a??t} class=${r({[i.empty]:!s,[i.input]:!0,[i.meridiem]:!0})} =${this.timePartFocusHandler} =${n?e:void 0} role=spinbutton tabindex=0 ${o(this.meridiemRef)}>${s||"--"}</span>`}renderToggleIcon(e){return c`<span class=${r(i.toggleIcon)} =${this.toggleIconClickHandler}><calcite-icon .icon=${e?w.chevronUp:w.chevronDown} .scale=${B(this.scale)}></calcite-icon></span>`}};M("calcite-input-time-picker",P);export{P as InputTimePicker};