@aqua-ds/web-components
Version:
AquaDS Web Components
308 lines (302 loc) • 12.7 kB
JavaScript
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { D as DateTime } from './luxon.js';
import { n as numbro$1 } from './numbro.js';
import { e as emitEvent } from './eventEmitter.js';
const WEEK_DAYS = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
const HOURS_DAYS = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'];
const getTimesBySplit = (string) => {
const time = string.split(':');
return {
hour: parseInt(time[0], 10),
minutes: parseInt(time[1], 10),
};
};
const generateAllTimes = (currentHour = null) => {
const times = [];
if (currentHour !== null) {
for (let minute = 0; minute < 60; minute += 1) {
const formattedHour = currentHour.toString().padStart(2, '0');
const formattedMinute = minute.toString().padStart(2, '0');
times.push(`${formattedHour}:${formattedMinute}`);
}
return times;
}
for (let hour = 0; hour < 24; hour += 1) {
for (let minute = 0; minute < 60; minute += 1) {
const formattedHour = hour.toString().padStart(2, '0');
const formattedMinute = minute.toString().padStart(2, '0');
times.push(`${formattedHour}:${formattedMinute}`);
}
}
return times;
};
const getRestrictedHours = (range) => {
const { start, end } = range;
const allTimes = generateAllTimes();
let results = [];
const currentTimeStart = DateTime.fromFormat(start, 'HH:mm');
const currentTimeEnd = DateTime.fromFormat(end, 'HH:mm');
console.log('TMP All times:', allTimes);
allTimes.forEach(date => {
const currentActualTime = DateTime.fromFormat(date, 'HH:mm');
if (currentActualTime <= currentTimeEnd || currentActualTime >= currentTimeStart) {
const time = date.split(':');
if (parseInt(time[0], 10) !== currentTimeEnd.hour && parseInt(time[0], 10) !== currentTimeStart.hour) {
results.push(time[0]);
}
}
});
results = [...new Set(results)];
return results;
};
const getMinutes = (currentHour, range) => {
const { start, end } = range;
let results = [];
const startHour = getTimesBySplit(start).hour;
const startMinutes = getTimesBySplit(start).minutes;
const endHour = getTimesBySplit(end).hour;
const endMinutes = getTimesBySplit(end).minutes;
let minutesStartFrom = 0;
let isHourStart = false;
let isHourEnd = false;
if (currentHour === startHour) {
minutesStartFrom = startMinutes;
isHourStart = true;
}
if (currentHour === endHour) {
minutesStartFrom = endMinutes;
isHourEnd = true;
}
if (isHourStart || isHourEnd) {
const allTimes = generateAllTimes(currentHour);
allTimes.forEach(date => {
const currentActualTime = DateTime.fromFormat(date, 'HH:mm');
const currentMinutes = currentActualTime.minute;
const time = date.split(':');
if (isHourStart && currentMinutes > minutesStartFrom) {
results.push(time[1]);
}
if (isHourEnd && currentMinutes < minutesStartFrom) {
results.push(time[1]);
}
if (minutesStartFrom === 0) {
results.push(time[1]);
}
});
if (currentHour === endHour && minutesStartFrom === 0) {
results = [];
}
}
else {
results = [];
}
results = [...new Set(results)].map(min => parseInt(min, 10));
if (minutesStartFrom === 0) {
results.shift();
}
return results;
};
const parseArrays = (array) => {
const localArray = [...array];
const reducedLocalArray = localArray.reduce((acc, curr) => acc + curr, '').split(',');
const filterLocalArray = reducedLocalArray.filter(hour => hour !== '').sort();
return filterLocalArray;
};
const getRestrictions = (restrictionsByDay) => {
console.log('TMP Restrictions', restrictionsByDay);
const restrictedHours = [];
if (Array.isArray(restrictionsByDay)) {
restrictionsByDay.forEach((element, idx) => {
restrictedHours[idx] = `${getRestrictedHours(element)},`;
});
const result = [];
const hoursParsed = parseArrays(restrictedHours);
const quantityRestricctions = restrictionsByDay.length;
hoursParsed.forEach(hour => {
const repeatHours = hoursParsed.filter(h => h === hour).length;
if (repeatHours === quantityRestricctions) {
result.push(hour);
}
});
return result;
}
return getRestrictedHours(restrictionsByDay);
};
const getRestrictionsMinutes = (hour, restrictionsByDay) => {
const restrictedMinutes = [];
if (Array.isArray(restrictionsByDay)) {
restrictionsByDay.forEach((element, idx) => {
restrictedMinutes[idx] = `${getMinutes(hour, element)},`;
});
return parseArrays(restrictedMinutes).map(minute => parseInt(minute, 10));
}
return getMinutes(hour, restrictionsByDay);
};
const aqTimePickerCss = ".aq-time-picker{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.aq-time-picker span{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:12px;font-weight:var(--font-weight-regular);line-height:var(--spacing-size-moderate);color:var(--color-ink-base);margin-right:4px}.aq-time-picker span em{font-size:var(--spacing-size-moderate);font-weight:var(--font-weight-regular);color:var(--color-ink-base)}.aq-time-picker select{font-family:var(--font-family-basic);font-size:15px}.aq-time-picker .aq-time-item{display:-ms-flexbox;display:flex;outline:none;height:34px;padding:5px 5px;border:1px solid #d3d5e2}.aq-time-picker .aq-time-item.aq-time-hour-select{border-radius:4px;color:var(--color-ink-base)}.aq-time-picker .aq-time-item option:disabled{color:#cbd5e0}.aq-time-picker .aq-time-item.aq-date-minute-select{border-radius:4px;margin-left:8px;color:var(--color-ink-base)}.aq-time-picker-icon{margin-right:2px}";
const AqTimePicker = /*@__PURE__*/ proxyCustomElement(class AqTimePicker extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.value = '';
this.inline = false;
this.maxTime = '';
this.minTime = '';
this.label = '';
this.dayOfWeek = null;
this.restrictions = {};
this.hour = 0;
this.minutes = 0;
this.restrictedHours = [];
this.restrictedMinutes = [];
this.handleHourChange = (event) => {
this.hour = parseInt(event.target.value, 10);
this.setTimeMinMax(true);
event.stopPropagation();
};
this.handleMinuteChange = (event) => {
this.minutes = parseInt(event.target.value, 10);
this.setTimeMinMax(true);
event.stopPropagation();
};
}
get existRestrictions() {
return this.restrictions && Object.keys(this.restrictions)?.length > 0;
}
handleValueChange() {
this.setRestrictedArray();
this.parseTime();
}
handleMinTimeChange() {
this.setTimeMinMax(false);
}
handleMaxTimeChange() {
this.setTimeMinMax(false);
}
handleDayChange() {
this.setRestrictedArray();
}
handleRestrictionsChange() {
this.setRestrictedArray();
}
componentWillLoad() {
this.parseTime();
}
parseTime() {
if (this.value) {
const parsed = DateTime.fromFormat(this.value, 'HH:mm');
this.hour = parsed.hour;
this.minutes = parsed.minute;
}
}
emitHours() {
emitEvent('change', this.el, { value: `${numbro$1(this.hour).format('00')}:${numbro$1(this.minutes).format('00')}` });
}
disabledHour(hour) {
if (this.existRestrictions) {
return this.restrictedHours.includes(HOURS_DAYS[hour]);
}
const maxHour = this.maxTime ? getTimesBySplit(this.maxTime).hour : null;
const minHour = this.minTime ? getTimesBySplit(this.minTime).hour : null;
if (minHour && hour < minHour)
return true;
if (maxHour && hour > maxHour)
return true;
return false;
}
disableMinutes(minutes) {
const { hour } = this;
if (this.existRestrictions) {
return this.restrictedMinutes.includes(minutes);
}
if (this.maxTime) {
const { hour: maxHour, minutes: maxMinutes } = getTimesBySplit(this.maxTime);
if (hour === maxHour && minutes > maxMinutes)
return true;
}
if (this.minTime) {
const { hour: minHour, minutes: minMinutes } = getTimesBySplit(this.minTime);
if (hour === minHour && minutes < minMinutes)
return true;
}
return false;
}
setTimeMinMax(emit = false) {
const min = this.minTime ? getTimesBySplit(this.minTime) : null;
const max = this.maxTime ? getTimesBySplit(this.maxTime) : null;
if (min) {
if (this.hour <= min.hour) {
this.hour = min.hour;
if (this.minutes <= min.minutes) {
this.minutes = min.minutes;
}
}
}
if (max) {
if (this.hour >= max.hour) {
this.hour = max.hour;
if (this.minutes >= max.minutes) {
this.minutes = max.minutes;
}
}
}
if (emit) {
this.emitHours();
}
}
setRestrictedArray() {
let dayToSearch = WEEK_DAYS[this.dayOfWeek - 1];
if (this.dayOfWeek === 0)
dayToSearch = 'sunday';
const existDayRestriction = this.restrictions?.[dayToSearch];
if (this.existRestrictions && existDayRestriction !== undefined) {
this.restrictedHours = getRestrictions(existDayRestriction);
this.restrictedMinutes = getRestrictionsMinutes(this.hour, existDayRestriction);
}
}
render() {
return (h("div", { key: 'cd3ae0439bf62f55cd385dc1ba2add697e1fb24b', class: "aq-time-picker" }, h("span", { key: 'd64568a3518a0501521a19adaee8aabf8d57f124' }, h("em", { key: '4bab4d05147192b72ac6f64d36f9ade2db56fcb5', class: "aq-icon-timer aq-time-picker-icon" }), " ", this.label), h("select", { key: '9b7fd3a21d756c1ab707e4fdbc1b681189b510af', class: "aq-time-item aq-time-hour-select", onChange: evt => this.handleHourChange(evt) }, [...Array(24)].map((_, i) => (h("option", { key: i, value: i, disabled: this.disabledHour(i), selected: this.hour === i }, numbro$1(i).format('00'))))), h("select", { key: '2674aff06f9cb8aab43b4c332787ef3d7e3b0028', class: "aq-time-item aq-date-minute-select", onChange: evt => this.handleMinuteChange(evt) }, [...Array(60)].map((_, i) => (h("option", { key: i, value: i, disabled: this.disableMinutes(i), selected: this.minutes === i }, numbro$1(i).format('00')))))));
}
get el() { return this; }
static get watchers() { return {
"value": ["handleValueChange"],
"minTime": ["handleMinTimeChange"],
"maxTime": ["handleMaxTimeChange"],
"dayOfWeek": ["handleDayChange"],
"restrictions": ["handleRestrictionsChange"]
}; }
static get style() { return aqTimePickerCss; }
}, [256, "aq-time-picker", {
"value": [1],
"inline": [4],
"maxTime": [1, "max-time"],
"minTime": [1, "min-time"],
"label": [1],
"dayOfWeek": [2, "day-of-week"],
"restrictions": [8],
"hour": [32],
"minutes": [32],
"restrictedHours": [32],
"restrictedMinutes": [32]
}, undefined, {
"value": ["handleValueChange"],
"minTime": ["handleMinTimeChange"],
"maxTime": ["handleMaxTimeChange"],
"dayOfWeek": ["handleDayChange"],
"restrictions": ["handleRestrictionsChange"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-time-picker"];
components.forEach(tagName => { switch (tagName) {
case "aq-time-picker":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqTimePicker);
}
break;
} });
}
export { AqTimePicker as A, defineCustomElement as d };