@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
736 lines (722 loc) • 39.1 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
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-55f8a3b7.js');
const dom = require('./dom-18ca68ff.js');
const interactive = require('./interactive-26294f2c.js');
const observers = require('./observers-83b3999d.js');
const loadable = require('./loadable-53f729bb.js');
const debounce = require('./debounce-492319d0.js');
const locale = require('./locale-fc347462.js');
const t9n = require('./t9n-14d528c4.js');
require('./guid-db20443e.js');
require('./resources-45d84c94.js');
require('./browser-28ea2ce1.js');
require('./key-2ce02f02.js');
const CSS$2 = {
container: "container",
containerBorderSelected: "container--border-selected",
containerBorderUnselected: "container--border-unselected",
contentContainer: "content-container",
contentContainerSelectable: "content-container--selectable",
contentContainerHasCenterContent: "content-container--has-center-content",
nestedContainer: "nested-container",
nestedContainerHidden: "nested-container--hidden",
content: "content",
customContent: "custom-content",
actionsStart: "actions-start",
contentStart: "content-start",
label: "label",
description: "description",
contentEnd: "content-end",
actionsEnd: "actions-end",
selectionContainer: "selection-container",
openContainer: "open-container"
};
const SLOTS = {
actionsStart: "actions-start",
contentStart: "content-start",
content: "content",
contentEnd: "content-end",
actionsEnd: "actions-end"
};
const MAX_COLUMNS = 5;
const ICONS = {
selectedMultiple: "check-circle-f",
selectedSingle: "circle-f",
unselected: "blank",
closedLTR: "caret-right",
closedRTL: "caret-left",
open: "caret-down",
blank: "blank",
close: "x"
};
const listItemGroupSelector = "calcite-list-item-group";
const listItemSelector$1 = "calcite-list-item";
function getListItemChildren(event) {
const assignedElements = event.target.assignedElements({ flatten: true });
const listItemGroupChildren = assignedElements.filter((el) => el?.matches(listItemGroupSelector))
.map((group) => Array.from(group.querySelectorAll(listItemSelector$1)))
.reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
const listItemChildren = assignedElements.filter((el) => el?.matches(listItemSelector$1));
return [...listItemGroupChildren, ...listItemChildren];
}
function updateListItemChildren(listItemChildren) {
listItemChildren.forEach((listItem) => {
listItem.setPosition = listItemChildren.indexOf(listItem) + 1;
listItem.setSize = listItemChildren.length;
});
}
function getDepth(element, includeGroup = false) {
const expression = includeGroup
? "ancestor::calcite-list-item | ancestor::calcite-list-item-group"
: "ancestor::calcite-list-item";
const result = document.evaluate(expression, element, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
return result.snapshotLength;
}
const CSS$1 = {
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 = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.calciteListChange = index.createEvent(this, "calciteListChange", 6);
this.calciteListFilter = index.createEvent(this, "calciteListFilter", 6);
this.listItems = [];
this.enabledListItems = [];
this.mutationObserver = observers.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.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();
interactive.connectInteractive(this);
}
disconnectedCallback() {
this.mutationObserver?.disconnect();
interactive.disconnectInteractive(this);
}
componentWillLoad() {
loadable.setUpLoadableComponent(this);
}
componentDidRender() {
interactive.updateHostInteraction(this);
}
componentDidLoad() {
loadable.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 loadable.componentLoaded(this);
this.enabledListItems.find((listItem) => listItem.active)?.setFocus();
}
// --------------------------------------------------------------------------
//
// Render Methods
//
// --------------------------------------------------------------------------
render() {
const { loading, label, disabled, dataForFilter, filterEnabled, filterPlaceholder, filterText } = this;
return (index.h("div", { class: CSS$1.container }, loading ? index.h("calcite-scrim", { class: CSS$1.scrim, loading: loading }) : null, index.h("table", { "aria-busy": dom.toAriaBoolean(loading), "aria-label": label || "", class: CSS$1.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled ? (index.h("thead", null, index.h("tr", { class: { [CSS$1.sticky]: true } }, index.h("th", { colSpan: MAX_COLUMNS }, index.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, index.h("tbody", { class: CSS$1.tableContainer }, index.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 index.getElement(this); }
static get watchers() { return {
"filterEnabled": ["handleFilterEnabledChange"],
"selectionMode": ["handleSelectionAppearanceChange"],
"selectionAppearance": ["handleSelectionAppearanceChange"]
}; }
};
List.style = listCss;
const listItemCss = "@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:flex;flex-direction:column;--calcite-list-item-icon-color:var(--calcite-ui-brand);--calcite-list-item-spacing-indent:1rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{box-sizing:border-box;display:flex;flex:1 1 0%;background-color:var(--calcite-ui-foreground-1);font-family:var(--calcite-sans-family);padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}.container *{box-sizing:border-box}.container:hover{cursor:pointer;background-color:var(--calcite-ui-foreground-2)}.container--border-selected{border-inline-start:4px solid var(--calcite-ui-brand)}.container--border-unselected{border-inline-start:4px solid transparent}.nested-container{display:flex;flex-direction:column;background-color:var(--calcite-ui-foreground-1)}.nested-container--hidden{display:none}.content-container{display:flex;flex:1 1 auto;align-items:stretch;padding:0px;font-family:var(--calcite-sans-family);font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2)}tr,td{outline-color:transparent}tr:focus,td:focus{z-index:var(--calcite-app-z-index-sticky);outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n -2px *\n calc(\n 1 -\n 2 * clamp(\n 0,\n var(--calcite-ui-focus-offset-invert),\n 1\n )\n )\n )}.content,.custom-content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;padding-inline:0.75rem;padding-block:0.5rem;font-size:var(--calcite-font-size--2);line-height:1.375}.label,.description{font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal);word-wrap:break-word;word-break:break-word}.label:only-child,.description:only-child{margin:0px;padding-block:0.25rem}.label{color:var(--calcite-ui-text-1)}.description{margin-block-start:0.125rem;color:var(--calcite-ui-text-3)}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:1 1 auto}.content-container--has-center-content .content-start,.content-container--has-center-content .content-end{flex:0 1 auto}.selection-container{display:flex;padding-inline:0.75rem;color:var(--calcite-list-item-icon-color)}.actions-start,.actions-end,.content-start,.content-end,.selection-container,.open-container{display:flex;align-items:center}.open-container,.selection-container{cursor:pointer}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){margin-inline:0.75rem;align-self:center}.actions-start ::slotted(calcite-action),.actions-end ::slotted(calcite-action){align-self:stretch;color:inherit}::slotted(calcite-list-item){border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}[hidden]{display:none}";
const focusMap = new Map();
const listSelector = "calcite-list";
const ListItem = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.calciteListItemSelect = index.createEvent(this, "calciteListItemSelect", 6);
this.calciteListItemClose = index.createEvent(this, "calciteListItemClose", 6);
this.calciteInternalListItemSelect = index.createEvent(this, "calciteInternalListItemSelect", 6);
this.calciteInternalListItemActive = index.createEvent(this, "calciteInternalListItemActive", 6);
this.calciteInternalFocusPreviousItem = index.createEvent(this, "calciteInternalFocusPreviousItem", 6);
// --------------------------------------------------------------------------
//
// Private Methods
//
// --------------------------------------------------------------------------
this.closeClickHandler = () => {
this.closed = true;
this.calciteListItemClose.emit();
};
this.handleContentSlotChange = (event) => {
this.hasCustomContent = dom.slotChangeHasAssignedElement(event);
};
this.handleActionsStartSlotChange = (event) => {
this.hasActionsStart = dom.slotChangeHasAssignedElement(event);
};
this.handleActionsEndSlotChange = (event) => {
this.hasActionsEnd = dom.slotChangeHasAssignedElement(event);
};
this.handleContentStartSlotChange = (event) => {
this.hasContentStart = dom.slotChangeHasAssignedElement(event);
};
this.handleContentEndSlotChange = (event) => {
this.hasContentEnd = dom.slotChangeHasAssignedElement(event);
};
this.handleDefaultSlotChange = (event) => {
const { parentListEl } = this;
const listItemChildren = getListItemChildren(event);
updateListItemChildren(listItemChildren);
const openable = !!listItemChildren.length;
if (openable && parentListEl && !parentListEl.openable) {
parentListEl.openable = true;
}
this.openable = openable;
if (!openable) {
this.open = false;
}
};
this.toggleOpen = () => {
this.open = !this.open;
};
this.itemClicked = (event) => {
if (event.defaultPrevented) {
return;
}
this.toggleSelected();
this.calciteInternalListItemActive.emit();
};
this.toggleSelected = () => {
const { selectionMode, selected } = this;
if (this.disabled) {
return;
}
if (selectionMode === "multiple" || selectionMode === "single") {
this.selected = !selected;
}
else if (selectionMode === "single-persist") {
this.selected = true;
}
this.calciteListItemSelect.emit();
};
this.handleItemKeyDown = (event) => {
if (event.defaultPrevented) {
return;
}
const { key } = event;
const composedPath = event.composedPath();
const { containerEl, contentEl, actionsStartEl, actionsEndEl, open, openable } = this;
const cells = [actionsStartEl, contentEl, actionsEndEl].filter(Boolean);
const currentIndex = cells.findIndex((cell) => composedPath.includes(cell));
if (key === "Enter") {
event.preventDefault();
this.toggleSelected();
}
else if (key === "ArrowRight") {
event.preventDefault();
const nextIndex = currentIndex + 1;
if (currentIndex === -1) {
if (!open && openable) {
this.open = true;
this.focusCell(null);
}
else if (cells[0]) {
this.focusCell(cells[0]);
}
}
else if (cells[currentIndex] && cells[nextIndex]) {
this.focusCell(cells[nextIndex]);
}
}
else if (key === "ArrowLeft") {
event.preventDefault();
const prevIndex = currentIndex - 1;
if (currentIndex === -1) {
this.focusCell(null);
if (open && openable) {
this.open = false;
}
else {
this.calciteInternalFocusPreviousItem.emit();
}
}
else if (currentIndex === 0) {
this.focusCell(null);
containerEl.focus();
}
else if (cells[currentIndex] && cells[prevIndex]) {
this.focusCell(cells[prevIndex]);
}
}
};
this.focusCellNull = () => {
this.focusCell(null);
};
this.focusCell = (focusEl, saveFocusIndex = true) => {
const { contentEl, actionsStartEl, actionsEndEl, parentListEl } = this;
if (saveFocusIndex) {
focusMap.set(parentListEl, null);
}
[actionsStartEl, contentEl, actionsEndEl].filter(Boolean).forEach((tableCell, cellIndex) => {
const tabIndexAttr = "tabindex";
if (tableCell === focusEl) {
tableCell.setAttribute(tabIndexAttr, "0");
saveFocusIndex && focusMap.set(parentListEl, cellIndex);
}
else {
tableCell.removeAttribute(tabIndexAttr);
}
});
focusEl?.focus();
};
this.active = false;
this.closable = false;
this.closed = false;
this.description = undefined;
this.disabled = false;
this.label = undefined;
this.metadata = undefined;
this.open = false;
this.setSize = null;
this.setPosition = null;
this.selected = false;
this.value = undefined;
this.selectionMode = null;
this.selectionAppearance = null;
this.messageOverrides = undefined;
this.messages = undefined;
this.effectiveLocale = "";
this.defaultMessages = undefined;
this.level = null;
this.visualLevel = null;
this.parentListEl = undefined;
this.openable = false;
this.hasActionsStart = false;
this.hasActionsEnd = false;
this.hasCustomContent = false;
this.hasContentStart = false;
this.hasContentEnd = false;
}
activeHandler(active) {
if (!active) {
this.focusCell(null, false);
}
}
handleSelectedChange() {
this.calciteInternalListItemSelect.emit();
}
onMessagesChange() {
/* wired up by t9n util */
}
effectiveLocaleChange() {
t9n.updateMessages(this, this.effectiveLocale);
}
connectedCallback() {
interactive.connectInteractive(this);
locale.connectLocalized(this);
t9n.connectMessages(this);
const { el } = this;
this.parentListEl = el.closest(listSelector);
this.level = getDepth(el) + 1;
this.visualLevel = getDepth(el, true);
this.setSelectionDefaults();
}
async componentWillLoad() {
loadable.setUpLoadableComponent(this);
await t9n.setUpMessages(this);
}
componentDidLoad() {
loadable.setComponentLoaded(this);
}
componentDidRender() {
interactive.updateHostInteraction(this, "managed");
}
disconnectedCallback() {
interactive.disconnectInteractive(this);
locale.disconnectLocalized(this);
t9n.disconnectMessages(this);
}
// --------------------------------------------------------------------------
//
// Public Methods
//
// --------------------------------------------------------------------------
/** Sets focus on the component. */
async setFocus() {
await loadable.componentLoaded(this);
const { containerEl, contentEl, actionsStartEl, actionsEndEl, parentListEl } = this;
const focusIndex = focusMap.get(parentListEl);
if (typeof focusIndex === "number") {
const cells = [actionsStartEl, contentEl, actionsEndEl].filter(Boolean);
if (cells[focusIndex]) {
this.focusCell(cells[focusIndex]);
}
else {
containerEl?.focus();
}
return;
}
containerEl?.focus();
}
// --------------------------------------------------------------------------
//
// Render Methods
//
// --------------------------------------------------------------------------
renderSelected() {
const { selected, selectionMode, selectionAppearance } = this;
if (selectionMode === "none" || selectionAppearance === "border") {
return null;
}
return (index.h("td", { class: CSS$2.selectionContainer, key: "selection-container", onClick: this.itemClicked }, index.h("calcite-icon", { icon: selected
? selectionMode === "multiple"
? ICONS.selectedMultiple
: ICONS.selectedSingle
: ICONS.unselected, scale: "s" })));
}
renderOpen() {
const { el, open, openable, parentListEl } = this;
const dir = dom.getElementDir(el);
return openable ? (index.h("td", { class: CSS$2.openContainer, key: "open-container", onClick: this.toggleOpen }, index.h("calcite-icon", { icon: open ? ICONS.open : dir === "rtl" ? ICONS.closedRTL : ICONS.closedLTR, scale: "s" }))) : parentListEl?.openable ? (index.h("td", { class: CSS$2.openContainer, key: "open-container", onClick: this.itemClicked }, index.h("calcite-icon", { icon: ICONS.blank, scale: "s" }))) : null;
}
renderActionsStart() {
const { label, hasActionsStart } = this;
return (index.h("td", { "aria-label": label, class: CSS$2.actionsStart, hidden: !hasActionsStart, key: "actions-start-container", role: "gridcell",
// eslint-disable-next-line react/jsx-sort-props
ref: (el) => (this.actionsStartEl = el) }, index.h("slot", { name: SLOTS.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
}
renderActionsEnd() {
const { label, hasActionsEnd, closable, messages } = this;
return (index.h("td", { "aria-label": label, class: CSS$2.actionsEnd, hidden: !(hasActionsEnd || closable), key: "actions-end-container", role: "gridcell",
// eslint-disable-next-line react/jsx-sort-props
ref: (el) => (this.actionsEndEl = el) }, index.h("slot", { name: SLOTS.actionsEnd, onSlotchange: this.handleActionsEndSlotChange }), closable ? (index.h("calcite-action", { appearance: "transparent", icon: ICONS.close, key: "close-action", label: messages.close, onClick: this.closeClickHandler, text: messages.close })) : null));
}
renderContentStart() {
const { hasContentStart } = this;
return (index.h("div", { class: CSS$2.contentStart, hidden: !hasContentStart }, index.h("slot", { name: SLOTS.contentStart, onSlotchange: this.handleContentStartSlotChange })));
}
renderCustomContent() {
const { hasCustomContent } = this;
return (index.h("div", { class: CSS$2.customContent, hidden: !hasCustomContent }, index.h("slot", { name: SLOTS.content, onSlotchange: this.handleContentSlotChange })));
}
renderContentEnd() {
const { hasContentEnd } = this;
return (index.h("div", { class: CSS$2.contentEnd, hidden: !hasContentEnd }, index.h("slot", { name: SLOTS.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
}
renderContentProperties() {
const { label, description, hasCustomContent } = this;
return !hasCustomContent && (!!label || !!description) ? (index.h("div", { class: CSS$2.content, key: "content" }, label ? (index.h("div", { class: CSS$2.label, key: "label" }, label)) : null, description ? (index.h("div", { class: CSS$2.description, key: "description" }, description)) : null)) : null;
}
renderContentContainer() {
const { description, label, selectionMode, hasCustomContent } = this;
const hasCenterContent = hasCustomContent || !!label || !!description;
const content = [
this.renderContentStart(),
this.renderCustomContent(),
this.renderContentProperties(),
this.renderContentEnd()
];
return (index.h("td", { "aria-label": label, class: {
[CSS$2.contentContainer]: true,
[CSS$2.contentContainerSelectable]: selectionMode !== "none",
[CSS$2.contentContainerHasCenterContent]: hasCenterContent
}, key: "content-container", onClick: this.itemClicked, role: "gridcell",
// eslint-disable-next-line react/jsx-sort-props
ref: (el) => (this.contentEl = el) }, content));
}
render() {
const { openable, open, level, setPosition, setSize, active, label, selected, selectionAppearance, selectionMode, closed } = this;
const showBorder = selectionMode !== "none" && selectionAppearance === "border";
const borderSelected = showBorder && selected;
const borderUnselected = showBorder && !selected;
return (index.h(index.Host, null, index.h("tr", { "aria-expanded": openable ? dom.toAriaBoolean(open) : null, "aria-label": label, "aria-level": level, "aria-posinset": setPosition, "aria-selected": dom.toAriaBoolean(selected), "aria-setsize": setSize, class: {
[CSS$2.container]: true,
[CSS$2.containerBorderSelected]: borderSelected,
[CSS$2.containerBorderUnselected]: borderUnselected
}, hidden: closed, onFocus: this.focusCellNull, onKeyDown: this.handleItemKeyDown, role: "row", style: { "--calcite-list-item-spacing-indent-multiplier": `${this.visualLevel}` }, tabIndex: active ? 0 : -1,
// eslint-disable-next-line react/jsx-sort-props
ref: (el) => (this.containerEl = el) }, this.renderSelected(), this.renderOpen(), this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), index.h("div", { class: {
[CSS$2.nestedContainer]: true,
[CSS$2.nestedContainerHidden]: openable && !open
} }, index.h("slot", { onSlotchange: this.handleDefaultSlotChange }))));
}
setSelectionDefaults() {
const { parentListEl, selectionMode, selectionAppearance } = this;
if (!parentListEl) {
return;
}
if (!selectionMode) {
this.selectionMode = parentListEl.selectionMode;
}
if (!selectionAppearance) {
this.selectionAppearance = parentListEl.selectionAppearance;
}
}
static get assetsDirs() { return ["assets"]; }
get el() { return index.getElement(this); }
static get watchers() { return {
"active": ["activeHandler"],
"selected": ["handleSelectedChange"],
"messageOverrides": ["onMessagesChange"],
"effectiveLocale": ["effectiveLocaleChange"]
}; }
};
ListItem.style = listItemCss;
const CSS = {
container: "container",
heading: "heading"
};
const listItemGroupCss = "@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:flex;flex-direction:column;background-color:var(--calcite-ui-foreground-1);--calcite-list-item-spacing-indent:1rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{margin:0px;display:flex;flex:1 1 0%;background-color:var(--calcite-ui-foreground-2);padding:0.75rem;font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-bold);color:var(--calcite-ui-text-2)}.heading{padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}::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)}[hidden]{display:none}";
const ListItemGroup = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.disabled = false;
this.heading = undefined;
this.visualLevel = null;
}
// --------------------------------------------------------------------------
//
// Lifecycle
//
// --------------------------------------------------------------------------
connectedCallback() {
const { el } = this;
this.visualLevel = getDepth(el, true);
interactive.connectInteractive(this);
}
componentDidRender() {
interactive.updateHostInteraction(this);
}
disconnectedCallback() {
interactive.disconnectInteractive(this);
}
// --------------------------------------------------------------------------
//
// Render Methods
//
// --------------------------------------------------------------------------
render() {
const { heading, visualLevel } = this;
return (index.h(index.Host, null, index.h("tr", { class: CSS.container, style: { "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` } }, index.h("td", { class: CSS.heading, colSpan: MAX_COLUMNS }, heading)), index.h("slot", null)));
}
get el() { return index.getElement(this); }
};
ListItemGroup.style = listItemGroupCss;
exports.calcite_list = List;
exports.calcite_list_item = ListItem;
exports.calcite_list_item_group = ListItemGroup;