ngx-ode-ui 4.3.0 → 4.5.0-dev.0

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;
@@ -3254,10 +3297,20 @@
         function (str) {
             this.$searchTerms.next(str);
         };
+        /**
+         * @return {?}
+         */
+        SearchInputComponent.prototype.handleSubmit = /**
+         * @return {?}
+         */
+        function () {
+            this.searchSubmit();
+            this.searchBox.nativeElement.value = '';
+        };
         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\" [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)\"/> -->",
+                        template: "<form\n    class=\"search-container\"\n    (ngSubmit)=\"searchInput && handleSubmit()\">\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}"]
                     }] }
         ];