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

package/fesm5/ngx-ode-ui.js

@@ -1383,6 +1383,7 @@ var ListComponent = /** @class */ (function (_super) {
         _this.model = [];
         _this.searchPlaceholder = 'search';
         _this.noResultsLabel = 'list.results.no.items';
+        _this.searchInput = false;
         _this.inputChange = new EventEmitter();
         _this.onSelect = new EventEmitter();
         _this.listChange = new EventEmitter();
@@ -1425,7 +1426,7 @@ 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",
+                    template: "<ode-search-input\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}"]
                 }] }
     ];
@@ -1441,6 +1442,8 @@ var ListComponent = /** @class */ (function (_super) {
         limit: [{ type: Input }],
         searchPlaceholder: [{ type: Input }],
         noResultsLabel: [{ type: Input }],
+        searchInput: [{ type: Input }],
+        searchSubmit: [{ type: Input }],
         inputChange: [{ type: Output }],
         onSelect: [{ type: Output }],
         listChange: [{ type: Output }],
@@ -1472,6 +1475,10 @@ if (false) {
     /** @type {?} */
     ListComponent.prototype.noResultsLabel;
     /** @type {?} */
+    ListComponent.prototype.searchInput;
+    /** @type {?} */
+    ListComponent.prototype.searchSubmit;
+    /** @type {?} */
     ListComponent.prototype.inputChange;
     /** @type {?} */
     ListComponent.prototype.onSelect;
@@ -1489,6 +1496,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
@@ -2300,7 +2451,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)',
                     },
@@ -2791,6 +2942,8 @@ var SearchInputComponent = /** @class */ (function (_super) {
         var _this = _super.call(this, injector) || this;
         _this._elRef = _elRef;
         _this._renderer = _renderer;
+        /* Inputs / Outputs / View */
+        _this.searchInput = false;
         _this._delay = 200;
         _this.onChange = new EventEmitter();
         /* Internal logic */
@@ -2804,9 +2957,7 @@ var SearchInputComponent = /** @class */ (function (_super) {
         function () {
             return this._delay;
         },
-        /* Inputs / Outputs / View */
-        set: /* Inputs / Outputs / View */
-        /**
+        set: /**
          * @param {?} d
          * @return {?}
          */
@@ -2896,7 +3047,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    *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 */
@@ -2906,6 +3058,8 @@ var SearchInputComponent = /** @class */ (function (_super) {
         { type: Renderer2 }
     ]; };
     SearchInputComponent.propDecorators = {
+        searchInput: [{ type: Input }],
+        searchSubmit: [{ type: Input }],
         delay: [{ type: Input }],
         onChange: [{ type: Output }],
         searchBox: [{ type: ViewChild, args: ['searchBox', { static: false },] }]
@@ -2913,6 +3067,10 @@ var SearchInputComponent = /** @class */ (function (_super) {
     return SearchInputComponent;
 }(OdeComponent));
 if (false) {
+    /** @type {?} */
+    SearchInputComponent.prototype.searchInput;
+    /** @type {?} */
+    SearchInputComponent.prototype.searchSubmit;
     /**
      * @type {?}
      * @private
@@ -5045,6 +5203,7 @@ var NgxOdeUiModule = /** @class */ (function () {
                         LightBoxComponent,
                         LightboxConfirmComponent,
                         ListComponent,
+                        ListCheckableComponent,
                         MonoSelectComponent,
                         MultiSelectComponent,
                         MultiComboComponent,
@@ -5096,6 +5255,7 @@ var NgxOdeUiModule = /** @class */ (function () {
                         LightBoxComponent,
                         LightboxConfirmComponent,
                         ListComponent,
+                        ListCheckableComponent,
                         MonoSelectComponent,
                         MultiSelectComponent,
                         MultiComboComponent,
@@ -5151,5 +5311,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 };
 //# sourceMappingURL=ngx-ode-ui.js.map