igniteui-webcomponents 6.0.1 → 6.1.0

package/components/calendar/model.js

@@ -17,6 +17,14 @@ export class CalendarDay {
             date: date.getDate(),
         });
     }
+    static compare(first, second) {
+        const a = toCalendarDay(first);
+        const b = toCalendarDay(second);
+        if (a.equalTo(b)) {
+            return 0;
+        }
+        return a.greaterThan(b) ? 1 : -1;
+    }
     constructor(args) {
         this._date = new Date(args.year, args.month, args.date ?? 1);
     }
@@ -24,11 +32,18 @@ export class CalendarDay {
         return CalendarDay.from(this._date);
     }
     set(args) {
-        return new CalendarDay({
-            year: args.year ?? this.year,
-            month: args.month ?? this.month,
-            date: args.date ?? this.date,
-        });
+        const year = args.year ?? this.year;
+        const month = args.month ?? this.month;
+        const date = args.date ?? this.date;
+        const temp = new Date(year, month, date);
+        if (date > 0 && temp.getMonth() !== month) {
+            return new CalendarDay({
+                year,
+                month,
+                date: new Date(year, month + 1, 0).getDate(),
+            });
+        }
+        return new CalendarDay({ year, month, date });
     }
     add(unit, value) {
         const result = this.clone();
@@ -84,9 +99,15 @@ export class CalendarDay {
     greaterThan(value) {
         return this.timestamp > toCalendarDay(value).timestamp;
     }
+    greaterThanOrEqual(value) {
+        return this.timestamp >= toCalendarDay(value).timestamp;
+    }
     lessThan(value) {
         return this.timestamp < toCalendarDay(value).timestamp;
     }
+    lessThanOrEqual(value) {
+        return this.timestamp <= toCalendarDay(value).timestamp;
+    }
     toString() {
         return `${this.native}`;
     }

package/components/calendar/model.js.map

@@ -1 +1 @@
-{"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/calendar/model.ts"],"names":[],"mappings":"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","sourcesContent":["export type DayParameter = CalendarDay | Date;\n\nexport type CalendarRangeParams = {\n  start: DayParameter;\n  end: DayParameter | number;\n  unit?: DayInterval;\n};\n\ntype DayInterval = 'year' | 'quarter' | 'month' | 'week' | 'day';\n\ntype CalendarDayParams = {\n  year: number;\n  month: number;\n  date?: number;\n};\n\nexport const daysInWeek = 7;\nconst millisecondsInDay = 86400000;\n\nexport function toCalendarDay(date: DayParameter) {\n  return date instanceof Date ? CalendarDay.from(date) : date;\n}\n\nfunction checkRollover(original: CalendarDay, modified: CalendarDay) {\n  return original.date !== modified.date ? modified.set({ date: 0 }) : modified;\n}\n\n/* blazorSuppress */\nexport class CalendarDay {\n  private _date!: Date;\n\n  /** Constructs and returns the current day. */\n  public static get today() {\n    return CalendarDay.from(new Date());\n  }\n\n  /** Constructs a new CalendarDay instance from a Date object. */\n  public static from(date: Date) {\n    return new CalendarDay({\n      year: date.getFullYear(),\n      month: date.getMonth(),\n      date: date.getDate(),\n    });\n  }\n\n  constructor(args: CalendarDayParams) {\n    this._date = new Date(args.year, args.month, args.date ?? 1);\n  }\n\n  /** Returns a copy of this instance. */\n  public clone() {\n    return CalendarDay.from(this._date);\n  }\n\n  /**\n   * Returns a new instance with values replaced.\n   */\n  public set(args: Partial<CalendarDayParams>) {\n    return new CalendarDay({\n      year: args.year ?? this.year,\n      month: args.month ?? this.month,\n      date: args.date ?? this.date,\n    });\n  }\n\n  public add(unit: DayInterval, value: number) {\n    const result = this.clone();\n    switch (unit) {\n      case 'year':\n        result._date.setFullYear(result.year + value);\n        return checkRollover(this, result);\n      case 'quarter':\n        result._date.setMonth(result.month + 3 * value);\n        return checkRollover(this, result);\n      case 'month':\n        result._date.setMonth(result.month + value);\n        return checkRollover(this, result);\n      case 'week':\n        result._date.setDate(result.date + 7 * value);\n        return result;\n      case 'day':\n        result._date.setDate(result.date + value);\n        return result;\n      default:\n        throw new Error('Invalid interval');\n    }\n  }\n\n  /** Returns the day of the week (Sunday = 0). */\n  public get day() {\n    return this._date.getDay();\n  }\n\n  /** Returns the full year. */\n  public get year() {\n    return this._date.getFullYear();\n  }\n\n  /** Returns the month. */\n  public get month() {\n    return this._date.getMonth();\n  }\n\n  /** Returns the date */\n  public get date() {\n    return this._date.getDate();\n  }\n\n  /** Returns the timestamp since epoch in milliseconds. */\n  public get timestamp() {\n    return this._date.getTime();\n  }\n\n  /** Returns the current week number. */\n  public get week() {\n    const firstDay = new CalendarDay({ year: this.year, month: 0 }).timestamp;\n    const currentDay =\n      (this.timestamp - firstDay + millisecondsInDay) / millisecondsInDay;\n    return Math.ceil(currentDay / daysInWeek);\n  }\n\n  /** Returns the underlying native date instance. */\n  public get native() {\n    return new Date(this._date);\n  }\n\n  /**\n   * Whether the current date is a weekend day.\n   *\n   * @remarks\n   * This is naive, since it does not account for locale specifics.\n   */\n  public get weekend() {\n    return this.day < 1 || this.day > 5;\n  }\n\n  public equalTo(value: DayParameter) {\n    return this.timestamp === toCalendarDay(value).timestamp;\n  }\n\n  public greaterThan(value: DayParameter) {\n    return this.timestamp > toCalendarDay(value).timestamp;\n  }\n\n  public lessThan(value: DayParameter) {\n    return this.timestamp < toCalendarDay(value).timestamp;\n  }\n\n  public toString() {\n    return `${this.native}`;\n  }\n}\n"]}
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/components/calendar/model.ts"],"names":[],"mappings":"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","sourcesContent":["export type DayParameter = CalendarDay | Date;\n\nexport type CalendarRangeParams = {\n  start: DayParameter;\n  end: DayParameter | number;\n  unit?: DayInterval;\n  inclusive?: boolean;\n};\n\ntype DayInterval = 'year' | 'quarter' | 'month' | 'week' | 'day';\n\ntype CalendarDayParams = {\n  year: number;\n  month: number;\n  date?: number;\n};\n\nexport const daysInWeek = 7;\nconst millisecondsInDay = 86400000;\n\nexport function toCalendarDay(date: DayParameter) {\n  return date instanceof Date ? CalendarDay.from(date) : date;\n}\n\nfunction checkRollover(original: CalendarDay, modified: CalendarDay) {\n  return original.date !== modified.date ? modified.set({ date: 0 }) : modified;\n}\n\n/* blazorSuppress */\nexport class CalendarDay {\n  private readonly _date: Date;\n\n  /** Constructs and returns the current day. */\n  public static get today() {\n    return CalendarDay.from(new Date());\n  }\n\n  /** Constructs a new CalendarDay instance from a Date object. */\n  public static from(date: Date) {\n    return new CalendarDay({\n      year: date.getFullYear(),\n      month: date.getMonth(),\n      date: date.getDate(),\n    });\n  }\n\n  /**\n   * Compares the date portion of two date objects.\n   *\n   * @returns\n   * ```\n   *  first === second // 0\n   *  first > second // 1\n   *  first < second // -1\n   * ```\n   */\n  public static compare(first: DayParameter, second: DayParameter) {\n    const a = toCalendarDay(first);\n    const b = toCalendarDay(second);\n\n    if (a.equalTo(b)) {\n      return 0;\n    }\n    return a.greaterThan(b) ? 1 : -1;\n  }\n\n  constructor(args: CalendarDayParams) {\n    this._date = new Date(args.year, args.month, args.date ?? 1);\n  }\n\n  /** Returns a copy of this instance. */\n  public clone() {\n    return CalendarDay.from(this._date);\n  }\n\n  /**\n   * Returns a new instance with values replaced.\n   */\n  public set(args: Partial<CalendarDayParams>) {\n    const year = args.year ?? this.year;\n    const month = args.month ?? this.month;\n    const date = args.date ?? this.date;\n\n    const temp = new Date(year, month, date);\n\n    if (date > 0 && temp.getMonth() !== month) {\n      return new CalendarDay({\n        year,\n        month,\n        date: new Date(year, month + 1, 0).getDate(),\n      });\n    }\n\n    return new CalendarDay({ year, month, date });\n  }\n\n  public add(unit: DayInterval, value: number) {\n    const result = this.clone();\n    switch (unit) {\n      case 'year':\n        result._date.setFullYear(result.year + value);\n        return checkRollover(this, result);\n      case 'quarter':\n        result._date.setMonth(result.month + 3 * value);\n        return checkRollover(this, result);\n      case 'month':\n        result._date.setMonth(result.month + value);\n        return checkRollover(this, result);\n      case 'week':\n        result._date.setDate(result.date + 7 * value);\n        return result;\n      case 'day':\n        result._date.setDate(result.date + value);\n        return result;\n      default:\n        throw new Error('Invalid interval');\n    }\n  }\n\n  /** Returns the day of the week (Sunday = 0). */\n  public get day() {\n    return this._date.getDay();\n  }\n\n  /** Returns the full year. */\n  public get year() {\n    return this._date.getFullYear();\n  }\n\n  /** Returns the month. */\n  public get month() {\n    return this._date.getMonth();\n  }\n\n  /** Returns the date */\n  public get date() {\n    return this._date.getDate();\n  }\n\n  /** Returns the timestamp since epoch in milliseconds. */\n  public get timestamp() {\n    return this._date.getTime();\n  }\n\n  /** Returns the current week number. */\n  public get week() {\n    const firstDay = new CalendarDay({ year: this.year, month: 0 }).timestamp;\n    const currentDay =\n      (this.timestamp - firstDay + millisecondsInDay) / millisecondsInDay;\n    return Math.ceil(currentDay / daysInWeek);\n  }\n\n  /** Returns the underlying native date instance. */\n  public get native() {\n    return new Date(this._date);\n  }\n\n  /**\n   * Whether the current date is a weekend day.\n   *\n   * @remarks\n   * This is naive, since it does not account for locale specifics.\n   */\n  public get weekend() {\n    return this.day < 1 || this.day > 5;\n  }\n\n  public equalTo(value: DayParameter) {\n    return this.timestamp === toCalendarDay(value).timestamp;\n  }\n\n  public greaterThan(value: DayParameter) {\n    return this.timestamp > toCalendarDay(value).timestamp;\n  }\n\n  public greaterThanOrEqual(value: DayParameter) {\n    return this.timestamp >= toCalendarDay(value).timestamp;\n  }\n\n  public lessThan(value: DayParameter) {\n    return this.timestamp < toCalendarDay(value).timestamp;\n  }\n\n  public lessThanOrEqual(value: DayParameter) {\n    return this.timestamp <= toCalendarDay(value).timestamp;\n  }\n\n  public toString() {\n    return `${this.native}`;\n  }\n}\n"]}

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

@@ -31,7 +31,7 @@ export default class IgcMonthsViewComponent extends IgcMonthsViewComponent_base
     constructor();
     connectedCallback(): void;
     /** Focuses the active date. */
-    focusActiveDate(): void;
+    focusActiveDate(options?: FocusOptions): void;
     protected handleInteraction(event: Event): void;
     protected renderMonth(entry: CalendarDay, now: CalendarDay): import("lit-html").TemplateResult<1>;
     protected render(): Generator<import("lit-html").TemplateResult<1>, void, unknown>;

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

@@ -16,7 +16,8 @@ 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 { chunk, partNameMap } from '../../common/util.js';
+import { partMap } from '../../common/part-map.js';
+import { chunk } 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';
@@ -55,8 +56,8 @@ let IgcMonthsViewComponent = IgcMonthsViewComponent_1 = class IgcMonthsViewCompo
         super.connectedCallback();
         this.role = 'grid';
     }
-    focusActiveDate() {
-        this.activeMonth.focus();
+    focusActiveDate(options) {
+        this.activeMonth.focus(options);
     }
     handleInteraction(event) {
         const value = getViewElement(event);
@@ -71,13 +72,12 @@ let IgcMonthsViewComponent = IgcMonthsViewComponent_1 = class IgcMonthsViewCompo
         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 part=${partMap({ month: true, selected, current })}>
         <span
           role="gridcell"
           data-value=${entry.month}
-          part=${partNameMap({ 'month-inner': true, ...parts })}
+          part=${partMap({ 'month-inner': true, selected, current })}
           aria-selected=${selected}
           aria-label=${ariaLabel}
           tabindex=${active ? 0 : -1}

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, 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 { IgcCalendarComponentEventMap } 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  IgcCalendarComponentEventMap,\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"]}
+{"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 { partMap } from '../../common/part-map.js';\nimport { chunk } 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 { IgcCalendarComponentEventMap } 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  IgcCalendarComponentEventMap,\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(options?: FocusOptions) {\n    this.activeMonth.focus(options);\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    return html`\n      <span part=${partMap({ month: true, selected, current })}>\n        <span\n          role=\"gridcell\"\n          data-value=${entry.month}\n          part=${partMap({ 'month-inner': true, selected, current })}\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/years-view/years-view.d.ts

@@ -28,7 +28,7 @@ export default class IgcYearsViewComponent extends IgcYearsViewComponent_base {
     yearsPerPage: number;
     constructor();
     connectedCallback(): void;
-    focusActiveDate(): void;
+    focusActiveDate(options?: FocusOptions): void;
     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>;

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

@@ -14,7 +14,8 @@ import { blazorIndirectRender } from '../../common/decorators/blazorIndirectRend
 import { blazorSuppressComponent } from '../../common/decorators/blazorSuppressComponent.js';
 import { registerComponent } from '../../common/definitions/register.js';
 import { EventEmitterMixin } from '../../common/mixins/event-emitter.js';
-import { chunk, partNameMap } from '../../common/util.js';
+import { partMap } from '../../common/part-map.js';
+import { chunk } 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';
@@ -42,8 +43,8 @@ let IgcYearsViewComponent = IgcYearsViewComponent_1 = class IgcYearsViewComponen
         super.connectedCallback();
         this.role = 'grid';
     }
-    focusActiveDate() {
-        this.activeYear.focus();
+    focusActiveDate(options) {
+        this.activeYear.focus(options);
     }
     handleInteraction(event) {
         const value = getViewElement(event);
@@ -57,13 +58,12 @@ let IgcYearsViewComponent = IgcYearsViewComponent_1 = class IgcYearsViewComponen
     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 part=${partMap({ year: true, selected, current })}>
         <span
           role="gridcell"
           data-value=${year}
-          part=${partNameMap({ 'year-inner': true, ...parts })}
+          part=${partMap({ 'year-inner': true, selected, current })}
           aria-selected=${selected}
           tabindex=${selected ? 0 : -1}
         >

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

@@ -1 +1 @@
-{"version":3,"file":"years-view.js","sourceRoot":"","sources":["../../../../src/components/calendar/years-view/years-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 { registerComponent } from '../../common/definitions/register.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 { YEARS_PER_ROW, getViewElement, getYearRange } 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 { IgcCalendarComponentEventMap } from '../types.js';\n\n/**\n * Instantiate a years view as a separate component in the calendar.\n *\n * @element igc-years-view\n *\n * @csspart years-row - The years row container.\n * @csspart year - The year container.\n * @csspart year-inner - The inner year container.\n */\n@blazorIndirectRender\n@blazorSuppressComponent\n@themes(all)\nexport default class IgcYearsViewComponent extends EventEmitterMixin<\n  IgcCalendarComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-years-view';\n  public static styles = styles;\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcYearsViewComponent);\n  }\n\n  @state()\n  private _value = CalendarDay.today;\n\n  @query('[tabindex=\"0\"]')\n  private activeYear!: 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  /**\n   * Sets how many years are displayed on a single page.\n   * @attr years-per-page\n   */\n  @property({ type: Number, attribute: 'years-per-page' })\n  public yearsPerPage = 15;\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  public focusActiveDate() {\n    this.activeYear.focus();\n  }\n\n  protected handleInteraction(event: Event) {\n    const value = getViewElement(event);\n\n    if (value !== -1) {\n      this._value = this._value.set({\n        year: value,\n      });\n      this.emitEvent('igcChange', { detail: this.value });\n    }\n  }\n\n  protected renderYear(year: number, now: CalendarDay) {\n    const selected = this._value.year === year;\n    const current = year === now.year;\n    const parts = { selected, current };\n\n    return html`\n      <span part=${partNameMap({ year: true, ...parts })}>\n        <span\n          role=\"gridcell\"\n          data-value=${year}\n          part=${partNameMap({ 'year-inner': true, ...parts })}\n          aria-selected=${selected}\n          tabindex=${selected ? 0 : -1}\n        >\n          ${year}\n        </span>\n      </span>\n    `;\n  }\n\n  protected override *render() {\n    const now = CalendarDay.today;\n    const { start } = getYearRange(this._value, this.yearsPerPage);\n    const years = Array.from(range(start, start + this.yearsPerPage));\n\n    for (const row of chunk(years, YEARS_PER_ROW)) {\n      yield html`\n        <div part=\"years-row\" role=\"row\">\n          ${row.map((year) => this.renderYear(year, now))}\n        </div>\n      `;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-years-view': IgcYearsViewComponent;\n  }\n}\n"]}
+{"version":3,"file":"years-view.js","sourceRoot":"","sources":["../../../../src/components/calendar/years-view/years-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 { registerComponent } from '../../common/definitions/register.js';\nimport type { Constructor } from '../../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../../common/mixins/event-emitter.js';\nimport { partMap } from '../../common/part-map.js';\nimport { chunk } from '../../common/util.js';\nimport { YEARS_PER_ROW, getViewElement, getYearRange } 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 { IgcCalendarComponentEventMap } from '../types.js';\n\n/**\n * Instantiate a years view as a separate component in the calendar.\n *\n * @element igc-years-view\n *\n * @csspart years-row - The years row container.\n * @csspart year - The year container.\n * @csspart year-inner - The inner year container.\n */\n@blazorIndirectRender\n@blazorSuppressComponent\n@themes(all)\nexport default class IgcYearsViewComponent extends EventEmitterMixin<\n  IgcCalendarComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-years-view';\n  public static styles = styles;\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcYearsViewComponent);\n  }\n\n  @state()\n  private _value = CalendarDay.today;\n\n  @query('[tabindex=\"0\"]')\n  private activeYear!: 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  /**\n   * Sets how many years are displayed on a single page.\n   * @attr years-per-page\n   */\n  @property({ type: Number, attribute: 'years-per-page' })\n  public yearsPerPage = 15;\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  public focusActiveDate(options?: FocusOptions) {\n    this.activeYear.focus(options);\n  }\n\n  protected handleInteraction(event: Event) {\n    const value = getViewElement(event);\n\n    if (value !== -1) {\n      this._value = this._value.set({\n        year: value,\n      });\n      this.emitEvent('igcChange', { detail: this.value });\n    }\n  }\n\n  protected renderYear(year: number, now: CalendarDay) {\n    const selected = this._value.year === year;\n    const current = year === now.year;\n\n    return html`\n      <span part=${partMap({ year: true, selected, current })}>\n        <span\n          role=\"gridcell\"\n          data-value=${year}\n          part=${partMap({ 'year-inner': true, selected, current })}\n          aria-selected=${selected}\n          tabindex=${selected ? 0 : -1}\n        >\n          ${year}\n        </span>\n      </span>\n    `;\n  }\n\n  protected override *render() {\n    const now = CalendarDay.today;\n    const { start } = getYearRange(this._value, this.yearsPerPage);\n    const years = Array.from(range(start, start + this.yearsPerPage));\n\n    for (const row of chunk(years, YEARS_PER_ROW)) {\n      yield html`\n        <div part=\"years-row\" role=\"row\">\n          ${row.map((year) => this.renderYear(year, now))}\n        </div>\n      `;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-years-view': IgcYearsViewComponent;\n  }\n}\n"]}

package/components/carousel/carousel-indicator-container.d.ts

@@ -10,8 +10,8 @@ export default class IgcCarouselIndicatorContainerComponent extends LitElement {
     static readonly tagName = "igc-carousel-indicator-container";
     static styles: import("lit").CSSResult[];
     static register(): void;
-    private _kbFocus;
-    private handleFocusOut;
+    private readonly _focusRingManager;
+    private _handleFocusOut;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/components/carousel/carousel-indicator-container.js

@@ -9,7 +9,7 @@ import { LitElement, html } from 'lit';
 import { themes } from '../../theming/theming-decorator.js';
 import { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { partNameMap } from '../common/util.js';
+import { partMap } from '../common/part-map.js';
 import IgcCarouselIndicatorComponent from './carousel-indicator.js';
 import { styles } from './themes/carousel-indicator-container.base.css.js';
 import { all } from './themes/indicator-container.js';
@@ -17,26 +17,25 @@ import { styles as shared } from './themes/shared/indicator-container/indicator-
 let IgcCarouselIndicatorContainerComponent = IgcCarouselIndicatorContainerComponent_1 = class IgcCarouselIndicatorContainerComponent extends LitElement {
     constructor() {
         super(...arguments);
-        this._kbFocus = addKeyboardFocusRing(this);
+        this._focusRingManager = addKeyboardFocusRing(this);
     }
     static register() {
         registerComponent(IgcCarouselIndicatorContainerComponent_1);
     }
-    handleFocusOut(event) {
+    _handleFocusOut(event) {
         const target = event.relatedTarget;
-        if (!target?.matches(IgcCarouselIndicatorComponent.tagName)) {
-            this._kbFocus.reset();
+        if (target?.matches(IgcCarouselIndicatorComponent.tagName)) {
+            event.stopPropagation();
         }
     }
     render() {
         return html `
       <div
-        part=${partNameMap({
+        part=${partMap({
             base: true,
-            focused: this._kbFocus.focused,
+            focused: this._focusRingManager.focused,
         })}
-        @click=${this._kbFocus.reset}
-        @focusout=${this.handleFocusOut}
+        @focusout=${this._handleFocusOut}
       >
         <slot></slot>
       </div>

package/components/carousel/carousel-indicator-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"carousel-indicator-container.js","sourceRoot":"","sources":["../../../src/components/carousel/carousel-indicator-container.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,6BAA6B,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,mDAAmD,CAAC;AAC3E,OAAO,EAAE,GAAG,EAAE,MAAM,iCAAiC,CAAC;AACtD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,uEAAuE,CAAC;AAW1F,IAAM,sCAAsC,8CAA5C,MAAM,sCAAuC,SAAQ,UAAU;IAA/D;;QASL,aAAQ,GAAG,oBAAoB,CAAC,IAAI,CAAC,CAAC;IAwBhD,CAAC;IA5BQ,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,wCAAsC,CAAC,CAAC;IAC5D,CAAC;IAIO,cAAc,CAAC,KAAiB;QACtC,MAAM,MAAM,GAAG,KAAK,CAAC,aAAwB,CAAC;QAE9C,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,6BAA6B,CAAC,OAAO,CAAC,EAAE,CAAC;YAC5D,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;QACxB,CAAC;IACH,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;eAEA,WAAW,CAAC;YACjB,IAAI,EAAE,IAAI;YACV,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO;SAC/B,CAAC;iBACO,IAAI,CAAC,QAAQ,CAAC,KAAK;oBAChB,IAAI,CAAC,cAAc;;;;KAIlC,CAAC;IACJ,CAAC;;AA/BsB,8CAAO,GAAG,kCAAkC,AAArC,CAAsC;AAC7C,6CAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;AAF9B,sCAAsC;IAD1D,MAAM,CAAC,GAAG,CAAC;GACS,sCAAsC,CAiC1D;eAjCoB,sCAAsC","sourcesContent":["import { LitElement, html } from 'lit';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partNameMap } from '../common/util.js';\nimport IgcCarouselIndicatorComponent from './carousel-indicator.js';\nimport { styles } from './themes/carousel-indicator-container.base.css.js';\nimport { all } from './themes/indicator-container.js';\nimport { styles as shared } from './themes/shared/indicator-container/indicator-container.common.css.js';\n\n/* blazorSuppress */\n/**\n * @element igc-carousel-indicator-container\n *\n * @slot - Default slot for the carousel indicator container.\n *\n * @csspart base - The wrapping container of all carousel indicators.\n */\n@themes(all)\nexport default class IgcCarouselIndicatorContainerComponent extends LitElement {\n  public static readonly tagName = 'igc-carousel-indicator-container';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcCarouselIndicatorContainerComponent);\n  }\n\n  private _kbFocus = addKeyboardFocusRing(this);\n\n  private handleFocusOut(event: FocusEvent) {\n    const target = event.relatedTarget as Element;\n\n    if (!target?.matches(IgcCarouselIndicatorComponent.tagName)) {\n      this._kbFocus.reset();\n    }\n  }\n\n  protected override render() {\n    return html`\n      <div\n        part=${partNameMap({\n          base: true,\n          focused: this._kbFocus.focused,\n        })}\n        @click=${this._kbFocus.reset}\n        @focusout=${this.handleFocusOut}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-carousel-indicator-container': IgcCarouselIndicatorContainerComponent;\n  }\n}\n"]}
+{"version":3,"file":"carousel-indicator-container.js","sourceRoot":"","sources":["../../../src/components/carousel/carousel-indicator-container.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,6BAA6B,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,mDAAmD,CAAC;AAC3E,OAAO,EAAE,GAAG,EAAE,MAAM,iCAAiC,CAAC;AACtD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,uEAAuE,CAAC;AAW1F,IAAM,sCAAsC,8CAA5C,MAAM,sCAAuC,SAAQ,UAAU;IAA/D;;QASI,sBAAiB,GAAG,oBAAoB,CAAC,IAAI,CAAC,CAAC;IAyBlE,CAAC;IA7BQ,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,wCAAsC,CAAC,CAAC;IAC5D,CAAC;IAIO,eAAe,CAAC,KAAiB;QACvC,MAAM,MAAM,GAAG,KAAK,CAAC,aAAwB,CAAC;QAE9C,IAAI,MAAM,EAAE,OAAO,CAAC,6BAA6B,CAAC,OAAO,CAAC,EAAE,CAAC;YAG3D,KAAK,CAAC,eAAe,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;eAEA,OAAO,CAAC;YACb,IAAI,EAAE,IAAI;YACV,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,OAAO;SACxC,CAAC;oBACU,IAAI,CAAC,eAAe;;;;KAInC,CAAC;IACJ,CAAC;;AAhCsB,8CAAO,GAAG,kCAAkC,AAArC,CAAsC;AAC7C,6CAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;AAF9B,sCAAsC;IAD1D,MAAM,CAAC,GAAG,CAAC;GACS,sCAAsC,CAkC1D;eAlCoB,sCAAsC","sourcesContent":["import { LitElement, html } from 'lit';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partMap } from '../common/part-map.js';\nimport IgcCarouselIndicatorComponent from './carousel-indicator.js';\nimport { styles } from './themes/carousel-indicator-container.base.css.js';\nimport { all } from './themes/indicator-container.js';\nimport { styles as shared } from './themes/shared/indicator-container/indicator-container.common.css.js';\n\n/* blazorSuppress */\n/**\n * @element igc-carousel-indicator-container\n *\n * @slot - Default slot for the carousel indicator container.\n *\n * @csspart base - The wrapping container of all carousel indicators.\n */\n@themes(all)\nexport default class IgcCarouselIndicatorContainerComponent extends LitElement {\n  public static readonly tagName = 'igc-carousel-indicator-container';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcCarouselIndicatorContainerComponent);\n  }\n\n  private readonly _focusRingManager = addKeyboardFocusRing(this);\n\n  private _handleFocusOut(event: FocusEvent): void {\n    const target = event.relatedTarget as Element;\n\n    if (target?.matches(IgcCarouselIndicatorComponent.tagName)) {\n      // Stop the event from hitting the _focusRingManager handler redrawing\n      // the keyboard focus styles\n      event.stopPropagation();\n    }\n  }\n\n  protected override render() {\n    return html`\n      <div\n        part=${partMap({\n          base: true,\n          focused: this._focusRingManager.focused,\n        })}\n        @focusout=${this._handleFocusOut}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-carousel-indicator-container': IgcCarouselIndicatorContainerComponent;\n  }\n}\n"]}

package/components/carousel/carousel.d.ts

@@ -34,17 +34,17 @@ export default class IgcCarouselComponent extends IgcCarouselComponent_base {
     static readonly tagName = "igc-carousel";
     static register(): void;
     private static readonly increment;
-    private _carouselId;
-    private _carouselKeyboardInteractionFocus;
-    private _internals;
+    private readonly _carouselId;
+    private readonly _internals;
     private _lastInterval;
     private _hasKeyboardInteractionOnIndicators;
     private _hasMouseStop;
+    private _hasInnerFocus;
     private _context;
-    private _carouselSlidesContainerRef;
-    private _indicatorsContainerRef;
-    private _prevButtonRef;
-    private _nextButtonRef;
+    private readonly _carouselSlidesContainerRef;
+    private readonly _indicatorsContainerRef;
+    private readonly _prevButtonRef;
+    private readonly _nextButtonRef;
     private get hasProjectedIndicators();
     private get showIndicatorsLabel();
     private get nextIndex();
@@ -141,7 +141,6 @@ export default class IgcCarouselComponent extends IgcCarouselComponent_base {
     constructor();
     private handleSlotChange;
     private handleIndicatorSlotChange;
-    private handlePointerDown;
     private handlePointerEnter;
     private handlePointerLeave;
     private handleFocusIn;

package/components/carousel/carousel.js

@@ -13,14 +13,14 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { themes } from '../../theming/theming-decorator.js';
 import IgcButtonComponent from '../button/button.js';
 import { carouselContext } from '../common/context.js';
-import { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';
 import { addGesturesController, } from '../common/controllers/gestures.js';
 import { addKeybindings, arrowLeft, arrowRight, endKey, homeKey, } from '../common/controllers/key-bindings.js';
 import { createMutationController, } from '../common/controllers/mutation-observer.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
-import { asNumber, createCounter, findElementFromEventPath, first, formatString, isLTR, last, partNameMap, wrap, } from '../common/util.js';
+import { partMap } from '../common/part-map.js';
+import { asNumber, createCounter, findElementFromEventPath, first, formatString, isLTR, last, wrap, } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
 import IgcCarouselIndicatorContainerComponent from './carousel-indicator-container.js';
 import IgcCarouselIndicatorComponent from './carousel-indicator.js';
@@ -81,9 +81,9 @@ let IgcCarouselComponent = IgcCarouselComponent_1 = class IgcCarouselComponent e
     constructor() {
         super();
         this._carouselId = `igc-carousel-${IgcCarouselComponent_1.increment()}`;
-        this._carouselKeyboardInteractionFocus = addKeyboardFocusRing(this);
         this._hasKeyboardInteractionOnIndicators = false;
         this._hasMouseStop = false;
+        this._hasInnerFocus = false;
         this._context = new ContextProvider(this, {
             context: carouselContext,
             initialValue: this,
@@ -107,9 +107,14 @@ let IgcCarouselComponent = IgcCarouselComponent_1 = class IgcCarouselComponent e
         this._internals = this.attachInternals();
         this._internals.role = 'region';
         this._internals.ariaRoleDescription = 'carousel';
-        this.addEventListener('pointerdown', this.handlePointerDown);
         this.addEventListener('pointerenter', this.handlePointerEnter);
         this.addEventListener('pointerleave', this.handlePointerLeave);
+        this.addEventListener('pointerdown', () => {
+            this._hasInnerFocus = false;
+        });
+        this.addEventListener('keyup', () => {
+            this._hasInnerFocus = true;
+        });
         addGesturesController(this, {
             ref: this._carouselSlidesContainerRef,
             touchOnly: true,
@@ -152,27 +157,22 @@ let IgcCarouselComponent = IgcCarouselComponent_1 = class IgcCarouselComponent e
     handleIndicatorSlotChange() {
         this.requestUpdate();
     }
-    handlePointerDown() {
-        if (this._carouselKeyboardInteractionFocus.focused) {
-            this._carouselKeyboardInteractionFocus.reset();
-        }
-    }
     handlePointerEnter() {
         this._hasMouseStop = true;
-        if (this._carouselKeyboardInteractionFocus.focused) {
+        if (this._hasInnerFocus) {
             return;
         }
         this.handlePauseOnInteraction();
     }
     handlePointerLeave() {
         this._hasMouseStop = false;
-        if (this._carouselKeyboardInteractionFocus.focused) {
+        if (this._hasInnerFocus) {
             return;
         }
         this.handlePauseOnInteraction();
     }
     handleFocusIn() {
-        if (this._carouselKeyboardInteractionFocus.focused || this._hasMouseStop) {
+        if (this._hasInnerFocus || this._hasMouseStop) {
             return;
         }
         this.handlePauseOnInteraction();
@@ -182,8 +182,8 @@ let IgcCarouselComponent = IgcCarouselComponent_1 = class IgcCarouselComponent e
         if (this.contains(node) || this.renderRoot.contains(node)) {
             return;
         }
-        if (this._carouselKeyboardInteractionFocus.focused) {
-            this._carouselKeyboardInteractionFocus.reset();
+        if (this._hasInnerFocus) {
+            this._hasInnerFocus = false;
             if (!this._hasMouseStop) {
                 this.handlePauseOnInteraction();
             }
@@ -422,13 +422,17 @@ let IgcCarouselComponent = IgcCarouselComponent_1 = class IgcCarouselComponent e
         }
     }
     indicatorTemplate() {
-        const parts = partNameMap({
+        const parts = {
             indicators: true,
             start: this.indicatorsOrientation === 'start',
-        });
+        };
         return html `
       <igc-carousel-indicator-container>
-        <div ${ref(this._indicatorsContainerRef)} role="tablist" part=${parts}>
+        <div
+          ${ref(this._indicatorsContainerRef)}
+          role="tablist"
+          part=${partMap(parts)}
+        >
           <slot
             name="indicator"
             @slotchange=${this.handleIndicatorSlotChange}
@@ -443,14 +447,14 @@ let IgcCarouselComponent = IgcCarouselComponent_1 = class IgcCarouselComponent e
     `;
     }
     labelTemplate() {
-        const parts = partNameMap({
+        const parts = {
             label: true,
             indicators: true,
             start: this.indicatorsOrientation === 'start',
-        });
+        };
         const value = formatString(this.slidesLabelFormat, this.current + 1, this.total);
         return html `
-      <div part=${parts}>
+      <div part=${partMap(parts)}>
         <span>${value}</span>
       </div>
     `;