@tmorrow/cre8-wc 1.1.2 → 1.1.4

package/lib/components/multi-select/multi-select.js

@@ -1,183 +1,269 @@
-import { ifDefined as b } from "lit-html/directives/if-defined.js";
-import { css as f, html as l, nothing as n } from "lit";
-import { property as o, state as m } from "lit/decorators.js";
-import { nanoid as h } from "nanoid";
-import { Cre8Element as y } from "../cre8-element.js";
-import "../remove-tag/remove-tag.js";
-import "../field-note/field-note.js";
-import "../button/button.js";
-import "../checkbox-field-item/checkbox-field-item.js";
-const g = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.7869 4.87827L8.51452 12.1506C8.44698 12.2182 8.36677 12.2719 8.27849 12.3085C8.1902 12.3451 8.09557 12.3639 8 12.3639C7.90443 12.3639 7.8098 12.3451 7.72151 12.3085C7.63323 12.2719 7.55302 12.2182 7.48548 12.1506L0.213121 4.87827C0.0766618 4.74181 0 4.55673 0 4.36375C0 4.17077 0.0766618 3.98569 0.213121 3.84923C0.34958 3.71277 0.534658 3.63611 0.72764 3.63611C0.920622 3.63611 1.1057 3.71277 1.24216 3.84923L8 10.608L14.7578 3.84923C14.8254 3.78166 14.9056 3.72806 14.9939 3.6915C15.0822 3.65493 15.1768 3.63611 15.2724 3.63611C15.3679 3.63611 15.4625 3.65493 15.5508 3.6915C15.6391 3.72806 15.7193 3.78166 15.7869 3.84923C15.8544 3.9168 15.908 3.99701 15.9446 4.08529C15.9812 4.17357 16 4.26819 16 4.36375C16 4.4593 15.9812 4.55392 15.9446 4.6422C15.908 4.73049 15.8544 4.8107 15.7869 4.87827Z"/>
-</svg>
-`, v = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.8969 5.97385L8.87 8L10.8969 10.0262C10.9541 10.0833 10.9995 10.1512 11.0304 10.2259C11.0613 10.3006 11.0773 10.3807 11.0773 10.4615C11.0773 10.5424 11.0613 10.6225 11.0304 10.6972C10.9995 10.7719 10.9541 10.8397 10.8969 10.8969C10.8397 10.9541 10.7719 10.9994 10.6972 11.0304C10.6225 11.0613 10.5424 11.0773 10.4615 11.0773C10.3807 11.0773 10.3006 11.0613 10.2259 11.0304C10.1512 10.9994 10.0833 10.9541 10.0262 10.8969L8 8.87L5.97385 10.8969C5.91667 10.9541 5.8488 10.9994 5.77409 11.0304C5.69939 11.0613 5.61932 11.0773 5.53846 11.0773C5.45761 11.0773 5.37754 11.0613 5.30283 11.0304C5.22813 10.9994 5.16025 10.9541 5.10308 10.8969C5.0459 10.8397 5.00055 10.7719 4.96961 10.6972C4.93866 10.6225 4.92274 10.5424 4.92274 10.4615C4.92274 10.3807 4.93866 10.3006 4.96961 10.2259C5.00055 10.1512 5.0459 10.0833 5.10308 10.0262L7.13 8L5.10308 5.97385C4.98761 5.85837 4.92274 5.70176 4.92274 5.53846C4.92274 5.37516 4.98761 5.21855 5.10308 5.10308C5.21855 4.9876 5.37516 4.92273 5.53846 4.92273C5.70176 4.92273 5.85838 4.9876 5.97385 5.10308L8 7.13L10.0262 5.10308C10.0833 5.0459 10.1512 5.00055 10.2259 4.9696C10.3006 4.93866 10.3807 4.92273 10.4615 4.92273C10.5424 4.92273 10.6225 4.93866 10.6972 4.9696C10.7719 5.00055 10.8397 5.0459 10.8969 5.10308C10.9541 5.16025 10.9995 5.22813 11.0304 5.30283C11.0613 5.37753 11.0773 5.4576 11.0773 5.53846C11.0773 5.61932 11.0613 5.69939 11.0304 5.77409C10.9995 5.84879 10.9541 5.91667 10.8969 5.97385ZM16 8C16 9.58225 15.5308 11.129 14.6518 12.4446C13.7727 13.7602 12.5233 14.7855 11.0615 15.391C9.59966 15.9965 7.99113 16.155 6.43928 15.8463C4.88743 15.5376 3.46197 14.7757 2.34315 13.6569C1.22433 12.538 0.462403 11.1126 0.153721 9.56072C-0.15496 8.00887 0.00346628 6.40034 0.608967 4.93853C1.21447 3.47672 2.23985 2.22729 3.55544 1.34824C4.87103 0.469192 6.41775 0 8 0C10.121 0.00223986 12.1546 0.845814 13.6544 2.34562C15.1542 3.84542 15.9978 5.87895 16 8ZM14.7692 8C14.7692 6.66117 14.3722 5.35241 13.6284 4.23922C12.8846 3.12602 11.8274 2.25839 10.5905 1.74605C9.35356 1.2337 7.99249 1.09965 6.67939 1.36084C5.36629 1.62203 4.16013 2.26674 3.21343 3.21343C2.26674 4.16012 1.62203 5.36629 1.36084 6.67939C1.09965 7.99249 1.2337 9.35356 1.74605 10.5905C2.2584 11.8274 3.12603 12.8846 4.23922 13.6284C5.35241 14.3722 6.66117 14.7692 8 14.7692C9.79469 14.7672 11.5153 14.0534 12.7843 12.7843C14.0534 11.5153 14.7672 9.79468 14.7692 8Z"/>
-</svg>
-`, _ = f`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:block}.cre8-c-multi-select{position:relative}.cre8-c-multi-select__label{font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform);display:block;margin-bottom:0.5rem}.cre8-c-multi-select__body{display:flex;align-items:center;justify-content:space-between;position:relative;font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);outline:var(--cre8-border-width-focus) solid rgba(0,0,0,0);outline-offset:0.125rem;-webkit-appearance:none;width:100%;border-width:var(--cre8-border-width-default);border-style:solid;border-color:var(--cre8-color-border-strong);border-radius:var(--cre8-border-radius-default);padding:0.75rem 0.5rem;color:var(--cre8-color-content-default);background-color:var(--cre8-color-bg-default);transition:outline-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),border-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),background-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),color var(--cre8-anim-fade-quick) var(--cre8-anim-ease)}.cre8-c-multi-select__body:hover:not(:disabled),.cre8-c-multi-select__body:focus:not(:disabled),.cre8-c-multi-select__body:active:not(:disabled),.cre8-c-multi-select__body:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-is-error .cre8-c-multi-select__body:hover:not(:disabled),.cre8-is-error .cre8-c-multi-select__body:focus:not(:disabled),.cre8-is-error .cre8-c-multi-select__body:active:not(:disabled),.cre8-is-error .cre8-c-multi-select__body:focus-visible{outline-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-multi-select__body:hover:not(:disabled),.cre8-is-success .cre8-c-multi-select__body:focus:not(:disabled),.cre8-is-success .cre8-c-multi-select__body:active:not(:disabled),.cre8-is-success .cre8-c-multi-select__body:focus-visible{outline-color:var(--cre8-color-border-success)}.cre8-c-multi-select__body:disabled{background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled);color:var(--cre8-color-content-disabled);cursor:not-allowed}.cre8-c-multi-select__body:disabled::placeholder{color:var(--cre8-color-content-disabled)}.cre8-c-multi-select__body::placeholder{color:var(--cre8-color-content-subtle)}.cre8-is-error .cre8-c-multi-select__body{border-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-multi-select__body{border-color:var(--cre8-color-border-success)}.cre8-c-multi-select__body{padding:var(--cre8-spacing-8);padding-inline-end:2.75rem;min-width:240px;cursor:pointer;min-height:3rem;height:fit-content}.cre8-is-disabled .cre8-c-multi-select__body{box-shadow:none;background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled);cursor:not-allowed;outline:none}.cre8-is-disabled .cre8-c-multi-select__body:hover,.cre8-is-disabled .cre8-c-multi-select__body:focus,.cre8-is-disabled .cre8-c-multi-select__body:active,.cre8-is-disabled .cre8-c-multi-select__body:focus-visible{outline:none;background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled);color:var(--cre8-color-content-disabled)}.cre8-is-disabled .cre8-c-multi-select__body .cre8-c-multi-select__content{border-color:var(--cre8-color-border-disabled)}.cre8-c-multi-select__content{display:flex;min-height:30px;width:100%;border-right:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);padding-right:2.75rem}.cre8-c-multi-select__tag-wrapper{list-style-type:none;margin:0;padding:0;display:flex;flex-wrap:wrap;height:100%;gap:0.25rem}.cre8-c-multi-select__icons-wrapper{display:flex;justify-content:end;margin-right:-36px;margin-left:-48px;gap:1.5rem;min-width:96px}.cre8-c-multi-select__icons-wrapper button{background-color:inherit;border:none;padding:none}.cre8-is-disabled .cre8-c-multi-select__icons-wrapper button{cursor:not-allowed}.cre8-c-multi-select--no-clear-icon .cre8-c-multi-select__clear_icon{display:none}cre8-icon{display:flex;pointer-events:none;color:var(--cre8-color-button-tertiary-content)}.cre8-is-disabled cre8-icon{color:var(--cre8-color-border-disabled)}.cre8-c-multi-select__dropdown{background-color:var(--cre8-color-bg-default);border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);box-shadow:var(--cre8-shadow-default);border-radius:var(--cre8-border-radius-default);flex-direction:column;left:0;min-width:100%;position:absolute;top:100%;white-space:nowrap;margin-top:var(--cre8-spacing-4);margin-left:0;padding:var(--cre8-spacing-8)}.cre8-c-multi-select__dropdown ul{list-style-type:none;padding:0;margin:0}.cre8-c-multi-select__dropdown li{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);background-color:var(--cre8-color-bg-default);border:var(--cre8-border-width-focus) var(--cre8-border-style-default) var(--cre8-color-border-transparent);border-radius:var(--cre8-border-radius-default);color:var(--cre8-color-content-default);width:100%;cursor:pointer;margin:var(--cre8-spacing-0);padding:var(--cre8-spacing-8) var(--cre8-spacing-8);text-align:left}.cre8-c-multi-select__dropdown li:active,.cre8-c-multi-select__dropdown li:hover,.cre8-c-multi-select__dropdown li:focus{background-color:var(--cre8-color-bg-brand-hover);color:var(--cre8-color-content-default);outline:var(--cre8-border-width-none);border:var(--cre8-border-width-focus) var(--cre8-border-style-default) var(--cre8-color-border-active-outline)}.cre8-c-multi-select__field-note,.cre8-c-multi-select__field-note-success,.cre8-c-multi-select__field-note-error{flex-basis:100%}`;
-var w = Object.defineProperty, i = (u, e, t, s) => {
-  for (var c = void 0, a = u.length - 1, d; a >= 0; a--)
-    (d = u[a]) && (c = d(e, t, c) || c);
-  return c && w(e, t, c), c;
+/* eslint-disable import/no-duplicates */
+/* eslint-disable no-duplicate-imports */
+/* eslint-disable lit/no-template-arrow */
+/* eslint-disable indent */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const p = class p extends y {
-  /* Life Cycle Methods */
-  constructor() {
-    super(), this.items = [], this.selectedTagItems = [], this.dropdownOpen = !1, this._handleOnClick = this._handleOnClick.bind(this);
-  }
-  firstUpdated() {
-    this.preselectedItems && this.setPreselectedItemsinDropdown(), this.selectedTagItems = this.preselectedItems || [], this._initializeAria();
-  }
-  connectedCallback() {
-    super.connectedCallback(), window.addEventListener("click", this._handleOnClick, !1);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), window.removeEventListener("click", this._handleOnClick, !1);
-  }
-  /* HTML Content functions */
-  _renderDropdownItems() {
-    return this.items.map(
-      // Note: Keyboard can already navigate to the checkbox
-      // eslint-disable-next-line lit-a11y/click-events-have-key-events
-      (e, t) => l`<li
-        @click="${(s) => this._handleListItemClick(s, t)}"
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { html, nothing, } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { nanoid } from 'nanoid';
+import svgCaretDown from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Regular/Caret_Down.svg?raw';
+import svgClear from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Regular/Clear_X.svg?raw';
+import styles from './multi-select.styles.js';
+import { Cre8Element } from '../cre8-element';
+import '../remove-tag/remove-tag';
+import '../field-note/field-note';
+import '../button/button';
+import '../checkbox-field-item/checkbox-field-item';
+/**
+ * Multiselect is used when multiple options can be chosen from a static dropdown
+ * This component has a list of items in the dropdown that can be added as "selected tags"
+ * The checkbox will always reflect the selected nature of the item and is not removed
+ * from the dropdown when clicked, the tags will be added and removed based on their state.
+ *
+ * Event `selectedItemsChange` emits whenever a tag is added or remove from the list and the
+ * current list after the change is given in the detail.
+ */
+export class Cre8MultiSelect extends Cre8Element {
+    /* Life Cycle Methods */
+    constructor() {
+        super();
+        /**
+         * The list of string items the user can choose in the dropdown
+         *
+         * Note: For passing props containing arrays and complex types, you should pass the props using a
+         * period in from of the prop like so: `.items="[]"`
+         * (this is only needed for Web Components and not the React version)
+         * @attr {string[]}
+         */
+        this.items = [];
+        this.selectedTagItems = [];
+        this.dropdownOpen = false;
+        this._handleOnClick = this._handleOnClick.bind(this);
+    }
+    firstUpdated() {
+        if (this.preselectedItems)
+            this.setPreselectedItemsinDropdown();
+        this.selectedTagItems = this.preselectedItems || [];
+        this._initializeAria();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('click', this._handleOnClick, false);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('click', this._handleOnClick, false);
+    }
+    /* HTML Content functions */
+    _renderDropdownItems() {
+        return this.items.map(
+        // Note: Keyboard can already navigate to the checkbox
+        // eslint-disable-next-line lit-a11y/click-events-have-key-events
+        (item, index) => html `<li
+        @click="${(e) => this._handleListItemClick(e, index)}"
       >
         <cre8-checkbox-field-item
-          .checked="${!!this.selectedTagItems.includes(e)}"
-          label=${e}
-          id=${t}
-          @input="${(s) => this._handleDropdownItemInput(e, s)}"
+          .checked="${!!this.selectedTagItems.includes(item)}"
+          label=${item}
+          id=${index}
+          @input="${(e) => this._handleDropdownItemInput(item, e)}"
         >
         </cre8-checkbox-field-item>
-      </li>`
-    );
-  }
-  _renderSelectedTags() {
-    return this.selectedTagItems.length ? this.selectedTagItems.map(
-      (e) => l`<li>
+      </li>`);
+    }
+    _renderSelectedTags() {
+        if (!this.selectedTagItems.length) {
+            return nothing;
+        }
+        return this.selectedTagItems.map((item) => html `<li>
         <cre8-remove-tag
-          text="${e}"
+          text="${item}"
           color="neutral"
           shape="square"
           ?disabled="${this.disabled}"
-          @removeTagClicked="${() => this._handleRemoveTagClick(e)}"
+          @removeTagClicked="${() => this._handleRemoveTagClick(item)}"
         ></cre8-remove-tag>
-      </li>`
-    ) : n;
-  }
-  /* Helper Functions */
-  setPreselectedItemsinDropdown() {
-    this.preselectedItems.forEach((e) => {
-      this.selectedTagItems = this.selectedTagItems.concat(e);
-    });
-  }
-  clearAllTags() {
-    this.disabled || (this.dropdownOpen && this.selectedTagItems.forEach((e) => {
-      this.shadowRoot?.querySelector(`cre8-checkbox-field-item[label="${e}"]`).shadowRoot?.querySelector("input").click();
-    }), this.selectedTagItems = [], this.emitSelectedItems());
-  }
-  emitSelectedItems() {
-    const e = new CustomEvent("selectedItemsChange", {
-      detail: {
-        selectedItems: this.selectedTagItems
-      },
-      bubbles: !0,
-      composed: !0
-    });
-    this.dispatchEvent(e);
-  }
-  toggleDropDown() {
-    this.dropdownOpen = !this.dropdownOpen;
-  }
-  /* Click Event Functions */
-  _handleOnClick(e) {
-    if (!this.shadowRoot?.host)
-      throw Error(
-        "Could not determine navigation context during click handler"
-      );
-    const t = e.composedPath().includes(this.shadowRoot.host), s = this.renderRoot.querySelector(
-      ".cre8-c-multi-select__label"
-    ), c = this.renderRoot.querySelector(
-      ".cre8-c-multi-select__icons-wrapper"
-    ), a = this.shadowRoot?.querySelector(
-      ".cre8-c-multi-select__tag-wrapper"
-    ), d = this.shadowRoot?.querySelector(
-      ".cre8-c-multi-select__dropdown"
-    );
-    t ? !e.composedPath().includes(s) && !e.composedPath().includes(a) && !e.composedPath().includes(c) && !e.composedPath().includes(d) && !this.disabled && this.toggleDropDown() : this.dropdownOpen = !1;
-  }
-  _handleListItemClick(e, t) {
-    e.target !== this.shadowRoot?.querySelector(`cre8-checkbox-field-item[id="${t}"]`) && this.shadowRoot?.querySelector(`cre8-checkbox-field-item[id="${t}"]`).shadowRoot?.querySelector("input").click();
-  }
-  _handleDropdownItemInput(e, t) {
-    t.target.checked ? this.selectedTagItems = this.selectedTagItems.concat(e) : this.selectedTagItems = this.selectedTagItems.filter((c) => c !== e), this.emitSelectedItems();
-  }
-  async _handleRemoveTagClick(e) {
-    this.disabled || (this.selectedTagItems = this.selectedTagItems.filter((t) => t !== e), this.shadowRoot?.querySelector(`cre8-checkbox-field-item[label="${e}"]`).shadowRoot?.querySelector("input").click(), await this.updateComplete, this.emitSelectedItems());
-  }
-  dropdownArrowClick() {
-    this.disabled || this.toggleDropDown();
-  }
-  _handleButtonToListKeydown(e) {
-    e.code === "Escape" && (e.preventDefault(), this.toggleDropDown());
-  }
-  _handleListKeydown(e) {
-    e.code === "Escape" && (e.preventDefault(), this.toggleDropDown());
-  }
-  _initializeAria() {
-    this.fieldId = this.fieldId || h(), (this.fieldNote || this.slotNotEmpty("fieldNote")) && (this.ariaDescribedBy = this.ariaDescribedBy || h()), (this.successNote || this.errorNote) && (this.validationAriaDescribedBy = this.validationAriaDescribedBy || h());
-  }
-  /**
-   * Aria describedby string based on field notes and error/success notes
-   * 1) If both validationAriaDescribedBy (error/success note) and field note exists,
-   * render both in the input's `aria-describedby` attribute
-   * 2) Otherwise, if only validationAriaDescribedBy exists, then render only that as
-   * the `aria-describedby` attribute (input without field note initially, but then error/success is added).
-   * 3) Otherwise, render only the `ariaDescribedBy` property (field note only)
-   */
-  _fieldNoteAria() {
-    return this.validationAriaDescribedBy && this.ariaDescribedBy ? `${this.ariaDescribedBy} ${this.validationAriaDescribedBy}` : this.validationAriaDescribedBy && !this.ariaDescribedBy ? this.validationAriaDescribedBy : this.ariaDescribedBy;
-  }
-  /**
-   * Render the success or error field notes
-   * 1. If there is a successNote, then return the field note with the success message and state.
-   * 2. If there is a errorNote, then return the field note with the error message and state.
-   */
-  _renderSuccessErrorFieldNote() {
-    return this.successNote ? l` <cre8-field-note
+      </li>`);
+    }
+    /* Helper Functions */
+    setPreselectedItemsinDropdown() {
+        this.preselectedItems.forEach((item) => {
+            this.selectedTagItems = this.selectedTagItems.concat(item);
+        });
+    }
+    clearAllTags() {
+        if (!this.disabled) {
+            if (this.dropdownOpen) {
+                this.selectedTagItems.forEach((item) => {
+                    this.shadowRoot
+                        ?.querySelector(`cre8-checkbox-field-item[label="${item}"]`)
+                        .shadowRoot?.querySelector('input')
+                        .click();
+                });
+            }
+            this.selectedTagItems = [];
+            this.emitSelectedItems();
+        }
+    }
+    emitSelectedItems() {
+        const customEvent = new CustomEvent('selectedItemsChange', {
+            detail: {
+                selectedItems: this.selectedTagItems,
+            },
+            bubbles: true,
+            composed: true,
+        });
+        this.dispatchEvent(customEvent);
+    }
+    toggleDropDown() {
+        this.dropdownOpen = !this.dropdownOpen;
+    }
+    /* Click Event Functions */
+    _handleOnClick(event) {
+        if (!this.shadowRoot?.host) {
+            throw Error('Could not determine navigation context during click handler');
+        }
+        const didClickInside = event.composedPath().includes(this.shadowRoot.host);
+        const label = this.renderRoot.querySelector('.cre8-c-multi-select__label');
+        const buttonsWrapper = this.renderRoot.querySelector('.cre8-c-multi-select__icons-wrapper');
+        const removeTagWrapper = this.shadowRoot?.querySelector('.cre8-c-multi-select__tag-wrapper');
+        const dropdownWrapper = this.shadowRoot?.querySelector('.cre8-c-multi-select__dropdown');
+        if (!didClickInside) {
+            this.dropdownOpen = false;
+        }
+        else if (!event.composedPath().includes(label)
+            && !event.composedPath().includes(removeTagWrapper)
+            && !event.composedPath().includes(buttonsWrapper)
+            && !event.composedPath().includes(dropdownWrapper)
+            && !this.disabled) {
+            this.toggleDropDown();
+        }
+    }
+    _handleListItemClick(e, index) {
+        if (e.target
+            !== this.shadowRoot?.querySelector(`cre8-checkbox-field-item[id="${index}"]`)) {
+            this.shadowRoot
+                ?.querySelector(`cre8-checkbox-field-item[id="${index}"]`)
+                .shadowRoot?.querySelector('input')
+                .click();
+        }
+    }
+    _handleDropdownItemInput(item, e) {
+        const targetCheckbox = e.target;
+        if (targetCheckbox.checked) {
+            this.selectedTagItems = this.selectedTagItems.concat(item);
+        }
+        else {
+            this.selectedTagItems = this.selectedTagItems.filter((i) => i !== item);
+        }
+        this.emitSelectedItems();
+    }
+    async _handleRemoveTagClick(item) {
+        if (!this.disabled) {
+            this.selectedTagItems = this.selectedTagItems.filter((i) => i !== item);
+            this.shadowRoot
+                ?.querySelector(`cre8-checkbox-field-item[label="${item}"]`)
+                .shadowRoot?.querySelector('input')
+                .click();
+            await this.updateComplete;
+            this.emitSelectedItems();
+        }
+    }
+    dropdownArrowClick() {
+        if (!this.disabled) {
+            this.toggleDropDown();
+        }
+    }
+    _handleButtonToListKeydown(e) {
+        if (e.code === 'Escape') {
+            e.preventDefault();
+            this.toggleDropDown();
+        }
+    }
+    _handleListKeydown(e) {
+        if (e.code === 'Escape') {
+            e.preventDefault();
+            this.toggleDropDown();
+        }
+    }
+    _initializeAria() {
+        this.fieldId = this.fieldId || nanoid();
+        if (this.fieldNote || this.slotNotEmpty('fieldNote')) {
+            this.ariaDescribedBy = this.ariaDescribedBy || nanoid();
+        }
+        if (this.successNote || this.errorNote) {
+            this.validationAriaDescribedBy = this.validationAriaDescribedBy || nanoid();
+        }
+    }
+    /**
+     * Aria describedby string based on field notes and error/success notes
+     * 1) If both validationAriaDescribedBy (error/success note) and field note exists,
+     * render both in the input's `aria-describedby` attribute
+     * 2) Otherwise, if only validationAriaDescribedBy exists, then render only that as
+     * the `aria-describedby` attribute (input without field note initially, but then error/success is added).
+     * 3) Otherwise, render only the `ariaDescribedBy` property (field note only)
+     */
+    _fieldNoteAria() {
+        if (this.validationAriaDescribedBy && this.ariaDescribedBy) {
+            return `${this.ariaDescribedBy} ${this.validationAriaDescribedBy}`; /* 1 */
+        }
+        if (this.validationAriaDescribedBy && !this.ariaDescribedBy) {
+            return this.validationAriaDescribedBy; /* 2 */
+        }
+        return this.ariaDescribedBy; /* 3 */
+    }
+    /**
+     * Render the success or error field notes
+     * 1. If there is a successNote, then return the field note with the success message and state.
+     * 2. If there is a errorNote, then return the field note with the error message and state.
+     */
+    _renderSuccessErrorFieldNote() {
+        if (this.successNote) {
+            /* 1 */
+            return html ` <cre8-field-note
         ?isSuccess=${this.isSuccess}
         id=${this.validationAriaDescribedBy}
         class="cre8-c-multi-select__field-note-success"
         iconName="success"
       >
         ${this.successNote}
-      </cre8-field-note>` : this.errorNote ? l` <cre8-field-note
+      </cre8-field-note>`;
+        }
+        if (this.errorNote) {
+            /* 2 */
+            return html ` <cre8-field-note
         ?isError=${this.isError}
         id=${this.validationAriaDescribedBy}
         class="cre8-c-multi-select__field-note-error"
         iconName="error-alt"
       >
         ${this.errorNote}
-      </cre8-field-note>` : null;
-  }
-  render() {
-    const e = this.componentClassNames(
-      "cre8-c-multi-select",
-      {
-        "cre8-is-error": this.isError,
-        "cre8-is-success": this.isSuccess,
-        "cre8-is-disabled": this.disabled,
-        "cre8-c-multi-select--no-clear-icon": !this.selectedTagItems.length
-      }
-    );
-    return l`
-      <div class="${e}">
+      </cre8-field-note>`;
+        }
+        return null;
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-multi-select', {
+            'cre8-is-error': this.isError,
+            'cre8-is-success': this.isSuccess,
+            'cre8-is-disabled': this.disabled,
+            'cre8-c-multi-select--no-clear-icon': !this.selectedTagItems.length,
+        });
+        return html `
+      <div class="${componentClassNames}">
         <label class="cre8-c-multi-select__label" id="${this.fieldId}"
           >${this.label}</label
         >
         <div class="cre8-c-multi-select__body" ?disabled=${this.disabled}>
           <div
             class="cre8-c-multi-select__content"
-            aria-describedby="${b(this._fieldNoteAria())}"
+            aria-describedby="${ifDefined(this._fieldNoteAria())}"
           >
             <ul
               class="cre8-c-multi-select__tag-wrapper"
@@ -188,8 +274,8 @@ const p = class p extends y {
           </div>
           <div class="cre8-c-multi-select__icons-wrapper">
             <cre8-button
-              ?hideText=${!0}
-              svg="${v}"
+              ?hideText=${true}
+              svg="${svgClear}"
               text="Clear All"
               variant="tertiary"
               ?disabled="${this.disabled}"
@@ -198,8 +284,8 @@ const p = class p extends y {
             >
             </cre8-button>
             <cre8-button
-              ?hideText=${!0}
-              svg="${g}"
+              ?hideText=${true}
+              svg="${svgCaretDown}"
               variant="tertiary"
               ?disabled="${this.disabled}"
               class="cre8-c-multi-select__down_icon"
@@ -212,7 +298,8 @@ const p = class p extends y {
             </cre8-button>
           </div>
         </div>
-        ${this.dropdownOpen ? l`
+        ${this.dropdownOpen
+            ? html `
             <fieldset class="cre8-c-multi-select__dropdown" aria-describedby="${this.fieldId}">
               <ul
                 aria-label="available items"
@@ -220,64 +307,66 @@ const p = class p extends y {
               >
                 ${this._renderDropdownItems()}
               </ul>
-            </fieldset>` : n}
+            </fieldset>`
+            : nothing}
       </div>
-      ${this.fieldNote || this.slotNotEmpty("fieldNote") ? l`<cre8-field-note
+      ${this.fieldNote || this.slotNotEmpty('fieldNote')
+            ? html `<cre8-field-note
             id=${this.ariaDescribedBy}
             class="cre8-c-multi-select__field-note"
           >
             <slot name="fieldNote">${this.fieldNote}</slot>
-          </cre8-field-note>` : n}
+          </cre8-field-note>`
+            : nothing}
       ${this._renderSuccessErrorFieldNote()}
     `;
-  }
-};
-p.styles = [_];
-let r = p;
-i([
-  o({ type: Array })
-], r.prototype, "items");
-i([
-  m()
-], r.prototype, "selectedTagItems");
-i([
-  o({ type: Array })
-], r.prototype, "preselectedItems");
-i([
-  m()
-], r.prototype, "dropdownOpen");
-i([
-  o()
-], r.prototype, "label");
-i([
-  o()
-], r.prototype, "fieldId");
-i([
-  o()
-], r.prototype, "fieldNote");
-i([
-  o()
-], r.prototype, "ariaDescribedBy");
-i([
-  o()
-], r.prototype, "validationAriaDescribedBy");
-i([
-  o({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled");
-i([
-  o({ type: Boolean, reflect: !0 })
-], r.prototype, "isError");
-i([
-  o()
-], r.prototype, "errorNote");
-i([
-  o({ type: Boolean, reflect: !0 })
-], r.prototype, "isSuccess");
-i([
-  o()
-], r.prototype, "successNote");
-customElements.get("cre8-multi-select") === void 0 && customElements.define("cre8-multi-select", r);
-export {
-  r as Cre8MultiSelect,
-  r as default
-};
+    }
+}
+Cre8MultiSelect.styles = [styles];
+__decorate([
+    property({ type: Array })
+], Cre8MultiSelect.prototype, "items", void 0);
+__decorate([
+    state()
+], Cre8MultiSelect.prototype, "selectedTagItems", void 0);
+__decorate([
+    property({ type: Array })
+], Cre8MultiSelect.prototype, "preselectedItems", void 0);
+__decorate([
+    state()
+], Cre8MultiSelect.prototype, "dropdownOpen", void 0);
+__decorate([
+    property()
+], Cre8MultiSelect.prototype, "label", void 0);
+__decorate([
+    property()
+], Cre8MultiSelect.prototype, "fieldId", void 0);
+__decorate([
+    property()
+], Cre8MultiSelect.prototype, "fieldNote", void 0);
+__decorate([
+    property()
+], Cre8MultiSelect.prototype, "ariaDescribedBy", void 0);
+__decorate([
+    property()
+], Cre8MultiSelect.prototype, "validationAriaDescribedBy", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8MultiSelect.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8MultiSelect.prototype, "isError", void 0);
+__decorate([
+    property()
+], Cre8MultiSelect.prototype, "errorNote", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8MultiSelect.prototype, "isSuccess", void 0);
+__decorate([
+    property()
+], Cre8MultiSelect.prototype, "successNote", void 0);
+if (customElements.get('cre8-multi-select') === undefined) {
+    customElements.define('cre8-multi-select', Cre8MultiSelect);
+}
+export default Cre8MultiSelect;
+//# sourceMappingURL=multi-select.js.map