@freshworks/crayons
Version:
Crayons Web Components library
302 lines (296 loc) • 10.6 kB
JavaScript
import { attachShadow, createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
import { r as renderHiddenField } from './index2.js';
import { d as defineCustomElement$c } from './avatar.js';
import { d as defineCustomElement$b } from './button.js';
import { d as defineCustomElement$a } from './checkbox.js';
import { d as defineCustomElement$1, a as defineCustomElement$9 } from './icon.js';
import { d as defineCustomElement$8 } from './input.js';
import { d as defineCustomElement$7 } from './list-options.js';
import { d as defineCustomElement$6 } from './popover.js';
import { d as defineCustomElement$5 } from './select.js';
import { d as defineCustomElement$4 } from './select-option.js';
import { d as defineCustomElement$3 } from './spinner.js';
import { d as defineCustomElement$2 } from './tag.js';
import { r as requiredArgs, c as addMilliseconds, a as toInteger, f as format, p as parse, l as locale } from './index3.js';
var MILLISECONDS_IN_MINUTE = 60000;
/**
* @name addMinutes
* @category Minute Helpers
* @summary Add the specified number of minutes to the given date.
*
* @description
* Add the specified number of minutes to the given date.
*
* ### v2.0.0 breaking changes:
*
* - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
*
* @param {Date|Number} date - the date to be changed
* @param {Number} amount - the amount of minutes to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
* @returns {Date} the new date with the minutes added
* @throws {TypeError} 2 arguments required
*
* @example
* // Add 30 minutes to 10 July 2014 12:00:00:
* const result = addMinutes(new Date(2014, 6, 10, 12, 0), 30)
* //=> Thu Jul 10 2014 12:30:00
*/
function addMinutes(dirtyDate, dirtyAmount) {
requiredArgs(2, arguments);
var amount = toInteger(dirtyAmount);
return addMilliseconds(dirtyDate, amount * MILLISECONDS_IN_MINUTE);
}
const timepickerCss = ":host{font-family:var(--fw-font-family, -apple-system, blinkmacsystemfont, \"Segoe UI\", roboto, oxygen, ubuntu, cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-box-sizing:border-box;box-sizing:border-box}.timepicker{display:block}";
let Timepicker = class extends HTMLElement {
constructor() {
super();
this.__registerHost();
attachShadow(this);
this.fwChange = createEvent(this, "fwChange", 7);
this.fwBlur = createEvent(this, "fwBlur", 7);
this.fwFocus = createEvent(this, "fwFocus", 7);
/**
* State for all the time values
*/
this.timeValues = [];
/**
* Format in which time values are populated in the list box. If the value is hh:mm p, the time values are in the 12-hour format. If the value is hh:mm, the time values are in the 24-hr format.
*/
this.format = 'hh:mm a';
/**
* Set true to disable the element
*/
this.disabled = false;
/**
* Represent the intervals and can be a number or array of numbers representing the minute values in an hour
*/
this.isMeridianFormat = this.format === 'hh:mm a';
/**
* Name of the component, saved as part of form data.
*/
this.name = '';
/**
* Time interval between the values displayed in the list, specified in minutes.
*/
this.interval = 30;
/**
* Lower time-limit for the values displayed in the list. If this attribute's value is in the hh:mm format, it is assumed to be hh:mm AM.
*/
this.minTime = this.isMeridianFormat ? '12:00 AM' : '00:00';
/**
* Upper time-limit for the values displayed in the list. If this attribute's value is in the hh:mm format, it is assumed to be hh:mm AM.
*/
this.maxTime = this.isMeridianFormat ? '11:30 PM' : '23:30';
/**
* Specifies the input box as a mandatory field and displays an asterisk next to the label. If the attribute's value is undefined, the value is set to false.
*/
this.required = false;
/**
* Theme based on which the input of the timepicker is styled.
*/
this.state = 'normal';
/**
* Hint text displayed below the text box.
*/
this.hintText = '';
/**
* Warning text displayed below the text box.
*/
this.warningText = '';
/**
* Error text displayed below the text box.
*/
this.errorText = '';
/**
* Label displayed on the interface, for the component.
*/
this.label = '';
/**
* Placement of the options list with respect to timepicker.
*/
this.optionsPlacement = 'bottom';
/**
* Whether the arrow/caret should be shown in the timepicker.
*/
this.caret = true;
/**
* Boolean representing whethere it is default end time
*/
this.isDefaultEndTime = ['11:30 PM', '23:30'].includes(this.maxTime);
this.getTimeOptionsMeta = (nonMeridianFormat) => {
const preferredFormat = this.format;
const timeIntervalArgs = {
interval: this.interval,
startTime: format(parse(this.minTime, preferredFormat, new Date()), nonMeridianFormat, {
locale: locale,
}),
endTime: format(parse(this.maxTime, preferredFormat, new Date()), nonMeridianFormat, {
locale: locale,
}),
};
return timeIntervalArgs;
};
this.setTimeValues = () => {
const meridianFormat = 'hh:mm a';
const nonMeridianFormat = 'HH:mm';
const { interval, startTime, endTime } = this.getTimeOptionsMeta(nonMeridianFormat);
parse(startTime, nonMeridianFormat, new Date()).valueOf();
let currentTimeInMs = parse(startTime, nonMeridianFormat, new Date()).valueOf();
const endTimeInMs = parse(endTime, nonMeridianFormat, new Date()).valueOf();
while (currentTimeInMs <= endTimeInMs) {
this.timeValues.push({
meridianFormat: format(currentTimeInMs, meridianFormat, {
locale: locale,
}),
nonMeridianFormat: format(currentTimeInMs, nonMeridianFormat, {
locale: locale,
}),
});
currentTimeInMs = addMinutes(currentTimeInMs, interval).valueOf();
}
};
this.onBlur = (e) => {
this.fwBlur.emit({
event: e,
name: this.name,
});
};
this.onFocus = () => {
this.fwFocus.emit();
};
}
currentTimeLabel(time) {
return this.isMeridianFormat ? time.meridianFormat : time.nonMeridianFormat;
}
currentTimeValue(time) {
return time.nonMeridianFormat;
}
setTimeValue(e) {
const { value } = e.detail;
if (value)
this.fwChange.emit({
event: e,
name: this.name,
value: value,
});
}
setEndTime() {
if (this.isDefaultEndTime) {
this.maxTime = this.isMeridianFormat ? `11:59 PM` : `23:59`;
}
}
/**
* Sets focus on a specific `fw-timepicker`.
*/
async setFocus() {
if (this.nativeInput) {
this.nativeInput.focus();
}
}
componentWillLoad() {
if (this.interval !== 30) {
this.setEndTime();
}
this.setTimeValues();
}
render() {
const { host, name, value } = this;
renderHiddenField(host, name, value);
return (h("div", { class: 'timepicker' }, h("fw-select", { name: this.name, label: this.label, hintText: this.hintText, errorText: this.errorText, warningText: this.warningText, disabled: this.disabled, value: this.value, required: this.required, onFwChange: (e) => this.setTimeValue(e), onFwBlur: this.onBlur, ref: (el) => (this.nativeInput = el), state: this.state, placeholder: this.placeholder, search: false, optionsPlacement: this.optionsPlacement, caret: this.caret }, this.timeValues.map((time) => (h("fw-select-option", { value: this.currentTimeValue(time) }, this.currentTimeLabel(time)))))));
}
get host() { return this; }
static get style() { return timepickerCss; }
};
Timepicker = /*@__PURE__*/ proxyCustomElement(Timepicker, [1, "fw-timepicker", {
"format": [1],
"disabled": [4],
"value": [1025],
"name": [1],
"interval": [2],
"minTime": [1, "min-time"],
"maxTime": [1, "max-time"],
"required": [4],
"state": [1],
"hintText": [1, "hint-text"],
"warningText": [1, "warning-text"],
"errorText": [1, "error-text"],
"label": [1],
"placeholder": [1],
"optionsPlacement": [513, "options-placement"],
"caret": [4],
"timeValues": [32],
"isMeridianFormat": [32],
"isDefaultEndTime": [32],
"setFocus": [64]
}]);
function defineCustomElement() {
const components = ["fw-timepicker", "fw-avatar", "fw-button", "fw-checkbox", "fw-icon", "fw-input", "fw-list-options", "fw-popover", "fw-select", "fw-select-option", "fw-spinner", "fw-tag", "fw-toast-message"];
components.forEach(tagName => { switch (tagName) {
case "fw-timepicker":
if (!customElements.get(tagName)) {
customElements.define(tagName, Timepicker);
}
break;
case "fw-avatar":
if (!customElements.get(tagName)) {
defineCustomElement$c();
}
break;
case "fw-button":
if (!customElements.get(tagName)) {
defineCustomElement$b();
}
break;
case "fw-checkbox":
if (!customElements.get(tagName)) {
defineCustomElement$a();
}
break;
case "fw-icon":
if (!customElements.get(tagName)) {
defineCustomElement$9();
}
break;
case "fw-input":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "fw-list-options":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "fw-popover":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "fw-select":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "fw-select-option":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "fw-spinner":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "fw-tag":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "fw-toast-message":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { Timepicker as T, defineCustomElement as d };