ngx-ode-ui 3.12.0-dev.2 → 3.12.0-dev.20

package/fesm2015/ngx-ode-ui.js

@@ -353,6 +353,7 @@ class DatepickerComponent extends OdeComponent {
         this.labelsService = labelsService;
         this.innerValue = '';
         this.disabled = false;
+        this._readonly = false;
         this.enableTime = false;
         this.placeholder = '';
         this.changeDate = new EventEmitter();
@@ -383,6 +384,26 @@ class DatepickerComponent extends OdeComponent {
             }
         }
     }
+    /**
+     * @param {?} val
+     * @return {?}
+     */
+    set readonly(val) {
+        this._readonly = val;
+        if (this.datePickerInst && this.datePickerInst.altInput) {
+            // Apply the readonly attribute addition/removal to the visible input (wrapped)
+            if (val)
+                this.datePickerInst.altInput.setAttribute('readonly', "");
+            else
+                this.datePickerInst.altInput.removeAttribute('readonly');
+        }
+    }
+    /**
+     * @return {?}
+     */
+    get readonly() {
+        return this._readonly;
+    }
     /**
      * @return {?}
      */
@@ -413,12 +434,25 @@ class DatepickerComponent extends OdeComponent {
             enableTime: this.enableTime,
             minDate: this.minDate,
             maxDate: this.maxDate,
-            clickOpens: !this.disabled,
+            clickOpens: false,
             wrap: true,
             // to add input decoration (calendar icon and delete icon)
             locale: datePickerLocale
         };
         this.datePickerInst = new Flatpickr(this.datePickerElement.nativeElement, options);
+        if (!this.disabled) {
+            this.datePickerInst.altInput.addEventListener('click', (/**
+             * @param {?} e
+             * @return {?}
+             */
+            e => {
+                if (!this.readonly) {
+                    this.datePickerInst.toggle();
+                }
+            }));
+        }
+        // Force updating the date input readonly attribute :
+        this.readonly = this._readonly;
     }
     /**
      * @return {?}
@@ -463,8 +497,9 @@ class DatepickerComponent extends OdeComponent {
 DatepickerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'ode-date-picker',
-                template: "<div class=\"flatpickr\" #datePickerElement>\n  <input type=\"date\" [(ngModel)]=\"value\" [ngClass]=\"{ 'cursor-default': disabled }\" placeholder=\"{{ placeholder }}\" #inputRef>\n  <a *ngIf=\"!disabled\" data-toggle [title]=\"labels('datepicker.open')\"><i class=\"fa fa-calendar open\" aria-hidden=\"true\"></i></a>\n  <a *ngIf=\"!disabled\" data-clear [title]=\"labels('datepicker.delete')\"><i class=\"fa fa-times delete\" aria-hidden=\"true\"></i></a>\n</div>\n",
-                providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
+                template: "<div class=\"flatpickr\" #datePickerElement>\n  <input type=\"date\" [(ngModel)]=\"value\" [disabled]=\"disabled\" [ngClass]=\"{ 'cursor-default': disabled }\" placeholder=\"{{ placeholder }}\" #inputRef>\n  <a *ngIf=\"!disabled\" [class.hidden]=\"readonly\" data-toggle [title]=\"labels('datepicker.open')\"><i class=\"fa fa-calendar open\" aria-hidden=\"true\"></i></a>\n  <a *ngIf=\"!disabled\" [class.hidden]=\"readonly\" data-clear [title]=\"labels('datepicker.delete')\"><i class=\"fa fa-times delete\" aria-hidden=\"true\"></i></a>\n</div>\n",
+                providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR],
+                styles: [".hidden{visibility:hidden}"]
             }] }
 ];
 /** @nocollapse */
@@ -478,6 +513,7 @@ DatepickerComponent.propDecorators = {
     inputElement: [{ type: ViewChild, args: ['inputRef', { static: false },] }],
     model: [{ type: ViewChild, args: [NgModel, { static: false },] }],
     disabled: [{ type: Input }],
+    readonly: [{ type: Input }],
     enableTime: [{ type: Input }],
     placeholder: [{ type: Input }],
     minDate: [{ type: Input }],
@@ -504,6 +540,8 @@ if (false) {
     /** @type {?} */
     DatepickerComponent.prototype.disabled;
     /** @type {?} */
+    DatepickerComponent.prototype._readonly;
+    /** @type {?} */
     DatepickerComponent.prototype.enableTime;
     /** @type {?} */
     DatepickerComponent.prototype.placeholder;
@@ -1221,9 +1259,12 @@ 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.isSearchButtonDisabled = false;
+        this.searchInput = false;
         this.inputChange = new EventEmitter();
         this.onSelect = new EventEmitter();
         this.listChange = new EventEmitter();
@@ -1262,8 +1303,8 @@ class ListComponent extends OdeComponent {
 ListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'ode-list',
-                template: "<ode-search-input [attr.placeholder]=\"searchPlaceholder | translate\" (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  [isSearchButtonDisabled]=\"isSearchButtonDisabled\"\n  [searchInput]=\"searchInput\"\n  [searchSubmit]=\"searchSubmit\"\n  [delay]=\"searchDelay\"\n  [attr.placeholder]=\"searchPlaceholder | translate\"\n  (onChange)=\"inputChange.emit($event)\"\n>\n</ode-search-input>\n\n<div class=\"toolbar\">\n  <ng-content select=\"[toolbar]\"></ng-content>\n</div>\n\n<div\n  class=\"list-wrapper\"\n  infiniteScroll\n  [scrollWindow]=\"false\"\n  (scrolled)=\"scrolledDown.emit()\"\n  [infiniteScrollThrottle]=\"50\"\n>\n  <ul>\n    <li\n      *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    >\n      <ng-template [ngTemplateOutlet]=\"templateRef\" [ngTemplateOutletContext]=\"{$implicit: item}\">\n      </ng-template>\n    </li>\n  </ul>\n\n  <ul *ngIf=\"storedElements && storedElements.length === 0\">\n    <li class=\"no-results\">{{ noResultsLabel | translate }}</li>\n  </ul>\n\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 */
@@ -1278,6 +1319,12 @@ ListComponent.propDecorators = {
     limit: [{ type: Input }],
     searchPlaceholder: [{ type: Input }],
     noResultsLabel: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    isSearchActive: [{ type: Input }],
+    isSearchButtonDisabled: [{ type: Input }],
+    searchInput: [{ type: Input }],
+    searchDelay: [{ type: Input }],
+    searchSubmit: [{ type: Input }],
     inputChange: [{ type: Output }],
     onSelect: [{ type: Output }],
     listChange: [{ type: Output }],
@@ -1307,6 +1354,18 @@ if (false) {
     /** @type {?} */
     ListComponent.prototype.noResultsLabel;
     /** @type {?} */
+    ListComponent.prototype.placeholder;
+    /** @type {?} */
+    ListComponent.prototype.isSearchActive;
+    /** @type {?} */
+    ListComponent.prototype.isSearchButtonDisabled;
+    /** @type {?} */
+    ListComponent.prototype.searchInput;
+    /** @type {?} */
+    ListComponent.prototype.searchDelay;
+    /** @type {?} */
+    ListComponent.prototype.searchSubmit;
+    /** @type {?} */
     ListComponent.prototype.inputChange;
     /** @type {?} */
     ListComponent.prototype.onSelect;
@@ -1324,6 +1383,141 @@ if (false) {
     ListComponent.prototype.ngClass;
 }
 
+/**
+ * @fileoverview added by tsickle
+ * Generated from: lib/components/list-checkable/list-checkable.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class ListCheckableComponent extends OdeComponent {
+    /**
+     * @param {?} injector
+     */
+    constructor(injector) {
+        super(injector);
+        this.model = [];
+        this.noResultsLabel = 'list.results.no.items';
+        this.readOnly = false;
+        this.onCheck = new EventEmitter();
+        this.listChange = new EventEmitter();
+        this.scrolledDown = new EventEmitter();
+        this.areAllChecked = (/**
+         * @return {?}
+         */
+        () => false);
+        this.isChecked = (/**
+         * @param {?=} arg
+         * @return {?}
+         */
+        (arg) => false);
+        this.isDisabled = (/**
+         * @param {?=} arg
+         * @return {?}
+         */
+        (arg) => false);
+        this.ngClass = (/**
+         * @param {?=} arg
+         * @return {?}
+         */
+        (arg) => ({}));
+        /* Store pipe */
+        this.self = this;
+        this._storedElements = [];
+    }
+    /**
+     * @param {?} list
+     * @return {?}
+     */
+    set storedElements(list) {
+        this._storedElements = list;
+        this.listChange.emit(list);
+    }
+    /**
+     * @return {?}
+     */
+    get storedElements() {
+        return this._storedElements;
+    }
+    /**
+     * @param {?} checkAll
+     * @return {?}
+     */
+    toggleAll(checkAll) {
+        this.model.forEach((/**
+         * @param {?} item
+         * @return {?}
+         */
+        item => {
+            /** @type {?} */
+            const isChecked = this.isChecked(item);
+            if (!this.isDisabled(item)
+                && ((isChecked && !checkAll) || (!isChecked && checkAll))) {
+                this.onCheck.emit({ item: item, checked: checkAll });
+            }
+        }));
+    }
+}
+ListCheckableComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'ode-list-checkable',
+                template: "<div class=\"list-checkable-wrapper\"\n     infiniteScroll\n     [scrollWindow]=\"false\"\n     (scrolled)=\"scrolledDown.emit()\"\n     [infiniteScrollThrottle]=\"50\">\n\n  <ul *ngIf=\"storedElements && storedElements.length === 0\">\n    <li class=\"no-results\"><span>{{ noResultsLabel | translate }}</span></li>\n  </ul>\n  \n  <ul>\n    <li class=\"select-all\" \n        [class.checked]=\"areAllChecked()\"\n        *ngIf=\"!readOnly\">\n      <label>\n        <span>{{(areAllChecked() ? 'ux.multiselect.deselect-all' : 'ux.multiselect.select-all') | translate}}</span>\n        <input type=\"checkbox\" [checked]=\"areAllChecked()\" (change)=\"toggleAll($event.target.checked)\" />\n      </label>\n    </li>\n\n    <li class=\"lct-list-checkable-item\" \n        [class.checked]=\"isChecked(item)\"\n        [class.disabled]=\"isDisabled(item)\"\n        [ngClass]=\"ngClass(item)\"\n        *ngFor=\"let item of model | filter: filters | store:self:'storedElements' | orderBy: sort | slice: 0:limit\">\n      <label>\n        <span>\n          <ng-template [ngTemplateOutlet]=\"templateRef\" [ngTemplateOutletContext]=\"{$implicit: item}\"></ng-template>        \n        </span>\n        <input *ngIf=\"!readOnly\" type=\"checkbox\" \n              [disabled]=\"isDisabled(item)\"\n              [checked]=\"isChecked(item)\"\n              (change)=\"onCheck.emit({item:item, checked:$event.target.checked})\"/>\n      </label>\n    </li>\n  </ul>\n\n</div>\n",
+                styles: ["ul{margin:0;padding:0;font-size:.9em}ul li{border-top:1px solid #ddd;width:-webkit-fill-available;width:-moz-available;display:flex}ul li:not(.checked){color:#939393}ul li.disabled{pointer-events:none}ul li.select-all{background-color:#ff83520a;color:#5b6472}ul li.select-all span{text-align:right}ul li label{cursor:pointer;width:100%;display:flex}ul li label:hover{background-color:#eaedf2}ul li label span{padding:7px 15px;width:100%}ul li label input[type=checkbox]{margin-right:15px;-ms-grid-row-align:center;align-self:center}"]
+            }] }
+];
+/** @nocollapse */
+ListCheckableComponent.ctorParameters = () => [
+    { type: Injector }
+];
+ListCheckableComponent.propDecorators = {
+    model: [{ type: Input }],
+    filters: [{ type: Input }],
+    sort: [{ type: Input }],
+    limit: [{ type: Input }],
+    noResultsLabel: [{ type: Input }],
+    readOnly: [{ type: Input }],
+    onCheck: [{ type: Output }],
+    listChange: [{ type: Output }],
+    scrolledDown: [{ type: Output }],
+    templateRef: [{ type: ContentChild, args: [TemplateRef, { static: false },] }],
+    areAllChecked: [{ type: Input }],
+    isChecked: [{ type: Input }],
+    isDisabled: [{ type: Input }],
+    ngClass: [{ type: Input }]
+};
+if (false) {
+    /** @type {?} */
+    ListCheckableComponent.prototype.model;
+    /** @type {?} */
+    ListCheckableComponent.prototype.filters;
+    /** @type {?} */
+    ListCheckableComponent.prototype.sort;
+    /** @type {?} */
+    ListCheckableComponent.prototype.limit;
+    /** @type {?} */
+    ListCheckableComponent.prototype.noResultsLabel;
+    /** @type {?} */
+    ListCheckableComponent.prototype.readOnly;
+    /** @type {?} */
+    ListCheckableComponent.prototype.onCheck;
+    /** @type {?} */
+    ListCheckableComponent.prototype.listChange;
+    /** @type {?} */
+    ListCheckableComponent.prototype.scrolledDown;
+    /** @type {?} */
+    ListCheckableComponent.prototype.templateRef;
+    /** @type {?} */
+    ListCheckableComponent.prototype.areAllChecked;
+    /** @type {?} */
+    ListCheckableComponent.prototype.isChecked;
+    /** @type {?} */
+    ListCheckableComponent.prototype.isDisabled;
+    /** @type {?} */
+    ListCheckableComponent.prototype.ngClass;
+    /** @type {?} */
+    ListCheckableComponent.prototype.self;
+    /** @type {?} */
+    ListCheckableComponent.prototype._storedElements;
+}
+
 /**
  * @fileoverview added by tsickle
  * Generated from: lib/components/message-box/message-box.component.ts
@@ -2017,7 +2211,7 @@ class MultiComboComponent extends OdeComponent {
 MultiComboComponent.decorators = [
     { type: Component, args: [{
                 selector: 'ode-multi-combo',
-                template: "<button (click)=\"toggleVisibility()\"\n        [ngClass]=\"{ opened: show }\"\n        [disabled]=\"disabled\">\n  {{ title }}\n</button>\n<div [ngClass]=\"{ hidden: !show }\">\n  <div class=\"options\">\n    <button class=\"select-all\" (click)=\"selectAll()\" *ngIf=\"!maxSelected\"\n            [title]=\"labels('select.all')\">{{ labels('select.all') }}</button>\n    <button class=\"deselect-all\" (click)=\"deselectAll()\"\n            [title]=\"labels('deselect.all')\">{{ labels('deselect.all') }}</button>\n  </div>\n  <div *ngIf=\"filter\" class=\"filter\">\n    <ode-search-input (onChange)=\"search.input = $event\" [attr.placeholder]=\"labels('search')\"></ode-search-input>\n  </div>\n  <ul>\n    <li *ngFor=\"let item of _comboModel | filter: getFilter() | orderBy: orderBy | store: self:'filteredComboModel'\"\n        (click)=\"toggleItem(item)\"\n        [ngClass]=\"{ selected: isSelected(item) }\"\n        [attr.disabled]=\"isDisabled()\">\n      {{ displayItem(item) | translate }}\n    </li>\n  </ul>\n</div>\n",
+                template: "<button (click)=\"toggleVisibility()\"\n        [ngClass]=\"{ opened: show }\"\n        [disabled]=\"disabled\"\n        type=\"button\">\n  {{ title }}\n</button>\n<div [ngClass]=\"{ hidden: !show }\">\n  <div class=\"options\">\n    <button class=\"select-all\" (click)=\"selectAll()\" *ngIf=\"!maxSelected\"\n            [title]=\"labels('select.all')\" type=\"button\">{{ labels('select.all') }}</button>\n    <button class=\"deselect-all\" (click)=\"deselectAll()\"\n            [title]=\"labels('deselect.all')\" type=\"button\">{{ labels('deselect.all') }}</button>\n  </div>\n  <div *ngIf=\"filter\" class=\"filter\">\n    <ode-search-input (onChange)=\"search.input = $event\" [attr.placeholder]=\"labels('search')\"></ode-search-input>\n  </div>\n  <ul>\n    <li *ngFor=\"let item of _comboModel | filter: getFilter() | orderBy: orderBy | store: self:'filteredComboModel'\"\n        (click)=\"toggleItem(item)\"\n        [ngClass]=\"{ selected: isSelected(item) }\"\n        [attr.disabled]=\"isDisabled()\">\n      {{ displayItem(item) | translate }}\n    </li>\n  </ul>\n</div>\n",
                 host: {
                     '(document:click)': 'onClick($event)',
                 },
@@ -2461,12 +2655,15 @@ class SearchInputComponent extends OdeComponent {
         super(injector);
         this._elRef = _elRef;
         this._renderer = _renderer;
+        /* Inputs / Outputs / View */
+        this.isSearchActive = false;
+        this.isSearchButtonDisabled = false;
+        this.searchInput = false;
         this._delay = 200;
         this.onChange = new EventEmitter();
         /* Internal logic */
         this.$searchTerms = new Subject();
     }
-    /* Inputs / Outputs / View */
     /**
      * @param {?} d
      * @return {?}
@@ -2541,11 +2738,19 @@ class SearchInputComponent extends OdeComponent {
     search(str) {
         this.$searchTerms.next(str);
     }
+    /**
+     * @return {?}
+     */
+    handleSubmit() {
+        this.searchSubmit();
+        this.searchBox.nativeElement.value = '';
+    }
 }
 SearchInputComponent.decorators = [
     { type: Component, args: [{
                 selector: 'ode-search-input',
-                template: "<input type=\"search\" #searchBox (input)=\"search(searchBox.value)\"/>\n"
+                template: "<form\n    class=\"search-container\"\n    (ngSubmit)=\"searchInput && handleSubmit()\">\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}"]
             }] }
 ];
 /** @nocollapse */
@@ -2555,11 +2760,23 @@ SearchInputComponent.ctorParameters = () => [
     { type: Renderer2 }
 ];
 SearchInputComponent.propDecorators = {
+    isSearchActive: [{ type: Input }],
+    isSearchButtonDisabled: [{ type: Input }],
+    searchInput: [{ type: Input }],
+    searchSubmit: [{ type: Input }],
     delay: [{ type: Input }],
     onChange: [{ type: Output }],
     searchBox: [{ type: ViewChild, args: ['searchBox', { static: false },] }]
 };
 if (false) {
+    /** @type {?} */
+    SearchInputComponent.prototype.isSearchActive;
+    /** @type {?} */
+    SearchInputComponent.prototype.isSearchButtonDisabled;
+    /** @type {?} */
+    SearchInputComponent.prototype.searchInput;
+    /** @type {?} */
+    SearchInputComponent.prototype.searchSubmit;
     /**
      * @type {?}
      * @private
@@ -4500,6 +4717,162 @@ function clickOn(el) {
     return el.triggerEventHandler('click', null);
 }
 
+/**
+ * @fileoverview added by tsickle
+ * Generated from: lib/components/dropdown/dropdown.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * DropdownComponent is an alternative to the MonoSelectComponent.
+ * Accept everything inside <ng-content> but should work with <ode-list> component
+ *
+ * Simple Dropdown Component without search:
+ * [isSearchActive] can be set to false to disable search input in <ode-list>
+ * ```
+ * <ode-dropdown
+ * [name]="option_name"
+ * [isDropdownOpened]="a_boolean"
+ * (onDropdown)="toggle_func"
+ * >
+ * <ode-list
+ * [model]="model"
+ * [filters]="filters"
+ * (onSelect)="func_to_select_elem($event)"
+ * (inputChange)="a_string_for_input_value = $event"
+ * noResultsLabel="text_to_display"
+ * searchPlaceholder="default_placeholder_text"
+ * >
+ * <ng-template let-item>
+ * <div>{{ item.name }}</div>
+ * </ng-template>
+ * </ode-list>
+ * </ode-dropdown>
+ * `̀``
+ */
+class DropdownComponent extends OdeComponent {
+    /**
+     * @param {?} injector
+     */
+    constructor(injector) {
+        super(injector);
+        this.name = '';
+        this.isDropdownOpened = false;
+        this.onDropdown = new EventEmitter();
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+        super.ngOnInit();
+    }
+}
+DropdownComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'ode-dropdown',
+                template: "<div class=\"dropdown\" [ngClass]=\"isDropdownOpened ? 'open' : ''\">\n  <button (click)=\"onDropdown.emit()\" class=\"dropdown-trigger\">\n    <span class=\"cell-ellipsis\">{{ name }}</span> <i class=\"fonticon arrow-select\"></i>\n  </button>\n  <div class=\"dropdown-list\">\n    <ng-content></ng-content>\n  </div>\n</div>\n",
+                styles: [".dropdown{position:relative;width:230px;box-sizing:border-box}.dropdown *{box-sizing:border-box}.dropdown-trigger{cursor:pointer;display:inline-flex;align-items:center;justify-content:space-between;padding:12px 16px;font-size:14px;color:#4a4a4a;text-transform:uppercase;text-align:left;width:100%;border-radius:8px;border:1px solid #7a7a7a;background-color:#fff}.dropdown-trigger>span{display:inline-block;max-width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.dropdown-trigger i.arrow-select{display:inline-block;float:none!important;padding-left:0;transform:rotate(180deg);transform-origin:center center}.dropdown-trigger:hover{color:#4a4a4a;border-color:#7a7a7a;background-color:#fff}.dropdown-trigger:hover i.arrow-select{color:#4a4a4a!important}.dropdown-list{display:none;position:absolute;overflow:hidden;z-index:2;top:100%;left:0;right:0;width:316px;box-shadow:0 4px 12px 0 rgba(0,0,0,.15);border-radius:8px;background-color:#fff}.dropdown::ng-deep ode-list li{justify-content:flex-start}.dropdown::ng-deep ode-list input[type=search]{padding:12px 16px}.dropdown.open .dropdown-list{display:block}.dropdown.open i.arrow-select{transform:rotate(0)}"]
+            }] }
+];
+/** @nocollapse */
+DropdownComponent.ctorParameters = () => [
+    { type: Injector }
+];
+DropdownComponent.propDecorators = {
+    name: [{ type: Input }],
+    isDropdownOpened: [{ type: Input }],
+    onDropdown: [{ type: Output }]
+};
+if (false) {
+    /** @type {?} */
+    DropdownComponent.prototype.name;
+    /** @type {?} */
+    DropdownComponent.prototype.isDropdownOpened;
+    /** @type {?} */
+    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:.85rem}.search-toolbar .search-toolbar-label .button{padding:4px 12px;border-radius:20px;font-size:12px;border-width:2px;border-color:#ff8d2e}"]
+            }] }
+];
+/** @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
@@ -4540,6 +4913,7 @@ NgxOdeUiModule.decorators = [
                     LightBoxComponent,
                     LightboxConfirmComponent,
                     ListComponent,
+                    ListCheckableComponent,
                     MonoSelectComponent,
                     MultiSelectComponent,
                     MultiComboComponent,
@@ -4574,7 +4948,9 @@ NgxOdeUiModule.decorators = [
                     LocalizedDatePipe,
                     BytesPipe,
                     KeysPipe,
-                    LengthPipe
+                    LengthPipe,
+                    DropdownComponent,
+                    SearchToolbarComponent
                 ],
                 imports: [
                     CommonModule,
@@ -4591,6 +4967,7 @@ NgxOdeUiModule.decorators = [
                     LightBoxComponent,
                     LightboxConfirmComponent,
                     ListComponent,
+                    ListCheckableComponent,
                     MonoSelectComponent,
                     MultiSelectComponent,
                     MultiComboComponent,
@@ -4610,6 +4987,8 @@ NgxOdeUiModule.decorators = [
                     SpinnerCubeComponent,
                     PagerComponent,
                     EllipsisComponent,
+                    DropdownComponent,
+                    SearchToolbarComponent,
                     // directives
                     AnchorDirective,
                     DynamicTemplateDirective,
@@ -4644,5 +5023,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, 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 };
+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