@esri/solutions-components 0.2.6 → 0.2.7

package/dist/components/calcite-combobox-item-group.js

@@ -0,0 +1,75 @@
+/*!
+ * 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 { g as getAncestors, a as getDepth } from './utils2.js';
+import { g as guid } from './guid.js';
+import { g as getElementProp } from './dom.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 = {
+  list: "list",
+  label: "label",
+  title: "title"
+};
+
+const comboboxItemGroupCss = "@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}.scale--s{font-size:var(--calcite-font-size--2);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-item-spacing-indent-1:0.5rem;--calcite-combobox-item-spacing-indent-2:1rem}.scale--m{font-size:var(--calcite-font-size--1);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-item-spacing-indent-1:0.75rem;--calcite-combobox-item-spacing-indent-2:1.5rem}.scale--l{font-size:var(--calcite-font-size-0);line-height:1.25rem;--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.75rem;--calcite-combobox-item-spacing-indent-1:1rem;--calcite-combobox-item-spacing-indent-2:2rem}:host,.list{margin:0px;display:flex;flex-direction:column;padding:0px}:host(:focus),.list:focus{outline:2px solid transparent;outline-offset:2px}.label{box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:0px;max-inline-size:100%;color:var(--calcite-ui-text-3)}.label--indent-1{-webkit-padding-start:var(--calcite-combobox-item-spacing-indent-1);padding-inline-start:var(--calcite-combobox-item-spacing-indent-1)}.label--indent-2{-webkit-padding-start:var(--calcite-combobox-item-spacing-indent-2);padding-inline-start:var(--calcite-combobox-item-spacing-indent-2)}.title{border:0 solid;display:block;flex:1 1 0%;border-block-end-width:1px;font-weight:var(--calcite-font-weight-bold);color:var(--calcite-ui-text-2);word-wrap:break-word;word-break:break-word;border-block-end-color:var(--calcite-ui-border-3);padding-block:var(--calcite-combobox-item-spacing-unit-l);padding-inline:0;margin-inline:var(--calcite-combobox-item-spacing-unit-s)}";
+
+const ComboboxItemGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.guid = guid();
+    this.scale = "m";
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    this.ancestors = getAncestors(this.el);
+    this.scale = getElementProp(this.el, "scale", this.scale);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { el, scale } = this;
+    const indent = `${CSS.label}--indent-${getDepth(el)}`;
+    return (h("ul", { "aria-labelledby": this.guid, class: { [CSS.list]: true, [`scale--${scale}`]: true }, role: "group" }, h("li", { class: { [CSS.label]: true, [indent]: true }, id: this.guid, role: "presentation" }, h("span", { class: CSS.title }, this.label)), h("slot", null)));
+  }
+  get el() { return this; }
+  static get style() { return comboboxItemGroupCss; }
+}, [1, "calcite-combobox-item-group", {
+    "ancestors": [1040],
+    "label": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["calcite-combobox-item-group"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-combobox-item-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ComboboxItemGroup);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const CalciteComboboxItemGroup = ComboboxItemGroup;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteComboboxItemGroup, defineCustomElement };

package/dist/components/calcite-combobox-item.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 { C as ComboboxItem, d as defineCustomElement$1 } from './combobox-item.js';
+
+const CalciteComboboxItem = ComboboxItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteComboboxItem, defineCustomElement };

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

package/dist/components/calcite-date-picker-day.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 { D as DatePickerDay, d as defineCustomElement$1 } from './date-picker-day.js';
+
+const CalciteDatePickerDay = DatePickerDay;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteDatePickerDay, defineCustomElement };

package/dist/components/calcite-date-picker-month-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 { D as DatePickerMonthHeader, d as defineCustomElement$1 } from './date-picker-month-header.js';
+
+const CalciteDatePickerMonthHeader = DatePickerMonthHeader;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteDatePickerMonthHeader, defineCustomElement };

package/dist/components/calcite-date-picker-month.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 { D as DatePickerMonth, d as defineCustomElement$1 } from './date-picker-month.js';
+
+const CalciteDatePickerMonth = DatePickerMonth;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteDatePickerMonth, defineCustomElement };

package/dist/components/calcite-date-picker.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 { D as DatePicker, d as defineCustomElement$1 } from './date-picker.js';
+
+const CalciteDatePicker = DatePicker;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteDatePicker, defineCustomElement };

package/dist/components/calcite-dropdown-group.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 { D as DropdownGroup, d as defineCustomElement$1 } from './dropdown-group.js';
+
+const CalciteDropdownGroup = DropdownGroup;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteDropdownGroup, defineCustomElement };

package/dist/components/calcite-dropdown-item.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 { D as DropdownItem, d as defineCustomElement$1 } from './dropdown-item.js';
+
+const CalciteDropdownItem = DropdownItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteDropdownItem, defineCustomElement };

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

package/dist/components/calcite-fab.js

@@ -0,0 +1,144 @@
+/*!
+ * 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 { f as focusElement } from './dom.js';
+import { u as updateHostInteraction } from './interactive.js';
+import { d as defineCustomElement$4 } from './button.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './loader.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 = {
+  button: "button"
+};
+const ICONS = {
+  plus: "plus"
+};
+
+const fabCss = "@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;background-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}calcite-button{--tw-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}calcite-button:hover{--tw-shadow:0 12px 32px -2px rgba(0, 0, 0, 0.1), 0 4px 20px 0 rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 12px 32px -2px var(--tw-shadow-color), 0 4px 20px 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)}calcite-button:active{--tw-shadow:0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);--tw-shadow-colored:0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}";
+
+const Fab = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    // --------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    // --------------------------------------------------------------------------
+    /**
+     * Used to set the button's appearance. Default is outline.
+     */
+    this.appearance = "outline";
+    /**
+     * Used to set the button's color. Default is light.
+     */
+    this.color = "neutral";
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * Specifies an icon to display.
+     *
+     * @default "plus"
+     */
+    this.icon = ICONS.plus;
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    /**
+     * Specifies the size of the fab.
+     */
+    this.scale = "m";
+    /**
+     * Indicates whether the text is displayed.
+     */
+    this.textEnabled = false;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Methods
+  //
+  // --------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    focusElement(this.buttonEl);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { appearance, color, disabled, loading, scale, textEnabled, icon, label, text } = this;
+    const title = !textEnabled ? label || text || null : null;
+    return (h("calcite-button", { appearance: appearance === "solid" ? "solid" : "outline", class: CSS.button, color: color, disabled: disabled, iconStart: icon, label: label, loading: loading, ref: (buttonEl) => {
+        this.buttonEl = buttonEl;
+      }, round: true, scale: scale, title: title, type: "button", width: "auto" }, this.textEnabled ? this.text : null));
+  }
+  get el() { return this; }
+  static get style() { return fabCss; }
+}, [1, "calcite-fab", {
+    "appearance": [513],
+    "color": [513],
+    "disabled": [516],
+    "icon": [513],
+    "label": [1],
+    "loading": [516],
+    "scale": [513],
+    "text": [1],
+    "textEnabled": [516, "text-enabled"],
+    "setFocus": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["calcite-fab", "calcite-button", "calcite-icon", "calcite-loader"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-fab":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Fab);
+      }
+      break;
+    case "calcite-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "calcite-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const CalciteFab = Fab;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteFab, defineCustomElement };

package/dist/components/calcite-filter.js

@@ -0,0 +1,195 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
+import { f as focusElement } from './dom.js';
+import { u as updateHostInteraction } from './interactive.js';
+import { f as filter } from './filter.js';
+import { d as defineCustomElement$4 } from './icon.js';
+import { d as defineCustomElement$3 } from './input.js';
+import { d as defineCustomElement$2 } from './progress.js';
+import { d as debounce } from './debounce.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 = {
+  container: "container",
+  searchIcon: "search-icon"
+};
+const TEXT = {
+  filterLabel: "Filter",
+  clear: "Clear filter"
+};
+const ICONS = {
+  search: "search",
+  close: "x"
+};
+const DEBOUNCE_TIMEOUT = 250;
+
+const filterCss = "@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}}:host{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}: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;inline-size:100%}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{display:flex;inline-size:100%;padding:0.5rem}label{position:relative;margin-inline:0.25rem;margin-block:0px;display:flex;inline-size:100%;align-items:center;overflow:hidden}input[type=text]{-webkit-margin-after:0.25rem;margin-block-end:0.25rem;inline-size:100%;border-style:none;background-color:transparent;padding-block:0.25rem;font-family:inherit;font-size:var(--calcite-font-size--2);line-height:1rem;color:var(--calcite-ui-text-1);-webkit-padding-end:0.25rem;padding-inline-end:0.25rem;-webkit-padding-start:1.5rem;padding-inline-start:1.5rem;transition:padding var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing)}input[type=text]::-ms-clear{display:none}calcite-input{inline-size:100%}.search-icon{position:absolute;display:flex;color:var(--calcite-ui-text-2);inset-inline-start:0;transition:inset-inline-start var(--calcite-animation-timing), inset-inline-end var(--calcite-animation-timing), opacity var(--calcite-animation-timing)}input[type=text]:focus{border-color:var(--calcite-ui-brand);outline:2px solid transparent;outline-offset:2px;padding-inline:0.25rem}input[type=text]:focus~.search-icon{inset-inline-start:calc(1rem * -1);opacity:0}.clear-button{display:flex;cursor:pointer;align-items:center;border-width:0px;background-color:transparent;color:var(--calcite-ui-text-2)}.clear-button:hover,.clear-button:focus{color:var(--calcite-ui-text-1)}";
+
+const Filter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calciteFilterChange = createEvent(this, "calciteFilterChange", 6);
+    // --------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    // --------------------------------------------------------------------------
+    /**
+     * The items to filter through. The filter uses this as the starting point, and returns items
+     * that contain the string entered in the input, using a partial match and recursive search.
+     *
+     * This property is required.
+     */
+    this.items = [];
+    /**
+     * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     */
+    this.disabled = false;
+    /**
+     * The resulting items after filtering.
+     *
+     * @readonly
+     */
+    this.filteredItems = [];
+    /** specify the scale of filter, defaults to m */
+    this.scale = "m";
+    /**
+     * Filter value.
+     */
+    this.value = "";
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.filter = debounce((value, emit = false) => this.updateFiltered(filter(this.items, value), emit), DEBOUNCE_TIMEOUT);
+    this.inputHandler = (event) => {
+      const target = event.target;
+      this.value = target.value;
+      this.filter(target.value, true);
+    };
+    this.keyDownHandler = (event) => {
+      if (event.key === "Escape") {
+        this.clear();
+        event.preventDefault();
+      }
+      if (event.key === "Enter") {
+        event.preventDefault();
+      }
+    };
+    this.clear = () => {
+      this.value = "";
+      this.filter("", true);
+      this.setFocus();
+    };
+  }
+  watchItemsHandler() {
+    this.filter(this.value);
+  }
+  valueHandler(value) {
+    this.filter(value);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  componentWillLoad() {
+    this.filter(this.value);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    focusElement(this.textInput);
+  }
+  updateFiltered(filtered, emit = false) {
+    this.filteredItems.length = 0;
+    this.filteredItems = this.filteredItems.concat(filtered);
+    if (emit) {
+      this.calciteFilterChange.emit();
+    }
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { disabled, scale } = this;
+    return (h(Fragment, null, h("div", { class: CSS.container }, h("label", null, h("calcite-input", { "aria-label": this.intlLabel || TEXT.filterLabel, clearable: true, disabled: disabled, icon: ICONS.search, intlClear: this.intlClear || TEXT.clear, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, ref: (el) => {
+        this.textInput = el;
+      }, scale: scale, type: "text", value: this.value })))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "items": ["watchItemsHandler"],
+    "value": ["valueHandler"]
+  }; }
+  static get style() { return filterCss; }
+}, [1, "calcite-filter", {
+    "items": [1040],
+    "disabled": [516],
+    "filteredItems": [1040],
+    "intlClear": [1, "intl-clear"],
+    "intlLabel": [1, "intl-label"],
+    "placeholder": [1],
+    "scale": [513],
+    "value": [1025],
+    "setFocus": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["calcite-filter", "calcite-icon", "calcite-input", "calcite-progress"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-filter":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Filter);
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "calcite-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "calcite-progress":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const CalciteFilter = Filter;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteFilter, defineCustomElement };