myrta-ui 17.1.48 → 17.1.49

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.
@@ -9629,7 +9629,7 @@ class DateCalendarComponent {
9629
9629
  'Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь',
9630
9630
  'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'
9631
9631
  ];
9632
- daysOfWeek = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
9632
+ daysOfWeek = ['ПН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СБ', 'ВС'];
9633
9633
  months = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
9634
9634
  _minDate = null;
9635
9635
  _maxDate = null;
@@ -9819,11 +9819,11 @@ class DateCalendarComponent {
9819
9819
  return this.getYears()[this.getYears().length - 1] >= this._maxDate.getFullYear();
9820
9820
  }
9821
9821
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateCalendarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
9822
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DateCalendarComponent, selector: "mrx-date-calendar", inputs: { selectedDate: "selectedDate", minDate: "minDate", maxDate: "maxDate" }, outputs: { dateSelected: "dateSelected", close: "close" }, ngImport: i0, template: "<div class=\"calendar\">\r\n <div class=\"calendar-header\">\r\n @if (view === 'days') {\r\n <button class=\"nav-button\" (click)=\"changeMonth(-1)\" [disabled]=\"isPreviousMonthDisabled()\">\r\n \u276E\r\n </button>\r\n }\r\n\r\n @if (view === 'years') {\r\n <button class=\"nav-button\" (click)=\"changeYearRange(-1)\" [disabled]=\"isPreviousYearRangeDisabled()\">\r\n \u276E\r\n </button>\r\n }\r\n\r\n <button class=\"header-button\" (click)=\"switchView()\">\r\n {{ headerText }}\r\n </button>\r\n\r\n @if (view === 'days') {\r\n <button class=\"nav-button\" (click)=\"changeMonth(1)\" [disabled]=\"isNextMonthDisabled()\">\r\n \u276F\r\n </button>\r\n }\r\n\r\n @if (view === 'years') {\r\n <button class=\"nav-button\" (click)=\"changeYearRange(1)\" [disabled]=\"isNextYearRangeDisabled()\">\r\n \u276F\r\n </button>\r\n }\r\n </div>\r\n\r\n @switch (view) {\r\n @case ('years') {\r\n <div class=\"year-grid\">\r\n @for (year of getYears(); track year) {\r\n <div\r\n class=\"year\"\r\n [class.selected]=\"isYearSelected(year)\"\r\n [class.disabled]=\"isYearDisabled(year)\"\r\n [class.hoverable]=\"!isYearDisabled(year)\"\r\n (click)=\"selectYear(year)\"\r\n >\r\n {{ year }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n @case ('months') {\r\n <div class=\"month-grid\">\r\n @for (month of months; track month) {\r\n <div\r\n class=\"month\"\r\n [class.selected]=\"isMonthSelected(month)\"\r\n [class.disabled]=\"isMonthDisabled(month)\"\r\n [class.hoverable]=\"!isMonthDisabled(month)\"\r\n (click)=\"selectMonth(month)\"\r\n >\r\n {{ monthNames[month] }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n @default {\r\n <div class=\"calendar-grid\">\r\n @for (day of daysOfWeek; track day) {\r\n <div class=\"day-header\">{{ day }}</div>\r\n }\r\n\r\n @for (day of getCalendarDays(); track day) {\r\n <div\r\n class=\"day\"\r\n [class.selected]=\"isSelected(day)\"\r\n [class.other-month]=\"day.month !== currentMonth\"\r\n [class.disabled]=\"!isDateEnabled(day)\"\r\n [class.hoverable]=\"isDateEnabled(day)\"\r\n (click)=\"selectDate(day)\"\r\n >\r\n {{ day.day }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n }\r\n</div>\r\n", styles: [".calendar{width:280px;background:#fff;border:1px solid #d1d5db;border-radius:8px;box-shadow:0 4px 6px #0000001a;padding:16px;font-family:Arial,sans-serif}.calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:8px}.header-button{background:none;border:none;font-weight:600;font-size:16px;color:#1f2937;cursor:pointer;padding:4px 8px;text-align:center;flex-grow:1}.header-button:hover{background:#f3f4f6;border-radius:4px}.nav-button{background:none;border:none;font-size:18px;cursor:pointer;padding:4px 8px;color:#374151}.nav-button:disabled{cursor:not-allowed;opacity:.5}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}.month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}.year-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center;max-height:190px;overflow-y:auto}.day-header{font-size:12px;font-weight:500;color:#6b7280;padding:4px}.day,.month,.year{padding:8px;font-size:14px;border-radius:4px;color:#374151}.day.hoverable,.month.hoverable,.year.hoverable{cursor:pointer}.day.hoverable:hover,.month.hoverable:hover,.year.hoverable:hover{background:#f3f4f6}.day.selected,.month.selected,.year.selected{background:#3b82f6;color:#fff}.day.other-month,.month.other-month,.year.other-month{color:#9ca3af}.day.disabled,.month.disabled,.year.disabled{color:#d1d5db;cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
9822
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DateCalendarComponent, selector: "mrx-date-calendar", inputs: { selectedDate: "selectedDate", minDate: "minDate", maxDate: "maxDate" }, outputs: { dateSelected: "dateSelected", close: "close" }, ngImport: i0, template: "<div class=\"mrx-calendar\">\r\n <div class=\"mrx-calendar-header\">\r\n @if (view === 'days') {\r\n <button class=\"mrx-calendar-header__chevron\" (click)=\"changeMonth(-1)\" [disabled]=\"isPreviousMonthDisabled()\">\r\n <span class=\"mrx-icon icon-chevron-left icon-font-16\"></span>\r\n </button>\r\n }\r\n\r\n @if (view === 'years') {\r\n <button class=\"mrx-calendar-header__chevron\" (click)=\"changeYearRange(-1)\" [disabled]=\"isPreviousYearRangeDisabled()\">\r\n <span class=\"mrx-icon icon-chevron-left icon-font-16\"></span>\r\n </button>\r\n }\r\n\r\n <button class=\"mrx-calendar-header__button\" (click)=\"switchView()\">\r\n {{ headerText }}\r\n </button>\r\n\r\n @if (view === 'days') {\r\n <button class=\"mrx-calendar-header__chevron\" (click)=\"changeMonth(1)\" [disabled]=\"isNextMonthDisabled()\">\r\n <span class=\"mrx-icon icon-chevron-right icon-font-16\"></span>\r\n </button>\r\n }\r\n\r\n @if (view === 'years') {\r\n <button class=\"mrx-calendar-header__chevron\" (click)=\"changeYearRange(1)\" [disabled]=\"isNextYearRangeDisabled()\">\r\n <span class=\"mrx-icon icon-chevron-right icon-font-16\"></span>\r\n </button>\r\n }\r\n </div>\r\n\r\n <div class=\"mrx-calendar-body\">\r\n @switch (view) {\r\n @case ('years') {\r\n <div class=\"mrx-calendar-body__grid mrx-calendar-body__grid--years\">\r\n @for (year of getYears(); track year) {\r\n <div\r\n class=\"mrx-calendar-body__grid__item mrx-calendar-body__grid__item--year\"\r\n [class.selected]=\"isYearSelected(year)\"\r\n [class.disabled]=\"isYearDisabled(year)\"\r\n [class.hoverable]=\"!isYearDisabled(year)\"\r\n (click)=\"selectYear(year)\"\r\n >\r\n {{ year }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n @case ('months') {\r\n <div class=\"mrx-calendar-body__grid mrx-calendar-body__grid--months\">\r\n @for (month of months; track month) {\r\n <div\r\n class=\"mrx-calendar-body__grid__item mrx-calendar-body__grid__item--month\"\r\n [class.selected]=\"isMonthSelected(month)\"\r\n [class.disabled]=\"isMonthDisabled(month)\"\r\n [class.hoverable]=\"!isMonthDisabled(month)\"\r\n (click)=\"selectMonth(month)\"\r\n >\r\n {{ monthNames[month] }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n @default {\r\n <div class=\"mrx-calendar-body__grid mrx-calendar-body__grid--days\">\r\n @for (day of daysOfWeek; track day) {\r\n <div class=\"mrx-calendar-body__grid__label\">{{ day }}</div>\r\n }\r\n\r\n @for (day of getCalendarDays(); track day) {\r\n <div\r\n class=\"mrx-calendar-body__grid__item mrx-calendar-body__grid__item--day\"\r\n [class.selected]=\"isSelected(day)\"\r\n [class.other-month]=\"day.month !== currentMonth\"\r\n [class.disabled]=\"!isDateEnabled(day)\"\r\n [class.hoverable]=\"isDateEnabled(day)\"\r\n (click)=\"selectDate(day)\"\r\n >\r\n {{ day.day }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n</div>\r\n", styles: [".mrx-calendar{width:272px;border-radius:4px;background-color:var(--brand-bg-tertiary-default, #FFF);box-shadow:0 1px 4px #3a3a3a4d}.mrx-calendar-header{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--neutral-bg-divider, #DBDFE5)}.mrx-calendar-header__button{border:none;border-radius:4px;background-color:transparent;padding:6px 12px;text-align:center;flex-grow:1;font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-primary, #262626);cursor:pointer;transition:background-color .3s}.mrx-calendar-header__button:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-calendar-header__chevron{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border:none;border-radius:4px;background-color:transparent;cursor:pointer;transition:background-color .3s}.mrx-calendar-header__chevron:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-calendar-header__chevron:disabled{cursor:default}.mrx-calendar-header__chevron:disabled:hover{background-color:var(--neutral-bg-island-default, #F8F9FA)}.mrx-calendar-body{padding:8px 12px}.mrx-calendar-body__grid--days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}.mrx-calendar-body__grid--months{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}.mrx-calendar-body__grid--years{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center;max-height:190px;overflow-y:auto}.mrx-calendar-body__grid__label{display:flex;justify-content:center;align-items:center;width:32px;height:32px;font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--brand-text-accent, #003780)}.mrx-calendar-body__grid__item{display:flex;justify-content:center;align-items:center;border-radius:4px;font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-primary, #262626);transition:background-color .3s}.mrx-calendar-body__grid__item--day{width:32px;height:32px}.mrx-calendar-body__grid__item--month,.mrx-calendar-body__grid__item--year{height:32px}.mrx-calendar-body__grid__item.hoverable{cursor:pointer}.mrx-calendar-body__grid__item.hoverable:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-calendar-body__grid__item.selected{background-color:var(--brand-bg-primary-default, #2A6AB8);color:var(--neutral-text-inverse, #FFF)}.mrx-calendar-body__grid__item.selected:hover{background-color:var(--brand-bg-primary-hover, #0F54AA)}.mrx-calendar-body__grid__item.other-month{background-color:transparent;color:var(--neutral-text-tertiary, #71767E)}.mrx-calendar-body__grid__item.other-month.selected{background-color:var(--brand-bg-secondary-default, #EDF5FF);color:var(--neutral-text-tertiary, #71767E)}.mrx-calendar-body__grid__item.other-month.selected:hover{background-color:var(--brand-bg-secondary-hover, #BED6F1)}.mrx-calendar-body__grid__item.other-month:hover{background-color:var(--neutral-bg-island-default, #F8F9FA)}.mrx-calendar-body__grid__item.disabled{background-color:transparent;color:var(--neutral-text-tertiary, #71767E)}.mrx-calendar-body__grid__item.disabled:hover{background-color:var(--neutral-bg-island-default, #F8F9FA)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
9823
9823
  }
9824
9824
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateCalendarComponent, decorators: [{
9825
9825
  type: Component,
9826
- args: [{ selector: 'mrx-date-calendar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"calendar\">\r\n <div class=\"calendar-header\">\r\n @if (view === 'days') {\r\n <button class=\"nav-button\" (click)=\"changeMonth(-1)\" [disabled]=\"isPreviousMonthDisabled()\">\r\n \u276E\r\n </button>\r\n }\r\n\r\n @if (view === 'years') {\r\n <button class=\"nav-button\" (click)=\"changeYearRange(-1)\" [disabled]=\"isPreviousYearRangeDisabled()\">\r\n \u276E\r\n </button>\r\n }\r\n\r\n <button class=\"header-button\" (click)=\"switchView()\">\r\n {{ headerText }}\r\n </button>\r\n\r\n @if (view === 'days') {\r\n <button class=\"nav-button\" (click)=\"changeMonth(1)\" [disabled]=\"isNextMonthDisabled()\">\r\n \u276F\r\n </button>\r\n }\r\n\r\n @if (view === 'years') {\r\n <button class=\"nav-button\" (click)=\"changeYearRange(1)\" [disabled]=\"isNextYearRangeDisabled()\">\r\n \u276F\r\n </button>\r\n }\r\n </div>\r\n\r\n @switch (view) {\r\n @case ('years') {\r\n <div class=\"year-grid\">\r\n @for (year of getYears(); track year) {\r\n <div\r\n class=\"year\"\r\n [class.selected]=\"isYearSelected(year)\"\r\n [class.disabled]=\"isYearDisabled(year)\"\r\n [class.hoverable]=\"!isYearDisabled(year)\"\r\n (click)=\"selectYear(year)\"\r\n >\r\n {{ year }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n @case ('months') {\r\n <div class=\"month-grid\">\r\n @for (month of months; track month) {\r\n <div\r\n class=\"month\"\r\n [class.selected]=\"isMonthSelected(month)\"\r\n [class.disabled]=\"isMonthDisabled(month)\"\r\n [class.hoverable]=\"!isMonthDisabled(month)\"\r\n (click)=\"selectMonth(month)\"\r\n >\r\n {{ monthNames[month] }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n @default {\r\n <div class=\"calendar-grid\">\r\n @for (day of daysOfWeek; track day) {\r\n <div class=\"day-header\">{{ day }}</div>\r\n }\r\n\r\n @for (day of getCalendarDays(); track day) {\r\n <div\r\n class=\"day\"\r\n [class.selected]=\"isSelected(day)\"\r\n [class.other-month]=\"day.month !== currentMonth\"\r\n [class.disabled]=\"!isDateEnabled(day)\"\r\n [class.hoverable]=\"isDateEnabled(day)\"\r\n (click)=\"selectDate(day)\"\r\n >\r\n {{ day.day }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n }\r\n</div>\r\n", styles: [".calendar{width:280px;background:#fff;border:1px solid #d1d5db;border-radius:8px;box-shadow:0 4px 6px #0000001a;padding:16px;font-family:Arial,sans-serif}.calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:8px}.header-button{background:none;border:none;font-weight:600;font-size:16px;color:#1f2937;cursor:pointer;padding:4px 8px;text-align:center;flex-grow:1}.header-button:hover{background:#f3f4f6;border-radius:4px}.nav-button{background:none;border:none;font-size:18px;cursor:pointer;padding:4px 8px;color:#374151}.nav-button:disabled{cursor:not-allowed;opacity:.5}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}.month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}.year-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center;max-height:190px;overflow-y:auto}.day-header{font-size:12px;font-weight:500;color:#6b7280;padding:4px}.day,.month,.year{padding:8px;font-size:14px;border-radius:4px;color:#374151}.day.hoverable,.month.hoverable,.year.hoverable{cursor:pointer}.day.hoverable:hover,.month.hoverable:hover,.year.hoverable:hover{background:#f3f4f6}.day.selected,.month.selected,.year.selected{background:#3b82f6;color:#fff}.day.other-month,.month.other-month,.year.other-month{color:#9ca3af}.day.disabled,.month.disabled,.year.disabled{color:#d1d5db;cursor:not-allowed}\n"] }]
9826
+ args: [{ selector: 'mrx-date-calendar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mrx-calendar\">\r\n <div class=\"mrx-calendar-header\">\r\n @if (view === 'days') {\r\n <button class=\"mrx-calendar-header__chevron\" (click)=\"changeMonth(-1)\" [disabled]=\"isPreviousMonthDisabled()\">\r\n <span class=\"mrx-icon icon-chevron-left icon-font-16\"></span>\r\n </button>\r\n }\r\n\r\n @if (view === 'years') {\r\n <button class=\"mrx-calendar-header__chevron\" (click)=\"changeYearRange(-1)\" [disabled]=\"isPreviousYearRangeDisabled()\">\r\n <span class=\"mrx-icon icon-chevron-left icon-font-16\"></span>\r\n </button>\r\n }\r\n\r\n <button class=\"mrx-calendar-header__button\" (click)=\"switchView()\">\r\n {{ headerText }}\r\n </button>\r\n\r\n @if (view === 'days') {\r\n <button class=\"mrx-calendar-header__chevron\" (click)=\"changeMonth(1)\" [disabled]=\"isNextMonthDisabled()\">\r\n <span class=\"mrx-icon icon-chevron-right icon-font-16\"></span>\r\n </button>\r\n }\r\n\r\n @if (view === 'years') {\r\n <button class=\"mrx-calendar-header__chevron\" (click)=\"changeYearRange(1)\" [disabled]=\"isNextYearRangeDisabled()\">\r\n <span class=\"mrx-icon icon-chevron-right icon-font-16\"></span>\r\n </button>\r\n }\r\n </div>\r\n\r\n <div class=\"mrx-calendar-body\">\r\n @switch (view) {\r\n @case ('years') {\r\n <div class=\"mrx-calendar-body__grid mrx-calendar-body__grid--years\">\r\n @for (year of getYears(); track year) {\r\n <div\r\n class=\"mrx-calendar-body__grid__item mrx-calendar-body__grid__item--year\"\r\n [class.selected]=\"isYearSelected(year)\"\r\n [class.disabled]=\"isYearDisabled(year)\"\r\n [class.hoverable]=\"!isYearDisabled(year)\"\r\n (click)=\"selectYear(year)\"\r\n >\r\n {{ year }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n @case ('months') {\r\n <div class=\"mrx-calendar-body__grid mrx-calendar-body__grid--months\">\r\n @for (month of months; track month) {\r\n <div\r\n class=\"mrx-calendar-body__grid__item mrx-calendar-body__grid__item--month\"\r\n [class.selected]=\"isMonthSelected(month)\"\r\n [class.disabled]=\"isMonthDisabled(month)\"\r\n [class.hoverable]=\"!isMonthDisabled(month)\"\r\n (click)=\"selectMonth(month)\"\r\n >\r\n {{ monthNames[month] }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n @default {\r\n <div class=\"mrx-calendar-body__grid mrx-calendar-body__grid--days\">\r\n @for (day of daysOfWeek; track day) {\r\n <div class=\"mrx-calendar-body__grid__label\">{{ day }}</div>\r\n }\r\n\r\n @for (day of getCalendarDays(); track day) {\r\n <div\r\n class=\"mrx-calendar-body__grid__item mrx-calendar-body__grid__item--day\"\r\n [class.selected]=\"isSelected(day)\"\r\n [class.other-month]=\"day.month !== currentMonth\"\r\n [class.disabled]=\"!isDateEnabled(day)\"\r\n [class.hoverable]=\"isDateEnabled(day)\"\r\n (click)=\"selectDate(day)\"\r\n >\r\n {{ day.day }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n</div>\r\n", styles: [".mrx-calendar{width:272px;border-radius:4px;background-color:var(--brand-bg-tertiary-default, #FFF);box-shadow:0 1px 4px #3a3a3a4d}.mrx-calendar-header{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--neutral-bg-divider, #DBDFE5)}.mrx-calendar-header__button{border:none;border-radius:4px;background-color:transparent;padding:6px 12px;text-align:center;flex-grow:1;font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-primary, #262626);cursor:pointer;transition:background-color .3s}.mrx-calendar-header__button:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-calendar-header__chevron{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border:none;border-radius:4px;background-color:transparent;cursor:pointer;transition:background-color .3s}.mrx-calendar-header__chevron:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-calendar-header__chevron:disabled{cursor:default}.mrx-calendar-header__chevron:disabled:hover{background-color:var(--neutral-bg-island-default, #F8F9FA)}.mrx-calendar-body{padding:8px 12px}.mrx-calendar-body__grid--days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}.mrx-calendar-body__grid--months{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}.mrx-calendar-body__grid--years{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center;max-height:190px;overflow-y:auto}.mrx-calendar-body__grid__label{display:flex;justify-content:center;align-items:center;width:32px;height:32px;font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--brand-text-accent, #003780)}.mrx-calendar-body__grid__item{display:flex;justify-content:center;align-items:center;border-radius:4px;font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-primary, #262626);transition:background-color .3s}.mrx-calendar-body__grid__item--day{width:32px;height:32px}.mrx-calendar-body__grid__item--month,.mrx-calendar-body__grid__item--year{height:32px}.mrx-calendar-body__grid__item.hoverable{cursor:pointer}.mrx-calendar-body__grid__item.hoverable:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-calendar-body__grid__item.selected{background-color:var(--brand-bg-primary-default, #2A6AB8);color:var(--neutral-text-inverse, #FFF)}.mrx-calendar-body__grid__item.selected:hover{background-color:var(--brand-bg-primary-hover, #0F54AA)}.mrx-calendar-body__grid__item.other-month{background-color:transparent;color:var(--neutral-text-tertiary, #71767E)}.mrx-calendar-body__grid__item.other-month.selected{background-color:var(--brand-bg-secondary-default, #EDF5FF);color:var(--neutral-text-tertiary, #71767E)}.mrx-calendar-body__grid__item.other-month.selected:hover{background-color:var(--brand-bg-secondary-hover, #BED6F1)}.mrx-calendar-body__grid__item.other-month:hover{background-color:var(--neutral-bg-island-default, #F8F9FA)}.mrx-calendar-body__grid__item.disabled{background-color:transparent;color:var(--neutral-text-tertiary, #71767E)}.mrx-calendar-body__grid__item.disabled:hover{background-color:var(--neutral-bg-island-default, #F8F9FA)}\n"] }]
9827
9827
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { selectedDate: [{
9828
9828
  type: Input
9829
9829
  }], dateSelected: [{
@@ -9876,10 +9876,8 @@ class InputDateComponent {
9876
9876
  modelChange = new EventEmitter();
9877
9877
  blurred = new EventEmitter();
9878
9878
  dateInput;
9879
- onChange = () => {
9880
- };
9881
- onTouched = () => {
9882
- };
9879
+ onChange = () => { };
9880
+ onTouched = () => { };
9883
9881
  constructor(_overlay, _detector, _elementRef) {
9884
9882
  this._overlay = _overlay;
9885
9883
  this._detector = _detector;
@@ -9889,7 +9887,8 @@ class InputDateComponent {
9889
9887
  this.mask = this.format.replace(/[DMY]/g, '0');
9890
9888
  }
9891
9889
  ngOnDestroy() {
9892
- this._clickSubscription.unsubscribe();
9890
+ this._clickSubscription?.unsubscribe();
9891
+ this.closeCalendar();
9893
9892
  }
9894
9893
  get checkValidClasses() {
9895
9894
  if (!this.required) {
@@ -9906,7 +9905,24 @@ class InputDateComponent {
9906
9905
  return !!this.dateInput?.nativeElement.value;
9907
9906
  }
9908
9907
  writeValue(value) {
9909
- this.value = value;
9908
+ const date = parseInputDate(value);
9909
+ if (date && isDateInRange(date, this.minDate, this.maxDate)) {
9910
+ this.selectedDate = date;
9911
+ this.displayValue = formatDate(date, this.format);
9912
+ this.errorMessage = null;
9913
+ }
9914
+ else if (this.isSilentValidation && date) {
9915
+ const clampedDate = clampDate(date, this.minDate, this.maxDate);
9916
+ this.selectedDate = clampedDate;
9917
+ this.displayValue = formatDate(clampedDate, this.format);
9918
+ this.errorMessage = null;
9919
+ }
9920
+ else {
9921
+ this.selectedDate = null;
9922
+ this.displayValue = date ? formatDate(date, this.format) : '';
9923
+ this.errorMessage = date ? getRangeErrorMessage(date, this.minDate, this.maxDate) : null;
9924
+ }
9925
+ this._detector.markForCheck();
9910
9926
  }
9911
9927
  registerOnChange(fn) {
9912
9928
  this.onChange = fn;
@@ -9916,6 +9932,7 @@ class InputDateComponent {
9916
9932
  }
9917
9933
  setDisabledState(isDisabled) {
9918
9934
  this.disabled = isDisabled;
9935
+ this._detector.markForCheck();
9919
9936
  }
9920
9937
  set value(value) {
9921
9938
  const date = parseInputDate(value);
@@ -9938,6 +9955,7 @@ class InputDateComponent {
9938
9955
  this.displayValue = date ? formatDate(date, this.format) : '';
9939
9956
  this.errorMessage = date ? getRangeErrorMessage(date, this.minDate, this.maxDate) : null;
9940
9957
  }
9958
+ this._detector.markForCheck();
9941
9959
  }
9942
9960
  onInput(event) {
9943
9961
  const inputElement = event.target;
@@ -9967,7 +9985,7 @@ class InputDateComponent {
9967
9985
  let date = new Date(year, month, day);
9968
9986
  if (isValidDate(date) && isDateInRange(date, this.minDate, this.maxDate)) {
9969
9987
  this.selectedDate = date;
9970
- this.value = toOutputFormat(date);
9988
+ this.updateValue(toOutputFormat(date));
9971
9989
  }
9972
9990
  else {
9973
9991
  const { year: adjYear, month: adjMonth, day: adjDay } = adjustInvalidDate(year, month, day);
@@ -9975,13 +9993,13 @@ class InputDateComponent {
9975
9993
  if (isDateInRange(date, this.minDate, this.maxDate)) {
9976
9994
  this.selectedDate = date;
9977
9995
  this.displayValue = formatDate(date, this.format);
9978
- this.value = toOutputFormat(date);
9996
+ this.updateValue(toOutputFormat(date));
9979
9997
  }
9980
9998
  else if (this.isSilentValidation) {
9981
9999
  const clampedDate = clampDate(date, this.minDate, this.maxDate);
9982
10000
  this.selectedDate = clampedDate;
9983
10001
  this.displayValue = formatDate(clampedDate, this.format);
9984
- this.value = toOutputFormat(clampedDate);
10002
+ this.updateValue(toOutputFormat(clampedDate));
9985
10003
  }
9986
10004
  else {
9987
10005
  this.selectedDate = null;
@@ -9989,15 +10007,17 @@ class InputDateComponent {
9989
10007
  }
9990
10008
  }
9991
10009
  }
10010
+ this._detector.markForCheck();
9992
10011
  }
9993
10012
  onBlur() {
9994
10013
  this.onTouched();
9995
10014
  if (this.displayValue.length > 0 && this.displayValue.length < this.format.length) {
9996
10015
  this.displayValue = '';
9997
10016
  this.selectedDate = null;
9998
- this.value = '';
10017
+ this.updateValue('');
9999
10018
  this.errorMessage = null;
10000
10019
  }
10020
+ this._detector.markForCheck();
10001
10021
  }
10002
10022
  openCalendar() {
10003
10023
  if (this.disabled || this._overlayRef)
@@ -10030,12 +10050,12 @@ class InputDateComponent {
10030
10050
  const clampedDate = clampDate(date, this.minDate, this.maxDate);
10031
10051
  this.selectedDate = clampedDate;
10032
10052
  this.displayValue = formatDate(clampedDate, this.format);
10033
- this.value = toOutputFormat(clampedDate);
10034
10053
  this.errorMessage = null;
10054
+ this.updateValue(toOutputFormat(clampedDate));
10035
10055
  if (this.closeAfterSelect) {
10036
10056
  this.closeCalendar();
10037
10057
  }
10038
- this._detector.detectChanges();
10058
+ this._detector.markForCheck();
10039
10059
  }
10040
10060
  closeCalendar() {
10041
10061
  if (this._overlayRef) {
@@ -10048,9 +10068,12 @@ class InputDateComponent {
10048
10068
  this.openCalendar();
10049
10069
  }
10050
10070
  clickToIconClear() {
10051
- this.value = '';
10052
- this.closeCalendar();
10071
+ this.displayValue = '';
10072
+ this.selectedDate = null;
10073
+ this.errorMessage = null;
10053
10074
  this.updateValue('');
10075
+ this.closeCalendar();
10076
+ this._detector.markForCheck();
10054
10077
  }
10055
10078
  updateValue(insideValue) {
10056
10079
  this.changed.emit(insideValue);