@byuhbll/components 6.0.0-rc.0 → 6.0.0-rc.0.5

package/fesm2022/byuhbll-components.mjs

@@ -3,7 +3,7 @@ import { CommonModule, DatePipe, DOCUMENT, NgIf, NgClass } from '@angular/common
 import { toSignal, toObservable } from '@angular/core/rxjs-interop';
 import { HttpClient } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { Input, ViewChild, ChangeDetectionStrategy, Component, input, EventEmitter, Output, inject, computed, ViewChildren, Pipe, Renderer2, viewChild, HostListener, ElementRef, ViewEncapsulation, booleanAttribute, createComponent, Injectable } from '@angular/core';
+import { Input, ViewChild, ChangeDetectionStrategy, Component, 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, animate, animateChild } from '@angular/animations';
 import { map, of, switchMap, shareReplay, combineLatest, Subject, Subscription } from 'rxjs';
 import { BreakpointObserver } from '@angular/cdk/layout';
@@ -1095,7 +1095,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             }] } });
 
 const defaultOidcBaseUri = 'https://keycloak.lib.byu.edu/';
-const defaultOidcDefaultIdp = 'byu-realm';
+const defaultOidcDefaultIdp = 'ces';
 class ImpersonateUserPipe {
     transform(user) {
         return `${user.name} (${user.netId || 'Unknown'})${user.restricted ? ' — Restricted' : ''}`;
@@ -1293,6 +1293,93 @@ 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(() => {
+                const impersonating = this.isImpersonating();
+                const token = this.parsedToken();
+                // when token refreshes after 5 minutes, it leaves a small moment where there is no token
+                // this prevents dropping inactivtiy timer during that blip
+                if (!token)
+                    return;
+                if (impersonating) {
+                    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;
+            // IMPORTANT: capture must match how it was added for scroll
+            const options = event === 'scroll' ? { capture: true } : undefined;
+            target.removeEventListener(event, this.debouncedResetTimer, options);
+        });
+        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: "19.2.17", ngImport: i0, type: HeaderWithImpersonationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", 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"] }] }); }
@@ -2350,11 +2437,11 @@ class SnackbarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SnackbarComponent, isStandalone: true, selector: "lib-snackbar", inputs: { purpose: "purpose", title: "title", description: "description", fieldPlaceholder: "fieldPlaceholder", titleIcon: "titleIcon", showTitle: ["showTitle", "showTitle", booleanAttribute], showTitleIcon: ["showTitleIcon", "showTitleIcon", booleanAttribute], titleIconFilled: ["titleIconFilled", "titleIconFilled", booleanAttribute], showClose: ["showClose", "showClose", booleanAttribute], showProgressBar: ["showProgressBar", "showProgressBar", booleanAttribute], showField: ["showField", "showField", booleanAttribute], showButton: ["showButton", "showButton", booleanAttribute], autoDismiss: ["autoDismiss", "autoDismiss", booleanAttribute], visible: ["visible", "visible", booleanAttribute], progressMs: "progressMs", y: "y", statusButtonInputs: "statusButtonInputs" }, outputs: { closed: "closed", visibleChange: "visibleChange", buttonClicked: "buttonClicked" }, usesOnChanges: true, ngImport: i0, template: "@if (visible) {\n    <section\n        class=\"snackbar\"\n        [ngClass]=\"{\n            'is-default': purpose === 'default',\n            'is-info': purpose === 'info',\n            'is-success': purpose === 'success',\n            'is-error': purpose === 'error',\n            'is-warning': purpose === 'warning',\n            'is-open': isOpen,\n        }\"\n        role=\"status\"\n        aria-live=\"polite\"\n        [style.--snackbar-progress-duration]=\"progressMs + 'ms'\"\n        [style.top.px]=\"y\"\n    >\n        <div class=\"snackbar__left\">\n            @if(showTitle) {\n                <div class=\"snackbar__title-row\">\n                    <span \n                        [ngClass]=\"{\n                            'snackbar__title-icon': true,\n                            'has-icon': showTitle && showTitleIcon\n                        }\"\n                        aria-hidden=\"true\"\n                    >\n                        @if (showTitle && showTitleIcon) {\n                            <i [ngClass]=\"titleIconFilled ? 'material-icons' : 'material-icons-outlined'\"\n                                id=\"snackbar-title-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                {{ titleIcon }}\n                            </i>\n                        }\n                    </span>\n                    @if (showTitle) {\n                        <h3 class=\"snackbar__title\">{{ title }}</h3>\n                    }\n                </div>\n            }\n            <p class=\"snackbar__desc\">\n                {{ description }}\n            </p>\n            @if (showField) {\n                <input class=\"snackbar__input\" type=\"text\" [placeholder]=\"fieldPlaceholder\" />\n            }\n            @if (showButton) {\n                <lib-status-button\n                    label={{statusButtonInputs?.label}}\n                    [status]=\"status\"\n                    leftIcon={{statusButtonInputs?.leftIcon}}\n                    rightIcon={{statusButtonInputs?.rightIcon}}\n                    [hideLeftIcon]=\"statusButtonInputs?.hideLeftIcon\"\n                    [hideRightIcon]=\"statusButtonInputs?.hideRightIcon\"\n                    [clearVariant]=\"statusButtonInputs?.clearVariant\"\n                    (click)=\"close(true)\"\n                ></lib-status-button>\n\n            }\n        </div>\n        <button \n            type=\"button\"\n            (click)=\"close()\"\n            class=\"snackbar__close\"\n            aria-label=\"Dismiss\"\n            [style.visibility]=\"showClose ? 'visible' : 'hidden'\"\n        >\n            \u00D7\n        </button>\n        @if (showProgressBar) {\n            <div class=\"snackbar__progress\">\n                <div class=\"snackbar__progress-fill\"></div>\n            </div>\n        }\n    </section>\n}\n", styles: [":root{--border-radius-md: 4px;--colors-border-primary: #d0d0d0;--colors-surface-primary: white;--colors-border-information: #457fa6;--colors-surface-information: #ecf2f6;--colors-border-success: #3ba35a;--colors-surface-success: #ebf6ee;--colors-border-warning: #d1c844;--colors-surface-warning: #faf9ec;--colors-border-error: #c73e3d;--colors-surface-error: #f9ecec}.snackbar{--snackbar-border-color: var(--colors-border-primary);--snackbar-bg: var(--colors-surface-primary);--snackbar-text: #141414;--snackbar-title-color: var(--snackbar-text);--snackbar-icon-bg: #e5edf8;--snackbar-accent: #0047ba;--snackbar-input-border: var(--snackbar-border-color);--snackbar-progress: var(--snackbar-accent);display:flex;width:26.25rem;padding:1.25rem 1rem;justify-content:space-between;align-items:flex-start;gap:.25rem;position:relative;border-radius:var(--border-radius-md, 4px);border:1px solid var(--snackbar-border-color);background:var(--snackbar-bg);box-shadow:1px 1px 4px #00000040;color:var(--snackbar-text)}.snackbar__left{display:grid;gap:.5rem;flex:1 1 auto}.snackbar__left>.snackbar__title-row~*{margin-left:var(--snackbar-right-gutter, 1.85rem)}.snackbar__title-row{display:flex;align-items:center;gap:.25rem}.snackbar__title{margin:0;font-weight:400;font-size:1.2rem;line-height:1.2;color:var(--snackbar-title-color)}.snackbar__title-icon{display:inline-flex;align-items:center;justify-content:center;width:1.5em;height:1.5em}.snackbar__title-icon.has-icon{border-radius:50%;color:var(--snackbar-accent)}.snackbar__icon{font-weight:700;font-size:1rem;line-height:1}.snackbar__desc{margin:0;opacity:.9}.snackbar__input{width:100%;max-width:100%;box-sizing:border-box;padding:.5em;border-radius:4px;border:1px solid var(--snackbar-input-border);background:#fff;color:inherit}.snackbar__close{margin-left:.5em;border:0;background:transparent;color:inherit;opacity:.7;font-size:1.5rem;padding:.25rem;line-height:1;cursor:pointer}.snackbar__progress{position:absolute;left:0;right:0;bottom:-1px;height:4px;overflow:hidden;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.snackbar__progress-fill{height:100%;width:0%;background:var(--snackbar-progress);animation:fill var(--snackbar-progress-duration, 4s) linear forwards}@keyframes fill{to{width:100%}}.snackbar.is-default{--snackbar-border-color: var(--colors-border-primary, #d0d0d0);--snackbar-bg: var(--colors-surface-primary, white);--snackbar-text: #141414;--snackbar-title-color: #003995;--snackbar-icon-bg: #e5edf8;--snackbar-accent: #003995;--snackbar-input-border: #d0d0d0;--snackbar-progress: #003995}.snackbar.is-info{--snackbar-border-color: var(--colors-border-information, #457fa6);--snackbar-bg: var(--colors-surface-information, #ecf2f6);--snackbar-text: #24495c;--snackbar-title-color: #24495c;--snackbar-icon-bg: #a2bfd3;--snackbar-accent: #306a88;--snackbar-input-border: #a2bfd3;--snackbar-progress: #306a88}.snackbar.is-success{--snackbar-border-color: var(--colors-border-success, #3ba35a);--snackbar-bg: var(--colors-surface-success, #ebf6ee);--snackbar-text: #20522e;--snackbar-title-color: #20522e;--snackbar-icon-bg: #9dd1ac;--snackbar-accent: #2e7d3f;--snackbar-input-border: #9dd1ac;--snackbar-progress: #2e7d3f}.snackbar.is-warning{--snackbar-border-color: var(--colors-border-warning, #d1c844);--snackbar-bg: var(--colors-surface-warning, #faf9ec);--snackbar-text: #514a18;--snackbar-title-color: #514a18;--snackbar-icon-bg: #e8e3a1;--snackbar-accent: #7a6f13;--snackbar-input-border: #d1c844;--snackbar-progress: #7a6f13}.snackbar.is-error{--snackbar-border-color: var(--colors-border-error, #c73e3d);--snackbar-bg: var(--colors-surface-error, #f9ecec);--snackbar-text: #611a1a;--snackbar-title-color: #611a1a;--snackbar-icon-bg: #e39e9e;--snackbar-accent: #912525;--snackbar-input-border: #c73e3d;--snackbar-progress: #912525}.snackbar{position:fixed;top:24px;right:24px;z-index:1000;transform:translate(120%);transition:transform .6s ease}.snackbar.is-open{transform:translate(0)}lib-status-button{--status-button-padding: .25em .5em .25em 0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: StatusButtonComponent, selector: "lib-status-button", inputs: ["label", "status", "leftIcon", "rightIcon", "hideLeftIcon", "hideRightIcon", "clearVariant"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SnackbarComponent, isStandalone: true, selector: "lib-snackbar", inputs: { purpose: "purpose", title: "title", description: "description", fieldPlaceholder: "fieldPlaceholder", titleIcon: "titleIcon", showTitle: ["showTitle", "showTitle", booleanAttribute], showTitleIcon: ["showTitleIcon", "showTitleIcon", booleanAttribute], titleIconFilled: ["titleIconFilled", "titleIconFilled", booleanAttribute], showClose: ["showClose", "showClose", booleanAttribute], showProgressBar: ["showProgressBar", "showProgressBar", booleanAttribute], showField: ["showField", "showField", booleanAttribute], showButton: ["showButton", "showButton", booleanAttribute], autoDismiss: ["autoDismiss", "autoDismiss", booleanAttribute], visible: ["visible", "visible", booleanAttribute], progressMs: "progressMs", y: "y", statusButtonInputs: "statusButtonInputs" }, outputs: { closed: "closed", visibleChange: "visibleChange", buttonClicked: "buttonClicked" }, usesOnChanges: true, ngImport: i0, template: "@if (visible) {\n    <section\n        class=\"snackbar\"\n        [ngClass]=\"{\n            'is-default': purpose === 'default',\n            'is-info': purpose === 'info',\n            'is-success': purpose === 'success',\n            'is-error': purpose === 'error',\n            'is-warning': purpose === 'warning',\n            'is-open': isOpen,\n        }\"\n        role=\"status\"\n        aria-live=\"polite\"\n        [style.--snackbar-progress-duration]=\"progressMs + 'ms'\"\n        [style.top.px]=\"y\"\n    >\n        <div class=\"snackbar__left\">\n            @if(showTitle) {\n                <div class=\"snackbar__title-row\">\n                    <span \n                        [ngClass]=\"{\n                            'snackbar__title-icon': true,\n                            'has-icon': showTitle && showTitleIcon\n                        }\"\n                        aria-hidden=\"true\"\n                    >\n                        @if (showTitle && showTitleIcon) {\n                            <i [ngClass]=\"titleIconFilled ? 'material-icons' : 'material-icons-outlined'\"\n                                id=\"snackbar-title-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                {{ titleIcon }}\n                            </i>\n                        }\n                    </span>\n                    @if (showTitle) {\n                        <h3 class=\"snackbar__title\">{{ title }}</h3>\n                    }\n                </div>\n            }\n            <p class=\"snackbar__desc\">\n                {{ description }}\n            </p>\n            @if (showField) {\n                <input class=\"snackbar__input\" type=\"text\" [placeholder]=\"fieldPlaceholder\" />\n            }\n            @if (showButton) {\n                <lib-status-button\n                    label={{statusButtonInputs?.label}}\n                    [status]=\"status\"\n                    leftIcon={{statusButtonInputs?.leftIcon}}\n                    rightIcon={{statusButtonInputs?.rightIcon}}\n                    [hideLeftIcon]=\"statusButtonInputs?.hideLeftIcon\"\n                    [hideRightIcon]=\"statusButtonInputs?.hideRightIcon\"\n                    [clearVariant]=\"statusButtonInputs?.clearVariant\"\n                    (click)=\"close(true)\"\n                ></lib-status-button>\n\n            }\n        </div>\n        <button \n            type=\"button\"\n            (click)=\"close()\"\n            class=\"snackbar__close\"\n            aria-label=\"Dismiss\"\n            [style.visibility]=\"showClose ? 'visible' : 'hidden'\"\n        >\n            \u00D7\n        </button>\n        @if (showProgressBar) {\n            <div class=\"snackbar__progress\">\n                <div class=\"snackbar__progress-fill\"></div>\n            </div>\n        }\n    </section>\n}\n", styles: [":root{--border-radius-md: 4px;--colors-border-primary: #d0d0d0;--colors-surface-primary: white;--colors-border-information: #457fa6;--colors-surface-information: #ecf2f6;--colors-border-success: #3ba35a;--colors-surface-success: #ebf6ee;--colors-border-warning: #d1c844;--colors-surface-warning: #faf9ec;--colors-border-error: #c73e3d;--colors-surface-error: #f9ecec}.snackbar{--snackbar-border-color: var(--colors-border-primary);--snackbar-bg: var(--colors-surface-primary);--snackbar-text: #141414;--snackbar-title-color: var(--snackbar-text);--snackbar-icon-bg: #e5edf8;--snackbar-accent: #0047ba;--snackbar-input-border: var(--snackbar-border-color);--snackbar-progress: var(--snackbar-accent);display:flex;max-width:26.25rem;width:calc(100% - 5rem);padding:1.25rem 1rem;justify-content:space-between;align-items:flex-start;gap:.25rem;position:relative;border-radius:var(--border-radius-md, 4px);border:1px solid var(--snackbar-border-color);background:var(--snackbar-bg);box-shadow:1px 1px 4px #00000040;color:var(--snackbar-text)}.snackbar__left{display:grid;gap:.5rem;flex:1 1 auto}.snackbar__left>.snackbar__title-row~*{margin-left:var(--snackbar-right-gutter, 1.85rem)}.snackbar__title-row{display:flex;align-items:center;gap:.25rem}.snackbar__title{margin:0;font-weight:400;font-size:1.2rem;line-height:1.2;color:var(--snackbar-title-color)}.snackbar__title-icon{display:inline-flex;align-items:center;justify-content:center;width:1.5em;height:1.5em}.snackbar__title-icon.has-icon{border-radius:50%;color:var(--snackbar-accent)}.snackbar__icon{font-weight:700;font-size:1rem;line-height:1}.snackbar__desc{margin:0;opacity:.9}.snackbar__input{width:100%;max-width:100%;box-sizing:border-box;padding:.5em;border-radius:4px;border:1px solid var(--snackbar-input-border);background:#fff;color:inherit}.snackbar__close{margin-left:.5em;border:0;background:transparent;color:inherit;opacity:.7;font-size:1.5rem;padding:.25rem;line-height:1;cursor:pointer}.snackbar__progress{position:absolute;left:0;right:0;bottom:-1px;height:4px;overflow:hidden;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.snackbar__progress-fill{height:100%;width:0%;background:var(--snackbar-progress);animation:fill var(--snackbar-progress-duration, 4s) linear forwards}@keyframes fill{to{width:100%}}.snackbar.is-default{--snackbar-border-color: var(--colors-border-primary, #d0d0d0);--snackbar-bg: var(--colors-surface-primary, white);--snackbar-text: #141414;--snackbar-title-color: #003995;--snackbar-icon-bg: #e5edf8;--snackbar-accent: #003995;--snackbar-input-border: #d0d0d0;--snackbar-progress: #003995}.snackbar.is-info{--snackbar-border-color: var(--colors-border-information, #457fa6);--snackbar-bg: var(--colors-surface-information, #ecf2f6);--snackbar-text: #24495c;--snackbar-title-color: #24495c;--snackbar-icon-bg: #a2bfd3;--snackbar-accent: #306a88;--snackbar-input-border: #a2bfd3;--snackbar-progress: #306a88}.snackbar.is-success{--snackbar-border-color: var(--colors-border-success, #3ba35a);--snackbar-bg: var(--colors-surface-success, #ebf6ee);--snackbar-text: #20522e;--snackbar-title-color: #20522e;--snackbar-icon-bg: #9dd1ac;--snackbar-accent: #2e7d3f;--snackbar-input-border: #9dd1ac;--snackbar-progress: #2e7d3f}.snackbar.is-warning{--snackbar-border-color: var(--colors-border-warning, #d1c844);--snackbar-bg: var(--colors-surface-warning, #faf9ec);--snackbar-text: #514a18;--snackbar-title-color: #514a18;--snackbar-icon-bg: #e8e3a1;--snackbar-accent: #7a6f13;--snackbar-input-border: #d1c844;--snackbar-progress: #7a6f13}.snackbar.is-error{--snackbar-border-color: var(--colors-border-error, #c73e3d);--snackbar-bg: var(--colors-surface-error, #f9ecec);--snackbar-text: #611a1a;--snackbar-title-color: #611a1a;--snackbar-icon-bg: #e39e9e;--snackbar-accent: #912525;--snackbar-input-border: #c73e3d;--snackbar-progress: #912525}.snackbar{position:fixed;top:24px;right:24px;z-index:1000;transform:translate(120%);transition:transform .6s ease}.snackbar.is-open{transform:translate(0)}lib-status-button{--status-button-padding: .25em .5em .25em 0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: StatusButtonComponent, selector: "lib-status-button", inputs: ["label", "status", "leftIcon", "rightIcon", "hideLeftIcon", "hideRightIcon", "clearVariant"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SnackbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-snackbar', imports: [NgClass, StatusButtonComponent], template: "@if (visible) {\n    <section\n        class=\"snackbar\"\n        [ngClass]=\"{\n            'is-default': purpose === 'default',\n            'is-info': purpose === 'info',\n            'is-success': purpose === 'success',\n            'is-error': purpose === 'error',\n            'is-warning': purpose === 'warning',\n            'is-open': isOpen,\n        }\"\n        role=\"status\"\n        aria-live=\"polite\"\n        [style.--snackbar-progress-duration]=\"progressMs + 'ms'\"\n        [style.top.px]=\"y\"\n    >\n        <div class=\"snackbar__left\">\n            @if(showTitle) {\n                <div class=\"snackbar__title-row\">\n                    <span \n                        [ngClass]=\"{\n                            'snackbar__title-icon': true,\n                            'has-icon': showTitle && showTitleIcon\n                        }\"\n                        aria-hidden=\"true\"\n                    >\n                        @if (showTitle && showTitleIcon) {\n                            <i [ngClass]=\"titleIconFilled ? 'material-icons' : 'material-icons-outlined'\"\n                                id=\"snackbar-title-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                {{ titleIcon }}\n                            </i>\n                        }\n                    </span>\n                    @if (showTitle) {\n                        <h3 class=\"snackbar__title\">{{ title }}</h3>\n                    }\n                </div>\n            }\n            <p class=\"snackbar__desc\">\n                {{ description }}\n            </p>\n            @if (showField) {\n                <input class=\"snackbar__input\" type=\"text\" [placeholder]=\"fieldPlaceholder\" />\n            }\n            @if (showButton) {\n                <lib-status-button\n                    label={{statusButtonInputs?.label}}\n                    [status]=\"status\"\n                    leftIcon={{statusButtonInputs?.leftIcon}}\n                    rightIcon={{statusButtonInputs?.rightIcon}}\n                    [hideLeftIcon]=\"statusButtonInputs?.hideLeftIcon\"\n                    [hideRightIcon]=\"statusButtonInputs?.hideRightIcon\"\n                    [clearVariant]=\"statusButtonInputs?.clearVariant\"\n                    (click)=\"close(true)\"\n                ></lib-status-button>\n\n            }\n        </div>\n        <button \n            type=\"button\"\n            (click)=\"close()\"\n            class=\"snackbar__close\"\n            aria-label=\"Dismiss\"\n            [style.visibility]=\"showClose ? 'visible' : 'hidden'\"\n        >\n            \u00D7\n        </button>\n        @if (showProgressBar) {\n            <div class=\"snackbar__progress\">\n                <div class=\"snackbar__progress-fill\"></div>\n            </div>\n        }\n    </section>\n}\n", styles: [":root{--border-radius-md: 4px;--colors-border-primary: #d0d0d0;--colors-surface-primary: white;--colors-border-information: #457fa6;--colors-surface-information: #ecf2f6;--colors-border-success: #3ba35a;--colors-surface-success: #ebf6ee;--colors-border-warning: #d1c844;--colors-surface-warning: #faf9ec;--colors-border-error: #c73e3d;--colors-surface-error: #f9ecec}.snackbar{--snackbar-border-color: var(--colors-border-primary);--snackbar-bg: var(--colors-surface-primary);--snackbar-text: #141414;--snackbar-title-color: var(--snackbar-text);--snackbar-icon-bg: #e5edf8;--snackbar-accent: #0047ba;--snackbar-input-border: var(--snackbar-border-color);--snackbar-progress: var(--snackbar-accent);display:flex;width:26.25rem;padding:1.25rem 1rem;justify-content:space-between;align-items:flex-start;gap:.25rem;position:relative;border-radius:var(--border-radius-md, 4px);border:1px solid var(--snackbar-border-color);background:var(--snackbar-bg);box-shadow:1px 1px 4px #00000040;color:var(--snackbar-text)}.snackbar__left{display:grid;gap:.5rem;flex:1 1 auto}.snackbar__left>.snackbar__title-row~*{margin-left:var(--snackbar-right-gutter, 1.85rem)}.snackbar__title-row{display:flex;align-items:center;gap:.25rem}.snackbar__title{margin:0;font-weight:400;font-size:1.2rem;line-height:1.2;color:var(--snackbar-title-color)}.snackbar__title-icon{display:inline-flex;align-items:center;justify-content:center;width:1.5em;height:1.5em}.snackbar__title-icon.has-icon{border-radius:50%;color:var(--snackbar-accent)}.snackbar__icon{font-weight:700;font-size:1rem;line-height:1}.snackbar__desc{margin:0;opacity:.9}.snackbar__input{width:100%;max-width:100%;box-sizing:border-box;padding:.5em;border-radius:4px;border:1px solid var(--snackbar-input-border);background:#fff;color:inherit}.snackbar__close{margin-left:.5em;border:0;background:transparent;color:inherit;opacity:.7;font-size:1.5rem;padding:.25rem;line-height:1;cursor:pointer}.snackbar__progress{position:absolute;left:0;right:0;bottom:-1px;height:4px;overflow:hidden;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.snackbar__progress-fill{height:100%;width:0%;background:var(--snackbar-progress);animation:fill var(--snackbar-progress-duration, 4s) linear forwards}@keyframes fill{to{width:100%}}.snackbar.is-default{--snackbar-border-color: var(--colors-border-primary, #d0d0d0);--snackbar-bg: var(--colors-surface-primary, white);--snackbar-text: #141414;--snackbar-title-color: #003995;--snackbar-icon-bg: #e5edf8;--snackbar-accent: #003995;--snackbar-input-border: #d0d0d0;--snackbar-progress: #003995}.snackbar.is-info{--snackbar-border-color: var(--colors-border-information, #457fa6);--snackbar-bg: var(--colors-surface-information, #ecf2f6);--snackbar-text: #24495c;--snackbar-title-color: #24495c;--snackbar-icon-bg: #a2bfd3;--snackbar-accent: #306a88;--snackbar-input-border: #a2bfd3;--snackbar-progress: #306a88}.snackbar.is-success{--snackbar-border-color: var(--colors-border-success, #3ba35a);--snackbar-bg: var(--colors-surface-success, #ebf6ee);--snackbar-text: #20522e;--snackbar-title-color: #20522e;--snackbar-icon-bg: #9dd1ac;--snackbar-accent: #2e7d3f;--snackbar-input-border: #9dd1ac;--snackbar-progress: #2e7d3f}.snackbar.is-warning{--snackbar-border-color: var(--colors-border-warning, #d1c844);--snackbar-bg: var(--colors-surface-warning, #faf9ec);--snackbar-text: #514a18;--snackbar-title-color: #514a18;--snackbar-icon-bg: #e8e3a1;--snackbar-accent: #7a6f13;--snackbar-input-border: #d1c844;--snackbar-progress: #7a6f13}.snackbar.is-error{--snackbar-border-color: var(--colors-border-error, #c73e3d);--snackbar-bg: var(--colors-surface-error, #f9ecec);--snackbar-text: #611a1a;--snackbar-title-color: #611a1a;--snackbar-icon-bg: #e39e9e;--snackbar-accent: #912525;--snackbar-input-border: #c73e3d;--snackbar-progress: #912525}.snackbar{position:fixed;top:24px;right:24px;z-index:1000;transform:translate(120%);transition:transform .6s ease}.snackbar.is-open{transform:translate(0)}lib-status-button{--status-button-padding: .25em .5em .25em 0}\n"] }]
+            args: [{ selector: 'lib-snackbar', imports: [NgClass, StatusButtonComponent], template: "@if (visible) {\n    <section\n        class=\"snackbar\"\n        [ngClass]=\"{\n            'is-default': purpose === 'default',\n            'is-info': purpose === 'info',\n            'is-success': purpose === 'success',\n            'is-error': purpose === 'error',\n            'is-warning': purpose === 'warning',\n            'is-open': isOpen,\n        }\"\n        role=\"status\"\n        aria-live=\"polite\"\n        [style.--snackbar-progress-duration]=\"progressMs + 'ms'\"\n        [style.top.px]=\"y\"\n    >\n        <div class=\"snackbar__left\">\n            @if(showTitle) {\n                <div class=\"snackbar__title-row\">\n                    <span \n                        [ngClass]=\"{\n                            'snackbar__title-icon': true,\n                            'has-icon': showTitle && showTitleIcon\n                        }\"\n                        aria-hidden=\"true\"\n                    >\n                        @if (showTitle && showTitleIcon) {\n                            <i [ngClass]=\"titleIconFilled ? 'material-icons' : 'material-icons-outlined'\"\n                                id=\"snackbar-title-icon\"\n                                aria-hidden=\"true\"\n                            >\n                                {{ titleIcon }}\n                            </i>\n                        }\n                    </span>\n                    @if (showTitle) {\n                        <h3 class=\"snackbar__title\">{{ title }}</h3>\n                    }\n                </div>\n            }\n            <p class=\"snackbar__desc\">\n                {{ description }}\n            </p>\n            @if (showField) {\n                <input class=\"snackbar__input\" type=\"text\" [placeholder]=\"fieldPlaceholder\" />\n            }\n            @if (showButton) {\n                <lib-status-button\n                    label={{statusButtonInputs?.label}}\n                    [status]=\"status\"\n                    leftIcon={{statusButtonInputs?.leftIcon}}\n                    rightIcon={{statusButtonInputs?.rightIcon}}\n                    [hideLeftIcon]=\"statusButtonInputs?.hideLeftIcon\"\n                    [hideRightIcon]=\"statusButtonInputs?.hideRightIcon\"\n                    [clearVariant]=\"statusButtonInputs?.clearVariant\"\n                    (click)=\"close(true)\"\n                ></lib-status-button>\n\n            }\n        </div>\n        <button \n            type=\"button\"\n            (click)=\"close()\"\n            class=\"snackbar__close\"\n            aria-label=\"Dismiss\"\n            [style.visibility]=\"showClose ? 'visible' : 'hidden'\"\n        >\n            \u00D7\n        </button>\n        @if (showProgressBar) {\n            <div class=\"snackbar__progress\">\n                <div class=\"snackbar__progress-fill\"></div>\n            </div>\n        }\n    </section>\n}\n", styles: [":root{--border-radius-md: 4px;--colors-border-primary: #d0d0d0;--colors-surface-primary: white;--colors-border-information: #457fa6;--colors-surface-information: #ecf2f6;--colors-border-success: #3ba35a;--colors-surface-success: #ebf6ee;--colors-border-warning: #d1c844;--colors-surface-warning: #faf9ec;--colors-border-error: #c73e3d;--colors-surface-error: #f9ecec}.snackbar{--snackbar-border-color: var(--colors-border-primary);--snackbar-bg: var(--colors-surface-primary);--snackbar-text: #141414;--snackbar-title-color: var(--snackbar-text);--snackbar-icon-bg: #e5edf8;--snackbar-accent: #0047ba;--snackbar-input-border: var(--snackbar-border-color);--snackbar-progress: var(--snackbar-accent);display:flex;max-width:26.25rem;width:calc(100% - 5rem);padding:1.25rem 1rem;justify-content:space-between;align-items:flex-start;gap:.25rem;position:relative;border-radius:var(--border-radius-md, 4px);border:1px solid var(--snackbar-border-color);background:var(--snackbar-bg);box-shadow:1px 1px 4px #00000040;color:var(--snackbar-text)}.snackbar__left{display:grid;gap:.5rem;flex:1 1 auto}.snackbar__left>.snackbar__title-row~*{margin-left:var(--snackbar-right-gutter, 1.85rem)}.snackbar__title-row{display:flex;align-items:center;gap:.25rem}.snackbar__title{margin:0;font-weight:400;font-size:1.2rem;line-height:1.2;color:var(--snackbar-title-color)}.snackbar__title-icon{display:inline-flex;align-items:center;justify-content:center;width:1.5em;height:1.5em}.snackbar__title-icon.has-icon{border-radius:50%;color:var(--snackbar-accent)}.snackbar__icon{font-weight:700;font-size:1rem;line-height:1}.snackbar__desc{margin:0;opacity:.9}.snackbar__input{width:100%;max-width:100%;box-sizing:border-box;padding:.5em;border-radius:4px;border:1px solid var(--snackbar-input-border);background:#fff;color:inherit}.snackbar__close{margin-left:.5em;border:0;background:transparent;color:inherit;opacity:.7;font-size:1.5rem;padding:.25rem;line-height:1;cursor:pointer}.snackbar__progress{position:absolute;left:0;right:0;bottom:-1px;height:4px;overflow:hidden;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.snackbar__progress-fill{height:100%;width:0%;background:var(--snackbar-progress);animation:fill var(--snackbar-progress-duration, 4s) linear forwards}@keyframes fill{to{width:100%}}.snackbar.is-default{--snackbar-border-color: var(--colors-border-primary, #d0d0d0);--snackbar-bg: var(--colors-surface-primary, white);--snackbar-text: #141414;--snackbar-title-color: #003995;--snackbar-icon-bg: #e5edf8;--snackbar-accent: #003995;--snackbar-input-border: #d0d0d0;--snackbar-progress: #003995}.snackbar.is-info{--snackbar-border-color: var(--colors-border-information, #457fa6);--snackbar-bg: var(--colors-surface-information, #ecf2f6);--snackbar-text: #24495c;--snackbar-title-color: #24495c;--snackbar-icon-bg: #a2bfd3;--snackbar-accent: #306a88;--snackbar-input-border: #a2bfd3;--snackbar-progress: #306a88}.snackbar.is-success{--snackbar-border-color: var(--colors-border-success, #3ba35a);--snackbar-bg: var(--colors-surface-success, #ebf6ee);--snackbar-text: #20522e;--snackbar-title-color: #20522e;--snackbar-icon-bg: #9dd1ac;--snackbar-accent: #2e7d3f;--snackbar-input-border: #9dd1ac;--snackbar-progress: #2e7d3f}.snackbar.is-warning{--snackbar-border-color: var(--colors-border-warning, #d1c844);--snackbar-bg: var(--colors-surface-warning, #faf9ec);--snackbar-text: #514a18;--snackbar-title-color: #514a18;--snackbar-icon-bg: #e8e3a1;--snackbar-accent: #7a6f13;--snackbar-input-border: #d1c844;--snackbar-progress: #7a6f13}.snackbar.is-error{--snackbar-border-color: var(--colors-border-error, #c73e3d);--snackbar-bg: var(--colors-surface-error, #f9ecec);--snackbar-text: #611a1a;--snackbar-title-color: #611a1a;--snackbar-icon-bg: #e39e9e;--snackbar-accent: #912525;--snackbar-input-border: #c73e3d;--snackbar-progress: #912525}.snackbar{position:fixed;top:24px;right:24px;z-index:1000;transform:translate(120%);transition:transform .6s ease}.snackbar.is-open{transform:translate(0)}lib-status-button{--status-button-padding: .25em .5em .25em 0}\n"] }]
         }], propDecorators: { purpose: [{
                 type: Input
             }], title: [{
@@ -2493,6 +2580,271 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             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: "19.2.17", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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: "19.2.17", 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: "19.2.17", ngImport: i0, type: ButtonGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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: "19.2.17", 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: "19.2.17", ngImport: i0, type: ButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", 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: "19.2.17", 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
  */
@@ -2501,5 +2853,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
  * 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, ButtonGroupItemComponent, 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