igniteui-webcomponents 4.11.0 → 5.0.0-rc.0

package/components/button-group/themes/group.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"group.base.css.js","sourceRoot":"","sources":["../../../../src/components/button-group/themes/group.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,quCAAquC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size);scrollbar-color:var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background)}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size);height:var(--ig-scrollbar-size);background:var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background)}:host([hidden]),[hidden]{display:none !important}:host{max-width:100%}[part~=group]{display:grid;grid-auto-flow:row;grid-auto-columns:minmax(0, 1fr)}:host(:not([alignment=vertical])){--_negative-margin-horizontal: -0.0625rem}:host(:not([alignment=vertical])) [part~=group]{grid-auto-flow:column}:host([alignment=vertical]){--_negative-margin-vertical: -0.0625rem}:host([alignment=vertical]) [part~=group]{grid-auto-flow:row}`;\n"]}
+{"version":3,"file":"group.base.css.js","sourceRoot":"","sources":["../../../../src/components/button-group/themes/group.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,quCAAquC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size);scrollbar-color:var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size);height:var(--ig-scrollbar-size);background:var(--ig-scrollbar-track-background)}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background)}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{max-width:100%}[part~=group]{display:grid;grid-auto-flow:row;grid-auto-columns:minmax(0, 1fr)}:host(:not([alignment=vertical])){--_negative-margin-horizontal: -0.0625rem}:host(:not([alignment=vertical])) [part~=group]{grid-auto-flow:column}:host([alignment=vertical]){--_negative-margin-vertical: -0.0625rem}:host([alignment=vertical]) [part~=group]{grid-auto-flow:row}`;\n"]}

package/components/calendar/base.d.ts

@@ -0,0 +1,65 @@
+import { LitElement } from 'lit';
+import { CalendarDay } from './model.js';
+import type { DateRangeDescriptor, WeekDays } from './types.js';
+export declare class IgcCalendarBaseComponent extends LitElement {
+    private _initialActiveDateSet;
+    protected get _hasValues(): boolean;
+    protected get _isSingle(): boolean;
+    protected get _isMultiple(): boolean;
+    protected get _isRange(): boolean;
+    protected _rangePreviewDate?: CalendarDay;
+    protected _firstDayOfWeek: number;
+    protected _activeDate: CalendarDay;
+    protected _value?: CalendarDay;
+    protected _values: CalendarDay[];
+    protected _specialDates: DateRangeDescriptor[];
+    protected _disabledDates: DateRangeDescriptor[];
+    get value(): Date | undefined;
+    /**
+     * The current value of the calendar.
+     * Used when selection is set to single
+     *
+     * @attr value
+     */
+    set value(value: Date | undefined);
+    get values(): Date[];
+    /**
+     * The current values of the calendar.
+     * Used when selection is set to multiple of range.
+     *
+     * @attr values
+     */
+    set values(values: Date[]);
+    get activeDate(): Date;
+    /** Get/Set the date which is shown in view and is highlighted. By default it is the current date. */
+    set activeDate(value: Date);
+    /**
+     * Sets the type of selection in the component.
+     * @attr selection
+     */
+    selection: 'single' | 'multiple' | 'range';
+    /**
+     * Whether to show the week numbers.
+     * @attr show-week-numbers
+     */
+    showWeekNumbers: boolean;
+    /**
+     * Gets/Sets the first day of the week.
+     * @attr week-start
+     */
+    weekStart: WeekDays;
+    /**
+     * Gets/Sets the locale used for formatting and displaying the dates in the component.
+     * @attr locale
+     */
+    locale: string;
+    /** Gets/Sets the special dates for the component. */
+    set specialDates(value: DateRangeDescriptor[]);
+    get specialDates(): DateRangeDescriptor[] | undefined;
+    /** Gets/Sets the disabled dates for the component. */
+    set disabledDates(value: DateRangeDescriptor[]);
+    get disabledDates(): DateRangeDescriptor[] | undefined;
+    protected weekStartChanged(): void;
+    protected selectionChanged(): void;
+    protected firstUpdated(): void;
+}

package/components/calendar/base.js

@@ -0,0 +1,150 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';
+import { blazorIndirectRender } from '../common/decorators/blazorIndirectRender.js';
+import { watch } from '../common/decorators/watch.js';
+import { dateFromISOString, datesFromISOStrings, getWeekDayNumber, } from './helpers.js';
+import { CalendarDay } from './model.js';
+let IgcCalendarBaseComponent = class IgcCalendarBaseComponent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._initialActiveDateSet = false;
+        this._firstDayOfWeek = 0;
+        this._activeDate = CalendarDay.today;
+        this._values = [];
+        this._specialDates = [];
+        this._disabledDates = [];
+        this.selection = 'single';
+        this.showWeekNumbers = false;
+        this.weekStart = 'sunday';
+        this.locale = 'en';
+    }
+    get _hasValues() {
+        return this._values.length > 0;
+    }
+    get _isSingle() {
+        return this.selection === 'single';
+    }
+    get _isMultiple() {
+        return this.selection === 'multiple';
+    }
+    get _isRange() {
+        return this.selection === 'range';
+    }
+    get value() {
+        return this._value ? this._value.native : undefined;
+    }
+    set value(value) {
+        this._value = value ? CalendarDay.from(value) : undefined;
+    }
+    get values() {
+        return this._values ? this._values.map((v) => v.native) : [];
+    }
+    set values(values) {
+        this._values = values ? values.map((v) => CalendarDay.from(v)) : [];
+    }
+    get activeDate() {
+        return this._activeDate.native;
+    }
+    set activeDate(value) {
+        this._initialActiveDateSet = true;
+        this._activeDate = value ? CalendarDay.from(value) : CalendarDay.today;
+    }
+    set specialDates(value) {
+        this._specialDates = value ?? [];
+    }
+    get specialDates() {
+        return this._specialDates.length ? this._specialDates : undefined;
+    }
+    set disabledDates(value) {
+        this._disabledDates = value ?? [];
+    }
+    get disabledDates() {
+        return this._disabledDates.length ? this._disabledDates : undefined;
+    }
+    weekStartChanged() {
+        this._firstDayOfWeek = getWeekDayNumber(this.weekStart);
+    }
+    selectionChanged() {
+        this._rangePreviewDate = undefined;
+        this._value = undefined;
+        this._values = [];
+    }
+    firstUpdated() {
+        if (this._initialActiveDateSet) {
+            return;
+        }
+        if (this._isSingle) {
+            this.activeDate = this.value ?? this.activeDate;
+        }
+        else {
+            this.activeDate = this.values[0] ?? this.activeDate;
+        }
+    }
+};
+__decorate([
+    state()
+], IgcCalendarBaseComponent.prototype, "_rangePreviewDate", void 0);
+__decorate([
+    state()
+], IgcCalendarBaseComponent.prototype, "_firstDayOfWeek", void 0);
+__decorate([
+    state()
+], IgcCalendarBaseComponent.prototype, "_activeDate", void 0);
+__decorate([
+    state()
+], IgcCalendarBaseComponent.prototype, "_value", void 0);
+__decorate([
+    state()
+], IgcCalendarBaseComponent.prototype, "_values", void 0);
+__decorate([
+    state()
+], IgcCalendarBaseComponent.prototype, "_specialDates", void 0);
+__decorate([
+    state()
+], IgcCalendarBaseComponent.prototype, "_disabledDates", void 0);
+__decorate([
+    property({ converter: dateFromISOString })
+], IgcCalendarBaseComponent.prototype, "value", null);
+__decorate([
+    property({ converter: datesFromISOStrings })
+], IgcCalendarBaseComponent.prototype, "values", null);
+__decorate([
+    property({ attribute: 'active-date', converter: dateFromISOString })
+], IgcCalendarBaseComponent.prototype, "activeDate", null);
+__decorate([
+    property()
+], IgcCalendarBaseComponent.prototype, "selection", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'show-week-numbers' })
+], IgcCalendarBaseComponent.prototype, "showWeekNumbers", void 0);
+__decorate([
+    property({ attribute: 'week-start' })
+], IgcCalendarBaseComponent.prototype, "weekStart", void 0);
+__decorate([
+    property()
+], IgcCalendarBaseComponent.prototype, "locale", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcCalendarBaseComponent.prototype, "specialDates", null);
+__decorate([
+    property({ attribute: false })
+], IgcCalendarBaseComponent.prototype, "disabledDates", null);
+__decorate([
+    watch('weekStart')
+], IgcCalendarBaseComponent.prototype, "weekStartChanged", null);
+__decorate([
+    watch('selection', { waitUntilFirstUpdate: true })
+], IgcCalendarBaseComponent.prototype, "selectionChanged", null);
+IgcCalendarBaseComponent = __decorate([
+    blazorIndirectRender,
+    blazorDeepImport
+], IgcCalendarBaseComponent);
+export { IgcCalendarBaseComponent };
+//# sourceMappingURL=base.js.map

package/components/calendar/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","sourceRoot":"","sources":["../../../src/components/calendar/base.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\nimport { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';\nimport { blazorIndirectRender } from '../common/decorators/blazorIndirectRender.js';\nimport { watch } from '../common/decorators/watch.js';\nimport {\n  dateFromISOString,\n  datesFromISOStrings,\n  getWeekDayNumber,\n} from './helpers.js';\nimport { CalendarDay } from './model.js';\nimport type { DateRangeDescriptor, WeekDays } from './types.js';\n\n@blazorIndirectRender\n@blazorDeepImport\nexport class IgcCalendarBaseComponent extends LitElement {\n  private _initialActiveDateSet = false;\n\n  protected get _hasValues() {\n    return this._values.length > 0;\n  }\n\n  protected get _isSingle() {\n    return this.selection === 'single';\n  }\n\n  protected get _isMultiple() {\n    return this.selection === 'multiple';\n  }\n\n  protected get _isRange() {\n    return this.selection === 'range';\n  }\n\n  @state()\n  protected _rangePreviewDate?: CalendarDay;\n\n  @state()\n  protected _firstDayOfWeek = 0;\n\n  @state()\n  protected _activeDate = CalendarDay.today;\n\n  @state()\n  protected _value?: CalendarDay;\n\n  @state()\n  protected _values: CalendarDay[] = [];\n\n  @state()\n  protected _specialDates: DateRangeDescriptor[] = [];\n\n  @state()\n  protected _disabledDates: DateRangeDescriptor[] = [];\n\n  public get value(): Date | undefined {\n    return this._value ? this._value.native : undefined;\n  }\n\n  /* blazorSuppress */\n  /**\n   * The current value of the calendar.\n   * Used when selection is set to single\n   *\n   * @attr value\n   */\n  @property({ converter: dateFromISOString })\n  public set value(value) {\n    this._value = value ? CalendarDay.from(value) : undefined;\n  }\n\n  public get values(): Date[] {\n    return this._values ? this._values.map((v) => v.native) : [];\n  }\n\n  /* blazorSuppress */\n  /**\n   * The current values of the calendar.\n   * Used when selection is set to multiple of range.\n   *\n   * @attr values\n   */\n  @property({ converter: datesFromISOStrings })\n  public set values(values) {\n    this._values = values ? values.map((v) => CalendarDay.from(v)) : [];\n  }\n\n  public get activeDate(): Date {\n    return this._activeDate.native;\n  }\n\n  /* blazorSuppress */\n  /** Get/Set the date which is shown in view and is highlighted. By default it is the current date. */\n  @property({ attribute: 'active-date', converter: dateFromISOString })\n  public set activeDate(value) {\n    this._initialActiveDateSet = true;\n    this._activeDate = value ? CalendarDay.from(value) : CalendarDay.today;\n  }\n\n  /**\n   * Sets the type of selection in the component.\n   * @attr selection\n   */\n  @property()\n  public selection: 'single' | 'multiple' | 'range' = 'single';\n\n  /**\n   * Whether to show the week numbers.\n   * @attr show-week-numbers\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'show-week-numbers' })\n  public showWeekNumbers = false;\n\n  /**\n   * Gets/Sets the first day of the week.\n   * @attr week-start\n   */\n  @property({ attribute: 'week-start' })\n  public weekStart: WeekDays = 'sunday';\n\n  /**\n   * Gets/Sets the locale used for formatting and displaying the dates in the component.\n   * @attr locale\n   */\n  @property()\n  public locale = 'en';\n\n  /** Gets/Sets the special dates for the component. */\n  @property({ attribute: false })\n  public set specialDates(value: DateRangeDescriptor[]) {\n    this._specialDates = value ?? [];\n  }\n\n  public get specialDates(): DateRangeDescriptor[] | undefined {\n    return this._specialDates.length ? this._specialDates : undefined;\n  }\n\n  /** Gets/Sets the disabled dates for the component. */\n  @property({ attribute: false })\n  public set disabledDates(value: DateRangeDescriptor[]) {\n    this._disabledDates = value ?? [];\n  }\n\n  public get disabledDates(): DateRangeDescriptor[] | undefined {\n    return this._disabledDates.length ? this._disabledDates : undefined;\n  }\n\n  @watch('weekStart')\n  protected weekStartChanged() {\n    this._firstDayOfWeek = getWeekDayNumber(this.weekStart);\n  }\n\n  @watch('selection', { waitUntilFirstUpdate: true })\n  protected selectionChanged() {\n    this._rangePreviewDate = undefined;\n    this._value = undefined;\n    this._values = [];\n  }\n\n  protected override firstUpdated() {\n    if (this._initialActiveDateSet) {\n      return;\n    }\n\n    if (this._isSingle) {\n      this.activeDate = this.value ?? this.activeDate;\n    } else {\n      this.activeDate = this.values[0] ?? this.activeDate;\n    }\n  }\n}\n"]}

package/components/calendar/calendar.d.ts

@@ -1,9 +1,10 @@
-import { themeSymbol } from '../../theming/theming-decorator.js';
-import { type IgcCalendarResourceStrings } from '../common/i18n/calendar.resources.js';
+import { nothing } from 'lit';
 import type { Constructor } from '../common/mixins/constructor.js';
-import { IgcCalendarBaseComponent, type IgcCalendarBaseEventMap } from './common/calendar-base.js';
+import { IgcCalendarBaseComponent } from './base.js';
+import { CalendarDay } from './model.js';
+import type { IgcCalendarBaseEventMap } from './types.js';
 export declare const focusActiveDate: unique symbol;
-declare const IgcCalendarComponent_base: Constructor<import("../common/mixins/sizable.js").SizableInterface> & Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcCalendarBaseEventMap>> & Constructor<IgcCalendarBaseComponent>;
+declare const IgcCalendarComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcCalendarBaseEventMap>> & Constructor<IgcCalendarBaseComponent>;
 /**
  * Represents a calendar that lets users
  * to select a date value in a variety of different ways.
@@ -15,83 +16,134 @@ declare const IgcCalendarComponent_base: Constructor<import("../common/mixins/si
  *
  * @fires igcChange - Emitted when calendar changes its value.
  *
- * @csspart content - The content container.
- * @csspart days-view - The days view container.
- * @csspart months-view - The months view container.
- * @csspart years-view - The years view container.
- * @csspart header - The header container.
- * @csspart header-title - The header title container.
- * @csspart header-date - The header date container.
- * @csspart navigation - The navigation container.
- * @csspart months-navigation - The months navigation container.
- * @csspart years-navigation - The years navigation container.
- * @csspart years-range - The years range container.
- * @csspart navigation-buttons - The navigation buttons container.
- * @csspart navigation-button - The navigation button container.
- * @csspart navigation-button vertical - The navigation button container
- * when calendar orientation is vertical.
- * @csspart days-view-container - The days view container.
+ * @csspart header - The header element of the calendar.
+ * @csspart header-title - The header title element of the calendar.
+ * @csspart header-date - The header date element of the calendar.
+ * @csspart content - The content element which contains the views and navigation elements of the calendar.
+ * @csspart navigation - The navigation container element of the calendar.
+ * @csspart months-navigation - The months navigation button element of the calendar.
+ * @csspart years-navigation - The years navigation button element of the calendar.
+ * @csspart years-range - The years range element of the calendar.
+ * @csspart navigation-buttons - The navigation buttons container of the calendar.
+ * @csspart navigation-button - Previous/next navigation button of the calendar.
+ * @csspart days-view-container - The days view container element of the calendar.
+ * @csspart days-view - Days view element of the calendar.
+ * @csspart months-view - The months view element of the calendar.
+ * @csspart years-view - The years view element of the calendar.
+ * @csspart days-row - Days row element of the calendar.
+ * @csspart label - Week header label element of the calendar.
+ * @csspart week-number - Week number element of the calendar.
+ * @csspart week-number-inner - Week number inner element of the calendar.
+ * @csspart date - Date element of the calendar.
+ * @csspart date-inner - Date inner element of the calendar.
+ * @csspart first - The first selected date element of the calendar in range selection.
+ * @csspart last - The last selected date element of the calendar in range selection.
+ * @csspart inactive - Inactive date element of the calendar.
+ * @csspart hidden - Hidden date element of the calendar.
+ * @csspart weekend - Weekend date element of the calendar.
+ * @csspart range - Range selected element of the calendar.
+ * @csspart special - Special date element of the calendar.
+ * @csspart disabled - Disabled date element of the calendar.
+ * @csspart single - Single selected date element of the calendar.
+ * @csspart preview - Range selection preview date element of the calendar.
+ * @csspart month - Month element of the calendar.
+ * @csspart month-inner - Month inner element of the calendar.
+ * @csspart year - Year element of the calendar.
+ * @csspart year-inner - Year inner element of the calendar.
+ * @csspart selected - Indicates selected state. Applies to date, month and year elements of the calendar.
+ * @csspart current - Indicates current state. Applies to date, month and year elements of the calendar.
  */
 export default class IgcCalendarComponent extends IgcCalendarComponent_base {
     static readonly tagName = "igc-calendar";
     static styles: import("lit").CSSResult;
     static register(): void;
-    private formatterMonth;
-    private formatterWeekday;
-    private formatterMonthDay;
-    private readonly [themeSymbol];
-    private rangePreviewDate?;
+    private get _isDayView();
+    private get _isMonthView();
+    private get _isYearView();
+    private get previousButtonLabel();
+    private get nextButtonLabel();
+    private contentRef;
     private activeDaysViewIndex;
     private daysViews;
     private monthsView;
     private yearsView;
-    /** Controls the visibility of the dates that do not belong to the current month. */
+    /**
+     * Whether to show the dates that do not belong to the current active month.
+     * @attr hide-outside-days
+     */
     hideOutsideDays: boolean;
-    /** Determines whether the calendar hides its header. Even if set to false, the header is not displayed for `multiple` selection. */
+    /**
+     * Whether to render the calendar header part.
+     * When the calendar selection is set to `multiple` the header is always hidden.
+     *
+     * @attr hide-header
+     */
     hideHeader: boolean;
-    /** The orientation of the header. */
+    /**
+     * The orientation of the calendar header.
+     * @attr header-orientation
+     */
     headerOrientation: 'vertical' | 'horizontal';
-    /** The orientation of the multiple months displayed in days view. */
+    /**
+     * The orientation of the calendar months when more than one month
+     * is being shown.
+     * @attr orientation
+     */
     orientation: 'vertical' | 'horizontal';
-    /** The number of months displayed in days view. */
+    /**
+     * The number of months displayed in the days view.
+     * @attr visible-months
+     */
     visibleMonths: number;
-    /** The active view. */
+    /**
+     * The current active view of the component.
+     * @attr active-view
+     */
     activeView: 'days' | 'months' | 'years';
     /** The options used to format the months and the weekdays in the calendar views. */
     formatOptions: Pick<Intl.DateTimeFormatOptions, 'month' | 'weekday'>;
-    /** The resource strings. */
-    resourceStrings: IgcCalendarResourceStrings;
-    protected formattersChange(): void;
-    constructor();
-    private get yearPerPage();
-    private get previousButtonLabel();
-    private get nextButtonLabel();
-    private monthSelectLabel;
-    private yearSelectLabel;
-    private handleKeyDown;
+    /**
+     * The resource strings for localization.
+     */
+    resourceStrings: import("../common/i18n/calendar.resources.js").IgcCalendarResourceStrings;
+    private _intl;
+    protected localeChange(): void;
+    protected formatOptionsChange(): void;
+    /** @private @hidden @internal */
     [focusActiveDate](): Promise<void>;
-    private initFormatters;
-    private formattedMonth;
-    private changeValue;
-    private changeMonth;
-    private changeYear;
-    private switchToMonths;
-    private switchToYears;
+    private updateViewIndex;
+    private getSubsequentActiveDate;
+    private handleArrowKey;
+    private onPageKeys;
+    private onShiftPageKeys;
+    private onHomeKey;
+    private onEndKey;
+    private isNotFromCalendarView;
+    constructor();
+    protected renderNavigationButtons(): import("lit-html").TemplateResult<1>;
+    protected renderMonthButtonNavigation(active: CalendarDay, viewIndex: number): import("lit-html").TemplateResult<1>;
+    protected renderYearButtonNavigation(active: CalendarDay, viewIndex: number): import("lit-html").TemplateResult<1>;
+    protected renderYearRangeNavigation(active: CalendarDay): import("lit-html").TemplateResult<1>;
+    protected renderNavigation(date?: CalendarDay, showButtons?: boolean, viewIndex?: number): import("lit-html").TemplateResult<1>;
+    protected renderHeader(): import("lit-html").TemplateResult<1> | typeof nothing;
+    protected renderHeaderDateSingle(): string | import("lit-html").TemplateResult<1>;
+    protected renderHeaderDateRange(): import("lit-html").TemplateResult<1>;
+    protected renderHeaderDate(): string | import("lit-html").TemplateResult<1>;
+    protected renderDaysView(): import("lit-html").TemplateResult<1>;
+    protected renderMonthView(): import("lit-html").TemplateResult<1>;
+    protected renderYearView(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
+    protected changeMonth(event: CustomEvent<Date>): void;
+    protected changeYear(event: CustomEvent<Date>): void;
+    protected changeValue(event: CustomEvent<Date>): void;
+    protected activeDateChanged(event: CustomEvent<Date>): void;
+    protected rangePreviewDateChanged(event: CustomEvent<Date>): void;
+    private getActiveDates;
     private activateDaysView;
-    private activeDateChanged;
-    private rangePreviewDateChange;
-    private nextMonth;
-    private previousMonth;
-    private nextYear;
-    private previousYear;
-    private nextYearsPage;
-    private previousYearsPage;
-    private navigateNext;
     private navigatePrevious;
-    private renderNavigation;
-    private renderHeader;
-    private renderHeaderDate;
-    protected render(): import("lit-html").TemplateResult<1>;
+    private navigateNext;
+    private switchToMonths;
+    private switchToYears;
 }
 declare global {
     interface HTMLElementTagNameMap {