@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.
- package/esm2020/lib/atoms/icon/icon.enum.mjs +4 -1
- package/esm2020/lib/design-guide/icon-explorer/icon-explorer.helper.mjs +19 -1
- package/esm2020/lib/molecules/button-with-icon/button-with-icon.component.mjs +2 -2
- package/esm2020/lib/organisms/action-bar/action-bar.component.mjs +3 -3
- package/esm2020/projects/component-library/lib/atoms/icon/icon.enum.mjs +4 -1
- package/esm2020/projects/component-library/lib/design-guide/icon-explorer/icon-explorer.helper.mjs +19 -1
- package/esm2020/projects/component-library/lib/molecules/button-with-icon/button-with-icon.component.mjs +2 -2
- package/esm2020/projects/component-library/lib/organisms/action-bar/action-bar.component.mjs +3 -3
- package/fesm2015/symphony-talent-component-library-projects-component-library.mjs +25 -4
- package/fesm2015/symphony-talent-component-library-projects-component-library.mjs.map +1 -1
- package/fesm2015/symphony-talent-component-library.mjs +25 -4
- package/fesm2015/symphony-talent-component-library.mjs.map +1 -1
- package/fesm2020/symphony-talent-component-library-projects-component-library.mjs +25 -4
- package/fesm2020/symphony-talent-component-library-projects-component-library.mjs.map +1 -1
- package/fesm2020/symphony-talent-component-library.mjs +25 -4
- package/fesm2020/symphony-talent-component-library.mjs.map +1 -1
- package/lib/atoms/icon/icon.enum.d.ts +3 -0
- package/package.json +1 -1
- package/projects/component-library/global-assets/iconography/library-fonts/library-icons.eot +0 -0
- package/projects/component-library/global-assets/iconography/library-fonts/library-icons.svg +59 -56
- package/projects/component-library/global-assets/iconography/library-fonts/library-icons.ttf +0 -0
- package/projects/component-library/global-assets/iconography/library-fonts/library-icons.woff +0 -0
- package/projects/component-library/global-assets/iconography/library-icons.css +73 -64
- package/projects/component-library/global-assets/iconography/{sfx-icons-v2.json → sfx-icons-v3.json} +272 -211
- 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}
|
|
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}
|
|
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',
|