@cute-widgets/base 20.0.1

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

@@ -0,0 +1,546 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, NgZone, booleanAttribute, HostBinding, Input, ContentChildren, Directive, 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';
+import { RippleManager } from '@cute-widgets/base/core/ripple';
+import { Subject, fromEvent } from 'rxjs';
+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
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+/** Injection token that can be used to provide the default options the button component. */
+const CUTE_BUTTON_CONFIG = new InjectionToken('CUTE_BUTTON_CONFIG');
+/**
+ * Injection token that can be used to reference instances of `CuteButtonBase`.
+ * It serves as an alternative token to the actual `CuteButtonBase` class, which
+ * could cause unnecessary retention of the class and its component metadata.
+ */
+const CUTE_BUTTON_BASE = new InjectionToken('CuteButtonBase');
+class CuteButtonBase extends CuteFocusableControl {
+    /** Button's appearance style in the following format: `{style}-button` */
+    get inputButtonStyle() { return this._inputButtonStyle; }
+    set inputButtonStyle(value) {
+        this._inputButtonStyle = value || "base-button";
+        // Transform Angular Material's style
+        switch (this._inputButtonStyle) {
+            case "text":
+                this._inputButtonStyle = "base-button";
+                break;
+            case "elevated":
+                this._inputButtonStyle = "raised-button";
+                break;
+            case "outlined":
+                this._inputButtonStyle = "outline-button";
+                break;
+            case "filled":
+                this._inputButtonStyle = "flat-button";
+                break;
+            case "tonal":
+                this._inputButtonStyle = "flat-button";
+                break;
+        }
+        const dashPos = this._inputButtonStyle.lastIndexOf("-");
+        if (dashPos >= 0) {
+            // Format: {style}-button
+            this._buttonStyle = this._inputButtonStyle.substring(0, dashPos).trim().toLowerCase() || "base";
+        }
+        else {
+            this._buttonStyle = this._inputButtonStyle;
+        }
+    }
+    /** Whether to disable the ripple effect on button clicking */
+    get disableRipple() { return this._ripple.disabled; }
+    set disableRipple(value) { this._ripple.disabled = value; }
+    /**
+     * Natively disabled buttons prevent focus and any pointer events from reaching the button.
+     * In some scenarios, this might not be desirable, because it can prevent users from finding out
+     * why the button is disabled (e.g., via tooltip).
+     *
+     * Enabling this input will change the button so that it is styled to be disabled and will be
+     * marked as `aria-disabled`, but it will allow the button to receive events and focus.
+     *
+     * Note that by enabling this, you need to set the `tabindex` yourself if the button isn't
+     * meant to be tabbable, and you have to prevent the button action (e.g., form submissions).
+     */
+    get disabledInteractive() { return this._disabledInteractive; }
+    set disabledInteractive(value) { this._disabledInteractive = value; }
+    get classNames() {
+        let classes = "cute-" + this._inputButtonStyle; // e.g. `cute-outline-button`
+        if (this.color) {
+            classes += ["base", "close", "icon"].indexOf(this.buttonStyle) == -1
+                ? " btn-" + (this.buttonStyle == "outline" ? "outline-" : "") + toThemeColor(this.color)
+                : this.buttonStyle == "base"
+                    ? (" " + (this.color == "link" ? "btn-link" : toColorCssClass(this.color)))
+                    : "";
+        }
+        return classes;
+    }
+    /** Focus shadow color for `close-button` */
+    get _closeButtonShadowColor() {
+        return (this.color && this.buttonStyle == "close") ? "0 0 0 0.25rem rgba(var(--bs-" + this.color + "-rgb), 0.25)" : "";
+    }
+    get buttonLargestBinding() { return this.magnitude == "largest"; }
+    get buttonLargerBinding() { return this.magnitude == "larger"; }
+    get buttonLargeBinding() { return this.magnitude == "large"; }
+    get buttonSmallBinding() { return this.magnitude == "small"; }
+    get buttonSmallerBinding() { return this.magnitude == "smaller"; }
+    get buttonSmallestBinding() { return this.magnitude == "smallest"; }
+    get iconButtonColorBinding() {
+        return this.buttonStyle == "icon" ? "var(" + (this.color ? this.bsColorVarName : "--bs-body-color-rgb") + ")" : "";
+    }
+    get baseButtonColorBinding() {
+        return this.buttonStyle == "base" ? "var(" + (this.color ? this.bsColorVarName : "--bs-body-color-rgb") + ")" : "";
+    }
+    /** Returns button style name. */
+    get buttonStyle() {
+        return this._buttonStyle;
+    }
+    get bsColorVarName() {
+        if (this.color) {
+            if (this.color == "link") {
+                return `--bs-${this.color}-color-rgb`;
+            }
+            return `--bs-${this.color}-rgb`;
+        }
+        return "";
+    }
+    constructor() {
+        super();
+        this._destroyed$ = new Subject();
+        this._ngZone = inject(NgZone);
+        this._isAnchor = false;
+        this._inputButtonStyle = "base-button";
+        this._buttonStyle = "base";
+        /** Whether to disable text wrapping */
+        this.nowrap = 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._ripple = RippleManager.getInstance(this._nativeElement);
+        this._isAnchor = (this._nativeElement.tagName == "A");
+    }
+    generateId() {
+        return ""; // `cute-button-${++nextUniqueId}`;
+    }
+    _getTabIndex() {
+        if (this._isAnchor) {
+            return this.disabled && !this.disabledInteractive ? -1 : this.tabIndex;
+        }
+        return this.tabIndex;
+    }
+    _setupAsAnchor() {
+        this._cleanupClick = this._ngZone.runOutsideAngular(() => this._renderer.listen(this._nativeElement, 'click', (event) => {
+            if (this.disabled) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+            }
+        }));
+    }
+    setDisabledState(newState) {
+        if (this._isAnchor) {
+            if (newState) {
+                this._savedTabIndex = this.tabIndex;
+                this.tabIndex = -1;
+            }
+            else {
+                this.tabIndex = this._savedTabIndex;
+            }
+        }
+        return super.setDisabledState(newState);
+    }
+    _getAriaDisabled() {
+        if (this.ariaDisabled != null) {
+            return this.ariaDisabled;
+        }
+        if (this._isAnchor) {
+            return this.disabled || null;
+        }
+        return this.disabled && this.disabledInteractive ? true : null;
+    }
+    _getDisabledAttribute() {
+        //return this.disabledInteractive || !this.disabled ? null : true;
+        return this.disabled ? true : null;
+    }
+    _haltDisabledEvents(event) {
+        // A disabled button shouldn't apply any actions
+        if (this.disabled && (this.disabledInteractive || this._isAnchor)) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }
+    ;
+    /** Whether to apply a `focus-ring` css-class to the button when it focused via keyboard interaction */
+    get displayFocusRing() {
+        return this.buttonStyle == "base" && this.hasClass("cdk-keyboard-focused");
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this._focusMonitor.monitor(this._elementRef, true);
+        ["mousedown", "mouseup", "click"].forEach((type) => {
+            fromEvent(this._nativeElement, type, { capture: true })
+                .pipe(takeUntil(this._destroyed$))
+                .subscribe((ev) => this._onMouseEvent(ev));
+        });
+    }
+    ngAfterContentInit() {
+        super.ngAfterContentInit();
+        if (this._icons && this.buttonStyle == "icon") {
+            this._icons.forEach(icon => { icon.defaultColor = this.color; });
+        }
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        // Some internal tests depend on the timing of this,
+        // otherwise we could bind it in the constructor.
+        if (this._isAnchor) {
+            this._setupAsAnchor();
+        }
+    }
+    ngDoCheck() {
+        // This line was added due to "Expression Changed After Checked..." error raised if we place it in the @HostBinding
+        this.toggleClass("focus-ring", this.displayFocusRing);
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._cleanupClick?.();
+        this._ripple.stop();
+        this._destroyed$.next();
+        this._destroyed$.complete();
+    }
+    /** mouse events handler */
+    _onMouseEvent(event) {
+        this._haltDisabledEvents(event);
+        if (!event.defaultPrevented && event.type == "mousedown") {
+            this._launchRipple(event);
+        }
+    }
+    _launchRipple(event) {
+        if (this._ripple && !this._ripple.disabled) {
+            const options = {};
+            if (this.buttonStyle == "icon") {
+                options.centered = true;
+                options.color = "rgba(var(--cute-icon-button-color), 0.25)";
+            }
+            this._ripple.launch(event, options);
+        }
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteButtonBase, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        class: 'btn',
+                        '[style.--bs-focus-ring-color]': 'color? "rgba(var("+bsColorVarName+"), var(--bs-focus-ring-opacity))" : "var(--bs-border-color-translucent)"',
+                        '(keydown)': '_haltDisabledEvents($event)',
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { _icons: [{
+                type: ContentChildren,
+                args: [CuteIcon]
+            }], inputButtonStyle: [{
+                type: Input,
+                args: ["cuteButton"]
+            }], magnitude: [{
+                type: Input
+            }], nowrap: [{
+                type: Input
+            }], disableRipple: [{
+                type: Input
+            }], ariaDisabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute, alias: 'aria-disabled' }]
+            }], withAriaExpandedIndicator: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], disabledInteractive: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], visuallyHiddenLabel: [{
+                type: Input
+            }], classNames: [{
+                type: HostBinding,
+                args: ["class"]
+            }], _closeButtonShadowColor: [{
+                type: HostBinding,
+                args: ["style.--bs-btn-close-focus-shadow"]
+            }], buttonLargestBinding: [{
+                type: HostBinding,
+                args: ["class.cute-btn-xxl"]
+            }], buttonLargerBinding: [{
+                type: HostBinding,
+                args: ["class.cute-btn-xl"]
+            }], buttonLargeBinding: [{
+                type: HostBinding,
+                args: ["class.btn-lg"]
+            }], buttonSmallBinding: [{
+                type: HostBinding,
+                args: ["class.btn-sm"]
+            }], buttonSmallerBinding: [{
+                type: HostBinding,
+                args: ["class.cute-btn-xs"]
+            }], buttonSmallestBinding: [{
+                type: HostBinding,
+                args: ["class.cute-btn-xxs"]
+            }], iconButtonColorBinding: [{
+                type: HostBinding,
+                args: ["style.--cute-icon-button-color-rgb"]
+            }], baseButtonColorBinding: [{
+                type: HostBinding,
+                args: ["style.--cute-base-button-color-rgb"]
+            }] } });
+
+/**
+ * @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
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+class CuteButton extends CuteButtonBase {
+    constructor() {
+        super();
+        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: [
+            { 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteButton, decorators: [{
+            type: Component,
+            args: [{ selector: `button[cuteButton],
+             button[cute-button],
+             a[cuteButton],
+             a[cute-button],
+  `, exportAs: "cuteButton", imports: [CommonModule], host: {
+                        'class': 'cute-button',
+                        '[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.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',
+                        '[attr.tabindex]': '_getTabIndex()', //'disabled  ? -1 : tabIndex',
+                        '[attr.disabled]': '_getDisabledAttribute()',
+                        '[attr.aria-disabled]': '_getAriaDisabled()',
+                        '[attr.id]': 'id || null',
+                        '[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"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * @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;
+/**
+ * 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;
+    }
+    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 }]
+            }] } });
+
+/**
+ * @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 = 0;
+class CuteButtonToolbar extends CuteFocusableControl {
+    /** The gutter between buttons */
+    get gap() { return this._gap; }
+    set gap(value) {
+        const MAX_GAP = 5;
+        value = Math.round(value);
+        if (value >= 0 && value <= MAX_GAP) {
+            this._gap = value;
+        }
+        else if (value > MAX_GAP) {
+            this._gap = MAX_GAP;
+        }
+        else {
+            this._gap = 0;
+        }
+    }
+    /** Child buttons. */
+    //@ContentChildren(CUTE_BUTTON_BASE, {descendants: true})
+    //_buttons: QueryList<ButtonBase> | undefined;
+    constructor() {
+        super();
+        //@Input({transform: booleanAttribute}) vertical: boolean = false;
+        this._gap = 0;
+    }
+    generateId() {
+        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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteButtonToolbar, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "cute-button-toolbar",
+                    exportAs: "cuteButtonToolbar",
+                    host: {
+                        'role': 'toolbar',
+                        'class': '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'
+                    },
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { gap: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], magnitude: [{
+                type: Input
+            }] } });
+
+/**
+ * @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 = [
+    CuteButton,
+    CuteButtonGroup,
+    CuteButtonToolbar,
+];
+class CuteButtonModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: CuteButtonModule, imports: [CommonModule, CuteButton,
+            CuteButtonGroup,
+            CuteButtonToolbar], exports: [CuteButton,
+            CuteButtonGroup,
+            CuteButtonToolbar] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteButtonModule, imports: [CommonModule, CuteButton] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ...TYPES],
+                    exports: TYPES,
+                    declarations: [],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CUTE_BUTTON_BASE, CUTE_BUTTON_CONFIG, CuteButton, CuteButtonBase, CuteButtonGroup, CuteButtonModule, CuteButtonToolbar };
+//# sourceMappingURL=cute-widgets-base-button.mjs.map