@breadstone/mosaik-elements-angular 0.0.119 → 0.0.120

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.0.120 (2025-08-18)
+
+### 🚀 Features
+
+- Add ToggleButtonElementValueAccessor and integrate with ToggleButtonComponent ([5e831d7fbd](https://github.com/RueDeRennes/mosaik/commit/5e831d7fbd))
+
 ## 0.0.119 (2025-08-18)
 
 ### 🚀 Features

package/fesm2022/mosaik-elements-angular.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, ChangeDetectorRef, ElementRef, NgZone, EventEmitter, Output, Input, ChangeDetectionStrategy, Component, makeEnvironmentProviders, DestroyRef, Directive, forwardRef, Injectable, Pipe, signal, effect, ViewChild, ViewEncapsulation, TemplateRef, Injector, DOCUMENT as DOCUMENT$1, Renderer2, computed, provideEnvironmentInitializer, ViewContainerRef, booleanAttribute, HostListener, ContentChildren, isDevMode } from '@angular/core';
 import * as i1$1 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, ChatInputElement, 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, DisclosureElement, DismissElement, 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, IndicatorElement, JumbotronHeaderElement, JumbotronSubHeaderElement, JumbotronElement, 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, PortalHostElement, PortalProjectionElement, PortalElement, ProgressBarElement, ProgressRingElement, QRCodeElement, radioGroupElementValueAccessor, RadioGroupElement, radioElementValueAccessor, RadioElement, RatingElement, RepeatButtonElement, ResizeAdornerElement, RibbonElement, richTextBoxElementValueAccessor, RichTextBoxElement, RippleElement, ScaleElement, ScrollElement, scrubSliderElementValueAccessor, ScrubSliderElement, 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, TableFooterElement, 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, ToastService as ToastService$1, EID, Key, MessageBoxService as MessageBoxService$1, BottomSheetService as BottomSheetService$1, TranslatorService, Translator, TranslatorServiceLocator, BREAKPOINTS, Size, Spacing, AnimationPlayer2, Animation } 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, ChatInputElement, 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, DisclosureElement, DismissElement, 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, IndicatorElement, JumbotronHeaderElement, JumbotronSubHeaderElement, JumbotronElement, 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, PortalHostElement, PortalProjectionElement, PortalElement, ProgressBarElement, ProgressRingElement, QRCodeElement, radioGroupElementValueAccessor, RadioGroupElement, radioElementValueAccessor, RadioElement, RatingElement, RepeatButtonElement, ResizeAdornerElement, RibbonElement, richTextBoxElementValueAccessor, RichTextBoxElement, RippleElement, ScaleElement, ScrollElement, scrubSliderElementValueAccessor, ScrubSliderElement, 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, TableFooterElement, TableHeaderElement, TableRowElement, TableElement, TextFormatElement, TextElement, textBoxElementValueAccessor, TextBoxElement, Theme2Element, TickBarElement, TileListItemElement, TileListElement, timeBoxElementValueAccessor, TimeBoxElement, ToastElement, toggleButtonElementValueAccessor, ToggleButtonElement, toggleSwitchElementValueAccessor, ToggleSwitchElement, ToggleTipElement, ToolbarElement, TooltipElement, TreeItemElement, TreeElement, UpDownSpinnerElement, VideoElement, VirtualizeElement, WizardStepElement, WizardElement, WrapElement, ToastService as ToastService$1, EID, Key, MessageBoxService as MessageBoxService$1, BottomSheetService as BottomSheetService$1, TranslatorService, Translator, TranslatorServiceLocator, BREAKPOINTS, Size, Spacing, AnimationPlayer2, Animation } from '@breadstone/mosaik-elements-foundation';
 import * as i1 from '@angular/forms';
 import { NgControl, TouchedChangeEvent, NG_VALUE_ACCESSOR, FormGroup, FormControl, FormArray, AbstractControl } from '@angular/forms';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -40530,26 +40530,6 @@ let ScrubSliderComponent = class ScrubSliderComponent {
         this._element.on('changed', (e) => this.onEmit(this._changed, e));
         applyDefaults(this._element, inject(SCRUB_SLIDER_DEFAULT_PROPS, { optional: true }) ?? {});
     }
-    get pxPerStep() {
-        // @ts-ignore - temporary fix for the type error
-        return this._element.pxPerStep;
-    }
-    set pxPerStep(value) {
-        this._zone.runOutsideAngular(() => {
-            // @ts-ignore - temporary fix for the type error
-            this._element.pxPerStep = value;
-        });
-    }
-    get accelerate() {
-        // @ts-ignore - temporary fix for the type error
-        return this._element.accelerate;
-    }
-    set accelerate(value) {
-        this._zone.runOutsideAngular(() => {
-            // @ts-ignore - temporary fix for the type error
-            this._element.accelerate = value;
-        });
-    }
     get step() {
         // @ts-ignore - temporary fix for the type error
         return this._element.step;
@@ -40630,6 +40610,26 @@ let ScrubSliderComponent = class ScrubSliderComponent {
             this._element.tooltipAccessor = value;
         });
     }
+    get pxPerStep() {
+        // @ts-ignore - temporary fix for the type error
+        return this._element.pxPerStep;
+    }
+    set pxPerStep(value) {
+        this._zone.runOutsideAngular(() => {
+            // @ts-ignore - temporary fix for the type error
+            this._element.pxPerStep = value;
+        });
+    }
+    get accelerate() {
+        // @ts-ignore - temporary fix for the type error
+        return this._element.accelerate;
+    }
+    set accelerate(value) {
+        this._zone.runOutsideAngular(() => {
+            // @ts-ignore - temporary fix for the type error
+            this._element.accelerate = value;
+        });
+    }
     get themeName() {
         // @ts-ignore - temporary fix for the type error
         return this._element.themeName;
@@ -40792,7 +40792,7 @@ let ScrubSliderComponent = class ScrubSliderComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ScrubSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ScrubSliderComponent, isStandalone: true, selector: "mosaik-scrub-slider", inputs: { pxPerStep: "pxPerStep", accelerate: "accelerate", 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", invalid: "invalid", min: "min", max: "max", value: "value", dir: "dir", lang: "lang" }, outputs: { input: "input", change: "change", valueChanged: "valueChanged", connected: "connected", disconnected: "disconnected", changed: "changed" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ScrubSliderComponent, isStandalone: true, selector: "mosaik-scrub-slider", inputs: { step: "step", track: "track", ticks: "ticks", tickPlacement: "tickPlacement", showTickLabels: "showTickLabels", tickLabelAccessor: "tickLabelAccessor", tooltipPlacement: "tooltipPlacement", tooltipAccessor: "tooltipAccessor", pxPerStep: "pxPerStep", accelerate: "accelerate", themeName: "themeName", orientation: "orientation", disabled: "disabled", variant: "variant", appearance: "appearance", isFocused: "isFocused", invalid: "invalid", min: "min", max: "max", value: "value", dir: "dir", lang: "lang" }, outputs: { input: "input", change: "change", valueChanged: "valueChanged", connected: "connected", disconnected: "disconnected", changed: "changed" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ScrubSliderComponent),
@@ -40807,7 +40807,7 @@ let ScrubSliderComponent = class ScrubSliderComponent {
 ScrubSliderComponent = __decorate$Q([
     ProxyCmp({
         defineCustomElementFn: () => customElements.define('mosaik-scrub-slider', ScrubSliderElement),
-        inputs: ['pxPerStep', 'accelerate', 'step', 'track', 'ticks', 'tickPlacement', 'showTickLabels', 'tickLabelAccessor', 'tooltipPlacement', 'tooltipAccessor', 'themeName', 'orientation', 'disabled', 'variant', 'appearance', 'isFocused', 'invalid', 'min', 'max', 'value', 'dir', 'lang'],
+        inputs: ['step', 'track', 'ticks', 'tickPlacement', 'showTickLabels', 'tickLabelAccessor', 'tooltipPlacement', 'tooltipAccessor', 'pxPerStep', 'accelerate', 'themeName', 'orientation', 'disabled', 'variant', 'appearance', 'isFocused', 'invalid', 'min', 'max', 'value', 'dir', 'lang'],
         methods: ['checkValidity', 'hasVisibleFocusInTree', 'adoptStyle', 'on', 'off', 'emit', 'requestUpdate']
     }),
     __metadata$Q("design:paramtypes", [])
@@ -40819,7 +40819,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
-                    inputs: ['pxPerStep', 'accelerate', 'step', 'track', 'ticks', 'tickPlacement', 'showTickLabels', 'tickLabelAccessor', 'tooltipPlacement', 'tooltipAccessor', 'themeName', 'orientation', 'disabled', 'variant', 'appearance', 'isFocused', 'invalid', 'min', 'max', 'value', 'dir', 'lang'],
+                    inputs: ['step', 'track', 'ticks', 'tickPlacement', 'showTickLabels', 'tickLabelAccessor', 'tooltipPlacement', 'tooltipAccessor', 'pxPerStep', 'accelerate', 'themeName', 'orientation', 'disabled', 'variant', 'appearance', 'isFocused', 'invalid', 'min', 'max', 'value', 'dir', 'lang'],
                     outputs: ['input', 'change', 'valueChanged', 'connected', 'disconnected', 'changed'],
                     hostDirectives: [FormStatusDirective],
                     providers: [
@@ -40834,11 +40834,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                         }
                     ]
                 }]
-        }], ctorParameters: () => [], propDecorators: { pxPerStep: [{
-                type: Input
-            }], accelerate: [{
-                type: Input
-            }], step: [{
+        }], ctorParameters: () => [], propDecorators: { step: [{
                 type: Input
             }], track: [{
                 type: Input
@@ -40854,6 +40850,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                 type: Input
             }], tooltipAccessor: [{
                 type: Input
+            }], pxPerStep: [{
+                type: Input
+            }], accelerate: [{
+                type: Input
             }], themeName: [{
                 type: Input
             }], orientation: [{
@@ -51111,6 +51111,7 @@ const TOGGLE_BUTTON_DEFAULT_PROPS = new InjectionToken('MOSAIK_TOGGLE_BUTTON_DEF
 let ToggleButtonComponent = class ToggleButtonComponent {
     _element;
     _zone;
+    _accessor;
     _checked;
     _unchecked;
     _connected;
@@ -51120,6 +51121,8 @@ let ToggleButtonComponent = class ToggleButtonComponent {
         inject(ChangeDetectorRef).detach();
         this._element = inject(ElementRef).nativeElement;
         this._zone = inject(NgZone);
+        this._accessor = toggleButtonElementValueAccessor(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();
@@ -51357,6 +51360,18 @@ let ToggleButtonComponent = class ToggleButtonComponent {
     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);
     }
@@ -51369,13 +51384,23 @@ let ToggleButtonComponent = class ToggleButtonComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: ToggleButtonComponent, isStandalone: true, selector: "mosaik-toggle-button", inputs: { themeName: "themeName", reverse: "reverse", orientation: "orientation", horizontalContentAlignment: "horizontalContentAlignment", verticalContentAlignment: "verticalContentAlignment", fit: "fit", isBusy: "isBusy", isChecked: "isChecked", label: "label", icon: "icon", iconPosition: "iconPosition", iconSize: "iconSize", type: "type", variant: "variant", appearance: "appearance", size: "size", value: "value", disabled: "disabled", isFocused: "isFocused", dir: "dir", lang: "lang" }, outputs: { checked: "checked", unchecked: "unchecked", 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: "20.1.6", type: ToggleButtonComponent, isStandalone: true, selector: "mosaik-toggle-button", inputs: { themeName: "themeName", reverse: "reverse", orientation: "orientation", horizontalContentAlignment: "horizontalContentAlignment", verticalContentAlignment: "verticalContentAlignment", fit: "fit", isBusy: "isBusy", isChecked: "isChecked", label: "label", icon: "icon", iconPosition: "iconPosition", iconSize: "iconSize", type: "type", variant: "variant", appearance: "appearance", size: "size", value: "value", disabled: "disabled", isFocused: "isFocused", dir: "dir", lang: "lang" }, outputs: { checked: "checked", unchecked: "unchecked", connected: "connected", disconnected: "disconnected", changed: "changed" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ToggleButtonComponent),
+                multi: true
+            },
+            {
+                provide: FORM_STATUS_HOST,
+                useExisting: forwardRef(() => ToggleButtonComponent)
+            }
+        ], hostDirectives: [{ directive: FormStatusDirective }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 ToggleButtonComponent = __decorate$c([
     ProxyCmp({
         defineCustomElementFn: () => customElements.define('mosaik-toggle-button', ToggleButtonElement),
         inputs: ['themeName', 'reverse', 'orientation', 'horizontalContentAlignment', 'verticalContentAlignment', 'fit', 'isBusy', 'isChecked', 'label', 'icon', 'iconPosition', 'iconSize', 'type', 'variant', 'appearance', 'size', 'value', 'disabled', 'isFocused', 'dir', 'lang'],
-        methods: ['check', 'uncheck', 'toggle', 'hasVisibleFocusInTree', 'adoptStyle', 'on', 'off', 'emit', 'requestUpdate']
+        methods: ['reset', 'check', 'uncheck', 'toggle', 'hasVisibleFocusInTree', 'adoptStyle', 'on', 'off', 'emit', 'requestUpdate']
     }),
     __metadata$c("design:paramtypes", [])
 ], ToggleButtonComponent);
@@ -51387,7 +51412,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     inputs: ['themeName', 'reverse', 'orientation', 'horizontalContentAlignment', 'verticalContentAlignment', 'fit', 'isBusy', 'isChecked', 'label', 'icon', 'iconPosition', 'iconSize', 'type', 'variant', 'appearance', 'size', 'value', 'disabled', 'isFocused', 'dir', 'lang'],
-                    outputs: ['checked', 'unchecked', 'connected', 'disconnected', 'changed']
+                    outputs: ['checked', 'unchecked', 'connected', 'disconnected', 'changed'],
+                    hostDirectives: [FormStatusDirective],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ToggleButtonComponent),
+                            multi: true
+                        },
+                        {
+                            provide: FORM_STATUS_HOST,
+                            useExisting: forwardRef(() => ToggleButtonComponent)
+                        }
+                    ]
                 }]
         }], ctorParameters: () => [], propDecorators: { themeName: [{
                 type: Input