@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
353 lines (347 loc) • 16 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 { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { t as toAriaBoolean } from './dom.js';
import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive.js';
import { c as createObserver } from './observers.js';
import { u as updateListItemChildren, g as getListItemChildren, M as MAX_COLUMNS } from './utils3.js';
import { a as setUpLoadableComponent, s as setComponentLoaded, c as componentLoaded } from './loadable.js';
import { d as defineCustomElement$7 } from './filter.js';
import { d as defineCustomElement$6 } from './icon.js';
import { d as defineCustomElement$5 } from './input.js';
import { d as defineCustomElement$4 } from './loader.js';
import { d as defineCustomElement$3 } from './progress.js';
import { d as defineCustomElement$2 } from './scrim.js';
import { d as debounce } from './debounce.js';
const CSS = {
container: "container",
table: "table",
scrim: "scrim",
tableContainer: "table-container",
sticky: "sticky-pos"
};
const debounceTimeout = 0;
const listCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{position:relative}.table-container{position:relative;z-index:var(--calcite-app-z-index);box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;background-color:transparent}.table-container *{box-sizing:border-box}.table{inline-size:100%;border-collapse:collapse}::slotted(calcite-list-item){margin-block-end:1px;--tw-shadow:0 1px 0 var(--calcite-ui-border-3);--tw-shadow-colored:0 1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}::slotted(calcite-list-item:last-child){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.sticky-pos{position:sticky;inset-block-start:0px;z-index:var(--calcite-app-z-index-sticky)}.sticky-pos th{padding:0px}calcite-filter{margin-block-end:1px}";
const listItemSelector = "calcite-list-item";
const parentSelector = "calcite-list-item-group, calcite-list-item";
const List = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.calciteListChange = createEvent(this, "calciteListChange", 6);
this.calciteListFilter = createEvent(this, "calciteListFilter", 6);
this.listItems = [];
this.enabledListItems = [];
this.mutationObserver = createObserver("mutation", () => this.updateListItems());
// --------------------------------------------------------------------------
//
// Private Methods
//
// --------------------------------------------------------------------------
this.handleDefaultSlotChange = (event) => {
updateListItemChildren(getListItemChildren(event));
};
this.setActiveListItem = () => {
const { enabledListItems } = this;
if (!enabledListItems.some((item) => item.active)) {
if (enabledListItems[0]) {
enabledListItems[0].active = true;
}
}
};
this.updateSelectedItems = (emit = false) => {
this.selectedItems = this.enabledListItems.filter((item) => item.selected);
if (emit) {
this.calciteListChange.emit();
}
};
this.updateFilteredItems = (emit = false) => {
const { listItems, filteredData, filterText } = this;
const values = filteredData.map((item) => item.value);
const lastDescendantItems = listItems?.filter((listItem) => listItems.every((li) => li === listItem || !listItem.contains(li)));
const filteredItems = listItems.filter((item) => !filterText || values.includes(item.value)) || [];
const visibleParents = new WeakSet();
lastDescendantItems.forEach((listItem) => this.filterElements({ el: listItem, filteredItems, visibleParents }));
this.filteredItems = filteredItems;
if (emit) {
this.calciteListFilter.emit();
}
};
this.handleFilter = (event) => {
event.stopPropagation();
const { filteredItems, value } = event.currentTarget;
this.filteredData = filteredItems;
this.filterText = value;
this.updateListItems(true);
};
this.getItemData = () => {
return this.listItems.map((item) => ({
label: item.label,
description: item.description,
metadata: item.metadata,
value: item.value
}));
};
this.updateListItems = debounce((emit = false) => {
const { selectionAppearance, selectionMode } = this;
const items = this.queryListItems();
items.forEach((item) => {
item.selectionAppearance = selectionAppearance;
item.selectionMode = selectionMode;
});
this.listItems = items;
if (this.filterEnabled) {
this.dataForFilter = this.getItemData();
if (this.filterEl) {
this.filterEl.items = this.dataForFilter;
}
}
this.updateFilteredItems(emit);
this.enabledListItems = items.filter((item) => !item.disabled && !item.closed);
this.setActiveListItem();
this.updateSelectedItems(emit);
}, debounceTimeout);
this.queryListItems = () => {
return Array.from(this.el.querySelectorAll(listItemSelector));
};
this.focusRow = (focusEl) => {
const { enabledListItems } = this;
if (!focusEl) {
return;
}
enabledListItems.forEach((listItem) => (listItem.active = listItem === focusEl));
focusEl.setFocus();
};
this.isNavigable = (listItem) => {
const parentListItemEl = listItem.parentElement?.closest(listItemSelector);
if (!parentListItemEl) {
return true;
}
return parentListItemEl.open && this.isNavigable(parentListItemEl);
};
this.handleListKeydown = (event) => {
if (event.defaultPrevented) {
return;
}
const { key } = event;
const filteredItems = this.enabledListItems.filter((listItem) => this.isNavigable(listItem));
const currentIndex = filteredItems.findIndex((listItem) => listItem.active);
if (key === "ArrowDown") {
event.preventDefault();
const nextIndex = currentIndex + 1;
if (filteredItems[nextIndex]) {
this.focusRow(filteredItems[nextIndex]);
}
}
else if (key === "ArrowUp") {
event.preventDefault();
const prevIndex = currentIndex - 1;
if (filteredItems[prevIndex]) {
this.focusRow(filteredItems[prevIndex]);
}
}
else if (key === "Home") {
event.preventDefault();
const homeItem = filteredItems[0];
if (homeItem) {
this.focusRow(homeItem);
}
}
else if (key === "End") {
event.preventDefault();
const endItem = filteredItems[filteredItems.length - 1];
if (endItem) {
this.focusRow(endItem);
}
}
};
this.disabled = false;
this.filterEnabled = false;
this.filteredItems = [];
this.filteredData = [];
this.filterPlaceholder = undefined;
this.filterText = undefined;
this.label = undefined;
this.loading = false;
this.openable = false;
this.selectedItems = [];
this.selectionMode = "none";
this.selectionAppearance = "icon";
this.dataForFilter = [];
}
handleFilterEnabledChange() {
this.updateListItems();
}
handleSelectionAppearanceChange() {
this.updateListItems();
}
handleCalciteInternalFocusPreviousItem(event) {
event.stopPropagation();
const { enabledListItems } = this;
const currentIndex = enabledListItems.findIndex((listItem) => listItem.active);
const prevIndex = currentIndex - 1;
if (enabledListItems[prevIndex]) {
this.focusRow(enabledListItems[prevIndex]);
}
}
handleCalciteInternalListItemActive(event) {
const target = event.target;
const { listItems } = this;
listItems.forEach((listItem) => {
listItem.active = listItem === target;
});
}
handleCalciteListItemSelect() {
this.updateSelectedItems(true);
}
handleCalciteInternalListItemSelect(event) {
const target = event.target;
const { listItems, selectionMode } = this;
if (target.selected && (selectionMode === "single" || selectionMode === "single-persist")) {
listItems.forEach((listItem) => (listItem.selected = listItem === target));
}
this.updateSelectedItems();
}
handleCalciteListItemClose() {
this.updateListItems(true);
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
connectedCallback() {
this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
this.updateListItems();
connectInteractive(this);
}
disconnectedCallback() {
this.mutationObserver?.disconnect();
disconnectInteractive(this);
}
componentWillLoad() {
setUpLoadableComponent(this);
}
componentDidRender() {
updateHostInteraction(this);
}
componentDidLoad() {
setComponentLoaded(this);
const { filterEl } = this;
const filteredItems = filterEl?.filteredItems;
if (filteredItems) {
this.filteredData = filteredItems;
}
this.updateListItems();
}
// --------------------------------------------------------------------------
//
// Public Methods
//
// --------------------------------------------------------------------------
/** Sets focus on the component's first focusable element. */
async setFocus() {
await componentLoaded(this);
this.enabledListItems.find((listItem) => listItem.active)?.setFocus();
}
// --------------------------------------------------------------------------
//
// Render Methods
//
// --------------------------------------------------------------------------
render() {
const { loading, label, disabled, dataForFilter, filterEnabled, filterPlaceholder, filterText } = this;
return (h("div", { class: CSS.container }, loading ? h("calcite-scrim", { class: CSS.scrim, loading: loading }) : null, h("table", { "aria-busy": toAriaBoolean(loading), "aria-label": label || "", class: CSS.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled ? (h("thead", null, h("tr", { class: { [CSS.sticky]: true } }, h("th", { colSpan: MAX_COLUMNS }, h("calcite-filter", { "aria-label": filterPlaceholder, disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilter, placeholder: filterPlaceholder, value: filterText,
// eslint-disable-next-line react/jsx-sort-props
ref: (el) => (this.filterEl = el) }))))) : null, h("tbody", { class: CSS.tableContainer }, h("slot", { onSlotchange: this.handleDefaultSlotChange })))));
}
filterElements({ el, filteredItems, visibleParents }) {
const hidden = !visibleParents.has(el) && !filteredItems.includes(el);
el.hidden = hidden;
const closestParent = el.parentElement.closest(parentSelector);
if (!closestParent) {
return;
}
if (!hidden) {
visibleParents.add(closestParent);
}
this.filterElements({
el: closestParent,
filteredItems,
visibleParents
});
}
get el() { return this; }
static get watchers() { return {
"filterEnabled": ["handleFilterEnabledChange"],
"selectionMode": ["handleSelectionAppearanceChange"],
"selectionAppearance": ["handleSelectionAppearanceChange"]
}; }
static get style() { return listCss; }
}, [1, "calcite-list", {
"disabled": [516],
"filterEnabled": [516, "filter-enabled"],
"filteredItems": [1040],
"filteredData": [1040],
"filterPlaceholder": [513, "filter-placeholder"],
"filterText": [1537, "filter-text"],
"label": [1],
"loading": [516],
"openable": [4],
"selectedItems": [1040],
"selectionMode": [513, "selection-mode"],
"selectionAppearance": [513, "selection-appearance"],
"dataForFilter": [32],
"setFocus": [64]
}, [[0, "calciteInternalFocusPreviousItem", "handleCalciteInternalFocusPreviousItem"], [0, "calciteInternalListItemActive", "handleCalciteInternalListItemActive"], [0, "calciteListItemSelect", "handleCalciteListItemSelect"], [0, "calciteInternalListItemSelect", "handleCalciteInternalListItemSelect"], [0, "calciteListItemClose", "handleCalciteListItemClose"]]]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["calcite-list", "calcite-filter", "calcite-icon", "calcite-input", "calcite-loader", "calcite-progress", "calcite-scrim"];
components.forEach(tagName => { switch (tagName) {
case "calcite-list":
if (!customElements.get(tagName)) {
customElements.define(tagName, List);
}
break;
case "calcite-filter":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "calcite-icon":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "calcite-input":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "calcite-loader":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "calcite-progress":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "calcite-scrim":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const CalciteList = List;
const defineCustomElement = defineCustomElement$1;
export { CalciteList, defineCustomElement };