@esri/solutions-components 0.3.5 → 0.3.7

package/dist/solutions-components/p-2c177e6a.entry.js

@@ -0,0 +1,101 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './p-c023e6a1.js';
+import { E as EDistressType, a as ESeverity, b as calculateDeductValue } from './p-cc815aca.js';
+
+const deductCalculatorCss = ":host{display:block;--calcite-label-margin-bottom:0}.label-display{display:block;padding-bottom:1rem}";
+
+const DeductCalculator = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.deductValueComplete = createEvent(this, "deductValueComplete", 7);
+    /**
+     * string[]: Array of the distress types
+     */
+    this._types = Object.keys(EDistressType).filter(k => !isNaN(Number(EDistressType[k])));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (lifecycle)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Renders the component.
+   */
+  render() {
+    return (h(Host, null, h("div", { class: "label-display" }, h("calcite-label", { class: "label-display" }, "Density %", this._getDensityInput()), h("calcite-label", { class: "label-display" }, "Type", this._getTypeInput()), h("calcite-label", { class: "label-display" }, "Severity", this._getSeverityInput())), h("div", null, this._getCalculateInput())));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (protected)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Render the density input
+   *
+   * @returns a node with a control to set the density number (float)
+   *
+   * @protected
+   */
+  _getDensityInput() {
+    return (h("calcite-input", { max: 100, min: 0, ref: (el) => { this._densityElement = el; }, type: 'number' }));
+  }
+  /**
+   * Render the distress type input
+   *
+   * @returns a node with a control that shows the distress type name and value
+   * for example ALLIGATOR_CRACKING (1)
+   *
+   * @protected
+   */
+  _getTypeInput() {
+    return (h("calcite-select", { label: '', ref: (el) => { this._typeElement = el; } }, this._types.map((t, i) => h("calcite-option", { value: EDistressType[t].toString() }, `${t} (${i + 1})`))));
+  }
+  /**
+   * Render the distress type input
+   *
+   * @returns a node with a control that shows the distress type name and value
+   * for example ALLIGATOR_CRACKING (1)
+   *
+   * @protected
+   */
+  _getSeverityInput() {
+    return (h("calcite-select", { label: '', ref: (el) => { this._severityElement = el; } }, h("calcite-option", { value: ESeverity.H }, "High"), h("calcite-option", { value: ESeverity.M }, "Medium"), h("calcite-option", { value: ESeverity.L }, "Low")));
+  }
+  /**
+   * Render calculate deduct value button
+   *
+   * @returns a node with a control that calculates the deduct value
+   *
+   * @protected
+   */
+  _getCalculateInput() {
+    return (h("calcite-button", { onClick: () => this._calculateDeduct(parseFloat(this._typeElement.value), this._severityElement.value, parseFloat(this._densityElement.value)) }, "Calculate Deduct Value"));
+  }
+  /**
+   * Calculate the deduct value based on the user inputs using the ASTM methodology
+   *
+   * @param type distress type 1-19 based on ASTM
+   * @param severity "H" | "M" | "L" high, med, low based on ASTM
+   * @param density percent density of the distress type and severity based on total sample area
+   *
+   * @protected
+   */
+  _calculateDeduct(type, severity, density) {
+    if (type && severity && !isNaN(density)) {
+      const dv = calculateDeductValue(type.toString(), severity.toString(), density.toString(), true);
+      this.deductValueComplete.emit(dv);
+      alert(dv);
+    }
+    else {
+      alert("Type, severity, and a density number are required");
+    }
+  }
+  get el() { return getElement(this); }
+};
+DeductCalculator.style = deductCalculatorCss;
+
+export { DeductCalculator as deduct_calculator };

package/dist/solutions-components/p-2e9ed892.js

@@ -8,4 +8,49 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  * v1.0.0-beta.97
  */
-const t=new WeakMap;function i(t){t.propertyName===this.openTransitionProp&&t.target===this.transitionEl&&(this.open?this.onBeforeOpen():this.onBeforeClose())}function n(t){t.propertyName===this.openTransitionProp&&t.target===this.transitionEl&&(this.open?this.onOpen():this.onClose())}function s(s){if(o(s),s.transitionEl){const o=i.bind(s),a=n.bind(s);t.set(s,[s.transitionEl,o,a]),s.transitionEl.addEventListener("transitionstart",o),s.transitionEl.addEventListener("transitionend",a)}}function o(i){if(!t.has(i))return;const[n,s,o]=t.get(i);n.removeEventListener("transitionstart",s),n.removeEventListener("transitionend",o),t.delete(i)}export{s as c,o as d}
+const componentToTransitionListeners = new WeakMap();
+function transitionStart(event) {
+  if (event.propertyName === this.openTransitionProp && event.target === this.transitionEl) {
+    this.open ? this.onBeforeOpen() : this.onBeforeClose();
+  }
+}
+function transitionEnd(event) {
+  if (event.propertyName === this.openTransitionProp && event.target === this.transitionEl) {
+    this.open ? this.onOpen() : this.onClose();
+  }
+}
+/**
+ * Helper to keep track of transition listeners on setTransitionEl and connectedCallback on OpenCloseComponent components.
+ *
+ * @param component
+ */
+function connectOpenCloseComponent(component) {
+  disconnectOpenCloseComponent(component);
+  if (component.transitionEl) {
+    const boundOnTransitionStart = transitionStart.bind(component);
+    const boundOnTransitionEnd = transitionEnd.bind(component);
+    componentToTransitionListeners.set(component, [
+      component.transitionEl,
+      boundOnTransitionStart,
+      boundOnTransitionEnd
+    ]);
+    component.transitionEl.addEventListener("transitionstart", boundOnTransitionStart);
+    component.transitionEl.addEventListener("transitionend", boundOnTransitionEnd);
+  }
+}
+/**
+ * Helper to tear down transition listeners on disconnectedCallback on OpenCloseComponent components.
+ *
+ * @param component
+ */
+function disconnectOpenCloseComponent(component) {
+  if (!componentToTransitionListeners.has(component)) {
+    return;
+  }
+  const [transitionEl, start, end] = componentToTransitionListeners.get(component);
+  transitionEl.removeEventListener("transitionstart", start);
+  transitionEl.removeEventListener("transitionend", end);
+  componentToTransitionListeners.delete(component);
+}
+
+export { connectOpenCloseComponent as c, disconnectOpenCloseComponent as d };

package/dist/solutions-components/p-316f56db.js

@@ -3,9 +3,226 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import{c as n}from"./p-83166522.js";import{h as t}from"./p-c023e6a1.js";
+import { c as closestElementCrossShadowBoundary } from './p-83166522.js';
+import { h } from './p-c023e6a1.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 e="hidden-form-input";function o(n){return"checked"in n}const s=new WeakMap,c=new WeakSet;function r(n){const{formEl:t}=n;return!!t&&("requestSubmit"in t?t.requestSubmit():t.submit(),!0)}function i(n){var t;null===(t=n.formEl)||void 0===t||t.reset()}function u(t){const{el:e,value:r}=t,i=n(e,"form");if(!i||function(n,t){const e="calciteInternalFormComponentRegister";let o=!1;return n.addEventListener(e,(n=>{o=n.composedPath().some((n=>c.has(n))),n.stopPropagation()}),{once:!0}),t.dispatchEvent(new CustomEvent(e,{bubbles:!0,composed:!0})),o}(i,e))return;t.formEl=i,t.defaultValue=r,o(t)&&(t.defaultChecked=t.checked);const u=(t.onFormReset||a).bind(t);i.addEventListener("reset",u),s.set(t.el,u),c.add(e)}function a(){o(this)?this.checked=this.defaultChecked:this.value=this.defaultValue}function l(n){const{el:t,formEl:e}=n;if(!e)return;const o=s.get(t);e.removeEventListener("reset",o),s.delete(t),n.formEl=null,c.delete(t)}function f(n,t){n.defaultValue=t}const m=n=>{n.target.dispatchEvent(new CustomEvent("calciteInternalHiddenInputChange",{bubbles:!0}))},d=n=>n.removeEventListener("change",m);function p(n,t,e){var s;const{defaultValue:c,disabled:r,name:i,required:u}=n;t.defaultValue=c,t.disabled=r,t.name=i,t.required=u,t.tabIndex=-1,o(n)?(t.defaultChecked=n.defaultChecked,t.value=n.checked?e||"on":"",r||n.checked||(t.disabled=!0)):t.value=e||"",null===(s=n.syncHiddenFormInput)||void 0===s||s.call(n,t)}const h=({component:n})=>(function(n){const{el:t,formEl:o,name:s,value:c}=n,{ownerDocument:r}=t,i=t.querySelectorAll(`input[slot="${e}"]`);if(!o||!s)return void i.forEach((n=>{d(n),n.remove()}));const u=Array.isArray(c)?c:[c],a=[],l=new Set;let f;i.forEach((t=>{const e=u.find((n=>n==t.value));null!=e?(l.add(e),p(n,t,e)):a.push(t)})),u.forEach((t=>{if(l.has(t))return;let o=a.pop();o||(o=r.createElement("input"),o.slot=e),f||(f=r.createDocumentFragment()),f.append(o),o.addEventListener("change",m),p(n,o,t)})),f&&t.append(f),a.forEach((n=>{d(n),n.remove()}))}(n),t("slot",{name:e}));export{h as H,f as a,u as c,l as d,i as r,r as s}
+ */
+/**
+ * Exported for testing purposes.
+ */
+const hiddenFormInputSlotName = "hidden-form-input";
+function isCheckable(component) {
+  return "checked" in component;
+}
+const onFormResetMap = new WeakMap();
+const formComponentSet = new WeakSet();
+function hasRegisteredFormComponentParent(form, formComponentEl) {
+  // we use events as a way to test for nested form-associated components across shadow bounds
+  const formComponentRegisterEventName = "calciteInternalFormComponentRegister";
+  let hasRegisteredFormComponentParent = false;
+  form.addEventListener(formComponentRegisterEventName, (event) => {
+    hasRegisteredFormComponentParent = event
+      .composedPath()
+      .some((element) => formComponentSet.has(element));
+    event.stopPropagation();
+  }, { once: true });
+  formComponentEl.dispatchEvent(new CustomEvent(formComponentRegisterEventName, {
+    bubbles: true,
+    composed: true
+  }));
+  return hasRegisteredFormComponentParent;
+}
+/**
+ * Helper to submit a form.
+ *
+ * @param component
+ * @returns true if its associated form was submitted, false otherwise.
+ */
+function submitForm(component) {
+  const { formEl } = component;
+  if (!formEl) {
+    return false;
+  }
+  "requestSubmit" in formEl ? formEl.requestSubmit() : formEl.submit();
+  return true;
+}
+/**
+ * Helper to reset a form.
+ *
+ * @param component
+ */
+function resetForm(component) {
+  var _a;
+  (_a = component.formEl) === null || _a === void 0 ? void 0 : _a.reset();
+}
+/**
+ * Helper to set up form interactions on connectedCallback.
+ *
+ * @param component
+ */
+function connectForm(component) {
+  const { el, value } = component;
+  const form = closestElementCrossShadowBoundary(el, "form");
+  if (!form || hasRegisteredFormComponentParent(form, el)) {
+    return;
+  }
+  component.formEl = form;
+  component.defaultValue = value;
+  if (isCheckable(component)) {
+    component.defaultChecked = component.checked;
+  }
+  const boundOnFormReset = (component.onFormReset || onFormReset).bind(component);
+  form.addEventListener("reset", boundOnFormReset);
+  onFormResetMap.set(component.el, boundOnFormReset);
+  formComponentSet.add(el);
+}
+function onFormReset() {
+  if (isCheckable(this)) {
+    this.checked = this.defaultChecked;
+    return;
+  }
+  this.value = this.defaultValue;
+}
+/**
+ * Helper to tear down form interactions on disconnectedCallback.
+ *
+ * @param component
+ */
+function disconnectForm(component) {
+  const { el, formEl } = component;
+  if (!formEl) {
+    return;
+  }
+  const boundOnFormReset = onFormResetMap.get(el);
+  formEl.removeEventListener("reset", boundOnFormReset);
+  onFormResetMap.delete(el);
+  component.formEl = null;
+  formComponentSet.delete(el);
+}
+/**
+ * Helper for setting the default value on initialization after connectedCallback.
+ *
+ * Note that this is only needed if the default value cannot be determined on connectedCallback.
+ *
+ * @param component
+ * @param value
+ */
+function afterConnectDefaultValueSet(component, value) {
+  component.defaultValue = value;
+}
+const hiddenInputChangeHandler = (event) => {
+  event.target.dispatchEvent(new CustomEvent("calciteInternalHiddenInputChange", { bubbles: true }));
+};
+const removeHiddenInputChangeEventListener = (input) => input.removeEventListener("change", hiddenInputChangeHandler);
+/**
+ * Helper for maintaining a form-associated's hidden input in sync with the component.
+ *
+ * Based on Ionic's approach: https://github.com/ionic-team/ionic-framework/blob/e4bf052794af9aac07f887013b9250d2a045eba3/core/src/utils/helpers.ts#L198
+ *
+ * @param component
+ */
+function syncHiddenFormInput(component) {
+  const { el, formEl, name, value } = component;
+  const { ownerDocument } = el;
+  const inputs = el.querySelectorAll(`input[slot="${hiddenFormInputSlotName}"]`);
+  if (!formEl || !name) {
+    inputs.forEach((input) => {
+      removeHiddenInputChangeEventListener(input);
+      input.remove();
+    });
+    return;
+  }
+  const values = Array.isArray(value) ? value : [value];
+  const extra = [];
+  const seen = new Set();
+  inputs.forEach((input) => {
+    const valueMatch = values.find((val) => 
+    /* intentional non-strict equality check */
+    val == input.value);
+    if (valueMatch != null) {
+      seen.add(valueMatch);
+      defaultSyncHiddenFormInput(component, input, valueMatch);
+    }
+    else {
+      extra.push(input);
+    }
+  });
+  let docFrag;
+  values.forEach((value) => {
+    if (seen.has(value)) {
+      return;
+    }
+    let input = extra.pop();
+    if (!input) {
+      input = ownerDocument.createElement("input");
+      input.slot = hiddenFormInputSlotName;
+    }
+    if (!docFrag) {
+      docFrag = ownerDocument.createDocumentFragment();
+    }
+    docFrag.append(input);
+    // emits when hidden input is autofilled
+    input.addEventListener("change", hiddenInputChangeHandler);
+    defaultSyncHiddenFormInput(component, input, value);
+  });
+  if (docFrag) {
+    el.append(docFrag);
+  }
+  extra.forEach((input) => {
+    removeHiddenInputChangeEventListener(input);
+    input.remove();
+  });
+}
+function defaultSyncHiddenFormInput(component, input, value) {
+  var _a;
+  const { defaultValue, disabled, name, required } = component;
+  // keep in sync to prevent losing reset value
+  input.defaultValue = defaultValue;
+  input.disabled = disabled;
+  input.name = name;
+  input.required = required;
+  input.tabIndex = -1;
+  if (isCheckable(component)) {
+    // keep in sync to prevent losing reset value
+    input.defaultChecked = component.defaultChecked;
+    // heuristic to support default/on mode from https://html.spec.whatwg.org/multipage/input.html#dom-input-value-default-on
+    input.value = component.checked ? value || "on" : "";
+    // we disable the component when not checked to avoid having its value submitted
+    if (!disabled && !component.checked) {
+      input.disabled = true;
+    }
+  }
+  else {
+    input.value = value || "";
+  }
+  (_a = component.syncHiddenFormInput) === null || _a === void 0 ? void 0 : _a.call(component, input);
+}
+/**
+ * Helper to render the slot for form-associated component's hidden input.
+ *
+ * If the component has a default slot, this must be placed at the bottom of the component's root container to ensure it is the last child.
+ *
+ * render(): VNode {
+ *   <Host>
+ *     <div class={CSS.container}>
+ *     // ...
+ *     <HiddenFormInputSlot component={this} />
+ *     </div>
+ *   </Host>
+ * }
+ *
+ * Note that the hidden-form-input Sass mixin must be added to the component's style to apply specific styles.
+ *
+ * @param root0
+ * @param root0.component
+ */
+const HiddenFormInputSlot = ({ component }) => {
+  syncHiddenFormInput(component);
+  return h("slot", { name: hiddenFormInputSlotName });
+};
+
+export { HiddenFormInputSlot as H, afterConnectDefaultValueSet as a, connectForm as c, disconnectForm as d, resetForm as r, submitForm as s };

package/dist/solutions-components/p-327f3ebf.entry.js

@@ -0,0 +1,98 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, h, g as getElement } from './p-c023e6a1.js';
+import { f as focusElement } from './p-83166522.js';
+import { u as updateHostInteraction } from './p-7daea1df.js';
+import './p-729708a3.js';
+import './p-a80b3880.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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    // --------------------------------------------------------------------------
+    //
+    //  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 getElement(this); }
+};
+Fab.style = fabCss;
+
+export { Fab as calcite_fab };

package/dist/solutions-components/p-356f8b54.entry.js

@@ -0,0 +1,138 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, c as createEvent, h, g as getElement } from './p-c023e6a1.js';
+import { a as getSlotted } from './p-83166522.js';
+import { g as guid } from './p-a80b3880.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './p-ea534300.js';
+import './p-729708a3.js';
+import './p-9a9955db.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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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 getElement(this); }
+  static get watchers() { return {
+    "dismissible": ["handleDismissible"],
+    "closable": ["handleClosable"]
+  }; }
+};
+Chip.style = chipCss;
+
+export { Chip as calcite_chip };