{"version":3,"file":"button.CuA0l7mv.js","sources":["../../../../../packages/web-components/src/lib/components/button/button.ts"],"sourcesContent":["import { PropertyValueMap, html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\nimport '../../../element-internals-polyfill/element-internals-polyfill.js';\nimport { pdsCustomElement as customElement } from '../../decorators/pds-custom-element';\nimport { PdsElement } from '../PdsElement';\nimport styles from './button.scss?inline';\nimport '@principal/design-system-icons-web/loader';\n\nexport type ButtonVariant =\n  | 'default'\n  | 'default-inverted'\n  | 'primary'\n  | 'primary-inverted'\n  | 'icon'\n  | 'icon-inverted'\n  | 'loading';\n\nconst size = ['default', 'sm'] as const;\nexport type ButtonSize = (typeof size)[number];\n\n/**\n * @summary A styled button element\n *\n * @slot default Optional: The contents of the button, should only contain text\n * @slot icon-right Optional: Holds an icon to the right of the link, restricted to pds-icon\n * @slot icon-left Optional: Holds an icon to the left of the link, restricted to pds-icon\n *\n * @fires pds-button-click A custom event dispatched on click\n */\n@customElement('pds-button', {\n  category: 'component',\n  type: 'component',\n  state: 'stable',\n  styles,\n})\nexport class PdsButton extends PdsElement {\n  /**\n   * @internal\n   */\n  static formAssociated = true;\n\n  /**\n   * @internal\n   */\n  internals: ElementInternals;\n\n  constructor() {\n    super();\n    this.internals = this.attachInternals();\n  }\n\n  /**\n   * - **default** renders the button used for the most common calls to action that don't require as much visual attention.\n   * - **default-inverted** renders a default button for use on darker backgrounds.\n   * - **primary** renders the button used for the most important calls to action.\n   * - **primary-inverted** renders a primary button for use on darker backgrounds.\n   * - **icon** renders the button used for icon.\n   * - **icon-inverted** renders the button for icons used on darker backgrounds.\n   * - **loading** renders a disabled button with a spinning loading icon.\n   */\n  @property()\n  variant: ButtonVariant = 'default';\n\n  /**\n   * Small button\n   */\n  @property()\n  size: ButtonSize = 'default';\n\n  /**\n   * Disabled button\n   */\n  @property({ type: Boolean })\n  disabled: boolean = false;\n\n  /**\n   * FullWidth button\n   */\n  @property({ type: Boolean })\n  fullWidth: boolean = false;\n\n  /**\n   * - **submit** specifies submit type button for form-data submit, default\n   * - **reset** specifies reset type button for form-data reset\n   * - **button** specifies clickable button type\n   */\n  @property({\n    reflect: true,\n  })\n  type: 'submit' | 'reset' | 'button' = 'submit';\n\n  /**\n   * Render the button as a link variant\n   *\n   * - **default** renders link for basic action\n   * - **emphasis** provide more affordance\n   * - **inverted** used on a darker background\n   * - **emphasis-inverted** more affordance on a darker background\n   * - **icon-left** link with icon left\n   * - **icon-right** link with icon right\n   */\n  @property()\n  link:\n    | 'default'\n    | 'inverted'\n    | 'emphasis'\n    | 'emphasis-inverted'\n    | 'icon-left'\n    | 'icon-right'\n    | '' = '';\n\n  /**\n   * Remove padding from link button. Default is false.\n   */\n  @property({ type: Boolean })\n  removeLinkPadding: boolean = false;\n\n  /**\n   * Screen reader label for button\n   */\n  @property({ type: String })\n  ariaLabel: string;\n\n  /**\n   * A space-separated list of element IDs that the button controls\n   */\n  @property({ type: String })\n  ariaControls: string;\n\n  /**\n   * An element ID which identifies the element (or elements) that describes the element on which the attribute is set.\n   */\n  @property({ type: String })\n  ariaDescribedby: string;\n\n  /**\n   * This is a faux focus effect to show the effect of being focused without\n   * actually being focused.\n   */\n  @property({ type: Boolean })\n  isActive: boolean = false;\n\n  /**\n   * @internal\n   */\n  @query('button')\n  button: HTMLButtonElement;\n\n  /**\n   * This grabs the iconLeft slot\n   * @internal\n   */\n  @queryAssignedElements({ slot: 'icon-left' })\n  iconLeftList: HTMLElement[];\n\n  /**\n   * This grabs the iconRight slot\n   * @internal\n   */\n  @queryAssignedElements({ slot: 'icon-right' })\n  iconRightList: HTMLElement[];\n\n  // We could re-render here to make sure slot changes from\n  // icon-left to icon-right are handled on the fly, but that's\n  // likely not going to be a need for users.  If it ever does\n  // become an issue, then we can address it here by re-rendering\n  // with something like requestUpdate().\n  handleSlotChange(e: Event) {\n    this.handleSlotValidation(e);\n    this.verifyAria();\n    this.addSizeToButtonIcon();\n  }\n\n  /**\n   * This grabs the content from the default slot\n   * @internal\n   */\n  @queryAssignedElements({ slot: undefined })\n  defaultSlotElements: HTMLElement[];\n\n  addSizeToButtonIcon() {\n    const icons = [\n      ...this.iconLeftList,\n      ...this.iconRightList,\n      ...this.defaultSlotElements,\n    ];\n    if (icons && icons.length) {\n      icons.forEach((icon) => {\n        if (icon.tagName.toLowerCase().includes('pds-icon')) {\n          if (this.variant === 'icon' || this.variant === 'icon-inverted') {\n            if (size.includes(this.size)) {\n              icon.setAttribute('size', this.size === 'sm' ? 'default' : 'lg');\n            } else {\n              icon.setAttribute('size', 'lg');\n            }\n          } else if (size.includes(this.size)) {\n            icon.setAttribute('size', this.size);\n          } else {\n            icon.setAttribute('size', 'default');\n          }\n        }\n      });\n    }\n  }\n\n  private handleClick(e: MouseEvent) {\n    let eventMessage;\n\n    if (this.textContent?.trim() === '') {\n      eventMessage = this.ariaLabel;\n    } else {\n      eventMessage = this.textContent;\n    }\n\n    if (this.variant === 'loading') {\n      e.preventDefault();\n      return;\n    }\n\n    const customEvent = new CustomEvent('pds-button-click', {\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n      detail: {\n        summary: eventMessage,\n      },\n    });\n\n    this.dispatchEvent(customEvent);\n\n    if (customEvent.defaultPrevented) {\n      e.preventDefault();\n    } else {\n      this.submitOrResetAssociatedForm();\n    }\n  }\n\n  private handleKeydown(e: KeyboardEvent) {\n    if (e.key === 'Enter' || e.key === ' ') {\n      this.submitOrResetAssociatedForm();\n    }\n  }\n\n  private submitOrResetAssociatedForm() {\n    // Needed for submit and reset buttons\n    if (this.type === 'submit') {\n      // Older versions of Safari don't support the requestSubmit method\n      if (this.internals.form?.requestSubmit) {\n        this.internals.form.requestSubmit();\n      } else {\n        this.internals.form?.submit();\n      }\n    }\n\n    if (this.type === 'reset') {\n      this.internals.form?.reset();\n    }\n  }\n\n  /**\n   * @internal\n   *\n   * @returns boolean indicating whether or not button has valid screen readable text associated\n   */\n  verifyAria() {\n    const hasLabel = !!this.ariaLabel || !!this.textContent?.trim();\n\n    if (!hasLabel) {\n      console.error(\n        'Button text is required as an ariaLabel property or as a slot in <%s /> but is undefined on: %o',\n        this.tagName.toLowerCase(),\n        this,\n      );\n    }\n\n    return hasLabel;\n  }\n\n  /**\n   * @internal\n   */\n  get classNames() {\n    return {\n      [this.variant]: !!this.variant,\n      sm: this.size === 'sm',\n      'is-active': this.isActive,\n      link: !!this.link,\n      [`link-${this.link}`]: !!this.link,\n      'remove-link-padding': this.removeLinkPadding,\n      fullWidth: this.fullWidth === true,\n    };\n  }\n\n  protected override async firstUpdated() {\n    super.firstUpdated();\n    this.handleSlotValidation('icon-left');\n    this.handleSlotValidation('icon-right');\n    this.handleSlotValidation();\n    this.verifyAria();\n    await this.updateComplete;\n    this.addSizeToButtonIcon();\n  }\n\n  async updated(\n    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ) {\n    await this.updateComplete;\n    this.addSizeToButtonIcon();\n\n    if (changedProperties.has('disabled') && this.disabled) {\n      this.isActive = false;\n    }\n  }\n\n  render() {\n    return html`<button\n      class=${this.getClass()}\n      ?disabled=${this.disabled}\n      part=\"button\"\n      aria-label=${ifDefined(this.ariaLabel)}\n      aria-controls=${ifDefined(this.ariaControls)}\n      aria-expanded=${ifDefined(this.ariaExpanded)}\n      aria-describedby=${ifDefined(this.ariaDescribedby)}\n      type=${this.type}\n      @click=${this.handleClick}\n      @keydown=${this.handleKeydown}\n    >\n      ${this.variant === 'loading'\n        ? html`<pds-icon-loader size=\"${this.size}\"></pds-icon-loader>`\n        : ''}\n      ${this.slotNotEmpty('icon-left')\n        ? html`<slot\n            allowed-elements=\"pds-icon\"\n            name=\"icon-left\"\n            @slotchange=${this.handleSlotChange}\n          ></slot>`\n        : ''}\n      <slot @slotchange=${this.handleSlotChange}></slot>\n      ${this.slotNotEmpty('icon-right')\n        ? html`<slot\n            allowed-elements=\"pds-icon\"\n            name=\"icon-right\"\n            @slotchange=${this.handleSlotChange}\n          ></slot>`\n        : ''}\n    </button>`;\n  }\n}\n"],"names":["size","PdsButton","PdsElement","e","icons","icon","eventMessage","_a","customEvent","_b","_c","hasLabel","changedProperties","html","ifDefined","__decorateClass","property","query","queryAssignedElements","customElement","styles"],"mappings":"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"}