@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
93 lines (92 loc) • 8.64 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { c as customElement } from "../../chunks/runtime.js";
import { css, html } from "lit";
import { LitElement, createEvent, setAttribute, safeClassMap } from "@arcgis/lumina";
import { a as dateToISO } from "../../chunks/date.js";
import { c as closestElementCrossShadowBoundary, t as toAriaBoolean } from "../../chunks/dom.js";
import { i as isActivationKey } from "../../chunks/key.js";
import { n as numberStringFormatter } from "../../chunks/locale.js";
import { u as useSetFocus } from "../../chunks/useSetFocus.js";
import { u as useInteractive } from "../../chunks/useInteractive.js";
const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:flex;cursor:pointer;outline:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.day-wrapper{position:relative;display:flex;inline-size:100%;flex-direction:column;align-items:center;justify-content:center}.day{position:relative;display:flex;inline-size:100%;align-items:center;justify-content:center;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);line-height:1;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;line-height:var(--calcite-font-line-height-fixed-base);block-size:var(--calcite-internal-day-size);outline-color:var(--calcite-color-transparent);background-color:var(--calcite-date-picker-day-background-color);color:var(--calcite-date-picker-day-text-color, var(--calcite-color-text-1))}.text{margin-block:1px 0px;margin-inline-start:0px}:host([scale=s]){--calcite-internal-day-size: 32px}:host([scale=s]) .day{font-size:var(--calcite-font-size-relative-sm)}:host([scale=m]){--calcite-internal-day-size: 40px}:host([scale=m]) .day{font-size:var(--calcite-font-size-relative-base)}:host([scale=l]){--calcite-internal-day-size: 44px}:host([scale=l]) .day{font-size:var(--calcite-font-size-relative-md)}:host(:not([current-month])) .day{opacity:var(--calcite-opacity-full);color:var(--calcite-color-text-3)}:host(:focus:not([disabled]):not([selected]):not([current-month])) .day{color:var(--calcite-color-text-1)}:host(:hover:not([disabled]):not([selected])) .day{background-color:var(--calcite-date-picker-day-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-date-picker-day-text-color-hover, var(--calcite-color-text-1))}:host(:not([range]):not([selected]).current-day) .day{color:var(--calcite-date-picker-current-day-text-color, var(--calcite-color-brand));font-weight:var(--calcite-font-weight-bold)}:host(:focus[selected]) .day{z-index:var(--calcite-z-index);outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));box-shadow:0 0 0 2px var(--calcite-color-foreground-1)}:host(:focus:not([disabled]):not([selected])) .day{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host(:hover:not([disabled]):not([selected])) .day{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([selected]) .day{font-weight:var(--calcite-font-weight-medium);background-color:var(--calcite-date-picker-day-background-color-selected, var(--calcite-color-brand));color:var(--calcite-date-picker-day-text-color-selected, var(--calcite-color-foreground-1))}:host([range-hover]:not([selected])) .day{background-color:var(--calcite-date-picker-day-outside-range-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-date-picker-day-outside-range-text-color-hover, var(--calcite-color-text-1))}:host([highlighted]:not([selected])) .day,:host(:hover[highlighted]:not([selected])) .day{color:var(--calcite-date-picker-day-range-text-color, var(--calcite-color-text-highlight));background-color:var(--calcite-date-picker-day-range-background-color, var(--calcite-color-surface-highlight))}:host([disabled]) .day{color:var(--calcite-color-text-2);text-decoration-line:line-through;opacity:var(--calcite-opacity-disabled)}@media(forced-colors:active){.day{border-radius:0}:host([selected]){outline:2px solid canvasText}:host(:hover:not([selected])) .day{border-radius:50%}:host([range][selected]) .day,:host([highlighted]) .day,:host([range-hover]:not([selected])) .day{background-color:highlight}:host([range-hover]) .day,:host([range][selected][start-of-range]) .day,:host([range][selected][end-of-range]) .day{background-color:canvas}}:host([hidden]){display:none}[hidden]{display:none}`;
const CSS = {
dayWrapper: "day-wrapper",
day: "day",
text: "text"
};
class DatePickerDay extends LitElement {
constructor() {
super();
this.focusSetter = useSetFocus()(this);
this.interactiveContainer = useInteractive(this);
this.active = false;
this.currentMonth = false;
this.disabled = false;
this.endOfRange = false;
this.highlighted = false;
this.range = false;
this.rangeHover = false;
this.selected = false;
this.startOfRange = false;
this.calciteInternalDayHover = createEvent({ cancelable: false });
this.calciteInternalDaySelect = createEvent({ cancelable: false });
this.listen("pointerover", this.pointerOverHandler);
this.listen("click", this.onClick);
this.listen("keydown", this.keyDownHandler);
}
static {
this.properties = { active: [7, {}, { reflect: true, type: Boolean }], currentMonth: [7, {}, { reflect: true, type: Boolean }], dateTimeFormat: [0, {}, { attribute: false }], day: [9, {}, { type: Number }], disabled: [7, {}, { reflect: true, type: Boolean }], endOfRange: [7, {}, { reflect: true, type: Boolean }], highlighted: [7, {}, { reflect: true, type: Boolean }], range: [7, {}, { reflect: true, type: Boolean }], rangeEdge: [3, {}, { reflect: true }], rangeHover: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], startOfRange: [7, {}, { reflect: true, type: Boolean }], value: [0, {}, { attribute: false }] };
}
static {
this.styles = styles;
}
async setFocus(options) {
return this.focusSetter(() => this.el, options);
}
load() {
this.parentDatePickerEl = closestElementCrossShadowBoundary(this.el, "calcite-date-picker");
}
onClick() {
if (this.disabled) {
return;
}
this.calciteInternalDaySelect.emit();
}
keyDownHandler(event) {
if (isActivationKey(event.key)) {
if (!this.disabled) {
this.calciteInternalDaySelect.emit();
}
event.preventDefault();
}
}
pointerOverHandler() {
if (this.disabled) {
return;
}
this.calciteInternalDayHover.emit();
}
render() {
const dayId = dateToISO(this.value).replaceAll("-", "");
if (this.parentDatePickerEl) {
const { numberingSystem, lang: locale } = this.parentDatePickerEl;
numberStringFormatter.numberFormatOptions = {
useGrouping: false,
...numberingSystem && { numberingSystem },
...locale && { locale }
};
}
const formattedDay = numberStringFormatter.localize(String(this.day));
const dayLabel = this.dateTimeFormat.format(this.value);
this.el.ariaLabel = dayLabel;
this.el.ariaSelected = toAriaBoolean(this.active);
setAttribute(this.el, "id", dayId);
this.el.role = "button";
setAttribute(this.el, "tabIndex", this.active && !this.disabled ? 0 : -1);
return this.interactiveContainer({ disabled: this.disabled, children: html`<div aria-hidden=true class=${safeClassMap(CSS.dayWrapper)}><span class=${safeClassMap(CSS.day)}><span class=${safeClassMap(CSS.text)}>${formattedDay}</span></span></div>` });
}
}
customElement("calcite-date-picker-day", DatePickerDay);
export {
DatePickerDay
};