@symphony-talent/component-library 3.1.0 → 3.2.0

package/projects/component-library/global.scss

@@ -104,21 +104,13 @@ $font-bold: "neuzeit_groteskbold", sans-serif;
 $font-black: "neuzeit_groteskblack", sans-serif;
 $font-cond-black: "neuzeit_grotesk_t_otBlkCn", sans-serif;
 $font-sfxicon: "sfxicons", sans-serif;
-// Spacing
-$space-0: 0px;
-$space-5: 0.3rem;
-$space-10: 0.625rem;
-$space-15: 0.9375rem;
-$space-20: 1.25rem;
-$space-25: 1.5625rem;
-$space-30: 1.875rem;
-$space-35: 2.1875rem;
-$space-40: 2.5rem;
-$space-50: 3.125rem;
-$space-75: 4.688rem;
+
 // Iconography
 @import "global-assets/iconography/library-icons.css";
 // End Iconography
+// Spacing
+
+@import "global-assets/spacing.scss";
 @import "node_modules/ag-grid-community/src/styles/ag-grid.scss";
 @import "node_modules/ag-grid-community/src/styles/ag-theme-alpine/sass/ag-theme-alpine-mixin.scss";
 .ag-theme-alpine {
@@ -272,246 +264,7 @@ body {
     }
     // End Background Color
     // End Color
-  
-    // Padding
-    .sfx-p-0 {
-      padding: $space-0;
-    }
-    .sfx-p-5 {
-      padding: $space-5;
-    }
-    .sfx-p-10 {
-      padding: $space-10;
-    }
-    .sfx-p-15 {
-      padding: $space-15;
-    }
-    .sfx-p-20 {
-      padding: $space-20;
-    }
-    // End Padding
-    // Padding top
-    .sfx-pt-0 {
-      padding-top: $space-0;
-    }
-    .sfx-pt-5 {
-      padding-top: $space-5;
-    }
-    .sfx-pt-10 {
-      padding-top: $space-10;
-    }
-    .sfx-pt-15 {
-      padding-top: $space-15;
-    }
-    .sfx-pt-20 {
-      padding-top: $space-20;
-    }
-    .sfx-pt-25 {
-      padding-top: $space-25;
-    }
-    .sfx-pt-30 {
-      padding-top: $space-30;
-    }
-    .sfx-pt-40 {
-      padding-top: $space-40;
-    }
-    .sfx-pt-50 {
-      padding-top: $space-50;
-    }
-    // End Padding top
-    // Padding bottom
-    .sfx-pb-0 {
-      padding-bottom: $space-0;
-    }
-    .sfx-pb-5 {
-      padding-bottom: $space-5;
-    }
-    .sfx-pb-10 {
-      padding-bottom: $space-10;
-    }
-    .sfx-pb-15 {
-      padding-bottom: $space-15;
-    }
-    .sfx-pb-20 {
-      padding-bottom: $space-20;
-    }
-    .sfx-pb-25 {
-      padding-bottom: $space-25;
-    }
-    .sfx-pb-30 {
-      padding-bottom: $space-30;
-    }
-    .sfx-pb-40 {
-      padding-bottom: $space-40;
-    }
-    .sfx-pb-50 {
-      padding-bottom: $space-50;
-    }
-    // End Padding bottom
-    // Padding left
-    .sfx-pl-0 {
-      padding-left: $space-0;
-    }
-    .sfx-pl-5 {
-      padding-left: $space-5;
-    }
-    .sfx-pl-10 {
-      padding-left: $space-10;
-    }
-    .sfx-pl-15 {
-      padding-left: $space-15;
-    }
-    .sfx-pl-20 {
-      padding-left: $space-20;
-    }
-    .sfx-pl-25 {
-      padding-left: $space-25;
-    }
-    .sfx-pl-30 {
-      padding-left: $space-30;
-    }
-    // End Padding left
-    // Padding right
-    .sfx-pr-0 {
-      padding-right: $space-0;
-    }
-    .sfx-pr-5 {
-      padding-right: $space-5;
-    }
-    .sfx-pr-10 {
-      padding-right: $space-10;
-    }
-    .sfx-pr-15 {
-      padding-right: $space-15;
-    }
-    .sfx-pr-20 {
-      padding-right: $space-20;
-    }
-    .sfx-pr-25 {
-      padding-right: $space-25;
-    }
-    .sfx-pr-30 {
-      padding-right: $space-30;
-    }
-    // End Padding right
-    // Margin
-    .sfx-m-0 {
-      margin: $space-0;
-    }
-    .sfx-m-5 {
-      margin: $space-5;
-    }
-    .sfx-m-10 {
-      margin: $space-10;
-    }
-    .sfx-m-15 {
-      margin: $space-15;
-    }
-    .sfx-m-20 {
-      margin: $space-20;
-    }
-    .sfx-m-auto {
-      margin: 0 auto;
-    }
-    // End Margin
-    // Margin top
-    .sfx-mt-0 {
-      margin-top: $space-0;
-    }
-    .sfx-mt-5 {
-      margin-top: $space-5;
-    }
-    .sfx-mt-10 {
-      margin-top: $space-10;
-    }
-    .sfx-mt-15 {
-      margin-top: $space-15;
-    }
-    .sfx-mt-20 {
-      margin-top: $space-20;
-    }
-    .sfx-mt-25 {
-      margin-top: $space-25;
-    }
-    .sfx-mt-30 {
-      margin-top: $space-30;
-    }
-    .sfx-mt-40 {
-      margin-top: $space-40;
-    }
-    // End Margin top
-    // Margin bottom
-    .sfx-mb-0 {
-      margin-bottom: $space-0;
-    }
-    .sfx-mb-5 {
-      margin-bottom: $space-5;
-    }
-    .sfx-mb-10 {
-      margin-bottom: $space-10;
-    }
-    .sfx-mb-15 {
-      margin-bottom: $space-15;
-    }
-    .sfx-mb-20 {
-      margin-bottom: $space-20;
-    }
-    .sfx-mb-25 {
-      margin-bottom: $space-25;
-    }
-    .sfx-mb-30 {
-      margin-bottom: $space-30;
-    }
-    .sfx-mb-40 {
-      margin-bottom: $space-40;
-    }
-    // End Padding bottom
-    // Padding left
-    .sfx-ml-0 {
-      margin-left: $space-0;
-    }
-    .sfx-ml-5 {
-      margin-left: $space-5;
-    }
-    .sfx-ml-10 {
-      margin-left: $space-10;
-    }
-    .sfx-ml-15 {
-      margin-left: $space-15;
-    }
-    .sfx-ml-20 {
-      margin-left: $space-20;
-    }
-    .sfx-ml-auto {
-      margin-left: auto;
-    }
-    // End Paddimargin
-    // Padding right
-    .sfx-mr-0 {
-      margin-right: $space-0;
-    }
-    .sfx-mr-5 {
-      margin-right: $space-5;
-    }
-    .sfx-mr-10 {
-      margin-right: $space-10;
-    }
-    .sfx-mr-15 {
-      margin-right: $space-15;
-    }
-    .sfx-mr-20 {
-      margin-right: $space-20;
-    }
-    .sfx-mr-25 {
-      margin-right: $space-25;
-    }
-    .sfx-mr-30 {
-      margin-right: $space-30;
-    }
-    .sfx-mr-40 {
-      margin-right: $space-40;
-    }
-    // End Padding right
+
     // End Spacing
     // Border
     .sfx-border-0 {
@@ -610,6 +363,231 @@ body {
     // End Helper Classes
     // End Utilities
   }
+  p {
+    font-size: $font-14;
+    font-family: $font-reg;
+  }
+  h5 {
+    font-size: $font-14;
+    font-family: $font-bold;
+  }
+  h4 {
+    font-size: $font-24;
+    font-family: $font-bold;
+  }
+  h3 {
+    font-size: $font-30;
+    font-family: $font-bold;
+  }
+  h2 {
+    font-size: $font-46;
+    font-family: $font-black;
+  }
+  h1 {
+    font-size: $font-56;
+    font-family: $font-black;
+  }
+  // End Typography
+  // Utilities
+  // Fonts
+  .sfx-font12 {
+    font-size: $font-12;
+  }
+  .sfx-font14 {
+    font-size: $font-14;
+  }
+  .sfx-font18 {
+    font-size: $font-18;
+  }
+  .sfx-font24 {
+    font-size: $font-24;
+  }
+  .sfx-font30 {
+    font-size: $font-30;
+  }
+  .sfx-font-40 {
+    font-size: $font-40;
+  }
+  .sfx-font46 {
+    font-size: $font-46;
+  }
+  .sfx-font56 {
+    font-size: $font-56;
+  }
+  .sfx-font400 {
+    font-weight: 400;
+  }
+  .sfx-font600 {
+    font-weight: 600;
+  }
+  .sfx-font700 {
+    font-weight: 600;
+  }
+  .sfx-font-light {
+    font-family: $font-light;
+  }
+  .sfx-font-bold {
+    font-family: $font-bold;
+  }
+  .sfx-font-black {
+    font-family: $font-black;
+  }
+  // End Fonts
+  // Color
+  .sfx-txt-white {
+    color: $color-white;
+  }
+  .sfx-txt-black {
+    color: $color-black;
+  }
+  .sfx-txt-mdm-black {
+    color: $color-mdm-black;
+  }
+  .sfx-txt-gray {
+    color: $color-gray;
+  }
+  .sfx-txt-light-gray {
+    color: $color-light-gray;
+  }
+  .sfx-txt-light-gray2 {
+    color: $color-light-gray2;
+  }
+  .sfx-txt-fuchsia {
+    color: $color-st-fuchsia;
+  }
+  .sfx-txt-purple {
+    color: $color-purple;
+  }
+  .sfx-txt-pink {
+    color: $color-pink;
+  }
+  .sfx-txt-turq {
+    color: $color-turquoise;
+  }
+  .sfx-txt-blue {
+    color: $color-blue;
+  }
+  .sfx-txt-green {
+    color: $color-green;
+  }
+  .sfx-txt-orange {
+    color: $color-orange;
+  }
+  .sfx-txt-yellow {
+    color: $color-yellow;
+  }
+  .sfx-txt-red {
+    color: $color-red;
+  }
+  .sfx-link {
+    color: $color-st-link;
+  }
+  // Background Color
+  .sfx-bg-black {
+    background: $color-black;
+  }
+  .sfx-bg-white {
+    background: $color-white;
+  }
+  // End Background Color
+  // End Color
+
+  // Border
+  .sfx-border-0 {
+    border: 0;
+  }
+  .sfx-border-top-0 {
+    border-top: 0;
+  }
+  .sfx-border-bottom-0 {
+    border-bottom: 0;
+  }
+  .sfx-border-left-0 {
+    border-left: 0;
+  }
+  .sfx-border-right-0 {
+    border-right: 0;
+  }
+  .sfx-border-gray-1 {
+    border: 1px solid $color-light-gray2;
+  }
+  .sfx-border-black-1 {
+    border: 1px solid $color-black;
+  }
+  .sfx-border-bottom-gray-1 {
+    border-bottom: 1px solid $color-light-gray2;
+  }
+  .sfx-border-bottom-black-1 {
+    border-bottom: 1px solid $color-black;
+  }
+  .sfx-border-bottom-mdm-black-1 {
+    border-bottom: 1px solid $color-mdm-black;
+  }
+  .sfx-border-bottom-black-5 {
+    border-bottom: 5px solid $color-black;
+  }
+  .sfx-border-bottom-white-5 {
+    border-bottom: 5px solid $color-white;
+  }
+  .sfx-border-top-gray-1 {
+    border-top: 1px solid $color-light-gray2;
+  }
+  .sfx-border-top-black-1 {
+    border-top: 1px solid $color-black;
+  }
+  .sfx-border-top-black-5 {
+    border-top: 5px solid $color-black;
+  }
+  .sfx-border-radius-0 {
+    border-radius: 0;
+  }
+  // End Border
+  // Display
+  .sfx-d-none {
+    display: none;
+  }
+  .sfx-d-block {
+    display: block;
+  }
+  .sfx-d-inline-block {
+    display: inline-block;
+  }
+  .sfx-d-flex {
+    display: flex;
+  }
+  .sfx-d-table {
+    display: table;
+  }
+  .sfx-d-grid {
+    display: grid;
+  }
+  // End Display
+  .sfx-wid-100 {
+    width: 100%;
+  }
+  .sfx-wid-100px {
+    width: 100px;
+  }
+  // Position
+  .sfx-position-relative {
+    position: relative;
+  }
+  .sfx-position-absolute {
+    position: absolute;
+  }
+  .sfx-position-fixed {
+    position: fixed;
+  }
+  .sfx-position-sticky {
+    position: sticky;
+  }
+  // End Position
+  // Helper Classes
+  .sfx-cursor-pointer {
+    cursor: pointer;
+  }
+  // End Helper Classes
+  // End Utilities
 }
 // Grid
 .ag-theme-alpine {

package/projects/component-library/lib/atoms/grid/grid.component.d.ts

@@ -3,17 +3,13 @@ import * as i0 from "@angular/core";
 export declare class GridComponent {
     columnDefs: ColDef[];
     rowData: any[];
+    onGridReadyFunction: any;
     getRowHeight: () => number;
     rowHeightPage: number;
     gridHeight: number;
     frameworkComponents: any;
     constructor();
-    onGridReady(gridReadyEvent: {
-        api: {
-            sizeColumnsToFit: () => void;
-        };
-    }): void;
     getFrameworkComponents(): any;
     static ɵfac: i0.ɵɵFactoryDeclaration<GridComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GridComponent, "symphony-grid", never, { "columnDefs": "columnDefs"; "rowData": "rowData"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GridComponent, "symphony-grid", never, { "columnDefs": "columnDefs"; "rowData": "rowData"; "onGridReadyFunction": "onGridReadyFunction"; }, {}, never, never>;
 }

package/projects/component-library/lib/atoms/grid/grid.model.d.ts

@@ -2,4 +2,5 @@ import { ColDef } from 'ag-grid-community';
 export interface GridModel {
     columnDefs: ColDef[];
     rowData: any[];
+    onGridReadyFunction: any;
 }

package/projects/component-library/lib/atoms/input-text/input-text.component.d.ts

@@ -6,6 +6,7 @@ export declare class InputTextComponent implements OnInit, OnDestroy {
     icon: string;
     label: string;
     isInverse: boolean;
+    noMargin: boolean;
     textChange: EventEmitter<string>;
     textChange$: Subject<string>;
     textChangeSubscription: Subscription;
@@ -14,5 +15,5 @@ export declare class InputTextComponent implements OnInit, OnDestroy {
     ngOnDestroy(): void;
     onTextChange(event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<InputTextComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<InputTextComponent, "symphony-input-text", never, { "placeholder": "placeholder"; "icon": "icon"; "label": "label"; "isInverse": "isInverse"; }, { "textChange": "textChange"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputTextComponent, "symphony-input-text", never, { "placeholder": "placeholder"; "icon": "icon"; "label": "label"; "isInverse": "isInverse"; "noMargin": "noMargin"; }, { "textChange": "textChange"; }, never, never>;
 }

package/projects/component-library/lib/pages/events-settings-page/events-settings-page.component.d.ts

@@ -13,5 +13,5 @@ export declare class EventsSettingsPageComponent {
     gridActionsSelect(selection: string): void;
     onAddButtonClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<EventsSettingsPageComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<EventsSettingsPageComponent, "symphony-events-settings-page", never, { "model": "model"; }, { "keywordSearchChange": "keywordSearchChange"; "gridActionsSelectedOption": "gridActionsSelectedOption"; "addButtonClicked": "addButtonClicked"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EventsSettingsPageComponent, "symphony-events-settings-page", never, { "model": "model"; }, { "keywordSearchChange": "keywordSearchChange"; "gridActionsSelectedOption": "gridActionsSelectedOption"; "addButtonClicked": "addButtonClicked"; }, never, ["filter-one"]>;
 }

package/projects/component-library/lib/pages/events-settings-page/events-settings-page.model.d.ts

@@ -10,5 +10,4 @@ export interface EventsSettingsPageModel {
     grid: GridModel;
     gridTitle: string;
     overrideSettingTypeFilterPlaceholder: boolean;
-    overrideGridPlaceholder: boolean;
 }