@byuhbll/components 4.3.2 → 4.4.0

package/fesm2022/byuhbll-components.mjs

@@ -1,9 +1,9 @@
 import * as i1 from '@angular/common';
-import { CommonModule, DatePipe, DOCUMENT, LowerCasePipe, NgIf } from '@angular/common';
+import { CommonModule, DatePipe, DOCUMENT, LowerCasePipe, 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 { Component, ChangeDetectionStrategy, ViewChild, Input, input, EventEmitter, Output, inject, computed, ViewChildren, Pipe, Renderer2, viewChild, HostListener, ElementRef, ViewEncapsulation, booleanAttribute } 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 { 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';
@@ -2187,6 +2187,7 @@ class StatusButtonComponent {
         this._rightIcon = '';
         this._hideLeftIcon = false;
         this._hideRightIcon = false;
+        this._clearVariant = false;
     }
     set status(value) {
         this._status = value || 'info';
@@ -2222,6 +2223,12 @@ class StatusButtonComponent {
     get hideRightIcon() {
         return this._hideRightIcon;
     }
+    set clearVariant(value) {
+        this._clearVariant = value;
+    }
+    get clearVariant() {
+        return this._clearVariant;
+    }
     /** helper for default left icons */
     getDefaultLeftIcon(status) {
         switch (status) {
@@ -2240,11 +2247,11 @@ class StatusButtonComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: StatusButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.0", type: StatusButtonComponent, isStandalone: true, selector: "lib-status-button", inputs: { label: "label", status: "status", leftIcon: "leftIcon", rightIcon: "rightIcon", hideLeftIcon: ["hideLeftIcon", "hideLeftIcon", booleanAttribute], hideRightIcon: ["hideRightIcon", "hideRightIcon", booleanAttribute] }, ngImport: i0, template: "<button\n    type=\"button\"\n    [className]=\"status\"\n>\n    <span *ngIf=\"leftIcon\" class=\"icon material-symbols-outlined\">{{ leftIcon }}</span>\n    {{ label }}\n    <span *ngIf=\"rightIcon\" class=\"icon material-symbols-outlined\">{{ rightIcon }}</span>\n</button>\n", styles: ["button{align-items:center;background-color:#ecf2f6;border:1px solid #457fa6;border-radius:4px;color:#3e7295;display:inline-flex;flex-shrink:0;font-size:16px;font-weight:400;gap:8px;height:36px;justify-content:center;padding:4px 8px}button .icon{font-size:20px}button:focus{outline:2px solid #b967c7;outline-offset:2px}button:hover{background-color:#a2bfd3;color:#26485f;cursor:pointer}button.success{background-color:#ebf6ee;border:1px solid #3ba35a;color:#1d562e}button.success:hover{background-color:#9dd1ac;color:#1d562e}button.info{background-color:#ecf2f6;border:1px solid #457fa6;color:#3e7295}button.info:hover{background-color:#a2bfd3;color:#26485f}button.warning{background-color:#faf9ec;border:1px solid #d1c844;color:#635f04}button.warning:hover{background-color:#e8e3a1;color:#635f04}button.error{background-color:#f9ecec;border:1px solid #c73e3d;color:#702121}button.error:hover{background-color:#e39e9e;color:#702121}button.disabled{background-color:#e7e7e7;border:1px solid #8f8f8f;color:#767676}button.disabled:hover{background-color:#d0d0d0;color:#141414}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.0", type: StatusButtonComponent, isStandalone: true, selector: "lib-status-button", inputs: { label: "label", status: "status", leftIcon: "leftIcon", rightIcon: "rightIcon", hideLeftIcon: ["hideLeftIcon", "hideLeftIcon", booleanAttribute], hideRightIcon: ["hideRightIcon", "hideRightIcon", booleanAttribute], clearVariant: ["clearVariant", "clearVariant", booleanAttribute] }, ngImport: i0, template: "<button\n    type=\"button\"\n    [ngClass]=\"[\n        status,\n        clearVariant ? 'strokeless transparent-bg' : ''\n    ]\"\n>\n    <span *ngIf=\"leftIcon\" class=\"icon material-symbols-outlined\">{{ leftIcon }}</span>\n    {{ label }}\n    <span *ngIf=\"rightIcon\" class=\"icon material-symbols-outlined\">{{ rightIcon }}</span>\n</button>\n", styles: ["button{align-items:center;background-color:#ecf2f6;border:1px solid #457fa6;border-radius:4px;color:#3e7295;display:inline-flex;flex-shrink:0;font-size:1em;font-weight:400;gap:.5em;height:2.25em;justify-content:center;padding:var(--status-button-padding, .25em .5em)}button .icon{font-size:1.25em}button:focus{outline:2px solid #b967c7;outline-offset:2px}button:hover{background-color:#a2bfd3;color:#26485f;cursor:pointer}button.success{background-color:#ebf6ee;border:1px solid #3ba35a;color:#1d562e}button.success:hover{background-color:#9dd1ac;color:#1d562e}button.info{background-color:#ecf2f6;border:1px solid #457fa6;color:#3e7295}button.info:hover{background-color:#a2bfd3;color:#26485f}button.warning{background-color:#faf9ec;border:1px solid #d1c844;color:#635f04}button.warning:hover{background-color:#e8e3a1;color:#635f04}button.error{background-color:#f9ecec;border:1px solid #c73e3d;color:#702121}button.error:hover{background-color:#e39e9e;color:#702121}button.disabled{background-color:#e7e7e7;border:1px solid #8f8f8f;color:#767676}button.disabled:hover{background-color:#d0d0d0;color:#141414}button.strokeless{border:0px}button.transparent-bg{background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: StatusButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-status-button', standalone: true, imports: [CommonModule, NgIf], template: "<button\n    type=\"button\"\n    [className]=\"status\"\n>\n    <span *ngIf=\"leftIcon\" class=\"icon material-symbols-outlined\">{{ leftIcon }}</span>\n    {{ label }}\n    <span *ngIf=\"rightIcon\" class=\"icon material-symbols-outlined\">{{ rightIcon }}</span>\n</button>\n", styles: ["button{align-items:center;background-color:#ecf2f6;border:1px solid #457fa6;border-radius:4px;color:#3e7295;display:inline-flex;flex-shrink:0;font-size:16px;font-weight:400;gap:8px;height:36px;justify-content:center;padding:4px 8px}button .icon{font-size:20px}button:focus{outline:2px solid #b967c7;outline-offset:2px}button:hover{background-color:#a2bfd3;color:#26485f;cursor:pointer}button.success{background-color:#ebf6ee;border:1px solid #3ba35a;color:#1d562e}button.success:hover{background-color:#9dd1ac;color:#1d562e}button.info{background-color:#ecf2f6;border:1px solid #457fa6;color:#3e7295}button.info:hover{background-color:#a2bfd3;color:#26485f}button.warning{background-color:#faf9ec;border:1px solid #d1c844;color:#635f04}button.warning:hover{background-color:#e8e3a1;color:#635f04}button.error{background-color:#f9ecec;border:1px solid #c73e3d;color:#702121}button.error:hover{background-color:#e39e9e;color:#702121}button.disabled{background-color:#e7e7e7;border:1px solid #8f8f8f;color:#767676}button.disabled:hover{background-color:#d0d0d0;color:#141414}\n"] }]
+            args: [{ selector: 'lib-status-button', standalone: true, imports: [CommonModule, NgIf], template: "<button\n    type=\"button\"\n    [ngClass]=\"[\n        status,\n        clearVariant ? 'strokeless transparent-bg' : ''\n    ]\"\n>\n    <span *ngIf=\"leftIcon\" class=\"icon material-symbols-outlined\">{{ leftIcon }}</span>\n    {{ label }}\n    <span *ngIf=\"rightIcon\" class=\"icon material-symbols-outlined\">{{ rightIcon }}</span>\n</button>\n", styles: ["button{align-items:center;background-color:#ecf2f6;border:1px solid #457fa6;border-radius:4px;color:#3e7295;display:inline-flex;flex-shrink:0;font-size:1em;font-weight:400;gap:.5em;height:2.25em;justify-content:center;padding:var(--status-button-padding, .25em .5em)}button .icon{font-size:1.25em}button:focus{outline:2px solid #b967c7;outline-offset:2px}button:hover{background-color:#a2bfd3;color:#26485f;cursor:pointer}button.success{background-color:#ebf6ee;border:1px solid #3ba35a;color:#1d562e}button.success:hover{background-color:#9dd1ac;color:#1d562e}button.info{background-color:#ecf2f6;border:1px solid #457fa6;color:#3e7295}button.info:hover{background-color:#a2bfd3;color:#26485f}button.warning{background-color:#faf9ec;border:1px solid #d1c844;color:#635f04}button.warning:hover{background-color:#e8e3a1;color:#635f04}button.error{background-color:#f9ecec;border:1px solid #c73e3d;color:#702121}button.error:hover{background-color:#e39e9e;color:#702121}button.disabled{background-color:#e7e7e7;border:1px solid #8f8f8f;color:#767676}button.disabled:hover{background-color:#d0d0d0;color:#141414}button.strokeless{border:0px}button.transparent-bg{background:transparent}\n"] }]
         }], propDecorators: { label: [{
                 type: Input,
                 args: [{ required: true }]
@@ -2260,8 +2267,228 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
             }], hideRightIcon: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], clearVariant: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }] } });
 
+const purposeToStatusMap = {
+    default: 'info',
+    info: 'info',
+    success: 'success',
+    error: 'error',
+    warning: 'warning',
+};
+class SnackbarComponent {
+    constructor() {
+        this.purpose = 'default';
+        this.title = 'Snackbar Title';
+        this.description = 'Lorem ipsum';
+        this.fieldPlaceholder = 'Placeholder';
+        this.titleIcon = 'info';
+        this.buttonLabel = 'Done';
+        this.showTitle = true;
+        this.showTitleIcon = true;
+        this.showClose = true;
+        this.showProgressBar = true;
+        this.showField = true;
+        this.showButton = true;
+        this.autoDismiss = true;
+        this.visible = true;
+        this.progressMs = 4000;
+        this.y = 24;
+        this.closed = new EventEmitter();
+        this.visibleChange = new EventEmitter();
+        this.isOpen = false;
+        this.EXIT_MS = 300;
+    }
+    ngOnInit() {
+        if (this.visible) {
+            // enter on next tick
+            setTimeout(() => (this.isOpen = true), 0);
+            this.startDismissTimer();
+        }
+    }
+    ngOnChanges(changes) {
+        if ('visible' in changes) {
+            // when parent toggles visible
+            if (this.visible) {
+                // becoming visible -> open + (re)start timer
+                this.isOpen = false;
+                setTimeout(() => (this.isOpen = true), 0);
+                this.startDismissTimer();
+            }
+            else {
+                // becoming hidden -> stop timers and ensure closed state
+                this.clearDismissTimer();
+                this.isOpen = false;
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.clearDismissTimer();
+    }
+    // used by the × button, done button, and auto-dismiss
+    close() {
+        if (!this.isOpen && !this.visible)
+            return;
+        this.clearDismissTimer();
+        this.isOpen = false; // triggers exit transition
+        // after exit animation, hide + notify
+        window.setTimeout(() => {
+            if (this.visible) {
+                this.visible = false;
+                this.visibleChange.emit(false);
+            }
+            this.closed.emit();
+        }, this.EXIT_MS);
+    }
+    get status() {
+        return purposeToStatusMap[this.purpose];
+    }
+    startDismissTimer() {
+        if (!this.autoDismiss)
+            return;
+        this.clearDismissTimer();
+        this.dismissTimer = window.setTimeout(() => this.close(), this.progressMs);
+    }
+    clearDismissTimer() {
+        if (this.dismissTimer) {
+            clearTimeout(this.dismissTimer);
+            this.dismissTimer = undefined;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: SnackbarComponent, isStandalone: true, selector: "lib-snackbar", inputs: { purpose: "purpose", title: "title", description: "description", fieldPlaceholder: "fieldPlaceholder", titleIcon: "titleIcon", buttonLabel: "buttonLabel", showTitle: ["showTitle", "showTitle", booleanAttribute], showTitleIcon: ["showTitleIcon", "showTitleIcon", 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" }, outputs: { closed: "closed", visibleChange: "visibleChange" }, 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 class=\"material-icons\" id=\"snackbar-title-icon\" aria-hidden=\"true\">{{ titleIcon }}</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={{buttonLabel}}\n                    [status]=\"status\"\n                    [clearVariant]=\"true\"\n                    (click)=\"close()\"\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%;background:var(--snackbar-icon-bg);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: "18.1.0", ngImport: i0, type: SnackbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-snackbar', standalone: true, 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 class=\"material-icons\" id=\"snackbar-title-icon\" aria-hidden=\"true\">{{ titleIcon }}</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={{buttonLabel}}\n                    [status]=\"status\"\n                    [clearVariant]=\"true\"\n                    (click)=\"close()\"\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%;background:var(--snackbar-icon-bg);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: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], fieldPlaceholder: [{
+                type: Input
+            }], titleIcon: [{
+                type: Input
+            }], buttonLabel: [{
+                type: Input
+            }], showTitle: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], showTitleIcon: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], showClose: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], showProgressBar: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], showField: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], showButton: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], autoDismiss: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], visible: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], progressMs: [{
+                type: Input
+            }], y: [{
+                type: Input
+            }], closed: [{
+                type: Output
+            }], visibleChange: [{
+                type: Output
+            }] } });
+
+class SnackbarService {
+    constructor(appRef, env) {
+        this.appRef = appRef;
+        this.env = env;
+    }
+    /**
+     * This open method is what consuming code will use to create a snackbar
+     * @param snackbarOptions interface found above
+     * @param anchor HTML Element, optional. The snackbar's entrance and exit animations will happen on this element's Y axis (px)
+     * @returns void.
+     */
+    open(snackbarOptions = {}, anchor) {
+        const compRef = createComponent(SnackbarComponent, {
+            environmentInjector: this.env,
+        });
+        const desiredY = anchor // could be clamped if above or below viewport
+            ? anchor.getBoundingClientRect().top
+            : snackbarOptions.y ?? 24;
+        Object.assign(compRef.instance, {
+            purpose: 'warning',
+            title: 'Snackbar Title',
+            description: 'Lorem ipsum is the standard dummy text in the design industry',
+            titleIcon: 'info',
+            fieldPlaceholder: 'Placeholder',
+            showTitle: true,
+            showTitleIcon: true,
+            showClose: true,
+            showProgressBar: true,
+            showField: true,
+            showButton: true,
+            progressMs: 4000,
+            autoDismiss: true,
+            y: desiredY,
+            right: 24,
+            zIndex: 10000,
+            visible: true,
+            ...snackbarOptions,
+        });
+        this.appRef.attachView(compRef.hostView);
+        document.body.appendChild(compRef.location.nativeElement);
+        compRef.changeDetectorRef.detectChanges();
+        // Clamp Y after it’s in the DOM
+        const margin = 8;
+        const adjustY = () => {
+            const host = compRef.location.nativeElement.querySelector('section.snackbar') ??
+                compRef.location.nativeElement;
+            const h = host.offsetHeight || 0;
+            const maxTop = Math.max(margin, window.innerHeight - h - margin);
+            const clamped = Math.min(Math.max(desiredY, margin), maxTop);
+            if (compRef.instance.y !== clamped) {
+                compRef.instance.y = clamped;
+                compRef.changeDetectorRef.detectChanges();
+            }
+        };
+        // Measure on next frame (styles applied)
+        const rafId = requestAnimationFrame(adjustY);
+        // re-clamp on resize (in case viewport changes while visible)
+        const onResize = () => adjustY();
+        window.addEventListener('resize', onResize);
+        // Cleanup when closed
+        const sub = compRef.instance.closed.subscribe(() => {
+            sub.unsubscribe();
+            cancelAnimationFrame(rafId);
+            window.removeEventListener('resize', onResize);
+            this.appRef.detachView(compRef.hostView);
+            compRef.destroy();
+        });
+        return {
+            close: () => compRef.instance.close(),
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SnackbarService, deps: [{ token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SnackbarService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SnackbarService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }] });
+
 /*
  * Public API Surface of components
  */
@@ -2270,5 +2497,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, SsSearchBarComponent, StatusButtonComponent, defaultOidcBaseUri, defaultOidcDefaultIdp, getUserStatusFromRoles, isAdvancedSearchExternalFieldOption, isAdvancedSearchFieldOption, isAdvancedSearchLocalFieldOption, isSearchScope };
+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 };
 //# sourceMappingURL=byuhbll-components.mjs.map