@breadstone/mosaik-elements-angular 0.0.13 → 0.0.15

package/fesm2022/mosaik-elements-angular.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, ChangeDetectorRef, ElementRef, NgZone, EventEmitter, Output, Input, ChangeDetectionStrategy, Component, makeEnvironmentProviders, forwardRef, Directive, Pipe, ViewChild, ViewEncapsulation, TemplateRef, Injectable, Renderer2, signal, computed, effect } from '@angular/core';
-import { AbsoluteItemElement, AbsoluteElement, AnchorElement, AppHeaderElement, AppElement, AutoCompleteBoxElement, AvatarGroupElement, AvatarElement, BackdropElement, BadgeElement, BannerHeaderElement, BannerSubHeaderElement, BannerElement, BottomSheetElement, BoxElement, BreadcrumbItemElement, BreadcrumbElement, ButtonGroupElement, ButtonElement, CalendarHeaderElement, CalendarItemElement, CalendarSubHeaderElement, CalendarElement, CameraElement, CardActionsElement, CardContentElement, CardFooterElement, CardHeaderElement, CardSubTitleElement, CardTitleElement, CardElement, Carousel2Element, CarouselItem2Element, CarouselItemElement, CarouselElement, CellGroupElement, CellElement, ChartElement, ChatHeaderElement, ChatMarkerElement, ChatMessageAvatarElement, ChatMessageDividerElement, ChatMessageElement, ChatElement, checkBoxGroupElementValueAccessor, CheckBoxGroupElement, CheckboxElement, CheckmarkElement, ChipElement, chipBoxElementValueAccessor, ChipBoxElement, ChoiceGroupHeaderElement, choiceGroupElementValueAccessor, ChoiceGroupElement, ChoiceElement, CodeElement, ColorAreaElement, ColorPickerElement, ColorSliderElement, ColorSwatchGroupElement, ColorSwatchElement, ColorThumbElement, colorBoxElementValueAccessor, ColorBoxElement, ComboItemElement, ComboElement, CommentElement, CompoundButtonElement, CookiesConsentElement, DataListElement, DataTableElement, dateBoxElementValueAccessor, DateBoxElement, dateTimeBoxElementValueAccessor, DateTimeBoxElement, DialogActionsElement, DialogContentElement, DialogFooterElement, DialogHeaderSubTextElement, DialogHeaderTextElement, DialogHeaderElement, DialogElement, DialogHostElement, DisclosureElement, DividerElement, DotElement, DrawerContainerElement, DrawerContentElement, DrawerElement, DropZoneElement, DropDownButtonElement, ElevationElement, EmojiElement, EmptyStateElement, EpgChannelElement, EpgProgramElement, EpgElement, ErrorStateElement, ErrorElement, ExpandableElement, ExpanderGroupElement, ExpanderHeaderElement, ExpanderSubHeaderElement, ExpanderElement, FloatingActionButtonGroupElement, FloatingActionButtonElement, FilePickerElement, FileUploadItemElement, FileUploadElement, FlipElement, FloatingTriggerElement, FloatingElement, FocusRingElement, FooterItemGroupElement, FooterItemElement, FooterElement, FormFieldElement, FormElement, GridItemElement, GridElement, HelmetElement, HintElement, IconElement, ImageElement, JumbtronHeaderElement, JumbtronSubHeaderElement, JumbtronElement, KbdShortcutElement, KbdElement, LightChainElement, ListItemGroupElement, ListItemElement, ListElement, MarqueeElement, MasonryElement, MenuItemGroupElement, MenuItemElement, MenuElement, MessageBoxElement, MeterBarElement, MeterRingElement, NumberCounterElement, NumberElement, numberBoxElementValueAccessor, NumberBoxElement, PageContentElement, PageHeaderElement, PagePreContentElement, PagePreHeaderElement, PageElement, PageMenuElement, PaginatorElement, passwordBoxElementValueAccessor, PasswordBoxElement, PatternElement, PersonaElement, PerspectiveElement, pinBoxElementValueAccessor, PinBoxElement, PopupElement, PortalProjectionElement, PortalElement, ProgressBarElement, ProgressRingElement, QRCodeElement, radioGroupElementValueAccessor, RadioGroupElement, RadioElement, RatingElement, RepeatButtonElement, ResizeAdornerElement, RibbonElement, richTextBoxElementValueAccessor, RichTextBoxElement, RippleElement, ScaleElement, ScrollElement, searchBoxElementValueAccessor, SearchBoxElement, SegmentItemElement, SegmentElement, SelectItemGroupElement, SelectItemElement, SelectElement, signaturePadElementValueAccessor, SignaturePadElement, SkeletonElement, SliderElement, Slider2ThumbElement, Slider2Element, SpacerElement, SplitButtonElement, SplitElement, StackElement, StickyElement, SuccessStateElement, SummaryElement, SwipeElement, TabItemElement, TabPanelElement, TabStripItemElement, TabStripElement, TabElement, TableBodyElement, TableCellElement, TableHeaderElement, TableRowElement, TableElement, TextFormatElement, TextElement, textBoxElementValueAccessor, TextBoxElement, Theme2Element, TickBarElement, TileListItemElement, TileListElement, timeBoxElementValueAccessor, TimeBoxElement, ToastElement, ToggleButtonElement, ToggleSwitchElement, ToggleTipElement, ToolbarElement, TooltipElement, TreeItemElement, TreeElement, UpDownSpinnerElement, VideoElement, VirtualizeElement, WizardStepElement, WizardElement, WrapElement, EID, Key, ToastServiceLocator } from '@breadstone/mosaik-elements-foundation';
+import { AbsoluteItemElement, AbsoluteElement, AnchorElement, AppHeaderElement, AppElement, AutoCompleteBoxElement, AvatarGroupElement, avatarElementValueAccessor, AvatarElement, BackdropElement, BadgeElement, BannerHeaderElement, BannerSubHeaderElement, BannerElement, BottomSheetElement, BoxElement, BreadcrumbItemElement, BreadcrumbElement, ButtonGroupElement, ButtonElement, CalendarHeaderElement, CalendarItemElement, CalendarSubHeaderElement, calendarElementValueAccessor, CalendarElement, CameraElement, CardActionsElement, CardContentElement, CardFooterElement, CardHeaderElement, CardSubTitleElement, CardTitleElement, CardElement, Carousel2Element, CarouselItem2Element, CarouselItemElement, CarouselElement, CellGroupElement, CellElement, ChartElement, ChatHeaderElement, ChatMarkerElement, ChatMessageAvatarElement, ChatMessageDividerElement, ChatMessageElement, ChatElement, checkBoxGroupElementValueAccessor, CheckBoxGroupElement, checkboxElementValueAccessor, CheckboxElement, CheckmarkElement, ChipElement, chipBoxElementValueAccessor, ChipBoxElement, ChoiceGroupHeaderElement, choiceGroupElementValueAccessor, ChoiceGroupElement, choiceElementValueAccessor, ChoiceElement, CodeElement, ColorAreaElement, ColorPickerElement, ColorSliderElement, ColorSwatchGroupElement, ColorSwatchElement, ColorThumbElement, colorBoxElementValueAccessor, ColorBoxElement, ComboItemElement, comboElementValueAccessor, ComboElement, CommentElement, CompoundButtonElement, CookiesConsentElement, DataListElement, DataTableElement, dateBoxElementValueAccessor, DateBoxElement, dateTimeBoxElementValueAccessor, DateTimeBoxElement, DialogActionsElement, DialogContentElement, DialogFooterElement, DialogHeaderSubTextElement, DialogHeaderTextElement, DialogHeaderElement, DialogElement, DialogHostElement, DisclosureElement, DividerElement, DotElement, DrawerContainerElement, DrawerContentElement, DrawerElement, DropZoneElement, DropDownButtonElement, ElevationElement, EmojiElement, EmptyStateElement, EpgChannelElement, EpgProgramElement, EpgElement, ErrorStateElement, ErrorElement, ExpandableElement, ExpanderGroupElement, ExpanderHeaderElement, ExpanderSubHeaderElement, ExpanderElement, FloatingActionButtonGroupElement, FloatingActionButtonElement, FilePickerElement, FileUploadItemElement, fileUploadElementValueAccessor, FileUploadElement, FlipElement, FloatingTriggerElement, FloatingElement, FocusRingElement, FooterItemGroupElement, FooterItemElement, FooterElement, FormFieldElement, FormElement, GridItemElement, GridElement, HelmetElement, HintElement, IconElement, ImageElement, JumbtronHeaderElement, JumbtronSubHeaderElement, JumbtronElement, KbdShortcutElement, KbdElement, LightChainElement, ListItemGroupElement, ListItemElement, ListElement, MarqueeElement, MasonryElement, MenuItemGroupElement, MenuItemElement, MenuElement, MessageBoxElement, MeterBarElement, MeterRingElement, NumberCounterElement, NumberElement, numberBoxElementValueAccessor, NumberBoxElement, PageContentElement, PageHeaderElement, PagePreContentElement, PagePreHeaderElement, PageElement, PageMenuElement, PaginatorElement, passwordBoxElementValueAccessor, PasswordBoxElement, PatternElement, PersonaElement, PerspectiveElement, pinBoxElementValueAccessor, PinBoxElement, PopupElement, PortalProjectionElement, PortalElement, ProgressBarElement, ProgressRingElement, QRCodeElement, radioGroupElementValueAccessor, RadioGroupElement, radioElementValueAccessor, RadioElement, RatingElement, RepeatButtonElement, ResizeAdornerElement, RibbonElement, richTextBoxElementValueAccessor, RichTextBoxElement, RippleElement, ScaleElement, ScrollElement, searchBoxElementValueAccessor, SearchBoxElement, SegmentItemElement, SegmentElement, SelectItemGroupElement, SelectItemElement, selectElementValueAccessor, SelectElement, signaturePadElementValueAccessor, SignaturePadElement, SkeletonElement, sliderElementValueAccessor, SliderElement, Slider2ThumbElement, Slider2Element, SpacerElement, SplitButtonElement, SplitElement, StackElement, StickyElement, SuccessStateElement, SummaryElement, SwipeElement, TabItemElement, TabPanelElement, TabStripItemElement, TabStripElement, TabElement, TableBodyElement, TableCellElement, TableHeaderElement, TableRowElement, TableElement, TextFormatElement, TextElement, textBoxElementValueAccessor, TextBoxElement, Theme2Element, TickBarElement, TileListItemElement, TileListElement, timeBoxElementValueAccessor, TimeBoxElement, ToastElement, ToggleButtonElement, toggleSwitchElementValueAccessor, ToggleSwitchElement, ToggleTipElement, ToolbarElement, TooltipElement, TreeItemElement, TreeElement, UpDownSpinnerElement, VideoElement, VirtualizeElement, WizardStepElement, WizardElement, WrapElement, EID, Key, ToastServiceLocator } from '@breadstone/mosaik-elements-foundation';
 import { fromEvent, of, isObservable, Subject, BehaviorSubject, filter, takeUntil, from } from 'rxjs';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
@@ -1391,6 +1391,7 @@ const AVATAR_DEFAULT_PROPS = new InjectionToken('AVATAR_DEFAULT_PROPS');
 let AvatarComponent = class AvatarComponent {
     _element;
     _zone;
+    _accessor;
     _connected;
     _disconnected;
     _changed;
@@ -1402,6 +1403,8 @@ let AvatarComponent = class AvatarComponent {
         cdr.detach();
         this._element = elementRef.nativeElement;
         this._zone = zone;
+        this._accessor = avatarElementValueAccessor(this._element);
+        this._element.addController(this._accessor);
         this._connected = new EventEmitter();
         this._element.on('connected', (e) => this.onEmit(this._connected, e));
         this._disconnected = new EventEmitter();
@@ -1549,6 +1552,18 @@ let AvatarComponent = class AvatarComponent {
     get changed() {
         return this._changed;
     }
+    writeValue(obj) {
+        this._accessor.writeValue(obj);
+    }
+    registerOnChange(fn) {
+        this._accessor.registerOnChange(fn);
+    }
+    registerOnTouched(fn) {
+        this._accessor.registerOnTouched(fn);
+    }
+    setDisabledState(isDisabled) {
+        this._accessor.setDisabled?.(isDisabled);
+    }
     invoke(method, ...args) {
         return this._element[method](...args);
     }
@@ -1561,7 +1576,7 @@ let AvatarComponent = class AvatarComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AvatarComponent, isStandalone: true, selector: "mosaik-avatar", inputs: { displayMode: "displayMode", hasBadge: "hasBadge", text: "text", textAccessor: "textAccessor", icon: "icon", src: "src", themeName: "themeName", size: "size", appearance: "appearance", variant: "variant", disabled: "disabled", dir: "dir", lang: "lang" }, outputs: { connected: "connected", disconnected: "disconnected", changed: "changed" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AvatarComponent, isStandalone: true, selector: "mosaik-avatar", inputs: { displayMode: "displayMode", hasBadge: "hasBadge", text: "text", textAccessor: "textAccessor", icon: "icon", src: "src", themeName: "themeName", size: "size", appearance: "appearance", variant: "variant", disabled: "disabled", dir: "dir", lang: "lang" }, outputs: { connected: "connected", disconnected: "disconnected", changed: "changed" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => AvatarComponent), multi: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 AvatarComponent = __decorate$3h([
     ProxyCmp({
@@ -1579,7 +1594,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     inputs: ['displayMode', 'hasBadge', 'text', 'textAccessor', 'icon', 'src', 'themeName', 'size', 'appearance', 'variant', 'disabled', 'dir', 'lang'],
-                    outputs: ['connected', 'disconnected', 'changed']
+                    outputs: ['connected', 'disconnected', 'changed'],
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => AvatarComponent), multi: true }]
                 }]
         }], ctorParameters: () => [], propDecorators: { displayMode: [{
                 type: Input
@@ -4595,6 +4611,7 @@ const CALENDAR_DEFAULT_PROPS = new InjectionToken('CALENDAR_DEFAULT_PROPS');
 let CalendarComponent = class CalendarComponent {
     _element;
     _zone;
+    _accessor;
     _dateChanged;
     _connected;
     _disconnected;
@@ -4607,6 +4624,8 @@ let CalendarComponent = class CalendarComponent {
         cdr.detach();
         this._element = elementRef.nativeElement;
         this._zone = zone;
+        this._accessor = calendarElementValueAccessor(this._element);
+        this._element.addController(this._accessor);
         this._dateChanged = new EventEmitter();
         this._element.on('dateChanged', (e) => this.onEmit(this._dateChanged, e));
         this._connected = new EventEmitter();
@@ -4919,6 +4938,18 @@ let CalendarComponent = class CalendarComponent {
     get changed() {
         return this._changed;
     }
+    writeValue(obj) {
+        this._accessor.writeValue(obj);
+    }
+    registerOnChange(fn) {
+        this._accessor.registerOnChange(fn);
+    }
+    registerOnTouched(fn) {
+        this._accessor.registerOnTouched(fn);
+    }
+    setDisabledState(isDisabled) {
+        this._accessor.setDisabled?.(isDisabled);
+    }
     invoke(method, ...args) {
         return this._element[method](...args);
     }
@@ -4931,7 +4962,7 @@ let CalendarComponent = class CalendarComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: CalendarComponent, isStandalone: true, selector: "mosaik-calendar", inputs: { intl: "intl", displayDate: "displayDate", displayDateStart: "displayDateStart", displayDateEnd: "displayDateEnd", header: "header", values: "values", view: "view", selectionMode: "selectionMode", blackoutDates: "blackoutDates", specialDates: "specialDates", minDate: "minDate", maxDate: "maxDate", firstDayOfWeek: "firstDayOfWeek", isTodayHighlighted: "isTodayHighlighted", isWeekendHighlighted: "isWeekendHighlighted", showWeekNumbers: "showWeekNumbers", showAdjacent: "showAdjacent", markerHandler: "markerHandler", themeName: "themeName", locale: "locale", appearance: "appearance", disabled: "disabled", invalid: "invalid", value: "value", orientation: "orientation", variant: "variant", fit: "fit", dir: "dir", lang: "lang" }, outputs: { dateChanged: "dateChanged", connected: "connected", disconnected: "disconnected", changed: "changed" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: CalendarComponent, isStandalone: true, selector: "mosaik-calendar", inputs: { intl: "intl", displayDate: "displayDate", displayDateStart: "displayDateStart", displayDateEnd: "displayDateEnd", header: "header", values: "values", view: "view", selectionMode: "selectionMode", blackoutDates: "blackoutDates", specialDates: "specialDates", minDate: "minDate", maxDate: "maxDate", firstDayOfWeek: "firstDayOfWeek", isTodayHighlighted: "isTodayHighlighted", isWeekendHighlighted: "isWeekendHighlighted", showWeekNumbers: "showWeekNumbers", showAdjacent: "showAdjacent", markerHandler: "markerHandler", themeName: "themeName", locale: "locale", appearance: "appearance", disabled: "disabled", invalid: "invalid", value: "value", orientation: "orientation", variant: "variant", fit: "fit", dir: "dir", lang: "lang" }, outputs: { dateChanged: "dateChanged", connected: "connected", disconnected: "disconnected", changed: "changed" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CalendarComponent), multi: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 CalendarComponent = __decorate$32([
     ProxyCmp({
@@ -4949,7 +4980,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     inputs: ['intl', 'displayDate', 'displayDateStart', 'displayDateEnd', 'header', 'values', 'view', 'selectionMode', 'blackoutDates', 'specialDates', 'minDate', 'maxDate', 'firstDayOfWeek', 'isTodayHighlighted', 'isWeekendHighlighted', 'showWeekNumbers', 'showAdjacent', 'markerHandler', 'themeName', 'locale', 'appearance', 'disabled', 'invalid', 'value', 'orientation', 'variant', 'fit', 'dir', 'lang'],
-                    outputs: ['dateChanged', 'connected', 'disconnected', 'changed']
+                    outputs: ['dateChanged', 'connected', 'disconnected', 'changed'],
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CalendarComponent), multi: true }]
                 }]
         }], ctorParameters: () => [], propDecorators: { intl: [{
                 type: Input
@@ -9731,6 +9763,7 @@ const CHECKBOX_DEFAULT_PROPS = new InjectionToken('CHECKBOX_DEFAULT_PROPS');
 let CheckboxComponent = class CheckboxComponent {
     _element;
     _zone;
+    _accessor;
     _checked;
     _unchecked;
     _indeterminate;
@@ -9745,6 +9778,8 @@ let CheckboxComponent = class CheckboxComponent {
         cdr.detach();
         this._element = elementRef.nativeElement;
         this._zone = zone;
+        this._accessor = checkboxElementValueAccessor(this._element);
+        this._element.addController(this._accessor);
         this._checked = new EventEmitter();
         this._element.on('checked', (e) => this.onEmit(this._checked, e));
         this._unchecked = new EventEmitter();
@@ -9927,6 +9962,18 @@ let CheckboxComponent = class CheckboxComponent {
     get changed() {
         return this._changed;
     }
+    writeValue(obj) {
+        this._accessor.writeValue(obj);
+    }
+    registerOnChange(fn) {
+        this._accessor.registerOnChange(fn);
+    }
+    registerOnTouched(fn) {
+        this._accessor.registerOnTouched(fn);
+    }
+    setDisabledState(isDisabled) {
+        this._accessor.setDisabled?.(isDisabled);
+    }
     invoke(method, ...args) {
         return this._element[method](...args);
     }
@@ -9939,7 +9986,7 @@ let CheckboxComponent = class CheckboxComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: CheckboxComponent, isStandalone: true, selector: "mosaik-checkbox", inputs: { labelPosition: "labelPosition", required: "required", name: "name", themeName: "themeName", invalid: "invalid", value: "value", variant: "variant", appearance: "appearance", disabled: "disabled", label: "label", isChecked: "isChecked", isThreeState: "isThreeState", isFocused: "isFocused", dir: "dir", lang: "lang" }, outputs: { checked: "checked", unchecked: "unchecked", indeterminate: "indeterminate", connected: "connected", disconnected: "disconnected", changed: "changed" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: CheckboxComponent, isStandalone: true, selector: "mosaik-checkbox", inputs: { labelPosition: "labelPosition", required: "required", name: "name", themeName: "themeName", invalid: "invalid", value: "value", variant: "variant", appearance: "appearance", disabled: "disabled", label: "label", isChecked: "isChecked", isThreeState: "isThreeState", isFocused: "isFocused", dir: "dir", lang: "lang" }, outputs: { checked: "checked", unchecked: "unchecked", indeterminate: "indeterminate", connected: "connected", disconnected: "disconnected", changed: "changed" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CheckboxComponent), multi: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 CheckboxComponent = __decorate$2H([
     ProxyCmp({
@@ -9957,7 +10004,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     inputs: ['labelPosition', 'required', 'name', 'themeName', 'invalid', 'value', 'variant', 'appearance', 'disabled', 'label', 'isChecked', 'isThreeState', 'isFocused', 'dir', 'lang'],
-                    outputs: ['checked', 'unchecked', 'indeterminate', 'connected', 'disconnected', 'changed']
+                    outputs: ['checked', 'unchecked', 'indeterminate', 'connected', 'disconnected', 'changed'],
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CheckboxComponent), multi: true }]
                 }]
         }], ctorParameters: () => [], propDecorators: { labelPosition: [{
                 type: Input
@@ -11311,6 +11359,7 @@ const CHOICE_DEFAULT_PROPS = new InjectionToken('CHOICE_DEFAULT_PROPS');
 let ChoiceComponent = class ChoiceComponent {
     _element;
     _zone;
+    _accessor;
     _checked;
     _unchecked;
     _indeterminate;
@@ -11325,6 +11374,8 @@ let ChoiceComponent = class ChoiceComponent {
         cdr.detach();
         this._element = elementRef.nativeElement;
         this._zone = zone;
+        this._accessor = choiceElementValueAccessor(this._element);
+        this._element.addController(this._accessor);
         this._checked = new EventEmitter();
         this._element.on('checked', (e) => this.onEmit(this._checked, e));
         this._unchecked = new EventEmitter();
@@ -11527,6 +11578,18 @@ let ChoiceComponent = class ChoiceComponent {
     get changed() {
         return this._changed;
     }
+    writeValue(obj) {
+        this._accessor.writeValue(obj);
+    }
+    registerOnChange(fn) {
+        this._accessor.registerOnChange(fn);
+    }
+    registerOnTouched(fn) {
+        this._accessor.registerOnTouched(fn);
+    }
+    setDisabledState(isDisabled) {
+        this._accessor.setDisabled?.(isDisabled);
+    }
     invoke(method, ...args) {
         return this._element[method](...args);
     }
@@ -11539,7 +11602,7 @@ let ChoiceComponent = class ChoiceComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ChoiceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: ChoiceComponent, isStandalone: true, selector: "mosaik-choice", inputs: { name: "name", additional: "additional", required: "required", icon: "icon", iconPosition: "iconPosition", themeName: "themeName", invalid: "invalid", disabled: "disabled", appearance: "appearance", variant: "variant", label: "label", value: "value", isChecked: "isChecked", isThreeState: "isThreeState", isFocused: "isFocused", dir: "dir", lang: "lang" }, outputs: { checked: "checked", unchecked: "unchecked", indeterminate: "indeterminate", connected: "connected", disconnected: "disconnected", changed: "changed" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: ChoiceComponent, isStandalone: true, selector: "mosaik-choice", inputs: { name: "name", additional: "additional", required: "required", icon: "icon", iconPosition: "iconPosition", themeName: "themeName", invalid: "invalid", disabled: "disabled", appearance: "appearance", variant: "variant", label: "label", value: "value", isChecked: "isChecked", isThreeState: "isThreeState", isFocused: "isFocused", dir: "dir", lang: "lang" }, outputs: { checked: "checked", unchecked: "unchecked", indeterminate: "indeterminate", connected: "connected", disconnected: "disconnected", changed: "changed" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ChoiceComponent), multi: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 ChoiceComponent = __decorate$2B([
     ProxyCmp({
@@ -11557,7 +11620,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     inputs: ['name', 'additional', 'required', 'icon', 'iconPosition', 'themeName', 'invalid', 'disabled', 'appearance', 'variant', 'label', 'value', 'isChecked', 'isThreeState', 'isFocused', 'dir', 'lang'],
-                    outputs: ['checked', 'unchecked', 'indeterminate', 'connected', 'disconnected', 'changed']
+                    outputs: ['checked', 'unchecked', 'indeterminate', 'connected', 'disconnected', 'changed'],
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ChoiceComponent), multi: true }]
                 }]
         }], ctorParameters: () => [], propDecorators: { name: [{
                 type: Input
@@ -13543,6 +13607,7 @@ const COMBO_DEFAULT_PROPS = new InjectionToken('COMBO_DEFAULT_PROPS');
 let ComboComponent = class ComboComponent {
     _element;
     _zone;
+    _accessor;
     _selectionChanged;
     _itemsChanged;
     _connected;
@@ -13556,6 +13621,8 @@ let ComboComponent = class ComboComponent {
         cdr.detach();
         this._element = elementRef.nativeElement;
         this._zone = zone;
+        this._accessor = comboElementValueAccessor(this._element);
+        this._element.addController(this._accessor);
         this._selectionChanged = new EventEmitter();
         this._element.on('selectionChanged', (e) => this.onEmit(this._selectionChanged, e));
         this._itemsChanged = new EventEmitter();
@@ -13813,6 +13880,18 @@ let ComboComponent = class ComboComponent {
     get changed() {
         return this._changed;
     }
+    writeValue(obj) {
+        this._accessor.writeValue(obj);
+    }
+    registerOnChange(fn) {
+        this._accessor.registerOnChange(fn);
+    }
+    registerOnTouched(fn) {
+        this._accessor.registerOnTouched(fn);
+    }
+    setDisabledState(isDisabled) {
+        this._accessor.setDisabled?.(isDisabled);
+    }
     invoke(method, ...args) {
         return this._element[method](...args);
     }
@@ -13825,7 +13904,7 @@ let ComboComponent = class ComboComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ComboComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: ComboComponent, isStandalone: true, selector: "mosaik-combo", inputs: { selectionMode: "selectionMode", placeholder: "placeholder", required: "required", themeName: "themeName", dropDownPlacement: "dropDownPlacement", dropDownStrategy: "dropDownStrategy", dropDownDistance: "dropDownDistance", dropDownSkidding: "dropDownSkidding", dropDownStaysOpen: "dropDownStaysOpen", maxDropDownHeight: "maxDropDownHeight", isDropDownOpen: "isDropDownOpen", appearance: "appearance", variant: "variant", label: "label", isClearable: "isClearable", cleared: "cleared", disabled: "disabled", invalid: "invalid", value: "value", selectedItems: "selectedItems", selectedItem: "selectedItem", dir: "dir", lang: "lang" }, outputs: { selectionChanged: "selectionChanged", itemsChanged: "itemsChanged", connected: "connected", disconnected: "disconnected", changed: "changed" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: ComboComponent, isStandalone: true, selector: "mosaik-combo", inputs: { selectionMode: "selectionMode", placeholder: "placeholder", required: "required", themeName: "themeName", dropDownPlacement: "dropDownPlacement", dropDownStrategy: "dropDownStrategy", dropDownDistance: "dropDownDistance", dropDownSkidding: "dropDownSkidding", dropDownStaysOpen: "dropDownStaysOpen", maxDropDownHeight: "maxDropDownHeight", isDropDownOpen: "isDropDownOpen", appearance: "appearance", variant: "variant", label: "label", isClearable: "isClearable", cleared: "cleared", disabled: "disabled", invalid: "invalid", value: "value", selectedItems: "selectedItems", selectedItem: "selectedItem", dir: "dir", lang: "lang" }, outputs: { selectionChanged: "selectionChanged", itemsChanged: "itemsChanged", connected: "connected", disconnected: "disconnected", changed: "changed" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ComboComponent), multi: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 ComboComponent = __decorate$2r([
     ProxyCmp({
@@ -13843,7 +13922,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     inputs: ['selectionMode', 'placeholder', 'required', 'themeName', 'dropDownPlacement', 'dropDownStrategy', 'dropDownDistance', 'dropDownSkidding', 'dropDownStaysOpen', 'maxDropDownHeight', 'isDropDownOpen', 'appearance', 'variant', 'label', 'isClearable', 'cleared', 'disabled', 'invalid', 'value', 'selectedItems', 'selectedItem', 'dir', 'lang'],
-                    outputs: ['selectionChanged', 'itemsChanged', 'connected', 'disconnected', 'changed']
+                    outputs: ['selectionChanged', 'itemsChanged', 'connected', 'disconnected', 'changed'],
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ComboComponent), multi: true }]
                 }]
         }], ctorParameters: () => [], propDecorators: { selectionMode: [{
                 type: Input
@@ -23083,6 +23163,7 @@ const FILEUPLOAD_DEFAULT_PROPS = new InjectionToken('FILEUPLOAD_DEFAULT_PROPS');
 let FileUploadComponent = class FileUploadComponent {
     _element;
     _zone;
+    _accessor;
     _connected;
     _disconnected;
     _changed;
@@ -23094,6 +23175,8 @@ let FileUploadComponent = class FileUploadComponent {
         cdr.detach();
         this._element = elementRef.nativeElement;
         this._zone = zone;
+        this._accessor = fileUploadElementValueAccessor(this._element);
+        this._element.addController(this._accessor);
         this._connected = new EventEmitter();
         this._element.on('connected', (e) => this.onEmit(this._connected, e));
         this._disconnected = new EventEmitter();
@@ -23331,6 +23414,18 @@ let FileUploadComponent = class FileUploadComponent {
     get changed() {
         return this._changed;
     }
+    writeValue(obj) {
+        this._accessor.writeValue(obj);
+    }
+    registerOnChange(fn) {
+        this._accessor.registerOnChange(fn);
+    }
+    registerOnTouched(fn) {
+        this._accessor.registerOnTouched(fn);
+    }
+    setDisabledState(isDisabled) {
+        this._accessor.setDisabled?.(isDisabled);
+    }
     invoke(method, ...args) {
         return this._element[method](...args);
     }
@@ -23343,7 +23438,7 @@ let FileUploadComponent = class FileUploadComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: FileUploadComponent, isStandalone: true, selector: "mosaik-file-upload", inputs: { isDragging: "isDragging", intl: "intl", fileAdded: "fileAdded", fileDeleted: "fileDeleted", fileFailed: "fileFailed", filesChanged: "filesChanged", autoUpload: "autoUpload", view: "view", multiple: "multiple", directory: "directory", accept: "accept", strategy: "strategy", placeholder: "placeholder", maxSize: "maxSize", themeName: "themeName", disabled: "disabled", appearance: "appearance", variant: "variant", invalid: "invalid", value: "value", dir: "dir", lang: "lang" }, outputs: { connected: "connected", disconnected: "disconnected", changed: "changed" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: FileUploadComponent, isStandalone: true, selector: "mosaik-file-upload", inputs: { isDragging: "isDragging", intl: "intl", fileAdded: "fileAdded", fileDeleted: "fileDeleted", fileFailed: "fileFailed", filesChanged: "filesChanged", autoUpload: "autoUpload", view: "view", multiple: "multiple", directory: "directory", accept: "accept", strategy: "strategy", placeholder: "placeholder", maxSize: "maxSize", themeName: "themeName", disabled: "disabled", appearance: "appearance", variant: "variant", invalid: "invalid", value: "value", dir: "dir", lang: "lang" }, outputs: { connected: "connected", disconnected: "disconnected", changed: "changed" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => FileUploadComponent), multi: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 FileUploadComponent = __decorate$1O([
     ProxyCmp({
@@ -23361,7 +23456,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     inputs: ['isDragging', 'intl', 'fileAdded', 'fileDeleted', 'fileFailed', 'filesChanged', 'autoUpload', 'view', 'multiple', 'directory', 'accept', 'strategy', 'placeholder', 'maxSize', 'themeName', 'disabled', 'appearance', 'variant', 'invalid', 'value', 'dir', 'lang'],
-                    outputs: ['connected', 'disconnected', 'changed']
+                    outputs: ['connected', 'disconnected', 'changed'],
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => FileUploadComponent), multi: true }]
                 }]
         }], ctorParameters: () => [], propDecorators: { isDragging: [{
                 type: Input
@@ -35067,6 +35163,7 @@ const RADIO_DEFAULT_PROPS = new InjectionToken('RADIO_DEFAULT_PROPS');
 let RadioComponent = class RadioComponent {
     _element;
     _zone;
+    _accessor;
     _checked;
     _unchecked;
     _indeterminate;
@@ -35081,6 +35178,8 @@ let RadioComponent = class RadioComponent {
         cdr.detach();
         this._element = elementRef.nativeElement;
         this._zone = zone;
+        this._accessor = radioElementValueAccessor(this._element);
+        this._element.addController(this._accessor);
         this._checked = new EventEmitter();
         this._element.on('checked', (e) => this.onEmit(this._checked, e));
         this._unchecked = new EventEmitter();
@@ -35263,6 +35362,18 @@ let RadioComponent = class RadioComponent {
     get changed() {
         return this._changed;
     }
+    writeValue(obj) {
+        this._accessor.writeValue(obj);
+    }
+    registerOnChange(fn) {
+        this._accessor.registerOnChange(fn);
+    }
+    registerOnTouched(fn) {
+        this._accessor.registerOnTouched(fn);
+    }
+    setDisabledState(isDisabled) {
+        this._accessor.setDisabled?.(isDisabled);
+    }
     invoke(method, ...args) {
         return this._element[method](...args);
     }
@@ -35275,7 +35386,7 @@ let RadioComponent = class RadioComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: RadioComponent, isStandalone: true, selector: "mosaik-radio", inputs: { labelPosition: "labelPosition", required: "required", name: "name", themeName: "themeName", invalid: "invalid", value: "value", variant: "variant", appearance: "appearance", disabled: "disabled", label: "label", isChecked: "isChecked", isThreeState: "isThreeState", isFocused: "isFocused", dir: "dir", lang: "lang" }, outputs: { checked: "checked", unchecked: "unchecked", indeterminate: "indeterminate", connected: "connected", disconnected: "disconnected", changed: "changed" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: RadioComponent, isStandalone: true, selector: "mosaik-radio", inputs: { labelPosition: "labelPosition", required: "required", name: "name", themeName: "themeName", invalid: "invalid", value: "value", variant: "variant", appearance: "appearance", disabled: "disabled", label: "label", isChecked: "isChecked", isThreeState: "isThreeState", isFocused: "isFocused", dir: "dir", lang: "lang" }, outputs: { checked: "checked", unchecked: "unchecked", indeterminate: "indeterminate", connected: "connected", disconnected: "disconnected", changed: "changed" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RadioComponent), multi: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 RadioComponent = __decorate$X([
     ProxyCmp({
@@ -35293,7 +35404,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     inputs: ['labelPosition', 'required', 'name', 'themeName', 'invalid', 'value', 'variant', 'appearance', 'disabled', 'label', 'isChecked', 'isThreeState', 'isFocused', 'dir', 'lang'],
-                    outputs: ['checked', 'unchecked', 'indeterminate', 'connected', 'disconnected', 'changed']
+                    outputs: ['checked', 'unchecked', 'indeterminate', 'connected', 'disconnected', 'changed'],
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RadioComponent), multi: true }]
                 }]
         }], ctorParameters: () => [], propDecorators: { labelPosition: [{
                 type: Input
@@ -38663,6 +38775,7 @@ const SELECT_DEFAULT_PROPS = new InjectionToken('SELECT_DEFAULT_PROPS');
 let SelectComponent = class SelectComponent {
     _element;
     _zone;
+    _accessor;
     _selectionChanged;
     _itemsChanged;
     _connected;
@@ -38676,6 +38789,8 @@ let SelectComponent = class SelectComponent {
         cdr.detach();
         this._element = elementRef.nativeElement;
         this._zone = zone;
+        this._accessor = selectElementValueAccessor(this._element);
+        this._element.addController(this._accessor);
         this._selectionChanged = new EventEmitter();
         this._element.on('selectionChanged', (e) => this.onEmit(this._selectionChanged, e));
         this._itemsChanged = new EventEmitter();
@@ -38933,6 +39048,18 @@ let SelectComponent = class SelectComponent {
     get changed() {
         return this._changed;
     }
+    writeValue(obj) {
+        this._accessor.writeValue(obj);
+    }
+    registerOnChange(fn) {
+        this._accessor.registerOnChange(fn);
+    }
+    registerOnTouched(fn) {
+        this._accessor.registerOnTouched(fn);
+    }
+    setDisabledState(isDisabled) {
+        this._accessor.setDisabled?.(isDisabled);
+    }
     invoke(method, ...args) {
         return this._element[method](...args);
     }
@@ -38945,7 +39072,7 @@ let SelectComponent = class SelectComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: SelectComponent, isStandalone: true, selector: "mosaik-select", inputs: { isEditable: "isEditable", isReadOnly: "isReadOnly", placeholder: "placeholder", required: "required", themeName: "themeName", appearance: "appearance", variant: "variant", dropDownPlacement: "dropDownPlacement", dropDownStrategy: "dropDownStrategy", dropDownDistance: "dropDownDistance", dropDownSkidding: "dropDownSkidding", dropDownStaysOpen: "dropDownStaysOpen", maxDropDownHeight: "maxDropDownHeight", isDropDownOpen: "isDropDownOpen", label: "label", isClearable: "isClearable", cleared: "cleared", disabled: "disabled", invalid: "invalid", value: "value", selectedItem: "selectedItem", dir: "dir", lang: "lang" }, outputs: { selectionChanged: "selectionChanged", itemsChanged: "itemsChanged", connected: "connected", disconnected: "disconnected", changed: "changed" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: SelectComponent, isStandalone: true, selector: "mosaik-select", inputs: { isEditable: "isEditable", isReadOnly: "isReadOnly", placeholder: "placeholder", required: "required", themeName: "themeName", appearance: "appearance", variant: "variant", dropDownPlacement: "dropDownPlacement", dropDownStrategy: "dropDownStrategy", dropDownDistance: "dropDownDistance", dropDownSkidding: "dropDownSkidding", dropDownStaysOpen: "dropDownStaysOpen", maxDropDownHeight: "maxDropDownHeight", isDropDownOpen: "isDropDownOpen", label: "label", isClearable: "isClearable", cleared: "cleared", disabled: "disabled", invalid: "invalid", value: "value", selectedItem: "selectedItem", dir: "dir", lang: "lang" }, outputs: { selectionChanged: "selectionChanged", itemsChanged: "itemsChanged", connected: "connected", disconnected: "disconnected", changed: "changed" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectComponent), multi: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 SelectComponent = __decorate$J([
     ProxyCmp({
@@ -38963,7 +39090,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     inputs: ['isEditable', 'isReadOnly', 'placeholder', 'required', 'themeName', 'appearance', 'variant', 'dropDownPlacement', 'dropDownStrategy', 'dropDownDistance', 'dropDownSkidding', 'dropDownStaysOpen', 'maxDropDownHeight', 'isDropDownOpen', 'label', 'isClearable', 'cleared', 'disabled', 'invalid', 'value', 'selectedItem', 'dir', 'lang'],
-                    outputs: ['selectionChanged', 'itemsChanged', 'connected', 'disconnected', 'changed']
+                    outputs: ['selectionChanged', 'itemsChanged', 'connected', 'disconnected', 'changed'],
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectComponent), multi: true }]
                 }]
         }], ctorParameters: () => [], propDecorators: { isEditable: [{
                 type: Input
@@ -39675,6 +39803,7 @@ const SLIDER_DEFAULT_PROPS = new InjectionToken('SLIDER_DEFAULT_PROPS');
 let SliderComponent = class SliderComponent {
     _element;
     _zone;
+    _accessor;
     _valueChanged;
     _connected;
     _disconnected;
@@ -39687,6 +39816,8 @@ let SliderComponent = class SliderComponent {
         cdr.detach();
         this._element = elementRef.nativeElement;
         this._zone = zone;
+        this._accessor = sliderElementValueAccessor(this._element);
+        this._element.addController(this._accessor);
         this._valueChanged = new EventEmitter();
         this._element.on('valueChanged', (e) => this.onEmit(this._valueChanged, e));
         this._connected = new EventEmitter();
@@ -39899,6 +40030,18 @@ let SliderComponent = class SliderComponent {
     get changed() {
         return this._changed;
     }
+    writeValue(obj) {
+        this._accessor.writeValue(obj);
+    }
+    registerOnChange(fn) {
+        this._accessor.registerOnChange(fn);
+    }
+    registerOnTouched(fn) {
+        this._accessor.registerOnTouched(fn);
+    }
+    setDisabledState(isDisabled) {
+        this._accessor.setDisabled?.(isDisabled);
+    }
     invoke(method, ...args) {
         return this._element[method](...args);
     }
@@ -39911,7 +40054,11 @@ let SliderComponent = class SliderComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: SliderComponent, isStandalone: true, selector: "mosaik-slider", inputs: { step: "step", track: "track", ticks: "ticks", tickPlacement: "tickPlacement", showTickLabels: "showTickLabels", tickLabelAccessor: "tickLabelAccessor", tooltipPlacement: "tooltipPlacement", tooltipAccessor: "tooltipAccessor", themeName: "themeName", orientation: "orientation", disabled: "disabled", variant: "variant", appearance: "appearance", isFocused: "isFocused", min: "min", max: "max", value: "value", dir: "dir", lang: "lang" }, outputs: { valueChanged: "valueChanged", connected: "connected", disconnected: "disconnected", changed: "changed" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: SliderComponent, isStandalone: true, selector: "mosaik-slider", inputs: { step: "step", track: "track", ticks: "ticks", tickPlacement: "tickPlacement", showTickLabels: "showTickLabels", tickLabelAccessor: "tickLabelAccessor", tooltipPlacement: "tooltipPlacement", tooltipAccessor: "tooltipAccessor", themeName: "themeName", orientation: "orientation", disabled: "disabled", variant: "variant", appearance: "appearance", isFocused: "isFocused", min: "min", max: "max", value: "value", dir: "dir", lang: "lang" }, outputs: { valueChanged: "valueChanged", connected: "connected", disconnected: "disconnected", changed: "changed" }, providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SliderComponent),
+                multi: true
+            }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 SliderComponent = __decorate$G([
     ProxyCmp({
@@ -39929,7 +40076,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     inputs: ['step', 'track', 'ticks', 'tickPlacement', 'showTickLabels', 'tickLabelAccessor', 'tooltipPlacement', 'tooltipAccessor', 'themeName', 'orientation', 'disabled', 'variant', 'appearance', 'isFocused', 'min', 'max', 'value', 'dir', 'lang'],
-                    outputs: ['valueChanged', 'connected', 'disconnected', 'changed']
+                    outputs: ['valueChanged', 'connected', 'disconnected', 'changed'],
+                    providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SliderComponent),
+                            multi: true
+                        }]
                 }]
         }], ctorParameters: () => [], propDecorators: { step: [{
                 type: Input
@@ -47147,6 +47299,7 @@ const TOGGLESWITCH_DEFAULT_PROPS = new InjectionToken('TOGGLESWITCH_DEFAULT_PROP
 let ToggleSwitchComponent = class ToggleSwitchComponent {
     _element;
     _zone;
+    _accessor;
     _checked;
     _unchecked;
     _indeterminate;
@@ -47161,6 +47314,8 @@ let ToggleSwitchComponent = class ToggleSwitchComponent {
         cdr.detach();
         this._element = elementRef.nativeElement;
         this._zone = zone;
+        this._accessor = toggleSwitchElementValueAccessor(this._element);
+        this._element.addController(this._accessor);
         this._checked = new EventEmitter();
         this._element.on('checked', (e) => this.onEmit(this._checked, e));
         this._unchecked = new EventEmitter();
@@ -47343,6 +47498,18 @@ let ToggleSwitchComponent = class ToggleSwitchComponent {
     get changed() {
         return this._changed;
     }
+    writeValue(obj) {
+        this._accessor.writeValue(obj);
+    }
+    registerOnChange(fn) {
+        this._accessor.registerOnChange(fn);
+    }
+    registerOnTouched(fn) {
+        this._accessor.registerOnTouched(fn);
+    }
+    setDisabledState(isDisabled) {
+        this._accessor.setDisabled?.(isDisabled);
+    }
     invoke(method, ...args) {
         return this._element[method](...args);
     }
@@ -47355,7 +47522,7 @@ let ToggleSwitchComponent = class ToggleSwitchComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ToggleSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: ToggleSwitchComponent, isStandalone: true, selector: "mosaik-toggle-switch", inputs: { labelPosition: "labelPosition", required: "required", name: "name", themeName: "themeName", invalid: "invalid", value: "value", variant: "variant", appearance: "appearance", disabled: "disabled", label: "label", isChecked: "isChecked", isThreeState: "isThreeState", isFocused: "isFocused", dir: "dir", lang: "lang" }, outputs: { checked: "checked", unchecked: "unchecked", indeterminate: "indeterminate", connected: "connected", disconnected: "disconnected", changed: "changed" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: ToggleSwitchComponent, isStandalone: true, selector: "mosaik-toggle-switch", inputs: { labelPosition: "labelPosition", required: "required", name: "name", themeName: "themeName", invalid: "invalid", value: "value", variant: "variant", appearance: "appearance", disabled: "disabled", label: "label", isChecked: "isChecked", isThreeState: "isThreeState", isFocused: "isFocused", dir: "dir", lang: "lang" }, outputs: { checked: "checked", unchecked: "unchecked", indeterminate: "indeterminate", connected: "connected", disconnected: "disconnected", changed: "changed" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ToggleSwitchComponent), multi: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 ToggleSwitchComponent = __decorate$b([
     ProxyCmp({
@@ -47373,7 +47540,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     inputs: ['labelPosition', 'required', 'name', 'themeName', 'invalid', 'value', 'variant', 'appearance', 'disabled', 'label', 'isChecked', 'isThreeState', 'isFocused', 'dir', 'lang'],
-                    outputs: ['checked', 'unchecked', 'indeterminate', 'connected', 'disconnected', 'changed']
+                    outputs: ['checked', 'unchecked', 'indeterminate', 'connected', 'disconnected', 'changed'],
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ToggleSwitchComponent), multi: true }]
                 }]
         }], ctorParameters: () => [], propDecorators: { labelPosition: [{
                 type: Input