import { i, r, x, A } from './query-assigned-elements-fea1f631.js';
|
import { e } from './custom-element-30fc6381.js';
|
import { n, B as BaseElement } from './base.component-813fc7cf.js';
|
import { t } from './state-7ee0cf4f.js';
|
import { c as css_248z$1 } from './common-8a4d61f3.js';
|
import '@dh-software/furnview-icons';
|
|
/**
|
* @license
|
* Copyright 2021 Google LLC
|
* SPDX-License-Identifier: BSD-3-Clause
|
*/
|
function*o$1(o,f){if(void 0!==o){let i=0;for(const t of o)yield f(t,i++);}}
|
|
/**
|
* @license
|
* Copyright 2021 Google LLC
|
* SPDX-License-Identifier: BSD-3-Clause
|
*/
|
function*o(o,l,n=1){const t=void 0===l?0:o;null!=l||(l=o);for(let o=t;n>0?o<l:l<o;o+=n)yield o;}
|
|
var css_248z = i`*{box-sizing:border-box;user-select:none}:host{display:inline}#container{display:inline;position:relative}#input-container{border:1px solid gray;display:inline;padding:1px}#input{border:0;min-width:3rem;outline:none}#calendar{background-color:#fff;border:1px solid #d3d3d3;bottom:calc(100% + 2px);display:flex;flex-direction:column;line-height:1.75rem;position:absolute;right:0;width:15rem}#calendar .header .control{display:flex;flex-direction:row;justify-content:center}#calendar .header .control *{flex:1}#calendar .header .control .display{text-align:center}#calendar .content{align-items:stretch;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);justify-items:stretch}#calendar .content span{text-align:center}#calendar .content [day][disabled]{color:#eee}#calendar .content [day]:not([disabled]):hover{background-color:var(--primary-color,red);color:var(--label-color,#fff)}button{background-color:transparent;border:none}`;
|
|
var __defProp = Object.defineProperty;
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
var __getProtoOf = Object.getPrototypeOf;
|
var __reflectGet = Reflect.get;
|
var __decorateClass = (decorators, target, key, kind) => {
|
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
if (decorator = decorators[i])
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
if (kind && result)
|
__defProp(target, key, result);
|
return result;
|
};
|
var __superStaticGet = (obj, member) => __reflectGet(__getProtoOf(obj), member, obj);
|
const weekdays = new Map([
|
["MONDAY", 0],
|
["TUESDAY", 1],
|
["WEDNESDAY", 2],
|
["THURSDAY", 3],
|
["FRIDAY", 4],
|
["SATURDAY", 5],
|
["SUNDAY", 6]
|
]);
|
function toShortDate(year, month, day) {
|
const formatter = new Intl.NumberFormat(navigator.languages[0], { minimumIntegerDigits: 2, useGrouping: false });
|
return `${formatter.format(year)}-${formatter.format(month + 1)}-${formatter.format(day)}`;
|
}
|
function toDisplayDate(year, month, day) {
|
const formatter = new Intl.DateTimeFormat(navigator.languages[0], { year: "numeric", month: "2-digit", day: "2-digit" });
|
return formatter.format(new Date(year, month, day));
|
}
|
let DatepickerComponent = class extends BaseElement {
|
constructor() {
|
super(...arguments);
|
this.date = new Date();
|
this.day = new Date().getDate();
|
this.month = new Date().getMonth();
|
this.year = new Date().getFullYear();
|
this.open = false;
|
this.parsedValidDates = [];
|
this.parsedRestrictedDates = [];
|
this.validDates = "";
|
this.restrictedDates = "";
|
}
|
dispatchChange() {
|
this.dispatchEvent(new Event("change", { bubbles: true, composed: true, cancelable: true }));
|
}
|
close() {
|
this.open = false;
|
}
|
clickDay(event) {
|
const element = event.target;
|
if (element.tagName === "SPAN") {
|
if (element.hasAttribute("day") && !element.hasAttribute("disabled")) {
|
this.day = parseInt(element.innerText);
|
this.date = new Date(this.year, this.month, this.day);
|
this.close();
|
this.dispatchChange();
|
}
|
}
|
}
|
getDayOfWeek(dateOrYear, month, day) {
|
let dow;
|
if (typeof month !== "undefined" && typeof day !== "undefined") {
|
dow = new Date(dateOrYear, month, day).getDay() - 1;
|
} else {
|
dow = new Date(dateOrYear).getDay() - 1;
|
}
|
return dow >= 0 ? dow : 6;
|
}
|
getFirstDayOfTheMonth(year, month) {
|
return this.getDayOfWeek(year, month, 1);
|
}
|
getDayCount(year, month) {
|
return new Date(year, month + 1, 0).getDate();
|
}
|
isValidDate(date) {
|
return this.isDateInValidRange(date) && !this.isDateInInvalidRange(date);
|
}
|
renderCalendar() {
|
return x`
|
<div id='calendar'>
|
<div class='header'>
|
<div class='year control'>
|
<button @click='${this.decreaseYear}'><</button>
|
<span class='year display'>${this.year}</span>
|
<button @click='${this.increaseYear}'>></button>
|
</div>
|
<div class='month control'>
|
<button @click='${this.decreaseMonth}'><</button>
|
<span class='month display'>${this.getPrettyMonth()}</span>
|
<button @click='${this.increaseMonth}'>></button>
|
</div>
|
</div>
|
<div class='content' @click='${this.clickDay}'>
|
${o$1(o(1, 8), (i) => x`<span>${this.getPrettyDay(i)}</span>`)}
|
${o$1(o(this.getFirstDayOfTheMonth(this.year, this.month)), () => x`<span></span>`)}
|
${o$1(o(1, this.getDayCount(this.year, this.month) + 1), (i) => x`<span day part='day' ?disabled='${!this.isValidDate(toShortDate(this.year, this.month, i))}'>${i}</span>`)}
|
</div>
|
</div>`;
|
}
|
click() {
|
this.open = !this.open;
|
if (this.open) {
|
this.year = this.date.getFullYear();
|
this.month = this.date.getMonth();
|
this.day = this.date.getDate();
|
}
|
}
|
decreaseYear() {
|
this.year--;
|
}
|
increaseYear() {
|
this.year++;
|
}
|
decreaseMonth() {
|
this.month--;
|
if (this.month < 0) {
|
this.month = 11;
|
this.decreaseYear();
|
}
|
}
|
increaseMonth() {
|
this.month++;
|
if (this.month > 11) {
|
this.month = 0;
|
this.increaseYear();
|
}
|
}
|
getPrettyMonth() {
|
const formatter = new Intl.DateTimeFormat(navigator.languages[0], { month: "short" });
|
return formatter.format(new Date(this.year, this.month));
|
}
|
getPrettyDay(day) {
|
const formatter = new Intl.DateTimeFormat(navigator.languages[0], { weekday: "short" });
|
return formatter.format(new Date(2024, 0, day));
|
}
|
parseDates(value) {
|
if (!value) {
|
return [];
|
}
|
const values = value.split(",");
|
return values.map((value2) => {
|
const split = value2.split(":");
|
if (split.length === 1) {
|
return { min: "", max: "", exact: split[0] };
|
} else if (split.length >= 2) {
|
return { min: split[0] || "0_infinity", max: split[1] || "9_infinity", exact: "" };
|
} else {
|
return { min: "0_infinity", max: "9_infinity", exact: "" };
|
}
|
});
|
}
|
isDateInRange(date, validRanges = []) {
|
if (validRanges.length > 0) {
|
return validRanges.some((range2) => range2.exact === date || weekdays.has(range2.exact.toUpperCase()) && weekdays.get(range2.exact.toUpperCase()) === this.getDayOfWeek(date)) || validRanges.some((range2) => range2.min <= date && range2.max >= date);
|
}
|
return true;
|
}
|
isDateInInvalidRange(date) {
|
if (this.parsedRestrictedDates.length > 0) {
|
return this.isDateInRange(date, this.parsedRestrictedDates);
|
}
|
return false;
|
}
|
isDateInValidRange(date) {
|
if (this.parsedValidDates.length > 0) {
|
return this.isDateInRange(date, this.parsedValidDates);
|
}
|
return true;
|
}
|
get value() {
|
return toShortDate(this.date.getFullYear(), this.date.getMonth(), this.date.getDate());
|
}
|
set value(date) {
|
this.date = new Date(date);
|
this.dispatchChange();
|
}
|
get valueAsDate() {
|
return this.date;
|
}
|
set valueAsDate(date) {
|
this.date = date;
|
this.dispatchChange();
|
}
|
connectedCallback() {
|
super.connectedCallback();
|
this.setAttribute("tabindex", "-1");
|
this.addEventListener("focusout", () => this.close());
|
}
|
attributeChangedCallback(name, _old, value) {
|
super.attributeChangedCallback(name, _old, value);
|
if (name === "valid-dates") {
|
this.parsedValidDates = this.parseDates(value);
|
} else if (name === "restricted-dates") {
|
this.parsedRestrictedDates = this.parseDates(value);
|
}
|
}
|
render() {
|
return x`
|
<div id="container">
|
<div id='input-container' @click='${this.click}'>
|
<input id='input' readonly .value='${toDisplayDate(this.date.getFullYear(), this.date.getMonth(), this.date.getDate())}'/><button>📆</button>
|
</div>
|
${this.open ? this.renderCalendar() : A}
|
</div>
|
`;
|
}
|
};
|
DatepickerComponent.styles = [
|
__superStaticGet(DatepickerComponent, "styles") || [],
|
r(css_248z),
|
r(css_248z$1)
|
];
|
__decorateClass([
|
t()
|
], DatepickerComponent.prototype, "date", 2);
|
__decorateClass([
|
t()
|
], DatepickerComponent.prototype, "day", 2);
|
__decorateClass([
|
t()
|
], DatepickerComponent.prototype, "month", 2);
|
__decorateClass([
|
t()
|
], DatepickerComponent.prototype, "year", 2);
|
__decorateClass([
|
t()
|
], DatepickerComponent.prototype, "open", 2);
|
__decorateClass([
|
t()
|
], DatepickerComponent.prototype, "parsedValidDates", 2);
|
__decorateClass([
|
t()
|
], DatepickerComponent.prototype, "parsedRestrictedDates", 2);
|
__decorateClass([
|
n({ type: String, attribute: "valid-dates" })
|
], DatepickerComponent.prototype, "validDates", 2);
|
__decorateClass([
|
n({ type: String, attribute: "restricted-dates" })
|
], DatepickerComponent.prototype, "restrictedDates", 2);
|
DatepickerComponent = __decorateClass([
|
e("fv-datepicker")
|
], DatepickerComponent);
|
|
export { DatepickerComponent };
|
