{"version":3,"file":"step-indicator-item.iI4KZXqg.js","sources":["../../../../../packages/web-components/src/lib/components/step-indicator-item/step-indicator-item.ts"],"sourcesContent":["import { html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { pdsCustomElement as customElement } from '../../decorators/pds-custom-element';\nimport { PdsElement } from '../PdsElement';\nimport styles from './step-indicator-item.scss?inline';\nimport '@principal/design-system-icons-web/check';\nimport { requiredSlot } from '../../decorators/requiredSlot';\n\n/**\n * @summary A step indicator item\n *\n * @slot default Required: The text of the step\n *\n * @fires pds-step-indicator-item-click a custom event dispatched on click\n */\n@customElement('pds-step-indicator-item', {\n  category: 'component',\n  type: 'component',\n  state: 'stable',\n  styles,\n})\nexport class PdsStepIndicatorItem extends PdsElement {\n  connectedCallback() {\n    super.connectedCallback();\n    this.initLocalization();\n  }\n\n  /**\n   * status\n   * - **complete** renders the step-indicator-item as a completed step\n   * - **current** renders the step-indicator-item as the current step\n   * - **incomplete** renders the step-indicator-item as an incomplete step\n   */\n  @property({ reflect: true })\n  status: 'completed' | 'current' | 'incomplete' = 'incomplete';\n\n  /**\n   * href\n   */\n  @property({ reflect: true })\n  href: string;\n\n  /**\n   * active\n   * This indicates the user is viewing this step\n   */\n  @property({ type: Boolean })\n  active: boolean = false;\n\n  /**\n   * variant\n   * - **default** renders the step-indicator-item with the default styling\n   * - **inverted** renders the step-indicator-item with the inverted styling\n   */\n  @property({ type: String })\n  variant: 'default' | 'inverted' = 'default';\n\n  /**\n   * @internal\n   */\n  get classNames() {\n    return {\n      [this.status]: !!this.status,\n      interactive: !!this.href,\n      active: !!this.active,\n      inverted: this.variant === 'inverted',\n    };\n  }\n\n  handleClick(e: Event) {\n    const customEvent = new CustomEvent('pds-step-indicator-item-click', {\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n      detail: {\n        summary: this.textContent,\n      },\n    });\n\n    this.dispatchEvent(customEvent);\n\n    if (customEvent.defaultPrevented) {\n      e.preventDefault();\n    }\n  }\n\n  completedCircleTemplate() {\n    return html`<div class=\"${this.classEl('outer-circle')}\">\n      <span class=\"pds-c-step-indicator-item__icon\"\n        ><pds-icon-check size=\"xs\"></pds-icon-check></span\n    ></span>\n    </div>`;\n  }\n\n  currentCircleTemplate() {\n    return html`<span class=\"${this.classEl('outer-circle')}\">\n      <span class=\"${this.classEl('inner-circle')}\"></span>\n    </span>`;\n  }\n\n  incompleteCircleTemplate() {\n    return html`<div class=\"${this.classEl('outer-circle')}\"></div>`;\n  }\n\n  circleTemplate() {\n    return html`<div\n      class=\"${this.classEl('circle')}\"\n      focusable=\"false\"\n      aria-hidden=\"true\"\n    >\n      ${this.status === 'completed' ? this.completedCircleTemplate() : nothing}\n      ${this.status === 'current' ? this.currentCircleTemplate() : nothing}\n      ${this.status === 'incomplete'\n        ? this.incompleteCircleTemplate()\n        : nothing}\n    </div>`;\n  }\n\n  stepTextTemplate() {\n    return html`${this.circleTemplate()}\n      <slot></slot>\n      ${this.status === 'completed'\n        ? html`<span class=\"pds-u-sr-only\"\n            >${this.translateText('completed')}</span\n          >`\n        : nothing}\n      ${this.status === 'incomplete'\n        ? html`<span class=\"pds-u-sr-only\"\n            >${this.translateText('incomplete')}</span\n          >`\n        : nothing}`;\n  }\n\n  @requiredSlot(['default'])\n  render() {\n    return html`<li\n      class=${this.getClass()}\n      aria-current=\"${this.active ? 'step' : nothing}\"\n      role=\"listitem\"\n    >\n      ${this.href\n        ? html`<a\n            href=\"${this.href}\"\n            class=\"${this.classEl('text')}\"\n            @click=${this.handleClick}\n            >${this.stepTextTemplate()}</a\n          >`\n        : html`<span class=\"${this.classEl('text')}\"\n            >${this.stepTextTemplate()}</span\n          >`}\n    </li>`;\n  }\n}\n"],"names":["PdsStepIndicatorItem","PdsElement","e","customEvent","html","nothing","__decorateClass","property","requiredSlot","customElement","styles"],"mappings":"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"}