dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
529 lines (528 loc) • 21 kB
JavaScript
var D = Object.defineProperty;
var T = Object.getOwnPropertySymbols;
var w = Object.prototype.hasOwnProperty, C = Object.prototype.propertyIsEnumerable;
var S = (h, e, t) => e in h ? D(h, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : h[e] = t, v = (h, e) => {
for (var t in e || (e = {}))
w.call(e, t) && S(h, t, e[t]);
if (T)
for (var t of T(e))
C.call(e, t) && S(h, t, e[t]);
return h;
};
var g = (h, e, t) => new Promise((i, o) => {
var d = (u) => {
try {
c(t.next(u));
} catch (f) {
o(f);
}
}, p = (u) => {
try {
c(t.throw(u));
} catch (f) {
o(f);
}
}, c = (u) => u.done ? i(u.value) : Promise.resolve(u.value).then(d, p);
c((t = t.apply(h, e)).next());
});
import { clsx as y } from "../../node_modules/clsx/dist/clsx.js";
import n from "../../_virtual/dayjs.min.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { nothing as $ } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as l } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { state as G } from "../../node_modules/@lit/reactive-element/decorators/state.js";
import { query as k } from "../../node_modules/@lit/reactive-element/decorators/query.js";
import { ifDefined as m } from "../../node_modules/lit-html/directives/if-defined.js";
import { html as b } from "../../node_modules/lit-html/static.js";
import { getValidityStateObject as x } from "../../common/utils.js";
import { GenericFormElement as B } from "../../internal/mixin/genericFormElement.js";
import "../../localization/localization.js";
import z from "../feedback/feedback.component.js";
import A from "../form/form-label/form-label.component.js";
import L from "../icon/icon.component.js";
import q from "../icon-button/icon-button.component.js";
import F from "../icons/system/system-loading-spinner/system-loading-spinner.component.js";
import H from "../icons/system/system-time-line/system-time-line.component.js";
import M from "../popup/popup.component.js";
import O from "../tooltip/tooltip.component.js";
import E from "../typography/typography.component.js";
import P from "./time-grid.component.js";
import U from "./timepicker.scss.js";
import V, { t as j } from "../../node_modules/i18next/dist/esm/i18next.js";
import { unsafeCSS as R } from "../../node_modules/@lit/reactive-element/css-tag.js";
var N = Object.defineProperty, a = (h, e, t, i) => {
for (var o = void 0, d = h.length - 1, p; d >= 0; d--)
(p = h[d]) && (o = p(e, t, o) || o);
return o && N(e, t, o), o;
}, r;
const s = (r = class extends B {
constructor() {
super(), this.minTime = "00:00", this.maxTime = "23:59", this.step = 5, this.placement = "bottom-start", this.opened = !1, this.openTimeOnInput = !1, this.sendEmptyEventOnInput = !1, this.loading = !1, this.format = "HH:mm", this.clearButton = "true", this.clearButtonTestId = "timepicker-clear-button", this.timeButtonTestId = "timepicker-time-button", this.floatingStrategy = "fixed", this.disableViewportAutoClose = !1, this.locale = n.locale(), this.closeOnSelection = !1, this.showSeconds = !1, this.secondsStep = 1, this.hideDisabledTimes = !1, this.setValueState = !0, this.languageChangeHandler = () => {
if (!this.hasAttribute("locale")) {
const t = V.language || n.locale();
this.locale !== t && (this.locale = t, n.locale(t), this.requestUpdate());
}
}, this.handleDocumentMouseDown = (t) => {
const i = t.composedPath();
this && !i.includes(this) && this.hideTimePicker();
}, this.handlePopupAutoClose = () => {
this.hideTimePicker({ skipFocus: !0 });
}, this.handleInput = (t) => {
const i = t.target;
if (!i.value)
this.setValue(void 0, !1, !0);
else if (this.isInputValid()) {
const o = n(`2000-01-01 ${i.value}`);
this.setValue(o, !1), this.emit("dds-valid-time", {
value: i.value,
type: "valid",
minute: o.minute(),
hour: o.hour()
});
} else
this.setValue(void 0, !1, this.sendEmptyEventOnInput), this.emit("dds-invalid-time", {
value: i.value,
type: "invalid",
hour: i.value.split(":")[0],
minute: i.value.split(":")[1]
});
this.openTimeOnInput && !this.opened && this.showTimePicker(), this.emit("dds-input", { value: i.value });
}, this.handleKeyDown = (t) => g(this, null, function* () {
t.key !== "Tab" && (t.key === "Enter" || t.key === "ArrowDown" || t.key === "ArrowUp") && (t.preventDefault(), t.stopPropagation(), this.opened ? this.hideTimePicker() : this.showTimePicker());
}), this.handleClick = () => {
this.opened ? this.hideTimePicker() : this.showTimePicker();
}, this.handleClearClick = () => {
this.disabled || (this.clearSelection(), this.triggerInput.focus(), this.setValidity(), this.hideTimePicker(), this.emit("dds-clear"));
}, this.handleTimeChange = (t) => {
const { hour: i, minute: o, second: d } = t.detail, p = n().hour(i).minute(o).second(d != null ? d : 0).millisecond(0);
this.setValue(p, !0, !0);
}, this.handleFocus = () => {
this.emit("dds-focus");
}, this.handleBlur = () => {
this.emit("dds-blur");
}, this.handlePopupOpened = () => {
this.timeGrid && requestAnimationFrame(() => {
this.timeGrid.scrollToSelectedTime();
});
}, r.nextId++;
const e = typeof crypto != "undefined" && crypto.randomUUID ? crypto.randomUUID().slice(0, 8) : Date.now().toString(36);
this.inputId = `input-${r.nextId}-${e}`, this.labelId = `label-${r.nextId}-${e}`, this.descriptionId = `description-${r.nextId}-${e}`, this.feedbackId = `feedback-${r.nextId}-${e}`;
}
// The selected time value (Dayjs object) - internal use only
get timeValue() {
return this._timeValue;
}
set timeValue(e) {
this._timeValue = e;
}
connectedCallback() {
if (super.connectedCallback(), V.on("languageChanged", this.languageChangeHandler), !this.hasAttribute("locale")) {
const e = V.language || n.locale();
this.locale !== e && (this.locale = e, n.locale(e));
}
}
disconnectedCallback() {
super.disconnectedCallback(), V.off("languageChanged", this.languageChangeHandler);
}
firstUpdated(e) {
super.firstUpdated(e), this.syncTimeValue(), this.timeValue && (this.triggerInput.value = this.getFormattedValue(), this.updateTimeGridSelection());
}
// Override attributeChangedCallback to sync internal state when value changes
attributeChangedCallback(e, t, i) {
super.attributeChangedCallback(e, t, i), e === "value" && i !== t && (this.syncTimeValue(), this.requestUpdate());
}
/**
* Normalizes a time value to a Dayjs object.
* Handles Dayjs objects, Date objects, strings (HH:mm or HH:mm:ss format, or date strings), and undefined/null.
*/
normalizeTime(e) {
if (e != null) {
if (n.isDayjs(e))
return e;
if (e instanceof Date)
return n(e);
if (typeof e == "number")
return n(e);
if (typeof e == "string") {
const t = e.trim();
if (/^([0-1]?[0-9]|2[0-3]):[0-5][0-9](:[0-5][0-9])?$/.test(t))
return n(`2000-01-01 ${t}`);
if (/^\d+$/.test(t)) {
const d = Number(t);
if (d > 0 && d < 1e10)
return n(d * 1e3);
if (d >= 0 && d <= 41024448e5)
return n(d);
}
const o = n(t);
return o.isValid() ? o : void 0;
}
}
}
// Sync internal _timeValue with public value property
syncTimeValue() {
const e = this.normalizeTime(this.value);
this._timeValue = e, e ? (!n.isDayjs(this.value) || !e.isSame(this.value, "minute")) && (this.value = e) : this.value !== void 0 && this.value !== null && (this.value = void 0);
}
updated(e) {
if (super.updated(e), e.has("value")) {
const t = this.normalizeTime(this.value);
t ? (this._timeValue = t, (!n.isDayjs(this.value) || !t.isSame(this.value)) && (this.value = t)) : (this._timeValue = void 0, this.value !== void 0 && this.value !== null && (this.value = void 0)), this.setValueState && (this.triggerInput.value = this.getFormattedValue(), this.updateTimeGridSelection()), this.setValidity();
}
e.has("step") && this.timeGrid && (this.timeGrid.step = this.step), e.has("minTime") && this.timeGrid && (this.timeGrid.minTime = this.minTime), e.has("maxTime") && this.timeGrid && (this.timeGrid.maxTime = this.maxTime), e.has("locale") && this.timeGrid && (this.timeGrid.locale = this.locale), e.has("showSeconds") && this.timeGrid && (this.timeGrid.showSeconds = this.showSeconds), e.has("secondsStep") && this.timeGrid && (this.timeGrid.secondsStep = this.secondsStep), e.has("disabledTime") && this.timeGrid && (this.timeGrid.disabledTime = this.disabledTime), e.has("hideDisabledTimes") && this.timeGrid && (this.timeGrid.hideDisabledTimes = this.hideDisabledTimes), e.has("presets") && this.timeGrid && (this.timeGrid.presets = this.presets);
}
updateTimeGridSelection() {
this.timeValue && this.timeGrid && (this.timeGrid.selectedHour = this.timeValue.hour(), this.timeGrid.selectedMinute = this.timeValue.minute(), this.showSeconds && (this.timeGrid.selectedSecond = this.timeValue.second()));
}
getHourValue() {
return this.timeValue ? this.timeValue.hour() : 12;
}
getMinuteValue() {
return this.timeValue ? this.timeValue.minute() : 0;
}
getSecondValue() {
return this.timeValue ? this.timeValue.second() : 0;
}
getFormattedValue() {
return this.timeValue ? n(this.timeValue).format(this.format) : "";
}
isValidTime(e) {
if (!e || !(this.showSeconds ? /^([0-1]?[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/ : /^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/).test(e))
return !1;
const i = n(`2000-01-01 ${e}`), o = n(`2000-01-01 ${this.minTime}`), d = n(`2000-01-01 ${this.maxTime}`);
if (!(i.isSame(o) || i.isAfter(o) && i.isBefore(d) || i.isSame(d)))
return !1;
if (this.disabledTime) {
const c = i.hour(), u = i.minute(), f = this.showSeconds ? i.second() : void 0;
return !this.disabledTime(c, u, f);
}
return !0;
}
isValueValid() {
return this.timeValue ? this.isInputValid() : !0;
}
isInputValid() {
return this.isValidTime(this.triggerInput.value);
}
setValue(e, t = !0, i = !0) {
var o, d, p, c, u, f;
if (this._timeValue = e, this.value = e, t ? (this.setValueState = !0, this.triggerInput.value = this.getFormattedValue(), this.updateTimeGridSelection()) : this.setValueState = !1, this.internals && this.internals.setFormValue(
this.value ? this.showSeconds ? this.value.format("HH:mm:ss") : this.value.format("HH:mm") : this.defaultValue
), this.setValidity(), this.closeOnSelection && this.hideTimePicker(), i) {
const I = v({
value: this.timeValue,
hour: (o = this.timeValue) == null ? void 0 : o.hour(),
minute: (d = this.timeValue) == null ? void 0 : d.minute()
}, this.showSeconds && { second: (p = this.timeValue) == null ? void 0 : p.second() });
this.emit("dds-change", I), this.emit("dds-valid-time", v({
value: this.triggerInput.value,
hour: (c = this.timeValue) == null ? void 0 : c.hour(),
minute: (u = this.timeValue) == null ? void 0 : u.minute()
}, this.showSeconds && { second: (f = this.timeValue) == null ? void 0 : f.second() }));
}
}
clearSelection() {
return g(this, null, function* () {
this.setValue(void 0, !0, !0);
});
}
get focusElement() {
return this.triggerInput;
}
showTimePicker() {
return g(this, null, function* () {
this.disabled || this.readonly || this.opened || (this.opened = !0, document.addEventListener("mousedown", this.handleDocumentMouseDown));
});
}
hideTimePicker(e) {
return g(this, null, function* () {
this.opened && (this.opened = !1, document.removeEventListener("mousedown", this.handleDocumentMouseDown), yield this.updateComplete, e != null && e.skipFocus || this.focus());
});
}
// custom validation
getValidity() {
return !!this.value;
}
get validity() {
return this.internals.validity ? this.internals.validity : x({
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(e) {
e.preventDefault();
}
render() {
var e, t;
return b` <div class="label-container">
${this.label && b`<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=${y("label")}
.noMargin=${!!this.description}
for=${this.inputId}
.hideLabel=${this.hideLabel}
label=${m(this.label)}>
</dap-ds-form-label>`}
${this.tooltip && b` <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"}
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 && b`
<dap-ds-typography
part="description"
variant="description"
class=${y("input-description")}
size=${m(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}
@dds-opened=${this.handlePopupOpened}>
<div
slot="trigger"
part="trigger"
class="${y("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"
})}">
<input
part="input"
role="combobox"
class="${y("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=${m(this.label ? this.labelId : $)}
aria-describedby="${m(
this.description ? this.descriptionId : $
)} ${m(this.feedback ? this.feedbackId : $)}"
aria-disabled=${this.disabled}
aria-controls="time-grid"
aria-autocomplete="none"
?required=${this.required}
?readonly=${this.readonly}
?autofocus=${this.autofocus}
?disabled=${this.disabled}
autocomplete=${this.autocomplete}
placeholder=${m((e = this.placeholder) != null ? e : "")}
@blur=${this.handleBlur}
@focus=${this.handleFocus}
@input=${this.handleInput}
@keydown=${this.handleKeyDown}
@invalid=${this.handleInvalid}
@click=${this.handleClick} />
<div
class="${y("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 ? b`<div class="${y("clear-icon")}">
<dap-ds-icon-button
icon="close-line"
part="clear-button"
data-testid=${this.clearButtonTestId}
aria-label=${m(
(t = this.clearButtonAriaLabel) != null ? t : j("clear", { lng: this.locale })
)}
?disabled=${this.disabled}
@click=${this.handleClearClick}></dap-ds-icon-button>
</div>` : $}
<div
class="${y("indicator-icon", {
"indicator-icon--loading": this.loading
})}">
${this.loading ? b`<dap-ds-icon-loading-spinner></dap-ds-icon-loading-spinner>` : b`<dap-ds-icon-time-line
aria-hidden="true"
part="time-button"
data-testid=${this.timeButtonTestId}
class=${y("time-icon")}
@click=${this.handleClick}></dap-ds-icon-time-line>`}
</div>
</div>
</div>
<dap-ds-time-grid
id="time-grid"
part="time-grid"
.selectedHour=${this.getHourValue()}
.selectedMinute=${this.getMinuteValue()}
.selectedSecond=${this.getSecondValue()}
.minTime=${this.minTime}
.maxTime=${this.maxTime}
.step=${this.step}
.locale=${this.locale}
.showSeconds=${this.showSeconds}
.secondsStep=${this.secondsStep}
.disabledTime=${this.disabledTime}
.hideDisabledTimes=${this.hideDisabledTimes}
.presets=${this.presets}
@dds-change=${(i) => {
i.stopPropagation(), i.preventDefault(), this.handleTimeChange(i);
}}>
</dap-ds-time-grid>
</dap-ds-popup>
${this.feedback && b`<dap-ds-feedback
part="feedback"
feedbackType=${m(this.feedbackType)}
feedbackSize="${m(this.size)}"
id="feedback">
${this.feedback}
</dap-ds-feedback>`}
</div>`;
}
}, r.tagName = "dap-ds-timepicker", r.dependencies = {
"dap-ds-form-label": A,
"dap-ds-tooltip": O,
"dap-ds-icon-button": q,
"dap-ds-icon": L,
"dap-ds-typography": E,
"dap-ds-popup": M,
"dap-ds-icon-loading-spinner": F,
"dap-ds-icon-time-line": H,
"dap-ds-time-grid": P,
"dap-ds-feedback": z
}, r.nextId = 0, r.styles = R(U), r);
a([
k(".combobox__input")
], s.prototype, "triggerInput");
a([
k("#time-grid")
], s.prototype, "timeGrid");
a([
l({ attribute: !0 })
], s.prototype, "value");
a([
l({ type: String })
], s.prototype, "minTime");
a([
l({ type: String })
], s.prototype, "maxTime");
a([
l({ type: Number })
], s.prototype, "step");
a([
l({ reflect: !0 })
], s.prototype, "placement");
a([
l({ type: Boolean, reflect: !0 })
], s.prototype, "opened");
a([
l({ type: Boolean })
], s.prototype, "openTimeOnInput");
a([
l({ type: Boolean })
], s.prototype, "sendEmptyEventOnInput");
a([
l()
], s.prototype, "placeholder");
a([
l({ type: Boolean })
], s.prototype, "loading");
a([
l({ type: String })
], s.prototype, "format");
a([
l({ type: String })
], s.prototype, "clearButton");
a([
l({ type: String })
], s.prototype, "clearButtonAriaLabel");
a([
l()
], s.prototype, "clearButtonTestId");
a([
l()
], s.prototype, "timeButtonTestId");
a([
l({ type: String })
], s.prototype, "floatingStrategy");
a([
l({ type: Boolean })
], s.prototype, "disableViewportAutoClose");
a([
l({ type: String })
], s.prototype, "locale");
a([
l({ type: Boolean })
], s.prototype, "closeOnSelection");
a([
l({ type: Boolean })
], s.prototype, "showSeconds");
a([
l({ type: Number })
], s.prototype, "secondsStep");
a([
l({ attribute: !1 })
], s.prototype, "disabledTime");
a([
l({ type: Boolean })
], s.prototype, "hideDisabledTimes");
a([
l({ type: Array, attribute: !1 })
], s.prototype, "presets");
a([
G()
], s.prototype, "setValueState");
let $e = s;
export {
$e as default
};
//# sourceMappingURL=timepicker.component.js.map