@symphony-talent/component-library 3.21.1 → 3.21.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/esm2020/lib/atoms/icon/icon.enum.mjs +4 -1
  2. package/esm2020/lib/design-guide/icon-explorer/icon-explorer.helper.mjs +19 -1
  3. package/esm2020/lib/molecules/button-with-icon/button-with-icon.component.mjs +2 -2
  4. package/esm2020/lib/organisms/action-bar/action-bar.component.mjs +3 -3
  5. package/esm2020/projects/component-library/lib/atoms/icon/icon.enum.mjs +4 -1
  6. package/esm2020/projects/component-library/lib/design-guide/icon-explorer/icon-explorer.helper.mjs +19 -1
  7. package/esm2020/projects/component-library/lib/molecules/button-with-icon/button-with-icon.component.mjs +2 -2
  8. package/esm2020/projects/component-library/lib/organisms/action-bar/action-bar.component.mjs +3 -3
  9. package/fesm2015/symphony-talent-component-library-projects-component-library.mjs +25 -4
  10. package/fesm2015/symphony-talent-component-library-projects-component-library.mjs.map +1 -1
  11. package/fesm2015/symphony-talent-component-library.mjs +25 -4
  12. package/fesm2015/symphony-talent-component-library.mjs.map +1 -1
  13. package/fesm2020/symphony-talent-component-library-projects-component-library.mjs +25 -4
  14. package/fesm2020/symphony-talent-component-library-projects-component-library.mjs.map +1 -1
  15. package/fesm2020/symphony-talent-component-library.mjs +25 -4
  16. package/fesm2020/symphony-talent-component-library.mjs.map +1 -1
  17. package/lib/atoms/icon/icon.enum.d.ts +3 -0
  18. package/package.json +1 -1
  19. package/projects/component-library/global-assets/iconography/library-fonts/library-icons.eot +0 -0
  20. package/projects/component-library/global-assets/iconography/library-fonts/library-icons.svg +59 -56
  21. package/projects/component-library/global-assets/iconography/library-fonts/library-icons.ttf +0 -0
  22. package/projects/component-library/global-assets/iconography/library-fonts/library-icons.woff +0 -0
  23. package/projects/component-library/global-assets/iconography/library-icons.css +73 -64
  24. package/projects/component-library/global-assets/iconography/{sfx-icons-v2.json → sfx-icons-v3.json} +272 -211
  25. package/projects/component-library/lib/atoms/icon/icon.enum.d.ts +3 -0
@@ -805,7 +805,9 @@ var Icons;
805
805
  Icons["ADVERTISE"] = "si-advertise";
806
806
  Icons["ARROWHIDEREVEAL"] = "si-arrow-hide-reveal";
807
807
  Icons["ARROWNEXT"] = "si-arrow-next";
808
+ Icons["ARROWNEXTBOLD"] = "si-arrow-bold-next";
808
809
  Icons["ARROWPREV"] = "si-arrow-prev";
810
+ Icons["ARROWPREVBOLD"] = "si-arrow-bold-previous";
809
811
  Icons["CHATBOT"] = "si-chatbot";
810
812
  Icons["CODETAG"] = "si-codetag";
811
813
  Icons["CONFIRMATION"] = "si-confirmation";
@@ -815,6 +817,7 @@ var Icons;
815
817
  Icons["DELETE"] = "si-delete";
816
818
  Icons["DOCUMENT"] = "si-document";
817
819
  Icons["DOWNLOAD"] = "si-download";
820
+ Icons["ECONOMICS"] = "si-economics";
818
821
  Icons["EDIT"] = "si-edit";
819
822
  Icons["EMAILDRIP"] = "si-email-drip";
820
823
  Icons["EMAILOPEN"] = "si-email-open";
@@ -1983,10 +1986,10 @@ class ButtonWithIconComponent {
1983
1986
  }
1984
1987
  }
1985
1988
  ButtonWithIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ButtonWithIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1986
- ButtonWithIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ButtonWithIconComponent, selector: "symphony-button-with-icon", inputs: { text: "text", icon: "icon", showActionButton: "showActionButton" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"sfx-actions-items-list sfx-mr-30\" *ngIf=\"showActionButton\">\n <button (click)=\"onClick()\">\n <symphony-icon [icon]=\"icon\"></symphony-icon>{{ text }}\n </button>\n</div>\n", styles: [".sfx-actions-items-list button{background:transparent;border:none;outline:none}.sfx-actions-items-list button i{font-size:1.125rem;margin-right:.9375rem;position:relative;top:2px}.sfx-actions-items-list button i.si-edit,.sfx-actions-items-list button i.si-download{font-size:9px!important;height:18px;width:18px;border:0;background:#000;color:#fff;border-radius:50%;padding:6px;position:relative;top:-2px;font-weight:600}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
1989
+ ButtonWithIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ButtonWithIconComponent, selector: "symphony-button-with-icon", inputs: { text: "text", icon: "icon", showActionButton: "showActionButton" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"sfx-actions-items-list sfx-mr-30\" *ngIf=\"showActionButton\">\n <button (click)=\"onClick()\">\n <symphony-icon [icon]=\"icon\"></symphony-icon>{{ text }}\n </button>\n</div>\n", styles: [".sfx-actions-items-list button{background:transparent;border:none;outline:none}.sfx-actions-items-list button i{font-size:1.125rem;margin-right:.9375rem;position:relative;top:2px}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
1987
1990
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ButtonWithIconComponent, decorators: [{
1988
1991
  type: Component,
1989
- args: [{ selector: 'symphony-button-with-icon', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-actions-items-list sfx-mr-30\" *ngIf=\"showActionButton\">\n <button (click)=\"onClick()\">\n <symphony-icon [icon]=\"icon\"></symphony-icon>{{ text }}\n </button>\n</div>\n", styles: [".sfx-actions-items-list button{background:transparent;border:none;outline:none}.sfx-actions-items-list button i{font-size:1.125rem;margin-right:.9375rem;position:relative;top:2px}.sfx-actions-items-list button i.si-edit,.sfx-actions-items-list button i.si-download{font-size:9px!important;height:18px;width:18px;border:0;background:#000;color:#fff;border-radius:50%;padding:6px;position:relative;top:-2px;font-weight:600}\n"] }]
1992
+ args: [{ selector: 'symphony-button-with-icon', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-actions-items-list sfx-mr-30\" *ngIf=\"showActionButton\">\n <button (click)=\"onClick()\">\n <symphony-icon [icon]=\"icon\"></symphony-icon>{{ text }}\n </button>\n</div>\n", styles: [".sfx-actions-items-list button{background:transparent;border:none;outline:none}.sfx-actions-items-list button i{font-size:1.125rem;margin-right:.9375rem;position:relative;top:2px}\n"] }]
1990
1993
  }], ctorParameters: function () { return []; }, propDecorators: { text: [{
1991
1994
  type: Input
1992
1995
  }], icon: [{
@@ -2322,10 +2325,10 @@ class ActionBarComponent {
2322
2325
  }
2323
2326
  }
2324
2327
  ActionBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2325
- ActionBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ActionBarComponent, selector: "symphony-action-bar", inputs: { isToggled: "isToggled" }, outputs: { toggleClick: "toggleClick" }, ngImport: i0, template: "<div class=\"sfx-title-wrap sfx-mt-30 sfx-pb-30 sfx-action-bar\">\n <div class=\"col-xs-12 col-sm-6 col-md-4 col-lg-3 sfx-p-0 sfx-action-button\">\n <div class=\"max-contentwidth\" (click)=\"toggleClicked()\">\n <symphony-icon-wrapper\n [ngClass]=\"{ 'action-arrow-down': isToggled }\"\n class=\"sfx-d-inline-block sfx-actions\"\n ><symphony-icon [icon]=\"'si-arrow-next'\"></symphony-icon>\n </symphony-icon-wrapper>\n <symphony-h5 class=\"sfx-d-inline-block sfx-ml-20\">Actions</symphony-h5>\n </div>\n </div>\n <div class=\"col-xs-12 col-sm-6 col-md-8 col-lg-9 sfx-p-0\">\n <div class=\"pull-right sfx-actions-controls\">\n <ng-content select=\"[grid-controls]\"></ng-content>\n </div>\n </div>\n</div>\n<div\n *ngIf=\"isToggled\"\n class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-border-bottom-gray-1 sfx-pr-0\"\n>\n <div\n class=\"col-xs-11 col-sm-11 col-md-11 col-lg-11 sfx-actions-items sfx-pt-40 sfx-pb-40\"\n >\n <ng-content select=\"[grid-actions]\"></ng-content>\n </div>\n</div>\n", styles: [".sfx-action-bar{display:inline-block;width:100%;border-bottom:5px solid #000000}.sfx-action-bar .sfx-action-button .max-contentwidth{width:max-content}.sfx-action-bar .sfx-action-button .icon-wrapper i{font-weight:600}.sfx-action-bar .sfx-action-button .action-arrow-down{transform:rotate(90deg)}\n"], components: [{ type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
2328
+ ActionBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ActionBarComponent, selector: "symphony-action-bar", inputs: { isToggled: "isToggled" }, outputs: { toggleClick: "toggleClick" }, ngImport: i0, template: "<div class=\"sfx-title-wrap sfx-mt-30 sfx-pb-30 sfx-action-bar\">\n <div class=\"col-xs-12 col-sm-6 col-md-4 col-lg-3 sfx-p-0 sfx-action-button\">\n <div class=\"max-contentwidth\" (click)=\"toggleClicked()\">\n <symphony-icon-wrapper\n [ngClass]=\"{ 'action-arrow-down': isToggled }\"\n class=\"sfx-d-inline-block sfx-actions\"\n ><symphony-icon [icon]=\"'si-arrow-bold-next'\"></symphony-icon>\n </symphony-icon-wrapper>\n <symphony-h5 class=\"sfx-d-inline-block sfx-ml-20\">Actions</symphony-h5>\n </div>\n </div>\n <div class=\"col-xs-12 col-sm-6 col-md-8 col-lg-9 sfx-p-0\">\n <div class=\"pull-right sfx-actions-controls\">\n <ng-content select=\"[grid-controls]\"></ng-content>\n </div>\n </div>\n</div>\n<div\n *ngIf=\"isToggled\"\n class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-border-bottom-gray-1 sfx-pr-0\"\n>\n <div\n class=\"col-xs-11 col-sm-11 col-md-11 col-lg-11 sfx-actions-items sfx-pt-40 sfx-pb-40\"\n >\n <ng-content select=\"[grid-actions]\"></ng-content>\n </div>\n</div>\n", styles: [".sfx-action-bar{display:inline-block;width:100%;border-bottom:5px solid #000000}.sfx-action-bar .sfx-action-button .max-contentwidth{width:max-content}.sfx-action-bar .sfx-action-button .icon-wrapper i{font-weight:600}.sfx-action-bar .sfx-action-button .action-arrow-down{transform:rotate(90deg)}\n"], components: [{ type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: ["isInverse"], outputs: ["clicked"] }, { type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
2326
2329
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ActionBarComponent, decorators: [{
2327
2330
  type: Component,
2328
- args: [{ selector: 'symphony-action-bar', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-title-wrap sfx-mt-30 sfx-pb-30 sfx-action-bar\">\n <div class=\"col-xs-12 col-sm-6 col-md-4 col-lg-3 sfx-p-0 sfx-action-button\">\n <div class=\"max-contentwidth\" (click)=\"toggleClicked()\">\n <symphony-icon-wrapper\n [ngClass]=\"{ 'action-arrow-down': isToggled }\"\n class=\"sfx-d-inline-block sfx-actions\"\n ><symphony-icon [icon]=\"'si-arrow-next'\"></symphony-icon>\n </symphony-icon-wrapper>\n <symphony-h5 class=\"sfx-d-inline-block sfx-ml-20\">Actions</symphony-h5>\n </div>\n </div>\n <div class=\"col-xs-12 col-sm-6 col-md-8 col-lg-9 sfx-p-0\">\n <div class=\"pull-right sfx-actions-controls\">\n <ng-content select=\"[grid-controls]\"></ng-content>\n </div>\n </div>\n</div>\n<div\n *ngIf=\"isToggled\"\n class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-border-bottom-gray-1 sfx-pr-0\"\n>\n <div\n class=\"col-xs-11 col-sm-11 col-md-11 col-lg-11 sfx-actions-items sfx-pt-40 sfx-pb-40\"\n >\n <ng-content select=\"[grid-actions]\"></ng-content>\n </div>\n</div>\n", styles: [".sfx-action-bar{display:inline-block;width:100%;border-bottom:5px solid #000000}.sfx-action-bar .sfx-action-button .max-contentwidth{width:max-content}.sfx-action-bar .sfx-action-button .icon-wrapper i{font-weight:600}.sfx-action-bar .sfx-action-button .action-arrow-down{transform:rotate(90deg)}\n"] }]
2331
+ args: [{ selector: 'symphony-action-bar', encapsulation: ViewEncapsulation.None, template: "<div class=\"sfx-title-wrap sfx-mt-30 sfx-pb-30 sfx-action-bar\">\n <div class=\"col-xs-12 col-sm-6 col-md-4 col-lg-3 sfx-p-0 sfx-action-button\">\n <div class=\"max-contentwidth\" (click)=\"toggleClicked()\">\n <symphony-icon-wrapper\n [ngClass]=\"{ 'action-arrow-down': isToggled }\"\n class=\"sfx-d-inline-block sfx-actions\"\n ><symphony-icon [icon]=\"'si-arrow-bold-next'\"></symphony-icon>\n </symphony-icon-wrapper>\n <symphony-h5 class=\"sfx-d-inline-block sfx-ml-20\">Actions</symphony-h5>\n </div>\n </div>\n <div class=\"col-xs-12 col-sm-6 col-md-8 col-lg-9 sfx-p-0\">\n <div class=\"pull-right sfx-actions-controls\">\n <ng-content select=\"[grid-controls]\"></ng-content>\n </div>\n </div>\n</div>\n<div\n *ngIf=\"isToggled\"\n class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-border-bottom-gray-1 sfx-pr-0\"\n>\n <div\n class=\"col-xs-11 col-sm-11 col-md-11 col-lg-11 sfx-actions-items sfx-pt-40 sfx-pb-40\"\n >\n <ng-content select=\"[grid-actions]\"></ng-content>\n </div>\n</div>\n", styles: [".sfx-action-bar{display:inline-block;width:100%;border-bottom:5px solid #000000}.sfx-action-bar .sfx-action-button .max-contentwidth{width:max-content}.sfx-action-bar .sfx-action-button .icon-wrapper i{font-weight:600}.sfx-action-bar .sfx-action-button .action-arrow-down{transform:rotate(90deg)}\n"] }]
2329
2332
  }], ctorParameters: function () { return []; }, propDecorators: { isToggled: [{
2330
2333
  type: Input
2331
2334
  }], toggleClick: [{
@@ -2782,12 +2785,24 @@ class IconExplorerHelper {
2782
2785
  iconClass: 'si-arrow-next',
2783
2786
  hasBorder: false,
2784
2787
  },
2788
+ {
2789
+ icon: Icons.ARROWNEXTBOLD,
2790
+ iconName: 'ARROWNEXTBOLD',
2791
+ iconClass: 'si-arrow-bold-next',
2792
+ hasBorder: false,
2793
+ },
2785
2794
  {
2786
2795
  icon: Icons.ARROWPREV,
2787
2796
  iconName: 'ARROWPREV',
2788
2797
  iconClass: 'si-arrow-prev',
2789
2798
  hasBorder: false,
2790
2799
  },
2800
+ {
2801
+ icon: Icons.ARROWPREVBOLD,
2802
+ iconName: 'ARROWPREVBOLD',
2803
+ iconClass: 'si-arrow-bold-previous',
2804
+ hasBorder: false,
2805
+ },
2791
2806
  {
2792
2807
  icon: Icons.CHATBOT,
2793
2808
  iconName: 'CHATBOT',
@@ -2842,6 +2857,12 @@ class IconExplorerHelper {
2842
2857
  iconClass: 'si-download',
2843
2858
  hasBorder: false,
2844
2859
  },
2860
+ {
2861
+ icon: Icons.ECONOMICS,
2862
+ iconName: 'ECONOMICS',
2863
+ iconClass: 'si-economics',
2864
+ hasBorder: false,
2865
+ },
2845
2866
  {
2846
2867
  icon: Icons.EDIT,
2847
2868
  iconName: 'EDIT',