dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
350 lines (346 loc) • 11.9 kB
JavaScript
var y = Object.defineProperty;
var f = Object.getOwnPropertySymbols;
var T = Object.prototype.hasOwnProperty, $ = Object.prototype.propertyIsEnumerable;
var v = (h, t, e) => t in h ? y(h, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : h[t] = e, g = (h, t) => {
for (var e in t || (t = {}))
T.call(t, e) && v(h, e, t[e]);
if (f)
for (var e of f(t))
$.call(t, e) && v(h, e, t[e]);
return h;
};
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { html as p } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as n } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { DdsElement as M } from "../../internal/dds-hu-element.js";
import { getTimeFormatPreference as B } from "../../localization/localization.js";
import H from "../button/button.component.js";
import I from "../divider/divider.component.js";
import D from "./time-grid.scss.js";
import { t as S } from "../../node_modules/i18next/dist/esm/i18next.js";
import { unsafeCSS as w } from "../../node_modules/@lit/reactive-element/css-tag.js";
var C = Object.defineProperty, d = (h, t, e, r) => {
for (var i = void 0, a = h.length - 1, l; a >= 0; a--)
(l = h[a]) && (i = l(t, e, i) || i);
return i && C(t, e, i), i;
};
const m = class m extends M {
constructor() {
super(...arguments), this.selectedHour = 12, this.selectedMinute = 0, this.selectedSecond = 0, this.minTime = "00:00", this.maxTime = "23:59", this.step = 5, this.locale = "en", this.showSeconds = !1, this.secondsStep = 1, this.hideDisabledTimes = !1, this.presetButtonTestId = "time-grid-preset-button", this.hourButtonTestId = "time-grid-hour-button", this.minuteButtonTestId = "time-grid-minute-button", this.secondButtonTestId = "time-grid-second-button";
}
getHours() {
return Array.from({ length: 24 }, (t, e) => e);
}
getMinutes() {
const t = [];
for (let e = 0; e < 60; e += this.step)
t.push(e);
return t;
}
getSeconds() {
const t = [];
for (let e = 0; e < 60; e += this.secondsStep)
t.push(e);
return t;
}
isTimeDisabled(t, e, r) {
const i = this.showSeconds ? `${t.toString().padStart(2, "0")}:${e.toString().padStart(2, "0")}:${(r != null ? r : 0).toString().padStart(2, "0")}` : `${t.toString().padStart(2, "0")}:${e.toString().padStart(2, "0")}`, a = this.minTime, l = this.maxTime, s = i < a || i > l;
return this.disabledTime ? s || this.disabledTime(t, e, r) : s;
}
handleHourSelect(t) {
this.selectedHour = t, this.requestUpdate(), this.emitChange();
}
handleMinuteSelect(t) {
this.selectedMinute = t, this.requestUpdate(), this.emitChange();
}
handleSecondSelect(t) {
this.selectedSecond = t, this.requestUpdate(), this.emitChange();
}
emitChange() {
const t = g({
hour: this.selectedHour,
minute: this.selectedMinute
}, this.showSeconds && { second: this.selectedSecond });
this.emit("dds-change", t);
}
formatHour(t) {
return B(this.locale) === "24h" ? t.toString().padStart(2, "0") : t === 0 ? "12 AM" : t === 12 ? "12 PM" : t > 12 ? `${t - 12} PM` : `${t} AM`;
}
formatMinute(t) {
return t.toString().padStart(2, "0");
}
formatSecond(t) {
return t.toString().padStart(2, "0");
}
handlePresetSelect(t) {
const e = t.value.split(":"), r = parseInt(e[0], 10), i = parseInt(e[1], 10), a = e[2] ? parseInt(e[2], 10) : 0;
this.selectedHour = r, this.selectedMinute = i, this.showSeconds && (this.selectedSecond = a), this.requestUpdate(), this.emitChange();
}
isPresetDisabled(t) {
const e = t.value.split(":"), r = parseInt(e[0], 10), i = parseInt(e[1], 10), a = e[2] ? parseInt(e[2], 10) : void 0;
return this.isTimeDisabled(r, i, a);
}
scrollToSelectedTime() {
var r, i, a;
const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector("#hour-column");
if (t) {
const l = t.querySelectorAll("dap-ds-button"), s = Array.from(l).find(
(c) => {
var u;
return ((u = c.textContent) == null ? void 0 : u.trim()) === this.formatHour(this.selectedHour);
}
);
s && s.scrollIntoView({
behavior: "smooth",
block: "center",
inline: "nearest"
});
}
const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector("#minute-column");
if (e) {
const l = e.querySelectorAll("dap-ds-button"), s = Array.from(l).find(
(c) => {
var u;
return ((u = c.textContent) == null ? void 0 : u.trim()) === this.formatMinute(this.selectedMinute);
}
);
s && s.scrollIntoView({
behavior: "smooth",
block: "center",
inline: "nearest"
});
}
if (this.showSeconds) {
const l = (a = this.shadowRoot) == null ? void 0 : a.querySelector("#second-column");
if (l) {
const s = l.querySelectorAll("dap-ds-button"), c = Array.from(s).find(
(u) => {
var b;
return ((b = u.textContent) == null ? void 0 : b.trim()) === this.formatSecond(this.selectedSecond);
}
);
c && c.scrollIntoView({
behavior: "smooth",
block: "center",
inline: "nearest"
});
}
}
}
firstUpdated(t) {
super.firstUpdated(t), requestAnimationFrame(() => {
this.scrollToSelectedTime();
});
}
updated(t) {
super.updated(t), (t.has("selectedHour") || t.has("selectedMinute") || t.has("selectedSecond")) && requestAnimationFrame(() => {
this.scrollToSelectedTime();
});
}
render() {
const t = this.getHours(), e = this.getMinutes(), r = this.showSeconds ? this.getSeconds() : [], i = this.hideDisabledTimes ? t.filter(
(s) => !this.isTimeDisabled(
s,
this.selectedMinute,
this.selectedSecond
)
) : t, a = this.hideDisabledTimes ? e.filter(
(s) => !this.isTimeDisabled(
this.selectedHour,
s,
this.selectedSecond
)
) : e, l = this.hideDisabledTimes ? r.filter(
(s) => !this.isTimeDisabled(
this.selectedHour,
this.selectedMinute,
s
)
) : r;
return p`
<div part="time-grid" class="time-grid">
${this.presets && this.presets.length > 0 ? p`
<div part="presets-section" class="presets-section">
${this.presets.map((s) => {
const c = this.isPresetDisabled(s);
return p`
<dap-ds-button
variant="outline"
size="xs"
part="preset-button"
data-testid="${this.presetButtonTestId}-${s.value}"
?disabled=${c}
=${() => this.handlePresetSelect(s)}>
${s.label}
</dap-ds-button>
`;
})}
</div>
<dap-ds-divider spacing="200"></dap-ds-divider>
` : ""}
<div class="time-columns">
<div part="hour-section" class="time-section">
<div class="section-header">
<span part="section-header-title"
>${S("timepicker.hour", {
lng: this.locale
})}</span
>
<dap-ds-divider
part="section-header-divider"
spacing="200"></dap-ds-divider>
</div>
<div part="time-column" class="time-column" id="hour-column">
${i.map((s) => {
const c = this.isTimeDisabled(
s,
this.selectedMinute,
this.selectedSecond
), u = s === this.selectedHour;
return p`
<dap-ds-button
variant="subtle-menu"
?active=${u}
part="time-button"
data-testid="${this.hourButtonTestId}-${s}"
exportparts="base:time-button-base, content:time-button-content, high-contrast:time-button-high-contrast"
?disabled=${c}
=${() => this.handleHourSelect(s)}>
${this.formatHour(s)}
</dap-ds-button>
`;
})}
</div>
</div>
<div part="minute-section" class="time-section">
<div class="section-header">
<span part="section-header-title"
>${S("timepicker.minute", {
lng: this.locale
})}</span
>
<dap-ds-divider
part="section-header-divider"
spacing="200"></dap-ds-divider>
</div>
<div part="time-column" class="time-column" id="minute-column">
${a.map((s) => {
const c = this.isTimeDisabled(
this.selectedHour,
s,
this.selectedSecond
), u = s === this.selectedMinute;
return p`
<dap-ds-button
variant="subtle-menu"
?active=${u}
part="time-button"
data-testid="${this.minuteButtonTestId}-${s}"
?disabled=${c}
=${() => this.handleMinuteSelect(s)}>
${this.formatMinute(s)}
</dap-ds-button>
`;
})}
</div>
</div>
${this.showSeconds ? p`
<div part="second-section" class="time-section">
<div class="section-header">
<span part="section-header-title"
>${S("timepicker.second", {
lng: this.locale
})}</span
>
<dap-ds-divider
part="section-header-divider"
spacing="200"></dap-ds-divider>
</div>
<div
part="time-column"
class="time-column"
id="second-column">
${l.map((s) => {
const c = this.isTimeDisabled(
this.selectedHour,
this.selectedMinute,
s
), u = s === this.selectedSecond;
return p`
<dap-ds-button
variant="subtle-menu"
?active=${u}
part="time-button"
data-testid="${this.secondButtonTestId}-${s}"
?disabled=${c}
=${() => this.handleSecondSelect(s)}>
${this.formatSecond(s)}
</dap-ds-button>
`;
})}
</div>
</div>
` : ""}
</div>
</div>
`;
}
};
m.tagName = "dap-ds-time-grid", m.dependencies = {
"dap-ds-button": H,
"dap-ds-divider": I
}, m.styles = w(D);
let o = m;
d([
n({ type: Number })
], o.prototype, "selectedHour");
d([
n({ type: Number })
], o.prototype, "selectedMinute");
d([
n({ type: Number })
], o.prototype, "selectedSecond");
d([
n({ type: String })
], o.prototype, "minTime");
d([
n({ type: String })
], o.prototype, "maxTime");
d([
n({ type: Number })
], o.prototype, "step");
d([
n({ type: String })
], o.prototype, "locale");
d([
n({ type: Boolean })
], o.prototype, "showSeconds");
d([
n({ type: Number })
], o.prototype, "secondsStep");
d([
n({ attribute: !1 })
], o.prototype, "disabledTime");
d([
n({ type: Boolean })
], o.prototype, "hideDisabledTimes");
d([
n({ type: Array })
], o.prototype, "presets");
d([
n()
], o.prototype, "presetButtonTestId");
d([
n()
], o.prototype, "hourButtonTestId");
d([
n()
], o.prototype, "minuteButtonTestId");
d([
n()
], o.prototype, "secondButtonTestId");
export {
o as default
};
//# sourceMappingURL=time-grid.component.js.map