{"version":3,"file":"step-indicator.BcehQo9v.js","sources":["../../../../../packages/web-components/src/lib/components/step-indicator/step-indicator.ts"],"sourcesContent":["import { html, isServer } from 'lit';\nimport { property, queryAssignedElements, state } from 'lit/decorators.js';\nimport { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';\nimport { pdsCustomElement as customElement } from '../../decorators/pds-custom-element';\nimport { PdsElement } from '../PdsElement';\nimport '../step-indicator-item/step-indicator-item';\nimport styles from './step-indicator.scss?inline';\nimport { requiredSlot } from '../../decorators/requiredSlot';\n\n/**\n * @summary A step indicator\n *\n * @slot default Required: Contains the step indicator items, restricted to pds-step-indicator-item element\n */\n@customElement('pds-step-indicator', {\n  category: 'component',\n  type: 'component',\n  state: 'stable',\n  styles,\n})\nexport class PdsStepIndicator extends PdsElement {\n  connectedCallback() {\n    super.connectedCallback();\n    this.initLocalization();\n  }\n\n  /**\n   * variant\n   * - **horizontal** renders the step-indicator horizontal on large screens and up\n   * - **vertical** renders the step-indicator always vertical\n   */\n  @property()\n  variant: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * interactive\n   */\n  @property({ type: Boolean })\n  interactive: boolean = false;\n\n  /**\n   * inverted\n   */\n  @property({ type: Boolean })\n  inverted: boolean = false;\n\n  /**\n   * Indicates if the parent container in narrower than step-indicator width\n   * @internal\n   */\n  @state()\n  isNarrowContainer: boolean = false;\n\n  /** @internal */\n  @state()\n  ResizeObserver =\n    !isServer && window && window.ResizeObserver\n      ? window.ResizeObserver\n      : ResizeObserverPolyfill;\n\n  /**\n   * Listen for resize events on parent and checks if the parent is narrow in width\n   *\n   * @internal\n   */\n  // We can't actually call the observer, because Jest has no concept of element width\n  /* istanbul ignore next */\n  resizeObserver = new this.ResizeObserver((entries: any[]) => {\n    entries.forEach(async () => this.getContainerSize());\n  });\n\n  protected override firstUpdated() {\n    super.firstUpdated();\n    this.handleSlotValidation();\n    this.addPropertiesToStepIndicatorItems();\n  }\n\n  /**\n   * if the parent container is not wide enough to accomodate step-indicator\n   * isNarrowContainer prop helps with the responsive design\n   * @internal\n   * */\n  getContainerSize() {\n    const { parentElement } = this;\n    const { length } = this.stepIndicatorItems;\n    // Calculates the minimum step indicator width, 90 is the min-width for step-indicator item\n    const controlWidth = 90 * length;\n    if (parentElement) {\n      this.isNarrowContainer = parentElement.clientWidth <= controlWidth;\n    }\n  }\n\n  /**\n   * @internal\n   */\n  @queryAssignedElements({\n    slot: undefined,\n    selector: 'pds-step-indicator-item',\n  })\n  stepIndicatorItems: HTMLElement[];\n\n  /**\n   * @internal\n   * pushes properties down to subcomponent step indicator items\n   */\n  addPropertiesToStepIndicatorItems() {\n    this.stepIndicatorItems.forEach((stepIndicatorItem) => {\n      if (this.inverted) {\n        stepIndicatorItem.setAttribute('variant', 'inverted');\n      } else {\n        stepIndicatorItem.removeAttribute('variant');\n      }\n    });\n  }\n\n  handleSlotChange(e: Event) {\n    this.handleSlotValidation(e);\n    this.addPropertiesToStepIndicatorItems();\n  }\n\n  updated() {\n    if (this.variant === 'horizontal') {\n      this.resizeObserver.observe(this);\n    }\n  }\n\n  /**\n   * @internal\n   */\n  get classNames() {\n    return {\n      [this.variant]: !!this.variant,\n      inverted: !!this.inverted,\n      'narrow-container': !!this.isNarrowContainer,\n    };\n  }\n\n  listTemplate() {\n    return html`<ol role=\"list\" class=\"${this.classEl('list')}\">\n      <slot\n        allowed-elements=\"pds-step-indicator-item\"\n        @slotchange=${this.handleSlotChange}\n        >Step indicator items</slot\n      >\n    </ol>`;\n  }\n\n  @requiredSlot(['default'])\n  render() {\n    if (this.interactive) {\n      return html`<nav\n        class=\"${this.getClass()}\"\n        aria-label=\"${this.translateText('progress')}\"\n      >\n        ${this.listTemplate()}\n      </nav>`;\n    }\n\n    return html`<div\n      class=\"${this.getClass()}\"\n      role=\"group\"\n      aria-label=\"${this.translateText('progress')}\"\n    >\n      ${this.listTemplate()}\n    </div>`;\n  }\n}\n"],"names":["PdsStepIndicator","PdsElement","ResizeObserverPolyfill","entries","parentElement","length","controlWidth","stepIndicatorItem","e","html","__decorateClass","property","state","queryAssignedElements","requiredSlot","customElement","styles"],"mappings":"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"}