igniteui-webcomponents 4.0.0 → 4.1.0

package/components/snackbar/themes/light/snackbar.fluent.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"snackbar.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/snackbar/themes/light/snackbar.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;EAwBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */\n[part~=base] {\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.125rem), 0.125rem);\n}\n\n[part~=message] {\n  font-family: var(--ig-caption-font-family);\n  font-size: var(--ig-caption-font-size);\n  font-weight: var(--ig-caption-font-weight);\n  font-style: var(--ig-caption-font-style);\n  line-height: var(--ig-caption-line-height);\n  letter-spacing: var(--ig-caption-letter-spacing);\n  text-transform: var(--ig-caption-text-transform);\n  margin-top: var(--ig-caption-margin-top);\n  margin-bottom: var(--ig-caption-margin-bottom);\n}\n\nigc-button::part(base),\nigc-button::part(base):hover {\n  color: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n}\n\nigc-button::part(base):focus-visible::after {\n  display: none;\n}`;\n"]}
+{"version":3,"file":"snackbar.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/snackbar/themes/light/snackbar.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;EAwBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n[part~=base] {\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.125rem), 0.125rem);\n}\n\n[part~=message] {\n  font-family: var(--ig-caption-font-family);\n  font-size: var(--ig-caption-font-size);\n  font-weight: var(--ig-caption-font-weight);\n  font-style: var(--ig-caption-font-style);\n  line-height: var(--ig-caption-line-height);\n  letter-spacing: var(--ig-caption-letter-spacing);\n  text-transform: var(--ig-caption-text-transform);\n  margin-top: var(--ig-caption-margin-top);\n  margin-bottom: var(--ig-caption-margin-bottom);\n}\n\nigc-button::part(base),\nigc-button::part(base):hover {\n  color: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n}\n\nigc-button::part(base):focus-visible::after {\n  display: none;\n}`;\n"]}

package/components/snackbar/themes/light/snackbar.indigo.css.js

@@ -1,5 +1,5 @@
 import { css } from 'lit';
-export const styles = css `/* stylelint-disable max-line-length */
+export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
 [part~=base] {
   border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.375rem), 0.375rem);
   background: var(--background-color, hsla(var(--ig-gray-700), 0.9));

package/components/snackbar/themes/light/snackbar.indigo.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"snackbar.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/snackbar/themes/light/snackbar.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;EAUvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */\n[part~=base] {\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.375rem), 0.375rem);\n  background: var(--background-color, hsla(var(--ig-gray-700), 0.9));\n  color: var(--text-color, var(--ig-gray-700-contrast));\n}\n\nigc-button::part(base),\nigc-button::part(base):hover {\n  color: var(--text-color, var(--ig-gray-700-contrast));\n}`;\n"]}
+{"version":3,"file":"snackbar.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/snackbar/themes/light/snackbar.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;EAUvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n[part~=base] {\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.375rem), 0.375rem);\n  background: var(--background-color, hsla(var(--ig-gray-700), 0.9));\n  color: var(--text-color, var(--ig-gray-700-contrast));\n}\n\nigc-button::part(base),\nigc-button::part(base):hover {\n  color: var(--text-color, var(--ig-gray-700-contrast));\n}`;\n"]}

package/components/stepper/step.d.ts

@@ -0,0 +1,94 @@
+import { LitElement, nothing } from 'lit';
+/**
+ * The step component is used within the `igc-stepper` element and it holds the content of each step.
+ * It also supports custom indicators, title and subtitle.
+ *
+ * @element igc-step
+ *
+ * @slot - Renders the content of the step.
+ * @slot indicator - Renders the indicator of the step. By default, it displays the step index + 1.
+ * @slot title - Renders the title of the step.
+ * @slot subtitle - Renders the subtitle of the step.
+ *
+ * @csspart header-container - Wrapper of the step's `header` and its separators.
+ * @csspart disabled - Indicates a disabled state. Applies to `header-container`.
+ * @csspart complete-start - Indicates a complete state of the current step. Applies to `header-container`.
+ * @csspart complete-end - Indicates a complete state of the previous step. Applies to `header-container`.
+ * @csspart optional - Indicates an optional state. Applies to `header-container`.
+ * @csspart invalid - Indicates an invalid state. Applies to `header-container`.
+ * @csspart top - Indicates that the title should be above the indicator. Applies to `header-container`.
+ * @csspart bottom - Indicates that the title should be below the indicator. Applies to `header-container`.
+ * @csspart start - Indicates that the title should be before the indicator. Applies to `header-container`.
+ * @csspart end - Indicates that the title should be after the indicator. Applies to `header-container`.
+ * @csspart header - Wrapper of the step's `indicator` and `text`.
+ * @csspart indicator - The indicator of the step.
+ * @csspart text - Wrapper of the step's `title` and `subtitle`.
+ * @csspart empty - Indicates that no title and subtitle has been provided to the step. Applies to `text`.
+ * @csspart title - The title of the step.
+ * @csspart subtitle - The subtitle of the step.
+ * @csspart body - Wrapper of the step's `content`.
+ * @csspart content - The steps `content`.
+ */
+export default class IgcStepComponent extends LitElement {
+    /** @private */
+    static readonly tagName = "igc-step";
+    /** @private */
+    static styles: import("lit").CSSResult;
+    private _titleChildren;
+    private _subTitleChildren;
+    header: HTMLElement;
+    contentBody: HTMLElement;
+    /** Gets/sets whether the step is invalid. */
+    invalid: boolean;
+    /** Gets/sets whether the step is activе. */
+    active: boolean;
+    /**
+     * Gets/sets whether the step is optional.
+     *
+     * @remarks
+     * Optional steps validity does not affect the default behavior when the stepper is in linear mode i.e.
+     * if optional step is invalid the user could still move to the next step.
+     */
+    optional: boolean;
+    /** Gets/sets whether the step is interactable. */
+    disabled: boolean;
+    /** Gets/sets whether the step is completed.
+     *
+     * @remarks
+     * When set to `true` the following separator is styled `solid`.
+     */
+    complete: boolean;
+    /** @private */
+    previousComplete: boolean;
+    /** @private */
+    stepType: 'indicator' | 'title' | 'full';
+    /** @private */
+    titlePosition?: 'bottom' | 'top' | 'end' | 'start';
+    /** @private */
+    orientation: 'horizontal' | 'vertical';
+    /** @private */
+    index: number;
+    /** @private */
+    contentTop: boolean;
+    /** @private */
+    linearDisabled: boolean;
+    /** @private */
+    visited: boolean;
+    protected activeChange(): void;
+    protected disabledInvalidOptionalChange(): void;
+    protected completeChange(): void;
+    private handleClick;
+    private handleKeydown;
+    get isAccessible(): boolean;
+    private get headerContainerParts();
+    private get textParts();
+    protected renderIndicator(): import("lit-html").TemplateResult<1> | typeof nothing;
+    protected renderTitleAndSubtitle(): import("lit-html").TemplateResult<1>;
+    protected renderContent(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-step': IgcStepComponent;
+    }
+}

package/components/stepper/step.js

@@ -0,0 +1,211 @@
+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 { html, LitElement, nothing } from 'lit';
+import { property, query, queryAssignedElements } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import { watch } from '../common/decorators/watch.js';
+import { partNameMap } from '../common/util.js';
+import { themes } from '../../theming/theming-decorator.js';
+import { styles } from './themes/step/light/step.base.css.js';
+import { styles as bootstrap } from './themes/step/light/step.bootstrap.css.js';
+import { styles as indigo } from './themes/step/light/step.indigo.css.js';
+import { styles as fluent } from './themes/step/light/step.fluent.css.js';
+import { styles as material } from './themes/step/light/step.material.css.js';
+let IgcStepComponent = class IgcStepComponent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.invalid = false;
+        this.active = false;
+        this.optional = false;
+        this.disabled = false;
+        this.complete = false;
+        this.previousComplete = false;
+        this.stepType = 'full';
+        this.orientation = 'horizontal';
+        this.index = -1;
+        this.contentTop = false;
+        this.linearDisabled = false;
+        this.visited = false;
+    }
+    activeChange() {
+        if (this.active) {
+            this.dispatchEvent(new CustomEvent('stepActiveChanged', { bubbles: true, detail: false }));
+        }
+    }
+    disabledInvalidOptionalChange() {
+        this.dispatchEvent(new CustomEvent('stepDisabledInvalidChanged', { bubbles: true }));
+    }
+    completeChange() {
+        this.dispatchEvent(new CustomEvent('stepCompleteChanged', { bubbles: true }));
+    }
+    handleClick(event) {
+        event.stopPropagation();
+        if (this.isAccessible) {
+            this.dispatchEvent(new CustomEvent('stepActiveChanged', { bubbles: true, detail: true }));
+        }
+    }
+    handleKeydown(event) {
+        this.dispatchEvent(new CustomEvent('stepHeaderKeydown', {
+            bubbles: true,
+            detail: { event, focusedStep: this },
+        }));
+    }
+    get isAccessible() {
+        return !this.disabled && !this.linearDisabled;
+    }
+    get headerContainerParts() {
+        return {
+            'header-container': true,
+            disabled: !this.isAccessible,
+            'complete-start': this.complete,
+            'complete-end': this.previousComplete,
+            optional: this.optional,
+            invalid: this.invalid && this.visited && !this.active && this.isAccessible,
+            top: this.titlePosition === 'top',
+            bottom: this.titlePosition === 'bottom' ||
+                (this.orientation === 'horizontal' && !this.titlePosition),
+            start: this.titlePosition === 'start',
+            end: this.titlePosition === 'end' ||
+                (this.orientation === 'vertical' && !this.titlePosition),
+        };
+    }
+    get textParts() {
+        return {
+            text: true,
+            empty: this.stepType === 'indicator'
+                ? true
+                : this.stepType === 'full' &&
+                    !this._titleChildren.length &&
+                    !this._subTitleChildren.length,
+        };
+    }
+    renderIndicator() {
+        if (this.stepType !== 'title') {
+            return html `
+        <div part="indicator">
+          <slot name="indicator">
+            <span>${this.index + 1}</span>
+          </slot>
+        </div>
+      `;
+        }
+        else {
+            return nothing;
+        }
+    }
+    renderTitleAndSubtitle() {
+        return html `
+      <div part="${partNameMap(this.textParts)}">
+        <div part="title">
+          <slot name="title"></slot>
+        </div>
+        <div part="subtitle">
+          <slot name="subtitle"></slot>
+        </div>
+      </div>
+    `;
+    }
+    renderContent() {
+        return html `<div
+      id="igc-step-content-${this.index}"
+      part="body"
+      role="tabpanel"
+      aria-labelledby="igc-step-header-${this.index}"
+    >
+      <div part="content">
+        <slot></slot>
+      </div>
+    </div>`;
+    }
+    render() {
+        return html `
+      ${when(this.contentTop && this.orientation === 'horizontal', () => this.renderContent(), () => nothing)}
+      <div part="${partNameMap(this.headerContainerParts)}">
+        <div
+          part="header"
+          tabindex="${this.active ? '0' : '-1'}"
+          role="tab"
+          aria-selected="${this.active}"
+          @click=${this.handleClick}
+          @keydown=${this.handleKeydown}
+        >
+          ${this.renderIndicator()} ${this.renderTitleAndSubtitle()}
+        </div>
+      </div>
+      ${when(this.orientation === 'vertical' || !this.contentTop, () => this.renderContent(), () => nothing)}
+    `;
+    }
+};
+IgcStepComponent.tagName = 'igc-step';
+IgcStepComponent.styles = styles;
+__decorate([
+    queryAssignedElements({ slot: 'title' })
+], IgcStepComponent.prototype, "_titleChildren", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'subtitle' })
+], IgcStepComponent.prototype, "_subTitleChildren", void 0);
+__decorate([
+    query('[part~="header"]')
+], IgcStepComponent.prototype, "header", void 0);
+__decorate([
+    query('[part~="body"]')
+], IgcStepComponent.prototype, "contentBody", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], IgcStepComponent.prototype, "invalid", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], IgcStepComponent.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean })
+], IgcStepComponent.prototype, "optional", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], IgcStepComponent.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], IgcStepComponent.prototype, "complete", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcStepComponent.prototype, "previousComplete", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcStepComponent.prototype, "stepType", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcStepComponent.prototype, "titlePosition", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcStepComponent.prototype, "orientation", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcStepComponent.prototype, "index", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcStepComponent.prototype, "contentTop", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcStepComponent.prototype, "linearDisabled", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcStepComponent.prototype, "visited", void 0);
+__decorate([
+    watch('active', { waitUntilFirstUpdate: true })
+], IgcStepComponent.prototype, "activeChange", null);
+__decorate([
+    watch('disabled', { waitUntilFirstUpdate: true }),
+    watch('invalid', { waitUntilFirstUpdate: true }),
+    watch('optional', { waitUntilFirstUpdate: true })
+], IgcStepComponent.prototype, "disabledInvalidOptionalChange", null);
+__decorate([
+    watch('complete', { waitUntilFirstUpdate: true })
+], IgcStepComponent.prototype, "completeChange", null);
+IgcStepComponent = __decorate([
+    themes({ bootstrap, indigo, fluent, material })
+], IgcStepComponent);
+export default IgcStepComponent;
+//# sourceMappingURL=step.js.map

package/components/stepper/step.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"step.js","sourceRoot":"","sources":["../../../src/components/stepper/step.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\nimport { when } from 'lit/directives/when.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { partNameMap } from '../common/util.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles } from './themes/step/light/step.base.css.js';\nimport { styles as bootstrap } from './themes/step/light/step.bootstrap.css.js';\nimport { styles as indigo } from './themes/step/light/step.indigo.css.js';\nimport { styles as fluent } from './themes/step/light/step.fluent.css.js';\nimport { styles as material } from './themes/step/light/step.material.css.js';\n\n/**\n * The step component is used within the `igc-stepper` element and it holds the content of each step.\n * It also supports custom indicators, title and subtitle.\n *\n * @element igc-step\n *\n * @slot - Renders the content of the step.\n * @slot indicator - Renders the indicator of the step. By default, it displays the step index + 1.\n * @slot title - Renders the title of the step.\n * @slot subtitle - Renders the subtitle of the step.\n *\n * @csspart header-container - Wrapper of the step's `header` and its separators.\n * @csspart disabled - Indicates a disabled state. Applies to `header-container`.\n * @csspart complete-start - Indicates a complete state of the current step. Applies to `header-container`.\n * @csspart complete-end - Indicates a complete state of the previous step. Applies to `header-container`.\n * @csspart optional - Indicates an optional state. Applies to `header-container`.\n * @csspart invalid - Indicates an invalid state. Applies to `header-container`.\n * @csspart top - Indicates that the title should be above the indicator. Applies to `header-container`.\n * @csspart bottom - Indicates that the title should be below the indicator. Applies to `header-container`.\n * @csspart start - Indicates that the title should be before the indicator. Applies to `header-container`.\n * @csspart end - Indicates that the title should be after the indicator. Applies to `header-container`.\n * @csspart header - Wrapper of the step's `indicator` and `text`.\n * @csspart indicator - The indicator of the step.\n * @csspart text - Wrapper of the step's `title` and `subtitle`.\n * @csspart empty - Indicates that no title and subtitle has been provided to the step. Applies to `text`.\n * @csspart title - The title of the step.\n * @csspart subtitle - The subtitle of the step.\n * @csspart body - Wrapper of the step's `content`.\n * @csspart content - The steps `content`.\n */\n@themes({ bootstrap, indigo, fluent, material })\nexport default class IgcStepComponent extends LitElement {\n  /** @private */\n  public static readonly tagName = 'igc-step';\n  /** @private */\n  public static override styles = styles;\n\n  @queryAssignedElements({ slot: 'title' })\n  private _titleChildren!: Array<HTMLElement>;\n\n  @queryAssignedElements({ slot: 'subtitle' })\n  private _subTitleChildren!: Array<HTMLElement>;\n\n  @query('[part~=\"header\"]')\n  public header!: HTMLElement;\n\n  @query('[part~=\"body\"]')\n  public contentBody!: HTMLElement;\n\n  /** Gets/sets whether the step is invalid. */\n  @property({ reflect: true, type: Boolean })\n  public invalid = false;\n\n  /** Gets/sets whether the step is activе. */\n  @property({ reflect: true, type: Boolean })\n  public active = false;\n\n  /**\n   * Gets/sets whether the step is optional.\n   *\n   * @remarks\n   * Optional steps validity does not affect the default behavior when the stepper is in linear mode i.e.\n   * if optional step is invalid the user could still move to the next step.\n   */\n  @property({ type: Boolean })\n  public optional = false;\n\n  /** Gets/sets whether the step is interactable. */\n  @property({ reflect: true, type: Boolean })\n  public disabled = false;\n\n  /** Gets/sets whether the step is completed.\n   *\n   * @remarks\n   * When set to `true` the following separator is styled `solid`.\n   */\n  @property({ reflect: true, type: Boolean })\n  public complete = false;\n\n  /** @private */\n  @property({ attribute: false })\n  public previousComplete = false;\n\n  /** @private */\n  @property({ attribute: false })\n  public stepType: 'indicator' | 'title' | 'full' = 'full';\n\n  /** @private */\n  @property({ attribute: false })\n  public titlePosition?: 'bottom' | 'top' | 'end' | 'start';\n\n  /** @private */\n  @property({ attribute: false })\n  public orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** @private */\n  @property({ attribute: false })\n  public index = -1;\n\n  /** @private */\n  @property({ attribute: false })\n  public contentTop = false;\n\n  /** @private */\n  @property({ attribute: false })\n  public linearDisabled = false;\n\n  /** @private */\n  @property({ attribute: false })\n  public visited = false;\n\n  @watch('active', { waitUntilFirstUpdate: true })\n  protected activeChange() {\n    if (this.active) {\n      this.dispatchEvent(\n        new CustomEvent('stepActiveChanged', { bubbles: true, detail: false })\n      );\n    }\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  @watch('invalid', { waitUntilFirstUpdate: true })\n  @watch('optional', { waitUntilFirstUpdate: true })\n  protected disabledInvalidOptionalChange() {\n    this.dispatchEvent(\n      new CustomEvent('stepDisabledInvalidChanged', { bubbles: true })\n    );\n  }\n\n  @watch('complete', { waitUntilFirstUpdate: true })\n  protected completeChange() {\n    this.dispatchEvent(\n      new CustomEvent('stepCompleteChanged', { bubbles: true })\n    );\n  }\n\n  private handleClick(event: MouseEvent): void {\n    event.stopPropagation();\n    if (this.isAccessible) {\n      this.dispatchEvent(\n        new CustomEvent('stepActiveChanged', { bubbles: true, detail: true })\n      );\n    }\n  }\n\n  private handleKeydown(event: KeyboardEvent): void {\n    this.dispatchEvent(\n      new CustomEvent('stepHeaderKeydown', {\n        bubbles: true,\n        detail: { event, focusedStep: this },\n      })\n    );\n  }\n\n  public get isAccessible(): boolean {\n    return !this.disabled && !this.linearDisabled;\n  }\n\n  private get headerContainerParts() {\n    return {\n      'header-container': true,\n      disabled: !this.isAccessible,\n      'complete-start': this.complete,\n      'complete-end': this.previousComplete,\n      optional: this.optional,\n      invalid:\n        this.invalid && this.visited && !this.active && this.isAccessible,\n      top: this.titlePosition === 'top',\n      bottom:\n        this.titlePosition === 'bottom' ||\n        (this.orientation === 'horizontal' && !this.titlePosition),\n      start: this.titlePosition === 'start',\n      end:\n        this.titlePosition === 'end' ||\n        (this.orientation === 'vertical' && !this.titlePosition),\n    };\n  }\n\n  private get textParts() {\n    return {\n      text: true,\n      empty:\n        this.stepType === 'indicator'\n          ? true\n          : this.stepType === 'full' &&\n            !this._titleChildren.length &&\n            !this._subTitleChildren.length,\n    };\n  }\n\n  protected renderIndicator() {\n    if (this.stepType !== 'title') {\n      return html`\n        <div part=\"indicator\">\n          <slot name=\"indicator\">\n            <span>${this.index + 1}</span>\n          </slot>\n        </div>\n      `;\n    } else {\n      return nothing;\n    }\n  }\n\n  protected renderTitleAndSubtitle() {\n    return html`\n      <div part=\"${partNameMap(this.textParts)}\">\n        <div part=\"title\">\n          <slot name=\"title\"></slot>\n        </div>\n        <div part=\"subtitle\">\n          <slot name=\"subtitle\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  protected renderContent() {\n    return html`<div\n      id=\"igc-step-content-${this.index}\"\n      part=\"body\"\n      role=\"tabpanel\"\n      aria-labelledby=\"igc-step-header-${this.index}\"\n    >\n      <div part=\"content\">\n        <slot></slot>\n      </div>\n    </div>`;\n  }\n\n  protected override render() {\n    return html`\n      ${when(\n        this.contentTop && this.orientation === 'horizontal',\n        () => this.renderContent(),\n        () => nothing\n      )}\n      <div part=\"${partNameMap(this.headerContainerParts)}\">\n        <div\n          part=\"header\"\n          tabindex=\"${this.active ? '0' : '-1'}\"\n          role=\"tab\"\n          aria-selected=\"${this.active}\"\n          @click=${this.handleClick}\n          @keydown=${this.handleKeydown}\n        >\n          ${this.renderIndicator()} ${this.renderTitleAndSubtitle()}\n        </div>\n      </div>\n      ${when(\n        this.orientation === 'vertical' || !this.contentTop,\n        () => this.renderContent(),\n        () => nothing\n      )}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-step': IgcStepComponent;\n  }\n}\n"]}

package/components/stepper/stepper.common.d.ts

@@ -0,0 +1,11 @@
+export interface IgcActiveStepChangingArgs {
+    oldIndex: number;
+    newIndex: number;
+}
+export interface IgcActiveStepChangedArgs {
+    index: number;
+}
+export interface IgcStepperEventMap {
+    igcActiveStepChanging: CustomEvent<IgcActiveStepChangingArgs>;
+    igcActiveStepChanged: CustomEvent<IgcActiveStepChangedArgs>;
+}

package/components/stepper/stepper.common.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=stepper.common.js.map

package/components/stepper/stepper.common.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.common.js","sourceRoot":"","sources":["../../../src/components/stepper/stepper.common.ts"],"names":[],"mappings":"","sourcesContent":["export interface IgcActiveStepChangingArgs {\n  oldIndex: number;\n  newIndex: number;\n}\n\nexport interface IgcActiveStepChangedArgs {\n  index: number;\n}\n\nexport interface IgcStepperEventMap {\n  igcActiveStepChanging: CustomEvent<IgcActiveStepChangingArgs>;\n  igcActiveStepChanged: CustomEvent<IgcActiveStepChangedArgs>;\n}\n"]}

package/components/stepper/stepper.d.ts

@@ -0,0 +1,110 @@
+import { LitElement } from 'lit';
+import { Constructor } from '../common/mixins/constructor.js';
+import { IgcStepperEventMap } from './stepper.common.js';
+import IgcStepComponent from './step.js';
+import { Direction } from '../common/types.js';
+declare const IgcStepperComponent_base: Constructor<import("../common/mixins/sizable.js").SizableInterface> & import("../common/mixins/constructor.js").AbstractConstructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcStepperEventMap>> & Constructor<LitElement>;
+/**
+ * IgxStepper provides a wizard-like workflow by dividing content into logical steps.
+ *
+ * @remarks
+ * The stepper component allows the user to navigate between multiple steps.
+ * It supports horizontal and vertical orientation as well as keyboard navigation and provides API methods to control the active step.
+ *
+ * @element igc-stepper
+ *
+ * @slot - Renders the step components inside default slot.
+ *
+ * @fires igcActiveStepChanging - Emitted when the active step is about to change.
+ * @fires igcActiveStepChanged - Emitted when the active step is changed.
+ */
+export default class IgcStepperComponent extends IgcStepperComponent_base {
+    /** @private */
+    static readonly tagName = "igc-stepper";
+    /** @private */
+    protected static styles: import("lit").CSSResult;
+    private readonly keyDownHandlers;
+    private activeStep;
+    /** Returns all of the stepper's steps. */
+    steps: Array<IgcStepComponent>;
+    /** Gets/Sets the orientation of the stepper.
+     *
+     * @remarks
+     * Default value is `horizontal`.
+     */
+    orientation: 'horizontal' | 'vertical';
+    /** Get/Set the type of the steps.
+     *
+     * @remarks
+     * Default value is `full`.
+     */
+    stepType: 'indicator' | 'title' | 'full';
+    /**
+     * Get/Set whether the stepper is linear.
+     *
+     * @remarks
+     * If the stepper is in linear mode and if the active step is valid only then the user is able to move forward.
+     */
+    linear: boolean;
+    /**
+     * Get/Set whether the content is displayed above the steps.
+     *
+     * @remarks
+     * Default value is `false` and the content is below the steps.
+     */
+    contentTop: boolean;
+    /** The direction attribute of the control. */
+    dir: Direction;
+    /**
+     * Get/Set the position of the steps title.
+     *
+     * @remarks
+     * The default value is undefined.
+     * When the stepper is horizontally orientated the title is positioned below the indicator.
+     * When the stepper is horizontally orientated the title is positioned on the right side of the indicator.
+     */
+    titlePosition?: 'bottom' | 'top' | 'end' | 'start';
+    protected orientationChange(): void;
+    protected stepTypeChange(): void;
+    protected titlePositionChange(): void;
+    protected contentTopChange(): void;
+    protected linearChange(): void;
+    constructor();
+    connectedCallback(): void;
+    private activateFirstStep;
+    private activateStep;
+    private changeActiveStep;
+    private moveToNextStep;
+    private handleKeydown;
+    private onHomeKey;
+    private onEndKey;
+    private onArrowDownKeyDown;
+    private onArrowUpKeyDown;
+    private onArrowRightKeyDown;
+    private onArrowLeftKeyDown;
+    private getNextStep;
+    private getPreviousStep;
+    private updateStepsLinearDisabled;
+    private syncProperties;
+    private stepsChanged;
+    /** Activates the step at a given index. */
+    navigateTo(index: number): void;
+    /** Activates the next enabled step. */
+    next(): void;
+    /** Activates the previous enabled step. */
+    prev(): void;
+    /**
+     * Resets the stepper to its initial state i.e. activates the first step.
+     *
+     * @remarks
+     * The steps' content will not be automatically reset.
+     */
+    reset(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-stepper': IgcStepperComponent;
+    }
+}
+export {};