@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
309 lines (304 loc) • 14.7 kB
JavaScript
/*!
* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
* See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
*/
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { g as guid } from './guid.js';
import { l as localizeTimeString, f as formatTimeString, i as isValidTime, d as defineCustomElement$2 } from './time-picker.js';
import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label.js';
import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
import { u as updateHostInteraction } from './interactive.js';
import { d as defineCustomElement$8 } from './action.js';
import { d as defineCustomElement$7 } from './icon.js';
import { d as defineCustomElement$6 } from './input.js';
import { d as defineCustomElement$5 } from './loader.js';
import { d as defineCustomElement$4 } from './popover.js';
import { d as defineCustomElement$3 } from './progress.js';
const inputTimePickerCss = "@-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)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.calciteInputTimePickerChange = createEvent(this, "calciteInputTimePickerChange", 7);
//--------------------------------------------------------------------------
//
// Properties
//
//--------------------------------------------------------------------------
/** The active state of the time input */
this.active = false;
/** The disabled state of the time input */
this.disabled = false;
/**
* BCP 47 language tag for desired language and country format
* @internal
*/
this.locale = document.documentElement.lang || navigator.language || "en";
/**
* When true, makes the component required for form-submission.
*
* @internal
*/
this.required = false;
/** The scale (size) of the time input */
this.scale = "m";
/** number (seconds) that specifies the granularity that the value must adhere to */
this.step = 60;
/** The selected time in UTC (always 24-hour format) */
this.value = null;
/** whether the value of the input was changed as a result of user typing or not */
this.internalValueChange = false;
this.previousValidValue = null;
this.referenceElementId = `input-time-picker-${guid()}`;
//--------------------------------------------------------------------------
//
// Event Listeners
//
//--------------------------------------------------------------------------
this.calciteInputBlurHandler = () => {
this.active = false;
const shouldIncludeSeconds = this.shouldIncludeSeconds();
const localizedInputValue = localizeTimeString(this.calciteInputEl.value, this.locale, shouldIncludeSeconds);
this.setInputValue(localizedInputValue || localizeTimeString(this.value, this.locale, shouldIncludeSeconds));
};
this.calciteInputFocusHandler = () => {
this.active = true;
};
this.calciteInputInputHandler = (event) => {
const target = event.target;
this.setValue({ value: target.value });
};
this.timePickerChangeHandler = (event) => {
event.stopPropagation();
const target = event.target;
const value = target.value;
this.setValue({ value, origin: "time-picker" });
};
this.setCalciteInputEl = (el) => {
this.calciteInputEl = el;
};
this.setCalciteTimePickerEl = (el) => {
this.calciteTimePickerEl = el;
};
this.setInputValue = (newInputValue) => {
if (!this.calciteInputEl) {
return;
}
this.calciteInputEl.value = newInputValue;
};
this.setValue = ({ value, origin = "input" }) => {
const previousValue = this.value;
const newValue = formatTimeString(value);
const newLocalizedValue = localizeTimeString(newValue, this.locale, this.shouldIncludeSeconds());
this.internalValueChange = origin !== "external" && origin !== "loading";
const shouldEmit = origin !== "loading" &&
origin !== "external" &&
((value !== this.previousValidValue && !value) ||
!!(!this.previousValidValue && newValue) ||
(newValue !== this.previousValidValue && newValue));
if (value) {
if (shouldEmit) {
this.previousValidValue = newValue;
}
if (newValue && newValue !== this.value) {
this.value = newValue;
}
this.localizedValue = newLocalizedValue;
}
else {
this.value = value;
this.localizedValue = null;
}
if (origin === "time-picker" || origin === "external") {
this.setInputValue(newLocalizedValue);
}
if (shouldEmit) {
const changeEvent = this.calciteInputTimePickerChange.emit();
if (changeEvent.defaultPrevented) {
this.internalValueChange = false;
this.value = previousValue;
this.setInputValue(previousValue);
this.previousValidValue = previousValue;
}
else {
this.previousValidValue = newValue;
}
}
};
}
activeHandler() {
if (this.disabled) {
this.active = false;
}
}
handleDisabledChange(value) {
if (!value) {
this.active = false;
}
}
localeWatcher(newLocale) {
this.setInputValue(localizeTimeString(this.value, newLocale, this.shouldIncludeSeconds()));
}
valueWatcher(newValue) {
if (!this.internalValueChange) {
this.setValue({ value: newValue, origin: "external" });
}
this.internalValueChange = false;
}
clickHandler(event) {
if (event.composedPath().includes(this.calciteTimePickerEl)) {
return;
}
this.setFocus();
}
keyUpHandler(event) {
if (event.key === "Escape" && this.active) {
this.active = false;
}
}
timePickerBlurHandler(event) {
event.preventDefault();
event.stopPropagation();
this.active = false;
}
timePickerFocusHandler(event) {
event.preventDefault();
event.stopPropagation();
this.active = true;
}
// --------------------------------------------------------------------------
//
// Public Methods
//
// --------------------------------------------------------------------------
/** Sets focus on the component. */
async setFocus() {
this.calciteInputEl.setFocus();
}
// --------------------------------------------------------------------------
//
// Private Methods
//
// --------------------------------------------------------------------------
onLabelClick() {
this.setFocus();
}
shouldIncludeSeconds() {
return this.step < 60;
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
connectedCallback() {
if (this.value) {
this.setValue({ value: isValidTime(this.value) ? this.value : undefined, origin: "loading" });
}
connectLabel(this);
connectForm(this);
}
componentDidLoad() {
this.setInputValue(this.localizedValue);
}
disconnectedCallback() {
disconnectLabel(this);
disconnectForm(this);
}
componentDidRender() {
updateHostInteraction(this);
}
// --------------------------------------------------------------------------
//
// Render Methods
//
// --------------------------------------------------------------------------
render() {
const popoverId = `${this.referenceElementId}-popover`;
return (h(Host, null, h("div", { "aria-controls": popoverId, "aria-haspopup": "dialog", "aria-label": this.name, "aria-owns": popoverId, id: this.referenceElementId, role: "combobox" }, h("calcite-input", { disabled: this.disabled, icon: "clock", label: getLabelText(this), onCalciteInputBlur: this.calciteInputBlurHandler, onCalciteInputFocus: this.calciteInputFocusHandler, onCalciteInputInput: this.calciteInputInputHandler, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })), h("calcite-popover", { id: popoverId, label: "Time Picker", open: this.active, referenceElement: this.referenceElementId }, h("calcite-time-picker", { intlHour: this.intlHour, intlHourDown: this.intlHourDown, intlHourUp: this.intlHourUp, intlMeridiem: this.intlMeridiem, intlMeridiemDown: this.intlMeridiemDown, intlMeridiemUp: this.intlMeridiemUp, intlMinute: this.intlMinute, intlMinuteDown: this.intlMinuteDown, intlMinuteUp: this.intlMinuteUp, intlSecond: this.intlSecond, intlSecondDown: this.intlSecondDown, intlSecondUp: this.intlSecondUp, lang: this.locale, onCalciteTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, value: this.value })), h(HiddenFormInputSlot, { component: this })));
}
get el() { return this; }
static get watchers() { return {
"active": ["activeHandler"],
"disabled": ["handleDisabledChange"],
"locale": ["localeWatcher"],
"value": ["valueWatcher"]
}; }
static get style() { return inputTimePickerCss; }
}, [1, "calcite-input-time-picker", {
"active": [1540],
"disabled": [516],
"intlHour": [1, "intl-hour"],
"intlHourDown": [1, "intl-hour-down"],
"intlHourUp": [1, "intl-hour-up"],
"intlMeridiem": [1, "intl-meridiem"],
"intlMeridiemDown": [1, "intl-meridiem-down"],
"intlMeridiemUp": [1, "intl-meridiem-up"],
"intlMinute": [1, "intl-minute"],
"intlMinuteDown": [1, "intl-minute-down"],
"intlMinuteUp": [1, "intl-minute-up"],
"intlSecond": [1, "intl-second"],
"intlSecondDown": [1, "intl-second-down"],
"intlSecondUp": [1, "intl-second-up"],
"locale": [1025, "lang"],
"name": [1],
"required": [516],
"scale": [513],
"step": [2],
"value": [1025],
"localizedValue": [32],
"setFocus": [64]
}, [[0, "click", "clickHandler"], [0, "keyup", "keyUpHandler"], [0, "calciteTimePickerBlur", "timePickerBlurHandler"], [0, "calciteTimePickerFocus", "timePickerFocusHandler"]]]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["calcite-input-time-picker", "calcite-action", "calcite-icon", "calcite-input", "calcite-loader", "calcite-popover", "calcite-progress", "calcite-time-picker"];
components.forEach(tagName => { switch (tagName) {
case "calcite-input-time-picker":
if (!customElements.get(tagName)) {
customElements.define(tagName, InputTimePicker);
}
break;
case "calcite-action":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "calcite-icon":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "calcite-input":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "calcite-loader":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "calcite-popover":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "calcite-progress":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "calcite-time-picker":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const CalciteInputTimePicker = InputTimePicker;
const defineCustomElement = defineCustomElement$1;
export { CalciteInputTimePicker, defineCustomElement };