@tetacom/ng-components 1.1.6 → 1.1.7

package/fesm2022/tetacom-ng-components.mjs

@@ -1170,10 +1170,11 @@ class BasePicker {
             val.splice(i, 1, value[i]);
         }
         this.placeholder = val.join('');
-        this._cdr.detectChanges();
     }
     openChange(e) {
-        this.onBlur();
+        if (!e) {
+            this.onBlur();
+        }
         this.open = e;
     }
     checkNull() {
@@ -1195,12 +1196,17 @@ class BasePicker {
         this.open = false;
     }
     emitValue(value) {
-        this.date = value;
-        this.selectDate.emit(value);
-        this.onChange(value);
+        if (this.isValueChange(value)) {
+            this.date = value;
+            this.selectDate.emit(value);
+            this.onChange(value);
+        }
+    }
+    isValueChange(value) {
+        return new Date(value).getTime() !== new Date(this.date).getTime();
     }
     checkEnter(e) {
-        if (e.key === "Enter") {
+        if (e.key === 'Enter') {
             this.inputText = e.target.value;
             this.onBlur();
         }
@@ -1217,15 +1223,15 @@ class BasePicker {
     }
     getDateFromStr(str, separator = '.') {
         const date = str?.split(separator);
-        const day = this.isAvailableLength((date?.[0]), 2) ? Number(date[0]) : null;
-        const month = this.isAvailableLength((date?.[1]), 2) ? Number(date[1]) : null;
-        const year = this.isAvailableLength((date?.[2]), 4) ? Number(date[2]) : null;
+        const day = this.isAvailableLength(date?.[0], 2) ? Number(date[0]) : null;
+        const month = this.isAvailableLength(date?.[1], 2) ? Number(date[1]) : null;
+        const year = this.isAvailableLength(date?.[2], 4) ? Number(date[2]) : null;
         return { day, month, year };
     }
     getTimeFromStr(str, separator = ':') {
         const time = str?.trim().split(separator);
-        const hours = this.isAvailableLength((time?.[0]), 2) ? Number(time[0]) : null;
-        const mins = this.isAvailableLength((time?.[1]), 2) ? Number(time[1]) : null;
+        const hours = this.isAvailableLength(time?.[0], 2) ? Number(time[0]) : null;
+        const mins = this.isAvailableLength(time?.[1], 2) ? Number(time[1]) : null;
         return { hours, mins };
     }
     focus() {
@@ -1241,8 +1247,8 @@ class BasePicker {
         });
     }
     getAvailableDate(min, max, date) {
-        let minDate = dayjs(new Date(min)).startOf("day").toDate();
-        let maxDate = dayjs(new Date(max)).endOf("day").toDate();
+        let minDate = dayjs(new Date(min)).startOf('day').toDate();
+        let maxDate = dayjs(new Date(max)).endOf('day').toDate();
         if (min && minDate.getTime() >= new Date(date).getTime()) {
             return new Date();
         }
@@ -3215,16 +3221,15 @@ class DateRangeComponent extends BasePicker {
         this._cdr = _cdr;
         this._elementRef = _elementRef;
         this.datePipe = datePipe;
-        console.log('dateRange', datePipe);
     }
     changeSelectedDate(date, selectedDate) {
         if (selectedDate.from) {
             const from = new Date(Math.min(new Date(selectedDate.from).getTime(), date.getTime()));
             const to = new Date(Math.max(new Date(selectedDate.from).getTime(), date.getTime()));
             this.setDate({ from, to });
-            this.emitValue({ from, to });
             this.selectedDate.next({ from: null, to: null });
             this.open = false;
+            this._cdr.detectChanges();
         }
         else {
             this.setDate({ from: date, to: null });
@@ -3235,12 +3240,20 @@ class DateRangeComponent extends BasePicker {
         if (this.allowNull) {
             return null;
         }
-        return this.datePipe.transform(new Date(), 'dd.MM.yyyy') + ' - ' + this.datePipe.transform(new Date(), 'dd.MM.yyyy');
+        return (this.datePipe.transform(new Date(), 'dd.MM.yyyy') +
+            ' - ' +
+            this.datePipe.transform(new Date(), 'dd.MM.yyyy'));
     }
     prepareInput() {
-        let str = this.getLocaleString(this.date.from) + ' - ' + this.getLocaleString(this.date.to);
+        let str = this.getLocaleString(this.date.from) +
+            ' - ' +
+            this.getLocaleString(this.date.to);
         if (!this.date?.from) {
-            str = this.allowNull ? '' : this.getLocaleString(new Date()) + ' - ' + this.getLocaleString(new Date());
+            str = this.allowNull
+                ? ''
+                : this.getLocaleString(new Date()) +
+                    ' - ' +
+                    this.getLocaleString(new Date());
         }
         let option = {
             mode: 'dd/mm/yyyy',
@@ -3291,23 +3304,25 @@ class DateRangeComponent extends BasePicker {
             this.changePlaceholder('');
             this.selectedDate.next({
                 from: range?.from || null,
-                to: range?.to || null
+                to: range?.to || null,
             });
         }
         else {
-            this.inputText = this.getLocaleString(range.from) + ' - ' + this.getLocaleString(range.to);
-            this.changePlaceholder(this.getLocaleString(range.from) + ' - ' + this.getLocaleString(range.to));
+            const from = this.getLocaleString(range.from);
+            const to = range.from && !range.to ? '' : this.getLocaleString(range.to);
+            this.inputText = from + ' - ' + to;
+            this.changePlaceholder(from + ' - ' + to);
         }
     }
     writeValue(obj) {
         if (obj?.from) {
             this.date = {
                 from: new Date(obj.from),
-                to: new Date(obj.to)
+                to: new Date(obj.to),
             };
             this.setDate({
                 from: new Date(obj.from),
-                to: new Date(obj.to)
+                to: new Date(obj.to),
             });
         }
         else {
@@ -3315,35 +3330,37 @@ class DateRangeComponent extends BasePicker {
         }
         this.selectedDate.next({
             from: null,
-            to: null
+            to: null,
         });
     }
+    isValueChange(value) {
+        return !(new Date(value.from).getTime() === new Date(this.date.from).getTime() &&
+            new Date(value.to).getTime() === new Date(this.date.to).getTime());
+    }
     registerOnChange(fn) {
         this.onChange = fn;
     }
-    registerOnTouched(fn) {
-    }
+    registerOnTouched(fn) { }
     ngOnInit() {
         if (this.date?.from) {
             this.setDate({
                 from: this.allowNull ? null : new Date(this.date?.from),
-                to: this.allowNull ? null : new Date(this.date?.to)
+                to: this.allowNull ? null : new Date(this.date?.to),
             });
         }
         else {
             this.setDate({
                 from: this.allowNull ? null : new Date(),
-                to: this.allowNull ? null : new Date()
+                to: this.allowNull ? null : new Date(),
             });
         }
         this.selectedDate.next({
             from: null,
-            to: null
+            to: null,
         });
         this.prepareInput();
     }
-    onChange(date) {
-    }
+    onChange(date) { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DateRangeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: DateRangeComponent, selector: "teta-date-range", inputs: { date: "date", locale: "locale", showTime: "showTime", minDate: "minDate", maxDate: "maxDate", invalid: "invalid", disabled: "disabled", align: "align", verticalAlign: "verticalAlign", viewType: "viewType", appendToBody: "appendToBody", backdrop: "backdrop", allowNull: "allowNull" }, outputs: { selectDate: "selectDate" }, providers: [DATE_Range_CONTROL_VALUE_ACCESSOR, DatePipe], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<teta-dropdown *ngIf=\"{selectedDate:selectedDate|async}as data\" [appendToBody]=\"appendToBody\" [backdrop]=\"backdrop\"\n               [(open)]=\"open\" (openChange)=\"openChange($event)\" [viewType]=\"viewType\"\n               [disabled]=\"disabled\" [verticalAlign]=\"verticalAlign\" [align]=\"align\"\n               [autoCloseIgnore]=\"['esc', 'inside','enter']\">\n  <div tetaDropdownHead\n       [class]=\"'datepicker-head font-body-3 gap-8 datepicker_'+viewType\"\n       [ngClass]=\"{'datepicker-head_invalid':invalid,'datepicker-head_disabled':disabled}\">\n    <teta-input class=\"row row_auto flex\">\n      <div [class]=\"'row_auto row datepicker_'+viewType\">\n        <div class=\"row position-relative font-body-3 align-center\">\n          <input [ngClass]=\"{'color-text-90':!disabled}\" [disabled]=\"disabled\" #input style=\"z-index: 1\"\n                 class=\"border-0 color-text-90\" (keydown)=\"checkEnter($event)\"\n                 [(ngModel)]=\"inputText\" (ngModelChange)=\"changeInput($event)\"\n                 [maskito]=\"maskitoOptions\">\n          <div (click)=\"input.focus()\" *ngIf=\"data.selectedDate||allowNull\" class=\"position-absolute color-text-10\"\n               style=\"top:-0.3px;cursor: text;user-select: none\">{{placeholder}}</div>\n        </div>\n        <teta-icon [name]=\"'calendar'\"></teta-icon>\n      </div>\n    </teta-input>\n  </div>\n  <div tetaDropdownContent class=\"scrollable\" (click)=\"$event.preventDefault()\">\n    <ng-container *ngIf=\"open\">\n      <div class=\"row\">\n        <teta-range-calendar [isDateNull]=\"date===null||(date?.from===null&&date?.to===null)\" [open]=\"open\"\n                             [max]=\"maxDate\"\n                             [allowNull]=\"allowNull\"\n                             [min]=\"minDate\"\n                             (setDate)=\"changeSelectedDate($event,data.selectedDate)\"\n                             [selectedDate]=\"data.selectedDate\"\n                             [date]=\"date\"\n                             [viewType]=\"viewType\" [locale]=\"locale\"></teta-range-calendar>\n      </div>\n    </ng-container>\n  </div>\n</teta-dropdown>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i6.MaskitoCva, selector: "input[maskito], textarea[maskito]", inputs: ["maskito"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "hint", "viewType", "horizontal", "required"] }, { kind: "component", type: RangeCalendarComponent, selector: "teta-range-calendar", inputs: ["locale", "open", "date", "viewType", "allowNull", "selectedDate", "min", "isDateNull", "max"], outputs: ["hoveredDateChange", "setDate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }