@wizishop/angular-components 0.0.61 → 0.0.62

package/angular-components.scss

@@ -3021,6 +3021,81 @@ span.wac-tooltip {
     }
   }
 }
+.wac-wrapper {
+  width: 100%;
+  &.max-width {
+    max-width: 1080px;
+    margin: 0 auto;
+  }
+}
+.wac-alert {
+  width: 100%;
+  background-color: transparentize($wac-link-color, 0.85);
+  color: $wac-link-color;
+  border-radius: 3px;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  padding: 20px;
+  &.success {
+    background-color: transparentize($wac-green-color, 0.85);
+    p {
+      color: $wac-p-alert-color-success;
+      > * {
+        color: $wac-p-alert-color-success;
+      }
+    }
+    i {
+      color: $wac-green-color;
+    }
+  }
+  &.warning {
+    background-color: transparentize($wac-primary-button, 0.85);
+    p {
+      color: $wac-p-alert-color-warning;
+      > * {
+        color: $wac-p-alert-color-warning;
+      }
+    }
+    i {
+      color: $wac-primary-button;
+    }
+  }
+  &.alert {
+    background-color: transparentize($wac-orange-color, 0.85);
+    p {
+      color: $wac-p-alert-color-alert;
+      > * {
+        color: $wac-p-alert-color-alert;
+      }
+    }
+    i {
+      color: $wac-orange-color;
+    }
+  }
+  p {
+    width: 100%;
+    font-size: rem(14);
+    line-height: rem(25);
+    margin: 0;
+    padding: 0;
+    color: $wac-p-alert-color-default;
+    > * {
+      color: $wac-p-alert-color-default;
+    }
+  }
+  i {
+    width: auto;
+    margin: 0 10px 0 0;
+    color: inherit;
+    font-size: rem(14);
+    line-height: rem(25);
+  }
+
+  .wac-button i {
+    color: $wac-white;
+  }
+}
 .wac-upload {
   width: auto;
   &__wrapper {
@@ -3117,81 +3192,6 @@ span.wac-tooltip {
     }
   }
 }
-.wac-alert {
-  width: 100%;
-  background-color: transparentize($wac-link-color, 0.85);
-  color: $wac-link-color;
-  border-radius: 3px;
-  display: flex;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  padding: 20px;
-  &.success {
-    background-color: transparentize($wac-green-color, 0.85);
-    p {
-      color: $wac-p-alert-color-success;
-      > * {
-        color: $wac-p-alert-color-success;
-      }
-    }
-    i {
-      color: $wac-green-color;
-    }
-  }
-  &.warning {
-    background-color: transparentize($wac-primary-button, 0.85);
-    p {
-      color: $wac-p-alert-color-warning;
-      > * {
-        color: $wac-p-alert-color-warning;
-      }
-    }
-    i {
-      color: $wac-primary-button;
-    }
-  }
-  &.alert {
-    background-color: transparentize($wac-orange-color, 0.85);
-    p {
-      color: $wac-p-alert-color-alert;
-      > * {
-        color: $wac-p-alert-color-alert;
-      }
-    }
-    i {
-      color: $wac-orange-color;
-    }
-  }
-  p {
-    width: 100%;
-    font-size: rem(14);
-    line-height: rem(25);
-    margin: 0;
-    padding: 0;
-    color: $wac-p-alert-color-default;
-    > * {
-      color: $wac-p-alert-color-default;
-    }
-  }
-  i {
-    width: auto;
-    margin: 0 10px 0 0;
-    color: inherit;
-    font-size: rem(14);
-    line-height: rem(25);
-  }
-
-  .wac-button i {
-    color: $wac-white;
-  }
-}
-.wac-wrapper {
-  width: 100%;
-  &.max-width {
-    max-width: 1080px;
-    margin: 0 auto;
-  }
-}
 .wac-back {
   width: 40px;
   height: 40px;

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

@@ -3610,40 +3610,53 @@
     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.selectValueByIndex = new i0.EventEmitter();
+            this.searchKeyUp = new i0.EventEmitter();
+            this.searchFocusOut = new i0.EventEmitter();
         }
         SearchComponent.prototype.ngOnInit = function () {
             this.triggerOptions = this.options;
         };
-        SearchComponent.prototype.customTB = function (item, index) {
-            return item.id + "-" + index;
-        };
         SearchComponent.prototype.onClose = function () {
             this.openSelect = false;
         };
         SearchComponent.prototype.setSearchValueToQuery = function (value) {
             var _this = this;
             this.search = value.target.value;
-            if (this.search.length > 0) {
-                this.openSelect = true;
-                this.triggerOptions = this.options.filter(function (element) { return element.label.toLowerCase().indexOf(_this.search.toLowerCase()) !== -1; });
+            if (this.disableSearchIn) {
+                this.triggerOptions = this.options;
             }
             else {
-                this.triggerOptions = this.options;
+                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;
+            this.openSelect = false;
         };
-        SearchComponent.prototype.onSelectItem = function (index) {
-            this.selectValueByIndex.emit(index);
-            this.selectValue.emit(this.options[index]);
+        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 = '';
@@ -3654,7 +3667,7 @@
     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;\" (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; trackBy: customTB; let index = index;\">\n        <div [ngClass]=\"{ selected: item.active }\" (click)=\"onSelectItem(index)\">\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"
+                    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 []; };
@@ -3663,9 +3676,11 @@
         alwaysOpen: [{ type: i0.Input }],
         label: [{ type: i0.Input }],
         options: [{ type: i0.Input }],
+        disableSearchIn: [{ type: i0.Input }],
         emptyResult: [{ type: i0.Input }],
         selectValue: [{ type: i0.Output }],
-        selectValueByIndex: [{ type: i0.Output }]
+        searchKeyUp: [{ type: i0.Output }],
+        searchFocusOut: [{ type: i0.Output }]
     };
 
     var components = [