@esri/solutions-components 0.6.15 → 0.6.16

package/dist/components/calcite-split-button.js

@@ -14,7 +14,7 @@ import { d as defineCustomElement$2 } from './loader.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1
+ * v1.8.0
  */
 const CSS = {
   container: "split-button__container",
@@ -25,7 +25,7 @@ const CSS = {
   widthFull: "width-full",
 };
 
-const splitButtonCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block}:host .split-button__container{display:flex;align-items:stretch}:host .split-button__container>calcite-dropdown>calcite-button{block-size:100%;vertical-align:top}:host:host([kind=brand]){--calcite-split-button-background:var(--calcite-ui-brand);--calcite-split-button-divider:var(--calcite-ui-foreground-1)}:host:host([kind=danger]){--calcite-split-button-background:var(--calcite-ui-danger);--calcite-split-button-divider:var(--calcite-ui-foreground-1)}:host:host([kind=neutral]){--calcite-split-button-background:var(--calcite-ui-foreground-3);--calcite-split-button-divider:var(--calcite-ui-text-1)}:host:host([kind=inverse]){--calcite-split-button-background:var(--calcite-ui-inverse);--calcite-split-button-divider:var(--calcite-ui-foreground-1)}:host([appearance=transparent]):host([kind=brand]){--calcite-split-button-divider:var(--calcite-ui-brand)}:host([appearance=transparent]):host([kind=danger]){--calcite-split-button-divider:var(--calcite-ui-danger)}:host([appearance=transparent]):host([kind=neutral]){--calcite-split-button-divider:var(--calcite-ui-text-1)}:host([appearance=transparent]):host([kind=inverse]){--calcite-split-button-divider:var(--calcite-ui-foreground-1);--calcite-split-button-background:transparent}:host([appearance=outline]),:host([appearance=transparent]){--calcite-split-button-background:transparent}:host([appearance=outline-fill]){--calcite-split-button-background:var(--calcite-ui-foreground-1)}:host([appearance=outline]):host([kind=brand]),:host([appearance=outline-fill]):host([kind=brand]){--calcite-split-button-divider:var(--calcite-ui-brand)}:host([appearance=outline]):host([kind=danger]),:host([appearance=outline-fill]):host([kind=danger]){--calcite-split-button-divider:var(--calcite-ui-danger)}:host([appearance=outline]):host([kind=neutral]),:host([appearance=outline-fill]):host([kind=neutral]){--calcite-split-button-divider:var(--calcite-ui-foreground-3)}:host([appearance=outline]):host([kind=inverse]),:host([appearance=outline-fill]):host([kind=inverse]){--calcite-split-button-divider:var(--calcite-ui-inverse)}.width-auto{inline-size:auto}.width-half{inline-size:50%}.width-full{inline-size:100%}.split-button__divider-container{display:flex;inline-size:1px;align-items:stretch;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;background-color:var(--calcite-split-button-background)}.split-button__divider{margin-block:0.25rem;display:inline-block;inline-size:1px;background-color:var(--calcite-split-button-divider)}:host([appearance=outline-fill]) .split-button__divider-container,:host([appearance=outline]) .split-button__divider-container{border-block:1px solid var(--calcite-split-button-divider)}:host([appearance=outline-fill]):hover .split-button__divider-container,:host([appearance=outline]):hover .split-button__divider-container{background-color:var(--calcite-split-button-divider)}:host([appearance=outline-fill]:hover) .split-button__divider-container,:host([appearance=outline]:hover) .split-button__divider-container{background-color:var(--calcite-split-button-divider)}:host([appearance=outline-fill]:focus-within):host([kind=brand]),:host([appearance=outline]:focus-within):host([kind=brand]){--calcite-split-button-divider:var(--calcite-ui-brand-press)}:host([appearance=outline-fill]:focus-within):host([kind=danger]),:host([appearance=outline]:focus-within):host([kind=danger]){--calcite-split-button-divider:var(--calcite-ui-danger-press)}:host([appearance=outline-fill]:focus-within) .split-button__divider-container,:host([appearance=outline]:focus-within) .split-button__divider-container{background-color:var(--calcite-split-button-divider)}:host([disabled]) .split-button__divider-container{opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) calcite-dropdown>calcite-button{pointer-events:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([hidden]){display:none}[hidden]{display:none}";
+const splitButtonCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block}:host .split-button__container{display:flex;align-items:stretch}:host .split-button__container>calcite-dropdown>calcite-button{block-size:100%;vertical-align:top}:host:host([kind=brand]){--calcite-split-button-background:var(--calcite-ui-brand);--calcite-split-button-divider:var(--calcite-ui-foreground-1)}:host:host([kind=danger]){--calcite-split-button-background:var(--calcite-ui-danger);--calcite-split-button-divider:var(--calcite-ui-foreground-1)}:host:host([kind=neutral]){--calcite-split-button-background:var(--calcite-ui-foreground-3);--calcite-split-button-divider:var(--calcite-ui-text-1)}:host:host([kind=inverse]){--calcite-split-button-background:var(--calcite-ui-inverse);--calcite-split-button-divider:var(--calcite-ui-foreground-1)}:host([appearance=transparent]):host([kind=brand]){--calcite-split-button-divider:var(--calcite-ui-brand);--calcite-split-button-background:transparent}:host([appearance=transparent]):host([kind=danger]){--calcite-split-button-divider:var(--calcite-ui-danger);--calcite-split-button-background:transparent}:host([appearance=transparent]):host([kind=neutral]){--calcite-split-button-divider:var(--calcite-ui-text-1);--calcite-split-button-background:transparent}:host([appearance=transparent]):host([kind=inverse]){--calcite-split-button-divider:var(--calcite-ui-foreground-1);--calcite-split-button-background:transparent}:host([appearance=outline]){--calcite-split-button-background:transparent}:host([appearance=outline-fill]){--calcite-split-button-background:var(--calcite-ui-foreground-1)}:host([appearance=outline]):host([kind=brand]),:host([appearance=outline-fill]):host([kind=brand]){--calcite-split-button-divider:var(--calcite-ui-brand)}:host([appearance=outline]):host([kind=danger]),:host([appearance=outline-fill]):host([kind=danger]){--calcite-split-button-divider:var(--calcite-ui-danger)}:host([appearance=outline]):host([kind=neutral]),:host([appearance=outline-fill]):host([kind=neutral]){--calcite-split-button-divider:var(--calcite-ui-border-1);--calcite-split-button-background:var(--calcite-ui-border-1)}:host([appearance=outline]):host([kind=inverse]),:host([appearance=outline-fill]):host([kind=inverse]){--calcite-split-button-divider:var(--calcite-ui-inverse)}.width-auto{inline-size:auto}.width-half{inline-size:50%}.width-full{inline-size:100%}.split-button__divider-container{display:flex;inline-size:1px;align-items:stretch;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;background-color:var(--calcite-split-button-background)}.split-button__divider{margin-block:0.25rem;display:inline-block;inline-size:1px;background-color:var(--calcite-split-button-divider)}:host([appearance=outline-fill]) .split-button__divider-container,:host([appearance=outline]) .split-button__divider-container{border-block:1px solid var(--calcite-split-button-divider)}:host([appearance=outline-fill]):hover .split-button__divider-container,:host([appearance=outline]):hover .split-button__divider-container{background-color:var(--calcite-split-button-divider)}:host([appearance=outline-fill]:hover) .split-button__divider-container,:host([appearance=outline]:hover) .split-button__divider-container{background-color:var(--calcite-split-button-divider)}:host([appearance=outline-fill]:focus-within):host([kind=brand]),:host([appearance=outline]:focus-within):host([kind=brand]){--calcite-split-button-divider:var(--calcite-ui-brand-press)}:host([appearance=outline-fill]:focus-within):host([kind=danger]),:host([appearance=outline]:focus-within):host([kind=danger]){--calcite-split-button-divider:var(--calcite-ui-danger-press)}:host([appearance=outline-fill]:focus-within) .split-button__divider-container,:host([appearance=outline]:focus-within) .split-button__divider-container{background-color:var(--calcite-split-button-divider)}:host([disabled]) .split-button__divider-container{opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) calcite-dropdown>calcite-button{pointer-events:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([hidden]){display:none}[hidden]{display:none}";
 
 const SplitButton = /*@__PURE__*/ proxyCustomElement(class SplitButton extends HTMLElement {
   constructor() {

package/dist/components/calcite-stepper-item.js

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { y as getElementProp, t as toAriaBoolean } from './dom.js';
+import { t as toAriaBoolean } from './dom.js';
 import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive.js';
 import { n as numberStringFormatter, c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
@@ -79,12 +79,12 @@ const StepperItem = /*@__PURE__*/ proxyCustomElement(class StepperItem extends H
     this.disabled = false;
     this.heading = undefined;
     this.description = undefined;
-    this.layout = "horizontal";
-    this.icon = false;
     this.iconFlipRtl = false;
+    this.numberingSystem = undefined;
+    this.icon = false;
+    this.layout = undefined;
     this.numbered = false;
     this.scale = "m";
-    this.numberingSystem = undefined;
     this.effectiveLocale = "";
   }
   selectedHandler() {
@@ -114,10 +114,6 @@ const StepperItem = /*@__PURE__*/ proxyCustomElement(class StepperItem extends H
   }
   componentWillLoad() {
     setUpLoadableComponent(this);
-    this.icon = getElementProp(this.el, "icon", false);
-    this.numbered = getElementProp(this.el, "numbered", false);
-    this.layout = getElementProp(this.el, "layout", false);
-    this.scale = getElementProp(this.el, "scale", "m");
     this.parentStepperEl = this.el.parentElement;
     this.itemPosition = this.getItemPosition();
     this.registerStepperItem();
@@ -139,7 +135,7 @@ const StepperItem = /*@__PURE__*/ proxyCustomElement(class StepperItem extends H
     return (h(Host, { "aria-expanded": toAriaBoolean(this.selected), onClick: this.handleItemClick, onKeyDown: this.keyDownHandler }, h("div", { class: "container" }, h("div", { class: "stepper-item-header", tabIndex: 
       /* additional tab index logic needed because of display: contents */
       this.layout === "horizontal" && !this.disabled ? 0 : null,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.headerEl = el) }, this.icon ? this.renderIcon() : null, this.numbered ? h("div", { class: "stepper-item-number" }, this.renderNumbers(), ".") : null, h("div", { class: "stepper-item-header-text" }, h("span", { class: "stepper-item-heading" }, this.heading), h("span", { class: "stepper-item-description" }, this.description))), h("div", { class: "stepper-item-content" }, h("slot", null)))));
   }
   //--------------------------------------------------------------------------
@@ -209,12 +205,12 @@ const StepperItem = /*@__PURE__*/ proxyCustomElement(class StepperItem extends H
     "disabled": [516],
     "heading": [1],
     "description": [1],
-    "layout": [1537],
-    "icon": [1028],
     "iconFlipRtl": [516, "icon-flip-rtl"],
-    "numbered": [1028],
-    "scale": [1537],
     "numberingSystem": [1, "numbering-system"],
+    "icon": [4],
+    "layout": [513],
+    "numbered": [4],
+    "scale": [513],
     "effectiveLocale": [32],
     "setFocus": [64]
   }, [[16, "calciteInternalStepperItemChange", "updateActiveItemOnChange"]]]);

package/dist/components/calcite-stepper.js

@@ -4,7 +4,8 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { v as focusElementInGroup } from './dom.js';
+import { w as focusElementInGroup } from './dom.js';
+import { c as createObserver } from './observers.js';
 
 const stepperCss = ":host{position:relative;display:flex;inline-size:100%;min-inline-size:-moz-fit-content;min-inline-size:fit-content;flex-direction:row;flex-wrap:wrap;align-items:stretch;justify-content:space-between}:host([layout=vertical]){flex:1 1 auto;flex-direction:column}:host([layout=horizontal]){display:grid;grid-template-areas:\"items\" \"content\"}:host([hidden]){display:none}[hidden]{display:none}";
 
@@ -20,12 +21,16 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
     this.items = [];
     /** list of enabled Stepper items */
     this.enabledItems = [];
+    this.mutationObserver = createObserver("mutation", () => this.updateItems());
     this.icon = false;
     this.layout = "horizontal";
     this.numbered = false;
+    this.scale = "m";
     this.numberingSystem = undefined;
     this.selectedItem = null;
-    this.scale = "m";
+  }
+  handleItemPropChange() {
+    this.updateItems();
   }
   numberingSystemChange() {
     this.setStepperItemNumberingSystem();
@@ -35,6 +40,11 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  connectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true });
+    this.updateItems();
+  }
   componentDidLoad() {
     // if no stepper items are set as active, default to the first one
     if (typeof this.currentPosition !== "number") {
@@ -149,6 +159,14 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
     }
     this.updateStep(enabledStepIndex);
   }
+  updateItems() {
+    this.el.querySelectorAll("calcite-stepper-item").forEach((item) => {
+      item.icon = this.icon;
+      item.numbered = this.numbered;
+      item.layout = this.layout;
+      item.scale = this.scale;
+    });
+  }
   //--------------------------------------------------------------------------
   //
   //  Private Methods
@@ -185,6 +203,10 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
   }
   get el() { return this; }
   static get watchers() { return {
+    "icon": ["handleItemPropChange"],
+    "layout": ["handleItemPropChange"],
+    "numbered": ["handleItemPropChange"],
+    "scale": ["handleItemPropChange"],
     "numberingSystem": ["numberingSystemChange"]
   }; }
   static get style() { return stepperCss; }
@@ -192,9 +214,9 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
     "icon": [516],
     "layout": [513],
     "numbered": [516],
+    "scale": [513],
     "numberingSystem": [513, "numbering-system"],
     "selectedItem": [1040],
-    "scale": [513],
     "nextStep": [64],
     "prevStep": [64],
     "goToStep": [64],

package/dist/components/calcite-table-cell.js

@@ -0,0 +1,11 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { T as TableCell, d as defineCustomElement$1 } from './table-cell.js';
+
+const CalciteTableCell = TableCell;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteTableCell, defineCustomElement };

package/dist/components/calcite-table-header.js

@@ -0,0 +1,11 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { T as TableHeader, d as defineCustomElement$1 } from './table-header.js';
+
+const CalciteTableHeader = TableHeader;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteTableHeader, defineCustomElement };

package/dist/components/calcite-table-row.js

@@ -0,0 +1,282 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { w as focusElementInGroup } from './dom.js';
+import { i as isActivationKey } from './key.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive.js';
+import { d as defineCustomElement$4 } from './icon.js';
+import { d as defineCustomElement$3 } from './table-cell.js';
+import { d as defineCustomElement$2 } from './table-header.js';
+
+const tableRowCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{--calcite-internal-table-row-background:var(--calcite-table-row-background, var(--calcite-ui-foreground-1));--calcite-internal-table-row-border-color:var(--calcite-table-row-border-color, transparent);display:contents}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) tr{pointer-events:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}tr{border-block-end:1px solid var(--calcite-internal-table-row-border-color);background-color:var(--calcite-internal-table-row-background)}";
+
+const TableRow = /*@__PURE__*/ proxyCustomElement(class TableRow extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calciteTableRowSelect = createEvent(this, "calciteTableRowSelect", 6);
+    this.calciteInternalTableRowFocusRequest = createEvent(this, "calciteInternalTableRowFocusRequest", 6);
+    this.rowCells = [];
+    this.emitTableRowFocusRequest = (cellPosition, rowPosition, destination, lastCell) => {
+      this.calciteInternalTableRowFocusRequest.emit({
+        cellPosition,
+        rowPosition,
+        destination,
+        lastCell,
+      });
+    };
+    this.updateCells = () => {
+      var _a, _b, _c, _d;
+      const slottedCells = (_b = (_a = this.tableRowSlotEl) === null || _a === void 0 ? void 0 : _a.assignedElements({ flatten: true })) === null || _b === void 0 ? void 0 : _b.filter((el) => el.matches("calcite-table-cell") || el.matches("calcite-table-header"));
+      const renderedCells = (_d = Array.from((_c = this.tableRowEl) === null || _c === void 0 ? void 0 : _c.querySelectorAll("calcite-table-header, calcite-table-cell"))) === null || _d === void 0 ? void 0 : _d.filter((el) => el.numberCell || el.selectionCell);
+      const cells = renderedCells ? renderedCells.concat(slottedCells) : slottedCells;
+      if (cells.length > 0) {
+        cells === null || cells === void 0 ? void 0 : cells.forEach((cell, index) => {
+          cell.positionInRow = index + 1;
+          cell.parentRowType = this.rowType;
+          cell.scale = this.scale;
+          if (cell.nodeName === "CALCITE-TABLE-CELL") {
+            cell.readCellContentsToAT = this.readCellContentsToAT;
+            cell.disabled = this.disabled;
+            cell.parentRowIsSelected = this.selected;
+          }
+        });
+      }
+      this.rowCells =
+        cells || [];
+      this.cellCount = cells === null || cells === void 0 ? void 0 : cells.length;
+    };
+    this.handleSelectionOfRow = () => {
+      this.calciteTableRowSelect.emit();
+    };
+    this.handleKeyboardSelection = (event) => {
+      if (isActivationKey(event.key)) {
+        if (event.key === " ") {
+          event.preventDefault();
+        }
+        this.handleSelectionOfRow();
+      }
+    };
+    this.disabled = false;
+    this.selected = false;
+    this.cellCount = undefined;
+    this.rowType = undefined;
+    this.numbered = false;
+    this.positionSection = undefined;
+    this.positionSectionLocalized = undefined;
+    this.positionAll = undefined;
+    this.readCellContentsToAT = undefined;
+    this.scale = undefined;
+    this.selectionMode = "none";
+    this.selectedRowCount = undefined;
+    this.selectedRowCountLocalized = undefined;
+    this.bodyRowCount = undefined;
+    this.effectiveLocale = "";
+  }
+  handleCellChanges() {
+    if (this.tableRowEl && this.rowCells.length > 0) {
+      this.updateCells();
+    }
+  }
+  handleDelayedCellChanges() {
+    if (this.tableRowEl && this.rowCells.length > 0) {
+      requestAnimationFrame(() => this.updateCells());
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  componentDidLoad() {
+    if (this.tableRowEl && this.rowCells.length > 0) {
+      this.updateCells();
+    }
+  }
+  connectedCallback() {
+    connectInteractive(this);
+  }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
+  disconnectedCallback() {
+    disconnectInteractive(this);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  calciteInternalTableRowFocusChangeHandler(event) {
+    var _a;
+    if (event.target.contains(this.el)) {
+      const position = event.detail.cellPosition;
+      const rowPosition = event.detail.rowPosition;
+      const destination = event.detail.destination;
+      const lastCell = event.detail.lastCell;
+      if (rowPosition === this.positionAll) {
+        if (this.disabled) {
+          const deflectDirection = destination === "last" ? "previous" : destination === "first" ? "next" : destination;
+          this.emitTableRowFocusRequest(position, this.positionAll, deflectDirection);
+          return;
+        }
+        const cellPosition = lastCell
+          ? this.rowCells[this.rowCells.length - 1]
+          : (_a = this.rowCells) === null || _a === void 0 ? void 0 : _a.find((_, index) => index + 1 === position);
+        if (cellPosition) {
+          cellPosition.setFocus();
+        }
+      }
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  keyDownHandler(event) {
+    var _a;
+    const el = event.target;
+    const key = event.key;
+    const isControl = event.ctrlKey;
+    const cells = this.rowCells;
+    if (el.matches("calcite-table-cell") || el.matches("calcite-table-header")) {
+      switch (key) {
+        case "ArrowUp":
+          this.emitTableRowFocusRequest(el.positionInRow, this.positionAll, "previous");
+          event.preventDefault();
+          break;
+        case "ArrowDown":
+          this.emitTableRowFocusRequest(el.positionInRow, this.positionAll, "next");
+          event.preventDefault();
+          break;
+        case "PageUp":
+          this.emitTableRowFocusRequest(el.positionInRow, this.positionAll, "first");
+          event.preventDefault();
+          break;
+        case "PageDown":
+          this.emitTableRowFocusRequest(el.positionInRow, this.positionAll, "last");
+          event.preventDefault();
+          break;
+        case "ArrowLeft":
+          focusElementInGroup(cells, el, "previous", false);
+          event.preventDefault();
+          break;
+        case "ArrowRight":
+          focusElementInGroup(cells, el, "next", false);
+          event.preventDefault();
+          break;
+        case "Home":
+          if (isControl) {
+            this.emitTableRowFocusRequest(1, this.positionAll, "first");
+            event.preventDefault();
+          }
+          else {
+            focusElementInGroup(cells, el, "first", false);
+            event.preventDefault();
+          }
+          break;
+        case "End":
+          if (isControl) {
+            this.emitTableRowFocusRequest((_a = this.rowCells) === null || _a === void 0 ? void 0 : _a.length, this.positionAll, "last", true);
+            event.preventDefault();
+          }
+          else {
+            focusElementInGroup(cells, el, "last", false);
+            event.preventDefault();
+          }
+          break;
+      }
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  //--------------------------------------------------------------------------
+  renderSelectionIcon() {
+    const icon = this.selectionMode === "multiple" && this.selected
+      ? "check-square-f"
+      : this.selectionMode === "multiple"
+        ? "square"
+        : this.selected
+          ? "circle-f"
+          : "circle";
+    return h("calcite-icon", { icon: icon, scale: this.scale === "l" ? "m" : "s" });
+  }
+  renderSelectableCell() {
+    return this.rowType === "head" ? (h("calcite-table-header", { alignment: "center", bodyRowCount: this.bodyRowCount, key: "selection-head", onClick: this.selectionMode === "multiple" && this.handleSelectionOfRow, onKeyDown: this.selectionMode === "multiple" && this.handleKeyboardSelection, selectedRowCount: this.selectedRowCount, selectedRowCountLocalized: this.selectedRowCountLocalized, selectionCell: true, selectionMode: this.selectionMode })) : this.rowType === "body" ? (h("calcite-table-cell", { alignment: "center", key: "selection-body", onClick: this.handleSelectionOfRow, onKeyDown: this.handleKeyboardSelection, parentRowIsSelected: this.selected, parentRowPositionLocalized: this.positionSectionLocalized, selectionCell: true }, this.renderSelectionIcon())) : (h("calcite-table-cell", { alignment: "center", key: "selection-foot", selectionCell: true }));
+  }
+  renderNumberedCell() {
+    return this.rowType === "head" ? (h("calcite-table-header", { alignment: "center", key: "numbered-head", numberCell: true })) : this.rowType === "body" ? (h("calcite-table-cell", { alignment: "center", key: "numbered-body", numberCell: true }, this.positionSectionLocalized)) : (h("calcite-table-cell", { alignment: "center", key: "numbered-foot", numberCell: true }));
+  }
+  render() {
+    return (h(Host, null, h("tr", { "aria-disabled": this.disabled, "aria-rowindex": this.positionAll + 1, "aria-selected": this.selected, onKeyDown: (event) => this.keyDownHandler(event),
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+      ref: (el) => (this.tableRowEl = el) }, this.numbered && this.renderNumberedCell(), this.selectionMode !== "none" && this.renderSelectableCell(), h("slot", { onSlotchange: this.updateCells, ref: (el) => (this.tableRowSlotEl = el) }))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "bodyRowCount": ["handleCellChanges"],
+    "scale": ["handleCellChanges"],
+    "selected": ["handleCellChanges"],
+    "selectedRowCount": ["handleCellChanges"],
+    "numbered": ["handleDelayedCellChanges"],
+    "selectionMode": ["handleDelayedCellChanges"]
+  }; }
+  static get style() { return tableRowCss; }
+}, [1, "calcite-table-row", {
+    "disabled": [516],
+    "selected": [516],
+    "cellCount": [1026, "cell-count"],
+    "rowType": [1, "row-type"],
+    "numbered": [4],
+    "positionSection": [2, "position-section"],
+    "positionSectionLocalized": [1, "position-section-localized"],
+    "positionAll": [2, "position-all"],
+    "readCellContentsToAT": [4, "read-cell-contents-to-a-t"],
+    "scale": [1],
+    "selectionMode": [1, "selection-mode"],
+    "selectedRowCount": [2, "selected-row-count"],
+    "selectedRowCountLocalized": [1, "selected-row-count-localized"],
+    "bodyRowCount": [2, "body-row-count"],
+    "effectiveLocale": [32]
+  }, [[4, "calciteInternalTableRowFocusChange", "calciteInternalTableRowFocusChangeHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["calcite-table-row", "calcite-icon", "calcite-table-cell", "calcite-table-header"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-table-row":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TableRow);
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "calcite-table-cell":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "calcite-table-header":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const CalciteTableRow = TableRow;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteTableRow, defineCustomElement };