@cute-widgets/base 20.0.3 → 20.0.5

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, NgZone, booleanAttribute, HostBinding, Input, ContentChildren, Directive, ChangeDetectionStrategy, ViewEncapsulation, Component, numberAttribute, NgModule } from '@angular/core';
+import { InjectionToken, EventEmitter, booleanAttribute, Output, ContentChildren, HostBinding, Input, Directive, inject, NgZone, ChangeDetectionStrategy, ViewEncapsulation, Component, numberAttribute, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CuteFocusableControl } from '@cute-widgets/base/abstract';
 import { CuteIcon } from '@cute-widgets/base/icon';
@@ -9,6 +9,142 @@ import { takeUntil } from 'rxjs/operators';
 import { toThemeColor, toColorCssClass } from '@cute-widgets/base/core';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 
+/**
+ * @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
+ */
+// Counter used to generate unique IDs.
+let uniqueIdCounter$1 = 0;
+/**
+ * Injection token that can be used to reference instances of `CuteButtonGroup`.
+ * It serves as an alternative token to the actual `CuteButtonGroup` class which
+ * could cause unnecessary retention of the class and its component metadata.
+ */
+const CUTE_BUTTON_GROUP = new InjectionToken('CuteButtonGroup');
+/**
+ * Group a series of buttons together on a single line or stack them in a vertical column.
+ */
+class CuteButtonGroup extends CuteFocusableControl {
+    get buttonLargerBinding() { return this.magnitude == "larger"; }
+    get buttonLargeBinding() { return this.magnitude == "large"; }
+    get buttonSmallerBinding() { return this.magnitude == "smaller"; }
+    get buttonSmallBinding() { return this.magnitude == "small"; }
+    constructor() {
+        super();
+        /** Whether to place the nested buttons in the vertical direction. */
+        this.vertical = false;
+        /** Raised when the disabled state of a component group changes. */
+        this.disabledChange = new EventEmitter();
+        // Buttons that have `disabled` states before the group is disabled as a whole. Uses to restore `disabled` states
+        // when the group's state will be enabled again.
+        // CuteButtonToggleGroup, as an ancestor, uses this algo too.
+        this.#disablesCache = new Set();
+    }
+    generateId() {
+        return `button-group-${++uniqueIdCounter$1}`;
+    }
+    // Buttons that have `disabled` states before the group is disabled as a whole. Uses to restore `disabled` states
+    // when the group's state will be enabled again.
+    // CuteButtonToggleGroup, as an ancestor, uses this algo too.
+    #disablesCache;
+    setDisabledState(newState, emitEvent) {
+        let res = super.setDisabledState(newState, emitEvent);
+        if (res && this._buttons) {
+            const isDisabled = coerceBooleanProperty(newState);
+            if (isDisabled) {
+                this._buttons.forEach(btn => {
+                    if (btn.disabled) {
+                        this.#disablesCache.add(btn);
+                    }
+                    btn.disabled = isDisabled;
+                });
+            }
+            else {
+                this._buttons.forEach(btn => {
+                    if (!this.#disablesCache.has(btn)) {
+                        btn.disabled = false;
+                    }
+                });
+                this.#disablesCache.clear();
+            }
+            this._markButtonsForCheck();
+            this.disabledChange.emit(isDisabled);
+        }
+        return res;
+    }
+    ngAfterContentInit() {
+        super.ngAfterContentInit();
+        this._buttons?.forEach(b => {
+            b.defaultColor = this.color ?? "primary";
+            if (this.disabled) {
+                b.disabled = this.disabled;
+            }
+            if (b.buttonStyle == "base") {
+                b.inputButtonStyle = this.buttonStyle ?? "flat-button";
+            }
+        });
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.#disablesCache.clear();
+    }
+    /** Marks all the child button toggles to be checked. */
+    _markButtonsForCheck() {
+        this._buttons?.forEach(btn => btn.markForCheck());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteButtonGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.15", type: CuteButtonGroup, isStandalone: true, selector: "cute-button-group", inputs: { vertical: ["vertical", "vertical", booleanAttribute], magnitude: "magnitude", buttonStyle: "buttonStyle" }, outputs: { disabledChange: "disabledChange" }, host: { attributes: { "role": "group" }, properties: { "class": "\"btn-group\" +(vertical?\"-vertical\":\"\")", "class.disabled": "disabled", "attr.aria-disabled": "disabled", "attr.aria-label": "ariaLabel || null", "attr.aria-labelledby": "ariaLabelledby || null", "attr.aria-describedby": "ariaDescribedby || null", "attr.tabindex": "-1", "id": "id || null", "class.cute-btn-group-xl": "this.buttonLargerBinding", "class.btn-group-lg": "this.buttonLargeBinding", "class.cute-btn-group-xs": "this.buttonSmallerBinding", "class.btn-group-sm": "this.buttonSmallBinding" }, classAttribute: "cute-button-group" }, providers: [{ provide: CUTE_BUTTON_GROUP, useExisting: CuteButtonGroup }], queries: [{ propertyName: "_buttons", predicate: CUTE_BUTTON_BASE, descendants: true }], exportAs: ["cuteButtonGroup"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteButtonGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "cute-button-group",
+                    exportAs: "cuteButtonGroup",
+                    host: {
+                        'role': 'group',
+                        'class': 'cute-button-group',
+                        '[class]': '"btn-group" +(vertical?"-vertical":"")',
+                        '[class.disabled]': 'disabled',
+                        '[attr.aria-disabled]': 'disabled',
+                        '[attr.aria-label]': 'ariaLabel || null',
+                        '[attr.aria-labelledby]': 'ariaLabelledby || null',
+                        '[attr.aria-describedby]': 'ariaDescribedby || null',
+                        '[attr.tabindex]': '-1',
+                        '[id]': 'id || null'
+                    },
+                    providers: [{ provide: CUTE_BUTTON_GROUP, useExisting: CuteButtonGroup }],
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { vertical: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], magnitude: [{
+                type: Input
+            }], buttonStyle: [{
+                type: Input
+            }], buttonLargerBinding: [{
+                type: HostBinding,
+                args: ["class.cute-btn-group-xl"]
+            }], buttonLargeBinding: [{
+                type: HostBinding,
+                args: ["class.btn-group-lg"]
+            }], buttonSmallerBinding: [{
+                type: HostBinding,
+                args: ["class.cute-btn-group-xs"]
+            }], buttonSmallBinding: [{
+                type: HostBinding,
+                args: ["class.btn-group-sm"]
+            }], _buttons: [{
+                type: ContentChildren,
+                args: [CUTE_BUTTON_BASE, { descendants: true }]
+            }], disabledChange: [{
+                type: Output
+            }] } });
+
 /**
  * @license Apache-2.0
  *
@@ -29,7 +165,7 @@ const CUTE_BUTTON_CONFIG = new InjectionToken('CUTE_BUTTON_CONFIG');
  */
 const CUTE_BUTTON_BASE = new InjectionToken('CuteButtonBase');
 class CuteButtonBase extends CuteFocusableControl {
-    /** Button's appearance style in the following format: `{style}-button` */
+    /** Button's appearance style in the following format: `{style}-button`. */
     get inputButtonStyle() { return this._inputButtonStyle; }
     set inputButtonStyle(value) {
         this._inputButtonStyle = value || "base-button";
@@ -60,7 +196,7 @@ class CuteButtonBase extends CuteFocusableControl {
             this._buttonStyle = this._inputButtonStyle;
         }
     }
-    /** Whether to disable the ripple effect on button clicking */
+    /** Whether to disable the ripple effect on button clicking. */
     get disableRipple() { return this._ripple.disabled; }
     set disableRipple(value) { this._ripple.disabled = value; }
     /**
@@ -120,15 +256,17 @@ class CuteButtonBase extends CuteFocusableControl {
         super();
         this._destroyed$ = new Subject();
         this._ngZone = inject(NgZone);
+        this._group = inject(CUTE_BUTTON_GROUP, { optional: true, host: true });
         this._isAnchor = false;
         this._inputButtonStyle = "base-button";
         this._buttonStyle = "base";
-        /** Whether to disable text wrapping */
-        this.nowrap = false;
+        /** Whether to enable text wrapping. */
+        this.wrapText = false;
         /** Whether to show the collapse/expand indicator based on the `aria-expanded` current value. */
         this.withAriaExpandedIndicator = false;
         const config = inject(CUTE_BUTTON_CONFIG, { optional: true });
         this.disabledInteractive = config?.disabledInteractive ?? false;
+        this.wrapText = config?.wrapText ?? false;
         this._ripple = RippleManager.getInstance(this._nativeElement);
         this._isAnchor = (this._nativeElement.tagName == "A");
     }
@@ -151,7 +289,8 @@ class CuteButtonBase extends CuteFocusableControl {
     }
     setDisabledState(newState) {
         if (this._isAnchor) {
-            if (newState) {
+            const isDisabled = coerceBooleanProperty(newState);
+            if (isDisabled) {
                 this._savedTabIndex = this.tabIndex;
                 this.tabIndex = -1;
             }
@@ -188,6 +327,9 @@ class CuteButtonBase extends CuteFocusableControl {
     }
     ngOnInit() {
         super.ngOnInit();
+        if (this._group) {
+            this.defaultColor = this._group.color;
+        }
         this._focusMonitor.monitor(this._elementRef, true);
         ["mousedown", "mouseup", "click"].forEach((type) => {
             fromEvent(this._nativeElement, type, { capture: true })
@@ -238,13 +380,14 @@ class CuteButtonBase extends CuteFocusableControl {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteButtonBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.15", type: CuteButtonBase, isStandalone: true, inputs: { inputButtonStyle: ["cuteButton", "inputButtonStyle"], magnitude: "magnitude", nowrap: "nowrap", disableRipple: "disableRipple", ariaDisabled: ["aria-disabled", "ariaDisabled", booleanAttribute], withAriaExpandedIndicator: ["withAriaExpandedIndicator", "withAriaExpandedIndicator", booleanAttribute], disabledInteractive: ["disabledInteractive", "disabledInteractive", booleanAttribute], visuallyHiddenLabel: "visuallyHiddenLabel" }, host: { listeners: { "keydown": "_haltDisabledEvents($event)" }, properties: { "style.--bs-focus-ring-color": "color? \"rgba(var(\"+bsColorVarName+\"), var(--bs-focus-ring-opacity))\" : \"var(--bs-border-color-translucent)\"", "class": "this.classNames", "style.--bs-btn-close-focus-shadow": "this._closeButtonShadowColor", "class.cute-btn-xxl": "this.buttonLargestBinding", "class.cute-btn-xl": "this.buttonLargerBinding", "class.btn-lg": "this.buttonLargeBinding", "class.btn-sm": "this.buttonSmallBinding", "class.cute-btn-xs": "this.buttonSmallerBinding", "class.cute-btn-xxs": "this.buttonSmallestBinding", "style.--cute-icon-button-color-rgb": "this.iconButtonColorBinding", "style.--cute-base-button-color-rgb": "this.baseButtonColorBinding" }, classAttribute: "btn" }, queries: [{ propertyName: "_icons", predicate: CuteIcon }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.15", type: CuteButtonBase, isStandalone: true, inputs: { inputButtonStyle: ["cuteButton", "inputButtonStyle"], magnitude: "magnitude", wrapText: ["wrapText", "wrapText", booleanAttribute], disableRipple: "disableRipple", ariaDisabled: ["aria-disabled", "ariaDisabled", booleanAttribute], withAriaExpandedIndicator: ["withAriaExpandedIndicator", "withAriaExpandedIndicator", booleanAttribute], disabledInteractive: ["disabledInteractive", "disabledInteractive", booleanAttribute], visuallyHiddenLabel: "visuallyHiddenLabel" }, host: { listeners: { "keydown": "_haltDisabledEvents($event)" }, properties: { "attr.magnitude": "magnitude", "style.--bs-focus-ring-color": "color? \"rgba(var(\"+bsColorVarName+\"), var(--bs-focus-ring-opacity))\" : \"var(--bs-border-color-translucent)\"", "class": "this.classNames", "style.--bs-btn-close-focus-shadow": "this._closeButtonShadowColor", "class.cute-btn-xxl": "this.buttonLargestBinding", "class.cute-btn-xl": "this.buttonLargerBinding", "class.btn-lg": "this.buttonLargeBinding", "class.btn-sm": "this.buttonSmallBinding", "class.cute-btn-xs": "this.buttonSmallerBinding", "class.cute-btn-xxs": "this.buttonSmallestBinding", "style.--cute-icon-button-color-rgb": "this.iconButtonColorBinding", "style.--cute-base-button-color-rgb": "this.baseButtonColorBinding" }, classAttribute: "btn" }, queries: [{ propertyName: "_icons", predicate: CuteIcon }], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteButtonBase, decorators: [{
             type: Directive,
             args: [{
                     host: {
                         class: 'btn',
+                        '[attr.magnitude]': 'magnitude',
                         '[style.--bs-focus-ring-color]': 'color? "rgba(var("+bsColorVarName+"), var(--bs-focus-ring-opacity))" : "var(--bs-border-color-translucent)"',
                         '(keydown)': '_haltDisabledEvents($event)',
                     }
@@ -257,8 +400,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 args: ["cuteButton"]
             }], magnitude: [{
                 type: Input
-            }], nowrap: [{
-                type: Input
+            }], wrapText: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], disableRipple: [{
                 type: Input
             }], ariaDisabled: [{
@@ -321,9 +465,9 @@ class CuteButton extends CuteButtonBase {
         this.toThemeColor = toThemeColor;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CuteButton, isStandalone: true, selector: "button[cuteButton],\n             button[cute-button],\n             a[cuteButton],\n             a[cute-button],\n  ", host: { properties: { "class.cute-anchor": "_isAnchor", "class.btn-close": "buttonStyle == \"close\"", "class.rounded-pill": "buttonStyle==\"pill\"", "class.rounded-circle": "buttonStyle==\"circle\"", "class.raised": "buttonStyle==\"raised\" && !disabled", "class.icon-link": "toThemeColor(color)==\"link\"", "class.cute-button-expandable": "withAriaExpandedIndicator", "class.nowrap": "nowrap", "class.disabled": "(_isAnchor || buttonStyle==\"icon\" || disabledInteractive) && disabled", "class.cute-button-disabled-interactive": "disabledInteractive", "class.cute-unthemed": "!color", "attr.tabindex": "_getTabIndex()", "attr.disabled": "_getDisabledAttribute()", "attr.aria-disabled": "_getAriaDisabled()", "attr.id": "id || null", "attr.aria-label": "ariaLabel || null" }, classAttribute: "cute-button" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CuteButton, isStandalone: true, selector: "button[cuteButton],\n             button[cute-button],\n             a[cuteButton],\n             a[cute-button],\n  ", host: { properties: { "class.cute-anchor": "_isAnchor", "class.btn-close": "buttonStyle == \"close\"", "class.rounded-pill": "buttonStyle==\"pill\"", "class.rounded-circle": "buttonStyle==\"circle\"", "class.raised": "buttonStyle==\"raised\" && !disabled", "class.icon-link": "toThemeColor(color)==\"link\"", "class.cute-button-expandable": "withAriaExpandedIndicator", "class.disabled": "(_isAnchor || buttonStyle==\"icon\" || disabledInteractive) && disabled", "class.cute-button-disabled-interactive": "disabledInteractive", "class.cute-unthemed": "!color", "attr.tabindex": "_getTabIndex()", "attr.disabled": "_getDisabledAttribute()", "attr.aria-disabled": "_getAriaDisabled()", "attr.id": "id || null", "attr.aria-label": "ariaLabel || null" }, classAttribute: "cute-button" }, providers: [
             { provide: CUTE_BUTTON_BASE, useExisting: CuteButton }
-        ], exportAs: ["cuteButton"], 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], exportAs: ["cuteButton"], 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\" [class.cute-button-label__nowrap]=\"!wrapText\">\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;overflow:visible;box-shadow:none}.cute-button:not(.btn-close),.cute-anchor:not(.btn-close){box-sizing:border-box}.cute-button:has(>:nth-child(2)),.cute-anchor:has(>: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-button-label__nowrap,.cute-anchor .cute-button-label.cute-button-label__nowrap{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"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteButton, decorators: [{
             type: Component,
@@ -341,7 +485,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         '[class.icon-link]': 'toThemeColor(color)=="link"',
                         '[class.cute-button-expandable]': 'withAriaExpandedIndicator',
                         //'[class.focus-ring]': 'buttonStyle=="base" && hasClass("cdk-keyboard-focused")', // See: CuteButtonBase.ngDoCheck()
-                        '[class.nowrap]': 'nowrap',
                         '[class.disabled]': '(_isAnchor || buttonStyle=="icon" || disabledInteractive) && disabled',
                         '[class.cute-button-disabled-interactive]': 'disabledInteractive',
                         '[class.cute-unthemed]': '!color',
@@ -352,7 +495,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         '[attr.aria-label]': 'ariaLabel || null',
                     }, providers: [
                         { provide: CUTE_BUTTON_BASE, useExisting: CuteButton }
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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\" [class.cute-button-label__nowrap]=\"!wrapText\">\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;overflow:visible;box-shadow:none}.cute-button:not(.btn-close),.cute-anchor:not(.btn-close){box-sizing:border-box}.cute-button:has(>:nth-child(2)),.cute-anchor:has(>: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-button-label__nowrap,.cute-anchor .cute-button-label.cute-button-label__nowrap{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"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -364,97 +507,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * that can be found at http://www.apache.org/licenses/LICENSE-2.0
  */
 // Counter used to generate unique IDs.
-let uniqueIdCounter$1 = 0;
+let uniqueIdCounter = 0;
 /**
- * Group a series of buttons together on a single line or stack them in a vertical column.
+ * Injection token that can be used to reference instances of `CuteButtonToolbar`.
+ * It serves as an alternative token to the actual `CuteButtonToolbar` class which
+ * could cause unnecessary retention of the class and its component metadata.
  */
-class CuteButtonGroup extends CuteFocusableControl {
-    get buttonLargerBinding() { return this.magnitude == "larger"; }
-    get buttonLargeBinding() { return this.magnitude == "large"; }
-    get buttonSmallerBinding() { return this.magnitude == "smaller"; }
-    get buttonSmallBinding() { return this.magnitude == "small"; }
-    constructor() {
-        super();
-        /** Whether to place the nested buttons in the vertical direction. */
-        this.vertical = false;
-    }
-    generateId() {
-        return `button-group-${++uniqueIdCounter$1}`;
-    }
-    setDisabledState(newState, emitEvent) {
-        let res = super.setDisabledState(newState, emitEvent);
-        if (res && this._buttons) {
-            this._buttons.forEach(btn => {
-                btn.disabled = coerceBooleanProperty(newState);
-            });
-        }
-        return res;
-    }
-    ngAfterContentInit() {
-        super.ngAfterContentInit();
-        this._buttons?.forEach(b => {
-            b.defaultColor = this.color ?? "primary";
-            b.disabled = this.disabled;
-            if (b.buttonStyle == "base") {
-                b.inputButtonStyle = this.buttonStyle ?? "flat-button";
-            }
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteButtonGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.15", type: CuteButtonGroup, isStandalone: true, selector: "cute-button-group", inputs: { vertical: ["vertical", "vertical", booleanAttribute], magnitude: "magnitude", buttonStyle: "buttonStyle" }, host: { attributes: { "role": "group" }, properties: { "class": "\"btn-group\" +(vertical?\"-vertical\":\"\")", "attr.aria-label": "ariaLabel || null", "attr.aria-labelledby": "ariaLabelledby || null", "attr.aria-describedby": "ariaDescribedby || null", "id": "id || null", "class.cute-btn-group-xl": "this.buttonLargerBinding", "class.btn-group-lg": "this.buttonLargeBinding", "class.cute-btn-group-xs": "this.buttonSmallerBinding", "class.btn-group-sm": "this.buttonSmallBinding" }, classAttribute: "cute-button-group" }, queries: [{ propertyName: "_buttons", predicate: CUTE_BUTTON_BASE, descendants: true }], exportAs: ["cuteButtonGroup"], usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteButtonGroup, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "cute-button-group",
-                    exportAs: "cuteButtonGroup",
-                    host: {
-                        'role': 'group',
-                        'class': 'cute-button-group',
-                        '[class]': '"btn-group" +(vertical?"-vertical":"")',
-                        '[attr.aria-label]': 'ariaLabel || null',
-                        '[attr.aria-labelledby]': 'ariaLabelledby || null',
-                        '[attr.aria-describedby]': 'ariaDescribedby || null',
-                        '[id]': 'id || null'
-                    },
-                    standalone: true
-                }]
-        }], ctorParameters: () => [], propDecorators: { vertical: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], magnitude: [{
-                type: Input
-            }], buttonStyle: [{
-                type: Input
-            }], buttonLargerBinding: [{
-                type: HostBinding,
-                args: ["class.cute-btn-group-xl"]
-            }], buttonLargeBinding: [{
-                type: HostBinding,
-                args: ["class.btn-group-lg"]
-            }], buttonSmallerBinding: [{
-                type: HostBinding,
-                args: ["class.cute-btn-group-xs"]
-            }], buttonSmallBinding: [{
-                type: HostBinding,
-                args: ["class.btn-group-sm"]
-            }], _buttons: [{
-                type: ContentChildren,
-                args: [CUTE_BUTTON_BASE, { descendants: true }]
-            }] } });
-
+const CUTE_BUTTON_TOOLBAR = new InjectionToken('CuteButtonToolbar');
 /**
- * @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
+ * Combines sets of button groups into button toolbars for more complex components.
  */
-// Counter used to generate unique IDs.
-let uniqueIdCounter = 0;
 class CuteButtonToolbar extends CuteFocusableControl {
-    /** The gutter between buttons */
+    /** The gutter between button groups. */
     get gap() { return this._gap; }
     set gap(value) {
         const MAX_GAP = 5;
@@ -481,7 +545,7 @@ class CuteButtonToolbar extends CuteFocusableControl {
         return `button-toolbar-${++uniqueIdCounter}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteButtonToolbar, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.15", type: CuteButtonToolbar, isStandalone: true, selector: "cute-button-toolbar", inputs: { gap: ["gap", "gap", numberAttribute], magnitude: "magnitude" }, host: { attributes: { "role": "toolbar" }, properties: { "class": "\"gap-\"+gap", "attr.gap": "null", "attr.aria-label": "ariaLabel || null", "attr.aria-labelledby": "ariaLabelledby || null", "attr.aria-describedby": "ariaDescribedby || null", "id": "id || null" }, classAttribute: "btn-toolbar" }, exportAs: ["cuteButtonToolbar"], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.15", type: CuteButtonToolbar, isStandalone: true, selector: "cute-button-toolbar", inputs: { gap: ["gap", "gap", numberAttribute], magnitude: "magnitude" }, host: { attributes: { "role": "toolbar" }, properties: { "class": "\"gap-\"+gap", "attr.gap": "null", "attr.aria-label": "ariaLabel || null", "attr.aria-labelledby": "ariaLabelledby || null", "attr.aria-describedby": "ariaDescribedby || null", "id": "id || null" }, classAttribute: "cute-button-toolbar btn-toolbar" }, providers: [{ provide: CUTE_BUTTON_TOOLBAR, useExisting: CuteButtonToolbar }], exportAs: ["cuteButtonToolbar"], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteButtonToolbar, decorators: [{
             type: Directive,
@@ -489,15 +553,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     selector: "cute-button-toolbar",
                     exportAs: "cuteButtonToolbar",
                     host: {
-                        'role': 'toolbar',
-                        'class': 'btn-toolbar',
+                        'class': 'cute-button-toolbar btn-toolbar',
                         '[class]': '"gap-"+gap',
                         '[attr.gap]': 'null',
                         '[attr.aria-label]': 'ariaLabel || null',
                         '[attr.aria-labelledby]': 'ariaLabelledby || null',
                         '[attr.aria-describedby]': 'ariaDescribedby || null',
-                        '[id]': 'id || null'
+                        '[id]': 'id || null',
+                        'role': 'toolbar',
                     },
+                    providers: [{ provide: CUTE_BUTTON_TOOLBAR, useExisting: CuteButtonToolbar }],
                     standalone: true
                 }]
         }], ctorParameters: () => [], propDecorators: { gap: [{
@@ -542,5 +607,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CUTE_BUTTON_BASE, CUTE_BUTTON_CONFIG, CuteButton, CuteButtonBase, CuteButtonGroup, CuteButtonModule, CuteButtonToolbar };
+export { CUTE_BUTTON_BASE, CUTE_BUTTON_CONFIG, CUTE_BUTTON_GROUP, CUTE_BUTTON_TOOLBAR, CuteButton, CuteButtonBase, CuteButtonGroup, CuteButtonModule, CuteButtonToolbar };
 //# sourceMappingURL=cute-widgets-base-button.mjs.map