ngx-ode-ui 3.12.0-dev.0 → 3.12.0-dev.12

package/fesm5/ngx-ode-ui.js

@@ -1,4 +1,4 @@
-import { Injectable, ApplicationRef, forwardRef, EventEmitter, Component, Renderer2, Injector, ViewChild, Input, Output, ElementRef, ContentChild, TemplateRef, Directive, ViewContainerRef, ComponentFactoryResolver, ChangeDetectionStrategy, ContentChildren, HostListener, HostBinding, NgModule, Compiler, Pipe } from '@angular/core';
+import { Injectable, ApplicationRef, forwardRef, EventEmitter, Component, Renderer2, Injector, ViewChild, Input, Output, ElementRef, ContentChild, TemplateRef, HostBinding, Directive, ViewContainerRef, ComponentFactoryResolver, ChangeDetectionStrategy, ContentChildren, HostListener, NgModule, Compiler, Pipe } from '@angular/core';
 import { throwError, Observable, Subject } from 'rxjs';
 import { __spread, __extends, __values } from 'tslib';
 import { OdeComponent } from 'ngx-ode-core';
@@ -1002,7 +1002,7 @@ var ItemTreeComponent = /** @class */ (function (_super) {
      * @return {?}
      */
     function (item) {
-        return item[this.displayProperty];
+        return this.displayProperty && item[this.displayProperty];
     };
     /**
      * @param {?} item
@@ -1084,7 +1084,7 @@ var ItemTreeComponent = /** @class */ (function (_super) {
     ItemTreeComponent.decorators = [
         { type: Component, args: [{
                     selector: 'ode-item-tree',
-                    template: "<ul [ngClass]=\"{ flattened: isFlattened() }\">\n  <li *ngFor=\"let item of (items | flattenObjArray: flatten | filter: filter | orderBy: order:reverse)\"\n      [ngClass]=\"{ selected: isSelected(item), unfolded: !isFolded(item), parent: hasChildren(item), root: _depth === 0 }\">\n    <a href=\"javascript:void(0)\" (click)=\"selectItem(item)\" *ngIf=\"!checkboxMode\">\n      <i class=\"opener\" (click)=\"toggleFold($event, item)\"\n         *ngIf=\"!isFlattened() && hasChildren(item) && !disableOpener\"></i>\n      {{ display(item) }}\n    </a>\n    <div class=\"checkbox__item\" *ngIf=\"checkboxMode\">\n      <input id=\"all\" type=\"checkbox\" [(ngModel)]=\"item.check\" ngDefaultControl>\n      <label for=\"all\" (click)=\"checkItem(item)\">{{display(item)}}</label>\n    </div>\n    <ode-item-tree\n      [items]=\"getChildren(item)\"\n      [children]=\"childrenProperty\"\n      [display]=\"displayProperty\"\n      [filter]=\"filter\"\n      [order]=\"order\"\n      [reverse]=\"reverse\"\n      [lastSelected]=\"_lastSelectedItem\"\n      [depth]=\"_depth + 1\"\n      [disableOpener]=\"disableOpener\"\n      [checkboxMode]=\"checkboxMode\"\n      (onSelect)=\"bubbleSelect($event)\"\n      (onCheck)=\"checkItem($event)\"\n      *ngIf=\"(checkboxMode && hasChildren(item)) || (!isFlattened() && hasChildren(item) && !isFolded(item))\">\n    </ode-item-tree>\n  </li>\n</ul>\n"
+                    template: "<ul [ngClass]=\"{ flattened: isFlattened() }\">\n  <li *ngFor=\"let item of (items | flattenObjArray: flatten | filter: filter | orderBy: order:reverse)\"\n      [ngClass]=\"{ selected: isSelected(item), unfolded: !isFolded(item), parent: hasChildren(item), root: _depth === 0 }\">\n    <a href=\"javascript:void(0)\" (click)=\"selectItem(item)\" *ngIf=\"!checkboxMode\">\n      <i class=\"opener\" (click)=\"toggleFold($event, item)\"\n         *ngIf=\"!isFlattened() && hasChildren(item) && !disableOpener\"></i>\n      <span *ngIf=\"displayProperty\">{{ display(item) }}</span>\n      <span *ngIf=\"displayTemplate\">\n        <ng-template [ngTemplateOutlet]=\"displayTemplate\" [ngTemplateOutletContext]=\"{$implicit: item}\"></ng-template>\n      </span>\n    </a>\n    <div class=\"checkbox__item\" *ngIf=\"checkboxMode\">\n      <input id=\"all\" type=\"checkbox\" [(ngModel)]=\"item.check\" ngDefaultControl>\n      <label *ngIf=\"displayProperty\" for=\"all\" (click)=\"checkItem(item)\">{{display(item)}}</label>\n      <span *ngIf=\"displayTemplate\">\n        <ng-template [ngTemplateOutlet]=\"displayTemplate\" [ngTemplateOutletContext]=\"{$implicit: item}\"></ng-template>\n      </span>\n    </div>\n    <ode-item-tree\n      [items]=\"getChildren(item)\"\n      [children]=\"childrenProperty\"\n      [display]=\"displayProperty\"\n      [displayTemplate]=\"displayTemplate\"\n      [filter]=\"filter\"\n      [order]=\"order\"\n      [reverse]=\"reverse\"\n      [lastSelected]=\"_lastSelectedItem\"\n      [depth]=\"_depth + 1\"\n      [disableOpener]=\"disableOpener\"\n      [checkboxMode]=\"checkboxMode\"\n      (onSelect)=\"bubbleSelect($event)\"\n      (onCheck)=\"checkItem($event)\"\n      *ngIf=\"(checkboxMode && hasChildren(item)) || (!isFlattened() && hasChildren(item) && !isFolded(item))\">\n    </ode-item-tree>\n  </li>\n</ul>\n"
                 }] }
     ];
     /** @nocollapse */
@@ -1095,6 +1095,7 @@ var ItemTreeComponent = /** @class */ (function (_super) {
         items: [{ type: Input }],
         childrenProperty: [{ type: Input, args: ['children',] }],
         displayProperty: [{ type: Input, args: ['display',] }],
+        displayTemplate: [{ type: Input }],
         filter: [{ type: Input }],
         order: [{ type: Input }],
         reverse: [{ type: Input }],
@@ -1120,6 +1121,8 @@ if (false) {
     /** @type {?} */
     ItemTreeComponent.prototype.displayProperty;
     /** @type {?} */
+    ItemTreeComponent.prototype.displayTemplate;
+    /** @type {?} */
     ItemTreeComponent.prototype.filter;
     /** @type {?} */
     ItemTreeComponent.prototype.order;
@@ -1377,9 +1380,11 @@ var ListComponent = /** @class */ (function (_super) {
         /* 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();
         _this.onSelect = new EventEmitter();
         _this.listChange = new EventEmitter();
@@ -1422,8 +1427,8 @@ var ListComponent = /** @class */ (function (_super) {
     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  [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.disabled{pointer-events:none}.placeholder{color:#aaa}"]
                 }] }
     ];
     /** @nocollapse */
@@ -1438,6 +1443,10 @@ var ListComponent = /** @class */ (function (_super) {
         limit: [{ type: Input }],
         searchPlaceholder: [{ type: Input }],
         noResultsLabel: [{ type: Input }],
+        placeholder: [{ type: Input }],
+        isSearchActive: [{ type: Input }],
+        searchInput: [{ type: Input }],
+        searchSubmit: [{ type: Input }],
         inputChange: [{ type: Output }],
         onSelect: [{ type: Output }],
         listChange: [{ type: Output }],
@@ -1469,6 +1478,14 @@ if (false) {
     /** @type {?} */
     ListComponent.prototype.noResultsLabel;
     /** @type {?} */
+    ListComponent.prototype.placeholder;
+    /** @type {?} */
+    ListComponent.prototype.isSearchActive;
+    /** @type {?} */
+    ListComponent.prototype.searchInput;
+    /** @type {?} */
+    ListComponent.prototype.searchSubmit;
+    /** @type {?} */
     ListComponent.prototype.inputChange;
     /** @type {?} */
     ListComponent.prototype.onSelect;
@@ -1486,6 +1503,150 @@ 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
+ */
+var ListCheckableComponent = /** @class */ (function (_super) {
+    __extends(ListCheckableComponent, _super);
+    function ListCheckableComponent(injector) {
+        var _this = _super.call(this, injector) || this;
+        _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 {?}
+         */
+        function () { return false; });
+        _this.isChecked = (/**
+         * @param {?=} arg
+         * @return {?}
+         */
+        function (arg) { return false; });
+        _this.isDisabled = (/**
+         * @param {?=} arg
+         * @return {?}
+         */
+        function (arg) { return false; });
+        _this.ngClass = (/**
+         * @param {?=} arg
+         * @return {?}
+         */
+        function (arg) { return ({}); });
+        /* Store pipe */
+        _this.self = _this;
+        _this._storedElements = [];
+        return _this;
+    }
+    Object.defineProperty(ListCheckableComponent.prototype, "storedElements", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._storedElements;
+        },
+        set: /**
+         * @param {?} list
+         * @return {?}
+         */
+        function (list) {
+            this._storedElements = list;
+            this.listChange.emit(list);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @param {?} checkAll
+     * @return {?}
+     */
+    ListCheckableComponent.prototype.toggleAll = /**
+     * @param {?} checkAll
+     * @return {?}
+     */
+    function (checkAll) {
+        var _this = this;
+        this.model.forEach((/**
+         * @param {?} item
+         * @return {?}
+         */
+        function (item) {
+            /** @type {?} */
+            var 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 = function () { return [
+        { 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 }]
+    };
+    return ListCheckableComponent;
+}(OdeComponent));
+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
@@ -1504,6 +1665,11 @@ var MessageBoxComponent = /** @class */ (function (_super) {
         var _this = _super.call(this, injector) || this;
         _this.eltRef = eltRef;
         _this._position = 'inherit';
+        /**
+         * `gravity` set the relative position of the message box if its position is 'absolute'.
+         * No effect when position is 'inherit'.
+         */
+        _this.gravity = 'left';
         _this.hidden = false;
         return _this;
     }
@@ -1554,6 +1720,22 @@ var MessageBoxComponent = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(MessageBoxComponent.prototype, "isGravityLeft", {
+        get: /**
+         * @return {?}
+         */
+        function () { return this.gravity === 'left'; },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MessageBoxComponent.prototype, "isGravityRight", {
+        get: /**
+         * @return {?}
+         */
+        function () { return this.gravity === 'right'; },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @return {?}
      */
@@ -1598,7 +1780,7 @@ var MessageBoxComponent = /** @class */ (function (_super) {
         { type: Component, args: [{
                     selector: 'message-box',
                     template: "<article class=\"message is-{{type}}\" [hidden]=\"hidden\">\n  <div *ngIf=\"header\" class=\"message-header\">\n    <p>\n      <i *ngIf=\"canHide()\" (click)=\"hide()\" class=\"fa fa-times-circle\"></i>\n      {{header | translate}}\n    </p>\n  </div>\n  <div class=\"message-body\">\n    <i *ngIf=\"canHide() && !header\" (click)=\"hide()\" class=\"fa fa-times-circle\"></i>\n    <p *ngFor=\"let message of messages\">\n      <s5l [s5l-params]=\"message[1]\">{{message[0]}}</s5l>\n    </p>\n  </div>\n</article>\n",
-                    styles: [":host{font-size:initial;position:inherit;top:-5px;right:-5px}:host .message{border:1px solid}i.fa-times-circle{display:inline-flex;float:right;cursor:pointer;font-weight:700}"]
+                    styles: [":host{font-size:initial;position:inherit;top:-5px}:host.gravity-left{right:-5px}:host.gravity-right{left:-5px}:host .message{border:1px solid}i.fa-times-circle{display:inline-flex;float:right;cursor:pointer;font-weight:700}"]
                 }] }
     ];
     /** @nocollapse */
@@ -1611,6 +1793,9 @@ var MessageBoxComponent = /** @class */ (function (_super) {
         header: [{ type: Input }],
         messages: [{ type: Input }],
         position: [{ type: Input }],
+        gravity: [{ type: Input }],
+        isGravityLeft: [{ type: HostBinding, args: ['class.gravity-left',] }],
+        isGravityRight: [{ type: HostBinding, args: ['class.gravity-right',] }],
         hideEvent: [{ type: Output, args: ['onHide',] }]
     };
     return MessageBoxComponent;
@@ -1630,6 +1815,12 @@ if (false) {
      * @private
      */
     MessageBoxComponent.prototype._position;
+    /**
+     * `gravity` set the relative position of the message box if its position is 'absolute'.
+     * No effect when position is 'inherit'.
+     * @type {?}
+     */
+    MessageBoxComponent.prototype.gravity;
     /** @type {?} */
     MessageBoxComponent.prototype.hidden;
     /** @type {?} */
@@ -1795,6 +1986,7 @@ var MessageStickerComponent = /** @class */ (function (_super) {
     __extends(MessageStickerComponent, _super);
     function MessageStickerComponent(injector) {
         var _this = _super.call(this, injector) || this;
+        _this.gravity = 'left';
         _this.icons = icons;
         return _this;
     }
@@ -1822,6 +2014,7 @@ var MessageStickerComponent = /** @class */ (function (_super) {
             header: this.header,
             messages: this.messages,
             position: 'absolute',
+            gravity: this.gravity,
             hideEvent: new EventEmitter()
         });
     };
@@ -1849,6 +2042,7 @@ var MessageStickerComponent = /** @class */ (function (_super) {
         type: [{ type: Input }],
         header: [{ type: Input }],
         messages: [{ type: Input }],
+        gravity: [{ type: Input }],
         dComponent: [{ type: ViewChild, args: [DynamicComponentDirective, { static: false },] }]
     };
     return MessageStickerComponent;
@@ -1861,6 +2055,8 @@ if (false) {
     /** @type {?} */
     MessageStickerComponent.prototype.messages;
     /** @type {?} */
+    MessageStickerComponent.prototype.gravity;
+    /** @type {?} */
     MessageStickerComponent.prototype.dComponent;
     /** @type {?} */
     MessageStickerComponent.prototype.icons;
@@ -1884,7 +2080,7 @@ var MonoSelectComponent = /** @class */ (function (_super) {
         _this.translateOptions = true;
         _this.opened = false;
         _this.selectedOption = null;
-        _this.isDisabled = false;
+        _this.disabled = false;
         _this.onChange = (/**
          * @param {?} _
          * @return {?}
@@ -1933,7 +2129,7 @@ var MonoSelectComponent = /** @class */ (function (_super) {
      * @return {?}
      */
     function () {
-        if (!this.opened && !this.isDisabled) {
+        if (!this.opened && !this.disabled) {
             this.opened = true;
         }
         else {
@@ -1971,7 +2167,7 @@ var MonoSelectComponent = /** @class */ (function (_super) {
      * @return {?}
      */
     function (isDisabled) {
-        this.isDisabled = isDisabled;
+        this.disabled = isDisabled;
     };
     /**
      * @param {?} obj
@@ -1992,7 +2188,7 @@ var MonoSelectComponent = /** @class */ (function (_super) {
     MonoSelectComponent.decorators = [
         { type: Component, args: [{
                     selector: 'ode-mono-select',
-                    template: "<div class=\"form-select lct-form-select\" [ngClass]=\"{'form-select--opened': opened, 'form-select--disabled': isDisabled}\">\n  <ul>\n    <li class=\"form-select__options--selected lct-form-select__options--selected\">\n      <strong>{{selectedOption ? ((translateOptions == true) ? (selectedOption.label | translate) : selectedOption.label) : (placeholder | translate)}}</strong>\n      <ul class=\"form-select__list lct-form-select__list\" *ngIf=\"opened\">\n        <li class=\"form-select__options lct-form-select__options\"\n            (click)=\"$event.stopPropagation(); optionClicked()\">{{placeholder | translate}}</li>\n        <li class=\"form-select__options lct-form-select__options\"\n            *ngFor=\"let option of options\"\n            (click)=\"$event.stopPropagation(); optionClicked(option)\">{{(translateOptions == true) ? (option.label | translate) : option.label}}</li>\n      </ul>\n    </li>\n  </ul>\n</div>\n",
+                    template: "<div class=\"form-select lct-form-select\" [ngClass]=\"{'form-select--opened': opened, 'form-select--disabled': disabled}\">\n  <ul>\n    <li class=\"form-select__options--selected lct-form-select__options--selected\">\n      <strong>{{selectedOption ? ((translateOptions == true) ? (selectedOption.label | translate) : selectedOption.label) : (placeholder | translate)}}</strong>\n      <ul class=\"form-select__list lct-form-select__list\" *ngIf=\"opened\">\n        <li class=\"form-select__options lct-form-select__options\"\n            (click)=\"$event.stopPropagation(); optionClicked()\">{{placeholder | translate}}</li>\n        <li class=\"form-select__options lct-form-select__options\"\n            *ngFor=\"let option of options\"\n            (click)=\"$event.stopPropagation(); optionClicked(option)\">{{(translateOptions == true) ? (option.label | translate) : option.label}}</li>\n      </ul>\n    </li>\n  </ul>\n</div>\n",
                     providers: [{
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef((/**
@@ -2016,7 +2212,8 @@ var MonoSelectComponent = /** @class */ (function (_super) {
         placeholder: [{ type: Input }],
         options: [{ type: Input }],
         trackByFn: [{ type: Input }],
-        translateOptions: [{ type: Input }]
+        translateOptions: [{ type: Input }],
+        disabled: [{ type: Input }]
     };
     return MonoSelectComponent;
 }(OdeComponent));
@@ -2034,7 +2231,7 @@ if (false) {
     /** @type {?} */
     MonoSelectComponent.prototype.selectedOption;
     /** @type {?} */
-    MonoSelectComponent.prototype.isDisabled;
+    MonoSelectComponent.prototype.disabled;
     /**
      * @type {?}
      * @private
@@ -2261,7 +2458,7 @@ var MultiComboComponent = /** @class */ (function (_super) {
     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)',
                     },
@@ -2752,6 +2949,9 @@ var SearchInputComponent = /** @class */ (function (_super) {
         var _this = _super.call(this, injector) || this;
         _this._elRef = _elRef;
         _this._renderer = _renderer;
+        /* Inputs / Outputs / View */
+        _this.isSearchActive = false;
+        _this.searchInput = false;
         _this._delay = 200;
         _this.onChange = new EventEmitter();
         /* Internal logic */
@@ -2765,9 +2965,7 @@ var SearchInputComponent = /** @class */ (function (_super) {
         function () {
             return this._delay;
         },
-        /* Inputs / Outputs / View */
-        set: /* Inputs / Outputs / View */
-        /**
+        set: /**
          * @param {?} d
          * @return {?}
          */
@@ -2857,7 +3055,8 @@ var SearchInputComponent = /** @class */ (function (_super) {
     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 && 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)\"/> -->",
+                    styles: [":host .search-container{margin:0;display:flex}:host .search-icon{padding-left:0}:host .search-button{margin:0;background:#ff8352;color:#fff}"]
                 }] }
     ];
     /** @nocollapse */
@@ -2867,6 +3066,9 @@ var SearchInputComponent = /** @class */ (function (_super) {
         { type: Renderer2 }
     ]; };
     SearchInputComponent.propDecorators = {
+        isSearchActive: [{ type: Input }],
+        searchInput: [{ type: Input }],
+        searchSubmit: [{ type: Input }],
         delay: [{ type: Input }],
         onChange: [{ type: Output }],
         searchBox: [{ type: ViewChild, args: ['searchBox', { static: false },] }]
@@ -2874,6 +3076,12 @@ var SearchInputComponent = /** @class */ (function (_super) {
     return SearchInputComponent;
 }(OdeComponent));
 if (false) {
+    /** @type {?} */
+    SearchInputComponent.prototype.isSearchActive;
+    /** @type {?} */
+    SearchInputComponent.prototype.searchInput;
+    /** @type {?} */
+    SearchInputComponent.prototype.searchSubmit;
     /**
      * @type {?}
      * @private
@@ -4909,110 +5117,6 @@ var LengthPipe = /** @class */ (function () {
     return LengthPipe;
 }());
 
-/**
- * @fileoverview added by tsickle
- * Generated from: lib/helpers/accents.helper.ts
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/** @type {?} */
-var defaultDiacriticsRemovalMap = [
-    { base: 'A', letters: /[\u0041\u24B6\uFF21\u00C0\u00C1\u00C2\u1EA6\u1EA4\u1EAA\u1EA8\u00C3\u0100\u0102\u1EB0\u1EAE\u1EB4\u1EB2\u0226\u01E0\u00C4\u01DE\u1EA2\u00C5\u01FA\u01CD\u0200\u0202\u1EA0\u1EAC\u1EB6\u1E00\u0104\u023A\u2C6F]/g },
-    { base: 'AA', letters: /[\uA732]/g },
-    { base: 'AE', letters: /[\u00C6\u01FC\u01E2]/g },
-    { base: 'AO', letters: /[\uA734]/g },
-    { base: 'AU', letters: /[\uA736]/g },
-    { base: 'AV', letters: /[\uA738\uA73A]/g },
-    { base: 'AY', letters: /[\uA73C]/g },
-    { base: 'B', letters: /[\u0042\u24B7\uFF22\u1E02\u1E04\u1E06\u0243\u0182\u0181]/g },
-    { base: 'C', letters: /[\u0043\u24B8\uFF23\u0106\u0108\u010A\u010C\u00C7\u1E08\u0187\u023B\uA73E]/g },
-    { base: 'D', letters: /[\u0044\u24B9\uFF24\u1E0A\u010E\u1E0C\u1E10\u1E12\u1E0E\u0110\u018B\u018A\u0189\uA779]/g },
-    { base: 'DZ', letters: /[\u01F1\u01C4]/g },
-    { base: 'Dz', letters: /[\u01F2\u01C5]/g },
-    { base: 'E', letters: /[\u0045\u24BA\uFF25\u00C8\u00C9\u00CA\u1EC0\u1EBE\u1EC4\u1EC2\u1EBC\u0112\u1E14\u1E16\u0114\u0116\u00CB\u1EBA\u011A\u0204\u0206\u1EB8\u1EC6\u0228\u1E1C\u0118\u1E18\u1E1A\u0190\u018E]/g },
-    { base: 'F', letters: /[\u0046\u24BB\uFF26\u1E1E\u0191\uA77B]/g },
-    { base: 'G', letters: /[\u0047\u24BC\uFF27\u01F4\u011C\u1E20\u011E\u0120\u01E6\u0122\u01E4\u0193\uA7A0\uA77D\uA77E]/g },
-    { base: 'H', letters: /[\u0048\u24BD\uFF28\u0124\u1E22\u1E26\u021E\u1E24\u1E28\u1E2A\u0126\u2C67\u2C75\uA78D]/g },
-    { base: 'I', letters: /[\u0049\u24BE\uFF29\u00CC\u00CD\u00CE\u0128\u012A\u012C\u0130\u00CF\u1E2E\u1EC8\u01CF\u0208\u020A\u1ECA\u012E\u1E2C\u0197]/g },
-    { base: 'J', letters: /[\u004A\u24BF\uFF2A\u0134\u0248]/g },
-    { base: 'K', letters: /[\u004B\u24C0\uFF2B\u1E30\u01E8\u1E32\u0136\u1E34\u0198\u2C69\uA740\uA742\uA744\uA7A2]/g },
-    { base: 'L', letters: /[\u004C\u24C1\uFF2C\u013F\u0139\u013D\u1E36\u1E38\u013B\u1E3C\u1E3A\u0141\u023D\u2C62\u2C60\uA748\uA746\uA780]/g },
-    { base: 'LJ', letters: /[\u01C7]/g },
-    { base: 'Lj', letters: /[\u01C8]/g },
-    { base: 'M', letters: /[\u004D\u24C2\uFF2D\u1E3E\u1E40\u1E42\u2C6E\u019C]/g },
-    { base: 'N', letters: /[\u004E\u24C3\uFF2E\u01F8\u0143\u00D1\u1E44\u0147\u1E46\u0145\u1E4A\u1E48\u0220\u019D\uA790\uA7A4]/g },
-    { base: 'NJ', letters: /[\u01CA]/g },
-    { base: 'Nj', letters: /[\u01CB]/g },
-    { base: 'O', letters: /[\u004F\u24C4\uFF2F\u00D2\u00D3\u00D4\u1ED2\u1ED0\u1ED6\u1ED4\u00D5\u1E4C\u022C\u1E4E\u014C\u1E50\u1E52\u014E\u022E\u0230\u00D6\u022A\u1ECE\u0150\u01D1\u020C\u020E\u01A0\u1EDC\u1EDA\u1EE0\u1EDE\u1EE2\u1ECC\u1ED8\u01EA\u01EC\u00D8\u01FE\u0186\u019F\uA74A\uA74C]/g },
-    { base: 'OI', letters: /[\u01A2]/g },
-    { base: 'OO', letters: /[\uA74E]/g },
-    { base: 'OU', letters: /[\u0222]/g },
-    { base: 'P', letters: /[\u0050\u24C5\uFF30\u1E54\u1E56\u01A4\u2C63\uA750\uA752\uA754]/g },
-    { base: 'Q', letters: /[\u0051\u24C6\uFF31\uA756\uA758\u024A]/g },
-    { base: 'R', letters: /[\u0052\u24C7\uFF32\u0154\u1E58\u0158\u0210\u0212\u1E5A\u1E5C\u0156\u1E5E\u024C\u2C64\uA75A\uA7A6\uA782]/g },
-    { base: 'S', letters: /[\u0053\u24C8\uFF33\u1E9E\u015A\u1E64\u015C\u1E60\u0160\u1E66\u1E62\u1E68\u0218\u015E\u2C7E\uA7A8\uA784]/g },
-    { base: 'T', letters: /[\u0054\u24C9\uFF34\u1E6A\u0164\u1E6C\u021A\u0162\u1E70\u1E6E\u0166\u01AC\u01AE\u023E\uA786]/g },
-    { base: 'TZ', letters: /[\uA728]/g },
-    { base: 'U', letters: /[\u0055\u24CA\uFF35\u00D9\u00DA\u00DB\u0168\u1E78\u016A\u1E7A\u016C\u00DC\u01DB\u01D7\u01D5\u01D9\u1EE6\u016E\u0170\u01D3\u0214\u0216\u01AF\u1EEA\u1EE8\u1EEE\u1EEC\u1EF0\u1EE4\u1E72\u0172\u1E76\u1E74\u0244]/g },
-    { base: 'V', letters: /[\u0056\u24CB\uFF36\u1E7C\u1E7E\u01B2\uA75E\u0245]/g },
-    { base: 'VY', letters: /[\uA760]/g },
-    { base: 'W', letters: /[\u0057\u24CC\uFF37\u1E80\u1E82\u0174\u1E86\u1E84\u1E88\u2C72]/g },
-    { base: 'X', letters: /[\u0058\u24CD\uFF38\u1E8A\u1E8C]/g },
-    { base: 'Y', letters: /[\u0059\u24CE\uFF39\u1EF2\u00DD\u0176\u1EF8\u0232\u1E8E\u0178\u1EF6\u1EF4\u01B3\u024E\u1EFE]/g },
-    { base: 'Z', letters: /[\u005A\u24CF\uFF3A\u0179\u1E90\u017B\u017D\u1E92\u1E94\u01B5\u0224\u2C7F\u2C6B\uA762]/g },
-    { base: 'a', letters: /[\u0061\u24D0\uFF41\u1E9A\u00E0\u00E1\u00E2\u1EA7\u1EA5\u1EAB\u1EA9\u00E3\u0101\u0103\u1EB1\u1EAF\u1EB5\u1EB3\u0227\u01E1\u00E4\u01DF\u1EA3\u00E5\u01FB\u01CE\u0201\u0203\u1EA1\u1EAD\u1EB7\u1E01\u0105\u2C65\u0250]/g },
-    { base: 'aa', letters: /[\uA733]/g },
-    { base: 'ae', letters: /[\u00E6\u01FD\u01E3]/g },
-    { base: 'ao', letters: /[\uA735]/g },
-    { base: 'au', letters: /[\uA737]/g },
-    { base: 'av', letters: /[\uA739\uA73B]/g },
-    { base: 'ay', letters: /[\uA73D]/g },
-    { base: 'b', letters: /[\u0062\u24D1\uFF42\u1E03\u1E05\u1E07\u0180\u0183\u0253]/g },
-    { base: 'c', letters: /[\u0063\u24D2\uFF43\u0107\u0109\u010B\u010D\u00E7\u1E09\u0188\u023C\uA73F\u2184]/g },
-    { base: 'd', letters: /[\u0064\u24D3\uFF44\u1E0B\u010F\u1E0D\u1E11\u1E13\u1E0F\u0111\u018C\u0256\u0257\uA77A]/g },
-    { base: 'dz', letters: /[\u01F3\u01C6]/g },
-    { base: 'e', letters: /[\u0065\u24D4\uFF45\u00E8\u00E9\u00EA\u1EC1\u1EBF\u1EC5\u1EC3\u1EBD\u0113\u1E15\u1E17\u0115\u0117\u00EB\u1EBB\u011B\u0205\u0207\u1EB9\u1EC7\u0229\u1E1D\u0119\u1E19\u1E1B\u0247\u025B\u01DD]/g },
-    { base: 'f', letters: /[\u0066\u24D5\uFF46\u1E1F\u0192\uA77C]/g },
-    { base: 'g', letters: /[\u0067\u24D6\uFF47\u01F5\u011D\u1E21\u011F\u0121\u01E7\u0123\u01E5\u0260\uA7A1\u1D79\uA77F]/g },
-    { base: 'h', letters: /[\u0068\u24D7\uFF48\u0125\u1E23\u1E27\u021F\u1E25\u1E29\u1E2B\u1E96\u0127\u2C68\u2C76\u0265]/g },
-    { base: 'hv', letters: /[\u0195]/g },
-    { base: 'i', letters: /[\u0069\u24D8\uFF49\u00EC\u00ED\u00EE\u0129\u012B\u012D\u00EF\u1E2F\u1EC9\u01D0\u0209\u020B\u1ECB\u012F\u1E2D\u0268\u0131]/g },
-    { base: 'j', letters: /[\u006A\u24D9\uFF4A\u0135\u01F0\u0249]/g },
-    { base: 'k', letters: /[\u006B\u24DA\uFF4B\u1E31\u01E9\u1E33\u0137\u1E35\u0199\u2C6A\uA741\uA743\uA745\uA7A3]/g },
-    { base: 'l', letters: /[\u006C\u24DB\uFF4C\u0140\u013A\u013E\u1E37\u1E39\u013C\u1E3D\u1E3B\u017F\u0142\u019A\u026B\u2C61\uA749\uA781\uA747]/g },
-    { base: 'lj', letters: /[\u01C9]/g },
-    { base: 'm', letters: /[\u006D\u24DC\uFF4D\u1E3F\u1E41\u1E43\u0271\u026F]/g },
-    { base: 'n', letters: /[\u006E\u24DD\uFF4E\u01F9\u0144\u00F1\u1E45\u0148\u1E47\u0146\u1E4B\u1E49\u019E\u0272\u0149\uA791\uA7A5]/g },
-    { base: 'nj', letters: /[\u01CC]/g },
-    { base: 'o', letters: /[\u006F\u24DE\uFF4F\u00F2\u00F3\u00F4\u1ED3\u1ED1\u1ED7\u1ED5\u00F5\u1E4D\u022D\u1E4F\u014D\u1E51\u1E53\u014F\u022F\u0231\u00F6\u022B\u1ECF\u0151\u01D2\u020D\u020F\u01A1\u1EDD\u1EDB\u1EE1\u1EDF\u1EE3\u1ECD\u1ED9\u01EB\u01ED\u00F8\u01FF\u0254\uA74B\uA74D\u0275]/g },
-    { base: 'oi', letters: /[\u01A3]/g },
-    { base: 'ou', letters: /[\u0223]/g },
-    { base: 'oo', letters: /[\uA74F]/g },
-    { base: 'p', letters: /[\u0070\u24DF\uFF50\u1E55\u1E57\u01A5\u1D7D\uA751\uA753\uA755]/g },
-    { base: 'q', letters: /[\u0071\u24E0\uFF51\u024B\uA757\uA759]/g },
-    { base: 'r', letters: /[\u0072\u24E1\uFF52\u0155\u1E59\u0159\u0211\u0213\u1E5B\u1E5D\u0157\u1E5F\u024D\u027D\uA75B\uA7A7\uA783]/g },
-    { base: 's', letters: /[\u0073\u24E2\uFF53\u00DF\u015B\u1E65\u015D\u1E61\u0161\u1E67\u1E63\u1E69\u0219\u015F\u023F\uA7A9\uA785\u1E9B]/g },
-    { base: 't', letters: /[\u0074\u24E3\uFF54\u1E6B\u1E97\u0165\u1E6D\u021B\u0163\u1E71\u1E6F\u0167\u01AD\u0288\u2C66\uA787]/g },
-    { base: 'tz', letters: /[\uA729]/g },
-    { base: 'u', letters: /[\u0075\u24E4\uFF55\u00F9\u00FA\u00FB\u0169\u1E79\u016B\u1E7B\u016D\u00FC\u01DC\u01D8\u01D6\u01DA\u1EE7\u016F\u0171\u01D4\u0215\u0217\u01B0\u1EEB\u1EE9\u1EEF\u1EED\u1EF1\u1EE5\u1E73\u0173\u1E77\u1E75\u0289]/g },
-    { base: 'v', letters: /[\u0076\u24E5\uFF56\u1E7D\u1E7F\u028B\uA75F\u028C]/g },
-    { base: 'vy', letters: /[\uA761]/g },
-    { base: 'w', letters: /[\u0077\u24E6\uFF57\u1E81\u1E83\u0175\u1E87\u1E85\u1E98\u1E89\u2C73]/g },
-    { base: 'x', letters: /[\u0078\u24E7\uFF58\u1E8B\u1E8D]/g },
-    { base: 'y', letters: /[\u0079\u24E8\uFF59\u1EF3\u00FD\u0177\u1EF9\u0233\u1E8F\u00FF\u1EF7\u1E99\u1EF5\u01B4\u024F\u1EFF]/g },
-    { base: 'z', letters: /[\u007A\u24E9\uFF5A\u017A\u1E91\u017C\u017E\u1E93\u1E95\u01B6\u0225\u0240\u2C6C\uA763]/g }
-];
-/** @type {?} */
-var removeAccents = (/**
- * @param {?} str
- * @return {?}
- */
-function (str) {
-    for (var i = 0; i < defaultDiacriticsRemovalMap.length; i++) {
-        str = str.replace(defaultDiacriticsRemovalMap[i].letters, defaultDiacriticsRemovalMap[i].base);
-    }
-    return str;
-});
-
 /**
  * @fileoverview added by tsickle
  * Generated from: lib/utils/string.ts
@@ -5035,6 +5139,12 @@ function trim(text) {
 function standardise(str) {
     return removeAccents(str != null ? str : '').toLowerCase().replace('\\s+', ' ');
 }
+/** @type {?} */
+var removeAccents = (/**
+ * @param {?} str
+ * @return {?}
+ */
+function (str) { return str.normalize("NFD").replace(/\p{Diacritic}/gu, ''); });
 
 /**
  * @fileoverview added by tsickle
@@ -5056,6 +5166,83 @@ 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>
+ * `̀``
+ */
+var DropdownComponent = /** @class */ (function (_super) {
+    __extends(DropdownComponent, _super);
+    function DropdownComponent(injector) {
+        var _this = _super.call(this, injector) || this;
+        _this.name = '';
+        _this.isDropdownOpened = false;
+        _this.onDropdown = new EventEmitter();
+        return _this;
+    }
+    /**
+     * @return {?}
+     */
+    DropdownComponent.prototype.ngOnInit = /**
+     * @return {?}
+     */
+    function () {
+        _super.prototype.ngOnInit.call(this);
+    };
+    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 = function () { return [
+        { type: Injector }
+    ]; };
+    DropdownComponent.propDecorators = {
+        name: [{ type: Input }],
+        isDropdownOpened: [{ type: Input }],
+        onDropdown: [{ type: Output }]
+    };
+    return DropdownComponent;
+}(OdeComponent));
+if (false) {
+    /** @type {?} */
+    DropdownComponent.prototype.name;
+    /** @type {?} */
+    DropdownComponent.prototype.isDropdownOpened;
+    /** @type {?} */
+    DropdownComponent.prototype.onDropdown;
+}
+
 /**
  * @fileoverview added by tsickle
  * Generated from: lib/ngx-ode-ui.module.ts
@@ -5104,6 +5291,7 @@ var NgxOdeUiModule = /** @class */ (function () {
                         LightBoxComponent,
                         LightboxConfirmComponent,
                         ListComponent,
+                        ListCheckableComponent,
                         MonoSelectComponent,
                         MultiSelectComponent,
                         MultiComboComponent,
@@ -5138,7 +5326,8 @@ var NgxOdeUiModule = /** @class */ (function () {
                         LocalizedDatePipe,
                         BytesPipe,
                         KeysPipe,
-                        LengthPipe
+                        LengthPipe,
+                        DropdownComponent
                     ],
                     imports: [
                         CommonModule,
@@ -5155,6 +5344,7 @@ var NgxOdeUiModule = /** @class */ (function () {
                         LightBoxComponent,
                         LightboxConfirmComponent,
                         ListComponent,
+                        ListCheckableComponent,
                         MonoSelectComponent,
                         MultiSelectComponent,
                         MultiComboComponent,
@@ -5174,6 +5364,7 @@ var NgxOdeUiModule = /** @class */ (function () {
                         SpinnerCubeComponent,
                         PagerComponent,
                         EllipsisComponent,
+                        DropdownComponent,
                         // directives
                         AnchorDirective,
                         DynamicTemplateDirective,
@@ -5210,5 +5401,5 @@ var NgxOdeUiModule = /** @class */ (function () {
  * @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 };
 //# sourceMappingURL=ngx-ode-ui.js.map