@byuhbll/components 5.1.0-beta.2 → 5.1.0-beta.3

package/esm2022/lib/subatomic-components/button-group-item/button-group-item.component.mjs

@@ -0,0 +1,39 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import * as i0 from "@angular/core";
+export 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
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLWdyb3VwLWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50cy9zcmMvbGliL3N1YmF0b21pYy1jb21wb25lbnRzL2J1dHRvbi1ncm91cC1pdGVtL2J1dHRvbi1ncm91cC1pdGVtLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudHMvc3JjL2xpYi9zdWJhdG9taWMtY29tcG9uZW50cy9idXR0b24tZ3JvdXAtaXRlbS9idXR0b24tZ3JvdXAtaXRlbS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7QUFTL0MsTUFBTSxPQUFPLHdCQUF3QjtJQVByQztRQVlhLGFBQVEsR0FBWSxLQUFLLENBQUM7UUFFekIsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO1FBQ25ELHNEQUFzRDtRQUMvQyxhQUFRLEdBQVksS0FBSyxDQUFDO0tBUXBDO0lBTkc7O09BRUc7SUFDSCxPQUFPO1FBQ0gsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDO0lBQ25DLENBQUM7OEdBaEJRLHdCQUF3QjtrR0FBeEIsd0JBQXdCLGtQQ1ZyQyx1a0JBcUJBLDZpQ0RmYyxZQUFZOzsyRkFJYix3QkFBd0I7a0JBUHBDLFNBQVM7K0JBQ0ksdUJBQXVCLGNBQ3JCLElBQUksV0FDUCxDQUFDLFlBQVksQ0FBQzs4QkFLSSxFQUFFO3NCQUE1QixLQUFLO3VCQUFDLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRTtnQkFDaEIsS0FBSztzQkFBYixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDSSxXQUFXO3NCQUFwQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnbGliLWJ1dHRvbi1ncm91cC1pdGVtJyxcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9idXR0b24tZ3JvdXAtaXRlbS5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmw6ICcuL2J1dHRvbi1ncm91cC1pdGVtLmNvbXBvbmVudC5zY3NzJyxcbn0pXG5leHBvcnQgY2xhc3MgQnV0dG9uR3JvdXBJdGVtQ29tcG9uZW50IHtcbiAgICBASW5wdXQoeyByZXF1aXJlZDogdHJ1ZSB9KSBpZCE6IHN0cmluZztcbiAgICBASW5wdXQoKSB0aXRsZT86IHN0cmluZztcbiAgICBASW5wdXQoKSBpY29uPzogc3RyaW5nO1xuICAgIEBJbnB1dCgpIGFyaWFMYWJlbD86IHN0cmluZztcbiAgICBASW5wdXQoKSBkaXNhYmxlZDogYm9vbGVhbiA9IGZhbHNlO1xuICAgIEBJbnB1dCgpIHBvc2l0aW9uPzogJ2ZpcnN0JyB8ICdsYXN0JyB8ICdtaWRkbGUnO1xuICAgIEBPdXRwdXQoKSBidXR0b25DbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuICAgIC8vIFNldCBieSBwYXJlbnQgYnV0dG9uIGdyb3VwIGFmdGVyIGNvbnRlbnQgcHJvamVjdGlvblxuICAgIHB1YmxpYyBpc0FjdGl2ZTogYm9vbGVhbiA9IGZhbHNlO1xuXG4gICAgLyoqXG4gICAgICogSGFuZGxlcyB0aGUgYnV0dG9uIGNsaWNrIGV2ZW50IGFuZCBlbWl0cyB0aGUgYnV0dG9uJ3MgSUQgdG8gdGhlIHBhcmVudCBjb21wb25lbnQuXG4gICAgICovXG4gICAgb25DbGljaygpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5idXR0b25DbGljay5lbWl0KHRoaXMuaWQpO1xuICAgIH1cbn1cbiIsIjxidXR0b25cbiAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICBjbGFzcz1cInRhYi1idG5cIlxuICAgIFtjbGFzcy5maXJzdF09XCJwb3NpdGlvbiA9PT0gJ2ZpcnN0J1wiXG4gICAgW2NsYXNzLmxhc3RdPVwicG9zaXRpb24gPT09ICdsYXN0J1wiXG4gICAgW2NsYXNzLmFjdGl2ZV09XCJpc0FjdGl2ZVwiXG4gICAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgICAoY2xpY2spPVwib25DbGljaygpXCJcbiAgICByb2xlPVwidGFiXCJcbiAgICBbYXR0ci5hcmlhLXByZXNzZWRdPVwiaXNBY3RpdmVcIlxuICAgIFthdHRyLmFyaWEtbGFiZWxdPVwiYXJpYUxhYmVsID8gYXJpYUxhYmVsIDogbnVsbFwiXG4gICAgW2F0dHIudGFiaW5kZXhdPVwiZGlzYWJsZWQgPyAtMSA6IDBcIlxuPlxuICAgIEBpZiAoaWNvbikge1xuICAgICAgICA8c3BhbiBjbGFzcz1cImljb24gbWF0ZXJpYWwtc3ltYm9scy1vdXRsaW5lZFwiPnt7IGljb24gfX08L3NwYW4+XG4gICAgfVxuXG4gICAgQGlmICh0aXRsZSkge1xuICAgICAgICA8c3BhbiBjbGFzcz1cImJ1dHRvbi10aXRsZVwiPnt7IHRpdGxlIH19PC9zcGFuPlxuICAgIH1cbjwvYnV0dG9uPlxuIl19

package/esm2022/public-api.mjs

@@ -16,4 +16,7 @@ export * from './lib/snackbar/snackbar.component';
 export { getUserStatusFromRoles } from './lib/contact-utils';
 export { ADVANCED_SEARCH_QUALIFIER_MAP, ADVANCED_SEARCH_FIELD_MAP, ADVANCED_SEARCH_OPTIONS, } from './lib/ss-search-bar/constants';
 export * from './lib/status-button/status-button.component';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudHMvc3JjL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLHlDQUF5QyxDQUFDO0FBQ3hELGNBQWMsc0NBQXNDLENBQUM7QUFDckQsY0FBYyx5Q0FBeUMsQ0FBQztBQUN4RCxjQUFjLHFFQUFxRSxDQUFDO0FBQ3BGLGNBQWMscURBQXFELENBQUM7QUFDcEUsY0FBYywyREFBMkQsQ0FBQztBQUMxRSxjQUFjLDZDQUE2QyxDQUFDO0FBQzVELGNBQWMsa0RBQWtELENBQUM7QUFDakUsY0FBYywrQ0FBK0MsQ0FBQztBQUM5RCxjQUFjLGdEQUFnRCxDQUFDO0FBQy9ELGNBQWMsaUNBQWlDLENBQUM7QUFDaEQsY0FBYyxtQ0FBbUMsQ0FBQztBQUNsRCxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUM3RCxPQUFPLEVBQ0gsNkJBQTZCLEVBQzdCLHlCQUF5QixFQUN6Qix1QkFBdUIsR0FDMUIsTUFBTSwrQkFBK0IsQ0FBQztBQUN2QyxjQUFjLDZDQUE2QyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBjb21wb25lbnRzXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9saWIvaGJsbC1oZWFkZXIvaGJsbC1oZWFkZXIuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3BpcGVzL2hibGwtaXRlbS10eXBlLWljb24ucGlwZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9oYmxsLWZvb3Rlci9oYmxsLWZvb3Rlci5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvaGVhZGVyLXdpdGgtaW1wZXJzb25hdGlvbi9oZWFkZXItd2l0aC1pbXBlcnNvbmF0aW9uLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9pbXBlcnNvbmF0ZS1tb2RhbC9pbXBlcnNvbmF0ZS1tb2RhbC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvaW1wZXJzb25hdGlvbi1iYW5uZXIvaW1wZXJzb25hdGlvbi1iYW5uZXIuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3NzLXNlYXJjaC1iYXIvc3Mtc2VhcmNoLWJhci5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc3Mtc2VhcmNoLWJhci9tb2RlbHMvYWR2YW5jZWQtc2VhcmNoLm1vZGVsJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3NzLXNlYXJjaC1iYXIvbW9kZWxzL3NlYXJjaC1zY29wZS5tb2RlbCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9zcy1zZWFyY2gtYmFyL21vZGVscy9zZWFyY2gtY29uZmlnLm1vZGVsJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3NuYWNrYmFyL3NuYWNrYmFyLnNlcnZpY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc25hY2tiYXIvc25hY2tiYXIuY29tcG9uZW50JztcbmV4cG9ydCB7IGdldFVzZXJTdGF0dXNGcm9tUm9sZXMgfSBmcm9tICcuL2xpYi9jb250YWN0LXV0aWxzJztcbmV4cG9ydCB7XG4gICAgQURWQU5DRURfU0VBUkNIX1FVQUxJRklFUl9NQVAsXG4gICAgQURWQU5DRURfU0VBUkNIX0ZJRUxEX01BUCxcbiAgICBBRFZBTkNFRF9TRUFSQ0hfT1BUSU9OUyxcbn0gZnJvbSAnLi9saWIvc3Mtc2VhcmNoLWJhci9jb25zdGFudHMnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc3RhdHVzLWJ1dHRvbi9zdGF0dXMtYnV0dG9uLmNvbXBvbmVudCc7XG4iXX0=
+export * from './lib/button/button.component';
+export * from './lib/button-group/button-group.component';
+export * from './lib/subatomic-components/button-group-item/button-group-item.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudHMvc3JjL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLHlDQUF5QyxDQUFDO0FBQ3hELGNBQWMsc0NBQXNDLENBQUM7QUFDckQsY0FBYyx5Q0FBeUMsQ0FBQztBQUN4RCxjQUFjLHFFQUFxRSxDQUFDO0FBQ3BGLGNBQWMscURBQXFELENBQUM7QUFDcEUsY0FBYywyREFBMkQsQ0FBQztBQUMxRSxjQUFjLDZDQUE2QyxDQUFDO0FBQzVELGNBQWMsa0RBQWtELENBQUM7QUFDakUsY0FBYywrQ0FBK0MsQ0FBQztBQUM5RCxjQUFjLGdEQUFnRCxDQUFDO0FBQy9ELGNBQWMsaUNBQWlDLENBQUM7QUFDaEQsY0FBYyxtQ0FBbUMsQ0FBQztBQUNsRCxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUM3RCxPQUFPLEVBQ0gsNkJBQTZCLEVBQzdCLHlCQUF5QixFQUN6Qix1QkFBdUIsR0FDMUIsTUFBTSwrQkFBK0IsQ0FBQztBQUN2QyxjQUFjLDZDQUE2QyxDQUFDO0FBQzVELGNBQWMsK0JBQStCLENBQUM7QUFDOUMsY0FBYywyQ0FBMkMsQ0FBQztBQUMxRCxjQUFjLDBFQUEwRSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBjb21wb25lbnRzXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9saWIvaGJsbC1oZWFkZXIvaGJsbC1oZWFkZXIuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3BpcGVzL2hibGwtaXRlbS10eXBlLWljb24ucGlwZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9oYmxsLWZvb3Rlci9oYmxsLWZvb3Rlci5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvaGVhZGVyLXdpdGgtaW1wZXJzb25hdGlvbi9oZWFkZXItd2l0aC1pbXBlcnNvbmF0aW9uLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9pbXBlcnNvbmF0ZS1tb2RhbC9pbXBlcnNvbmF0ZS1tb2RhbC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvaW1wZXJzb25hdGlvbi1iYW5uZXIvaW1wZXJzb25hdGlvbi1iYW5uZXIuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3NzLXNlYXJjaC1iYXIvc3Mtc2VhcmNoLWJhci5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc3Mtc2VhcmNoLWJhci9tb2RlbHMvYWR2YW5jZWQtc2VhcmNoLm1vZGVsJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3NzLXNlYXJjaC1iYXIvbW9kZWxzL3NlYXJjaC1zY29wZS5tb2RlbCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9zcy1zZWFyY2gtYmFyL21vZGVscy9zZWFyY2gtY29uZmlnLm1vZGVsJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3NuYWNrYmFyL3NuYWNrYmFyLnNlcnZpY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc25hY2tiYXIvc25hY2tiYXIuY29tcG9uZW50JztcbmV4cG9ydCB7IGdldFVzZXJTdGF0dXNGcm9tUm9sZXMgfSBmcm9tICcuL2xpYi9jb250YWN0LXV0aWxzJztcbmV4cG9ydCB7XG4gICAgQURWQU5DRURfU0VBUkNIX1FVQUxJRklFUl9NQVAsXG4gICAgQURWQU5DRURfU0VBUkNIX0ZJRUxEX01BUCxcbiAgICBBRFZBTkNFRF9TRUFSQ0hfT1BUSU9OUyxcbn0gZnJvbSAnLi9saWIvc3Mtc2VhcmNoLWJhci9jb25zdGFudHMnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc3RhdHVzLWJ1dHRvbi9zdGF0dXMtYnV0dG9uLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9idXR0b24vYnV0dG9uLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9idXR0b24tZ3JvdXAvYnV0dG9uLWdyb3VwLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9zdWJhdG9taWMtY29tcG9uZW50cy9idXR0b24tZ3JvdXAtaXRlbS9idXR0b24tZ3JvdXAtaXRlbS5jb21wb25lbnQnO1xuIl19

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, 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';
@@ -1104,7 +1104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
             }] } });
 
 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' : ''}`;
@@ -1302,6 +1302,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: "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"] }] }); }
@@ -2622,6 +2709,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
  */
@@ -2630,5 +2982,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, 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