@mhmo91/schmancy 0.10.15 → 0.10.17

package/src/{autocomplete → form/fields/autocomplete}/autocomplete.ts

@@ -1,4 +1,4 @@
-import { SchmancyElement } from '@mixins/index'
+import { SchmancyFormField } from '@mixins/index'
 import { InputSize, SchmancyInput } from '@schmancy/input'
 import SchmancyOption from '@schmancy/option/option'
 import { html, nothing, unsafeCSS } from 'lit'
@@ -10,21 +10,22 @@ import { repeat } from 'lit/directives/repeat.js'
 import { when } from 'lit/directives/when.js'
 import {
     BehaviorSubject,
-    combineLatest
+    combineLatest,
+    fromEvent,
+    timer
 } from 'rxjs'
 import {
     debounceTime,
     distinctUntilChanged,
-    take,
     takeUntil,
     tap
 } from 'rxjs/operators'
 import style from './autocomplete.scss?inline'
 
 // Import the similarity function (or include it inline)
-import { similarity } from '../utils/search'
+import { similarity } from '../../../utils/search'
 // Import chip component for multi-select display
-import '../chips/input-chip'
+import '../../../chips/input-chip'
 
 export type SchmancyAutocompleteChangeEvent = CustomEvent<{
     value: string | string[]
@@ -48,26 +49,16 @@ interface FilteredOption {
  * @prop {string[]} values - Selected values (multi-select mode)
  */
 @customElement('schmancy-autocomplete')
-export default class SchmancyAutocomplete extends SchmancyElement {
-    static styles = [unsafeCSS(style)];
-
-    static formAssociated = true
-    internals: ElementInternals | undefined
-
-    constructor() {
-        super()
-        try {
-            this.internals = this.attachInternals()
-        } catch {
-            this.internals = undefined
-        }
-    }
+export default class SchmancyAutocomplete extends SchmancyFormField(unsafeCSS(style)) {
 
-    get form(): HTMLFormElement | null {
-        return this.internals?.form ?? null
-    }
+    // `formAssociated`, `internals`, `attachInternals`, `name`, `label`,
+    // `required`, `disabled`, `error`, `validationMessage`, `hint`, `id`,
+    // `validateOn`, `touched/dirty/submitted`, `markTouched/markSubmitted`,
+    // `setCustomValidity`, `formDisabledCallback`, FIELD_CONNECT_EVENT dispatch
+    // — all from the mixin.
 
-    formResetCallback(): void {
+    /** Override mixin's resetForm with autocomplete-specific subject reset. */
+    override resetForm(): void {
         if (this.multi) {
             this._selectedValues$.next([])
         } else {
@@ -75,25 +66,16 @@ export default class SchmancyAutocomplete extends SchmancyElement {
         }
         this._inputValue = ''
         this._inputValue$.next('')
-        this.error = false
-        this.validationMessage = ''
-    }
-
-    formDisabledCallback(disabled: boolean): void {
-        // The component does not expose a disabled prop directly; propagate via attribute.
-        if (disabled) this.setAttribute('disabled', '')
-        else this.removeAttribute('disabled')
+        super.resetForm()
     }
 
     // Track whether value/values have been explicitly set
      _valueSet: boolean = false
      _valuesSet: boolean = false
 
-    // Public API properties
-    @property({ type: Boolean }) required = false
+    // Autocomplete-specific properties only — `name`, `label`, `required`,
+    // `error`, `validationMessage` come from the mixin.
     @property({ type: String }) placeholder = ''
-    @property({ type: String, reflect: true }) label = ''
-    @property({ type: String }) name = ''
     @property({ type: String }) maxHeight = '300px'
     @property({ type: Boolean }) multi = false
     @property({ type: String }) description = ''
@@ -101,8 +83,6 @@ export default class SchmancyAutocomplete extends SchmancyElement {
     @property({ type: String }) autocomplete = 'off'
     @property({ type: Number }) debounceMs = 200
     @property({ type: Number }) similarityThreshold = 0.3 // Minimum similarity score to show option
-    @property({ type: Boolean }) error = false
-    @property({ type: String }) validationMessage = ''
 
     private readonly _a11yId = `schmancy-autocomplete-${Math.random().toString(36).slice(2, 10)}`
 
@@ -116,14 +96,14 @@ export default class SchmancyAutocomplete extends SchmancyElement {
         this._selectedValues$.next(Array.isArray(vals) ? [...vals] : [])
     }
 
-    // Value property
+    // Value property — narrowed override of the mixin's wide value union.
     @property({ type: String, reflect: true })
-    get value() {
-        return this.multi 
+    override get value(): string {
+        return this.multi
             ? this._selectedValues$.value.join(',')
             : this._selectedValue$.value
     }
-    set value(val: string) {
+    override set value(val: string) {
         this._valueSet = true
         if (this.multi) {
             const newValues = val ? val.split(',').map(v => v.trim()).filter(Boolean) : []
@@ -159,13 +139,9 @@ export default class SchmancyAutocomplete extends SchmancyElement {
     private _selectedValues$ = new BehaviorSubject<string[]>([])
     private _inputValue$ = new BehaviorSubject<string>('')
 
-    connectedCallback() {
+    override connectedCallback() {
+        // FIELD_CONNECT_EVENT is dispatched by the mixin's connectedCallback.
         super.connectedCallback()
-
-        if (!this.id) {
-            this.id = `sch-autocomplete-${Math.random().toString(36).slice(2, 9)}`
-        }
-
         this._setupAutocompleteLogic()
         this._setupDocumentClickHandler()
     }
@@ -218,15 +194,17 @@ export default class SchmancyAutocomplete extends SchmancyElement {
             option.dataset.schmancyAutocompleteHandlers = 'attached'
 
             // Prevent blur handler from interfering with option selection
-            option.addEventListener('mousedown', (e: MouseEvent) => {
-                e.preventDefault() // Prevent focus loss
-            })
+            fromEvent<MouseEvent>(option, 'mousedown')
+                .pipe(takeUntil(this.disconnecting))
+                .subscribe(e => e.preventDefault())
 
             // Handle the actual selection
-            option.addEventListener('click', (e: MouseEvent) => {
-                e.stopPropagation()
-                this._selectOption(option)
-            })
+            fromEvent<MouseEvent>(option, 'click')
+                .pipe(takeUntil(this.disconnecting))
+                .subscribe(e => {
+                    e.stopPropagation()
+                    this._selectOption(option)
+                })
         })
     }
 
@@ -331,23 +309,16 @@ export default class SchmancyAutocomplete extends SchmancyElement {
     }
 
     private _setupDocumentClickHandler() {
-        // Simple document click handler
-        const handleDocumentClick = (e: MouseEvent) => {
-            if (!this._open) return
-
-            const path = e.composedPath()
-            if (!path.includes(this) && !this._options.some(opt => path.includes(opt))) {
-                this._open = false
-                this._updateInputDisplay()
-            }
-        }
-
-        document.addEventListener('click', handleDocumentClick)
-
-        // Cleanup on disconnect
-        this.disconnecting.pipe(take(1)).subscribe(() => {
-            document.removeEventListener('click', handleDocumentClick)
-        })
+        fromEvent<MouseEvent>(document, 'click')
+            .pipe(takeUntil(this.disconnecting))
+            .subscribe(e => {
+                if (!this._open) return
+                const path = e.composedPath()
+                if (!path.includes(this) && !this._options.some(opt => path.includes(opt))) {
+                    this._open = false
+                    this._updateInputDisplay()
+                }
+            })
     }
 
 
@@ -721,10 +692,12 @@ export default class SchmancyAutocomplete extends SchmancyElement {
             event.preventDefault()
             this._openDropdown()
 
-            setTimeout(() => {
-                const firstVisible = this._options.find(opt => !opt.hidden)
-                firstVisible?.focus()
-            }, 10)
+            timer(10)
+                .pipe(takeUntil(this.disconnecting))
+                .subscribe(() => {
+                    const firstVisible = this._options.find(opt => !opt.hidden)
+                    firstVisible?.focus()
+                })
             return
         }
 

package/src/{checkbox → form/fields/checkbox}/checkbox.test.ts

@@ -1,5 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it } from 'vitest'
-import { expectNoA11yViolations } from '../test-utils/a11y'
+import { expectNoA11yViolations } from '../../../test-utils/a11y'
 import './checkbox'
 
 const nextUpdate = () => new Promise(r => requestAnimationFrame(() => r(null)))

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

@@ -0,0 +1,126 @@
+import '@material/web/checkbox/checkbox.js'
+import { html, LitElement, type PropertyValues } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { when } from 'lit/directives/when.js'
+import { SchmancyFormField } from '@mixins/index'
+
+export type schmancyCheckBoxChangeEvent = CustomEvent<{
+	value: boolean
+}>
+
+/**
+ * @element schmancy-checkbox
+ * @slot - The label for the checkbox.
+ * @fires change - Event fired when the checkbox value changes.
+ */
+@customElement('schmancy-checkbox')
+class SchmancyCheckboxElement extends SchmancyFormField() {
+	// Inner <md-checkbox> is the focusable surface; route host focus to it.
+	protected static shadowRootOptions = {
+		...LitElement.shadowRootOptions,
+		delegatesFocus: true,
+	}
+
+	// FACE wiring (formAssociated, internals, attachInternals), `name`,
+	// `disabled`, `required`, `id`, `label`, `error`, `validationMessage`,
+	// `validateOn`, touched/dirty/submitted, markTouched/markSubmitted,
+	// FIELD_CONNECT_EVENT dispatch — all from the mixin.
+
+	/**
+	 * Boolean checked state. Test contract: `cb.value = true` flips the state.
+	 * The FormData *string* is read from `true-value` attribute (or `'on'`
+	 * default) — kept separate from `value` to keep the boolean-state ergonomic.
+	 */
+	@property({ type: Boolean, reflect: true })
+	override value: boolean = false
+
+	/** Alias for `value` for read-side ergonomics. */
+	@property({ type: Boolean })
+	get checked(): boolean {
+		return this.value
+	}
+	set checked(val: boolean) {
+		this.value = val
+	}
+
+	/**
+	 * M3-aligned sizes: 24dp (xxs) → 32dp (xs) → 40dp (sm) → 48dp (md) → 56dp (lg).
+	 */
+	@property({ type: String })
+	size: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' = 'md'
+
+	private get _trueValue(): string {
+		return this.getAttribute('true-value') ?? 'on'
+	}
+
+	override willUpdate(changed: PropertyValues): void {
+		super.willUpdate(changed)
+		if (changed.has('value') || changed.has('name')) {
+			this.internals?.setFormValue(this.value ? this._trueValue : null)
+			if (this.value) this.internals?.states.add('checked')
+			else this.internals?.states.delete('checked')
+			this.checkValidity()
+		}
+		if (changed.has('required') || changed.has('disabled')) {
+			this.checkValidity()
+		}
+	}
+
+	/** Checkbox validity is `checked === true` when required. */
+	override checkValidity(): boolean {
+		if (this.disabled) {
+			this.internals?.setValidity({})
+			return true
+		}
+		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,
+		)
+
+		if (this._shouldShowError()) {
+			this.error = !isValid
+			this.validationMessage = message
+		}
+		return isValid
+	}
+
+	/** Emit only when checked. */
+	override toFormEntries(): Array<[string, FormDataEntryValue]> {
+		if (!this.name || this.disabled || !this.value) return []
+		return [[this.name, this._trueValue]]
+	}
+
+	render() {
+		return html`
+			<label class="grid grid-flow-col items-center space-x-2 w-fit">
+				<md-checkbox
+					.required=${this.required}
+					.disabled=${this.disabled}
+					?checked=${this.value === true}
+					@change=${(e: Event) => {
+						this.value = (e.target as HTMLInputElement).checked
+						this.markTouched()
+						this.emitChange({ value: this.value })
+					}}
+				>
+				</md-checkbox>
+				${when(
+					this.label,
+					() => html`<span>${this.label}</span>`,
+					() => html`<slot></slot>`,
+				)}
+			</label>
+		`
+	}
+}
+
+export { SchmancyCheckboxElement as SchmancyCheckbox }
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'schmancy-checkbox': SchmancyCheckboxElement
+	}
+}

package/src/form/fields/date-range/date-range.test.ts

@@ -0,0 +1,102 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import './date-range'
+import { expectNoA11yViolations } from '../../../test-utils/a11y'
+
+const nextUpdate = () => new Promise(r => requestAnimationFrame(() => r(null)))
+
+describe('schmancy-date-range', () => {
+	let host: HTMLDivElement
+
+	beforeEach(() => {
+		host = document.createElement('div')
+		document.body.appendChild(host)
+	})
+
+	afterEach(() => {
+		host.remove()
+	})
+
+	it('contributes flat-suffix dateFrom/dateTo entries to FormData', async () => {
+		host.innerHTML = `
+			<form>
+				<schmancy-date-range name="window"></schmancy-date-range>
+			</form>
+		`
+		const form = host.querySelector('form') as HTMLFormElement
+		const dr = host.querySelector('schmancy-date-range') as HTMLElement & {
+			dateFrom: { label: string; value: string }
+			dateTo: { label: string; value: string }
+		}
+		await nextUpdate()
+		await nextUpdate()
+		dr.dateFrom = { label: 'From', value: '2026-01-01' }
+		dr.dateTo = { label: 'To', value: '2026-01-31' }
+		await nextUpdate()
+		await nextUpdate()
+		const fd = new FormData(form)
+		expect(fd.get('windowFrom')).toBe('2026-01-01')
+		expect(fd.get('windowTo')).toBe('2026-01-31')
+	})
+
+	it('omits from FormData when name is not set', async () => {
+		host.innerHTML = `<form><schmancy-date-range></schmancy-date-range></form>`
+		const form = host.querySelector('form') as HTMLFormElement
+		await nextUpdate()
+		expect([...new FormData(form).keys()]).toEqual([])
+	})
+
+	it('reports invalid when required and both dates empty', async () => {
+		host.innerHTML = `<form><schmancy-date-range name="w" required></schmancy-date-range></form>`
+		const form = host.querySelector('form') as HTMLFormElement
+		const dr = host.querySelector('schmancy-date-range') as HTMLElement & {
+			dateFrom: { label: string; value: string }
+			dateTo: { label: string; value: string }
+			checkValidity(): boolean
+		}
+		await nextUpdate()
+		await nextUpdate()
+		dr.dateFrom = { label: 'From', value: '' }
+		dr.dateTo = { label: 'To', value: '' }
+		await nextUpdate()
+		expect(dr.checkValidity()).toBe(false)
+		expect(form.checkValidity()).toBe(false)
+		dr.dateFrom = { label: 'From', value: '2026-01-01' }
+		dr.dateTo = { label: 'To', value: '2026-01-02' }
+		await nextUpdate()
+		await nextUpdate()
+		expect(dr.checkValidity()).toBe(true)
+		expect(form.checkValidity()).toBe(true)
+	})
+
+	it('has no axe-core a11y violations', async () => {
+		host.innerHTML = `<schmancy-date-range name="window"></schmancy-date-range>`
+		await nextUpdate()
+		await nextUpdate()
+		// Trigger button-group rendering with values populated.
+		const dr = host.querySelector('schmancy-date-range') as HTMLElement & {
+			dateFrom: { label: string; value: string }
+			dateTo: { label: string; value: string }
+		}
+		dr.dateFrom = { label: 'From', value: '2026-01-01' }
+		dr.dateTo = { label: 'To', value: '2026-01-31' }
+		await nextUpdate()
+		await nextUpdate()
+		await expectNoA11yViolations(host)
+	})
+
+	it('omits empty dates from FormData', async () => {
+		host.innerHTML = `<form><schmancy-date-range name="w"></schmancy-date-range></form>`
+		const form = host.querySelector('form') as HTMLFormElement
+		const dr = host.querySelector('schmancy-date-range') as HTMLElement & {
+			dateFrom: { label: string; value: string }
+			dateTo: { label: string; value: string }
+		}
+		await nextUpdate()
+		dr.dateFrom = { label: 'From', value: '' }
+		dr.dateTo = { label: 'To', value: '' }
+		await nextUpdate()
+		const fd = new FormData(form)
+		expect(fd.get('wFrom')).toBeNull()
+		expect(fd.get('wTo')).toBeNull()
+	})
+})

package/src/{date-range → form/fields/date-range}/date-range.ts

@@ -1,10 +1,10 @@
-import { SchmancyElement } from '@mixins/index'
 import dayjs from 'dayjs'
 import quarterOfYear from 'dayjs/plugin/quarterOfYear'
 import { html, PropertyValues } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { fromEvent, Subscription, takeUntil, timer } from 'rxjs'
-import { show } from '../overlay/overlay.service'
+import { SchmancyFormField } from '@mixins/index'
+import { show } from '../../../overlay/overlay.service'
 import { detectDateRangeType, formatDateRange } from './date-range-helpers'
 import { DateRangePreset, generatePresetCategories, PresetCategory } from './date-range-presets'
 import { validateInitialDateRange } from './date-utils'
@@ -32,23 +32,23 @@ export type SchmancyDateRangeChangeEvent = CustomEvent<{
  * @fires change - Fired when the date range changes with dateFrom and dateTo values
  */
 @customElement('schmancy-date-range')
-export class SchmancyDateRange extends SchmancyElement {
-	// Core properties
+export class SchmancyDateRange extends SchmancyFormField() {
+	// `name`, `disabled`, `required`, `error`, `validationMessage`, `id`,
+	// `validateOn`, `touched`, `submitted`, `markTouched`, `markSubmitted`,
+	// FACE wiring, FIELD_CONNECT_EVENT dispatch — all from the mixin.
+
 	@property({ type: String }) type: 'date' | 'datetime-local' = 'date'
 	@property({ type: Object }) dateFrom: { label: string; value: string } = { label: 'From', value: '' }
 	@property({ type: Object }) dateTo: { label: string; value: string } = { label: 'To', value: '' }
 	@property({ type: String }) minDate?: string
 	@property({ type: String }) maxDate?: string
 
-	// Enhanced functionality
 	@property({ type: Array }) customPresets: Array<{
 		label: string
 		dateFrom: string
 		dateTo: string
 	}> = []
 	@property({ type: String }) format?: string
-	@property({ type: Boolean }) disabled = false
-	@property({ type: Boolean }) required = false
 	@property({ type: String }) placeholder = 'Select date range'
 	@property({ type: Boolean }) clearable = true
 	@property() step?: 'day' | 'week' | 'month' | 'year' | number
@@ -119,6 +119,89 @@ export class SchmancyDateRange extends SchmancyElement {
 		}
 	}
 
+	override willUpdate(changed: PropertyValues): void {
+		super.willUpdate(changed)
+		if (changed.has('dateFrom') || changed.has('dateTo') || changed.has('name')) {
+			// Multi-entry FACE submission: setFormValue accepts a FormData
+			// object whose entries are appended to the owning form's FormData.
+			// native `new FormData(form)` then sees both `${name}From` and
+			// `${name}To` without any consumer-side parsing.
+			if (this.name && !this.disabled) {
+				const fd = new FormData()
+				if (this.dateFrom?.value) fd.append(`${this.name}From`, this.dateFrom.value)
+				if (this.dateTo?.value) fd.append(`${this.name}To`, this.dateTo.value)
+				this.internals?.setFormValue(fd)
+			} else {
+				this.internals?.setFormValue(null)
+			}
+			this.checkValidity()
+		}
+		if (changed.has('required') || changed.has('disabled')) {
+			this.checkValidity()
+		}
+	}
+
+	/**
+	 * Date-range validity is `both dates non-empty` when required.
+	 * (Order/range constraints are out of scope here — they belong to a
+	 * domain-specific schema layer.)
+	 */
+	override checkValidity(): boolean {
+		if (this.disabled) {
+			this.internals?.setValidity({})
+			return true
+		}
+		const fromEmpty = !this.dateFrom?.value
+		const toEmpty = !this.dateTo?.value
+		const isValid = !this.required || (!fromEmpty && !toEmpty)
+		const message = isValid ? '' : 'Please select a date range.'
+
+		this.internals?.setValidity(
+			isValid ? {} : { valueMissing: true },
+			isValid ? undefined : message,
+		)
+
+		if (this._shouldShowError()) {
+			this.error = !isValid
+			this.validationMessage = message
+		}
+		return isValid
+	}
+
+	/**
+	 * Override — emit `${name}From` and `${name}To` flat-suffix entries (the
+	 * plan's chosen multi-entry encoding; native to JS consumers without
+	 * server-side bracket parsing).
+	 */
+	override toFormEntries(): Array<[string, FormDataEntryValue]> {
+		if (!this.name || this.disabled) return []
+		const entries: Array<[string, FormDataEntryValue]> = []
+		if (this.dateFrom?.value) entries.push([`${this.name}From`, this.dateFrom.value])
+		if (this.dateTo?.value) entries.push([`${this.name}To`, this.dateTo.value])
+		return entries
+	}
+
+	/** `dirty` tracks the underlying date strings, not the wide-union value. */
+	private _dateFromDefault: string = ''
+	private _dateToDefault: string = ''
+	override firstUpdated(changed: PropertyValues): void {
+		super.firstUpdated(changed)
+		this._dateFromDefault = this.dateFrom?.value ?? ''
+		this._dateToDefault = this.dateTo?.value ?? ''
+	}
+	override get dirty(): boolean {
+		return (
+			(this.dateFrom?.value ?? '') !== this._dateFromDefault ||
+			(this.dateTo?.value ?? '') !== this._dateToDefault
+		)
+	}
+
+	override resetForm(): void {
+		this.dateFrom = { ...this.dateFrom, value: this._dateFromDefault }
+		this.dateTo = { ...this.dateTo, value: this._dateToDefault }
+		super.resetForm()
+	}
+
 	private initPresetRanges() {
 		const format = this.getDateFormat()
 		const cacheKey = `${this.type}-${format}-${JSON.stringify(this.customPresets)}`

package/src/form/fields/index.ts

@@ -0,0 +1,9 @@
+export * from './autocomplete'
+export * from './checkbox'
+export * from './date-range'
+export * from './input'
+export * from './radio-group'
+export * from './range'
+export * from './select'
+export * from './switch'
+export * from './textarea'