@hermes-ui/angular 0.1.4

package/fesm2022/hermes-ui-angular-button.mjs

@@ -0,0 +1,719 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Input, ViewChild, Output, Optional, SkipSelf, Component, ContentChildren, NgModule } from '@angular/core';
+import * as i6 from '@hermes-ui/angular/icon';
+import { HermesIcon, ClarityIcons, ellipsisHorizontalIcon } from '@hermes-ui/angular/icon';
+import * as i5 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@hermes-ui/angular/popover/common';
+import { HermesPopoverType, HermesPopoverPosition, DROPDOWN_POSITIONS, HermesPopoverHostDirective, HermesPopoverModuleNext } from '@hermes-ui/angular/popover/common';
+import * as i3 from '@hermes-ui/angular/utils';
+import { uniqueIdFactory, HermesLoadingState, LoadingListener, Linkers, HermesDestroyService, FOCUS_SERVICE_PROVIDER } from '@hermes-ui/angular/utils';
+import * as i1 from '@angular/router';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { trigger, transition, style, animate, keyframes } from '@angular/animations';
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class ButtonInGroupService {
+    constructor() {
+        this._changes = new Subject();
+    }
+    get changes() {
+        return this._changes.asObservable();
+    }
+    updateButtonGroup(button) {
+        this._changes.next(button);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ButtonInGroupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ButtonInGroupService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ButtonInGroupService, decorators: [{
+            type: Injectable
+        }] });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class HermesButton {
+    constructor(routerLinkActive, buttonInGroupService) {
+        this.routerLinkActive = routerLinkActive;
+        this.buttonInGroupService = buttonInGroupService;
+        this._click = new EventEmitter(false);
+        this._inMenu = false;
+        this._enableService = false;
+        this._classNames = 'btn';
+        this._name = null;
+        this._type = null;
+        this._disabled = null;
+        this._id = uniqueIdFactory();
+    }
+    get inMenu() {
+        return this._inMenu;
+    }
+    set inMenu(value) {
+        value = !!value;
+        if (this._inMenu !== value) {
+            this._inMenu = value;
+            // We check if the service flag is enabled
+            // and if the service exists because the service is optional
+            if (this._enableService && this.buttonInGroupService) {
+                this.buttonInGroupService.updateButtonGroup(this);
+            }
+        }
+    }
+    get classNames() {
+        return this.routerLinkActive?.isActive ? `${this._classNames} ${this.routerLinkActiveClasses}` : this._classNames;
+    }
+    set classNames(value) {
+        if (typeof value === 'string') {
+            const classNames = value.split(' ');
+            if (classNames.indexOf('btn') === -1) {
+                classNames.push('btn');
+            }
+            this._classNames = classNames.join(' ');
+        }
+    }
+    get name() {
+        return this._name;
+    }
+    set name(value) {
+        if (typeof value === 'string') {
+            this._name = value;
+        }
+    }
+    get type() {
+        return this._type;
+    }
+    set type(value) {
+        if (typeof value === 'string') {
+            this._type = value;
+        }
+    }
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        if (typeof value === 'string') {
+            this._id = value;
+        }
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        if (value !== null && value !== false) {
+            this._disabled = '';
+        }
+        else {
+            this._disabled = null;
+        }
+    }
+    get role() {
+        return this.inMenu ? 'menuitem' : null;
+    }
+    ngAfterViewInit() {
+        this._enableService = true;
+    }
+    loadingStateChange(state) {
+        this.loading = state === HermesLoadingState.LOADING;
+    }
+    emitClick() {
+        this._click.emit(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesButton, deps: [{ token: i1.RouterLinkActive, optional: true }, { token: ButtonInGroupService, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: HermesButton, isStandalone: false, selector: "hermes-button", inputs: { routerLinkActiveClasses: ["routerLinkActive", "routerLinkActiveClasses"], inMenu: ["hermesInMenu", "inMenu"], classNames: ["class", "classNames"], name: "name", type: "type", id: "id", disabled: "disabled" }, outputs: { _click: "click" }, providers: [{ provide: LoadingListener, useExisting: HermesButton }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["buttonProjectedRef"], descendants: true, static: true }], ngImport: i0, template: `
+    <ng-template #buttonProjectedRef>
+      <button
+        [class]="classNames"
+        (click)="emitClick()"
+        [attr.type]="type"
+        [attr.name]="name"
+        [attr.disabled]="disabled"
+        [attr.role]="role"
+        [attr.id]="id"
+      >
+        @if (loading) {
+          <span class="spinner spinner-inline"></span>
+        }
+        <ng-content></ng-content>
+      </button>
+    </ng-template>
+  `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesButton, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hermes-button',
+                    template: `
+    <ng-template #buttonProjectedRef>
+      <button
+        [class]="classNames"
+        (click)="emitClick()"
+        [attr.type]="type"
+        [attr.name]="name"
+        [attr.disabled]="disabled"
+        [attr.role]="role"
+        [attr.id]="id"
+      >
+        @if (loading) {
+          <span class="spinner spinner-inline"></span>
+        }
+        <ng-content></ng-content>
+      </button>
+    </ng-template>
+  `,
+                    providers: [{ provide: LoadingListener, useExisting: HermesButton }],
+                    standalone: false,
+                }]
+        }], ctorParameters: () => [{ type: i1.RouterLinkActive, decorators: [{
+                    type: Optional
+                }] }, { type: ButtonInGroupService, decorators: [{
+                    type: SkipSelf
+                }, {
+                    type: Optional
+                }] }], propDecorators: { _click: [{
+                type: Output,
+                args: ['click']
+            }], routerLinkActiveClasses: [{
+                type: Input,
+                args: ['routerLinkActive']
+            }], templateRef: [{
+                type: ViewChild,
+                args: ['buttonProjectedRef', { static: true }]
+            }], inMenu: [{
+                type: Input,
+                args: ['hermesInMenu']
+            }], classNames: [{
+                type: Input,
+                args: ['class']
+            }], name: [{
+                type: Input,
+                args: ['name']
+            }], type: [{
+                type: Input,
+                args: ['type']
+            }], id: [{
+                type: Input,
+                args: ['id']
+            }], disabled: [{
+                type: Input,
+                args: ['disabled']
+            }] } });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+var InitialFocus;
+(function (InitialFocus) {
+    InitialFocus["FIRST_ITEM"] = "first";
+    InitialFocus["LAST_ITEM"] = "last";
+})(InitialFocus || (InitialFocus = {}));
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class ButtonGroupFocusHandler {
+    constructor(focusService, popoverService, renderer) {
+        this.focusService = focusService;
+        this.popoverService = popoverService;
+        this.renderer = renderer;
+        this.initialFocus = InitialFocus.FIRST_ITEM;
+        this._unlistenFuncs = [];
+    }
+    ngOnDestroy() {
+        this._unlistenFuncs.forEach((unlisten) => unlisten());
+        this.focusService.detachListeners(this.menu);
+    }
+    initialize({ menu, menuToggle }) {
+        this.menu = menu;
+        this.menuToggle = menuToggle;
+        this.focusService.registerContainer(this.menu);
+        this.listenToKeys();
+        this.linkButtons();
+        switch (this.initialFocus) {
+            case InitialFocus.LAST_ITEM:
+                this.focusLastItem();
+                break;
+            default:
+                this.focusFirstItem();
+                break;
+        }
+    }
+    resetButtonsFocus() {
+        this.buttons.forEach(button => {
+            button.blur();
+        });
+    }
+    listenToKeys() {
+        this._unlistenFuncs.push(this.renderer.listen(this.menu, 'keydown.shift.tab', event => this.closeMenu(event, false)));
+        this._unlistenFuncs.push(this.renderer.listen(this.menu, 'keydown.tab', event => this.closeMenu(event, true)));
+    }
+    closeMenu(event, focusBackOnToggle) {
+        this.popoverService.toggleWithEvent(event);
+        if (focusBackOnToggle) {
+            this.menuToggle.focus();
+        }
+        this.resetButtonsFocus();
+    }
+    linkButtons() {
+        const buttonElements = Array.from(this.menu.children);
+        this.buttons = buttonElements.map(buttonElement => {
+            this._unlistenFuncs.push(this.renderer.listen(buttonElement, 'click', event => this.closeMenu(event, true)));
+            return {
+                id: buttonElement.id,
+                value: buttonElement,
+                focus: () => {
+                    buttonElement.setAttribute('tabindex', '0');
+                    buttonElement.focus();
+                },
+                blur: () => {
+                    buttonElement.setAttribute('tabindex', '-1');
+                    buttonElement.blur();
+                },
+            };
+        });
+        this.resetButtonsFocus();
+        Linkers.linkVertical(this.buttons);
+    }
+    focusFirstItem() {
+        if (this.buttons.length) {
+            this.focusService.moveTo(this.buttons[0]);
+        }
+        this.initialFocus = InitialFocus.FIRST_ITEM;
+    }
+    focusLastItem() {
+        if (this.buttons.length) {
+            this.focusService.moveTo(this.buttons[this.buttons.length - 1]);
+        }
+        this.initialFocus = InitialFocus.FIRST_ITEM;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ButtonGroupFocusHandler, deps: [{ token: i3.FocusService }, { token: i2.HermesPopoverService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ButtonGroupFocusHandler }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ButtonGroupFocusHandler, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i3.FocusService }, { type: i2.HermesPopoverService }, { type: i0.Renderer2 }] });
+const BUTTON_GROUP_FOCUS_HANDLER_PROVIDER = {
+    provide: ButtonGroupFocusHandler,
+};
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class HermesButtonGroup {
+    constructor(buttonGroupNewService, popoverService, commonStrings, destroy$, focusHandler) {
+        this.buttonGroupNewService = buttonGroupNewService;
+        this.popoverService = popoverService;
+        this.commonStrings = commonStrings;
+        this.destroy$ = destroy$;
+        this.focusHandler = focusHandler;
+        this.hermesToggleButtonAriaLabel = this.commonStrings.keys.rowActions;
+        this.popoverId = uniqueIdFactory();
+        this.InitialFocus = InitialFocus;
+        this.inlineButtons = [];
+        this.menuButtons = [];
+        this.popoverType = HermesPopoverType.DROPDOWN;
+        this._menuPosition = HermesPopoverPosition.BOTTOM_LEFT;
+    }
+    get menuPosition() {
+        return this._menuPosition;
+    }
+    set menuPosition(pos) {
+        if (!pos) {
+            return;
+        }
+        const posIndex = DROPDOWN_POSITIONS.indexOf(pos);
+        if (posIndex === -1) {
+            return;
+        }
+        this._menuPosition = DROPDOWN_POSITIONS[posIndex];
+    }
+    get open() {
+        return this.popoverService.open;
+    }
+    /**
+     * 1. Initializes the initial Button Group View
+     * 2. Subscribes to changes on the ContentChildren
+     *    in case the user content projection changes
+     */
+    ngAfterContentInit() {
+        this.initializeButtons();
+        this.buttonGroupNewService.changes.pipe(takeUntil(this.destroy$)).subscribe(button => this.rearrangeButton(button));
+        this.buttons.changes.subscribe(() => {
+            this.initializeButtons();
+        });
+    }
+    ngAfterViewInit() {
+        this.handleFocusOnMenuOpen();
+    }
+    /**
+     * Moves the button into the other ViewContainer
+     * when an update is received.
+     *
+     * @param button
+     */
+    rearrangeButton(button) {
+        let fromView;
+        let toView;
+        if (button.inMenu) {
+            fromView = this.inlineButtons;
+            toView = this.menuButtons;
+        }
+        else {
+            fromView = this.menuButtons;
+            toView = this.inlineButtons;
+        }
+        const index = fromView.indexOf(button);
+        if (index > -1) {
+            fromView.splice(index, 1);
+            const moveIndex = this.getMoveIndex(button);
+            if (moveIndex <= toView.length) {
+                toView.splice(moveIndex, 0, button);
+            }
+        }
+    }
+    openMenu(event, initialFocus) {
+        this.focusHandler.initialFocus = initialFocus;
+        if (!this.popoverService.open) {
+            this.popoverService.toggleWithEvent(event);
+        }
+    }
+    /**
+     * Author: Eudes
+     *
+     * Finds the order of a button w.r.t other buttons
+     *
+     * @param buttonToMove
+     * @returns
+     */
+    getMoveIndex(buttonToMove) {
+        const tempArr = this.buttons.filter(button => button.inMenu === buttonToMove.inMenu);
+        return tempArr.indexOf(buttonToMove);
+    }
+    initializeButtons() {
+        const tempInlineButtons = [];
+        const tempInMenuButtons = [];
+        this.buttons.forEach(button => {
+            if (button.inMenu) {
+                tempInMenuButtons.push(button);
+            }
+            else {
+                tempInlineButtons.push(button);
+            }
+        });
+        this.inlineButtons = tempInlineButtons;
+        this.menuButtons = tempInMenuButtons;
+    }
+    handleFocusOnMenuOpen() {
+        this.popoverService.popoverVisible.pipe(takeUntil(this.destroy$)).subscribe(visible => {
+            // `menu` sits on the element carrying *hermesPopoverContent, so the query only
+            // resolves once that embedded view has been created and change detection has
+            // refreshed it. popoverVisible fires from a setTimeout inside showOverlay(), which
+            // is normally late enough - but not guaranteed to be, so dereferencing either
+            // ElementRef unguarded can throw and abort this handler.
+            if (!visible || !this.menu || !this.menuToggle) {
+                return;
+            }
+            this.focusHandler.initialize({
+                menu: this.menu.nativeElement,
+                menuToggle: this.menuToggle.nativeElement,
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesButtonGroup, deps: [{ token: ButtonInGroupService }, { token: i2.HermesPopoverService }, { token: i3.HermesCommonStringsService }, { token: i3.HermesDestroyService }, { token: ButtonGroupFocusHandler }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: HermesButtonGroup, isStandalone: false, selector: "hermes-button-group", inputs: { hermesToggleButtonAriaLabel: "hermesToggleButtonAriaLabel", menuPosition: ["hermesMenuPosition", "menuPosition"] }, host: { properties: { "class.btn-group": "true" } }, providers: [ButtonInGroupService, HermesDestroyService, BUTTON_GROUP_FOCUS_HANDLER_PROVIDER, FOCUS_SERVICE_PROVIDER], queries: [{ propertyName: "buttons", predicate: HermesButton }], viewQueries: [{ propertyName: "menuToggle", first: true, predicate: ["menuToggle"], descendants: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true }], hostDirectives: [{ directive: i2.HermesPopoverHostDirective }], ngImport: i0, template: "<!--\r\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\r\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\r\n  ~ This software is released under MIT license.\r\n  ~ The full license information can be found in LICENSE in the root directory of this project.\r\n  -->\r\n\r\n@for (inlineButton of inlineButtons; track inlineButton) {\r\n<ng-template [ngTemplateOutlet]=\"inlineButton.templateRef\"></ng-template>\r\n} @if (menuButtons.length > 0) {\r\n<div class=\"btn-group-overflow open\" [ngClass]=\"menuPosition\">\r\n  <button\r\n    #menuToggle\r\n    class=\"btn dropdown-toggle\"\r\n    hermesPopoverOrigin\r\n    hermesPopoverOpenCloseButton\r\n    (keydown.arrowup)=\"openMenu($event, InitialFocus.LAST_ITEM)\"\r\n    (keydown.arrowdown)=\"openMenu($event, InitialFocus.FIRST_ITEM)\"\r\n    [attr.aria-controls]=\"popoverId\"\r\n    [attr.aria-expanded]=\"open\"\r\n    [attr.aria-label]=\"hermesToggleButtonAriaLabel\"\r\n  >\r\n    <hermes-icon shape=\"ellipsis-horizontal\" [attr.title]=\"commonStrings.keys.more\"></hermes-icon>\r\n  </button>\r\n  <div\r\n    #menu\r\n    role=\"menu\"\r\n    class=\"dropdown-menu hermes-button-group-menu\"\r\n    [id]=\"popoverId\"\r\n    [attr.id]=\"popoverId\"\r\n    [attr.aria-hidden]=\"!open\"\r\n    *hermesPopoverContent=\"open; at menuPosition; type: popoverType; outsideClickToClose: true; scrollToClose: true\"\r\n  >\r\n    @for (menuButton of menuButtons; track menuButton) {\r\n    <ng-template [ngTemplateOutlet]=\"menuButton.templateRef\"></ng-template>\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.HermesIcon, selector: "hermes-icon, hermes-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i2.HermesPopoverOrigin, selector: "[hermesPopoverOrigin]" }, { kind: "directive", type: i2.HermesPopoverOpenCloseButton, selector: "[hermesPopoverOpenCloseButton]", outputs: ["hermesPopoverOpenCloseChange"] }, { kind: "directive", type: i2.HermesPopoverContent, selector: "[hermesPopoverContent]", inputs: ["hermesPopoverContent", "hermesPopoverContentAt", "hermesPopoverContentAvailablePositions", "hermesPopoverContentType", "hermesPopoverContentOutsideClickToClose", "hermesPopoverContentScrollToClose", "hermesPopoverContentOrigin"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesButtonGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'hermes-button-group', providers: [ButtonInGroupService, HermesDestroyService, BUTTON_GROUP_FOCUS_HANDLER_PROVIDER, FOCUS_SERVICE_PROVIDER], hostDirectives: [HermesPopoverHostDirective], host: { '[class.btn-group]': 'true' }, standalone: false, template: "<!--\r\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\r\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\r\n  ~ This software is released under MIT license.\r\n  ~ The full license information can be found in LICENSE in the root directory of this project.\r\n  -->\r\n\r\n@for (inlineButton of inlineButtons; track inlineButton) {\r\n<ng-template [ngTemplateOutlet]=\"inlineButton.templateRef\"></ng-template>\r\n} @if (menuButtons.length > 0) {\r\n<div class=\"btn-group-overflow open\" [ngClass]=\"menuPosition\">\r\n  <button\r\n    #menuToggle\r\n    class=\"btn dropdown-toggle\"\r\n    hermesPopoverOrigin\r\n    hermesPopoverOpenCloseButton\r\n    (keydown.arrowup)=\"openMenu($event, InitialFocus.LAST_ITEM)\"\r\n    (keydown.arrowdown)=\"openMenu($event, InitialFocus.FIRST_ITEM)\"\r\n    [attr.aria-controls]=\"popoverId\"\r\n    [attr.aria-expanded]=\"open\"\r\n    [attr.aria-label]=\"hermesToggleButtonAriaLabel\"\r\n  >\r\n    <hermes-icon shape=\"ellipsis-horizontal\" [attr.title]=\"commonStrings.keys.more\"></hermes-icon>\r\n  </button>\r\n  <div\r\n    #menu\r\n    role=\"menu\"\r\n    class=\"dropdown-menu hermes-button-group-menu\"\r\n    [id]=\"popoverId\"\r\n    [attr.id]=\"popoverId\"\r\n    [attr.aria-hidden]=\"!open\"\r\n    *hermesPopoverContent=\"open; at menuPosition; type: popoverType; outsideClickToClose: true; scrollToClose: true\"\r\n  >\r\n    @for (menuButton of menuButtons; track menuButton) {\r\n    <ng-template [ngTemplateOutlet]=\"menuButton.templateRef\"></ng-template>\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n" }]
+        }], ctorParameters: () => [{ type: ButtonInGroupService }, { type: i2.HermesPopoverService }, { type: i3.HermesCommonStringsService }, { type: i3.HermesDestroyService }, { type: ButtonGroupFocusHandler }], propDecorators: { hermesToggleButtonAriaLabel: [{
+                type: Input,
+                args: ['hermesToggleButtonAriaLabel']
+            }], menuToggle: [{
+                type: ViewChild,
+                args: ['menuToggle']
+            }], menu: [{
+                type: ViewChild,
+                args: ['menu']
+            }], buttons: [{
+                type: ContentChildren,
+                args: [HermesButton]
+            }], menuPosition: [{
+                type: Input,
+                args: ['hermesMenuPosition']
+            }] } });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+const HERMES_BUTTON_GROUP_DIRECTIVES = [HermesButton, HermesButtonGroup];
+class HermesButtonGroupModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.22", ngImport: i0, type: HermesButtonGroupModule, declarations: [HermesButton, HermesButtonGroup], imports: [CommonModule, HermesIcon, HermesPopoverModuleNext], exports: [HermesButton, HermesButtonGroup] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesButtonGroupModule, imports: [CommonModule, HermesIcon, HermesPopoverModuleNext] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesButtonGroupModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, HermesIcon, HermesPopoverModuleNext],
+                    declarations: [HERMES_BUTTON_GROUP_DIRECTIVES],
+                    exports: [HERMES_BUTTON_GROUP_DIRECTIVES],
+                }]
+        }] });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+// minimum width to fit loading spinner
+const MIN_BUTTON_WIDTH = 42;
+class HermesLoadingButton {
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+        this.hermesLoadingChange = new EventEmitter(false);
+        this.buttonState = HermesLoadingState;
+        this.state = HermesLoadingState.DEFAULT;
+    }
+    loadingStateChange(state) {
+        if (state === this.state) {
+            return;
+        }
+        this.state = state;
+        switch (state) {
+            case HermesLoadingState.DEFAULT:
+                this.renderer.removeStyle(this.el.nativeElement, 'width');
+                this.renderer.removeStyle(this.el.nativeElement, 'transform'); // for chromium render bug see issue https://github.com/vmware/clarity/issues/2700
+                if (!this.disabled) {
+                    this.renderer.removeAttribute(this.el.nativeElement, 'disabled');
+                }
+                break;
+            case HermesLoadingState.LOADING:
+                this.setExplicitButtonWidth();
+                this.renderer.setStyle(this.el.nativeElement, 'transform', 'translatez(0)'); // for chromium render bug see issue https://github.com/vmware/clarity/issues/2700
+                this.renderer.setAttribute(this.el.nativeElement, 'disabled', '');
+                break;
+            case HermesLoadingState.SUCCESS:
+                this.setExplicitButtonWidth();
+                break;
+            case HermesLoadingState.ERROR:
+                this.loadingStateChange(HermesLoadingState.DEFAULT);
+                break;
+            default:
+                break;
+        }
+        this.hermesLoadingChange.emit(state);
+    }
+    setExplicitButtonWidth() {
+        if (this.el.nativeElement && this.el.nativeElement.getBoundingClientRect) {
+            const boundingClientRect = this.el.nativeElement.getBoundingClientRect();
+            const width = Math.max(MIN_BUTTON_WIDTH, boundingClientRect.width);
+            this.renderer.setStyle(this.el.nativeElement, 'width', `${width}px`);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesLoadingButton, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: HermesLoadingButton, isStandalone: false, selector: "button[hermesLoading]", inputs: { disabled: "disabled" }, outputs: { hermesLoadingChange: "hermesLoadingChange" }, host: { properties: { "attr.disabled": "disabled? '' : null" } }, providers: [{ provide: LoadingListener, useExisting: HermesLoadingButton }], ngImport: i0, template: `
+    <span @parent>
+      @switch (state) {
+        @case (buttonState.LOADING) {
+          <span @spinner class="spinner spinner-inline"></span>
+        }
+        @case (buttonState.SUCCESS) {
+          <span
+            @validated
+            (@validated.done)="this.loadingStateChange(this.buttonState.DEFAULT)"
+            class="spinner spinner-inline spinner-check"
+          ></span>
+        }
+        @case (buttonState.DEFAULT) {
+          <span @defaultButton class="hermes-loading-btn-content">
+            <ng-content></ng-content>
+          </span>
+        }
+      }
+    </span>
+  `, isInline: true, animations: [
+            trigger('parent', [
+                // Skip :enter animation on first render.
+                // The button text/content should only be faded when transitioning to or from a non-default state.
+                transition(':enter', []),
+            ]),
+            trigger('defaultButton', [
+                transition(':enter', [style({ opacity: 0 }), animate('200ms 100ms ease-in', style({ opacity: 1 }))]),
+                // TODO: see if we can get leave animation to work before spinner's enter animation
+                transition(':leave', [style({ opacity: 0 })]),
+            ]),
+            trigger('spinner', [
+                transition(':enter', [style({ opacity: 0 }), animate('200ms 100ms ease-in', style({ opacity: 1 }))]),
+                transition(':leave', [style({ opacity: 1 }), animate('100ms ease-out', style({ opacity: 0 }))]),
+            ]),
+            trigger('validated', [
+                transition(':enter', [
+                    animate('600ms', keyframes([
+                        style({ transform: 'scale(0,0)', offset: 0 }),
+                        style({ opacity: 1, offset: 0.2 }),
+                        style({ transform: 'scale(1.2,1.2)', offset: 0.4 }),
+                        style({ transform: 'scale(.9,.9)', offset: 0.6 }),
+                        style({ transform: 'scale(1,1)', offset: 1 }),
+                    ])),
+                ]),
+                transition(':leave', [style({ opacity: 1 }), animate('100ms ease-out', style({ opacity: 0 }))]),
+            ]),
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesLoadingButton, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[hermesLoading]',
+                    template: `
+    <span @parent>
+      @switch (state) {
+        @case (buttonState.LOADING) {
+          <span @spinner class="spinner spinner-inline"></span>
+        }
+        @case (buttonState.SUCCESS) {
+          <span
+            @validated
+            (@validated.done)="this.loadingStateChange(this.buttonState.DEFAULT)"
+            class="spinner spinner-inline spinner-check"
+          ></span>
+        }
+        @case (buttonState.DEFAULT) {
+          <span @defaultButton class="hermes-loading-btn-content">
+            <ng-content></ng-content>
+          </span>
+        }
+      }
+    </span>
+  `,
+                    providers: [{ provide: LoadingListener, useExisting: HermesLoadingButton }],
+                    animations: [
+                        trigger('parent', [
+                            // Skip :enter animation on first render.
+                            // The button text/content should only be faded when transitioning to or from a non-default state.
+                            transition(':enter', []),
+                        ]),
+                        trigger('defaultButton', [
+                            transition(':enter', [style({ opacity: 0 }), animate('200ms 100ms ease-in', style({ opacity: 1 }))]),
+                            // TODO: see if we can get leave animation to work before spinner's enter animation
+                            transition(':leave', [style({ opacity: 0 })]),
+                        ]),
+                        trigger('spinner', [
+                            transition(':enter', [style({ opacity: 0 }), animate('200ms 100ms ease-in', style({ opacity: 1 }))]),
+                            transition(':leave', [style({ opacity: 1 }), animate('100ms ease-out', style({ opacity: 0 }))]),
+                        ]),
+                        trigger('validated', [
+                            transition(':enter', [
+                                animate('600ms', keyframes([
+                                    style({ transform: 'scale(0,0)', offset: 0 }),
+                                    style({ opacity: 1, offset: 0.2 }),
+                                    style({ transform: 'scale(1.2,1.2)', offset: 0.4 }),
+                                    style({ transform: 'scale(.9,.9)', offset: 0.6 }),
+                                    style({ transform: 'scale(1,1)', offset: 1 }),
+                                ])),
+                            ]),
+                            transition(':leave', [style({ opacity: 1 }), animate('100ms ease-out', style({ opacity: 0 }))]),
+                        ]),
+                    ],
+                    host: { '[attr.disabled]': "disabled? '' : null" },
+                    standalone: false,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { disabled: [{
+                type: Input,
+                args: ['disabled']
+            }], hermesLoadingChange: [{
+                type: Output,
+                args: ['hermesLoadingChange']
+            }] } });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+const HERMES_LOADING_BUTTON_DIRECTIVES = [HermesLoadingButton];
+class HermesLoadingButtonModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesLoadingButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.22", ngImport: i0, type: HermesLoadingButtonModule, declarations: [HermesLoadingButton], imports: [CommonModule], exports: [HermesLoadingButton] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesLoadingButtonModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesLoadingButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [HERMES_LOADING_BUTTON_DIRECTIVES],
+                    exports: [HERMES_LOADING_BUTTON_DIRECTIVES],
+                }]
+        }] });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class HermesButtonModule {
+    constructor() {
+        ClarityIcons.addIcons(ellipsisHorizontalIcon);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.22", ngImport: i0, type: HermesButtonModule, exports: [HermesLoadingButtonModule, HermesButtonGroupModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesButtonModule, imports: [HermesLoadingButtonModule, HermesButtonGroupModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [HermesLoadingButtonModule, HermesButtonGroupModule],
+                }]
+        }], ctorParameters: () => [] });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { HERMES_BUTTON_GROUP_DIRECTIVES, HERMES_LOADING_BUTTON_DIRECTIVES, HermesButton, HermesButtonGroup, HermesButtonGroupModule, HermesButtonModule, HermesLoadingButton, HermesLoadingButtonModule };
+//# sourceMappingURL=hermes-ui-angular-button.mjs.map