@esri/solutions-components 0.2.6 → 0.2.7

package/dist/components/calcite-stepper.js

@@ -0,0 +1,256 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { f as focusElement } from './dom.js';
+
+const stepperCss = "@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{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\"}";
+
+const Stepper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calciteStepperItemChange = createEvent(this, "calciteStepperItemChange", 6);
+    this.calciteInternalStepperItemChange = createEvent(this, "calciteInternalStepperItemChange", 6);
+    //--------------------------------------------------------------------------
+    //
+    //  Public Properties
+    //
+    //--------------------------------------------------------------------------
+    /** When `true`, displays a status icon in the `calcite-stepper-item` heading. */
+    this.icon = false;
+    /** Defines the layout of the component. */
+    this.layout = "horizontal";
+    /** When `true`, displays the step number in the `calcite-stepper-item` heading. */
+    this.numbered = false;
+    /** Specifies the size of the component. */
+    this.scale = "m";
+    //--------------------------------------------------------------------------
+    //
+    //  Private State/Props
+    //
+    //--------------------------------------------------------------------------
+    this.itemMap = new Map();
+    /** list of sorted Stepper items */
+    this.items = [];
+    /** list of enabled Stepper items */
+    this.enabledItems = [];
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  componentDidLoad() {
+    // if no stepper items are set as active, default to the first one
+    if (typeof this.currentPosition !== "number") {
+      this.calciteInternalStepperItemChange.emit({
+        position: 0
+      });
+    }
+  }
+  render() {
+    return (h("slot", { onSlotchange: (event) => {
+        const items = event.currentTarget
+          .assignedElements()
+          .filter((el) => (el === null || el === void 0 ? void 0 : el.tagName) === "CALCITE-STEPPER-ITEM");
+        const spacing = Array(items.length).fill("1fr").join(" ");
+        this.el.style.gridTemplateAreas = spacing;
+        this.el.style.gridTemplateColumns = spacing;
+      } }));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  calciteInternalStepperItemKeyEvent(event) {
+    const item = event.detail.item;
+    const itemToFocus = event.target;
+    const isFirstItem = this.itemIndex(itemToFocus) === 0;
+    const isLastItem = this.itemIndex(itemToFocus) === this.enabledItems.length - 1;
+    switch (item.key) {
+      case "ArrowDown":
+      case "ArrowRight":
+        if (isLastItem) {
+          this.focusFirstItem();
+        }
+        else {
+          this.focusNextItem(itemToFocus);
+        }
+        break;
+      case "ArrowUp":
+      case "ArrowLeft":
+        if (isFirstItem) {
+          this.focusLastItem();
+        }
+        else {
+          this.focusPrevItem(itemToFocus);
+        }
+        break;
+      case "Home":
+        this.focusFirstItem();
+        break;
+      case "End":
+        this.focusLastItem();
+        break;
+    }
+    event.stopPropagation();
+  }
+  registerItem(event) {
+    const item = event.target;
+    const { content, position } = event.detail;
+    this.itemMap.set(item, { position, content });
+    this.items = this.sortItems();
+    this.enabledItems = this.filterItems();
+    event.stopPropagation();
+  }
+  updateItem(event) {
+    const { position } = event.detail;
+    if (typeof position === "number") {
+      this.currentPosition = position;
+    }
+    this.calciteInternalStepperItemChange.emit({
+      position
+    });
+  }
+  handleUserRequestedStepperItemSelect(event) {
+    const { position } = event.detail;
+    this.calciteStepperItemChange.emit({
+      position
+    });
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  /** Set the next `calcite-stepper-item` as active. */
+  async nextStep() {
+    const enabledStepIndex = this.getEnabledStepIndex(this.currentPosition + 1, "next");
+    if (typeof enabledStepIndex !== "number") {
+      return;
+    }
+    this.updateStep(enabledStepIndex);
+  }
+  /** Set the previous `calcite-stepper-item` as active. */
+  async prevStep() {
+    const enabledStepIndex = this.getEnabledStepIndex(this.currentPosition - 1, "previous");
+    if (typeof enabledStepIndex !== "number") {
+      return;
+    }
+    this.updateStep(enabledStepIndex);
+  }
+  /**
+   * Set a specified `calcite-stepper-item` as active.
+   *
+   * @param step
+   */
+  async goToStep(step) {
+    const position = step - 1;
+    if (this.currentPosition !== position) {
+      this.updateStep(position);
+    }
+  }
+  /** Set the first `calcite-stepper-item` as active. */
+  async startStep() {
+    const enabledStepIndex = this.getEnabledStepIndex(0, "next");
+    if (typeof enabledStepIndex !== "number") {
+      return;
+    }
+    this.updateStep(enabledStepIndex);
+  }
+  /** Set the last `calcite-stepper-item` as active. */
+  async endStep() {
+    const enabledStepIndex = this.getEnabledStepIndex(this.items.length - 1, "previous");
+    if (typeof enabledStepIndex !== "number") {
+      return;
+    }
+    this.updateStep(enabledStepIndex);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  getEnabledStepIndex(startIndex, direction = "next") {
+    var _a;
+    const { items, currentPosition } = this;
+    let newIndex = startIndex;
+    while ((_a = items[newIndex]) === null || _a === void 0 ? void 0 : _a.disabled) {
+      newIndex = newIndex + (direction === "previous" ? -1 : 1);
+    }
+    return newIndex !== currentPosition && newIndex < items.length && newIndex >= 0
+      ? newIndex
+      : null;
+  }
+  updateStep(position) {
+    this.currentPosition = position;
+    this.calciteInternalStepperItemChange.emit({
+      position
+    });
+  }
+  focusFirstItem() {
+    const firstItem = this.enabledItems[0];
+    focusElement(firstItem);
+  }
+  focusLastItem() {
+    const lastItem = this.enabledItems[this.enabledItems.length - 1];
+    focusElement(lastItem);
+  }
+  focusNextItem(el) {
+    const index = this.itemIndex(el);
+    const nextItem = this.enabledItems[index + 1] || this.enabledItems[0];
+    focusElement(nextItem);
+  }
+  focusPrevItem(el) {
+    const index = this.itemIndex(el);
+    const prevItem = this.enabledItems[index - 1] || this.enabledItems[this.enabledItems.length - 1];
+    focusElement(prevItem);
+  }
+  itemIndex(el) {
+    return this.enabledItems.indexOf(el);
+  }
+  sortItems() {
+    const { itemMap } = this;
+    return Array.from(itemMap.keys()).sort((a, b) => itemMap.get(a).position - itemMap.get(b).position);
+  }
+  filterItems() {
+    return this.items.filter((item) => !item.disabled);
+  }
+  get el() { return this; }
+  static get style() { return stepperCss; }
+}, [1, "calcite-stepper", {
+    "icon": [516],
+    "layout": [513],
+    "numbered": [516],
+    "numberingSystem": [513, "numbering-system"],
+    "scale": [513],
+    "nextStep": [64],
+    "prevStep": [64],
+    "goToStep": [64],
+    "startStep": [64],
+    "endStep": [64]
+  }, [[0, "calciteInternalStepperItemKeyEvent", "calciteInternalStepperItemKeyEvent"], [0, "calciteInternalStepperItemRegister", "registerItem"], [0, "calciteInternalStepperItemSelect", "updateItem"], [0, "calciteInternalUserRequestedStepperItemSelect", "handleUserRequestedStepperItemSelect"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["calcite-stepper"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-stepper":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Stepper);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const CalciteStepper = Stepper;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteStepper, defineCustomElement };

package/dist/components/calcite-switch.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 { S as Switch, d as defineCustomElement$1 } from './switch.js';
+
+const CalciteSwitch = Switch;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteSwitch, defineCustomElement };

package/dist/components/calcite-tab-nav.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 TabNav, d as defineCustomElement$1 } from './tab-nav.js';
+
+const CalciteTabNav = TabNav;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteTabNav, defineCustomElement };

package/dist/components/calcite-tab-title.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 TabTitle, d as defineCustomElement$1 } from './tab-title.js';
+
+const CalciteTabTitle = TabTitle;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteTabTitle, defineCustomElement };

package/dist/components/calcite-tab.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 Tab, d as defineCustomElement$1 } from './tab.js';
+
+const CalciteTab = Tab;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteTab, defineCustomElement };

package/dist/components/calcite-tabs.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 Tabs, d as defineCustomElement$1 } from './tabs.js';
+
+const CalciteTabs = Tabs;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteTabs, defineCustomElement };

package/dist/components/calcite-tile-select-group.js

@@ -0,0 +1,65 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { u as updateHostInteraction } from './interactive.js';
+
+const tileSelectGroupCss = "@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:flex;flex-wrap:wrap}:host ::slotted(calcite-tile-select){-webkit-margin-after:1px;margin-block-end:1px;-webkit-margin-end:1px;margin-inline-end:1px}:host([layout=vertical]){flex-direction:column}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}";
+
+const TileSelectGroup = /*@__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;
+    /**
+     * Defines the layout of the component.
+     *
+     * Use `"horizontal"` for rows, and `"vertical"` for a single column.
+     */
+    this.layout = "horizontal";
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
+  render() {
+    return h("slot", null);
+  }
+  get el() { return this; }
+  static get style() { return tileSelectGroupCss; }
+}, [1, "calcite-tile-select-group", {
+    "disabled": [516],
+    "layout": [513]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["calcite-tile-select-group"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-tile-select-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TileSelectGroup);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const CalciteTileSelectGroup = TileSelectGroup;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteTileSelectGroup, defineCustomElement };

package/dist/components/calcite-tile-select.js

@@ -0,0 +1,266 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { g as guid } from './guid.js';
+import { u as updateHostInteraction } from './interactive.js';
+import { d as defineCustomElement$4 } from './icon.js';
+import { d as defineCustomElement$3 } from './link.js';
+import { d as defineCustomElement$2 } from './tile.js';
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.97
+ */
+const CSS = {
+  checked: "checked",
+  description: "description",
+  descriptionOnly: "description-only",
+  disabled: "disabled",
+  heading: "heading",
+  headingOnly: "heading-only",
+  icon: "icon",
+  iconOnly: "icon-only",
+  inputAlignmentEnd: "input-alignment-end",
+  inputAlignmentStart: "input-alignment-start",
+  inputEnabled: "input-enabled",
+  largeVisual: "large-visual",
+  widthAuto: "width-auto",
+  widthFull: "width-full"
+};
+
+const tileSelectCss = "@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:block}:host .container{background-color:var(--calcite-ui-foreground-1);box-shadow:0 0 0 1px var(--calcite-ui-border-2);box-sizing:border-box;cursor:pointer;display:inline-block;block-size:100%;max-inline-size:300px;padding:0.75rem;position:relative;vertical-align:top;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}:host .container.checked{z-index:1;box-shadow:0 0 0 1px var(--calcite-ui-brand)}:host .container.heading-only{align-items:center}:host .container:not(.input-enabled) ::slotted(calcite-checkbox),:host .container:not(.input-enabled) ::slotted(calcite-radio-button){position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:host .container.focused{outline-color:transparent}:host .container.focused:not(.disabled):not(.input-enabled){outline:2px solid var(--calcite-ui-brand);outline-offset:-4px;box-shadow:0 0 0 1px var(--calcite-ui-brand), inset 0 0 0 2px var(--calcite-ui-foreground-1)}:host .container.input-enabled.input-alignment-start.width-auto.heading-only,:host .container.input-enabled.input-alignment-start.width-auto.icon-only,:host .container.input-enabled.input-alignment-start.width-auto.description-only,:host .container.input-enabled.input-alignment-start.width-auto.heading.description,:host .container.input-enabled.input-alignment-start.width-auto.icon.description,:host .container.input-enabled.input-alignment-start.width-auto.heading.icon.description{display:inline-grid;grid-template-columns:max-content 1fr}:host .container.input-enabled.input-alignment-start.heading-only,:host .container.input-enabled.input-alignment-start.icon-only,:host .container.input-enabled.input-alignment-start.description-only,:host .container.input-enabled.input-alignment-start.heading.description,:host .container.input-enabled.input-alignment-start.icon.description,:host .container.input-enabled.input-alignment-start.heading.icon.description{gap:0.75rem}:host .container.input-enabled.input-alignment-start calcite-tile{order:1}:host .container.input-enabled.input-alignment-start.large-visual ::slotted(calcite-checkbox),:host .container.input-enabled.input-alignment-start.large-visual ::slotted(calcite-radio-button){position:absolute;inset-block-start:0.75rem;inset-inline-start:0.75rem}:host .container.input-enabled.input-alignment-end.width-auto.heading-only,:host .container.input-enabled.input-alignment-end.width-auto.icon-only{display:inline-grid;grid-gap:0.75rem;grid-template-columns:max-content 1fr}:host .container.input-enabled.input-alignment-end.heading-only,:host .container.input-enabled.input-alignment-end.icon-only{gap:0.75rem}:host .container.input-enabled.input-alignment-end.description-only ::slotted(calcite-checkbox),:host .container.input-enabled.input-alignment-end.description-only ::slotted(calcite-radio-button),:host .container.input-enabled.input-alignment-end.heading.description ::slotted(calcite-checkbox),:host .container.input-enabled.input-alignment-end.heading.description ::slotted(calcite-radio-button),:host .container.input-enabled.input-alignment-end.icon.description ::slotted(calcite-checkbox),:host .container.input-enabled.input-alignment-end.icon.description ::slotted(calcite-radio-button),:host .container.input-enabled.input-alignment-end.heading.icon.description ::slotted(calcite-checkbox),:host .container.input-enabled.input-alignment-end.heading.icon.description ::slotted(calcite-radio-button){position:absolute;inset-block-start:0.75rem;inset-inline-end:0.75rem}:host .container.input-enabled.input-alignment-end.large-visual ::slotted(calcite-checkbox),:host .container.input-enabled.input-alignment-end.large-visual ::slotted(calcite-radio-button){position:absolute;inset-block-start:0.75rem;inset-inline-end:0.75rem}:host .container.width-full{display:flex;max-inline-size:none}:host .container.width-full calcite-tile{flex:1 1 auto}:host(:hover) .container:not(.input-enabled){box-shadow:0 0 0 1px var(--calcite-ui-brand)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}";
+
+const TileSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calciteTileSelectChange = createEvent(this, "calciteTileSelectChange", 6);
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /** When `true`, the component is checked. */
+    this.checked = false;
+    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
+    this.disabled = false;
+    /** When `true`, the component is not displayed and is not focusable or checkable. */
+    this.hidden = false;
+    /** When `true`, displays an interactive input based on the `type` property. */
+    this.inputEnabled = false;
+    /** When `inputEnabled` is `true`, specifies the placement of the interactive input on the component. */
+    this.inputAlignment = "start";
+    /**
+     * The selection mode of the component.
+     *
+     * Use radio for single selection, and checkbox for multiple selections.
+     */
+    this.type = "radio";
+    /** Specifies the width of the component. */
+    this.width = "auto";
+    this.guid = `calcite-tile-select-${guid()}`;
+    //--------------------------------------------------------------------------
+    //
+    //  State
+    //
+    //--------------------------------------------------------------------------
+    /** The focused state of the tile-select. */
+    this.focused = false;
+  }
+  checkedChanged(newChecked) {
+    this.input.checked = newChecked;
+  }
+  nameChanged(newName) {
+    this.input.name = newName;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    var _a;
+    (_a = this.input) === null || _a === void 0 ? void 0 : _a.setFocus();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  checkboxChangeHandler(event) {
+    const checkbox = event.target;
+    if (checkbox === this.input) {
+      this.checked = checkbox.checked;
+    }
+    event.stopPropagation();
+    this.calciteTileSelectChange.emit();
+  }
+  checkboxFocusBlurHandler(event) {
+    const checkbox = event.target;
+    if (checkbox === this.input) {
+      this.focused = event.detail;
+    }
+    event.stopPropagation();
+  }
+  radioButtonChangeHandler(event) {
+    const radioButton = event.target;
+    if (radioButton === this.input) {
+      this.checked = radioButton.checked;
+    }
+    event.stopPropagation();
+    this.calciteTileSelectChange.emit();
+  }
+  radioButtonCheckedChangeHandler(event) {
+    const radioButton = event.target;
+    if (radioButton === this.input) {
+      this.checked = radioButton.checked;
+    }
+    event.stopPropagation();
+  }
+  radioButtonFocusBlurHandler(event) {
+    const radioButton = event.target;
+    if (radioButton === this.input) {
+      this.focused = radioButton.focused;
+    }
+    event.stopPropagation();
+  }
+  click(event) {
+    const target = event.target;
+    const targets = ["calcite-tile", "calcite-tile-select"];
+    if (targets.includes(target.localName)) {
+      this.input.click();
+    }
+  }
+  mouseenter() {
+    if (this.input.localName === "calcite-radio-button") {
+      this.input.hovered = true;
+    }
+    if (this.input.localName === "calcite-checkbox") {
+      this.input.hovered = true;
+    }
+  }
+  mouseleave() {
+    if (this.input.localName === "calcite-radio-button") {
+      this.input.hovered = false;
+    }
+    if (this.input.localName === "calcite-checkbox") {
+      this.input.hovered = false;
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    this.renderInput();
+  }
+  disconnectedCallback() {
+    this.input.parentNode.removeChild(this.input);
+  }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderInput() {
+    this.input = document.createElement(this.type === "radio" ? "calcite-radio-button" : "calcite-checkbox");
+    this.input.checked = this.checked;
+    this.input.disabled = this.disabled;
+    this.input.hidden = this.hidden;
+    this.input.id = this.guid;
+    this.input.label = this.heading || this.name || "";
+    if (this.name) {
+      this.input.name = this.name;
+    }
+    if (this.value) {
+      this.input.value = this.value != null ? this.value.toString() : "";
+    }
+    this.el.insertAdjacentElement("beforeend", this.input);
+  }
+  render() {
+    const { checked, description, disabled, focused, heading, icon, inputAlignment, inputEnabled, width } = this;
+    return (h("div", { class: {
+        checked,
+        container: true,
+        [CSS.description]: Boolean(description),
+        [CSS.descriptionOnly]: Boolean(!heading && !icon && description),
+        disabled,
+        focused,
+        [CSS.heading]: Boolean(heading),
+        [CSS.headingOnly]: heading && !icon && !description,
+        [CSS.icon]: Boolean(icon),
+        [CSS.iconOnly]: !heading && icon && !description,
+        [CSS.inputAlignmentEnd]: inputAlignment === "end",
+        [CSS.inputAlignmentStart]: inputAlignment === "start",
+        [CSS.inputEnabled]: inputEnabled,
+        [CSS.largeVisual]: heading && icon && !description,
+        [CSS.widthAuto]: width === "auto",
+        [CSS.widthFull]: width === "full"
+      } }, h("calcite-tile", { active: checked, description: description, embed: true, heading: heading, icon: icon }), h("slot", null)));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "checked": ["checkedChanged"],
+    "name": ["nameChanged"]
+  }; }
+  static get style() { return tileSelectCss; }
+}, [1, "calcite-tile-select", {
+    "checked": [1540],
+    "description": [513],
+    "disabled": [516],
+    "heading": [513],
+    "hidden": [516],
+    "icon": [513],
+    "name": [520],
+    "inputEnabled": [516, "input-enabled"],
+    "inputAlignment": [513, "input-alignment"],
+    "type": [513],
+    "value": [8],
+    "width": [513],
+    "focused": [32],
+    "setFocus": [64]
+  }, [[0, "calciteCheckboxChange", "checkboxChangeHandler"], [0, "calciteInternalCheckboxFocus", "checkboxFocusBlurHandler"], [0, "calciteInternalCheckboxBlur", "checkboxFocusBlurHandler"], [0, "calciteRadioButtonChange", "radioButtonChangeHandler"], [0, "calciteInternalRadioButtonCheckedChange", "radioButtonCheckedChangeHandler"], [0, "calciteInternalRadioButtonFocus", "radioButtonFocusBlurHandler"], [0, "calciteInternalRadioButtonBlur", "radioButtonFocusBlurHandler"], [0, "click", "click"], [1, "pointerenter", "mouseenter"], [1, "pointerleave", "mouseleave"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["calcite-tile-select", "calcite-icon", "calcite-link", "calcite-tile"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-tile-select":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TileSelect);
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "calcite-link":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "calcite-tile":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const CalciteTileSelect = TileSelect;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteTileSelect, defineCustomElement };

package/dist/components/calcite-tile.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 Tile, d as defineCustomElement$1 } from './tile.js';
+
+const CalciteTile = Tile;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteTile, defineCustomElement };