@wizishop/angular-components 0.0.121 → 0.0.124
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/wizishop-angular-components.umd.js +18 -2
- package/bundles/wizishop-angular-components.umd.js.map +1 -1
- package/bundles/wizishop-angular-components.umd.min.js +1 -1
- package/bundles/wizishop-angular-components.umd.min.js.map +1 -1
- package/esm2015/lib/components/selects/select/select.component.js +15 -3
- package/fesm2015/wizishop-angular-components.js +14 -2
- package/fesm2015/wizishop-angular-components.js.map +1 -1
- package/lib/components/selects/select/select.component.d.ts +6 -2
- package/package.json +1 -1
- package/wizishop-angular-components-0.0.124.tgz +0 -0
- package/wizishop-angular-components.metadata.json +1 -1
- package/wizishop-angular-components-0.0.121.tgz +0 -0
|
@@ -5,18 +5,25 @@ export class SelectComponent {
|
|
|
5
5
|
constructor(translateService) {
|
|
6
6
|
this.translateService = translateService;
|
|
7
7
|
this.search = false;
|
|
8
|
+
this.searchValue = '';
|
|
9
|
+
this.searchValueChange = new EventEmitter();
|
|
8
10
|
this.type = 'default';
|
|
9
11
|
this.maxWidth = '100%';
|
|
10
12
|
this.disabled = false;
|
|
11
13
|
this.selectValue = new EventEmitter();
|
|
12
14
|
this.clickOnCallToAction = new EventEmitter();
|
|
13
15
|
this.openCategories = false;
|
|
14
|
-
this.searchValue = '';
|
|
15
16
|
this.indexItemSelected = -1;
|
|
16
17
|
// ControlValueAccessor methods
|
|
17
18
|
this.onChange = () => { };
|
|
18
19
|
this.onTouch = () => { };
|
|
19
20
|
}
|
|
21
|
+
set callToAction(callToAction) {
|
|
22
|
+
this._calllToAction = callToAction;
|
|
23
|
+
}
|
|
24
|
+
get callToAction() {
|
|
25
|
+
return this._calllToAction;
|
|
26
|
+
}
|
|
20
27
|
ngOnInit() {
|
|
21
28
|
this.indexItemSelected = this.items.findIndex(item => item.selected);
|
|
22
29
|
}
|
|
@@ -38,6 +45,9 @@ export class SelectComponent {
|
|
|
38
45
|
this.onClose();
|
|
39
46
|
this.clickOnCallToAction.emit(this.callToAction.value);
|
|
40
47
|
}
|
|
48
|
+
onSearcheValueChange() {
|
|
49
|
+
this.searchValueChange.emit(this.searchValue);
|
|
50
|
+
}
|
|
41
51
|
getItemSelected() {
|
|
42
52
|
return this.items[this.indexItemSelected];
|
|
43
53
|
}
|
|
@@ -71,7 +81,7 @@ export class SelectComponent {
|
|
|
71
81
|
SelectComponent.decorators = [
|
|
72
82
|
{ type: Component, args: [{
|
|
73
83
|
selector: 'wac-select',
|
|
74
|
-
template: "<p *ngIf=\"label\" [innerHTML]=\"label\" class=\"wac-select__label\"></p>\n\n<div class=\"wac-select\" wzAutoHide (clickOutside)=\"onClose()\" [ngStyle]=\"{ 'max-width': maxWidth }\" [zIndexToggle]=\"openCategories\">\n\n <div class=\"wac-select__current\" [ngClass]=\"{ 'select-disabled' : disabled }\" (click)=\"!disabled && openCategories = !openCategories\" *ngIf=\"!search\">\n <span *ngIf=\"indexItemSelected !== -1\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n <span [innerHTML]=\"indexItemSelected !== -1 ? items[indexItemSelected].name : placeholder\"></span><span><i class=\"fas fa-chevron-down\"></i></span>\n </div>\n\n <div class=\"wac-select__current wac-select__current--withSearch\" [ngClass]=\"{ 'select-disabled' : disabled, 'open-search': openCategories }\" *ngIf=\"search\">\n <div class=\"wac-select__current__search\" *ngIf=\"openCategories && !disabled\">\n <i class=\"far fa-search\"></i>\n <input #search type=\"text\" [(ngModel)]=\"searchValue\" />\n </div>\n <span (click)=\"openCategories = !openCategories;\" *ngIf=\"items[indexItemSelected]?.icon && !openCategories\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n <span (click)=\"showCategories()\" [innerHTML]=\"items[indexItemSelected]?.name ? items[indexItemSelected].name : placeholder\"></span>\n <span (click)=\"openCategories = !openCategories;\"><i class=\"fas fa-chevron-down\"></i></span>\n </div>\n\n <div class=\"wac-select__content\" *ngIf=\"!disabled\" [ngClass]=\"{ hidden: !openCategories, open: type === 'open' }\" [ngStyle]=\"{ 'max-width': maxWidthItems }\">\n <perfect-scrollbar [config]=\"{ suppressScrollX: true }\" *ngIf=\"items.length\">\n\n <div *ngIf=\"callToAction\" class=\"wac-select__content__cta\">\n <div (click)=\"onClickCallToAction()\">\n <i *ngIf=\"callToAction.icon\" [classList]=\"callToAction.icon\"></i><strong *ngIf=\"callToAction.boldText\">{{ callToAction.boldText }}</strong\n ><span>{{ callToAction?.name }}</span>\n </div>\n </div>\n\n <div\n *ngFor=\"let item of items | selectFilters: searchValue; let index = index;\"\n (click)=\"onClose()\"\n class=\"wac-select__content__item\"\n >\n <div [ngClass]=\"{ selected: item.selected }\" (click)=\"onSelectItem(item.id)\">\n <span class=\"icon\" [innerHTML]=\"item.icon\" *ngIf=\"item.icon\"></span>{{ item.name }}\n </div>\n </div>\n\n </perfect-scrollbar>\n\n <div *ngIf=\"!(items | selectFilters: searchValue)?.length\" class=\"wac-select__content__empty\">\n <span>{{'wac.datatable.noresult' | translate}}</span>\n </div>\n\n </div>\n</div>",
|
|
84
|
+
template: "<p *ngIf=\"label\" [innerHTML]=\"label\" class=\"wac-select__label\"></p>\n\n<div class=\"wac-select\" wzAutoHide (clickOutside)=\"onClose()\" [ngStyle]=\"{ 'max-width': maxWidth }\" [zIndexToggle]=\"openCategories\">\n\n <div class=\"wac-select__current\" [ngClass]=\"{ 'select-disabled' : disabled }\" (click)=\"!disabled && openCategories = !openCategories\" *ngIf=\"!search\">\n <span *ngIf=\"indexItemSelected !== -1\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n <span [innerHTML]=\"indexItemSelected !== -1 ? items[indexItemSelected].name : placeholder\"></span><span><i class=\"fas fa-chevron-down\"></i></span>\n </div>\n\n <div class=\"wac-select__current wac-select__current--withSearch\" [ngClass]=\"{ 'select-disabled' : disabled, 'open-search': openCategories }\" *ngIf=\"search\">\n <div class=\"wac-select__current__search\" *ngIf=\"openCategories && !disabled\">\n <i class=\"far fa-search\"></i>\n <input #search type=\"text\" [(ngModel)]=\"searchValue\" (ngModelChange)=\"onSearcheValueChange()\"/>\n </div>\n <span (click)=\"openCategories = !openCategories;\" *ngIf=\"items[indexItemSelected]?.icon && !openCategories\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n <span (click)=\"showCategories()\" [innerHTML]=\"items[indexItemSelected]?.name ? items[indexItemSelected].name : placeholder\"></span>\n <span (click)=\"openCategories = !openCategories;\"><i class=\"fas fa-chevron-down\"></i></span>\n </div>\n\n <div class=\"wac-select__content\" *ngIf=\"!disabled\" [ngClass]=\"{ hidden: !openCategories, open: type === 'open' }\" [ngStyle]=\"{ 'max-width': maxWidthItems }\">\n <perfect-scrollbar [config]=\"{ suppressScrollX: true }\" *ngIf=\"items.length\">\n\n <div *ngIf=\"callToAction\" class=\"wac-select__content__cta\">\n <div (click)=\"onClickCallToAction()\">\n <i *ngIf=\"callToAction.icon\" [classList]=\"callToAction.icon\"></i><strong *ngIf=\"callToAction.boldText\">{{ callToAction.boldText }}</strong\n ><span>{{ callToAction?.name }}</span>\n </div>\n </div>\n\n <div\n *ngFor=\"let item of items | selectFilters: searchValue; let index = index;\"\n (click)=\"onClose()\"\n class=\"wac-select__content__item\"\n >\n <div [ngClass]=\"{ selected: item.selected }\" (click)=\"onSelectItem(item.id)\">\n <span class=\"icon\" [innerHTML]=\"item.icon\" *ngIf=\"item.icon\"></span>{{ item.name }}\n </div>\n </div>\n\n </perfect-scrollbar>\n\n <div *ngIf=\"!(items | selectFilters: searchValue)?.length\" class=\"wac-select__content__empty\">\n <span>{{'wac.datatable.noresult' | translate}}</span>\n </div>\n\n </div>\n</div>",
|
|
75
85
|
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }]
|
|
76
86
|
},] }
|
|
77
87
|
];
|
|
@@ -84,6 +94,8 @@ SelectComponent.propDecorators = {
|
|
|
84
94
|
label: [{ type: Input }],
|
|
85
95
|
maxWidthItems: [{ type: Input }],
|
|
86
96
|
search: [{ type: Input }],
|
|
97
|
+
searchValue: [{ type: Input }],
|
|
98
|
+
searchValueChange: [{ type: Output }],
|
|
87
99
|
type: [{ type: Input }],
|
|
88
100
|
callToAction: [{ type: Input }],
|
|
89
101
|
maxWidth: [{ type: Input }],
|
|
@@ -92,4 +104,4 @@ SelectComponent.propDecorators = {
|
|
|
92
104
|
clickOnCallToAction: [{ type: Output }],
|
|
93
105
|
searchElement: [{ type: ViewChild, args: ['search',] }]
|
|
94
106
|
};
|
|
95
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
107
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvc2VsZWN0cy9zZWxlY3Qvc2VsZWN0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFjLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFFLFNBQVMsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUdwRyxPQUFPLEVBQUMsZ0JBQWdCLEVBQUMsTUFBTSxxQkFBcUIsQ0FBQztBQUNyRCxPQUFPLEVBQXdCLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFPekUsTUFBTSxPQUFPLGVBQWU7SUFpRDFCLFlBQW9CLGdCQUFrQztRQUFsQyxxQkFBZ0IsR0FBaEIsZ0JBQWdCLENBQWtCO1FBbEN0RCxXQUFNLEdBQUcsS0FBSyxDQUFDO1FBR2YsZ0JBQVcsR0FBVyxFQUFFLENBQUM7UUFFZixzQkFBaUIsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO1FBR3pELFNBQUksR0FBRyxTQUFTLENBQUM7UUFXUixhQUFRLEdBQUcsTUFBTSxDQUFDO1FBRzNCLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFFUCxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7UUFFekMsd0JBQW1CLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztRQUl4RCxtQkFBYyxHQUFHLEtBQUssQ0FBQztRQUV2QixzQkFBaUIsR0FBVyxDQUFDLENBQUMsQ0FBQztRQXFEL0IsK0JBQStCO1FBRS9CLGFBQVEsR0FBcUMsR0FBRyxFQUFFLEdBQUUsQ0FBQyxDQUFDO1FBQ3RELFlBQU8sR0FBUSxHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUE7SUF0RGtDLENBQUM7SUF2QjFELElBQWEsWUFBWSxDQUFDLFlBQTJCO1FBQ25ELElBQUksQ0FBQyxj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QUUsZUFBZSxFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUUsQ0FBQzthQUN2Rjs7O1lBUE8sZ0JBQWdCOzs7b0JBVXJCLEtBQUs7MEJBR0wsS0FBSztvQkFHTCxLQUFLOzRCQUdMLEtBQUs7cUJBR0wsS0FBSzswQkFHTCxLQUFLO2dDQUdMLE1BQU07bUJBRU4sS0FBSzsyQkFJTCxLQUFLO3VCQVFMLEtBQUs7dUJBRUwsS0FBSzswQkFHTCxNQUFNO2tDQUVOLE1BQU07NEJBRU4sU0FBUyxTQUFDLFFBQVEiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgRWxlbWVudFJlZiwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQsIFZpZXdDaGlsZH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDYWxsbFRvQWN0aW9uIH0gZnJvbSAnLi4vY2FsbC10by1hY3Rpb24ubW9kZWwnO1xuaW1wb3J0IHsgU2VsZWN0SXRlbSB9IGZyb20gJy4uL3NlbGVjdC1pdGVtcy5kdG8nO1xuaW1wb3J0IHtUcmFuc2xhdGVTZXJ2aWNlfSBmcm9tICdAbmd4LXRyYW5zbGF0ZS9jb3JlJztcbmltcG9ydCB7IENvbnRyb2xWYWx1ZUFjY2Vzc29yLCBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnd2FjLXNlbGVjdCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9zZWxlY3QuY29tcG9uZW50Lmh0bWwnLFxuICBwcm92aWRlcnM6IFt7IHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLCB1c2VFeGlzdGluZzogU2VsZWN0Q29tcG9uZW50LCBtdWx0aTogdHJ1ZSB9XVxufSlcbmV4cG9ydCBjbGFzcyBTZWxlY3RDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIENvbnRyb2xWYWx1ZUFjY2Vzc29yIHtcbiAgLy8hIFJlZmFjdG8gaW1wcm92ZSBzcm9sbCBvbiBtb2JpbGUsIHNlZSB3aXRoIFBhdWxpbmVcbiAgQElucHV0KClcbiAgaXRlbXM6IFNlbGVjdEl0ZW1bXTtcblxuICBASW5wdXQoKVxuICBwbGFjZWhvbGRlcjogc3RyaW5nO1xuXG4gIEBJbnB1dCgpXG4gIGxhYmVsOiBzdHJpbmc7XG5cbiAgQElucHV0KClcbiAgbWF4V2lkdGhJdGVtczogc3RyaW5nOyAvLyB0b2RvIGltcHJvdnJlIHR5cGUgbGlrZSA6IGV4cG9ydCB0eXBlIENzc1VuaXRzID0gJ2VtJ3wgJ3JlbScgfCAncHgnOyBleHBvcnQgdHlwZSBDc3NVbml0ID0gYCR7bnVtYmVyfSR7Q3NzVW5pdHN9YDtcblxuICBASW5wdXQoKVxuICBzZWFyY2ggPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBzZWFyY2hWYWx1ZTogc3RyaW5nID0gJyc7XG5cbiAgQE91dHB1dCgpIHNlYXJjaFZhbHVlQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XG5cbiAgQElucHV0KClcbiAgdHlwZSA9ICdkZWZhdWx0JztcblxuICBfY2FsbGxUb0FjdGlvbjogQ2FsbGxUb0FjdGlvbjsgLy8gdG9kbyBtYXliZSByZXBsYWNlIGJ5IG5nLWNvbnRlbnQgb3IgYWxsb3cgdGVtcGxhdGUgb3IgY2hpbGQgY29tcG9uZW50IGxpa2UgPHdhYy1jYWxsLXRvLWFjdGlvbj4uLi5cbiAgQElucHV0KCkgc2V0IGNhbGxUb0FjdGlvbihjYWxsVG9BY3Rpb246IENhbGxsVG9BY3Rpb24pIHtcbiAgICB0aGlzLl9jYWxsbFRvQWN0aW9uID0gY2FsbFRvQWN0aW9uO1xuICB9XG5cbiAgZ2V0IGNhbGxUb0FjdGlvbigpOiBDYWxsbFRvQWN0aW9uIHtcbiAgICByZXR1cm4gdGhpcy5fY2FsbGxUb0FjdGlvbjtcbiAgfVxuXG4gIEBJbnB1dCgpIG1heFdpZHRoID0gJzEwMCUnO1xuXG4gIEBJbnB1dCgpXG4gIGRpc2FibGVkID0gZmFsc2U7XG5cbiAgQE91dHB1dCgpIHNlbGVjdFZhbHVlID0gbmV3IEV2ZW50RW1pdHRlcjxudW1iZXI+KCk7XG5cbiAgQE91dHB1dCgpIGNsaWNrT25DYWxsVG9BY3Rpb24gPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcblxuICBAVmlld0NoaWxkKCdzZWFyY2gnKSBzZWFyY2hFbGVtZW50OiBFbGVtZW50UmVmO1xuXG4gIG9wZW5DYXRlZ29yaWVzID0gZmFsc2U7XG5cbiAgaW5kZXhJdGVtU2VsZWN0ZWQ6IG51bWJlciA9IC0xO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgdHJhbnNsYXRlU2VydmljZTogVHJhbnNsYXRlU2VydmljZSkge31cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLmluZGV4SXRlbVNlbGVjdGVkID0gdGhpcy5pdGVtcy5maW5kSW5kZXgoaXRlbSA9PiBpdGVtLnNlbGVjdGVkKTtcbiAgfVxuXG4gIG9uQ2xvc2UoKSB7XG4gICAgdGhpcy5vcGVuQ2F0ZWdvcmllcyA9IGZhbHNlO1xuICB9XG5cbiAgY3VzdG9tVEIoaXRlbTogU2VsZWN0SXRlbSwgaW5kZXg6IG51bWJlcikge1xuICAgIHJldHVybiBgJHtpdGVtLmlkfS0ke2luZGV4fWA7XG4gIH1cblxuICBvblNlbGVjdEl0ZW0oaWQ6IG51bWJlcikge1xuICAgIHRoaXMudW5zZWxlY3RBbGwoKTtcbiAgICB0aGlzLnNldEluZGV4SXRlbVNlbGVjdGVkKGlkKTtcbiAgICBjb25zdCBpdGVtU2VsZWN0ZWQ6IFNlbGVjdEl0ZW0gPSB0aGlzLmdldEl0ZW1TZWxlY3RlZCgpO1xuICAgIGl0ZW1TZWxlY3RlZC5zZWxlY3RlZCA9IHRydWU7XG4gICAgdGhpcy5zZWxlY3RWYWx1ZS5lbWl0KHRoaXMuaW5kZXhJdGVtU2VsZWN0ZWQpO1xuICAgIHRoaXMub25DaGFuZ2UoaXRlbVNlbGVjdGVkKTtcbiAgfVxuXG4gIG9uQ2xpY2tDYWxsVG9BY3Rpb24oKSB7XG4gICAgdGhpcy5vbkNsb3NlKCk7XG4gICAgdGhpcy5jbGlja09uQ2FsbFRvQWN0aW9uLmVtaXQodGhpcy5jYWxsVG9BY3Rpb24udmFsdWUpO1xuICB9XG5cbiAgb25TZWFyY2hlVmFsdWVDaGFuZ2UoKSB7XG4gICAgdGhpcy5zZWFyY2hWYWx1ZUNoYW5nZS5lbWl0KHRoaXMuc2VhcmNoVmFsdWUpO1xuICB9XG5cbiAgcHJpdmF0ZSBnZXRJdGVtU2VsZWN0ZWQoKTogU2VsZWN0SXRlbSB7XG4gICAgcmV0dXJuIHRoaXMuaXRlbXNbdGhpcy5pbmRleEl0ZW1TZWxlY3RlZF07XG4gIH1cblxuICBzaG93Q2F0ZWdvcmllcygpIHtcbiAgICB0aGlzLm9wZW5DYXRlZ29yaWVzID0gdHJ1ZTtcbiAgICBzZXRUaW1lb3V0KCgpID0+IHsgLy8gdGhpcyB3aWxsIG1ha2UgdGhlIGV4ZWN1dGlvbiBhZnRlciB0aGUgYWJvdmUgYm9vbGVhbiBoYXMgY2hhbmdlZFxuICAgICAgdGhpcy5zZWFyY2hFbGVtZW50Lm5hdGl2ZUVsZW1lbnQuZm9jdXMoKTtcbiAgICB9LCAwKTtcbiAgfVxuXG4gIHByaXZhdGUgdW5zZWxlY3RBbGwoKSB7XG4gICAgdGhpcy5pdGVtcy5mb3JFYWNoKGl0ZW0gPT4gaXRlbS5zZWxlY3RlZCA9IGZhbHNlKTtcbiAgfVxuXG4gIHByaXZhdGUgc2V0SW5kZXhJdGVtU2VsZWN0ZWQoaWQ6IG51bWJlcikge1xuICAgIHRoaXMuaW5kZXhJdGVtU2VsZWN0ZWQgPSB0aGlzLml0ZW1zLmZpbmRJbmRleChpdGVtID0+IGl0ZW0uaWQgPT09IGlkKTtcbiAgfVxuXG4gIC8vIENvbnRyb2xWYWx1ZUFjY2Vzc29yIG1ldGhvZHNcblxuICBvbkNoYW5nZTogKHNlbGVjdEl0ZW06IFNlbGVjdEl0ZW0pID0+IHZvaWQgPSAoKSA9PiB7fTtcbiAgb25Ub3VjaDogYW55ID0gKCkgPT4ge31cblxuICB3cml0ZVZhbHVlKHNlbGVjdEl0ZW06IGFueSl7XG4gICAgaWYgKCFzZWxlY3RJdGVtKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIHRoaXMudW5zZWxlY3RBbGwoKTtcbiAgICBzZWxlY3RJdGVtLnNlbGVjdGVkID0gdHJ1ZTtcbiAgICB0aGlzLnNldEluZGV4SXRlbVNlbGVjdGVkKHNlbGVjdEl0ZW0uaWQpO1xuICB9XG5cbiAgcmVnaXN0ZXJPbkNoYW5nZShmbjogYW55KXtcbiAgICB0aGlzLm9uQ2hhbmdlID0gZm47XG4gIH1cbiAgcmVnaXN0ZXJPblRvdWNoZWQoZm46IGFueSl7XG4gICAgdGhpcy5vblRvdWNoID0gZm47XG4gIH1cbn1cbiJdfQ==
|
|
@@ -2642,18 +2642,25 @@ class SelectComponent {
|
|
|
2642
2642
|
constructor(translateService) {
|
|
2643
2643
|
this.translateService = translateService;
|
|
2644
2644
|
this.search = false;
|
|
2645
|
+
this.searchValue = '';
|
|
2646
|
+
this.searchValueChange = new EventEmitter();
|
|
2645
2647
|
this.type = 'default';
|
|
2646
2648
|
this.maxWidth = '100%';
|
|
2647
2649
|
this.disabled = false;
|
|
2648
2650
|
this.selectValue = new EventEmitter();
|
|
2649
2651
|
this.clickOnCallToAction = new EventEmitter();
|
|
2650
2652
|
this.openCategories = false;
|
|
2651
|
-
this.searchValue = '';
|
|
2652
2653
|
this.indexItemSelected = -1;
|
|
2653
2654
|
// ControlValueAccessor methods
|
|
2654
2655
|
this.onChange = () => { };
|
|
2655
2656
|
this.onTouch = () => { };
|
|
2656
2657
|
}
|
|
2658
|
+
set callToAction(callToAction) {
|
|
2659
|
+
this._calllToAction = callToAction;
|
|
2660
|
+
}
|
|
2661
|
+
get callToAction() {
|
|
2662
|
+
return this._calllToAction;
|
|
2663
|
+
}
|
|
2657
2664
|
ngOnInit() {
|
|
2658
2665
|
this.indexItemSelected = this.items.findIndex(item => item.selected);
|
|
2659
2666
|
}
|
|
@@ -2675,6 +2682,9 @@ class SelectComponent {
|
|
|
2675
2682
|
this.onClose();
|
|
2676
2683
|
this.clickOnCallToAction.emit(this.callToAction.value);
|
|
2677
2684
|
}
|
|
2685
|
+
onSearcheValueChange() {
|
|
2686
|
+
this.searchValueChange.emit(this.searchValue);
|
|
2687
|
+
}
|
|
2678
2688
|
getItemSelected() {
|
|
2679
2689
|
return this.items[this.indexItemSelected];
|
|
2680
2690
|
}
|
|
@@ -2708,7 +2718,7 @@ class SelectComponent {
|
|
|
2708
2718
|
SelectComponent.decorators = [
|
|
2709
2719
|
{ type: Component, args: [{
|
|
2710
2720
|
selector: 'wac-select',
|
|
2711
|
-
template: "<p *ngIf=\"label\" [innerHTML]=\"label\" class=\"wac-select__label\"></p>\n\n<div class=\"wac-select\" wzAutoHide (clickOutside)=\"onClose()\" [ngStyle]=\"{ 'max-width': maxWidth }\" [zIndexToggle]=\"openCategories\">\n\n <div class=\"wac-select__current\" [ngClass]=\"{ 'select-disabled' : disabled }\" (click)=\"!disabled && openCategories = !openCategories\" *ngIf=\"!search\">\n <span *ngIf=\"indexItemSelected !== -1\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n <span [innerHTML]=\"indexItemSelected !== -1 ? items[indexItemSelected].name : placeholder\"></span><span><i class=\"fas fa-chevron-down\"></i></span>\n </div>\n\n <div class=\"wac-select__current wac-select__current--withSearch\" [ngClass]=\"{ 'select-disabled' : disabled, 'open-search': openCategories }\" *ngIf=\"search\">\n <div class=\"wac-select__current__search\" *ngIf=\"openCategories && !disabled\">\n <i class=\"far fa-search\"></i>\n <input #search type=\"text\" [(ngModel)]=\"searchValue\" />\n </div>\n <span (click)=\"openCategories = !openCategories;\" *ngIf=\"items[indexItemSelected]?.icon && !openCategories\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n <span (click)=\"showCategories()\" [innerHTML]=\"items[indexItemSelected]?.name ? items[indexItemSelected].name : placeholder\"></span>\n <span (click)=\"openCategories = !openCategories;\"><i class=\"fas fa-chevron-down\"></i></span>\n </div>\n\n <div class=\"wac-select__content\" *ngIf=\"!disabled\" [ngClass]=\"{ hidden: !openCategories, open: type === 'open' }\" [ngStyle]=\"{ 'max-width': maxWidthItems }\">\n <perfect-scrollbar [config]=\"{ suppressScrollX: true }\" *ngIf=\"items.length\">\n\n <div *ngIf=\"callToAction\" class=\"wac-select__content__cta\">\n <div (click)=\"onClickCallToAction()\">\n <i *ngIf=\"callToAction.icon\" [classList]=\"callToAction.icon\"></i><strong *ngIf=\"callToAction.boldText\">{{ callToAction.boldText }}</strong\n ><span>{{ callToAction?.name }}</span>\n </div>\n </div>\n\n <div\n *ngFor=\"let item of items | selectFilters: searchValue; let index = index;\"\n (click)=\"onClose()\"\n class=\"wac-select__content__item\"\n >\n <div [ngClass]=\"{ selected: item.selected }\" (click)=\"onSelectItem(item.id)\">\n <span class=\"icon\" [innerHTML]=\"item.icon\" *ngIf=\"item.icon\"></span>{{ item.name }}\n </div>\n </div>\n\n </perfect-scrollbar>\n\n <div *ngIf=\"!(items | selectFilters: searchValue)?.length\" class=\"wac-select__content__empty\">\n <span>{{'wac.datatable.noresult' | translate}}</span>\n </div>\n\n </div>\n</div>",
|
|
2721
|
+
template: "<p *ngIf=\"label\" [innerHTML]=\"label\" class=\"wac-select__label\"></p>\n\n<div class=\"wac-select\" wzAutoHide (clickOutside)=\"onClose()\" [ngStyle]=\"{ 'max-width': maxWidth }\" [zIndexToggle]=\"openCategories\">\n\n <div class=\"wac-select__current\" [ngClass]=\"{ 'select-disabled' : disabled }\" (click)=\"!disabled && openCategories = !openCategories\" *ngIf=\"!search\">\n <span *ngIf=\"indexItemSelected !== -1\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n <span [innerHTML]=\"indexItemSelected !== -1 ? items[indexItemSelected].name : placeholder\"></span><span><i class=\"fas fa-chevron-down\"></i></span>\n </div>\n\n <div class=\"wac-select__current wac-select__current--withSearch\" [ngClass]=\"{ 'select-disabled' : disabled, 'open-search': openCategories }\" *ngIf=\"search\">\n <div class=\"wac-select__current__search\" *ngIf=\"openCategories && !disabled\">\n <i class=\"far fa-search\"></i>\n <input #search type=\"text\" [(ngModel)]=\"searchValue\" (ngModelChange)=\"onSearcheValueChange()\"/>\n </div>\n <span (click)=\"openCategories = !openCategories;\" *ngIf=\"items[indexItemSelected]?.icon && !openCategories\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n <span (click)=\"showCategories()\" [innerHTML]=\"items[indexItemSelected]?.name ? items[indexItemSelected].name : placeholder\"></span>\n <span (click)=\"openCategories = !openCategories;\"><i class=\"fas fa-chevron-down\"></i></span>\n </div>\n\n <div class=\"wac-select__content\" *ngIf=\"!disabled\" [ngClass]=\"{ hidden: !openCategories, open: type === 'open' }\" [ngStyle]=\"{ 'max-width': maxWidthItems }\">\n <perfect-scrollbar [config]=\"{ suppressScrollX: true }\" *ngIf=\"items.length\">\n\n <div *ngIf=\"callToAction\" class=\"wac-select__content__cta\">\n <div (click)=\"onClickCallToAction()\">\n <i *ngIf=\"callToAction.icon\" [classList]=\"callToAction.icon\"></i><strong *ngIf=\"callToAction.boldText\">{{ callToAction.boldText }}</strong\n ><span>{{ callToAction?.name }}</span>\n </div>\n </div>\n\n <div\n *ngFor=\"let item of items | selectFilters: searchValue; let index = index;\"\n (click)=\"onClose()\"\n class=\"wac-select__content__item\"\n >\n <div [ngClass]=\"{ selected: item.selected }\" (click)=\"onSelectItem(item.id)\">\n <span class=\"icon\" [innerHTML]=\"item.icon\" *ngIf=\"item.icon\"></span>{{ item.name }}\n </div>\n </div>\n\n </perfect-scrollbar>\n\n <div *ngIf=\"!(items | selectFilters: searchValue)?.length\" class=\"wac-select__content__empty\">\n <span>{{'wac.datatable.noresult' | translate}}</span>\n </div>\n\n </div>\n</div>",
|
|
2712
2722
|
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }]
|
|
2713
2723
|
},] }
|
|
2714
2724
|
];
|
|
@@ -2721,6 +2731,8 @@ SelectComponent.propDecorators = {
|
|
|
2721
2731
|
label: [{ type: Input }],
|
|
2722
2732
|
maxWidthItems: [{ type: Input }],
|
|
2723
2733
|
search: [{ type: Input }],
|
|
2734
|
+
searchValue: [{ type: Input }],
|
|
2735
|
+
searchValueChange: [{ type: Output }],
|
|
2724
2736
|
type: [{ type: Input }],
|
|
2725
2737
|
callToAction: [{ type: Input }],
|
|
2726
2738
|
maxWidth: [{ type: Input }],
|