@byuhbll/components 5.0.1 → 5.0.3-beta.0

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, 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 } 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';
@@ -1302,6 +1302,85 @@ class HeaderWithImpersonationComponent {
             : false);
         this.showImpersonationModal = false;
         this.isImpersonating = computed(() => !!this.parsedToken()?.['impersonator']);
+        // Inactivity timeout for impersonation
+        this.activityEvents = [
+            'keydown',
+            'pointerdown',
+            'wheel',
+            'scroll',
+        ];
+        this.inactivityTimerId = null;
+        this.inactivityTimeoutMs = 5 * 60 * 1000; // 5 minutes
+        this.debounceTimerId = null;
+        this.debounceDelayMs = 250;
+        this.trackingActive = false;
+        this.injector = inject(Injector);
+        /** Reset the inactivity countdown (no-op if not impersonating) */
+        this.resetInactivityTimer = () => {
+            if (!this.isImpersonating())
+                return;
+            if (this.inactivityTimerId)
+                clearTimeout(this.inactivityTimerId);
+            this.inactivityTimerId = window.setTimeout(() => {
+                this.endImpersonation.emit();
+                this.stopInactivityTracking();
+            }, this.inactivityTimeoutMs);
+        };
+        /** Debounce activity to avoid hammering resets during event storms */
+        this.debouncedResetTimer = () => {
+            if (this.debounceTimerId)
+                clearTimeout(this.debounceTimerId);
+            this.debounceTimerId = window.setTimeout(() => {
+                this.resetInactivityTimer();
+            }, this.debounceDelayMs);
+        };
+    }
+    ngOnInit() {
+        // effect can only be used within an injection context (ex: constructor)
+        runInInjectionContext(this.injector, () => {
+            effect(() => {
+                if (this.isImpersonating()) {
+                    if (!this.trackingActive)
+                        this.startInactivityTracking();
+                }
+                else {
+                    if (this.trackingActive)
+                        this.stopInactivityTracking();
+                }
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.stopInactivityTracking();
+    }
+    /** Begin listening and start countdown */
+    startInactivityTracking() {
+        this.activityEvents.forEach((event) => {
+            // 'scroll' on document doesn't bubble; use window + capture to catch nested scrolls
+            const target = event === 'scroll' ? window : document;
+            const options = event === 'scroll'
+                ? { passive: true, capture: true }
+                : { passive: true };
+            target.addEventListener(event, this.debouncedResetTimer, options);
+        });
+        this.trackingActive = true;
+        this.resetInactivityTimer();
+    }
+    /** Remove listeners and clear timers */
+    stopInactivityTracking() {
+        this.activityEvents.forEach((event) => {
+            const target = event === 'scroll' ? window : document;
+            target.removeEventListener(event, this.debouncedResetTimer);
+        });
+        if (this.inactivityTimerId) {
+            clearTimeout(this.inactivityTimerId);
+            this.inactivityTimerId = null;
+        }
+        if (this.debounceTimerId) {
+            clearTimeout(this.debounceTimerId);
+            this.debounceTimerId = null;
+        }
+        this.trackingActive = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HeaderWithImpersonationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.0", type: HeaderWithImpersonationComponent, isStandalone: true, selector: "lib-header-with-impersonation", inputs: { accessTokenPayload: { classPropertyName: "accessTokenPayload", publicName: "accessTokenPayload", isSignal: true, isRequired: true, transformFunction: null }, oidcBaseUri: { classPropertyName: "oidcBaseUri", publicName: "oidcBaseUri", isSignal: true, isRequired: false, transformFunction: null }, oidcDefaultIdp: { classPropertyName: "oidcDefaultIdp", publicName: "oidcDefaultIdp", isSignal: true, isRequired: false, transformFunction: null }, mainSiteBaseUrl: { classPropertyName: "mainSiteBaseUrl", publicName: "mainSiteBaseUrl", isSignal: true, isRequired: false, transformFunction: null }, personBaseUri: { classPropertyName: "personBaseUri", publicName: "personBaseUri", isSignal: true, isRequired: false, transformFunction: null }, myAccountApiBaseUri: { classPropertyName: "myAccountApiBaseUri", publicName: "myAccountApiBaseUri", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { login: "login", logout: "logout", endImpersonation: "endImpersonation" }, ngImport: i0, template: "<lib-impersonation-banner\n    [accessTokenPayload]=\"accessTokenPayload()\"\n    (endImpersonation)=\"endImpersonation.emit()\"\n    [personBaseUri]=\"personBaseUri()\"\n    [myAccountApiBaseUri]=\"myAccountApiBaseUri()\"\n></lib-impersonation-banner>\n<lib-hbll-header\n    [name]=\"name()\"\n    [showImpersonateButton]=\"showImpersonateButton()\"\n    (openImpersonationModal)=\"showImpersonationModal = true\"\n    (login)=\"login.emit()\"\n    (logout)=\"logout.emit()\"\n    [mainsitebaseurl]=\"mainSiteBaseUrl()\"\n/>\n<lib-impersonate-modal\n    [showModal]=\"showImpersonationModal\"\n    [oidcBaseUri]=\"oidcBaseUri()\"\n    [oidcDefaultIdp]=\"oidcDefaultIdp()\"\n    [accessTokenPayload]=\"accessTokenPayload()\"\n    (dismiss)=\"showImpersonationModal = false\"\n    (init)=\"showImpersonationModal = true\"\n></lib-impersonate-modal>\n", styles: [""], dependencies: [{ kind: "component", type: HbllHeaderComponent, selector: "lib-hbll-header", inputs: ["name", "mainsitebaseurl", "showImpersonateButton"], outputs: ["openImpersonationModal", "login", "logout"] }, { kind: "component", type: ImpersonationBannerComponent, selector: "lib-impersonation-banner", inputs: ["accessTokenPayload", "personBaseUri", "myAccountApiBaseUri"], outputs: ["endImpersonation"] }, { kind: "component", type: ImpersonateModalComponent, selector: "lib-impersonate-modal", inputs: ["showModal", "oidcBaseUri", "oidcDefaultIdp", "accessTokenPayload"], outputs: ["dismiss", "init"] }] }); }
@@ -2502,6 +2581,183 @@ 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 -->
+ * <app-hbll-button-custom-component
+ *   buttonType="primary"
+ *   title="Copy Citation"
+ *   iconBefore="../../assets/copy.svg"
+ *   iconAlt="Copy icon"
+ *   (buttonClick)="copyCitation()">
+ * </app-hbll-button-custom-component>
+ *
+ * <!-- Secondary button with title only -->
+ * <app-hbll-button-custom-component
+ *   buttonType="secondary"
+ *   title="Cancel"
+ *   (buttonClick)="cancelAction()">
+ * </app-hbll-button-custom-component>
+ *
+ * <!-- Transparent button with icon after title -->
+ * <app-hbll-button-custom-component
+ *   buttonType="transparent"
+ *   title="Download"
+ *   iconAfter="../../assets/download.svg"
+ *   iconAlt="Download icon"
+ *   (buttonClick)="downloadFile()">
+ * </app-hbll-button-custom-component>
+ *
+ * <!-- Thin button with reduced padding -->
+ * <app-hbll-button-custom-component
+ *   buttonType="primary"
+ *   title="Submit"
+ *   [isThin]="true"
+ *   (buttonClick)="submitForm()">
+ * </app-hbll-button-custom-component>
+ * ```
+ */
+class ButtonComponent {
+    constructor() {
+        /**
+         * The visual style of the button
+         * @default 'primary'
+         */
+        this.buttonType = 'primary';
+        /**
+         * Whether the button is disabled
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Whether the button should have thin padding
+         * @default false
+         */
+        this.isThin = false;
+        /**
+         * Event emitted when the button is clicked or activated via keyboard
+         */
+        this.buttonClick = new EventEmitter();
+    }
+    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: "14.0.0", version: "18.1.0", type: ButtonComponent, isStandalone: true, selector: "lib-button", inputs: { buttonType: "buttonType", title: "title", iconBefore: "iconBefore", iconAfter: "iconAfter", iconAlt: "iconAlt", disabled: "disabled", isThin: "isThin" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button\n    type=\"button\"\n    [class]=\"'btn btn-' + buttonType + (isThin ? ' btn-thin' : '')\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"title || iconAlt\"\n    (click)=\"onButtonClick()\"\n    [attr.tabindex]=\"disabled ? -1 : 0\"\n>\n    <!-- Icon before title -->\n    <span class=\"icon icon-before\" *ngIf=\"iconBefore\">\n        <img\n            [src]=\"iconBefore\"\n            [class]=\"\n        disabled\n          ? 'disabled-icon'\n          : buttonType === 'primary'\n          ? 'white-icon'\n          : 'dark-icon'\n      \"\n            [alt]=\"iconAlt || ''\"\n        />\n    </span>\n\n    <!-- Title text -->\n    <span class=\"button-title\" *ngIf=\"title\">{{ title }}</span>\n\n    <!-- Icon after title -->\n    <span class=\"icon icon-after\" *ngIf=\"iconAfter\">\n        <img\n            [src]=\"iconAfter\"\n            [class]=\"\n        disabled\n          ? 'disabled-icon'\n          : buttonType === 'primary'\n          ? 'white-icon'\n          : 'dark-icon'\n      \"\n            [alt]=\"iconAlt || ''\"\n        />\n    </span>\n</button>\n", styles: [".btn{padding:.8rem 2rem;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}.btn.btn-thin{padding:.4rem 2rem;border-radius:.5rem}.btn:disabled{cursor:not-allowed;color:#767676}.btn:disabled:not(.btn-transparent){background-color:#e7e7e7;border:1px solid #767676}.btn:focus{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-primary{background-color:#0047ba;color:#fff;border:1px solid #0047ba}.btn-primary:hover:not(:disabled){background-color:#003995}.btn-secondary{background-color:#fff;color:#00245d;border:1px 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}.white-icon{filter:invert(100%) sepia(0%) saturate(7489%) hue-rotate(149deg) brightness(104%) contrast(100%)}.dark-icon{filter:invert(12%) sepia(44%) saturate(3863%) hue-rotate(207deg) brightness(90%) contrast(105%)}.disabled-icon{filter:invert(48%) sepia(0%) saturate(0%) hue-rotate(146deg) brightness(96%) contrast(88%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+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' : '')\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"title || iconAlt\"\n    (click)=\"onButtonClick()\"\n    [attr.tabindex]=\"disabled ? -1 : 0\"\n>\n    <!-- Icon before title -->\n    <span class=\"icon icon-before\" *ngIf=\"iconBefore\">\n        <img\n            [src]=\"iconBefore\"\n            [class]=\"\n        disabled\n          ? 'disabled-icon'\n          : buttonType === 'primary'\n          ? 'white-icon'\n          : 'dark-icon'\n      \"\n            [alt]=\"iconAlt || ''\"\n        />\n    </span>\n\n    <!-- Title text -->\n    <span class=\"button-title\" *ngIf=\"title\">{{ title }}</span>\n\n    <!-- Icon after title -->\n    <span class=\"icon icon-after\" *ngIf=\"iconAfter\">\n        <img\n            [src]=\"iconAfter\"\n            [class]=\"\n        disabled\n          ? 'disabled-icon'\n          : buttonType === 'primary'\n          ? 'white-icon'\n          : 'dark-icon'\n      \"\n            [alt]=\"iconAlt || ''\"\n        />\n    </span>\n</button>\n", styles: [".btn{padding:.8rem 2rem;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}.btn.btn-thin{padding:.4rem 2rem;border-radius:.5rem}.btn:disabled{cursor:not-allowed;color:#767676}.btn:disabled:not(.btn-transparent){background-color:#e7e7e7;border:1px solid #767676}.btn:focus{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-primary{background-color:#0047ba;color:#fff;border:1px solid #0047ba}.btn-primary:hover:not(:disabled){background-color:#003995}.btn-secondary{background-color:#fff;color:#00245d;border:1px 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}.white-icon{filter:invert(100%) sepia(0%) saturate(7489%) hue-rotate(149deg) brightness(104%) contrast(100%)}.dark-icon{filter:invert(12%) sepia(44%) saturate(3863%) hue-rotate(207deg) brightness(90%) contrast(105%)}.disabled-icon{filter:invert(48%) sepia(0%) saturate(0%) hue-rotate(146deg) brightness(96%) contrast(88%)}\n"] }]
+        }], propDecorators: { buttonType: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], iconBefore: [{
+                type: Input
+            }], iconAfter: [{
+                type: Input
+            }], iconAlt: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], isThin: [{
+                type: Input
+            }], buttonClick: [{
+                type: Output
+            }] } });
+
+class ButtonGroupItemComponent {
+    constructor() {
+        this.isActive = false;
+        this.disabled = false;
+        this.buttonClick = new EventEmitter();
+    }
+    onClick() {
+        this.buttonClick.emit(this.button.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: { button: "button", isActive: "isActive", disabled: "disabled" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button\n    type=\"button\"\n    class=\"tab-btn\"\n    [class.active]=\"isActive\"\n    [disabled]=\"disabled\"\n    (click)=\"onClick()\"\n    role=\"tab\"\n    [attr.aria-pressed]=\"isActive\"\n    [attr.aria-label]=\"button.title\"\n    [attr.tabindex]=\"disabled ? -1 : 0\"\n>\n    @if (button.icon) {\n        <span class=\"icon\">\n            <img\n                [src]=\"button.icon\"\n                [class]=\"disabled ? 'disabled-icon' : isActive ? 'white-icon' : 'dark-icon'\"\n                [alt]=\"button.iconAlt || ''\"\n            />\n        </span>\n    }\n\n    @if (button.title) {\n        <span class=\"button-title\">{{ button.title }}</span>\n    }\n</button>\n", styles: [".tab-btn{padding:.5rem;font-size:1rem;font-weight:400;color:#00245d;background-color:#fff;cursor:pointer;position:relative;border:1px solid #d0d0d0;border-left:none;border-radius:0;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:.25rem;height:2.3rem}.tab-btn:not(:disabled):hover{background-color:#e5edf8}.tab-btn.active{background-color:#0047ba;color:#fff;z-index:10}.tab-btn.active:not(:disabled):hover{background-color:#003995}.tab-btn:focus{outline:.125rem solid #b967c7;outline-offset:.125rem}.tab-btn:disabled{cursor:not-allowed;color:#767676;background-color:#e7e7e7;border:1px solid #767676}.tab-btn .icon{display:flex;align-items:center;justify-content:center}.tab-btn .icon img{height:1rem;width:auto}.tab-btn .button-title{flex-shrink:0}.white-icon{filter:invert(100%) sepia(0%) saturate(7489%) hue-rotate(149deg) brightness(104%) contrast(100%)}.dark-icon{filter:invert(12%) sepia(44%) saturate(3863%) hue-rotate(207deg) brightness(90%) contrast(105%)}.disabled-icon{filter:invert(48%) sepia(0%) saturate(0%) hue-rotate(146deg) brightness(96%) contrast(88%)}\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.active]=\"isActive\"\n    [disabled]=\"disabled\"\n    (click)=\"onClick()\"\n    role=\"tab\"\n    [attr.aria-pressed]=\"isActive\"\n    [attr.aria-label]=\"button.title\"\n    [attr.tabindex]=\"disabled ? -1 : 0\"\n>\n    @if (button.icon) {\n        <span class=\"icon\">\n            <img\n                [src]=\"button.icon\"\n                [class]=\"disabled ? 'disabled-icon' : isActive ? 'white-icon' : 'dark-icon'\"\n                [alt]=\"button.iconAlt || ''\"\n            />\n        </span>\n    }\n\n    @if (button.title) {\n        <span class=\"button-title\">{{ button.title }}</span>\n    }\n</button>\n", styles: [".tab-btn{padding:.5rem;font-size:1rem;font-weight:400;color:#00245d;background-color:#fff;cursor:pointer;position:relative;border:1px solid #d0d0d0;border-left:none;border-radius:0;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:.25rem;height:2.3rem}.tab-btn:not(:disabled):hover{background-color:#e5edf8}.tab-btn.active{background-color:#0047ba;color:#fff;z-index:10}.tab-btn.active:not(:disabled):hover{background-color:#003995}.tab-btn:focus{outline:.125rem solid #b967c7;outline-offset:.125rem}.tab-btn:disabled{cursor:not-allowed;color:#767676;background-color:#e7e7e7;border:1px solid #767676}.tab-btn .icon{display:flex;align-items:center;justify-content:center}.tab-btn .icon img{height:1rem;width:auto}.tab-btn .button-title{flex-shrink:0}.white-icon{filter:invert(100%) sepia(0%) saturate(7489%) hue-rotate(149deg) brightness(104%) contrast(100%)}.dark-icon{filter:invert(12%) sepia(44%) saturate(3863%) hue-rotate(207deg) brightness(90%) contrast(105%)}.disabled-icon{filter:invert(48%) sepia(0%) saturate(0%) hue-rotate(146deg) brightness(96%) contrast(88%)}\n"] }]
+        }], propDecorators: { button: [{
+                type: Input,
+                args: [{ required: true }]
+            }], isActive: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], buttonClick: [{
+                type: Output
+            }] } });
+
+class ButtonGroupComponent {
+    constructor() {
+        // Input: Whether the button group is disabled
+        this.disabled = false;
+        // Output: Emits the id of the active button when changed
+        this.activeButtonChange = new EventEmitter();
+        // Internal state: Currently active button id
+        this.activeButtonId = signal('');
+    }
+    ngOnInit() {
+        this.initializeActiveButton();
+    }
+    ngOnChanges(changes) {
+        // When buttons or initialActiveId change (important for web components)
+        if (changes['buttons'] || changes['initialActiveId']) {
+            this.initializeActiveButton();
+        }
+    }
+    initializeActiveButton() {
+        // Set initial active button
+        const initial = this.initialActiveId;
+        if (initial) {
+            this.activeButtonId.set(initial);
+        }
+        else {
+            // Find the first active button from the config
+            const activeButton = this.buttons?.find((btn) => btn.isActive);
+            if (activeButton) {
+                this.activeButtonId.set(activeButton.id);
+            }
+        }
+    }
+    // Handle button click
+    onButtonClick(buttonId) {
+        if (!this.disabled) {
+            this.activeButtonId.set(buttonId);
+            this.activeButtonChange.emit(buttonId);
+        }
+    }
+    // Check if a button is active
+    isButtonActive(buttonId) {
+        return this.activeButtonId() === 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: "17.0.0", version: "18.1.0", type: ButtonGroupComponent, isStandalone: true, selector: "lib-button-group", inputs: { buttons: "buttons", initialActiveId: "initialActiveId", disabled: "disabled" }, outputs: { activeButtonChange: "activeButtonChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"button-group\" role=\"tablist\">\n    @for (button of buttons; track button.id) {\n        <lib-button-group-item\n            [button]=\"button\"\n            [isActive]=\"isButtonActive(button.id)\"\n            [disabled]=\"disabled\"\n            (buttonClick)=\"onButtonClick($event)\"\n            class=\"button-group-item\"\n        />\n    }\n</div>\n", styles: [".button-group{display:flex}.button-group lib-button-group-item:first-child::ng-deep .tab-btn{border-radius:.25rem 0 0 .25rem;border-left:1px solid #d0d0d0}.button-group lib-button-group-item:first-child::ng-deep .tab-btn:disabled{border-left:1px solid #767676}.button-group lib-button-group-item:last-child::ng-deep .tab-btn{border-radius:0 .25rem .25rem 0}@media (max-width: 640px){.button-group{overflow-x:auto;-webkit-overflow-scrolling:touch}}\n"], dependencies: [{ kind: "component", type: ButtonGroupItemComponent, selector: "lib-button-group-item", inputs: ["button", "isActive", "disabled"], outputs: ["buttonClick"] }] }); }
+}
+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    @for (button of buttons; track button.id) {\n        <lib-button-group-item\n            [button]=\"button\"\n            [isActive]=\"isButtonActive(button.id)\"\n            [disabled]=\"disabled\"\n            (buttonClick)=\"onButtonClick($event)\"\n            class=\"button-group-item\"\n        />\n    }\n</div>\n", styles: [".button-group{display:flex}.button-group lib-button-group-item:first-child::ng-deep .tab-btn{border-radius:.25rem 0 0 .25rem;border-left:1px solid #d0d0d0}.button-group lib-button-group-item:first-child::ng-deep .tab-btn:disabled{border-left:1px solid #767676}.button-group lib-button-group-item:last-child::ng-deep .tab-btn{border-radius:0 .25rem .25rem 0}@media (max-width: 640px){.button-group{overflow-x:auto;-webkit-overflow-scrolling:touch}}\n"] }]
+        }], propDecorators: { buttons: [{
+                type: Input,
+                args: [{ required: true }]
+            }], initialActiveId: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], activeButtonChange: [{
+                type: Output
+            }] } });
+
 /*
  * Public API Surface of components
  */
@@ -2510,5 +2766,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