@mhmo91/schmancy 0.10.42 → 0.10.43

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

@@ -1 +1 @@
-export * from './autocomplete';
+export * from './autocomplete'

package/src/form/fields/checkbox/checkbox.ts

@@ -75,10 +75,7 @@ class SchmancyCheckboxElement extends SchmancyFormField() {
 		const isValid = !this.required || this.value === true
 		const message = isValid ? '' : 'Please check this box if you want to proceed.'
 
-		this.internals?.setValidity(
-			isValid ? {} : { valueMissing: true },
-			isValid ? undefined : message,
-		)
+		this.internals?.setValidity(isValid ? {} : { valueMissing: true }, isValid ? undefined : message)
 
 		if (this.shouldShowError()) {
 			this.error = !isValid

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

@@ -11,57 +11,59 @@ import { takeUntil } from 'rxjs/operators'
  */
 @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;
-	}
+	static styles = [
+		css`
+			:host {
+				display: inline-block;
+				outline: none;
+				width: fit-content;
+				min-width: fit-content;
+			}
 
-	:host([disabled]) {
-		pointer-events: none;
-	}
+			: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;
-	}
+			.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;
-		}
-	}
+			@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;
-	}
+			/* 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:hover .state-layer {
+				opacity: 0.08;
+			}
 
-	:host(:not([disabled])) button:focus-visible .state-layer {
-		opacity: 0.1;
-	}
+			:host(:not([disabled])) button:focus-visible .state-layer {
+				opacity: 0.1;
+			}
 
-	:host(:not([disabled])) button:active .state-layer {
-		opacity: 0.1;
-	}
-`];
+			:host(:not([disabled])) button:active .state-layer {
+				opacity: 0.1;
+			}
+		`,
+	]
 	/** Value identifier for the chip */
 	@property({ reflect: true }) value = ''
 
@@ -98,15 +100,13 @@ export class SchmancyAssistChip extends SchmancyElement {
 		// 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()
+		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) => {
@@ -138,11 +138,13 @@ export class SchmancyAssistChip extends SchmancyElement {
 		}
 
 		// Dispatch action event
-		this.dispatchEvent(new CustomEvent('action', {
-			detail: { value: this.value },
-			bubbles: true,
-			composed: true
-		}))
+		this.dispatchEvent(
+			new CustomEvent('action', {
+				detail: { value: this.value },
+				bubbles: true,
+				composed: true,
+			}),
+		)
 	}
 
 	private handleKeyDown = (e: KeyboardEvent) => {
@@ -157,7 +159,7 @@ export class SchmancyAssistChip extends SchmancyElement {
 				bubbles: true,
 				cancelable: true,
 				clientX: 0,
-				clientY: 0
+				clientY: 0,
 			})
 			this.handleClick(clickEvent)
 
@@ -174,10 +176,10 @@ export class SchmancyAssistChip extends SchmancyElement {
 	}
 
 	render() {
-		const hasIcon = !!this.icon;
+		const hasIcon = !!this.icon
 
 		const classes = {
-			'relative': true,
+			relative: true,
 			'inline-flex': true,
 			'items-center': true,
 			'gap-2': true,
@@ -211,7 +213,7 @@ export class SchmancyAssistChip extends SchmancyElement {
 
 			// Disabled
 			'opacity-38': this.disabled, // M3 disabled opacity
-			'cursor-not-allowed': this.disabled
+			'cursor-not-allowed': this.disabled,
 		}
 
 		return html`
@@ -232,20 +234,15 @@ export class SchmancyAssistChip extends SchmancyElement {
 				aria-disabled=${this.disabled}
 				aria-label=${this.value}
 			>
-				${this.icon ? html`
-					<schmancy-icon class="text-[18px] shrink-0">${this.icon}</schmancy-icon>
-				` : ''}
+				${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>
-				`)}
+				${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>
@@ -260,4 +257,4 @@ declare global {
 	}
 }
 
-export type AssistChipActionEvent = { value: string }
+export type AssistChipActionEvent = { value: string }

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

@@ -13,11 +13,11 @@ 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;
-}
+	:host {
+		display: block;
+		height: fit-content;
+		width: fit-content;
+	}
 `) {
 	// FACE wiring (formAssociated, internals, attachInternals) comes from
 	// SchmancyFormField. Same for: name, required, disabled, validationMessage,
@@ -33,16 +33,19 @@ export default class SchmancyChips extends SchmancyFormField(css`
 	// pair backed by reactive subjects.
 	@property({ reflect: false })
 	override get value(): string | string[] {
-		return this.multi
-			? (this.values$?.value ?? [])
-			: (this.value$?.value ?? '')
+		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) : []
+				: 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 ?? ''))
@@ -116,10 +119,7 @@ export default class SchmancyChips extends SchmancyFormField(css`
 				distinctUntilChanged((prev, curr) => prev.length === curr.length && prev.every((v, i) => v === curr[i])),
 			),
 		])
-			.pipe(
-				debounceTime(0),
-				takeUntil(this.disconnecting),
-			)
+			.pipe(debounceTime(0), takeUntil(this.disconnecting))
 			.subscribe(([value, values]) => {
 				this.updateChipStates(value, values)
 			})
@@ -193,8 +193,7 @@ export default class SchmancyChips extends SchmancyFormField(css`
 			'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)}">
+		return html` <div class="${this.classMap(wrapperClasses)}">
 				<schmancy-scroll
 					hide
 					.direction=${this.wrap ? 'vertical' : 'horizontal'}

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

@@ -20,34 +20,40 @@ import { magnetic } from '../../../directives/magnetic'
  * ```
  */
 export class SchmancyFilterChip extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: inline-flex;
-		flex-shrink: 0;
-		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;
-	}
-`];
+	static styles = [
+		css`
+			:host {
+				display: inline-flex;
+				flex-shrink: 0;
+				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 = ''
@@ -77,7 +83,6 @@ export class SchmancyFilterChip extends SchmancyElement {
 	@property({ type: Boolean, reflect: true })
 	elevated: boolean = false
 
-
 	constructor() {
 		super()
 		try {
@@ -105,7 +110,7 @@ export class SchmancyFilterChip extends SchmancyElement {
 	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)
+			this.internals?.setFormValue(this.#selected ? this.value || 'on' : null)
 		}
 	}
 
@@ -158,7 +163,6 @@ export class SchmancyFilterChip extends SchmancyElement {
 		}
 	}
 
-
 	protected render(): unknown {
 		const chipClasses = {
 			'inline-flex': true,
@@ -172,7 +176,7 @@ export class SchmancyFilterChip extends SchmancyElement {
 			'select-none': true,
 			'text-sm': true,
 			'font-medium': true,
-			'relative': true,
+			relative: true,
 			'min-h-[32px]': true,
 
 			// Background and text colors based on selection state

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

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