@wizishop/angular-components 0.0.121 → 0.0.122
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 +8 -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 +9 -3
- package/fesm2015/wizishop-angular-components.js +8 -2
- package/fesm2015/wizishop-angular-components.js.map +1 -1
- package/lib/components/selects/select/select.component.d.ts +3 -1
- package/package.json +1 -1
- package/wizishop-angular-components-0.0.122.tgz +0 -0
- package/wizishop-angular-components.metadata.json +1 -1
- package/wizishop-angular-components-0.0.121.tgz +0 -0
|
@@ -5,13 +5,14 @@ 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 = () => { };
|
|
@@ -38,6 +39,9 @@ export class SelectComponent {
|
|
|
38
39
|
this.onClose();
|
|
39
40
|
this.clickOnCallToAction.emit(this.callToAction.value);
|
|
40
41
|
}
|
|
42
|
+
onSearcheValueChange() {
|
|
43
|
+
this.searchValueChange.emit(this.searchValue);
|
|
44
|
+
}
|
|
41
45
|
getItemSelected() {
|
|
42
46
|
return this.items[this.indexItemSelected];
|
|
43
47
|
}
|
|
@@ -71,7 +75,7 @@ export class SelectComponent {
|
|
|
71
75
|
SelectComponent.decorators = [
|
|
72
76
|
{ type: Component, args: [{
|
|
73
77
|
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>",
|
|
78
|
+
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
79
|
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }]
|
|
76
80
|
},] }
|
|
77
81
|
];
|
|
@@ -84,6 +88,8 @@ SelectComponent.propDecorators = {
|
|
|
84
88
|
label: [{ type: Input }],
|
|
85
89
|
maxWidthItems: [{ type: Input }],
|
|
86
90
|
search: [{ type: Input }],
|
|
91
|
+
searchValue: [{ type: Input }],
|
|
92
|
+
searchValueChange: [{ type: Output }],
|
|
87
93
|
type: [{ type: Input }],
|
|
88
94
|
callToAction: [{ type: Input }],
|
|
89
95
|
maxWidth: [{ type: Input }],
|
|
@@ -92,4 +98,4 @@ SelectComponent.propDecorators = {
|
|
|
92
98
|
clickOnCallToAction: [{ type: Output }],
|
|
93
99
|
searchElement: [{ type: ViewChild, args: ['search',] }]
|
|
94
100
|
};
|
|
95
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
101
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvc2VsZWN0cy9zZWxlY3Qvc2VsZWN0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFjLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFFLFNBQVMsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUdwRyxPQUFPLEVBQUMsZ0JBQWdCLEVBQUMsTUFBTSxxQkFBcUIsQ0FBQztBQUNyRCxPQUFPLEVBQXdCLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFPekUsTUFBTSxPQUFPLGVBQWU7SUEyQzFCLFlBQW9CLGdCQUFrQztRQUFsQyxxQkFBZ0IsR0FBaEIsZ0JBQWdCLENBQWtCO1FBNUJ0RCxXQUFNLEdBQUcsS0FBSyxDQUFDO1FBR2YsZ0JBQVcsR0FBRyxFQUFFLENBQUM7UUFFUCxzQkFBaUIsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO1FBR3pELFNBQUksR0FBRyxTQUFTLENBQUM7UUFLUixhQUFRLEdBQUcsTUFBTSxDQUFDO1FBRzNCLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFFUCxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7UUFFekMsd0JBQW1CLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztRQUl4RCxtQkFBYyxHQUFHLEtBQUssQ0FBQztRQUV2QixzQkFBaUIsR0FBVyxDQUFDLENBQUMsQ0FBQztRQXFEL0IsK0JBQStCO1FBRS9CLGFBQVEsR0FBcUMsR0FBRyxFQUFFLEdBQUUsQ0FBQyxDQUFDO1FBQ3RELFlBQU8sR0FBUSxHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUE7SUF0RGtDLENBQUM7SUFFMUQsUUFBUTtRQUNOLElBQUksQ0FBQyxpQkFBaUIsR0FBRyxJQUFJLENB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TCxNQUFNO21CQUVOLEtBQUs7MkJBR0wsS0FBSzt1QkFHTCxLQUFLO3VCQUVMLEtBQUs7MEJBR0wsTUFBTTtrQ0FFTixNQUFNOzRCQUVOLFNBQVMsU0FBQyxRQUFRIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0LCBWaWV3Q2hpbGR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ2FsbGxUb0FjdGlvbiB9IGZyb20gJy4uL2NhbGwtdG8tYWN0aW9uLm1vZGVsJztcbmltcG9ydCB7IFNlbGVjdEl0ZW0gfSBmcm9tICcuLi9zZWxlY3QtaXRlbXMuZHRvJztcbmltcG9ydCB7VHJhbnNsYXRlU2VydmljZX0gZnJvbSAnQG5neC10cmFuc2xhdGUvY29yZSc7XG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3dhYy1zZWxlY3QnLFxuICB0ZW1wbGF0ZVVybDogJy4vc2VsZWN0LmNvbXBvbmVudC5odG1sJyxcbiAgcHJvdmlkZXJzOiBbeyBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUiwgdXNlRXhpc3Rpbmc6IFNlbGVjdENvbXBvbmVudCwgbXVsdGk6IHRydWUgfV1cbn0pXG5leHBvcnQgY2xhc3MgU2VsZWN0Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBDb250cm9sVmFsdWVBY2Nlc3NvciB7XG4gIC8vISBSZWZhY3RvIGltcHJvdmUgc3JvbGwgb24gbW9iaWxlLCBzZWUgd2l0aCBQYXVsaW5lXG4gIEBJbnB1dCgpXG4gIGl0ZW1zOiBTZWxlY3RJdGVtW107XG5cbiAgQElucHV0KClcbiAgcGxhY2Vob2xkZXI6IHN0cmluZztcblxuICBASW5wdXQoKVxuICBsYWJlbDogc3RyaW5nO1xuXG4gIEBJbnB1dCgpXG4gIG1heFdpZHRoSXRlbXM6IHN0cmluZzsgLy8gdG9kbyBpbXByb3ZyZSB0eXBlIGxpa2UgOiBleHBvcnQgdHlwZSBDc3NVbml0cyA9ICdlbSd8ICdyZW0nIHwgJ3B4JzsgZXhwb3J0IHR5cGUgQ3NzVW5pdCA9IGAke251bWJlcn0ke0Nzc1VuaXRzfWA7XG5cbiAgQElucHV0KClcbiAgc2VhcmNoID0gZmFsc2U7XG5cbiAgQElucHV0KClcbiAgc2VhcmNoVmFsdWUgPSAnJztcblxuICBAT3V0cHV0KCkgc2VhcmNoVmFsdWVDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcblxuICBASW5wdXQoKVxuICB0eXBlID0gJ2RlZmF1bHQnO1xuXG4gIEBJbnB1dCgpXG4gIGNhbGxUb0FjdGlvbjogQ2FsbGxUb0FjdGlvbjsgLy8gdG9kbyBtYXliZSByZXBsYWNlIGJ5IG5nLWNvbnRlbnQgb3IgYWxsb3cgdGVtcGxhdGUgb3IgY2hpbGQgdGVtcGxhdGUuLi5cblxuICBASW5wdXQoKSBtYXhXaWR0aCA9ICcxMDAlJztcblxuICBASW5wdXQoKVxuICBkaXNhYmxlZCA9IGZhbHNlO1xuXG4gIEBPdXRwdXQoKSBzZWxlY3RWYWx1ZSA9IG5ldyBFdmVudEVtaXR0ZXI8bnVtYmVyPigpO1xuXG4gIEBPdXRwdXQoKSBjbGlja09uQ2FsbFRvQWN0aW9uID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG5cbiAgQFZpZXdDaGlsZCgnc2VhcmNoJykgc2VhcmNoRWxlbWVudDogRWxlbWVudFJlZjtcblxuICBvcGVuQ2F0ZWdvcmllcyA9IGZhbHNlO1xuXG4gIGluZGV4SXRlbVNlbGVjdGVkOiBudW1iZXIgPSAtMTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHRyYW5zbGF0ZVNlcnZpY2U6IFRyYW5zbGF0ZVNlcnZpY2UpIHt9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5pbmRleEl0ZW1TZWxlY3RlZCA9IHRoaXMuaXRlbXMuZmluZEluZGV4KGl0ZW0gPT4gaXRlbS5zZWxlY3RlZCk7XG4gIH1cblxuICBvbkNsb3NlKCkge1xuICAgIHRoaXMub3BlbkNhdGVnb3JpZXMgPSBmYWxzZTtcbiAgfVxuXG4gIGN1c3RvbVRCKGl0ZW06IFNlbGVjdEl0ZW0sIGluZGV4OiBudW1iZXIpIHtcbiAgICByZXR1cm4gYCR7aXRlbS5pZH0tJHtpbmRleH1gO1xuICB9XG5cbiAgb25TZWxlY3RJdGVtKGlkOiBudW1iZXIpIHtcbiAgICB0aGlzLnVuc2VsZWN0QWxsKCk7XG4gICAgdGhpcy5zZXRJbmRleEl0ZW1TZWxlY3RlZChpZCk7XG4gICAgY29uc3QgaXRlbVNlbGVjdGVkOiBTZWxlY3RJdGVtID0gdGhpcy5nZXRJdGVtU2VsZWN0ZWQoKTtcbiAgICBpdGVtU2VsZWN0ZWQuc2VsZWN0ZWQgPSB0cnVlO1xuICAgIHRoaXMuc2VsZWN0VmFsdWUuZW1pdCh0aGlzLmluZGV4SXRlbVNlbGVjdGVkKTtcbiAgICB0aGlzLm9uQ2hhbmdlKGl0ZW1TZWxlY3RlZCk7XG4gIH1cblxuICBvbkNsaWNrQ2FsbFRvQWN0aW9uKCkge1xuICAgIHRoaXMub25DbG9zZSgpO1xuICAgIHRoaXMuY2xpY2tPbkNhbGxUb0FjdGlvbi5lbWl0KHRoaXMuY2FsbFRvQWN0aW9uLnZhbHVlKTtcbiAgfVxuXG4gIG9uU2VhcmNoZVZhbHVlQ2hhbmdlKCkge1xuICAgIHRoaXMuc2VhcmNoVmFsdWVDaGFuZ2UuZW1pdCh0aGlzLnNlYXJjaFZhbHVlKTtcbiAgfVxuXG4gIHByaXZhdGUgZ2V0SXRlbVNlbGVjdGVkKCk6IFNlbGVjdEl0ZW0ge1xuICAgIHJldHVybiB0aGlzLml0ZW1zW3RoaXMuaW5kZXhJdGVtU2VsZWN0ZWRdO1xuICB9XG5cbiAgc2hvd0NhdGVnb3JpZXMoKSB7XG4gICAgdGhpcy5vcGVuQ2F0ZWdvcmllcyA9IHRydWU7XG4gICAgc2V0VGltZW91dCgoKSA9PiB7IC8vIHRoaXMgd2lsbCBtYWtlIHRoZSBleGVjdXRpb24gYWZ0ZXIgdGhlIGFib3ZlIGJvb2xlYW4gaGFzIGNoYW5nZWRcbiAgICAgIHRoaXMuc2VhcmNoRWxlbWVudC5uYXRpdmVFbGVtZW50LmZvY3VzKCk7XG4gICAgfSwgMCk7XG4gIH1cblxuICBwcml2YXRlIHVuc2VsZWN0QWxsKCkge1xuICAgIHRoaXMuaXRlbXMuZm9yRWFjaChpdGVtID0+IGl0ZW0uc2VsZWN0ZWQgPSBmYWxzZSk7XG4gIH1cblxuICBwcml2YXRlIHNldEluZGV4SXRlbVNlbGVjdGVkKGlkOiBudW1iZXIpIHtcbiAgICB0aGlzLmluZGV4SXRlbVNlbGVjdGVkID0gdGhpcy5pdGVtcy5maW5kSW5kZXgoaXRlbSA9PiBpdGVtLmlkID09PSBpZCk7XG4gIH1cblxuICAvLyBDb250cm9sVmFsdWVBY2Nlc3NvciBtZXRob2RzXG5cbiAgb25DaGFuZ2U6IChzZWxlY3RJdGVtOiBTZWxlY3RJdGVtKSA9PiB2b2lkID0gKCkgPT4ge307XG4gIG9uVG91Y2g6IGFueSA9ICgpID0+IHt9XG5cbiAgd3JpdGVWYWx1ZShzZWxlY3RJdGVtOiBhbnkpe1xuICAgIGlmICghc2VsZWN0SXRlbSkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICB0aGlzLnVuc2VsZWN0QWxsKCk7XG4gICAgc2VsZWN0SXRlbS5zZWxlY3RlZCA9IHRydWU7XG4gICAgdGhpcy5zZXRJbmRleEl0ZW1TZWxlY3RlZChzZWxlY3RJdGVtLmlkKTtcbiAgfVxuXG4gIHJlZ2lzdGVyT25DaGFuZ2UoZm46IGFueSl7XG4gICAgdGhpcy5vbkNoYW5nZSA9IGZuO1xuICB9XG4gIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiBhbnkpe1xuICAgIHRoaXMub25Ub3VjaCA9IGZuO1xuICB9XG59XG4iXX0=
|
|
@@ -2642,13 +2642,14 @@ 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 = () => { };
|
|
@@ -2675,6 +2676,9 @@ class SelectComponent {
|
|
|
2675
2676
|
this.onClose();
|
|
2676
2677
|
this.clickOnCallToAction.emit(this.callToAction.value);
|
|
2677
2678
|
}
|
|
2679
|
+
onSearcheValueChange() {
|
|
2680
|
+
this.searchValueChange.emit(this.searchValue);
|
|
2681
|
+
}
|
|
2678
2682
|
getItemSelected() {
|
|
2679
2683
|
return this.items[this.indexItemSelected];
|
|
2680
2684
|
}
|
|
@@ -2708,7 +2712,7 @@ class SelectComponent {
|
|
|
2708
2712
|
SelectComponent.decorators = [
|
|
2709
2713
|
{ type: Component, args: [{
|
|
2710
2714
|
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>",
|
|
2715
|
+
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
2716
|
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }]
|
|
2713
2717
|
},] }
|
|
2714
2718
|
];
|
|
@@ -2721,6 +2725,8 @@ SelectComponent.propDecorators = {
|
|
|
2721
2725
|
label: [{ type: Input }],
|
|
2722
2726
|
maxWidthItems: [{ type: Input }],
|
|
2723
2727
|
search: [{ type: Input }],
|
|
2728
|
+
searchValue: [{ type: Input }],
|
|
2729
|
+
searchValueChange: [{ type: Output }],
|
|
2724
2730
|
type: [{ type: Input }],
|
|
2725
2731
|
callToAction: [{ type: Input }],
|
|
2726
2732
|
maxWidth: [{ type: Input }],
|