@melodicdev/components 1.5.12 → 1.6.0

package/lib/components/forms/date-picker/calendar.template.js

@@ -1,55 +1,144 @@
-import { html, classMap, repeat } from '@melodicdev/core';
+import { html, classMap, repeat, when } from '@melodicdev/core';
+function dayGrid(c) {
+    return html `
+		<div class="ml-calendar__weekdays" role="row">
+			${repeat(c.weekdays, (d) => d, (d) => html `
+				<span class="ml-calendar__weekday" role="columnheader">${d}</span>
+			`)}
+		</div>
+
+		<div class="ml-calendar__grid" @keydown=${c.handleGridKeyDown}>
+			${repeat(c.days, (day) => day.iso, (day) => html `
+				<button
+					type="button"
+					class=${classMap({
+        'ml-calendar__day': true,
+        'ml-calendar__day--other-month': !day.isCurrentMonth,
+        'ml-calendar__day--today': day.isToday,
+        'ml-calendar__day--selected': day.isSelected,
+        'ml-calendar__day--disabled': day.isDisabled
+    })}
+					?disabled=${day.isDisabled || !day.isCurrentMonth}
+					tabindex=${day.isCurrentMonth ? '0' : '-1'}
+					aria-selected=${day.isSelected ? 'true' : 'false'}
+					aria-label=${day.iso}
+					@click=${() => c.selectDay(day)}
+				>
+					<span class="ml-calendar__day-number">${day.date}</span>
+					${day.isToday ? html `<span class="ml-calendar__today-dot"></span>` : ''}
+				</button>
+			`)}
+		</div>
+	`;
+}
+function monthGrid(c) {
+    return html `
+		<div class="ml-calendar__cell-grid" @keydown=${c.handleGridKeyDown}>
+			${repeat(c.months, (m) => m.index, (m) => html `
+				<button
+					type="button"
+					class=${classMap({
+        'ml-calendar__cell': true,
+        'ml-calendar__cell--selected': m.isSelected,
+        'ml-calendar__cell--current': m.isCurrent,
+        'ml-calendar__cell--disabled': m.isDisabled
+    })}
+					?disabled=${m.isDisabled}
+					tabindex="0"
+					aria-selected=${m.isSelected ? 'true' : 'false'}
+					aria-label=${m.label}
+					@click=${() => c.selectViewMonth(m)}
+				>
+					${m.label}
+				</button>
+			`)}
+		</div>
+	`;
+}
+function yearGrid(c) {
+    return html `
+		<div class="ml-calendar__cell-grid" @keydown=${c.handleGridKeyDown}>
+			${repeat(c.years, (y) => y.year, (y) => html `
+				<button
+					type="button"
+					class=${classMap({
+        'ml-calendar__cell': true,
+        'ml-calendar__cell--selected': y.isSelected,
+        'ml-calendar__cell--current': y.isCurrent,
+        'ml-calendar__cell--disabled': y.isDisabled
+    })}
+					?disabled=${y.isDisabled}
+					tabindex=${y.isDisabled ? '-1' : '0'}
+					aria-selected=${y.isSelected ? 'true' : 'false'}
+					aria-label=${String(y.year)}
+					@click=${() => c.selectViewYear(y)}
+				>
+					${y.year}
+				</button>
+			`)}
+		</div>
+	`;
+}
 export function calendarTemplate(c) {
     return html `
-		<div class="ml-calendar" role="grid" aria-label=${c.monthLabel}>
+		<div class=${classMap({
+        'ml-calendar': true,
+        [`ml-calendar--view-${c.view}`]: true
+    })} role="grid" aria-label=${c.headerLabel}>
 			<div class="ml-calendar__header">
 				<div class="ml-calendar__nav-group">
-					<button type="button" class="ml-calendar__nav" aria-label="Previous year" @click=${c.prevYear}>
+					<button type="button" class="ml-calendar__nav" aria-label="Previous" @click=${c.headerPrevFar}>
 						<ml-icon icon="caret-double-left" size="sm"></ml-icon>
 					</button>
-					<button type="button" class="ml-calendar__nav" aria-label="Previous month" @click=${c.prevMonth}>
-						<ml-icon icon="caret-left" size="sm"></ml-icon>
-					</button>
+					${when(c.view === 'day', () => html `
+						<button type="button" class="ml-calendar__nav" aria-label="Previous month" @click=${c.prevMonth}>
+							<ml-icon icon="caret-left" size="sm"></ml-icon>
+						</button>
+					`)}
 				</div>
-				<span class="ml-calendar__month-label">${c.monthLabel}</span>
+
+				${when(c.view === 'day', () => html `
+						<div class="ml-calendar__title">
+							<button
+								type="button"
+								class="ml-calendar__title-btn"
+								aria-label="Select month"
+								aria-expanded="false"
+								@click=${c.openMonthView}
+							>${c.monthLabel}</button>
+							<button
+								type="button"
+								class="ml-calendar__title-btn"
+								aria-label="Select year"
+								aria-expanded="false"
+								@click=${c.openYearView}
+							>${c.viewYear}</button>
+						</div>
+					`, () => html `
+						<button
+							type="button"
+							class="ml-calendar__title-btn ml-calendar__title-btn--wide"
+							aria-label=${c.view === 'month' ? 'Back to day view' : 'Select year'}
+							aria-expanded="true"
+							@click=${c.view === 'month' ? c.openMonthView : c.openYearView}
+						>${c.headerLabel}</button>
+					`)}
+
 				<div class="ml-calendar__nav-group">
-					<button type="button" class="ml-calendar__nav" aria-label="Next month" @click=${c.nextMonth}>
-						<ml-icon icon="caret-right" size="sm"></ml-icon>
-					</button>
-					<button type="button" class="ml-calendar__nav" aria-label="Next year" @click=${c.nextYear}>
+					${when(c.view === 'day', () => html `
+						<button type="button" class="ml-calendar__nav" aria-label="Next month" @click=${c.nextMonth}>
+							<ml-icon icon="caret-right" size="sm"></ml-icon>
+						</button>
+					`)}
+					<button type="button" class="ml-calendar__nav" aria-label="Next" @click=${c.headerNextFar}>
 						<ml-icon icon="caret-double-right" size="sm"></ml-icon>
 					</button>
 				</div>
 			</div>
 
-			<div class="ml-calendar__weekdays" role="row">
-				${repeat(c.weekdays, (d) => d, (d) => html `
-					<span class="ml-calendar__weekday" role="columnheader">${d}</span>
-				`)}
-			</div>
-
-			<div class="ml-calendar__grid">
-				${repeat(c.days, (day) => day.iso, (day) => html `
-					<button
-						type="button"
-						class=${classMap({
-        'ml-calendar__day': true,
-        'ml-calendar__day--other-month': !day.isCurrentMonth,
-        'ml-calendar__day--today': day.isToday,
-        'ml-calendar__day--selected': day.isSelected,
-        'ml-calendar__day--disabled': day.isDisabled
-    })}
-						?disabled=${day.isDisabled || !day.isCurrentMonth}
-						tabindex=${day.isCurrentMonth ? '0' : '-1'}
-						aria-selected=${day.isSelected ? 'true' : 'false'}
-						aria-label=${day.iso}
-						@click=${() => c.selectDay(day)}
-					>
-						<span class="ml-calendar__day-number">${day.date}</span>
-						${day.isToday ? html `<span class="ml-calendar__today-dot"></span>` : ''}
-					</button>
-				`)}
-			</div>
+			${when(c.view === 'day', () => dayGrid(c))}
+			${when(c.view === 'month', () => monthGrid(c))}
+			${when(c.view === 'year', () => yearGrid(c))}
 
 			<div class="ml-calendar__footer">
 				<button type="button" class="ml-calendar__today-btn" @click=${c.goToToday}>Today</button>

package/lib/components/forms/date-picker/date-picker.component.d.ts

@@ -34,6 +34,10 @@ export declare class DatePickerComponent implements IElementRef, OnCreate, OnDes
     min: string;
     /** Maximum selectable date (YYYY-MM-DD) */
     max: string;
+    /** Earliest year reachable in the year picker (defaults to currentYear - 120) */
+    minYear: number | string;
+    /** Latest year reachable in the year picker (defaults to currentYear + 10) */
+    maxYear: number | string;
     /** Whether the calendar popover is open */
     isOpen: boolean;
     private _cleanupAutoUpdate;

package/lib/components/forms/date-picker/date-picker.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-picker/date-picker.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAKzE;;;;;;;;;;;;GAYG;AACH,qBAMa,mBAAoB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS;IACpE,UAAU,EAAG,WAAW,CAAC;IAEhC,+CAA+C;IACxC,KAAK,SAAM;IAElB,uBAAuB;IAChB,WAAW,SAAiB;IAEnC,kBAAkB;IACX,KAAK,SAAM;IAElB,gBAAgB;IACT,IAAI,SAAM;IAEjB,oBAAoB;IACb,KAAK,SAAM;IAElB,iBAAiB;IACV,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEvC,qBAAqB;IACd,QAAQ,UAAS;IAExB,qBAAqB;IACd,QAAQ,UAAS;IAExB,2CAA2C;IACpC,GAAG,SAAM;IAEhB,2CAA2C;IACpC,GAAG,SAAM;IAEhB,2CAA2C;IACpC,MAAM,UAAS;IAEtB,OAAO,CAAC,kBAAkB,CAA6B;IAEhD,QAAQ,IAAI,IAAI;IAOhB,SAAS,IAAI,IAAI;IAQjB,cAAc,QAAO,IAAI,CAM9B;IAEF,uDAAuD;IAChD,WAAW,GAAI,OAAO,KAAK,KAAG,IAAI,CAGvC;IAEF,4CAA4C;IACrC,gBAAgB,QAAO,IAAI,CAIhC;IAEF,oFAAoF;IAC7E,gBAAgB,GAAI,OAAO,KAAK,KAAG,IAAI,CAK5C;IAEK,aAAa,GAAI,OAAO,aAAa,KAAG,IAAI,CAmBjD;IAEF,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAW5B;IAEF,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,YAAY;CAGpB"}
+{"version":3,"file":"date-picker.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-picker/date-picker.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAczE;;;;;;;;;;;;GAYG;AACH,qBAMa,mBAAoB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS;IACpE,UAAU,EAAG,WAAW,CAAC;IAEhC,+CAA+C;IACxC,KAAK,SAAM;IAElB,uBAAuB;IAChB,WAAW,SAAiB;IAEnC,kBAAkB;IACX,KAAK,SAAM;IAElB,gBAAgB;IACT,IAAI,SAAM;IAEjB,oBAAoB;IACb,KAAK,SAAM;IAElB,iBAAiB;IACV,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEvC,qBAAqB;IACd,QAAQ,UAAS;IAExB,qBAAqB;IACd,QAAQ,UAAS;IAExB,2CAA2C;IACpC,GAAG,SAAM;IAEhB,2CAA2C;IACpC,GAAG,SAAM;IAEhB,iFAAiF;IAC1E,OAAO,EAAE,MAAM,GAAG,MAAM,CAAM;IAErC,8EAA8E;IACvE,OAAO,EAAE,MAAM,GAAG,MAAM,CAAM;IAErC,2CAA2C;IACpC,MAAM,UAAS;IAEtB,OAAO,CAAC,kBAAkB,CAA6B;IAEhD,QAAQ,IAAI,IAAI;IAOhB,SAAS,IAAI,IAAI;IAQjB,cAAc,QAAO,IAAI,CAM9B;IAEF,uDAAuD;IAChD,WAAW,GAAI,OAAO,KAAK,KAAG,IAAI,CAGvC;IAEF,4CAA4C;IACrC,gBAAgB,QAAO,IAAI,CAIhC;IAEF,oFAAoF;IAC7E,gBAAgB,GAAI,OAAO,KAAK,KAAG,IAAI,CAK5C;IAEK,aAAa,GAAI,OAAO,aAAa,KAAG,IAAI,CAmBjD;IAEF,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAW5B;IAEF,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,YAAY;CAGpB"}

package/lib/components/forms/date-picker/date-picker.component.js

@@ -5,9 +5,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MelodicComponent } from '@melodicdev/core';
+import { registerAdapter } from '@melodicdev/core/forms';
 import { computePosition, autoUpdate, offset, flip, shift } from '../../../utils/positioning/index.js';
 import { datePickerTemplate } from './date-picker.template.js';
 import { datePickerStyles } from './date-picker.styles.js';
+registerAdapter((el) => el.tagName === 'ML-DATE-PICKER', {
+    inputEvent: 'ml:select',
+    blurEvent: 'focusout',
+    getValue: (el) => el.value ?? '',
+    setValue: (el, value) => { el.value = value !== null && value !== undefined ? String(value) : ''; },
+    setDisabled: (el, disabled) => { el.disabled = disabled; }
+});
 /**
  * ml-date-picker - Date input with calendar dropdown
  *
@@ -43,6 +51,10 @@ let DatePickerComponent = class DatePickerComponent {
         this.min = '';
         /** Maximum selectable date (YYYY-MM-DD) */
         this.max = '';
+        /** Earliest year reachable in the year picker (defaults to currentYear - 120) */
+        this.minYear = '';
+        /** Latest year reachable in the year picker (defaults to currentYear + 10) */
+        this.maxYear = '';
         /** Whether the calendar popover is open */
         this.isOpen = false;
         this._cleanupAutoUpdate = null;
@@ -172,7 +184,7 @@ DatePickerComponent = __decorate([
         selector: 'ml-date-picker',
         template: datePickerTemplate,
         styles: datePickerStyles,
-        attributes: ['value', 'placeholder', 'label', 'hint', 'error', 'size', 'disabled', 'required', 'min', 'max']
+        attributes: ['value', 'placeholder', 'label', 'hint', 'error', 'size', 'disabled', 'required', 'min', 'max', 'min-year', 'max-year']
     })
 ], DatePickerComponent);
 export { DatePickerComponent };

package/lib/components/forms/date-picker/date-picker.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.template.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-picker/date-picker.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,mBAAmB,6CA4DxD"}
+{"version":3,"file":"date-picker.template.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-picker/date-picker.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,mBAAmB,6CA8DxD"}

package/lib/components/forms/date-picker/date-picker.template.js

@@ -48,6 +48,8 @@ export function datePickerTemplate(c) {
 					value=${c.value}
 					min=${c.min}
 					max=${c.max}
+					min-year=${c.minYear}
+					max-year=${c.maxYear}
 					@ml:select=${c.handleDateSelect}
 				></ml-calendar>
 			</div>

package/lib/components/forms/date-time-picker/date-time-picker.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-time-picker.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-time-picker/date-time-picker.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAKzE,OAAO,yCAAyC,CAAC;AACjD,OAAO,yCAAyC,CAAC;AAiCjD;;;;;;;;;;;;;GAaG;AACH,qBAMa,uBAAwB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS;IACxE,UAAU,EAAG,WAAW,CAAC;IAEhC,yDAAyD;IAClD,KAAK,SAAM;IAElB,uBAAuB;IAChB,WAAW,SAA0B;IAE5C,kBAAkB;IACX,KAAK,SAAM;IAElB,gBAAgB;IACT,IAAI,SAAM;IAEjB,oBAAoB;IACb,KAAK,SAAM;IAElB,iBAAiB;IACV,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEvC,qBAAqB;IACd,QAAQ,UAAS;IAExB,qBAAqB;IACd,QAAQ,UAAS;IAExB,2CAA2C;IACpC,OAAO,SAAM;IAEpB,2CAA2C;IACpC,OAAO,SAAM;IAEpB,sCAAsC;IAC/B,OAAO,SAAM;IAEpB,sCAAsC;IAC/B,OAAO,SAAM;IAEpB,2BAA2B;IACpB,IAAI,SAAM;IAEjB,yCAAyC;IAClC,UAAU,UAAQ;IAEzB,4BAA4B;IACrB,SAAS,SAAM;IAEtB,4BAA4B;IACrB,SAAS,SAAM;IAEtB,OAAO,CAAC,UAAU,CAAyB;IAE3C,IAAW,SAAS,IAAI,OAAO,CAE9B;IAED,IAAW,YAAY,IAAI,MAAM,CAEhC;IAEM,QAAQ,IAAI,IAAI;IAKhB,SAAS,IAAI,IAAI;IAKxB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,oBAAoB;IA+E5B,OAAO,CAAC,UAAU;CAqBlB"}
+{"version":3,"file":"date-time-picker.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-time-picker/date-time-picker.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAczE,OAAO,yCAAyC,CAAC;AACjD,OAAO,yCAAyC,CAAC;AAiCjD;;;;;;;;;;;;;GAaG;AACH,qBAMa,uBAAwB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS;IACxE,UAAU,EAAG,WAAW,CAAC;IAEhC,yDAAyD;IAClD,KAAK,SAAM;IAElB,uBAAuB;IAChB,WAAW,SAA0B;IAE5C,kBAAkB;IACX,KAAK,SAAM;IAElB,gBAAgB;IACT,IAAI,SAAM;IAEjB,oBAAoB;IACb,KAAK,SAAM;IAElB,iBAAiB;IACV,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEvC,qBAAqB;IACd,QAAQ,UAAS;IAExB,qBAAqB;IACd,QAAQ,UAAS;IAExB,2CAA2C;IACpC,OAAO,SAAM;IAEpB,2CAA2C;IACpC,OAAO,SAAM;IAEpB,sCAAsC;IAC/B,OAAO,SAAM;IAEpB,sCAAsC;IAC/B,OAAO,SAAM;IAEpB,2BAA2B;IACpB,IAAI,SAAM;IAEjB,yCAAyC;IAClC,UAAU,UAAQ;IAEzB,4BAA4B;IACrB,SAAS,SAAM;IAEtB,4BAA4B;IACrB,SAAS,SAAM;IAEtB,OAAO,CAAC,UAAU,CAAyB;IAE3C,IAAW,SAAS,IAAI,OAAO,CAE9B;IAED,IAAW,YAAY,IAAI,MAAM,CAEhC;IAEM,QAAQ,IAAI,IAAI;IAKhB,SAAS,IAAI,IAAI;IAKxB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,oBAAoB;IA+E5B,OAAO,CAAC,UAAU;CAqBlB"}

package/lib/components/forms/date-time-picker/date-time-picker.component.js

@@ -5,8 +5,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MelodicComponent } from '@melodicdev/core';
+import { registerAdapter } from '@melodicdev/core/forms';
 import { dateTimePickerTemplate } from './date-time-picker.template.js';
 import { dateTimePickerStyles } from './date-time-picker.styles.js';
+registerAdapter((el) => el.tagName === 'ML-DATE-TIME-PICKER', {
+    inputEvent: 'ml:change',
+    blurEvent: 'focusout',
+    getValue: (el) => el.value ?? '',
+    setValue: (el, value) => { el.value = value !== null && value !== undefined ? String(value) : ''; },
+    setDisabled: (el, disabled) => { el.disabled = disabled; }
+});
 // Ensure sub-components are registered
 import '../date-picker/date-picker.component.js';
 import '../time-picker/time-picker.component.js';

package/lib/components/forms/input/input.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/input/input.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAIlD;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAMa,cAAe,YAAW,WAAW,EAAE,MAAM;IAClD,UAAU,EAAG,WAAW,CAAC;IAEhC,iBAAiB;IACV,IAAI,EAAE,SAAS,CAAU;IAEhC,oBAAoB;IACb,KAAK,SAAM;IAElB,uBAAuB;IAChB,WAAW,SAAM;IAExB,iBAAiB;IACV,KAAK,SAAM;IAElB,kCAAkC;IAC3B,IAAI,SAAM;IAEjB,iDAAiD;IAC1C,KAAK,SAAM;IAElB,iBAAiB;IACV,IAAI,EAAE,IAAI,CAAQ;IAEzB,wBAAwB;IACjB,QAAQ,UAAS;IAExB,0BAA0B;IACnB,QAAQ,UAAS;IAExB,uBAAuB;IAChB,QAAQ,UAAS;IAExB,6BAA6B;IACtB,YAAY,SAAS;IAE5B,2BAA2B;IACpB,OAAO,UAAS;IAEhB,MAAM,IAAI,IAAI;IAOd,WAAW,GAAI,OAAO,KAAK,KAAG,IAAI,CAWvC;IAEK,YAAY,GAAI,OAAO,KAAK,KAAG,IAAI,CAWxC;IAEK,WAAW,QAAO,IAAI,CAQ3B;IAEK,UAAU,QAAO,IAAI,CAQ1B;CACF"}
+{"version":3,"file":"input.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/input/input.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE5D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAYlD;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAMa,cAAe,YAAW,WAAW,EAAE,MAAM;IAClD,UAAU,EAAG,WAAW,CAAC;IAEhC,iBAAiB;IACV,IAAI,EAAE,SAAS,CAAU;IAEhC,oBAAoB;IACb,KAAK,SAAM;IAElB,uBAAuB;IAChB,WAAW,SAAM;IAExB,iBAAiB;IACV,KAAK,SAAM;IAElB,kCAAkC;IAC3B,IAAI,SAAM;IAEjB,iDAAiD;IAC1C,KAAK,SAAM;IAElB,iBAAiB;IACV,IAAI,EAAE,IAAI,CAAQ;IAEzB,wBAAwB;IACjB,QAAQ,UAAS;IAExB,0BAA0B;IACnB,QAAQ,UAAS;IAExB,uBAAuB;IAChB,QAAQ,UAAS;IAExB,6BAA6B;IACtB,YAAY,SAAS;IAE5B,2BAA2B;IACpB,OAAO,UAAS;IAEhB,MAAM,IAAI,IAAI;IAOd,WAAW,GAAI,OAAO,KAAK,KAAG,IAAI,CAWvC;IAEK,YAAY,GAAI,OAAO,KAAK,KAAG,IAAI,CAWxC;IAEK,WAAW,QAAO,IAAI,CAQ3B;IAEK,UAAU,QAAO,IAAI,CAQ1B;CACF"}

package/lib/components/forms/input/input.component.js

@@ -5,8 +5,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MelodicComponent } from '@melodicdev/core';
+import { registerAdapter } from '@melodicdev/core/forms';
 import { inputTemplate } from './input.template.js';
 import { inputStyles } from './input.styles.js';
+registerAdapter((el) => el.tagName === 'ML-INPUT', {
+    inputEvent: 'ml:input',
+    blurEvent: 'focusout',
+    getValue: (el) => el.value ?? '',
+    setValue: (el, value) => { el.value = value !== null && value !== undefined ? String(value) : ''; },
+    setDisabled: (el, disabled) => { el.disabled = disabled; }
+});
 /**
  * ml-input - Text input component with label, hint, and error states
  *

package/lib/components/forms/radio/radio-group.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/radio/radio-group.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAI3D;;;;;;;;;;;;GAYG;AACH,qBAMa,mBAAoB,YAAW,WAAW,EAAE,MAAM;IACvD,UAAU,EAAG,WAAW,CAAC;IAEhC,kBAAkB;IACX,KAAK,SAAM;IAElB,sBAAsB;IACf,IAAI,SAAM;IAEjB,6BAA6B;IACtB,KAAK,SAAM;IAElB,gBAAgB;IACT,IAAI,SAAM;IAEjB,oBAAoB;IACb,KAAK,SAAM;IAElB,yBAAyB;IAClB,WAAW,EAAE,WAAW,CAAc;IAE7C,qBAAqB;IACd,QAAQ,UAAS;IAExB,qBAAqB;IACd,QAAQ,UAAS;IAEjB,MAAM,IAAI,IAAI;IAQrB,OAAO,CAAC,iBAAiB,CAmBvB;IAEF,OAAO,CAAC,iBAAiB;CAuBzB"}
+{"version":3,"file":"radio-group.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/radio/radio-group.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAY3D;;;;;;;;;;;;GAYG;AACH,qBAMa,mBAAoB,YAAW,WAAW,EAAE,MAAM;IACvD,UAAU,EAAG,WAAW,CAAC;IAEhC,kBAAkB;IACX,KAAK,SAAM;IAElB,sBAAsB;IACf,IAAI,SAAM;IAEjB,6BAA6B;IACtB,KAAK,SAAM;IAElB,gBAAgB;IACT,IAAI,SAAM;IAEjB,oBAAoB;IACb,KAAK,SAAM;IAElB,yBAAyB;IAClB,WAAW,EAAE,WAAW,CAAc;IAE7C,qBAAqB;IACd,QAAQ,UAAS;IAExB,qBAAqB;IACd,QAAQ,UAAS;IAEjB,MAAM,IAAI,IAAI;IAQrB,OAAO,CAAC,iBAAiB,CAmBvB;IAEF,OAAO,CAAC,iBAAiB;CAuBzB"}

package/lib/components/forms/radio/radio-group.component.js

@@ -5,8 +5,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MelodicComponent } from '@melodicdev/core';
+import { registerAdapter } from '@melodicdev/core/forms';
 import { radioGroupTemplate } from './radio-group.template.js';
 import { radioGroupStyles } from './radio-group.styles.js';
+registerAdapter((el) => el.tagName === 'ML-RADIO-GROUP', {
+    inputEvent: 'ml:change',
+    blurEvent: 'focusout',
+    getValue: (el) => el.value ?? '',
+    setValue: (el, value) => { el.value = value !== null && value !== undefined ? String(value) : ''; },
+    setDisabled: (el, disabled) => { el.disabled = disabled; }
+});
 /**
  * ml-radio-group - Container for radio buttons
  *

package/lib/components/forms/select/select.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/select/select.component.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"select.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/select/select.component.ts"],"names":[],"mappings":"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"}

package/lib/components/forms/select/select.component.js

@@ -5,9 +5,26 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MelodicComponent } from '@melodicdev/core';
+import { registerAdapter } from '@melodicdev/core/forms';
 import { computePosition, offset, flip, shift } from '../../../utils/positioning/index.js';
 import { selectTemplate } from './select.template.js';
 import { selectStyles } from './select.styles.js';
+registerAdapter((el) => el.tagName === 'ML-SELECT', {
+    inputEvent: 'ml:change',
+    blurEvent: 'focusout',
+    getValue: (el) => {
+        const e = el;
+        return e.multiple ? (e.values ?? []) : (e.value ?? '');
+    },
+    setValue: (el, value) => {
+        const e = el;
+        if (Array.isArray(value))
+            e.values = value;
+        else
+            e.value = value !== null && value !== undefined ? String(value) : '';
+    },
+    setDisabled: (el, disabled) => { el.disabled = disabled; }
+});
 /**
  * ml-select - Custom select/dropdown component
  *

package/lib/components/forms/slider/slider.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/slider/slider.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAIpD;;;;;;;;;;;GAWG;AACH,qBAMa,eAAgB,YAAW,WAAW;IAC3C,UAAU,EAAG,WAAW,CAAC;IAEhC,iBAAiB;IACV,KAAK,SAAM;IAElB,oBAAoB;IACb,KAAK,SAAM;IAElB,oBAAoB;IACb,GAAG,SAAK;IAEf,oBAAoB;IACb,GAAG,SAAO;IAEjB,qBAAqB;IACd,IAAI,SAAK;IAEhB,kBAAkB;IACX,IAAI,EAAE,IAAI,CAAQ;IAEzB,yBAAyB;IAClB,QAAQ,UAAS;IAExB,yBAAyB;IAClB,SAAS,UAAS;IAEzB,gBAAgB;IACT,IAAI,SAAM;IAEjB,oBAAoB;IACb,KAAK,SAAM;IAElB,+BAA+B;IAC/B,IAAW,KAAK,IAAI,MAAM,CAIzB;IAED,4DAA4D;IAC5D,IAAW,SAAS,IAAI,MAAM,CAG7B;IAEM,WAAW,GAAI,OAAO,KAAK,KAAG,IAAI,CAWvC;IAEK,YAAY,GAAI,OAAO,KAAK,KAAG,IAAI,CAWxC;CACF"}
+{"version":3,"file":"slider.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/slider/slider.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAYpD;;;;;;;;;;;GAWG;AACH,qBAMa,eAAgB,YAAW,WAAW;IAC3C,UAAU,EAAG,WAAW,CAAC;IAEhC,iBAAiB;IACV,KAAK,SAAM;IAElB,oBAAoB;IACb,KAAK,SAAM;IAElB,oBAAoB;IACb,GAAG,SAAK;IAEf,oBAAoB;IACb,GAAG,SAAO;IAEjB,qBAAqB;IACd,IAAI,SAAK;IAEhB,kBAAkB;IACX,IAAI,EAAE,IAAI,CAAQ;IAEzB,yBAAyB;IAClB,QAAQ,UAAS;IAExB,yBAAyB;IAClB,SAAS,UAAS;IAEzB,gBAAgB;IACT,IAAI,SAAM;IAEjB,oBAAoB;IACb,KAAK,SAAM;IAElB,+BAA+B;IAC/B,IAAW,KAAK,IAAI,MAAM,CAIzB;IAED,4DAA4D;IAC5D,IAAW,SAAS,IAAI,MAAM,CAG7B;IAEM,WAAW,GAAI,OAAO,KAAK,KAAG,IAAI,CAWvC;IAEK,YAAY,GAAI,OAAO,KAAK,KAAG,IAAI,CAWxC;CACF"}

package/lib/components/forms/slider/slider.component.js

@@ -5,8 +5,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MelodicComponent } from '@melodicdev/core';
+import { registerAdapter } from '@melodicdev/core/forms';
 import { sliderTemplate } from './slider.template.js';
 import { sliderStyles } from './slider.styles.js';
+registerAdapter((el) => el.tagName === 'ML-SLIDER', {
+    inputEvent: 'ml:input',
+    blurEvent: 'focusout',
+    getValue: (el) => Number(el.value) || 0,
+    setValue: (el, value) => { el.value = Number(value) || 0; },
+    setDisabled: (el, disabled) => { el.disabled = disabled; }
+});
 /**
  * ml-slider - Range slider input
  *

package/lib/components/forms/textarea/textarea.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/textarea/textarea.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAIpD;;;;;;;;;;;;;;GAcG;AACH,qBAMa,iBAAkB,YAAW,WAAW,EAAE,MAAM;IACrD,UAAU,EAAG,WAAW,CAAC;IAEhC,oBAAoB;IACb,KAAK,SAAM;IAElB,uBAAuB;IAChB,WAAW,SAAM;IAExB,iBAAiB;IACV,KAAK,SAAM;IAElB,qCAAqC;IAC9B,IAAI,SAAM;IAEjB,iDAAiD;IAC1C,KAAK,SAAM;IAElB,iBAAiB;IACV,IAAI,EAAE,IAAI,CAAQ;IAEzB,mCAAmC;IAC5B,IAAI,SAAK;IAEhB,+BAA+B;IACxB,SAAS,SAAK;IAErB,2BAA2B;IACpB,QAAQ,UAAS;IAExB,6BAA6B;IACtB,QAAQ,UAAS;IAExB,uBAAuB;IAChB,QAAQ,UAAS;IAExB,4BAA4B;IACrB,MAAM,UAAS;IAEtB,2BAA2B;IACpB,OAAO,UAAS;IAEhB,MAAM,IAAI,IAAI;IAMd,WAAW,GAAI,OAAO,KAAK,KAAG,IAAI,CAWvC;IAEK,YAAY,GAAI,OAAO,KAAK,KAAG,IAAI,CAWxC;IAEK,WAAW,QAAO,IAAI,CAQ3B;IAEK,UAAU,QAAO,IAAI,CAQ1B;CACF"}
+{"version":3,"file":"textarea.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/textarea/textarea.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE5D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAYpD;;;;;;;;;;;;;;GAcG;AACH,qBAMa,iBAAkB,YAAW,WAAW,EAAE,MAAM;IACrD,UAAU,EAAG,WAAW,CAAC;IAEhC,oBAAoB;IACb,KAAK,SAAM;IAElB,uBAAuB;IAChB,WAAW,SAAM;IAExB,iBAAiB;IACV,KAAK,SAAM;IAElB,qCAAqC;IAC9B,IAAI,SAAM;IAEjB,iDAAiD;IAC1C,KAAK,SAAM;IAElB,iBAAiB;IACV,IAAI,EAAE,IAAI,CAAQ;IAEzB,mCAAmC;IAC5B,IAAI,SAAK;IAEhB,+BAA+B;IACxB,SAAS,SAAK;IAErB,2BAA2B;IACpB,QAAQ,UAAS;IAExB,6BAA6B;IACtB,QAAQ,UAAS;IAExB,uBAAuB;IAChB,QAAQ,UAAS;IAExB,4BAA4B;IACrB,MAAM,UAAS;IAEtB,2BAA2B;IACpB,OAAO,UAAS;IAEhB,MAAM,IAAI,IAAI;IAMd,WAAW,GAAI,OAAO,KAAK,KAAG,IAAI,CAWvC;IAEK,YAAY,GAAI,OAAO,KAAK,KAAG,IAAI,CAWxC;IAEK,WAAW,QAAO,IAAI,CAQ3B;IAEK,UAAU,QAAO,IAAI,CAQ1B;CACF"}

package/lib/components/forms/textarea/textarea.component.js

@@ -5,8 +5,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MelodicComponent } from '@melodicdev/core';
+import { registerAdapter } from '@melodicdev/core/forms';
 import { textareaTemplate } from './textarea.template.js';
 import { textareaStyles } from './textarea.styles.js';
+registerAdapter((el) => el.tagName === 'ML-TEXTAREA', {
+    inputEvent: 'ml:input',
+    blurEvent: 'focusout',
+    getValue: (el) => el.value ?? '',
+    setValue: (el, value) => { el.value = value !== null && value !== undefined ? String(value) : ''; },
+    setDisabled: (el, disabled) => { el.disabled = disabled; }
+});
 /**
  * ml-textarea - Multi-line text input component
  *

package/lib/components/forms/time-picker/time-picker.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time-picker.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/time-picker/time-picker.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AA8BzE;;;;;;;;;;;GAWG;AACH,qBAMa,mBAAoB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS;IACpE,UAAU,EAAG,WAAW,CAAC;IAEhC,gDAAgD;IACzC,KAAK,SAAM;IAElB,uBAAuB;IAChB,WAAW,SAAiB;IAEnC,kBAAkB;IACX,KAAK,SAAM;IAElB,gBAAgB;IACT,IAAI,SAAM;IAEjB,oBAAoB;IACb,KAAK,SAAM;IAElB,iBAAiB;IACV,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEvC,qBAAqB;IACd,QAAQ,UAAS;IAExB,qBAAqB;IACd,QAAQ,UAAS;IAExB,sCAAsC;IAC/B,GAAG,SAAM;IAEhB,sCAAsC;IAC/B,GAAG,SAAM;IAEhB,uFAAuF;IAChF,IAAI,SAAM;IAEjB,oDAAoD;IAC7C,UAAU,UAAQ;IAEzB,kCAAkC;IAC3B,MAAM,UAAS;IAEtB,2BAA2B;IACpB,QAAQ,SAAK;IAEpB,6BAA6B;IACtB,UAAU,SAAK;IAEtB,6BAA6B;IACtB,UAAU,SAAK;IAEtB,oCAAoC;IAC7B,UAAU,EAAE,IAAI,GAAG,IAAI,CAAQ;IAEtC,OAAO,CAAC,kBAAkB,CAA6B;IAEvD,IAAW,SAAS,IAAI,OAAO,CAE9B;IAED,IAAW,WAAW,IAAI,OAAO,CAEhC;IAED,IAAW,YAAY,IAAI,MAAM,CAEhC;IAED,IAAW,WAAW,IAAI,MAAM,CAQ/B;IAED,IAAW,aAAa,IAAI,MAAM,CAEjC;IAED,IAAW,aAAa,IAAI,MAAM,CAEjC;IAEM,QAAQ,IAAI,IAAI;IAOhB,SAAS,IAAI,IAAI;IAQjB,aAAa,QAAO,IAAI,CAM7B;IAEK,aAAa,QAAO,IAAI,CAS7B;IAEK,aAAa,QAAO,IAAI,CAQ7B;IAEK,eAAe,QAAO,IAAI,CAE/B;IAEK,eAAe,QAAO,IAAI,CAE/B;IAEK,eAAe,QAAO,IAAI,CAE/B;IAEK,eAAe,QAAO,IAAI,CAE/B;IAEK,YAAY,QAAO,IAAI,CAI5B;IAEK,gBAAgB,QAAO,IAAI,CAOhC;IAEK,cAAc,QAAO,IAAI,CAM9B;IAEF,uDAAuD;IAChD,eAAe,GAAI,OAAO,KAAK,KAAG,IAAI,CAG3C;IAEF,2CAA2C;IACpC,gBAAgB,QAAO,IAAI,CAIhC;IAEK,aAAa,GAAI,OAAO,aAAa,KAAG,IAAI,CAmBjD;IAEK,eAAe,GAAI,OAAO,KAAK,KAAG,IAAI,CAa3C;IAEK,iBAAiB,GAAI,OAAO,KAAK,KAAG,IAAI,CAO7C;IAEK,iBAAiB,GAAI,OAAO,KAAK,KAAG,IAAI,CAO7C;IAEK,cAAc,QAAO,IAAI,CAK9B;IAEK,gBAAgB,QAAO,IAAI,CAEhC;IAEK,gBAAgB,QAAO,IAAI,CAEhC;IAEK,gBAAgB,GAAI,OAAO,KAAK,KAAG,IAAI,CAE5C;IAEK,oBAAoB,GAAI,OAAO,aAAa,KAAG,IAAI,CAkBxD;IAEF,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,iBAAiB;IAezB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAY5B;IAEF,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,YAAY;CAGpB"}
+{"version":3,"file":"time-picker.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/time-picker/time-picker.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAuCzE;;;;;;;;;;;GAWG;AACH,qBAMa,mBAAoB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS;IACpE,UAAU,EAAG,WAAW,CAAC;IAEhC,gDAAgD;IACzC,KAAK,SAAM;IAElB,uBAAuB;IAChB,WAAW,SAAiB;IAEnC,kBAAkB;IACX,KAAK,SAAM;IAElB,gBAAgB;IACT,IAAI,SAAM;IAEjB,oBAAoB;IACb,KAAK,SAAM;IAElB,iBAAiB;IACV,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEvC,qBAAqB;IACd,QAAQ,UAAS;IAExB,qBAAqB;IACd,QAAQ,UAAS;IAExB,sCAAsC;IAC/B,GAAG,SAAM;IAEhB,sCAAsC;IAC/B,GAAG,SAAM;IAEhB,uFAAuF;IAChF,IAAI,SAAM;IAEjB,oDAAoD;IAC7C,UAAU,UAAQ;IAEzB,kCAAkC;IAC3B,MAAM,UAAS;IAEtB,2BAA2B;IACpB,QAAQ,SAAK;IAEpB,6BAA6B;IACtB,UAAU,SAAK;IAEtB,6BAA6B;IACtB,UAAU,SAAK;IAEtB,oCAAoC;IAC7B,UAAU,EAAE,IAAI,GAAG,IAAI,CAAQ;IAEtC,OAAO,CAAC,kBAAkB,CAA6B;IAEvD,IAAW,SAAS,IAAI,OAAO,CAE9B;IAED,IAAW,WAAW,IAAI,OAAO,CAEhC;IAED,IAAW,YAAY,IAAI,MAAM,CAEhC;IAED,IAAW,WAAW,IAAI,MAAM,CAQ/B;IAED,IAAW,aAAa,IAAI,MAAM,CAEjC;IAED,IAAW,aAAa,IAAI,MAAM,CAEjC;IAEM,QAAQ,IAAI,IAAI;IAOhB,SAAS,IAAI,IAAI;IAQjB,aAAa,QAAO,IAAI,CAM7B;IAEK,aAAa,QAAO,IAAI,CAS7B;IAEK,aAAa,QAAO,IAAI,CAQ7B;IAEK,eAAe,QAAO,IAAI,CAE/B;IAEK,eAAe,QAAO,IAAI,CAE/B;IAEK,eAAe,QAAO,IAAI,CAE/B;IAEK,eAAe,QAAO,IAAI,CAE/B;IAEK,YAAY,QAAO,IAAI,CAI5B;IAEK,gBAAgB,QAAO,IAAI,CAOhC;IAEK,cAAc,QAAO,IAAI,CAM9B;IAEF,uDAAuD;IAChD,eAAe,GAAI,OAAO,KAAK,KAAG,IAAI,CAG3C;IAEF,2CAA2C;IACpC,gBAAgB,QAAO,IAAI,CAIhC;IAEK,aAAa,GAAI,OAAO,aAAa,KAAG,IAAI,CAmBjD;IAEK,eAAe,GAAI,OAAO,KAAK,KAAG,IAAI,CAa3C;IAEK,iBAAiB,GAAI,OAAO,KAAK,KAAG,IAAI,CAO7C;IAEK,iBAAiB,GAAI,OAAO,KAAK,KAAG,IAAI,CAO7C;IAEK,cAAc,QAAO,IAAI,CAK9B;IAEK,gBAAgB,QAAO,IAAI,CAEhC;IAEK,gBAAgB,QAAO,IAAI,CAEhC;IAEK,gBAAgB,GAAI,OAAO,KAAK,KAAG,IAAI,CAE5C;IAEK,oBAAoB,GAAI,OAAO,aAAa,KAAG,IAAI,CAkBxD;IAEF,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,iBAAiB;IAezB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAY5B;IAEF,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,YAAY;CAGpB"}

package/lib/components/forms/time-picker/time-picker.component.js

@@ -5,9 +5,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MelodicComponent } from '@melodicdev/core';
+import { registerAdapter } from '@melodicdev/core/forms';
 import { computePosition, autoUpdate, offset, flip, shift } from '../../../utils/positioning/index.js';
 import { timePickerTemplate } from './time-picker.template.js';
 import { timePickerStyles } from './time-picker.styles.js';
+registerAdapter((el) => el.tagName === 'ML-TIME-PICKER', {
+    inputEvent: 'ml:change',
+    blurEvent: 'focusout',
+    getValue: (el) => el.value ?? '',
+    setValue: (el, value) => { el.value = value !== null && value !== undefined ? String(value) : ''; },
+    setDisabled: (el, disabled) => { el.disabled = disabled; }
+});
 function pad(n) {
     return String(n).padStart(2, '0');
 }

package/lib/components/forms/toggle/toggle.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/toggle/toggle.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAIpD;;;;;;;;;;;GAWG;AACH,qBAMa,eAAgB,YAAW,WAAW;IAC3C,UAAU,EAAG,WAAW,CAAC;IAEhC,mBAAmB;IACZ,KAAK,SAAM;IAElB,gBAAgB;IACT,IAAI,SAAM;IAEjB,kBAAkB;IACX,IAAI,EAAE,IAAI,CAAQ;IAEzB,oBAAoB;IACb,OAAO,UAAS;IAEvB,qBAAqB;IACd,QAAQ,UAAS;IAEjB,YAAY,GAAI,OAAO,KAAK,KAAG,IAAI,CAgBxC;CACF"}
+{"version":3,"file":"toggle.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/toggle/toggle.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAYpD;;;;;;;;;;;GAWG;AACH,qBAMa,eAAgB,YAAW,WAAW;IAC3C,UAAU,EAAG,WAAW,CAAC;IAEhC,mBAAmB;IACZ,KAAK,SAAM;IAElB,gBAAgB;IACT,IAAI,SAAM;IAEjB,kBAAkB;IACX,IAAI,EAAE,IAAI,CAAQ;IAEzB,oBAAoB;IACb,OAAO,UAAS;IAEvB,qBAAqB;IACd,QAAQ,UAAS;IAEjB,YAAY,GAAI,OAAO,KAAK,KAAG,IAAI,CAgBxC;CACF"}

package/lib/components/forms/toggle/toggle.component.js

@@ -5,8 +5,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MelodicComponent } from '@melodicdev/core';
+import { registerAdapter } from '@melodicdev/core/forms';
 import { toggleTemplate } from './toggle.template.js';
 import { toggleStyles } from './toggle.styles.js';
+registerAdapter((el) => el.tagName === 'ML-TOGGLE', {
+    inputEvent: 'ml:change',
+    blurEvent: 'focusout',
+    getValue: (el) => Boolean(el.checked),
+    setValue: (el, value) => { el.checked = Boolean(value); },
+    setDisabled: (el, disabled) => { el.disabled = disabled; }
+});
 /**
  * ml-toggle - Toggle/switch component
  *

package/lib/forms-adapters.d.ts

@@ -0,0 +1,2 @@
+export declare function registerMelodicFormAdapters(): void;
+//# sourceMappingURL=forms-adapters.d.ts.map

package/lib/forms-adapters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"forms-adapters.d.ts","sourceRoot":"","sources":["../src/forms-adapters.ts"],"names":[],"mappings":"AA+FA,wBAAgB,2BAA2B,IAAI,IAAI,CAiBlD"}

package/lib/forms-adapters.js

@@ -0,0 +1,105 @@
+import { registerAdapter } from '@melodicdev/core/forms';
+const valueTextInputAdapter = {
+    inputEvent: 'ml:input',
+    blurEvent: 'focusout',
+    getValue(element) {
+        return element.value ?? '';
+    },
+    setValue(element, value) {
+        element.value = value !== null && value !== undefined ? String(value) : '';
+    },
+    setDisabled(element, disabled) {
+        element.disabled = disabled;
+    }
+};
+const valueChangeInputAdapter = {
+    inputEvent: 'ml:change',
+    blurEvent: 'focusout',
+    getValue(element) {
+        return element.value ?? '';
+    },
+    setValue(element, value) {
+        element.value = value !== null && value !== undefined ? String(value) : '';
+    },
+    setDisabled(element, disabled) {
+        element.disabled = disabled;
+    }
+};
+const selectInputAdapter = {
+    inputEvent: 'ml:change',
+    blurEvent: 'focusout',
+    getValue(element) {
+        const el = element;
+        return el.multiple ? (el.values ?? []) : (el.value ?? '');
+    },
+    setValue(element, value) {
+        const el = element;
+        if (Array.isArray(value)) {
+            el.values = value;
+        }
+        else {
+            el.value = value !== null && value !== undefined ? String(value) : '';
+        }
+    },
+    setDisabled(element, disabled) {
+        element.disabled = disabled;
+    }
+};
+const booleanCheckedAdapter = {
+    inputEvent: 'ml:change',
+    blurEvent: 'focusout',
+    getValue(element) {
+        return Boolean(element.checked);
+    },
+    setValue(element, value) {
+        element.checked = Boolean(value);
+    },
+    setDisabled(element, disabled) {
+        element.disabled = disabled;
+    }
+};
+const numberValueAdapter = {
+    inputEvent: 'ml:input',
+    blurEvent: 'focusout',
+    getValue(element) {
+        return Number(element.value) || 0;
+    },
+    setValue(element, value) {
+        element.value = Number(value) || 0;
+    },
+    setDisabled(element, disabled) {
+        element.disabled = disabled;
+    }
+};
+const datePickerAdapter = {
+    inputEvent: 'ml:select',
+    blurEvent: 'focusout',
+    getValue(element) {
+        return element.value ?? '';
+    },
+    setValue(element, value) {
+        element.value = value !== null && value !== undefined ? String(value) : '';
+    },
+    setDisabled(element, disabled) {
+        element.disabled = disabled;
+    }
+};
+let registered = false;
+export function registerMelodicFormAdapters() {
+    if (registered)
+        return;
+    registered = true;
+    const tagMatcher = (tag) => (el) => el.tagName === tag;
+    registerAdapter(tagMatcher('ML-INPUT'), valueTextInputAdapter);
+    registerAdapter(tagMatcher('ML-TEXTAREA'), valueTextInputAdapter);
+    registerAdapter(tagMatcher('ML-SLIDER'), numberValueAdapter);
+    registerAdapter(tagMatcher('ML-SELECT'), selectInputAdapter);
+    registerAdapter(tagMatcher('ML-AUTOCOMPLETE'), selectInputAdapter);
+    registerAdapter(tagMatcher('ML-CHECKBOX'), booleanCheckedAdapter);
+    registerAdapter(tagMatcher('ML-TOGGLE'), booleanCheckedAdapter);
+    registerAdapter(tagMatcher('ML-RADIO-GROUP'), valueChangeInputAdapter);
+    registerAdapter(tagMatcher('ML-DATE-PICKER'), datePickerAdapter);
+    registerAdapter(tagMatcher('ML-TIME-PICKER'), valueChangeInputAdapter);
+    registerAdapter(tagMatcher('ML-DATE-TIME-PICKER'), valueChangeInputAdapter);
+}
+registerMelodicFormAdapters();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@melodicdev/components",
-	"version": "1.5.12",
+	"version": "1.6.0",
 	"description": "Themeable UI component library built on the Melodic Framework",
 	"license": "MIT",
 	"author": "Melodic Development",