@byuhbll/components 4.4.2-beta-2 → 4.4.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.
- package/esm2022/lib/contact-utils.mjs +2 -2
- package/esm2022/lib/hbll-footer/hbll-footer.component.mjs +6 -3
- package/esm2022/lib/snackbar/snackbar.component.mjs +3 -3
- package/fesm2022/byuhbll-components.mjs +8 -5
- package/fesm2022/byuhbll-components.mjs.map +1 -1
- package/lib/contact-utils.d.ts +1 -1
- package/lib/hbll-footer/hbll-footer.component.d.ts +2 -1
- package/package.json +1 -1
|
@@ -792,7 +792,7 @@ const createContactForm = (fb) => fb.nonNullable.group({
|
|
|
792
792
|
message: ['', Validators.required],
|
|
793
793
|
status: [''],
|
|
794
794
|
});
|
|
795
|
-
const submitEmail = (payload, http, apiBaseUrl) => submitContactForm(payload, http, EMAIL_PATH, apiBaseUrl);
|
|
795
|
+
const submitEmail = (payload, byuid, http, apiBaseUrl) => submitContactForm({ ...payload, byuId: byuid }, http, EMAIL_PATH, apiBaseUrl);
|
|
796
796
|
const submitFeedback = (payload, http, apiBaseUrl) => submitContactForm({ ...payload, origin: location.href }, http, FEEDBACK_PATH, apiBaseUrl);
|
|
797
797
|
const submitContactForm = (payload, http, path, apiBaseUrl) => http.post(`${apiBaseUrl}/${path}`, payload);
|
|
798
798
|
const getUserStatusFromRoles = (roles) => {
|
|
@@ -823,6 +823,7 @@ class HbllFooterComponent {
|
|
|
823
823
|
// TODO: Convert these to signal inputs: https://github.com/angular/angular/issues/57755
|
|
824
824
|
this.mainsitebaseurl = 'https://lib.byu.edu';
|
|
825
825
|
this.libraryapibaseuri = 'https://api.lib.byu.edu/v1';
|
|
826
|
+
this.byuid = '';
|
|
826
827
|
this.date = new Date();
|
|
827
828
|
this.isSubmitted = false;
|
|
828
829
|
this.isLoading = false;
|
|
@@ -835,7 +836,7 @@ class HbllFooterComponent {
|
|
|
835
836
|
if (this.emailForm.invalid)
|
|
836
837
|
return;
|
|
837
838
|
this.isLoading = true;
|
|
838
|
-
submitEmail(this.emailForm.value, this.http, this.libraryapibaseuri).subscribe({
|
|
839
|
+
submitEmail(this.emailForm.value, this.byuid, this.http, this.libraryapibaseuri).subscribe({
|
|
839
840
|
error: () => {
|
|
840
841
|
this.hasConnectionError = true;
|
|
841
842
|
this.isLoading = false;
|
|
@@ -897,7 +898,7 @@ class HbllFooterComponent {
|
|
|
897
898
|
window.location.reload();
|
|
898
899
|
}
|
|
899
900
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HbllFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
900
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: HbllFooterComponent, isStandalone: true, selector: "lib-hbll-footer", inputs: { mainsitebaseurl: "mainsitebaseurl", libraryapibaseuri: "libraryapibaseuri", emailname: "emailname", emailemail: "emailemail", emailmessage: "emailmessage", emailstatus: "emailstatus" }, viewQueries: [{ propertyName: "emailDialog", first: true, predicate: ["emailDialog"], descendants: true }], ngImport: i0, template: "<footer>\n <div class=\"hbll-footer-wrapper\">\n <button class=\"skip-link-footer\" (click)=\"skipFooter()\" >Skip footer</button>\n <div class=\"hbll-footer-links\">\n <section aria-labelledby=\"footerContactHeading\">\n <h3 id=\"footerContactHeading\" >Contact</h3>\n <ul>\n <li>\n <address>\n P.O. Box 26800<br />\n Provo, UT 84602-6800\n </address>\n </li>\n <li>\n <a href=\"tel:801-422-6061\">\n <span class=\"material-symbols-outlined hbll-footer-icon\">\n phone_in_talk </span\n > <strong>Call</strong> (801) 422-6061\n </a>\n </li>\n <li>\n <a href=\"sms:801-623-6838\">\n <span class=\"material-symbols-outlined hbll-footer-icon\"> sms </span\n > <strong>Text</strong> (801) 623-6838\n </a>\n </li>\n <li>\n <button (click)=\"emailDialog.showModal()\" data-testid=\"emailUsBtn\" style=\"padding: 4px;\">\n <span class=\"material-symbols-outlined hbll-footer-icon\"> mail </span\n > \n <strong>Email us</strong>\n </button>\n </li>\n </ul>\n </section>\n <section aria-labelledby=\"footerResourcesHeading\">\n <h3 id=\"footerResourcesHeading\">Resources</h3>\n <ul>\n <li>\n <a target=\"_blank\" href=\"{{ mainsitebaseurl }}/site-index/\"\n >A-Z Site Index</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"{{ mainsitebaseurl }}/about/policies/\">Policies</a>\n </li>\n <li>\n <a target=\"_blank\" href=\"{{ mainsitebaseurl }}/about/location/\"\n >Parking & Directions</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"https://uac.byu.edu/accessibility-lab\"\n >Accessibility Resources</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"https://hr.lib.byu.edu/byu-library-jobs\"\n >Employment Opportunities</a\n >\n </li>\n </ul>\n </section>\n <section aria-labelledby=\"footerFriendsHeading\">\n <h3 id=\"footerFriendsHeading\">Friends in the Library</h3>\n <ul>\n <li>\n <a target=\"_blank\" href=\"https://ctl.byu.edu\"\n >Center for Teaching and Learning</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"https://copyright.byu.edu\"\n >Copyright Licensing Office</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"https://facultycenter.byu.edu/aboutus\"\n >Faculty Center</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"https://dining.byu.edu/library-cafe\"\n >Library Cafe</a\n >\n </li>\n </ul>\n </section>\n <section aria-labelledby=\"footerConnectHeading\">\n <h3 id=\"footerConnectHeading\">Connect</h3>\n <ul class=\"hbll-footer-social-list\">\n <li>\n <a target=\"_blank\" href=\"https://www.facebook.com/byuhbll\">\n <img\n class=\"hbll-footer-social\"\n src=\"https://media.lib.byu.edu/web-assets/images/1.0.0/facebook-color-round.svg\"\n alt=\"Facebook\"\n title=\"Facebook\"\n />\n </a>\n </li>\n <li>\n <a target=\"_blank\" href=\"https://www.instagram.com/byu_hbll/\">\n <img\n class=\"hbll-footer-social\"\n src=\"https://media.lib.byu.edu/web-assets/images/1.0.0/instagram-color.svg\"\n alt=\"Instagram\"\n title=\"Instagram\"\n />\n </a>\n </li>\n </ul>\n <div class=\"toggle-container\">\n <button\n type=\"button\"\n class=\"toggle toggle-off\"\n role=\"switch\"\n [attr.aria-checked]=\"false\"\n aria-label=\"Toggle Legacy View (off)\"\n (click)=\"setSessionCookie()\"\n >\n <span class=\"toggle-pill\">\n <span class=\"toggle-check\" aria-hidden=\"true\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 2\">\n <line x1=\"1\" y1=\"1\" x2=\"11\" y2=\"1\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n </svg>\n </span>\n </span>\n <span class=\"toggle-text\">Toggle Legacy View<sup class=\"superstar\">\u2605</sup></span>\n </button>\n </div>\n <i class=\"toggle-subtext\"><sup class=\"superstar\">\u2605</sup>Available until 10/20/2025</i>\n </section>\n </div>\n <section class=\"hbll-footer-bottom\" aria-label=\"Bottom-most part of the footer\">\n <div class=\"hbll-footer-title\">\n <a href=\"https://byu.edu\" target=\"_blank\">BRIGHAM YOUNG UNIVERSITY</a>\n </div>\n <br />\n PROVO, UT 84602, USA | <a href=\"sms:801-422-6061\">(801) 422-6061</a>\n <br />© {{ date | date: 'yyyy' }}\n ALL RIGHTS RESERVED\n <div class=\"hbll-footer-privacy\">\n <a href=\"https://privacy.byu.edu/\" target=\"_blank\">Privacy Notice</a>\n |\n <span id=\"teconsent\"></span>\n </div>\n </section>\n </div>\n <div id=\"consent-banner\"></div>\n</footer>\n\n<dialog\n #emailDialog\n onmousedown=\"event.target === this && this.close()\"\n (close)=\"handleClose()\"\n data-testid=\"dialog\"\n>\n @if (!isEmailSent) {\n <form [formGroup]=\"emailForm\" (submit)=\"sendEmail()\" data-testid=\"form\">\n <div class=\"hbll-footer-email-top\">\n <h1>Email Us</h1>\n <button (click)=\"emailDialog.close()\" type=\"button\" data-testid=\"closeBtn\">\n <span class=\"material-symbols-outlined\"> close </span>\n </button>\n </div>\n <label for=\"hbllFooterEmailName\">Name</label>\n <input\n id=\"hbllFooterEmailName\"\n type=\"text\"\n formControlName=\"name\"\n data-testid=\"emailNameInput\"\n />\n <label for=\"hbllFooterEmailEmail\">\n Email (please provide if you would like a response)</label\n >\n <input\n id=\"hbllFooterEmailEmail\"\n type=\"text\"\n formControlName=\"email\"\n data-testid=\"emailEmailInput\"\n />\n <label for=\"hbllFooterEmailQuestionComment\">\n Question or comment <span class=\"hbll-footer-email-required\">*</span>\n </label>\n <textarea\n id=\"hbllFooterEmailQuestionComment\"\n type=\"text\"\n formControlName=\"message\"\n data-testid=\"emailMessageInput\"\n ></textarea>\n @if (isSubmitted && emailForm.controls.message.invalid) {\n <div\n class=\"hbll-footer-email-required hbll-footer-email-error\"\n data-testid=\"commentError\"\n >\n <span class=\"material-symbols-outlined hbll-footer-email-error-icon\">\n warning\n </span>\n <strong>Please fill out this field</strong>\n </div>\n }\n <label for=\"hbllFooterEmailStatus\">Role</label>\n <span class=\"hbll-footer-select-wrapper\">\n <select\n id=\"hbllFooterEmailStatus\"\n formControlName=\"status\"\n data-testid=\"emailStatusInput\"\n >\n <option selected value=\"\"></option>\n @for (status of userStatuses | slice: 1; track status) {\n <option [value]=\"status\">{{ status }}</option>\n }\n </select>\n </span>\n <div class=\"hbll-footer-email-bottom-bar\">\n @if (hasConnectionError) {\n <p class=\"hbll-footer-connection-error\" data-testid=\"connectionError\">\n <i>There was an error sending your email. Please try again later.</i>\n </p>\n }\n <button\n class=\"pill-btn--components\"\n type=\"submit\"\n [disabled]=\"isLoading\"\n data-testid=\"sendEmailBtn\"\n >\n Send\n </button>\n </div>\n </form>\n } @else {\n <div class=\"hbll-footer-email-success\" data-testid=\"successMessage\">\n <p>\n Your email was sent successfully. If you supplied your email address, we will get\n back to you shortly.<br />Thank you!\n </p>\n <button class=\"pill-btn--components\" (click)=\"emailDialog.close()\" type=\"button\">\n Close\n </button>\n </div>\n }\n</dialog>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap\";*{box-sizing:border-box;text-decoration:none;font-size:1em}*:not(.material-symbols-outlined){font-family:inherit}dialog form input,dialog form textarea,dialog form select{appearance:none;font-family:inherit;padding:.38em;border:solid 1px #707070;border-radius:4px;font-size:1em;background-color:#fff}dialog form input:focus,dialog form textarea:focus,dialog form select:focus{outline-color:#3a6093}dialog form .hbll-footer-select-wrapper{position:relative}dialog form .hbll-footer-select-wrapper select{cursor:pointer;padding-right:2em}dialog form .hbll-footer-select-wrapper:after{font-family:Material Symbols Outlined;content:\"arrow_drop_down\";pointer-events:none;top:0;font-size:1.5em;right:.2em;height:100%;position:absolute;display:flex;align-items:center;opacity:70%}.pill-btn--components{background-color:#4070b0;font-size:1em;transition:all .15s;color:#fff;cursor:pointer;font-weight:600;text-align:center}.pill-btn--components:disabled{color:#707070;background-color:#e6e6e6;pointer-events:none}.pill-btn--components:hover{background-color:#6892ca;color:#fff}.destructive.pill-btn--components{background-color:#b04940}.destructive.pill-btn--components:hover{background-color:#c7574d}.pill-btn--components{border-radius:100em;padding:.4em 1.3em}button{border:none;background-color:transparent;font-size:1em}button :hover{cursor:pointer}.skip-link-footer{position:absolute;top:30px;left:30px;background:#fff;color:#00285b;font-size:1em;font-weight:580;padding:8px 16px;border:3px solid #0050b7;border-radius:4px;cursor:pointer;z-index:10;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}.skip-link-footer:focus{opacity:1;pointer-events:auto;transform:none}.skip-link-footer:hover{color:#00285b;background-color:#e3edf8;border-color:#e3edf8}footer{line-height:1.2em;background-color:#e6e6e6}footer a{padding:4px}footer ::ng-deep #consent-banner{z-index:11;position:fixed}footer .hbll-footer-wrapper{display:flex;flex-direction:column;align-items:center;position:relative}footer .hbll-footer-wrapper .hbll-footer-links{max-width:90em;display:flex;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap;padding-bottom:2em;white-space:nowrap}footer .hbll-footer-wrapper .hbll-footer-links strong{font-weight:600}footer .hbll-footer-wrapper .hbll-footer-links address{font-style:normal}footer .hbll-footer-wrapper .hbll-footer-links .hbll-footer-icon{font-size:2rem!important;margin-right:.2em;color:#002e5d}footer .hbll-footer-wrapper .hbll-footer-links section{padding:2em 1.8em 0;background-color:#e6e6e6;flex:1}footer .hbll-footer-wrapper .hbll-footer-links .hbll-footer-social-list{display:flex}footer .hbll-footer-wrapper .hbll-footer-links .hbll-footer-social-list .hbll-footer-social{height:1.5em;margin-right:1em}footer .hbll-footer-wrapper .hbll-footer-links .hbll-footer-social-list li{margin-bottom:0}footer .hbll-footer-wrapper h3{font-weight:600;color:#002e5d;font-size:1.4em;margin-bottom:1em;margin-top:0}footer .hbll-footer-wrapper ul{list-style:none;margin:.4em 0 0;padding:0}footer .hbll-footer-wrapper ul li{display:flex;align-items:center}footer .hbll-footer-wrapper ul li a,footer .hbll-footer-wrapper ul li button{display:inline-flex;align-items:center;color:#305f9c}footer .hbll-footer-wrapper ul li a:hover,footer .hbll-footer-wrapper ul li button:hover{color:#6892ca}footer .hbll-footer-wrapper ul li:not(:last-of-type){margin-bottom:.6em}footer .hbll-footer-wrapper .hbll-footer-bottom{text-align:center;background-color:#002e5d;color:#fff;font-family:IBM Plex Sans,sans-serif;font-optical-sizing:auto;font-weight:300;font-style:normal;font-size:.9em;line-height:1.6em;padding:1.8em;width:100%}footer .hbll-footer-wrapper .hbll-footer-bottom a{color:#fff}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-title{font-size:2em;font-weight:400;line-height:1em}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-privacy{margin-top:.4em;display:flex;align-items:center;justify-content:center;gap:5px}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-privacy a{text-decoration:underline}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-privacy ::ng-deep #teconsent a{color:#fff;text-decoration:underline;padding:4px}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-privacy ::ng-deep #teconsent a:hover{color:#fff}@media screen and (max-width: 40em){.hbll-footer-links{flex-direction:column;justify-content:flex-start;width:100%}}dialog{border:solid 1px #888;border-radius:4px;width:90%;max-width:50em;padding:0;transition:all 5s ease-in-out}dialog .hbll-footer-email-success,dialog form{padding:1.6em 2em}dialog .hbll-footer-email-success p,dialog form p{text-align:center;line-height:1.4em}dialog .hbll-footer-email-success{display:flex;justify-content:center;align-items:center;flex-direction:column}dialog .hbll-footer-email-success button{margin-top:1em}dialog form{display:flex;flex-direction:column;position:relative}dialog form textarea{min-height:100px;resize:vertical}dialog form input,dialog form textarea,dialog form .hbll-footer-select-wrapper{margin-bottom:.6em}dialog form .hbll-footer-email-bottom-bar{display:flex;align-items:center;justify-content:flex-end}dialog form .hbll-footer-email-bottom-bar .hbll-footer-connection-error{text-align:right;flex-grow:1;margin:0 1em 0 0}dialog form label{margin-bottom:.4em;margin-top:.4em}dialog form .hbll-footer-email-error{display:flex;justify-content:center;align-items:center;margin-right:auto;margin-bottom:.6em;font-size:.8em}dialog form .hbll-footer-email-error .hbll-footer-email-error-icon{font-size:1.2em;margin-right:.2em}dialog form .hbll-footer-email-top{width:100%;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;margin-bottom:1em}dialog form .hbll-footer-email-top h1{font-size:1.4em;margin:0}dialog form .hbll-footer-email-required-message{float:right}dialog form .hbll-footer-select-wrapper{margin-right:auto}dialog form .hbll-footer-email-required{color:#d03a3a}dialog form button:not([type=submit]){color:#333}dialog form button:not([type=submit]):hover{color:#696969}dialog form button[type=submit]{margin-left:auto}dialog::backdrop{background-color:#000;opacity:.75}footer .hbll-footer-wrapper .toggle-container{display:flex;justify-content:flex-end;margin-top:.6rem}@media screen and (max-width: 43.0625em){footer .hbll-footer-wrapper .toggle-container{justify-content:flex-start}}footer .hbll-footer-wrapper .hbll-footer-social-list+.toggle-container{margin-top:.75rem}footer .hbll-footer-wrapper .toggle{border:0;background:transparent;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:.6rem;font:inherit;color:#4d535b;line-height:1.3}footer .hbll-footer-wrapper .toggle-text{-webkit-user-select:none;user-select:none;white-space:nowrap;font:inherit;color:#000}footer .hbll-footer-wrapper .toggle-pill{width:3.1em;height:1.75em;background:#fff;border-radius:999px;display:inline-flex;align-items:center;justify-content:flex-start;padding-left:.375em;box-shadow:inset 0 0 0 1px #00000026}footer .hbll-footer-wrapper .toggle-check{width:1.25em;height:1.25em;border-radius:999px;background:#676f79;display:inline-flex;align-items:center;justify-content:center}footer .hbll-footer-wrapper .toggle-check svg{width:.9em;height:.9em;display:block}footer .hbll-footer-wrapper .toggle:focus-visible .toggle-pill{outline:.1875rem solid rgba(0,0,0,.2);outline-offset:2px}@media (min-width: 63.375em){.hbll-footer-wrapper .hbll-footer-links section[aria-labelledby=footerConnectHeading] .toggle-container{margin-top:5em;align-self:flex-end}}@media (max-width: 63.3125em){.hbll-footer-wrapper .hbll-footer-links section[aria-labelledby=footerConnectHeading] .toggle-container{margin-top:.75rem;align-self:auto;justify-content:flex-start}}.superstar{font-size:.3em}.toggle-subtext{color:#4b4b4b}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
|
|
901
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: HbllFooterComponent, isStandalone: true, selector: "lib-hbll-footer", inputs: { mainsitebaseurl: "mainsitebaseurl", libraryapibaseuri: "libraryapibaseuri", byuid: "byuid", emailname: "emailname", emailemail: "emailemail", emailmessage: "emailmessage", emailstatus: "emailstatus" }, viewQueries: [{ propertyName: "emailDialog", first: true, predicate: ["emailDialog"], descendants: true }], ngImport: i0, template: "<footer>\n <div class=\"hbll-footer-wrapper\">\n <button class=\"skip-link-footer\" (click)=\"skipFooter()\" >Skip footer</button>\n <div class=\"hbll-footer-links\">\n <section aria-labelledby=\"footerContactHeading\">\n <h3 id=\"footerContactHeading\" >Contact</h3>\n <ul>\n <li>\n <address>\n P.O. Box 26800<br />\n Provo, UT 84602-6800\n </address>\n </li>\n <li>\n <a href=\"tel:801-422-6061\">\n <span class=\"material-symbols-outlined hbll-footer-icon\">\n phone_in_talk </span\n > <strong>Call</strong> (801) 422-6061\n </a>\n </li>\n <li>\n <a href=\"sms:801-623-6838\">\n <span class=\"material-symbols-outlined hbll-footer-icon\"> sms </span\n > <strong>Text</strong> (801) 623-6838\n </a>\n </li>\n <li>\n <button (click)=\"emailDialog.showModal()\" data-testid=\"emailUsBtn\" style=\"padding: 4px;\">\n <span class=\"material-symbols-outlined hbll-footer-icon\"> mail </span\n > \n <strong>Email us</strong>\n </button>\n </li>\n </ul>\n </section>\n <section aria-labelledby=\"footerResourcesHeading\">\n <h3 id=\"footerResourcesHeading\">Resources</h3>\n <ul>\n <li>\n <a target=\"_blank\" href=\"{{ mainsitebaseurl }}/site-index/\"\n >A-Z Site Index</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"{{ mainsitebaseurl }}/about/policies/\">Policies</a>\n </li>\n <li>\n <a target=\"_blank\" href=\"{{ mainsitebaseurl }}/about/location/\"\n >Parking & Directions</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"https://uac.byu.edu/accessibility-lab\"\n >Accessibility Resources</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"https://hr.lib.byu.edu/byu-library-jobs\"\n >Employment Opportunities</a\n >\n </li>\n </ul>\n </section>\n <section aria-labelledby=\"footerFriendsHeading\">\n <h3 id=\"footerFriendsHeading\">Friends in the Library</h3>\n <ul>\n <li>\n <a target=\"_blank\" href=\"https://ctl.byu.edu\"\n >Center for Teaching and Learning</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"https://copyright.byu.edu\"\n >Copyright Licensing Office</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"https://facultycenter.byu.edu/aboutus\"\n >Faculty Center</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"https://dining.byu.edu/library-cafe\"\n >Library Cafe</a\n >\n </li>\n </ul>\n </section>\n <section aria-labelledby=\"footerConnectHeading\">\n <h3 id=\"footerConnectHeading\">Connect</h3>\n <ul class=\"hbll-footer-social-list\">\n <li>\n <a target=\"_blank\" href=\"https://www.facebook.com/byuhbll\">\n <img\n class=\"hbll-footer-social\"\n src=\"https://media.lib.byu.edu/web-assets/images/1.0.0/facebook-color-round.svg\"\n alt=\"Facebook\"\n title=\"Facebook\"\n />\n </a>\n </li>\n <li>\n <a target=\"_blank\" href=\"https://www.instagram.com/byu_hbll/\">\n <img\n class=\"hbll-footer-social\"\n src=\"https://media.lib.byu.edu/web-assets/images/1.0.0/instagram-color.svg\"\n alt=\"Instagram\"\n title=\"Instagram\"\n />\n </a>\n </li>\n </ul>\n <div class=\"toggle-container\">\n <button\n type=\"button\"\n class=\"toggle toggle-off\"\n role=\"switch\"\n [attr.aria-checked]=\"false\"\n aria-label=\"Toggle Legacy View (off)\"\n (click)=\"setSessionCookie()\"\n >\n <span class=\"toggle-pill\">\n <span class=\"toggle-check\" aria-hidden=\"true\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 2\">\n <line x1=\"1\" y1=\"1\" x2=\"11\" y2=\"1\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n </svg>\n </span>\n </span>\n <span class=\"toggle-text\">Toggle Legacy View<sup class=\"superstar\">\u2605</sup></span>\n </button>\n </div>\n <i class=\"toggle-subtext\"><sup class=\"superstar\">\u2605</sup>Available until 10/20/2025</i>\n </section>\n </div>\n <section class=\"hbll-footer-bottom\" aria-label=\"Bottom-most part of the footer\">\n <div class=\"hbll-footer-title\">\n <a href=\"https://byu.edu\" target=\"_blank\">BRIGHAM YOUNG UNIVERSITY</a>\n </div>\n <br />\n PROVO, UT 84602, USA | <a href=\"sms:801-422-6061\">(801) 422-6061</a>\n <br />© {{ date | date: 'yyyy' }}\n ALL RIGHTS RESERVED\n <div class=\"hbll-footer-privacy\">\n <a href=\"https://privacy.byu.edu/\" target=\"_blank\">Privacy Notice</a>\n |\n <span id=\"teconsent\"></span>\n </div>\n </section>\n </div>\n <div id=\"consent-banner\"></div>\n</footer>\n\n<dialog\n #emailDialog\n onmousedown=\"event.target === this && this.close()\"\n (close)=\"handleClose()\"\n data-testid=\"dialog\"\n>\n @if (!isEmailSent) {\n <form [formGroup]=\"emailForm\" (submit)=\"sendEmail()\" data-testid=\"form\">\n <div class=\"hbll-footer-email-top\">\n <h1>Email Us</h1>\n <button (click)=\"emailDialog.close()\" type=\"button\" data-testid=\"closeBtn\">\n <span class=\"material-symbols-outlined\"> close </span>\n </button>\n </div>\n <label for=\"hbllFooterEmailName\">Name</label>\n <input\n id=\"hbllFooterEmailName\"\n type=\"text\"\n formControlName=\"name\"\n data-testid=\"emailNameInput\"\n />\n <label for=\"hbllFooterEmailEmail\">\n Email (please provide if you would like a response)</label\n >\n <input\n id=\"hbllFooterEmailEmail\"\n type=\"text\"\n formControlName=\"email\"\n data-testid=\"emailEmailInput\"\n />\n <label for=\"hbllFooterEmailQuestionComment\">\n Question or comment <span class=\"hbll-footer-email-required\">*</span>\n </label>\n <textarea\n id=\"hbllFooterEmailQuestionComment\"\n type=\"text\"\n formControlName=\"message\"\n data-testid=\"emailMessageInput\"\n ></textarea>\n @if (isSubmitted && emailForm.controls.message.invalid) {\n <div\n class=\"hbll-footer-email-required hbll-footer-email-error\"\n data-testid=\"commentError\"\n >\n <span class=\"material-symbols-outlined hbll-footer-email-error-icon\">\n warning\n </span>\n <strong>Please fill out this field</strong>\n </div>\n }\n <label for=\"hbllFooterEmailStatus\">Role</label>\n <span class=\"hbll-footer-select-wrapper\">\n <select\n id=\"hbllFooterEmailStatus\"\n formControlName=\"status\"\n data-testid=\"emailStatusInput\"\n >\n <option selected value=\"\"></option>\n @for (status of userStatuses | slice: 1; track status) {\n <option [value]=\"status\">{{ status }}</option>\n }\n </select>\n </span>\n <div class=\"hbll-footer-email-bottom-bar\">\n @if (hasConnectionError) {\n <p class=\"hbll-footer-connection-error\" data-testid=\"connectionError\">\n <i>There was an error sending your email. Please try again later.</i>\n </p>\n }\n <button\n class=\"pill-btn--components\"\n type=\"submit\"\n [disabled]=\"isLoading\"\n data-testid=\"sendEmailBtn\"\n >\n Send\n </button>\n </div>\n </form>\n } @else {\n <div class=\"hbll-footer-email-success\" data-testid=\"successMessage\">\n <p>\n Your email was sent successfully. If you supplied your email address, we will get\n back to you shortly.<br />Thank you!\n </p>\n <button class=\"pill-btn--components\" (click)=\"emailDialog.close()\" type=\"button\">\n Close\n </button>\n </div>\n }\n</dialog>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap\";*{box-sizing:border-box;text-decoration:none;font-size:1em}*:not(.material-symbols-outlined){font-family:inherit}dialog form input,dialog form textarea,dialog form select{appearance:none;font-family:inherit;padding:.38em;border:solid 1px #707070;border-radius:4px;font-size:1em;background-color:#fff}dialog form input:focus,dialog form textarea:focus,dialog form select:focus{outline-color:#3a6093}dialog form .hbll-footer-select-wrapper{position:relative}dialog form .hbll-footer-select-wrapper select{cursor:pointer;padding-right:2em}dialog form .hbll-footer-select-wrapper:after{font-family:Material Symbols Outlined;content:\"arrow_drop_down\";pointer-events:none;top:0;font-size:1.5em;right:.2em;height:100%;position:absolute;display:flex;align-items:center;opacity:70%}.pill-btn--components{background-color:#4070b0;font-size:1em;transition:all .15s;color:#fff;cursor:pointer;font-weight:600;text-align:center}.pill-btn--components:disabled{color:#707070;background-color:#e6e6e6;pointer-events:none}.pill-btn--components:hover{background-color:#6892ca;color:#fff}.destructive.pill-btn--components{background-color:#b04940}.destructive.pill-btn--components:hover{background-color:#c7574d}.pill-btn--components{border-radius:100em;padding:.4em 1.3em}button{border:none;background-color:transparent;font-size:1em}button :hover{cursor:pointer}.skip-link-footer{position:absolute;top:30px;left:30px;background:#fff;color:#00285b;font-size:1em;font-weight:580;padding:8px 16px;border:3px solid #0050b7;border-radius:4px;cursor:pointer;z-index:10;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}.skip-link-footer:focus{opacity:1;pointer-events:auto;transform:none}.skip-link-footer:hover{color:#00285b;background-color:#e3edf8;border-color:#e3edf8}footer{line-height:1.2em;background-color:#e6e6e6}footer a{padding:4px}footer ::ng-deep #consent-banner{z-index:11;position:fixed}footer .hbll-footer-wrapper{display:flex;flex-direction:column;align-items:center;position:relative}footer .hbll-footer-wrapper .hbll-footer-links{max-width:90em;display:flex;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap;padding-bottom:2em;white-space:nowrap}footer .hbll-footer-wrapper .hbll-footer-links strong{font-weight:600}footer .hbll-footer-wrapper .hbll-footer-links address{font-style:normal}footer .hbll-footer-wrapper .hbll-footer-links .hbll-footer-icon{font-size:2rem!important;margin-right:.2em;color:#002e5d}footer .hbll-footer-wrapper .hbll-footer-links section{padding:2em 1.8em 0;background-color:#e6e6e6;flex:1}footer .hbll-footer-wrapper .hbll-footer-links .hbll-footer-social-list{display:flex}footer .hbll-footer-wrapper .hbll-footer-links .hbll-footer-social-list .hbll-footer-social{height:1.5em;margin-right:1em}footer .hbll-footer-wrapper .hbll-footer-links .hbll-footer-social-list li{margin-bottom:0}footer .hbll-footer-wrapper h3{font-weight:600;color:#002e5d;font-size:1.4em;margin-bottom:1em;margin-top:0}footer .hbll-footer-wrapper ul{list-style:none;margin:.4em 0 0;padding:0}footer .hbll-footer-wrapper ul li{display:flex;align-items:center}footer .hbll-footer-wrapper ul li a,footer .hbll-footer-wrapper ul li button{display:inline-flex;align-items:center;color:#305f9c}footer .hbll-footer-wrapper ul li a:hover,footer .hbll-footer-wrapper ul li button:hover{color:#6892ca}footer .hbll-footer-wrapper ul li:not(:last-of-type){margin-bottom:.6em}footer .hbll-footer-wrapper .hbll-footer-bottom{text-align:center;background-color:#002e5d;color:#fff;font-family:IBM Plex Sans,sans-serif;font-optical-sizing:auto;font-weight:300;font-style:normal;font-size:.9em;line-height:1.6em;padding:1.8em;width:100%}footer .hbll-footer-wrapper .hbll-footer-bottom a{color:#fff}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-title{font-size:2em;font-weight:400;line-height:1em}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-privacy{margin-top:.4em;display:flex;align-items:center;justify-content:center;gap:5px}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-privacy a{text-decoration:underline}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-privacy ::ng-deep #teconsent a{color:#fff;text-decoration:underline;padding:4px}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-privacy ::ng-deep #teconsent a:hover{color:#fff}@media screen and (max-width: 40em){.hbll-footer-links{flex-direction:column;justify-content:flex-start;width:100%}}dialog{border:solid 1px #888;border-radius:4px;width:90%;max-width:50em;padding:0;transition:all 5s ease-in-out}dialog .hbll-footer-email-success,dialog form{padding:1.6em 2em}dialog .hbll-footer-email-success p,dialog form p{text-align:center;line-height:1.4em}dialog .hbll-footer-email-success{display:flex;justify-content:center;align-items:center;flex-direction:column}dialog .hbll-footer-email-success button{margin-top:1em}dialog form{display:flex;flex-direction:column;position:relative}dialog form textarea{min-height:100px;resize:vertical}dialog form input,dialog form textarea,dialog form .hbll-footer-select-wrapper{margin-bottom:.6em}dialog form .hbll-footer-email-bottom-bar{display:flex;align-items:center;justify-content:flex-end}dialog form .hbll-footer-email-bottom-bar .hbll-footer-connection-error{text-align:right;flex-grow:1;margin:0 1em 0 0}dialog form label{margin-bottom:.4em;margin-top:.4em}dialog form .hbll-footer-email-error{display:flex;justify-content:center;align-items:center;margin-right:auto;margin-bottom:.6em;font-size:.8em}dialog form .hbll-footer-email-error .hbll-footer-email-error-icon{font-size:1.2em;margin-right:.2em}dialog form .hbll-footer-email-top{width:100%;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;margin-bottom:1em}dialog form .hbll-footer-email-top h1{font-size:1.4em;margin:0}dialog form .hbll-footer-email-required-message{float:right}dialog form .hbll-footer-select-wrapper{margin-right:auto}dialog form .hbll-footer-email-required{color:#d03a3a}dialog form button:not([type=submit]){color:#333}dialog form button:not([type=submit]):hover{color:#696969}dialog form button[type=submit]{margin-left:auto}dialog::backdrop{background-color:#000;opacity:.75}footer .hbll-footer-wrapper .toggle-container{display:flex;justify-content:flex-end;margin-top:.6rem}@media screen and (max-width: 43.0625em){footer .hbll-footer-wrapper .toggle-container{justify-content:flex-start}}footer .hbll-footer-wrapper .hbll-footer-social-list+.toggle-container{margin-top:.75rem}footer .hbll-footer-wrapper .toggle{border:0;background:transparent;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:.6rem;font:inherit;color:#4d535b;line-height:1.3}footer .hbll-footer-wrapper .toggle-text{-webkit-user-select:none;user-select:none;white-space:nowrap;font:inherit;color:#000}footer .hbll-footer-wrapper .toggle-pill{width:3.1em;height:1.75em;background:#fff;border-radius:999px;display:inline-flex;align-items:center;justify-content:flex-start;padding-left:.375em;box-shadow:inset 0 0 0 1px #00000026}footer .hbll-footer-wrapper .toggle-check{width:1.25em;height:1.25em;border-radius:999px;background:#676f79;display:inline-flex;align-items:center;justify-content:center}footer .hbll-footer-wrapper .toggle-check svg{width:.9em;height:.9em;display:block}footer .hbll-footer-wrapper .toggle:focus-visible .toggle-pill{outline:.1875rem solid rgba(0,0,0,.2);outline-offset:2px}@media (min-width: 63.375em){.hbll-footer-wrapper .hbll-footer-links section[aria-labelledby=footerConnectHeading] .toggle-container{margin-top:5em;align-self:flex-end}}@media (max-width: 63.3125em){.hbll-footer-wrapper .hbll-footer-links section[aria-labelledby=footerConnectHeading] .toggle-container{margin-top:.75rem;align-self:auto;justify-content:flex-start}}.superstar{font-size:.3em}.toggle-subtext{color:#4b4b4b}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
|
|
901
902
|
}
|
|
902
903
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HbllFooterComponent, decorators: [{
|
|
903
904
|
type: Component,
|
|
@@ -909,6 +910,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
|
|
|
909
910
|
type: Input
|
|
910
911
|
}], libraryapibaseuri: [{
|
|
911
912
|
type: Input
|
|
913
|
+
}], byuid: [{
|
|
914
|
+
type: Input
|
|
912
915
|
}], emailname: [{
|
|
913
916
|
type: Input
|
|
914
917
|
}], emailemail: [{
|
|
@@ -2363,11 +2366,11 @@ class SnackbarComponent {
|
|
|
2363
2366
|
}
|
|
2364
2367
|
}
|
|
2365
2368
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2366
|
-
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", 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-
|
|
2369
|
+
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", showTitle: ["showTitle", "showTitle", booleanAttribute], showTitleIcon: ["showTitleIcon", "showTitleIcon", booleanAttribute], titleIconFilled: ["titleIconFilled", "titleIconFilled", booleanAttribute], showClose: ["showClose", "showClose", booleanAttribute], showProgressBar: ["showProgressBar", "showProgressBar", booleanAttribute], showField: ["showField", "showField", booleanAttribute], showButton: ["showButton", "showButton", booleanAttribute], autoDismiss: ["autoDismiss", "autoDismiss", booleanAttribute], visible: ["visible", "visible", booleanAttribute], progressMs: "progressMs", y: "y", statusButtonInputs: "statusButtonInputs" }, outputs: { closed: "closed", visibleChange: "visibleChange", buttonClicked: "buttonClicked" }, usesOnChanges: true, ngImport: i0, template: "@if (visible) {\n <section\n class=\"snackbar\"\n [ngClass]=\"{\n 'is-default': purpose === 'default',\n 'is-info': purpose === 'info',\n 'is-success': purpose === 'success',\n 'is-error': purpose === 'error',\n 'is-warning': purpose === 'warning',\n 'is-open': isOpen,\n }\"\n role=\"status\"\n aria-live=\"polite\"\n [style.--snackbar-progress-duration]=\"progressMs + 'ms'\"\n [style.top.px]=\"y\"\n >\n <div class=\"snackbar__left\">\n @if(showTitle) {\n <div class=\"snackbar__title-row\">\n <span \n [ngClass]=\"{\n 'snackbar__title-icon': true,\n 'has-icon': showTitle && showTitleIcon\n }\"\n aria-hidden=\"true\"\n >\n @if (showTitle && showTitleIcon) {\n <i [ngClass]=\"titleIconFilled ? 'material-icons' : 'material-icons-outlined'\"\n id=\"snackbar-title-icon\"\n aria-hidden=\"true\"\n >\n {{ titleIcon }}\n </i>\n }\n </span>\n @if (showTitle) {\n <h3 class=\"snackbar__title\">{{ title }}</h3>\n }\n </div>\n }\n <p class=\"snackbar__desc\">\n {{ description }}\n </p>\n @if (showField) {\n <input class=\"snackbar__input\" type=\"text\" [placeholder]=\"fieldPlaceholder\" />\n }\n @if (showButton) {\n <lib-status-button\n label={{statusButtonInputs?.label}}\n [status]=\"status\"\n leftIcon={{statusButtonInputs?.leftIcon}}\n rightIcon={{statusButtonInputs?.rightIcon}}\n [hideLeftIcon]=\"statusButtonInputs?.hideLeftIcon\"\n [hideRightIcon]=\"statusButtonInputs?.hideRightIcon\"\n [clearVariant]=\"statusButtonInputs?.clearVariant\"\n (click)=\"close(true)\"\n ></lib-status-button>\n\n }\n </div>\n <button \n type=\"button\"\n (click)=\"close()\"\n class=\"snackbar__close\"\n aria-label=\"Dismiss\"\n [style.visibility]=\"showClose ? 'visible' : 'hidden'\"\n >\n \u00D7\n </button>\n @if (showProgressBar) {\n <div class=\"snackbar__progress\">\n <div class=\"snackbar__progress-fill\"></div>\n </div>\n }\n </section>\n}\n", styles: [":root{--border-radius-md: 4px;--colors-border-primary: #d0d0d0;--colors-surface-primary: white;--colors-border-information: #457fa6;--colors-surface-information: #ecf2f6;--colors-border-success: #3ba35a;--colors-surface-success: #ebf6ee;--colors-border-warning: #d1c844;--colors-surface-warning: #faf9ec;--colors-border-error: #c73e3d;--colors-surface-error: #f9ecec}.snackbar{--snackbar-border-color: var(--colors-border-primary);--snackbar-bg: var(--colors-surface-primary);--snackbar-text: #141414;--snackbar-title-color: var(--snackbar-text);--snackbar-icon-bg: #e5edf8;--snackbar-accent: #0047ba;--snackbar-input-border: var(--snackbar-border-color);--snackbar-progress: var(--snackbar-accent);display:flex;width:26.25rem;padding:1.25rem 1rem;justify-content:space-between;align-items:flex-start;gap:.25rem;position:relative;border-radius:var(--border-radius-md, 4px);border:1px solid var(--snackbar-border-color);background:var(--snackbar-bg);box-shadow:1px 1px 4px #00000040;color:var(--snackbar-text)}.snackbar__left{display:grid;gap:.5rem;flex:1 1 auto}.snackbar__left>.snackbar__title-row~*{margin-left:var(--snackbar-right-gutter, 1.85rem)}.snackbar__title-row{display:flex;align-items:center;gap:.25rem}.snackbar__title{margin:0;font-weight:400;font-size:1.2rem;line-height:1.2;color:var(--snackbar-title-color)}.snackbar__title-icon{display:inline-flex;align-items:center;justify-content:center;width:1.5em;height:1.5em}.snackbar__title-icon.has-icon{border-radius:50%;color:var(--snackbar-accent)}.snackbar__icon{font-weight:700;font-size:1rem;line-height:1}.snackbar__desc{margin:0;opacity:.9}.snackbar__input{width:100%;max-width:100%;box-sizing:border-box;padding:.5em;border-radius:4px;border:1px solid var(--snackbar-input-border);background:#fff;color:inherit}.snackbar__close{margin-left:.5em;border:0;background:transparent;color:inherit;opacity:.7;font-size:1.5rem;padding:.25rem;line-height:1;cursor:pointer}.snackbar__progress{position:absolute;left:0;right:0;bottom:-1px;height:4px;overflow:hidden;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.snackbar__progress-fill{height:100%;width:0%;background:var(--snackbar-progress);animation:fill var(--snackbar-progress-duration, 4s) linear forwards}@keyframes fill{to{width:100%}}.snackbar.is-default{--snackbar-border-color: var(--colors-border-primary, #d0d0d0);--snackbar-bg: var(--colors-surface-primary, white);--snackbar-text: #141414;--snackbar-title-color: #003995;--snackbar-icon-bg: #e5edf8;--snackbar-accent: #003995;--snackbar-input-border: #d0d0d0;--snackbar-progress: #003995}.snackbar.is-info{--snackbar-border-color: var(--colors-border-information, #457fa6);--snackbar-bg: var(--colors-surface-information, #ecf2f6);--snackbar-text: #24495c;--snackbar-title-color: #24495c;--snackbar-icon-bg: #a2bfd3;--snackbar-accent: #306a88;--snackbar-input-border: #a2bfd3;--snackbar-progress: #306a88}.snackbar.is-success{--snackbar-border-color: var(--colors-border-success, #3ba35a);--snackbar-bg: var(--colors-surface-success, #ebf6ee);--snackbar-text: #20522e;--snackbar-title-color: #20522e;--snackbar-icon-bg: #9dd1ac;--snackbar-accent: #2e7d3f;--snackbar-input-border: #9dd1ac;--snackbar-progress: #2e7d3f}.snackbar.is-warning{--snackbar-border-color: var(--colors-border-warning, #d1c844);--snackbar-bg: var(--colors-surface-warning, #faf9ec);--snackbar-text: #514a18;--snackbar-title-color: #514a18;--snackbar-icon-bg: #e8e3a1;--snackbar-accent: #7a6f13;--snackbar-input-border: #d1c844;--snackbar-progress: #7a6f13}.snackbar.is-error{--snackbar-border-color: var(--colors-border-error, #c73e3d);--snackbar-bg: var(--colors-surface-error, #f9ecec);--snackbar-text: #611a1a;--snackbar-title-color: #611a1a;--snackbar-icon-bg: #e39e9e;--snackbar-accent: #912525;--snackbar-input-border: #c73e3d;--snackbar-progress: #912525}.snackbar{position:fixed;top:24px;right:24px;z-index:1000;transform:translate(120%);transition:transform .6s ease}.snackbar.is-open{transform:translate(0)}lib-status-button{--status-button-padding: .25em .5em .25em 0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: StatusButtonComponent, selector: "lib-status-button", inputs: ["label", "status", "leftIcon", "rightIcon", "hideLeftIcon", "hideRightIcon", "clearVariant"] }] }); }
|
|
2367
2370
|
}
|
|
2368
2371
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SnackbarComponent, decorators: [{
|
|
2369
2372
|
type: Component,
|
|
2370
|
-
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 [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-
|
|
2373
|
+
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 [ngClass]=\"titleIconFilled ? 'material-icons' : 'material-icons-outlined'\"\n id=\"snackbar-title-icon\"\n aria-hidden=\"true\"\n >\n {{ titleIcon }}\n </i>\n }\n </span>\n @if (showTitle) {\n <h3 class=\"snackbar__title\">{{ title }}</h3>\n }\n </div>\n }\n <p class=\"snackbar__desc\">\n {{ description }}\n </p>\n @if (showField) {\n <input class=\"snackbar__input\" type=\"text\" [placeholder]=\"fieldPlaceholder\" />\n }\n @if (showButton) {\n <lib-status-button\n label={{statusButtonInputs?.label}}\n [status]=\"status\"\n leftIcon={{statusButtonInputs?.leftIcon}}\n rightIcon={{statusButtonInputs?.rightIcon}}\n [hideLeftIcon]=\"statusButtonInputs?.hideLeftIcon\"\n [hideRightIcon]=\"statusButtonInputs?.hideRightIcon\"\n [clearVariant]=\"statusButtonInputs?.clearVariant\"\n (click)=\"close(true)\"\n ></lib-status-button>\n\n }\n </div>\n <button \n type=\"button\"\n (click)=\"close()\"\n class=\"snackbar__close\"\n aria-label=\"Dismiss\"\n [style.visibility]=\"showClose ? 'visible' : 'hidden'\"\n >\n \u00D7\n </button>\n @if (showProgressBar) {\n <div class=\"snackbar__progress\">\n <div class=\"snackbar__progress-fill\"></div>\n </div>\n }\n </section>\n}\n", styles: [":root{--border-radius-md: 4px;--colors-border-primary: #d0d0d0;--colors-surface-primary: white;--colors-border-information: #457fa6;--colors-surface-information: #ecf2f6;--colors-border-success: #3ba35a;--colors-surface-success: #ebf6ee;--colors-border-warning: #d1c844;--colors-surface-warning: #faf9ec;--colors-border-error: #c73e3d;--colors-surface-error: #f9ecec}.snackbar{--snackbar-border-color: var(--colors-border-primary);--snackbar-bg: var(--colors-surface-primary);--snackbar-text: #141414;--snackbar-title-color: var(--snackbar-text);--snackbar-icon-bg: #e5edf8;--snackbar-accent: #0047ba;--snackbar-input-border: var(--snackbar-border-color);--snackbar-progress: var(--snackbar-accent);display:flex;width:26.25rem;padding:1.25rem 1rem;justify-content:space-between;align-items:flex-start;gap:.25rem;position:relative;border-radius:var(--border-radius-md, 4px);border:1px solid var(--snackbar-border-color);background:var(--snackbar-bg);box-shadow:1px 1px 4px #00000040;color:var(--snackbar-text)}.snackbar__left{display:grid;gap:.5rem;flex:1 1 auto}.snackbar__left>.snackbar__title-row~*{margin-left:var(--snackbar-right-gutter, 1.85rem)}.snackbar__title-row{display:flex;align-items:center;gap:.25rem}.snackbar__title{margin:0;font-weight:400;font-size:1.2rem;line-height:1.2;color:var(--snackbar-title-color)}.snackbar__title-icon{display:inline-flex;align-items:center;justify-content:center;width:1.5em;height:1.5em}.snackbar__title-icon.has-icon{border-radius:50%;color:var(--snackbar-accent)}.snackbar__icon{font-weight:700;font-size:1rem;line-height:1}.snackbar__desc{margin:0;opacity:.9}.snackbar__input{width:100%;max-width:100%;box-sizing:border-box;padding:.5em;border-radius:4px;border:1px solid var(--snackbar-input-border);background:#fff;color:inherit}.snackbar__close{margin-left:.5em;border:0;background:transparent;color:inherit;opacity:.7;font-size:1.5rem;padding:.25rem;line-height:1;cursor:pointer}.snackbar__progress{position:absolute;left:0;right:0;bottom:-1px;height:4px;overflow:hidden;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.snackbar__progress-fill{height:100%;width:0%;background:var(--snackbar-progress);animation:fill var(--snackbar-progress-duration, 4s) linear forwards}@keyframes fill{to{width:100%}}.snackbar.is-default{--snackbar-border-color: var(--colors-border-primary, #d0d0d0);--snackbar-bg: var(--colors-surface-primary, white);--snackbar-text: #141414;--snackbar-title-color: #003995;--snackbar-icon-bg: #e5edf8;--snackbar-accent: #003995;--snackbar-input-border: #d0d0d0;--snackbar-progress: #003995}.snackbar.is-info{--snackbar-border-color: var(--colors-border-information, #457fa6);--snackbar-bg: var(--colors-surface-information, #ecf2f6);--snackbar-text: #24495c;--snackbar-title-color: #24495c;--snackbar-icon-bg: #a2bfd3;--snackbar-accent: #306a88;--snackbar-input-border: #a2bfd3;--snackbar-progress: #306a88}.snackbar.is-success{--snackbar-border-color: var(--colors-border-success, #3ba35a);--snackbar-bg: var(--colors-surface-success, #ebf6ee);--snackbar-text: #20522e;--snackbar-title-color: #20522e;--snackbar-icon-bg: #9dd1ac;--snackbar-accent: #2e7d3f;--snackbar-input-border: #9dd1ac;--snackbar-progress: #2e7d3f}.snackbar.is-warning{--snackbar-border-color: var(--colors-border-warning, #d1c844);--snackbar-bg: var(--colors-surface-warning, #faf9ec);--snackbar-text: #514a18;--snackbar-title-color: #514a18;--snackbar-icon-bg: #e8e3a1;--snackbar-accent: #7a6f13;--snackbar-input-border: #d1c844;--snackbar-progress: #7a6f13}.snackbar.is-error{--snackbar-border-color: var(--colors-border-error, #c73e3d);--snackbar-bg: var(--colors-surface-error, #f9ecec);--snackbar-text: #611a1a;--snackbar-title-color: #611a1a;--snackbar-icon-bg: #e39e9e;--snackbar-accent: #912525;--snackbar-input-border: #c73e3d;--snackbar-progress: #912525}.snackbar{position:fixed;top:24px;right:24px;z-index:1000;transform:translate(120%);transition:transform .6s ease}.snackbar.is-open{transform:translate(0)}lib-status-button{--status-button-padding: .25em .5em .25em 0}\n"] }]
|
|
2371
2374
|
}], propDecorators: { purpose: [{
|
|
2372
2375
|
type: Input
|
|
2373
2376
|
}], title: [{
|