igniteui-webcomponents 4.11.0 → 5.0.0-rc.0

package/components/calendar/months-view/months-view.js

@@ -6,119 +6,110 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var IgcMonthsViewComponent_1;
 import { LitElement, html } from 'lit';
-import { property, query } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
+import { range } from 'lit/directives/range.js';
 import { themes } from '../../../theming/theming-decorator.js';
+import { addKeybindings } from '../../common/controllers/key-bindings.js';
 import { blazorIndirectRender } from '../../common/decorators/blazorIndirectRender.js';
 import { blazorSuppressComponent } from '../../common/decorators/blazorSuppressComponent.js';
 import { watch } from '../../common/decorators/watch.js';
 import { registerComponent } from '../../common/definitions/register.js';
+import { createDateTimeFormatters } from '../../common/localization/intl-formatters.js';
 import { EventEmitterMixin } from '../../common/mixins/event-emitter.js';
-import { partNameMap } from '../../common/util.js';
-import { MONTHS_PER_ROW, } from '../common/calendar-base.js';
-import { Calendar, TimeDeltaInterval } from '../common/calendar.model.js';
-import { setDateSafe } from '../common/utils.js';
+import { chunk, partNameMap } from '../../common/util.js';
+import { MONTHS_PER_ROW, areSameMonth, getViewElement } from '../helpers.js';
+import { CalendarDay } from '../model.js';
 import { styles } from '../themes/year-month-view.base.css.js';
 import { all } from '../themes/year-month.js';
 let IgcMonthsViewComponent = IgcMonthsViewComponent_1 = class IgcMonthsViewComponent extends EventEmitterMixin(LitElement) {
     static register() {
         registerComponent(IgcMonthsViewComponent_1);
     }
+    set value(value) {
+        this._value = CalendarDay.from(value);
+    }
+    get value() {
+        return this._value.native;
+    }
+    localeChange() {
+        this._intl.locale = this.locale;
+    }
     formatChange() {
-        this.initMonthFormatter();
+        this._intl.update({ month: { month: this.monthFormat } });
     }
     constructor() {
         super();
-        this.calendarModel = new Calendar();
-        this.value = new Date();
+        this._value = CalendarDay.today;
         this.locale = 'en';
         this.monthFormat = 'long';
-        this.setAttribute('role', 'grid');
-        this.initMonthFormatter();
+        this._intl = createDateTimeFormatters(this.locale, {
+            month: { month: this.monthFormat },
+            ariaMonth: { month: 'long', year: 'numeric' },
+        });
+        addKeybindings(this, {
+            bindingDefaults: { preventDefault: true },
+        }).setActivateHandler(this.handleInteraction);
+        this.addEventListener('click', this.handleInteraction);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.role = 'grid';
     }
     focusActiveDate() {
         this.activeMonth.focus();
     }
-    initMonthFormatter() {
-        this.monthFormatter = new Intl.DateTimeFormat(this.locale, {
-            month: this.monthFormat,
-        });
-    }
-    formattedMonth(value) {
-        return this.monthFormatter.format(value);
-    }
-    get months() {
-        let date = new Date(this.value.getFullYear(), 0, 1);
-        const result = [];
-        const rowsCount = 12 / MONTHS_PER_ROW;
-        for (let i = 0; i < rowsCount; i++) {
-            const row = [];
-            for (let j = 0; j < MONTHS_PER_ROW; j++) {
-                row.push(date);
-                date = this.calendarModel.timedelta(date, TimeDeltaInterval.Month, 1);
-            }
-            result.push(row);
+    handleInteraction(event) {
+        const value = getViewElement(event);
+        if (value > -1) {
+            this._value = this._value.set({ month: value });
+            this.emitEvent('igcChange', { detail: this.value });
         }
-        return result;
-    }
-    resolveMonthPartName(date) {
-        const today = new Date();
-        return {
-            month: true,
-            selected: date.getMonth() === this.value.getMonth(),
-            current: date.getFullYear() === today.getFullYear() &&
-                date.getMonth() === today.getMonth(),
-        };
     }
-    selectMonth(month) {
-        const value = new Date(month);
-        setDateSafe(value, this.value.getDate());
-        this.value = value;
-        this.emitEvent('igcChange', { detail: this.value });
+    renderMonth(entry, now) {
+        const ariaLabel = this._intl.get('ariaMonth').format(entry.native);
+        const value = this._intl.get('month').format(entry.native);
+        const active = areSameMonth(this._value, entry);
+        const current = areSameMonth(now, entry);
+        const selected = this._value.month === entry.month;
+        const parts = { selected, current };
+        return html `
+      <span part=${partNameMap({ month: true, ...parts })}>
+        <span
+          role="gridcell"
+          data-value=${entry.month}
+          part=${partNameMap({ 'month-inner': true, ...parts })}
+          aria-selected=${selected}
+          aria-label=${ariaLabel}
+          tabindex=${active ? 0 : -1}
+        >
+          ${value}
+        </span>
+      </span>
+    `;
     }
-    monthKeyDown(event, month) {
-        if (event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault();
-            this.selectMonth(month);
+    *render() {
+        const now = CalendarDay.today;
+        const months = Array.from(range(12));
+        for (const row of chunk(months, MONTHS_PER_ROW)) {
+            yield html `
+        <div part="months-row" role="row">
+          ${row.map((month) => this.renderMonth(this._value.set({ month }), now))}
+        </div>
+      `;
         }
     }
-    render() {
-        return html `${this.months.map((row) => {
-            return html `<div part="months-row" role="row">
-        ${row.map((month) => {
-                const monthPartName = partNameMap(this.resolveMonthPartName(month));
-                const monthInnerPartName = monthPartName.replace('month', 'month-inner');
-                return html `<span part=${monthPartName}>
-            <span
-              part=${monthInnerPartName}
-              role="gridcell"
-              aria-label=${month.toLocaleString(this.locale, {
-                    month: 'long',
-                    year: 'numeric',
-                })}
-              aria-selected=${month.getMonth() === this.value.getMonth()}
-              tabindex="${month.getFullYear() === this.value.getFullYear() &&
-                    month.getMonth() === this.value.getMonth()
-                    ? 0
-                    : -1}"
-              @click=${() => this.selectMonth(month)}
-              @keydown=${(event) => this.monthKeyDown(event, month)}
-            >
-              ${this.formattedMonth(month)}
-            </span>
-          </span>`;
-            })}
-      </div>`;
-        })}`;
-    }
 };
 IgcMonthsViewComponent.tagName = 'igc-months-view';
 IgcMonthsViewComponent.styles = styles;
+__decorate([
+    state()
+], IgcMonthsViewComponent.prototype, "_value", void 0);
 __decorate([
     query('[tabindex="0"]')
 ], IgcMonthsViewComponent.prototype, "activeMonth", void 0);
 __decorate([
     property({ attribute: false })
-], IgcMonthsViewComponent.prototype, "value", void 0);
+], IgcMonthsViewComponent.prototype, "value", null);
 __decorate([
     property()
 ], IgcMonthsViewComponent.prototype, "locale", void 0);
@@ -126,7 +117,9 @@ __decorate([
     property({ attribute: 'month-format' })
 ], IgcMonthsViewComponent.prototype, "monthFormat", void 0);
 __decorate([
-    watch('locale'),
+    watch('locale')
+], IgcMonthsViewComponent.prototype, "localeChange", null);
+__decorate([
     watch('monthFormat')
 ], IgcMonthsViewComponent.prototype, "formatChange", null);
 IgcMonthsViewComponent = IgcMonthsViewComponent_1 = __decorate([

package/components/calendar/months-view/months-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"months-view.js","sourceRoot":"","sources":["../../../../src/components/calendar/months-view/months-view.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport { themes } from '../../../theming/theming-decorator.js';\nimport { blazorIndirectRender } from '../../common/decorators/blazorIndirectRender.js';\nimport { blazorSuppressComponent } from '../../common/decorators/blazorSuppressComponent.js';\nimport { watch } from '../../common/decorators/watch.js';\nimport { registerComponent } from '../../common/definitions/register.js';\nimport type { Constructor } from '../../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../../common/mixins/event-emitter.js';\nimport { partNameMap } from '../../common/util.js';\nimport {\n  type IgcCalendarBaseEventMap,\n  MONTHS_PER_ROW,\n} from '../common/calendar-base.js';\nimport { Calendar, TimeDeltaInterval } from '../common/calendar.model.js';\nimport { setDateSafe } from '../common/utils.js';\nimport { styles } from '../themes/year-month-view.base.css.js';\nimport { all } from '../themes/year-month.js';\n\n/**\n * Instantiate a months view as a separate component in the calendar.\n *\n * @element igc-months-view\n *\n * @csspart months-row - The months row container.\n * @csspart month - The month container.\n * @csspart month-inner - The inner month container.\n */\n@blazorIndirectRender\n@blazorSuppressComponent\n@themes(all)\nexport default class IgcMonthsViewComponent extends EventEmitterMixin<\n  IgcCalendarBaseEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-months-view';\n  public static styles = styles;\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcMonthsViewComponent);\n  }\n\n  private calendarModel = new Calendar();\n  private monthFormatter: any;\n\n  @query('[tabindex=\"0\"]')\n  private activeMonth!: HTMLElement;\n\n  /** Тhe current value of the calendar. */\n  @property({ attribute: false })\n  public value = new Date();\n\n  /** Sets the locale used for formatting and displaying the dates. */\n  @property()\n  public locale = 'en';\n\n  /** The format of the month. Defaults to long. */\n  @property({ attribute: 'month-format' })\n  public monthFormat:\n    | 'numeric'\n    | '2-digit'\n    | 'long'\n    | 'short'\n    | 'narrow'\n    | undefined = 'long';\n\n  @watch('locale')\n  @watch('monthFormat')\n  protected formatChange() {\n    this.initMonthFormatter();\n  }\n\n  constructor() {\n    super();\n    this.setAttribute('role', 'grid');\n    this.initMonthFormatter();\n  }\n\n  /** Focuses the active date. */\n  public focusActiveDate() {\n    this.activeMonth.focus();\n  }\n\n  private initMonthFormatter() {\n    this.monthFormatter = new Intl.DateTimeFormat(this.locale, {\n      month: this.monthFormat,\n    });\n  }\n\n  private formattedMonth(value: Date) {\n    return this.monthFormatter.format(value);\n  }\n\n  private get months(): Date[][] {\n    let date = new Date(this.value.getFullYear(), 0, 1);\n    const result = [];\n\n    const rowsCount = 12 / MONTHS_PER_ROW;\n\n    for (let i = 0; i < rowsCount; i++) {\n      const row: Date[] = [];\n\n      for (let j = 0; j < MONTHS_PER_ROW; j++) {\n        row.push(date);\n        date = this.calendarModel.timedelta(date, TimeDeltaInterval.Month, 1);\n      }\n      result.push(row);\n    }\n\n    return result;\n  }\n\n  private resolveMonthPartName(date: Date) {\n    const today = new Date();\n    return {\n      month: true,\n      selected: date.getMonth() === this.value.getMonth(),\n      current:\n        date.getFullYear() === today.getFullYear() &&\n        date.getMonth() === today.getMonth(),\n    };\n  }\n\n  private selectMonth(month: Date) {\n    const value = new Date(month);\n    setDateSafe(value, this.value.getDate());\n    this.value = value;\n    this.emitEvent('igcChange', { detail: this.value });\n  }\n\n  private monthKeyDown(event: KeyboardEvent, month: Date) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.selectMonth(month);\n    }\n  }\n\n  protected override render() {\n    return html`${this.months.map((row) => {\n      return html`<div part=\"months-row\" role=\"row\">\n        ${row.map((month) => {\n          const monthPartName = partNameMap(this.resolveMonthPartName(month));\n          const monthInnerPartName = monthPartName.replace(\n            'month',\n            'month-inner'\n          );\n\n          return html`<span part=${monthPartName}>\n            <span\n              part=${monthInnerPartName}\n              role=\"gridcell\"\n              aria-label=${month.toLocaleString(this.locale, {\n                month: 'long',\n                year: 'numeric',\n              })}\n              aria-selected=${month.getMonth() === this.value.getMonth()}\n              tabindex=\"${month.getFullYear() === this.value.getFullYear() &&\n              month.getMonth() === this.value.getMonth()\n                ? 0\n                : -1}\"\n              @click=${() => this.selectMonth(month)}\n              @keydown=${(event: KeyboardEvent) =>\n                this.monthKeyDown(event, month)}\n            >\n              ${this.formattedMonth(month)}\n            </span>\n          </span>`;\n        })}\n      </div>`;\n    })}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-months-view': IgcMonthsViewComponent;\n  }\n}\n"]}
+{"version":3,"file":"months-view.js","sourceRoot":"","sources":["../../../../src/components/calendar/months-view/months-view.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { range } from 'lit/directives/range.js';\n\nimport { themes } from '../../../theming/theming-decorator.js';\nimport { addKeybindings } from '../../common/controllers/key-bindings.js';\nimport { blazorIndirectRender } from '../../common/decorators/blazorIndirectRender.js';\nimport { blazorSuppressComponent } from '../../common/decorators/blazorSuppressComponent.js';\nimport { watch } from '../../common/decorators/watch.js';\nimport { registerComponent } from '../../common/definitions/register.js';\nimport { createDateTimeFormatters } from '../../common/localization/intl-formatters.js';\nimport type { Constructor } from '../../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../../common/mixins/event-emitter.js';\nimport { chunk, partNameMap } from '../../common/util.js';\nimport { MONTHS_PER_ROW, areSameMonth, getViewElement } from '../helpers.js';\nimport { CalendarDay } from '../model.js';\nimport { styles } from '../themes/year-month-view.base.css.js';\nimport { all } from '../themes/year-month.js';\nimport type { IgcCalendarBaseEventMap } from '../types.js';\n\n/**\n * Instantiate a months view as a separate component in the calendar.\n *\n * @element igc-months-view\n *\n * @csspart months-row - The months row container.\n * @csspart month - The month container.\n * @csspart month-inner - The inner month container.\n */\n@blazorIndirectRender\n@blazorSuppressComponent\n@themes(all)\nexport default class IgcMonthsViewComponent extends EventEmitterMixin<\n  IgcCalendarBaseEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-months-view';\n  public static styles = styles;\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcMonthsViewComponent);\n  }\n\n  @state()\n  private _value = CalendarDay.today;\n\n  @query('[tabindex=\"0\"]')\n  private activeMonth!: HTMLElement;\n\n  /** Тhe current value of the calendar. */\n  @property({ attribute: false })\n  public set value(value: Date) {\n    this._value = CalendarDay.from(value);\n  }\n\n  public get value() {\n    return this._value.native;\n  }\n\n  /** Sets the locale used for formatting and displaying the dates. */\n  @property()\n  public locale = 'en';\n\n  /** The format of the month. Defaults to long. */\n  @property({ attribute: 'month-format' })\n  public monthFormat: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow' =\n    'long';\n\n  private _intl = createDateTimeFormatters(this.locale, {\n    month: { month: this.monthFormat },\n    ariaMonth: { month: 'long', year: 'numeric' },\n  });\n\n  @watch('locale')\n  protected localeChange() {\n    this._intl.locale = this.locale;\n  }\n\n  @watch('monthFormat')\n  protected formatChange() {\n    this._intl.update({ month: { month: this.monthFormat } });\n  }\n\n  constructor() {\n    super();\n\n    addKeybindings(this, {\n      bindingDefaults: { preventDefault: true },\n    }).setActivateHandler(this.handleInteraction);\n\n    this.addEventListener('click', this.handleInteraction);\n  }\n\n  public override connectedCallback() {\n    super.connectedCallback();\n    this.role = 'grid';\n  }\n\n  /** Focuses the active date. */\n  public focusActiveDate() {\n    this.activeMonth.focus();\n  }\n\n  protected handleInteraction(event: Event) {\n    const value = getViewElement(event);\n\n    if (value > -1) {\n      this._value = this._value.set({ month: value });\n      this.emitEvent('igcChange', { detail: this.value });\n    }\n  }\n\n  protected renderMonth(entry: CalendarDay, now: CalendarDay) {\n    const ariaLabel = this._intl.get('ariaMonth').format(entry.native);\n    const value = this._intl.get('month').format(entry.native);\n\n    const active = areSameMonth(this._value, entry);\n    const current = areSameMonth(now, entry);\n    const selected = this._value.month === entry.month;\n\n    const parts = { selected, current };\n\n    return html`\n      <span part=${partNameMap({ month: true, ...parts })}>\n        <span\n          role=\"gridcell\"\n          data-value=${entry.month}\n          part=${partNameMap({ 'month-inner': true, ...parts })}\n          aria-selected=${selected}\n          aria-label=${ariaLabel}\n          tabindex=${active ? 0 : -1}\n        >\n          ${value}\n        </span>\n      </span>\n    `;\n  }\n\n  protected override *render() {\n    const now = CalendarDay.today;\n    const months = Array.from(range(12));\n\n    for (const row of chunk(months, MONTHS_PER_ROW)) {\n      yield html`\n        <div part=\"months-row\" role=\"row\">\n          ${row.map((month) =>\n            this.renderMonth(this._value.set({ month }), now)\n          )}\n        </div>\n      `;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-months-view': IgcMonthsViewComponent;\n  }\n}\n"]}

package/components/calendar/themes/calendar.base.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export 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(igc-calendar){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-family:var(--ig-font-family);min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;overflow:hidden;font-size:max(var(--is-large, 1)*max(var(--ig-body-1-font-size), -1 * var(--ig-body-1-font-size)),var(--is-medium, 1)*max(var(--ig-body-2-font-size), -1 * var(--ig-body-2-font-size)),var(--is-small, 1)*max(var(--ig-body-2-font-size), -1 * var(--ig-body-2-font-size)));font-weight:max(var(--is-large, 1)*max(var(--ig-body-1-font-weight), -1 * var(--ig-body-1-font-weight)),var(--is-medium, 1)*max(var(--ig-body-2-font-weight), -1 * var(--ig-body-2-font-weight)),var(--is-small, 1)*max(var(--ig-body-2-font-weight), -1 * var(--ig-body-2-font-weight)));font-style:max(var(--is-large, 1)*max(var(--ig-body-1-font-style), -1 * var(--ig-body-1-font-style)),var(--is-medium, 1)*max(var(--ig-body-2-font-style), -1 * var(--ig-body-2-font-style)),var(--is-small, 1)*max(var(--ig-body-2-font-style), -1 * var(--ig-body-2-font-style)));line-height:max(var(--is-large, 1)*max(var(--ig-body-1-line-height), -1 * var(--ig-body-1-line-height)),var(--is-medium, 1)*max(var(--ig-body-2-line-height), -1 * var(--ig-body-2-line-height)),var(--is-small, 1)*max(var(--ig-body-2-line-height), -1 * var(--ig-body-2-line-height)));letter-spacing:max(var(--is-large, 1)*max(var(--ig-body-1-letter-spacing), -1 * var(--ig-body-1-letter-spacing)),var(--is-medium, 1)*max(var(--ig-body-2-letter-spacing), -1 * var(--ig-body-2-letter-spacing)),var(--is-small, 1)*max(var(--ig-body-2-letter-spacing), -1 * var(--ig-body-2-letter-spacing)));text-transform:max(var(--is-large, 1)*max(var(--ig-body-1-text-transform), -1 * var(--ig-body-1-text-transform)),var(--is-medium, 1)*max(var(--ig-body-2-text-transform), -1 * var(--ig-body-2-text-transform)),var(--is-small, 1)*max(var(--ig-body-2-text-transform), -1 * var(--ig-body-2-text-transform)))}:host(igc-calendar) [part=days-view-container] [part=navigation],:host(igc-calendar) [part=days-view-container] igc-days-view{min-width:max(var(--is-large, 1)*max(22.5rem, -1 * 22.5rem),var(--is-medium, 1)*max(19.625rem, -1 * 19.625rem),var(--is-small, 1)*max(18.125rem, -1 * 18.125rem))}:host(igc-calendar) igc-days-view::part(date),:host(igc-calendar) igc-days-view::part(week-number),:host(igc-calendar) igc-days-view::part(label),:host(igc-calendar) igc-days-view::part(days-row){-webkit-box-sizing:border-box;box-sizing:border-box}:host(igc-calendar) igc-days-view::part(week-number-inner),:host(igc-calendar) igc-days-view::part(date-inner){-webkit-box-sizing:border-box;box-sizing:border-box}:host(igc-calendar) igc-years-view,:host(igc-calendar) igc-months-view{display:grid;row-gap:.25rem;width:100%;min-width:max(var(--is-large, 1)*max(22.5rem, -1 * 22.5rem),var(--is-medium, 1)*max(19.625rem, -1 * 19.625rem),var(--is-small, 1)*max(18.125rem, -1 * 18.125rem));grid-template-rows:repeat(3, minmax(-webkit-max-content, 1fr));grid-template-rows:repeat(3, minmax(max-content, 1fr))}:host(igc-calendar) igc-days-view,:host(igc-calendar) igc-months-view,:host(igc-calendar) igc-years-view{font-family:var(--ig-font-family);overflow:visible}[part=navigation]{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0rem 16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[part=months-navigation],[part=years-navigation],[part~=navigation-button]{background:rgba(0,0,0,0);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:none;padding:0;-webkit-transition:color 150ms ease-in-out;transition:color 150ms ease-in-out}[part=months-navigation]:hover,[part=months-navigation]:focus,[part=years-navigation]:hover,[part=years-navigation]:focus,[part~=navigation-button]:hover,[part~=navigation-button]:focus{cursor:pointer}[part=months-navigation]:focus,[part=years-navigation]:focus,[part~=navigation-button]:focus{outline:none}[part~=navigation-button][part~=vertical]{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}[part=navigation-buttons]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}:host-context([dir=rtl]) [part~=navigation-button],:host([dir=rtl]) [part~=navigation-button]{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}:host-context([dir=rtl]) [part~=navigation-button][part~=vertical],:host([dir=rtl]) [part~=navigation-button][part~=vertical]{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}:host(igc-calendar[header-orientation=vertical]){-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}:host(igc-calendar[header-orientation=vertical]) [part=header]{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;border-radius:inherit;border-start-end-radius:0;border-end-end-radius:0}:host(igc-calendar[header-orientation=vertical]) [part=header-date]{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}[part~=picker-dates]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.25rem}[part=days-view-container]{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}[part=header]{border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:1rem}[part=content]{border-radius:inherit;border-top-left-radius:0;border-top-right-radius:0}[part=header-date],[part=header-title]{margin:0}[part=header-date]{display:-webkit-box;display:-ms-flexbox;display:flex;white-space:pre-wrap}.aria-off-screen{position:absolute;width:1px;height:1px;margin:-1px;border:none;clip:rect(0, 0, 0, 0);outline:0;pointer-events:none;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}`;
+export 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(igc-calendar){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-family:var(--ig-font-family);min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;overflow:hidden;font-size:max(var(--is-large, 1)*max(var(--ig-body-1-font-size), -1 * var(--ig-body-1-font-size)),var(--is-medium, 1)*max(var(--ig-body-2-font-size), -1 * var(--ig-body-2-font-size)),var(--is-small, 1)*max(var(--ig-body-2-font-size), -1 * var(--ig-body-2-font-size)));font-weight:max(var(--is-large, 1)*max(var(--ig-body-1-font-weight), -1 * var(--ig-body-1-font-weight)),var(--is-medium, 1)*max(var(--ig-body-2-font-weight), -1 * var(--ig-body-2-font-weight)),var(--is-small, 1)*max(var(--ig-body-2-font-weight), -1 * var(--ig-body-2-font-weight)));font-style:max(var(--is-large, 1)*max(var(--ig-body-1-font-style), -1 * var(--ig-body-1-font-style)),var(--is-medium, 1)*max(var(--ig-body-2-font-style), -1 * var(--ig-body-2-font-style)),var(--is-small, 1)*max(var(--ig-body-2-font-style), -1 * var(--ig-body-2-font-style)));line-height:max(var(--is-large, 1)*max(var(--ig-body-1-line-height), -1 * var(--ig-body-1-line-height)),var(--is-medium, 1)*max(var(--ig-body-2-line-height), -1 * var(--ig-body-2-line-height)),var(--is-small, 1)*max(var(--ig-body-2-line-height), -1 * var(--ig-body-2-line-height)));letter-spacing:max(var(--is-large, 1)*max(var(--ig-body-1-letter-spacing), -1 * var(--ig-body-1-letter-spacing)),var(--is-medium, 1)*max(var(--ig-body-2-letter-spacing), -1 * var(--ig-body-2-letter-spacing)),var(--is-small, 1)*max(var(--ig-body-2-letter-spacing), -1 * var(--ig-body-2-letter-spacing)));text-transform:max(var(--is-large, 1)*max(var(--ig-body-1-text-transform), -1 * var(--ig-body-1-text-transform)),var(--is-medium, 1)*max(var(--ig-body-2-text-transform), -1 * var(--ig-body-2-text-transform)),var(--is-small, 1)*max(var(--ig-body-2-text-transform), -1 * var(--ig-body-2-text-transform)))}:host(igc-calendar) [part=days-view-container] [part=navigation],:host(igc-calendar) [part=days-view-container] igc-days-view{min-width:max(var(--is-large, 1)*max(22.5rem, -1 * 22.5rem),var(--is-medium, 1)*max(19.625rem, -1 * 19.625rem),var(--is-small, 1)*max(18.125rem, -1 * 18.125rem))}:host(igc-calendar) igc-days-view::part(date),:host(igc-calendar) igc-days-view::part(week-number),:host(igc-calendar) igc-days-view::part(label),:host(igc-calendar) igc-days-view::part(days-row){-webkit-box-sizing:border-box;box-sizing:border-box}:host(igc-calendar) igc-days-view::part(week-number-inner),:host(igc-calendar) igc-days-view::part(date-inner){-webkit-box-sizing:border-box;box-sizing:border-box}:host(igc-calendar) igc-years-view,:host(igc-calendar) igc-months-view{display:grid;row-gap:.25rem;width:100%;min-width:max(var(--is-large, 1)*max(22.5rem, -1 * 22.5rem),var(--is-medium, 1)*max(19.625rem, -1 * 19.625rem),var(--is-small, 1)*max(18.125rem, -1 * 18.125rem));grid-template-rows:repeat(3, minmax(-webkit-max-content, 1fr));grid-template-rows:repeat(3, minmax(max-content, 1fr))}:host(igc-calendar) igc-days-view,:host(igc-calendar) igc-months-view,:host(igc-calendar) igc-years-view{font-family:var(--ig-font-family);overflow:visible}[part=navigation]{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0rem 16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[part=months-navigation],[part=years-navigation],[part~=navigation-button]{background:rgba(0,0,0,0);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:none;padding:0;-webkit-transition:color 150ms ease-in-out;transition:color 150ms ease-in-out}[part=months-navigation]:hover,[part=months-navigation]:focus,[part=years-navigation]:hover,[part=years-navigation]:focus,[part~=navigation-button]:hover,[part~=navigation-button]:focus{cursor:pointer}[part=months-navigation]:focus,[part=years-navigation]:focus,[part~=navigation-button]:focus{outline:none}[part~=navigation-button][part~=vertical]{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}[part=navigation-buttons]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}:host-context([dir=rtl]) [part~=navigation-button],:host([dir=rtl]) [part~=navigation-button]{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}:host-context([dir=rtl]) [part~=navigation-button][part~=vertical],:host([dir=rtl]) [part~=navigation-button][part~=vertical]{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}:host(igc-calendar[header-orientation=vertical]){-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}:host(igc-calendar[header-orientation=vertical]) [part=header]{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;border-radius:inherit;border-start-end-radius:0;border-end-end-radius:0}:host(igc-calendar[header-orientation=vertical]) [part=header-date]{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}[part~=picker-dates]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.25rem}[part=days-view-container]{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}[part=header]{border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:1rem}[part=content]{border-radius:inherit;border-top-left-radius:0;border-top-right-radius:0}[part=header-date],[part=header-title]{margin:0}[part=header-date]{display:-webkit-box;display:-ms-flexbox;display:flex;white-space:pre-wrap}.aria-off-screen{position:absolute;width:1px;height:1px;margin:-1px;border:none;clip:rect(0, 0, 0, 0);outline:0;pointer-events:none;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}`;
 //# sourceMappingURL=calendar.base.css.js.map

package/components/calendar/themes/calendar.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.base.css.js","sourceRoot":"","sources":["../../../../src/components/calendar/themes/calendar.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,8qOAA8qO,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(igc-calendar){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-family:var(--ig-font-family);min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;overflow:hidden;font-size:max(var(--is-large, 1)*max(var(--ig-body-1-font-size), -1 * var(--ig-body-1-font-size)),var(--is-medium, 1)*max(var(--ig-body-2-font-size), -1 * var(--ig-body-2-font-size)),var(--is-small, 1)*max(var(--ig-body-2-font-size), -1 * var(--ig-body-2-font-size)));font-weight:max(var(--is-large, 1)*max(var(--ig-body-1-font-weight), -1 * var(--ig-body-1-font-weight)),var(--is-medium, 1)*max(var(--ig-body-2-font-weight), -1 * var(--ig-body-2-font-weight)),var(--is-small, 1)*max(var(--ig-body-2-font-weight), -1 * var(--ig-body-2-font-weight)));font-style:max(var(--is-large, 1)*max(var(--ig-body-1-font-style), -1 * var(--ig-body-1-font-style)),var(--is-medium, 1)*max(var(--ig-body-2-font-style), -1 * var(--ig-body-2-font-style)),var(--is-small, 1)*max(var(--ig-body-2-font-style), -1 * var(--ig-body-2-font-style)));line-height:max(var(--is-large, 1)*max(var(--ig-body-1-line-height), -1 * var(--ig-body-1-line-height)),var(--is-medium, 1)*max(var(--ig-body-2-line-height), -1 * var(--ig-body-2-line-height)),var(--is-small, 1)*max(var(--ig-body-2-line-height), -1 * var(--ig-body-2-line-height)));letter-spacing:max(var(--is-large, 1)*max(var(--ig-body-1-letter-spacing), -1 * var(--ig-body-1-letter-spacing)),var(--is-medium, 1)*max(var(--ig-body-2-letter-spacing), -1 * var(--ig-body-2-letter-spacing)),var(--is-small, 1)*max(var(--ig-body-2-letter-spacing), -1 * var(--ig-body-2-letter-spacing)));text-transform:max(var(--is-large, 1)*max(var(--ig-body-1-text-transform), -1 * var(--ig-body-1-text-transform)),var(--is-medium, 1)*max(var(--ig-body-2-text-transform), -1 * var(--ig-body-2-text-transform)),var(--is-small, 1)*max(var(--ig-body-2-text-transform), -1 * var(--ig-body-2-text-transform)))}:host(igc-calendar) [part=days-view-container] [part=navigation],:host(igc-calendar) [part=days-view-container] igc-days-view{min-width:max(var(--is-large, 1)*max(22.5rem, -1 * 22.5rem),var(--is-medium, 1)*max(19.625rem, -1 * 19.625rem),var(--is-small, 1)*max(18.125rem, -1 * 18.125rem))}:host(igc-calendar) igc-days-view::part(date),:host(igc-calendar) igc-days-view::part(week-number),:host(igc-calendar) igc-days-view::part(label),:host(igc-calendar) igc-days-view::part(days-row){-webkit-box-sizing:border-box;box-sizing:border-box}:host(igc-calendar) igc-days-view::part(week-number-inner),:host(igc-calendar) igc-days-view::part(date-inner){-webkit-box-sizing:border-box;box-sizing:border-box}:host(igc-calendar) igc-years-view,:host(igc-calendar) igc-months-view{display:grid;row-gap:.25rem;width:100%;min-width:max(var(--is-large, 1)*max(22.5rem, -1 * 22.5rem),var(--is-medium, 1)*max(19.625rem, -1 * 19.625rem),var(--is-small, 1)*max(18.125rem, -1 * 18.125rem));grid-template-rows:repeat(3, minmax(-webkit-max-content, 1fr));grid-template-rows:repeat(3, minmax(max-content, 1fr))}:host(igc-calendar) igc-days-view,:host(igc-calendar) igc-months-view,:host(igc-calendar) igc-years-view{font-family:var(--ig-font-family);overflow:visible}[part=navigation]{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0rem 16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[part=months-navigation],[part=years-navigation],[part~=navigation-button]{background:rgba(0,0,0,0);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:none;padding:0;-webkit-transition:color 150ms ease-in-out;transition:color 150ms ease-in-out}[part=months-navigation]:hover,[part=months-navigation]:focus,[part=years-navigation]:hover,[part=years-navigation]:focus,[part~=navigation-button]:hover,[part~=navigation-button]:focus{cursor:pointer}[part=months-navigation]:focus,[part=years-navigation]:focus,[part~=navigation-button]:focus{outline:none}[part~=navigation-button][part~=vertical]{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}[part=navigation-buttons]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}:host-context([dir=rtl]) [part~=navigation-button],:host([dir=rtl]) [part~=navigation-button]{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}:host-context([dir=rtl]) [part~=navigation-button][part~=vertical],:host([dir=rtl]) [part~=navigation-button][part~=vertical]{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}:host(igc-calendar[header-orientation=vertical]){-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}:host(igc-calendar[header-orientation=vertical]) [part=header]{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;border-radius:inherit;border-start-end-radius:0;border-end-end-radius:0}:host(igc-calendar[header-orientation=vertical]) [part=header-date]{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}[part~=picker-dates]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.25rem}[part=days-view-container]{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}[part=header]{border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:1rem}[part=content]{border-radius:inherit;border-top-left-radius:0;border-top-right-radius:0}[part=header-date],[part=header-title]{margin:0}[part=header-date]{display:-webkit-box;display:-ms-flexbox;display:flex;white-space:pre-wrap}.aria-off-screen{position:absolute;width:1px;height:1px;margin:-1px;border:none;clip:rect(0, 0, 0, 0);outline:0;pointer-events:none;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}`;\n"]}
+{"version":3,"file":"calendar.base.css.js","sourceRoot":"","sources":["../../../../src/components/calendar/themes/calendar.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,8qOAA8qO,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(igc-calendar){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-family:var(--ig-font-family);min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;overflow:hidden;font-size:max(var(--is-large, 1)*max(var(--ig-body-1-font-size), -1 * var(--ig-body-1-font-size)),var(--is-medium, 1)*max(var(--ig-body-2-font-size), -1 * var(--ig-body-2-font-size)),var(--is-small, 1)*max(var(--ig-body-2-font-size), -1 * var(--ig-body-2-font-size)));font-weight:max(var(--is-large, 1)*max(var(--ig-body-1-font-weight), -1 * var(--ig-body-1-font-weight)),var(--is-medium, 1)*max(var(--ig-body-2-font-weight), -1 * var(--ig-body-2-font-weight)),var(--is-small, 1)*max(var(--ig-body-2-font-weight), -1 * var(--ig-body-2-font-weight)));font-style:max(var(--is-large, 1)*max(var(--ig-body-1-font-style), -1 * var(--ig-body-1-font-style)),var(--is-medium, 1)*max(var(--ig-body-2-font-style), -1 * var(--ig-body-2-font-style)),var(--is-small, 1)*max(var(--ig-body-2-font-style), -1 * var(--ig-body-2-font-style)));line-height:max(var(--is-large, 1)*max(var(--ig-body-1-line-height), -1 * var(--ig-body-1-line-height)),var(--is-medium, 1)*max(var(--ig-body-2-line-height), -1 * var(--ig-body-2-line-height)),var(--is-small, 1)*max(var(--ig-body-2-line-height), -1 * var(--ig-body-2-line-height)));letter-spacing:max(var(--is-large, 1)*max(var(--ig-body-1-letter-spacing), -1 * var(--ig-body-1-letter-spacing)),var(--is-medium, 1)*max(var(--ig-body-2-letter-spacing), -1 * var(--ig-body-2-letter-spacing)),var(--is-small, 1)*max(var(--ig-body-2-letter-spacing), -1 * var(--ig-body-2-letter-spacing)));text-transform:max(var(--is-large, 1)*max(var(--ig-body-1-text-transform), -1 * var(--ig-body-1-text-transform)),var(--is-medium, 1)*max(var(--ig-body-2-text-transform), -1 * var(--ig-body-2-text-transform)),var(--is-small, 1)*max(var(--ig-body-2-text-transform), -1 * var(--ig-body-2-text-transform)))}:host(igc-calendar) [part=days-view-container] [part=navigation],:host(igc-calendar) [part=days-view-container] igc-days-view{min-width:max(var(--is-large, 1)*max(22.5rem, -1 * 22.5rem),var(--is-medium, 1)*max(19.625rem, -1 * 19.625rem),var(--is-small, 1)*max(18.125rem, -1 * 18.125rem))}:host(igc-calendar) igc-days-view::part(date),:host(igc-calendar) igc-days-view::part(week-number),:host(igc-calendar) igc-days-view::part(label),:host(igc-calendar) igc-days-view::part(days-row){-webkit-box-sizing:border-box;box-sizing:border-box}:host(igc-calendar) igc-days-view::part(week-number-inner),:host(igc-calendar) igc-days-view::part(date-inner){-webkit-box-sizing:border-box;box-sizing:border-box}:host(igc-calendar) igc-years-view,:host(igc-calendar) igc-months-view{display:grid;row-gap:.25rem;width:100%;min-width:max(var(--is-large, 1)*max(22.5rem, -1 * 22.5rem),var(--is-medium, 1)*max(19.625rem, -1 * 19.625rem),var(--is-small, 1)*max(18.125rem, -1 * 18.125rem));grid-template-rows:repeat(3, minmax(-webkit-max-content, 1fr));grid-template-rows:repeat(3, minmax(max-content, 1fr))}:host(igc-calendar) igc-days-view,:host(igc-calendar) igc-months-view,:host(igc-calendar) igc-years-view{font-family:var(--ig-font-family);overflow:visible}[part=navigation]{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0rem 16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[part=months-navigation],[part=years-navigation],[part~=navigation-button]{background:rgba(0,0,0,0);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:none;padding:0;-webkit-transition:color 150ms ease-in-out;transition:color 150ms ease-in-out}[part=months-navigation]:hover,[part=months-navigation]:focus,[part=years-navigation]:hover,[part=years-navigation]:focus,[part~=navigation-button]:hover,[part~=navigation-button]:focus{cursor:pointer}[part=months-navigation]:focus,[part=years-navigation]:focus,[part~=navigation-button]:focus{outline:none}[part~=navigation-button][part~=vertical]{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}[part=navigation-buttons]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}:host-context([dir=rtl]) [part~=navigation-button],:host([dir=rtl]) [part~=navigation-button]{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}:host-context([dir=rtl]) [part~=navigation-button][part~=vertical],:host([dir=rtl]) [part~=navigation-button][part~=vertical]{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}:host(igc-calendar[header-orientation=vertical]){-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}:host(igc-calendar[header-orientation=vertical]) [part=header]{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;border-radius:inherit;border-start-end-radius:0;border-end-end-radius:0}:host(igc-calendar[header-orientation=vertical]) [part=header-date]{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}[part~=picker-dates]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.25rem}[part=days-view-container]{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}[part=header]{border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:1rem}[part=content]{border-radius:inherit;border-top-left-radius:0;border-top-right-radius:0}[part=header-date],[part=header-title]{margin:0}[part=header-date]{display:-webkit-box;display:-ms-flexbox;display:flex;white-space:pre-wrap}.aria-off-screen{position:absolute;width:1px;height:1px;margin:-1px;border:none;clip:rect(0, 0, 0, 0);outline:0;pointer-events:none;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}`;\n"]}

package/components/calendar/types.d.ts

@@ -0,0 +1,16 @@
+export declare enum DateRangeType {
+    After = 0,
+    Before = 1,
+    Between = 2,
+    Specific = 3,
+    Weekdays = 4,
+    Weekends = 5
+}
+export interface DateRangeDescriptor {
+    type: DateRangeType;
+    dateRange?: Date[];
+}
+export type WeekDays = 'sunday' | 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday';
+export interface IgcCalendarBaseEventMap {
+    igcChange: CustomEvent<Date | Date[]>;
+}

package/components/calendar/types.js

@@ -0,0 +1,10 @@
+export var DateRangeType;
+(function (DateRangeType) {
+    DateRangeType[DateRangeType["After"] = 0] = "After";
+    DateRangeType[DateRangeType["Before"] = 1] = "Before";
+    DateRangeType[DateRangeType["Between"] = 2] = "Between";
+    DateRangeType[DateRangeType["Specific"] = 3] = "Specific";
+    DateRangeType[DateRangeType["Weekdays"] = 4] = "Weekdays";
+    DateRangeType[DateRangeType["Weekends"] = 5] = "Weekends";
+})(DateRangeType || (DateRangeType = {}));
+//# sourceMappingURL=types.js.map

package/components/calendar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/calendar/types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,aAOX;AAPD,WAAY,aAAa;IACvB,mDAAS,CAAA;IACT,qDAAU,CAAA;IACV,uDAAW,CAAA;IACX,yDAAY,CAAA;IACZ,yDAAY,CAAA;IACZ,yDAAY,CAAA;AACd,CAAC,EAPW,aAAa,KAAb,aAAa,QAOxB","sourcesContent":["export enum DateRangeType {\n  After = 0,\n  Before = 1,\n  Between = 2,\n  Specific = 3,\n  Weekdays = 4,\n  Weekends = 5,\n}\n\n/* creationType: DateRangeDescriptor */\nexport interface DateRangeDescriptor {\n  type: DateRangeType;\n  dateRange?: Date[];\n}\n\nexport type WeekDays =\n  | 'sunday'\n  | 'monday'\n  | 'tuesday'\n  | 'wednesday'\n  | 'thursday'\n  | 'friday'\n  | 'saturday';\n\nexport interface IgcCalendarBaseEventMap {\n  igcChange: CustomEvent<Date | Date[]>;\n}\n"]}

package/components/calendar/years-view/years-view.d.ts

@@ -1,6 +1,7 @@
 import { LitElement } from 'lit';
 import type { Constructor } from '../../common/mixins/constructor.js';
-import { type IgcCalendarBaseEventMap } from '../common/calendar-base.js';
+import { CalendarDay } from '../model.js';
+import type { IgcCalendarBaseEventMap } from '../types.js';
 declare const IgcYearsViewComponent_base: Constructor<import("../../common/mixins/event-emitter.js").EventEmitterInterface<IgcCalendarBaseEventMap>> & Constructor<LitElement>;
 /**
  * Instantiate a years view as a separate component in the calendar.
@@ -15,22 +16,22 @@ export default class IgcYearsViewComponent extends IgcYearsViewComponent_base {
     static readonly tagName = "igc-years-view";
     static styles: import("lit").CSSResult;
     static register(): void;
-    private years;
+    private _value;
     private activeYear;
     /** Тhe current value of the calendar. */
-    value: Date;
-    /** Sets how many years are displayed on a single page. */
+    set value(value: Date);
+    get value(): Date;
+    /**
+     * Sets how many years are displayed on a single page.
+     * @attr years-per-page
+     */
     yearsPerPage: number;
-    protected datesChange(): void;
     constructor();
-    /** Focuses the active date. */
+    connectedCallback(): void;
     focusActiveDate(): void;
-    private formattedYear;
-    private generateYears;
-    private resolveYearPartName;
-    private selectYear;
-    private yearKeyDown;
-    protected render(): import("lit-html").TemplateResult<1>;
+    protected handleInteraction(event: Event): void;
+    protected renderYear(year: number, now: CalendarDay): import("lit-html").TemplateResult<1>;
+    protected render(): Generator<import("lit-html").TemplateResult<1>, void, unknown>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/calendar/years-view/years-view.js

@@ -6,114 +6,99 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var IgcYearsViewComponent_1;
 import { LitElement, html } from 'lit';
-import { property, query } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
+import { range } from 'lit/directives/range.js';
 import { themes } from '../../../theming/theming-decorator.js';
+import { addKeybindings } from '../../common/controllers/key-bindings.js';
 import { blazorIndirectRender } from '../../common/decorators/blazorIndirectRender.js';
 import { blazorSuppressComponent } from '../../common/decorators/blazorSuppressComponent.js';
-import { watch } from '../../common/decorators/watch.js';
 import { registerComponent } from '../../common/definitions/register.js';
 import { EventEmitterMixin } from '../../common/mixins/event-emitter.js';
-import { partNameMap } from '../../common/util.js';
-import { YEARS_PER_ROW, } from '../common/calendar-base.js';
-import { calculateYearsRangeStart, setDateSafe } from '../common/utils.js';
+import { chunk, partNameMap } from '../../common/util.js';
+import { YEARS_PER_ROW, getViewElement, getYearRange } from '../helpers.js';
+import { CalendarDay } from '../model.js';
 import { styles } from '../themes/year-month-view.base.css.js';
 import { all } from '../themes/year-month.js';
 let IgcYearsViewComponent = IgcYearsViewComponent_1 = class IgcYearsViewComponent extends EventEmitterMixin(LitElement) {
     static register() {
         registerComponent(IgcYearsViewComponent_1);
     }
-    datesChange() {
-        this.years = this.generateYears();
+    set value(value) {
+        this._value = CalendarDay.from(value);
+    }
+    get value() {
+        return this._value.native;
     }
     constructor() {
         super();
-        this.value = new Date();
+        this._value = CalendarDay.today;
         this.yearsPerPage = 15;
-        this.setAttribute('role', 'grid');
+        addKeybindings(this, {
+            bindingDefaults: { preventDefault: true },
+        }).setActivateHandler(this.handleInteraction);
+        this.addEventListener('click', this.handleInteraction);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.role = 'grid';
     }
     focusActiveDate() {
         this.activeYear.focus();
     }
-    formattedYear(value) {
-        return `${value.getFullYear()}`;
-    }
-    generateYears() {
-        const startYear = calculateYearsRangeStart(this.value, this.yearsPerPage);
-        const month = this.value.getMonth();
-        const result = [];
-        const rows = this.yearsPerPage / YEARS_PER_ROW;
-        for (let i = 0; i < rows; i++) {
-            const row = [];
-            for (let j = 0; j < YEARS_PER_ROW; j++) {
-                const year = startYear + i * YEARS_PER_ROW + j;
-                const date = new Date(year, month, 1);
-                date.setFullYear(year);
-                row.push(date);
-            }
-            result.push(row);
+    handleInteraction(event) {
+        const value = getViewElement(event);
+        if (value > -1) {
+            this._value = this._value.set({
+                year: value,
+            });
+            this.emitEvent('igcChange', { detail: this.value });
         }
-        return result;
-    }
-    resolveYearPartName(date) {
-        const today = new Date();
-        return {
-            year: true,
-            selected: date.getFullYear() === this.value.getFullYear(),
-            current: date.getFullYear() === today.getFullYear(),
-        };
     }
-    selectYear(year) {
-        const value = new Date(year);
-        setDateSafe(value, this.value.getDate());
-        this.value = value;
-        this.emitEvent('igcChange', { detail: this.value });
+    renderYear(year, now) {
+        const selected = this._value.year === year;
+        const current = year === now.year;
+        const parts = { selected, current };
+        return html `
+      <span part=${partNameMap({ year: true, ...parts })}>
+        <span
+          role="gridcell"
+          data-value=${year}
+          part=${partNameMap({ 'year-inner': true, ...parts })}
+          aria-selected=${selected}
+          tabindex=${selected ? 0 : -1}
+        >
+          ${year}
+        </span>
+      </span>
+    `;
     }
-    yearKeyDown(event, year) {
-        if (event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault();
-            this.selectYear(year);
+    *render() {
+        const now = CalendarDay.today;
+        const { start } = getYearRange(this._value, this.yearsPerPage);
+        const years = Array.from(range(start, start + this.yearsPerPage));
+        for (const row of chunk(years, YEARS_PER_ROW)) {
+            yield html `
+        <div part="years-row" role="row">
+          ${row.map((year) => this.renderYear(year, now))}
+        </div>
+      `;
         }
     }
-    render() {
-        return html `${this.years.map((row) => {
-            return html `<div part="years-row" role="row">
-        ${row.map((year) => {
-                const yearPartName = partNameMap(this.resolveYearPartName(year));
-                const yearInnerPartName = yearPartName.replace('year', 'year-inner');
-                return html `<span part=${yearPartName}>
-            <span
-              part=${yearInnerPartName}
-              role="gridcell"
-              aria-selected=${year.getFullYear() === this.value.getFullYear()}
-              tabindex="${year.getFullYear() === this.value.getFullYear()
-                    ? 0
-                    : -1}"
-              @click=${() => this.selectYear(year)}
-              @keydown=${(event) => this.yearKeyDown(event, year)}
-            >
-              ${this.formattedYear(year)}
-            </span>
-          </span>`;
-            })}
-      </div>`;
-        })}`;
-    }
 };
 IgcYearsViewComponent.tagName = 'igc-years-view';
 IgcYearsViewComponent.styles = styles;
+__decorate([
+    state()
+], IgcYearsViewComponent.prototype, "_value", void 0);
 __decorate([
     query('[tabindex="0"]')
 ], IgcYearsViewComponent.prototype, "activeYear", void 0);
 __decorate([
     property({ attribute: false })
-], IgcYearsViewComponent.prototype, "value", void 0);
+], IgcYearsViewComponent.prototype, "value", null);
 __decorate([
     property({ type: Number, attribute: 'years-per-page' })
 ], IgcYearsViewComponent.prototype, "yearsPerPage", void 0);
-__decorate([
-    watch('value'),
-    watch('yearsPerPage')
-], IgcYearsViewComponent.prototype, "datesChange", null);
 IgcYearsViewComponent = IgcYearsViewComponent_1 = __decorate([
     blazorIndirectRender,
     blazorSuppressComponent,