@wizishop/angular-components 0.0.59 → 0.0.63

package/bundles/wizishop-angular-components.umd.js

@@ -848,6 +848,7 @@
             this.label = '';
             this.hasClose = false;
             this.isOpen = true;
+            this.big = false;
         }
         TagComponent.prototype.closeTag = function () {
             if (this.hasClose) {
@@ -859,14 +860,15 @@
     TagComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-tag',
-                    template: "<div class=\"wac-tag\" [classList]=\"'wac-tag--' + class\" [ngClass]=\"{ hover: hasClose }\" *ngIf=\"isOpen\" (click)=\"closeTag()\">\n  {{ label }}\n  <span *ngIf=\"hasClose\"><i class=\"fas fa-times\"></i></span>\n</div>\n"
+                    template: "<div class=\"wac-tag\" [classList]=\"'wac-tag--' + class\" [ngClass]=\"{ hover: hasClose, 'big': big }\" *ngIf=\"isOpen\" (click)=\"closeTag()\">\n  {{ label }}\n  <span *ngIf=\"hasClose\"><i class=\"fas fa-times\"></i></span>\n</div>\n"
                 },] }
     ];
     TagComponent.ctorParameters = function () { return []; };
     TagComponent.propDecorators = {
         label: [{ type: i0.Input }],
         class: [{ type: i0.Input }],
-        hasClose: [{ type: i0.Input }]
+        hasClose: [{ type: i0.Input }],
+        big: [{ type: i0.Input }]
     };
 
     var TabComponent = /** @class */ (function () {
@@ -3605,6 +3607,147 @@
                 },] }
     ];
 
+    var SearchComponent = /** @class */ (function () {
+        function SearchComponent() {
+            this.alwaysOpen = false;
+            this.disableSearchIn = false;
+            this.emptyResult = '';
+            this.search = '';
+            this.openSelect = false;
+            this.selectValue = new i0.EventEmitter();
+            this.searchKeyUp = new i0.EventEmitter();
+            this.searchFocusOut = new i0.EventEmitter();
+        }
+        SearchComponent.prototype.ngOnInit = function () {
+            this.triggerOptions = this.options;
+        };
+        SearchComponent.prototype.onClose = function () {
+            this.openSelect = false;
+        };
+        SearchComponent.prototype.setSearchValueToQuery = function (value) {
+            var _this = this;
+            this.search = value.target.value;
+            if (this.disableSearchIn) {
+                this.triggerOptions = this.options;
+            }
+            else {
+                if (this.search.length > 0) {
+                    this.openSelect = true;
+                    this.triggerOptions = this.options.filter(function (element) { return element.label.toLowerCase().indexOf(_this.search.toLowerCase()) !== -1; });
+                }
+                else {
+                    this.triggerOptions = this.options;
+                }
+            }
+            this.searchKeyUp.emit(this.search);
+        };
+        SearchComponent.prototype.sendEventFocusOut = function () {
+            this.searchFocusOut.emit(this.search);
+        };
+        SearchComponent.prototype.closeSelect = function () {
+            this.openSelect = false;
+        };
+        SearchComponent.prototype.onSelectItem = function (index, value, label) {
+            this.search = '';
+            this.openSelect = false;
+            if (this.disableSearchIn) {
+                this.selectValue.emit(index);
+            }
+            else {
+                var findInOption = this.options.findIndex(function (element) { return element.label === label && element.value === value; });
+                this.selectValue.emit(findInOption);
+            }
+        };
+        SearchComponent.prototype.resetAllVue = function () {
+            this.search = '';
+            this.closeSelect();
+        };
+        return SearchComponent;
+    }());
+    SearchComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'wac-search',
+                    template: "<div class=\"wac-search\" [ngClass]=\"{ open: openSelect || alwaysOpen }\" [zIndexToggle]=\"openSelect\" wzAutoHide (clickOutside)=\"closeSelect()\">\n  <div class=\"wac-search__wrapper\">\n    <button><i class=\"fal fa-search\"></i></button>\n    <input [value]=\"search\" type=\"text\" required [placeholder]=\"placeholder\" (focus)=\"openSelect = true;\" (focusout)=\"sendEventFocusOut()\" (keyup)=\"setSearchValueToQuery($event)\" />\n  </div>\n  <div class=\"wac-search__absolute\" *ngIf=\"triggerOptions\" [ngClass]=\"{'hidden': !openSelect}\">\n    <perfect-scrollbar [config]=\"{ suppressScrollX: true }\" *ngIf=\"triggerOptions.length > 0\">\n      <div (click)=\"onClose()\" class=\"wac-select__content__item\" *ngFor=\"let item of triggerOptions; let index = index;\">\n        <div [ngClass]=\"{ selected: item.active }\" (click)=\"onSelectItem(index, item.value, item.label)\">\n          {{ item.label }}\n        </div>\n      </div>\n    </perfect-scrollbar>\n    <div class=\"wac-select__content__empty\" *ngIf=\"triggerOptions.length === 0\">\n      <span *ngIf=\"emptyResult\">{{emptyResult}}</span>\n    </div>\n  </div>\n</div>\n"
+                },] }
+    ];
+    SearchComponent.ctorParameters = function () { return []; };
+    SearchComponent.propDecorators = {
+        placeholder: [{ type: i0.Input }],
+        alwaysOpen: [{ type: i0.Input }],
+        label: [{ type: i0.Input }],
+        options: [{ type: i0.Input }],
+        disableSearchIn: [{ type: i0.Input }],
+        emptyResult: [{ type: i0.Input }],
+        selectValue: [{ type: i0.Output }],
+        searchKeyUp: [{ type: i0.Output }],
+        searchFocusOut: [{ type: i0.Output }]
+    };
+
+    var SelectedListComponent = /** @class */ (function () {
+        function SelectedListComponent() {
+            this.enableSelectAll = true;
+            this.selectedItems = new i0.EventEmitter();
+            this.selectedOptionIndex = [];
+            this.switchSelectAll = false;
+        }
+        SelectedListComponent.prototype.ngOnInit = function () {
+            if (typeof this.options !== typeof undefined) {
+                this.checkSelectedItem();
+                if (this.selectedOptionIndex.length === this.options.length) {
+                    this.switchSelectAll = true;
+                }
+            }
+        };
+        SelectedListComponent.prototype.selectAll = function () {
+            var _this = this;
+            this.selectedOptionIndex = [];
+            this.options.forEach(function (eln, i) {
+                _this.options[i].active = true;
+                _this.selectedOptionIndex.push(i);
+            });
+            this.switchSelectAll = true;
+            this.selectedItems.emit(this.selectedOptionIndex);
+        };
+        SelectedListComponent.prototype.checkSelectedItem = function () {
+            var _this = this;
+            this.selectedOptionIndex = [];
+            this.options.forEach(function (eln, i) {
+                if (eln.active) {
+                    _this.selectedOptionIndex.push(i);
+                }
+            });
+        };
+        SelectedListComponent.prototype.unSelectAll = function () {
+            var _this = this;
+            this.selectedOptionIndex = [];
+            this.options.forEach(function (eln, i) {
+                _this.options[i].active = false;
+            });
+            this.switchSelectAll = false;
+            this.selectedItems.emit(this.selectedOptionIndex);
+        };
+        SelectedListComponent.prototype.selectItem = function (i) {
+            this.options[i].active = !this.options[i].active;
+            this.checkSelectedItem();
+            this.selectedItems.emit(this.selectedOptionIndex);
+        };
+        return SelectedListComponent;
+    }());
+    SelectedListComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'wac-selected-list',
+                    template: "<div class=\"selected-list\">\n  <div class=\"selected-list__wrapper\">\n    <div class=\"selected-list__wrapper__head\">\n      <p *ngIf=\"label\" [innerHTML]=\"label\"></p>\n      <span *ngIf=\"textSelectAll && !switchSelectAll\" [innerHTML]=\"textSelectAll\" (click)=\"selectAll()\"></span>\n      <span *ngIf=\"textUnSelectAll && switchSelectAll\" [innerHTML]=\"textUnSelectAll\" (click)=\"unSelectAll()\"></span>\n    </div>\n    <div class=\"selected-list__wrapper__content\">\n      <div class=\"selected-list__wrapper__content__item\" *ngFor=\"let item of options;let i = index;\" [ngClass]=\"{'active': item.active}\" (click)=\"selectItem(i)\">\n        <span [innerHTML]=\"item.label\"></span>\n        <i class=\"fas fa-check\"></i>\n      </div>\n    </div>\n  </div>\n</div>\n"
+                },] }
+    ];
+    SelectedListComponent.propDecorators = {
+        options: [{ type: i0.Input }],
+        label: [{ type: i0.Input }],
+        textSelectAll: [{ type: i0.Input }],
+        textUnSelectAll: [{ type: i0.Input }],
+        enableSelectAll: [{ type: i0.Input }],
+        selectedItems: [{ type: i0.Output }]
+    };
+
     var components = [
         TagComponent,
         TabComponent,
@@ -3644,7 +3787,9 @@
         WrapperComponent,
         FiltersComponent,
         WrapperBlocsComponent,
-        SnackbarComponent
+        SnackbarComponent,
+        SearchComponent,
+        SelectedListComponent
     ];
     var exportsFromModule = [
         PaginationComponent,
@@ -3757,8 +3902,10 @@
     exports.PopinComponent = PopinComponent;
     exports.ProgressBarComponent = ProgressBarComponent;
     exports.RadioComponent = RadioComponent;
+    exports.SearchComponent = SearchComponent;
     exports.SelectComponent = SelectComponent;
     exports.SelectInTextComponent = SelectInTextComponent;
+    exports.SelectedListComponent = SelectedListComponent;
     exports.SeparatorComponent = SeparatorComponent;
     exports.SettingsComponent = SettingsComponent;
     exports.SharedComponentsModule = SharedComponentsModule;