dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
575 lines (574 loc) • 22.7 kB
JavaScript
var f = (g, t, i) => new Promise((e, s) => {
var a = (m) => {
try {
y(i.next(m));
} catch (D) {
s(D);
}
}, n = (m) => {
try {
y(i.throw(m));
} catch (D) {
s(D);
}
}, y = (m) => m.done ? e(m.value) : Promise.resolve(m.value).then(a, n);
y((i = i.apply(g, t)).next());
});
import { clsx as c } from "../../node_modules/clsx/dist/clsx.js";
import l from "../../_virtual/dayjs.min.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { nothing as b } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as d } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { state as v } from "../../node_modules/@lit/reactive-element/decorators/state.js";
import { query as $ } from "../../node_modules/@lit/reactive-element/decorators/query.js";
import { ifDefined as p } from "../../node_modules/lit-html/directives/if-defined.js";
import { html as u } from "../../node_modules/lit-html/static.js";
import { getValidityStateObject as V } from "../../common/utils.js";
import { GenericFormElement as S } from "../../internal/mixin/genericFormElement.js";
import "../../localization/localization.js";
import I from "../calendar/calendar.component.js";
import k from "../feedback/feedback.component.js";
import C from "../form/form-label/form-label.component.js";
import z from "../icon/icon.component.js";
import x from "../icon-button/icon-button.component.js";
import E from "../icons/business/business-calendar-line/business-calendar-line.component.js";
import M from "../icons/system/system-loading-spinner/system-loading-spinner.component.js";
import F from "../popup/popup.component.js";
import w from "../tooltip/tooltip.component.js";
import B from "../typography/typography.component.js";
import A from "./datepicker.scss.js";
import { t as O } from "../../node_modules/i18next/dist/esm/i18next.js";
import { unsafeCSS as L } from "../../node_modules/@lit/reactive-element/css-tag.js";
var T = Object.defineProperty, o = (g, t, i, e) => {
for (var s = void 0, a = g.length - 1, n; a >= 0; a--)
(n = g[a]) && (s = n(t, i, s) || s);
return s && T(t, i, s), s;
}, h;
const r = (h = class extends S {
constructor() {
super(), this.mode = "single", this.disabledDate = (i) => !i, this.placement = "bottom-start", this.opened = !1, this.openCalendarOnInput = !1, this.sendEmptyEventOnInput = !1, this.loading = !1, this.mask = !1, this.formatSeparator = "|", this.clearButton = "true", this.clearButtonTestId = "datepicker-clear-button", this.calendarButtonTestId = "datepicker-calendar-button", this.floatingStrategy = "fixed", this.disableViewportAutoClose = !1, this.locale = l.locale(), this.formatOptions = [], this.setValueState = !0, this.lastMaskDigitCount = 0, this.handleDocumentMouseDown = (i) => {
const e = i.composedPath();
this && !e.includes(this) && (!this.popup || !e.includes(this.popup)) && this.hideCalendar();
}, this.handlePopupAutoClose = () => {
this.hideCalendar({ skipFocus: !0 });
}, this.handleInput = (i) => {
const e = i.target;
if (this.isMaskActive()) {
let s = e.value.replace(/\D/g, "");
(i.inputType === "deleteContentBackward" || i.inputType === "deleteContentForward") && s.length === this.lastMaskDigitCount && (s = s.slice(0, -1)), this.lastMaskDigitCount = s.length;
const n = this.buildMaskedValue(s);
e.value = n, e.setSelectionRange(n.length, n.length);
}
if (!e.value)
this.setValue(void 0, !1, !0);
else if (this.isInputValid()) {
const s = l(e.value).locale(this.locale), a = this.normalizeDate(this.minDate) || l("1901-01-01"), n = this.normalizeDate(this.maxDate) || l("2099-12-31");
s.isBefore(a, "day") || s.isAfter(n, "day") ? (this.setValue(void 0, !1, this.sendEmptyEventOnInput), this.emit("dds-invalid-date", {
value: e.value,
type: "out-of-range"
})) : (this.setValue(s, !1), this.currentDate = s, this.emit("dds-valid-date", { value: e.value }));
} else
this.setValue(void 0, !1, this.sendEmptyEventOnInput), this.emit("dds-invalid-date", { value: e.value, type: "invalid" });
this.openCalendarOnInput && !this.opened && this.showCalendar(), this.emit("dds-input", { value: e.value });
}, this.handleKeyDown = (i) => f(this, null, function* () {
i.key !== "Tab" && (i.key === "Enter" || i.key === "ArrowDown" || i.key === "ArrowUp") && (i.preventDefault(), i.stopPropagation(), this.opened ? this.hideCalendar() : (this.showCalendar(), yield this.updateComplete, this.calendar.captureFocus()));
}), this.handleClick = () => {
this.opened ? this.hideCalendar() : this.showCalendar();
}, this.handleClearClick = () => {
this.disabled || (this.clearSelection(), this.triggerInput.focus(), this.setValidity(), this.hideCalendar(), this.emit("dds-clear"));
}, this.handleFocus = () => {
this.emit("dds-focus");
}, this.handleBlur = () => {
this.emit("dds-blur");
}, h.nextId++;
const t = typeof crypto != "undefined" && crypto.randomUUID ? crypto.randomUUID().slice(0, 8) : Date.now().toString(36);
this.inputId = `input-${h.nextId}-${t}`, this.labelId = `label-${h.nextId}-${t}`, this.descriptionId = `description-${h.nextId}-${t}`, this.feedbackId = `feedback-${h.nextId}-${t}`;
}
/**
* Normalizes a date value to a Dayjs object.
* Handles Dayjs objects, timestamps (numbers or strings), strings, Date objects, and undefined/null.
*/
normalizeDate(t) {
if (t != null) {
if (l.isDayjs(t))
return t;
if (typeof t == "string") {
const i = t.trim();
if (/^\d+$/.test(i)) {
const e = Number(i);
if (e > 0 && e < 1e10)
return l(e * 1e3);
if (e >= 0 && e <= 41024448e5)
return l(e);
}
return l(t);
}
if (typeof t == "number") {
if (t > 0 && t < 1e10)
return l(t * 1e3);
if (t >= 0 && t <= 41024448e5)
return l(t);
}
return l(t);
}
}
firstUpdated(t) {
var a;
if (super.firstUpdated(t), this.formatOptions = ((a = this.format) == null ? void 0 : a.split(this.formatSeparator)) || [], this.calendar.mode = this.mode, this.mode === "range") {
if (this.rangeStart) {
const n = this.normalizeDate(this.rangeStart);
n && (this.calendar.rangeStart = n.locale(this.locale));
}
if (this.rangeEnd) {
const n = this.normalizeDate(this.rangeEnd);
n && (this.calendar.rangeEnd = n.locale(this.locale));
}
} else if (this.value) {
const n = this.normalizeDate(this.value);
n && (this.calendar.value = n.locale(this.locale), this.value = n, this.setValueState && this.triggerInput && (this.triggerInput.value = this.getFormattedValue()));
}
const i = this.normalizeDate(this.currentDate);
this.calendar.currentDate = i || l();
const e = this.normalizeDate(this.minDate);
this.calendar.minDate = e || l("1901-01-01"), e && (this.minDate = e);
const s = this.normalizeDate(this.maxDate);
this.calendar.maxDate = s || l("2099-12-31"), s && (this.maxDate = s), this.calendar.disabledDate = this.disabledDate, this.hideAdjacentMonths !== void 0 && (this.calendar.hideAdjacentMonths = this.hideAdjacentMonths);
}
updated(t) {
var s;
super.updated(t);
const i = t.has("value"), e = !i && this.value && this.mode === "single" && this.hasUpdated;
if ((i || e) && this.mode === "single") {
const a = this.normalizeDate(this.value);
if (a) {
const n = this.calendar.value;
(!n || !a.isSame(n, "day")) && (this.calendar.value = a.locale(this.locale), this.value = a);
} else
this.calendar.value = void 0;
this.setValueState && this.triggerInput && (this.triggerInput.value = this.getFormattedValue()), this.setValidity();
}
if (t.has("rangeStart") && this.mode === "range") {
const a = this.normalizeDate(this.rangeStart);
a ? (this.calendar.rangeStart = a.locale(this.locale), this.rangeStart = a) : this.calendar.rangeStart = void 0, this.setValueState && this.rangeStart && this.rangeEnd && (this.triggerInput.value = this.getFormattedValue());
}
if (t.has("rangeEnd") && this.mode === "range") {
const a = this.normalizeDate(this.rangeEnd);
a ? (this.calendar.rangeEnd = a.locale(this.locale), this.rangeEnd = a) : this.calendar.rangeEnd = void 0, this.setValueState && this.rangeStart && this.rangeEnd && (this.triggerInput.value = this.getFormattedValue());
}
if (t.has("currentDate")) {
const a = this.normalizeDate(this.currentDate);
this.calendar.currentDate = a || l();
}
if (t.has("minDate")) {
const a = this.normalizeDate(this.minDate);
this.calendar.minDate = a || l("1901-01-01"), a && (this.minDate = a);
}
if (t.has("maxDate")) {
const a = this.normalizeDate(this.maxDate);
this.calendar.maxDate = a || l("2099-12-31"), a && (this.maxDate = a);
}
t.has("disabledDate") && (this.calendar.disabledDate = this.disabledDate), (t.has("format") || t.has("formatSeparator")) && (this.formatOptions = ((s = this.format) == null ? void 0 : s.split(this.formatSeparator)) || []);
}
getFormattedValue() {
if (this.mode === "range") {
if (!this.rangeStart || !this.rangeEnd)
return "";
const t = this.formatOptions[0] || "L", i = l(this.rangeStart).locale(this.locale).format(t), e = l(this.rangeEnd).locale(this.locale).format(t);
return `${i} - ${e}`;
}
return this.value ? l(this.value).locale(this.locale).format(this.formatOptions[0] || "L") : "";
}
isValidFormat(t) {
if (!this.formatOptions.length) {
const i = t.trim(), e = l().locale(this.locale).localeData().longDateFormat("L"), s = l(i, e);
if (!s.isValid())
return !1;
const a = s.format(e), n = i.replace(/[.,\s]+$/, "");
return a.replace(/[.,\s]+$/, "") === n;
}
return this.formatOptions.some((i) => {
const e = l(t, i);
if (!e.isValid())
return !1;
const s = e.format(i), a = t.replace(/[.,\s]+$/, "");
return s.replace(/[.,\s]+$/, "") === a;
});
}
isValueValid() {
return this.value ? this.isInputValid() : !0;
}
isInputValid() {
return this.isValidFormat(this.triggerInput.value);
}
setValue(t, i = !0, e = !0) {
this.value = t, i ? (this.setValueState = !0, this.triggerInput.value = this.getFormattedValue()) : this.setValueState = !1, this.internals && this.internals.setFormValue(
this.value ? this.value.toString() : this.defaultValue
), this.setValidity(), this.hideCalendar(), e && (this.emit("dds-change", { value: this.value }), this.emit("dds-valid-date", { value: this.triggerInput.value }));
}
clearSelection() {
return f(this, null, function* () {
this.lastMaskDigitCount = 0, this.setValue(void 0, !0, !0);
});
}
isMaskActive() {
return this.mask && this.mode === "single" && this.formatOptions.length <= 1;
}
getActiveMaskFormat() {
return this.formatOptions.length > 0 ? this.formatOptions[0] : l().locale(this.locale).localeData().longDateFormat("L");
}
parseMaskTokens(t) {
const i = [];
let e = 0;
for (; e < t.length; )
t.startsWith("YYYY", e) ? (i.push({ type: "digit", length: 4 }), e += 4) : t.startsWith("YY", e) ? (i.push({ type: "digit", length: 2 }), e += 2) : t.startsWith("MM", e) ? (i.push({ type: "digit", length: 2 }), e += 2) : t.startsWith("DD", e) ? (i.push({ type: "digit", length: 2 }), e += 2) : t[e] === "M" ? (i.push({ type: "digit", length: 2 }), e += 1) : t[e] === "D" ? (i.push({ type: "digit", length: 2 }), e += 1) : (i.push({ type: "separator", value: t[e] }), e += 1);
return i;
}
buildMaskedValue(t) {
const i = this.parseMaskTokens(this.getActiveMaskFormat());
let e = "", s = 0;
for (const a of i)
if (a.type === "separator")
s > 0 && (e += a.value);
else {
const n = t.slice(s, s + a.length);
if (e += n, s += n.length, n.length < a.length)
break;
}
return e;
}
get focusElement() {
return this.triggerInput;
}
showCalendar() {
return f(this, null, function* () {
this.disabled || this.readonly || this.opened || (this.opened = !0, document.addEventListener("mousedown", this.handleDocumentMouseDown));
});
}
hideCalendar(t) {
return f(this, null, function* () {
this.opened && (this.opened = !1, document.removeEventListener("mousedown", this.handleDocumentMouseDown), yield this.updateComplete, t != null && t.skipFocus || this.focus());
});
}
// custom validation
getValidity() {
return !!this.value;
}
get validity() {
return this.internals.validity ? this.internals.validity : V({
valueMissing: this.required && !this.getValidity(),
patternMismatch: !this.isValueValid()
});
}
checkValidity() {
return this.required && this.getValidity() && this.isValueValid();
}
reportValidity() {
return this.required && this.getValidity() && this.isValueValid();
}
setValidity() {
this.checkValidity() ? this.internals.setValidity({}) : this.internals.setValidity(
{
valueMissing: this.required && !this.getValidity(),
patternMismatch: !this.isValueValid()
},
this.validationMessage,
this.triggerInput
);
}
handleInvalid(t) {
t.preventDefault();
}
render() {
var t, i;
return u` <div class="label-container">
${this.label && u`<dap-ds-form-label
part="label"
id=${this.labelId}
.size=${this.size}
.required=${this.required}
.requiredLabel=${this.requiredLabel}
.optional=${this.optional}
.optionalLabel=${this.optionalLabel}
.disabled=${this.disabled}
class=${c("label")}
.noMargin=${!!this.description}
for=${this.inputId}
.hideLabel=${this.hideLabel}
label=${p(this.label)}>
</dap-ds-form-label>`}
${this.tooltip && u` <dap-ds-tooltip
part="tooltip"
content=${this.tooltip}
mode="toggle"
placement=${this.tooltipPlacement}>
<dap-ds-icon-button
slot="trigger"
size=${this.size}
iconSize=${this.size === "xs" ? "16" : "22"}
class="info-button"
clean>
<dap-ds-icon
name="information-line"
aria-label=${this.tooltipAriaLabel}
class="info-button"></dap-ds-icon>
</dap-ds-icon-button>
</dap-ds-tooltip>`}
</div>
${this.description && u`
<dap-ds-typography
part="description"
variant="description"
class=${c("input-description")}
size=${p(this.size)}
id=${this.descriptionId}>
${this.description}
</dap-ds-typography>
`}
<div>
<dap-ds-popup
part="base"
class="select-popup"
overflow
?opened=${this.opened}
?hasArrow=${!1}
placement=${this.placement}
floatingStrategy=${this.floatingStrategy}
maxHeight="auto"
offset="4"
?disableViewportAutoClose=${this.disableViewportAutoClose}
@dds-close=${this.handlePopupAutoClose}>
<div
slot="trigger"
part="trigger"
class="${c("select", `select--${this.size}`, {
"select--disabled": this.disabled,
"select--readonly": this.readonly,
"select--opened": this.opened,
"select--loading": this.loading,
"select--success": this.status === "success",
"select--error": this.status === "error",
"select--no-animation": !0
})}">
<input
part="input"
role="combobox"
class="${c("combobox__input", "input", `input--${this.size}`, {
"input--disabled": this.disabled,
"input--readonly": this.readonly
})}"
id=${this.inputId}
value=${this.getFormattedValue()}
aria-expanded=${this.opened}
aria-haspopup="dialog"
aria-labelledby=${p(this.label ? this.labelId : b)}
aria-describedby="${p(
this.description ? this.descriptionId : b
)} ${p(this.feedback ? this.feedbackId : b)}"
aria-disabled=${this.disabled}
aria-controls="calendar"
aria-autocomplete="none"
?required=${this.required}
?readonly=${this.readonly}
?autofocus=${this.autofocus}
?disabled=${this.disabled}
autocomplete=${this.autocomplete}
placeholder=${p((t = this.placeholder) != null ? t : "")}
@blur=${this.handleBlur}
@focus=${this.handleFocus}
@input=${this.handleInput}
@keydown=${this.handleKeyDown}
@invalid=${this.handleInvalid}
@click=${this.handleClick} />
<div
class="${c("select-action", `select-action--${this.size}`, {
"select-action--disabled": this.disabled,
"select-action--readonly": this.readonly,
"select-action--opened": this.opened
})}">
${this.clearButton === "true" && !this.readonly ? u`<div class="${c("clear-icon")}">
<dap-ds-icon-button
icon="close-line"
part="clear-button"
data-testid=${this.clearButtonTestId}
aria-label=${p(
(i = this.clearButtonAriaLabel) != null ? i : O("clear", { lng: this.locale })
)}
?disabled=${this.disabled}
@click=${this.handleClearClick}></dap-ds-icon-button>
</div>` : b}
<div
class="${c("indicator-icon", {
"indicator-icon--loading": this.loading
})}">
${this.loading ? u`<dap-ds-icon-loading-spinner></dap-ds-icon-loading-spinner>` : u`<dap-ds-icon-calendar-line
aria-hidden="true"
part="calendar-button"
data-testid=${this.calendarButtonTestId}
class=${c("calendar-icon")}
@click=${this.handleClick}></dap-ds-icon-calendar-line>`}
</div>
</div>
</div>
<dap-ds-calendar
id="calendar"
part="calendar"
exportparts="calendar-header-button-prev, calendar-header-button-next, calendar-header-year-select, calendar-header-month-select, calendar-grid-header-cell, calendar-grid-cell, calendar-grid-header-cell-base, calendar-grid-cell-base, calendar-grid-cell-today-mark"
locale=${this.locale}
@dds-close=${this.hideCalendar}
@dds-change=${(e) => {
e.preventDefault(), e.stopPropagation(), this.mode === "single" && this.setValue(e.detail.value);
}}
@dds-range-change=${(e) => {
e.preventDefault(), e.stopPropagation(), this.mode === "range" && (this.rangeStart = e.detail.startDate, this.rangeEnd = e.detail.endDate, this.triggerInput.value = this.getFormattedValue(), this.emit("dds-change", {
startDate: this.rangeStart,
endDate: this.rangeEnd
}), this.hideCalendar());
}}>
</dap-ds-calendar>
</dap-ds-popup>
${this.feedback && u`<dap-ds-feedback
part="feedback"
feedbackType=${p(this.feedbackType)}
feedbackSize="${p(this.size)}"
id="feedback">
${this.feedback}
</dap-ds-feedback>`}
</div>`;
}
}, h.tagName = "dap-ds-datepicker", h.dependencies = {
"dap-ds-form-label": C,
"dap-ds-tooltip": w,
"dap-ds-icon-button": x,
"dap-ds-icon": z,
"dap-ds-typography": B,
"dap-ds-popup": F,
"dap-ds-icon-loading-spinner": M,
"dap-ds-icon-calendar-line": E,
"dap-ds-calendar": I,
"dap-ds-feedback": k
}, h.nextId = 0, h.datePropertyConverter = {
fromAttribute: (t) => {
if (t == null || t === "")
return;
const i = t.trim();
if (i) {
if (/^\d+$/.test(i)) {
const e = Number(i);
if (e > 0 && e < 1e10)
return l(e * 1e3);
if (e >= 0 && e <= 41024448e5)
return l(e);
}
return l(t);
}
},
toAttribute: (t) => t == null ? null : l.isDayjs(t) || t instanceof Date ? t.toISOString() : typeof t == "string" ? t : typeof t == "number" ? String(t) : null
}, h.styles = L(A), h);
o([
$(".combobox__input")
], r.prototype, "triggerInput");
o([
$("#calendar")
], r.prototype, "calendar");
o([
$("dap-ds-popup")
], r.prototype, "popup");
o([
d({
converter: r.datePropertyConverter
})
], r.prototype, "value");
o([
d({ reflect: !0 })
], r.prototype, "mode");
o([
d({
converter: r.datePropertyConverter
})
], r.prototype, "currentDate");
o([
d({
converter: r.datePropertyConverter
})
], r.prototype, "minDate");
o([
d({
converter: r.datePropertyConverter
})
], r.prototype, "maxDate");
o([
d({ attribute: !1 })
], r.prototype, "disabledDate");
o([
d({
converter: r.datePropertyConverter
})
], r.prototype, "rangeStart");
o([
d({
converter: r.datePropertyConverter
})
], r.prototype, "rangeEnd");
o([
d({ reflect: !0 })
], r.prototype, "placement");
o([
d({ type: Boolean, reflect: !0 })
], r.prototype, "opened");
o([
d({ type: Boolean })
], r.prototype, "openCalendarOnInput");
o([
d({ type: Boolean })
], r.prototype, "sendEmptyEventOnInput");
o([
d()
], r.prototype, "placeholder");
o([
d({ type: Boolean })
], r.prototype, "loading");
o([
d({ type: Boolean })
], r.prototype, "mask");
o([
d({ type: String })
], r.prototype, "format");
o([
d({ type: String })
], r.prototype, "formatSeparator");
o([
d({ type: String })
], r.prototype, "clearButton");
o([
d({ type: String })
], r.prototype, "clearButtonAriaLabel");
o([
d()
], r.prototype, "clearButtonTestId");
o([
d()
], r.prototype, "calendarButtonTestId");
o([
d({ type: String })
], r.prototype, "floatingStrategy");
o([
d({ type: Boolean })
], r.prototype, "disableViewportAutoClose");
o([
d({ type: String })
], r.prototype, "locale");
o([
d({ type: Boolean })
], r.prototype, "hideAdjacentMonths");
o([
v()
], r.prototype, "formatOptions");
o([
v()
], r.prototype, "setValueState");
let pt = r;
export {
pt as default
};
//# sourceMappingURL=datepicker.component.js.map