@symphony-talent/component-library 3.77.0 → 3.78.0
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.component.mjs +2 -2
- package/esm2020/lib/atoms/notifications/notifications.component.mjs +5 -11
- package/esm2020/lib/atoms/notifications/notifications.model.mjs +1 -1
- package/esm2020/lib/atoms/notifications/notifications.module.mjs +3 -3
- package/esm2020/projects/component-library/lib/atoms/icon/icon.component.mjs +2 -2
- package/esm2020/projects/component-library/lib/atoms/notifications/notifications.component.mjs +5 -11
- package/esm2020/projects/component-library/lib/atoms/notifications/notifications.model.mjs +1 -1
- package/esm2020/projects/component-library/lib/atoms/notifications/notifications.module.mjs +3 -3
- package/fesm2015/symphony-talent-component-library-projects-component-library.mjs +8 -14
- package/fesm2015/symphony-talent-component-library-projects-component-library.mjs.map +1 -1
- package/fesm2015/symphony-talent-component-library.mjs +8 -14
- package/fesm2015/symphony-talent-component-library.mjs.map +1 -1
- package/fesm2020/symphony-talent-component-library-projects-component-library.mjs +8 -14
- package/fesm2020/symphony-talent-component-library-projects-component-library.mjs.map +1 -1
- package/fesm2020/symphony-talent-component-library.mjs +8 -14
- package/fesm2020/symphony-talent-component-library.mjs.map +1 -1
- package/lib/atoms/notifications/notifications.component.d.ts +4 -6
- package/lib/atoms/notifications/notifications.model.d.ts +13 -2
- package/package.json +1 -1
- package/projects/component-library/lib/atoms/notifications/notifications.component.d.ts +4 -6
- package/projects/component-library/lib/atoms/notifications/notifications.model.d.ts +13 -2
|
@@ -464,10 +464,10 @@ class IconComponent {
|
|
|
464
464
|
}
|
|
465
465
|
}
|
|
466
466
|
IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
467
|
-
IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: IconComponent, selector: "symphony-icon", inputs: { icon: "icon", isSecondary: "isSecondary", size: "size", iconColor: "iconColor" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<i\n [class]=\"icon\"\n [ngClass]=\"{\n 'icon-secondary': isSecondary,\n 'icon-primary': !isSecondary\n }\"\n [style.fontSize]=\"size\"\n [ngStyle]=\"{ color: iconColor }\"\n (click)=\"onClick()\"\n></i>\n", styles: [".icon-secondary{color:#fff}i{
|
|
467
|
+
IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: IconComponent, selector: "symphony-icon", inputs: { icon: "icon", isSecondary: "isSecondary", size: "size", iconColor: "iconColor" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<i\n [class]=\"icon\"\n [ngClass]=\"{\n 'icon-secondary': isSecondary,\n 'icon-primary': !isSecondary\n }\"\n [style.fontSize]=\"size\"\n [ngStyle]=\"{ color: iconColor }\"\n (click)=\"onClick()\"\n></i>\n", styles: [".icon-secondary{color:#fff}i{font-size:18px}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
468
468
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconComponent, decorators: [{
|
|
469
469
|
type: Component,
|
|
470
|
-
args: [{ selector: 'symphony-icon', template: "<i\n [class]=\"icon\"\n [ngClass]=\"{\n 'icon-secondary': isSecondary,\n 'icon-primary': !isSecondary\n }\"\n [style.fontSize]=\"size\"\n [ngStyle]=\"{ color: iconColor }\"\n (click)=\"onClick()\"\n></i>\n", styles: [".icon-secondary{color:#fff}i{
|
|
470
|
+
args: [{ selector: 'symphony-icon', template: "<i\n [class]=\"icon\"\n [ngClass]=\"{\n 'icon-secondary': isSecondary,\n 'icon-primary': !isSecondary\n }\"\n [style.fontSize]=\"size\"\n [ngStyle]=\"{ color: iconColor }\"\n (click)=\"onClick()\"\n></i>\n", styles: [".icon-secondary{color:#fff}i{font-size:18px}\n"] }]
|
|
471
471
|
}], ctorParameters: function () { return []; }, propDecorators: { icon: [{
|
|
472
472
|
type: Input
|
|
473
473
|
}], isSecondary: [{
|
|
@@ -2174,25 +2174,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
|
|
|
2174
2174
|
|
|
2175
2175
|
class NotificationsComponent {
|
|
2176
2176
|
constructor() {
|
|
2177
|
-
this.notificationClick = new EventEmitter();
|
|
2178
2177
|
this.actionClick = new EventEmitter();
|
|
2179
2178
|
}
|
|
2180
|
-
|
|
2181
|
-
this.
|
|
2182
|
-
}
|
|
2183
|
-
onActionClick(notification) {
|
|
2184
|
-
this.actionClick.emit(notification);
|
|
2179
|
+
onActionClick(notificationItem) {
|
|
2180
|
+
this.actionClick.emit(notificationItem);
|
|
2185
2181
|
}
|
|
2186
2182
|
}
|
|
2187
2183
|
NotificationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NotificationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2188
|
-
NotificationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: NotificationsComponent, selector: "symphony-notifications", inputs: { model: "model" }, outputs: {
|
|
2184
|
+
NotificationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: NotificationsComponent, selector: "symphony-notifications", inputs: { model: "model" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<div class=\"btn-group\" dropdown [insideClick]=\"true\">\n <button\n id=\"button-basic\"\n dropdownToggle\n type=\"button\"\n class=\"btn dropdown-toggle\"\n aria-controls=\"dropdown-basic\"\n aria-label=\"more-actions-menu\"\n >\n <symphony-icon [icon]=\"'si-notification'\"></symphony-icon>\n\n <span class=\"notification-on\" *ngIf=\"model?.unreadNotificationCount > 0\">\n {{ model.unreadNotificationCount }}</span\n >\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\" class=\"sfx-p-20\">\n <symphony-h3 [text]=\"model.title\"></symphony-h3>\n </li>\n <li *ngIf=\"!model.isLoading\">\n <ul class=\"list-unstyled sfx-notification-list\">\n <li\n role=\"menuitem\"\n class=\"sfx-notification-list-items\"\n *ngFor=\"let notification of model.notifications\"\n >\n <div class=\"dropdown-item sfx-position-relative\">\n <div class=\"notification-wrap\">\n <div class=\"notification-text sfx-mb-10\">\n <symphony-icon\n *ngIf=\"notification.icon\"\n [icon]=\"notification.icon\"\n class=\"icon-position\"\n ></symphony-icon>\n <span *ngIf=\"!notification.isHtml\">{{\n notification.text\n }}</span>\n <div\n class=\"hasBold\"\n *ngIf=\"notification.isHtml\"\n [innerHTML]=\"notification.text\"\n ></div>\n </div>\n <div class=\"notification-footer\">\n <span>{{ notification.timestamp }}</span>\n <span\n class=\"sfx-font-bold sfx-cursor-pointer notification-action\"\n (click)=\"onActionClick(notification)\"\n >{{ notification.action }}</span\n >\n </div>\n </div>\n </div>\n <div class=\"horizontal-divider\"></div>\n </li>\n <li class=\"sfx-mt-20\" *ngIf=\"model.isNotificationLoading\">\n <symphony-sfx-loader></symphony-sfx-loader>\n </li>\n </ul>\n </li>\n <li class=\"sfx-mt-20 sfx-mb-20\" *ngIf=\"model.isLoading\">\n <symphony-sfx-loader></symphony-sfx-loader>\n </li>\n <li\n class=\"sfx-mt-20 sfx-mb-20 sfx-txt-center\"\n *ngIf=\"model.notifications.length === 0 && !model.isLoading\"\n >\n <symphony-h5 [text]=\"model.emptyState\"></symphony-h5>\n </li>\n </ul>\n</div>\n", styles: [".btn-group .has-border{border-radius:50%;border:2px solid #000;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.btn-group button.dropdown-toggle.btn{display:flex;align-items:center;justify-content:center;background:#000000;padding:0;box-shadow:none;width:40px;height:40px;min-height:40px;border-radius:50%!important;color:#fff;position:relative}.btn-group button.dropdown-toggle.btn:hover{background:#565656;color:#fff!important}.btn-group button.dropdown-toggle.btn:hover .notification-on{border-color:#565656}.btn-group button.dropdown-toggle.btn .si-more-options{font-size:18px}.btn-group button.dropdown-toggle.btn symphony-icon{height:18px}.btn-group button.dropdown-toggle.btn .notification-on{color:#000;width:18px;height:18px;background:#FFF;position:absolute;border:2px solid #000;border-radius:50%;top:0px;right:3px;font-size:9px;display:flex;justify-content:center;align-items:flex-end}.btn-group .dropdown-menu{width:360px;margin-top:10px;border:none;border-radius:10px;padding:0;right:-10px;left:auto;box-shadow:0 0 30px #0003;max-height:none;overflow:inherit;background:#ffffff}.btn-group .dropdown-menu .sfx-notification-list{max-height:280px;overflow-y:scroll;margin-bottom:20px}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item{padding:0 15px 0 25px;line-height:20px;color:#000;border-radius:10px;background-color:#fff}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item:hover{background:#fff;color:#000}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap{position:relative;padding:10px 10px 10px 25px}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap .notification-text .hasBold span{font-family:neuzeit_groteskbold,sans-serif}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap .notification-text .notification-status{content:\"\";width:15px;height:15px;background:#00bb5b;border-radius:50%;position:absolute;top:12px;left:0}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap .notification-text .notification-status.red{background:#d60000}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap .notification-footer{display:flex;justify-content:space-between}.btn-group .dropdown-menu .sfx-notification-list li.sfx-notification-list-items .horizontal-divider{border-bottom:1px solid #d9d9d9;margin:0 15px}.btn-group .dropdown-menu .sfx-notification-list li.sfx-notification-list-items:last-child .horizontal-divider{border-bottom:none}.btn-group .dropdown-menu:before{content:\"\\e252\";font-family:Glyphicons Halflings!important;font-size:14px;transform:rotate(180deg);display:inline-block;position:absolute;top:-13px;right:23px;color:#fff}.btn-group.is-inverse button.dropdown-toggle.btn{background:#000;color:#fff}.btn-group.is-inverse button.dropdown-toggle.btn:hover{background:#fff;color:#000!important}.btn-group.open button.dropdown-toggle.btn{background:#565656}.btn-group.open button.dropdown-toggle.btn .notification-on{border-color:#565656}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}::-webkit-scrollbar-thumb:hover{cursor:pointer}.icon-position{position:absolute;left:-5px;top:12px}.notification-action:hover{text-decoration:underline}\n"], components: [{ type: IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: H3Component, selector: "symphony-h3", inputs: ["text", "isSecondary"] }, { type: SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }, { type: H5Component, selector: "symphony-h5", inputs: ["text", "isSecondary"] }], directives: [{ type: i1$1.BsDropdownDirective, selector: "[bsDropdown],[dropdown]", inputs: ["autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen", "placement", "triggers", "container", "dropup"], outputs: ["onShown", "onHidden", "isOpenChange"], exportAs: ["bs-dropdown"] }, { type: i1$1.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
2189
2185
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NotificationsComponent, decorators: [{
|
|
2190
2186
|
type: Component,
|
|
2191
|
-
args: [{ selector: 'symphony-notifications', template: "<div class=\"btn-group\" dropdown [insideClick]=\"true\">\n <button\n id=\"button-basic\"\n dropdownToggle\n type=\"button\"\n class=\"btn dropdown-toggle\"\n aria-controls=\"dropdown-basic\"\n aria-label=\"more-actions-menu\"\n >\n <symphony-icon [icon]=\"'si-notification'\"></symphony-icon>\n <span class=\"notification-on\"
|
|
2187
|
+
args: [{ selector: 'symphony-notifications', template: "<div class=\"btn-group\" dropdown [insideClick]=\"true\">\n <button\n id=\"button-basic\"\n dropdownToggle\n type=\"button\"\n class=\"btn dropdown-toggle\"\n aria-controls=\"dropdown-basic\"\n aria-label=\"more-actions-menu\"\n >\n <symphony-icon [icon]=\"'si-notification'\"></symphony-icon>\n\n <span class=\"notification-on\" *ngIf=\"model?.unreadNotificationCount > 0\">\n {{ model.unreadNotificationCount }}</span\n >\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\" class=\"sfx-p-20\">\n <symphony-h3 [text]=\"model.title\"></symphony-h3>\n </li>\n <li *ngIf=\"!model.isLoading\">\n <ul class=\"list-unstyled sfx-notification-list\">\n <li\n role=\"menuitem\"\n class=\"sfx-notification-list-items\"\n *ngFor=\"let notification of model.notifications\"\n >\n <div class=\"dropdown-item sfx-position-relative\">\n <div class=\"notification-wrap\">\n <div class=\"notification-text sfx-mb-10\">\n <symphony-icon\n *ngIf=\"notification.icon\"\n [icon]=\"notification.icon\"\n class=\"icon-position\"\n ></symphony-icon>\n <span *ngIf=\"!notification.isHtml\">{{\n notification.text\n }}</span>\n <div\n class=\"hasBold\"\n *ngIf=\"notification.isHtml\"\n [innerHTML]=\"notification.text\"\n ></div>\n </div>\n <div class=\"notification-footer\">\n <span>{{ notification.timestamp }}</span>\n <span\n class=\"sfx-font-bold sfx-cursor-pointer notification-action\"\n (click)=\"onActionClick(notification)\"\n >{{ notification.action }}</span\n >\n </div>\n </div>\n </div>\n <div class=\"horizontal-divider\"></div>\n </li>\n <li class=\"sfx-mt-20\" *ngIf=\"model.isNotificationLoading\">\n <symphony-sfx-loader></symphony-sfx-loader>\n </li>\n </ul>\n </li>\n <li class=\"sfx-mt-20 sfx-mb-20\" *ngIf=\"model.isLoading\">\n <symphony-sfx-loader></symphony-sfx-loader>\n </li>\n <li\n class=\"sfx-mt-20 sfx-mb-20 sfx-txt-center\"\n *ngIf=\"model.notifications.length === 0 && !model.isLoading\"\n >\n <symphony-h5 [text]=\"model.emptyState\"></symphony-h5>\n </li>\n </ul>\n</div>\n", styles: [".btn-group .has-border{border-radius:50%;border:2px solid #000;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.btn-group button.dropdown-toggle.btn{display:flex;align-items:center;justify-content:center;background:#000000;padding:0;box-shadow:none;width:40px;height:40px;min-height:40px;border-radius:50%!important;color:#fff;position:relative}.btn-group button.dropdown-toggle.btn:hover{background:#565656;color:#fff!important}.btn-group button.dropdown-toggle.btn:hover .notification-on{border-color:#565656}.btn-group button.dropdown-toggle.btn .si-more-options{font-size:18px}.btn-group button.dropdown-toggle.btn symphony-icon{height:18px}.btn-group button.dropdown-toggle.btn .notification-on{color:#000;width:18px;height:18px;background:#FFF;position:absolute;border:2px solid #000;border-radius:50%;top:0px;right:3px;font-size:9px;display:flex;justify-content:center;align-items:flex-end}.btn-group .dropdown-menu{width:360px;margin-top:10px;border:none;border-radius:10px;padding:0;right:-10px;left:auto;box-shadow:0 0 30px #0003;max-height:none;overflow:inherit;background:#ffffff}.btn-group .dropdown-menu .sfx-notification-list{max-height:280px;overflow-y:scroll;margin-bottom:20px}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item{padding:0 15px 0 25px;line-height:20px;color:#000;border-radius:10px;background-color:#fff}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item:hover{background:#fff;color:#000}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap{position:relative;padding:10px 10px 10px 25px}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap .notification-text .hasBold span{font-family:neuzeit_groteskbold,sans-serif}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap .notification-text .notification-status{content:\"\";width:15px;height:15px;background:#00bb5b;border-radius:50%;position:absolute;top:12px;left:0}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap .notification-text .notification-status.red{background:#d60000}.btn-group .dropdown-menu .sfx-notification-list li .dropdown-item .notification-wrap .notification-footer{display:flex;justify-content:space-between}.btn-group .dropdown-menu .sfx-notification-list li.sfx-notification-list-items .horizontal-divider{border-bottom:1px solid #d9d9d9;margin:0 15px}.btn-group .dropdown-menu .sfx-notification-list li.sfx-notification-list-items:last-child .horizontal-divider{border-bottom:none}.btn-group .dropdown-menu:before{content:\"\\e252\";font-family:Glyphicons Halflings!important;font-size:14px;transform:rotate(180deg);display:inline-block;position:absolute;top:-13px;right:23px;color:#fff}.btn-group.is-inverse button.dropdown-toggle.btn{background:#000;color:#fff}.btn-group.is-inverse button.dropdown-toggle.btn:hover{background:#fff;color:#000!important}.btn-group.open button.dropdown-toggle.btn{background:#565656}.btn-group.open button.dropdown-toggle.btn .notification-on{border-color:#565656}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}::-webkit-scrollbar-thumb:hover{cursor:pointer}.icon-position{position:absolute;left:-5px;top:12px}.notification-action:hover{text-decoration:underline}\n"] }]
|
|
2192
2188
|
}], ctorParameters: function () { return []; }, propDecorators: { model: [{
|
|
2193
2189
|
type: Input
|
|
2194
|
-
}], notificationClick: [{
|
|
2195
|
-
type: Output
|
|
2196
2190
|
}], actionClick: [{
|
|
2197
2191
|
type: Output
|
|
2198
2192
|
}] } });
|
|
@@ -2214,7 +2208,7 @@ NotificationsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
|
|
|
2214
2208
|
H3Module,
|
|
2215
2209
|
PipeModule,
|
|
2216
2210
|
SfxLoaderModule,
|
|
2217
|
-
H5Module
|
|
2211
|
+
H5Module,
|
|
2218
2212
|
]] });
|
|
2219
2213
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NotificationsModule, decorators: [{
|
|
2220
2214
|
type: NgModule,
|
|
@@ -2228,7 +2222,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
|
|
|
2228
2222
|
H3Module,
|
|
2229
2223
|
PipeModule,
|
|
2230
2224
|
SfxLoaderModule,
|
|
2231
|
-
H5Module
|
|
2225
|
+
H5Module,
|
|
2232
2226
|
],
|
|
2233
2227
|
exports: [NotificationsComponent],
|
|
2234
2228
|
}]
|