ngx-ode-ui 3.12.0-dev.16 → 3.12.0-dev.19

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

@@ -605,6 +605,7 @@
             _this.labelsService = labelsService;
             _this.innerValue = '';
             _this.disabled = false;
+            _this._readonly = false;
             _this.enableTime = false;
             _this.placeholder = '';
             _this.changeDate = new core.EventEmitter();
@@ -640,6 +641,30 @@
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(DatepickerComponent.prototype, "readonly", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this._readonly;
+            },
+            set: /**
+             * @param {?} val
+             * @return {?}
+             */
+            function (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');
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
         /**
          * @return {?}
          */
@@ -647,6 +672,7 @@
          * @return {?}
          */
         function () {
+            var _this = this;
             _super.prototype.ngAfterViewInit.call(this);
             // add attr data-input, mandatory for the picker to work in wrap mode
             this.renderer.setAttribute(this.inputElement.nativeElement, 'data-input', '');
@@ -673,12 +699,25 @@
                 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 {?}
+                 */
+                function (e) {
+                    if (!_this.readonly) {
+                        _this.datePickerInst.toggle();
+                    }
+                }));
+            }
+            // Force updating the date input readonly attribute :
+            this.readonly = this._readonly;
         };
         /**
          * @return {?}
@@ -741,8 +780,9 @@
         DatepickerComponent.decorators = [
             { type: core.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 */
@@ -756,6 +796,7 @@
             inputElement: [{ type: core.ViewChild, args: ['inputRef', { static: false },] }],
             model: [{ type: core.ViewChild, args: [forms.NgModel, { static: false },] }],
             disabled: [{ type: core.Input }],
+            readonly: [{ type: core.Input }],
             enableTime: [{ type: core.Input }],
             placeholder: [{ type: core.Input }],
             minDate: [{ type: core.Input }],
@@ -784,6 +825,8 @@
         /** @type {?} */
         DatepickerComponent.prototype.disabled;
         /** @type {?} */
+        DatepickerComponent.prototype._readonly;
+        /** @type {?} */
         DatepickerComponent.prototype.enableTime;
         /** @type {?} */
         DatepickerComponent.prototype.placeholder;
@@ -1578,6 +1621,7 @@
             _this.noResultsLabel = 'list.results.no.items';
             _this.placeholder = 'list.placeholder';
             _this.isSearchActive = true;
+            _this.isSearchButtonDisabled = false;
             _this.searchInput = false;
             _this.inputChange = new core.EventEmitter();
             _this.onSelect = new core.EventEmitter();
@@ -1621,7 +1665,7 @@
         ListComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'ode-list',
-                        template: "<ode-search-input\n  *ngIf=\"isSearchActive\"\n  [searchInput]=\"searchInput\"\n  [searchSubmit]=\"searchSubmit\"\n  [attr.placeholder]=\"searchPlaceholder | translate\"\n  (onChange)=\"inputChange.emit($event)\"></ode-search-input>\n<div class=\"toolbar\">\n  <ng-content select=\"[toolbar]\"></ng-content>\n</div>\n<div class=\"list-wrapper\"\n    infiniteScroll\n    [scrollWindow]=\"false\"\n    (scrolled)=\"scrolledDown.emit()\"\n    [infiniteScrollThrottle]=\"50\">\n  <ul>\n    <li *ngFor=\"let item of model | filter: filters | filter: inputFilter | store:self:'storedElements' | orderBy: sort | slice: 0:limit\"\n        (click)=\"onSelect.emit(item)\"\n        [class.selected]=\"isSelected(item)\"\n        [class.disabled]=\"isDisabled(item)\"\n        [ngClass]=\"ngClass(item)\"\n        class=\"lct-list-item\">\n      <ng-template [ngTemplateOutlet]=\"templateRef\" [ngTemplateOutletContext]=\"{$implicit: item}\">\n      </ng-template>\n    </li>\n  </ul>\n  <ul *ngIf=\"storedElements && storedElements.length === 0\">\n    <li class=\"no-results\">{{ noResultsLabel | translate }}</li>\n  </ul>\n  <ul *ngIf=\"!model\">\n    <li class=\"placeholder\">{{ placeholder | translate }}</li>\n  </ul>\n</div>\n",
+                        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}"]
                     }] }
         ];
@@ -1639,7 +1683,9 @@
             noResultsLabel: [{ type: core.Input }],
             placeholder: [{ type: core.Input }],
             isSearchActive: [{ type: core.Input }],
+            isSearchButtonDisabled: [{ type: core.Input }],
             searchInput: [{ type: core.Input }],
+            searchDelay: [{ type: core.Input }],
             searchSubmit: [{ type: core.Input }],
             inputChange: [{ type: core.Output }],
             onSelect: [{ type: core.Output }],
@@ -1676,8 +1722,12 @@
         /** @type {?} */
         ListComponent.prototype.isSearchActive;
         /** @type {?} */
+        ListComponent.prototype.isSearchButtonDisabled;
+        /** @type {?} */
         ListComponent.prototype.searchInput;
         /** @type {?} */
+        ListComponent.prototype.searchDelay;
+        /** @type {?} */
         ListComponent.prototype.searchSubmit;
         /** @type {?} */
         ListComponent.prototype.inputChange;
@@ -3145,6 +3195,7 @@
             _this._renderer = _renderer;
             /* Inputs / Outputs / View */
             _this.isSearchActive = false;
+            _this.isSearchButtonDisabled = false;
             _this.searchInput = false;
             _this._delay = 200;
             _this.onChange = new core.EventEmitter();
@@ -3249,7 +3300,7 @@
         SearchInputComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'ode-search-input',
-                        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)\"/> -->",
+                        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\" [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}"]
                     }] }
         ];
@@ -3261,6 +3312,7 @@
         ]; };
         SearchInputComponent.propDecorators = {
             isSearchActive: [{ type: core.Input }],
+            isSearchButtonDisabled: [{ type: core.Input }],
             searchInput: [{ type: core.Input }],
             searchSubmit: [{ type: core.Input }],
             delay: [{ type: core.Input }],
@@ -3273,6 +3325,8 @@
         /** @type {?} */
         SearchInputComponent.prototype.isSearchActive;
         /** @type {?} */
+        SearchInputComponent.prototype.isSearchButtonDisabled;
+        /** @type {?} */
         SearchInputComponent.prototype.searchInput;
         /** @type {?} */
         SearchInputComponent.prototype.searchSubmit;