@mhmo91/schmancy 0.10.34 → 0.10.36

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

@@ -0,0 +1,263 @@
+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 { takeUntil } from 'rxjs/operators'
+
+/**
+ * Assist chip component - prompts user actions like opening calendar events or sharing content
+ * Pure Schmancy implementation with Tailwind CSS and RxJS state management
+ */
+@customElement('schmancy-assist-chip')
+export class SchmancyAssistChip extends SchmancyElement {
+	static styles = [css`
+	:host {
+		display: inline-block;
+		outline: none;
+		width: fit-content;
+		min-width: fit-content;
+	}
+
+	:host([disabled]) {
+		pointer-events: none;
+	}
+
+	.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])) button:hover .state-layer {
+		opacity: 0.08;
+	}
+
+	:host(:not([disabled])) button:focus-visible .state-layer {
+		opacity: 0.1;
+	}
+
+	:host(:not([disabled])) button:active .state-layer {
+		opacity: 0.1;
+	}
+`];
+	/** Value identifier for the chip */
+	@property({ reflect: true }) value = ''
+
+	/** Optional icon name (Material Symbols) */
+	@property({ reflect: true }) icon = ''
+
+	/** Optional href for navigation */
+	@property({ reflect: true }) href = ''
+
+	/** Target for navigation (e.g., '_blank') */
+	@property({ reflect: true }) target = ''
+
+	/** Disable the chip */
+	@property({ type: Boolean, reflect: true }) disabled = false
+
+	/** Elevated style variant - true by default per M3 spec for assist chips */
+	@property({ type: Boolean, reflect: true }) elevated = true
+
+	// RxJS state streams
+	private hover$ = new BehaviorSubject<boolean>(false)
+	private pressed$ = new BehaviorSubject<boolean>(false)
+	private focused$ = new BehaviorSubject<boolean>(false)
+
+	// UI state - only ripples needed for rendering
+	@state() private ripples: Array<{ x: number; y: number; id: number }> = []
+
+	protected static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }
+
+	private nextRippleId = 0
+
+	connectedCallback() {
+		super.connectedCallback()
+
+		// Stream management for future extensions
+		// Currently, states are handled directly in event handlers
+		// This pipeline can be extended for more complex state interactions
+		combineLatest([
+			this.hover$,
+			this.pressed$,
+			this.focused$
+		]).pipe(
+			// States are managed through event handlers directly
+			// This pipeline is kept for potential future state combinations
+			takeUntil(this.disconnecting)
+		).subscribe()
+	}
+
+	private handleClick = (e: MouseEvent) => {
+		if (this.disabled) return
+
+		// Add ripple effect
+		const button = this.shadowRoot?.querySelector('button')
+		if (button) {
+			const rect = button.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)
+		}
+
+		// Navigate if href is provided
+		if (this.href) {
+			if (this.target === '_blank') {
+				window.open(this.href, '_blank')
+			} else {
+				window.location.href = this.href
+			}
+		}
+
+		// Dispatch action event
+		this.dispatchEvent(new CustomEvent('action', {
+			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.pressed$.next(true)
+
+			// Simulate click
+			const clickEvent = new MouseEvent('click', {
+				bubbles: true,
+				cancelable: true,
+				clientX: 0,
+				clientY: 0
+			})
+			this.handleClick(clickEvent)
+
+			setTimeout(() => this.pressed$.next(false), 100)
+		}
+	}
+
+	private handleFocus = () => {
+		this.focused$.next(true)
+	}
+
+	private handleBlur = () => {
+		this.focused$.next(false)
+	}
+
+	render() {
+		const hasIcon = !!this.icon;
+
+		const classes = {
+			'relative': true,
+			'inline-flex': true,
+			'items-center': true,
+			'gap-2': true,
+			'h-8': true, // M3: 32px height
+			'min-h-[32px]': true,
+			'rounded-full': true,
+			'cursor-pointer': !this.disabled,
+			'transition-all': true,
+			'duration-200': true,
+			'select-none': true,
+			'overflow-hidden': true,
+
+			// M3 Padding: 8px with icon, 16px without (leading), 16px trailing
+			'pl-2': hasIcon, // 8px with icon
+			'pl-4': !hasIcon, // 16px without icon
+			'pr-4': true, // 16px trailing
+
+			// M3 Colors - assist chips are elevated by default
+			'bg-surface-containerLow': true,
+			'text-surface-onVariant': true,
+
+			// M3: Assist chips elevated by default (shadow-1)
+			'shadow-sm': this.elevated && !this.disabled, // shadow-1 for elevation
+			'hover:shadow-md': this.elevated && !this.disabled, // elevated on hover
+
+			// Focus 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
+			'opacity-38': this.disabled, // M3 disabled opacity
+			'cursor-not-allowed': this.disabled
+		}
+
+		return html`
+			<button
+				type="button"
+				class=${classMap(classes)}
+				?disabled=${this.disabled}
+				@click=${this.handleClick}
+				@keydown=${this.handleKeyDown}
+				@mouseenter=${() => this.hover$.next(true)}
+				@mouseleave=${() => this.hover$.next(false)}
+				@mousedown=${() => this.pressed$.next(true)}
+				@mouseup=${() => this.pressed$.next(false)}
+				@focus=${this.handleFocus}
+				@blur=${this.handleBlur}
+				tabindex=${this.disabled ? '-1' : '0'}
+				role="button"
+				aria-disabled=${this.disabled}
+				aria-label=${this.value}
+			>
+				${this.icon ? html`
+					<schmancy-icon class="text-[18px] shrink-0">${this.icon}</schmancy-icon>
+				` : ''}
+				<span class="text-sm font-medium leading-5">
+					<slot></slot>
+				</span>
+
+				<!-- 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>
+			</button>
+		`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'schmancy-assist-chip': SchmancyAssistChip
+	}
+}
+
+export type AssistChipActionEvent = { value: string }

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

@@ -0,0 +1,234 @@
+import { SchmancyFormField } from '@mixins/formField.mixin'
+import { css, html, nothing, PropertyValues } from 'lit'
+import { customElement, property, queryAssignedElements } from 'lit/decorators.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
+import { when } from 'lit/directives/when.js'
+import { BehaviorSubject, combineLatest } from 'rxjs'
+import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators'
+import { fullWidth } from '../../../directives/layout'
+import type { FilterChipChangeEvent as SchmancyChipChangeEvent } from './filter-chip'
+import { SchmancyFilterChip as SchmancyChip } from './filter-chip'
+
+export type SchmancyChipsChangeEvent = CustomEvent<{ value: string | string[] }>
+
+@customElement('schmancy-chips')
+export default class SchmancyChips extends SchmancyFormField(css`
+:host {
+	display: block;
+	height: fit-content;
+	width: fit-content;
+}
+`) {
+	// FACE wiring (formAssociated, internals, attachInternals) comes from
+	// SchmancyFormField. Same for: name, required, disabled, validationMessage,
+	// validateOn, touched/dirty/pristine/submitted, markTouched/markSubmitted,
+	// formResetCallback, formDisabledCallback, FIELD_CONNECT_EVENT dispatch,
+	// emitChange(), checkValidity(), reportValidity(), setCustomValidity().
+
+	/** Whether multiple chips can be selected simultaneously. */
+	@property({ type: Boolean, reflect: true })
+	multi: boolean = false
+
+	// Override `value` with the chips-specific type and a custom getter/setter
+	// pair backed by reactive subjects.
+	@property({ reflect: false })
+	override get value(): string | string[] {
+		return this.multi
+			? (this.values$?.value ?? [])
+			: (this.value$?.value ?? '')
+	}
+	override set value(v: string | string[]) {
+		const old = this.value
+		if (this.multi) {
+			const arr = Array.isArray(v)
+				? v
+				: v ? String(v).split(',').map(s => s.trim()).filter(Boolean) : []
+			this.values$?.next(arr)
+		} else {
+			this.value$?.next(Array.isArray(v) ? (v[0] ?? '') : String(v ?? ''))
+		}
+		this.requestUpdate('value', old)
+	}
+
+	/** Typed convenience alias for multi-mode consumers. */
+	get values(): string[] {
+		return [...(this.values$?.value ?? [])]
+	}
+	set values(v: string[]) {
+		this.values$?.next(Array.isArray(v) ? [...v] : [])
+	}
+
+	@property({ type: Boolean, reflect: true })
+	wrap: boolean = false
+
+	@property({ type: String, reflect: true })
+	justify: 'start' | 'center' | 'end' = 'start'
+
+	@queryAssignedElements({
+		selector:
+			'schmancy-chip, schmancy-filter-chip, schmancy-assist-chip, schmancy-input-chip, schmancy-suggestion-chip',
+		flatten: true,
+	})
+	chips!: (SchmancyChip | HTMLElement)[]
+
+	// Two internal streams — one for single mode, one for multi mode.
+	private value$ = new BehaviorSubject<string>('')
+	private values$ = new BehaviorSubject<string[]>([])
+
+	protected override willUpdate(changedProps: PropertyValues): void {
+		super.willUpdate(changedProps)
+		// super handles the string path; fix the array path for multi mode.
+		if (changedProps.has('value') && Array.isArray(this.value) && this.name) {
+			const fd = new FormData()
+			this.value.forEach(v => fd.append(this.name, v))
+			this.internals?.setFormValue(fd)
+		}
+	}
+
+	override checkValidity(): boolean {
+		if (this.required && Array.isArray(this.value) && this.value.length === 0) {
+			const msg = this.errorMessages?.valueMissing ?? 'This field is required'
+			this.internals?.setValidity({ valueMissing: true }, msg)
+			if (this.submitted || this.dirty || this.touched || this.validateOn === 'always') {
+				this.error = true
+				this.validationMessage = msg
+			}
+			return false
+		}
+		return super.checkValidity()
+	}
+
+	override connectedCallback() {
+		super.connectedCallback()
+
+		// Sync BehaviorSubjects with whatever value was set before connection.
+		if (this.multi) {
+			const cur = this.value
+			this.values$.next(Array.isArray(cur) ? cur : [])
+		} else {
+			const cur = this.value
+			this.value$.next(Array.isArray(cur) ? (cur[0] ?? '') : String(cur ?? ''))
+		}
+
+		combineLatest([
+			this.value$.pipe(distinctUntilChanged()),
+			this.values$.pipe(
+				distinctUntilChanged((prev, curr) => prev.length === curr.length && prev.every((v, i) => v === curr[i])),
+			),
+		])
+			.pipe(
+				debounceTime(0),
+				takeUntil(this.disconnecting),
+			)
+			.subscribe(([value, values]) => {
+				this.updateChipStates(value, values)
+			})
+	}
+
+	private updateChipStates(value: string, values: string[]) {
+		if (!this.chips) return
+
+		this.chips.forEach(chip => {
+			if ('value' in chip && 'selected' in chip) {
+				const filterChip = chip as SchmancyChip
+				if (this.multi) {
+					filterChip.selected = values.length > 0 && values.includes(filterChip.value)
+				} else {
+					filterChip.selected = value !== '' && value === filterChip.value
+				}
+			}
+		})
+	}
+
+	async change(e: CustomEvent<SchmancyChipChangeEvent>) {
+		e.preventDefault()
+		e.stopPropagation()
+
+		const { value: chipValue, selected } = e.detail
+
+		if (this.multi) {
+			const old = this.value
+			if (selected) {
+				if (!this.values$.value.includes(chipValue)) {
+					this.values$.next([...this.values$.value, chipValue])
+				}
+			} else {
+				this.values$.next(this.values$.value.filter(v => v !== chipValue))
+			}
+			this.requestUpdate('value', old)
+		} else {
+			const old = this.value
+			if (selected) {
+				this.value$.next(chipValue)
+			} else if (!this.required) {
+				this.value$.next('')
+			} else {
+				// Required single-mode: ignore deselection attempt.
+				return
+			}
+			this.requestUpdate('value', old)
+		}
+
+		this.emitChange({ value: this.multi ? this.values$.value : this.value$.value })
+	}
+
+	override resetForm(): void {
+		super.resetForm()
+		this.value$.next('')
+		this.values$.next([])
+	}
+
+	protected firstUpdated(_changedProperties: PropertyValues): void {
+		super.firstUpdated(_changedProperties)
+		this.updateChipStates(this.value$.value, this.values$.value)
+	}
+
+	protected render(): unknown {
+		const classes = {
+			'flex flex-nowrap justify-center gap-2': true,
+			'flex-wrap': this.wrap,
+			'justify-center': this.justify === 'center',
+		}
+		const wrapperClasses = {
+			'rounded-lg transition-all duration-200': true,
+			'outline outline-2 outline-offset-4 outline-error-default': this.error,
+		}
+		return html`
+			<div class="${this.classMap(wrapperClasses)}">
+				<schmancy-scroll
+					hide
+					.direction=${this.wrap ? 'vertical' : 'horizontal'}
+					class="${this.classMap(classes)}"
+					${fullWidth()}
+					@change=${this.change}
+				>
+					<slot
+						@slotchange=${() => {
+							this.updateChipStates(this.value$.value, this.values$.value)
+						}}
+					></slot>
+				</schmancy-scroll>
+			</div>
+
+			${when(
+				this.hint || (this.error && this.validationMessage),
+				() => html`
+					<div
+						id="hint-${this.id}"
+						class="mt-1 text-sm ${this.error ? 'text-error-default' : 'text-surface-onVariant'}"
+						role=${ifDefined(this.error ? 'alert' : undefined)}
+						aria-live="polite"
+					>
+						${this.error && this.validationMessage ? this.validationMessage : this.hint}
+					</div>
+				`,
+				() => nothing,
+			)}`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'schmancy-chips': SchmancyChips
+	}
+}