ngx-ode-ui 3.12.0-dev.14 → 3.12.0-dev.17

package/bundles/ngx-ode-ui.umd.js

@@ -1578,6 +1578,7 @@
             _this.noResultsLabel = 'list.results.no.items';
             _this.placeholder = 'list.placeholder';
             _this.isSearchActive = true;
+            _this.isSearchButtonDisabled = false;
             _this.searchInput = false;
             _this.inputChange = new core.EventEmitter();
             _this.onSelect = new core.EventEmitter();
@@ -1621,8 +1622,8 @@
         ListComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'ode-list',
-                        template: "<ode-search-input\n  *ngIf=\"isSearchActive\"\n  [searchInput]=\"searchInput\"\n  [searchSubmit]=\"searchSubmit\"\n  [attr.placeholder]=\"searchPlaceholder | translate\"\n  (onChange)=\"inputChange.emit($event)\"></ode-search-input>\n<div class=\"toolbar\">\n  <ng-content select=\"[toolbar]\"></ng-content>\n</div>\n<div class=\"list-wrapper\"\n    infiniteScroll\n    [scrollWindow]=\"false\"\n    (scrolled)=\"scrolledDown.emit()\"\n    [infiniteScrollThrottle]=\"50\">\n  <ul>\n    <li *ngFor=\"let item of model | filter: filters | filter: inputFilter | store:self:'storedElements' | orderBy: sort | slice: 0:limit\"\n        (click)=\"onSelect.emit(item)\"\n        [class.selected]=\"isSelected(item)\"\n        [class.disabled]=\"isDisabled(item)\"\n        [ngClass]=\"ngClass(item)\"\n        class=\"lct-list-item\">\n      <ng-template [ngTemplateOutlet]=\"templateRef\" [ngTemplateOutletContext]=\"{$implicit: item}\">\n      </ng-template>\n    </li>\n  </ul>\n  <ul *ngIf=\"storedElements && storedElements.length === 0\">\n    <li class=\"no-results\">{{ noResultsLabel | translate }}</li>\n  </ul>\n  <ul *ngIf=\"!model\">\n    <li class=\"placeholder\">{{ placeholder | translate }}</li>\n  </ul>\n</div>\n",
-                        styles: ["ul{margin:0;padding:0;font-size:.9em}ul li{cursor:pointer;border-top:1px solid #ddd;padding:10px}ul li.no-results{padding:50px;text-align:center;font-style:italic}ul li.no-results:hover{cursor:default!important;background-color:inherit!important}ul li.placeholder{color:#aaa;padding:50px;text-align:center}ul li.placeholder:hover{cursor:default!important;background-color:inherit!important}ul li.disabled{pointer-events:none}.list-wrapper{min-height:30vh}"]
+                        template: "<ode-search-input\n  *ngIf=\"isSearchActive\"\n  [isSearchButtonDisabled]=\"isSearchButtonDisabled\"\n  [searchInput]=\"searchInput\"\n  [searchSubmit]=\"searchSubmit\"\n  [attr.placeholder]=\"searchPlaceholder | translate\"\n  (onChange)=\"inputChange.emit($event)\"></ode-search-input>\n<div class=\"toolbar\">\n  <ng-content select=\"[toolbar]\"></ng-content>\n</div>\n<div class=\"list-wrapper\"\n    infiniteScroll\n    [scrollWindow]=\"false\"\n    (scrolled)=\"scrolledDown.emit()\"\n    [infiniteScrollThrottle]=\"50\">\n  <ul>\n    <li *ngFor=\"let item of model | filter: filters | filter: inputFilter | store:self:'storedElements' | orderBy: sort | slice: 0:limit\"\n        (click)=\"onSelect.emit(item)\"\n        [class.selected]=\"isSelected(item)\"\n        [class.disabled]=\"isDisabled(item)\"\n        [ngClass]=\"ngClass(item)\"\n        class=\"lct-list-item\">\n      <ng-template [ngTemplateOutlet]=\"templateRef\" [ngTemplateOutletContext]=\"{$implicit: item}\">\n      </ng-template>\n    </li>\n  </ul>\n  <ul *ngIf=\"storedElements && storedElements.length === 0\">\n    <li class=\"no-results\">{{ noResultsLabel | translate }}</li>\n  </ul>\n  <ul *ngIf=\"!model\">\n    <li class=\"placeholder\">{{ placeholder | translate }}</li>\n  </ul>\n</div>\n",
+                        styles: ["ul{margin:0;padding:0;font-size:.9em}ul li{cursor:pointer;border-top:1px solid #ddd;padding:10px}ul li.no-results{padding:50px;text-align:center;font-style:italic}ul li.no-results:hover{cursor:default!important;background-color:inherit!important}ul li.placeholder{color:#aaa;padding:2rem;text-align:left}ul li.placeholder:hover{cursor:default!important;background-color:inherit!important}ul li.disabled{pointer-events:none}"]
                     }] }
         ];
         /** @nocollapse */
@@ -1639,6 +1640,7 @@
             noResultsLabel: [{ type: core.Input }],
             placeholder: [{ type: core.Input }],
             isSearchActive: [{ type: core.Input }],
+            isSearchButtonDisabled: [{ type: core.Input }],
             searchInput: [{ type: core.Input }],
             searchSubmit: [{ type: core.Input }],
             inputChange: [{ type: core.Output }],
@@ -1676,6 +1678,8 @@
         /** @type {?} */
         ListComponent.prototype.isSearchActive;
         /** @type {?} */
+        ListComponent.prototype.isSearchButtonDisabled;
+        /** @type {?} */
         ListComponent.prototype.searchInput;
         /** @type {?} */
         ListComponent.prototype.searchSubmit;
@@ -3145,6 +3149,7 @@
             _this._renderer = _renderer;
             /* Inputs / Outputs / View */
             _this.isSearchActive = false;
+            _this.isSearchButtonDisabled = false;
             _this.searchInput = false;
             _this._delay = 200;
             _this.onChange = new core.EventEmitter();
@@ -3249,7 +3254,7 @@
         SearchInputComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'ode-search-input',
-                        template: "<form\n    class=\"search-container\"\n    (ngSubmit)=\"searchInput && searchSubmit()\">\n    <input\n        #searchBox\n        class=\"search-input\"\n        name=\"searchTerm\"\n        type=\"search\"\n        (input)=\"search(searchBox.value)\" />\n    <button class=\"search-button\" *ngIf=\"searchInput\">\n        <i class=\"fa fa-search is-size-4 search-icon\"></i>\n    </button>\n</form>\n\n<!-- <input *ngIf=\"!searchInput\" type=\"search\" #searchBox (input)=\"search(searchBox.value)\"/> -->",
+                        template: "<form\n    class=\"search-container\"\n    (ngSubmit)=\"searchInput && searchSubmit()\">\n    <input\n        #searchBox\n        class=\"search-input\"\n        name=\"searchTerm\"\n        type=\"search\"\n        (input)=\"search(searchBox.value)\" />\n    <button class=\"search-button\" *ngIf=\"searchInput\" [attr.disabled]=\"isSearchButtonDisabled ? true : null\">\n        <i class=\"fa fa-search is-size-4 search-icon\"></i>\n    </button>\n</form>\n\n<!-- <input *ngIf=\"!searchInput\" type=\"search\" #searchBox (input)=\"search(searchBox.value)\"/> -->",
                         styles: [":host .search-container{margin:0;display:flex}:host .search-icon{padding-left:0}:host .search-button{margin:0;background:#ff8352;color:#fff}"]
                     }] }
         ];
@@ -3261,6 +3266,7 @@
         ]; };
         SearchInputComponent.propDecorators = {
             isSearchActive: [{ type: core.Input }],
+            isSearchButtonDisabled: [{ type: core.Input }],
             searchInput: [{ type: core.Input }],
             searchSubmit: [{ type: core.Input }],
             delay: [{ type: core.Input }],
@@ -3273,6 +3279,8 @@
         /** @type {?} */
         SearchInputComponent.prototype.isSearchActive;
         /** @type {?} */
+        SearchInputComponent.prototype.isSearchButtonDisabled;
+        /** @type {?} */
         SearchInputComponent.prototype.searchInput;
         /** @type {?} */
         SearchInputComponent.prototype.searchSubmit;
@@ -5495,7 +5503,7 @@
             { type: core.Component, args: [{
                         selector: 'ode-search-toolbar',
                         template: "<div class=\"search-toolbar\">\n  <div class=\"search-toolbar-label\">\n    <s5l>{{ label }}</s5l>\n    <button\n      *ngFor=\"let searchType of searchTypes\"\n      class=\"button has-left-margin-5\"\n      [ngClass]=\"{\n        'is-selected': searchType.value === selectedSearchTypeValue\n      }\"\n      (click)=\"handleSearchTypeClick(searchType.value)\"\n    >\n      <s5l>{{ searchType.label }}</s5l>\n    </button>\n  </div>\n  <div>\n    <strong class=\"badge\">{{ nbItem }} <s5l>{{ nbItemLabel }}</s5l></strong>\n  </div>\n</div>\n",
-                        styles: [".search-toolbar{display:flex;align-items:center;justify-content:space-between;padding:15px}.search-toolbar .search-toolbar-label{font-size:.9em}"]
+                        styles: [".search-toolbar{display:flex;align-items:center;justify-content:space-between;padding:15px}.search-toolbar .search-toolbar-label{font-size:.85rem}.search-toolbar .search-toolbar-label .button{padding:4px 12px;border-radius:20px;font-size:12px;border-width:2px;border-color:#ff8d2e}"]
                     }] }
         ];
         /** @nocollapse */