@symphony-talent/component-library 1.7.0 → 1.8.0

package/fesm2015/symphony-talent-component-library.js

@@ -1,16 +1,16 @@
 import { __decorate } from 'tslib';
 import { Input, Component, NgModule, EventEmitter, Output, ViewEncapsulation } from '@angular/core';
-import { CommonModule, SlicePipe } from '@angular/common';
+import { SlicePipe, CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { AgGridModule } from 'ag-grid-angular';
 
 let AvatarComponent = class AvatarComponent {
-    constructor(sp) {
-        this.sp = sp;
-    }
+    constructor() { }
     ngOnInit() {
+        this.sp = new SlicePipe();
         this.initials = '';
         this.firstInitial = '';
         this.bgColor = '';
@@ -110,7 +110,6 @@ AvatarModule = __decorate([
     NgModule({
         declarations: [AvatarComponent],
         imports: [CommonModule],
-        providers: [SlicePipe],
         exports: [AvatarComponent],
     })
 ], AvatarModule);
@@ -133,14 +132,17 @@ __decorate([
 __decorate([
     Input()
 ], ButtonComponent.prototype, "isSecondary", void 0);
+__decorate([
+    Input()
+], ButtonComponent.prototype, "isInverse", void 0);
 __decorate([
     Output()
 ], ButtonComponent.prototype, "clicked", void 0);
 ButtonComponent = __decorate([
     Component({
         selector: 'symphony-button',
-        template: "<button class=\"btn\" \n[ngClass]=\"{'btn-secondary': isSecondary, 'btn-primary': !isSecondary }\"\n(click)=\"onClick()\" [disabled]=\"disabled\">{{ text }}</button>",
-        styles: ["button,button:focus{outline:none}button:disabled{cursor:not-allowed;opacity:.3}.btn{border-radius:30px;height:60px;min-width:140px;padding-left:40px;padding-right:40px}.btn:focus{outline:none}.btn:disabled{opacity:.3}.btn-primary{background:#000;border:1px solid #000;color:#fff}.btn-secondary{background:#fff;border:1px solid #000;color:#000}"]
+        template: "<button class=\"btn\" \n[ngClass]=\"{'btn-secondary': isSecondary, 'btn-primary': !isSecondary, 'is-inverse': isInverse }\"\n(click)=\"onClick()\" [disabled]=\"disabled\">{{ text }}</button>",
+        styles: ["button{outline:none}.btn{border-radius:30px;font-family:neuzeit_groteskbold;height:56px;letter-spacing:.4px;min-width:140px;padding-left:40px;padding-right:40px}.btn:focus{outline:none}.btn:disabled{cursor:not-allowed;opacity:1%}.btn-primary{background:#000!important;border:2px solid #000!important;color:#fff}.btn-primary.is-inverse{background:#fff!important;border:2px solid #fff!important;color:#000}.btn-secondary{background:#fff;border:2px solid #000;color:#000}.btn-secondary.is-inverse{background:#000;border:2px solid #fff;color:#fff}"]
     })
 ], ButtonComponent);
 
@@ -183,9 +185,9 @@ __decorate([
 PillComponent = __decorate([
     Component({
         selector: 'symphony-pill',
-        template: "<span *ngIf=\"tooltipLabel\"\n    class=\"sfx-d-inline-block sfx-pill-item\"\n    [ngClass]=\"{'inverse-pill': isInverse }\"\n    tooltip=\"{{tooltipLabel}}\"\n    placement=\"top\"\n    containerClass=\"sfx-info-tooltip pill-tooltip\"\n    [adaptivePosition]=\"false\"\n    >\n    <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n        class=\"si-close-modal sfx-cursor-pointer\"\n    ></i>\n    {{ pillLabel }}\n</span>\n\n<span *ngIf=\"!tooltipLabel\"\n    class=\"sfx-d-inline-block sfx-pill-item\"\n    [ngClass]=\"{'inverse-pill': isInverse }\"\n    >\n    <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n        class=\"si-close-modal sfx-cursor-pointer\"\n    ></i>\n    {{ pillLabel }}\n</span>",
+        template: "<span *ngIf=\"tooltipLabel\"\n    class=\"sfx-d-inline-block sfx-pill-item\"\n    [ngClass]=\"{'inverse-pill': isInverse }\"\n    [ngClass]=\"{'has-close': hasClose }\"\n    tooltip=\"{{tooltipLabel}}\"\n    placement=\"top\"\n    containerClass=\"sfx-info-tooltip pill-tooltip\"\n    [adaptivePosition]=\"false\"\n    >\n    <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n        class=\"si-add sfx-cursor-pointer\"\n    ></i>\n    {{ pillLabel }}\n</span>\n\n<span *ngIf=\"!tooltipLabel\"\n    class=\"sfx-d-inline-block sfx-pill-item\"\n    [ngClass]=\"{'inverse-pill': isInverse }\"\n    [ngClass]=\"{'has-close': hasClose }\"\n    >\n    <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n        class=\"si-add sfx-cursor-pointer\"\n    ></i>\n    {{ pillLabel }}\n</span>",
         encapsulation: ViewEncapsulation.None,
-        styles: [".sfx-pill-item{background-color:#f1f1f1;border-radius:25px;color:#000;font-weight:600;margin-right:10px;margin-top:10px;padding:10px 20px;text-align:center}.sfx-pill-item.inverse-pill{background-color:#000;color:#fff}.sfx-pill-item i{font-size:12px;position:relative;top:2px}.sfx-pill-item:hover{background-color:#000;color:#fff}.sfx-d-inline-block{display:inline-block}.sfx-cursor-pointer{cursor:pointer}.sfx-info-tooltip{min-width:100px}.sfx-info-tooltip.pill-tooltip{min-width:80px;opacity:1;top:-5px!important}.sfx-info-tooltip.pill-tooltip .tooltip-inner{border-radius:10px;box-shadow:0 0 20px rgba(0,0,0,.2);font-weight:600}.sfx-info-tooltip.pill-tooltip .tooltip-arrow.arrow{border-top-color:#fff}.sfx-info-tooltip .tooltip-inner{background-color:#fff;border-radius:0;color:#000;font-size:13px;max-width:160px;padding:8px 15px}"]
+        styles: [".sfx-pill-item{background-color:#f1f1f1;border-radius:25px;color:#000;font-family:neuzeit_groteskbold;font-weight:600;margin-right:10px;margin-top:10px;padding:10px 20px;position:relative;text-align:center}.sfx-pill-item.inverse-pill,.sfx-pill-item:hover{background-color:#000;color:#fff}.sfx-pill-item.has-close{padding:10px 20px 10px 38px}.sfx-pill-item i{font-size:18px;left:14px;position:absolute;top:11px;transform:rotate(45deg)}.sfx-d-inline-block{display:inline-block}.sfx-cursor-pointer{cursor:pointer}.sfx-info-tooltip{min-width:100px}.sfx-info-tooltip.pill-tooltip{min-width:80px;opacity:1;top:-5px!important}.sfx-info-tooltip.pill-tooltip .tooltip-inner{border-radius:10px;box-shadow:0 0 20px rgba(0,0,0,.2);font-weight:600}.sfx-info-tooltip.pill-tooltip .tooltip-arrow.arrow{border-top-color:#fff}.sfx-info-tooltip .tooltip-inner{background-color:#fff;border-radius:0;color:#000;font-size:13px;max-width:160px;padding:8px 15px}"]
     })
 ], PillComponent);
 
@@ -367,7 +369,7 @@ ParagraphComponent = __decorate([
     Component({
         selector: 'symphony-paragraph',
         template: "<p\n  [ngClass]=\"{\n    'body-copy-secondary': isSecondary,\n    'body-copy-primary': !isSecondary\n  }\"\n>\n  {{ text }}\n  <ng-content></ng-content>\n</p>\n",
-        styles: [".body-copy-primary,.body-copy-secondary{color:#000;font-family:neuzeit-grotesk,sans-serif!important;font-size:14px;line-height:20px;margin-bottom:0}.body-copy-secondary{color:#fff}"]
+        styles: [".body-copy-primary,.body-copy-secondary{color:#000;line-height:20px;margin-bottom:0}.body-copy-secondary{color:#fff}"]
     })
 ], ParagraphComponent);
 
@@ -395,7 +397,7 @@ H5Component = __decorate([
     Component({
         selector: 'symphony-h5',
         template: "<h5\n  [ngClass]=\"{\n    'h5-secondary': isSecondary,\n    'h5-primary': !isSecondary\n  }\"\n>\n  {{ text }}\n  <ng-content></ng-content>\n</h5>\n",
-        styles: [".h5-primary,.h5-secondary{color:#000;font-size:14px;line-height:20px;margin-bottom:0;margin-top:0}.h5-secondary{color:#fff}"]
+        styles: [".h5-primary,.h5-secondary{color:#000;line-height:20px;margin-bottom:0;margin-top:0}.h5-secondary{color:#fff}"]
     })
 ], H5Component);
 
@@ -725,7 +727,7 @@ ContextualMenuComponent = __decorate([
     Component({
         selector: 'symphony-contextual-menu',
         template: "<div class=\"btn-group\" dropdown>\n  <button\n    id=\"button-basic\"\n    dropdownToggle\n    type=\"button\"\n    class=\"btn dropdown-toggle\"\n    aria-controls=\"dropdown-basic\"\n  >\n    <i class=\"si-more-options\"></i>\n  </button>\n  <ul\n    id=\"dropdown-basic\"\n    *dropdownMenu\n    class=\"dropdown-menu\"\n    role=\"menu\"\n    aria-labelledby=\"button-basic\"\n  >\n    <li role=\"menuitem\" *ngFor=\"let moreActions of sfxMoreActions\">\n      <a class=\"dropdown-item\" href=\"#\">{{ moreActions.dropItemName }}</a>\n    </li>\n  </ul>\n</div>\n",
-        styles: [".btn-group button.dropdown-toggle.btn{align-items:center;background:#fff;border-radius:50%;box-shadow:none;color:#000;display:flex;font-size:24px;height:40px;justify-content:center;line-height:26px;padding:0;width:40px}.btn-group button.dropdown-toggle.btn:hover{background:#000;color:#fff}.btn-group .dropdown-menu{border:none;border-radius:10px;box-shadow:0 0 15px rgba(0,0,0,.175);left:auto;margin-top:10px;max-height:none;overflow:inherit;padding-bottom:20px;padding-top:20px;right:7px}.btn-group .dropdown-menu li a.dropdown-item{color:#000;font-weight:600;padding:10px 20px}.btn-group .dropdown-menu li a.dropdown-item:hover{background:#000;color:#fff}.btn-group .dropdown-menu li a.not-allowed{cursor:not-allowed}.btn-group .dropdown-menu:before{color:#fff;content:\"\\e252\";display:inline-block;font-family:Glyphicons Halflings!important;font-size:14px;position:absolute;right:8px;top:-13px;transform:rotate(180deg)}.btn-group.open button.dropdown-toggle.btn{background:#000;color:#fff}"]
+        styles: [".btn-group button.dropdown-toggle.btn{align-items:center;background:#fff;border-radius:50%;box-shadow:none;color:#000;display:flex;font-size:18px;height:40px;justify-content:center;line-height:26px;padding:0;width:40px}.btn-group button.dropdown-toggle.btn:hover{background:#000;color:#fff}.btn-group .dropdown-menu{border:none;border-radius:10px;box-shadow:0 0 15px rgba(0,0,0,.175);left:auto;margin-top:10px;max-height:none;min-width:240px;overflow:inherit;padding-bottom:20px;padding-top:20px;right:-10px}.btn-group .dropdown-menu li a.dropdown-item{color:#000;font-weight:600;line-height:40px;padding:0 20px}.btn-group .dropdown-menu li a.dropdown-item:hover{background:#000;color:#fff}.btn-group .dropdown-menu li a.not-allowed{cursor:not-allowed}.btn-group .dropdown-menu:before{color:#fff;content:\"\\e252\";display:inline-block;font-family:Glyphicons Halflings!important;font-size:14px;position:absolute;right:23px;top:-13px;transform:rotate(180deg)}.btn-group.open button.dropdown-toggle.btn{background:#000;color:#fff}"]
     })
 ], ContextualMenuComponent);
 
@@ -735,7 +737,7 @@ ContextualMenuModule = __decorate([
     NgModule({
         declarations: [ContextualMenuComponent],
         imports: [CommonModule, BsDropdownModule.forRoot(), BrowserAnimationsModule],
-        exports: [ContextualMenuComponent]
+        exports: [ContextualMenuComponent],
     })
 ], ContextualMenuModule);
 
@@ -751,6 +753,29 @@ PillModule = __decorate([
     })
 ], PillModule);
 
+let FilterAreaComponent = class FilterAreaComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+};
+FilterAreaComponent = __decorate([
+    Component({
+        selector: 'symphony-filter-area',
+        template: "<div class=\"sfx-filter-section\">\n    <div class=\"sfx-border-bottom-mdm-black-1 sfx-mb-20 sfx-pb-20 sfx-mt-10 sfx-d-inline-block sfx-wid-100\">\n        <ng-content select=\"[title]\"></ng-content>\n        <div class=\"sfx-d-inline-block sfx-ml-10 pull-right\">\n            <ng-content select=\"[actions]\"></ng-content>\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-1]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-2]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-3]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-4]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-5]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter-6]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-mb-25\">\n            <ng-content select=\"[filter-7]\"></ng-content>\n        </div>\n    </div>\n</div>",
+        styles: [".sfx-filter-section{background:#000;color:#fff;padding:1.875rem 2.5rem}"]
+    })
+], FilterAreaComponent);
+
+let FilterAreaModule = class FilterAreaModule {
+};
+FilterAreaModule = __decorate([
+    NgModule({
+        declarations: [FilterAreaComponent],
+        imports: [CommonModule],
+        exports: [FilterAreaComponent]
+    })
+], FilterAreaModule);
+
 let TwoColumnFilterAreaComponent = class TwoColumnFilterAreaComponent {
     constructor() { }
     ngOnInit() { }
@@ -776,6 +801,178 @@ TwoColumnFilterAreaModule = __decorate([
     })
 ], TwoColumnFilterAreaModule);
 
+var ActivityScoreLevel;
+(function (ActivityScoreLevel) {
+    ActivityScoreLevel["Low"] = "low";
+    ActivityScoreLevel["Medium"] = "medium";
+    ActivityScoreLevel["High"] = "high";
+    ActivityScoreLevel["Empty"] = "empty";
+})(ActivityScoreLevel || (ActivityScoreLevel = {}));
+
+let ContactActivityScoreComponent = class ContactActivityScoreComponent {
+    constructor() {
+        this.contactActivityScoreModel = { activityScore: ActivityScoreLevel.Low };
+        this.contact = { candidateScoreActivityScore: 0 };
+    }
+    refresh(params) {
+        return true;
+    }
+    agInit(params) {
+        this.contact = params.data;
+        if (!this.contact.header5) {
+            this.dataAvailable = 'N/A';
+        }
+        else {
+            this.dataAvailable = this.contact.header5;
+        }
+        switch (true) {
+            case this.contact.header5 >= 0 && this.contact.header5 < 34: {
+                this.contactActivityScoreModel.activityScore = ActivityScoreLevel.Low;
+                break;
+            }
+            case this.contact.header5 >= 34 && this.contact.header5 <= 66: {
+                this.contactActivityScoreModel.activityScore =
+                    ActivityScoreLevel.Medium;
+                break;
+            }
+            case this.contact.header5 > 66: {
+                this.contactActivityScoreModel.activityScore = ActivityScoreLevel.High;
+                break;
+            }
+            default: {
+                this.contactActivityScoreModel.activityScore = ActivityScoreLevel.Empty;
+                break;
+            }
+        }
+    }
+};
+ContactActivityScoreComponent = __decorate([
+    Component({
+        selector: 'lib-contact-activity-score',
+        template: "<span\n  class=\"activity-score-bg activity-score-{{\n    contactActivityScoreModel.activityScore\n  }}\"\n>\n  <div class=\"activity-score-content\">{{ dataAvailable }}</div>\n</span>\n",
+        styles: [".activity-score-bg{background-color:#bbb;border-radius:50%;color:#fff;display:inline-block;height:38px;text-align:center;width:38px}.activity-score-bg.activity-score-high{background-color:#00bb5b}.activity-score-bg.activity-score-medium{background-color:#f57300}.activity-score-bg.activity-score-low{background-color:#d60000}.activity-score-bg.activity-score-empty{background-color:#fff;color:#000!important}"]
+    })
+], ContactActivityScoreComponent);
+
+var RelevanceScoreLevel;
+(function (RelevanceScoreLevel) {
+    RelevanceScoreLevel["Value"] = "value";
+    RelevanceScoreLevel["Empty"] = "empty";
+})(RelevanceScoreLevel || (RelevanceScoreLevel = {}));
+
+let RelevanceScoreComponent = class RelevanceScoreComponent {
+    constructor() {
+        this.relevanceScoreModel = { relevanceScore: RelevanceScoreLevel.Empty };
+        this.contact = { relevanceScore: 0 };
+    }
+    refresh(params) {
+        return true;
+    }
+    agInit(params) {
+        this.contact = params.data;
+        if (this.contact) {
+            if (this.contact.header4 || this.contact.header4 === 0) {
+                this.relevanceData = this.contact.header4;
+                this.relevanceScoreModel.relevanceScore = RelevanceScoreLevel.Value;
+            }
+            else {
+                this.relevanceData = 'N/A';
+            }
+        }
+    }
+};
+RelevanceScoreComponent = __decorate([
+    Component({
+        selector: 'lib-relevance-score',
+        template: "<span class=\"relevance-score-bg relevance-score-{{ relevanceScoreModel.relevanceScore }}\">\n  <div class=\"relevance-score-content\">{{ relevanceData}}</div>\n</span>",
+        styles: [".relevance-score-bg{background-color:#fff;border-radius:50%;color:#000;display:inline-block;height:38px;text-align:center;width:38px}.relevance-score-value{border:1px solid #000;font-weight:700}"]
+    })
+], RelevanceScoreComponent);
+
+let GridComponent = class GridComponent {
+    constructor() {
+        this.rowHeightPage = 80;
+        this.gridHeight = 100;
+        this.frameworkComponents = this.getFrameworkComponents();
+        this.columnDefs = [
+            { headerName: 'Name', field: 'header1' },
+            { headerName: 'Location', field: 'header2' },
+            { headerName: 'Title', field: 'header3' },
+            {
+                headerName: 'Engagement Score',
+                field: 'header4',
+                cellRenderer: 'fitScore',
+            },
+            {
+                headerName: 'Activity Score',
+                field: 'header5',
+                cellRenderer: 'contactActivityScore',
+            },
+        ];
+        this.getRowHeight = () => {
+            return this.rowHeightPage;
+        };
+    }
+    ngOnInit() { }
+    onGridReady(gridReadyEvent) {
+        gridReadyEvent.api.sizeColumnsToFit();
+    }
+    getFrameworkComponents() {
+        return {
+            contactActivityScore: ContactActivityScoreComponent,
+            fitScore: RelevanceScoreComponent,
+        };
+    }
+};
+__decorate([
+    Input()
+], GridComponent.prototype, "gridList", void 0);
+GridComponent = __decorate([
+    Component({
+        selector: 'symphony-grid',
+        template: "<ag-grid-angular\n  style=\"width: 100%\"\n  class=\"ag-theme-alpine\"\n  [rowData]=\"gridList\"\n  [columnDefs]=\"columnDefs\"\n  (gridReady)=\"onGridReady($event)\"\n  [style.height.vh]=\"gridHeight\"\n  [getRowHeight]=\"getRowHeight\"\n  [frameworkComponents]=\"frameworkComponents\"\n>\n</ag-grid-angular>\n",
+        styles: [""]
+    })
+], GridComponent);
+
+let ContactActivityScoreModule = class ContactActivityScoreModule {
+};
+ContactActivityScoreModule = __decorate([
+    NgModule({
+        declarations: [ContactActivityScoreComponent],
+        imports: [CommonModule],
+    })
+], ContactActivityScoreModule);
+
+let RelevanceScoreModule = class RelevanceScoreModule {
+};
+RelevanceScoreModule = __decorate([
+    NgModule({
+        declarations: [RelevanceScoreComponent],
+        imports: [CommonModule],
+    })
+], RelevanceScoreModule);
+
+let FrameworkModule = class FrameworkModule {
+};
+FrameworkModule = __decorate([
+    NgModule({
+        declarations: [],
+        imports: [],
+        exports: [ContactActivityScoreModule, RelevanceScoreModule]
+    })
+], FrameworkModule);
+
+let GridModule = class GridModule {
+};
+GridModule = __decorate([
+    NgModule({
+        declarations: [GridComponent],
+        imports: [CommonModule, AgGridModule.withComponents([]), FrameworkModule],
+        exports: [GridComponent]
+    })
+], GridModule);
+
 let AtomsModule = class AtomsModule {
 };
 AtomsModule = __decorate([
@@ -797,10 +994,14 @@ AtomsModule = __decorate([
             ParagraphModule,
             IconModule,
             IconWrapperModule,
+            FilterAreaModule,
             TwoColumnFilterAreaModule,
             InputRadioModule,
             InputCheckboxModule,
             InputTextModule,
+            GridModule,
+            ContactActivityScoreModule,
+            RelevanceScoreModule
         ],
     })
 ], AtomsModule);
@@ -1223,6 +1424,587 @@ EventsSettingsPageModule = __decorate([
     })
 ], EventsSettingsPageModule);
 
+let ColorSwatchCollectionComponent = class ColorSwatchCollectionComponent {
+    constructor() { }
+    ngOnInit() { }
+};
+__decorate([
+    Input()
+], ColorSwatchCollectionComponent.prototype, "colorList", void 0);
+ColorSwatchCollectionComponent = __decorate([
+    Component({
+        selector: 'symphony-main-ui-color-swatch',
+        template: "<ul class=\"color-list list-unstyled\">\n  <li class=\"color-list-item\" *ngFor=\"let color of colorList\">\n    <symphony-ui-color-explorer\n      [colorSwatchModel]=\"color\"\n    ></symphony-ui-color-explorer>\n  </li>\n</ul>\n",
+        encapsulation: ViewEncapsulation.None,
+        styles: [".data-vis-ext .color-list,.data-vis .color-list{display:flex;flex-direction:column;flex-wrap:wrap;height:100vh;width:50vw}.data-vis-ext .color-list-item,.data-vis .color-list-item{flex:0 0 20%;padding:0}.main-ui .color-list-item{padding:5px 0}"]
+    })
+], ColorSwatchCollectionComponent);
+
+let ColorSwatchCollectionModule = class ColorSwatchCollectionModule {
+};
+ColorSwatchCollectionModule = __decorate([
+    NgModule({
+        declarations: [ColorSwatchCollectionComponent],
+        imports: [CommonModule, ColorSwatchModule],
+        exports: []
+    })
+], ColorSwatchCollectionModule);
+
+class IconExplorerHelper {
+    static getAllIcons() {
+        let allIcons = [];
+        allIcons = allIcons.concat(this.getHasNoBorderIconList());
+        allIcons = allIcons.concat(this.getHasBorderIconList());
+        allIcons = allIcons.concat(this.getInverseIconList());
+        return allIcons;
+    }
+    static getHasNoBorderIconList() {
+        return [
+            {
+                icon: Icons.MOREOPTIONS,
+                iconName: 'MOREOPTIONS',
+                iconClass: 'si-more-options',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.ADD,
+                iconName: 'ADD',
+                iconClass: 'si-add',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.ACTIVITY,
+                iconName: 'ACTIVITY',
+                iconClass: 'si-activity',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.ARROWHIDEREVEAL,
+                iconName: 'ARROWHIDEREVEAL',
+                iconClass: 'si-arrow-hide-reveal',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.ARROWNEXT,
+                iconName: 'ARROWNEXT',
+                iconClass: 'si-arrow-next',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.ARROWPREV,
+                iconName: 'ARROWPREV',
+                iconClass: 'si-arrow-prev',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.CLOSEMODAL,
+                iconName: 'CLOSEMODAL',
+                iconClass: 'si-close-modal',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.COLLAPSE,
+                iconName: 'COLLAPSE',
+                iconClass: 'si-collapse',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.DAYMODE,
+                iconName: 'DAYMODE',
+                iconClass: 'si-daymode',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.DELETE,
+                iconName: 'DELETE',
+                iconClass: 'si-delete',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.DOCUMENT,
+                iconName: 'DOCUMENT',
+                iconClass: 'si-document',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.DOWNLOAD,
+                iconName: 'DOWNLOAD',
+                iconClass: 'si-download',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.EDIT,
+                iconName: 'EDIT',
+                iconClass: 'si-edit',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.EMAILDRIP,
+                iconName: 'EMAILDRIP',
+                iconClass: 'si-email-drip',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.EMAILOPEN,
+                iconName: 'EMAILOPEN',
+                iconClass: 'si-email-open',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.EMAILSEND,
+                iconName: 'EMAILSEND',
+                iconClass: 'si-email-send',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.EXPAND,
+                iconName: 'EXPAND',
+                iconClass: 'si-expand',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.FAVORITE,
+                iconName: 'FAVORITE',
+                iconClass: 'si-favorite',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.FEEDBACKMAYBE,
+                iconName: 'FEEDBACKMAYBE',
+                iconClass: 'si-feedback-maybe',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.FEEDBACKNO,
+                iconName: 'FEEDBACKNO',
+                iconClass: 'si-feedback-no',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.FEEDBACKYES,
+                iconName: 'FEEDBACKYES',
+                iconClass: 'si-feedback-yes',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.FOLDERMULTIPLE,
+                iconName: 'FOLDERMULTIPLE',
+                iconClass: 'si-folder-multiple',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.INCLUDE,
+                iconName: 'INCLUDE',
+                iconClass: 'si-include',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.INFO,
+                iconName: 'INFO',
+                iconClass: 'si-info',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.INTERVIEW,
+                iconName: 'INTERVIEW',
+                iconClass: 'si-interview',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.LINK,
+                iconName: 'LINK',
+                iconClass: 'si-link',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.LOCATION,
+                iconName: 'LOCATION',
+                iconClass: 'si-location',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.MENUALL,
+                iconName: 'MENUALL',
+                iconClass: 'si-menu-all',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.MENUANALYTICS,
+                iconName: 'MENUANALYTICS',
+                iconClass: 'si-menu-analytics',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.MENUASSETS,
+                iconName: 'MENUASSETS',
+                iconClass: 'si-menu-assets',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.MENUCAMPAIGNS,
+                iconName: 'MENUCAMPAIGNS',
+                iconClass: 'si-menu-campaigns',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.MENUCONTACT,
+                iconName: 'MENUCONTACT',
+                iconClass: 'si-menu-contact',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.MENUCONTENT,
+                iconName: 'MENUCONTENT',
+                iconClass: 'si-menu-content',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.MENUDASHBOARD,
+                iconName: 'MENUDASHBOARD',
+                iconClass: 'si-menu-dashboard',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.MENUEVENTS,
+                iconName: 'MENUEVENTS',
+                iconClass: 'si-menu-events',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.MENUFOLDERS,
+                iconName: 'MENUFOLDERS',
+                iconClass: 'si-menu-folders',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.MENUJOBS,
+                iconName: 'MENUJOBS',
+                iconClass: 'si-menu-jobs',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.MENURETURN,
+                iconName: 'MENURETURN',
+                iconClass: 'si-menu-return',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.MENUWORKFLOWS,
+                iconName: 'MENUWORKFLOWS',
+                iconClass: 'si-menu-workflows',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.MERGE,
+                iconName: 'MERGE',
+                iconClass: 'si-merge',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.MOVE,
+                iconName: 'MOVE',
+                iconClass: 'si-move',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.NIGHTMODE,
+                iconName: 'NIGHTMODE',
+                iconClass: 'si-nightmode',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.NOTIFICATION,
+                iconName: 'NOTIFICATION',
+                iconClass: 'si-notification',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.ORGANIZECOLUMNS,
+                iconName: 'ORGANIZECOLUMNS',
+                iconClass: 'si-organize-columns',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.ORGANIZECONTACTS,
+                iconName: 'ORGANIZECONTACTS',
+                iconClass: 'si-organize-contacts',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.PENDINGINCOMPLETE,
+                iconName: 'PENDINGINCOMPLETE',
+                iconClass: 'si-pending-incomplete',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.PHONENUMBER,
+                iconName: 'PHONENUMBER',
+                iconClass: 'si-phone-number',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.PREVIEW,
+                iconName: 'PREVIEW',
+                iconClass: 'si-preview',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.PROMOTE,
+                iconName: 'PROMOTE',
+                iconClass: 'si-promote',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.REFRESH,
+                iconName: 'REFRESH',
+                iconClass: 'si-refresh',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.REMOVE,
+                iconName: 'REMOVE',
+                iconClass: 'si-remove',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.EXCLUDE,
+                iconName: 'EXCLUDE',
+                iconClass: 'si-exclude',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.RESULTSFILTERS,
+                iconName: 'RESULTSFILTERS',
+                iconClass: 'si-results-filters',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.REVIEW,
+                iconName: 'REVIEW',
+                iconClass: 'si-review',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.SALARY,
+                iconName: 'SALARY',
+                iconClass: 'si-salary',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.SAVE,
+                iconName: 'SAVE',
+                iconClass: 'si-save',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.SEARCHADVANCED,
+                iconName: 'SEARCHADVANCED',
+                iconClass: 'si-search-advanced',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.SEARCHCLEAR,
+                iconName: 'SEARCHCLEAR',
+                iconClass: 'si-search-clear',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.SEARCHNEW,
+                iconName: 'SEARCHNEW',
+                iconClass: 'si-search-new',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.SETTINGSMART,
+                iconName: 'SETTINGSMART',
+                iconClass: 'si-settings-smart',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.SMS,
+                iconName: 'SMS',
+                iconClass: 'si-sms',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.SORTMINI,
+                iconName: 'SORTMINI',
+                iconClass: 'si-sort-mini',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.STATUS,
+                iconName: 'STATUS',
+                iconClass: 'si-status',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.SYSTEMACTION,
+                iconName: 'SYSTEMACTION',
+                iconClass: 'si-system-action',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.TASKCOMPLETED,
+                iconName: 'TASKCOMPLETED',
+                iconClass: 'si-task-completed',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.TASKOPEN,
+                iconName: 'TASKOPEN',
+                iconClass: 'si-task-open',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.TIMEFRAME,
+                iconName: 'TIMEFRAME',
+                iconClass: 'si-timeframe',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.TIMELINE,
+                iconName: 'TIMELINE',
+                iconClass: 'si-timeline',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.UPLOAD,
+                iconName: 'UPLOAD',
+                iconClass: 'si-upload',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.USERMULTIPLE,
+                iconName: 'USERMULTIPLE',
+                iconClass: 'si-user-multiple',
+                hasBorder: false,
+            },
+            {
+                icon: Icons.USER,
+                iconName: 'USER',
+                iconClass: 'si-user',
+                hasBorder: false,
+            },
+        ];
+    }
+    static getInverseIconList() {
+        return [
+            {
+                icon: Icons.ACTIVITY,
+                iconName: 'ACTIVITY',
+                iconClass: 'si-activity',
+                hasBorder: true,
+            },
+        ];
+    }
+    static getHasBorderIconList() {
+        return [
+            {
+                icon: Icons.ADD,
+                iconName: 'ADD',
+                iconClass: 'si-add',
+                hasBorder: true,
+            },
+            {
+                icon: Icons.ARROWNEXT,
+                iconName: 'ARROWNEXT',
+                iconClass: 'si-arrow-next',
+                hasBorder: true,
+            },
+            {
+                icon: Icons.DELETE,
+                iconName: 'DELETE',
+                iconClass: 'si-delete',
+                hasBorder: true,
+            },
+            {
+                icon: Icons.DOWNLOAD,
+                iconName: 'DOWNLOAD',
+                iconClass: 'si-download',
+                hasBorder: true,
+            },
+            {
+                icon: Icons.EDIT,
+                iconName: 'EDIT',
+                iconClass: 'si-edit',
+                hasBorder: true,
+            },
+            {
+                icon: Icons.FEEDBACKYES,
+                iconName: 'FEEDBACKYES',
+                iconClass: 'si-feedback-yes',
+                hasBorder: true,
+            },
+            {
+                icon: Icons.MENUCONTACT,
+                iconName: 'MENUCONTACT',
+                iconClass: 'si-menu-contact',
+                hasBorder: true,
+            },
+            {
+                icon: Icons.MOREOPTIONS,
+                iconName: 'MOREOPTIONS',
+                iconClass: 'si-more-options',
+                hasBorder: true,
+            },
+            {
+                icon: Icons.ORGANIZECOLUMNS,
+                iconName: 'ORGANIZECOLUMNS',
+                iconClass: 'si-organize-columns',
+                hasBorder: true,
+            },
+            {
+                icon: Icons.PREVIEW,
+                iconName: 'PREVIEW',
+                iconClass: 'si-preview',
+                hasBorder: true,
+            },
+            {
+                icon: Icons.SAVE,
+                iconName: 'SAVE',
+                iconClass: 'si-save',
+                hasBorder: true,
+            },
+        ];
+    }
+}
+
+let IconExplorerComponent = class IconExplorerComponent {
+    constructor() {
+        this.iconList = IconExplorerHelper.getAllIcons();
+        this.hasBorderIconsList = IconExplorerHelper.getHasBorderIconList();
+        this.hasNoBorderIconsList = IconExplorerHelper.getHasNoBorderIconList();
+        this.isInverseIconsList = IconExplorerHelper.getInverseIconList();
+    }
+    ngOnInit() {
+        this.iconCount = this.iconList.length;
+        this.explorerTitle = `Iconography (${this.iconCount} icons)`;
+        this.iconHasBorderCount = this.hasBorderIconsList.length;
+        this.borderTitle = `Icons with border (${this.iconHasBorderCount} icons)`;
+        this.iconHasNoBorderCount = this.hasNoBorderIconsList.length;
+        this.noBorderTitle = `Icons without border (${this.iconHasNoBorderCount} icons)`;
+        this.iconisInverseCount = this.isInverseIconsList.length;
+        this.backgroundTitle = `Icons with background (${this.iconisInverseCount} icons)`;
+    }
+};
+IconExplorerComponent = __decorate([
+    Component({
+        selector: 'symphony-icon-explorer',
+        template: "<div class=\"explorer-title\">\n  <symphony-h2 [text]=\"explorerTitle\"></symphony-h2>\n</div>\n<div class=\"explorer-subtitle\">\n  <symphony-h3 [text]=\"noBorderTitle\"></symphony-h3>\n</div>\n<ul class=\"sfx-icon-list list-unstyled\">\n  <li class=\"icon-list-item\" *ngFor=\"let icon of hasNoBorderIconsList\">\n    <symphony-icon-swatch [iconSwatchModel]=\"icon\"></symphony-icon-swatch>\n  </li>\n</ul>\n\n<div class=\"explorer-subtitle\">\n  <symphony-h3 [text]=\"borderTitle\"></symphony-h3>\n</div>\n<ul class=\"sfx-icon-list list-unstyled\">\n  <li class=\"icon-list-item\" *ngFor=\"let icon of hasBorderIconsList\">\n    <symphony-icon-swatch [iconSwatchModel]=\"icon\"></symphony-icon-swatch>\n  </li>\n</ul>\n\n<div class=\"explorer-subtitle\">\n  <symphony-h3 [text]=\"backgroundTitle\"></symphony-h3>\n</div>\n<ul class=\"sfx-icon-list list-unstyled\">\n  <li class=\"icon-list-item\" *ngFor=\"let icon of isInverseIconsList\">\n    <symphony-icon-swatch\n      [iconSwatchModel]=\"icon\"\n      [isInverse]=\"true\"\n    ></symphony-icon-swatch>\n  </li>\n</ul>\n",
+        styles: [".sfx-icon-list{display:flex;flex-direction:row;flex-wrap:wrap;margin:20px 0 80px;width:100vw}.icon-list-item{flex:0 0 20%;padding:15px 0}.explorer-title{border-bottom:5px solid #000;margin-bottom:30px;padding-bottom:10px}.explorer-subtitle{margin-bottom:10px}"]
+    })
+], IconExplorerComponent);
+
+let IconExplorerModule = class IconExplorerModule {
+};
+IconExplorerModule = __decorate([
+    NgModule({
+        declarations: [IconExplorerComponent],
+        imports: [CommonModule, IconSwatchModule, H2Module, H3Module],
+    })
+], IconExplorerModule);
+
 /*
  * ATOMS
  */
@@ -1231,5 +2013,5 @@ EventsSettingsPageModule = __decorate([
  * Generated bundle index. Do not edit.
  */
 
-export { AtomsModule, AvatarComponent, AvatarModule, BreadcrumbComponent, BreadcrumbModule, ButtonComponent, ButtonModule, ColorSampleComponent, ColorSampleModule, ColorSwatchComponent, ColorSwatchModule, ContextualMenuComponent, ContextualMenuModule, EventsSettingsPageComponent, EventsSettingsPageModule, H1Component, H1Module, H2Component, H2Module, H3Component, H3Module, H4Component, H4Module, H5Component, H5Module, IconComponent, IconModule, IconSwatchComponent, IconSwatchModule, IconWrapperComponent, IconWrapperModule, InputCheckboxComponent, InputCheckboxModule, InputRadioComponent, InputRadioModule, InputTextComponent, InputTextModule, MoleculesModule, NoteComponent, NoteListComponent, NoteListModule, NoteModule, ParagraphComponent, ParagraphModule, PillComponent, PillsComponent, PillsModule, TaskComponent, TaskIconComponent, TaskIconModule, TaskListComponent, TaskListModule, TaskModule, SfxInlineErrorModule as ɵa, SfxInlineErrorComponent as ɵb, PillModule as ɵc, TwoColumnFilterAreaModule as ɵd, TwoColumnFilterAreaComponent as ɵe, AdminListModule as ɵf, AdminListTemplateComponent as ɵg, PlaceholderModule as ɵh, PlaceholderComponent as ɵi };
+export { AtomsModule, AvatarComponent, AvatarModule, BreadcrumbComponent, BreadcrumbModule, ButtonComponent, ButtonModule, ColorSampleComponent, ColorSampleModule, ColorSwatchCollectionComponent, ColorSwatchCollectionModule, ColorSwatchComponent, ColorSwatchModule, ContextualMenuComponent, ContextualMenuModule, EventsSettingsPageComponent, EventsSettingsPageModule, H1Component, H1Module, H2Component, H2Module, H3Component, H3Module, H4Component, H4Module, H5Component, H5Module, IconComponent, IconExplorerComponent, IconExplorerModule, IconModule, IconSwatchComponent, IconSwatchModule, IconWrapperComponent, IconWrapperModule, InputCheckboxComponent, InputCheckboxModule, InputRadioComponent, InputRadioModule, InputTextComponent, InputTextModule, MoleculesModule, NoteComponent, NoteListComponent, NoteListModule, NoteModule, ParagraphComponent, ParagraphModule, PillComponent, PillsComponent, PillsModule, TaskComponent, TaskIconComponent, TaskIconModule, TaskListComponent, TaskListModule, TaskModule, SfxInlineErrorModule as ɵa, SfxInlineErrorComponent as ɵb, PillModule as ɵc, FilterAreaModule as ɵd, FilterAreaComponent as ɵe, TwoColumnFilterAreaModule as ɵf, TwoColumnFilterAreaComponent as ɵg, GridModule as ɵh, GridComponent as ɵi, FrameworkModule as ɵj, ContactActivityScoreModule as ɵk, ContactActivityScoreComponent as ɵl, RelevanceScoreModule as ɵm, RelevanceScoreComponent as ɵn, AdminListModule as ɵo, AdminListTemplateComponent as ɵp, PlaceholderModule as ɵq, PlaceholderComponent as ɵr };
 //# sourceMappingURL=symphony-talent-component-library.js.map