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

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

@@ -1574,9 +1574,9 @@
             /* Store pipe */
             _this.self = _this;
             _this._storedElements = [];
-            _this.model = [];
             _this.searchPlaceholder = 'search';
             _this.noResultsLabel = 'list.results.no.items';
+            _this.placeholder = 'list.placeholder';
             _this.isSearchActive = true;
             _this.searchInput = false;
             _this.inputChange = new core.EventEmitter();
@@ -1621,8 +1621,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</div>\n",
-                        styles: ["ul{margin:0;padding:0;font-size:.9em}ul li{cursor:pointer;border-top:1px solid #ddd;padding:10px}ul li.disabled{pointer-events:none}"]
+                        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}"]
                     }] }
         ];
         /** @nocollapse */
@@ -1637,6 +1637,7 @@
             limit: [{ type: core.Input }],
             searchPlaceholder: [{ type: core.Input }],
             noResultsLabel: [{ type: core.Input }],
+            placeholder: [{ type: core.Input }],
             isSearchActive: [{ type: core.Input }],
             searchInput: [{ type: core.Input }],
             searchSubmit: [{ type: core.Input }],
@@ -1671,6 +1672,8 @@
         /** @type {?} */
         ListComponent.prototype.noResultsLabel;
         /** @type {?} */
+        ListComponent.prototype.placeholder;
+        /** @type {?} */
         ListComponent.prototype.isSearchActive;
         /** @type {?} */
         ListComponent.prototype.searchInput;
@@ -5434,6 +5437,95 @@
         DropdownComponent.prototype.onDropdown;
     }
 
+    /**
+     * @fileoverview added by tsickle
+     * Generated from: lib/components/search-toolbar/search-toolbar.component.ts
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /**
+     * Search Toolbar component.
+     * Used within List component, Search Toolbar will display following information:
+     * - Label of the search filter section (example: 'Search by')
+     * - List of search type filters (example: 'Name', 'Email' , ...)
+     * - Number of items returned by the search
+     *
+     * ```
+     * <ode-search-toolbar
+     * [label]="'user.searchType.label'"
+     * [searchTypes]="searchTypes"
+     * [nbItem]="nbUser || 0"
+     * [nbItemLabel]="'list.results.users'"
+     * (selectSearchType)="handleSelectSearchType($event)"
+     * >
+     * </ode-search-toolbar>
+     * ```
+     */
+    var SearchToolbarComponent = /** @class */ (function (_super) {
+        __extends(SearchToolbarComponent, _super);
+        function SearchToolbarComponent(injector) {
+            var _this = _super.call(this, injector) || this;
+            _this.nbItem = 0;
+            _this.selectSearchType = new core.EventEmitter();
+            return _this;
+        }
+        /**
+         * @return {?}
+         */
+        SearchToolbarComponent.prototype.ngOnInit = /**
+         * @return {?}
+         */
+        function () {
+            if (this.searchTypes && this.searchTypes.length > 0) {
+                this.selectedSearchTypeValue = this.searchTypes[0].value;
+            }
+        };
+        /**
+         * @param {?} searchTypeValue
+         * @return {?}
+         */
+        SearchToolbarComponent.prototype.handleSearchTypeClick = /**
+         * @param {?} searchTypeValue
+         * @return {?}
+         */
+        function (searchTypeValue) {
+            this.selectedSearchTypeValue = searchTypeValue;
+            this.selectSearchType.emit(searchTypeValue);
+        };
+        SearchToolbarComponent.decorators = [
+            { 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}"]
+                    }] }
+        ];
+        /** @nocollapse */
+        SearchToolbarComponent.ctorParameters = function () { return [
+            { type: core.Injector }
+        ]; };
+        SearchToolbarComponent.propDecorators = {
+            label: [{ type: core.Input }],
+            searchTypes: [{ type: core.Input }],
+            nbItem: [{ type: core.Input }],
+            nbItemLabel: [{ type: core.Input }],
+            selectSearchType: [{ type: core.Output }]
+        };
+        return SearchToolbarComponent;
+    }(ngxOdeCore.OdeComponent));
+    if (false) {
+        /** @type {?} */
+        SearchToolbarComponent.prototype.label;
+        /** @type {?} */
+        SearchToolbarComponent.prototype.searchTypes;
+        /** @type {?} */
+        SearchToolbarComponent.prototype.nbItem;
+        /** @type {?} */
+        SearchToolbarComponent.prototype.nbItemLabel;
+        /** @type {?} */
+        SearchToolbarComponent.prototype.selectSearchType;
+        /** @type {?} */
+        SearchToolbarComponent.prototype.selectedSearchTypeValue;
+    }
+
     /**
      * @fileoverview added by tsickle
      * Generated from: lib/ngx-ode-ui.module.ts
@@ -5518,7 +5610,8 @@
                             BytesPipe,
                             KeysPipe,
                             LengthPipe,
-                            DropdownComponent
+                            DropdownComponent,
+                            SearchToolbarComponent
                         ],
                         imports: [
                             common.CommonModule,
@@ -5556,6 +5649,7 @@
                             PagerComponent,
                             EllipsisComponent,
                             DropdownComponent,
+                            SearchToolbarComponent,
                             // directives
                             AnchorDirective,
                             DynamicTemplateDirective,
@@ -5638,6 +5732,7 @@
     exports.toDecimal = toDecimal;
     exports.trim = trim;
     exports.ɵa = DropdownComponent;
+    exports.ɵb = SearchToolbarComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });