@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
3 lines (2 loc) • 11.1 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import{g as Q}from"./4F6GEJME.js";import{k as A}from"./4PBM4ZLG.js";import{a as x}from"./J6AHDM43.js";import{c as K,d as J}from"./LCVNP3EO.js";import{c as G,e as q,f as H,h as W}from"./GTD2HZYS.js";import{a as j}from"./77EQHO2G.js";import{a as _}from"./HXIMHC6U.js";import"./K7LRDT5O.js";import{a as N}from"./SQ6RHDDF.js";import{a as U}from"./3XLPUKLV.js";import"./3YEM2IPT.js";import"./QUTTHRH3.js";import"./MNIRD7Q7.js";import"./ZQBZ5QPB.js";import"./CIYXQ5G6.js";import{C as R,D as z,E as M,F as k,J as E,Q as V,g as P,h as T,l as v,p as b}from"./G7AHLVJ5.js";var oe={offset:"offset"},se={labelContent:"label-content"},ae=60;function O(t){return t.replace(":15",".25").replace(":30",".5").replace(":45",".75").replace("\u2212","-")}function ie(t,e){let o=L(t,"en-US",e).replace("GMT","");return o===""?0:Number(O(o))*ae}function ne(){return new Date().getTimezoneOffset()*-1}function le(){return new Intl.DateTimeFormat().resolvedOptions().timeZone}async function re(t){if(t==="offset")return o=>o;let{normalize:e}=await import("./WUIZZKOO.js");return e}async function ce(t,e,o,s,a){if(o==="name"){let{groupByName:i}=await import("./XFMCQEPQ.js");return(await i()).map(({label:n})=>({label:n,value:n,metadata:{filterValue:n}})).filter(n=>!!n).sort()}let l=a==="user"?t:a==="utc"?"fr":"en-GB",u=s.getTime();if(o==="region"){let[{groupByRegion:i},{getCountry:c,global:n}]=await Promise.all([import("./4Q4P4FUU.js"),import("./Z72XONQI.js")]);return(await i()).map(({label:m,tzs:d})=>(d.sort((h,f)=>{let y=I(h,e),$=I(f,e),p="Etc/GMT";if(h.startsWith(p)&&f.startsWith(p)){let g=h.substring(p.length),F=f.substring(p.length),te=g===""?0:parseInt(g);return(F===""?0:parseInt(F))-te}return y.localeCompare($)}),{label:S(e,m),items:d.map(h=>{let f=O(L(h,l,u)),y=I(h,e),$=m===n?`${I(n,e)} Etc`:X(h),p=c(h),g=S(e,p);return{label:y,value:h,metadata:{country:g===y?void 0:g,filterValue:$,offset:f}}})})).sort((m,d)=>m.label===n?-1:d.label===n?1:m.label.localeCompare(d.label))}let[{groupByOffset:C},{DateEngine:Z}]=await Promise.all([import("./QRYVRT7Q.js"),import("./7WH4TUQV.js")]),B=await C({dateEngine:new Z,groupDateRange:1,startDate:new Date(u).toISOString()}),ee=new Intl.ListFormat(t,{style:"long",type:"conjunction"}),D=["Factory","Etc/UTC"];return B.forEach(i=>{let c=[],n=0;i.tzs.forEach((r,m)=>{D.includes(r)&&n++,c[m]=n}),i.tzs=i.tzs.filter(r=>!D.includes(r)),i.labelTzIdx=i.labelTzIdx.map(r=>r-c[r]).filter(r=>r>=0&&r<i.tzs.length)}),B.map(({labelTzIdx:i,tzs:c})=>{let n=c[0],r=O(L(n,l,u)),m=ie(n,u),d=i.map(f=>I(c[f],e));return{label:fe(e,r,ee.format(d)),value:m,metadata:{filterValue:c.map(f=>X(f))}}}).filter(i=>!!i).sort((i,c)=>i.value-c.value)}function I(t,e){return e[t]||he(t)}function me(t,e,o){return o.timeZoneRegionLabel.replace("{city}",t).replace("{country}",S(o,e))}function S(t,e){return t[e]||e}function he(t){return t.split("/").pop()}function X(t){return t.replace(/_/g," ")}function fe(t,e,o){return t.timeZoneLabel.replace("{offset}",e).replace("{cities}",o)}function L(t,e,o=Date.now()){return t==="Factory"&&(t="Etc/GMT"),A(e,{timeZone:t,timeZoneName:"shortOffset"}).formatToParts(o).find(({type:l})=>l==="timeZoneName").value}function ue(t){return t[0].items!==void 0}function de(t){return ue(t)?t.flatMap(e=>e.items):t}function Y(t,e,o){return o==null?null:de(t).find(s=>s[e]==o)}var pe=P`: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:block}.offset{white-space:nowrap}:host([hidden]){display:none}[hidden]{display:none}: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}`,w=class extends M{constructor(){super(...arguments),this.comboboxRef=R(),this.messages=N({blocking:!0}),this.focusSetter=U()(this),this.interactiveContainer=j(this),this.clearable=!1,this.disabled=!1,this.maxItems=0,this.mode="offset",this.offsetStyle="user",this.open=!1,this.overlayPositioning="absolute",this.readOnly=!1,this.required=!1,this.scale="m",this.status="idle",this.topLayerDisabled=!1,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.calciteInputTimeZoneBeforeClose=b({cancelable:!1}),this.calciteInputTimeZoneBeforeOpen=b({cancelable:!1}),this.calciteInputTimeZoneChange=b({cancelable:!1}),this.calciteInputTimeZoneClose=b({cancelable:!1}),this.calciteInputTimeZoneOpen=b({cancelable:!1})}static{this.properties={clearable:[7,{},{reflect:!0,type:Boolean}],disabled:[7,{},{reflect:!0,type:Boolean}],form:[3,{},{reflect:!0}],labelText:1,maxItems:[11,{},{reflect:!0,type:Number}],messageOverrides:[0,{},{attribute:!1}],mode:[3,{},{reflect:!0}],name:[3,{},{reflect:!0}],offsetStyle:[3,{},{reflect:!0}],open:[7,{},{reflect:!0,type:Boolean}],overlayPositioning:[3,{},{reflect:!0}],readOnly:[7,{},{reflect:!0,type:Boolean}],referenceDate:1,required:[7,{},{reflect:!0,type:Boolean}],scale:[3,{},{reflect:!0}],status:[3,{},{reflect:!0}],topLayerDisabled:[7,{},{reflect:!0,type:Boolean}],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=pe}get value(){return this._value}set value(e){this._value=e}async setFocus(e){return this.focusSetter(()=>this.comboboxRef.value,e)}connectedCallback(){super.connectedCallback(),G(this),K(this)}async load(){this.normalizer=await re(this.mode),await this.updateTimeZoneItems();let e=this.value,o=this.normalizeValue(e);this.value=o||(e===""?o:void 0),this.updateTimeZoneSelection();let s=this.selectedTimeZoneItem?`${this.selectedTimeZoneItem.value}`:"";H(this,s),this.value=s}willUpdate(e){e.has("value")&&this.hasUpdated&&this.handleValueChange(this.value,e.get("value")),(e.has("messages")||e.has("mode")&&(this.hasUpdated||this.mode!=="offset")||e.has("referenceDate"))&&this.handleTimeZoneItemPropsChange(),e.has("open")&&(this.hasUpdated||this.open!==!1)&&this.openChanged()}loaded(){this.openChanged()}disconnectedCallback(){super.disconnectedCallback(),q(this),J(this)}async handleTimeZoneItemPropsChange(){!this.timeZoneItems||!this.hasUpdated||(await this.updateTimeZoneItems(),this.updateTimeZoneSelection())}openChanged(){this.comboboxRef.value&&(this.comboboxRef.value.open=this.open)}async handleValueChange(e,o){let s=this.normalizeValue(e);if(!s){if(this.clearable){this._value=s,this.selectedTimeZoneItem=null;return}this._value=o,this.selectedTimeZoneItem=this.findTimeZoneItem(o);return}let a=this.findTimeZoneItem(s);if(!a){this._value=o;return}this._value=s,this.selectedTimeZoneItem=a}onLabelClick(){this.setFocus()}overrideSelectedLabelForRegion(e){this.mode!=="region"||!this.selectedTimeZoneItem||(this.comboboxRef.value.selectedItems[0].heading=this.getItemLabel(this.selectedTimeZoneItem,e))}onComboboxBeforeClose(e){e.stopPropagation(),this.overrideSelectedLabelForRegion(!1),this.calciteInputTimeZoneBeforeClose.emit()}onComboboxBeforeOpen(e){e.stopPropagation(),this.overrideSelectedLabelForRegion(!0),this.calciteInputTimeZoneBeforeOpen.emit()}onComboboxChange(e){e.stopPropagation();let s=e.target.selectedItems[0];if(!s){this._value="",this.selectedTimeZoneItem=null,this.calciteInputTimeZoneChange.emit();return}let a=this.findTimeZoneItemByLabel(s.getAttribute("data-label")),l=`${a.value}`;this.value===l&&a.label===this.selectedTimeZoneItem.label||(this._value=l,this.selectedTimeZoneItem=a,this.calciteInputTimeZoneChange.emit())}onComboboxClose(e){e.stopPropagation(),this.open=!1,this.calciteInputTimeZoneClose.emit()}onComboboxOpen(e){this.open=!0,e.stopPropagation(),this.calciteInputTimeZoneOpen.emit()}findTimeZoneItem(e){return Y(this.timeZoneItems,"value",e)}findTimeZoneItemByLabel(e){return Y(this.timeZoneItems,"label",e)}async updateTimeZoneItems(){this.timeZoneItems=await this.createTimeZoneItems()}updateTimeZoneSelection(){if(this.value===""&&this.clearable){this.selectedTimeZoneItem=null;return}let e=this.mode==="offset"?ne():le(),o=this.value===""||!this.value?e:this.value;this.selectedTimeZoneItem=this.findTimeZoneItem(o)||this.findTimeZoneItem(e)}async createTimeZoneItems(){return!this.messages._lang||!this.messages?[]:ce(this.messages._lang,this.messages,this.mode,this.referenceDate instanceof Date?this.referenceDate:new Date(this.referenceDate??Date.now()),this.offsetStyle)}normalizeValue(e){return e=e===void 0?"":e,e&&this.normalizer(e)}getItemLabel(e,o=this.open){let s=this.selectedTimeZoneItem===e,{label:a,metadata:l}=e;return!l.country||o||!s?a:me(a,l.country,this.messages)}render(){return this.interactiveContainer({disabled:this.disabled,children:T`<calcite-combobox .clearDisabled=${!this.clearable} .disabled=${this.disabled} .label=${this.messages.chooseTimeZone} .labelText=${this.labelText} lang=${this.messages._lang??v} .maxItems=${this.maxItems} =${this.onComboboxBeforeClose} =${this.onComboboxBeforeOpen} =${this.onComboboxChange} =${this.onComboboxClose} =${this.onComboboxOpen} .overlayPositioning=${this.overlayPositioning} .placeholder=${this.mode==="name"?this.messages.namePlaceholder:this.mode==="offset"?this.messages.offsetPlaceholder:this.messages.regionPlaceholder} placeholder-icon=search .readOnly=${this.readOnly} .required=${this.required} .scale=${this.scale} .selectionMode=${this.clearable?"single":"single-persist"} .status=${this.status} .topLayerDisabled=${this.topLayerDisabled} .validationIcon=${this.validationIcon} .validationMessage=${this.validationMessage} ${z(this.comboboxRef)}>${this.renderItems()}<slot name=${se.labelContent} slot=${Q.labelContent}></slot></calcite-combobox>${W({component:this})}`})}renderItems(){return this.mode==="region"?this.renderRegionItems():x(this.timeZoneItems,({label:e})=>e,e=>{let o=this.selectedTimeZoneItem===e,{label:s,metadata:a,value:l}=e;return T`<calcite-combobox-item data-label=${s??v} .heading=${s} .metadata=${a} .selected=${o} .value=${l}></calcite-combobox-item>`})}renderRegionItems(){return this.timeZoneItems.flatMap(({label:e,items:o})=>_(e,T`<calcite-combobox-item-group .label=${e}>${x(o,({label:s})=>s,s=>{let a=this.selectedTimeZoneItem===s,{label:l,metadata:u,value:C}=s,Z=this.getItemLabel(s);return T`<calcite-combobox-item data-label=${l??v} .description=${u.country} .heading=${Z} .metadata=${u} .selected=${a} .value=${C}><span class=${k(oe.offset)} slot=content-end>${u.offset}</span></calcite-combobox-item>`})}</calcite-combobox-item-group>`))}};V("calcite-input-time-zone",w);export{w as InputTimeZone};