igniteui-webcomponents 5.0.2 → 5.1.0

package/components/carousel/animations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animations.js","sourceRoot":"","sources":["../../../src/components/carousel/animations.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;AAE9C,MAAM,UAAU,GAAG,CAAC,OAAiC,EAAE,EAAE,CACvD,SAAS,CACP,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC,EACnE,OAAO,CACR,CAAC;AAEJ,MAAM,WAAW,GAAG,CAAC,OAAiC,EAAE,EAAE,CACxD,SAAS,CACP,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,EAAE,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC,EACpE,OAAO,CACR,CAAC;AAEJ,MAAM,UAAU,GAAG,CAAC,OAAiC,EAAE,EAAE,CACvD,SAAS,CACP,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC,EACnE,OAAO,CACR,CAAC;AAEJ,MAAM,WAAW,GAAG,CAAC,OAAiC,EAAE,EAAE,CACxD,SAAS,CACP,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,EAAE,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC,EACpE,OAAO,CACR,CAAC;AAEJ,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,GAAG,CAC/B,MAAM,CAAC,OAAO,CAAC;IACb,IAAI,EAAE,IAAI,GAAG,CACX,MAAM,CAAC,OAAO,CAAC;QACb,EAAE,EAAE,MAAM;QACV,GAAG,EAAE,OAAO;KACb,CAAC,CACH;IACD,QAAQ,EAAE,IAAI,GAAG,CACf,MAAM,CAAC,OAAO,CAAC;QACb,EAAE,EAAE,UAAU;QACd,GAAG,EAAE,WAAW;KACjB,CAAC,CACH;IACD,QAAQ,EAAE,IAAI,GAAG,CACf,MAAM,CAAC,OAAO,CAAC;QACb,EAAE,EAAE,UAAU;QACd,GAAG,EAAE,WAAW;KACjB,CAAC,CACH;IACD,IAAI,EAAE,IAAI,GAAG,CACX,MAAM,CAAC,OAAO,CAAC;QACb,EAAE,EAAE,aAAa;QACjB,GAAG,EAAE,aAAa;KACnB,CAAC,CACH;CACF,CAAC,CACH,CAAC","sourcesContent":["import { fadeIn, fadeOut } from '../../animations/presets/fade/index.js';\nimport { animation } from '../../animations/types.js';\n\nconst noopAnimation = () => animation([], {});\n\nconst slideInHor = (options: KeyframeAnimationOptions) =>\n  animation(\n    [{ transform: 'translateX(100%)' }, { transform: 'translateX(0)' }],\n    options\n  );\n\nconst slideOutHor = (options: KeyframeAnimationOptions) =>\n  animation(\n    [{ transform: 'translateX(0)' }, { transform: 'translateX(-100%)' }],\n    options\n  );\n\nconst slideInVer = (options: KeyframeAnimationOptions) =>\n  animation(\n    [{ transform: 'translateY(100%)' }, { transform: 'translateY(0)' }],\n    options\n  );\n\nconst slideOutVer = (options: KeyframeAnimationOptions) =>\n  animation(\n    [{ transform: 'translateY(0)' }, { transform: 'translateY(-100%)' }],\n    options\n  );\n\nexport const animations = new Map(\n  Object.entries({\n    fade: new Map(\n      Object.entries({\n        in: fadeIn,\n        out: fadeOut,\n      })\n    ),\n    slideHor: new Map(\n      Object.entries({\n        in: slideInHor,\n        out: slideOutHor,\n      })\n    ),\n    slideVer: new Map(\n      Object.entries({\n        in: slideInVer,\n        out: slideOutVer,\n      })\n    ),\n    none: new Map(\n      Object.entries({\n        in: noopAnimation,\n        out: noopAnimation,\n      })\n    ),\n  })\n);\n"]}

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

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+/**
+ * @element igc-carousel-indicator-container
+ *
+ * @slot - Default slot for the carousel indicator container.
+ *
+ * @csspart base - The wrapping container of all carousel indicators.
+ */
+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;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-carousel-indicator-container': IgcCarouselIndicatorContainerComponent;
+    }
+}

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

@@ -0,0 +1,52 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var IgcCarouselIndicatorContainerComponent_1;
+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 IgcCarouselIndicatorComponent from './carousel-indicator.js';
+import { styles } from './themes/carousel-indicator-container.base.css.js';
+import { all } from './themes/indicator-container.js';
+import { styles as shared } from './themes/shared/indicator-container/indicator-container.common.css.js';
+let IgcCarouselIndicatorContainerComponent = IgcCarouselIndicatorContainerComponent_1 = class IgcCarouselIndicatorContainerComponent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._kbFocus = addKeyboardFocusRing(this);
+    }
+    static register() {
+        registerComponent(IgcCarouselIndicatorContainerComponent_1);
+    }
+    handleFocusOut(event) {
+        const target = event.relatedTarget;
+        if (!target?.matches(IgcCarouselIndicatorComponent.tagName)) {
+            this._kbFocus.reset();
+        }
+    }
+    render() {
+        return html `
+      <div
+        part=${partNameMap({
+            base: true,
+            focused: this._kbFocus.focused,
+        })}
+        @click=${this._kbFocus.reset}
+        @focusout=${this.handleFocusOut}
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+IgcCarouselIndicatorContainerComponent.tagName = 'igc-carousel-indicator-container';
+IgcCarouselIndicatorContainerComponent.styles = [styles, shared];
+IgcCarouselIndicatorContainerComponent = IgcCarouselIndicatorContainerComponent_1 = __decorate([
+    themes(all)
+], IgcCarouselIndicatorContainerComponent);
+export default IgcCarouselIndicatorContainerComponent;
+//# sourceMappingURL=carousel-indicator-container.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+/**
+ * Used when a custom indicator needs to be passed to the `igc-carousel` component.
+ *
+ * @element igc-carousel-indicator
+ *
+ * @slot - Default slot for projected inactive indicator.
+ * @slot active - Default slot for projected active indicator.
+ *
+ * @csspart indicator - The wrapping container of the carousel dot indicator.
+ * @csspart inactive - The wrapping container of the inactive dot indicator.
+ * @csspart active - The wrapping container of the active dot indicator.
+ */
+export default class IgcCarouselIndicatorComponent extends LitElement {
+    static readonly tagName = "igc-carousel-indicator";
+    static styles: import("lit").CSSResult;
+    static register(): void;
+    private _active;
+    private _internals;
+    private _carousel?;
+    protected get _labelFormat(): string;
+    set active(value: boolean);
+    get active(): boolean;
+    index: number;
+    constructor();
+    connectedCallback(): void;
+    protected willUpdate(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-carousel-indicator': IgcCarouselIndicatorComponent;
+    }
+}

package/components/carousel/carousel-indicator.js

@@ -0,0 +1,73 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { consume } from '@lit/context';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { registerComponent } from '../common/definitions/register.js';
+import { formatString } from '../common/util.js';
+import { carouselContext } from './context.js';
+import { styles } from './themes/carousel-indicator.base.css.js';
+class IgcCarouselIndicatorComponent extends LitElement {
+    static register() {
+        registerComponent(IgcCarouselIndicatorComponent);
+    }
+    get _labelFormat() {
+        return this._carousel ? this._carousel.indicatorsLabelFormat : '';
+    }
+    set active(value) {
+        this._active = Boolean(value);
+        this.tabIndex = this._active ? 0 : -1;
+        this._internals.ariaSelected = this._active.toString();
+    }
+    get active() {
+        return this._active;
+    }
+    constructor() {
+        super();
+        this._active = false;
+        this.index = 0;
+        this._internals = this.attachInternals();
+        this._internals.role = 'tab';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.role = 'tab';
+        this.slot = this.slot || 'indicator';
+    }
+    willUpdate() {
+        this._internals.ariaLabel = formatString(this._labelFormat, this.index + 1);
+    }
+    render() {
+        const forward = this.active ? 'visible' : 'hidden';
+        const backward = this.active ? 'hidden' : 'visible';
+        return html `
+      <div
+        part="indicator inactive"
+        style=${styleMap({ visibility: backward })}
+      >
+        <slot></slot>
+      </div>
+      <div part="indicator active" style=${styleMap({ visibility: forward })}>
+        <slot name="active"></slot>
+      </div>
+    `;
+    }
+}
+IgcCarouselIndicatorComponent.tagName = 'igc-carousel-indicator';
+IgcCarouselIndicatorComponent.styles = styles;
+export default IgcCarouselIndicatorComponent;
+__decorate([
+    consume({ context: carouselContext, subscribe: true })
+], IgcCarouselIndicatorComponent.prototype, "_carousel", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcCarouselIndicatorComponent.prototype, "active", null);
+__decorate([
+    property({ attribute: false })
+], IgcCarouselIndicatorComponent.prototype, "index", void 0);
+//# sourceMappingURL=carousel-indicator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-indicator.js","sourceRoot":"","sources":["../../../src/components/carousel/carousel-indicator.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,yCAAyC,CAAC;AAcjE,MAAqB,6BAA8B,SAAQ,UAAU;IAK5D,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,6BAA6B,CAAC,CAAC;IACnD,CAAC;IAQD,IAAc,YAAY;QACxB,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC;IACpE,CAAC;IAID,IAAW,MAAM,CAAC,KAAc;QAC9B,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACtC,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;IACzD,CAAC;IAED,IAAW,MAAM;QACf,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAMD;QACE,KAAK,EAAE,CAAC;QA3BF,YAAO,GAAG,KAAK,CAAC;QAwBjB,UAAK,GAAG,CAAC,CAAC;QAKf,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACzC,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC;IAC/B,CAAC;IAEe,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,WAAW,CAAC;IACvC,CAAC;IAEkB,UAAU;QAC3B,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;IAC9E,CAAC;IAEkB,MAAM;QACvB,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC;QACnD,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;QAEpD,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC;;;;2CAIP,QAAQ,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC;;;KAGvE,CAAC;IACJ,CAAC;;AAlEsB,qCAAO,GAAG,wBAAwB,AAA3B,CAA4B;AACnC,oCAAM,GAAG,MAAM,AAAT,CAAU;eAFpB,6BAA6B;AAaxC;IADP,OAAO,CAAC,EAAE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;gEACd;AAQzC;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;2DAK9B;AAQM;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;4DACd","sourcesContent":["import { consume } from '@lit/context';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { formatString } from '../common/util.js';\nimport type IgcCarouselComponent from './carousel.js';\nimport { carouselContext } from './context.js';\nimport { styles } from './themes/carousel-indicator.base.css.js';\n\n/**\n * Used when a custom indicator needs to be passed to the `igc-carousel` component.\n *\n * @element igc-carousel-indicator\n *\n * @slot - Default slot for projected inactive indicator.\n * @slot active - Default slot for projected active indicator.\n *\n * @csspart indicator - The wrapping container of the carousel dot indicator.\n * @csspart inactive - The wrapping container of the inactive dot indicator.\n * @csspart active - The wrapping container of the active dot indicator.\n */\nexport default class IgcCarouselIndicatorComponent extends LitElement {\n  public static readonly tagName = 'igc-carousel-indicator';\n  public static override styles = styles;\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcCarouselIndicatorComponent);\n  }\n\n  private _active = false;\n  private _internals: ElementInternals;\n\n  @consume({ context: carouselContext, subscribe: true })\n  private _carousel?: IgcCarouselComponent;\n\n  protected get _labelFormat() {\n    return this._carousel ? this._carousel.indicatorsLabelFormat : '';\n  }\n\n  /* blazorSuppress */\n  @property({ attribute: false })\n  public set active(value: boolean) {\n    this._active = Boolean(value);\n    this.tabIndex = this._active ? 0 : -1;\n    this._internals.ariaSelected = this._active.toString();\n  }\n\n  public get active(): boolean {\n    return this._active;\n  }\n\n  /* blazorSuppress */\n  @property({ attribute: false })\n  public index = 0;\n\n  constructor() {\n    super();\n\n    this._internals = this.attachInternals();\n    this._internals.role = 'tab';\n  }\n\n  public override connectedCallback() {\n    super.connectedCallback();\n    this.role = 'tab';\n    this.slot = this.slot || 'indicator';\n  }\n\n  protected override willUpdate(): void {\n    this._internals.ariaLabel = formatString(this._labelFormat, this.index + 1);\n  }\n\n  protected override render() {\n    const forward = this.active ? 'visible' : 'hidden';\n    const backward = this.active ? 'hidden' : 'visible';\n\n    return html`\n      <div\n        part=\"indicator inactive\"\n        style=${styleMap({ visibility: backward })}\n      >\n        <slot></slot>\n      </div>\n      <div part=\"indicator active\" style=${styleMap({ visibility: forward })}>\n        <slot name=\"active\"></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-carousel-indicator': IgcCarouselIndicatorComponent;\n  }\n}\n"]}

package/components/carousel/carousel-slide.d.ts

@@ -0,0 +1,40 @@
+import { LitElement } from 'lit';
+/**
+ * A single content container within a set of containers used in the context of an `igc-carousel`.
+ *
+ * @element igc-carousel-slide
+ *
+ * @slot Default slot for the carousel slide.
+ *
+ * @csspart base - The base wrapper of the carousel slide.
+ */
+export default class IgcCarouselSlideComponent extends LitElement {
+    static styles: import("lit").CSSResult;
+    static readonly tagName = "igc-carousel-slide";
+    static register(): void;
+    private static readonly increment;
+    private _internals;
+    private _slideRef;
+    private _animationPlayer;
+    private _carousel?;
+    protected get _index(): number;
+    protected get _total(): number;
+    protected get _animation(): "none" | "fade" | "slideVer" | "slideHor";
+    protected get _labelFormat(): string;
+    /**
+     * The current active slide for the carousel component.
+     * @attr
+     */
+    active: boolean;
+    previous: boolean;
+    toggleAnimation(type: 'in' | 'out', direction?: 'normal' | 'reverse'): Promise<boolean>;
+    constructor();
+    protected willUpdate(): void;
+    connectedCallback(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-carousel-slide': IgcCarouselSlideComponent;
+    }
+}

package/components/carousel/carousel-slide.js

@@ -0,0 +1,95 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { consume } from '@lit/context';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { EaseInOut } from '../../animations/easings.js';
+import { addAnimationController } from '../../animations/player.js';
+import { registerComponent } from '../common/definitions/register.js';
+import { createCounter, formatString, partNameMap } from '../common/util.js';
+import { animations } from './animations.js';
+import { carouselContext } from './context.js';
+import { styles } from './themes/carousel-slide.base.css.js';
+class IgcCarouselSlideComponent extends LitElement {
+    static register() {
+        registerComponent(IgcCarouselSlideComponent);
+    }
+    get _index() {
+        return this._carousel ? this._carousel.slides.indexOf(this) : 0;
+    }
+    get _total() {
+        return this._carousel ? this._carousel.slides.length : 0;
+    }
+    get _animation() {
+        const animation = this._carousel?.animationType ?? 'slide';
+        if (animation === 'slide') {
+            return this._carousel?.vertical ? 'slideVer' : 'slideHor';
+        }
+        return animation;
+    }
+    get _labelFormat() {
+        return this._carousel ? this._carousel.slidesLabelFormat : '';
+    }
+    async toggleAnimation(type, direction = 'normal') {
+        const animation = animations.get(this._animation).get(type);
+        const options = {
+            duration: 320,
+            easing: EaseInOut.Quad,
+            direction,
+        };
+        const [_, event] = await Promise.all([
+            this._animationPlayer.stopAll(),
+            this._animationPlayer.play(animation(options)),
+        ]);
+        return event.type === 'finish';
+    }
+    constructor() {
+        super();
+        this._slideRef = createRef();
+        this._animationPlayer = addAnimationController(this, this._slideRef);
+        this.active = false;
+        this.previous = false;
+        this._internals = this.attachInternals();
+        this._internals.role = 'tabpanel';
+        this._internals.ariaRoleDescription = 'slide';
+    }
+    willUpdate() {
+        this._internals.ariaLabel = formatString(this._labelFormat, this._index + 1, this._total);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.id =
+            this.id || `igc-carousel-slide-${IgcCarouselSlideComponent.increment()}`;
+    }
+    render() {
+        const parts = partNameMap({
+            base: true,
+            current: this.active,
+            previous: this.previous,
+        });
+        return html `
+      <div ${ref(this._slideRef)} part=${parts}>
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+IgcCarouselSlideComponent.styles = styles;
+IgcCarouselSlideComponent.tagName = 'igc-carousel-slide';
+IgcCarouselSlideComponent.increment = createCounter();
+export default IgcCarouselSlideComponent;
+__decorate([
+    consume({ context: carouselContext, subscribe: true })
+], IgcCarouselSlideComponent.prototype, "_carousel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IgcCarouselSlideComponent.prototype, "active", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcCarouselSlideComponent.prototype, "previous", void 0);
+//# sourceMappingURL=carousel-slide.js.map

package/components/carousel/carousel-slide.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-slide.js","sourceRoot":"","sources":["../../../src/components/carousel/carousel-slide.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { type Ref, createRef, ref } from 'lit/directives/ref.js';\nimport { EaseInOut } from '../../animations/easings.js';\nimport { addAnimationController } from '../../animations/player.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { createCounter, formatString, partNameMap } from '../common/util.js';\nimport { animations } from './animations.js';\nimport type IgcCarouselComponent from './carousel.js';\nimport { carouselContext } from './context.js';\nimport { styles } from './themes/carousel-slide.base.css.js';\n\n/**\n * A single content container within a set of containers used in the context of an `igc-carousel`.\n *\n * @element igc-carousel-slide\n *\n * @slot Default slot for the carousel slide.\n *\n * @csspart base - The base wrapper of the carousel slide.\n */\n\nexport default class IgcCarouselSlideComponent extends LitElement {\n  public static override styles = styles;\n  public static readonly tagName = 'igc-carousel-slide';\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcCarouselSlideComponent);\n  }\n\n  private static readonly increment = createCounter();\n\n  private _internals: ElementInternals;\n  private _slideRef: Ref<HTMLElement> = createRef();\n  private _animationPlayer = addAnimationController(this, this._slideRef);\n\n  @consume({ context: carouselContext, subscribe: true })\n  private _carousel?: IgcCarouselComponent;\n\n  protected get _index() {\n    return this._carousel ? this._carousel.slides.indexOf(this) : 0;\n  }\n\n  protected get _total() {\n    return this._carousel ? this._carousel.slides.length : 0;\n  }\n\n  protected get _animation() {\n    const animation = this._carousel?.animationType ?? 'slide';\n\n    if (animation === 'slide') {\n      return this._carousel?.vertical ? 'slideVer' : 'slideHor';\n    }\n\n    return animation;\n  }\n\n  protected get _labelFormat() {\n    return this._carousel ? this._carousel.slidesLabelFormat : '';\n  }\n\n  /**\n   * The current active slide for the carousel component.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public active = false;\n\n  /* blazorSuppress */\n  @property({ attribute: false })\n  public previous = false;\n\n  public async toggleAnimation(\n    type: 'in' | 'out',\n    direction: 'normal' | 'reverse' = 'normal'\n  ) {\n    const animation = animations.get(this._animation)!.get(type)!;\n\n    const options: KeyframeAnimationOptions = {\n      duration: 320,\n      easing: EaseInOut.Quad,\n      direction,\n    };\n\n    const [_, event] = await Promise.all([\n      this._animationPlayer.stopAll(),\n      this._animationPlayer.play(animation(options)),\n    ]);\n\n    return event.type === 'finish';\n  }\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n\n    this._internals.role = 'tabpanel';\n    this._internals.ariaRoleDescription = 'slide';\n  }\n\n  protected override willUpdate(): void {\n    this._internals.ariaLabel = formatString(\n      this._labelFormat,\n      this._index + 1,\n      this._total\n    );\n  }\n\n  public override connectedCallback(): void {\n    super.connectedCallback();\n\n    this.id =\n      this.id || `igc-carousel-slide-${IgcCarouselSlideComponent.increment()}`;\n  }\n\n  protected override render() {\n    const parts = partNameMap({\n      base: true,\n      current: this.active,\n      previous: this.previous,\n    });\n\n    return html`\n      <div ${ref(this._slideRef)} part=${parts}>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-carousel-slide': IgcCarouselSlideComponent;\n  }\n}\n"]}

package/components/carousel/carousel.d.ts

@@ -0,0 +1,195 @@
+import { LitElement } from 'lit';
+import type { Constructor } from '../common/mixins/constructor.js';
+import IgcCarouselSlideComponent from './carousel-slide.js';
+export interface IgcCarouselComponentEventMap {
+    igcSlideChanged: CustomEvent<void>;
+    igcPlaying: CustomEvent<void>;
+    igcPaused: CustomEvent<void>;
+}
+declare const IgcCarouselComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcCarouselComponentEventMap>> & Constructor<LitElement>;
+/**
+ * The `igc-carousel` presents a set of `igc-carousel-slide`s by sequentially displaying a subset of one or more slides.
+ *
+ * @element igc-carousel
+ *
+ * @slot Default slot for the carousel. Any projected `igc-carousel-slide` components should be projected here.
+ * @slot previous-button - Renders content inside the previous button.
+ * @slot next-button - Renders content inside the next button.
+ *
+ * @fires igcSlideChanged - Emitted when the current active slide is changed either by user interaction or by the interval callback.
+ * @fires igcPlaying - Emitted when the carousel enters playing state by a user interaction.
+ * @fires igcPaused - Emitted when the carousel enters paused state by a user interaction.
+ *
+ * @csspart navigation - The wrapper container of each carousel navigation button.
+ * @csspart previous - The wrapper container of the carousel previous navigation button.
+ * @csspart next - The wrapper container of the carousel next navigation button.
+ * @csspart dot - The carousel dot indicator container.
+ * @csspart active - The carousel active dot indicator container.
+ * @csspart label - The label container of the carousel indicators.
+ * @csspart start - The wrapping container of all carousel indicators when indicators-orientation is set to start.
+ */
+export default class IgcCarouselComponent extends IgcCarouselComponent_base {
+    static styles: import("lit").CSSResult[];
+    static readonly tagName = "igc-carousel";
+    static register(): void;
+    private static readonly increment;
+    private _carouselId;
+    private _carouselKeyboardInteractionFocus;
+    private _internals;
+    private _lastInterval;
+    private _hasKeyboardInteractionOnIndicators;
+    private _hasMouseStop;
+    private _context;
+    private _carouselSlidesContainerRef;
+    private _indicatorsContainerRef;
+    private _prevButtonRef;
+    private _nextButtonRef;
+    private get hasProjectedIndicators();
+    private get showIndicatorsLabel();
+    private get nextIndex();
+    private get prevIndex();
+    private _defaultIndicators;
+    private _projectedIndicators;
+    private _activeSlide;
+    private _playing;
+    private _paused;
+    private _observerCallback;
+    /**
+     * Whether the carousel should skip rotating to the first slide after it reaches the last.
+     * @attr disable-loop
+     */
+    disableLoop: boolean;
+    /**
+     * Whether the carousel should ignore use interactions and not pause on them.
+     * @attr disable-pause-on-interaction
+     */
+    disablePauseOnInteraction: boolean;
+    /**
+     * Whether the carousel should skip rendering of the default navigation buttons.
+     * @attr hide-navigation
+     */
+    hideNavigation: boolean;
+    /**
+     * Whether the carousel should render the indicator controls (dots).
+     * @attr hide-indicators
+     */
+    hideIndicators: boolean;
+    /**
+     * Whether the carousel has vertical alignment.
+     * @attr vertical
+     */
+    vertical: boolean;
+    /**
+     * Sets the orientation of the indicator controls (dots).
+     * @attr indicators-orientation
+     */
+    indicatorsOrientation: 'start' | 'end';
+    /**
+     * The format used to set the aria-label on the carousel indicators.
+     * Instances of '{0}' will be replaced with the index of the corresponding slide.
+     *
+     * @attr indicators-label-format
+     */
+    indicatorsLabelFormat: string;
+    /**
+     * The format used to set the aria-label on the carousel slides and the text displayed
+     * when the number of indicators is greater than tha maximum indicator count.
+     * Instances of '{0}' will be replaced with the index of the corresponding slide.
+     * Instances of '{1}' will be replaced with the total amount of slides.
+     *
+     * @attr slides-label-format
+     */
+    slidesLabelFormat: string;
+    /**
+     * The duration in milliseconds between changing the active slide.
+     * @attr interval
+     */
+    interval: number;
+    /**
+     * Controls the maximum indicator controls (dots) that can be shown. Default value is `10`.
+     * @attr maximum-indicators-count
+     */
+    maximumIndicatorsCount: number;
+    /**
+     * The animation type.
+     * @attr animation-type
+     */
+    animationType: 'slide' | 'fade' | 'none';
+    /**
+     * The slides of the carousel.
+     */
+    slides: Array<IgcCarouselSlideComponent>;
+    /**
+     * The total number of slides.
+     */
+    get total(): number;
+    /**
+     * The index of the current active slide.
+     */
+    get current(): number;
+    /**
+     * Whether the carousel is in playing state.
+     */
+    get isPlaying(): boolean;
+    /**
+     * Whether the carousel in in paused state.
+     */
+    get isPaused(): boolean;
+    protected contextChanged(): void;
+    protected intervalChange(): void;
+    constructor();
+    private handleSlotChange;
+    private handleIndicatorSlotChange;
+    private handlePointerDown;
+    private handlePointerEnter;
+    private handlePointerLeave;
+    private handleFocusIn;
+    private handleFocusOut;
+    private handlePauseOnInteraction;
+    private handleArrowLeft;
+    private handleArrowRight;
+    private handleHomeKey;
+    private handleEndKey;
+    private handleVerticalSwipe;
+    private handleHorizontalSwipe;
+    private handleIndicatorClick;
+    private handleNavigationInteractionNext;
+    private handleNavigationInteractionPrevious;
+    private handleInteraction;
+    private activateSlide;
+    private updateProjectedIndicators;
+    private resetInterval;
+    private restartInterval;
+    private animateSlides;
+    /**
+     * Resumes playing of the carousel slides.
+     */
+    play(): void;
+    /**
+     * Pauses the carousel rotation of slides.
+     */
+    pause(): void;
+    /**
+     * Switches to the next slide running any animations and returns if the operation was a success.
+     */
+    next(): Promise<boolean>;
+    /**
+     * Switches to the previous slide running any animations and returns if the operation was a success.
+     */
+    prev(): Promise<boolean>;
+    /**
+     * Switches the passed in slide running any animations and returns if the operation was a success.
+     */
+    select(slide: IgcCarouselSlideComponent, direction?: 'next' | 'prev'): Promise<boolean>;
+    private navigationTemplate;
+    protected renderIndicators(): Generator<import("lit-html").TemplateResult<1>, void, unknown>;
+    private indicatorTemplate;
+    private labelTemplate;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-carousel': IgcCarouselComponent;
+    }
+}
+export {};