dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
109 lines (108 loc) • 4.27 kB
JavaScript
import { clsx as u } from "../../node_modules/clsx/dist/clsx.js";
import h from "../../_virtual/dayjs.min.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { nothing as y } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as a } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { html as p } from "../../node_modules/lit-html/static.js";
import { DdsElement as b } from "../../internal/dds-hu-element.js";
import { FocusableMixin as m } from "../../internal/mixin/focusableMixin.js";
import "../../localization/localization.js";
import g from "./calendar-cell.scss.js";
import { t as f } from "../../node_modules/i18next/dist/esm/i18next.js";
import { unsafeCSS as L } from "../../node_modules/@lit/reactive-element/css-tag.js";
var v = Object.defineProperty, s = (c, e, o, i) => {
for (var l = void 0, d = c.length - 1, n; d >= 0; d--)
(n = c[d]) && (l = n(e, o, l) || l);
return l && v(e, o, l), l;
};
const r = class r extends m(b) {
constructor() {
super(...arguments), this.selected = !1, this.disabledDay = !1, this.today = !1, this.outOfRange = !1, this.header = !1, this.focused = !1, this.rangestart = !1, this.rangeend = !1, this.inrange = !1, this.locale = h.locale(), this._cachedLabel = "", this._lastLabelUpdate = 0, this._lastLocale = "";
}
get label() {
if (this.value) {
const e = Date.now();
if (this._cachedLabel === "" || this._lastLabelUpdate === 0 || this._lastLocale !== this.locale || e - this._lastLabelUpdate > 100) {
const o = h(this.value).locale(this.locale).format("LL, dddd"), i = this.today ? f("calendar.today", { lng: this.locale }) : "", l = this.selected ? f("selected", { lng: this.locale }) : "";
this._cachedLabel = `${o} ${i} ${l}`.trim(), this._lastLabelUpdate = e, this._lastLocale = this.locale;
}
return this._cachedLabel;
}
return "";
}
get focusElement() {
return this;
}
firstUpdated(e) {
super.firstUpdated(e), this.role === "button" && this.hasAttribute("aria-selected") && this.removeAttribute("aria-selected"), this.setAttribute("aria-label", this.label);
}
updated(e) {
super.updated(e), e.has("disabledDay") && this.setAttribute("aria-disabled", this.disabledDay ? "true" : "false"), (e.has("selected") || e.has("locale") || e.has("value") || e.has("today")) && (this.role === "button" && this.hasAttribute("aria-selected") && this.removeAttribute("aria-selected"), e.has("locale") && (this._cachedLabel = "", this._lastLabelUpdate = 0), this.setAttribute("aria-label", this.label));
}
getDayName(e, o) {
return new Date(e).toLocaleDateString(o, { weekday: "long" });
}
render() {
return p`
<div
part="base"
class=${u(
"calendar-cell",
{ "calendar-cell--selected": this.selected },
{ "calendar-cell--disabled": this.disabledDay },
{ "calendar-cell--today": this.today },
{ "calendar-cell--out-of-range": this.outOfRange },
{ "calendar-cell--header": this.header },
{ "calendar-cell--focused": this.focused },
{ "calendar-cell--range-start": this.rangestart },
{ "calendar-cell--range-end": this.rangeend },
{ "calendar-cell--in-range": this.inrange }
)}>
<slot></slot>
${this.today ? p`<span
part="today-mark"
class="calendar-cell__today-mark"></span>` : y}
</div>
`;
}
};
r.tagName = "dap-ds-calendar-cell", r.styles = L(g);
let t = r;
s([
a({ attribute: !1 })
], t.prototype, "value");
s([
a({ type: Boolean })
], t.prototype, "selected");
s([
a({ type: Boolean })
], t.prototype, "disabledDay");
s([
a({ type: Boolean })
], t.prototype, "today");
s([
a({ type: Boolean })
], t.prototype, "outOfRange");
s([
a({ type: Boolean })
], t.prototype, "header");
s([
a({ type: Boolean })
], t.prototype, "focused");
s([
a({ type: Boolean })
], t.prototype, "rangestart");
s([
a({ type: Boolean })
], t.prototype, "rangeend");
s([
a({ type: Boolean })
], t.prototype, "inrange");
s([
a({ reflect: !0 })
], t.prototype, "locale");
export {
t as default
};
//# sourceMappingURL=calendar-cell.component.js.map