@byuhbll/components 5.1.0 → 5.3.0-rc.1

package/fesm2022/byuhbll-components.mjs

@@ -3,7 +3,7 @@ import { CommonModule, DatePipe, DOCUMENT, LowerCasePipe, NgIf, NgClass } from '
 import { toSignal, toObservable } from '@angular/core/rxjs-interop';
 import { HttpClient } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, ViewChild, Input, input, EventEmitter, Output, inject, computed, ViewChildren, Pipe, Renderer2, viewChild, HostListener, ElementRef, Injector, runInInjectionContext, effect, ViewEncapsulation, booleanAttribute, createComponent, Injectable } from '@angular/core';
+import { Component, ChangeDetectionStrategy, ViewChild, Input, input, EventEmitter, Output, inject, computed, ViewChildren, Pipe, Renderer2, viewChild, HostListener, ElementRef, Injector, runInInjectionContext, effect, ViewEncapsulation, booleanAttribute, createComponent, Injectable, signal, ContentChildren } from '@angular/core';
 import { trigger, transition, group, style, query, animateChild, animate } from '@angular/animations';
 import { map, of, switchMap, shareReplay, combineLatest, Subject, Subscription } from 'rxjs';
 import { BreakpointObserver } from '@angular/cdk/layout';
@@ -2589,6 +2589,271 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }] });
 
+/**
+ * A flexible, reusable button component that supports multiple button types
+ * and various content combinations (icon before, title, icon after).
+ *
+ * @example
+ * ```html
+ * <!-- Primary button with icon and title -->
+ * <lib-button
+ *   buttonType="primary"
+ *   title="Copy Citation"
+ *   iconBefore="content_copy"
+ *   (buttonClick)="copyCitation()">
+ * </lib-button>
+ *
+ * <!-- Secondary button with title only -->
+ * <lib-button
+ *   buttonType="secondary"
+ *   title="Cancel"
+ *   (buttonClick)="cancelAction()">
+ * </lib-button>
+ *
+ * <!-- Transparent button with icon after title -->
+ * <lib-button
+ *   buttonType="transparent"
+ *   title="Download"
+ *   iconAfter="download"
+ *   (buttonClick)="downloadFile()">
+ * </lib-button>
+ *
+ * <!-- Thin button -->
+ * <lib-button
+ *   buttonType="primary"
+ *   title="Submit"
+ *   [isThin]="true"
+ *   (buttonClick)="submitForm()">
+ * </lib-button>
+ * ```
+ */
+class ButtonComponent {
+    constructor() {
+        this.buttonType = 'primary';
+        this.disabled = false;
+        this.isThin = false;
+        this.buttonClick = new EventEmitter();
+    }
+    /**
+     * Handles button click events and emits the buttonClick event if the button is not disabled.
+     */
+    onButtonClick() {
+        if (!this.disabled) {
+            this.buttonClick.emit();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: ButtonComponent, isStandalone: true, selector: "lib-button", inputs: { buttonType: "buttonType", title: "title", iconBefore: "iconBefore", iconAfter: "iconAfter", disabled: "disabled", isThin: "isThin", ariaLabel: "ariaLabel" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button\n    type=\"button\"\n    [class]=\"'btn btn-' + buttonType + (isThin ? ' btn-thin' : '') + (title ? '' : ' btn-icon-only')\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n    (click)=\"onButtonClick()\"\n    [attr.tabindex]=\"disabled ? -1 : 0\"\n>\n    @if (iconBefore) {\n        <span class=\"icon material-symbols-outlined\" [ngClass]=\"{ 'icon-before': title }\">{{ iconBefore }}</span>\n    }\n\n    @if (title) {\n        <span class=\"button-title\">{{ title }}</span>\n    }\n\n    @if (iconAfter) {\n        <span class=\"icon icon-after material-symbols-outlined\">{{ iconAfter }}</span>\n    }\n</button>\n", styles: [".btn{padding:.75rem 1.5rem;border-radius:.25rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;border:none;display:inline-flex;align-items:center;outline:none;line-height:1.5rem}.btn.btn-thin{padding:.25rem 2.25rem;border-radius:.5rem;font-weight:400}.btn.btn-thin .icon img{height:1.25rem}.btn:disabled{cursor:not-allowed;color:#767676}.btn:disabled:not(.btn-transparent){background-color:#e7e7e7;border:.0625rem solid #767676}.btn:focus-visible{outline:.125rem solid #b967c7;outline-offset:.125rem}.btn .icon{display:flex;align-items:center;justify-content:center}.btn .icon img{height:1.5rem;width:auto}.btn .icon.icon-before{margin-right:.25rem}.btn .icon.icon-after{margin-left:.25rem}.btn .button-title{flex-shrink:0}.btn-icon-only{padding:.75rem}.btn-primary{background-color:#0047ba;color:#fff;border:.0625rem solid #0047ba}.btn-primary:hover:not(:disabled){background-color:#003995}.btn-secondary{background-color:#fff;color:#00245d;border:.0625rem solid #0047ba}.btn-secondary:hover:not(:disabled){background-color:#e5edf8}.btn-transparent{background-color:transparent;color:#00245d}.btn-transparent:hover:not(:disabled){background-color:#e5edf8}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-button', standalone: true, imports: [CommonModule], template: "<button\n    type=\"button\"\n    [class]=\"'btn btn-' + buttonType + (isThin ? ' btn-thin' : '') + (title ? '' : ' btn-icon-only')\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n    (click)=\"onButtonClick()\"\n    [attr.tabindex]=\"disabled ? -1 : 0\"\n>\n    @if (iconBefore) {\n        <span class=\"icon material-symbols-outlined\" [ngClass]=\"{ 'icon-before': title }\">{{ iconBefore }}</span>\n    }\n\n    @if (title) {\n        <span class=\"button-title\">{{ title }}</span>\n    }\n\n    @if (iconAfter) {\n        <span class=\"icon icon-after material-symbols-outlined\">{{ iconAfter }}</span>\n    }\n</button>\n", styles: [".btn{padding:.75rem 1.5rem;border-radius:.25rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;border:none;display:inline-flex;align-items:center;outline:none;line-height:1.5rem}.btn.btn-thin{padding:.25rem 2.25rem;border-radius:.5rem;font-weight:400}.btn.btn-thin .icon img{height:1.25rem}.btn:disabled{cursor:not-allowed;color:#767676}.btn:disabled:not(.btn-transparent){background-color:#e7e7e7;border:.0625rem solid #767676}.btn:focus-visible{outline:.125rem solid #b967c7;outline-offset:.125rem}.btn .icon{display:flex;align-items:center;justify-content:center}.btn .icon img{height:1.5rem;width:auto}.btn .icon.icon-before{margin-right:.25rem}.btn .icon.icon-after{margin-left:.25rem}.btn .button-title{flex-shrink:0}.btn-icon-only{padding:.75rem}.btn-primary{background-color:#0047ba;color:#fff;border:.0625rem solid #0047ba}.btn-primary:hover:not(:disabled){background-color:#003995}.btn-secondary{background-color:#fff;color:#00245d;border:.0625rem solid #0047ba}.btn-secondary:hover:not(:disabled){background-color:#e5edf8}.btn-transparent{background-color:transparent;color:#00245d}.btn-transparent:hover:not(:disabled){background-color:#e5edf8}\n"] }]
+        }], propDecorators: { buttonType: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], iconBefore: [{
+                type: Input
+            }], iconAfter: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], isThin: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], buttonClick: [{
+                type: Output
+            }] } });
+
+class ButtonGroupItemComponent {
+    constructor() {
+        this.disabled = false;
+        this.buttonClick = new EventEmitter();
+        // Set by parent button group after content projection
+        this.isActive = false;
+    }
+    /**
+     * Handles the button click event and emits the button's ID to the parent component.
+     */
+    onClick() {
+        this.buttonClick.emit(this.id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ButtonGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: ButtonGroupItemComponent, isStandalone: true, selector: "lib-button-group-item", inputs: { id: "id", title: "title", icon: "icon", ariaLabel: "ariaLabel", disabled: "disabled", position: "position" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button\n    type=\"button\"\n    class=\"tab-btn\"\n    [class.first]=\"position === 'first'\"\n    [class.last]=\"position === 'last'\"\n    [class.active]=\"isActive\"\n    [disabled]=\"disabled\"\n    (click)=\"onClick()\"\n    role=\"tab\"\n    [attr.aria-pressed]=\"isActive\"\n    [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n    [attr.tabindex]=\"disabled ? -1 : 0\"\n>\n    @if (icon) {\n        <span class=\"icon material-symbols-outlined\">{{ icon }}</span>\n    }\n\n    @if (title) {\n        <span class=\"button-title\">{{ title }}</span>\n    }\n</button>\n", styles: [".tab-btn{padding:.5rem 1rem;font-size:1rem;font-weight:400;line-height:1.5rem;color:#00245d;background-color:#fff;cursor:pointer;position:relative;border:.0625rem solid #d0d0d0;border-left:none;border-radius:0;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;height:2.5rem}.tab-btn:not(:disabled):hover{background-color:#e5edf8}.tab-btn.active{background-color:#0047ba;color:#fff;z-index:2}.tab-btn.active:not(:disabled):hover{background-color:#003995}.tab-btn:focus-visible{outline:.125rem solid #b967c7;outline-offset:.125rem;z-index:3}.tab-btn:disabled{cursor:not-allowed;color:#767676;background-color:#e7e7e7;border-color:#767676}.tab-btn .icon{display:flex;align-items:center;justify-content:center}.tab-btn .icon img{height:1.5rem;width:auto}.tab-btn .button-title{flex-shrink:0}.tab-btn.first{border-radius:.25rem 0 0 .25rem;border-left:.0625rem solid #d0d0d0}.tab-btn.first:disabled{border-left:.0625rem solid #767676}.tab-btn.last{border-radius:0 .25rem .25rem 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ButtonGroupItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-button-group-item', standalone: true, imports: [CommonModule], template: "<button\n    type=\"button\"\n    class=\"tab-btn\"\n    [class.first]=\"position === 'first'\"\n    [class.last]=\"position === 'last'\"\n    [class.active]=\"isActive\"\n    [disabled]=\"disabled\"\n    (click)=\"onClick()\"\n    role=\"tab\"\n    [attr.aria-pressed]=\"isActive\"\n    [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\n    [attr.tabindex]=\"disabled ? -1 : 0\"\n>\n    @if (icon) {\n        <span class=\"icon material-symbols-outlined\">{{ icon }}</span>\n    }\n\n    @if (title) {\n        <span class=\"button-title\">{{ title }}</span>\n    }\n</button>\n", styles: [".tab-btn{padding:.5rem 1rem;font-size:1rem;font-weight:400;line-height:1.5rem;color:#00245d;background-color:#fff;cursor:pointer;position:relative;border:.0625rem solid #d0d0d0;border-left:none;border-radius:0;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;height:2.5rem}.tab-btn:not(:disabled):hover{background-color:#e5edf8}.tab-btn.active{background-color:#0047ba;color:#fff;z-index:2}.tab-btn.active:not(:disabled):hover{background-color:#003995}.tab-btn:focus-visible{outline:.125rem solid #b967c7;outline-offset:.125rem;z-index:3}.tab-btn:disabled{cursor:not-allowed;color:#767676;background-color:#e7e7e7;border-color:#767676}.tab-btn .icon{display:flex;align-items:center;justify-content:center}.tab-btn .icon img{height:1.5rem;width:auto}.tab-btn .button-title{flex-shrink:0}.tab-btn.first{border-radius:.25rem 0 0 .25rem;border-left:.0625rem solid #d0d0d0}.tab-btn.first:disabled{border-left:.0625rem solid #767676}.tab-btn.last{border-radius:0 .25rem .25rem 0}\n"] }]
+        }], propDecorators: { id: [{
+                type: Input,
+                args: [{ required: true }]
+            }], title: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], buttonClick: [{
+                type: Output
+            }] } });
+
+class ButtonGroupComponent {
+    constructor() {
+        this.activeButtonChange = new EventEmitter();
+        this.elementRef = inject(ElementRef);
+        this.activeButtonId = signal('');
+        this.subscriptions = [];
+    }
+    /**
+     * Angular lifecycle hook called after content projection is initialized.
+     * Sets up the initial active button and subscribes to button click events from all button items.
+     */
+    ngAfterContentInit() {
+        // Handle both Angular components (via ContentChildren) and custom elements (via DOM)
+        if (this.buttonItems.length > 0) {
+            // Angular component usage
+            this.initializeActiveButton();
+            this.buttonItems.forEach((item) => {
+                const sub = item.buttonClick.subscribe((id) => this.onButtonClick(id));
+                this.subscriptions.push(sub);
+            });
+        }
+        else {
+            // Custom element usage - delay slightly to ensure custom elements are fully initialized
+            setTimeout(() => {
+                this.initializeCustomElements();
+            }, 0);
+        }
+    }
+    /**
+     * Initializes custom element children when used as web components.
+     */
+    initializeCustomElements() {
+        const hostElement = this.elementRef.nativeElement;
+        const customElementChildren = Array.from(hostElement.querySelectorAll('hbll-button-group-item, lib-button-group-item'));
+        if (customElementChildren.length > 0) {
+            // Set position attributes - first and last explicitly, rest are middle
+            customElementChildren[0].setAttribute('position', 'first');
+            if (customElementChildren.length > 1) {
+                customElementChildren[customElementChildren.length - 1].setAttribute('position', 'last');
+            }
+            for (let i = 1; i < customElementChildren.length - 1; i++) {
+                customElementChildren[i].setAttribute('position', 'middle');
+            }
+            const initialId = this.initialActiveId;
+            if (initialId) {
+                this.activeButtonId.set(initialId);
+                customElementChildren.forEach((item) => {
+                    const itemId = item.getAttribute('id');
+                    if (itemId === initialId) {
+                        this.setActiveState(item, true);
+                    }
+                    else {
+                        this.setActiveState(item, false);
+                    }
+                });
+            }
+            // Listen to clicks on custom elements
+            customElementChildren.forEach((item) => {
+                item.addEventListener('click', () => {
+                    const itemId = item.getAttribute('id');
+                    if (itemId && !item.hasAttribute('disabled')) {
+                        this.handleCustomElementClick(itemId, customElementChildren);
+                    }
+                });
+            });
+        }
+    }
+    /**
+     * Sets the active state on a custom element by toggling the active class on its button.
+     */
+    setActiveState(element, isActive) {
+        const button = element.querySelector('.tab-btn');
+        if (button) {
+            if (isActive) {
+                button.classList.add('active');
+            }
+            else {
+                button.classList.remove('active');
+            }
+        }
+    }
+    /**
+     * Handles click events for custom element children.
+     */
+    handleCustomElementClick(buttonId, children) {
+        this.activeButtonId.set(buttonId);
+        this.activeButtonChange.emit(buttonId);
+        children.forEach((item) => {
+            const itemId = item.getAttribute('id');
+            const isActive = itemId === buttonId;
+            this.setActiveState(item, isActive);
+        });
+    }
+    /**
+     * Angular lifecycle hook called when the component is destroyed.
+     * Cleans up all subscriptions to prevent memory leaks.
+     */
+    ngOnDestroy() {
+        this.subscriptions.forEach((sub) => sub.unsubscribe());
+    }
+    /**
+     * Initializes the active button state based on the initialActiveId input.
+     * Sets the active state on the matching button item if an initial ID is provided.
+     */
+    initializeActiveButton() {
+        const items = this.buttonItems.toArray();
+        const initialId = this.initialActiveId;
+        // Set position - first and last explicitly, rest are middle
+        if (items.length > 0) {
+            items[0].position = 'first';
+            if (items.length > 1) {
+                items[items.length - 1].position = 'last';
+            }
+            for (let i = 1; i < items.length - 1; i++) {
+                items[i].position = 'middle';
+            }
+        }
+        // Set active state
+        if (initialId) {
+            items.forEach((item) => {
+                item.isActive = item.id === initialId;
+            });
+            this.activeButtonId.set(initialId);
+        }
+    }
+    /**
+     * Handles button click events from child button items.
+     * Updates the active button state and emits the activeButtonChange event.
+     * @param buttonId - The ID of the clicked button
+     */
+    onButtonClick(buttonId) {
+        this.activeButtonId.set(buttonId);
+        this.activeButtonChange.emit(buttonId);
+        this.buttonItems.forEach((item) => {
+            item.isActive = item.id === buttonId;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: ButtonGroupComponent, isStandalone: true, selector: "lib-button-group", inputs: { initialActiveId: "initialActiveId" }, outputs: { activeButtonChange: "activeButtonChange" }, queries: [{ propertyName: "buttonItems", predicate: ButtonGroupItemComponent }], ngImport: i0, template: "<div class=\"button-group\" role=\"tablist\">\n    <ng-content></ng-content>\n</div>\n", styles: [".button-group{display:flex;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;padding:.25rem}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ButtonGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-button-group', standalone: true, imports: [ButtonGroupItemComponent], template: "<div class=\"button-group\" role=\"tablist\">\n    <ng-content></ng-content>\n</div>\n", styles: [".button-group{display:flex;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;padding:.25rem}\n"] }]
+        }], propDecorators: { initialActiveId: [{
+                type: Input
+            }], activeButtonChange: [{
+                type: Output
+            }], buttonItems: [{
+                type: ContentChildren,
+                args: [ButtonGroupItemComponent]
+            }] } });
+
 /*
  * Public API Surface of components
  */
@@ -2597,5 +2862,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ADVANCED_SEARCH_FIELD_MAP, ADVANCED_SEARCH_OPTIONS, ADVANCED_SEARCH_QUALIFIER_MAP, HbllFooterComponent, HbllHeaderComponent, HbllItemTypeIconPipe, HeaderWithImpersonationComponent, ImpersonateModalComponent, ImpersonateUserPipe, ImpersonationBannerComponent, LIBRARY_HOURS_API_URL, SnackbarComponent, SnackbarService, SsSearchBarComponent, StatusButtonComponent, defaultOidcBaseUri, defaultOidcDefaultIdp, getUserStatusFromRoles, isAdvancedSearchExternalFieldOption, isAdvancedSearchFieldOption, isAdvancedSearchLocalFieldOption, isSearchScope };
+export { ADVANCED_SEARCH_FIELD_MAP, ADVANCED_SEARCH_OPTIONS, ADVANCED_SEARCH_QUALIFIER_MAP, ButtonComponent, ButtonGroupComponent, HbllFooterComponent, HbllHeaderComponent, HbllItemTypeIconPipe, HeaderWithImpersonationComponent, ImpersonateModalComponent, ImpersonateUserPipe, ImpersonationBannerComponent, LIBRARY_HOURS_API_URL, SnackbarComponent, SnackbarService, SsSearchBarComponent, StatusButtonComponent, defaultOidcBaseUri, defaultOidcDefaultIdp, getUserStatusFromRoles, isAdvancedSearchExternalFieldOption, isAdvancedSearchFieldOption, isAdvancedSearchLocalFieldOption, isSearchScope };
 //# sourceMappingURL=byuhbll-components.mjs.map