@byuhbll/components 4.3.1 → 4.4.0

package/lib/snackbar/snackbar.component.d.ts

@@ -0,0 +1,44 @@
+import { EventEmitter, SimpleChanges, OnInit, OnChanges, OnDestroy } from '@angular/core';
+import { Status } from '../status-button/status-button.component';
+import * as i0 from "@angular/core";
+export type SnackbarPurpose = 'default' | 'info' | 'success' | 'error' | 'warning';
+export declare class SnackbarComponent implements OnInit, OnChanges, OnDestroy {
+    purpose: SnackbarPurpose;
+    title: string;
+    description: string;
+    fieldPlaceholder: string;
+    titleIcon: string;
+    buttonLabel: string;
+    showTitle: boolean;
+    showTitleIcon: boolean;
+    showClose: boolean;
+    showProgressBar: boolean;
+    showField: boolean;
+    showButton: boolean;
+    autoDismiss: boolean;
+    visible: boolean;
+    progressMs: number;
+    y: number;
+    closed: EventEmitter<void>;
+    visibleChange: EventEmitter<boolean>;
+    isOpen: boolean;
+    private dismissTimer?;
+    private readonly EXIT_MS;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    close(): void;
+    get status(): Status;
+    private startDismissTimer;
+    private clearDismissTimer;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SnackbarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SnackbarComponent, "lib-snackbar", never, { "purpose": { "alias": "purpose"; "required": false; }; "title": { "alias": "title"; "required": false; }; "description": { "alias": "description"; "required": false; }; "fieldPlaceholder": { "alias": "fieldPlaceholder"; "required": false; }; "titleIcon": { "alias": "titleIcon"; "required": false; }; "buttonLabel": { "alias": "buttonLabel"; "required": false; }; "showTitle": { "alias": "showTitle"; "required": false; }; "showTitleIcon": { "alias": "showTitleIcon"; "required": false; }; "showClose": { "alias": "showClose"; "required": false; }; "showProgressBar": { "alias": "showProgressBar"; "required": false; }; "showField": { "alias": "showField"; "required": false; }; "showButton": { "alias": "showButton"; "required": false; }; "autoDismiss": { "alias": "autoDismiss"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; "progressMs": { "alias": "progressMs"; "required": false; }; "y": { "alias": "y"; "required": false; }; }, { "closed": "closed"; "visibleChange": "visibleChange"; }, never, never, true, never>;
+    static ngAcceptInputType_showTitle: unknown;
+    static ngAcceptInputType_showTitleIcon: unknown;
+    static ngAcceptInputType_showClose: unknown;
+    static ngAcceptInputType_showProgressBar: unknown;
+    static ngAcceptInputType_showField: unknown;
+    static ngAcceptInputType_showButton: unknown;
+    static ngAcceptInputType_autoDismiss: unknown;
+    static ngAcceptInputType_visible: unknown;
+}

package/lib/snackbar/snackbar.service.d.ts

@@ -0,0 +1,37 @@
+import { ApplicationRef, EnvironmentInjector } from '@angular/core';
+import { SnackbarPurpose } from './snackbar.component';
+import * as i0 from "@angular/core";
+export interface SnackbarOptions {
+    purpose?: SnackbarPurpose;
+    title?: string;
+    description?: string;
+    titleIcon?: string;
+    fieldPlaceholder?: string;
+    showTitle?: boolean;
+    showTitleIcon?: boolean;
+    showClose?: boolean;
+    showProgressBar?: boolean;
+    showField?: boolean;
+    showButton?: boolean;
+    progressMs?: number;
+    autoDismiss?: boolean;
+    y?: number;
+    right?: number;
+    zIndex?: number;
+}
+export declare class SnackbarService {
+    private appRef;
+    private env;
+    constructor(appRef: ApplicationRef, env: EnvironmentInjector);
+    /**
+     * This open method is what consuming code will use to create a snackbar
+     * @param snackbarOptions interface found above
+     * @param anchor HTML Element, optional. The snackbar's entrance and exit animations will happen on this element's Y axis (px)
+     * @returns void.
+     */
+    open(snackbarOptions?: SnackbarOptions, anchor?: HTMLElement): {
+        close: () => void;
+    };
+    static ɵfac: i0.ɵɵFactoryDeclaration<SnackbarService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SnackbarService>;
+}

package/lib/status-button/status-button.component.d.ts

@@ -0,0 +1,38 @@
+import * as i0 from "@angular/core";
+export type Status = 'success' | 'info' | 'warning' | 'error' | 'disabled';
+/**
+ * A button that indicates status with color and icon.
+ * Status can be one of: 'success', 'info', 'warning', 'error', or 'disabled'.
+ * Each status has a default left icon, but a custom left icon can be provided.
+ * A right icon can also be provided, defaulting to 'chevron_right'.
+ * The left and right icons can be hidden with the `hideLeftIcon` and `hideRightIcon` boolean inputs.
+ * A label input is required.
+ */
+export declare class StatusButtonComponent {
+    private _status;
+    private _leftIcon;
+    private _rightIcon;
+    private _hideLeftIcon;
+    private _hideRightIcon;
+    private _clearVariant;
+    label: string;
+    set status(value: 'success' | 'info' | 'warning' | 'error' | 'disabled');
+    get status(): 'success' | 'info' | 'warning' | 'error' | 'disabled';
+    set leftIcon(value: string);
+    get leftIcon(): string;
+    set rightIcon(value: string);
+    get rightIcon(): string;
+    set hideLeftIcon(value: boolean);
+    get hideLeftIcon(): boolean;
+    set hideRightIcon(value: boolean);
+    get hideRightIcon(): boolean;
+    set clearVariant(value: boolean);
+    get clearVariant(): boolean;
+    /** helper for default left icons */
+    private getDefaultLeftIcon;
+    static ɵfac: i0.ɵɵFactoryDeclaration<StatusButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StatusButtonComponent, "lib-status-button", never, { "label": { "alias": "label"; "required": true; }; "status": { "alias": "status"; "required": false; }; "leftIcon": { "alias": "leftIcon"; "required": false; }; "rightIcon": { "alias": "rightIcon"; "required": false; }; "hideLeftIcon": { "alias": "hideLeftIcon"; "required": false; }; "hideRightIcon": { "alias": "hideRightIcon"; "required": false; }; "clearVariant": { "alias": "clearVariant"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_hideLeftIcon: unknown;
+    static ngAcceptInputType_hideRightIcon: unknown;
+    static ngAcceptInputType_clearVariant: unknown;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@byuhbll/components",
-  "version": "4.3.1",
+  "version": "4.4.0",
   "peerDependencies": {
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0"

package/public-api.d.ts

@@ -8,5 +8,8 @@ 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';
 export * from './lib/ss-search-bar/models/search-config.model';
+export * from './lib/snackbar/snackbar.service';
+export * from './lib/snackbar/snackbar.component';
 export { getUserStatusFromRoles } from './lib/contact-utils';
 export { ADVANCED_SEARCH_QUALIFIER_MAP, ADVANCED_SEARCH_FIELD_MAP, ADVANCED_SEARCH_OPTIONS, } from './lib/ss-search-bar/constants';
+export * from './lib/status-button/status-button.component';

package/styles/scss/_vars.scss

@@ -13,30 +13,40 @@ $color-gray-300: #8f8f8f;
 $color-gray-200: #d0d0d0;
 $color-gray-100: #e7e7e7;
 $color-gray-50: #f9f9f9;
+$gray-text-default: #333333;
+$gray-accent-default: #555555;
 // Greens
 $color-green-500: #1d562e;
 $color-green-400: #359351;
 $color-green-300: #3ba35a;
 $color-green-200: #9dd1ac;
 $color-green-100: #ebf6ee;
+$green-text-success: #20522e;
+$green-accent-success: #2e7d3f;
 // Teals
 $color-teal-500: #26485f;
 $color-teal-400: #3e7295;
 $color-teal-300: #457fa6;
 $color-teal-200: #a2bfd3;
 $color-teal-100: #ecf2f6;
+$teal-text-info: #24495c;
+$teal-accent-info: #306a88;
 // Reds
 $color-red-500: #702121;
 $color-red-400: #b33837;
 $color-red-300: #c73e3d;
 $color-red-200: #e39e9e;
 $color-red-100: #f9ecec;
+$red-text-error: #611a1a;
+$red-accent-error: #912525;
 // Yellows
 $color-yellow-500: #635f04;
 $color-yellow-400: #928c30;
 $color-yellow-300: #d1c844;
 $color-yellow-200: #e8e3a1;
 $color-yellow-100: #faf9ec;
+$yellow-text-warning: #514a18;
+$yellow-accent-warning: #7a6f13;
 // Purple
 $color-purple: #b967c7;