@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";
|
|
@@ -1985,10 +1988,10 @@ class ButtonWithIconComponent {
|
|
|
1985
1988
|
}
|
|
1986
1989
|
}
|
|
1987
1990
|
ButtonWithIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ButtonWithIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1988
|
-
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}
|
|
1991
|
+
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 });
|
|
1989
1992
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ButtonWithIconComponent, decorators: [{
|
|
1990
1993
|
type: Component,
|
|
1991
|
-
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}
|
|
1994
|
+
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"] }]
|
|
1992
1995
|
}], ctorParameters: function () { return []; }, propDecorators: { text: [{
|
|
1993
1996
|
type: Input
|
|
1994
1997
|
}], icon: [{
|
|
@@ -2325,10 +2328,10 @@ class ActionBarComponent {
|
|
|
2325
2328
|
}
|
|
2326
2329
|
}
|
|
2327
2330
|
ActionBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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-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 });
|
|
2331
|
+
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 });
|
|
2329
2332
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ActionBarComponent, decorators: [{
|
|
2330
2333
|
type: Component,
|
|
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-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"] }]
|
|
2334
|
+
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"] }]
|
|
2332
2335
|
}], ctorParameters: function () { return []; }, propDecorators: { isToggled: [{
|
|
2333
2336
|
type: Input
|
|
2334
2337
|
}], toggleClick: [{
|
|
@@ -2785,12 +2788,24 @@ class IconExplorerHelper {
|
|
|
2785
2788
|
iconClass: 'si-arrow-next',
|
|
2786
2789
|
hasBorder: false,
|
|
2787
2790
|
},
|
|
2791
|
+
{
|
|
2792
|
+
icon: Icons.ARROWNEXTBOLD,
|
|
2793
|
+
iconName: 'ARROWNEXTBOLD',
|
|
2794
|
+
iconClass: 'si-arrow-bold-next',
|
|
2795
|
+
hasBorder: false,
|
|
2796
|
+
},
|
|
2788
2797
|
{
|
|
2789
2798
|
icon: Icons.ARROWPREV,
|
|
2790
2799
|
iconName: 'ARROWPREV',
|
|
2791
2800
|
iconClass: 'si-arrow-prev',
|
|
2792
2801
|
hasBorder: false,
|
|
2793
2802
|
},
|
|
2803
|
+
{
|
|
2804
|
+
icon: Icons.ARROWPREVBOLD,
|
|
2805
|
+
iconName: 'ARROWPREVBOLD',
|
|
2806
|
+
iconClass: 'si-arrow-bold-previous',
|
|
2807
|
+
hasBorder: false,
|
|
2808
|
+
},
|
|
2794
2809
|
{
|
|
2795
2810
|
icon: Icons.CHATBOT,
|
|
2796
2811
|
iconName: 'CHATBOT',
|
|
@@ -2845,6 +2860,12 @@ class IconExplorerHelper {
|
|
|
2845
2860
|
iconClass: 'si-download',
|
|
2846
2861
|
hasBorder: false,
|
|
2847
2862
|
},
|
|
2863
|
+
{
|
|
2864
|
+
icon: Icons.ECONOMICS,
|
|
2865
|
+
iconName: 'ECONOMICS',
|
|
2866
|
+
iconClass: 'si-economics',
|
|
2867
|
+
hasBorder: false,
|
|
2868
|
+
},
|
|
2848
2869
|
{
|
|
2849
2870
|
icon: Icons.EDIT,
|
|
2850
2871
|
iconName: 'EDIT',
|