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

package/fesm2015/ngx-ode-ui.js

@@ -353,6 +353,7 @@ class DatepickerComponent extends OdeComponent {
         this.labelsService = labelsService;
         this.innerValue = '';
         this.disabled = false;
+        this._readonly = false;
         this.enableTime = false;
         this.placeholder = '';
         this.changeDate = new EventEmitter();
@@ -383,6 +384,26 @@ class DatepickerComponent extends OdeComponent {
             }
         }
     }
+    /**
+     * @param {?} val
+     * @return {?}
+     */
+    set readonly(val) {
+        this._readonly = val;
+        if (this.datePickerInst && this.datePickerInst.altInput) {
+            // Apply the readonly attribute addition/removal to the visible input (wrapped)
+            if (val)
+                this.datePickerInst.altInput.setAttribute('readonly', "");
+            else
+                this.datePickerInst.altInput.removeAttribute('readonly');
+        }
+    }
+    /**
+     * @return {?}
+     */
+    get readonly() {
+        return this._readonly;
+    }
     /**
      * @return {?}
      */
@@ -413,12 +434,25 @@ class DatepickerComponent extends OdeComponent {
             enableTime: this.enableTime,
             minDate: this.minDate,
             maxDate: this.maxDate,
-            clickOpens: !this.disabled,
+            clickOpens: false,
             wrap: true,
             // to add input decoration (calendar icon and delete icon)
             locale: datePickerLocale
         };
         this.datePickerInst = new Flatpickr(this.datePickerElement.nativeElement, options);
+        if (!this.disabled) {
+            this.datePickerInst.altInput.addEventListener('click', (/**
+             * @param {?} e
+             * @return {?}
+             */
+            e => {
+                if (!this.readonly) {
+                    this.datePickerInst.toggle();
+                }
+            }));
+        }
+        // Force updating the date input readonly attribute :
+        this.readonly = this._readonly;
     }
     /**
      * @return {?}
@@ -463,8 +497,9 @@ class DatepickerComponent extends OdeComponent {
 DatepickerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'ode-date-picker',
-                template: "<div class=\"flatpickr\" #datePickerElement>\n  <input type=\"date\" [(ngModel)]=\"value\" [ngClass]=\"{ 'cursor-default': disabled }\" placeholder=\"{{ placeholder }}\" #inputRef>\n  <a *ngIf=\"!disabled\" data-toggle [title]=\"labels('datepicker.open')\"><i class=\"fa fa-calendar open\" aria-hidden=\"true\"></i></a>\n  <a *ngIf=\"!disabled\" data-clear [title]=\"labels('datepicker.delete')\"><i class=\"fa fa-times delete\" aria-hidden=\"true\"></i></a>\n</div>\n",
-                providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
+                template: "<div class=\"flatpickr\" #datePickerElement>\n  <input type=\"date\" [(ngModel)]=\"value\" [disabled]=\"disabled\" [ngClass]=\"{ 'cursor-default': disabled }\" placeholder=\"{{ placeholder }}\" #inputRef>\n  <a *ngIf=\"!disabled\" [class.hidden]=\"readonly\" data-toggle [title]=\"labels('datepicker.open')\"><i class=\"fa fa-calendar open\" aria-hidden=\"true\"></i></a>\n  <a *ngIf=\"!disabled\" [class.hidden]=\"readonly\" data-clear [title]=\"labels('datepicker.delete')\"><i class=\"fa fa-times delete\" aria-hidden=\"true\"></i></a>\n</div>\n",
+                providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR],
+                styles: [".hidden{visibility:hidden}"]
             }] }
 ];
 /** @nocollapse */
@@ -478,6 +513,7 @@ DatepickerComponent.propDecorators = {
     inputElement: [{ type: ViewChild, args: ['inputRef', { static: false },] }],
     model: [{ type: ViewChild, args: [NgModel, { static: false },] }],
     disabled: [{ type: Input }],
+    readonly: [{ type: Input }],
     enableTime: [{ type: Input }],
     placeholder: [{ type: Input }],
     minDate: [{ type: Input }],
@@ -504,6 +540,8 @@ if (false) {
     /** @type {?} */
     DatepickerComponent.prototype.disabled;
     /** @type {?} */
+    DatepickerComponent.prototype._readonly;
+    /** @type {?} */
     DatepickerComponent.prototype.enableTime;
     /** @type {?} */
     DatepickerComponent.prototype.placeholder;
@@ -1225,6 +1263,7 @@ class ListComponent extends OdeComponent {
         this.noResultsLabel = 'list.results.no.items';
         this.placeholder = 'list.placeholder';
         this.isSearchActive = true;
+        this.isSearchButtonDisabled = false;
         this.searchInput = false;
         this.inputChange = new EventEmitter();
         this.onSelect = new EventEmitter();
@@ -1264,7 +1303,7 @@ class ListComponent extends OdeComponent {
 ListComponent.decorators = [
     { type: 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}"]
             }] }
 ];
@@ -1282,7 +1321,9 @@ ListComponent.propDecorators = {
     noResultsLabel: [{ type: Input }],
     placeholder: [{ type: Input }],
     isSearchActive: [{ type: Input }],
+    isSearchButtonDisabled: [{ type: Input }],
     searchInput: [{ type: Input }],
+    searchDelay: [{ type: Input }],
     searchSubmit: [{ type: Input }],
     inputChange: [{ type: Output }],
     onSelect: [{ type: Output }],
@@ -1317,8 +1358,12 @@ if (false) {
     /** @type {?} */
     ListComponent.prototype.isSearchActive;
     /** @type {?} */
+    ListComponent.prototype.isSearchButtonDisabled;
+    /** @type {?} */
     ListComponent.prototype.searchInput;
     /** @type {?} */
+    ListComponent.prototype.searchDelay;
+    /** @type {?} */
     ListComponent.prototype.searchSubmit;
     /** @type {?} */
     ListComponent.prototype.inputChange;
@@ -2612,6 +2657,7 @@ class SearchInputComponent extends OdeComponent {
         this._renderer = _renderer;
         /* Inputs / Outputs / View */
         this.isSearchActive = false;
+        this.isSearchButtonDisabled = false;
         this.searchInput = false;
         this._delay = 200;
         this.onChange = new EventEmitter();
@@ -2696,7 +2742,7 @@ class SearchInputComponent extends OdeComponent {
 SearchInputComponent.decorators = [
     { type: 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}"]
             }] }
 ];
@@ -2708,6 +2754,7 @@ SearchInputComponent.ctorParameters = () => [
 ];
 SearchInputComponent.propDecorators = {
     isSearchActive: [{ type: Input }],
+    isSearchButtonDisabled: [{ type: Input }],
     searchInput: [{ type: Input }],
     searchSubmit: [{ type: Input }],
     delay: [{ type: Input }],
@@ -2718,6 +2765,8 @@ if (false) {
     /** @type {?} */
     SearchInputComponent.prototype.isSearchActive;
     /** @type {?} */
+    SearchInputComponent.prototype.isSearchButtonDisabled;
+    /** @type {?} */
     SearchInputComponent.prototype.searchInput;
     /** @type {?} */
     SearchInputComponent.prototype.searchSubmit;