i'm trying to create a toolbar component wrapper that allows the user to configure the toolbar passing a list of json objects, using overflow feature.
01.
<
div
02.
class
=
"toolbar-container"
03.
[ngClass]="{ 'toolbar-container-closed': !isExpanded }"
04.
>
05.
<
div
class
=
"toolbar-expander"
title
=
"{{ 'CORE.TOGGLE_TOOLBAR' | translate }}"
>
06.
<
i
07.
class
=
"material-icons expander"
08.
*
ngIf
=
"!isExpanded && canCollapse"
09.
(click)="toggleExpand()"
10.
>
11.
keyboard_arrow_down
12.
</
i
>
13.
<
i
14.
class
=
"material-icons expander"
15.
*
ngIf
=
"isExpanded && canCollapse"
16.
(click)="toggleExpand()"
17.
>
18.
keyboard_arrow_up
19.
</
i
>
20.
</
div
>
21.
<
div
22.
class
=
"toolbar-toolbar-container"
23.
[ngClass]="{
24.
'toolbar-toolbar-container-hidden': !isExpanded
25.
}"
26.
>
27.
<
kendo-toolbar
28.
#toolbar
29.
[ngClass]="{
30.
'toolbar-toolbar-right': right,
31.
'toolbar-toolbar-left': !right
32.
}"
33.
overflow
=
"true"
34.
[style.width.%]="100"
35.
[popupSettings]="{ animate: false }"
36.
>
37.
<
div
*
ngFor
=
"let item of config.items"
>
38.
<
kendo-toolbar-button
39.
*
ngIf
=
"item.type === 'button' && !item.hidden"
40.
[disabled]="item.disabled"
41.
[iconClass]="getIconClass(item.icon)"
42.
[text]="item.text"
43.
title
=
"{{ item.tooltipText | translate }}"
44.
(click)="item.onClick(item)"
45.
>
46.
</
kendo-toolbar-button
>
47.
<
kendo-toolbar-dropdownbutton
48.
*
ngIf
=
"item.type === 'dropdownbutton' && !item.hidden"
49.
[iconClass]="getIconClass(item.icon)"
50.
[text]="item.text"
51.
[data]="item.data"
52.
title
=
"{{ item.tooltipText | translate }}"
53.
(itemClick)="onItemClick($event, item)"
54.
[textField]="item.textField"
55.
>
56.
</
kendo-toolbar-dropdownbutton
>
57.
<
kendo-toolbar-splitbutton
58.
*
ngIf
=
"item.type === 'splitbutton' && !item.hidden"
59.
[disabled]="item.disabled"
60.
[iconClass]="getIconClass(item.icon)"
61.
[text]="item.text"
62.
[data]="item.data"
63.
title
=
"{{ item.tooltipText | translate }}"
64.
(buttonClick)="item.onClick(item)"
65.
(itemClick)="onItemClick($event, item)"
66.
[textField]="item.textField"
67.
>
68.
</
kendo-toolbar-splitbutton
>
69.
<
kendo-toolbar-separator
70.
*
ngIf
=
"item.type === 'separator' && !item.hidden"
71.
></
kendo-toolbar-separator
>
72.
</
div
>
73.
</
kendo-toolbar
>
74.
</
div
>
75.
</
div
>