@mhmo91/schmancy 0.10.34 → 0.10.36

package/src/form/fields/chips/filter-chip.ts

@@ -0,0 +1,255 @@
+import { SchmancyElement } from '@mixins/index'
+import { css, html, LitElement } from 'lit'
+import { property } from 'lit/decorators.js'
+import { magnetic } from '../../../directives/magnetic'
+
+/**
+ * Filter chip component for content filtering.
+ *
+ * Filter chips are the ONLY chip type that maintains persistent selected state.
+ * They are used for filtering content by toggling on/off different filter criteria.
+ *
+ * @fires change - Dispatched when selection state changes with {value, selected}
+ * @fires remove - Dispatched when remove button is clicked (if removable)
+ *
+ * @example
+ * ```html
+ * <schmancy-filter-chip value="category-1" selected>
+ *   Category 1
+ * </schmancy-filter-chip>
+ * ```
+ */
+export class SchmancyFilterChip extends SchmancyElement {
+	static styles = [css`
+	:host {
+		display: inline-flex;
+		outline: none;
+		border-radius: 0.5rem;
+		transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
+	}
+
+	:host(:active:not([disabled])) {
+		transform: scale(0.95);
+		transition-duration: 100ms;
+	}
+
+	:host([disabled]) {
+		pointer-events: none;
+		opacity: var(--schmancy-sys-state-disabled-opacity);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:host { transition: none; }
+		:host(:active:not([disabled])) { transform: none; }
+	}
+
+	button {
+		font-family: inherit;
+	}
+`];
+	/** Unique identifier for this filter chip */
+	@property({ type: String, reflect: true })
+	value: string = ''
+
+	/** Whether the filter chip is selected (active filter) */
+	private _selected: boolean = false
+
+	@property({ type: Boolean, reflect: true })
+	get selected(): boolean {
+		return this._selected
+	}
+	set selected(value: boolean) {
+		const oldValue = this._selected
+		this._selected = value
+		this.requestUpdate('selected', oldValue)
+	}
+
+	/** Whether to show a remove button */
+	@property({ type: Boolean, reflect: true })
+	removable: boolean = false
+
+	/** Whether the chip is disabled */
+	@property({ type: Boolean, reflect: true })
+	disabled: boolean = false
+
+	/** Whether to use elevated style with shadow */
+	@property({ type: Boolean, reflect: true })
+	elevated: boolean = false
+
+
+	constructor() {
+		super()
+		try {
+			this.internals = this.attachInternals()
+		} catch {
+			this.internals = undefined
+		}
+	}
+
+	protected static shadowRootOptions = {
+		...LitElement.shadowRootOptions,
+		delegatesFocus: true,
+	}
+
+	static formAssociated = true
+	internals: ElementInternals | undefined
+	get form() {
+		return this.internals?.form
+	}
+
+	connectedCallback() {
+		super.connectedCallback()
+	}
+
+	protected updated(changed: Map<string, unknown>) {
+		super.updated?.(changed)
+		if (changed.has('value') || changed.has('selected')) {
+			this.internals?.setFormValue(this._selected ? (this.value || 'on') : null)
+		}
+	}
+
+	formResetCallback(): void {
+		this._selected = this.hasAttribute('selected')
+	}
+
+	formDisabledCallback(disabled: boolean): void {
+		this.disabled = disabled
+	}
+
+	private handleClick = () => {
+		if (this.disabled) return
+
+		this.dispatchEvent(
+			new CustomEvent('change', {
+				detail: { value: this.value, selected: !this._selected },
+				bubbles: true,
+				composed: true,
+			}),
+		)
+	}
+
+	private handleRemove = (e: Event) => {
+		if (this.disabled) return
+
+		e.stopPropagation()
+
+		this.dispatchEvent(
+			new CustomEvent('remove', {
+				detail: { value: this.value },
+				bubbles: true,
+				composed: true,
+			}),
+		)
+	}
+
+	private handleKeyDown = (e: KeyboardEvent) => {
+		if (this.disabled) return
+
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault()
+			this.dispatchEvent(
+				new CustomEvent('change', {
+					detail: { value: this.value, selected: !this._selected },
+					bubbles: true,
+					composed: true,
+				}),
+			)
+		}
+	}
+
+
+	protected render(): unknown {
+		const chipClasses = {
+			'inline-flex': true,
+			'items-center': true,
+			'gap-2': true,
+			'rounded-lg': true,
+			'h-8 px-4': true,
+			'cursor-pointer': !this.disabled,
+			'transition-all': true,
+			'duration-200': true,
+			'select-none': true,
+			'text-sm': true,
+			'font-medium': true,
+			'relative': true,
+			'min-h-[32px]': true,
+
+			// Background and text colors based on selection state
+			'bg-secondary-container': this._selected,
+			'text-secondary-onContainer': this._selected,
+			'bg-surface-container': !this._selected,
+			'text-surface-on': !this._selected,
+
+			// Hover states
+			'hover:brightness-95': this._selected && !this.disabled,
+			'hover:bg-surface-containerHigh': !this._selected && !this.disabled,
+
+			// Pressed state
+			'active:brightness-90': !this.disabled,
+
+			// Focus-visible state
+			'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,
+
+			// Elevated style
+			'shadow-md': this.elevated && !this.disabled,
+			'hover:shadow-lg': this.elevated && !this.disabled,
+
+			// Disabled state
+			'opacity-[var(--schmancy-sys-state-disabled-opacity)]': this.disabled,
+			'cursor-not-allowed': this.disabled,
+		}
+
+		return html`
+			<button
+				${magnetic({ strength: 2, radius: 40 })}
+				class=${this.classMap(chipClasses)}
+				@click=${this.handleClick}
+				@keydown=${this.handleKeyDown}
+				?disabled=${this.disabled}
+				aria-pressed=${this._selected ? 'true' : 'false'}
+				role="checkbox"
+				tabindex="0"
+			>
+				<slot></slot>
+
+				${this.removable
+					? html`
+							<button
+								class="ml-1 -mr-1 p-0.5 rounded-full hover:bg-surface-containerHighest transition-colors duration-200"
+								@click=${this.handleRemove}
+								aria-label="Remove filter"
+								tabindex="-1"
+							>
+								<span class="material-symbols-outlined text-sm">close</span>
+							</button>
+						`
+					: ''}
+			</button>
+		`
+	}
+}
+
+if (!customElements.get('schmancy-filter-chip')) {
+	customElements.define('schmancy-filter-chip', SchmancyFilterChip)
+}
+
+if (!customElements.get('schmancy-chip')) {
+	class SchmancyChipCompat extends SchmancyFilterChip {}
+	customElements.define('schmancy-chip', SchmancyChipCompat)
+}
+
+export { SchmancyFilterChip as SchmancyChip }
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'schmancy-chip': SchmancyFilterChip
+		'schmancy-filter-chip': SchmancyFilterChip
+	}
+}
+
+export type FilterChipChangeEvent = { value: string; selected: boolean }
+export type FilterChipRemoveEvent = { value: string }
+export type SchmancyChipChangeEvent = FilterChipChangeEvent

package/src/form/fields/chips/index.ts

@@ -0,0 +1,5 @@
+export * from './assist-chip';
+export * from './chips';
+export * from './filter-chip';
+export * from './input-chip';
+export * from './suggestion-chip';

package/src/form/fields/chips/input-chip.ts

@@ -0,0 +1,413 @@
+import { SchmancyElement } from '@mixins/index'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { classMap } from 'lit/directives/class-map.js'
+import { BehaviorSubject, combineLatest } from 'rxjs'
+import { map, takeUntil, tap } from 'rxjs/operators'
+
+/**
+ * Input chip component - represents user-provided information that can be removed.
+ *
+ * IMPORTANT: Per Material Design 3 specification, input chips do NOT have selected state.
+ * They represent discrete pieces of user input (like entered tags, selections from lists, etc.)
+ * that can only be removed, not toggled on/off.
+ *
+ * Use cases:
+ * - Displaying selected recipients in an email
+ * - Showing applied filters that can be removed
+ * - Tags or keywords entered by the user
+ * - Selected items from a multi-select dropdown
+ *
+ * @fires click - Optional click event on chip body (value)
+ * @fires remove - Dispatched when remove button is clicked (value)
+ *
+ * @example
+ * ```html
+ * <schmancy-input-chip value="john@example.com" avatar="/avatars/john.jpg">
+ *   John Doe
+ * </schmancy-input-chip>
+ * ```
+ */
+@customElement('schmancy-input-chip')
+export class SchmancyInputChip extends SchmancyElement {
+	static styles = [css`
+	:host {
+		display: inline-block;
+		outline: none;
+		width: fit-content;
+		min-width: fit-content;
+	}
+
+	:host([disabled]) {
+		pointer-events: none;
+	}
+
+	button {
+		font-family: inherit;
+	}
+
+	.avatar-img {
+		width: 20px;
+		height: 20px;
+		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(0, 0, 0, 0.08);
+		pointer-events: none;
+	}
+
+	@keyframes ripple {
+		to {
+			transform: scale(4);
+			opacity: 0;
+		}
+	}
+
+	/* State layer for M3 hover/focus/pressed states */
+	.state-layer {
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		pointer-events: none;
+		background-color: currentColor;
+		opacity: 0;
+		transition: opacity 200ms ease;
+	}
+
+	:host(:not([disabled])) .chip-container:hover .state-layer {
+		opacity: 0.08;
+	}
+
+	:host(:not([disabled])) .chip-container:focus-visible .state-layer {
+		opacity: 0.1;
+	}
+
+	:host(:not([disabled])) .chip-container:active .state-layer {
+		opacity: 0.1;
+	}
+`];
+	/** Value identifier for the chip */
+	@property({ type: String, reflect: true })
+	value: string = ''
+
+	/** Optional icon name (Material Symbols) */
+	@property({ type: String, reflect: true })
+	icon: string = ''
+
+	/** Optional avatar image URL */
+	@property({ type: String, reflect: true })
+	avatar: string = ''
+
+	/** Whether to show remove button (default true for input chips) */
+	@property({ type: Boolean, reflect: true })
+	removable: boolean = true
+
+	/** Disable the chip */
+	@property({ type: Boolean, reflect: true })
+	disabled: boolean = false
+
+	/** Elevated style variant */
+	@property({ type: Boolean, reflect: true })
+	elevated: boolean = false
+
+	// RxJS state streams
+	private chipHover$ = new BehaviorSubject<boolean>(false)
+	private removeHover$ = new BehaviorSubject<boolean>(false)
+	private focused$ = new BehaviorSubject<boolean>(false)
+	private pressed$ = new BehaviorSubject<boolean>(false)
+
+	// UI state from combined streams
+	@state()  uiState = {
+		chipHover: false,
+		removeHover: false,
+		focused: false,
+		pressed: false
+	}
+
+	// Ripple effects
+	@state() private ripples: Array<{ x: number; y: number; id: number }> = []
+	private nextRippleId = 0
+
+	constructor() {
+		super()
+		try {
+			this.internals = this.attachInternals()
+		} catch {
+			this.internals = undefined
+		}
+	}
+
+	protected static shadowRootOptions = {
+		...LitElement.shadowRootOptions,
+		delegatesFocus: true,
+	}
+
+	static formAssociated = true
+	internals: ElementInternals | undefined
+	get form() {
+		return this.internals?.form
+	}
+
+	protected updated(changed: Map<string, unknown>) {
+		super.updated?.(changed)
+		if (changed.has('value')) {
+			this.internals?.setFormValue(this.value || null)
+		}
+	}
+
+	connectedCallback() {
+		super.connectedCallback()
+
+		// Combine all UI state streams
+		combineLatest([
+			this.chipHover$,
+			this.removeHover$,
+			this.focused$,
+			this.pressed$
+		]).pipe(
+			map(([chipHover, removeHover, focused, pressed]) => ({
+				chipHover,
+				removeHover,
+				focused,
+				pressed
+			})),
+			tap(state => {
+				this.uiState = state
+			}),
+			takeUntil(this.disconnecting)
+		).subscribe()
+	}
+
+	private handleChipClick = (e: MouseEvent) => {
+		if (this.disabled) return
+
+		// Add ripple effect
+		const chip = this.shadowRoot?.querySelector('.chip-container') as HTMLElement
+		if (chip) {
+			const rect = chip.getBoundingClientRect()
+			const x = e.clientX - rect.left
+			const y = e.clientY - rect.top
+			const id = this.nextRippleId++
+
+			this.ripples = [...this.ripples, { x, y, id }]
+
+			// Remove ripple after animation
+			setTimeout(() => {
+				this.ripples = this.ripples.filter(r => r.id !== id)
+			}, 600)
+		}
+
+		// Dispatch optional click event (for custom handling if needed)
+		this.dispatchEvent(
+			new CustomEvent('click', {
+				detail: { value: this.value },
+				bubbles: true,
+				composed: true,
+			})
+		)
+	}
+
+	private handleRemove = (e: Event) => {
+		if (this.disabled) return
+
+		e.stopPropagation()
+
+		// Dispatch remove event
+		this.dispatchEvent(
+			new CustomEvent('remove', {
+				detail: { value: this.value },
+				bubbles: true,
+				composed: true,
+			})
+		)
+	}
+
+	private handleKeyDown = (e: KeyboardEvent) => {
+		if (this.disabled) return
+
+		// Delete or Backspace removes the chip
+		if ((e.key === 'Delete' || e.key === 'Backspace') && this.removable) {
+			e.preventDefault()
+			this.handleRemove(e)
+		}
+		// Enter can optionally trigger click
+		else if (e.key === 'Enter') {
+			e.preventDefault()
+			const clickEvent = new MouseEvent('click', {
+				bubbles: true,
+				cancelable: true,
+				clientX: 0,
+				clientY: 0
+			})
+			this.handleChipClick(clickEvent)
+		}
+	}
+
+	private handleFocus = () => {
+		this.focused$.next(true)
+	}
+
+	private handleBlur = () => {
+		this.focused$.next(false)
+	}
+
+	protected render(): unknown {
+		const hasLeadingIcon = this.avatar || this.icon;
+
+		const chipClasses = {
+			'chip-container': true,
+			'inline-flex': true,
+			'items-center': true,
+			'gap-2': true,
+			'h-8': true, // M3: 32px height
+			'min-h-[32px]': true,
+			'rounded-full': true,
+			'cursor-default': true,
+			'transition-all': true,
+			'duration-200': true,
+			'select-none': true,
+			'text-sm': true, // M3: 14px Label Large
+			'font-medium': true, // M3: 500 weight
+			'relative': true,
+			'overflow-hidden': true,
+
+			// M3 Padding: 8px with icon, 16px without (leading), 8px with trailing icon
+			'pl-2': hasLeadingIcon, // 8px with avatar/icon
+			'pl-4': !hasLeadingIcon, // 16px without
+			'pr-2': this.removable, // 8px with remove button
+			'pr-4': !this.removable, // 16px without
+
+			// M3 Colors for input chips
+			'bg-surface-containerLow': true,
+			'text-surface-onVariant': true,
+			// Input chips are flat (no elevation) per M3
+
+			// Focus-visible state
+			'focus-visible:outline': !this.disabled,
+			'focus-visible:outline-2': !this.disabled,
+			'focus-visible:outline-primary': !this.disabled,
+			'focus-visible:outline-offset-2': !this.disabled,
+
+			// Disabled state
+			'opacity-38': this.disabled, // M3 disabled opacity
+			'cursor-not-allowed': this.disabled
+		}
+
+		const removeButtonClasses = {
+			'size-[18px]': true, // M3: 18px icon size
+			'flex': true,
+			'items-center': true,
+			'justify-center': true,
+			'rounded-full': true,
+			'transition-all': true,
+			'duration-200': true,
+			'cursor-pointer': !this.disabled,
+			'-mr-1': true, // Adjust for visual balance
+
+			// Hover state for remove button
+			'hover:bg-surface-containerHighest': !this.disabled,
+			'opacity-50': this.disabled
+		}
+
+		return html`
+			<div
+				class=${classMap(chipClasses)}
+				@click=${this.handleChipClick}
+				@keydown=${this.handleKeyDown}
+				@mouseenter=${() => this.chipHover$.next(true)}
+				@mouseleave=${() => this.chipHover$.next(false)}
+				@mousedown=${() => this.pressed$.next(true)}
+				@mouseup=${() => this.pressed$.next(false)}
+				@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 ? html`
+					<img
+						src=${this.avatar}
+						alt=""
+						class="avatar-img rounded-full size-5"
+					/>
+				` : ''}
+
+				<!-- Icon (if provided and no avatar) -->
+				${this.icon && !this.avatar ? html`
+					<span class="material-symbols-outlined text-[18px] shrink-0">
+						${this.icon}
+					</span>
+				` : ''}
+
+				<!-- Chip content -->
+				<span class="text-sm font-medium leading-5">
+					<slot></slot>
+				</span>
+
+				<!-- Remove button (shown by default for input chips) -->
+				${this.removable ? html`
+					<button
+						class=${classMap(removeButtonClasses)}
+						@click=${this.handleRemove}
+						@mouseenter=${() => this.removeHover$.next(true)}
+						@mouseleave=${() => this.removeHover$.next(false)}
+						aria-label="Remove"
+						tabindex="-1"
+						?disabled=${this.disabled}
+					>
+						<span class="material-symbols-outlined text-[18px]">
+							close
+						</span>
+					</button>
+				` : ''}
+
+				<!-- Ripple effects -->
+				${this.ripples.map(ripple => html`
+					<span
+						class="ripple"
+						style="left: ${ripple.x}px; top: ${ripple.y}px;"
+					></span>
+				`)}
+
+				<!-- State layer for M3 hover/focus/pressed states -->
+				<div class="state-layer"></div>
+			</div>
+		`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'schmancy-input-chip': SchmancyInputChip
+	}
+}
+
+export type InputChipClickEvent = { value: string }
+export type InputChipRemoveEvent = { value: string }