@flywheel-io/vision 19.4.0 → 19.4.1

package/components/button-group/button-group.component.d.ts

@@ -1,22 +1,21 @@
-import { AfterContentInit, ChangeDetectorRef, EventEmitter, OnChanges, OnDestroy, QueryList, SimpleChanges } from '@angular/core';
+import { AfterContentInit, EventEmitter, OnChanges, OnDestroy, QueryList, SimpleChanges } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { FwButtonToggleItemComponent } from '../button-toggle/button-toggle-item/button-toggle-item.component';
 import * as i0 from "@angular/core";
 export declare class FwButtonGroupComponent implements ControlValueAccessor, OnChanges, OnDestroy, AfterContentInit {
-    private cdref;
-    get classes(): string;
     layout?: 'basic' | 'compact';
     size?: 'small' | 'medium' | 'large';
     disabled?: boolean;
     color?: 'primary' | 'secondary' | 'danger' | 'slate' | 'skeleton' | 'warning' | 'success';
     selectedColor?: 'primary' | 'secondary' | 'danger' | 'slate' | 'skeleton' | 'warning' | 'success';
+    fullWidth: boolean;
+    get classes(): string;
     toggleButtons: QueryList<FwButtonToggleItemComponent>;
     private subscriptions;
     change: EventEmitter<string[]>;
     private _value;
     get value(): string[];
     set value(newValue: string[]);
-    constructor(cdref: ChangeDetectorRef);
     onChange: (value: string[]) => void;
     onTouched: () => void;
     registerOnChange(fn: (value: string[]) => void): void;
@@ -29,5 +28,5 @@ export declare class FwButtonGroupComponent implements ControlValueAccessor, OnC
     updateValue(value: string[]): void;
     formatToggles(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwButtonGroupComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwButtonGroupComponent, "fw-button-group", never, { "layout": { "alias": "layout"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "color": { "alias": "color"; "required": false; }; "selectedColor": { "alias": "selectedColor"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "change": "change"; }, ["toggleButtons"], ["fw-button-toggle-item,fw-tooltip"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwButtonGroupComponent, "fw-button-group", never, { "layout": { "alias": "layout"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "color": { "alias": "color"; "required": false; }; "selectedColor": { "alias": "selectedColor"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "change": "change"; }, ["toggleButtons"], ["fw-button-toggle-item,fw-tooltip"], true, never>;
 }

package/components/button-toggle/button-toggle-item/button-toggle-item.component.d.ts

@@ -12,10 +12,11 @@ export declare class FwButtonToggleItemComponent {
     color?: 'primary' | 'secondary' | 'danger' | 'slate' | 'skeleton' | 'warning' | 'success';
     selectedColor?: 'primary' | 'secondary' | 'danger' | 'slate' | 'skeleton' | 'warning' | 'success';
     selectedStyle?: 'background' | 'foreground';
+    fullWidth: import("@angular/core").ModelSignal<boolean>;
     click: EventEmitter<string>;
     get classes(): string;
     constructor();
     handleClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwButtonToggleItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwButtonToggleItemComponent, "fw-button-toggle-item", never, { "title": { "alias": "title"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "selectedIcon": { "alias": "selectedIcon"; "required": false; }; "value": { "alias": "value"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "color": { "alias": "color"; "required": false; }; "selectedColor": { "alias": "selectedColor"; "required": false; }; "selectedStyle": { "alias": "selectedStyle"; "required": false; }; }, { "click": "click"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwButtonToggleItemComponent, "fw-button-toggle-item", never, { "title": { "alias": "title"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "selectedIcon": { "alias": "selectedIcon"; "required": false; }; "value": { "alias": "value"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "color": { "alias": "color"; "required": false; }; "selectedColor": { "alias": "selectedColor"; "required": false; }; "selectedStyle": { "alias": "selectedStyle"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; }, { "fullWidth": "fullWidthChange"; "click": "click"; }, never, never, true, never>;
 }

package/components/button-toggle/button-toggle.component.d.ts

@@ -4,12 +4,13 @@ import { FwButtonToggleItemComponent } from './button-toggle-item/button-toggle-
 import * as i0 from "@angular/core";
 export declare class FwButtonToggleComponent implements ControlValueAccessor, OnChanges, OnDestroy, AfterContentInit {
     private cdref;
-    get classes(): string;
     layout?: 'basic' | 'compact';
     size?: 'small' | 'medium' | 'large';
     disabled?: boolean;
     color?: 'primary' | 'secondary' | 'danger' | 'slate' | 'skeleton' | 'warning' | 'success';
     selectedColor?: 'primary' | 'secondary' | 'danger' | 'slate' | 'skeleton' | 'warning' | 'success';
+    fullWidth: boolean;
+    get classes(): string;
     toggleButtons: QueryList<FwButtonToggleItemComponent>;
     private subscriptions;
     change: EventEmitter<string>;
@@ -30,5 +31,5 @@ export declare class FwButtonToggleComponent implements ControlValueAccessor, On
     updateValue(value: string): void;
     formatToggles(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwButtonToggleComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwButtonToggleComponent, "fw-button-toggle", never, { "layout": { "alias": "layout"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "color": { "alias": "color"; "required": false; }; "selectedColor": { "alias": "selectedColor"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "change": "change"; }, ["toggleButtons"], ["fw-button-toggle-item,fw-tooltip"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwButtonToggleComponent, "fw-button-toggle", never, { "layout": { "alias": "layout"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "color": { "alias": "color"; "required": false; }; "selectedColor": { "alias": "selectedColor"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "change": "change"; }, ["toggleButtons"], ["fw-button-toggle-item,fw-tooltip"], true, never>;
 }

package/fesm2022/flywheel-io-vision.mjs

@@ -1920,7 +1920,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 
 class FwButtonToggleItemComponent {
     get classes() {
-        return ['fw-button-toggle-item', this.title && this.title.length > 0 ? 'has-title' : 'no-title'].filter(Boolean).join(' ');
+        return ['fw-button-toggle-item', this.title && this.title.length > 0 ? 'has-title' : 'no-title', this.fullWidth() ? 'full-width' : null].filter(Boolean).join(' ');
     }
     ;
     constructor() {
@@ -1930,6 +1930,7 @@ class FwButtonToggleItemComponent {
         this.color = 'slate';
         this.selectedColor = 'primary';
         this.selectedStyle = 'background';
+        this.fullWidth = model(false);
         // eslint-disable-next-line @angular-eslint/no-output-native
         this.click = new EventEmitter();
     }
@@ -1939,11 +1940,11 @@ class FwButtonToggleItemComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwButtonToggleItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: FwButtonToggleItemComponent, isStandalone: true, selector: "fw-button-toggle-item", inputs: { title: "title", icon: "icon", selectedIcon: "selectedIcon", value: "value", selected: "selected", disabled: "disabled", size: "size", color: "color", selectedColor: "selectedColor", selectedStyle: "selectedStyle" }, outputs: { click: "click" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<fw-button\n  [leftIcon]=\"(selected && selectedIcon) ? selectedIcon : icon\"\n  [variant]=\"(selected && selectedStyle==='background') ? 'solid':'outline'\"\n  [color]=\"selected ? selectedColor:color\"\n  [size]=\"size\"\n  [disabled]=\"disabled\"\n  (click)=\"handleClick()\">\n  {{ title }}\n</fw-button>\n", dependencies: [{ kind: "component", type: FwButtonComponent, selector: "fw-button", inputs: ["color", "size", "variant", "type", "disabled", "fullWidth", "leftIcon", "rightIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: FwButtonToggleItemComponent, isStandalone: true, selector: "fw-button-toggle-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, selectedIcon: { classPropertyName: "selectedIcon", publicName: "selectedIcon", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, selectedColor: { classPropertyName: "selectedColor", publicName: "selectedColor", isSignal: false, isRequired: false, transformFunction: null }, selectedStyle: { classPropertyName: "selectedStyle", publicName: "selectedStyle", isSignal: false, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fullWidth: "fullWidthChange", click: "click" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<fw-button\n  [fullWidth]=\"fullWidth()\"\n  [leftIcon]=\"(selected && selectedIcon) ? selectedIcon : icon\"\n  [variant]=\"(selected && selectedStyle==='background') ? 'solid':'outline'\"\n  [color]=\"selected ? selectedColor:color\"\n  [size]=\"size\"\n  [disabled]=\"disabled\"\n  (click)=\"handleClick()\">\n  {{ title }}\n</fw-button>\n", styles: [":host.full-width{width:100%}\n"], dependencies: [{ kind: "component", type: FwButtonComponent, selector: "fw-button", inputs: ["color", "size", "variant", "type", "disabled", "fullWidth", "leftIcon", "rightIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwButtonToggleItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fw-button-toggle-item', imports: [FwButtonComponent], template: "<fw-button\n  [leftIcon]=\"(selected && selectedIcon) ? selectedIcon : icon\"\n  [variant]=\"(selected && selectedStyle==='background') ? 'solid':'outline'\"\n  [color]=\"selected ? selectedColor:color\"\n  [size]=\"size\"\n  [disabled]=\"disabled\"\n  (click)=\"handleClick()\">\n  {{ title }}\n</fw-button>\n" }]
+            args: [{ selector: 'fw-button-toggle-item', imports: [FwButtonComponent], template: "<fw-button\n  [fullWidth]=\"fullWidth()\"\n  [leftIcon]=\"(selected && selectedIcon) ? selectedIcon : icon\"\n  [variant]=\"(selected && selectedStyle==='background') ? 'solid':'outline'\"\n  [color]=\"selected ? selectedColor:color\"\n  [size]=\"size\"\n  [disabled]=\"disabled\"\n  (click)=\"handleClick()\">\n  {{ title }}\n</fw-button>\n", styles: [":host.full-width{width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { title: [{
                 type: Input
             }], icon: [{
@@ -1972,27 +1973,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }] } });
 
 class FwButtonGroupComponent {
-    get classes() {
-        return ['fw-button-group', this.size, this.layout].filter(Boolean).join(' ');
-    }
-    ;
-    get value() {
-        return this._value;
-    }
-    set value(newValue) {
-        this.updateValue(newValue);
-    }
-    constructor(cdref) {
-        this.cdref = cdref;
+    constructor() {
         this.layout = 'basic';
         this.size = 'medium';
         this.disabled = false;
+        this.fullWidth = false;
         this.subscriptions = [];
         // eslint-disable-next-line @angular-eslint/no-output-native
         this.change = new EventEmitter();
         this.onTouched = () => {
         };
     }
+    get classes() {
+        return ['fw-button-group', this.size, this.layout, this.fullWidth ? 'full-width' : null].filter(Boolean).join(' ');
+    }
+    ;
+    get value() {
+        return this._value;
+    }
+    set value(newValue) {
+        this.updateValue(newValue);
+    }
     registerOnChange(fn) {
         this.onChange = fn;
     }
@@ -2029,6 +2030,9 @@ class FwButtonGroupComponent {
     formatToggles() {
         if (this.toggleButtons) {
             this.toggleButtons.forEach(toggle => {
+                if (this.fullWidth) {
+                    toggle.fullWidth.set(true);
+                }
                 if (this.value.indexOf(toggle.value) >= 0) {
                     toggle.selected = true;
                 }
@@ -2058,14 +2062,14 @@ class FwButtonGroupComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwButtonGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: FwButtonGroupComponent, isStandalone: true, selector: "fw-button-group", inputs: { layout: "layout", size: "size", disabled: "disabled", color: "color", selectedColor: "selectedColor", value: "value" }, outputs: { change: "change" }, host: { properties: { "attr.class": "this.classes" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: FwButtonGroupComponent, isStandalone: true, selector: "fw-button-group", inputs: { layout: "layout", size: "size", disabled: "disabled", color: "color", selectedColor: "selectedColor", fullWidth: "fullWidth", value: "value" }, outputs: { change: "change" }, host: { properties: { "attr.class": "this.classes" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => FwButtonGroupComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "toggleButtons", predicate: FwButtonToggleItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: '<ng-content select="fw-button-toggle-item,fw-tooltip"></ng-content>', isInline: true, styles: ["fw-button-group.fw-button-group{box-sizing:border-box;border-radius:8px;overflow:hidden;display:inline-flex;align-items:stretch}fw-button-group.fw-button-group .fw-button-toggle-item.no-title button{gap:0}fw-button-group.fw-button-group button{min-width:0;margin:0!important;border-radius:0;border:1px solid var(--separations-input);border-right-width:0!important}fw-button-group.fw-button-group>button:first-of-type{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-group.fw-button-group>button:last-of-type{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px}fw-button-group.fw-button-group.compact button{line-height:24px;height:24px}fw-button-group.fw-button-group.small button{font-size:12px}fw-button-group.fw-button-group.medium button{font-size:14px}fw-button-group.fw-button-group.large button{font-size:18px}fw-button-group.fw-button-group>fw-button-toggle-item:last-of-type button{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px!important}fw-button-group.fw-button-group>fw-button-toggle-item:first-of-type button{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-group.fw-button-group fw-tooltip fw-button-toggle-item button{border-radius:0!important;border-right-width:0!important}fw-button-group.fw-button-group fw-tooltip:last-of-type fw-button-toggle-item button{border-radius:0 8px 8px 0!important;border-right-width:1px!important}fw-button-group.fw-button-group fw-tooltip:first-of-type fw-button-toggle-item button{border-radius:8px 0 0 8px!important}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "toggleButtons", predicate: FwButtonToggleItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: '<ng-content select="fw-button-toggle-item,fw-tooltip"></ng-content>', isInline: true, styles: ["fw-button-group.fw-button-group{box-sizing:border-box;border-radius:8px;overflow:hidden;display:inline-flex;align-items:stretch}fw-button-group.fw-button-group.full-width{width:100%}fw-button-group.fw-button-group .fw-button-toggle-item.no-title button{gap:0}fw-button-group.fw-button-group button{min-width:0;margin:0!important;border-radius:0;border:1px solid var(--separations-input);border-right-width:0!important}fw-button-group.fw-button-group>button:first-of-type{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-group.fw-button-group>button:last-of-type{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px}fw-button-group.fw-button-group.compact button{line-height:24px;height:24px}fw-button-group.fw-button-group.small button{font-size:12px}fw-button-group.fw-button-group.medium button{font-size:14px}fw-button-group.fw-button-group.large button{font-size:18px}fw-button-group.fw-button-group>fw-button-toggle-item:last-of-type button{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px!important}fw-button-group.fw-button-group>fw-button-toggle-item:first-of-type button{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-group.fw-button-group fw-tooltip fw-button-toggle-item button{border-radius:0!important;border-right-width:0!important}fw-button-group.fw-button-group fw-tooltip:last-of-type fw-button-toggle-item button{border-radius:0 8px 8px 0!important;border-right-width:1px!important}fw-button-group.fw-button-group fw-tooltip:first-of-type fw-button-toggle-item button{border-radius:8px 0 0 8px!important}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwButtonGroupComponent, decorators: [{
             type: Component,
@@ -2075,11 +2079,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                             useExisting: forwardRef(() => FwButtonGroupComponent),
                             multi: true,
                         },
-                    ], styles: ["fw-button-group.fw-button-group{box-sizing:border-box;border-radius:8px;overflow:hidden;display:inline-flex;align-items:stretch}fw-button-group.fw-button-group .fw-button-toggle-item.no-title button{gap:0}fw-button-group.fw-button-group button{min-width:0;margin:0!important;border-radius:0;border:1px solid var(--separations-input);border-right-width:0!important}fw-button-group.fw-button-group>button:first-of-type{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-group.fw-button-group>button:last-of-type{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px}fw-button-group.fw-button-group.compact button{line-height:24px;height:24px}fw-button-group.fw-button-group.small button{font-size:12px}fw-button-group.fw-button-group.medium button{font-size:14px}fw-button-group.fw-button-group.large button{font-size:18px}fw-button-group.fw-button-group>fw-button-toggle-item:last-of-type button{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px!important}fw-button-group.fw-button-group>fw-button-toggle-item:first-of-type button{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-group.fw-button-group fw-tooltip fw-button-toggle-item button{border-radius:0!important;border-right-width:0!important}fw-button-group.fw-button-group fw-tooltip:last-of-type fw-button-toggle-item button{border-radius:0 8px 8px 0!important;border-right-width:1px!important}fw-button-group.fw-button-group fw-tooltip:first-of-type fw-button-toggle-item button{border-radius:8px 0 0 8px!important}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { classes: [{
-                type: HostBinding,
-                args: ['attr.class']
-            }], layout: [{
+                    ], styles: ["fw-button-group.fw-button-group{box-sizing:border-box;border-radius:8px;overflow:hidden;display:inline-flex;align-items:stretch}fw-button-group.fw-button-group.full-width{width:100%}fw-button-group.fw-button-group .fw-button-toggle-item.no-title button{gap:0}fw-button-group.fw-button-group button{min-width:0;margin:0!important;border-radius:0;border:1px solid var(--separations-input);border-right-width:0!important}fw-button-group.fw-button-group>button:first-of-type{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-group.fw-button-group>button:last-of-type{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px}fw-button-group.fw-button-group.compact button{line-height:24px;height:24px}fw-button-group.fw-button-group.small button{font-size:12px}fw-button-group.fw-button-group.medium button{font-size:14px}fw-button-group.fw-button-group.large button{font-size:18px}fw-button-group.fw-button-group>fw-button-toggle-item:last-of-type button{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px!important}fw-button-group.fw-button-group>fw-button-toggle-item:first-of-type button{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-group.fw-button-group fw-tooltip fw-button-toggle-item button{border-radius:0!important;border-right-width:0!important}fw-button-group.fw-button-group fw-tooltip:last-of-type fw-button-toggle-item button{border-radius:0 8px 8px 0!important;border-right-width:1px!important}fw-button-group.fw-button-group fw-tooltip:first-of-type fw-button-toggle-item button{border-radius:8px 0 0 8px!important}\n"] }]
+        }], propDecorators: { layout: [{
                 type: Input
             }], size: [{
                 type: Input
@@ -2089,6 +2090,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 type: Input
             }], selectedColor: [{
                 type: Input
+            }], fullWidth: [{
+                type: Input
+            }], classes: [{
+                type: HostBinding,
+                args: ['attr.class']
             }], toggleButtons: [{
                 type: ContentChildren,
                 args: [FwButtonToggleItemComponent, { descendants: true }]
@@ -2100,7 +2106,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 
 class FwButtonToggleComponent {
     get classes() {
-        return ['fw-button-toggle', this.size, this.layout].filter(Boolean).join(' ');
+        return ['fw-button-toggle', this.size, this.layout, this.fullWidth ? 'full-width' : null].filter(Boolean).join(' ');
     }
     ;
     get value() {
@@ -2114,6 +2120,7 @@ class FwButtonToggleComponent {
         this.layout = 'basic';
         this.size = 'medium';
         this.disabled = false;
+        this.fullWidth = false;
         this.subscriptions = [];
         // eslint-disable-next-line @angular-eslint/no-output-native
         this.change = new EventEmitter();
@@ -2161,6 +2168,9 @@ class FwButtonToggleComponent {
     formatToggles() {
         if (this.toggleButtons) {
             this.toggleButtons.forEach(toggle => {
+                if (this.fullWidth) {
+                    toggle.fullWidth.set(true);
+                }
                 if (toggle.value === this.value) {
                     toggle.selected = true;
                 }
@@ -2192,13 +2202,13 @@ class FwButtonToggleComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwButtonToggleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: FwButtonToggleComponent, isStandalone: true, selector: "fw-button-toggle", inputs: { layout: "layout", size: "size", disabled: "disabled", color: "color", selectedColor: "selectedColor", value: "value" }, outputs: { change: "change" }, host: { properties: { "attr.class": "this.classes" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: FwButtonToggleComponent, isStandalone: true, selector: "fw-button-toggle", inputs: { layout: "layout", size: "size", disabled: "disabled", color: "color", selectedColor: "selectedColor", fullWidth: "fullWidth", value: "value" }, outputs: { change: "change" }, host: { properties: { "attr.class": "this.classes" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => FwButtonToggleComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "toggleButtons", predicate: FwButtonToggleItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: '<ng-content select="fw-button-toggle-item,fw-tooltip"></ng-content>', isInline: true, styles: ["fw-button-toggle.fw-button-toggle{box-sizing:border-box;border-radius:8px;overflow:hidden;display:inline-flex;align-items:stretch}fw-button-toggle.fw-button-toggle .fw-button-toggle-item.no-title button{gap:0}fw-button-toggle.fw-button-toggle button{min-width:0;margin:0!important;border-radius:0;border:1px solid var(--separations-input);border-right-width:0!important}fw-button-toggle.fw-button-toggle>button:first-of-type{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-toggle.fw-button-toggle>button:last-of-type{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px}fw-button-toggle.fw-button-toggle.compact button{line-height:24px;height:24px}fw-button-toggle.fw-button-toggle.small button{font-size:12px}fw-button-toggle.fw-button-toggle.medium button{font-size:14px}fw-button-toggle.fw-button-toggle.large button{font-size:18px}fw-button-toggle.fw-button-toggle>fw-button-toggle-item:last-of-type button{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px!important}fw-button-toggle.fw-button-toggle>fw-button-toggle-item:first-of-type button{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-toggle.fw-button-toggle fw-tooltip fw-button-toggle-item button{border-radius:0!important;border-right-width:0!important}fw-button-toggle.fw-button-toggle fw-tooltip:last-of-type fw-button-toggle-item button{border-radius:0 8px 8px 0!important;border-right-width:1px!important}fw-button-toggle.fw-button-toggle fw-tooltip:first-of-type fw-button-toggle-item button{border-radius:8px 0 0 8px!important}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "toggleButtons", predicate: FwButtonToggleItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: '<ng-content select="fw-button-toggle-item,fw-tooltip"></ng-content>', isInline: true, styles: ["fw-button-toggle.fw-button-toggle{box-sizing:border-box;border-radius:8px;overflow:hidden;display:inline-flex;align-items:stretch}fw-button-toggle.fw-button-toggle.full-width{width:100%}fw-button-toggle.fw-button-toggle .fw-button-toggle-item.no-title button{gap:0}fw-button-toggle.fw-button-toggle button{min-width:0;margin:0!important;border-radius:0;border:1px solid var(--separations-input);border-right-width:0!important}fw-button-toggle.fw-button-toggle>button:first-of-type{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-toggle.fw-button-toggle>button:last-of-type{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px}fw-button-toggle.fw-button-toggle.compact button{line-height:24px;height:24px}fw-button-toggle.fw-button-toggle.small button{font-size:12px}fw-button-toggle.fw-button-toggle.medium button{font-size:14px}fw-button-toggle.fw-button-toggle.large button{font-size:18px}fw-button-toggle.fw-button-toggle>fw-button-toggle-item:last-of-type button{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px!important}fw-button-toggle.fw-button-toggle>fw-button-toggle-item:first-of-type button{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-toggle.fw-button-toggle fw-tooltip fw-button-toggle-item button{border-radius:0!important;border-right-width:0!important}fw-button-toggle.fw-button-toggle fw-tooltip:last-of-type fw-button-toggle-item button{border-radius:0 8px 8px 0!important;border-right-width:1px!important}fw-button-toggle.fw-button-toggle fw-tooltip:first-of-type fw-button-toggle-item button{border-radius:8px 0 0 8px!important}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwButtonToggleComponent, decorators: [{
             type: Component,
@@ -2208,11 +2218,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                             useExisting: forwardRef(() => FwButtonToggleComponent),
                             multi: true,
                         },
-                    ], styles: ["fw-button-toggle.fw-button-toggle{box-sizing:border-box;border-radius:8px;overflow:hidden;display:inline-flex;align-items:stretch}fw-button-toggle.fw-button-toggle .fw-button-toggle-item.no-title button{gap:0}fw-button-toggle.fw-button-toggle button{min-width:0;margin:0!important;border-radius:0;border:1px solid var(--separations-input);border-right-width:0!important}fw-button-toggle.fw-button-toggle>button:first-of-type{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-toggle.fw-button-toggle>button:last-of-type{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px}fw-button-toggle.fw-button-toggle.compact button{line-height:24px;height:24px}fw-button-toggle.fw-button-toggle.small button{font-size:12px}fw-button-toggle.fw-button-toggle.medium button{font-size:14px}fw-button-toggle.fw-button-toggle.large button{font-size:18px}fw-button-toggle.fw-button-toggle>fw-button-toggle-item:last-of-type button{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px!important}fw-button-toggle.fw-button-toggle>fw-button-toggle-item:first-of-type button{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-toggle.fw-button-toggle fw-tooltip fw-button-toggle-item button{border-radius:0!important;border-right-width:0!important}fw-button-toggle.fw-button-toggle fw-tooltip:last-of-type fw-button-toggle-item button{border-radius:0 8px 8px 0!important;border-right-width:1px!important}fw-button-toggle.fw-button-toggle fw-tooltip:first-of-type fw-button-toggle-item button{border-radius:8px 0 0 8px!important}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { classes: [{
-                type: HostBinding,
-                args: ['attr.class']
-            }], layout: [{
+                    ], styles: ["fw-button-toggle.fw-button-toggle{box-sizing:border-box;border-radius:8px;overflow:hidden;display:inline-flex;align-items:stretch}fw-button-toggle.fw-button-toggle.full-width{width:100%}fw-button-toggle.fw-button-toggle .fw-button-toggle-item.no-title button{gap:0}fw-button-toggle.fw-button-toggle button{min-width:0;margin:0!important;border-radius:0;border:1px solid var(--separations-input);border-right-width:0!important}fw-button-toggle.fw-button-toggle>button:first-of-type{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-toggle.fw-button-toggle>button:last-of-type{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px}fw-button-toggle.fw-button-toggle.compact button{line-height:24px;height:24px}fw-button-toggle.fw-button-toggle.small button{font-size:12px}fw-button-toggle.fw-button-toggle.medium button{font-size:14px}fw-button-toggle.fw-button-toggle.large button{font-size:18px}fw-button-toggle.fw-button-toggle>fw-button-toggle-item:last-of-type button{border-top-right-radius:8px;border-bottom-right-radius:8px;border-right-width:1px!important}fw-button-toggle.fw-button-toggle>fw-button-toggle-item:first-of-type button{border-top-left-radius:8px;border-bottom-left-radius:8px}fw-button-toggle.fw-button-toggle fw-tooltip fw-button-toggle-item button{border-radius:0!important;border-right-width:0!important}fw-button-toggle.fw-button-toggle fw-tooltip:last-of-type fw-button-toggle-item button{border-radius:0 8px 8px 0!important;border-right-width:1px!important}fw-button-toggle.fw-button-toggle fw-tooltip:first-of-type fw-button-toggle-item button{border-radius:8px 0 0 8px!important}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { layout: [{
                 type: Input
             }], size: [{
                 type: Input
@@ -2222,6 +2229,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 type: Input
             }], selectedColor: [{
                 type: Input
+            }], fullWidth: [{
+                type: Input
+            }], classes: [{
+                type: HostBinding,
+                args: ['attr.class']
             }], toggleButtons: [{
                 type: ContentChildren,
                 args: [FwButtonToggleItemComponent, { descendants: true }]