@alfresco/adf-core 8.4.0-19162119468 → 8.4.0-19165518976
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/bundles/assets/adf-core/i18n/en.json +2 -1
- package/custom-theme/material-theme.scss +13 -13
- package/custom-theme/theme/custom-palette-creator.scss +23 -25
- package/custom-theme/theme/custom-theme-palettes.scss +7 -7
- package/custom-theme/theme/theme-data.scss +13 -13
- package/custom-theme/theme/typography.scss +5 -5
- package/fesm2022/adf-core.mjs +48 -9
- package/fesm2022/adf-core.mjs.map +1 -1
- package/lib/datatable/components/columns-selector/columns-selector.component.d.ts +2 -1
- package/lib/datatable/components/columns-selector/columns-selector.component.scss +89 -76
- package/lib/notifications/components/notification-history.component.d.ts +9 -3
- package/lib/styles/_mat-selectors.scss +2 -0
- package/lib/testing/unit-testing-utils.d.ts +4 -0
- package/package.json +3 -3
|
@@ -1,36 +1,36 @@
|
|
|
1
1
|
@use 'sass:map';
|
|
2
2
|
@use '@angular/material' as mat;
|
|
3
|
-
@
|
|
3
|
+
@use './theme/theme-data' as theme;
|
|
4
4
|
|
|
5
5
|
$custom-theme: mat.m2-define-light-theme(
|
|
6
6
|
(
|
|
7
7
|
color: (
|
|
8
|
-
primary: map.get(
|
|
9
|
-
accent: map.get(
|
|
10
|
-
warn: map.get(
|
|
8
|
+
primary: map.get(theme.$palettes, primary),
|
|
9
|
+
accent: map.get(theme.$palettes, accent),
|
|
10
|
+
warn: map.get(theme.$palettes, warning)
|
|
11
11
|
),
|
|
12
|
-
typography:
|
|
12
|
+
typography: theme.$app-typography
|
|
13
13
|
)
|
|
14
14
|
);
|
|
15
15
|
|
|
16
|
-
@if
|
|
17
|
-
$custom-theme: get-custom-background-color(
|
|
16
|
+
@if theme.$background-color {
|
|
17
|
+
$custom-theme: theme.get-custom-background-color(theme.$background-color, $custom-theme);
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
@if
|
|
21
|
-
$custom-theme: get-custom-text-color(
|
|
20
|
+
@if theme.$text-color {
|
|
21
|
+
$custom-theme: theme.get-custom-text-color(theme.$text-color, $custom-theme);
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
@if
|
|
24
|
+
@if theme.$base-font-size {
|
|
25
25
|
body,
|
|
26
26
|
html {
|
|
27
|
-
font-size:
|
|
27
|
+
font-size: theme.$base-font-size;
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
@if
|
|
31
|
+
@if theme.$font-family {
|
|
32
32
|
body,
|
|
33
33
|
html {
|
|
34
|
-
font-family:
|
|
34
|
+
font-family: theme.$font-family;
|
|
35
35
|
}
|
|
36
36
|
}
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
$colors: (
|
|
16
16
|
red: color.red($color),
|
|
17
17
|
green: color.green($color),
|
|
18
|
-
blue: color.blue($color)
|
|
18
|
+
blue: color.blue($color)
|
|
19
19
|
);
|
|
20
20
|
|
|
21
21
|
@each $name, $value in $colors {
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
$colors: map.merge(
|
|
33
33
|
$colors,
|
|
34
34
|
(
|
|
35
|
-
$name: $value
|
|
35
|
+
$name: $value
|
|
36
36
|
)
|
|
37
37
|
);
|
|
38
38
|
}
|
|
@@ -91,10 +91,10 @@
|
|
|
91
91
|
$color900: color.mix($dark, $color, 75%);
|
|
92
92
|
|
|
93
93
|
/* stylelint-disable scss/dollar-variable-pattern */
|
|
94
|
-
$colorA100: color.adjust(
|
|
95
|
-
$colorA200: color.adjust(
|
|
96
|
-
$colorA400: color.adjust(
|
|
97
|
-
$colorA700: color.adjust(
|
|
94
|
+
$colorA100: color.adjust(color.adjust(color.mix($dark, $color, 15%), $saturation: 80%), $lightness: 45.6%);
|
|
95
|
+
$colorA200: color.adjust(color.adjust(color.mix($dark, $color, 15%), $saturation: 80%), $lightness: 35.6%);
|
|
96
|
+
$colorA400: color.adjust(color.adjust(color.mix($dark, $color, 15%), $saturation: 100%), $lightness: 25.6%);
|
|
97
|
+
$colorA700: color.adjust(color.adjust(color.mix($dark, $color, 15%), $saturation: 100%), $lightness: 20.5%);
|
|
98
98
|
/* stylelint-enable scss/dollar-variable-pattern */
|
|
99
99
|
|
|
100
100
|
$contrast50: create-text-color($color50, $colorType);
|
|
@@ -126,30 +126,28 @@
|
|
|
126
126
|
700: $color700,
|
|
127
127
|
800: $color800,
|
|
128
128
|
900: $color900,
|
|
129
|
-
/* stylelint-disable value-keyword-case */
|
|
130
|
-
A100: $colorA100,
|
|
129
|
+
/* stylelint-disable value-keyword-case */ A100: $colorA100,
|
|
131
130
|
A200: $colorA200,
|
|
132
131
|
A400: $colorA400,
|
|
133
132
|
A700: $colorA700,
|
|
134
133
|
/* stylelint-enable value-keyword-case */
|
|
135
134
|
contrast: (
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
),
|
|
135
|
+
50: $contrast50,
|
|
136
|
+
100: $contrast100,
|
|
137
|
+
200: $contrast200,
|
|
138
|
+
300: $contrast300,
|
|
139
|
+
400: $contrast400,
|
|
140
|
+
500: $contrast500,
|
|
141
|
+
600: $contrast600,
|
|
142
|
+
700: $contrast700,
|
|
143
|
+
800: $contrast800,
|
|
144
|
+
900: $contrast900,
|
|
145
|
+
/* stylelint-disable value-keyword-case */ A100: $contrastA100,
|
|
146
|
+
A200: $contrastA200,
|
|
147
|
+
A400: $contrastA400,
|
|
148
|
+
A700: $contrastA700,
|
|
149
|
+
/* stylelint-enable value-keyword-case */
|
|
150
|
+
)
|
|
153
151
|
);
|
|
154
152
|
|
|
155
153
|
@return $palette;
|
|
@@ -1,27 +1,27 @@
|
|
|
1
1
|
@use '@angular/material' as mat;
|
|
2
|
-
@
|
|
3
|
-
@
|
|
2
|
+
@use 'default-colors';
|
|
3
|
+
@use 'custom-palette-creator';
|
|
4
4
|
|
|
5
5
|
@function get-mat-palettes($primary-color, $accent-color) {
|
|
6
6
|
$mat-primary-palette: null;
|
|
7
7
|
|
|
8
8
|
@if ($primary-color) {
|
|
9
|
-
$custom-theme-primary-palette: create-color-palette($primary-color, 'primary');
|
|
9
|
+
$custom-theme-primary-palette: custom-palette-creator.create-color-palette($primary-color, 'primary');
|
|
10
10
|
$mat-primary-palette: mat.m2-define-palette($custom-theme-primary-palette, 500);
|
|
11
11
|
} @else {
|
|
12
|
-
$mat-primary-palette: mat.m2-define-palette(
|
|
12
|
+
$mat-primary-palette: mat.m2-define-palette(default-colors.$default-primary, A100);
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
$mat-accent-palette: null;
|
|
16
16
|
|
|
17
17
|
@if ($accent-color) {
|
|
18
|
-
$custom-theme-accent-palette: create-color-palette($accent-color, 'accent');
|
|
18
|
+
$custom-theme-accent-palette: custom-palette-creator.create-color-palette($accent-color, 'accent');
|
|
19
19
|
$mat-accent-palette: mat.m2-define-palette($custom-theme-accent-palette, 500);
|
|
20
20
|
} @else {
|
|
21
|
-
$mat-accent-palette: mat.m2-define-palette(
|
|
21
|
+
$mat-accent-palette: mat.m2-define-palette(default-colors.$default-accent);
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
$mat-warn-palette: mat.m2-define-palette(
|
|
24
|
+
$mat-warn-palette: mat.m2-define-palette(default-colors.$default-warn, A100);
|
|
25
25
|
|
|
26
26
|
@return (primary: $mat-primary-palette, accent: $mat-accent-palette, warning: $mat-warn-palette);
|
|
27
27
|
}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
@use 'sass:map';
|
|
2
|
-
@
|
|
3
|
-
@
|
|
4
|
-
@
|
|
5
|
-
@
|
|
6
|
-
@
|
|
2
|
+
@use 'theme-configuration';
|
|
3
|
+
@use 'typography';
|
|
4
|
+
@use 'custom-theme-palettes';
|
|
5
|
+
@use 'custom-background-color';
|
|
6
|
+
@use 'custom-text-color';
|
|
7
7
|
|
|
8
|
-
$primary-color: map.get(
|
|
9
|
-
$accent-color: map.get(
|
|
10
|
-
$background-color: map.get(
|
|
8
|
+
$primary-color: map.get(theme-configuration.$theme-config, 'primaryColor');
|
|
9
|
+
$accent-color: map.get(theme-configuration.$theme-config, 'accentColor');
|
|
10
|
+
$background-color: map.get(theme-configuration.$theme-config, 'backgroundColor');
|
|
11
11
|
|
|
12
|
-
$text-color: map.get(
|
|
13
|
-
$base-font-size: map.get(
|
|
14
|
-
$font-family: map.get(
|
|
12
|
+
$text-color: map.get(theme-configuration.$theme-config, 'textColor');
|
|
13
|
+
$base-font-size: map.get(theme-configuration.$theme-config, 'baseFontSize');
|
|
14
|
+
$font-family: map.get(theme-configuration.$theme-config, 'fontFamily');
|
|
15
15
|
|
|
16
|
-
$app-typography: get-mat-typography($base-font-size, $font-family);
|
|
16
|
+
$app-typography: typography.get-mat-typography($base-font-size, $font-family);
|
|
17
17
|
|
|
18
|
-
$palettes: get-mat-palettes($primary-color, $accent-color);
|
|
18
|
+
$palettes: custom-theme-palettes.get-mat-palettes($primary-color, $accent-color);
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
@use 'sass:map';
|
|
2
2
|
@use '@angular/material' as mat;
|
|
3
|
-
@
|
|
3
|
+
@use 'sass:meta';
|
|
4
|
+
@use '../variables/font-family';
|
|
4
5
|
|
|
5
6
|
@function get-mat-typography($base-font-size, $font-family) {
|
|
6
7
|
$custom-typography: mat.m2-define-typography-config(
|
|
@@ -16,8 +17,7 @@
|
|
|
16
17
|
$subtitle-2: mat.m2-define-typography-level(14px, 24px, 500),
|
|
17
18
|
$body-2: mat.m2-define-typography-level(14px, 20px, 400),
|
|
18
19
|
$caption: mat.m2-define-typography-level(12px, 20px, 400),
|
|
19
|
-
$button: mat.m2-define-typography-level(14px, 14px, 500)
|
|
20
|
-
// Line-height must be unit-less fraction of the font-size.
|
|
20
|
+
$button: mat.m2-define-typography-level(14px, 14px, 500) // Line-height must be unit-less fraction of the font-size.
|
|
21
21
|
);
|
|
22
22
|
|
|
23
23
|
@if $base-font-size {
|
|
@@ -34,14 +34,14 @@
|
|
|
34
34
|
$body-2: mat.m2-define-typography-level(1rem, 1.42rem, 400),
|
|
35
35
|
$caption: mat.m2-define-typography-level(0.86rem, 1.42rem, 400),
|
|
36
36
|
$button: mat.m2-define-typography-level(1rem, 1rem, 500),
|
|
37
|
-
$font-family:
|
|
37
|
+
$font-family: font-family.$default-font-family
|
|
38
38
|
);
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
@if $font-family {
|
|
42
42
|
@each $key, $level in $custom-typography {
|
|
43
43
|
/* stylelint-disable-next-line scss/no-global-function-names */
|
|
44
|
-
@if type-of($level) == 'map' {
|
|
44
|
+
@if meta.type-of($level) == 'map' {
|
|
45
45
|
$new-level: map.merge(
|
|
46
46
|
$level,
|
|
47
47
|
(
|
package/fesm2022/adf-core.mjs
CHANGED
|
@@ -73,6 +73,8 @@ import * as i2$8 from '@angular/material/tooltip';
|
|
|
73
73
|
import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
|
|
74
74
|
import * as i4$1 from '@angular/material/divider';
|
|
75
75
|
import { MatDividerModule } from '@angular/material/divider';
|
|
76
|
+
import * as i2$9 from '@angular/material/list';
|
|
77
|
+
import { MatSelectionList, MatListOption, MatListModule } from '@angular/material/list';
|
|
76
78
|
import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
|
|
77
79
|
import * as i1$c from '@angular/cdk/overlay';
|
|
78
80
|
import { OverlayConfig } from '@angular/cdk/overlay';
|
|
@@ -87,8 +89,6 @@ import * as i3$4 from '@angular/material/datepicker';
|
|
|
87
89
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
88
90
|
import * as i4$2 from '@angular/material/autocomplete';
|
|
89
91
|
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
90
|
-
import * as i2$9 from '@angular/material/list';
|
|
91
|
-
import { MatListModule } from '@angular/material/list';
|
|
92
92
|
import * as i1$d from '@angular/material/sidenav';
|
|
93
93
|
import { MatSidenavModule, MatSidenav } from '@angular/material/sidenav';
|
|
94
94
|
import * as i1$e from '@angular/cdk/layout';
|
|
@@ -109,6 +109,7 @@ import { MatTabGroupHarness } from '@angular/material/tabs/testing';
|
|
|
109
109
|
import { MatToolbarHarness } from '@angular/material/toolbar/testing';
|
|
110
110
|
import { MatSnackBarHarness } from '@angular/material/snack-bar/testing';
|
|
111
111
|
import { MatProgressBarHarness } from '@angular/material/progress-bar/testing';
|
|
112
|
+
import { MatListOptionHarness } from '@angular/material/list/testing';
|
|
112
113
|
import { MatGridListModule } from '@angular/material/grid-list';
|
|
113
114
|
import { MatRadioModule } from '@angular/material/radio';
|
|
114
115
|
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
@@ -13996,8 +13997,8 @@ class ColumnsSelectorComponent {
|
|
|
13996
13997
|
closeMenu() {
|
|
13997
13998
|
this.mainMenuTrigger.closeMenu();
|
|
13998
13999
|
}
|
|
13999
|
-
changeColumnVisibility(
|
|
14000
|
-
const selectedColumn = this.columnItems.find((column) => column.id ===
|
|
14000
|
+
changeColumnVisibility(event) {
|
|
14001
|
+
const selectedColumn = this.columnItems.find((column) => column.id === event.options[0].value);
|
|
14001
14002
|
selectedColumn.isHidden = !selectedColumn.isHidden;
|
|
14002
14003
|
}
|
|
14003
14004
|
apply() {
|
|
@@ -14023,7 +14024,7 @@ class ColumnsSelectorComponent {
|
|
|
14023
14024
|
return columns;
|
|
14024
14025
|
}
|
|
14025
14026
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ColumnsSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14026
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ColumnsSelectorComponent, isStandalone: true, selector: "adf-datatable-column-selector", inputs: { columns: "columns", mainMenuTrigger: "mainMenuTrigger", columnsSorting: "columnsSorting", maxColumnsVisible: "maxColumnsVisible" }, outputs: { submitColumnsVisibility: "submitColumnsVisibility" }, ngImport: i0, template: "<div\n class=\"adf-columns-selector\"\n role=\"presentation\"\n data-automation-id=\"adf-columns-selector\"\n (keyup.enter)=\"$event.stopPropagation()\"\n (click)=\"$event.stopPropagation();\"\n>\n <div class=\"adf-columns-selector-header\">\n <span class=\"adf-columns-selector-header-label\">\n {{\"ADF-DATATABLE.COLUMNS_SELECTOR.COLUMNS\" | translate}}\n </span>\n\n <button\n data-automation-id=\"adf-columns-selector-close-button\"\n mat-icon-button\n
|
|
14027
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ColumnsSelectorComponent, isStandalone: true, selector: "adf-datatable-column-selector", inputs: { columns: "columns", mainMenuTrigger: "mainMenuTrigger", columnsSorting: "columnsSorting", maxColumnsVisible: "maxColumnsVisible" }, outputs: { submitColumnsVisibility: "submitColumnsVisibility" }, ngImport: i0, template: "<div\n class=\"adf-columns-selector\"\n role=\"presentation\"\n data-automation-id=\"adf-columns-selector\"\n (keyup.enter)=\"$event.stopPropagation()\"\n (click)=\"$event.stopPropagation();\"\n>\n <div class=\"adf-columns-selector-header\">\n <span class=\"adf-columns-selector-header-label\">\n {{\"ADF-DATATABLE.COLUMNS_SELECTOR.COLUMNS\" | translate}}\n </span>\n\n <button\n data-automation-id=\"adf-columns-selector-close-button\"\n mat-icon-button\n [attr.aria-label]=\"'CLOSE' | translate\"\n (click)=\"closeMenu()\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <mat-divider class=\"adf-columns-selector-divider\" />\n\n <div class=\"adf-columns-selector-search-input-container\">\n <mat-icon\n class=\"adf-columns-selector-search-input-icon\">\n search\n </mat-icon>\n\n <input\n [formControl]=\"searchInputControl\"\n class=\"adf-columns-selector-search-input\"\n data-automation-id=\"adf-columns-selector-search-input\"\n type=\"text\"\n [placeholder]='\"ADF-DATATABLE.COLUMNS_SELECTOR.SEARCH\" | translate'>\n </div>\n\n <mat-selection-list\n class=\"adf-columns-selector-list-container\"\n (selectionChange)=\"changeColumnVisibility($event)\"\n [attr.aria-label]='\"ADF-DATATABLE.COLUMNS_SELECTOR.COLUMNS_VISIBILITY\" | translate'>\n <div *ngFor=\"let column of (columnItems | columnsSearchFilter: searchQuery)\" class=\"adf-columns-selector-list-item\">\n <mat-list-option\n color=\"primary\"\n class=\"adf-columns-selector-column-checkbox\"\n [attr.data-automation-id]=\"'adf-columns-selector-column-checkbox-' + column.title\"\n [selected]=\"!column.isHidden\"\n [disabled]=\"isCheckboxDisabled(column)\"\n [value]=\"column.id\">\n <div class=\"adf-columns-selector-list-content\">\n {{column.title | translate}}\n </div>\n <div\n *ngIf=\"column.subtitle\"\n class=\"\n adf-columns-selector-list-content\n adf-columns-selector-subtitle\n \"\n >\n <span>\n {{column.subtitle | translate}}\n </span>\n </div>\n </mat-list-option>\n </div>\n </mat-selection-list>\n\n <mat-divider class=\"adf-columns-selector-divider\" />\n\n <div class=\"adf-columns-selector-footer\">\n <button\n mat-flat-button\n data-automation-id=\"adf-columns-selector-apply-button\"\n color=\"primary\"\n (click)=\"apply()\">\n {{\"ADF-DATATABLE.COLUMNS_SELECTOR.APPLY\" | translate}}\n </button>\n </div>\n</div>\n", styles: ["adf-datatable-column-selector .adf-columns-selector{padding:12px 0;min-width:277px}adf-datatable-column-selector .adf-columns-selector-header{padding:0 12px;display:flex;justify-content:space-between;align-items:center}adf-datatable-column-selector .adf-columns-selector-header-label{font-size:var(--theme-body-1-font-size)}adf-datatable-column-selector .adf-columns-selector-list-container{max-height:350px;overflow:hidden auto;margin-left:-16px}adf-datatable-column-selector .adf-columns-selector .adf-columns-selector-list-item{margin-top:10px}adf-datatable-column-selector .adf-columns-selector .adf-columns-selector-list-item .mdc-list-item{display:flex;flex-direction:row-reverse;padding-left:0;height:24px}adf-datatable-column-selector .adf-columns-selector .adf-columns-selector-list-item .mdc-list-item .mdc-list-item__end{margin-right:-5px}adf-datatable-column-selector .adf-columns-selector-list-content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:210px;color:var(--theme-secondary-text)}adf-datatable-column-selector .adf-columns-selector-subtitle{color:var(--adf-theme-foreground-text-color);font-size:var(--theme-caption-font-size);opacity:.6;display:flex;column-gap:3px;align-items:center}adf-datatable-column-selector .adf-columns-selector-subtitle-icon{margin-top:3px;height:var(--theme-caption-font-size);width:var(--theme-caption-font-size);font-size:var(--theme-caption-font-size)}adf-datatable-column-selector .adf-columns-selector-column-checkbox{padding:0 20px}adf-datatable-column-selector .adf-columns-selector-footer{padding:0 12px;display:flex;justify-content:flex-end}adf-datatable-column-selector .adf-columns-selector-divider{margin:16px 0}adf-datatable-column-selector .adf-columns-selector-search-input-container{padding:0 12px;position:relative;display:flex;align-items:center;margin-bottom:9px}adf-datatable-column-selector .adf-columns-selector-search-input{padding:10px 10px 10px 29px;width:100%;outline:0;border-radius:6px;border:1px solid var(--theme-background-color);background:var(--theme-background-color)}adf-datatable-column-selector .adf-columns-selector-search-input:focus{outline:none}adf-datatable-column-selector .adf-columns-selector-search-input-icon{position:absolute;left:17px;top:10px;font-size:var(--theme-adf-icon-1-font-size)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "pipe", type: ColumnsSearchFilterPipe, name: "columnsSearchFilter" }, { kind: "component", type: MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
14027
14028
|
}
|
|
14028
14029
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ColumnsSelectorComponent, decorators: [{
|
|
14029
14030
|
type: Component,
|
|
@@ -14035,8 +14036,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
14035
14036
|
MatDividerModule,
|
|
14036
14037
|
ReactiveFormsModule,
|
|
14037
14038
|
MatCheckboxModule,
|
|
14038
|
-
ColumnsSearchFilterPipe
|
|
14039
|
-
|
|
14039
|
+
ColumnsSearchFilterPipe,
|
|
14040
|
+
MatSelectionList,
|
|
14041
|
+
MatListOption
|
|
14042
|
+
], encapsulation: ViewEncapsulation.None, template: "<div\n class=\"adf-columns-selector\"\n role=\"presentation\"\n data-automation-id=\"adf-columns-selector\"\n (keyup.enter)=\"$event.stopPropagation()\"\n (click)=\"$event.stopPropagation();\"\n>\n <div class=\"adf-columns-selector-header\">\n <span class=\"adf-columns-selector-header-label\">\n {{\"ADF-DATATABLE.COLUMNS_SELECTOR.COLUMNS\" | translate}}\n </span>\n\n <button\n data-automation-id=\"adf-columns-selector-close-button\"\n mat-icon-button\n [attr.aria-label]=\"'CLOSE' | translate\"\n (click)=\"closeMenu()\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <mat-divider class=\"adf-columns-selector-divider\" />\n\n <div class=\"adf-columns-selector-search-input-container\">\n <mat-icon\n class=\"adf-columns-selector-search-input-icon\">\n search\n </mat-icon>\n\n <input\n [formControl]=\"searchInputControl\"\n class=\"adf-columns-selector-search-input\"\n data-automation-id=\"adf-columns-selector-search-input\"\n type=\"text\"\n [placeholder]='\"ADF-DATATABLE.COLUMNS_SELECTOR.SEARCH\" | translate'>\n </div>\n\n <mat-selection-list\n class=\"adf-columns-selector-list-container\"\n (selectionChange)=\"changeColumnVisibility($event)\"\n [attr.aria-label]='\"ADF-DATATABLE.COLUMNS_SELECTOR.COLUMNS_VISIBILITY\" | translate'>\n <div *ngFor=\"let column of (columnItems | columnsSearchFilter: searchQuery)\" class=\"adf-columns-selector-list-item\">\n <mat-list-option\n color=\"primary\"\n class=\"adf-columns-selector-column-checkbox\"\n [attr.data-automation-id]=\"'adf-columns-selector-column-checkbox-' + column.title\"\n [selected]=\"!column.isHidden\"\n [disabled]=\"isCheckboxDisabled(column)\"\n [value]=\"column.id\">\n <div class=\"adf-columns-selector-list-content\">\n {{column.title | translate}}\n </div>\n <div\n *ngIf=\"column.subtitle\"\n class=\"\n adf-columns-selector-list-content\n adf-columns-selector-subtitle\n \"\n >\n <span>\n {{column.subtitle | translate}}\n </span>\n </div>\n </mat-list-option>\n </div>\n </mat-selection-list>\n\n <mat-divider class=\"adf-columns-selector-divider\" />\n\n <div class=\"adf-columns-selector-footer\">\n <button\n mat-flat-button\n data-automation-id=\"adf-columns-selector-apply-button\"\n color=\"primary\"\n (click)=\"apply()\">\n {{\"ADF-DATATABLE.COLUMNS_SELECTOR.APPLY\" | translate}}\n </button>\n </div>\n</div>\n", styles: ["adf-datatable-column-selector .adf-columns-selector{padding:12px 0;min-width:277px}adf-datatable-column-selector .adf-columns-selector-header{padding:0 12px;display:flex;justify-content:space-between;align-items:center}adf-datatable-column-selector .adf-columns-selector-header-label{font-size:var(--theme-body-1-font-size)}adf-datatable-column-selector .adf-columns-selector-list-container{max-height:350px;overflow:hidden auto;margin-left:-16px}adf-datatable-column-selector .adf-columns-selector .adf-columns-selector-list-item{margin-top:10px}adf-datatable-column-selector .adf-columns-selector .adf-columns-selector-list-item .mdc-list-item{display:flex;flex-direction:row-reverse;padding-left:0;height:24px}adf-datatable-column-selector .adf-columns-selector .adf-columns-selector-list-item .mdc-list-item .mdc-list-item__end{margin-right:-5px}adf-datatable-column-selector .adf-columns-selector-list-content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:210px;color:var(--theme-secondary-text)}adf-datatable-column-selector .adf-columns-selector-subtitle{color:var(--adf-theme-foreground-text-color);font-size:var(--theme-caption-font-size);opacity:.6;display:flex;column-gap:3px;align-items:center}adf-datatable-column-selector .adf-columns-selector-subtitle-icon{margin-top:3px;height:var(--theme-caption-font-size);width:var(--theme-caption-font-size);font-size:var(--theme-caption-font-size)}adf-datatable-column-selector .adf-columns-selector-column-checkbox{padding:0 20px}adf-datatable-column-selector .adf-columns-selector-footer{padding:0 12px;display:flex;justify-content:flex-end}adf-datatable-column-selector .adf-columns-selector-divider{margin:16px 0}adf-datatable-column-selector .adf-columns-selector-search-input-container{padding:0 12px;position:relative;display:flex;align-items:center;margin-bottom:9px}adf-datatable-column-selector .adf-columns-selector-search-input{padding:10px 10px 10px 29px;width:100%;outline:0;border-radius:6px;border:1px solid var(--theme-background-color);background:var(--theme-background-color)}adf-datatable-column-selector .adf-columns-selector-search-input:focus{outline:none}adf-datatable-column-selector .adf-columns-selector-search-input-icon{position:absolute;left:17px;top:10px;font-size:var(--theme-adf-icon-1-font-size)}\n"] }]
|
|
14040
14043
|
}], propDecorators: { columns: [{
|
|
14041
14044
|
type: Input
|
|
14042
14045
|
}], mainMenuTrigger: [{
|
|
@@ -27476,6 +27479,7 @@ class NotificationHistoryComponent {
|
|
|
27476
27479
|
}
|
|
27477
27480
|
onMenuOpened() {
|
|
27478
27481
|
this.createPagination();
|
|
27482
|
+
setTimeout(() => this.initializeFocusManager(0));
|
|
27479
27483
|
}
|
|
27480
27484
|
markAsRead() {
|
|
27481
27485
|
this.notifications = [];
|
|
@@ -27497,6 +27501,7 @@ class NotificationHistoryComponent {
|
|
|
27497
27501
|
this.pagination.skipCount = this.pagination.maxItems + this.pagination.skipCount;
|
|
27498
27502
|
this.pagination.hasMoreItems = this.notifications.length > this.pagination.skipCount;
|
|
27499
27503
|
this.paginatedNotifications = this.notifications.slice(0, this.pagination.skipCount);
|
|
27504
|
+
setTimeout(() => this.initializeFocusManager(this.focusKeyManager.activeItemIndex));
|
|
27500
27505
|
}
|
|
27501
27506
|
hasMoreNotifications() {
|
|
27502
27507
|
return this.pagination?.hasMoreItems;
|
|
@@ -27508,8 +27513,26 @@ class NotificationHistoryComponent {
|
|
|
27508
27513
|
this.trigger.closeMenu();
|
|
27509
27514
|
}
|
|
27510
27515
|
}
|
|
27516
|
+
manageFocus(event) {
|
|
27517
|
+
if (event.key === 'ArrowUp') {
|
|
27518
|
+
this.focusKeyManager.setPreviousItemActive();
|
|
27519
|
+
event.stopPropagation();
|
|
27520
|
+
}
|
|
27521
|
+
else if (event.key === 'ArrowDown') {
|
|
27522
|
+
event.stopPropagation();
|
|
27523
|
+
this.focusKeyManager.setNextItemActive();
|
|
27524
|
+
}
|
|
27525
|
+
}
|
|
27526
|
+
initializeFocusManager(activeIndex) {
|
|
27527
|
+
this.focusKeyManager = new FocusKeyManager([
|
|
27528
|
+
this.markAsReadButton,
|
|
27529
|
+
...this.menuItems,
|
|
27530
|
+
...(this.hasMoreNotifications() ? [this.loadMoreButton] : [])
|
|
27531
|
+
]).withWrap();
|
|
27532
|
+
this.focusKeyManager.setActiveItem(activeIndex);
|
|
27533
|
+
}
|
|
27511
27534
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NotificationHistoryComponent, deps: [{ token: NotificationService }, { token: StorageService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
27512
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: NotificationHistoryComponent, isStandalone: true, selector: "adf-notification-history", inputs: { menuPositionX: "menuPositionX", menuPositionY: "menuPositionY", maxNotifications: "maxNotifications" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true, static: true }], ngImport: i0, template: "<button mat-button\n [matMenuTriggerFor]=\"menu\"\n aria-hidden=\"false\"\n [attr.aria-label]=\"('NOTIFICATIONS.' + (notifications.length ? 'UNREAD_MESSAGES' : 'NO_MESSAGE') | translate) + ' ' + ('NOTIFICATIONS.OPEN_HISTORY' | translate)\"\n title=\"{{ 'NOTIFICATIONS.OPEN_HISTORY' | translate }}\"\n class=\"adf-notification-history-menu_button\"\n id=\"adf-notification-history-open-button\"\n (menuOpened)=\"onMenuOpened()\">\n <mat-icon matBadge=\"⁠\"\n [matBadgeHidden]=\"!notifications.length\"\n class=\"adf-notification-history-menu_button-icon\"\n matBadgeColor=\"accent\"\n matBadgeSize=\"small\">notifications\n </mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\"\n [xPosition]=\"menuPositionX\"\n [yPosition]=\"menuPositionY\"\n id=\"adf-notification-history-menu\"\n class=\"adf-notification-history-menu adf-notification-history-menu-panel\">\n <div class=\"adf-notification-history-list-header\">\n <span class=\"adf-notification-history-menu-title\">{{ 'NOTIFICATIONS.TITLE' | translate }}</span>\n <button mat-menu-item\n *ngIf=\"notifications.length\"\n id=\"adf-notification-history-mark-as-read\"\n class=\"adf-notification-history-mark-as-read\"\n title=\"{{ 'NOTIFICATIONS.MARK_AS_READ' | translate }}\"\n (click)=\"markAsRead()\">\n <mat-icon class=\"adf-notification-history-mark-as-read-icon\">done_all</mat-icon>\n </button>\n </div>\n\n <mat-divider/>\n\n <div class=\"adf-notification-history-item-list\">\n <ng-container *ngIf=\"notifications.length; else empty_list_template\">\n <button mat-menu-item\n *ngFor=\"let notification of paginatedNotifications\"\n (click)=\"onNotificationClick(notification, $event)\"\n class=\"adf-notification-history-menu-item\">\n <div class=\"adf-notification-history-menu-item-content\">\n <div *ngIf=\"notification.initiator; else no_avatar\"\n [outerHTML]=\"notification.initiator | usernameInitials : 'adf-notification-initiator-pic'\"></div>\n <ng-template #no_avatar>\n <mat-icon class=\"adf-notification-history-menu-initiator\">\n {{ notification.icon }}\n </mat-icon>\n </ng-template>\n <div class=\"adf-notification-history-menu-item-content-message\">\n <p class=\"adf-notification-history-menu-text adf-notification-history-menu-message\"\n *ngFor=\"let message of notification.messages\"\n [title]=\"message\">{{ message }}</p>\n <p class=\"adf-notification-history-menu-text adf-notification-history-menu-date\"\n > {{ notification.datetime | adfTimeAgo }} </p>\n </div>\n </div>\n </button>\n </ng-container>\n <ng-template #empty_list_template>\n <p mat-menu-item id=\"adf-notification-history-component-no-message\"\n class=\"adf-notification-history-menu-no-message-text\">\n {{ 'NOTIFICATIONS.NO_MESSAGE' | translate }}\n </p>\n </ng-template>\n </div>\n\n <mat-divider/>\n\n <div class=\"adf-notification-history-load-more\" *ngIf=\"hasMoreNotifications()\">\n <button mat-menu-item (click)=\"loadMore($event)\">\n {{ 'NOTIFICATIONS.LOAD_MORE' | translate }}\n </button>\n </div>\n</mat-menu>\n", styles: [".adf-notification-history-menu-title{font-size:14px;-webkit-font-smoothing:subpixel-antialiased}.adf-notification-history-menu_button.mat-mdc-button{border-radius:90%;padding:0;min-width:40px;height:40px;margin-top:1px}.adf-notification-history-menu_button.mat-mdc-button .adf-notification-history-menu_button-icon{margin-right:0;font-size:24px;height:24px;width:24px;color:var(--theme-text-color)}.adf-notification-history-menu .adf-notification-history-list-header{padding:10.5px 16px;display:flex;justify-content:space-between;align-items:center}.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read{display:flex;padding:10px;width:auto;margin:4px 0}.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read:hover,.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read:focus,.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read:active{background:none}.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read-icon{margin:0;color:inherit}.adf-notification-history-menu .adf-notification-history-menu-title{line-height:28px}.adf-notification-history-menu .adf-notification-history-item-list{padding-top:8px}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-item{cursor:pointer;height:72px;align-items:center;display:block;padding:0 14px}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-item-content{height:100%;display:flex;align-items:center}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-item-content-message{display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;overflow:hidden;padding:0 0 0 16px}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-item-content-message p{line-height:normal;margin:0;color:var(--theme-sidenav-user-menu-color)}.adf-notification-history-menu .adf-notification-history-menu-item:focus{outline:none;background:var(--adf-theme-background-hover-color)}.adf-notification-history-menu .adf-notification-history-menu-item:hover{background-color:var(--adf-theme-background-hover-color)}.adf-notification-history-menu .adf-notification-history-menu-message:is(p){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--theme-body-1-font-size)}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-no-message-text{color:var(--theme-sidenav-user-menu-color);margin:0;padding:12px 16px;opacity:inherit;border:none}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-no-message-text span{font-size:16px;-webkit-font-smoothing:subpixel-antialiased}.adf-notification-history-menu .adf-notification-history-menu-date.adf-notification-history-menu-text:is(p){font-size:var(--theme-caption-font-size);text-indent:3px}.adf-notification-history-menu .adf-notification-history-menu-initiator{margin:4px}.adf-notification-initiator-pic{min-width:40px;background:var(--theme-accent-color);display:inline-block;height:40px;border-radius:100px;text-align:center;font-weight:bolder;font-size:var(--theme-adf-picture-1-font-size);text-transform:uppercase;vertical-align:middle;line-height:40px;color:var(--adf-theme-mat-grey-color-a200)}.adf-notification-history-load-more{display:flex;justify-content:center;padding:10px}.adf-notification-history-load-more button{justify-content:center;width:100%;min-height:36px}.mat-mdc-menu-panel.adf-notification-history-menu.adf-notification-history-menu-panel{min-width:320px;max-height:500px}.mat-mdc-menu-panel.adf-notification-history-menu.adf-notification-history-menu-panel .mat-mdc-menu-content{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i6$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: TimeAgoPipe, name: "adfTimeAgo" }, { kind: "pipe", type: InitialUsernamePipe, name: "usernameInitials" }, { kind: "ngmodule", type: MatSnackBarModule }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
27535
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: NotificationHistoryComponent, isStandalone: true, selector: "adf-notification-history", inputs: { menuPositionX: "menuPositionX", menuPositionY: "menuPositionY", maxNotifications: "maxNotifications" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true, static: true }, { propertyName: "markAsReadButton", first: true, predicate: ["markAsReadButton"], descendants: true }, { propertyName: "loadMoreButton", first: true, predicate: ["loadMoreButton"], descendants: true }, { propertyName: "menuItems", predicate: MatMenuItem, descendants: true }], ngImport: i0, template: "<button mat-button\n [matMenuTriggerFor]=\"menu\"\n aria-hidden=\"false\"\n [attr.aria-label]=\"('NOTIFICATIONS.' + (notifications.length ? 'UNREAD_MESSAGES' : 'NO_MESSAGE') | translate) + ' ' + ('NOTIFICATIONS.OPEN_HISTORY' | translate)\"\n title=\"{{ 'NOTIFICATIONS.OPEN_HISTORY' | translate }}\"\n class=\"adf-notification-history-menu_button\"\n id=\"adf-notification-history-open-button\"\n (menuOpened)=\"onMenuOpened()\">\n <mat-icon matBadge=\"⁠\"\n [matBadgeHidden]=\"!notifications.length\"\n class=\"adf-notification-history-menu_button-icon\"\n matBadgeColor=\"accent\"\n matBadgeSize=\"small\">notifications\n </mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\"\n [xPosition]=\"menuPositionX\"\n [yPosition]=\"menuPositionY\"\n id=\"adf-notification-history-menu\"\n class=\"adf-notification-history-menu adf-notification-history-menu-panel\">\n <div class=\"adf-notification-history-list-header\" aria-hidden=\"true\">\n <span class=\"adf-notification-history-menu-title\">{{ 'NOTIFICATIONS.TITLE' | translate }}</span>\n <button mat-icon-button\n *ngIf=\"notifications.length\"\n data-automation-id=\"adf-notification-history-mark-as-read\"\n class=\"adf-notification-history-mark-as-read\"\n title=\"{{ 'NOTIFICATIONS.MARK_AS_READ' | translate }}\"\n (click)=\"markAsRead()\"\n #markAsReadButton\n (keydown)=\"manageFocus($event)\">\n <mat-icon class=\"adf-notification-history-mark-as-read-icon\">done_all</mat-icon>\n </button>\n </div>\n\n <mat-divider/>\n\n <div class=\"adf-notification-history-item-list\">\n <ng-container *ngIf=\"notifications.length; else empty_list_template\">\n <button mat-menu-item\n *ngFor=\"let notification of paginatedNotifications\"\n (click)=\"onNotificationClick(notification, $event)\"\n class=\"adf-notification-history-menu-item\"\n (keydown)=\"manageFocus($event)\">\n <div class=\"adf-notification-history-menu-item-content\">\n <div *ngIf=\"notification.initiator; else no_avatar\"\n [outerHTML]=\"notification.initiator | usernameInitials : 'adf-notification-initiator-pic'\"></div>\n <ng-template #no_avatar>\n <mat-icon class=\"adf-notification-history-menu-initiator\">\n {{ notification.icon }}\n </mat-icon>\n </ng-template>\n <div class=\"adf-notification-history-menu-item-content-message\">\n <p class=\"adf-notification-history-menu-text adf-notification-history-menu-message\"\n *ngFor=\"let message of notification.messages\"\n [title]=\"message\">{{ message }}</p>\n <p class=\"adf-notification-history-menu-text adf-notification-history-menu-date\"\n > {{ notification.datetime | adfTimeAgo }} </p>\n </div>\n </div>\n </button>\n </ng-container>\n <ng-template #empty_list_template>\n <p mat-menu-item id=\"adf-notification-history-component-no-message\"\n class=\"adf-notification-history-menu-no-message-text\">\n {{ 'NOTIFICATIONS.NO_MESSAGE' | translate }}\n </p>\n </ng-template>\n </div>\n\n <mat-divider/>\n\n <div\n class=\"adf-notification-history-load-more\"\n *ngIf=\"hasMoreNotifications()\"\n aria-hidden=\"true\">\n <button\n data-automation-id=\"adf-notification-history-load-more\"\n mat-button\n (click)=\"loadMore($event)\"\n #loadMoreButton\n (keydown)=\"manageFocus($event)\">\n {{ 'NOTIFICATIONS.LOAD_MORE' | translate }}\n </button>\n </div>\n</mat-menu>\n", styles: [".adf-notification-history-menu-title{font-size:14px;-webkit-font-smoothing:subpixel-antialiased}.adf-notification-history-menu_button.mat-mdc-button{border-radius:90%;padding:0;min-width:40px;height:40px;margin-top:1px}.adf-notification-history-menu_button.mat-mdc-button .adf-notification-history-menu_button-icon{margin-right:0;font-size:24px;height:24px;width:24px;color:var(--theme-text-color)}.adf-notification-history-menu .adf-notification-history-list-header{padding:10.5px 16px;display:flex;justify-content:space-between;align-items:center}.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read{display:flex;padding:10px;width:auto;margin:4px 0}.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read:hover,.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read:focus,.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read:active{background:none}.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read-icon{margin:0;color:inherit}.adf-notification-history-menu .adf-notification-history-menu-title{line-height:28px}.adf-notification-history-menu .adf-notification-history-item-list{padding-top:8px}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-item{cursor:pointer;height:72px;align-items:center;display:block;padding:0 14px}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-item-content{height:100%;display:flex;align-items:center}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-item-content-message{display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;overflow:hidden;padding:0 0 0 16px}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-item-content-message p{line-height:normal;margin:0;color:var(--theme-sidenav-user-menu-color)}.adf-notification-history-menu .adf-notification-history-menu-item:focus{outline:none;background:var(--adf-theme-background-hover-color)}.adf-notification-history-menu .adf-notification-history-menu-item:hover{background-color:var(--adf-theme-background-hover-color)}.adf-notification-history-menu .adf-notification-history-menu-message:is(p){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--theme-body-1-font-size)}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-no-message-text{color:var(--theme-sidenav-user-menu-color);margin:0;padding:12px 16px;opacity:inherit;border:none}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-no-message-text span{font-size:16px;-webkit-font-smoothing:subpixel-antialiased}.adf-notification-history-menu .adf-notification-history-menu-date.adf-notification-history-menu-text:is(p){font-size:var(--theme-caption-font-size);text-indent:3px}.adf-notification-history-menu .adf-notification-history-menu-initiator{margin:4px}.adf-notification-initiator-pic{min-width:40px;background:var(--theme-accent-color);display:inline-block;height:40px;border-radius:100px;text-align:center;font-weight:bolder;font-size:var(--theme-adf-picture-1-font-size);text-transform:uppercase;vertical-align:middle;line-height:40px;color:var(--adf-theme-mat-grey-color-a200)}.adf-notification-history-load-more{display:flex;justify-content:center;padding:10px}.adf-notification-history-load-more button{justify-content:center;width:100%;min-height:36px}.mat-mdc-menu-panel.adf-notification-history-menu.adf-notification-history-menu-panel{min-width:320px;max-height:500px}.mat-mdc-menu-panel.adf-notification-history-menu.adf-notification-history-menu-panel .mat-mdc-menu-content{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i6$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: TimeAgoPipe, name: "adfTimeAgo" }, { kind: "pipe", type: InitialUsernamePipe, name: "usernameInitials" }, { kind: "ngmodule", type: MatSnackBarModule }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
27513
27536
|
}
|
|
27514
27537
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NotificationHistoryComponent, decorators: [{
|
|
27515
27538
|
type: Component,
|
|
@@ -27525,7 +27548,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
27525
27548
|
TimeAgoPipe,
|
|
27526
27549
|
InitialUsernamePipe,
|
|
27527
27550
|
MatSnackBarModule
|
|
27528
|
-
], encapsulation: ViewEncapsulation.None, template: "<button mat-button\n [matMenuTriggerFor]=\"menu\"\n aria-hidden=\"false\"\n [attr.aria-label]=\"('NOTIFICATIONS.' + (notifications.length ? 'UNREAD_MESSAGES' : 'NO_MESSAGE') | translate) + ' ' + ('NOTIFICATIONS.OPEN_HISTORY' | translate)\"\n title=\"{{ 'NOTIFICATIONS.OPEN_HISTORY' | translate }}\"\n class=\"adf-notification-history-menu_button\"\n id=\"adf-notification-history-open-button\"\n (menuOpened)=\"onMenuOpened()\">\n <mat-icon matBadge=\"⁠\"\n [matBadgeHidden]=\"!notifications.length\"\n class=\"adf-notification-history-menu_button-icon\"\n matBadgeColor=\"accent\"\n matBadgeSize=\"small\">notifications\n </mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\"\n [xPosition]=\"menuPositionX\"\n [yPosition]=\"menuPositionY\"\n id=\"adf-notification-history-menu\"\n class=\"adf-notification-history-menu adf-notification-history-menu-panel\">\n <div class=\"adf-notification-history-list-header\">\n <span class=\"adf-notification-history-menu-title\">{{ 'NOTIFICATIONS.TITLE' | translate }}</span>\n <button mat-
|
|
27551
|
+
], encapsulation: ViewEncapsulation.None, template: "<button mat-button\n [matMenuTriggerFor]=\"menu\"\n aria-hidden=\"false\"\n [attr.aria-label]=\"('NOTIFICATIONS.' + (notifications.length ? 'UNREAD_MESSAGES' : 'NO_MESSAGE') | translate) + ' ' + ('NOTIFICATIONS.OPEN_HISTORY' | translate)\"\n title=\"{{ 'NOTIFICATIONS.OPEN_HISTORY' | translate }}\"\n class=\"adf-notification-history-menu_button\"\n id=\"adf-notification-history-open-button\"\n (menuOpened)=\"onMenuOpened()\">\n <mat-icon matBadge=\"⁠\"\n [matBadgeHidden]=\"!notifications.length\"\n class=\"adf-notification-history-menu_button-icon\"\n matBadgeColor=\"accent\"\n matBadgeSize=\"small\">notifications\n </mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\"\n [xPosition]=\"menuPositionX\"\n [yPosition]=\"menuPositionY\"\n id=\"adf-notification-history-menu\"\n class=\"adf-notification-history-menu adf-notification-history-menu-panel\">\n <div class=\"adf-notification-history-list-header\" aria-hidden=\"true\">\n <span class=\"adf-notification-history-menu-title\">{{ 'NOTIFICATIONS.TITLE' | translate }}</span>\n <button mat-icon-button\n *ngIf=\"notifications.length\"\n data-automation-id=\"adf-notification-history-mark-as-read\"\n class=\"adf-notification-history-mark-as-read\"\n title=\"{{ 'NOTIFICATIONS.MARK_AS_READ' | translate }}\"\n (click)=\"markAsRead()\"\n #markAsReadButton\n (keydown)=\"manageFocus($event)\">\n <mat-icon class=\"adf-notification-history-mark-as-read-icon\">done_all</mat-icon>\n </button>\n </div>\n\n <mat-divider/>\n\n <div class=\"adf-notification-history-item-list\">\n <ng-container *ngIf=\"notifications.length; else empty_list_template\">\n <button mat-menu-item\n *ngFor=\"let notification of paginatedNotifications\"\n (click)=\"onNotificationClick(notification, $event)\"\n class=\"adf-notification-history-menu-item\"\n (keydown)=\"manageFocus($event)\">\n <div class=\"adf-notification-history-menu-item-content\">\n <div *ngIf=\"notification.initiator; else no_avatar\"\n [outerHTML]=\"notification.initiator | usernameInitials : 'adf-notification-initiator-pic'\"></div>\n <ng-template #no_avatar>\n <mat-icon class=\"adf-notification-history-menu-initiator\">\n {{ notification.icon }}\n </mat-icon>\n </ng-template>\n <div class=\"adf-notification-history-menu-item-content-message\">\n <p class=\"adf-notification-history-menu-text adf-notification-history-menu-message\"\n *ngFor=\"let message of notification.messages\"\n [title]=\"message\">{{ message }}</p>\n <p class=\"adf-notification-history-menu-text adf-notification-history-menu-date\"\n > {{ notification.datetime | adfTimeAgo }} </p>\n </div>\n </div>\n </button>\n </ng-container>\n <ng-template #empty_list_template>\n <p mat-menu-item id=\"adf-notification-history-component-no-message\"\n class=\"adf-notification-history-menu-no-message-text\">\n {{ 'NOTIFICATIONS.NO_MESSAGE' | translate }}\n </p>\n </ng-template>\n </div>\n\n <mat-divider/>\n\n <div\n class=\"adf-notification-history-load-more\"\n *ngIf=\"hasMoreNotifications()\"\n aria-hidden=\"true\">\n <button\n data-automation-id=\"adf-notification-history-load-more\"\n mat-button\n (click)=\"loadMore($event)\"\n #loadMoreButton\n (keydown)=\"manageFocus($event)\">\n {{ 'NOTIFICATIONS.LOAD_MORE' | translate }}\n </button>\n </div>\n</mat-menu>\n", styles: [".adf-notification-history-menu-title{font-size:14px;-webkit-font-smoothing:subpixel-antialiased}.adf-notification-history-menu_button.mat-mdc-button{border-radius:90%;padding:0;min-width:40px;height:40px;margin-top:1px}.adf-notification-history-menu_button.mat-mdc-button .adf-notification-history-menu_button-icon{margin-right:0;font-size:24px;height:24px;width:24px;color:var(--theme-text-color)}.adf-notification-history-menu .adf-notification-history-list-header{padding:10.5px 16px;display:flex;justify-content:space-between;align-items:center}.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read{display:flex;padding:10px;width:auto;margin:4px 0}.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read:hover,.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read:focus,.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read:active{background:none}.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read-icon{margin:0;color:inherit}.adf-notification-history-menu .adf-notification-history-menu-title{line-height:28px}.adf-notification-history-menu .adf-notification-history-item-list{padding-top:8px}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-item{cursor:pointer;height:72px;align-items:center;display:block;padding:0 14px}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-item-content{height:100%;display:flex;align-items:center}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-item-content-message{display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;overflow:hidden;padding:0 0 0 16px}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-item-content-message p{line-height:normal;margin:0;color:var(--theme-sidenav-user-menu-color)}.adf-notification-history-menu .adf-notification-history-menu-item:focus{outline:none;background:var(--adf-theme-background-hover-color)}.adf-notification-history-menu .adf-notification-history-menu-item:hover{background-color:var(--adf-theme-background-hover-color)}.adf-notification-history-menu .adf-notification-history-menu-message:is(p){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--theme-body-1-font-size)}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-no-message-text{color:var(--theme-sidenav-user-menu-color);margin:0;padding:12px 16px;opacity:inherit;border:none}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-no-message-text span{font-size:16px;-webkit-font-smoothing:subpixel-antialiased}.adf-notification-history-menu .adf-notification-history-menu-date.adf-notification-history-menu-text:is(p){font-size:var(--theme-caption-font-size);text-indent:3px}.adf-notification-history-menu .adf-notification-history-menu-initiator{margin:4px}.adf-notification-initiator-pic{min-width:40px;background:var(--theme-accent-color);display:inline-block;height:40px;border-radius:100px;text-align:center;font-weight:bolder;font-size:var(--theme-adf-picture-1-font-size);text-transform:uppercase;vertical-align:middle;line-height:40px;color:var(--adf-theme-mat-grey-color-a200)}.adf-notification-history-load-more{display:flex;justify-content:center;padding:10px}.adf-notification-history-load-more button{justify-content:center;width:100%;min-height:36px}.mat-mdc-menu-panel.adf-notification-history-menu.adf-notification-history-menu-panel{min-width:320px;max-height:500px}.mat-mdc-menu-panel.adf-notification-history-menu.adf-notification-history-menu-panel .mat-mdc-menu-content{padding:0}\n"] }]
|
|
27529
27552
|
}], ctorParameters: () => [{ type: NotificationService }, { type: StorageService }, { type: i0.ChangeDetectorRef }], propDecorators: { trigger: [{
|
|
27530
27553
|
type: ViewChild,
|
|
27531
27554
|
args: [MatMenuTrigger, { static: true }]
|
|
@@ -27535,6 +27558,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
27535
27558
|
type: Input
|
|
27536
27559
|
}], maxNotifications: [{
|
|
27537
27560
|
type: Input
|
|
27561
|
+
}], markAsReadButton: [{
|
|
27562
|
+
type: ViewChild,
|
|
27563
|
+
args: ['markAsReadButton']
|
|
27564
|
+
}], loadMoreButton: [{
|
|
27565
|
+
type: ViewChild,
|
|
27566
|
+
args: ['loadMoreButton']
|
|
27567
|
+
}], menuItems: [{
|
|
27568
|
+
type: ViewChildren,
|
|
27569
|
+
args: [MatMenuItem]
|
|
27538
27570
|
}] } });
|
|
27539
27571
|
|
|
27540
27572
|
/*!
|
|
@@ -31199,6 +31231,13 @@ class UnitTestingUtils {
|
|
|
31199
31231
|
const progress = await this.loader.getHarness(MatProgressBarHarness);
|
|
31200
31232
|
return progress.host();
|
|
31201
31233
|
}
|
|
31234
|
+
/** MatListOption related methods */
|
|
31235
|
+
async getMatListOption() {
|
|
31236
|
+
return this.loader.getHarness(MatListOptionHarness);
|
|
31237
|
+
}
|
|
31238
|
+
async getAllMatListOptions() {
|
|
31239
|
+
return this.loader.getAllHarnesses(MatListOptionHarness);
|
|
31240
|
+
}
|
|
31202
31241
|
}
|
|
31203
31242
|
|
|
31204
31243
|
/*!
|