@esri/solutions-components 0.2.6 → 0.2.7

package/dist/components/card-manager.js

@@ -0,0 +1,143 @@
+/*!
+ * 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 { d as defineCustomElement$7 } from './button.js';
+import { d as defineCustomElement$6 } from './icon.js';
+import { d as defineCustomElement$5 } from './label.js';
+import { d as defineCustomElement$4 } from './loader.js';
+import { d as defineCustomElement$3 } from './info-card2.js';
+import { d as defineCustomElement$2 } from './media-card2.js';
+
+const cardManagerCss = ":host{display:block}.display-inline-table{display:inline-table}.display-flex{display:flex}.display-none{display:none}.w-100{width:100%}.w-1-2{width:50%}.padding-bottom-1{padding-bottom:1rem}";
+
+const CardManager$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this._translations = undefined;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Methods (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Events (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (lifecycle)
+  //
+  //--------------------------------------------------------------------------
+  async componentWillLoad() {
+    await this._getTranslations();
+    const href = window.location.href;
+    const url = href.substring(0, href.lastIndexOf('/'));
+    const img = `${url}/data/generic.png`;
+    this._fakeValues = [{
+        name: "Filename.png",
+        description: "This is an example of what a media description looks like.",
+        url: img
+      }, {
+        name: "Filename2.png",
+        description: "Another example of what a media description looks like.",
+        url: img
+      }, {
+        name: "Filename3.png",
+        description: "And another example of a media description.",
+        url: img
+      }];
+    this._fakeInfos = {
+      "Details": "Details info goes here",
+      "Name": "Name here",
+      "Phone": "(000) 000-0000",
+      "Email": "example@gmail.com",
+      "Date": "May 11, 2022"
+    };
+  }
+  render() {
+    // const mediaCardClass =;
+    // const infoCardClass = "";
+    return (h(Host, null, h("div", { class: "display-inline-table" }, h("div", { class: "w-100 display-flex padding-bottom-1" }, h("calcite-button", { appearance: 'outline', class: "w-1-2" }, this._translations.information), h("calcite-button", { class: "w-1-2" }, this._translations.media)), h("div", null, h("media-card", { class: "", values: this._fakeValues }), h("info-card", { class: "display-none", values: this._fakeInfos })))));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (protected)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * 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 cardManagerCss; }
+}, [1, "card-manager", {
+    "_translations": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["card-manager", "calcite-button", "calcite-icon", "calcite-label", "calcite-loader", "info-card", "media-card"];
+  components.forEach(tagName => { switch (tagName) {
+    case "card-manager":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CardManager$1);
+      }
+      break;
+    case "calcite-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "calcite-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "calcite-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "info-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "media-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const CardManager = CardManager$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CardManager, defineCustomElement };

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

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

package/dist/components/check-list.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 CheckList$1, d as defineCustomElement$1 } from './check-list2.js';
+
+const CheckList = CheckList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CheckList, defineCustomElement };

package/dist/components/check-list2.js

@@ -0,0 +1,131 @@
+/*!
+ * 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 { d as defineCustomElement$2 } from './checkbox.js';
+import { d as defineCustomElement$1 } from './label.js';
+
+const checkListCss = ":host{display:block}";
+
+const CheckList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    //--------------------------------------------------------------------------
+    //
+    //  State (internal)
+    //
+    //--------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
+    //
+    //  Properties (protected)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * A list of all checkbox elements for this component
+     *
+     * @protected
+     */
+    this._elements = [];
+    this.defaultChecked = true;
+    this.values = undefined;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Methods (public)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Returns a key/value pair that represents the checkbox value and checked state
+   *
+   * @returns Promise with the state of the checkboxes
+   */
+  async getConfigInfo() {
+    return this._elements.reduce((prev, cur) => {
+      prev[cur.value] = cur.checked;
+      return prev;
+    }, {});
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Events (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (lifecycle)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
+   */
+  async componentDidLoad() {
+    if (this.defaultChecked) {
+      this._elements.forEach(el => {
+        el.checked = true;
+      });
+    }
+  }
+  /**
+   * Renders the component.
+   */
+  render() {
+    return (h(Host, null, h("div", null, this._renderCheckboxes(this.values))));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (protected)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Render a checkbox with a label for each of the types listed in the NLS
+   *
+   * @returns Array of label/checkbox input nodes
+   * @protected
+   */
+  _renderCheckboxes(values) {
+    return values.map(v => {
+      return (h("calcite-label", { layout: "inline" }, h("calcite-checkbox", { ref: (el) => this._elements.push(el), value: v }), v));
+    });
+  }
+  get el() { return this; }
+  static get style() { return checkListCss; }
+}, [1, "check-list", {
+    "defaultChecked": [516, "default-checked"],
+    "values": [16],
+    "getConfigInfo": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["check-list", "calcite-checkbox", "calcite-label"];
+  components.forEach(tagName => { switch (tagName) {
+    case "check-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CheckList);
+      }
+      break;
+    case "calcite-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "calcite-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { CheckList as C, defineCustomElement as d };

package/dist/components/checkbox.js

@@ -0,0 +1,165 @@
+/*!
+ * 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 { g as guid } from './guid.js';
+import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label2.js';
+import { u as updateHostInteraction } from './interactive.js';
+import { t as toAriaBoolean } from './dom.js';
+import { i as isActivationKey } from './key.js';
+
+const checkboxCss = "@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([scale=s]){--calcite-checkbox-size:0.75rem}:host([scale=m]){--calcite-checkbox-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-checkbox-size:1rem}:host{position:relative;display:inline-flex;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host .check-svg,:host .toggle{inline-size:var(--calcite-checkbox-size);block-size:var(--calcite-checkbox-size)}:host .check-svg{pointer-events:none;box-sizing:border-box;display:block;overflow:hidden;background-color:var(--calcite-ui-foreground-1);fill:currentColor;stroke:currentColor;stroke-width:1;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input);color:var(--calcite-ui-background)}:host([checked]) .check-svg,:host([indeterminate]) .check-svg{background-color:var(--calcite-ui-brand);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand)}:host([hovered]) .toggle .check-svg,:host .toggle:hover .check-svg{box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}.toggle{outline-color:transparent}.toggle:active,.toggle:focus,.toggle:focus-visible{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
+
+const Checkbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calciteInternalCheckboxBlur = createEvent(this, "calciteInternalCheckboxBlur", 6);
+    this.calciteCheckboxChange = createEvent(this, "calciteCheckboxChange", 6);
+    this.calciteInternalCheckboxFocus = createEvent(this, "calciteInternalCheckboxFocus", 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;
+    /**
+     * The hovered state of the checkbox.
+     *
+     * @internal
+     */
+    this.hovered = false;
+    /**
+     * When `true`, the component is initially indeterminate, which is independent from its `checked` value.
+     *
+     * The state is visual only, and can look different across browsers.
+     *
+     * @mdn [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes)
+     */
+    this.indeterminate = false;
+    /**
+     * When `true`, the component must have a value in order for the form to submit.
+     *
+     * @internal
+     */
+    this.required = false;
+    /** Specifies the size of the component. */
+    this.scale = "m";
+    //--------------------------------------------------------------------------
+    //
+    //  Private Properties
+    //
+    //--------------------------------------------------------------------------
+    this.checkedPath = "M5.5 12L2 8.689l.637-.636L5.5 10.727l8.022-7.87.637.637z";
+    this.indeterminatePath = "M13 8v1H3V8z";
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.getPath = () => this.indeterminate ? this.indeterminatePath : this.checked ? this.checkedPath : "";
+    this.toggle = () => {
+      if (!this.disabled) {
+        this.checked = !this.checked;
+        this.setFocus();
+        this.indeterminate = false;
+        this.calciteCheckboxChange.emit();
+      }
+    };
+    this.keyDownHandler = (event) => {
+      if (isActivationKey(event.key)) {
+        this.toggle();
+        event.preventDefault();
+      }
+    };
+    this.clickHandler = () => {
+      this.toggle();
+    };
+    //--------------------------------------------------------------------------
+    //
+    //  Event Listeners
+    //
+    //--------------------------------------------------------------------------
+    this.onToggleBlur = () => {
+      this.calciteInternalCheckboxBlur.emit(false);
+    };
+    this.onToggleFocus = () => {
+      this.calciteInternalCheckboxFocus.emit(true);
+    };
+    this.onLabelClick = () => {
+      this.toggle();
+    };
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    var _a;
+    (_a = this.toggleEl) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    this.guid = this.el.id || `calcite-checkbox-${guid()}`;
+    connectLabel(this);
+    connectForm(this);
+  }
+  disconnectedCallback() {
+    disconnectLabel(this);
+    disconnectForm(this);
+  }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    return (h(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h("div", { "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: "toggle", onBlur: this.onToggleBlur, onFocus: this.onToggleFocus, ref: (toggleEl) => (this.toggleEl = toggleEl), role: "checkbox", tabIndex: this.disabled ? undefined : 0 }, h("svg", { "aria-hidden": "true", class: "check-svg", viewBox: "0 0 16 16" }, h("path", { d: this.getPath() })), h("slot", null)), h(HiddenFormInputSlot, { component: this })));
+  }
+  get el() { return this; }
+  static get style() { return checkboxCss; }
+}, [1, "calcite-checkbox", {
+    "checked": [1540],
+    "disabled": [516],
+    "guid": [1537],
+    "hovered": [1540],
+    "indeterminate": [1540],
+    "label": [1],
+    "name": [520],
+    "required": [516],
+    "scale": [513],
+    "value": [8],
+    "setFocus": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["calcite-checkbox"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-checkbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Checkbox);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { Checkbox as C, defineCustomElement as d };

package/dist/components/chip.js

@@ -0,0 +1,170 @@
+/*!
+ * 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 { b as getSlotted } from './dom.js';
+import { g as guid } from './guid.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
+import { d as defineCustomElement$1 } from './icon.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 = {
+  title: "title",
+  close: "close",
+  imageContainer: "image-container",
+  chipIcon: "chip-icon",
+  closeIcon: "close-icon"
+};
+const TEXT = {
+  close: "Close"
+};
+const SLOTS = {
+  image: "image"
+};
+const ICONS = {
+  close: "x"
+};
+
+const chipCss = "@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([scale=s]){block-size:1.5rem;font-size:var(--calcite-font-size--2);--calcite-chip-spacing-unit-l:0.5rem;--calcite-chip-spacing-unit-s:0.25rem}:host([scale=s]) .image-container{block-size:1.25rem;inline-size:1.25rem}:host([scale=m]){block-size:2rem;font-size:var(--calcite-font-size--1);--calcite-chip-spacing-unit-l:0.75rem;--calcite-chip-spacing-unit-s:6px}:host([scale=m]) .image-container{block-size:1.5rem;inline-size:1.5rem;-webkit-padding-start:0.25rem;padding-inline-start:0.25rem}:host([scale=l]){block-size:2.75rem;font-size:var(--calcite-font-size-0);--calcite-chip-spacing-unit-l:1rem;--calcite-chip-spacing-unit-s:0.5rem}:host([scale=l]) .image-container{block-size:2rem;inline-size:2rem;-webkit-padding-start:0.25rem;padding-inline-start:0.25rem}:host{box-sizing:border-box;display:inline-flex;cursor:default;align-items:center;border-radius:9999px;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-1);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}.container{display:inline-flex;block-size:100%;max-inline-size:100%;align-items:center}.title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host span{padding-block:0;padding-inline:var(--calcite-chip-spacing-unit-l)}:host([closable]) span{padding-inline:var(--calcite-chip-spacing-unit-l) var(--calcite-chip-spacing-unit-s)}:host([icon]:not([closable])) span{padding-block:0;padding-inline:var(--calcite-chip-spacing-unit-l)}:host button{margin:0px;display:inline-flex;max-block-size:100%;min-block-size:100%;cursor:pointer;align-items:center;align-self:stretch;border-style:none;background-color:transparent;color:var(--calcite-ui-text-1);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;-webkit-appearance:none;border-start-start-radius:0;border-start-end-radius:50px;border-end-end-radius:50px;border-end-start-radius:0;padding-block:0;padding-inline:var(--calcite-chip-spacing-unit-s);color:inherit;--calcite-chip-transparent-hover:var(--calcite-button-transparent-hover);--calcite-chip-transparent-press:var(--calcite-button-transparent-press)}:host button:hover{background-color:var(--calcite-chip-transparent-hover)}:host button:focus{background-color:var(--calcite-chip-transparent-hover);outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}:host button:active{background-color:var(--calcite-chip-transparent-press)}.image-container{display:inline-flex;overflow:hidden;border-radius:50%}:host slot[name=image]::slotted(*){display:flex;block-size:100%;inline-size:100%;overflow:hidden;border-radius:50%}.chip-icon{position:relative;margin-block:0px;display:inline-flex;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:var(--calcite-chip-spacing-unit-l);margin-inline-start:var(--calcite-chip-spacing-unit-l);border-start-start-radius:0;border-start-end-radius:50px;border-end-end-radius:50px;border-end-start-radius:0}:host([color=blue]){border-color:transparent;background-color:var(--calcite-ui-info);color:var(--calcite-ui-text-inverse)}:host([color=red]){border-color:transparent;background-color:var(--calcite-ui-danger);color:var(--calcite-ui-text-inverse)}:host([color=yellow]){border-color:transparent;background-color:var(--calcite-ui-warning);color:#151515}:host([color=green]){border-color:transparent;background-color:var(--calcite-ui-success);color:#151515}:host([color=grey]){border-color:transparent;background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1)}:host([color=grey]) button,:host([color=grey]) .close-icon{color:var(--calcite-ui-text-3)}:host([color=grey]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-ui-text-3))}:host([appearance=clear]),:host([appearance=transparent]){background-color:transparent;color:var(--calcite-ui-text-1)}:host([color=blue][appearance=clear]),:host([color=blue][appearance=transparent]){border-color:var(--calcite-ui-info)}:host([color=blue][appearance=clear]) .chip-icon,:host([color=blue][appearance=transparent]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-ui-info))}:host([color=red][appearance=clear]),:host([color=red][appearance=transparent]){border-color:var(--calcite-ui-danger)}:host([color=red][appearance=clear]) .chip-icon,:host([color=red][appearance=transparent]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-ui-danger))}:host([color=yellow][appearance=clear]),:host([color=yellow][appearance=transparent]){border-color:var(--calcite-ui-warning)}:host([color=yellow][appearance=clear]) .chip-icon,:host([color=yellow][appearance=transparent]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-ui-warning))}:host([color=green][appearance=clear]),:host([color=green][appearance=transparent]){border-color:var(--calcite-ui-success)}:host([color=green][appearance=clear]) .chip-icon,:host([color=green][appearance=transparent]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-ui-success))}:host([color=grey][appearance=clear]),:host([color=grey][appearance=transparent]){border-color:var(--calcite-ui-border-1)}:host([color=grey][appearance=clear]) .chip-icon,:host([color=grey][appearance=transparent]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-ui-text-3))}:host([closed]){display:none}";
+
+const Chip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calciteChipDismiss = createEvent(this, "calciteChipDismiss", 6);
+    //--------------------------------------------------------------------------
+    //
+    //  Public Properties
+    //
+    //--------------------------------------------------------------------------
+    /** Specifies the appearance style of the component. */
+    this.appearance = "solid";
+    /** Specifies the color for the component. */
+    this.color = "grey";
+    /**
+     * When `true`, a close button is added to the component.
+     *
+     * @deprecated use `closable` instead.
+     */
+    this.dismissible = false;
+    /** When `true`, a close button is added to the component. */
+    this.closable = false;
+    /**
+     * Accessible name for the component's close button.
+     *
+     * @default "Close"
+     */
+    this.dismissLabel = TEXT.close;
+    /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+    this.iconFlipRtl = false;
+    /** Specifies the size of the component. */
+    this.scale = "m";
+    /** When `true`, hides the component. */
+    this.closed = false;
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.closeClickHandler = (event) => {
+      event.preventDefault();
+      this.calciteChipDismiss.emit(this.el);
+      this.closed = true;
+    };
+    this.guid = guid();
+  }
+  handleDismissible(value) {
+    this.closable = value;
+  }
+  handleClosable(value) {
+    this.dismissible = value;
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+    if (this.dismissible) {
+      this.handleDismissible(this.dismissible);
+    }
+    if (this.closable) {
+      this.handleClosable(this.closable);
+    }
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    var _a;
+    (_a = this.closeButton) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  //--------------------------------------------------------------------------
+  renderChipImage() {
+    const { el } = this;
+    const hasChipImage = getSlotted(el, SLOTS.image);
+    return hasChipImage ? (h("div", { class: CSS.imageContainer, key: "image" }, h("slot", { name: SLOTS.image }))) : null;
+  }
+  render() {
+    const iconEl = (h("calcite-icon", { class: CSS.chipIcon, flipRtl: this.iconFlipRtl, icon: this.icon, scale: "s" }));
+    const closeButton = (h("button", { "aria-describedby": this.guid, "aria-label": this.dismissLabel, class: CSS.close, onClick: this.closeClickHandler, ref: (el) => (this.closeButton = el) }, h("calcite-icon", { class: CSS.closeIcon, icon: ICONS.close, scale: "s" })));
+    return (h("div", { class: "container" }, this.renderChipImage(), this.icon ? iconEl : null, h("span", { class: CSS.title, id: this.guid }, h("slot", null)), this.closable ? closeButton : null));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "dismissible": ["handleDismissible"],
+    "closable": ["handleClosable"]
+  }; }
+  static get style() { return chipCss; }
+}, [1, "calcite-chip", {
+    "appearance": [513],
+    "color": [513],
+    "dismissible": [1540],
+    "closable": [1540],
+    "dismissLabel": [1, "dismiss-label"],
+    "icon": [513],
+    "iconFlipRtl": [516, "icon-flip-rtl"],
+    "scale": [513],
+    "value": [8],
+    "closed": [1540],
+    "setFocus": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["calcite-chip", "calcite-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-chip":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Chip);
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { Chip as C, defineCustomElement as d };