@acorex/components 20.7.39 → 20.7.41

package/fesm2022/acorex-components-calendar.mjs

@@ -13,6 +13,14 @@ import { AXTranslationService, AXTranslatorPipe } from '@acorex/core/translation
 import { AXSelectBoxComponent } from '@acorex/components/select-box';
 import { isPlatformBrowser, NgClass, NgTemplateOutlet, AsyncPipe } from '@angular/common';
 
+function getCalendarYearBounds(options) {
+    const past = typeof options.yearRange === 'number' ? options.yearRange : options.yearRange.past;
+    const future = typeof options.yearRange === 'number' ? options.yearRange : options.yearRange.future;
+    return {
+        minYear: options.minValue ? options.getYear(options.minValue) : options.referenceYear - past,
+        maxYear: options.maxValue ? options.getYear(options.maxValue) : options.referenceYear + future,
+    };
+}
 /**
  *  Contains native event
  * @category Events
@@ -277,6 +285,12 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
          * - `select`: month/year dropdowns with prev/next arrows on the edges.
          */
         this.look = input('select', ...(ngDevMode ? [{ debugName: "look" }] : []));
+        /**
+         * Years shown in the year selector when `look` is `select`.
+         * Use a number for equal past/future ranges, or `{ past, future }` for asymmetric ranges.
+         * `minValue` and `maxValue` take priority when set.
+         */
+        this.yearRange = input(80, ...(ngDevMode ? [{ debugName: "yearRange" }] : []));
         this.isRtl = this.localeService.isRtl;
         this.calendar = linkedSignal(() => this.type ?? this.localeService.activeProfile().calendar.system, ...(ngDevMode ? [{ debugName: "calendar" }] : []));
         /** Week column order from the active locale profile (0 = Sun … 6 = Sat). */
@@ -412,11 +426,14 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
                 text: `@acorex:${this.getMonthName(date, 'short')}`,
             };
         });
-        const currentYear = this._viewStartDate.year;
-        const minYear = this.minValue
-            ? this.calendarService.create(this.minValue, this.calendar()).year
-            : currentYear - 100;
-        const maxYear = this.maxValue ? this.calendarService.create(this.maxValue, this.calendar()).year : currentYear + 10;
+        const referenceYear = this._today.year;
+        const { minYear, maxYear } = getCalendarYearBounds({
+            referenceYear,
+            yearRange: this.yearRange(),
+            minValue: this.minValue,
+            maxValue: this.maxValue,
+            getYear: (date) => this.calendarService.create(date, this.calendar()).year,
+        });
         this._yearOptions = [];
         for (let year = minYear; year <= maxYear; year++) {
             this._yearOptions.push({ id: year, text: String(year) });
@@ -935,7 +952,7 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
         return `dateTime.months.${date.calendar.name()}.${style}.${date.monthOfYear - 1}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXCalendarComponent, isStandalone: true, selector: "ax-calendar", inputs: { rtl: { classPropertyName: "rtl", publicName: "rtl", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: false, isRequired: false, transformFunction: null }, activeView: { classPropertyName: "activeView", publicName: "activeView", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: false, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: false, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: false, isRequired: false, transformFunction: null }, holidayDates: { classPropertyName: "holidayDates", publicName: "holidayDates", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, dayCellTemplate: { classPropertyName: "dayCellTemplate", publicName: "dayCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, monthCellTemplate: { classPropertyName: "monthCellTemplate", publicName: "monthCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, yearCellTemplate: { classPropertyName: "yearCellTemplate", publicName: "yearCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, cellClass: { classPropertyName: "cellClass", publicName: "cellClass", isSignal: false, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: false, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, weekend: { classPropertyName: "weekend", publicName: "weekend", isSignal: true, isRequired: false, transformFunction: null }, weekdays: { classPropertyName: "weekdays", publicName: "weekdays", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOptionChanged: "onOptionChanged", valueChange: "valueChange", onValueChanged: "onValueChanged", minValueChange: "minValueChange", maxValueChange: "maxValueChange", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", activeViewChange: "activeViewChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", onSlotClick: "onSlotClick", countChange: "countChange" }, host: { listeners: { "keydown": "_handleOnKeydownEvent($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXCalendarComponent, isStandalone: true, selector: "ax-calendar", inputs: { rtl: { classPropertyName: "rtl", publicName: "rtl", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: false, isRequired: false, transformFunction: null }, activeView: { classPropertyName: "activeView", publicName: "activeView", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: false, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: false, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: false, isRequired: false, transformFunction: null }, holidayDates: { classPropertyName: "holidayDates", publicName: "holidayDates", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, dayCellTemplate: { classPropertyName: "dayCellTemplate", publicName: "dayCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, monthCellTemplate: { classPropertyName: "monthCellTemplate", publicName: "monthCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, yearCellTemplate: { classPropertyName: "yearCellTemplate", publicName: "yearCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, cellClass: { classPropertyName: "cellClass", publicName: "cellClass", isSignal: false, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: false, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, weekend: { classPropertyName: "weekend", publicName: "weekend", isSignal: true, isRequired: false, transformFunction: null }, weekdays: { classPropertyName: "weekdays", publicName: "weekdays", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, yearRange: { classPropertyName: "yearRange", publicName: "yearRange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOptionChanged: "onOptionChanged", valueChange: "valueChange", onValueChanged: "onValueChanged", minValueChange: "minValueChange", maxValueChange: "maxValueChange", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", activeViewChange: "activeViewChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", onSlotClick: "onSlotClick", countChange: "countChange" }, host: { listeners: { "keydown": "_handleOnKeydownEvent($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AXCalendarComponent),
@@ -1240,7 +1257,7 @@ class AXCalendarRangeComponent extends classes((MXValueComponent), MXInteractive
             },
             AXUnsubscriber,
             { provide: AXComponent, useExisting: AXCalendarRangeComponent },
-        ], viewQueries: [{ propertyName: "_c1", first: true, predicate: ["c1"], descendants: true, static: true }, { propertyName: "_c2", first: true, predicate: ["c2"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-calendar-range-header\">\n  <ng-content></ng-content>\n  <div class=\"ax-calendar-header-range-info\">\n    <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"handleNavClick()\">\n      {{ _navText }}\n    </button>\n  </div>\n  <div class=\"ax-calendar-header-range-buttons\">\n    <button\n      type=\"button\"\n      [attr.disabled]=\"disabled ? '' : null\"\n      class=\"ax-general-button ax-button-icon\"\n      (click)=\"handlePrevClick()\"\n    >\n      <i class=\"ax-icon ax-icon-chevron-left\"></i>\n    </button>\n    <button\n      type=\"button\"\n      [attr.disabled]=\"disabled ? '' : null\"\n      class=\"ax-general-button ax-button-icon\"\n      (click)=\"handleNextClick()\"\n    >\n      <i class=\"ax-icon ax-icon-chevron-right\"></i>\n    </button>\n  </div>\n</div>\n<div class=\"ax-calendar-range-body\">\n  <ax-calendar\n    #c1\n    [showNavigation]=\"false\"\n    [readonly]=\"true\"\n    [cellClass]=\"getCellClass\"\n    [type]=\"type\"\n    [dayCellTemplate]=\"dayCellTemplate\"\n    [monthCellTemplate]=\"monthCellTemplate\"\n    [yearCellTemplate]=\"yearCellTemplate\"\n    [minValue]=\"minValue\"\n    [maxValue]=\"maxValue\"\n    [depth]=\"depth\"\n    [look]=\"look()\"\n    (onSlotClick)=\"handleSlotClick($event)\"\n    (onNavigate)=\"handleNavigate()\"\n    (activeViewChange)=\"handleActiveViewChange1()\"\n  >\n  </ax-calendar>\n  <ax-calendar\n    #c2\n    [showNavigation]=\"false\"\n    [readonly]=\"true\"\n    [cellClass]=\"getCellClass\"\n    [type]=\"type\"\n    [dayCellTemplate]=\"dayCellTemplate\"\n    [monthCellTemplate]=\"monthCellTemplate\"\n    [yearCellTemplate]=\"yearCellTemplate\"\n    [minValue]=\"minValue\"\n    [maxValue]=\"maxValue\"\n    [depth]=\"depth\"\n    [look]=\"look()\"\n    (onSlotClick)=\"handleSlotClick($event)\"\n    (activeViewChange)=\"handleActiveViewChange2()\"\n  >\n  </ax-calendar>\n</div>\n", styles: ["ax-calendar-range{--ax-comp-calendar-range-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-calendar-slot-range-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-calendar-slot-range-between-bg-color: var(--ax-sys-color-primary-surface), .5;--ax-comp-calendar-slot-range-start-end-bg-color: var(--ax-sys-color-primary-surface)}.ax-dark ax-calendar-range{--ax-comp-calendar-range-text-color: var(--ax-sys-color-on-darkest-surface)}html[dir=rtl] ax-calendar-range .ax-calendar-header-range-buttons .ax-icon{-moz-transform:scale(-1,1);-o-transform:scale(-1,1);-webkit-transform:scale(-1,1);transform:scaleX(-1)}ax-calendar-range{display:block;padding:.5rem;color:rgb(var(--ax-comp-calendar-range-text-color));background-color:rgba(var(--ax-comp-calendar-range-bg-color))}ax-calendar-range .ax-calendar-range-header{display:flex;justify-content:space-between;padding-top:var(--ax-comp-calendar-range-header-padding-t, .25rem);padding-left:var(--ax-comp-calendar-range-header-padding-x, .25rem);padding-right:var(--ax-comp-calendar-range-header-padding-x, .25rem)}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-info{font-weight:500}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-buttons{display:flex}ax-calendar-range .ax-calendar-range-body{display:flex;flex-direction:row}@media (min-width: 320px) and (max-width: 640px){ax-calendar-range .ax-calendar-range-body{flex-direction:column}}ax-calendar-range ax-calendar{margin:0;padding:0}ax-calendar-range ax-calendar .ax-calendar-body{margin-top:0;padding-top:0}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between{color:rgba(var(--ax-comp-calendar-slot-range-text-color));background-color:rgba(var(--ax-comp-calendar-slot-range-between-bg-color))}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-start,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-end{color:rgba(var(--ax-comp-calendar-slot-range-text-color));background-color:rgba(var(--ax-comp-calendar-slot-range-start-end-bg-color))}@media (min-width: 768px){ax-calendar-range ax-calendar .ax-calendar-body>div{width:100%!important}}\n"], dependencies: [{ kind: "component", type: AXCalendarComponent, selector: "ax-calendar", inputs: ["rtl", "readonly", "value", "name", "disabled", "depth", "activeView", "minValue", "maxValue", "disabledDates", "holidayDates", "type", "dayCellTemplate", "monthCellTemplate", "yearCellTemplate", "cellClass", "showNavigation", "count", "id", "weekend", "weekdays", "look"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "minValueChange", "maxValueChange", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick", "countChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "_c1", first: true, predicate: ["c1"], descendants: true, static: true }, { propertyName: "_c2", first: true, predicate: ["c2"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-calendar-range-header\">\n  <ng-content></ng-content>\n  <div class=\"ax-calendar-header-range-info\">\n    <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"handleNavClick()\">\n      {{ _navText }}\n    </button>\n  </div>\n  <div class=\"ax-calendar-header-range-buttons\">\n    <button\n      type=\"button\"\n      [attr.disabled]=\"disabled ? '' : null\"\n      class=\"ax-general-button ax-button-icon\"\n      (click)=\"handlePrevClick()\"\n    >\n      <i class=\"ax-icon ax-icon-chevron-left\"></i>\n    </button>\n    <button\n      type=\"button\"\n      [attr.disabled]=\"disabled ? '' : null\"\n      class=\"ax-general-button ax-button-icon\"\n      (click)=\"handleNextClick()\"\n    >\n      <i class=\"ax-icon ax-icon-chevron-right\"></i>\n    </button>\n  </div>\n</div>\n<div class=\"ax-calendar-range-body\">\n  <ax-calendar\n    #c1\n    [showNavigation]=\"false\"\n    [readonly]=\"true\"\n    [cellClass]=\"getCellClass\"\n    [type]=\"type\"\n    [dayCellTemplate]=\"dayCellTemplate\"\n    [monthCellTemplate]=\"monthCellTemplate\"\n    [yearCellTemplate]=\"yearCellTemplate\"\n    [minValue]=\"minValue\"\n    [maxValue]=\"maxValue\"\n    [depth]=\"depth\"\n    [look]=\"look()\"\n    (onSlotClick)=\"handleSlotClick($event)\"\n    (onNavigate)=\"handleNavigate()\"\n    (activeViewChange)=\"handleActiveViewChange1()\"\n  >\n  </ax-calendar>\n  <ax-calendar\n    #c2\n    [showNavigation]=\"false\"\n    [readonly]=\"true\"\n    [cellClass]=\"getCellClass\"\n    [type]=\"type\"\n    [dayCellTemplate]=\"dayCellTemplate\"\n    [monthCellTemplate]=\"monthCellTemplate\"\n    [yearCellTemplate]=\"yearCellTemplate\"\n    [minValue]=\"minValue\"\n    [maxValue]=\"maxValue\"\n    [depth]=\"depth\"\n    [look]=\"look()\"\n    (onSlotClick)=\"handleSlotClick($event)\"\n    (activeViewChange)=\"handleActiveViewChange2()\"\n  >\n  </ax-calendar>\n</div>\n", styles: ["ax-calendar-range{--ax-comp-calendar-range-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-calendar-slot-range-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-calendar-slot-range-between-bg-color: var(--ax-sys-color-primary-surface), .5;--ax-comp-calendar-slot-range-start-end-bg-color: var(--ax-sys-color-primary-surface)}.ax-dark ax-calendar-range{--ax-comp-calendar-range-text-color: var(--ax-sys-color-on-darkest-surface)}html[dir=rtl] ax-calendar-range .ax-calendar-header-range-buttons .ax-icon{-moz-transform:scale(-1,1);-o-transform:scale(-1,1);-webkit-transform:scale(-1,1);transform:scaleX(-1)}ax-calendar-range{display:block;padding:.5rem;color:rgb(var(--ax-comp-calendar-range-text-color));background-color:rgba(var(--ax-comp-calendar-range-bg-color))}ax-calendar-range .ax-calendar-range-header{display:flex;justify-content:space-between;padding-top:var(--ax-comp-calendar-range-header-padding-t, .25rem);padding-left:var(--ax-comp-calendar-range-header-padding-x, .25rem);padding-right:var(--ax-comp-calendar-range-header-padding-x, .25rem)}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-info{font-weight:500}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-buttons{display:flex}ax-calendar-range .ax-calendar-range-body{display:flex;flex-direction:row}@media (min-width: 320px) and (max-width: 640px){ax-calendar-range .ax-calendar-range-body{flex-direction:column}}ax-calendar-range ax-calendar{margin:0;padding:0}ax-calendar-range ax-calendar .ax-calendar-body{margin-top:0;padding-top:0}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between{color:rgba(var(--ax-comp-calendar-slot-range-text-color));background-color:rgba(var(--ax-comp-calendar-slot-range-between-bg-color))}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-start,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-end{color:rgba(var(--ax-comp-calendar-slot-range-text-color));background-color:rgba(var(--ax-comp-calendar-slot-range-start-end-bg-color))}@media (min-width: 768px){ax-calendar-range ax-calendar .ax-calendar-body>div{width:100%!important}}\n"], dependencies: [{ kind: "component", type: AXCalendarComponent, selector: "ax-calendar", inputs: ["rtl", "readonly", "value", "name", "disabled", "depth", "activeView", "minValue", "maxValue", "disabledDates", "holidayDates", "type", "dayCellTemplate", "monthCellTemplate", "yearCellTemplate", "cellClass", "showNavigation", "count", "id", "weekend", "weekdays", "look", "yearRange"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "minValueChange", "maxValueChange", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick", "countChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXCalendarRangeComponent, decorators: [{
             type: Component,
@@ -1313,5 +1330,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXCalendarComponent, AXCalendarModule, AXCalendarNavigateEvent, AXCalendarRangeComponent, AXCalendarSlotClick, CALENDAR_INPUTS, CALENDAR_OUTPUTS, MXCalendarBaseComponent };
+export { AXCalendarComponent, AXCalendarModule, AXCalendarNavigateEvent, AXCalendarRangeComponent, AXCalendarSlotClick, CALENDAR_INPUTS, CALENDAR_OUTPUTS, MXCalendarBaseComponent, getCalendarYearBounds };
 //# sourceMappingURL=acorex-components-calendar.mjs.map