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

package/fesm2015/ngx-ode-ui.js

@@ -1221,9 +1221,9 @@ class ListComponent extends OdeComponent {
         /* 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 EventEmitter();
@@ -1264,8 +1264,8 @@ class ListComponent extends OdeComponent {
 ListComponent.decorators = [
     { type: 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 */
@@ -1280,6 +1280,7 @@ ListComponent.propDecorators = {
     limit: [{ type: Input }],
     searchPlaceholder: [{ type: Input }],
     noResultsLabel: [{ type: Input }],
+    placeholder: [{ type: Input }],
     isSearchActive: [{ type: Input }],
     searchInput: [{ type: Input }],
     searchSubmit: [{ type: Input }],
@@ -1312,6 +1313,8 @@ if (false) {
     /** @type {?} */
     ListComponent.prototype.noResultsLabel;
     /** @type {?} */
+    ListComponent.prototype.placeholder;
+    /** @type {?} */
     ListComponent.prototype.isSearchActive;
     /** @type {?} */
     ListComponent.prototype.searchInput;
@@ -4732,6 +4735,88 @@ if (false) {
     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>
+ * ```
+ */
+class SearchToolbarComponent extends OdeComponent {
+    /**
+     * @param {?} injector
+     */
+    constructor(injector) {
+        super(injector);
+        this.nbItem = 0;
+        this.selectSearchType = new EventEmitter();
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+        if (this.searchTypes && this.searchTypes.length > 0) {
+            this.selectedSearchTypeValue = this.searchTypes[0].value;
+        }
+    }
+    /**
+     * @param {?} searchTypeValue
+     * @return {?}
+     */
+    handleSearchTypeClick(searchTypeValue) {
+        this.selectedSearchTypeValue = searchTypeValue;
+        this.selectSearchType.emit(searchTypeValue);
+    }
+}
+SearchToolbarComponent.decorators = [
+    { type: 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 = () => [
+    { type: Injector }
+];
+SearchToolbarComponent.propDecorators = {
+    label: [{ type: Input }],
+    searchTypes: [{ type: Input }],
+    nbItem: [{ type: Input }],
+    nbItemLabel: [{ type: Input }],
+    selectSearchType: [{ type: Output }]
+};
+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
@@ -4808,7 +4893,8 @@ NgxOdeUiModule.decorators = [
                     BytesPipe,
                     KeysPipe,
                     LengthPipe,
-                    DropdownComponent
+                    DropdownComponent,
+                    SearchToolbarComponent
                 ],
                 imports: [
                     CommonModule,
@@ -4846,6 +4932,7 @@ NgxOdeUiModule.decorators = [
                     PagerComponent,
                     EllipsisComponent,
                     DropdownComponent,
+                    SearchToolbarComponent,
                     // directives
                     AnchorDirective,
                     DynamicTemplateDirective,
@@ -4880,5 +4967,5 @@ NgxOdeUiModule.decorators = [
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { AnchorDirective, BytesPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, ComponentDescriptor, DatepickerComponent, DragAndDropFilesDirective, DynamicComponentDirective, DynamicModuleImportsService, DynamicTemplateDirective, EllipsisComponent, FilterPipe, FlattenObjectArrayPipe, FormErrorsComponent, FormFieldComponent, InputFileService, ItemTreeComponent, KeysPipe, LabelsService, LengthPipe, LightBoxComponent, LightboxConfirmComponent, LimitPipe, ListCheckableComponent, ListComponent, LocalizedDatePipe, MessageBoxComponent, MessageStickerComponent, MonoSelectComponent, MultiComboComponent, MultiSelectComponent, NgxOdeUiModule, ObjectURLDirective, OrderPipe, PagerComponent, PanelSectionComponent, PortalComponent, PushPanelComponent, SearchInputComponent, SideLayoutComponent, SidePanelComponent, SimpleSelectComponent, SpinnerCubeComponent, SpinnerService, StepComponent, StorePipe, TooltipComponent, UNITS, UploadFilesComponent, WizardComponent, clickOn, getText, getUnit, icons, removeAccents, standardise, toDecimal, trim, DropdownComponent as ɵa };
+export { AnchorDirective, BytesPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, ComponentDescriptor, DatepickerComponent, DragAndDropFilesDirective, DynamicComponentDirective, DynamicModuleImportsService, DynamicTemplateDirective, EllipsisComponent, FilterPipe, FlattenObjectArrayPipe, FormErrorsComponent, FormFieldComponent, InputFileService, ItemTreeComponent, KeysPipe, LabelsService, LengthPipe, LightBoxComponent, LightboxConfirmComponent, LimitPipe, ListCheckableComponent, ListComponent, LocalizedDatePipe, MessageBoxComponent, MessageStickerComponent, MonoSelectComponent, MultiComboComponent, MultiSelectComponent, NgxOdeUiModule, ObjectURLDirective, OrderPipe, PagerComponent, PanelSectionComponent, PortalComponent, PushPanelComponent, SearchInputComponent, SideLayoutComponent, SidePanelComponent, SimpleSelectComponent, SpinnerCubeComponent, SpinnerService, StepComponent, StorePipe, TooltipComponent, UNITS, UploadFilesComponent, WizardComponent, clickOn, getText, getUnit, icons, removeAccents, standardise, toDecimal, trim, DropdownComponent as ɵa, SearchToolbarComponent as ɵb };
 //# sourceMappingURL=ngx-ode-ui.js.map