@wizishop/angular-components 0.0.87 → 0.0.100

package/angular-components.scss

@@ -5379,11 +5379,18 @@ h4.wac-h4 {
     color: $wac-second-color;
     font-size: rem(14);
     padding: 7.5px 20px;
-    background-color: $wac-border-form;
-    border: 1px solid $wac-border-form;
-    border-radius: 3px;
+    background-color: $gray-background;
+    border-left: 1px solid $wac-border-form;
+    border-radius: 3px 3px 0 0;
     white-space: nowrap;
     transition: .3s ease;
+    &.reverse {
+      right: auto;
+      left: 1px;
+      border-radius: 3px 0 0 3px;
+      border-left: none;
+      border-right: 1px solid $wac-border-form;
+    }
   }
   input:focus {
     & + .indication {
@@ -5398,6 +5405,36 @@ h4.wac-h4 {
   color: $wac-green-color;
   font-size: rem(14);
 }
+
+.indication-left {
+  .control {
+    display: flex;
+    flex-direction: row-reverse;
+    width: 100%;
+    border: 1px solid $border-form;
+    border-radius: 3px;
+    overflow: hidden;
+    &:hover, &:focus {
+      border-color: $wizishop-blue;
+    }
+    input {
+      border: none!important;
+      padding: 0 10px!important;
+      margin: 0!important;
+    }
+    .indication {
+      position: relative;
+      top: auto;
+      left: auto;
+      right: auto;
+      padding: 8px 20px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
 div.wac-field-input-search {
   padding: 20px;
   background-color: $wac-gray-background;

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

@@ -722,6 +722,9 @@
                 currentPage: currentPage
             });
         };
+        /*
+          Add defaults filters in the URL if they not exists.
+        */
         FiltersTableService.prototype.setInitialPaginationFiltersIfNotExist = function (dataTableName, itemsPerPage, currentPage) {
             var filterGroup = this.getTableFilterGroup(dataTableName);
             filterGroup.setValues({
@@ -764,13 +767,11 @@
             this.headerCheckBoxId = uuid.v4(); // Create checkbox unique id
             /* Handle routing filters */
             if (this.tableRoutingName) {
-                this._filterGroup = this.filtersTableService.getTableFilterGroup(this.tableRoutingName);
+                this.filtersTableService.setInitialPaginationFiltersIfNotExist(this.tableRoutingName, this.tableFilters.itemsPerPage, this.tableFilters.currentPage);
+                this._tableFiltersGroup = this.filtersTableService.getTableFilterGroup(this.tableRoutingName);
                 this.setTablesFilters();
-                // Performe initial fetch data
-                this._filterGroup.valuesChange$.next([]);
                 // Listen to filters changes with debounced time to limit multiple api calls
-                this.filterGroupChangeSub = this._filterGroup.valuesChange$.subscribe(function (filters) {
-                    console.log('valuesChange', filters);
+                this.filterGroupChangeSub = this._tableFiltersGroup.valuesChange$.subscribe(function (filters) {
                     _this.setTablesFilters();
                 });
             }
@@ -785,8 +786,8 @@
             this.tableFilters.currentPage = 1;
             this.tableFiltersChange.emit(this.tableFilters);
             // Reset routing filters
-            if (this._filterGroup) {
-                this._filterGroup.setValues({
+            if (this._tableFiltersGroup) {
+                this._tableFiltersGroup.setValues({
                     searchValue: this.tableFilters.searchValue,
                     sort: undefined,
                     order: undefined,
@@ -796,8 +797,8 @@
         };
         TableComponent.prototype.pageChange = function () {
             this.tableFiltersChange.emit(this.tableFilters);
-            if (this._filterGroup) {
-                this._filterGroup.setValues({
+            if (this._tableFiltersGroup) {
+                this._tableFiltersGroup.setValues({
                     itemsPerPage: this.tableFilters.itemsPerPage,
                     currentPage: this.tableFilters.currentPage
                 });
@@ -808,16 +809,15 @@
          * */
         TableComponent.prototype.setTablesFilters = function () {
             this.tableFilters = {
-                sort: this._filterGroup.get('sort'),
-                order: this._filterGroup.get('order'),
-                searchValue: this._filterGroup.get('searchValue'),
-                itemsPerPage: this._filterGroup.get('itemsPerPage') ? parseInt(this._filterGroup.get('itemsPerPage')) : 0,
-                currentPage: this._filterGroup.get('currentPage') ? parseInt(this._filterGroup.get('currentPage')) : 0,
+                sort: this._tableFiltersGroup.get('sort'),
+                order: this._tableFiltersGroup.get('order'),
+                searchValue: this._tableFiltersGroup.get('searchValue'),
+                itemsPerPage: this._tableFiltersGroup.get('itemsPerPage') ? parseInt(this._tableFiltersGroup.get('itemsPerPage')) : 0,
+                currentPage: this._tableFiltersGroup.get('currentPage') ? parseInt(this._tableFiltersGroup.get('currentPage')) : 0,
                 totalItems: this.tableFilters.totalItems
             };
             this.tableFiltersChange.emit(this.tableFilters);
-            console.log('tableFiltersValuesChange$.next');
-            this._filterGroup.tableFiltersValuesChange$.next(this.tableFilters);
+            this._tableFiltersGroup.tableFiltersValuesChange$.next(this.tableFilters);
         };
         TableComponent.prototype.ngDestroy = function () {
             if (this.filterGroupChangeSub) {
@@ -1817,6 +1817,7 @@
             this.disabled = false;
             this.indication = false;
             this.success = false;
+            this.indicationLeft = false;
             this.keypressEnter = new i0.EventEmitter();
             this.KEYPRESS_ENTER = "Enter";
             this.id = 'wz-input_' +
@@ -1872,7 +1873,7 @@
     InputComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-input',
-                    template: "<div\n  class=\"field wac-input\"\n  [ngClass]=\"{ 'has-no-block': withoutBlock, 'is-big': big, 'is-medium': medium, 'with-padding': padding, 'with-progress-bar': progressBar }\"\n>\n  <div class=\"field-label is-normal has-text-left\" *ngIf=\"!withoutBlock\">\n    <label\n      [ngClass]=\"[boldLabel == 'true' ? 'label has-text-weight-bold' : 'label has-text-weight-normal', showTooltip ? 'label-inline' : '']\"\n      [innerHTML]=\"label\"\n      [for]=\"id\"\n    ></label>\n    <wac-tooltip\n      *ngIf=\"showTooltip\"\n      [tooltipIcon]=\"iconTooltip\"\n      [tooltipText]=\"textTooltip\"\n      [tooltipLink]=\"linkTooltip\"\n      [tooltipUrl]=\"urlTooltip\"\n    ></wac-tooltip>\n    <!-- Size -->\n    <span *ngIf=\"value && size && !progressBar\" class=\"is-size-7 wac-input__size\">\n      <strong>{{ value.toString().length }}</strong> / {{ size }}\n    </span>\n  </div>\n  <div class=\"field-body\">\n    <div class=\"field\">\n      <p\n        class=\"control\"\n        [ngClass]=\"{ 'has-icons-right': textError || success, 'has-icons-left': icon !== '', 'has-input-group': textAppend || textPrepend }\"\n      >\n        <!-- Text Prepend -->\n        <span *ngIf=\"textPrepend\" class=\"has-input-group\">\n          <span class=\"has-input-group-text prepend\">{{ textPrepend }}</span>\n          <span *ngIf=\"icon !== ''\" class=\"icon is-small is-left\">\n            <i [class]=\"icon\"></i>\n          </span>\n        </span>\n\n        <!-- Input -->\n        <input\n          [class]=\"'input ' + extraClasses\"\n          [id]=\"id\"\n          [ngClass]=\"{\n            'is-danger': textError,\n            'is-large': big,\n            'is-number': isNumber,\n            'remove-margin': disableMargin,\n            'text-append': textAppend\n          }\"\n          [type]=\"type\"\n          [placeholder]=\"placeholder\"\n          [attr.size]=\"size\"\n          [(ngModel)]=\"value\"\n          (ngModelChange)=\"onChange($event)\"\n          (blur)=\"onBlur()\"\n          [disabled]=\"disabled\"\n          (focusout)=\"onFocusOut()\"\n          [min]=\"min\"\n          [max]=\"max\"\n          (keypress)=\"keyPress($event)\"\n        />\n\n        <!-- Indication at the end of the input -->\n        <span class=\"indication\" *ngIf=\"indication\">\n          <span [innerHTML]=\"indication\"></span>\n        </span>\n\n        <!-- Text Append -->\n        <span *ngIf=\"textAppend\" class=\"has-input-group\">\n          <span class=\"has-input-group-text append\">{{ textAppend }}</span>\n          <!-- error if text append not empty -->\n          <span *ngIf=\"textError\" class=\"icon is-small is-right\">\n            <i class=\"fal fa-times has-text-danger\"></i>\n          </span>\n        </span>\n\n        <!-- Icon Left -->\n        <span *ngIf=\"icon !== '' && !textPrepend\" class=\"icon is-small is-left\">\n          <i [class]=\"icon\"></i>\n        </span>\n\n        <!-- Icon error if textAppend empty -->\n        <span *ngIf=\"textError && !textAppend\" class=\"icon is-small is-right\">\n          <i class=\"fal fa-times has-text-danger\"></i>\n        </span>\n\n        <!-- Icon success -->\n        <span *ngIf=\"success\" class=\"icon is-small is-right\">\n          <i class=\"fas fa-check has-text-success\"></i>\n        </span>\n\n        <!-- Text Info -->\n        <span\n          *ngIf=\"textInfo && (textError === null || textError === '') && !progressBar\"\n          class=\"is-size-7 wac-input__info text-info\"\n          [innerHtml]=\"textInfo\"\n        ></span>\n\n        <!-- Text Error -->\n        <span *ngIf=\"textError && !progressBar\" class=\"is-size-7 wac-input__error has-text-danger\" [innerHtml]=\"textError\"></span>\n      </p>\n\n      <!-- Progress Bar -->\n      <wac-progress-bar *ngIf=\"progressBar\" [min]=\"min\" [max]=\"max\" [valueLength]=\"value.length\"></wac-progress-bar>\n    </div>\n  </div>\n</div>\n",
+                    template: "<div\n  class=\"field wac-input\"\n  [ngClass]=\"{ 'has-no-block': withoutBlock, 'is-big': big, 'is-medium': medium, 'with-padding': padding, 'indication-left': indicationLeft, 'with-progress-bar': progressBar }\"\n>\n  <div class=\"field-label is-normal has-text-left\" *ngIf=\"!withoutBlock\">\n    <label\n      [ngClass]=\"[boldLabel == 'true' ? 'label has-text-weight-bold' : 'label has-text-weight-normal', showTooltip ? 'label-inline' : '']\"\n      [innerHTML]=\"label\"\n      [for]=\"id\"\n    ></label>\n    <wac-tooltip\n      *ngIf=\"showTooltip\"\n      [tooltipIcon]=\"iconTooltip\"\n      [tooltipText]=\"textTooltip\"\n      [tooltipLink]=\"linkTooltip\"\n      [tooltipUrl]=\"urlTooltip\"\n    ></wac-tooltip>\n    <!-- Size -->\n    <span *ngIf=\"value && size && !progressBar\" class=\"is-size-7 wac-input__size\">\n      <strong>{{ value.toString().length }}</strong> / {{ size }}\n    </span>\n  </div>\n  <div class=\"field-body\">\n    <div class=\"field\">\n      <p\n        class=\"control\"\n        [ngClass]=\"{ 'has-icons-right': textError || success, 'has-icons-left': icon !== '', 'has-input-group': textAppend || textPrepend }\"\n      >\n        <!-- Text Prepend -->\n        <span *ngIf=\"textPrepend\" class=\"has-input-group\">\n          <span class=\"has-input-group-text prepend\">{{ textPrepend }}</span>\n          <span *ngIf=\"icon !== ''\" class=\"icon is-small is-left\">\n            <i [class]=\"icon\"></i>\n          </span>\n        </span>\n\n        <!-- Input -->\n        <input\n          [class]=\"'input ' + extraClasses\"\n          [id]=\"id\"\n          [ngClass]=\"{\n            'is-danger': textError,\n            'is-large': big,\n            'is-number': isNumber,\n            'remove-margin': disableMargin,\n            'text-append': textAppend\n          }\"\n          [type]=\"type\"\n          [placeholder]=\"placeholder\"\n          [attr.size]=\"size\"\n          [(ngModel)]=\"value\"\n          (ngModelChange)=\"onChange($event)\"\n          (blur)=\"onBlur()\"\n          [disabled]=\"disabled\"\n          (focusout)=\"onFocusOut()\"\n          [min]=\"min\"\n          [max]=\"max\"\n          (keypress)=\"keyPress($event)\"\n        />\n\n        <!-- Indication at the end of the input -->\n        <span class=\"indication\" *ngIf=\"indication\" [ngClass]=\"{'reverse': indicationLeft}\">\n          <span [innerHTML]=\"indication\"></span>\n        </span>\n\n        <!-- Text Append -->\n        <span *ngIf=\"textAppend && !indicationLeft\" class=\"has-input-group\">\n          <span class=\"has-input-group-text append\">{{ textAppend }}</span>\n          <!-- error if text append not empty -->\n          <span *ngIf=\"textError\" class=\"icon is-small is-right\">\n            <i class=\"fal fa-times has-text-danger\"></i>\n          </span>\n        </span>\n\n        <!-- Icon Left -->\n        <span *ngIf=\"icon !== '' && !textPrepend && !indicationLeft\" class=\"icon is-small is-left\">\n          <i [class]=\"icon\"></i>\n        </span>\n\n        <!-- Icon error if textAppend empty -->\n        <span *ngIf=\"textError && !textAppend && !indicationLeft\" class=\"icon is-small is-right\">\n          <i class=\"fal fa-times has-text-danger\"></i>\n        </span>\n\n        <!-- Icon success -->\n        <span *ngIf=\"success\" class=\"icon is-small is-right\">\n          <i class=\"fas fa-check has-text-success\"></i>\n        </span>\n\n        <!-- Text Info -->\n        <span\n          *ngIf=\"textInfo && (textError === null || textError === '') && !progressBar && !indicationLeft\"\n          class=\"is-size-7 wac-input__info text-info\"\n          [innerHtml]=\"textInfo\"\n        ></span>\n\n        <!-- Text Error -->\n        <span *ngIf=\"textError && !progressBar && !indicationLeft\" class=\"is-size-7 wac-input__error has-text-danger\" [innerHtml]=\"textError\"></span>\n      </p>\n\n      <!-- Progress Bar -->\n      <wac-progress-bar *ngIf=\"progressBar && !indicationLeft\" [min]=\"min\" [max]=\"max\" [valueLength]=\"value.length\"></wac-progress-bar>\n    </div>\n  </div>\n</div>\n",
                     providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: InputComponent, multi: true }]
                 },] }
     ];
@@ -1907,6 +1908,7 @@
         disabled: [{ type: i0.Input }],
         indication: [{ type: i0.Input }],
         success: [{ type: i0.Input }],
+        indicationLeft: [{ type: i0.Input }],
         keypressEnter: [{ type: i0.Output }]
     };