@byuhbll/components 7.5.0 → 7.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i1 from '@angular/common';
|
|
2
|
-
import { CommonModule, DatePipe,
|
|
2
|
+
import { CommonModule, DatePipe, NgClass } from '@angular/common';
|
|
3
3
|
import { toSignal, toObservable } from '@angular/core/rxjs-interop';
|
|
4
4
|
import { HttpClient } from '@angular/common/http';
|
|
5
5
|
import * as i0 from '@angular/core';
|
|
@@ -3466,6 +3466,7 @@ const isSearchScope = (scope) => searchScopeValues.includes(scope);
|
|
|
3466
3466
|
* Each status has a default left icon, but a custom left icon can be provided.
|
|
3467
3467
|
* A right icon can also be provided, defaulting to 'chevron_right'.
|
|
3468
3468
|
* The left and right icons can be hidden with the `hideLeftIcon` and `hideRightIcon` boolean inputs.
|
|
3469
|
+
* Set the badge input to true for a simple visual indicator that shouldn't act like a button.
|
|
3469
3470
|
* A label input is required.
|
|
3470
3471
|
*/
|
|
3471
3472
|
class StatusButtonComponent {
|
|
@@ -3476,6 +3477,7 @@ class StatusButtonComponent {
|
|
|
3476
3477
|
this._hideLeftIcon = false;
|
|
3477
3478
|
this._hideRightIcon = false;
|
|
3478
3479
|
this._clearVariant = false;
|
|
3480
|
+
this._badge = false;
|
|
3479
3481
|
}
|
|
3480
3482
|
set status(value) {
|
|
3481
3483
|
this._status = value || 'info';
|
|
@@ -3517,6 +3519,12 @@ class StatusButtonComponent {
|
|
|
3517
3519
|
get clearVariant() {
|
|
3518
3520
|
return this._clearVariant;
|
|
3519
3521
|
}
|
|
3522
|
+
set badge(value) {
|
|
3523
|
+
this._badge = value;
|
|
3524
|
+
}
|
|
3525
|
+
get badge() {
|
|
3526
|
+
return this._badge;
|
|
3527
|
+
}
|
|
3520
3528
|
/** helper for default left icons */
|
|
3521
3529
|
getDefaultLeftIcon(status) {
|
|
3522
3530
|
switch (status) {
|
|
@@ -3534,12 +3542,20 @@ class StatusButtonComponent {
|
|
|
3534
3542
|
return '';
|
|
3535
3543
|
}
|
|
3536
3544
|
}
|
|
3545
|
+
/** DRY logic for element class list */
|
|
3546
|
+
getClassList() {
|
|
3547
|
+
return [
|
|
3548
|
+
this.status,
|
|
3549
|
+
this.clearVariant ? 'strokeless transparent-bg' : '',
|
|
3550
|
+
this.badge ? 'badge' : '',
|
|
3551
|
+
];
|
|
3552
|
+
}
|
|
3537
3553
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: StatusButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3538
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3554
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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], badge: ["badge", "badge", booleanAttribute] }, ngImport: i0, template: "@if (badge) {\n <span\n [ngClass]=\"getClassList()\"\n >\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </span>\n} @else {\n <button\n type=\"button\"\n [ngClass]=\"getClassList()\"\n >\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </button>\n}\n\n<ng-template #content>\n @if (leftIcon) {\n <span class=\"icon material-symbols-outlined\">{{ leftIcon }}</span>\n }\n {{ label }}\n @if (rightIcon) {\n <span class=\"icon material-symbols-outlined\">{{ rightIcon }}</span>\n }\n</ng-template>\n", styles: ["button,span.badge{align-items:center;background-color:#ecf2f6;border:1px solid #457fa6;border-radius:4px;color:#3e7295;display:inline-flex;flex-shrink:0;font-family:Source Sans Pro;font-size:1em;font-weight:400;gap:.5em;height:2.25em;width:100%;justify-content:center;padding:var(--status-button-padding, .25em .5em)}button .icon,span.badge .icon{font-size:1.25em}button:focus,span.badge:focus{outline:2px solid #b967c7;outline-offset:2px}button:not(.badge):hover,span.badge:not(.badge):hover{background-color:#a2bfd3;color:#26485f;cursor:pointer}button:not(.badge).success:hover,span.badge:not(.badge).success:hover{background-color:#9dd1ac;color:#1d562e}button:not(.badge).info:hover,span.badge:not(.badge).info:hover{background-color:#a2bfd3;color:#26485f}button:not(.badge).warning:hover,span.badge:not(.badge).warning:hover{background-color:#e8e3a1;color:#635f04}button:not(.badge).error:hover,span.badge:not(.badge).error:hover{background-color:#e39e9e;color:#702121}button:not(.badge).disabled:hover,span.badge:not(.badge).disabled:hover{background-color:#d0d0d0;color:#141414}button.success,span.badge.success{background-color:#ebf6ee;border:1px solid #3ba35a;color:#1d562e}button.info,span.badge.info{background-color:#ecf2f6;border:1px solid #457fa6;color:#3e7295}button.warning,span.badge.warning{background-color:#faf9ec;border:1px solid #d1c844;color:#635f04}button.error,span.badge.error{background-color:#f9ecec;border:1px solid #c73e3d;color:#702121}button.disabled,span.badge.disabled{background-color:#e7e7e7;border:1px solid #8f8f8f;color:#676767}button.strokeless,span.badge.strokeless{border:0px}button.transparent-bg,span.badge.transparent-bg{background:transparent}button.badge,span.badge.badge{border-width:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
3539
3555
|
}
|
|
3540
3556
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: StatusButtonComponent, decorators: [{
|
|
3541
3557
|
type: Component,
|
|
3542
|
-
args: [{ selector: 'lib-status-button', imports: [CommonModule
|
|
3558
|
+
args: [{ selector: 'lib-status-button', imports: [CommonModule], template: "@if (badge) {\n <span\n [ngClass]=\"getClassList()\"\n >\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </span>\n} @else {\n <button\n type=\"button\"\n [ngClass]=\"getClassList()\"\n >\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </button>\n}\n\n<ng-template #content>\n @if (leftIcon) {\n <span class=\"icon material-symbols-outlined\">{{ leftIcon }}</span>\n }\n {{ label }}\n @if (rightIcon) {\n <span class=\"icon material-symbols-outlined\">{{ rightIcon }}</span>\n }\n</ng-template>\n", styles: ["button,span.badge{align-items:center;background-color:#ecf2f6;border:1px solid #457fa6;border-radius:4px;color:#3e7295;display:inline-flex;flex-shrink:0;font-family:Source Sans Pro;font-size:1em;font-weight:400;gap:.5em;height:2.25em;width:100%;justify-content:center;padding:var(--status-button-padding, .25em .5em)}button .icon,span.badge .icon{font-size:1.25em}button:focus,span.badge:focus{outline:2px solid #b967c7;outline-offset:2px}button:not(.badge):hover,span.badge:not(.badge):hover{background-color:#a2bfd3;color:#26485f;cursor:pointer}button:not(.badge).success:hover,span.badge:not(.badge).success:hover{background-color:#9dd1ac;color:#1d562e}button:not(.badge).info:hover,span.badge:not(.badge).info:hover{background-color:#a2bfd3;color:#26485f}button:not(.badge).warning:hover,span.badge:not(.badge).warning:hover{background-color:#e8e3a1;color:#635f04}button:not(.badge).error:hover,span.badge:not(.badge).error:hover{background-color:#e39e9e;color:#702121}button:not(.badge).disabled:hover,span.badge:not(.badge).disabled:hover{background-color:#d0d0d0;color:#141414}button.success,span.badge.success{background-color:#ebf6ee;border:1px solid #3ba35a;color:#1d562e}button.info,span.badge.info{background-color:#ecf2f6;border:1px solid #457fa6;color:#3e7295}button.warning,span.badge.warning{background-color:#faf9ec;border:1px solid #d1c844;color:#635f04}button.error,span.badge.error{background-color:#f9ecec;border:1px solid #c73e3d;color:#702121}button.disabled,span.badge.disabled{background-color:#e7e7e7;border:1px solid #8f8f8f;color:#676767}button.strokeless,span.badge.strokeless{border:0px}button.transparent-bg,span.badge.transparent-bg{background:transparent}button.badge,span.badge.badge{border-width:0}\n"] }]
|
|
3543
3559
|
}], propDecorators: { label: [{
|
|
3544
3560
|
type: Input,
|
|
3545
3561
|
args: [{ required: true }]
|
|
@@ -3558,6 +3574,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3558
3574
|
}], clearVariant: [{
|
|
3559
3575
|
type: Input,
|
|
3560
3576
|
args: [{ transform: booleanAttribute }]
|
|
3577
|
+
}], badge: [{
|
|
3578
|
+
type: Input,
|
|
3579
|
+
args: [{ transform: booleanAttribute }]
|
|
3561
3580
|
}] } });
|
|
3562
3581
|
|
|
3563
3582
|
const purposeToStatusMap = {
|
|
@@ -3651,7 +3670,7 @@ class SnackbarComponent {
|
|
|
3651
3670
|
}
|
|
3652
3671
|
}
|
|
3653
3672
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3654
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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"] }] }); }
|
|
3673
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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", "badge"] }] }); }
|
|
3655
3674
|
}
|
|
3656
3675
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SnackbarComponent, decorators: [{
|
|
3657
3676
|
type: Component,
|
|
@@ -4471,5 +4490,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
4471
4490
|
* Generated bundle index. Do not edit.
|
|
4472
4491
|
*/
|
|
4473
4492
|
|
|
4474
|
-
export { ADVANCED_SEARCH_FIELD_MAP, ADVANCED_SEARCH_OPTIONS, ADVANCED_SEARCH_QUALIFIER_MAP, ButtonComponent, ButtonGroupComponent, ButtonGroupItemComponent, CheckboxComponent, DropdownComponent, FieldComponent, HbllFooterComponent, HbllHeaderComponent, HbllItemTypeIconPipe, HeaderWithImpersonationComponent, ImpersonateModalComponent, ImpersonateUserPipe, ImpersonationBannerComponent, LIBRARY_HOURS_API_URL, LabelComponent, LinkComponent, PostTabComponent, PreTabComponent, RadioButtonComponent, SnackbarComponent, SnackbarService, SsSearchBarComponent, StatusButtonComponent, TabBarComponent, TabItemComponent, defaultOidcBaseUri, defaultOidcDefaultIdp, getUserStatusFromRoles, isAdvancedSearchExternalFieldOption, isAdvancedSearchFieldOption, isAdvancedSearchLocalFieldOption, isSearchScope };
|
|
4493
|
+
export { ADVANCED_SEARCH_FIELD_MAP, ADVANCED_SEARCH_OPTIONS, ADVANCED_SEARCH_QUALIFIER_MAP, ButtonComponent, ButtonGroupComponent, ButtonGroupItemComponent, CheckboxComponent, CopyTooltipComponent, DropdownComponent, ExpandCollapseComponent, FieldComponent, HbllFooterComponent, HbllHeaderComponent, HbllItemTypeIconPipe, HeaderWithImpersonationComponent, ImpersonateModalComponent, ImpersonateUserPipe, ImpersonationBannerComponent, LIBRARY_HOURS_API_URL, LabelComponent, LinkComponent, PostTabComponent, PreTabComponent, RadioButtonComponent, SnackbarComponent, SnackbarService, SsSearchBarComponent, StatusButtonComponent, TabBarComponent, TabItemComponent, defaultOidcBaseUri, defaultOidcDefaultIdp, getUserStatusFromRoles, isAdvancedSearchExternalFieldOption, isAdvancedSearchFieldOption, isAdvancedSearchLocalFieldOption, isSearchScope };
|
|
4475
4494
|
//# sourceMappingURL=byuhbll-components.mjs.map
|