@esri/solutions-components 0.2.6 → 0.2.7

package/dist/components/layer-table.js

@@ -0,0 +1,453 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as getLocaleComponentStrings } from './locale.js';
+import { a as goToSelection, b as getMapLayerView } from './mapViewUtils.js';
+import { q as queryAllFeatures } from './queryUtils.js';
+import { e as exportCSV } from './csvUtils.js';
+import { d as defineCustomElement$l } from './button.js';
+import { d as defineCustomElement$k } from './checkbox.js';
+import { d as defineCustomElement$j } from './chip.js';
+import { d as defineCustomElement$i } from './combobox.js';
+import { d as defineCustomElement$h } from './combobox-item.js';
+import { d as defineCustomElement$g } from './dropdown.js';
+import { d as defineCustomElement$f } from './dropdown-group.js';
+import { d as defineCustomElement$e } from './dropdown-item.js';
+import { d as defineCustomElement$d } from './icon.js';
+import { d as defineCustomElement$c } from './input.js';
+import { d as defineCustomElement$b } from './label.js';
+import { d as defineCustomElement$a } from './loader.js';
+import { d as defineCustomElement$9 } from './modal.js';
+import { d as defineCustomElement$8 } from './option.js';
+import { d as defineCustomElement$7 } from './progress.js';
+import { d as defineCustomElement$6 } from './scrim.js';
+import { d as defineCustomElement$5 } from './select.js';
+import { d as defineCustomElement$4 } from './split-button.js';
+import { d as defineCustomElement$3 } from './edit-record-modal2.js';
+import { d as defineCustomElement$2 } from './map-layer-picker2.js';
+
+const layerTableCss = ":host{display:block}.table{display:table;width:100%}.header{display:table-header-group;background-color:#757575;font-weight:500;font-size:var(--calcite-font-size-0);color:var(--calcite-ui-text-inverse);position:sticky;top:0;z-index:1}.table-header-cell{display:table-cell;text-align:justify;border-right:1px solid var(--calcite-ui-border-2);padding:0.5rem}.table-body{display:table-row-group}.row{display:table-row}.table-cell{display:table-cell;padding:0.5rem}.display-table-header{display:table-header-group}.display-flex{display:flex}.table-border{border:1px solid var(--calcite-ui-border-2)}.justify-center{justify-content:center}.table-container{width:100%}.overflow-auto{overflow:auto}.data-container{overflow:auto;height:calc(100% - 35px)}.row:nth-child(odd){background:var(--calcite-ui-foreground-3)}.padding-3-4{padding:0.75rem}.field-width{white-space:nowrap;min-width:300px;max-width:300px;overflow:hidden}";
+
+const LayerTable$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * esri/Graphic[]: https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html
+     */
+    this._graphics = [];
+    /**
+     * string[]: List of field names to display
+     */
+    this._fieldNames = [];
+    this.mapView = undefined;
+    this._translations = undefined;
+    this._selectedIndexes = [];
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Methods (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Events (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (lifecycle)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * StencilJS: Called once just after the component is first connected to the DOM.
+   *
+   * @returns Promise when complete
+   */
+  async componentWillLoad() {
+    await this._getTranslations();
+  }
+  /**
+   * Renders the component.
+   */
+  render() {
+    return (h(Host, null, this._getTableControlRow(), h("div", { class: "data-container" }, h("div", { class: "table-container" }, h("div", { class: "table" }, this._getTableHeader(), this._getTableRows()))), h("edit-record-modal", { ref: (el) => this._editMultipleMpdal = el })));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (protected)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Gets a row of controls that can be used for various interactions with the table
+   *
+   * @returns The dom node that contains the controls
+   */
+  _getTableControlRow() {
+    const featuresSelected = this._selectedIndexes.length > 0;
+    const multiFeaturesSelected = this._selectedIndexes.length > 1;
+    return (h("div", { class: "display-flex table-border" }, h("map-layer-picker", { mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt) }), h("div", null, h("calcite-button", { appearance: 'transparent', color: 'neutral', disabled: !featuresSelected, iconStart: 'magnifying-glass', onClick: () => this._zoom() }, this._translations.zoom), h("calcite-button", { appearance: 'transparent', color: 'neutral', disabled: !multiFeaturesSelected, iconStart: 'pencil', onClick: () => this._editMultiple() }, this._translations.editMultiple), h("calcite-button", { appearance: 'transparent', color: 'neutral', disabled: !featuresSelected, iconStart: 'trash', onClick: () => this._delete() }, this._translations.delete), h("calcite-split-button", { appearance: "transparent", color: "neutral", "primary-text": this._translations.more }, h("calcite-dropdown-group", { "selection-mode": "none" }, h("calcite-dropdown-item", { iconStart: 'list-check-all', onClick: () => this._selectAll(true) }, this._translations.selectAll), h("calcite-dropdown-item", { iconStart: 'selected-items-filter', onClick: () => this._showSelected() }, this._translations.showSelected), h("calcite-dropdown-item", { iconStart: 'erase', onClick: () => this._clearSelection() }, this._translations.clearSelection), h("calcite-dropdown-item", { iconStart: 'refresh', onClick: () => this._switchSelected() }, this._translations.switchSelected), h("calcite-dropdown-item", { iconStart: 'export', onClick: () => this._exportToCSV() }, this._translations.exportCSV))))));
+  }
+  /**
+   * Gets the table header with a select all control and column headers for each field
+   *
+   * @returns The dom node that contains the header
+   */
+  _getTableHeader() {
+    return (h("div", { class: "header" }, h("div", { class: "table-header-cell padding-3-4" }, h("calcite-checkbox", { class: "display-flex justify-center", onClick: () => this._selectAll(this._selectAllElement.checked), ref: (el) => this._selectAllElement = el })), this._fieldNames.map(name => this._getTableHeaderCell(name))));
+  }
+  /**
+   * Gets a header cell for the table header
+   *
+   * @param name the string to display in the cell
+   *
+   * @returns The dom node that contains the header cell
+   */
+  _getTableHeaderCell(name) {
+    return (h("div", { class: "table-header-cell field-width" }, name));
+  }
+  /**
+   * Gets the table rows for all features
+   *
+   * @returns The dom node that contains the body of the table
+   */
+  _getTableRows() {
+    return (h("div", { class: "table-body" }, this._graphics.map((g, i) => this._getTableRow(g, i))));
+  }
+  /**
+   * Gets the individual table row for a feature
+   *
+   * @param g the graphic the row is based on
+   * @param index the index location of the row within the table
+   *
+   * @returns The dom node that contains the row
+   */
+  _getTableRow(g, index) {
+    // TODO think through this more...should build the fieldType info once up front rather
+    // than on every single value...
+    const checked = this._selectedIndexes.indexOf(index) > -1;
+    return (h("div", { class: "row" }, h("div", { class: "table-cell table-border padding-3-4" }, h("calcite-checkbox", { checked: checked, class: "display-flex justify-center", onClick: () => this._rowSelected(index), value: index })), this._fieldNames.map(name => {
+      const field = this._layerView.layer.fieldsIndex.get(name);
+      return this._getTableRowCell(g.attributes[name], field, checked);
+    })));
+  }
+  /**
+   * Gets the individual table cell for the provided field
+   *
+   * @param v the value to display
+   * @param field the field the row is based on
+   * @param rowSelected when true editable fields will render a control that will allow the value to be updated
+   *
+   * @returns The dom node that contains the table cell
+   */
+  _getTableRowCell(v, field, rowSelected) {
+    const editable = field.editable && rowSelected;
+    const inputType = this._getInputType(field.type);
+    // TODO find some domain data to test with..this has not been tested
+    let domainInput;
+    const domain = field.domain;
+    if (domain) {
+      if (domain.type === "coded-value") {
+        domainInput = (h("calcite-select", { label: '' }, domain.codedValues.map(cv => {
+          return (h("calcite-option", { label: cv.name, selected: v === cv.code.toString(), value: cv.code }));
+        })));
+      }
+      else {
+        // range domain
+        const range = domain;
+        domainInput = (h("calcite-input", { max: range.maxValue, min: range.minValue, type: "number", value: v }));
+      }
+    }
+    return (h("div", { class: "table-cell table-border field-width" }, editable && domainInput ? domainInput : editable ? (h("calcite-input", { type: inputType, value: v })) : v));
+  }
+  /**
+   * Simple lookup that will get the appropriate edit control for the value type
+   *
+   * @param type the Esri field type
+   *
+   * @returns A string for the type of control to create based on the provided field type
+   */
+  _getInputType(type) {
+    // JS API field types
+    // "string" | "small-integer" | "integer" | "single" | "double" | "long" | "date" | "oid" | "geometry" | "blob" | "raster" | "guid" | "global-id" | "xml"
+    // not sure about these: "geometry" | "blob" | "raster" |  | "xml"
+    // Calcite input types
+    // color date datetime-local email file image month number password search tel text(default) textarea time url week
+    const inputTypes = {
+      "string": 'text',
+      "small-integer": "number",
+      "integer": "number",
+      "single": "number",
+      "double": "number",
+      "long": "number",
+      "date": "datetime-local",
+      "oid": "number",
+      "guid": "text",
+      "global-id": "text"
+    };
+    return Object.keys(inputTypes).indexOf(type) > -1 ? inputTypes[type] : "text";
+  }
+  /**
+   * Select or deselect all rows
+   *
+   * @param checked When true all rows will be selected
+   *
+   * @returns void
+   */
+  _selectAll(checked) {
+    this._selectedIndexes = checked ? this._graphics.map((_g, i) => i) : [];
+  }
+  // need to discuss with team
+  _showSelected() {
+    console.log("_showSelected");
+  }
+  /**
+   * Clears the selected indexes
+   *
+   * @returns void
+   */
+  _clearSelection() {
+    this._selectedIndexes = [];
+  }
+  /**
+   * Select all rows that are not currently selectd
+   *
+   * @returns void
+   */
+  _switchSelected() {
+    const currentIndexes = [...this._selectedIndexes];
+    this._selectedIndexes = this._graphics.reduce((prev, _cur, i) => {
+      if (currentIndexes.indexOf(i) < 0) {
+        prev.push(i);
+      }
+      return prev;
+    }, []);
+  }
+  /**
+   * Export all selected rows as CSV
+   *
+   * @returns a promise that will resolve when the operation is complete
+   */
+  _exportToCSV() {
+    const ids = this._getSelectedIds();
+    void exportCSV(this._layerView, ids);
+  }
+  /**
+   * Zoom to all selected features
+   *
+   * @returns a promise that will resolve when the operation is complete
+   */
+  _zoom() {
+    const ids = this._getSelectedIds();
+    void goToSelection(ids, this._layerView, this.mapView, true);
+  }
+  /**
+   * Open the edit multiple modal
+   *
+   * @returns void
+   */
+  _editMultiple() {
+    this._editMultipleMpdal.open = true;
+  }
+  /**
+   * Delete all selected records
+   *
+   * @returns a promise that will resolve when the operation is complete
+   */
+  _delete() {
+    console.log("delete");
+  }
+  /**
+   * Get the graphics for all selected indexes
+   *
+   * @param indexes the indexes for the graphics to fetch
+   *
+   * @returns An array of selected graphics
+   */
+  _getGraphics(indexes) {
+    return this._graphics.filter((_g, i) => indexes.indexOf(i) > -1);
+  }
+  /**
+   * Gets the object ids for all selected rows
+   *
+   * @returns An array of object ids
+   */
+  _getSelectedIds() {
+    const graphics = this._getGraphics(this._selectedIndexes);
+    return graphics.map(g => g.getObjectId());
+  }
+  /**
+   * Update the selected indexes based on the current row
+   *
+   * @param index the index of the selected row
+   *
+   * @returns void
+   */
+  _rowSelected(index) {
+    const indexOfSelected = this._selectedIndexes.indexOf(index);
+    if (indexOfSelected > -1) {
+      this._selectedIndexes.splice(indexOfSelected, 1);
+      this._selectedIndexes = [...this._selectedIndexes];
+    }
+    else {
+      this._selectedIndexes = [...this._selectedIndexes, index];
+    }
+  }
+  /**
+   * Handles layer selection change to show new table
+   *
+   * @returns a promise that will resolve when the operation is complete
+   */
+  async _layerSelectionChanged(evt) {
+    const layerName = evt.detail[0];
+    this._layerView = await getMapLayerView(this.mapView, layerName);
+    // TODO rethink this...when we use later we need to be able to lookup with name
+    this._fieldNames = this._layerView.layer.fields.map(f => f.alias || f.name);
+    this._graphics = await queryAllFeatures(0, this._layerView.layer, []);
+    this._selectedIndexes = [];
+  }
+  /**
+   * Fetches the component's translations
+   *
+   * @returns Promise when complete
+   * @protected
+   */
+  async _getTranslations() {
+    const messages = await getLocaleComponentStrings(this.el);
+    this._translations = messages[0];
+  }
+  get el() { return this; }
+  static get style() { return layerTableCss; }
+}, [1, "layer-table", {
+    "mapView": [16],
+    "_translations": [32],
+    "_selectedIndexes": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["layer-table", "calcite-button", "calcite-checkbox", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-dropdown", "calcite-dropdown-group", "calcite-dropdown-item", "calcite-icon", "calcite-input", "calcite-label", "calcite-loader", "calcite-modal", "calcite-option", "calcite-progress", "calcite-scrim", "calcite-select", "calcite-split-button", "edit-record-modal", "map-layer-picker"];
+  components.forEach(tagName => { switch (tagName) {
+    case "layer-table":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, LayerTable$1);
+      }
+      break;
+    case "calcite-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$l();
+      }
+      break;
+    case "calcite-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$k();
+      }
+      break;
+    case "calcite-chip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$j();
+      }
+      break;
+    case "calcite-combobox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$i();
+      }
+      break;
+    case "calcite-combobox-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$h();
+      }
+      break;
+    case "calcite-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
+      }
+      break;
+    case "calcite-dropdown-group":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$f();
+      }
+      break;
+    case "calcite-dropdown-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "calcite-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "calcite-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "calcite-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "calcite-modal":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "calcite-option":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "calcite-progress":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "calcite-scrim":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "calcite-select":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "calcite-split-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "edit-record-modal":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "map-layer-picker":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const LayerTable = LayerTable$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LayerTable, defineCustomElement };

package/dist/components/link.js

@@ -0,0 +1,123 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as getElementDir, C as CSS_UTILITY, f as focusElement } from './dom.js';
+import { u as updateHostInteraction } from './interactive.js';
+import { d as defineCustomElement$1 } from './icon.js';
+
+const linkCss = "@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-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-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)}:host([hidden]){display:none}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{display:inline}:host a,:host span{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:0px;border-style:none;font-family:inherit;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;text-decoration:none;line-height:inherit;font-size:inherit;-webkit-appearance:none}:host a:hover,:host span:hover{text-decoration:none}:host a,:host span{outline-color:transparent}:host a:focus,:host span:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}calcite-icon{inline-size:1em;block-size:1em;min-inline-size:unset;min-block-size:unset}.calcite-link--icon{vertical-align:text-top;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;-webkit-margin-before:0.125rem;margin-block-start:0.125rem}:host .calcite-link--icon.icon-start{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}:host .calcite-link--icon.icon-end{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}:host span,:host a{position:relative;display:inline;border-style:none;background-color:transparent;padding:0px;color:var(--calcite-ui-text-link);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;line-height:inherit;white-space:initial;background-image:linear-gradient(currentColor, currentColor), linear-gradient(var(--calcite-link-blue-underline), var(--calcite-link-blue-underline));background-position:0% 100%, 100% 100%;background-repeat:no-repeat, no-repeat;background-size:0% 1px, 100% 1px}:host span:hover,:host span:focus,:host a:hover,:host a:focus{background-size:100% 1px, 100% 1px}:host span:active,:host a:active{background-size:100% 2px, 100% 2px}:host span.calcite--rtl,:host a.calcite--rtl{background-position:100% 100%, 100% 100%}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}";
+
+const Link = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
+    this.disabled = false;
+    /**
+     * Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:
+     * Without a value, the browser will suggest a filename/extension
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download.
+     */
+    this.download = false;
+    this.childElClickHandler = (event) => {
+      if (!event.isTrusted) {
+        // click was invoked internally, we stop it here
+        event.stopPropagation();
+      }
+    };
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.storeTagRef = (el) => {
+      this.childEl = el;
+    };
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
+  render() {
+    const { download, el } = this;
+    const dir = getElementDir(el);
+    const childElType = this.href ? "a" : "span";
+    const iconStartEl = (h("calcite-icon", { class: "calcite-link--icon icon-start", flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
+    const iconEndEl = (h("calcite-icon", { class: "calcite-link--icon icon-end", flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
+    const Tag = childElType;
+    const role = childElType === "span" ? "link" : null;
+    const tabIndex = childElType === "span" ? 0 : null;
+    return (h(Host, { role: "presentation" }, h(Tag, { class: { [CSS_UTILITY.rtl]: dir === "rtl" },
+      /*
+      When the 'download' property of type 'boolean | string' is set to true, the value is "".
+      This works around that issue for now.
+      */
+      download: Tag === "a" && (download === "" || download) ? download : null, href: Tag === "a" && this.href, onClick: this.childElClickHandler, ref: this.storeTagRef, rel: Tag === "a" && this.rel, role: role, tabIndex: tabIndex, target: Tag === "a" && this.target }, this.iconStart ? iconStartEl : null, h("slot", null), this.iconEnd ? iconEndEl : null)));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Events
+  //
+  //--------------------------------------------------------------------------
+  clickHandler(event) {
+    // forwards the click() to the internal link for non user-initiated events
+    if (!event.isTrusted) {
+      this.childEl.click();
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    focusElement(this.childEl);
+  }
+  get el() { return this; }
+  static get style() { return linkCss; }
+}, [1, "calcite-link", {
+    "disabled": [516],
+    "download": [520],
+    "href": [513],
+    "iconEnd": [513, "icon-end"],
+    "iconFlipRtl": [513, "icon-flip-rtl"],
+    "iconStart": [513, "icon-start"],
+    "rel": [1],
+    "target": [1],
+    "setFocus": [64]
+  }, [[0, "click", "clickHandler"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["calcite-link", "calcite-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-link":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Link);
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { Link as L, defineCustomElement as d };

package/dist/components/list-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ListItem extends Components.ListItem, HTMLElement {}
+export const ListItem: {
+  prototype: ListItem;
+  new (): ListItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/list-item.js

@@ -0,0 +1,90 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const listItemCss = ":host{display:block}";
+
+const ListItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Properties (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  State (internal)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Properties (protected)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Methods (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Events (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (lifecycle)
+  //
+  //--------------------------------------------------------------------------
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (protected)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Fetches the component's translations
+   *
+   * @returns Promise when complete
+   * @protected
+   */
+  async _getTranslations() {
+    // const messages = await getLocaleComponentStrings(this.el);
+    // this._translations = messages[0] as typeof BufferTools_T9n;
+  }
+  get el() { return this; }
+  static get style() { return listItemCss; }
+}, [1, "list-item"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["list-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "list-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ListItem$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const ListItem = ListItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ListItem, defineCustomElement };