@cute-widgets/base 20.0.1

package/fesm2022/cute-widgets-base-button-toggle.mjs

@@ -0,0 +1,640 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, forwardRef, inject, EventEmitter, isDevMode, booleanAttribute, Output, Input, ContentChildren, Directive, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { CuteButtonGroup, CuteButtonBase, CUTE_BUTTON_BASE } from '@cute-widgets/base/button';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { SelectionModel } from '@angular/cdk/collections';
+import { hasModifierKey, RIGHT_ARROW, DOWN_ARROW, LEFT_ARROW, UP_ARROW, ENTER, SPACE } from '@angular/cdk/keycodes';
+import { Directionality } from '@angular/cdk/bidi';
+import { _animationsDisabled, toThemeColor } from '@cute-widgets/base/core';
+import { CommonModule } from '@angular/common';
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ */
+/**
+ * Injection token that can be used to reference instances of `CuteButtonToggleGroup`.
+ * It serves as an alternative token to the actual `CuteButtonToggleGroup` class which
+ * could cause unnecessary retention of the class and its component metadata.
+ */
+const CUTE_BUTTON_TOGGLE_GROUP = new InjectionToken('CuteButtonToggleGroup');
+/**
+ * Provider Expression that allows cute-button-toggle-group to register as a ControlValueAccessor.
+ * This allows it to support [(ngModel)].
+ * @docs-private
+ */
+const CUTE_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => CuteButtonToggleGroup),
+    multi: true,
+};
+// Counter used to generate unique IDs.
+let uniqueIdCounter = 0;
+/** Exclusive selection button toggle group that behaves like a radio-button group. */
+class CuteButtonToggleGroup extends CuteButtonGroup {
+    /** `name` attribute for the underlying `input` element. */
+    get name() { return this._name; }
+    set name(value) {
+        this._name = value;
+        this._markButtonsForCheck();
+    }
+    /** Value of the toggle group. */
+    get value() {
+        const selected = this._selectionModel ? this._selectionModel.selected : [];
+        if (this.multiple) {
+            return selected.map(toggle => toggle.value);
+        }
+        return selected[0] ? selected[0].value : undefined;
+    }
+    set value(newValue) {
+        this._setSelectionByValue(newValue);
+        this.valueChange.emit(this.value);
+    }
+    /** Selected button toggles in the group. */
+    get selected() {
+        const selected = this._selectionModel ? this._selectionModel.selected : [];
+        return this.multiple ? selected : selected[0] || null;
+    }
+    /** Whether multiple button toggles can be selected. */
+    get multiple() { return this._multiple; }
+    set multiple(value) {
+        this._multiple = value;
+        this._markButtonsForCheck();
+    }
+    /** Whether buttons in the group should be interactive while they're disabled. */
+    get disabledInteractive() { return this._disabledInteractive; }
+    set disabledInteractive(value) {
+        this._disabledInteractive = value;
+        this._markButtonsForCheck();
+    }
+    /** Whether the checkmark indicator for single-selection button toggle groups is hidden. */
+    get hideSingleSelectionIndicator() { return this._hideSingleSelectionIndicator; }
+    set hideSingleSelectionIndicator(value) {
+        this._hideSingleSelectionIndicator = value;
+        this._markButtonsForCheck();
+    }
+    /** Whether the checkmark indicator for multiple-selection button toggle groups is hidden. */
+    get hideMultipleSelectionIndicator() { return this._hideMultipleSelectionIndicator; }
+    set hideMultipleSelectionIndicator(value) {
+        this._hideMultipleSelectionIndicator = value;
+        this._markButtonsForCheck();
+    }
+    /** The layout direction of the toggle button group. */
+    get dir() {
+        return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
+    }
+    constructor() {
+        super();
+        this._dir = inject(Directionality, { optional: true });
+        this._multiple = false;
+        /**
+         * The method to be called in order to update ngModel.
+         * Now `ngModel` binding is not supported in multiple selection mode.
+         */
+        this._controlValueAccessorChangeFn = () => { };
+        /** onTouch function registered via registerOnTouch (ControlValueAccessor). */
+        this._onTouched = () => { };
+        /** The button toggle default style. Only outlined buttons supported. */
+        this.buttonStyle = "outline-button";
+        this._name = `cute-button-toggle-group-${uniqueIdCounter++}`;
+        this._disabledInteractive = false;
+        this._hideSingleSelectionIndicator = false;
+        this._hideMultipleSelectionIndicator = false;
+        /**
+         * Event that emits whenever the value of the group changes.
+         * Used to facilitate two-way data binding.
+         * @docs-private
+         */
+        this.valueChange = new EventEmitter();
+        /** Event emitted when the group's value changes. */
+        this.change = new EventEmitter();
+        const defaultOptions = inject(CUTE_BUTTON_TOGGLE_DEFAULT_OPTIONS, { optional: true });
+        //this.appearance =
+        //  defaultOptions && defaultOptions.appearance ? defaultOptions.appearance : 'standard';
+        this.hideSingleSelectionIndicator = defaultOptions?.hideSingleSelectionIndicator ?? false;
+        this.hideMultipleSelectionIndicator = defaultOptions?.hideMultipleSelectionIndicator ?? false;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this._selectionModel = new SelectionModel(this.multiple, undefined, false);
+    }
+    ngAfterContentInit() {
+        super.ngAfterContentInit();
+        if (this._buttonToggles) {
+            this._selectionModel?.select(...this._buttonToggles.filter(toggle => toggle.checked));
+        }
+        if (!this.multiple) {
+            this._initializeTabIndex();
+        }
+    }
+    /** Initializes the tabindex attribute using the radio pattern. */
+    _initializeTabIndex() {
+        if (this._buttonToggles) {
+            this._buttonToggles.forEach(toggle => {
+                toggle.tabIndex = -1;
+            });
+            if (this.selected) {
+                this.selected.tabIndex = 0;
+            }
+            else {
+                for (let i = 0; i < this._buttonToggles.length; i++) {
+                    const toggle = this._buttonToggles.get(i);
+                    if (!toggle.disabled) {
+                        toggle.tabIndex = 0;
+                        break;
+                    }
+                }
+            }
+            this._markButtonsForCheck();
+        }
+    }
+    /**
+     * Sets the model value. Implemented as part of ControlValueAccessor.
+     * @param value Value to be set to the model.
+     */
+    writeValue(value) {
+        this.value = value;
+        this.markForCheck();
+    }
+    // Implemented as part of ControlValueAccessor.
+    registerOnChange(fn) {
+        this._controlValueAccessorChangeFn = fn;
+    }
+    // Implemented as part of ControlValueAccessor.
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    // Implemented as part of ControlValueAccessor.
+    setDisabledState(isDisabled) {
+        if (super.setDisabledState(isDisabled)) {
+            this._buttonToggles?.forEach(toggle => toggle.disabled = isDisabled);
+            this._markButtonsForCheck();
+        }
+        return false;
+    }
+    /** Handle keydown event calling to single-select button toggle. */
+    _keydown(event) {
+        if (this.multiple || this.disabled || hasModifierKey(event) || !this._buttonToggles) {
+            return;
+        }
+        const target = event.target;
+        const buttonId = target.id;
+        const index = this._buttonToggles.toArray().findIndex(toggle => {
+            return toggle.buttonId === buttonId;
+        });
+        if (index == -1) {
+            return;
+        }
+        let nextButton = null;
+        switch (event.keyCode) {
+            case SPACE:
+            case ENTER:
+                nextButton = this._buttonToggles.get(index) || null;
+                //nextButton.checked = true;
+                break;
+            case UP_ARROW:
+                nextButton = this._getNextButton(index, -1);
+                break;
+            case LEFT_ARROW:
+                nextButton = this._getNextButton(index, this.dir === 'ltr' ? -1 : 1);
+                break;
+            case DOWN_ARROW:
+                nextButton = this._getNextButton(index, 1);
+                break;
+            case RIGHT_ARROW:
+                nextButton = this._getNextButton(index, this.dir === 'ltr' ? 1 : -1);
+                break;
+            default:
+                return;
+        }
+        if (nextButton) {
+            event.preventDefault();
+            nextButton._onButtonClick();
+            nextButton.focus();
+        }
+    }
+    /** Dispatch change event with current selection and group value. */
+    _emitChangeEvent(toggle) {
+        const event = new CuteButtonToggleChange(toggle, this.value);
+        this._rawValue = event.value;
+        this._controlValueAccessorChangeFn(event.value);
+        this.change.emit(event);
+    }
+    /**
+     * Syncs a button toggle's selected state with the model value.
+     * @param toggle Toggle to be synced.
+     * @param select Whether the toggle should be selected.
+     * @param isUserInput Whether the change was a result of a user interaction.
+     * @param deferEvents Whether to defer emitting the change events.
+     */
+    _syncButtonToggle(toggle, select, isUserInput = false, deferEvents = false) {
+        // Deselect the currently selected toggle if we're in single-selection
+        // mode and the button being toggled isn't selected at the moment.
+        if (!this.multiple && this.selected && !toggle.checked) {
+            this.selected.checked = false;
+        }
+        if (this._selectionModel) {
+            if (select) {
+                this._selectionModel.select(toggle);
+            }
+            else {
+                this._selectionModel.deselect(toggle);
+            }
+        }
+        else {
+            deferEvents = true;
+        }
+        // We need to defer in some cases in order to avoid "changed after checked errors", however,
+        // the side effect is that we may end up updating the model value out of sequence in others
+        // The `deferEvents` flag allows us to decide whether to do it on a case-by-case basis.
+        if (deferEvents) {
+            Promise.resolve().then(() => this._updateModelValue(toggle, isUserInput));
+        }
+        else {
+            this._updateModelValue(toggle, isUserInput);
+        }
+    }
+    /** Checks whether a button toggle is selected. */
+    _isSelected(toggle) {
+        return this._selectionModel ? this._selectionModel.isSelected(toggle) : false;
+    }
+    /** Determines whether a button toggle should be checked on init. */
+    _isPrechecked(toggle) {
+        if (typeof this._rawValue === 'undefined') {
+            return false;
+        }
+        if (this.multiple && Array.isArray(this._rawValue)) {
+            return this._rawValue.some(value => toggle.value != null && value === toggle.value);
+        }
+        return toggle.value === this._rawValue;
+    }
+    /** Obtains the subsequent toggle to which the focus shifts. */
+    _getNextButton(startIndex, offset) {
+        const items = this._buttonToggles;
+        if (items) {
+            for (let i = 1; i <= items.length; i++) {
+                const index = (startIndex + offset * i + items.length) % items.length;
+                const item = items.get(index);
+                if (item && !item.disabled) {
+                    return item;
+                }
+            }
+        }
+        return null;
+    }
+    /** Updates the selection state of the toggles in the group based on a value. */
+    _setSelectionByValue(value) {
+        this._rawValue = value;
+        if (!this._buttonToggles) {
+            return;
+        }
+        const toggles = this._buttonToggles.toArray();
+        if (this.multiple && value) {
+            if (!Array.isArray(value) && isDevMode()) {
+                throw Error('Value must be an array in multiple-selection mode.');
+            }
+            this._clearSelection();
+            value.forEach((currentValue) => this._selectValue(currentValue, toggles));
+        }
+        else {
+            this._clearSelection();
+            this._selectValue(value, toggles);
+        }
+        // In single selection mode, we need at least one enabled toggle to always be focusable.
+        if (!this.multiple && toggles.every(toggle => toggle.tabIndex === -1)) {
+            for (const toggle of toggles) {
+                if (!toggle.disabled) {
+                    toggle.tabIndex = 0;
+                    break;
+                }
+            }
+        }
+    }
+    /** Clears the selected toggles. */
+    _clearSelection() {
+        this._selectionModel?.clear();
+        this._buttonToggles?.forEach(toggle => {
+            toggle.checked = false;
+            // If the button toggle is in single select mode, initialize the tabIndex.
+            if (!this.multiple) {
+                toggle.tabIndex = -1;
+            }
+        });
+    }
+    /** Selects a value if there's a toggle that corresponds to it. */
+    _selectValue(value, toggles) {
+        if (this._selectionModel) {
+            for (const toggle of toggles) {
+                if (toggle.value != null && toggle.value === value) {
+                    toggle.checked = true;
+                    this._selectionModel.select(toggle);
+                    if (!this.multiple) {
+                        // If the button toggle is in single select mode, reset the tabIndex.
+                        toggle.tabIndex = 0;
+                    }
+                    break;
+                }
+            }
+        }
+    }
+    /** Syncs up the group's value with the model and emits the change event. */
+    _updateModelValue(toggle, isUserInput) {
+        // Only emit the change event for user input.
+        if (isUserInput) {
+            this._emitChangeEvent(toggle);
+        }
+        // Note: we emit this one no matter whether it was a user interaction, because
+        // it is used by Angular to sync up the two-way data binding.
+        this.valueChange.emit(this.value);
+    }
+    /** Marks all the child button toggles to be checked. */
+    _markButtonsForCheck() {
+        this._buttonToggles?.forEach(toggle => toggle.markForCheck());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteButtonToggleGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.15", type: CuteButtonToggleGroup, isStandalone: true, selector: "cute-button-toggle-group", inputs: { name: "name", value: "value", multiple: ["multiple", "multiple", booleanAttribute], disabledInteractive: ["disabledInteractive", "disabledInteractive", booleanAttribute], hideSingleSelectionIndicator: ["hideSingleSelectionIndicator", "hideSingleSelectionIndicator", booleanAttribute], hideMultipleSelectionIndicator: ["hideMultipleSelectionIndicator", "hideMultipleSelectionIndicator", booleanAttribute] }, outputs: { valueChange: "valueChange", change: "change" }, host: { listeners: { "keydown": "_keydown($event)" }, properties: { "attr.role": "multiple ? \"group\" : \"radiogroup\"", "attr.aria-disabled": "disabled", "attr.tabindex": "-1" }, classAttribute: "cute-button-toggle-group" }, providers: [
+            CUTE_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR,
+            { provide: CUTE_BUTTON_TOGGLE_GROUP, useExisting: CuteButtonToggleGroup },
+        ], queries: [{ propertyName: "_buttonToggles", predicate: i0.forwardRef(() => CuteButtonToggle), descendants: true }], exportAs: ["cuteButtonToggleGroup"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteButtonToggleGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'cute-button-toggle-group',
+                    providers: [
+                        CUTE_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR,
+                        { provide: CUTE_BUTTON_TOGGLE_GROUP, useExisting: CuteButtonToggleGroup },
+                    ],
+                    host: {
+                        'class': 'cute-button-toggle-group',
+                        '[attr.role]': 'multiple ? "group" : "radiogroup"',
+                        '[attr.aria-disabled]': 'disabled',
+                        '[attr.tabindex]': '-1',
+                        '(keydown)': '_keydown($event)',
+                    },
+                    exportAs: 'cuteButtonToggleGroup',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { _buttonToggles: [{
+                type: ContentChildren,
+                args: [forwardRef(() => CuteButtonToggle), {
+                        // Note that this would technically pick up toggles
+                        // from nested groups, but that's not a case that we support.
+                        descendants: true,
+                    }]
+            }], name: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], multiple: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], disabledInteractive: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hideSingleSelectionIndicator: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hideMultipleSelectionIndicator: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], valueChange: [{
+                type: Output
+            }], change: [{
+                type: Output
+            }] } });
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ */
+/**
+ * Injection token that can be used to configure the
+ * default options for all button toggles within an app.
+ */
+const CUTE_BUTTON_TOGGLE_DEFAULT_OPTIONS = new InjectionToken('CUTE_BUTTON_TOGGLE_DEFAULT_OPTIONS', {
+    providedIn: 'root',
+    factory: () => ({
+        hideSingleSelectionIndicator: false,
+        hideMultipleSelectionIndicator: false,
+        disabledInteractive: false,
+    }),
+});
+// Counter used to generate unique IDs.
+let uniqueId = 0;
+/** Change event object emitted by button toggle. */
+class CuteButtonToggleChange {
+    constructor(
+    /** The button toggle that emits the event. */
+    source, 
+    /** The value assigned to the button toggle. */
+    value) {
+        this.source = source;
+        this.value = value;
+    }
+}
+/** Single toggle button that should be nested directly inside a toggle group.  */
+class CuteButtonToggle extends CuteButtonBase {
+    /** Unique ID for the underlying `button` element. */
+    get buttonId() {
+        return this.id ?? `cute-toggle-button-${uniqueId++}`;
+    }
+    get inputButtonStyle() {
+        return super.inputButtonStyle;
+    }
+    set inputButtonStyle(value) {
+        super.inputButtonStyle = value;
+    }
+    /** Whether ripples are disabled on the button toggle. */
+    //@Input({transform: booleanAttribute}) disableRipple: boolean = false;
+    /** Whether the button is checked. */
+    get checked() {
+        return this.buttonToggleGroup ? this.buttonToggleGroup._isSelected(this) : this._checked;
+    }
+    set checked(value) {
+        if (value !== this._checked) {
+            this._checked = value;
+            if (this.buttonToggleGroup) {
+                this.buttonToggleGroup._syncButtonToggle(this, this._checked);
+            }
+            this.markForCheck();
+        }
+    }
+    /** Whether the button should remain interactive when it is disabled. */
+    get disabledInteractive() {
+        return (super.disabledInteractive ||
+            (this.buttonToggleGroup !== null && this.buttonToggleGroup.disabledInteractive));
+    }
+    set disabledInteractive(value) {
+        super.disabledInteractive = value;
+    }
+    constructor() {
+        super();
+        this._animationDisabled = _animationsDisabled();
+        this._multiple = true;
+        this._checked = false;
+        /** Event emitted when the group value changes. */
+        this.change = new EventEmitter();
+        this.toThemeColor = toThemeColor;
+        const toggleGroup = inject(CUTE_BUTTON_TOGGLE_GROUP, { optional: true });
+        //const defaultTabIndex = inject(new HostAttributeToken('tabindex'), {optional: true}) || '';
+        const defaultOptions = inject(CUTE_BUTTON_TOGGLE_DEFAULT_OPTIONS, { optional: true });
+        //this._tabIndex = parseInt(defaultTabIndex) || 0;
+        this.buttonToggleGroup = toggleGroup;
+        this.disabledInteractive = defaultOptions?.disabledInteractive ?? false;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        const group = this.buttonToggleGroup;
+        this.id = this.id || `cute-button-toggle-${uniqueId++}`;
+        if (group) {
+            if (!this.color) {
+                this.defaultColor = group.color;
+            }
+            if (group._isPrechecked(this)) {
+                this.checked = true;
+            }
+            else if (group._isSelected(this) !== this._checked) {
+                // As a side effect of the circular dependency between the toggle group and the button,
+                // we may end up in a state where the button is supposed to be checked on init, but it
+                // isn't, because the checked value was assigned too early. This can happen when Ivy
+                // assigns the static input value before the `ngOnInit` has run.
+                group._syncButtonToggle(this, this._checked);
+            }
+        }
+    }
+    /*
+    override ngAfterViewInit() {
+      super.ngAfterViewInit();
+      // This serves two purposes:
+      // 1. We don't want the animation to fire on the first render for pre-checked toggles so we
+      //    delay adding the class until the view is rendered.
+      // 2. We don't want animation if the `NoopAnimationsModule` is provided.
+      //if (this._animationMode !== 'NoopAnimations') {
+      //  this._elementRef.nativeElement.classList.add('mat-button-toggle-animations-enabled');
+      //}
+  
+      this._focusMonitor.monitor(this._elementRef, true);
+    }
+  */
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        const group = this.buttonToggleGroup;
+        // Remove the toggle from the selection once it's destroyed. Needs to happen
+        // on the next tick to avoid "changed after checked" errors.
+        if (group && group._isSelected(this)) {
+            group._syncButtonToggle(this, false, false, true);
+        }
+    }
+    /** Checks the button toggle due to an interaction with the underlying native button. */
+    _onButtonClick() {
+        if (this.disabled) {
+            return;
+        }
+        const newChecked = this.isSingleSelector() ? true : !this._checked;
+        if (newChecked !== this._checked) {
+            this._checked = newChecked;
+            if (this.buttonToggleGroup) {
+                this.buttonToggleGroup._syncButtonToggle(this, this._checked, true);
+                this.buttonToggleGroup._onTouched();
+            }
+        }
+        if (this.isSingleSelector()) {
+            const focusable = this.buttonToggleGroup._buttonToggles?.find(toggle => {
+                return toggle.tabIndex === 0;
+            });
+            // Modify the tabindex attribute of the last focusable button toggle to -1.
+            if (focusable) {
+                focusable.tabIndex = -1;
+            }
+            // Modify the tabindex attribute of the presently selected button toggle to 0.
+            this.tabIndex = 0;
+        }
+        // Emit a change event when it's the single selector
+        this.change.emit(new CuteButtonToggleChange(this, this.value));
+    }
+    /** Gets the name that should be assigned to the inner DOM node. */
+    _getButtonName() {
+        if (this.isSingleSelector()) {
+            return this.buttonToggleGroup.name;
+        }
+        return this.name || null;
+    }
+    /** Whether the toggle is in single selection mode. */
+    isSingleSelector() {
+        return this.buttonToggleGroup && !this.buttonToggleGroup.multiple;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteButtonToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CuteButtonToggle, isStandalone: true, selector: "cute-button-toggle", inputs: { name: "name", value: "value", checked: ["checked", "checked", booleanAttribute] }, outputs: { change: "change" }, host: { listeners: { "focus": "focus()", "click": "_onButtonClick()" }, properties: { "class.cute-button-toggle-standalone": "!buttonToggleGroup", "class.active": "checked", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.name": "null", "style.--bs-btn-hover-color": "'var(--bs-'+toThemeColor(color)+'-text-emphasis)'" }, classAttribute: "cute-button-toggle" }, providers: [
+            { provide: CUTE_BUTTON_BASE, useExisting: CuteButtonToggle }
+        ], exportAs: ["cuteButtonToggle"], usesInheritance: true, ngImport: i0, template: "<!--\r\n  For capturing HTML-elements such as <i class..> or <img src=\"\"...> and others\r\n  we need apply [cuteButtonIcon] attribute to them.\r\n-->\r\n<span class=\"cute-icon-wrapper\">\r\n  <ng-content select=\".material-icons:not([iconPositionEnd]),\r\n                      .bi:not([iconPositionEnd]),\r\n                      cute-icon:not([iconPositionEnd]),\r\n                      cute-avatar:not([iconPositionEnd]),\r\n                      [cuteButtonIcon]:not([iconPositionEnd])\">\r\n  </ng-content>\r\n</span>\r\n\r\n<span class=\"cute-button-label\">\r\n  <ng-content>\r\n      @if(visuallyHiddenLabel) {\r\n        <span class=\"visually-hidden\"> {{visuallyHiddenLabel}} </span>\r\n      }\r\n  </ng-content>\r\n</span>\r\n\r\n<span class=\"cute-icon-wrapper\">\r\n  <ng-content select=\".material-icons[iconPositionEnd],\r\n                      .bi:[iconPositionEnd],\r\n                      cute-icon[iconPositionEnd],\r\n                      cute-avatar:[iconPositionEnd],\r\n                      [cuteButtonIcon][iconPositionEnd]\">\r\n  </ng-content>\r\n</span>\r\n", styles: [".cute-ripple-element{--cute-ripple-duration: .5s;--cute-ripple-bg-color: rgba(255, 255, 255, .18);position:absolute;border-radius:50%;pointer-events:none;transform:scale3d(0,0,0);animation:cute-ripple-element-animation var(--cute-ripple-duration) cubic-bezier(.65,.05,.36,1);background-color:var(--cute-ripple-bg-color);will-change:transform,opacity}@media (forced-colors: active){.cute-ripple-element{display:none}}@keyframes cute-ripple-element-animation{to{transform:scale(8);opacity:0}}.cute-button,.cute-anchor{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;overflow:visible;box-shadow:none}.cute-button:has(>:not(.cute-ripple):nth-child(2)),.cute-anchor:has(>:not(.cute-ripple):nth-child(2)){gap:.5em}.cute-button.dropdown-toggle,.cute-anchor.dropdown-toggle{gap:.375em}.cute-button.dropdown-toggle-split,.cute-anchor.dropdown-toggle-split{gap:0}.cute-button .cute-icon-wrapper,.cute-anchor .cute-icon-wrapper{display:contents}.cute-button .cute-icon-wrapper:empty,.cute-anchor .cute-icon-wrapper:empty{display:none}.cute-button .cute-button-label,.cute-anchor .cute-button-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cute-button .cute-button-label .badge,.cute-anchor .cute-button-label .badge{line-height:var(--bs-btn-line-height);top:0}.cute-button .cute-button-label:empty,.cute-anchor .cute-button-label:empty{display:none}.cute-button.cute-button-disabled-interactive,.cute-anchor.cute-button-disabled-interactive{cursor:pointer}.cute-button.cute-button-disabled-interactive:disabled,.cute-button.cute-button-disabled-interactive.disabled,.cute-anchor.cute-button-disabled-interactive:disabled,.cute-anchor.cute-button-disabled-interactive.disabled{pointer-events:auto;cursor:default;box-shadow:none;--bs-btn-active-bg: var(--bs-btn-disabled-bg);--bs-btn-active-border-color: var(--bs-btn-disabled-border-color);--bs-btn-active-color: var(--bs-btn-disabled-color)}.cute-button.cute-button-disabled-interactive:disabled.cute-icon-button,.cute-button.cute-button-disabled-interactive.disabled.cute-icon-button,.cute-anchor.cute-button-disabled-interactive:disabled.cute-icon-button,.cute-anchor.cute-button-disabled-interactive.disabled.cute-icon-button{--bs-btn-active-bg: transparent;--bs-btn-active-border-color: transparent;--bs-btn-hover-bg: transparent}.cute-button.cute-base-button,.cute-anchor.cute-base-button{font-weight:500;--cute-base-button-color-rgb: var(--bs-body-color-rgb);--bs-btn-active-bg: rgba(var(--cute-base-button-color-rgb), .08);--bs-btn-active-border-color: rgba(var(--cute-base-button-color-rgb), .12);--bs-btn-disabled-border-color: transparent;--bs-btn-hover-bg: rgba(var(--cute-base-button-color-rgb), .06)}.cute-button.cute-flat-button.cute-unthemed,.cute-anchor.cute-flat-button.cute-unthemed{--bs-btn-bg: var(--bs-tertiary-bg);--bs-btn-hover-bg: var(--bs-secondary-bg);--bs-btn-active-bg: var(--bs-secondary-bg);border-color:transparent}.cute-button.raised,.cute-anchor.raised{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;transition:box-shadow .2s cubic-bezier(.4,0,.2,1)}.cute-button.raised:hover,.cute-button.raised:focus,.cute-anchor.raised:hover,.cute-anchor.raised:focus{box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.cute-button.raised:active,.cute-anchor.raised:active{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cute-button.raised:disabled,.cute-button.raised.disabled,.cute-anchor.raised:disabled,.cute-anchor.raised.disabled{box-shadow:0 0 #0003,0 0 #00000024,0 0 #0000001f}.cute-button.btn-light:disabled,.cute-button.btn-light.disabled,.cute-anchor.btn-light:disabled,.cute-anchor.btn-light.disabled{background-color:#0000001a}.cute-button>[role=img],.cute-button i[class],.cute-anchor>[role=img],.cute-anchor i[class]{align-self:center;pointer-events:none;overflow:visible}.cute-button.cute-fab-button,.cute-anchor.cute-fab-button{--icon-size: 40px;width:var(--icon-size);height:var(--icon-size);min-width:var(--icon-size);line-height:1;padding:0;padding-top:revert;gap:0;border-radius:50%;flex-shrink:0;-webkit-tap-highlight-color:rgba(0,0,0,0);box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.cute-button.cute-fab-button[magnitude=largest],.cute-anchor.cute-fab-button[magnitude=largest]{--icon-size: 64px}.cute-button.cute-fab-button[magnitude=larger],.cute-anchor.cute-fab-button[magnitude=larger]{--icon-size: 56px}.cute-button.cute-fab-button[magnitude=large],.cute-anchor.cute-fab-button[magnitude=large]{--icon-size: 48px}.cute-button.cute-fab-button[magnitude=middle],.cute-anchor.cute-fab-button[magnitude=middle]{--icon-size: 40px}.cute-button.cute-fab-button[magnitude=small],.cute-anchor.cute-fab-button[magnitude=small]{--icon-size: 32px}.cute-button.cute-fab-button[magnitude=smaller],.cute-anchor.cute-fab-button[magnitude=smaller]{--icon-size: 24px}.cute-button.cute-fab-button[magnitude=smallest],.cute-anchor.cute-fab-button[magnitude=smallest]{--icon-size: 16px}.cute-button.cute-fab-button svg,.cute-anchor.cute-fab-button svg{vertical-align:baseline}.cute-button.cute-fab-button:active,.cute-anchor.cute-fab-button:active{box-shadow:0 7px 8px -4px #0003,0 12px 17px 2px #00000024,0 5px 22px 4px #0000001f}.cute-button.cute-fab-button:active.btn-light,.cute-anchor.cute-fab-button:active.btn-light{border-color:#00000040}.cute-button.cute-fab-button:hover,.cute-button.cute-fab-button.cdk-focused,.cute-anchor.cute-fab-button:hover,.cute-anchor.cute-fab-button.cdk-focused{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cute-button.cute-fab-button:disabled,.cute-button.cute-fab-button.disabled,.cute-anchor.cute-fab-button:disabled,.cute-anchor.cute-fab-button.disabled{border:0;box-shadow:none}.cute-button.cute-fab-button:disabled>[role=img],.cute-button.cute-fab-button:disabled i[class],.cute-button.cute-fab-button.disabled>[role=img],.cute-button.cute-fab-button.disabled i[class],.cute-anchor.cute-fab-button:disabled>[role=img],.cute-anchor.cute-fab-button:disabled i[class],.cute-anchor.cute-fab-button.disabled>[role=img],.cute-anchor.cute-fab-button.disabled i[class]{color:#00000061!important}.cute-button.cute-icon-button,.cute-anchor.cute-icon-button{overflow:hidden;border-radius:50%;border:0;padding:0;gap:0!important;--icon-size: 40px;width:var(--icon-size);height:var(--icon-size);min-width:var(--icon-size);line-height:1;--cute-icon-button-color-rgb: var(--bs-body-color-rgb);--bs-btn-active-bg: rgba(var(--cute-icon-button-color-rgb), .12);--bs-btn-active-border-color: rgba(var(--cute-icon-button-color-rgb), .12);--bs-btn-hover-bg: rgba(var(--cute-icon-button-color-rgb), .06)}.cute-button.cute-icon-button[magnitude=largest],.cute-anchor.cute-icon-button[magnitude=largest]{--icon-size: 64px}.cute-button.cute-icon-button[magnitude=larger],.cute-anchor.cute-icon-button[magnitude=larger]{--icon-size: 56px}.cute-button.cute-icon-button[magnitude=large],.cute-anchor.cute-icon-button[magnitude=large]{--icon-size: 48px}.cute-button.cute-icon-button[magnitude=middle],.cute-anchor.cute-icon-button[magnitude=middle]{--icon-size: 40px}.cute-button.cute-icon-button[magnitude=small],.cute-anchor.cute-icon-button[magnitude=small]{--icon-size: 32px}.cute-button.cute-icon-button[magnitude=smaller],.cute-anchor.cute-icon-button[magnitude=smaller]{--icon-size: 24px}.cute-button.cute-icon-button[magnitude=smallest],.cute-anchor.cute-icon-button[magnitude=smallest]{--icon-size: 16px}.cute-button.cute-icon-button svg,.cute-anchor.cute-icon-button svg{vertical-align:baseline}.cute-button.cute-icon-button.cdk-focused,.cute-anchor.cute-icon-button.cdk-focused{--bs-btn-hover-bg: rgba(var(--cute-icon-button-color-rgb), .04)}.cute-btn-xxs,.cute-btn-group-xxs>.btn{--bs-btn-padding-y: .25rem;--bs-btn-padding-x: .5rem;--bs-btn-font-size: .5rem}.cute-btn-xs,.cute-btn-group-xs>.btn{--bs-btn-padding-y: .25rem;--bs-btn-padding-x: .5rem;--bs-btn-font-size: .75rem}.cute-btn-xl,.cute-btn-group-xl>.btn{--bs-btn-padding-y: .5rem;--bs-btn-padding-x: 1rem;--bs-btn-font-size: 1.5rem}.cute-btn-xxl,.cute-btn-group-xxl>.btn{--bs-btn-padding-y: .5rem;--bs-btn-padding-x: 1rem;--bs-btn-font-size: 2.5rem}[dir=rtl] .btn-group>.btn:not(:first-child):not(.dropdown-toggle),[dir=rtl] .btn-group>.btn.dropdown-toggle-split:last-child,[dir=rtl] .btn-group>.btn-group:not(:first-child)>.btn{border-radius:0}[dir=rtl] .btn-group>.btn:nth-child(n+3),[dir=rtl] .btn-group>:not(.btn-check)+.btn,[dir=rtl] .btn-group>.btn-group:not(:last-child)>.btn{border-radius:0 var(--bs-btn-border-radius) var(--bs-btn-border-radius) 0}[dir=rtl] .btn-group>.btn:first-child:not(.dropdown-toggle),[dir=rtl] .btn-group>.btn.dropdown-toggle-split:first-child,[dir=rtl] .btn-group>.btn-group:first-child>.btn{border-radius:0 var(--bs-btn-border-radius) var(--bs-btn-border-radius) 0}[dir=rtl] .btn-group>.btn:last-child:not(.dropdown-toggle),[dir=rtl] .btn-group>.btn.dropdown-toggle-split:last-child,[dir=rtl] .btn-group>.btn-group:last-child>.btn{border-radius:var(--bs-btn-border-radius) 0 0 var(--bs-btn-border-radius)}.cute-button-expandable{padding:.25rem .5rem;font-weight:600;color:var(--bs-emphasis-color);background-color:transparent}.cute-button-expandable:hover,.cute-button-expandable:focus{color:rgba(var(--bs-emphasis-color-rgb),.85);background-color:var(--bs-tertiary-bg)}.cute-button-expandable:before{width:1.25em;line-height:0;content:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e\");transition:transform .35s ease;transform-origin:.5em 50%;transform:scale(.85)}[data-bs-theme=dark] .cute-button-expandable:before{content:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e\")}[dir=rtl] .cute-button-expandable:before{transform:rotate(180deg) scale(.85);margin-left:.25em;text-align:end}.cute-button-expandable[aria-expanded=true]{color:rgba(var(--bs-emphasis-color-rgb),.85)}.cute-button-expandable[aria-expanded=true]:before{transform:rotate(90deg) scale(.85)}\n", ".cute-button-toggle{--bs-btn-hover-bg: transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteButtonToggle, decorators: [{
+            type: Component,
+            args: [{ selector: 'cute-button-toggle', exportAs: 'cuteButtonToggle', host: {
+                        'class': 'cute-button-toggle',
+                        '[class.cute-button-toggle-standalone]': '!buttonToggleGroup',
+                        '[class.active]': 'checked',
+                        '[attr.aria-label]': 'null',
+                        '[attr.aria-labelledby]': 'null',
+                        '[attr.name]': 'null',
+                        '(focus)': 'focus()',
+                        '(click)': '_onButtonClick()',
+                        '[style.--bs-btn-hover-color]': "'var(--bs-'+toThemeColor(color)+'-text-emphasis)'",
+                        //'role': 'presentation',
+                    }, providers: [
+                        { provide: CUTE_BUTTON_BASE, useExisting: CuteButtonToggle }
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<!--\r\n  For capturing HTML-elements such as <i class..> or <img src=\"\"...> and others\r\n  we need apply [cuteButtonIcon] attribute to them.\r\n-->\r\n<span class=\"cute-icon-wrapper\">\r\n  <ng-content select=\".material-icons:not([iconPositionEnd]),\r\n                      .bi:not([iconPositionEnd]),\r\n                      cute-icon:not([iconPositionEnd]),\r\n                      cute-avatar:not([iconPositionEnd]),\r\n                      [cuteButtonIcon]:not([iconPositionEnd])\">\r\n  </ng-content>\r\n</span>\r\n\r\n<span class=\"cute-button-label\">\r\n  <ng-content>\r\n      @if(visuallyHiddenLabel) {\r\n        <span class=\"visually-hidden\"> {{visuallyHiddenLabel}} </span>\r\n      }\r\n  </ng-content>\r\n</span>\r\n\r\n<span class=\"cute-icon-wrapper\">\r\n  <ng-content select=\".material-icons[iconPositionEnd],\r\n                      .bi:[iconPositionEnd],\r\n                      cute-icon[iconPositionEnd],\r\n                      cute-avatar:[iconPositionEnd],\r\n                      [cuteButtonIcon][iconPositionEnd]\">\r\n  </ng-content>\r\n</span>\r\n", styles: [".cute-ripple-element{--cute-ripple-duration: .5s;--cute-ripple-bg-color: rgba(255, 255, 255, .18);position:absolute;border-radius:50%;pointer-events:none;transform:scale3d(0,0,0);animation:cute-ripple-element-animation var(--cute-ripple-duration) cubic-bezier(.65,.05,.36,1);background-color:var(--cute-ripple-bg-color);will-change:transform,opacity}@media (forced-colors: active){.cute-ripple-element{display:none}}@keyframes cute-ripple-element-animation{to{transform:scale(8);opacity:0}}.cute-button,.cute-anchor{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;overflow:visible;box-shadow:none}.cute-button:has(>:not(.cute-ripple):nth-child(2)),.cute-anchor:has(>:not(.cute-ripple):nth-child(2)){gap:.5em}.cute-button.dropdown-toggle,.cute-anchor.dropdown-toggle{gap:.375em}.cute-button.dropdown-toggle-split,.cute-anchor.dropdown-toggle-split{gap:0}.cute-button .cute-icon-wrapper,.cute-anchor .cute-icon-wrapper{display:contents}.cute-button .cute-icon-wrapper:empty,.cute-anchor .cute-icon-wrapper:empty{display:none}.cute-button .cute-button-label,.cute-anchor .cute-button-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cute-button .cute-button-label .badge,.cute-anchor .cute-button-label .badge{line-height:var(--bs-btn-line-height);top:0}.cute-button .cute-button-label:empty,.cute-anchor .cute-button-label:empty{display:none}.cute-button.cute-button-disabled-interactive,.cute-anchor.cute-button-disabled-interactive{cursor:pointer}.cute-button.cute-button-disabled-interactive:disabled,.cute-button.cute-button-disabled-interactive.disabled,.cute-anchor.cute-button-disabled-interactive:disabled,.cute-anchor.cute-button-disabled-interactive.disabled{pointer-events:auto;cursor:default;box-shadow:none;--bs-btn-active-bg: var(--bs-btn-disabled-bg);--bs-btn-active-border-color: var(--bs-btn-disabled-border-color);--bs-btn-active-color: var(--bs-btn-disabled-color)}.cute-button.cute-button-disabled-interactive:disabled.cute-icon-button,.cute-button.cute-button-disabled-interactive.disabled.cute-icon-button,.cute-anchor.cute-button-disabled-interactive:disabled.cute-icon-button,.cute-anchor.cute-button-disabled-interactive.disabled.cute-icon-button{--bs-btn-active-bg: transparent;--bs-btn-active-border-color: transparent;--bs-btn-hover-bg: transparent}.cute-button.cute-base-button,.cute-anchor.cute-base-button{font-weight:500;--cute-base-button-color-rgb: var(--bs-body-color-rgb);--bs-btn-active-bg: rgba(var(--cute-base-button-color-rgb), .08);--bs-btn-active-border-color: rgba(var(--cute-base-button-color-rgb), .12);--bs-btn-disabled-border-color: transparent;--bs-btn-hover-bg: rgba(var(--cute-base-button-color-rgb), .06)}.cute-button.cute-flat-button.cute-unthemed,.cute-anchor.cute-flat-button.cute-unthemed{--bs-btn-bg: var(--bs-tertiary-bg);--bs-btn-hover-bg: var(--bs-secondary-bg);--bs-btn-active-bg: var(--bs-secondary-bg);border-color:transparent}.cute-button.raised,.cute-anchor.raised{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;transition:box-shadow .2s cubic-bezier(.4,0,.2,1)}.cute-button.raised:hover,.cute-button.raised:focus,.cute-anchor.raised:hover,.cute-anchor.raised:focus{box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.cute-button.raised:active,.cute-anchor.raised:active{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cute-button.raised:disabled,.cute-button.raised.disabled,.cute-anchor.raised:disabled,.cute-anchor.raised.disabled{box-shadow:0 0 #0003,0 0 #00000024,0 0 #0000001f}.cute-button.btn-light:disabled,.cute-button.btn-light.disabled,.cute-anchor.btn-light:disabled,.cute-anchor.btn-light.disabled{background-color:#0000001a}.cute-button>[role=img],.cute-button i[class],.cute-anchor>[role=img],.cute-anchor i[class]{align-self:center;pointer-events:none;overflow:visible}.cute-button.cute-fab-button,.cute-anchor.cute-fab-button{--icon-size: 40px;width:var(--icon-size);height:var(--icon-size);min-width:var(--icon-size);line-height:1;padding:0;padding-top:revert;gap:0;border-radius:50%;flex-shrink:0;-webkit-tap-highlight-color:rgba(0,0,0,0);box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.cute-button.cute-fab-button[magnitude=largest],.cute-anchor.cute-fab-button[magnitude=largest]{--icon-size: 64px}.cute-button.cute-fab-button[magnitude=larger],.cute-anchor.cute-fab-button[magnitude=larger]{--icon-size: 56px}.cute-button.cute-fab-button[magnitude=large],.cute-anchor.cute-fab-button[magnitude=large]{--icon-size: 48px}.cute-button.cute-fab-button[magnitude=middle],.cute-anchor.cute-fab-button[magnitude=middle]{--icon-size: 40px}.cute-button.cute-fab-button[magnitude=small],.cute-anchor.cute-fab-button[magnitude=small]{--icon-size: 32px}.cute-button.cute-fab-button[magnitude=smaller],.cute-anchor.cute-fab-button[magnitude=smaller]{--icon-size: 24px}.cute-button.cute-fab-button[magnitude=smallest],.cute-anchor.cute-fab-button[magnitude=smallest]{--icon-size: 16px}.cute-button.cute-fab-button svg,.cute-anchor.cute-fab-button svg{vertical-align:baseline}.cute-button.cute-fab-button:active,.cute-anchor.cute-fab-button:active{box-shadow:0 7px 8px -4px #0003,0 12px 17px 2px #00000024,0 5px 22px 4px #0000001f}.cute-button.cute-fab-button:active.btn-light,.cute-anchor.cute-fab-button:active.btn-light{border-color:#00000040}.cute-button.cute-fab-button:hover,.cute-button.cute-fab-button.cdk-focused,.cute-anchor.cute-fab-button:hover,.cute-anchor.cute-fab-button.cdk-focused{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cute-button.cute-fab-button:disabled,.cute-button.cute-fab-button.disabled,.cute-anchor.cute-fab-button:disabled,.cute-anchor.cute-fab-button.disabled{border:0;box-shadow:none}.cute-button.cute-fab-button:disabled>[role=img],.cute-button.cute-fab-button:disabled i[class],.cute-button.cute-fab-button.disabled>[role=img],.cute-button.cute-fab-button.disabled i[class],.cute-anchor.cute-fab-button:disabled>[role=img],.cute-anchor.cute-fab-button:disabled i[class],.cute-anchor.cute-fab-button.disabled>[role=img],.cute-anchor.cute-fab-button.disabled i[class]{color:#00000061!important}.cute-button.cute-icon-button,.cute-anchor.cute-icon-button{overflow:hidden;border-radius:50%;border:0;padding:0;gap:0!important;--icon-size: 40px;width:var(--icon-size);height:var(--icon-size);min-width:var(--icon-size);line-height:1;--cute-icon-button-color-rgb: var(--bs-body-color-rgb);--bs-btn-active-bg: rgba(var(--cute-icon-button-color-rgb), .12);--bs-btn-active-border-color: rgba(var(--cute-icon-button-color-rgb), .12);--bs-btn-hover-bg: rgba(var(--cute-icon-button-color-rgb), .06)}.cute-button.cute-icon-button[magnitude=largest],.cute-anchor.cute-icon-button[magnitude=largest]{--icon-size: 64px}.cute-button.cute-icon-button[magnitude=larger],.cute-anchor.cute-icon-button[magnitude=larger]{--icon-size: 56px}.cute-button.cute-icon-button[magnitude=large],.cute-anchor.cute-icon-button[magnitude=large]{--icon-size: 48px}.cute-button.cute-icon-button[magnitude=middle],.cute-anchor.cute-icon-button[magnitude=middle]{--icon-size: 40px}.cute-button.cute-icon-button[magnitude=small],.cute-anchor.cute-icon-button[magnitude=small]{--icon-size: 32px}.cute-button.cute-icon-button[magnitude=smaller],.cute-anchor.cute-icon-button[magnitude=smaller]{--icon-size: 24px}.cute-button.cute-icon-button[magnitude=smallest],.cute-anchor.cute-icon-button[magnitude=smallest]{--icon-size: 16px}.cute-button.cute-icon-button svg,.cute-anchor.cute-icon-button svg{vertical-align:baseline}.cute-button.cute-icon-button.cdk-focused,.cute-anchor.cute-icon-button.cdk-focused{--bs-btn-hover-bg: rgba(var(--cute-icon-button-color-rgb), .04)}.cute-btn-xxs,.cute-btn-group-xxs>.btn{--bs-btn-padding-y: .25rem;--bs-btn-padding-x: .5rem;--bs-btn-font-size: .5rem}.cute-btn-xs,.cute-btn-group-xs>.btn{--bs-btn-padding-y: .25rem;--bs-btn-padding-x: .5rem;--bs-btn-font-size: .75rem}.cute-btn-xl,.cute-btn-group-xl>.btn{--bs-btn-padding-y: .5rem;--bs-btn-padding-x: 1rem;--bs-btn-font-size: 1.5rem}.cute-btn-xxl,.cute-btn-group-xxl>.btn{--bs-btn-padding-y: .5rem;--bs-btn-padding-x: 1rem;--bs-btn-font-size: 2.5rem}[dir=rtl] .btn-group>.btn:not(:first-child):not(.dropdown-toggle),[dir=rtl] .btn-group>.btn.dropdown-toggle-split:last-child,[dir=rtl] .btn-group>.btn-group:not(:first-child)>.btn{border-radius:0}[dir=rtl] .btn-group>.btn:nth-child(n+3),[dir=rtl] .btn-group>:not(.btn-check)+.btn,[dir=rtl] .btn-group>.btn-group:not(:last-child)>.btn{border-radius:0 var(--bs-btn-border-radius) var(--bs-btn-border-radius) 0}[dir=rtl] .btn-group>.btn:first-child:not(.dropdown-toggle),[dir=rtl] .btn-group>.btn.dropdown-toggle-split:first-child,[dir=rtl] .btn-group>.btn-group:first-child>.btn{border-radius:0 var(--bs-btn-border-radius) var(--bs-btn-border-radius) 0}[dir=rtl] .btn-group>.btn:last-child:not(.dropdown-toggle),[dir=rtl] .btn-group>.btn.dropdown-toggle-split:last-child,[dir=rtl] .btn-group>.btn-group:last-child>.btn{border-radius:var(--bs-btn-border-radius) 0 0 var(--bs-btn-border-radius)}.cute-button-expandable{padding:.25rem .5rem;font-weight:600;color:var(--bs-emphasis-color);background-color:transparent}.cute-button-expandable:hover,.cute-button-expandable:focus{color:rgba(var(--bs-emphasis-color-rgb),.85);background-color:var(--bs-tertiary-bg)}.cute-button-expandable:before{width:1.25em;line-height:0;content:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e\");transition:transform .35s ease;transform-origin:.5em 50%;transform:scale(.85)}[data-bs-theme=dark] .cute-button-expandable:before{content:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e\")}[dir=rtl] .cute-button-expandable:before{transform:rotate(180deg) scale(.85);margin-left:.25em;text-align:end}.cute-button-expandable[aria-expanded=true]{color:rgba(var(--bs-emphasis-color-rgb),.85)}.cute-button-expandable[aria-expanded=true]:before{transform:rotate(90deg) scale(.85)}\n", ".cute-button-toggle{--bs-btn-hover-bg: transparent}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { name: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], checked: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], change: [{
+                type: Output
+            }] } });
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ */
+const TYPES = [
+    CuteButtonToggle,
+    CuteButtonToggleGroup,
+];
+class CuteButtonToggleModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteButtonToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: CuteButtonToggleModule, imports: [CommonModule, CuteButtonToggle,
+            CuteButtonToggleGroup], exports: [CuteButtonToggle,
+            CuteButtonToggleGroup] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteButtonToggleModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteButtonToggleModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ...TYPES],
+                    exports: TYPES,
+                    declarations: [],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CUTE_BUTTON_TOGGLE_DEFAULT_OPTIONS, CUTE_BUTTON_TOGGLE_GROUP, CUTE_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, CuteButtonToggle, CuteButtonToggleChange, CuteButtonToggleGroup, CuteButtonToggleModule };
+//# sourceMappingURL=cute-widgets-base-button-toggle.mjs.map