@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
413 lines (412 loc) • 11.6 kB
JavaScript
/*!
* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
* See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
* v1.5.0-next.4
*/
import { h, Host } from "@stencil/core";
import { dateToISO } from "../../utils/date";
import { closestElementCrossShadowBoundary, getElementDir, toAriaBoolean } from "../../utils/dom";
import { connectInteractive, disconnectInteractive, updateHostInteraction } from "../../utils/interactive";
import { isActivationKey } from "../../utils/key";
import { numberStringFormatter } from "../../utils/locale";
import { CSS_UTILITY } from "../../utils/resources";
export class DatePickerDay {
constructor() {
//--------------------------------------------------------------------------
//
// Event Listeners
//
//--------------------------------------------------------------------------
this.onClick = () => {
if (this.disabled) {
return;
}
this.calciteDaySelect.emit();
};
this.keyDownHandler = (event) => {
if (isActivationKey(event.key)) {
!this.disabled && this.calciteDaySelect.emit();
event.preventDefault();
}
};
this.day = undefined;
this.dateTimeFormat = undefined;
this.disabled = false;
this.currentMonth = false;
this.selected = false;
this.highlighted = false;
this.range = false;
this.rangeEdge = undefined;
this.startOfRange = false;
this.endOfRange = false;
this.rangeHover = false;
this.active = false;
this.scale = undefined;
this.value = undefined;
}
pointerOverHandler() {
if (this.disabled) {
return;
}
this.calciteInternalDayHover.emit();
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
componentWillLoad() {
this.parentDatePickerEl = closestElementCrossShadowBoundary(this.el, "calcite-date-picker");
}
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 dir = getElementDir(this.el);
const dayLabel = this.dateTimeFormat.format(this.value);
return (h(Host, { "aria-disabled": toAriaBoolean(this.disabled), "aria-label": dayLabel, "aria-selected": toAriaBoolean(this.active), id: dayId, onClick: this.onClick, onKeyDown: this.keyDownHandler, role: "button" }, h("div", { "aria-hidden": "true", class: { "day-v-wrapper": true, [CSS_UTILITY.rtl]: dir === "rtl" } }, h("div", { class: "day-wrapper" }, h("span", { class: "day" }, h("span", { class: "text" }, formattedDay))))));
}
connectedCallback() {
connectInteractive(this);
}
componentDidRender() {
updateHostInteraction(this, this.isTabbable);
}
disconnectedCallback() {
disconnectInteractive(this);
}
isTabbable() {
return this.active;
}
static get is() { return "calcite-date-picker-day"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["date-picker-day.scss"]
};
}
static get styleUrls() {
return {
"$": ["date-picker-day.css"]
};
}
static get properties() {
return {
"day": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Day of the month to be shown."
},
"attribute": "day",
"reflect": false
},
"dateTimeFormat": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Intl.DateTimeFormat",
"resolved": "DateTimeFormat",
"references": {
"Intl": {
"location": "global"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "internal",
"text": undefined
}],
"text": "The DateTimeFormat used to provide screen reader labels."
}
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
},
"attribute": "disabled",
"reflect": true,
"defaultValue": "false"
},
"currentMonth": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Date is in the current month."
},
"attribute": "current-month",
"reflect": true,
"defaultValue": "false"
},
"selected": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When `true`, the component is selected."
},
"attribute": "selected",
"reflect": true,
"defaultValue": "false"
},
"highlighted": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Date is currently highlighted as part of the range"
},
"attribute": "highlighted",
"reflect": true,
"defaultValue": "false"
},
"range": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When `true`, activates the component's range mode to allow a start and end date."
},
"attribute": "range",
"reflect": true,
"defaultValue": "false"
},
"rangeEdge": {
"type": "string",
"mutable": false,
"complexType": {
"original": "\"start\" | \"end\" | undefined",
"resolved": "\"end\" | \"start\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "internal",
"text": undefined
}],
"text": "When `true`, highlight styling for edge dates is applied."
},
"attribute": "range-edge",
"reflect": true
},
"startOfRange": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Date is the start of date range"
},
"attribute": "start-of-range",
"reflect": true,
"defaultValue": "false"
},
"endOfRange": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Date is the end of date range"
},
"attribute": "end-of-range",
"reflect": true,
"defaultValue": "false"
},
"rangeHover": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Date is being hovered and within the set range"
},
"attribute": "range-hover",
"reflect": true,
"defaultValue": "false"
},
"active": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When `true`, the component is active."
},
"attribute": "active",
"reflect": true,
"defaultValue": "false"
},
"scale": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Scale",
"resolved": "\"l\" | \"m\" | \"s\"",
"references": {
"Scale": {
"location": "import",
"path": "../interfaces"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the size of the component."
},
"attribute": "scale",
"reflect": true
},
"value": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Date",
"resolved": "Date",
"references": {
"Date": {
"location": "global"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The component's value."
}
}
};
}
static get events() {
return [{
"method": "calciteDaySelect",
"name": "calciteDaySelect",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when user selects day"
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "calciteInternalDayHover",
"name": "calciteInternalDayHover",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [{
"name": "internal",
"text": undefined
}],
"text": "Emitted when user hovers over a day"
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
static get listeners() {
return [{
"name": "pointerover",
"method": "pointerOverHandler",
"target": undefined,
"capture": false,
"passive": true
}];
}
}