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

package/fesm5/ngx-ode-ui.js

@@ -411,6 +411,7 @@ var DatepickerComponent = /** @class */ (function (_super) {
         _this.labelsService = labelsService;
         _this.innerValue = '';
         _this.disabled = false;
+        _this._readonly = false;
         _this.enableTime = false;
         _this.placeholder = '';
         _this.changeDate = new EventEmitter();
@@ -446,6 +447,30 @@ var DatepickerComponent = /** @class */ (function (_super) {
         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 {?}
      */
@@ -453,6 +478,7 @@ var DatepickerComponent = /** @class */ (function (_super) {
      * @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', '');
@@ -479,12 +505,25 @@ var DatepickerComponent = /** @class */ (function (_super) {
             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 {?}
@@ -547,8 +586,9 @@ var DatepickerComponent = /** @class */ (function (_super) {
     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 */
@@ -562,6 +602,7 @@ var DatepickerComponent = /** @class */ (function (_super) {
         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 }],
@@ -590,6 +631,8 @@ if (false) {
     /** @type {?} */
     DatepickerComponent.prototype.disabled;
     /** @type {?} */
+    DatepickerComponent.prototype._readonly;
+    /** @type {?} */
     DatepickerComponent.prototype.enableTime;
     /** @type {?} */
     DatepickerComponent.prototype.placeholder;
@@ -3060,10 +3103,20 @@ var SearchInputComponent = /** @class */ (function (_super) {
     function (str) {
         this.$searchTerms.next(str);
     };
+    /**
+     * @return {?}
+     */
+    SearchInputComponent.prototype.handleSubmit = /**
+     * @return {?}
+     */
+    function () {
+        this.searchSubmit();
+        this.searchBox.nativeElement.value = '';
+    };
     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\" [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}"]
                 }] }
     ];