@tmorrow/cre8-wc 1.0.26 → 1.1.2

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

@@ -1,486 +1,25 @@
-import { ifDefined as m } from "lit-html/directives/if-defined.js";
+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 i, state as b } from "lit/decorators.js";
+import { property as o, state as m } from "lit/decorators.js";
 import { nanoid as h } from "nanoid";
-import { Cre8Element as g } from "../cre8-element.js";
+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 y = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+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>
-`, w = f`/**
- * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
- */
-*,
-::slotted(*),
-*:before,
-*:after {
-  box-sizing: border-box;
-}
-
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
- */
-/*
-=======
-Animations
-=======
-*/
-: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;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
- */
-:host {
-  display: block;
-}
-
-.cre8-c-multi-select {
-  position: relative;
-}
-
-/**
- * Label
- */
-.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);
-  -webkit-text-decoration: var(--cre8-typography-label-small-text-decoration);
-          text-decoration: var(--cre8-typography-label-small-text-decoration);
-  text-transform: var(--cre8-typography-label-small-text-transform);
-  display: block;
-  margin-bottom: 8px;
-}
-
-/**
- * Body
- * 1) The div that contains the input and icons
- */
-.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);
-  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
-          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 transparent;
-  outline-offset: 2px;
-  -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: 12px 8px;
-  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);
-  /**
-   * Hover, focus, active, and focus-visible styles for default input elements
-   */
-  /**
-   * Disabled styles for default input elements
-   */
-  /**
-   * Placeholder styles for default input elements
-   */
-  /**
-   * Error state for default input elements
-   */
-  /**
-   * Success state for default input elements
-   */
-  padding: var(--cre8-spacing-8);
-  padding-inline-end: 44px;
-  min-width: 240px;
-  cursor: pointer;
-  min-height: 48px;
-  height: -moz-fit-content;
-  height: fit-content;
-}
-.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: 2px;
-  /**
-   * Error state
-   */
-  /**
-   * Success state
-   */
-}
-.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;
-  /**
-   * Disabled text colors
-   */
-}
-.cre8-c-multi-select__body:disabled::-moz-placeholder {
-  color: var(--cre8-color-content-disabled);
-}
-.cre8-c-multi-select__body:disabled::placeholder {
-  color: var(--cre8-color-content-disabled);
-}
-.cre8-c-multi-select__body::-moz-placeholder {
-  color: var(--cre8-color-content-subtle);
-}
-.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-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: 44px;
-}
-
-.cre8-c-multi-select__tag-wrapper {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-wrap: wrap;
-  height: 100%;
-  gap: 4px;
-}
-
-.cre8-c-multi-select__icons-wrapper {
-  display: flex;
-  justify-content: end;
-  margin-right: -36px;
-  margin-left: -48px;
-  gap: 24px;
-  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;
-}
-
-/**
- * Select Icon
- * 1) The icons within the body container positioned absolutely over the input
- */
-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);
-  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
-          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);
-}
-
-/**
- * Select field notes
- */
-.cre8-c-multi-select__field-note,
-.cre8-c-multi-select__field-note-success,
-.cre8-c-multi-select__field-note-error {
-  flex-basis: 100%;
-}
-  /* sourceMappingURL=multi-select.module.css.map */
-`;
-var _ = Object.defineProperty, o = (p, e, r, c) => {
-  for (var s = void 0, a = p.length - 1, d; a >= 0; a--)
-    (d = p[a]) && (s = d(e, r, s) || s);
-  return s && _(e, r, s), s;
+`, _ = 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;
 };
-const u = class u extends g {
+const p = class p extends y {
   /* Life Cycle Methods */
   constructor() {
     super(), this.items = [], this.selectedTagItems = [], this.dropdownOpen = !1, this._handleOnClick = this._handleOnClick.bind(this);
@@ -499,14 +38,14 @@ const u = class u extends g {
     return this.items.map(
       // Note: Keyboard can already navigate to the checkbox
       // eslint-disable-next-line lit-a11y/click-events-have-key-events
-      (e, r) => l`<li
-        @click="${(c) => this._handleListItemClick(c, r)}"
+      (e, t) => l`<li
+        @click="${(s) => this._handleListItemClick(s, t)}"
       >
         <cre8-checkbox-field-item
           .checked="${!!this.selectedTagItems.includes(e)}"
           label=${e}
-          id=${r}
-          @input="${(c) => this._handleDropdownItemInput(e, c)}"
+          id=${t}
+          @input="${(s) => this._handleDropdownItemInput(e, s)}"
         >
         </cre8-checkbox-field-item>
       </li>`
@@ -555,25 +94,25 @@ const u = class u extends g {
       throw Error(
         "Could not determine navigation context during click handler"
       );
-    const r = e.composedPath().includes(this.shadowRoot.host), c = this.renderRoot.querySelector(
+    const t = e.composedPath().includes(this.shadowRoot.host), s = this.renderRoot.querySelector(
       ".cre8-c-multi-select__label"
-    ), s = this.renderRoot.querySelector(
+    ), 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"
     );
-    r ? !e.composedPath().includes(c) && !e.composedPath().includes(a) && !e.composedPath().includes(s) && !e.composedPath().includes(d) && !this.disabled && this.toggleDropDown() : this.dropdownOpen = !1;
+    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, r) {
-    e.target !== this.shadowRoot?.querySelector(`cre8-checkbox-field-item[id="${r}"]`) && this.shadowRoot?.querySelector(`cre8-checkbox-field-item[id="${r}"]`).shadowRoot?.querySelector("input").click();
+  _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, r) {
-    r.target.checked ? this.selectedTagItems = this.selectedTagItems.concat(e) : this.selectedTagItems = this.selectedTagItems.filter((s) => s !== e), this.emitSelectedItems();
+  _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((r) => r !== e), this.shadowRoot?.querySelector(`cre8-checkbox-field-item[label="${e}"]`).shadowRoot?.querySelector("input").click(), await this.updateComplete, this.emitSelectedItems());
+    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();
@@ -638,7 +177,7 @@ const u = class u extends g {
         <div class="cre8-c-multi-select__body" ?disabled=${this.disabled}>
           <div
             class="cre8-c-multi-select__content"
-            aria-describedby="${m(this._fieldNoteAria())}"
+            aria-describedby="${b(this._fieldNoteAria())}"
           >
             <ul
               class="cre8-c-multi-select__tag-wrapper"
@@ -660,7 +199,7 @@ const u = class u extends g {
             </cre8-button>
             <cre8-button
               ?hideText=${!0}
-              svg="${y}"
+              svg="${g}"
               variant="tertiary"
               ?disabled="${this.disabled}"
               class="cre8-c-multi-select__down_icon"
@@ -693,52 +232,52 @@ const u = class u extends g {
     `;
   }
 };
-u.styles = [w];
-let t = u;
-o([
-  i({ type: Array })
-], t.prototype, "items");
-o([
-  b()
-], t.prototype, "selectedTagItems");
-o([
-  i({ type: Array })
-], t.prototype, "preselectedItems");
-o([
-  b()
-], t.prototype, "dropdownOpen");
-o([
-  i()
-], t.prototype, "label");
-o([
-  i()
-], t.prototype, "fieldId");
-o([
-  i()
-], t.prototype, "fieldNote");
-o([
-  i()
-], t.prototype, "ariaDescribedBy");
-o([
-  i()
-], t.prototype, "validationAriaDescribedBy");
-o([
-  i({ type: Boolean, reflect: !0 })
-], t.prototype, "disabled");
-o([
-  i({ type: Boolean, reflect: !0 })
-], t.prototype, "isError");
-o([
-  i()
-], t.prototype, "errorNote");
-o([
-  i({ type: Boolean, reflect: !0 })
-], t.prototype, "isSuccess");
-o([
-  i()
-], t.prototype, "successNote");
-customElements.get("cre8-multi-select") === void 0 && customElements.define("cre8-multi-select", t);
+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 {
-  t as Cre8MultiSelect,
-  t as default
+  r as Cre8MultiSelect,
+  r as default
 };

package/lib/components/multi-select/multi-select.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select.styles.d.ts","sourceRoot":"","sources":["../../../components/multi-select/multi-select.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA6cX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"multi-select.styles.d.ts","sourceRoot":"","sources":["../../../components/multi-select/multi-select.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA6mQ,CAAC;AAC1nQ,eAAe,MAAM,CAAC"}