@mhmo91/schmancy 0.10.34 → 0.10.36

package/src/chips/assist-chip.ts

@@ -1,263 +1,2 @@
-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 }
+// Moved to src/form/fields/chips/ — this is a backward-compat re-export shim.
+export * from '../form/fields/chips/assist-chip';

package/src/chips/chips.ts

@@ -1,259 +1,2 @@
-import { SchmancyElement } from '@mixins/index'
-import { css, html, PropertyValues } from 'lit'
-import { customElement, property, queryAssignedElements } from 'lit/decorators.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'
-
-@customElement('schmancy-chips')
-export default class SchmancyChips extends SchmancyElement {
-	static styles = [css`
-:host{
-	display:block;
-	height:fit-content;
-	width:fit-content;
-}
-
-`]
-
-
-	// RxJS state streams - initialized with undefined to detect if properties were set
-	private value$ = new BehaviorSubject<string>('')
-	private values$ = new BehaviorSubject<string[]>([])
-
-	// Track if properties were initialized from attributes/properties
-	private _value: string = ''
-	private _values: string[] = []
-	private _multi: boolean = false
-
-	// Track if properties have been explicitly set
-	private _valueSet: boolean = false
-	private _valuesSet: boolean = false
-
-	/**
-	 * @deprecated Use .values for multi-selection or .value for single-selection instead.
-	 * The mode is now automatically determined based on which property is used.
-	 */
-	@property({
-		type: Boolean,
-		reflect: true,
-	})
-	get multi(): boolean {
-		return this._multi
-	}
-	set multi(value: boolean) {
-		this._multi = value
-		// Note: We don't update any BehaviorSubject here as mode is now computed
-	}
-
-	/**
-	 * Automatically determines the selection mode based on which properties are in use
-	 */
-	private get mode(): 'multi' | 'single' | 'none' {
-		// Check if values array is being used (explicitly set)
-		if (this._valuesSet) {
-			return 'multi'
-		}
-		// Check if value string is being used (explicitly set)
-		if (this._valueSet) {
-			return 'single'
-		}
-		// Check if either property has been set via attributes
-		if (this.hasAttribute('values')) {
-			return 'multi'
-		}
-		if (this.hasAttribute('value')) {
-			return 'single'
-		}
-		// Fallback to deprecated multi prop for backward compatibility
-		if (this._multi === true) {
-			return 'multi'
-		}
-		// Default to none (no selection management)
-		return 'none'
-	}
-
-	@property({
-		type: Array,
-		reflect: true,
-	})
-	get values(): string[] {
-		return this._values
-	}
-	set values(value: string[]) {
-		this._values = value || []
-		this._valuesSet = true // Mark that values has been explicitly set
-		this.values$.next(this._values)
-	}
-
-	@property({
-		type: String,
-		reflect: true,
-	})
-	get value(): string {
-		return this._value
-	}
-	set value(value: string) {
-		this._value = value || ''
-		this._valueSet = true // Mark that value has been explicitly set
-		this.value$.next(this._value)
-	}
-
-	@queryAssignedElements({
-		selector:
-			'schmancy-chip, schmancy-filter-chip, schmancy-assist-chip, schmancy-input-chip, schmancy-suggestion-chip',
-		flatten: true,
-	})
-	chips!: (SchmancyChip | HTMLElement)[]
-
-	@property({
-		type: Boolean,
-		reflect: true,
-	})
-	wrap: boolean = false
-
-	@property({
-		type: Boolean,
-		reflect: true,
-	})
-	required: boolean = false
-
-	@property({
-		type: String,
-		reflect: true,
-	})
-	justify: 'start' | 'center' | 'end' = 'start'
-
-	connectedCallback() {
-		super.connectedCallback()
-
-		// Initialize BehaviorSubjects with current property values
-		// This ensures properties set before connectedCallback are respected
-		this.value$.next(this._value)
-		this.values$.next(this._values)
-
-		// Set up reactive pipeline for state synchronization
-		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), // Ensure DOM is ready
-				takeUntil(this.disconnecting),
-			)
-			.subscribe(([value, values]) => {
-				// Reactively update chip states based on container state and auto-detected mode
-				this.updateChipStates(this.mode, value, values)
-			})
-	}
-
-	private updateChipStates(mode: 'multi' | 'single' | 'none', value: string, values: string[]) {
-		if (!this.chips) return
-
-		// If mode is 'none', don't manage selection state
-		if (mode === 'none') return
-
-		this.chips.forEach(chip => {
-			if ('value' in chip && 'selected' in chip) {
-				const filterChip = chip as SchmancyChip
-				if (mode === 'multi') {
-					// In multi mode: only select if values array explicitly includes this chip's value
-					filterChip.selected = values.length > 0 && values.includes(filterChip.value)
-				} else if (mode === 'single') {
-					// In single mode: only select if value is non-empty AND matches this chip's value
-					// This prevents chips from being selected when value is empty string
-					filterChip.selected = value !== '' && value === filterChip.value
-				}
-			}
-		})
-	}
-
-	async change(e: CustomEvent<SchmancyChipChangeEvent>) {
-		e.preventDefault()
-		e.stopPropagation()
-
-		// If mode is 'none', don't handle selection changes
-		if (this.mode === 'none') return
-
-		const { value, selected } = e.detail
-
-		// Update the reactive streams and internal tracking, which will trigger state synchronization
-		if (this.mode === 'multi') {
-			if (selected) {
-				// Add value if not already present
-				if (!this._values.includes(value)) {
-					this._values = [...this._values, value]
-					this.values$.next(this._values)
-				}
-			} else {
-				// Remove value
-				this._values = this._values.filter(v => v !== value)
-				this.values$.next(this._values)
-			}
-		} else if (this.mode === 'single') {
-			if (selected) {
-				this._value = value
-			} else if (!this.required) {
-				// Allow deselection if not required
-				this._value = ''
-			} else {
-				// Required mode - ignore deselection
-				return
-			}
-			this.value$.next(this._value)
-		}
-
-		// Request update to trigger re-render and property reflection
-		this.requestUpdate()
-
-		// Dispatch change event with appropriate detail based on mode
-		this.dispatchEvent(
-			new CustomEvent<SchmancyChipsChangeEvent>('change', {
-				detail: this.mode === 'multi' ? this._values : this._value,
-				bubbles: true,
-			}),
-		)
-	}
-
-	protected firstUpdated(_changedProperties: PropertyValues): void {
-		super.firstUpdated(_changedProperties)
-		// Initial state synchronization will happen through the reactive pipeline
-		// Force an initial update to ensure chips are synchronized
-		this.updateChipStates(this.mode, this._value, this._values)
-	}
-
-	protected render(): unknown {
-		const classes = {
-			'flex flex-nowrap justify-center gap-2': true,
-			'flex-wrap': this.wrap,
-			'justify-center': this.justify === 'center',
-		}
-		return html`
-			<schmancy-scroll
-				hide
-				.direction=${this.wrap ? 'vertical' : 'horizontal'}
-				class="${this.classMap(classes)}"
-				${fullWidth()}
-				@change=${this.change}
-			>
-				<slot
-					@slotchange=${() => {
-						// When slot changes, trigger state update through reactive pipeline
-						this.updateChipStates(this.mode, this._value, this._values)
-					}}
-				></slot>
-			</schmancy-scroll>
-		`
-	}
-}
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'schmancy-chips': SchmancyChips
-	}
-}
-export type SchmancyChipsChangeEvent = string | Array<string>
+// Moved to src/form/fields/chips/ — this is a backward-compat re-export shim.
+export * from '../form/fields/chips/chips';