@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: [{
|
|
@@ -2172,25 +2172,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
|
|
|
2172
2172
|
|
|
2173
2173
|
class NotificationsComponent {
|
|
2174
2174
|
constructor() {
|
|
2175
|
-
this.notificationClick = new EventEmitter();
|
|
2176
2175
|
this.actionClick = new EventEmitter();
|
|
2177
2176
|
}
|
|
2178
|
-
|
|
2179
|
-
this.
|
|
2180
|
-
}
|
|
2181
|
-
onActionClick(notification) {
|
|
2182
|
-
this.actionClick.emit(notification);
|
|
2177
|
+
onActionClick(notificationItem) {
|
|
2178
|
+
this.actionClick.emit(notificationItem);
|
|
2183
2179
|
}
|
|
2184
2180
|
}
|
|
2185
2181
|
NotificationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NotificationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2186
|
-
NotificationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: NotificationsComponent, selector: "symphony-notifications", inputs: { model: "model" }, outputs: {
|
|
2182
|
+
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"] }] });
|
|
2187
2183
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NotificationsComponent, decorators: [{
|
|
2188
2184
|
type: Component,
|
|
2189
|
-
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\"
|
|
2185
|
+
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"] }]
|
|
2190
2186
|
}], ctorParameters: function () { return []; }, propDecorators: { model: [{
|
|
2191
2187
|
type: Input
|
|
2192
|
-
}], notificationClick: [{
|
|
2193
|
-
type: Output
|
|
2194
2188
|
}], actionClick: [{
|
|
2195
2189
|
type: Output
|
|
2196
2190
|
}] } });
|
|
@@ -2212,7 +2206,7 @@ NotificationsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
|
|
|
2212
2206
|
H3Module,
|
|
2213
2207
|
PipeModule,
|
|
2214
2208
|
SfxLoaderModule,
|
|
2215
|
-
H5Module
|
|
2209
|
+
H5Module,
|
|
2216
2210
|
]] });
|
|
2217
2211
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: NotificationsModule, decorators: [{
|
|
2218
2212
|
type: NgModule,
|
|
@@ -2226,7 +2220,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
|
|
|
2226
2220
|
H3Module,
|
|
2227
2221
|
PipeModule,
|
|
2228
2222
|
SfxLoaderModule,
|
|
2229
|
-
H5Module
|
|
2223
|
+
H5Module,
|
|
2230
2224
|
],
|
|
2231
2225
|
exports: [NotificationsComponent],
|
|
2232
2226
|
}]
|