@mhmo91/schmancy 0.4.76 → 0.4.78

package/dist/chips-Bnjcoior.js

@@ -0,0 +1,577 @@
+import { T as E } from "./tailwind.mixin-DKEIPHTU.js";
+import { css as x, LitElement as S, html as r } from "lit";
+import { property as a, state as _, customElement as R, queryAssignedElements as O } from "lit/decorators.js";
+import { classMap as g } from "lit/directives/class-map.js";
+import { BehaviorSubject as h, combineLatest as w } from "rxjs";
+import { takeUntil as k, map as H, tap as D, distinctUntilChanged as B, debounceTime as M } from "rxjs/operators";
+import "lit/directives/style-map.js";
+import { $ as j } from "./litElement.mixin-BAbHXkqK.js";
+var F = Object.defineProperty, P = Object.getOwnPropertyDescriptor, y = (e, t, i, o) => {
+  for (var l, s = o > 1 ? void 0 : o ? P(t, i) : t, n = e.length - 1; n >= 0; n--) (l = e[n]) && (s = (o ? l(t, i, s) : l(s)) || s);
+  return o && s && F(t, i, s), s;
+};
+const C = class C extends E(x`
+	:host {
+		display: inline-block;
+		outline: none;
+	}
+
+	:host([disabled]) {
+		pointer-events: none;
+		opacity: 0.5;
+	}
+
+	button {
+		font-family: inherit;
+	}
+
+	/* Material Symbols font for icons */
+	.material-symbols-outlined {
+		font-family: 'Material Symbols Outlined';
+		font-weight: normal;
+		font-style: normal;
+		font-size: 18px;
+		line-height: 1;
+		letter-spacing: normal;
+		text-transform: none;
+		display: inline-block;
+		white-space: nowrap;
+		word-wrap: normal;
+		direction: ltr;
+		-webkit-font-smoothing: antialiased;
+		text-rendering: optimizeLegibility;
+		-moz-osx-font-smoothing: grayscale;
+		font-feature-settings: 'liga';
+		vertical-align: middle;
+	}
+`) {
+  constructor() {
+    super(), this.value = "", this._selected = !1, this.icon = "", this.removable = !1, this.disabled = !1, this.elevated = !1, this.hover$ = new h(!1), this.pressed$ = new h(!1), this.focused$ = new h(!1), this.handleClick = () => {
+      this.disabled || this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value, selected: !this._selected }, bubbles: !0, composed: !0 }));
+    }, this.handleRemove = (t) => {
+      this.disabled || (t.stopPropagation(), this.dispatchEvent(new CustomEvent("remove", { detail: { value: this.value }, bubbles: !0, composed: !0 })));
+    }, this.handleKeyDown = (t) => {
+      this.disabled || t.key !== "Enter" && t.key !== " " || (t.preventDefault(), this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value, selected: !this._selected }, bubbles: !0, composed: !0 })));
+    }, this.handleMouseEnter = () => {
+      this.hover$.next(!0);
+    }, this.handleMouseLeave = () => {
+      this.hover$.next(!1), this.pressed$.next(!1);
+    }, this.handleMouseDown = () => {
+      this.pressed$.next(!0);
+    }, this.handleMouseUp = () => {
+      this.pressed$.next(!1);
+    }, this.handleFocus = () => {
+      this.focused$.next(!0);
+    }, this.handleBlur = () => {
+      this.focused$.next(!1);
+    };
+    try {
+      this.internals = this.attachInternals();
+    } catch {
+      this.internals = void 0;
+    }
+  }
+  get selected() {
+    return this._selected;
+  }
+  set selected(t) {
+    const i = this._selected;
+    this._selected = t, this.requestUpdate("selected", i);
+  }
+  get form() {
+    return this.internals?.form;
+  }
+  connectedCallback() {
+    super.connectedCallback(), w([this.hover$, this.pressed$, this.focused$]).pipe(k(this.disconnecting)).subscribe();
+  }
+  render() {
+    const t = { "inline-flex": !0, "items-center": !0, "gap-2": !0, "rounded-full": !0, "px-4": !0, "py-2": !0, "cursor-pointer": !this.disabled, "transition-all": !0, "duration-200": !0, "select-none": !0, "text-sm": !0, "font-medium": !0, border: !0, relative: !0, "bg-secondary-container": this._selected, "text-secondary-onContainer": this._selected, "border-secondary-container": this._selected, "bg-surface-container": !this._selected, "text-surface-on": !this._selected, "border-outline-variant": !this._selected, "hover:brightness-95": this._selected && !this.disabled, "hover:bg-surface-containerHigh": !this._selected && !this.disabled, "active:scale-95": !this.disabled, "focus-visible:outline": !this.disabled, "focus-visible:outline-2": !this.disabled, "focus-visible:outline-offset-2": !this.disabled, "focus-visible:outline-primary-default": !this.disabled, "shadow-md": this.elevated && !this.disabled, "hover:shadow-lg": this.elevated && !this.disabled, "opacity-50": this.disabled, "cursor-not-allowed": this.disabled };
+    return r`
+			<button
+				class=${g(t)}
+				@click=${this.handleClick}
+				@keydown=${this.handleKeyDown}
+				@mouseenter=${this.handleMouseEnter}
+				@mouseleave=${this.handleMouseLeave}
+				@mousedown=${this.handleMouseDown}
+				@mouseup=${this.handleMouseUp}
+				@focus=${this.handleFocus}
+				@blur=${this.handleBlur}
+				?disabled=${this.disabled}
+				aria-pressed=${this._selected ? "true" : "false"}
+				role="checkbox"
+				tabindex="0"
+			>
+				<!-- Checkmark icon (only when selected) -->
+				${this._selected ? r`
+					<span class="material-symbols-outlined text-[18px]">
+						check
+					</span>
+				` : ""}
+
+				<!-- Optional custom icon -->
+				${this.icon && !this._selected ? r`
+					<span class="material-symbols-outlined text-[18px]">
+						${this.icon}
+					</span>
+				` : ""}
+
+				<!-- Chip content -->
+				<slot></slot>
+
+				<!-- Remove button (if removable) -->
+				${this.removable ? r`
+					<button
+						class="ml-1 -mr-1 p-0.5 rounded-full hover:bg-surface-containerHighest transition-colors"
+						@click=${this.handleRemove}
+						aria-label="Remove filter"
+						tabindex="-1"
+					>
+						<span class="material-symbols-outlined text-[16px]">
+							close
+						</span>
+					</button>
+				` : ""}
+			</button>
+		`;
+  }
+};
+C.shadowRootOptions = { ...S.shadowRootOptions, delegatesFocus: !0 }, C.formAssociated = !0;
+let u = C;
+if (y([a({ type: String, reflect: !0 })], u.prototype, "value", 2), y([a({ type: Boolean, reflect: !0 })], u.prototype, "selected", 1), y([a({ type: String, reflect: !0 })], u.prototype, "icon", 2), y([a({ type: Boolean, reflect: !0 })], u.prototype, "removable", 2), y([a({ type: Boolean, reflect: !0 })], u.prototype, "disabled", 2), y([a({ type: Boolean, reflect: !0 })], u.prototype, "elevated", 2), customElements.get("schmancy-filter-chip") || customElements.define("schmancy-filter-chip", u), !customElements.get("schmancy-chip")) {
+  class e extends u {
+  }
+  customElements.define("schmancy-chip", e);
+}
+var I = Object.defineProperty, L = Object.getOwnPropertyDescriptor, v = (e, t, i, o) => {
+  for (var l, s = o > 1 ? void 0 : o ? L(t, i) : t, n = e.length - 1; n >= 0; n--) (l = e[n]) && (s = (o ? l(t, i, s) : l(s)) || s);
+  return o && s && I(t, i, s), s;
+};
+let c = class extends E(x`
+	:host {
+		display: inline-block;
+		outline: none;
+	}
+
+	:host([disabled]) {
+		pointer-events: none;
+	}
+
+	.ripple {
+		position: absolute;
+		border-radius: 50%;
+		transform: scale(0);
+		animation: ripple 600ms linear;
+		background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.08);
+		pointer-events: none;
+	}
+
+	@keyframes ripple {
+		to {
+			transform: scale(4);
+			opacity: 0;
+		}
+	}
+`) {
+  constructor() {
+    super(...arguments), this.value = "", this.icon = "", this.href = "", this.target = "", this.disabled = !1, this.elevated = !1, this.hover$ = new h(!1), this.pressed$ = new h(!1), this.focused$ = new h(!1), this.ripples = [], this.nextRippleId = 0, this.handleClick = (e) => {
+      if (this.disabled) return;
+      const t = this.shadowRoot?.querySelector("button");
+      if (t) {
+        const i = t.getBoundingClientRect(), o = e.clientX - i.left, l = e.clientY - i.top, s = this.nextRippleId++;
+        this.ripples = [...this.ripples, { x: o, y: l, id: s }], setTimeout(() => {
+          this.ripples = this.ripples.filter((n) => n.id !== s);
+        }, 600);
+      }
+      this.href && (this.target === "_blank" ? window.open(this.href, "_blank") : window.location.href = this.href), this.dispatchEvent(new CustomEvent("action", { detail: { value: this.value }, bubbles: !0, composed: !0 }));
+    }, this.handleKeyDown = (e) => {
+      if (!this.disabled && (e.key === "Enter" || e.key === " ")) {
+        e.preventDefault(), this.pressed$.next(!0);
+        const t = new MouseEvent("click", { bubbles: !0, cancelable: !0, clientX: 0, clientY: 0 });
+        this.handleClick(t), setTimeout(() => this.pressed$.next(!1), 100);
+      }
+    }, this.handleFocus = () => {
+      this.focused$.next(!0);
+    }, this.handleBlur = () => {
+      this.focused$.next(!1);
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), w([this.hover$, this.pressed$, this.focused$]).pipe(k(this.disconnecting)).subscribe();
+  }
+  render() {
+    const e = { relative: !0, "inline-flex": !0, "items-center": !0, "gap-2": !0, "px-4": !0, "py-2": !0, "rounded-full": !0, "cursor-pointer": !this.disabled, "transition-all": !0, "duration-200": !0, "select-none": !0, "overflow-hidden": !0, "bg-surface-container": !this.elevated, "text-surface-on": !0, "bg-surface-containerLow": this.elevated, "shadow-md": this.elevated && !this.disabled, "hover:bg-surface-containerHigh": !this.disabled && !this.elevated, "hover:shadow-lg": this.elevated && !this.disabled, "focus-visible:outline": !this.disabled, "focus-visible:outline-2": !this.disabled, "focus-visible:outline-primary-default": !this.disabled, "focus-visible:outline-offset-2": !this.disabled, "active:scale-95": !this.disabled, "opacity-50": this.disabled, "cursor-not-allowed": this.disabled };
+    return r`
+			<button
+				type="button"
+				class=${g(e)}
+				?disabled=${this.disabled}
+				@click=${this.handleClick}
+				@keydown=${this.handleKeyDown}
+				@mouseenter=${() => this.hover$.next(!0)}
+				@mouseleave=${() => this.hover$.next(!1)}
+				@mousedown=${() => this.pressed$.next(!0)}
+				@mouseup=${() => this.pressed$.next(!1)}
+				@focus=${this.handleFocus}
+				@blur=${this.handleBlur}
+				tabindex=${this.disabled ? "-1" : "0"}
+				role="button"
+				aria-disabled=${this.disabled}
+				aria-label=${this.value}
+			>
+				${this.icon ? r`
+					<schmancy-icon class="text-base">${this.icon}</schmancy-icon>
+				` : ""}
+				<span class="text-sm font-medium">
+					<slot></slot>
+				</span>
+
+				<!-- Ripple effects -->
+				${this.ripples.map((t) => r`
+					<span
+						class="ripple"
+						style="left: ${t.x}px; top: ${t.y}px;"
+					></span>
+				`)}
+			</button>
+		`;
+  }
+};
+c.shadowRootOptions = { ...S.shadowRootOptions, delegatesFocus: !0 }, v([a({ reflect: !0 })], c.prototype, "value", 2), v([a({ reflect: !0 })], c.prototype, "icon", 2), v([a({ reflect: !0 })], c.prototype, "href", 2), v([a({ reflect: !0 })], c.prototype, "target", 2), v([a({ type: Boolean, reflect: !0 })], c.prototype, "disabled", 2), v([a({ type: Boolean, reflect: !0 })], c.prototype, "elevated", 2), v([_()], c.prototype, "ripples", 2), c = v([R("schmancy-assist-chip")], c);
+var K = Object.defineProperty, T = Object.getOwnPropertyDescriptor, b = (e, t, i, o) => {
+  for (var l, s = o > 1 ? void 0 : o ? T(t, i) : t, n = e.length - 1; n >= 0; n--) (l = e[n]) && (s = (o ? l(t, i, s) : l(s)) || s);
+  return o && s && K(t, i, s), s;
+};
+let d = class extends E(x`
+	:host {
+		display: inline-block;
+		outline: none;
+	}
+
+	:host([disabled]) {
+		pointer-events: none;
+	}
+
+	button {
+		font-family: inherit;
+	}
+
+	.avatar-img {
+		width: 24px;
+		height: 24px;
+		object-fit: cover;
+	}
+
+	/* Material Symbols font for icons */
+	.material-symbols-outlined {
+		font-family: 'Material Symbols Outlined';
+		font-weight: normal;
+		font-style: normal;
+		font-size: 18px;
+		line-height: 1;
+		letter-spacing: normal;
+		text-transform: none;
+		display: inline-block;
+		white-space: nowrap;
+		word-wrap: normal;
+		direction: ltr;
+		-webkit-font-smoothing: antialiased;
+		text-rendering: optimizeLegibility;
+		-moz-osx-font-smoothing: grayscale;
+		font-feature-settings: 'liga';
+		vertical-align: middle;
+	}
+
+	.ripple {
+		position: absolute;
+		border-radius: 50%;
+		transform: scale(0);
+		animation: ripple 600ms linear;
+		background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.08);
+		pointer-events: none;
+	}
+
+	@keyframes ripple {
+		to {
+			transform: scale(4);
+			opacity: 0;
+		}
+	}
+`) {
+  constructor() {
+    super(), this.value = "", this.icon = "", this.avatar = "", this.removable = !0, this.disabled = !1, this.elevated = !1, this.chipHover$ = new h(!1), this.removeHover$ = new h(!1), this.focused$ = new h(!1), this.pressed$ = new h(!1), this.uiState = { chipHover: !1, removeHover: !1, focused: !1, pressed: !1 }, this.ripples = [], this.nextRippleId = 0, this.handleChipClick = (e) => {
+      if (this.disabled) return;
+      const t = this.shadowRoot?.querySelector(".chip-container");
+      if (t) {
+        const i = t.getBoundingClientRect(), o = e.clientX - i.left, l = e.clientY - i.top, s = this.nextRippleId++;
+        this.ripples = [...this.ripples, { x: o, y: l, id: s }], setTimeout(() => {
+          this.ripples = this.ripples.filter((n) => n.id !== s);
+        }, 600);
+      }
+      this.dispatchEvent(new CustomEvent("click", { detail: { value: this.value }, bubbles: !0, composed: !0 }));
+    }, this.handleRemove = (e) => {
+      this.disabled || (e.stopPropagation(), this.dispatchEvent(new CustomEvent("remove", { detail: { value: this.value }, bubbles: !0, composed: !0 })));
+    }, this.handleKeyDown = (e) => {
+      if (!this.disabled) if (e.key !== "Delete" && e.key !== "Backspace" || !this.removable) {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          const t = new MouseEvent("click", { bubbles: !0, cancelable: !0, clientX: 0, clientY: 0 });
+          this.handleChipClick(t);
+        }
+      } else e.preventDefault(), this.handleRemove(e);
+    }, this.handleFocus = () => {
+      this.focused$.next(!0);
+    }, this.handleBlur = () => {
+      this.focused$.next(!1);
+    };
+    try {
+      this.internals = this.attachInternals();
+    } catch {
+      this.internals = void 0;
+    }
+  }
+  get form() {
+    return this.internals?.form;
+  }
+  connectedCallback() {
+    super.connectedCallback(), w([this.chipHover$, this.removeHover$, this.focused$, this.pressed$]).pipe(H(([e, t, i, o]) => ({ chipHover: e, removeHover: t, focused: i, pressed: o })), D((e) => {
+      this.uiState = e;
+    }), k(this.disconnecting)).subscribe();
+  }
+  render() {
+    const e = { "chip-container": !0, "inline-flex": !0, "items-center": !0, "gap-2": !0, "pl-3": !this.avatar, "pl-1": this.avatar, "pr-2": this.removable, "pr-3": !this.removable, "py-2": !0, "rounded-full": !0, "cursor-default": !0, "transition-all": !0, "duration-200": !0, "select-none": !0, "text-sm": !0, "font-medium": !0, relative: !0, "overflow-hidden": !0, "bg-surface-container": !0, "text-surface-on": !0, "shadow-md": this.elevated && !this.disabled, "hover:bg-surface-containerHigh": !this.disabled && !this.uiState.removeHover, "hover:shadow-lg": this.elevated && !this.disabled, "focus-visible:outline": !this.disabled, "focus-visible:outline-2": !this.disabled, "focus-visible:outline-primary-default": !this.disabled, "focus-visible:outline-offset-2": !this.disabled, "opacity-50": this.disabled, "cursor-not-allowed": this.disabled }, t = { "ml-1": !0, "-mr-0.5": !0, "p-1": !0, "rounded-full": !0, "transition-all": !0, "duration-200": !0, "cursor-pointer": !this.disabled, "bg-error-container": this.uiState.removeHover && !this.disabled, "text-error-onContainer": this.uiState.removeHover && !this.disabled, "hover:scale-110": this.uiState.removeHover && !this.disabled, "hover:bg-surface-containerHighest": !this.uiState.removeHover && !this.disabled, "opacity-50": this.disabled };
+    return r`
+			<div
+				class=${g(e)}
+				@click=${this.handleChipClick}
+				@keydown=${this.handleKeyDown}
+				@mouseenter=${() => this.chipHover$.next(!0)}
+				@mouseleave=${() => this.chipHover$.next(!1)}
+				@mousedown=${() => this.pressed$.next(!0)}
+				@mouseup=${() => this.pressed$.next(!1)}
+				@focus=${this.handleFocus}
+				@blur=${this.handleBlur}
+				role="button"
+				tabindex=${this.disabled ? "-1" : "0"}
+				aria-disabled=${this.disabled}
+				aria-label=${this.value}
+			>
+				<!-- Avatar image (if provided) -->
+				${this.avatar ? r`
+					<img
+						src=${this.avatar}
+						alt=""
+						class="avatar-img rounded-full"
+					/>
+				` : ""}
+
+				<!-- Icon (if provided and no avatar) -->
+				${this.icon && !this.avatar ? r`
+					<span class="material-symbols-outlined text-[18px]">
+						${this.icon}
+					</span>
+				` : ""}
+
+				<!-- Chip content -->
+				<span>
+					<slot></slot>
+				</span>
+
+				<!-- Remove button (shown by default for input chips) -->
+				${this.removable ? r`
+					<button
+						class=${g(t)}
+						@click=${this.handleRemove}
+						@mouseenter=${() => this.removeHover$.next(!0)}
+						@mouseleave=${() => this.removeHover$.next(!1)}
+						aria-label="Remove"
+						tabindex="-1"
+						?disabled=${this.disabled}
+					>
+						<span class="material-symbols-outlined text-[16px]">
+							close
+						</span>
+					</button>
+				` : ""}
+
+				<!-- Ripple effects -->
+				${this.ripples.map((i) => r`
+					<span
+						class="ripple"
+						style="left: ${i.x}px; top: ${i.y}px;"
+					></span>
+				`)}
+			</div>
+		`;
+  }
+};
+d.shadowRootOptions = { ...S.shadowRootOptions, delegatesFocus: !0 }, d.formAssociated = !0, b([a({ type: String, reflect: !0 })], d.prototype, "value", 2), b([a({ type: String, reflect: !0 })], d.prototype, "icon", 2), b([a({ type: String, reflect: !0 })], d.prototype, "avatar", 2), b([a({ type: Boolean, reflect: !0 })], d.prototype, "removable", 2), b([a({ type: Boolean, reflect: !0 })], d.prototype, "disabled", 2), b([a({ type: Boolean, reflect: !0 })], d.prototype, "elevated", 2), b([_()], d.prototype, "uiState", 2), b([_()], d.prototype, "ripples", 2), d = b([R("schmancy-input-chip")], d);
+var U = Object.defineProperty, z = Object.getOwnPropertyDescriptor, m = (e, t, i, o) => {
+  for (var l, s = o > 1 ? void 0 : o ? z(t, i) : t, n = e.length - 1; n >= 0; n--) (l = e[n]) && (s = (o ? l(t, i, s) : l(s)) || s);
+  return o && s && U(t, i, s), s;
+};
+let p = class extends E(x`
+	:host {
+		display: inline-block;
+		outline: none;
+	}
+
+	:host([disabled]) {
+		pointer-events: none;
+	}
+
+	.ripple {
+		position: absolute;
+		border-radius: 50%;
+		transform: scale(0);
+		animation: ripple 600ms linear;
+		background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.08);
+		pointer-events: none;
+	}
+
+	@keyframes ripple {
+		to {
+			transform: scale(4);
+			opacity: 0;
+		}
+	}
+`) {
+  constructor() {
+    super(...arguments), this.value = "", this.icon = "", this.href = "", this.target = "", this.disabled = !1, this.elevated = !1, this.hover$ = new h(!1), this.pressed$ = new h(!1), this.focused$ = new h(!1), this.ripples = [], this.nextRippleId = 0, this.handleClick = (e) => {
+      if (this.disabled) return;
+      const t = this.shadowRoot?.querySelector("button");
+      if (t) {
+        const i = t.getBoundingClientRect(), o = e.clientX - i.left, l = e.clientY - i.top, s = this.nextRippleId++;
+        this.ripples = [...this.ripples, { x: o, y: l, id: s }], setTimeout(() => {
+          this.ripples = this.ripples.filter((n) => n.id !== s);
+        }, 600);
+      }
+      this.href && (this.target === "_blank" ? window.open(this.href, "_blank") : window.location.href = this.href), this.dispatchEvent(new CustomEvent("action", { detail: { value: this.value }, bubbles: !0, composed: !0 }));
+    }, this.handleKeyDown = (e) => {
+      if (!this.disabled && (e.key === "Enter" || e.key === " ")) {
+        e.preventDefault(), this.pressed$.next(!0);
+        const t = new MouseEvent("click", { bubbles: !0, cancelable: !0, clientX: 0, clientY: 0 });
+        this.handleClick(t), setTimeout(() => this.pressed$.next(!1), 100);
+      }
+    }, this.handleFocus = () => {
+      this.focused$.next(!0);
+    }, this.handleBlur = () => {
+      this.focused$.next(!1);
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), w([this.hover$, this.pressed$, this.focused$]).pipe(k(this.disconnecting)).subscribe();
+  }
+  render() {
+    const e = { relative: !0, "inline-flex": !0, "items-center": !0, "gap-2": !0, "px-4": !0, "py-2": !0, "rounded-full": !0, "cursor-pointer": !this.disabled, "transition-all": !0, "duration-200": !0, "select-none": !0, "overflow-hidden": !0, "bg-surface-containerLow": !this.elevated, "text-surface-on": !0, "bg-surface": this.elevated, "shadow-md": this.elevated && !this.disabled, "hover:bg-surface-containerHigh": !this.disabled, "hover:shadow-lg": this.elevated && !this.disabled, "focus-visible:outline": !this.disabled, "focus-visible:outline-2": !this.disabled, "focus-visible:outline-primary-default": !this.disabled, "focus-visible:outline-offset-2": !this.disabled, "active:scale-95": !this.disabled, "opacity-50": this.disabled, "cursor-not-allowed": this.disabled };
+    return r`
+			<button
+				type="button"
+				class=${g(e)}
+				?disabled=${this.disabled}
+				@click=${this.handleClick}
+				@keydown=${this.handleKeyDown}
+				@mouseenter=${() => this.hover$.next(!0)}
+				@mouseleave=${() => this.hover$.next(!1)}
+				@mousedown=${() => this.pressed$.next(!0)}
+				@mouseup=${() => this.pressed$.next(!1)}
+				@focus=${this.handleFocus}
+				@blur=${this.handleBlur}
+				tabindex=${this.disabled ? "-1" : "0"}
+				role="button"
+				aria-disabled=${this.disabled}
+				aria-label=${this.value}
+			>
+				${this.icon ? r`
+					<schmancy-icon class="text-base">${this.icon}</schmancy-icon>
+				` : ""}
+				<span class="text-sm font-medium">
+					<slot></slot>
+				</span>
+
+				<!-- Ripple effects -->
+				${this.ripples.map((t) => r`
+					<span
+						class="ripple"
+						style="left: ${t.x}px; top: ${t.y}px;"
+					></span>
+				`)}
+			</button>
+		`;
+  }
+};
+p.shadowRootOptions = { ...S.shadowRootOptions, delegatesFocus: !0 }, m([a({ reflect: !0 })], p.prototype, "value", 2), m([a({ reflect: !0 })], p.prototype, "icon", 2), m([a({ reflect: !0 })], p.prototype, "href", 2), m([a({ reflect: !0 })], p.prototype, "target", 2), m([a({ type: Boolean, reflect: !0 })], p.prototype, "disabled", 2), m([a({ type: Boolean, reflect: !0 })], p.prototype, "elevated", 2), m([_()], p.prototype, "ripples", 2), p = m([R("schmancy-suggestion-chip")], p);
+var A = Object.defineProperty, q = Object.getOwnPropertyDescriptor, $ = (e, t, i, o) => {
+  for (var l, s = o > 1 ? void 0 : o ? q(t, i) : t, n = e.length - 1; n >= 0; n--) (l = e[n]) && (s = (o ? l(t, i, s) : l(s)) || s);
+  return o && s && A(t, i, s), s;
+};
+let f = class extends j(x`
+	:host {
+		display: block;
+	}
+`) {
+  constructor() {
+    super(...arguments), this.value$ = new h(""), this.values$ = new h([]), this._value = "", this._values = [], this._multi = !1, this._valueSet = !1, this._valuesSet = !1, this.wrap = !0;
+  }
+  get multi() {
+    return this._multi;
+  }
+  set multi(e) {
+    this._multi = e;
+  }
+  get mode() {
+    return this._valuesSet ? "multi" : this._valueSet ? "single" : this.hasAttribute("values") ? "multi" : this.hasAttribute("value") ? "single" : this._multi === !0 ? "multi" : "none";
+  }
+  get values() {
+    return this._values;
+  }
+  set values(e) {
+    this._values = e || [], this._valuesSet = !0, this.values$.next(this._values);
+  }
+  get value() {
+    return this._value;
+  }
+  set value(e) {
+    this._value = e || "", this._valueSet = !0, this.value$.next(this._value);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.value$.next(this._value), this.values$.next(this._values), w([this.value$.pipe(B()), this.values$.pipe(B((e, t) => e.length === t.length && e.every((i, o) => i === t[o])))]).pipe(M(0), k(this.disconnecting)).subscribe(([e, t]) => {
+      this.updateChipStates(this.mode, e, t);
+    });
+  }
+  updateChipStates(e, t, i) {
+    this.chips && e !== "none" && this.chips.forEach((o) => {
+      if ("value" in o && "selected" in o) {
+        const l = o;
+        e === "multi" ? l.selected = i.length > 0 && i.includes(l.value) : e === "single" && (l.selected = t !== "" && t === l.value);
+      }
+    });
+  }
+  async change(e) {
+    if (e.preventDefault(), e.stopPropagation(), this.mode === "none") return;
+    const { value: t, selected: i } = e.detail;
+    this.mode === "multi" ? i ? this._values.includes(t) || (this._values = [...this._values, t], this.values$.next(this._values)) : (this._values = this._values.filter((o) => o !== t), this.values$.next(this._values)) : this.mode === "single" && (this._value = i ? t : "", this.value$.next(this._value)), this.requestUpdate(), this.dispatchEvent(new CustomEvent("change", { detail: this.mode === "multi" ? this._values : this._value, bubbles: !0 }));
+  }
+  firstUpdated(e) {
+    super.firstUpdated(e), this.updateChipStates(this.mode, this._value, this._values);
+  }
+  render() {
+    const e = this.classMap({ flex: !0, "gap-2": !0, "items-center": !0, "flex-wrap": this.wrap, "overflow-x-auto": !this.wrap, "scrollbar-thin": !this.wrap });
+    return r`
+			<div class=${e} @change=${this.change}>
+				<slot @slotchange=${() => {
+      this.updateChipStates(this.mode, this._value, this._values);
+    }}></slot>
+			</div>
+		`;
+  }
+};
+$([a({ type: Boolean, reflect: !0 })], f.prototype, "multi", 1), $([a({ type: Array, reflect: !0 })], f.prototype, "values", 1), $([a({ type: String, reflect: !0 })], f.prototype, "value", 1), $([O({ selector: "schmancy-chip, schmancy-filter-chip, schmancy-assist-chip, schmancy-input-chip, schmancy-suggestion-chip", flatten: !0 })], f.prototype, "chips", 2), $([a({ type: Boolean, reflect: !0 })], f.prototype, "wrap", 2), f = $([R("schmancy-chips")], f);
+export {
+  u as S,
+  c as a,
+  d as b,
+  p as c,
+  f as d
+};
+//# sourceMappingURL=chips-Bnjcoior.js.map