@colijnit/corecomponents_v12 254.1.6 → 254.1.7
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/colijnit-corecomponents_v12.umd.js +6 -2
- package/bundles/colijnit-corecomponents_v12.umd.js.map +1 -1
- package/colijnit-corecomponents_v12.metadata.json +1 -1
- package/esm2015/lib/components/list-of-icons/list-of-icons.component.js +9 -6
- package/esm2015/lib/model/icon-list-item.js +2 -0
- package/fesm2015/colijnit-corecomponents_v12.js +7 -4
- package/fesm2015/colijnit-corecomponents_v12.js.map +1 -1
- package/lib/components/list-of-icons/list-of-icons.component.d.ts +8 -5
- package/lib/components/list-of-icons/style/_layout.scss +54 -43
- package/lib/components/list-of-icons/style/_material-definition.scss +0 -2
- package/lib/components/list-of-icons/style/_theme.scss +0 -5
- package/lib/components/list-of-icons/style/material.scss +0 -3
- package/lib/model/icon-list-item.d.ts +6 -0
- package/package.json +1 -1
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
import { Component, HostBinding, Input, ViewEncapsulation } from "@angular/core";
|
|
1
|
+
import { Component, EventEmitter, HostBinding, Input, Output, ViewEncapsulation } from "@angular/core";
|
|
2
2
|
import { CoreComponentsIcon } from "../../core/enum/core-components-icon.enum";
|
|
3
3
|
import { IconCacheService } from "../icon/icon-cache.service";
|
|
4
4
|
export class ListOfIconsComponent {
|
|
5
5
|
constructor(icons) {
|
|
6
6
|
this.icons = icons;
|
|
7
|
+
this.iconSize = 30;
|
|
8
|
+
this.itemSelected = new EventEmitter();
|
|
7
9
|
this.Icon = CoreComponentsIcon;
|
|
8
10
|
this.showMenu = false;
|
|
9
11
|
this._collection = [];
|
|
@@ -18,7 +20,6 @@ export class ListOfIconsComponent {
|
|
|
18
20
|
return true;
|
|
19
21
|
}
|
|
20
22
|
ngOnInit() {
|
|
21
|
-
console.log(this.collection);
|
|
22
23
|
this.activeItem = this.collection[0];
|
|
23
24
|
}
|
|
24
25
|
toggleMenu() {
|
|
@@ -27,6 +28,7 @@ export class ListOfIconsComponent {
|
|
|
27
28
|
selectItem(item) {
|
|
28
29
|
this.activeItem = item;
|
|
29
30
|
this.showMenu = false;
|
|
31
|
+
this.itemSelected.emit(this.activeItem);
|
|
30
32
|
}
|
|
31
33
|
}
|
|
32
34
|
ListOfIconsComponent.decorators = [
|
|
@@ -34,13 +36,12 @@ ListOfIconsComponent.decorators = [
|
|
|
34
36
|
selector: 'co-list-of-icons',
|
|
35
37
|
template: `
|
|
36
38
|
<div class="icon-item active" [class.menu-opened]="showMenu" (click)="toggleMenu()">
|
|
37
|
-
<co-icon [iconData]="activeItem.icon"></co-icon>
|
|
38
|
-
<div class="label">{{ activeItem.label }}</div>
|
|
39
|
+
<co-icon [iconData]="activeItem.icon" [style.width.px]="iconSize" [style.height.px]="iconSize"></co-icon>
|
|
39
40
|
<co-icon class="drop-arrow" [iconData]="icons.getIcon(Icon.ArrowPointDown)"></co-icon>
|
|
40
41
|
</div>
|
|
41
42
|
<div class="dropdown-menu" *ngIf="showMenu">
|
|
42
43
|
<div class="icon-item" *ngFor="let item of collection" (click)="selectItem(item)" [class.active]="item === activeItem">
|
|
43
|
-
<co-icon [iconData]="item.icon"></co-icon>
|
|
44
|
+
<co-icon [iconData]="item.icon" [style.width.px]="iconSize" [style.height.px]="iconSize"></co-icon>
|
|
44
45
|
<div class="label">{{ item.label }}</div>
|
|
45
46
|
</div>
|
|
46
47
|
</div>
|
|
@@ -53,6 +54,8 @@ ListOfIconsComponent.ctorParameters = () => [
|
|
|
53
54
|
];
|
|
54
55
|
ListOfIconsComponent.propDecorators = {
|
|
55
56
|
collection: [{ type: Input }],
|
|
57
|
+
iconSize: [{ type: Input }],
|
|
58
|
+
itemSelected: [{ type: Output }],
|
|
56
59
|
showClass: [{ type: HostBinding, args: ['class.co-list-of-icons',] }]
|
|
57
60
|
};
|
|
58
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
61
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlzdC1vZi1pY29ucy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb3JlY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvbGlzdC1vZi1pY29ucy9saXN0LW9mLWljb25zLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLFlBQVksRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxpQkFBaUIsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUM3RyxPQUFPLEVBQUMsa0JBQWtCLEVBQUMsTUFBTSwyQ0FBMkMsQ0FBQztBQUM3RSxPQUFPLEVBQUMsZ0JBQWdCLEVBQUMsTUFBTSw0QkFBNEIsQ0FBQztBQW1CNUQsTUFBTSxPQUFPLG9CQUFvQjtJQTBCL0IsWUFBbUIsS0FBdUI7UUFBdkIsVUFBSyxHQUFMLEtBQUssQ0FBa0I7UUFmbkMsYUFBUSxHQUFXLEVBQUUsQ0FBQztRQUd0QixpQkFBWSxHQUErQixJQUFJLFlBQVksRUFBZ0IsQ0FBQztRQU9uRSxTQUFJLEdBQVEsa0JBQWtCLENBQUM7UUFDeEMsYUFBUSxHQUFZLEtBQUssQ0FBQztRQUV6QixnQkFBVyxHQUFtQixFQUFFLENBQUM7SUFHekMsQ0FBQztJQTFCRCxJQUNXLFVBQVUsQ0FBQyxLQUFxQjtRQUN6QyxJQUFJLENBQUMsV0FBVyxHQUFHLEtBQUssSUFBSSxFQUFFLENBQUM7SUFDakMsQ0FBQztJQUVELElBQVcsVUFBVTtRQUNuQixPQUFPLElBQUksQ0FBQyxXQUFXLENBQUM7SUFDMUIsQ0FBQztJQVNNLFNBQVM7UUFDZCxPQUFPLElBQUksQ0FBQztJQUNkLENBQUM7SUFVRCxRQUFRO1FBQ04sSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxDQUFDO0lBQ3ZDLENBQUM7SUFFTSxVQUFVO1FBQ2YsSUFBSSxDQUFDLFFBQVEsR0FBRyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUM7SUFDakMsQ0FBQztJQUVNLFVBQVUsQ0FBQyxJQUFrQjtRQUNsQyxJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQztRQUN2QixJQUFJLENBQUMsUUFBUSxHQUFHLEtBQUssQ0FBQztRQUN0QixJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUM7SUFDMUMsQ0FBQzs7O1lBekRGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsa0JBQWtCO2dCQUM1QixRQUFRLEVBQUU7Ozs7Ozs7Ozs7O0dBV1Q7Z0JBQ0QsYUFBYSxFQUFFLGlCQUFpQixDQUFDLElBQUk7YUFDdEM7OztZQWxCTyxnQkFBZ0I7Ozt5QkFvQnJCLEtBQUs7dUJBU0wsS0FBSzsyQkFHTCxNQUFNO3dCQUdOLFdBQVcsU0FBQyx3QkFBd0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBIb3N0QmluZGluZywgSW5wdXQsIE9uSW5pdCwgT3V0cHV0LCBWaWV3RW5jYXBzdWxhdGlvbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcclxuaW1wb3J0IHtDb3JlQ29tcG9uZW50c0ljb259IGZyb20gXCIuLi8uLi9jb3JlL2VudW0vY29yZS1jb21wb25lbnRzLWljb24uZW51bVwiO1xyXG5pbXBvcnQge0ljb25DYWNoZVNlcnZpY2V9IGZyb20gXCIuLi9pY29uL2ljb24tY2FjaGUuc2VydmljZVwiO1xyXG5pbXBvcnQge0ljb25MaXN0SXRlbX0gZnJvbSBcIi4uLy4uL21vZGVsL2ljb24tbGlzdC1pdGVtXCI7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2NvLWxpc3Qtb2YtaWNvbnMnLFxyXG4gIHRlbXBsYXRlOiBgXHJcbiAgICA8ZGl2IGNsYXNzPVwiaWNvbi1pdGVtIGFjdGl2ZVwiIFtjbGFzcy5tZW51LW9wZW5lZF09XCJzaG93TWVudVwiIChjbGljayk9XCJ0b2dnbGVNZW51KClcIj5cclxuICAgICAgPGNvLWljb24gW2ljb25EYXRhXT1cImFjdGl2ZUl0ZW0uaWNvblwiIFtzdHlsZS53aWR0aC5weF09XCJpY29uU2l6ZVwiIFtzdHlsZS5oZWlnaHQucHhdPVwiaWNvblNpemVcIj48L2NvLWljb24+XHJcbiAgICAgIDxjby1pY29uIGNsYXNzPVwiZHJvcC1hcnJvd1wiIFtpY29uRGF0YV09XCJpY29ucy5nZXRJY29uKEljb24uQXJyb3dQb2ludERvd24pXCI+PC9jby1pY29uPlxyXG4gICAgPC9kaXY+XHJcbiAgICA8ZGl2IGNsYXNzPVwiZHJvcGRvd24tbWVudVwiICpuZ0lmPVwic2hvd01lbnVcIj5cclxuICAgICAgPGRpdiBjbGFzcz1cImljb24taXRlbVwiICpuZ0Zvcj1cImxldCBpdGVtIG9mIGNvbGxlY3Rpb25cIiAoY2xpY2spPVwic2VsZWN0SXRlbShpdGVtKVwiIFtjbGFzcy5hY3RpdmVdPVwiaXRlbSA9PT0gYWN0aXZlSXRlbVwiPlxyXG4gICAgICAgIDxjby1pY29uIFtpY29uRGF0YV09XCJpdGVtLmljb25cIiBbc3R5bGUud2lkdGgucHhdPVwiaWNvblNpemVcIiBbc3R5bGUuaGVpZ2h0LnB4XT1cImljb25TaXplXCI+PC9jby1pY29uPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJsYWJlbFwiPnt7IGl0ZW0ubGFiZWwgfX08L2Rpdj5cclxuICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj5cclxuICBgLFxyXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBMaXN0T2ZJY29uc0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgQElucHV0KClcclxuICBwdWJsaWMgc2V0IGNvbGxlY3Rpb24odmFsdWU6IEljb25MaXN0SXRlbVtdKSB7XHJcbiAgICB0aGlzLl9jb2xsZWN0aW9uID0gdmFsdWUgfHwgW107XHJcbiAgfVxyXG5cclxuICBwdWJsaWMgZ2V0IGNvbGxlY3Rpb24oKTogSWNvbkxpc3RJdGVtW10ge1xyXG4gICAgcmV0dXJuIHRoaXMuX2NvbGxlY3Rpb247XHJcbiAgfVxyXG5cclxuICBASW5wdXQoKVxyXG4gIHB1YmxpYyBpY29uU2l6ZTogbnVtYmVyID0gMzA7XHJcblxyXG4gIEBPdXRwdXQoKVxyXG4gIHB1YmxpYyBpdGVtU2VsZWN0ZWQ6IEV2ZW50RW1pdHRlcjxJY29uTGlzdEl0ZW0+ID0gbmV3IEV2ZW50RW1pdHRlcjxJY29uTGlzdEl0ZW0+KCk7XHJcblxyXG4gIEBIb3N0QmluZGluZygnY2xhc3MuY28tbGlzdC1vZi1pY29ucycpXHJcbiAgcHVibGljIHNob3dDbGFzcygpIHtcclxuICAgIHJldHVybiB0cnVlO1xyXG4gIH1cclxuXHJcbiAgcHVibGljIHJlYWRvbmx5IEljb246IGFueSA9IENvcmVDb21wb25lbnRzSWNvbjtcclxuICBwdWJsaWMgc2hvd01lbnU6IGJvb2xlYW4gPSBmYWxzZTtcclxuICBwdWJsaWMgYWN0aXZlSXRlbTogSWNvbkxpc3RJdGVtO1xyXG4gIHByaXZhdGUgX2NvbGxlY3Rpb246IEljb25MaXN0SXRlbVtdID0gW107XHJcblxyXG4gIGNvbnN0cnVjdG9yKHB1YmxpYyBpY29uczogSWNvbkNhY2hlU2VydmljZSkge1xyXG4gIH1cclxuXHJcbiAgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgICB0aGlzLmFjdGl2ZUl0ZW0gPSB0aGlzLmNvbGxlY3Rpb25bMF07XHJcbiAgfVxyXG5cclxuICBwdWJsaWMgdG9nZ2xlTWVudSgpOiB2b2lkIHtcclxuICAgIHRoaXMuc2hvd01lbnUgPSAhdGhpcy5zaG93TWVudTtcclxuICB9XHJcblxyXG4gIHB1YmxpYyBzZWxlY3RJdGVtKGl0ZW06IEljb25MaXN0SXRlbSk6IHZvaWQge1xyXG4gICAgdGhpcy5hY3RpdmVJdGVtID0gaXRlbTtcclxuICAgIHRoaXMuc2hvd01lbnUgPSBmYWxzZTtcclxuICAgIHRoaXMuaXRlbVNlbGVjdGVkLmVtaXQodGhpcy5hY3RpdmVJdGVtKTtcclxuICB9XHJcbn1cclxuIl19
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export {};
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvbi1saXN0LWl0ZW0uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb3JlY29tcG9uZW50cy9zcmMvbGliL21vZGVsL2ljb24tbGlzdC1pdGVtLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1NhZmVIdG1sfSBmcm9tIFwiQGFuZ3VsYXIvcGxhdGZvcm0tYnJvd3NlclwiO1xyXG5cclxuZXhwb3J0IGludGVyZmFjZSBJY29uTGlzdEl0ZW0ge1xyXG4gIGlkPzogbnVtYmVyO1xyXG4gIGljb246IFNhZmVIdG1sO1xyXG4gIGxhYmVsOiBzdHJpbmc7XHJcbn1cclxuIl19
|
|
@@ -11307,6 +11307,8 @@ ListOfValuesModule.decorators = [
|
|
|
11307
11307
|
class ListOfIconsComponent {
|
|
11308
11308
|
constructor(icons) {
|
|
11309
11309
|
this.icons = icons;
|
|
11310
|
+
this.iconSize = 30;
|
|
11311
|
+
this.itemSelected = new EventEmitter();
|
|
11310
11312
|
this.Icon = CoreComponentsIcon;
|
|
11311
11313
|
this.showMenu = false;
|
|
11312
11314
|
this._collection = [];
|
|
@@ -11321,7 +11323,6 @@ class ListOfIconsComponent {
|
|
|
11321
11323
|
return true;
|
|
11322
11324
|
}
|
|
11323
11325
|
ngOnInit() {
|
|
11324
|
-
console.log(this.collection);
|
|
11325
11326
|
this.activeItem = this.collection[0];
|
|
11326
11327
|
}
|
|
11327
11328
|
toggleMenu() {
|
|
@@ -11330,6 +11331,7 @@ class ListOfIconsComponent {
|
|
|
11330
11331
|
selectItem(item) {
|
|
11331
11332
|
this.activeItem = item;
|
|
11332
11333
|
this.showMenu = false;
|
|
11334
|
+
this.itemSelected.emit(this.activeItem);
|
|
11333
11335
|
}
|
|
11334
11336
|
}
|
|
11335
11337
|
ListOfIconsComponent.decorators = [
|
|
@@ -11337,13 +11339,12 @@ ListOfIconsComponent.decorators = [
|
|
|
11337
11339
|
selector: 'co-list-of-icons',
|
|
11338
11340
|
template: `
|
|
11339
11341
|
<div class="icon-item active" [class.menu-opened]="showMenu" (click)="toggleMenu()">
|
|
11340
|
-
<co-icon [iconData]="activeItem.icon"></co-icon>
|
|
11341
|
-
<div class="label">{{ activeItem.label }}</div>
|
|
11342
|
+
<co-icon [iconData]="activeItem.icon" [style.width.px]="iconSize" [style.height.px]="iconSize"></co-icon>
|
|
11342
11343
|
<co-icon class="drop-arrow" [iconData]="icons.getIcon(Icon.ArrowPointDown)"></co-icon>
|
|
11343
11344
|
</div>
|
|
11344
11345
|
<div class="dropdown-menu" *ngIf="showMenu">
|
|
11345
11346
|
<div class="icon-item" *ngFor="let item of collection" (click)="selectItem(item)" [class.active]="item === activeItem">
|
|
11346
|
-
<co-icon [iconData]="item.icon"></co-icon>
|
|
11347
|
+
<co-icon [iconData]="item.icon" [style.width.px]="iconSize" [style.height.px]="iconSize"></co-icon>
|
|
11347
11348
|
<div class="label">{{ item.label }}</div>
|
|
11348
11349
|
</div>
|
|
11349
11350
|
</div>
|
|
@@ -11356,6 +11357,8 @@ ListOfIconsComponent.ctorParameters = () => [
|
|
|
11356
11357
|
];
|
|
11357
11358
|
ListOfIconsComponent.propDecorators = {
|
|
11358
11359
|
collection: [{ type: Input }],
|
|
11360
|
+
iconSize: [{ type: Input }],
|
|
11361
|
+
itemSelected: [{ type: Output }],
|
|
11359
11362
|
showClass: [{ type: HostBinding, args: ['class.co-list-of-icons',] }]
|
|
11360
11363
|
};
|
|
11361
11364
|
|