@bcgov/nr-ngx-component-lib 0.0.1

package/styles/bc-sans/css/BCSans.css

@@ -0,0 +1,28 @@
+@font-face {
+    font-family: "BCSans";
+    font-style: normal;
+    src: url("../fonts/BCSans-Regular.woff2") format("woff2"), /* Optimized for very modern browsers */
+        url("../fonts/BCSans-Regular.woff") format("woff"); /* Modern Browsers */
+}
+
+@font-face {
+    font-family: "BCSans";
+    font-style: italic;
+    src: url("../fonts/BCSans-Italic.woff2") format("woff2"), /* Optimized for very modern browsers */
+        url("../fonts/BCSans-Italic.woff") format("woff"); /* Modern Browsers */
+}
+
+@font-face {
+    font-family: "BCSans";
+    font-weight: 700;
+    src: url("../fonts/BCSans-Bold.woff2") format("woff2"), /* Optimized for very modern browsers */
+        url("../fonts/BCSans-Bold.woff") format("woff"); /* Modern Browsers */
+}
+
+@font-face {
+    font-family: "BCSans";
+    font-style: italic;
+    font-weight: 700;
+    src: url("../fonts/BCSans-BoldItalic.woff2") format("woff2"), /* Optimized for very modern browsers */
+        url("../fonts/BCSans-BoldItalic.woff") format("woff"); /* Modern Browsers */
+}

package/styles/global.scss

@@ -0,0 +1,34 @@
+:root {
+    --nrcl-font-family: BCSans,Noto Sans,Verdana,Arial,sans-serif;
+    --nrcl-font-size: 15px;
+    --nrcl-font-size-h1: 35px;
+    --nrcl-font-size-h2: 22px;
+    --nrcl-font-size-h3: 18px;
+    --nrcl-font-size-small: 12px;
+    --nrcl-border-radius: 5px;
+
+    --nrcl-filter-width-default: 150px;
+    --nrcl-filter-height-default: 40px;
+
+    --nrcl-icon-size: 24px;
+
+    // desktop
+    --nrcl-device-desktop-gutter-space: 16px;
+    --nrcl-device-desktop-form-layout-columns: 4;
+
+    //mobile
+    --nrcl-device-mobile-gutter-space: 8px;
+    --nrcl-device-mobile-form-layout-columns: 2;
+}
+
+html {
+    .nrcl-device-desktop {
+        --nrcl-gutter-space: var( --nrcl-device-desktop-gutter-space );
+        --nrcl-form-layout-columns: var( --nrcl-device-desktop-form-layout-columns );
+    }
+
+    .nrcl-device-mobile {
+        --nrcl-gutter-space: var( --nrcl-device-mobile-gutter-space );
+        --nrcl-form-layout-columns: var( --nrcl-device-mobile-form-layout-columns );
+    }
+}

package/styles/include/mat-button.scss

@@ -0,0 +1,71 @@
+button {
+    &.mat-mdc-fab,
+    &.mat-mdc-raised-button,
+    &.mat-mdc-button,
+    &.mat-mdc-raised-button,
+    &.mat-mdc-icon-button,
+    &.mat-mdc-outlined-button,
+    &.mat-mdc-unelevated-button,
+    &.mat-mdc-fab,
+    &.mat-mdc-mini-fab .mat-mdc-menu-item {
+        font-family: var( --nrcl-font-family );
+        font-size: var( --nrcl-font-size );
+        white-space: nowrap;
+        font-weight: 500;
+        
+        &[disabled] {
+            border: 1px solid #d7d7d7 !important;
+        }        
+    }
+}
+
+button.primary {
+    &.mat-mdc-fab,
+    &.mat-mdc-raised-button,
+    &.mat-mdc-button,
+    &.mat-mdc-raised-button,
+    &.mat-mdc-icon-button,
+    &.mat-mdc-outlined-button,
+    &.mat-mdc-unelevated-button,
+    &.mat-mdc-fab,
+    &.mat-mdc-mini-fab .mat-mdc-menu-item {
+        &:not([disabled]) {
+            background-color: var( --nrcl-button-primary-background-color );
+            color: var( --nrcl-button-primary-foreground-color );
+
+            &.intermediate-action {
+                background-color: #2E7940;
+            }            
+            
+            &:hover {
+                background-color: var( --nrcl-button-primary-hover-background-color );
+            }
+        }
+    }
+}
+
+button.mat-mdc-fab,
+button.mat-mdc-raised-button {
+    background-color: #AAAAAA;
+    color: white;
+    font-family: var( --nrcl-font-family );
+    font-size: var( --nrcl-font-size );
+    box-shadow: none !important;
+    border: 1px solid #003366;
+
+    &:not([class*=mat-elevation-z]) {
+        box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
+            0px 2px 2px 0px rgba(0, 0, 0, 0.14),
+            0px 1px 5px 0px rgba(0, 0, 0, 0.12) !important;
+    }
+}
+
+button.mdc-button.right-side-icon {
+    display: flex;
+
+    mat-icon {
+        order: 1;
+        margin-left: 8px;
+        margin-right: -4px;
+    }
+}

package/styles/include/mat-checkbox.scss

@@ -0,0 +1,44 @@
+mat-checkbox.mat-mdc-checkbox.mat-accent, 
+mat-selection-list .mat-mdc-list-option {
+    font-family: var( --nrcl-font-family );
+    font-size: var( --nrcl-font-size );
+
+    .mdc-checkbox {
+        padding-left: 0;
+        padding-right: 0;
+
+        .mdc-checkbox__native-control {
+            & ~ .mdc-checkbox__background {
+                left: 0;
+                border: 1px solid #c6c8cb;
+            } 
+        }   
+
+        .mdc-checkbox__native-control:enabled {
+            & ~ .mdc-checkbox__background {
+                background-color: white;
+            } 
+        }   
+
+        &:hover .mdc-checkbox__native-control:not([disabled])~.mdc-checkbox__ripple,
+        .mat-mdc-checkbox-ripple, 
+        .mdc-checkbox__ripple {
+            position: absolute;
+            top: 50%;
+            height: 48px;
+            left: 50%;
+            width: 48px;
+            transform: translate(-50%, -50%);            
+        }
+    }
+}
+
+.table-search-header {
+    .search-and-filters {
+        .field.filter-checkbox-group {
+            .checkbox-group {
+                gap: 15px;
+            }
+        }
+    }
+}

package/styles/include/mat-icon.scss

@@ -0,0 +1,30 @@
+.material-icons {
+    font-family: 'Material Symbols Outlined';
+    font-feature-settings: 'liga';
+}
+
+.mat-icon {
+    width: var( --nrcl-icon-size );
+    height: var( --nrcl-icon-size );
+    font-size: var( --nrcl-icon-size );
+    line-height: var( --nrcl-icon-size );
+}
+
+button {
+    &.mat-mdc-fab,
+    &.mat-mdc-raised-button,
+    &.mat-mdc-button,
+    &.mat-mdc-raised-button,
+    &.mat-mdc-icon-button,
+    &.mat-mdc-outlined-button,
+    &.mat-mdc-unelevated-button,
+    &.mat-mdc-fab,
+    &.mat-mdc-mini-fab .mat-mdc-menu-item {
+        > .mat-icon {
+            width: var( --nrcl-icon-size );
+            height: var( --nrcl-icon-size );
+            font-size: var( --nrcl-icon-size );
+            line-height: var( --nrcl-icon-size );
+        }
+    }
+}

package/styles/include/mat-radio-button.scss

@@ -0,0 +1,19 @@
+.mat-mdc-radio-button.mat-accent {
+    --mdc-radio-selected-focus-icon-color: #003366;
+    --mdc-radio-selected-hover-icon-color: #003366;
+    --mdc-radio-selected-icon-color: #003366;
+    --mdc-radio-selected-pressed-icon-color: #003366;
+    --mat-mdc-radio-checked-ripple-color: #003366;
+
+    .mdc-form-field {
+        .mdc-radio {
+            .mdc-radio__native-control:enabled + .mdc-radio__background {
+                .mdc-radio__outer-circle {
+                    background-color: white;
+                }
+                .mdc-radio__inner-circle {
+                }
+            }
+        }
+    }
+}

package/styles/material.scss

@@ -0,0 +1,40 @@
+// Custom Theming for Angular Material
+// For more information: https://material.angular.io/guide/theming
+@use '@angular/material' as mat;
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+@include mat.core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://material.io/design/color/
+$theme-primary: mat.m2-define-palette(mat.$m2-blue-gray-palette, A400, 500, 900);
+$theme-accent: mat.m2-define-palette(mat.$m2-orange-palette, A200, A100, A400);
+ 
+// The warn palette is optional (defaults to red).
+$theme-warn: mat.m2-define-palette(mat.$m2-red-palette);
+
+// Create the theme object. A theme consists of configurations for individual
+// theming systems such as "color" or "typography".
+$theme: mat.m2-define-light-theme((
+  color: (
+    primary: $theme-primary,
+    accent: $theme-accent,
+    warn: $theme-warn,
+  ),
+  typography: mat.m2-define-typography-config(
+    $body-1: mat.m2-define-typography-level( 16px, 24px, 500, 'BCSans', 'normal' ), 
+    $body-2: mat.m2-define-typography-level( 15px, 24px, 200, 'BCSans', 'normal' ), 
+    $headline-5: mat.m2-define-typography-level( 20px, 32px, 700, 'BCSans', 'normal' ), 
+    $headline-6: mat.m2-define-typography-level( 20px, 32px, 700, 'BCSans', 'normal' ), 
+    $button: mat.m2-define-typography-level( 15px, 24px, 700, 'BCSans', 'normal' ), 
+  ),
+));
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include mat.all-component-themes($theme);

package/utils/code-table.util.d.ts

@@ -0,0 +1,12 @@
+export type CodeDescription = {
+    code: string;
+    description: string;
+};
+export declare class CodeTable {
+    private _items;
+    private _reload?;
+    constructor(_items: (CodeDescription)[], _reload?: () => Promise<CodeDescription[]>);
+    get items(): readonly CodeDescription[];
+    forCode(code: string): CodeDescription;
+    reload(): Promise<void>;
+}

package/utils/date.util.d.ts

@@ -0,0 +1,14 @@
+export declare const DATE_FORMATS: {
+    fullPickerInput: string;
+    datePickerInput: string;
+    timePickerInput: string;
+    monthYearLabel: string;
+    dateA11yLabel: string;
+    monthYearA11yLabel: string;
+    simplifiedDate: string;
+    simplifiedMonthDate: string;
+    fullPickerInputWithSlash: string;
+    API_DATE: string;
+    API_TIMESTAMP: string;
+    API_TIMESTAMP_WITH_SEP: string;
+};

package/utils/filter.util.d.ts

@@ -0,0 +1,4 @@
+import { CodeDescription } from "./code-table.util";
+export declare function wrapFilterValue(val: any): any[];
+export declare function unwrapFilterValue(val: any): any;
+export declare function mapToCodeDescription(list: Array<any>, codeField: string, descriptionField: string): CodeDescription[];

package/utils/row-list.util.d.ts

@@ -0,0 +1,16 @@
+import { Observable } from "rxjs";
+export declare class Aborted {
+    reason: string;
+    constructor(reason: string);
+}
+export declare class ObservableAborter<T> {
+    private observable;
+    private delay;
+    private _promise;
+    private _abort;
+    private _aborted;
+    constructor(observable: () => Observable<T>, delay?: number);
+    abort(): void;
+    get aborted(): boolean;
+    get promise(): Promise<T>;
+}