ngx-ode-ui 3.12.0-dev.3 → 3.12.0-dev.8

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

@@ -1577,7 +1577,8 @@
             _this.model = [];
             _this.searchPlaceholder = 'search';
             _this.noResultsLabel = 'list.results.no.items';
-            _this.searchInput = true;
+            _this.isSearchActive = true;
+            _this.searchInput = false;
             _this.inputChange = new core.EventEmitter();
             _this.onSelect = new core.EventEmitter();
             _this.listChange = new core.EventEmitter();
@@ -1620,7 +1621,7 @@
         ListComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'ode-list',
-                        template: "<ode-search-input *ngIf=\"searchInput\" [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",
+                        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}"]
                     }] }
         ];
@@ -1636,7 +1637,9 @@
             limit: [{ type: core.Input }],
             searchPlaceholder: [{ type: core.Input }],
             noResultsLabel: [{ type: core.Input }],
+            isSearchActive: [{ type: core.Input }],
             searchInput: [{ type: core.Input }],
+            searchSubmit: [{ type: core.Input }],
             inputChange: [{ type: core.Output }],
             onSelect: [{ type: core.Output }],
             listChange: [{ type: core.Output }],
@@ -1668,8 +1671,12 @@
         /** @type {?} */
         ListComponent.prototype.noResultsLabel;
         /** @type {?} */
+        ListComponent.prototype.isSearchActive;
+        /** @type {?} */
         ListComponent.prototype.searchInput;
         /** @type {?} */
+        ListComponent.prototype.searchSubmit;
+        /** @type {?} */
         ListComponent.prototype.inputChange;
         /** @type {?} */
         ListComponent.prototype.onSelect;
@@ -1687,6 +1694,150 @@
         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 core.EventEmitter();
+            _this.listChange = new core.EventEmitter();
+            _this.scrolledDown = new core.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: core.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: core.Injector }
+        ]; };
+        ListCheckableComponent.propDecorators = {
+            model: [{ type: core.Input }],
+            filters: [{ type: core.Input }],
+            sort: [{ type: core.Input }],
+            limit: [{ type: core.Input }],
+            noResultsLabel: [{ type: core.Input }],
+            readOnly: [{ type: core.Input }],
+            onCheck: [{ type: core.Output }],
+            listChange: [{ type: core.Output }],
+            scrolledDown: [{ type: core.Output }],
+            templateRef: [{ type: core.ContentChild, args: [core.TemplateRef, { static: false },] }],
+            areAllChecked: [{ type: core.Input }],
+            isChecked: [{ type: core.Input }],
+            isDisabled: [{ type: core.Input }],
+            ngClass: [{ type: core.Input }]
+        };
+        return ListCheckableComponent;
+    }(ngxOdeCore.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
@@ -2498,7 +2649,7 @@
         MultiComboComponent.decorators = [
             { type: core.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)',
                         },
@@ -2989,6 +3140,9 @@
             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 core.EventEmitter();
             /* Internal logic */
@@ -3002,9 +3156,7 @@
             function () {
                 return this._delay;
             },
-            /* Inputs / Outputs / View */
-            set: /* Inputs / Outputs / View */
-            /**
+            set: /**
              * @param {?} d
              * @return {?}
              */
@@ -3094,7 +3246,8 @@
         SearchInputComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'ode-search-input',
-                        template: "<input type=\"search\" #searchBox (input)=\"search(searchBox.value)\"/>\n"
+                        template: "<form\n    *ngIf=\"searchInput\"\n    class=\"search-container\"\n    (ngSubmit)=\"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\">\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-input{border:1px solid rgba(0,0,0,.1)}:host .search-icon{padding-left:0}:host .search-button{margin:0;background:#ff8352;color:#fff}"]
                     }] }
         ];
         /** @nocollapse */
@@ -3104,6 +3257,9 @@
             { type: core.Renderer2 }
         ]; };
         SearchInputComponent.propDecorators = {
+            isSearchActive: [{ type: core.Input }],
+            searchInput: [{ type: core.Input }],
+            searchSubmit: [{ type: core.Input }],
             delay: [{ type: core.Input }],
             onChange: [{ type: core.Output }],
             searchBox: [{ type: core.ViewChild, args: ['searchBox', { static: false },] }]
@@ -3111,6 +3267,12 @@
         return SearchInputComponent;
     }(ngxOdeCore.OdeComponent));
     if (false) {
+        /** @type {?} */
+        SearchInputComponent.prototype.isSearchActive;
+        /** @type {?} */
+        SearchInputComponent.prototype.searchInput;
+        /** @type {?} */
+        SearchInputComponent.prototype.searchSubmit;
         /**
          * @type {?}
          * @private
@@ -5195,6 +5357,83 @@
         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 core.EventEmitter();
+            return _this;
+        }
+        /**
+         * @return {?}
+         */
+        DropdownComponent.prototype.ngOnInit = /**
+         * @return {?}
+         */
+        function () {
+            _super.prototype.ngOnInit.call(this);
+        };
+        DropdownComponent.decorators = [
+            { type: core.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-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: core.Injector }
+        ]; };
+        DropdownComponent.propDecorators = {
+            name: [{ type: core.Input }],
+            isDropdownOpened: [{ type: core.Input }],
+            onDropdown: [{ type: core.Output }]
+        };
+        return DropdownComponent;
+    }(ngxOdeCore.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
@@ -5243,6 +5482,7 @@
                             LightBoxComponent,
                             LightboxConfirmComponent,
                             ListComponent,
+                            ListCheckableComponent,
                             MonoSelectComponent,
                             MultiSelectComponent,
                             MultiComboComponent,
@@ -5277,7 +5517,8 @@
                             LocalizedDatePipe,
                             BytesPipe,
                             KeysPipe,
-                            LengthPipe
+                            LengthPipe,
+                            DropdownComponent
                         ],
                         imports: [
                             common.CommonModule,
@@ -5294,6 +5535,7 @@
                             LightBoxComponent,
                             LightboxConfirmComponent,
                             ListComponent,
+                            ListCheckableComponent,
                             MonoSelectComponent,
                             MultiSelectComponent,
                             MultiComboComponent,
@@ -5313,6 +5555,7 @@
                             SpinnerCubeComponent,
                             PagerComponent,
                             EllipsisComponent,
+                            DropdownComponent,
                             // directives
                             AnchorDirective,
                             DynamicTemplateDirective,
@@ -5359,6 +5602,7 @@
     exports.LightBoxComponent = LightBoxComponent;
     exports.LightboxConfirmComponent = LightboxConfirmComponent;
     exports.LimitPipe = LimitPipe;
+    exports.ListCheckableComponent = ListCheckableComponent;
     exports.ListComponent = ListComponent;
     exports.LocalizedDatePipe = LocalizedDatePipe;
     exports.MessageBoxComponent = MessageBoxComponent;
@@ -5393,6 +5637,7 @@
     exports.standardise = standardise;
     exports.toDecimal = toDecimal;
     exports.trim = trim;
+    exports.ɵa = DropdownComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });