@morozeckiy/dd-lib 0.7.81 → 0.7.83

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4392,6 +4392,7 @@ class LibDateRangeComponent {
4392
4392
  static { this.idCounter = 1; }
4393
4393
  constructor(cdr) {
4394
4394
  this.cdr = cdr;
4395
+ this.setDateRange = new EventEmitter();
4395
4396
  this.placeholderStart = 'Дата начала';
4396
4397
  this.placeholderEnd = 'Дата окончания';
4397
4398
  this.rangeModeFullPeriod = true;
@@ -4422,13 +4423,13 @@ class LibDateRangeComponent {
4422
4423
  }
4423
4424
  }
4424
4425
  get startDateStr() {
4425
- return this.formatDate(this.selectedPeriod.start);
4426
+ return this.formatDate(this.selectedPeriod?.start);
4426
4427
  }
4427
4428
  set startDateStr(value) {
4428
4429
  this.selectedPeriod.start = this.parseDate(value);
4429
4430
  }
4430
4431
  get endDateStr() {
4431
- return this.formatDate(this.selectedPeriod.end);
4432
+ return this.formatDate(this.selectedPeriod?.end);
4432
4433
  }
4433
4434
  set endDateStr(value) {
4434
4435
  this.selectedPeriod.end = this.parseDate(value);
@@ -4460,13 +4461,24 @@ class LibDateRangeComponent {
4460
4461
  }
4461
4462
  setPeriod($event) {
4462
4463
  this.isShownPeriod = false;
4464
+ this.startIsFocused = false;
4465
+ this.endIsFocused = false;
4463
4466
  if ($event) {
4464
- this.selectedPeriodStr = `${format($event?.start, 'dd.MM.yyyy')} - ${format($event?.end, 'dd.MM.yyyy')}`;
4467
+ if ($event?.start && $event?.end) {
4468
+ this.selectedPeriodStr = `${format($event?.start, 'dd.MM.yyyy')} - ${format($event?.end, 'dd.MM.yyyy')}`;
4469
+ }
4470
+ if ($event?.start && !$event?.end) {
4471
+ this.selectedPeriodStr = `${format($event?.start, 'dd.MM.yyyy')} - `;
4472
+ }
4473
+ if (!$event?.start && $event?.end) {
4474
+ this.selectedPeriodStr = ` - ${format($event?.end, 'dd.MM.yyyy')}`;
4475
+ }
4465
4476
  }
4466
4477
  else {
4467
4478
  this.selectedPeriod = new IDatePeriod();
4468
4479
  this.selectedPeriodStr = undefined;
4469
4480
  }
4481
+ this.setDateRange.emit($event);
4470
4482
  this.propagateChange(this.selectedPeriod);
4471
4483
  }
4472
4484
  changeStrDate($event) {
@@ -4489,7 +4501,11 @@ class LibDateRangeComponent {
4489
4501
  this.onTouchedCallback = fn;
4490
4502
  }
4491
4503
  writeValue($event) {
4492
- this.selectedPeriod = $event;
4504
+ console.log($event);
4505
+ this.selectedPeriod = $event ? $event : {
4506
+ start: undefined,
4507
+ end: undefined
4508
+ };
4493
4509
  if ($event?.start && $event?.end) {
4494
4510
  this.selectedPeriodStr = `${format($event?.start, 'dd.MM.yyyy')} - ${format($event?.end, 'dd.MM.yyyy')}`;
4495
4511
  }
@@ -4510,7 +4526,7 @@ class LibDateRangeComponent {
4510
4526
  }
4511
4527
  }
4512
4528
  if (this.endIsFocused) {
4513
- if (this.selectedPeriod.end?.toString() === $event?.toString()) {
4529
+ if (this.selectedPeriod?.end?.toString() === $event?.toString()) {
4514
4530
  this.selectedPeriod.end = undefined;
4515
4531
  }
4516
4532
  else {
@@ -4534,14 +4550,14 @@ class LibDateRangeComponent {
4534
4550
  }
4535
4551
  }
4536
4552
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibDateRangeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
4537
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: LibDateRangeComponent, isStandalone: true, selector: "dd-lib-date-range", inputs: { rangeId: "rangeId", placeholderStart: "placeholderStart", placeholderEnd: "placeholderEnd", label: "label", required: "required", rangeModeFullPeriod: "rangeModeFullPeriod" }, host: { listeners: { "document:keydown.tab": "pressTab($event)" } }, providers: [
4553
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: LibDateRangeComponent, isStandalone: true, selector: "dd-lib-date-range", inputs: { rangeId: "rangeId", placeholderStart: "placeholderStart", placeholderEnd: "placeholderEnd", label: "label", required: "required", rangeModeFullPeriod: "rangeModeFullPeriod" }, outputs: { setDateRange: "setDateRange" }, host: { listeners: { "document:keydown.tab": "pressTab($event)" } }, providers: [
4538
4554
  provideNgxMask(),
4539
4555
  {
4540
4556
  provide: NG_VALUE_ACCESSOR,
4541
4557
  useExisting: forwardRef(() => LibDateRangeComponent),
4542
4558
  multi: true,
4543
4559
  },
4544
- ], viewQueries: [{ propertyName: "startInput", first: true, predicate: ["startInput"], descendants: true, static: true }, { propertyName: "endInput", first: true, predicate: ["endInput"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"lib-range\" id=\"lib-range-{{ rangeId }}\" [destroyedItem]=\"isShownPeriod\" ddFixedPosition>\n @if (label) {\n <label [for]=\"rangeId\" class=\"lib-range__title\">\n {{ label }}\n @if (required) {\n <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n }\n </label>\n }\n <div class=\"pos-relative lib-range-wrapper\"\n [class.start-active]=\"startIsFocused\"\n [class.end-active]=\"endIsFocused\"\n data-child=\"input\">\n <input\n #startInput\n [attr.id]=\"rangeId\"\n tabindex=\"1\"\n [attr.placeholder]=\"placeholderStart\"\n (click)=\"openCalendar()\"\n [(ngModel)]=\"startDateStr\"\n [mask]=\"'d0.M0.0000'\"\n (ngModelChange)=\"changeStrDate($event)\"\n (focus)=\"changeActiveInput('start', true)\"\n (blur)=\"changeActiveInput('start', false)\"\n [leadZeroDateTime]=\"true\"\n class=\"text-select\"/>\n \u2013\n <input\n #endInput\n [attr.id]=\"rangeId\"\n tabindex=\"2\"\n [attr.placeholder]=\"placeholderEnd\"\n (click)=\"openCalendar()\"\n [(ngModel)]=\"endDateStr\"\n [mask]=\"'d0.M0.0000'\"\n (focus)=\"changeActiveInput('end', true)\"\n (blur)=\"changeActiveInput('end', false)\"\n (ngModelChange)=\"changeStrDate($event)\"\n [leadZeroDateTime]=\"true\"\n class=\"text-select\"/>\n @if (!selectedPeriodStr) {\n <dd-lib-svg-icon [class.gray-svg]=\"!isShownPeriod\"\n (click)=\"openCalendar()\"\n id=\"calendar-{{ rangeId }}\"\n class=\"calendar\" icon=\"calendar\"></dd-lib-svg-icon>\n\n\n } @else {\n <dd-lib-svg-icon\n (click)=\"setPeriod(undefined)\"\n class=\"clear\"\n icon=\"clear\"></dd-lib-svg-icon>\n\n }\n </div>\n @if (isShownPeriod) {\n <div data-child=\"list\"\n (ddClickOutside)=\"closeCalendar()\"\n [elements]=\"['lib-range-' + rangeId, 'calendar' + rangeId]\"\n class=\"calendar-wrapper\">\n <dd-lib-calendar [(ngModel)]=\"selectedPeriod\"\n (immediatelyEmitDate)=\"setDate($event)\"\n [dateStart]=\"selectedPeriod.start\"\n [dateEnd]=\"selectedPeriod.end\"\n [rangeMode]=\"true\"\n [rangeModeFullPeriod]=\"rangeModeFullPeriod\"\n (emitPeriod)=\"setPeriod($event)\"></dd-lib-calendar>\n </div>\n }\n</div>\n", styles: [".lib-range{min-width:311px;position:relative}.lib-range .lib-range-wrapper{display:flex;align-items:center;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative;overflow:hidden}.lib-range .lib-range-wrapper.start-active:before{content:\"\";position:absolute;top:0;left:0;width:50%;height:100%;border-radius:8px 0 0 8px;border:1px solid var(--input-active-border-colort);box-sizing:border-box;pointer-events:none;border-right:none}.lib-range .lib-range-wrapper.end-active:before{content:\"\";position:absolute;top:0;right:0;width:50%;height:100%;border-radius:0 8px 8px 0;border:1px solid var(--input-active-border-colort);border-left:none;box-sizing:border-box;pointer-events:none}.lib-range .lib-range-wrapper:hover{border-color:var(--input-active-border-colort)}.lib-range .lib-range-wrapper:hover:before{opacity:0}.lib-range .lib-range-wrapper:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-range input{width:100%;height:48px;padding:15px 28px 15px 16px;overflow:hidden;text-overflow:ellipsis;border:none;text-align:center}.lib-range input:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-range input:disabled::placeholder{color:var(--input-placeholder)}.lib-range input.invalid,.lib-range input.invalid:hover{border-color:var(--input-error-border-color)}.lib-range input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-range .clear{cursor:pointer;position:absolute;right:8px;top:12px}.lib-range .calendar{cursor:pointer;position:absolute;right:16px;top:10px}.lib-range .calendar.up{transform:rotate(180deg)}.lib-range__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start}.lib-range__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-range .calendar-wrapper{position:absolute;display:block;z-index:100;width:100%;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[ddClickOutside]", inputs: ["elements"], outputs: ["ddClickOutside"] }, { kind: "component", type: LibCalendarComponent, selector: "dd-lib-calendar", inputs: ["type", "formatDate", "formatTime", "rangeMode", "rangeModeFullPeriod", "maxHours", "maxMinutes", "needTime", "mode", "dateStart", "dateEnd", "maxDate", "minDate"], outputs: ["emitDate", "immediatelyEmitDate", "emitPeriod"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: FixedPositionDirective, selector: "[ddFixedPosition]", inputs: ["childName1", "childName2", "destroyedItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
4560
+ ], viewQueries: [{ propertyName: "startInput", first: true, predicate: ["startInput"], descendants: true, static: true }, { propertyName: "endInput", first: true, predicate: ["endInput"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"lib-range\" id=\"lib-range-{{ rangeId }}\" [destroyedItem]=\"isShownPeriod\" ddFixedPosition>\n @if (label) {\n <label [for]=\"rangeId\" class=\"lib-range__title\">\n {{ label }}\n @if (required) {\n <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n }\n </label>\n }\n <div class=\"pos-relative lib-range-wrapper\"\n [class.start-active]=\"startIsFocused\"\n [class.end-active]=\"endIsFocused\"\n data-child=\"input\">\n <input\n #startInput\n [attr.id]=\"rangeId\"\n tabindex=\"1\"\n [attr.placeholder]=\"placeholderStart\"\n (click)=\"openCalendar()\"\n [(ngModel)]=\"startDateStr\"\n [mask]=\"'d0.M0.0000'\"\n (ngModelChange)=\"changeStrDate($event)\"\n (focus)=\"changeActiveInput('start', true)\"\n (blur)=\"changeActiveInput('start', false)\"\n [leadZeroDateTime]=\"true\"\n class=\"text-select\"/>\n \u2013\n <input\n #endInput\n [attr.id]=\"rangeId\"\n tabindex=\"2\"\n [attr.placeholder]=\"placeholderEnd\"\n (click)=\"openCalendar()\"\n [(ngModel)]=\"endDateStr\"\n [mask]=\"'d0.M0.0000'\"\n (focus)=\"changeActiveInput('end', true)\"\n (blur)=\"changeActiveInput('end', false)\"\n (ngModelChange)=\"changeStrDate($event)\"\n [leadZeroDateTime]=\"true\"\n class=\"text-select\"/>\n @if (!selectedPeriodStr) {\n <dd-lib-svg-icon [class.gray-svg]=\"!isShownPeriod\"\n (click)=\"openCalendar()\"\n id=\"calendar-{{ rangeId }}\"\n class=\"calendar\" icon=\"calendar\"></dd-lib-svg-icon>\n\n\n } @else {\n <dd-lib-svg-icon\n (click)=\"setPeriod(undefined)\"\n class=\"clear\"\n icon=\"clear\"></dd-lib-svg-icon>\n\n }\n </div>\n @if (isShownPeriod) {\n <div data-child=\"list\"\n (ddClickOutside)=\"closeCalendar()\"\n [elements]=\"['lib-range-' + rangeId, 'calendar' + rangeId]\"\n class=\"calendar-wrapper\">\n <dd-lib-calendar [(ngModel)]=\"selectedPeriod\"\n (immediatelyEmitDate)=\"setDate($event)\"\n [dateStart]=\"selectedPeriod?.start\"\n [dateEnd]=\"selectedPeriod?.end\"\n [rangeMode]=\"true\"\n [rangeModeFullPeriod]=\"rangeModeFullPeriod\"\n (emitPeriod)=\"setPeriod($event)\"></dd-lib-calendar>\n </div>\n }\n</div>\n", styles: [".lib-range{min-width:311px;position:relative}.lib-range .lib-range-wrapper{display:flex;align-items:center;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative;overflow:hidden}.lib-range .lib-range-wrapper.start-active:before{content:\"\";position:absolute;top:0;left:0;width:50%;height:100%;border-radius:8px 0 0 8px;border:1px solid var(--input-active-border-colort);box-sizing:border-box;pointer-events:none;border-right:none}.lib-range .lib-range-wrapper.end-active:before{content:\"\";position:absolute;top:0;right:0;width:50%;height:100%;border-radius:0 8px 8px 0;border:1px solid var(--input-active-border-colort);border-left:none;box-sizing:border-box;pointer-events:none}.lib-range .lib-range-wrapper:hover{border-color:var(--input-active-border-colort)}.lib-range .lib-range-wrapper:hover:before{opacity:0}.lib-range .lib-range-wrapper:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-range input{width:100%;height:48px;padding:15px 28px 15px 16px;overflow:hidden;text-overflow:ellipsis;border:none;text-align:center}.lib-range input:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-range input:disabled::placeholder{color:var(--input-placeholder)}.lib-range input.invalid,.lib-range input.invalid:hover{border-color:var(--input-error-border-color)}.lib-range input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-range .clear{cursor:pointer;position:absolute;right:8px;top:12px}.lib-range .calendar{cursor:pointer;position:absolute;right:16px;top:10px}.lib-range .calendar.up{transform:rotate(180deg)}.lib-range__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start}.lib-range__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-range .calendar-wrapper{position:absolute;display:block;z-index:100;width:100%;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LibSvgIconComponent, selector: "dd-lib-svg-icon", inputs: ["width", "height", "color", "icon"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[ddClickOutside]", inputs: ["elements"], outputs: ["ddClickOutside"] }, { kind: "component", type: LibCalendarComponent, selector: "dd-lib-calendar", inputs: ["type", "formatDate", "formatTime", "rangeMode", "rangeModeFullPeriod", "maxHours", "maxMinutes", "needTime", "mode", "dateStart", "dateEnd", "maxDate", "minDate"], outputs: ["emitDate", "immediatelyEmitDate", "emitPeriod"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: FixedPositionDirective, selector: "[ddFixedPosition]", inputs: ["childName1", "childName2", "destroyedItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
4545
4561
  }
4546
4562
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: LibDateRangeComponent, decorators: [{
4547
4563
  type: Component,
@@ -4559,13 +4575,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
4559
4575
  useExisting: forwardRef(() => LibDateRangeComponent),
4560
4576
  multi: true,
4561
4577
  },
4562
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lib-range\" id=\"lib-range-{{ rangeId }}\" [destroyedItem]=\"isShownPeriod\" ddFixedPosition>\n @if (label) {\n <label [for]=\"rangeId\" class=\"lib-range__title\">\n {{ label }}\n @if (required) {\n <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n }\n </label>\n }\n <div class=\"pos-relative lib-range-wrapper\"\n [class.start-active]=\"startIsFocused\"\n [class.end-active]=\"endIsFocused\"\n data-child=\"input\">\n <input\n #startInput\n [attr.id]=\"rangeId\"\n tabindex=\"1\"\n [attr.placeholder]=\"placeholderStart\"\n (click)=\"openCalendar()\"\n [(ngModel)]=\"startDateStr\"\n [mask]=\"'d0.M0.0000'\"\n (ngModelChange)=\"changeStrDate($event)\"\n (focus)=\"changeActiveInput('start', true)\"\n (blur)=\"changeActiveInput('start', false)\"\n [leadZeroDateTime]=\"true\"\n class=\"text-select\"/>\n \u2013\n <input\n #endInput\n [attr.id]=\"rangeId\"\n tabindex=\"2\"\n [attr.placeholder]=\"placeholderEnd\"\n (click)=\"openCalendar()\"\n [(ngModel)]=\"endDateStr\"\n [mask]=\"'d0.M0.0000'\"\n (focus)=\"changeActiveInput('end', true)\"\n (blur)=\"changeActiveInput('end', false)\"\n (ngModelChange)=\"changeStrDate($event)\"\n [leadZeroDateTime]=\"true\"\n class=\"text-select\"/>\n @if (!selectedPeriodStr) {\n <dd-lib-svg-icon [class.gray-svg]=\"!isShownPeriod\"\n (click)=\"openCalendar()\"\n id=\"calendar-{{ rangeId }}\"\n class=\"calendar\" icon=\"calendar\"></dd-lib-svg-icon>\n\n\n } @else {\n <dd-lib-svg-icon\n (click)=\"setPeriod(undefined)\"\n class=\"clear\"\n icon=\"clear\"></dd-lib-svg-icon>\n\n }\n </div>\n @if (isShownPeriod) {\n <div data-child=\"list\"\n (ddClickOutside)=\"closeCalendar()\"\n [elements]=\"['lib-range-' + rangeId, 'calendar' + rangeId]\"\n class=\"calendar-wrapper\">\n <dd-lib-calendar [(ngModel)]=\"selectedPeriod\"\n (immediatelyEmitDate)=\"setDate($event)\"\n [dateStart]=\"selectedPeriod.start\"\n [dateEnd]=\"selectedPeriod.end\"\n [rangeMode]=\"true\"\n [rangeModeFullPeriod]=\"rangeModeFullPeriod\"\n (emitPeriod)=\"setPeriod($event)\"></dd-lib-calendar>\n </div>\n }\n</div>\n", styles: [".lib-range{min-width:311px;position:relative}.lib-range .lib-range-wrapper{display:flex;align-items:center;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative;overflow:hidden}.lib-range .lib-range-wrapper.start-active:before{content:\"\";position:absolute;top:0;left:0;width:50%;height:100%;border-radius:8px 0 0 8px;border:1px solid var(--input-active-border-colort);box-sizing:border-box;pointer-events:none;border-right:none}.lib-range .lib-range-wrapper.end-active:before{content:\"\";position:absolute;top:0;right:0;width:50%;height:100%;border-radius:0 8px 8px 0;border:1px solid var(--input-active-border-colort);border-left:none;box-sizing:border-box;pointer-events:none}.lib-range .lib-range-wrapper:hover{border-color:var(--input-active-border-colort)}.lib-range .lib-range-wrapper:hover:before{opacity:0}.lib-range .lib-range-wrapper:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-range input{width:100%;height:48px;padding:15px 28px 15px 16px;overflow:hidden;text-overflow:ellipsis;border:none;text-align:center}.lib-range input:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-range input:disabled::placeholder{color:var(--input-placeholder)}.lib-range input.invalid,.lib-range input.invalid:hover{border-color:var(--input-error-border-color)}.lib-range input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-range .clear{cursor:pointer;position:absolute;right:8px;top:12px}.lib-range .calendar{cursor:pointer;position:absolute;right:16px;top:10px}.lib-range .calendar.up{transform:rotate(180deg)}.lib-range__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start}.lib-range__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-range .calendar-wrapper{position:absolute;display:block;z-index:100;width:100%;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color)}\n"] }]
4578
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lib-range\" id=\"lib-range-{{ rangeId }}\" [destroyedItem]=\"isShownPeriod\" ddFixedPosition>\n @if (label) {\n <label [for]=\"rangeId\" class=\"lib-range__title\">\n {{ label }}\n @if (required) {\n <dd-lib-svg-icon icon=\"error_hint\"></dd-lib-svg-icon>\n }\n </label>\n }\n <div class=\"pos-relative lib-range-wrapper\"\n [class.start-active]=\"startIsFocused\"\n [class.end-active]=\"endIsFocused\"\n data-child=\"input\">\n <input\n #startInput\n [attr.id]=\"rangeId\"\n tabindex=\"1\"\n [attr.placeholder]=\"placeholderStart\"\n (click)=\"openCalendar()\"\n [(ngModel)]=\"startDateStr\"\n [mask]=\"'d0.M0.0000'\"\n (ngModelChange)=\"changeStrDate($event)\"\n (focus)=\"changeActiveInput('start', true)\"\n (blur)=\"changeActiveInput('start', false)\"\n [leadZeroDateTime]=\"true\"\n class=\"text-select\"/>\n \u2013\n <input\n #endInput\n [attr.id]=\"rangeId\"\n tabindex=\"2\"\n [attr.placeholder]=\"placeholderEnd\"\n (click)=\"openCalendar()\"\n [(ngModel)]=\"endDateStr\"\n [mask]=\"'d0.M0.0000'\"\n (focus)=\"changeActiveInput('end', true)\"\n (blur)=\"changeActiveInput('end', false)\"\n (ngModelChange)=\"changeStrDate($event)\"\n [leadZeroDateTime]=\"true\"\n class=\"text-select\"/>\n @if (!selectedPeriodStr) {\n <dd-lib-svg-icon [class.gray-svg]=\"!isShownPeriod\"\n (click)=\"openCalendar()\"\n id=\"calendar-{{ rangeId }}\"\n class=\"calendar\" icon=\"calendar\"></dd-lib-svg-icon>\n\n\n } @else {\n <dd-lib-svg-icon\n (click)=\"setPeriod(undefined)\"\n class=\"clear\"\n icon=\"clear\"></dd-lib-svg-icon>\n\n }\n </div>\n @if (isShownPeriod) {\n <div data-child=\"list\"\n (ddClickOutside)=\"closeCalendar()\"\n [elements]=\"['lib-range-' + rangeId, 'calendar' + rangeId]\"\n class=\"calendar-wrapper\">\n <dd-lib-calendar [(ngModel)]=\"selectedPeriod\"\n (immediatelyEmitDate)=\"setDate($event)\"\n [dateStart]=\"selectedPeriod?.start\"\n [dateEnd]=\"selectedPeriod?.end\"\n [rangeMode]=\"true\"\n [rangeModeFullPeriod]=\"rangeModeFullPeriod\"\n (emitPeriod)=\"setPeriod($event)\"></dd-lib-calendar>\n </div>\n }\n</div>\n", styles: [".lib-range{min-width:311px;position:relative}.lib-range .lib-range-wrapper{display:flex;align-items:center;border-radius:8px;border:1px solid var(--input-border-color);background-color:transparent;position:relative;overflow:hidden}.lib-range .lib-range-wrapper.start-active:before{content:\"\";position:absolute;top:0;left:0;width:50%;height:100%;border-radius:8px 0 0 8px;border:1px solid var(--input-active-border-colort);box-sizing:border-box;pointer-events:none;border-right:none}.lib-range .lib-range-wrapper.end-active:before{content:\"\";position:absolute;top:0;right:0;width:50%;height:100%;border-radius:0 8px 8px 0;border:1px solid var(--input-active-border-colort);border-left:none;box-sizing:border-box;pointer-events:none}.lib-range .lib-range-wrapper:hover{border-color:var(--input-active-border-colort)}.lib-range .lib-range-wrapper:hover:before{opacity:0}.lib-range .lib-range-wrapper:focus{border-color:var(--input-active-border-colort);box-shadow:var(--input-active-border-shadow)}.lib-range input{width:100%;height:48px;padding:15px 28px 15px 16px;overflow:hidden;text-overflow:ellipsis;border:none;text-align:center}.lib-range input:disabled{border:none;background-color:var(--input-disable-input);color:var(--input-disable-text);pointer-events:none}.lib-range input:disabled::placeholder{color:var(--input-placeholder)}.lib-range input.invalid,.lib-range input.invalid:hover{border-color:var(--input-error-border-color)}.lib-range input.invalid:focus{border-color:var(--input-error-border-color);box-shadow:var(--input-error-border-shadow)}.lib-range .clear{cursor:pointer;position:absolute;right:8px;top:12px}.lib-range .calendar{cursor:pointer;position:absolute;right:16px;top:10px}.lib-range .calendar.up{transform:rotate(180deg)}.lib-range__title{margin-bottom:4px;font-size:14px;line-height:24px;display:flex;align-items:flex-start}.lib-range__error{color:var(--primary-red-color);font-size:12px;font-weight:400;line-height:10px;margin-top:2px;position:absolute}.lib-range .calendar-wrapper{position:absolute;display:block;z-index:100;width:100%;overflow:auto;border-radius:8px;box-shadow:var(--main-card-shadow);background-color:var(--main-card-color)}\n"] }]
4563
4579
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { startInput: [{
4564
4580
  type: ViewChild,
4565
4581
  args: ['startInput', { static: true }]
4566
4582
  }], endInput: [{
4567
4583
  type: ViewChild,
4568
4584
  args: ['endInput', { static: true }]
4585
+ }], setDateRange: [{
4586
+ type: Output
4569
4587
  }], rangeId: [{
4570
4588
  type: Input
4571
4589
  }], placeholderStart: [{