@byuhbll/components 4.0.0-alpha.19 → 4.0.0-alpha.20

package/lib/animations/animations.d.ts

@@ -2,3 +2,4 @@ export declare const libHbllExpandCollapse: import("@angular/animations").Animat
 export declare const libHbllFadeInOut: import("@angular/animations").AnimationTriggerMetadata;
 export declare const libHbllFadeIn: import("@angular/animations").AnimationTriggerMetadata;
 export declare const libHbllFadeOut: import("@angular/animations").AnimationTriggerMetadata;
+export declare const libHbllSlideInOutRightLeft: import("@angular/animations").AnimationTriggerMetadata;

package/lib/{hbll-checkbox/hbll-checkbox.component.d.ts → checkbox/checkbox.component.d.ts}

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
 export declare class HbllCheckboxComponent {
-    isChecked: boolean;
+    isChecked: import("@angular/core").InputSignal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<HbllCheckboxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<HbllCheckboxComponent, "lib-hbll-checkbox", never, { "isChecked": { "alias": "isChecked"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HbllCheckboxComponent, "lib-checkbox", never, { "isChecked": { "alias": "isChecked"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/lib/copy-tooltip/copy-tooltip.component.d.ts

@@ -0,0 +1,12 @@
+import { MatTooltip, TooltipPosition } from '@angular/material/tooltip';
+import * as i0 from "@angular/core";
+export declare class CopyTooltipComponent {
+    position: TooltipPosition;
+    copyText?: string;
+    tooltip: MatTooltip;
+    clipboardCopyMessage: string;
+    copyToClipboard: (text?: string) => Promise<void>;
+    handleMouseLeave: () => void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CopyTooltipComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CopyTooltipComponent, "lib-copy-tooltip", never, { "position": { "alias": "position"; "required": false; }; "copyText": { "alias": "copyText"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

package/lib/expand-collapse/expand-collapse.component.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+export declare class ExpandCollapseComponent {
+    private contentRef;
+    private _isExpanded;
+    set isExpanded(isExpanded: boolean);
+    get isExpanded(): boolean;
+    protected heightOfContent: number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ExpandCollapseComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ExpandCollapseComponent, "lib-expand-collapse", never, { "isExpanded": { "alias": "isExpanded"; "required": true; }; }, {}, never, ["*"], true, never>;
+}

package/lib/hbll-footer/hbll-footer.component.d.ts

@@ -0,0 +1,29 @@
+import * as i0 from "@angular/core";
+export interface Email {
+    email: string;
+    message: string;
+    name: string;
+    status: string;
+}
+export declare class HbllFooterComponent {
+    private readonly fb;
+    private readonly http;
+    mainsitebaseurl: string;
+    libraryapibaseuri: string;
+    set emailtext(text: string);
+    protected date: Date;
+    protected isSubmitted: boolean;
+    protected isLoading: boolean;
+    protected hasConnectionError: boolean;
+    protected isEmailSent: boolean;
+    protected emailForm: import("@angular/forms").FormGroup<{
+        name: import("@angular/forms").FormControl<string>;
+        email: import("@angular/forms").FormControl<string>;
+        comment: import("@angular/forms").FormControl<string>;
+        status: import("@angular/forms").FormControl<string>;
+    }>;
+    protected sendEmail: () => void;
+    protected handleClose: () => void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HbllFooterComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HbllFooterComponent, "lib-hbll-footer", never, { "mainsitebaseurl": { "alias": "mainsitebaseurl"; "required": false; }; "libraryapibaseuri": { "alias": "libraryapibaseuri"; "required": false; }; "emailtext": { "alias": "emailtext"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/hbll-header/hbll-header.component.d.ts

@@ -1,40 +1,35 @@
-import { AfterViewInit, EventEmitter, PipeTransform } from '@angular/core';
+import { AfterViewInit, ElementRef, EventEmitter } from '@angular/core';
+import { LibraryHours } from './models/library-hours';
 import * as i0 from "@angular/core";
-interface LibraryHours {
-    date: string;
-    is_closed: boolean;
-    open_time: string;
-    close_time: string;
-    has_exception: boolean;
-    exception_title: string;
-    exception_message: string;
-    is_currently_open: boolean;
-}
-export declare class LibraryHoursDatePipe implements PipeTransform {
-    transform(date: string, time: string): Date;
-    static ɵfac: i0.ɵɵFactoryDeclaration<LibraryHoursDatePipe, never>;
-    static ɵpipe: i0.ɵɵPipeDeclaration<LibraryHoursDatePipe, "libraryHoursDate", true>;
-}
-/**
- * Header component built to be exported as a custom element.
- * This component uses icons provided by Google Material.
- * The link to these icons should be included once in the \<head> of your base html.
- *
- * When a non-empty string `name` is provided to this component, the user is considered logged in.
- * Two outputs/events are accessible: `login` and `logout`.
- */
+export declare const LIBRARY_HOURS_API_URL = "https://apps.lib.byu.edu/libraryhours/api/hours";
 export declare class HbllHeaderComponent implements AfterViewInit {
     private readonly r2;
     private readonly http;
-    protected name: import("@angular/core").InputSignal<string>;
+    private readonly bo;
+    private doc;
+    header: ElementRef;
+    name: string;
+    mainsitebaseurl: string;
+    showImpersonateButton: import("@angular/core").InputSignal<boolean>;
+    openImpersonationModal: EventEmitter<void>;
     login: EventEmitter<void>;
     logout: EventEmitter<void>;
+    private formatDateForHours;
     private accountInfoEl;
-    protected isLoggedIn: import("@angular/core").Signal<boolean>;
+    private hoursEl;
+    protected get isLoggedIn(): boolean;
     protected libraryHours: import("@angular/core").Signal<LibraryHours | undefined>;
+    protected hoursExceptions$: import("rxjs").Observable<LibraryHours[]>;
     protected showAccountDropdown: boolean;
+    protected showLibraryHours: boolean;
+    protected mobileSidebarHeight: number;
+    protected showNavBar: boolean;
+    protected isScreenSmall: import("@angular/core").Signal<boolean | undefined>;
     ngAfterViewInit(): void;
+    protected openSidebarNav: () => void;
+    protected closeSidebarNav: () => void;
+    private onResize;
+    private setMobileSidebarHeight;
     static ɵfac: i0.ɵɵFactoryDeclaration<HbllHeaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<HbllHeaderComponent, "lib-hbll-header", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; }, { "login": "login"; "logout": "logout"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HbllHeaderComponent, "lib-hbll-header", never, { "name": { "alias": "name"; "required": false; }; "mainsitebaseurl": { "alias": "mainsitebaseurl"; "required": false; }; "showImpersonateButton": { "alias": "showImpersonateButton"; "required": false; "isSignal": true; }; }, { "openImpersonationModal": "openImpersonationModal"; "login": "login"; "logout": "logout"; }, never, never, true, never>;
 }
-export {};

package/lib/hbll-header/models/library-hours.d.ts

@@ -0,0 +1,10 @@
+export interface LibraryHours {
+    date: string;
+    is_closed: boolean;
+    open_time: string;
+    close_time: string;
+    has_exception: boolean;
+    exception_title: string;
+    exception_message: string;
+    is_currently_open: boolean;
+}

package/lib/hbll-header/nav-bar/nav-bar.component.d.ts

@@ -0,0 +1,30 @@
+import { Signal } from '@angular/core';
+import { NavBarDropdownComponent } from '../nav-bar-dropdown/nav-bar-dropdown.component';
+import * as i0 from "@angular/core";
+type NavInfo = {
+    title: string;
+    mainSection?: Section;
+    otherSections: Section[];
+};
+type Section = {
+    title: string;
+    links: Link[];
+    auxiliaryLink?: Link;
+};
+type Link = {
+    label: string;
+    url: string;
+    icon?: string;
+};
+export declare class NavBarComponent {
+    private bo;
+    mainSiteBaseUrl: import("@angular/core").InputSignal<string>;
+    height: import("@angular/core").InputSignal<number | null>;
+    dropdownComps: NavBarDropdownComponent[];
+    protected handleDropdownOpenEvent: (title: string) => void;
+    protected isScreenSmall: Signal<boolean | undefined>;
+    protected navInfos: Signal<NavInfo[]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NavBarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NavBarComponent, "lib-nav-bar", never, { "mainSiteBaseUrl": { "alias": "mainSiteBaseUrl"; "required": true; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+export {};

package/lib/hbll-header/nav-bar-dropdown/nav-bar-dropdown.component.d.ts

@@ -0,0 +1,12 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class NavBarDropdownComponent {
+    title: import("@angular/core").InputSignal<string>;
+    isSmallScreen: import("@angular/core").InputSignal<boolean>;
+    openEvent: EventEmitter<string>;
+    closeDropdown: () => boolean;
+    protected isOpen: boolean;
+    protected handleClick: () => void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NavBarDropdownComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NavBarDropdownComponent, "lib-nav-bar-dropdown", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "isSmallScreen": { "alias": "isSmallScreen"; "required": false; "isSignal": true; }; }, { "openEvent": "openEvent"; }, never, ["*"], true, never>;
+}

package/lib/hbll-header/pipes/library-hours.pipe.d.ts

@@ -0,0 +1,7 @@
+import { PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class LibraryHoursPipe implements PipeTransform {
+    transform(date: string, time: string): string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LibraryHoursPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<LibraryHoursPipe, "libraryHours", true>;
+}

package/lib/header-with-impersonation/header-with-impersonation.component.d.ts

@@ -0,0 +1,19 @@
+import { EventEmitter, Signal } from '@angular/core';
+import { TokenPayload } from '../models/token-payload';
+import { JwtPayload } from 'jwt-decode';
+import * as i0 from "@angular/core";
+export declare class HeaderWithImpersonationComponent {
+    accessTokenPayload: import("@angular/core").InputSignal<TokenPayload>;
+    oidcBaseUri: import("@angular/core").InputSignal<string>;
+    oidcDefaultIdp: import("@angular/core").InputSignal<string>;
+    login: EventEmitter<void>;
+    logout: EventEmitter<void>;
+    endImpersonation: EventEmitter<void>;
+    protected parsedToken: Signal<(JwtPayload & Record<string, any>) | null>;
+    protected name: Signal<any>;
+    protected showImpersonateButton: Signal<boolean>;
+    protected showImpersonationModal: boolean;
+    private isImpersonating;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HeaderWithImpersonationComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HeaderWithImpersonationComponent, "lib-header-with-impersonation", never, { "accessTokenPayload": { "alias": "accessTokenPayload"; "required": true; "isSignal": true; }; "oidcBaseUri": { "alias": "oidcBaseUri"; "required": false; "isSignal": true; }; "oidcDefaultIdp": { "alias": "oidcDefaultIdp"; "required": false; "isSignal": true; }; }, { "login": "login"; "logout": "logout"; "endImpersonation": "endImpersonation"; }, never, never, true, never>;
+}

package/lib/impersonate-modal/impersonate-modal.component.d.ts

@@ -0,0 +1,60 @@
+import { EventEmitter, OnDestroy, PipeTransform } from '@angular/core';
+import { Subject } from 'rxjs';
+import { TokenPayload } from '../models/token-payload';
+import * as i0 from "@angular/core";
+export declare const defaultOidcBaseUri = "https://keycloak.lib.byu.edu/";
+export declare const defaultOidcDefaultIdp = "byu-realm";
+export declare class ImpersonateUserPipe implements PipeTransform {
+    transform(user: ImpersonateSearchResult): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ImpersonateUserPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<ImpersonateUserPipe, "impersonateUser", true>;
+}
+export interface ImpersonateSearchResult {
+    netId: string;
+    institution: string;
+    username: string;
+    name: string;
+    preferredName: string;
+    givenName: string;
+    surname: string;
+    restricted: boolean;
+}
+export declare class ImpersonateModalComponent implements OnDestroy {
+    private readonly http;
+    private readonly fb;
+    private readonly eref;
+    set showModal(open: boolean);
+    oidcBaseUri: import("@angular/core").InputSignal<string>;
+    oidcDefaultIdp: import("@angular/core").InputSignal<string>;
+    accessTokenPayload: import("@angular/core").InputSignal<TokenPayload>;
+    dismiss: EventEmitter<void>;
+    init: EventEmitter<void>;
+    protected isOpen: boolean;
+    protected hasError: boolean;
+    protected form: import("@angular/forms").FormGroup<{
+        search: import("@angular/forms").FormControl<string | null>;
+    }>;
+    protected selectedUsername?: string;
+    protected loading: boolean;
+    protected handleSearchSubject: Subject<boolean>;
+    protected results: import("@angular/core").Signal<ImpersonateSearchResult[] | null | undefined>;
+    private subs;
+    outsideClick(event: MouseEvent): void;
+    handleKeyDown: (event: KeyboardEvent) => void;
+    ngOnDestroy(): void;
+    /** Redirect to Keycloak impersonate page, which will redirect back
+     * after impersonation begins.
+     */
+    protected startImpersonation: (username?: string) => void;
+    protected handleSelectUser: (event: Event) => void;
+    protected clearSearch: () => void;
+    protected close: () => void;
+    protected handleFormSubmit: (event: SubmitEvent) => void;
+    protected handleSearchKeyPress: (event: KeyboardEvent) => void;
+    protected handleResultKeyPress: (event: KeyboardEvent) => void;
+    /** Search Keycloak users using a generic search query. */
+    private searchUsers;
+    private replaceUrl;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ImpersonateModalComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ImpersonateModalComponent, "lib-impersonate-modal", never, { "showModal": { "alias": "showModal"; "required": false; }; "oidcBaseUri": { "alias": "oidcBaseUri"; "required": false; "isSignal": true; }; "oidcDefaultIdp": { "alias": "oidcDefaultIdp"; "required": false; "isSignal": true; }; "accessTokenPayload": { "alias": "accessTokenPayload"; "required": true; "isSignal": true; }; }, { "dismiss": "dismiss"; "init": "init"; }, never, never, true, never>;
+}

package/lib/impersonation-banner/impersonation-banner.component.d.ts

@@ -0,0 +1,31 @@
+import { EventEmitter, Signal } from '@angular/core';
+import { type ApplicationAccess } from './models/application-access';
+import { TokenPayload } from '../models/token-payload';
+import { JwtPayload } from 'jwt-decode';
+import { PersonSummary } from './models/person-summary';
+import * as i0 from "@angular/core";
+export declare class ImpersonationBannerComponent {
+    private http;
+    accessTokenPayload: import("@angular/core").InputSignal<TokenPayload>;
+    personBaseUri: import("@angular/core").InputSignal<string>;
+    libraryApiBaseUri: import("@angular/core").InputSignal<string>;
+    endImpersonation: EventEmitter<void>;
+    protected parsedToken: Signal<JwtPayload & Record<string, any>>;
+    protected isImpersonating: Signal<boolean>;
+    protected libraryId: Signal<any>;
+    protected user: Signal<PersonSummary | null | undefined>;
+    protected userFullName: Signal<string>;
+    protected isRestricted: Signal<boolean | undefined>;
+    protected userInfoTabs: Signal<Map<string, any>>;
+    protected userPhotoUrl: Signal<string>;
+    protected activityStatus: Signal<"retired" | "active" | "inactive" | null>;
+    protected employeeStatusDescription: Signal<string | null>;
+    protected independentStudyStatus: Signal<boolean | null | undefined>;
+    protected accountStatuses: Signal<{
+        ok: ApplicationAccess[];
+        blocked: ApplicationAccess[];
+        none: ApplicationAccess[];
+    } | null | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ImpersonationBannerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ImpersonationBannerComponent, "lib-impersonation-banner", never, { "accessTokenPayload": { "alias": "accessTokenPayload"; "required": true; "isSignal": true; }; "personBaseUri": { "alias": "personBaseUri"; "required": false; "isSignal": true; }; "libraryApiBaseUri": { "alias": "libraryApiBaseUri"; "required": false; "isSignal": true; }; }, { "endImpersonation": "endImpersonation"; }, never, never, true, never>;
+}

package/lib/impersonation-banner/models/application-access.d.ts

@@ -0,0 +1,15 @@
+export declare enum AccessStatus {
+    OK = "ok",
+    BLOCKED = "blocked",
+    NONE = "none"
+}
+export interface ApplicationAccess {
+    label: string;
+    access: AccessStatus;
+    code?: string;
+    detail?: string;
+}
+export interface AccountsResponse {
+    netId: string;
+    applications: Record<string, ApplicationAccess>;
+}

package/lib/impersonation-banner/models/person-summary.d.ts

@@ -0,0 +1,33 @@
+export declare enum EmployeePositionType {
+    STD = "std",
+    SNL = "snl",
+    FAC = "fac",
+    STF = "stf",
+    TMP = "tmp",
+    FTC = "ftc"
+}
+export declare enum UndergradGraduateStatus {
+    UNDERGRAD = "undergrad",
+    GRADUATE = "graduate"
+}
+export interface IndependentStudyResponse {
+    library_id: string;
+    is_enrolled: boolean;
+}
+export interface PersonSummary {
+    byu_id?: string;
+    email_address?: string;
+    first_name: string;
+    is_affiliate: boolean;
+    is_employee: boolean;
+    is_retired?: boolean;
+    primary_position_type?: EmployeePositionType;
+    primary_position_type_display?: string;
+    is_student: boolean;
+    undergrad_graduate_status?: UndergradGraduateStatus;
+    last_name: string;
+    library_id: string;
+    preferred_first_name: string;
+    restricted: boolean;
+    worker_id?: string;
+}

package/lib/models/token-payload.d.ts

@@ -0,0 +1,3 @@
+export interface TokenPayload {
+    token: string;
+}

package/lib/{hbll-multi-select/hbll-multi-select.component.d.ts → multi-select/multi-select.component.d.ts}

@@ -48,5 +48,5 @@ export declare class HbllMultiSelectComponent {
      */
     private addOptionToSelectedOptions;
     static ɵfac: i0.ɵɵFactoryDeclaration<HbllMultiSelectComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<HbllMultiSelectComponent, "lib-hbll-multi-select", never, { "allOptions": { "alias": "allOptions"; "required": false; }; "label": { "alias": "label"; "required": false; }; "selectedKeys": { "alias": "selectedKeys"; "required": false; }; }, { "selectedKeysChange": "selectedKeysChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HbllMultiSelectComponent, "lib-multi-select", never, { "allOptions": { "alias": "allOptions"; "required": false; }; "label": { "alias": "label"; "required": false; }; "selectedKeys": { "alias": "selectedKeys"; "required": false; }; }, { "selectedKeysChange": "selectedKeysChange"; }, never, never, true, never>;
 }

package/lib/ss-search-bar/advanced-search/advanced-search.component.d.ts

@@ -105,7 +105,10 @@ export declare class AdvancedSearchComponent implements OnDestroy {
                 readonly 'law -- iclrs': "Law & Religion Studies";
                 readonly 'law -- main': "Main Collection";
                 readonly 'law -- media': "Media";
-                readonly 'law -- reserve': "Reserve";
+                readonly 'law -- reserve': "Reserve"; /**
+                 * Takes a `FormGroup` and syncs up the `field` and `qualifier` values.
+                 * After syncing, when the `field` value changes, the `qualifier` value will update appropriately.
+                 */
                 readonly 'law -- self_help': "Self Help";
                 readonly 'law -- study_guides': "Study Guides";
             };

package/lib/utils.d.ts

@@ -0,0 +1,5 @@
+import { BreakpointObserver } from '@angular/cdk/layout';
+/**
+ * Signal that represents if the screen is small.
+ */
+export declare const isScreenSmallSignal: (bo: BreakpointObserver) => import("@angular/core").Signal<boolean | undefined>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@byuhbll/components",
-  "version": "4.0.0-alpha.19",
+  "version": "4.0.0-alpha.20",
   "peerDependencies": {
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0"
@@ -25,6 +25,9 @@
     "./pill-btn": {
       "sass": "./styles/scss/pill-btn.scss"
     },
+    "./spinner": {
+      "sass": "./styles/scss/spinner.scss"
+    },
     "./package.json": {
       "default": "./package.json"
     },

package/public-api.d.ts

@@ -1,4 +1,8 @@
 export * from './lib/hbll-header/hbll-header.component';
+export * from './lib/hbll-footer/hbll-footer.component';
+export * from './lib/header-with-impersonation/header-with-impersonation.component';
+export * from './lib/impersonate-modal/impersonate-modal.component';
+export * from './lib/impersonation-banner/impersonation-banner.component';
 export * from './lib/ss-search-bar/ss-search-bar.component';
 export * from './lib/ss-search-bar/models/advanced-search.model';
 export * from './lib/ss-search-bar/models/search-scope.model';

package/styles/scss/_mixins.scss

@@ -1,4 +1,4 @@
-@use './_vars';
+@use 'vars';
 
 %hbll-input-field {
     appearance: none;

package/styles/scss/_vars.scss

@@ -1,8 +1,15 @@
 $navy-blue: #002e5d;
 $royal-blue: #0047ba;
+$royal-blue--hover: #1967e5;
 
 $primary-blue: #3a6093;
 
+$primary-green: #207215;
+$success-green: #1dce7b;
+
+$impersonate-purple: #ca7ad1cc;
+$impersonate-purple--hover: #ca7ad1;
+
 $interactive-blue: #4070b0;
 $interactive-blue--hover: #6892ca;
 

package/styles/scss/base.scss

@@ -1,4 +1,4 @@
-@use './_vars.scss';
+@use './vars';
 
 $sourceSansProVersion: '1.0.0';
 $icomoonVersion: '1.0.1';
@@ -170,6 +170,17 @@ section {
 body {
     background: white;
     line-height: 1.5;
+    font-size: 1.6rem;
+    font-family:
+        Source Sans Pro,
+        Helvetica Neue,
+        Helvetica,
+        Arial,
+        sans-serif;
+}
+
+html {
+    font-size: 62.5%;
 }
 
 table {
@@ -203,8 +214,14 @@ q {
     quotes: '' '';
 }
 
-a {
+a,
+button {
+    border: none;
+    background: none;
+    font-family: inherit;
+    font-size: inherit;
     text-decoration: none;
+    cursor: pointer;
 }
 
 a img {
@@ -218,8 +235,24 @@ ul {
 *,
 *::before,
 *::after {
-    -moz-box-sizing: border-box;
-    -ms-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
     box-sizing: border-box;
 }
+
+/* Change site size on bigger browser sizes */
+@media screen and (min-width: 1400px) {
+    html {
+        font-size: 70%;
+    }
+}
+
+@media screen and (min-width: 1720px) {
+    html {
+        font-size: 75%;
+    }
+}
+
+@media screen and (min-width: 2000px) {
+    html {
+        font-size: 80%;
+    }
+}

package/styles/scss/cta-btn.scss

@@ -1,5 +1,5 @@
-@use './_vars';
-@use './_mixins';
+@use './vars';
+@use './mixins';
 
 .cta-btn--components {
     @extend %hbll-base-btn;

package/styles/scss/pill-btn.scss

@@ -1,5 +1,5 @@
-@use './_vars';
-@use './_mixins';
+@use './vars';
+@use './mixins';
 
 .pill-btn--components {
     @extend %hbll-base-btn;

package/styles/scss/shared.scss

@@ -0,0 +1,7 @@
+* {
+    box-sizing: border-box;
+    text-decoration: none;
+    &:not(.material-symbols-outlined) {
+        font-family: inherit;
+    }
+}

package/styles/scss/spinner.scss

@@ -0,0 +1,20 @@
+@use 'vars';
+
+.lib-spinner {
+    border: 0.3em solid #dfe9f7;
+    border-top: 0.3em solid vars.$interactive-blue;
+    border-radius: 100%;
+    width: 30px;
+    height: 30px;
+    animation: loadingSpinnerAnimate 1s ease infinite;
+    position: relative;
+}
+
+@keyframes loadingSpinnerAnimate {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

package/esm2022/lib/hbll-checkbox/hbll-checkbox.component.mjs

@@ -1,17 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
-import * as i0 from "@angular/core";
-export class HbllCheckboxComponent {
-    constructor() {
-        this.isChecked = false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HbllCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: HbllCheckboxComponent, isStandalone: true, selector: "lib-hbll-checkbox", inputs: { isChecked: "isChecked" }, ngImport: i0, template: "<span class=\"components-checkbox-container\" [class.components-checked]=\"isChecked\">\n    @if (isChecked) {\n        <span class=\"material-symbols-outlined components-icon\"> check </span>\n    }\n</span>\n", styles: [".components-checkbox-container{transition:.15s;height:1.13em;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border-radius:4px;border:solid 1px #707070;color:#fff;box-sizing:border-box;position:relative}.components-checkbox-container.components-checked{border-color:#3a6093;background-color:#3a6093}.components-checkbox-container.components-checked .components-icon{position:absolute;font-size:1.1em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HbllCheckboxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-hbll-checkbox', standalone: true, imports: [CommonModule], template: "<span class=\"components-checkbox-container\" [class.components-checked]=\"isChecked\">\n    @if (isChecked) {\n        <span class=\"material-symbols-outlined components-icon\"> check </span>\n    }\n</span>\n", styles: [".components-checkbox-container{transition:.15s;height:1.13em;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border-radius:4px;border:solid 1px #707070;color:#fff;box-sizing:border-box;position:relative}.components-checkbox-container.components-checked{border-color:#3a6093;background-color:#3a6093}.components-checkbox-container.components-checked .components-icon{position:absolute;font-size:1.1em}\n"] }]
-        }], propDecorators: { isChecked: [{
-                type: Input
-            }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGJsbC1jaGVja2JveC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnRzL3NyYy9saWIvaGJsbC1jaGVja2JveC9oYmxsLWNoZWNrYm94LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudHMvc3JjL2xpYi9oYmxsLWNoZWNrYm94L2hibGwtY2hlY2tib3guY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQVNqRCxNQUFNLE9BQU8scUJBQXFCO0lBUGxDO1FBUWEsY0FBUyxHQUFHLEtBQUssQ0FBQztLQUM5Qjs4R0FGWSxxQkFBcUI7a0dBQXJCLHFCQUFxQixpSENWbEMsb05BS0EsbWVER2MsWUFBWTs7MkZBRWIscUJBQXFCO2tCQVBqQyxTQUFTOytCQUNJLG1CQUFtQixjQUdqQixJQUFJLFdBQ1AsQ0FBQyxZQUFZLENBQUM7OEJBR2QsU0FBUztzQkFBakIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnbGliLWhibGwtY2hlY2tib3gnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9oYmxsLWNoZWNrYm94LmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9oYmxsLWNoZWNrYm94LmNvbXBvbmVudC5zY3NzJ10sXG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlXSxcbn0pXG5leHBvcnQgY2xhc3MgSGJsbENoZWNrYm94Q29tcG9uZW50IHtcbiAgICBASW5wdXQoKSBpc0NoZWNrZWQgPSBmYWxzZTtcbn1cbiIsIjxzcGFuIGNsYXNzPVwiY29tcG9uZW50cy1jaGVja2JveC1jb250YWluZXJcIiBbY2xhc3MuY29tcG9uZW50cy1jaGVja2VkXT1cImlzQ2hlY2tlZFwiPlxuICAgIEBpZiAoaXNDaGVja2VkKSB7XG4gICAgICAgIDxzcGFuIGNsYXNzPVwibWF0ZXJpYWwtc3ltYm9scy1vdXRsaW5lZCBjb21wb25lbnRzLWljb25cIj4gY2hlY2sgPC9zcGFuPlxuICAgIH1cbjwvc3Bhbj5cbiJdfQ==