@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
1 lines • 15.3 kB
JavaScript
var __awaiter=this&&this.__awaiter||function(t,e,a,i){function r(t){return t instanceof a?t:new a((function(e){e(t)}))}return new(a||(a=Promise))((function(a,n){function o(t){try{l(i.next(t))}catch(e){n(e)}}function s(t){try{l(i["throw"](t))}catch(e){n(e)}}function l(t){t.done?a(t.value):r(t.value).then(o,s)}l((i=i.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var a={label:0,sent:function(){if(n[0]&1)throw n[1];return n[1]},trys:[],ops:[]},i,r,n,o;return o={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function s(t){return function(e){return l([t,e])}}function l(o){if(i)throw new TypeError("Generator is already executing.");while(a)try{if(i=1,r&&(n=o[0]&2?r["return"]:o[0]?r["throw"]||((n=r["return"])&&n.call(r),0):r.next)&&!(n=n.call(r,o[1])).done)return n;if(r=0,n)o=[o[0]&2,n.value];switch(o[0]){case 0:case 1:n=o;break;case 4:a.label++;return{value:o[1],done:false};case 5:a.label++;r=o[1];o=[0];continue;case 7:o=a.ops.pop();a.trys.pop();continue;default:if(!(n=a.trys,n=n.length>0&&n[n.length-1])&&(o[0]===6||o[0]===2)){a=0;continue}if(o[0]===3&&(!n||o[1]>n[0]&&o[1]<n[3])){a.label=o[1];break}if(o[0]===6&&a.label<n[1]){a.label=n[1];n=o;break}if(n&&a.label<n[2]){a.label=n[2];a.ops.push(o);break}if(n[2])a.ops.pop();a.trys.pop();continue}o=e.call(t,a)}catch(s){o=[6,s];r=0}finally{i=n=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-aa8afca4.js";import{T as TEXT,d as dateFromISO,a as dateFromRange,g as getLocaleData,s as sameDate,p as parseDateString,i as inRange}from"./calcite-date-picker-resources-3c2914ff.js";import{g as getElementDir}from"./dom-466af3c7.js";import{g as getKey}from"./key-ec82f942.js";import{u as updatePopper,C as CSS,c as createPopper}from"./popper-d89fb7b0.js";import"./locale-8f48fd10.js";import"./number-ca3ae047.js";import"./guid-09142681.js";var calciteInputDatePickerCss="@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:host{--calcite-icon-size:1rem;--calcite-spacing-eighth:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.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}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:inline-block;vertical-align:top;width:100%;position:relative;overflow:visible;-webkit-box-shadow:none;box-shadow:none}:host .menu-container .calcite-popper-anim{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:0.25rem}:host .menu-container[data-popper-placement^=bottom] .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}:host .menu-container[data-popper-placement^=top] .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}:host .menu-container[data-popper-placement^=left] .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}:host .menu-container[data-popper-placement^=right] .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}:host .menu-container[data-popper-placement] .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}.calendar-picker-wrapper{-webkit-box-shadow:none;box-shadow:none;position:static;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);width:100%;line-height:0}.input-wrapper{position:relative}:host([range]) .input-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host([range]) .input-wrapper{-ms-flex:1 1 auto;flex:1 1 auto}:host([range]) .horizontal-arrow-container{background-color:var(--calcite-ui-background);padding:0 var(--calcite-spacing-quarter);border:1px solid var(--calcite-ui-border-1);border-left:none;border-right:none;height:42px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex:0 0 auto;flex:0 0 auto}:host([range][layout=vertical]) .input-wrapper{width:100%}:host([range][layout=vertical]) .input-container{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start}:host([range][layout=vertical]) .calendar-picker-wrapper--end{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}:host([range][layout=vertical]) .vertical-arrow-container{position:absolute;left:0;top:36px;z-index:1;background-color:var(--calcite-ui-foreground-1);padding-left:0.625rem;padding-right:0.625rem;margin-left:1px;margin-right:1px}:host([scale=s][range]:not([layout=vertical])) .calendar-picker-wrapper{width:216px}:host([scale=s][range]:not([layout=vertical])) .horizontal-arrow-container{height:30px}:host([scale=m][range]:not([layout=vertical])) .calendar-picker-wrapper{width:286px}:host([scale=l][range]:not([layout=vertical])) .calendar-picker-wrapper{width:398px}:host([scale=l][range]:not([layout=vertical])) .horizontal-arrow-container{height:54px}.menu-container{display:block;position:absolute;z-index:900;-webkit-transform:scale(0);transform:scale(0);visibility:hidden;pointer-events:none}:host([active]) .menu-container{pointer-events:initial;visibility:visible}.input .calcite-input-wrapper{margin-top:0}:host([range][layout=vertical][scale=s]) .vertical-arrow-container{top:24px}:host([range][layout=vertical][scale=l]) .vertical-arrow-container{top:50px;padding-left:0.875rem;padding-right:0.875rem}:host([range][layout=vertical][active]) .vertical-arrow-container{display:none}";var DEFAULT_PLACEMENT="bottom-leading";var CalciteInputDatePicker=function(){function t(t){var e=this;registerInstance(this,t);this.calciteDatePickerChange=createEvent(this,"calciteDatePickerChange",7);this.calciteDatePickerRangeChange=createEvent(this,"calciteDatePickerRangeChange",7);this.active=false;this.intlPrevMonth=TEXT.prevMonth;this.intlNextMonth=TEXT.nextMonth;this.locale=document.documentElement.lang||"en";this.scale="m";this.range=false;this.overlayPositioning="absolute";this.proximitySelectionDisabled=false;this.layout="horizontal";this.focusedInput="start";this.hasShadow=!!document.head.attachShadow;this.setEndInput=function(t){e.endInput=t};this.deactivate=function(){e.active=false};this.keyUpHandler=function(t){if(getKey(t.key)==="Escape"){e.active=false}};this.inputBlur=function(t){e.blur(t.detail)};this.startInputFocus=function(){e.active=true;e.focusedInput="start"};this.endInputFocus=function(){e.active=true;e.focusedInput="end"};this.inputInput=function(t){e.input(t.detail.value)};this.setMenuEl=function(t){if(t){e.menuEl=t;e.createPopper()}};this.setStartWrapper=function(t){e.startWrapper=t;e.setReferenceEl()};this.setEndWrapper=function(t){e.endWrapper=t;e.setReferenceEl()};this.handleDateChange=function(t){if(e.range){return}e.valueAsDate=t.detail};this.handleDateRangeChange=function(t){if(!e.range||!t.detail){return}var a=t.detail,i=a.startDate,r=a.endDate;e.startAsDate=i;e.endAsDate=r;clearTimeout(e.endInputFocusTimeout);if(i&&e.focusedInput==="start"){e.endInputFocusTimeout=window.setTimeout((function(){var t;return(t=e.endInput)===null||t===void 0?void 0:t.setFocus()}),150)}}}t.prototype.activeHandler=function(){this.reposition()};t.prototype.focusInHandler=function(t){if(!this.hasShadow&&!this.el.contains(t.target)){this.active=false}};t.prototype.calciteDaySelectHandler=function(){this.active=false};t.prototype.reposition=function(){return __awaiter(this,void 0,void 0,(function(){var t,e,a,i;return __generator(this,(function(r){t=this,e=t.popper,a=t.menuEl;i=this.getModifiers();e?updatePopper({el:a,modifiers:i,placement:DEFAULT_PLACEMENT,popper:e}):this.createPopper();return[2]}))}))};t.prototype.connectedCallback=function(){this.loadLocaleData();if(this.value){this.valueAsDate=dateFromISO(this.value)}if(this.start){this.setStartAsDate(dateFromISO(this.start))}if(this.end){this.setEndAsDate(dateFromISO(this.end))}if(this.min){this.minAsDate=dateFromISO(this.min)}if(this.max){this.maxAsDate=dateFromISO(this.max)}this.createPopper()};t.prototype.disconnectedCallback=function(){this.destroyPopper()};t.prototype.render=function(){var t;var e,a;var i=dateFromRange(this.range?this.startAsDate:this.valueAsDate,this.minAsDate,this.maxAsDate);var r=this.range?dateFromRange(this.endAsDate,this.minAsDate,this.maxAsDate):null;var n=r?r.toLocaleDateString(this.locale):"";var o=i?i.toLocaleDateString(this.locale):"";var s=getElementDir(this.el);return h(Host,{onBlur:this.deactivate,onKeyUp:this.keyUpHandler,role:"application"},this.localeData&&h("div",{"aria-expanded":this.active.toString(),class:"input-container",dir:s,role:"application"},h("div",{class:"input-wrapper",ref:this.setStartWrapper},h("calcite-input",{class:"input "+(this.layout==="vertical"&&this.range?"no-bottom-border":""),icon:"calendar","number-button-type":"none",onCalciteInputBlur:this.inputBlur,onCalciteInputFocus:this.startInputFocus,onCalciteInputInput:this.inputInput,placeholder:(e=this.localeData)===null||e===void 0?void 0:e.placeholder,scale:this.scale,type:"text",value:o})),h("div",{"aria-hidden":(!this.active).toString(),class:"menu-container",ref:this.setMenuEl},h("div",{class:(t={},t["calendar-picker-wrapper"]=true,t["calendar-picker-wrapper--end"]=this.focusedInput==="end",t[CSS.animation]=true,t[CSS.animationActive]=this.active,t)},h("calcite-date-picker",{activeRange:this.focusedInput,endAsDate:this.endAsDate,headingLevel:this.headingLevel,intlNextMonth:this.intlNextMonth,intlPrevMonth:this.intlPrevMonth,locale:this.locale,max:this.max,maxAsDate:this.maxAsDate,min:this.min,minAsDate:this.minAsDate,onCalciteDatePickerChange:this.handleDateChange,onCalciteDatePickerRangeChange:this.handleDateRangeChange,proximitySelectionDisabled:this.proximitySelectionDisabled,range:this.range,scale:this.scale,startAsDate:this.startAsDate,tabIndex:0,valueAsDate:this.valueAsDate}))),this.range&&this.layout==="horizontal"&&h("div",{class:"horizontal-arrow-container"},h("calcite-icon",{flipRtl:true,icon:"arrow-right",scale:"s"})),this.range&&this.layout==="vertical"&&h("div",{class:"vertical-arrow-container"},h("calcite-icon",{icon:"arrow-down",scale:"s"})),this.range&&h("div",{class:"input-wrapper",ref:this.setEndWrapper},h("calcite-input",{class:"input",icon:"calendar","number-button-type":"none",onCalciteInputBlur:this.inputBlur,onCalciteInputFocus:this.endInputFocus,onCalciteInputInput:this.inputInput,placeholder:(a=this.localeData)===null||a===void 0?void 0:a.placeholder,ref:this.setEndInput,scale:this.scale,type:"text",value:n}))))};t.prototype.setReferenceEl=function(){var t=this,e=t.focusedInput,a=t.layout,i=t.endWrapper,r=t.startWrapper;this.referenceEl=e==="end"||a==="vertical"?i||r:r||i;this.createPopper()};t.prototype.getModifiers=function(){var t={name:"flip",enabled:true};t.options={fallbackPlacements:["top-start","top","top-end","bottom-start","bottom","bottom-end"]};return[t]};t.prototype.createPopper=function(){this.destroyPopper();var t=this,e=t.menuEl,a=t.referenceEl,i=t.overlayPositioning;if(!e||!a){return}var r=this.getModifiers();this.popper=createPopper({el:e,modifiers:r,overlayPositioning:i,placement:DEFAULT_PLACEMENT,referenceEl:a})};t.prototype.destroyPopper=function(){var t=this.popper;if(t){t.destroy()}this.popper=null};t.prototype.valueWatcher=function(t){this.valueAsDate=dateFromISO(t)};t.prototype.startWatcher=function(t){this.setStartAsDate(dateFromISO(t))};t.prototype.endWatcher=function(t){this.setEndAsDate(dateFromISO(t))};t.prototype.loadLocaleData=function(){return __awaiter(this,void 0,void 0,(function(){var t,e;return __generator(this,(function(a){switch(a.label){case 0:t=this.locale;e=this;return[4,getLocaleData(t)];case 1:e.localeData=a.sent();return[2]}}))}))};t.prototype.setStartAsDate=function(t){this.startAsDate=t};t.prototype.setEndAsDate=function(t){this.endAsDate=t};t.prototype.input=function(t){var e=this.getDateFromInput(t);if(e){if(!this.range){this.valueAsDate=e}else{var a=false;if(this.focusedInput==="start"){a=!this.startAsDate||!sameDate(e,this.startAsDate);if(a){this.startAsDate=e}}else if(this.focusedInput==="end"){a=!this.endAsDate||!sameDate(e,this.endAsDate);if(a){this.endAsDate=e}}}}};t.prototype.blur=function(t){var e=this,a=e.locale,i=e.focusedInput,r=e.endAsDate,n=e.range,o=e.startAsDate,s=e.valueAsDate;var l=this.getDateFromInput(t.value);if(!l){if(!n&&s){t.value=s.toLocaleDateString(a)}else if(i==="start"&&o){t.value=o.toLocaleDateString(a)}else if(i==="end"&&r){t.value=r.toLocaleDateString(a)}}};t.prototype.getDateFromInput=function(t){if(!this.localeData){return false}var e=this.localeData.separator;var a=parseDateString(t,this.localeData),i=a.day,r=a.month,n=a.year;var o=i>0;var s=r>-1;var l=new Date(n,r,i);l.setFullYear(n);var c=!isNaN(l.getTime());var p=t.split(e).filter((function(t){return t})).length>2;var u=n.toString().length>0;if(o&&s&&c&&p&&u&&inRange(l,this.min,this.max)){return l}return false};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{active:["activeHandler"],layout:["setReferenceEl"],focusedInput:["setReferenceEl"],value:["valueWatcher"],start:["startWatcher"],end:["endWatcher"],locale:["loadLocaleData"]}},enumerable:false,configurable:true});return t}();CalciteInputDatePicker.style=calciteInputDatePickerCss;export{CalciteInputDatePicker as calcite_input_date_picker};