@pine-ds/core 1.0.5 → 1.1.0

package/dist/esm-es5/pds-button.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["hasShadowDom","el","shadowRoot","attachShadow","pdsButtonCss","PdsButtonStyle0","PdsButton","this","handleClick","ev","_this","type","form","closest","preventDefault","fakeButton","document","createElement","style","display","appendChild","click","remove","prototype","classNames","variant","push","join","render","h","Host","key","disabled","id","componentId","onClick","class","name","part","value","icon","caretDown"],"sources":["src/utils/utils.ts","src/components/pds-button/pds-button.scss?tag=pds-button&encapsulation=shadow","src/components/pds-button/pds-button.tsx"],"sourcesContent":["export function format(first: string, middle: string, last: string): string {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport const hasShadowDom = (el: HTMLElement) => {\n  return !!el.shadowRoot && !!(el as any).attachShadow\n}\n",":host {\n  --border-width-default: var(--pine-border-width-thin);\n  --border-width-unstyled: var(--pine-border-radius-0);\n\n  --color-border-default: transparent;\n  --color-border-disabled: transparent;\n  --color-border-focus: transparent;\n  --color-border-hover: transparent;\n\n  // primary\n  --color-background-primary-default: var(--pine-color-charcoal-400);\n  --color-background-primary-disabled: var(--pine-color-grey-300);\n  --color-background-primary-hover: var(--pine-color-charcoal-500);\n  --color-text-primary-default: var(--pine-color-white);\n  --color-text-primary-disabled: var(--pine-color-charcoal-100);\n  --color-outline-primary: var(--pine-color-blue-200);\n\n  // secondary\n  --color-border-secondary-default: var(--pine-color-grey-400);\n  --color-border-secondary-disabled: var(--pine-color-grey-300);\n  --color-border-secondary-focus: var(--pine-color-grey-300);\n  --color-border-secondary-hover: var(--pine-color-grey-500);\n  --color-text-secondary-default: var(--pine-color-charcoal-400);\n  --color-text-secondary-disabled: var(--pine-color-charcoal-100);\n  --color-outline-secondary: var(--pine-color-blue-200);\n\n  // accent\n  --color-background-accent-default: var(--pine-color-blue-300);\n  --color-background-accent-disabled: var(--pine-color-blue-100);\n  --color-background-accent-hover: var(--pine-color-blue-400);\n  --color-text-accent-default: var(--pine-color-white);\n  --color-text-accent-disabled: var(--pine-color-blue-200);\n  --color-outline-accent: var(--pine-color-blue-200);\n\n  // destructive\n  --color-background-destructive-default: var(--pine-color-red-300);\n  --color-background-destructive-disabled: var(--pine-color-red-100);\n  --color-background-destructive-hover: var(--pine-color-red-400);\n  --color-text-destructive-default: var(--pine-color-white);\n  --color-text-destructive-disabled: var(--pine-color-red-200);\n  --color-outline-destructive: var(--pine-color-red-200);\n\n  --spacing-disclosure-icon-margin-inline-end: var(--pine-spacing-0);\n  --spacing-disclosure-margin-inline-start: var(--pine-spacing-100);\n  --spacing-icon-margin-inline-end: var(--pine-spacing-100);\n  --spacing-padding-block: var(--pine-spacing-100);\n  --spacing-padding-inline: var(--pine-spacing-200);\n  --spacing-unstyled: var(--pine-spacing-0);\n\n  --typography-default: var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);\n\n  display: inline-flex;\n  vertical-align: middle;\n}\n\n.pds-button {\n  align-items: center;\n  background-color: var(--color-background-default);\n  border: var(--border-width-default) solid var(--color-border-default);\n  border-radius: var(--pine-border-radius-125);\n  color: var(--color-text-default);\n  display: flex;\n  font: var(--typography-default);\n  min-height: 40px;\n  padding: var(--spacing-padding-block) var(--spacing-padding-inline);\n\n  pds-icon {\n    fill: currentColor;\n    margin-inline-end: var(--spacing-icon-margin-inline-end);\n  }\n\n  &:hover {\n    background-color: var(--color-background-hover);\n    border-color: var(--color-border-hover);\n  }\n\n  &:focus-visible {\n    --box-shadow-focus: 0 0 0 2px var(--pine-color-primary-200);\n    border-color: var(--color-border-focus);\n    // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n    box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n    outline: none;\n  }\n\n  &:disabled {\n    background-color: var(--color-background-disabled);\n    border-color: var(--color-border-disabled);\n    color: var(--color-text-disabled);\n  }\n}\n\n.pds-button--primary {\n  --color-background-default: var(--color-background-primary-default);\n  --color-background-hover: var(--color-background-primary-hover);\n  --color-background-disabled: var(--color-background-primary-disabled);\n  --color-text-default: var(--color-text-primary-default);\n  --color-text-disabled: var(--color-text-primary-disabled);\n  --color-outline: var(--color-outline-primary);\n}\n\n.pds-button--accent {\n  --color-background-default: var(--color-background-accent-default);\n  --color-background-hover: var(--color-background-accent-hover);\n  --color-background-disabled: var(--color-background-accent-disabled);\n  --color-text-default: var(--color-text-accent-default);\n  --color-text-disabled: var(--color-text-accent-disabled);\n  --color-outline: var(--color-outline-accent);\n}\n\n.pds-button--destructive {\n  --color-background-default: var(--color-background-destructive-default);\n  --color-background-hover: var(--color-background-destructive-hover);\n  --color-background-disabled: var(--color-background-destructive-disabled);\n  --color-text-default: var(--color-text-destructive-default);\n  --color-text-disabled: var(--color-text-destructive-disabled);\n  --color-outline: var(--color-outline-destructive);\n}\n\n.pds-button--secondary,\n.pds-button--disclosure {\n  --color-background-default: transparent;\n  --color-background-hover: transparent;\n  --color-background-disabled: transparent;\n  --color-border-disabled: var(--color-border-secondary-disabled);\n  --color-border-focus: var(--color-border-secondary-focus);\n  --color-border-hover: var(--color-border-secondary-hover);\n  --color-border-default: var(--color-border-secondary-default);\n  --color-text-default: var(--color-text-secondary-default);\n  --color-text-disabled: var(--color-text-secondary-disabled);\n  --color-outline: var(--color-outline-secondary);\n}\n\n.pds-button--disclosure {\n  pds-icon {\n    margin-inline-end: var(--spacing-disclosure-icon-margin-inline-end);\n    margin-inline-start: var(--spacing-disclosure-margin-inline-start);\n  }\n}\n\n.pds-button--unstyled {\n  --color-background-default: transparent;\n  --color-background-hover: transparent;\n  --color-background-disabled: transparent;\n  --color-text-default: inherit;\n  border: var(--border-width-unstyled);\n  margin: var(--spacing-unstyled);\n  min-height: auto;\n  padding: var(--spacing-unstyled);\n  width: inherit;\n}\n","import { Component, Element, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\nimport { caretDown } from '@pine-ds/icons/icons';\n\n/**\n * @part button - The main button element that represents the button component.\n * @part caret - The caret icon element that appears when the button variant is 'disclosure'.\n * @part icon - The icon element that appears before the text in the button, if provided.\n*/\n\n@Component({\n  tag: 'pds-button',\n  styleUrl: 'pds-button.scss',\n  shadow: true,\n})\nexport class PdsButton {\n  @Element() el: HTMLPdsButtonElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Toggles disabled state of button\n   * @defaultValue false\n   */\n  @Prop() disabled? = false;\n\n  /**\n   * Displays icon before text when icon string matches an icon name\n   */\n  @Prop() icon?: string = null;\n\n  /**\n   * Provides button with a submittable name\n   */\n  @Prop() name?: string;\n\n  /**\n   * Provides button with a submittable value\n   */\n  @Prop() value?: string;\n\n  /**\n   * Provides button with a type\n   * @defaultValue button\n   */\n  @Prop() type?: 'button' | 'reset' | 'submit' = 'button';\n\n  /**\n   * Sets button variant styles as outlined in Figma documentation\n   */\n  @Prop() variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' = 'primary';\n\n  private handleClick = (ev: Event) => {\n    if (this.type != 'button') {\n      // If button clicked IS NOT associated with a form\n      if (hasShadowDom(this.el)) {\n        const form = this.el.closest('form')\n        if (form) {\n          ev.preventDefault()\n\n          const fakeButton = document.createElement('button')\n          fakeButton.type = this.type\n          fakeButton.style.display = 'none'\n          form.appendChild(fakeButton)\n          fakeButton.click()\n          fakeButton.remove()\n        }\n      }\n    }\n  }\n\n  private classNames() {\n    const classNames = ['pds-button'];\n\n    if (this.variant) {\n      classNames.push('pds-button--' + this.variant);\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        id={this.componentId}\n        onClick={this.handleClick}\n        variant={this.variant}\n      >\n        <button\n          class={this.classNames()}\n          disabled={this.disabled}\n          name={this.name}\n          part=\"button\"\n          type={this.type}\n          value={this.value}\n        >\n          {this.icon && this.variant !== 'disclosure' && <pds-icon name={this.icon} part=\"icon\"></pds-icon>}\n          <slot />\n          {this.variant === 'disclosure' && <pds-icon icon={caretDown} part=\"caret\"></pds-icon>}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"mIAIO,IAAMA,aAAe,SAACC,GAC3B,QAASA,EAAGC,cAAiBD,EAAWE,YAC1C,ECNA,IAAMC,aAAe,m9KACrB,IAAAC,gBAAeD,a,ICeFE,UAAS,W,kDAwCZC,KAAAC,YAAc,SAACC,GACrB,GAAIC,EAAKC,MAAQ,SAAU,CAEzB,GAAIX,aAAaU,EAAKT,IAAK,CACzB,IAAMW,EAAOF,EAAKT,GAAGY,QAAQ,QAC7B,GAAID,EAAM,CACRH,EAAGK,iBAEH,IAAMC,EAAaC,SAASC,cAAc,UAC1CF,EAAWJ,KAAOD,EAAKC,KACvBI,EAAWG,MAAMC,QAAU,OAC3BP,EAAKQ,YAAYL,GACjBA,EAAWM,QACXN,EAAWO,Q,8CAzCC,M,UAKI,K,mDAgBuB,S,aAKmD,S,CAqB1FhB,EAAAiB,UAAAC,WAAA,WACN,IAAMA,EAAa,CAAC,cAEpB,GAAIjB,KAAKkB,QAAS,CAChBD,EAAWE,KAAK,eAAiBnB,KAAKkB,Q,CAGxC,OAAOD,EAAWG,KAAK,K,EAGzBrB,EAAAiB,UAAAK,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2DACYxB,KAAKyB,SAAW,OAAS,KACxCC,GAAI1B,KAAK2B,YACTC,QAAS5B,KAAKC,YACdiB,QAASlB,KAAKkB,SAEdI,EAAA,UAAAE,IAAA,2CACEK,MAAO7B,KAAKiB,aACZQ,SAAUzB,KAAKyB,SACfK,KAAM9B,KAAK8B,KACXC,KAAK,SACL3B,KAAMJ,KAAKI,KACX4B,MAAOhC,KAAKgC,OAEXhC,KAAKiC,MAAQjC,KAAKkB,UAAY,cAAgBI,EAAA,YAAAE,IAAA,2CAAUM,KAAM9B,KAAKiC,KAAMF,KAAK,SAC/ET,EAAA,QAAAE,IAAA,6CACCxB,KAAKkB,UAAY,cAAgBI,EAAA,YAAAE,IAAA,2CAAUS,KAAMC,UAAWH,KAAK,W,gIAvFtD,G"}
+{"version":3,"names":["hasShadowDom","el","shadowRoot","attachShadow","pdsButtonCss","PdsButtonStyle0","PdsButton","this","handleClick","ev","_this","type","form","closest","preventDefault","fakeButton","document","createElement","style","display","appendChild","click","remove","prototype","classNames","variant","push","join","render","h","Host","key","disabled","id","componentId","onClick","class","name","part","value","icon","caretDown"],"sources":["src/utils/utils.ts","src/components/pds-button/pds-button.scss?tag=pds-button&encapsulation=shadow","src/components/pds-button/pds-button.tsx"],"sourcesContent":["export function format(first: string, middle: string, last: string): string {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport const hasShadowDom = (el: HTMLElement) => {\n  return !!el.shadowRoot && !!(el as any).attachShadow\n}\n",":host {\n  --border-width-default: var(--pine-border-width-thin);\n  --border-width-unstyled: var(--pine-border-radius-0);\n\n  --color-border-default: transparent;\n  --color-border-disabled: transparent;\n  --color-border-focus: transparent;\n  --color-border-hover: transparent;\n\n  // primary\n  --color-background-primary-default: var(--pine-color-charcoal-400);\n  --color-background-primary-disabled: var(--pine-color-grey-300);\n  --color-background-primary-hover: var(--pine-color-charcoal-500);\n  --color-text-primary-default: var(--pine-color-white);\n  --color-text-primary-disabled: var(--pine-color-charcoal-100);\n  --color-outline-primary: var(--pine-color-blue-200);\n\n  // secondary\n  --color-border-secondary-default: var(--pine-color-grey-400);\n  --color-border-secondary-disabled: var(--pine-color-grey-300);\n  --color-border-secondary-focus: var(--pine-color-grey-300);\n  --color-border-secondary-hover: var(--pine-color-grey-500);\n  --color-text-secondary-default: var(--pine-color-charcoal-400);\n  --color-text-secondary-disabled: var(--pine-color-charcoal-100);\n  --color-outline-secondary: var(--pine-color-blue-200);\n\n  // accent\n  --color-background-accent-default: var(--pine-color-blue-300);\n  --color-background-accent-disabled: var(--pine-color-blue-100);\n  --color-background-accent-hover: var(--pine-color-blue-400);\n  --color-text-accent-default: var(--pine-color-white);\n  --color-text-accent-disabled: var(--pine-color-blue-200);\n  --color-outline-accent: var(--pine-color-blue-200);\n\n  // destructive\n  --color-background-destructive-default: var(--pine-color-red-300);\n  --color-background-destructive-disabled: var(--pine-color-red-100);\n  --color-background-destructive-hover: var(--pine-color-red-400);\n  --color-text-destructive-default: var(--pine-color-white);\n  --color-text-destructive-disabled: var(--pine-color-red-200);\n  --color-outline-destructive: var(--pine-color-red-200);\n\n  --spacing-disclosure-icon-margin-inline-end: var(--pine-spacing-0);\n  --spacing-disclosure-margin-inline-start: var(--pine-spacing-100);\n  --spacing-icon-margin-inline-end: var(--pine-spacing-100);\n  --spacing-padding-block: var(--pine-spacing-100);\n  --spacing-padding-inline: var(--pine-spacing-200);\n  --spacing-unstyled: var(--pine-spacing-0);\n\n  --typography-default: var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);\n\n  display: inline-flex;\n  vertical-align: middle;\n}\n\n.pds-button {\n  align-items: center;\n  background-color: var(--color-background-default);\n  border: var(--border-width-default) solid var(--color-border-default);\n  border-radius: var(--pine-border-radius-125);\n  color: var(--color-text-default);\n  display: flex;\n  font: var(--typography-default);\n  min-height: 40px;\n  padding: var(--spacing-padding-block) var(--spacing-padding-inline);\n\n  pds-icon {\n    fill: currentColor;\n    margin-inline-end: var(--spacing-icon-margin-inline-end);\n  }\n\n  &:hover {\n    background-color: var(--color-background-hover);\n    border-color: var(--color-border-hover);\n  }\n\n  &:focus-visible {\n    --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);\n    border-color: var(--color-border-focus);\n    // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n    box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n    outline: none;\n  }\n\n  &:disabled {\n    background-color: var(--color-background-disabled);\n    border-color: var(--color-border-disabled);\n    color: var(--color-text-disabled);\n  }\n}\n\n.pds-button--primary {\n  --color-background-default: var(--color-background-primary-default);\n  --color-background-hover: var(--color-background-primary-hover);\n  --color-background-disabled: var(--color-background-primary-disabled);\n  --color-text-default: var(--color-text-primary-default);\n  --color-text-disabled: var(--color-text-primary-disabled);\n  --color-outline: var(--color-outline-primary);\n}\n\n.pds-button--accent {\n  --color-background-default: var(--color-background-accent-default);\n  --color-background-hover: var(--color-background-accent-hover);\n  --color-background-disabled: var(--color-background-accent-disabled);\n  --color-text-default: var(--color-text-accent-default);\n  --color-text-disabled: var(--color-text-accent-disabled);\n  --color-outline: var(--color-outline-accent);\n}\n\n.pds-button--destructive {\n  --color-background-default: var(--color-background-destructive-default);\n  --color-background-hover: var(--color-background-destructive-hover);\n  --color-background-disabled: var(--color-background-destructive-disabled);\n  --color-text-default: var(--color-text-destructive-default);\n  --color-text-disabled: var(--color-text-destructive-disabled);\n  --color-outline: var(--color-outline-destructive);\n}\n\n.pds-button--secondary,\n.pds-button--disclosure {\n  --color-background-default: transparent;\n  --color-background-hover: transparent;\n  --color-background-disabled: transparent;\n  --color-border-disabled: var(--color-border-secondary-disabled);\n  --color-border-focus: var(--color-border-secondary-focus);\n  --color-border-hover: var(--color-border-secondary-hover);\n  --color-border-default: var(--color-border-secondary-default);\n  --color-text-default: var(--color-text-secondary-default);\n  --color-text-disabled: var(--color-text-secondary-disabled);\n  --color-outline: var(--color-outline-secondary);\n}\n\n.pds-button--disclosure {\n  pds-icon {\n    margin-inline-end: var(--spacing-disclosure-icon-margin-inline-end);\n    margin-inline-start: var(--spacing-disclosure-margin-inline-start);\n  }\n}\n\n.pds-button--unstyled {\n  --color-background-default: transparent;\n  --color-background-hover: transparent;\n  --color-background-disabled: transparent;\n  --color-text-default: inherit;\n  border: var(--border-width-unstyled);\n  margin: var(--spacing-unstyled);\n  min-height: auto;\n  padding: var(--spacing-unstyled);\n  width: inherit;\n}\n","import { Component, Element, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\nimport { caretDown } from '@pine-ds/icons/icons';\n\n/**\n * @part button - The main button element that represents the button component.\n * @part caret - The caret icon element that appears when the button variant is 'disclosure'.\n * @part icon - The icon element that appears before the text in the button, if provided.\n*/\n\n@Component({\n  tag: 'pds-button',\n  styleUrl: 'pds-button.scss',\n  shadow: true,\n})\nexport class PdsButton {\n  @Element() el: HTMLPdsButtonElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Toggles disabled state of button\n   * @defaultValue false\n   */\n  @Prop() disabled? = false;\n\n  /**\n   * Displays icon before text when icon string matches an icon name\n   */\n  @Prop() icon?: string = null;\n\n  /**\n   * Provides button with a submittable name\n   */\n  @Prop() name?: string;\n\n  /**\n   * Provides button with a submittable value\n   */\n  @Prop() value?: string;\n\n  /**\n   * Provides button with a type\n   * @defaultValue button\n   */\n  @Prop() type?: 'button' | 'reset' | 'submit' = 'button';\n\n  /**\n   * Sets button variant styles as outlined in Figma documentation\n   */\n  @Prop() variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' = 'primary';\n\n  private handleClick = (ev: Event) => {\n    if (this.type != 'button') {\n      // If button clicked IS NOT associated with a form\n      if (hasShadowDom(this.el)) {\n        const form = this.el.closest('form')\n        if (form) {\n          ev.preventDefault()\n\n          const fakeButton = document.createElement('button')\n          fakeButton.type = this.type\n          fakeButton.style.display = 'none'\n          form.appendChild(fakeButton)\n          fakeButton.click()\n          fakeButton.remove()\n        }\n      }\n    }\n  }\n\n  private classNames() {\n    const classNames = ['pds-button'];\n\n    if (this.variant) {\n      classNames.push('pds-button--' + this.variant);\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        id={this.componentId}\n        onClick={this.handleClick}\n        variant={this.variant}\n      >\n        <button\n          class={this.classNames()}\n          disabled={this.disabled}\n          name={this.name}\n          part=\"button\"\n          type={this.type}\n          value={this.value}\n        >\n          {this.icon && this.variant !== 'disclosure' && <pds-icon name={this.icon} part=\"icon\"></pds-icon>}\n          <slot />\n          {this.variant === 'disclosure' && <pds-icon icon={caretDown} part=\"caret\"></pds-icon>}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"mIAIO,IAAMA,aAAe,SAACC,GAC3B,QAASA,EAAGC,cAAiBD,EAAWE,YAC1C,ECNA,IAAMC,aAAe,g9KACrB,IAAAC,gBAAeD,a,ICeFE,UAAS,W,kDAwCZC,KAAAC,YAAc,SAACC,GACrB,GAAIC,EAAKC,MAAQ,SAAU,CAEzB,GAAIX,aAAaU,EAAKT,IAAK,CACzB,IAAMW,EAAOF,EAAKT,GAAGY,QAAQ,QAC7B,GAAID,EAAM,CACRH,EAAGK,iBAEH,IAAMC,EAAaC,SAASC,cAAc,UAC1CF,EAAWJ,KAAOD,EAAKC,KACvBI,EAAWG,MAAMC,QAAU,OAC3BP,EAAKQ,YAAYL,GACjBA,EAAWM,QACXN,EAAWO,Q,8CAzCC,M,UAKI,K,mDAgBuB,S,aAKmD,S,CAqB1FhB,EAAAiB,UAAAC,WAAA,WACN,IAAMA,EAAa,CAAC,cAEpB,GAAIjB,KAAKkB,QAAS,CAChBD,EAAWE,KAAK,eAAiBnB,KAAKkB,Q,CAGxC,OAAOD,EAAWG,KAAK,K,EAGzBrB,EAAAiB,UAAAK,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2DACYxB,KAAKyB,SAAW,OAAS,KACxCC,GAAI1B,KAAK2B,YACTC,QAAS5B,KAAKC,YACdiB,QAASlB,KAAKkB,SAEdI,EAAA,UAAAE,IAAA,2CACEK,MAAO7B,KAAKiB,aACZQ,SAAUzB,KAAKyB,SACfK,KAAM9B,KAAK8B,KACXC,KAAK,SACL3B,KAAMJ,KAAKI,KACX4B,MAAOhC,KAAKgC,OAEXhC,KAAKiC,MAAQjC,KAAKkB,UAAY,cAAgBI,EAAA,YAAAE,IAAA,2CAAUM,KAAM9B,KAAKiC,KAAMF,KAAK,SAC/ET,EAAA,QAAAE,IAAA,6CACCxB,KAAKkB,UAAY,cAAgBI,EAAA,YAAAE,IAAA,2CAAUS,KAAMC,UAAWH,KAAK,W,gIAvFtD,G"}

package/dist/esm-es5/pds-textarea.entry.js

@@ -1,2 +1,2 @@
-import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-6f0bb1b9.js";import{i as isRequired,P as PdsLabel,a as assignDescription,m as messageId}from"./pds-label-d7e11551.js";var pdsTextareaCss=":host{--border-interactive-default:var(--pine-border-width-thin) solid var(--pine-color-grey-400);--box-shadow-focus:0 0 0 2px var(--color-focus-visible-outline);--box-shadow-focus-error:0 0 0 2px var(--color-focus-visible-outline-error);--color:var(--pine-color-charcoal-400);--color-background:var(--pine-color-white);--color-background-disabled:var(--pine-color-grey-200);--color-border-default:var(--pine-color-grey-400);--color-border-error:var(--pine-color-red-300);--color-border-focus-visible:var(--pine-color-grey-300);--color-border-hover:var(--pine-color-grey-500);--color-disabled-default:var(--pine-color-charcoal-200);--color-error-default:var(--pine-color-red-300);--color-focus-visible-outline:var(--pine-color-primary-200);--color-focus-visible-outline-error:var(--pine-color-red-200);--color-placeholder-default:var(--pine-color-charcoal-200);--font-size-field:var(--pine-font-size-100);--font-size-helper-message:var(--pine-font-size-075);--font-size-label:var(--pine-font-size-100);--font-weight-field:var(--pine-font-weight-normal);--font-weight-helper-message:var(--pine-font-weight-normal);--font-weight-label:var(--pine-font-weight-medium);--line-height-field:var(--pine-line-height-150);--line-height-helper-message:var(--pine-line-height-125);--line-height-label:var(--pine-line-height-150);--spacing-margin-block-end-label:var(--pine-spacing-100);--spacing-margin-block-start-helper-message:var(--pine-spacing-100);--spacing-padding-block-field:var(--pine-spacing-100);--spacing-padding-inline-field:var(--pine-spacing-200);display:inline}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}label{display:block;font-size:var(--font-size-label);font-weight:var(--font-weight-label);line-height:var(--line-height-label);-webkit-margin-after:var(--spacing-margin-block-end-label);margin-block-end:var(--spacing-margin-block-end-label)}.pds-textarea__field{background-color:var(--color-background);border:var(--pine-border-interactive-default);border-radius:var(--pine-border-radius-md);font-family:inherit;font-size:var(--font-size-field);font-weight:var(--font-weight-field);line-height:var(--line-height-field);padding:var(--spacing-padding-block-field) var(--spacing-padding-inline-field)}.pds-textarea__field:hover:not(:disabled,.is-invalid){border-color:var(--color-border-hover)}.pds-textarea__field:disabled{background-color:var(--color-background-disabled);color:var(--color-disabled-default);cursor:not-allowed}.pds-textarea__field:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-textarea__field::-webkit-input-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field::-moz-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field:-ms-input-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field::-ms-input-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field::placeholder{color:var(--color-placeholder-default)}.pds-textarea__field.is-invalid{border-color:var(--color-border-error)}.pds-textarea__field.is-invalid:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error)}.pds-textarea__error-message,.pds-textarea__helper-message{font-size:var(--font-size-helper-message);font-weight:var(--font-weight-helper-message);line-height:var(--line-height-helper-message);-webkit-margin-before:var(--spacing-margin-block-start-helper-message);margin-block-start:var(--spacing-margin-block-start-helper-message)}.pds-textarea__error-message{color:var(--color-error-default)}";var PdsTextareaStyle0=pdsTextareaCss;var PdsTextarea=function(){function e(e){var r=this;registerInstance(this,e);this.pdsTextareaChange=createEvent(this,"pdsTextareaChange",7);this.onTextareaChange=function(e){var a=e.target;isRequired(a,r);if(a){r.value=a.innerHTML}r.pdsTextareaChange.emit({value:r.value,event:e})};this.componentId=undefined;this.disabled=false;this.errorMessage=undefined;this.helperMessage=undefined;this.invalid=false;this.label=undefined;this.name=this.componentId;this.placeholder=undefined;this.readonly=false;this.required=false;this.rows=undefined;this.value=undefined}e.prototype.textareaClassNames=function(){var e=["pds-textarea__field"];if(this.invalid&&this.invalid===true){e.push("is-invalid")}return e.join("  ")};e.prototype.render=function(){return h(Host,{key:"a6f6eb13665857ec8762d454d79ff216e2062a66","aria-disabled":this.disabled?"true":null},h("div",{key:"fa77f9c7c29f214ee4d8ddb8e1e48d4d16b6a47e",class:"pds-textarea"},this.label&&h(PdsLabel,{key:"75c242138f5c2a33a82feaa775dae0c05843d2c1",htmlFor:this.componentId,text:this.label}),h("textarea",{key:"8bebb57b878c745e07ebfc18afd2aaf7d2da66a5","aria-describedby":assignDescription(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,class:this.textareaClassNames(),disabled:this.disabled,id:this.componentId,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,rows:this.rows,onChange:this.onTextareaChange},this.value),this.helperMessage&&h("p",{key:"b9a83aeb83b0cf4232359154d36a8ec48b0a3638",class:"pds-textarea__helper-message",id:messageId(this.componentId,"helper")},this.helperMessage),this.invalid&&h("p",{key:"ee70c7aa56b8a8e18de58394c04140065670f8db","aria-live":"assertive",class:"pds-textarea__error-message",id:messageId(this.componentId,"error")},this.errorMessage)))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();PdsTextarea.style=PdsTextareaStyle0;export{PdsTextarea as pds_textarea};
+import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-6f0bb1b9.js";import{i as isRequired,P as PdsLabel,a as assignDescription,m as messageId}from"./pds-label-d7e11551.js";var pdsTextareaCss=":host{--border-interactive-default:var(--pine-border-width-thin) solid var(--pine-color-grey-400);--box-shadow-focus:0 0 0 2px var(--color-focus-visible-outline);--box-shadow-focus-error:0 0 0 2px var(--color-focus-visible-outline-error);--color:var(--pine-color-charcoal-400);--color-background:var(--pine-color-white);--color-background-disabled:var(--pine-color-grey-200);--color-border-default:var(--pine-color-grey-400);--color-border-error:var(--pine-color-red-300);--color-border-focus-visible:var(--pine-color-grey-300);--color-border-hover:var(--pine-color-grey-500);--color-disabled-default:var(--pine-color-charcoal-200);--color-error-default:var(--pine-color-red-300);--color-focus-visible-outline:var(--pine-color-blue-200);--color-focus-visible-outline-error:var(--pine-color-red-200);--color-placeholder-default:var(--pine-color-charcoal-200);--font-size-field:var(--pine-font-size-100);--font-size-helper-message:var(--pine-font-size-075);--font-size-label:var(--pine-font-size-100);--font-weight-field:var(--pine-font-weight-normal);--font-weight-helper-message:var(--pine-font-weight-normal);--font-weight-label:var(--pine-font-weight-medium);--line-height-field:var(--pine-line-height-150);--line-height-helper-message:var(--pine-line-height-125);--line-height-label:var(--pine-line-height-150);--spacing-margin-block-end-label:var(--pine-spacing-100);--spacing-margin-block-start-helper-message:var(--pine-spacing-100);--spacing-padding-block-field:var(--pine-spacing-100);--spacing-padding-inline-field:var(--pine-spacing-200);display:inline}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}label{display:block;font-size:var(--font-size-label);font-weight:var(--font-weight-label);line-height:var(--line-height-label);-webkit-margin-after:var(--spacing-margin-block-end-label);margin-block-end:var(--spacing-margin-block-end-label)}.pds-textarea__field{background-color:var(--color-background);border:var(--pine-border-interactive-default);border-radius:var(--pine-border-radius-md);font-family:inherit;font-size:var(--font-size-field);font-weight:var(--font-weight-field);line-height:var(--line-height-field);padding:var(--spacing-padding-block-field) var(--spacing-padding-inline-field)}.pds-textarea__field:hover:not(:disabled,.is-invalid){border-color:var(--color-border-hover)}.pds-textarea__field:disabled{background-color:var(--color-background-disabled);color:var(--color-disabled-default);cursor:not-allowed}.pds-textarea__field:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-textarea__field::-webkit-input-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field::-moz-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field:-ms-input-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field::-ms-input-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field::placeholder{color:var(--color-placeholder-default)}.pds-textarea__field.is-invalid{border-color:var(--color-border-error)}.pds-textarea__field.is-invalid:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error)}.pds-textarea__error-message,.pds-textarea__helper-message{font-size:var(--font-size-helper-message);font-weight:var(--font-weight-helper-message);line-height:var(--line-height-helper-message);-webkit-margin-before:var(--spacing-margin-block-start-helper-message);margin-block-start:var(--spacing-margin-block-start-helper-message)}.pds-textarea__error-message{color:var(--color-error-default)}";var PdsTextareaStyle0=pdsTextareaCss;var PdsTextarea=function(){function e(e){var r=this;registerInstance(this,e);this.pdsTextareaChange=createEvent(this,"pdsTextareaChange",7);this.onTextareaChange=function(e){var a=e.target;isRequired(a,r);if(a){r.value=a.innerHTML}r.pdsTextareaChange.emit({value:r.value,event:e})};this.componentId=undefined;this.disabled=false;this.errorMessage=undefined;this.helperMessage=undefined;this.invalid=false;this.label=undefined;this.name=this.componentId;this.placeholder=undefined;this.readonly=false;this.required=false;this.rows=undefined;this.value=undefined}e.prototype.textareaClassNames=function(){var e=["pds-textarea__field"];if(this.invalid&&this.invalid===true){e.push("is-invalid")}return e.join("  ")};e.prototype.render=function(){return h(Host,{key:"a6f6eb13665857ec8762d454d79ff216e2062a66","aria-disabled":this.disabled?"true":null},h("div",{key:"fa77f9c7c29f214ee4d8ddb8e1e48d4d16b6a47e",class:"pds-textarea"},this.label&&h(PdsLabel,{key:"75c242138f5c2a33a82feaa775dae0c05843d2c1",htmlFor:this.componentId,text:this.label}),h("textarea",{key:"8bebb57b878c745e07ebfc18afd2aaf7d2da66a5","aria-describedby":assignDescription(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,class:this.textareaClassNames(),disabled:this.disabled,id:this.componentId,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,rows:this.rows,onChange:this.onTextareaChange},this.value),this.helperMessage&&h("p",{key:"b9a83aeb83b0cf4232359154d36a8ec48b0a3638",class:"pds-textarea__helper-message",id:messageId(this.componentId,"helper")},this.helperMessage),this.invalid&&h("p",{key:"ee70c7aa56b8a8e18de58394c04140065670f8db","aria-live":"assertive",class:"pds-textarea__error-message",id:messageId(this.componentId,"error")},this.errorMessage)))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();PdsTextarea.style=PdsTextareaStyle0;export{PdsTextarea as pds_textarea};
 //# sourceMappingURL=pds-textarea.entry.js.map

package/dist/esm-es5/pds-textarea.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["pdsTextareaCss","PdsTextareaStyle0","PdsTextarea","this","onTextareaChange","ev","textarea","target","isRequired","_this","value","innerHTML","pdsTextareaChange","emit","event","componentId","prototype","textareaClassNames","classNames","invalid","push","join","render","h","Host","key","disabled","class","label","PdsLabel","htmlFor","text","assignDescription","helperMessage","undefined","id","name","placeholder","readOnly","readonly","required","rows","onChange","messageId","errorMessage"],"sources":["src/components/pds-textarea/pds-textarea.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.tsx"],"sourcesContent":[":host {\n  --border-interactive-default: var(--pine-border-width-thin) solid var(--pine-color-grey-400);\n\n  --box-shadow-focus: 0 0 0 2px var(--color-focus-visible-outline);\n  --box-shadow-focus-error: 0 0 0 2px var(--color-focus-visible-outline-error);\n\n  --color: var(--pine-color-charcoal-400);\n  --color-background: var(--pine-color-white);\n  --color-background-disabled: var(--pine-color-grey-200);\n  --color-border-default: var(--pine-color-grey-400);\n  --color-border-error: var(--pine-color-red-300);\n  --color-border-focus-visible: var(--pine-color-grey-300);\n  --color-border-hover: var(--pine-color-grey-500);\n  --color-disabled-default: var(--pine-color-charcoal-200);\n  --color-error-default: var(--pine-color-red-300);\n  --color-focus-visible-outline: var(--pine-color-primary-200);\n  --color-focus-visible-outline-error: var(--pine-color-red-200);\n  --color-placeholder-default: var(--pine-color-charcoal-200);\n\n  --font-size-field: var(--pine-font-size-100);\n  --font-size-helper-message: var(--pine-font-size-075);\n  --font-size-label: var(--pine-font-size-100);\n  --font-weight-field: var(--pine-font-weight-normal);\n  --font-weight-helper-message: var(--pine-font-weight-normal);\n  --font-weight-label: var(--pine-font-weight-medium);\n\n  --line-height-field: var(--pine-line-height-150);\n  --line-height-helper-message: var(--pine-line-height-125);\n  --line-height-label: var(--pine-line-height-150);\n\n  --spacing-margin-block-end-label: var(--pine-spacing-100);\n  --spacing-margin-block-start-helper-message: var(--pine-spacing-100);\n  --spacing-padding-block-field: var(--pine-spacing-100);\n  --spacing-padding-inline-field: var(--pine-spacing-200);\n\n  display: inline;\n}\n\n.pds-textarea {\n  display: flex;\n  flex-direction: column;\n}\n\nlabel {\n  display: block;\n  font-size: var(--font-size-label);\n  font-weight: var(--font-weight-label);\n  line-height: var(--line-height-label);\n  margin-block-end: var(--spacing-margin-block-end-label);\n}\n\n.pds-textarea__field {\n  background-color: var(--color-background);\n  border: var(--pine-border-interactive-default);\n  border-radius: var(--pine-border-radius-md);\n  font-family: inherit;\n  font-size: var(--font-size-field);\n  font-weight: var(--font-weight-field);\n  line-height: var(--line-height-field);\n  padding: var(--spacing-padding-block-field) var(--spacing-padding-inline-field);\n\n  &:hover:not(:disabled, .is-invalid) {\n    border-color: var(--color-border-hover);\n  }\n\n  &:disabled {\n    background-color: var(--color-background-disabled);\n    color: var(--color-disabled-default);\n    cursor: not-allowed;\n  }\n\n  &:focus-visible {\n    // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n    box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n    outline: none;\n  }\n\n  &::placeholder {\n    color: var(--color-placeholder-default);\n  }\n\n  &.is-invalid {\n    border-color: var(--color-border-error);\n\n    &:focus-visible {\n      box-shadow: var(--box-shadow-focus-error);\n    }\n  }\n}\n\n.pds-textarea__error-message,\n.pds-textarea__helper-message {\n  font-size: var(--font-size-helper-message);\n  font-weight: var(--font-weight-helper-message);\n  line-height: var(--line-height-helper-message);\n  margin-block-start: var(--spacing-margin-block-start-helper-message);\n}\n\n.pds-textarea__error-message {\n  color: var(--color-error-default);\n}\n","import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, isRequired, messageId } from '../../utils/form';\nimport { TextareaChangeEventDetail } from './textarea-interface';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n  tag: 'pds-textarea',\n  styleUrl: 'pds-textarea.scss',\n  shadow: true,\n})\nexport class PdsTextarea {\n  @Element() el: HTMLPdsTextareaElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Indicates whether or not the textarea is disabled\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Specifies the error text and provides an error-themed treatment to the field\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays a hint or description of the textarea\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * Indicates whether or not the textarea is invalid or throws an error\n   * @defaultValue false\n   */\n  @Prop({mutable: true}) invalid = false;       // eslint-disable-line @stencil-community/strict-mutable\n\n  /**\n   * Text to be displayed as the textarea label\n   */\n  @Prop() label?: string;\n\n  /**\n   * Specifies the name, submitted with the form name/value pair. This value will mirror the componentId\n   */\n  @Prop() name: string = this.componentId;\n\n  /**\n   * Specifies a short hint that describes the expected value of the textarea\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Indicates whether or not the textarea is readonly\n   * @defaultValue false\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Indicates whether or not the textarea is required\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * Sets number of rows of text visible without needing to scroll in the textarea\n   */\n  @Prop() rows?: number;\n\n  /**\n   * The value of the textarea\n   */\n  @Prop({mutable: true}) value?: string;\n\n  /**\n   * Event emitted whenever the value of the textarea changes\n   */\n  @Event() pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;\n\n  private onTextareaChange = (ev: Event) => {\n    const textarea = ev.target as HTMLTextAreaElement;\n    isRequired(textarea, this);\n\n    if (textarea) {\n      this.value = textarea.innerHTML;\n    }\n\n    this.pdsTextareaChange.emit({value: this.value, event: ev});\n  };\n\n  private textareaClassNames() {\n    const classNames = ['pds-textarea__field'];\n\n    if (this.invalid && this.invalid === true) {\n      classNames.push('is-invalid');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n        <div class=\"pds-textarea\">\n          {this.label &&\n            <PdsLabel htmlFor={this.componentId} text={this.label} />\n          }\n          <textarea\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            class={this.textareaClassNames()}\n            disabled={this.disabled}\n            id={this.componentId}\n            name={this.name}\n            placeholder={this.placeholder}\n            readOnly={this.readonly}\n            required={this.required}\n            rows={this.rows}\n            onChange={this.onTextareaChange}\n          >{this.value}</textarea>\n          {this.helperMessage &&\n            <p\n              class=\"pds-textarea__helper-message\"\n              id={messageId(this.componentId, 'helper')}\n            >\n              {this.helperMessage}\n            </p>\n          }\n          {this.invalid &&\n            <p\n              aria-live=\"assertive\"\n              class=\"pds-textarea__error-message\"\n              id={messageId(this.componentId, 'error')}\n            >\n              {this.errorMessage}\n            </p>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6MAAA,IAAMA,eAAiB,oiHACvB,IAAAC,kBAAeD,e,ICSFE,YAAW,W,iHAwEdC,KAAAC,iBAAmB,SAACC,GAC1B,IAAMC,EAAWD,EAAGE,OACpBC,WAAWF,EAAUG,GAErB,GAAIH,EAAU,CACZG,EAAKC,MAAQJ,EAASK,S,CAGxBF,EAAKG,kBAAkBC,KAAK,CAACH,MAAOD,EAAKC,MAAOI,MAAOT,G,2CApEtC,M,sEAgBc,M,+BAUVF,KAAKY,Y,yCAWT,M,cAMA,M,yCA4BXb,EAAAc,UAAAC,mBAAA,WACN,IAAMC,EAAa,CAAC,uBAEpB,GAAIf,KAAKgB,SAAWhB,KAAKgB,UAAY,KAAM,CACzCD,EAAWE,KAAK,a,CAGlB,OAAOF,EAAWG,KAAK,K,EAGzBnB,EAAAc,UAAAM,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2DACYtB,KAAKuB,SAAW,OAAS,MAExCH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,gBACRxB,KAAKyB,OACJL,EAACM,SAAQ,CAAAJ,IAAA,2CAACK,QAAS3B,KAAKY,YAAagB,KAAM5B,KAAKyB,QAElDL,EAAA,YAAAE,IAAA,8DACoBO,kBAAkB7B,KAAKY,YAAaZ,KAAKgB,QAAShB,KAAK8B,eAAc,eACzE9B,KAAKgB,QAAU,OAASe,UACtCP,MAAOxB,KAAKc,qBACZS,SAAUvB,KAAKuB,SACfS,GAAIhC,KAAKY,YACTqB,KAAMjC,KAAKiC,KACXC,YAAalC,KAAKkC,YAClBC,SAAUnC,KAAKoC,SACfC,SAAUrC,KAAKqC,SACfC,KAAMtC,KAAKsC,KACXC,SAAUvC,KAAKC,kBACfD,KAAKO,OACNP,KAAK8B,eACJV,EAAA,KAAAE,IAAA,2CACEE,MAAM,+BACNQ,GAAIQ,UAAUxC,KAAKY,YAAa,WAE/BZ,KAAK8B,eAGT9B,KAAKgB,SACJI,EAAA,KAAAE,IAAA,uDACY,YACVE,MAAM,8BACNQ,GAAIQ,UAAUxC,KAAKY,YAAa,UAE/BZ,KAAKyC,e,gIAjII,G"}
+{"version":3,"names":["pdsTextareaCss","PdsTextareaStyle0","PdsTextarea","this","onTextareaChange","ev","textarea","target","isRequired","_this","value","innerHTML","pdsTextareaChange","emit","event","componentId","prototype","textareaClassNames","classNames","invalid","push","join","render","h","Host","key","disabled","class","label","PdsLabel","htmlFor","text","assignDescription","helperMessage","undefined","id","name","placeholder","readOnly","readonly","required","rows","onChange","messageId","errorMessage"],"sources":["src/components/pds-textarea/pds-textarea.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.tsx"],"sourcesContent":[":host {\n  --border-interactive-default: var(--pine-border-width-thin) solid var(--pine-color-grey-400);\n\n  --box-shadow-focus: 0 0 0 2px var(--color-focus-visible-outline);\n  --box-shadow-focus-error: 0 0 0 2px var(--color-focus-visible-outline-error);\n\n  --color: var(--pine-color-charcoal-400);\n  --color-background: var(--pine-color-white);\n  --color-background-disabled: var(--pine-color-grey-200);\n  --color-border-default: var(--pine-color-grey-400);\n  --color-border-error: var(--pine-color-red-300);\n  --color-border-focus-visible: var(--pine-color-grey-300);\n  --color-border-hover: var(--pine-color-grey-500);\n  --color-disabled-default: var(--pine-color-charcoal-200);\n  --color-error-default: var(--pine-color-red-300);\n  --color-focus-visible-outline: var(--pine-color-blue-200);\n  --color-focus-visible-outline-error: var(--pine-color-red-200);\n  --color-placeholder-default: var(--pine-color-charcoal-200);\n\n  --font-size-field: var(--pine-font-size-100);\n  --font-size-helper-message: var(--pine-font-size-075);\n  --font-size-label: var(--pine-font-size-100);\n  --font-weight-field: var(--pine-font-weight-normal);\n  --font-weight-helper-message: var(--pine-font-weight-normal);\n  --font-weight-label: var(--pine-font-weight-medium);\n\n  --line-height-field: var(--pine-line-height-150);\n  --line-height-helper-message: var(--pine-line-height-125);\n  --line-height-label: var(--pine-line-height-150);\n\n  --spacing-margin-block-end-label: var(--pine-spacing-100);\n  --spacing-margin-block-start-helper-message: var(--pine-spacing-100);\n  --spacing-padding-block-field: var(--pine-spacing-100);\n  --spacing-padding-inline-field: var(--pine-spacing-200);\n\n  display: inline;\n}\n\n.pds-textarea {\n  display: flex;\n  flex-direction: column;\n}\n\nlabel {\n  display: block;\n  font-size: var(--font-size-label);\n  font-weight: var(--font-weight-label);\n  line-height: var(--line-height-label);\n  margin-block-end: var(--spacing-margin-block-end-label);\n}\n\n.pds-textarea__field {\n  background-color: var(--color-background);\n  border: var(--pine-border-interactive-default);\n  border-radius: var(--pine-border-radius-md);\n  font-family: inherit;\n  font-size: var(--font-size-field);\n  font-weight: var(--font-weight-field);\n  line-height: var(--line-height-field);\n  padding: var(--spacing-padding-block-field) var(--spacing-padding-inline-field);\n\n  &:hover:not(:disabled, .is-invalid) {\n    border-color: var(--color-border-hover);\n  }\n\n  &:disabled {\n    background-color: var(--color-background-disabled);\n    color: var(--color-disabled-default);\n    cursor: not-allowed;\n  }\n\n  &:focus-visible {\n    // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n    box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n    outline: none;\n  }\n\n  &::placeholder {\n    color: var(--color-placeholder-default);\n  }\n\n  &.is-invalid {\n    border-color: var(--color-border-error);\n\n    &:focus-visible {\n      box-shadow: var(--box-shadow-focus-error);\n    }\n  }\n}\n\n.pds-textarea__error-message,\n.pds-textarea__helper-message {\n  font-size: var(--font-size-helper-message);\n  font-weight: var(--font-weight-helper-message);\n  line-height: var(--line-height-helper-message);\n  margin-block-start: var(--spacing-margin-block-start-helper-message);\n}\n\n.pds-textarea__error-message {\n  color: var(--color-error-default);\n}\n","import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, isRequired, messageId } from '../../utils/form';\nimport { TextareaChangeEventDetail } from './textarea-interface';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n  tag: 'pds-textarea',\n  styleUrl: 'pds-textarea.scss',\n  shadow: true,\n})\nexport class PdsTextarea {\n  @Element() el: HTMLPdsTextareaElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Indicates whether or not the textarea is disabled\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Specifies the error text and provides an error-themed treatment to the field\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays a hint or description of the textarea\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * Indicates whether or not the textarea is invalid or throws an error\n   * @defaultValue false\n   */\n  @Prop({mutable: true}) invalid = false;       // eslint-disable-line @stencil-community/strict-mutable\n\n  /**\n   * Text to be displayed as the textarea label\n   */\n  @Prop() label?: string;\n\n  /**\n   * Specifies the name, submitted with the form name/value pair. This value will mirror the componentId\n   */\n  @Prop() name: string = this.componentId;\n\n  /**\n   * Specifies a short hint that describes the expected value of the textarea\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Indicates whether or not the textarea is readonly\n   * @defaultValue false\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Indicates whether or not the textarea is required\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * Sets number of rows of text visible without needing to scroll in the textarea\n   */\n  @Prop() rows?: number;\n\n  /**\n   * The value of the textarea\n   */\n  @Prop({mutable: true}) value?: string;\n\n  /**\n   * Event emitted whenever the value of the textarea changes\n   */\n  @Event() pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;\n\n  private onTextareaChange = (ev: Event) => {\n    const textarea = ev.target as HTMLTextAreaElement;\n    isRequired(textarea, this);\n\n    if (textarea) {\n      this.value = textarea.innerHTML;\n    }\n\n    this.pdsTextareaChange.emit({value: this.value, event: ev});\n  };\n\n  private textareaClassNames() {\n    const classNames = ['pds-textarea__field'];\n\n    if (this.invalid && this.invalid === true) {\n      classNames.push('is-invalid');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n        <div class=\"pds-textarea\">\n          {this.label &&\n            <PdsLabel htmlFor={this.componentId} text={this.label} />\n          }\n          <textarea\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            class={this.textareaClassNames()}\n            disabled={this.disabled}\n            id={this.componentId}\n            name={this.name}\n            placeholder={this.placeholder}\n            readOnly={this.readonly}\n            required={this.required}\n            rows={this.rows}\n            onChange={this.onTextareaChange}\n          >{this.value}</textarea>\n          {this.helperMessage &&\n            <p\n              class=\"pds-textarea__helper-message\"\n              id={messageId(this.componentId, 'helper')}\n            >\n              {this.helperMessage}\n            </p>\n          }\n          {this.invalid &&\n            <p\n              aria-live=\"assertive\"\n              class=\"pds-textarea__error-message\"\n              id={messageId(this.componentId, 'error')}\n            >\n              {this.errorMessage}\n            </p>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6MAAA,IAAMA,eAAiB,iiHACvB,IAAAC,kBAAeD,e,ICSFE,YAAW,W,iHAwEdC,KAAAC,iBAAmB,SAACC,GAC1B,IAAMC,EAAWD,EAAGE,OACpBC,WAAWF,EAAUG,GAErB,GAAIH,EAAU,CACZG,EAAKC,MAAQJ,EAASK,S,CAGxBF,EAAKG,kBAAkBC,KAAK,CAACH,MAAOD,EAAKC,MAAOI,MAAOT,G,2CApEtC,M,sEAgBc,M,+BAUVF,KAAKY,Y,yCAWT,M,cAMA,M,yCA4BXb,EAAAc,UAAAC,mBAAA,WACN,IAAMC,EAAa,CAAC,uBAEpB,GAAIf,KAAKgB,SAAWhB,KAAKgB,UAAY,KAAM,CACzCD,EAAWE,KAAK,a,CAGlB,OAAOF,EAAWG,KAAK,K,EAGzBnB,EAAAc,UAAAM,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2DACYtB,KAAKuB,SAAW,OAAS,MAExCH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,gBACRxB,KAAKyB,OACJL,EAACM,SAAQ,CAAAJ,IAAA,2CAACK,QAAS3B,KAAKY,YAAagB,KAAM5B,KAAKyB,QAElDL,EAAA,YAAAE,IAAA,8DACoBO,kBAAkB7B,KAAKY,YAAaZ,KAAKgB,QAAShB,KAAK8B,eAAc,eACzE9B,KAAKgB,QAAU,OAASe,UACtCP,MAAOxB,KAAKc,qBACZS,SAAUvB,KAAKuB,SACfS,GAAIhC,KAAKY,YACTqB,KAAMjC,KAAKiC,KACXC,YAAalC,KAAKkC,YAClBC,SAAUnC,KAAKoC,SACfC,SAAUrC,KAAKqC,SACfC,KAAMtC,KAAKsC,KACXC,SAAUvC,KAAKC,kBACfD,KAAKO,OACNP,KAAK8B,eACJV,EAAA,KAAAE,IAAA,2CACEE,MAAM,+BACNQ,GAAIQ,UAAUxC,KAAKY,YAAa,WAE/BZ,KAAK8B,eAGT9B,KAAKgB,SACJI,EAAA,KAAAE,IAAA,uDACY,YACVE,MAAM,8BACNQ,GAAIQ,UAAUxC,KAAKY,YAAa,UAE/BZ,KAAKyC,e,gIAjII,G"}

package/dist/esm-es5/pds-tooltip.entry.js

@@ -1,2 +1,2 @@
-import{__awaiter,__generator}from"tslib";import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-6f0bb1b9.js";var positionTooltip=function(t){var r=t.elem,o=t.elemPlacement,a=t.overlay,i=t.offset,e=i===void 0?8:i;if(r==undefined)return;var n=r.getBoundingClientRect();var d=a.getBoundingClientRect();if(!o||o=="")return;switch(true){case o.includes("right"):a.style.top="50%";a.style.left="calc(".concat(n.width,"px + ").concat(e,"px)");a.style.transform="translateY(-50%)";if(o.includes("start")){a.style.top="0";a.style.transform="translateY(0)"}if(o.includes("end")){a.style.bottom="0";a.style.top="initial";a.style.transform="translateY(0)"}break;case o.includes("left"):a.style.top="50%";a.style.right="calc(".concat(n.width,"px + ").concat(e,"px)");a.style.transform="translateY(-50%)";if(o.includes("start")){a.style.top="0";a.style.transform="translateY(0)"}if(o.includes("end")){a.style.bottom="0";a.style.top="initial";a.style.transform="translateY(0)"}break;case o.includes("bottom"):a.style.top="calc(".concat(n.height,"px + ").concat(e,"px)");a.style.left="50%";a.style.transform="translateX(-50%)";if(o.includes("start")){a.style.left="0";a.style.transform="translateX(0)"}if(o.includes("end")){a.style.left="initial";a.style.right="0";a.style.transform="translateX(0)"}break;case o.includes("top"):a.style.top="calc((".concat(d.height,"px + ").concat(e,"px) * -1)");a.style.left="50%";a.style.transform="translateX(-50%)";if(o.includes("start")){a.style.left="0";a.style.transform="translateX(0)"}if(o.includes("end")){a.style.left="initial";a.style.right="0";a.style.transform="translateX(0)"}break}};var pdsTooltipCss=':host{--border-radius-overlay:var(--pine-border-radius-125);--border-width-arrow-down:var(--sizing-arrow-default) var(--sizing-arrow-default) 0;--border-width-arrow-left:var(--sizing-arrow-default) var(--sizing-arrow-default) var(--sizing-arrow-default) 0;--border-width-arrow-right:var(--sizing-arrow-default) 0 var(--sizing-arrow-default) var(--sizing-arrow-default);--border-width-arrow-up:0 var(--sizing-arrow-default) var(--sizing-arrow-default);--box-shadow-default:var(--pine-box-shadow-md);--color-background-default:var(--pine-color-charcoal-400);--color-text-default:var(--pine-color-white);--font-size-overlay:var(--pine-font-size-087);--line-height-overlay:var(--pine-line-height-125);--sizing-arrow-default:6px;--sizing-arrow-offset:14px;--sizing-width-default:320px;--spacing-padding-overlay:var(--pine-spacing-100) calc(var(--pine-spacing-300) / 2);display:inline-block;position:relative}:host ::slotted([slot=content]){white-space:normal;width:var(--sizing-width-default)}.pds-tooltip__content{background-color:var(--color-background-default);border-radius:var(--border-radius-overlay);-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default);color:var(--color-text-default);font-size:var(--font-size-overlay);line-height:var(--line-height-overlay);opacity:0;padding:var(--spacing-padding-overlay);position:absolute;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content}.pds-tooltip--is-open .pds-tooltip__content{opacity:1;visibility:visible;z-index:1}:host(.pds-tooltip--has-html-content) .pds-tooltip__content{width:auto}.pds-tooltip__content::after{border-color:transparent;border-right-color:transparent;border-style:solid;border-width:var(--border-width-arrow-left);content:"";height:0;position:absolute;width:0}.pds-tooltip--right .pds-tooltip__content::after{border-inline-end-color:var(--color-background-default);border-width:var(--border-width-arrow-left);left:calc(var(--sizing-arrow-default) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--right-end .pds-tooltip__content::after{border-inline-end-color:var(--color-background-default);border-width:var(--border-width-arrow-left);bottom:var(--sizing-arrow-offset);left:calc(var(--sizing-arrow-default) * -1);top:initial}.pds-tooltip--right-start .pds-tooltip__content::after{border-inline-end-color:var(--color-background-default);border-width:var(--border-width-arrow-left);left:calc(var(--sizing-arrow-default) * -1);top:var(--sizing-arrow-offset)}.pds-tooltip--top .pds-tooltip__content::after{border-block-start-color:var(--color-background-default);border-width:var(--border-width-arrow-down);bottom:calc(var(--sizing-arrow-default) * -1);left:50%;top:initial;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--top-start .pds-tooltip__content::after{border-block-start-color:var(--color-background-default);border-width:var(--border-width-arrow-down);bottom:calc(var(--sizing-arrow-default) * -1);left:var(--sizing-arrow-offset);top:initial}.pds-tooltip--top-end .pds-tooltip__content::after{border-block-start-color:var(--color-background-default);border-width:var(--border-width-arrow-down);bottom:calc(var(--sizing-arrow-default) * -1);left:initial;right:var(--sizing-arrow-offset);top:initial}.pds-tooltip--left .pds-tooltip__content::after{border-inline-start-color:var(--color-background-default);border-width:var(--border-width-arrow-right);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--left-end .pds-tooltip__content::after{border-inline-start-color:var(--color-background-default);border-width:var(--border-width-arrow-right);bottom:var(--sizing-arrow-offset);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:initial}.pds-tooltip--left-start .pds-tooltip__content::after{border-inline-start-color:var(--color-background-default);border-width:var(--border-width-arrow-right);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:var(--sizing-arrow-offset)}.pds-tooltip--bottom .pds-tooltip__content::after{border-block-end-color:var(--color-background-default);border-width:var(--border-width-arrow-up);left:50%;top:calc(var(--sizing-arrow-default) * -1);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--bottom-end .pds-tooltip__content::after{border-block-end-color:var(--color-background-default);border-width:var(--border-width-arrow-up);left:initial;right:var(--sizing-arrow-offset);top:calc(var(--sizing-arrow-default) * -1)}.pds-tooltip--bottom-start .pds-tooltip__content::after{border-block-end-color:var(--color-background-default);border-width:var(--border-width-arrow-up);left:var(--sizing-arrow-offset);top:calc(var(--sizing-arrow-default) * -1)}.pds-tooltip--no-arrow .pds-tooltip__content::after{border-width:0}';var PdsTooltipStyle0=pdsTooltipCss;var PdsTooltip=function(){function t(t){var r=this;registerInstance(this,t);this.pdsTooltipHide=createEvent(this,"pdsTooltipHide",7);this.pdsTooltipShow=createEvent(this,"pdsTooltipShow",7);this.handleHide=function(){r.hideTooltip();r.pdsTooltipHide.emit()};this.handleShow=function(){r.showTooltip();r.pdsTooltipShow.emit()};this.isOpen=false;this.content=undefined;this.componentId=undefined;this.hasArrow=true;this.htmlContent=false;this.placement="right";this.opened=false}t.prototype.handleOpenToggle=function(){if(this.opened){this.handleShow()}else{this.handleHide()}};t.prototype.componentWillLoad=function(){if(this.opened){this.showTooltip()}this.el.addEventListener("blur",this.handleHide,true);this.el.addEventListener("focus",this.handleShow,true)};t.prototype.componentDidUpdate=function(){if(this.opened){this.showTooltip()}};t.prototype.componentDidRender=function(){positionTooltip({elem:this.el,elemPlacement:this.placement,overlay:this.contentEl})};t.prototype.showTooltip=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.opened=true;return[2]}))}))};t.prototype.hideTooltip=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.opened=false;return[2]}))}))};t.prototype.render=function(){var t=this;return h(Host,{key:"088766be31b8716e158cbffd4afc4ada0f14dc3d",onMouseEnter:this.handleShow,onMouseLeave:this.handleHide,onFocusin:this.handleShow,onFocusout:this.handleHide},h("div",{key:"c4fb29b5d5834a9e94f040ded6daf15cf3fcc6ff",class:"\n            pds-tooltip\n            pds-tooltip--".concat(this.placement,"\n            ").concat(this.htmlContent?"pds-tooltip--has-html-content":"","\n            ").concat(this.opened?"pds-tooltip--is-open":"","\n            ").concat(this.hasArrow?"":"pds-tooltip--no-arrow","\n          ")},h("span",{key:"25a69f567a33df83ff784d36de5bce86874d6d1d","aria-describedby":this.componentId,class:"pds-tooltip__trigger"},h("slot",{key:"eab3bbca9b913b04ef4dfe7a8e472c43d57c4979"})),h("div",{key:"bdaa9f26f848b440a8432a44481f8a1059ae0689",class:"pds-tooltip__content","aria-hidden":this.opened?"false":"true","aria-live":this.opened?"polite":"off",id:this.componentId,ref:function(r){return t.contentEl=r},role:"tooltip"},h("slot",{key:"0e62fe237e9a39208aa2146e2dc1d6df6b25b41d",name:"content"}),this.content)))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{opened:["handleOpenToggle"]}},enumerable:false,configurable:true});return t}();PdsTooltip.style=PdsTooltipStyle0;export{PdsTooltip as pds_tooltip};
+import{__awaiter,__generator}from"tslib";import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-6f0bb1b9.js";var positionTooltip=function(t){var r=t.elem,o=t.elemPlacement,a=t.overlay,i=t.offset,e=i===void 0?8:i;if(r==undefined)return;var n=r.getBoundingClientRect();var d=a.getBoundingClientRect();if(!o||o=="")return;switch(true){case o.includes("right"):a.style.top="50%";a.style.left="calc(".concat(n.width,"px + ").concat(e,"px)");a.style.transform="translateY(-50%)";if(o.includes("start")){a.style.top="0";a.style.transform="translateY(0)"}if(o.includes("end")){a.style.bottom="0";a.style.top="initial";a.style.transform="translateY(0)"}break;case o.includes("left"):a.style.top="50%";a.style.right="calc(".concat(n.width,"px + ").concat(e,"px)");a.style.transform="translateY(-50%)";if(o.includes("start")){a.style.top="0";a.style.transform="translateY(0)"}if(o.includes("end")){a.style.bottom="0";a.style.top="initial";a.style.transform="translateY(0)"}break;case o.includes("bottom"):a.style.top="calc(".concat(n.height,"px + ").concat(e,"px)");a.style.left="50%";a.style.transform="translateX(-50%)";if(o.includes("start")){a.style.left="0";a.style.transform="translateX(0)"}if(o.includes("end")){a.style.left="initial";a.style.right="0";a.style.transform="translateX(0)"}break;case o.includes("top"):a.style.top="calc((".concat(d.height,"px + ").concat(e,"px) * -1)");a.style.left="50%";a.style.transform="translateX(-50%)";if(o.includes("start")){a.style.left="0";a.style.transform="translateX(0)"}if(o.includes("end")){a.style.left="initial";a.style.right="0";a.style.transform="translateX(0)"}break}};var pdsTooltipCss=':host{--border-radius-overlay:var(--pine-border-radius-125);--border-width-arrow-down:var(--sizing-arrow-default) var(--sizing-arrow-default) 0;--border-width-arrow-left:var(--sizing-arrow-default) var(--sizing-arrow-default) var(--sizing-arrow-default) 0;--border-width-arrow-right:var(--sizing-arrow-default) 0 var(--sizing-arrow-default) var(--sizing-arrow-default);--border-width-arrow-up:0 var(--sizing-arrow-default) var(--sizing-arrow-default);--box-shadow-default:var(--pine-box-shadow-md);--color-background-default:var(--pine-color-charcoal-400);--color-text-default:var(--pine-color-white);--font-size-overlay:var(--pine-font-size-087);--line-height-overlay:var(--pine-line-height-125);--sizing-arrow-default:6px;--sizing-arrow-offset:14px;--sizing-width-default:320px;--spacing-padding-overlay:var(--pine-spacing-100) calc(var(--pine-spacing-300) / 2);display:inline-block;position:relative}:host ::slotted(*){display:-ms-flexbox;display:flex}:host ::slotted([slot=content]){display:block;white-space:normal;width:var(--sizing-width-default)}.pds-tooltip__content{background-color:var(--color-background-default);border-radius:var(--border-radius-overlay);-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default);color:var(--color-text-default);font-size:var(--font-size-overlay);line-height:var(--line-height-overlay);opacity:0;padding:var(--spacing-padding-overlay);position:absolute;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content}.pds-tooltip--is-open .pds-tooltip__content{opacity:1;visibility:visible;z-index:1}:host(.pds-tooltip--has-html-content) .pds-tooltip__content{width:auto}.pds-tooltip__content::after{border-color:transparent;border-right-color:transparent;border-style:solid;border-width:var(--border-width-arrow-left);content:"";height:0;position:absolute;width:0}.pds-tooltip--right .pds-tooltip__content::after{border-inline-end-color:var(--color-background-default);border-width:var(--border-width-arrow-left);left:calc(var(--sizing-arrow-default) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--right-end .pds-tooltip__content::after{border-inline-end-color:var(--color-background-default);border-width:var(--border-width-arrow-left);bottom:var(--sizing-arrow-offset);left:calc(var(--sizing-arrow-default) * -1);top:initial}.pds-tooltip--right-start .pds-tooltip__content::after{border-inline-end-color:var(--color-background-default);border-width:var(--border-width-arrow-left);left:calc(var(--sizing-arrow-default) * -1);top:var(--sizing-arrow-offset)}.pds-tooltip--top .pds-tooltip__content::after{border-block-start-color:var(--color-background-default);border-width:var(--border-width-arrow-down);bottom:calc(var(--sizing-arrow-default) * -1);left:50%;top:initial;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--top-start .pds-tooltip__content::after{border-block-start-color:var(--color-background-default);border-width:var(--border-width-arrow-down);bottom:calc(var(--sizing-arrow-default) * -1);left:var(--sizing-arrow-offset);top:initial}.pds-tooltip--top-end .pds-tooltip__content::after{border-block-start-color:var(--color-background-default);border-width:var(--border-width-arrow-down);bottom:calc(var(--sizing-arrow-default) * -1);left:initial;right:var(--sizing-arrow-offset);top:initial}.pds-tooltip--left .pds-tooltip__content::after{border-inline-start-color:var(--color-background-default);border-width:var(--border-width-arrow-right);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--left-end .pds-tooltip__content::after{border-inline-start-color:var(--color-background-default);border-width:var(--border-width-arrow-right);bottom:var(--sizing-arrow-offset);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:initial}.pds-tooltip--left-start .pds-tooltip__content::after{border-inline-start-color:var(--color-background-default);border-width:var(--border-width-arrow-right);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:var(--sizing-arrow-offset)}.pds-tooltip--bottom .pds-tooltip__content::after{border-block-end-color:var(--color-background-default);border-width:var(--border-width-arrow-up);left:50%;top:calc(var(--sizing-arrow-default) * -1);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--bottom-end .pds-tooltip__content::after{border-block-end-color:var(--color-background-default);border-width:var(--border-width-arrow-up);left:initial;right:var(--sizing-arrow-offset);top:calc(var(--sizing-arrow-default) * -1)}.pds-tooltip--bottom-start .pds-tooltip__content::after{border-block-end-color:var(--color-background-default);border-width:var(--border-width-arrow-up);left:var(--sizing-arrow-offset);top:calc(var(--sizing-arrow-default) * -1)}.pds-tooltip--no-arrow .pds-tooltip__content::after{border-width:0}';var PdsTooltipStyle0=pdsTooltipCss;var PdsTooltip=function(){function t(t){var r=this;registerInstance(this,t);this.pdsTooltipHide=createEvent(this,"pdsTooltipHide",7);this.pdsTooltipShow=createEvent(this,"pdsTooltipShow",7);this.handleHide=function(){r.hideTooltip();r.pdsTooltipHide.emit()};this.handleShow=function(){r.showTooltip();r.pdsTooltipShow.emit()};this.isOpen=false;this.content=undefined;this.componentId=undefined;this.hasArrow=true;this.htmlContent=false;this.placement="right";this.opened=false}t.prototype.handleOpenToggle=function(){if(this.opened){this.handleShow()}else{this.handleHide()}};t.prototype.componentWillLoad=function(){if(this.opened){this.showTooltip()}this.el.addEventListener("blur",this.handleHide,true);this.el.addEventListener("focus",this.handleShow,true)};t.prototype.componentDidUpdate=function(){if(this.opened){this.showTooltip()}};t.prototype.componentDidRender=function(){positionTooltip({elem:this.el,elemPlacement:this.placement,overlay:this.contentEl})};t.prototype.showTooltip=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.opened=true;return[2]}))}))};t.prototype.hideTooltip=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.opened=false;return[2]}))}))};t.prototype.render=function(){var t=this;return h(Host,{key:"088766be31b8716e158cbffd4afc4ada0f14dc3d",onMouseEnter:this.handleShow,onMouseLeave:this.handleHide,onFocusin:this.handleShow,onFocusout:this.handleHide},h("div",{key:"c4fb29b5d5834a9e94f040ded6daf15cf3fcc6ff",class:"\n            pds-tooltip\n            pds-tooltip--".concat(this.placement,"\n            ").concat(this.htmlContent?"pds-tooltip--has-html-content":"","\n            ").concat(this.opened?"pds-tooltip--is-open":"","\n            ").concat(this.hasArrow?"":"pds-tooltip--no-arrow","\n          ")},h("span",{key:"25a69f567a33df83ff784d36de5bce86874d6d1d","aria-describedby":this.componentId,class:"pds-tooltip__trigger"},h("slot",{key:"eab3bbca9b913b04ef4dfe7a8e472c43d57c4979"})),h("div",{key:"bdaa9f26f848b440a8432a44481f8a1059ae0689",class:"pds-tooltip__content","aria-hidden":this.opened?"false":"true","aria-live":this.opened?"polite":"off",id:this.componentId,ref:function(r){return t.contentEl=r},role:"tooltip"},h("slot",{key:"0e62fe237e9a39208aa2146e2dc1d6df6b25b41d",name:"content"}),this.content)))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{opened:["handleOpenToggle"]}},enumerable:false,configurable:true});return t}();PdsTooltip.style=PdsTooltipStyle0;export{PdsTooltip as pds_tooltip};
 //# sourceMappingURL=pds-tooltip.entry.js.map

package/dist/esm-es5/pds-tooltip.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["positionTooltip","_a","elem","elemPlacement","overlay","_b","offset","undefined","rect","getBoundingClientRect","contentRect","includes","style","top","left","concat","width","transform","bottom","right","height","pdsTooltipCss","PdsTooltipStyle0","PdsTooltip","this","handleHide","_this","hideTooltip","pdsTooltipHide","emit","handleShow","showTooltip","pdsTooltipShow","class_1","prototype","handleOpenToggle","opened","componentWillLoad","el","addEventListener","componentDidUpdate","componentDidRender","placement","contentEl","render","h","Host","key","onMouseEnter","onMouseLeave","onFocusin","onFocusout","class","htmlContent","hasArrow","componentId","id","ref","role","name","content"],"sources":["src/utils/overlay.ts","src/components/pds-tooltip/pds-tooltip.scss?tag=pds-tooltip&encapsulation=shadow","src/components/pds-tooltip/pds-tooltip.tsx"],"sourcesContent":["interface OverlayArgs {\n  elem: HTMLElement;\n  elemPlacement: string;\n  overlay: HTMLElement;\n  offset?: number;\n}\n\nexport const positionTooltip = ({elem, elemPlacement, overlay, offset = 8}: OverlayArgs) => {\n  if (elem == undefined) return;\n\n  const rect = elem.getBoundingClientRect();\n  const contentRect = overlay.getBoundingClientRect();\n\n  // Exit the function if the placement is not set\n  if (!elemPlacement || elemPlacement == \"\") return;\n\n  switch (true) {\n    case elemPlacement.includes(\"right\"):\n      overlay.style.top = '50%';\n      overlay.style.left = `calc(${rect.width}px + ${offset}px)`;\n      overlay.style.transform = 'translateY(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.top = '0';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.bottom = '0';\n        overlay.style.top = 'initial';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      break;\n\n    case elemPlacement.includes(\"left\"):\n      overlay.style.top = '50%';\n      overlay.style.right = `calc(${rect.width}px + ${offset}px)`;\n      overlay.style.transform = 'translateY(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.top = '0';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.bottom = '0';\n        overlay.style.top = 'initial';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      break;\n\n    case elemPlacement.includes(\"bottom\"):\n      overlay.style.top = `calc(${rect.height}px + ${offset}px)`;\n      overlay.style.left = '50%';\n      overlay.style.transform = 'translateX(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.left = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.left = 'initial';\n        overlay.style.right = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n\n      break;\n\n    case elemPlacement.includes(\"top\"):\n      overlay.style.top = `calc((${contentRect.height}px + ${offset}px) * -1)`;\n      overlay.style.left = '50%';\n      overlay.style.transform = 'translateX(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.left = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.left = 'initial';\n        overlay.style.right = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n\n      break;\n  }\n}\n",":host {\n  --border-radius-overlay: var(--pine-border-radius-125);\n\n  --border-width-arrow-down: var(--sizing-arrow-default) var(--sizing-arrow-default) 0;\n  --border-width-arrow-left: var(--sizing-arrow-default) var(--sizing-arrow-default) var(--sizing-arrow-default) 0;\n  --border-width-arrow-right: var(--sizing-arrow-default) 0 var(--sizing-arrow-default) var(--sizing-arrow-default);\n  --border-width-arrow-up: 0 var(--sizing-arrow-default) var(--sizing-arrow-default);\n\n  --box-shadow-default: var(--pine-box-shadow-md);\n\n  --color-background-default: var(--pine-color-charcoal-400);\n  --color-text-default: var(--pine-color-white);\n\n  --font-size-overlay: var(--pine-font-size-087);\n\n  --line-height-overlay: var(--pine-line-height-125);\n\n  --sizing-arrow-default: 6px;\n  --sizing-arrow-offset: 14px;\n  --sizing-width-default: 320px;\n\n  --spacing-padding-overlay: var(--pine-spacing-100) calc(var(--pine-spacing-300) / 2);\n\n  display: inline-block;\n  position: relative;\n\n  ::slotted([slot=\"content\"]) {\n    white-space: normal;\n    width: var(--sizing-width-default);\n  }\n}\n\n.pds-tooltip__content {\n  background-color: var(--color-background-default);\n  border-radius: var(--border-radius-overlay);\n  box-shadow: var(--box-shadow-default);\n  color: var(--color-text-default);\n  font-size: var(--font-size-overlay);\n  line-height: var(--line-height-overlay);\n  // TODO: need to use block / none but the tooltip content width and height are needed for calculations\n  opacity: 0;\n  padding: var(--spacing-padding-overlay);\n  position: absolute;\n  visibility: hidden;\n  width: max-content;\n\n  .pds-tooltip--is-open & {\n    // TODO: need to use block / none but the tooltip content width and height are needed for calculations\n    opacity: 1;\n    visibility: visible;\n    z-index: 1;\n  }\n\n  :host(.pds-tooltip--has-html-content) & {\n    width: auto;\n  }\n\n  &::after {\n    border-color: transparent;\n    border-right-color: transparent;\n    border-style: solid;\n    border-width: var(--border-width-arrow-left);\n    content: '';\n    height: 0;\n    position: absolute;\n    width: 0;\n\n    .pds-tooltip--right & {\n      border-inline-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-left);\n      left: calc(var(--sizing-arrow-default) * -1);\n      top: 50%;\n      transform: translateY(-50%);\n    }\n\n    .pds-tooltip--right-end & {\n      border-inline-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-left);\n      bottom: var(--sizing-arrow-offset);\n      left: calc(var(--sizing-arrow-default) * -1);\n      top: initial;\n    }\n\n    .pds-tooltip--right-start & {\n      border-inline-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-left);\n      left: calc(var(--sizing-arrow-default) * -1);\n      top: var(--sizing-arrow-offset);\n    }\n\n    .pds-tooltip--top & {\n      border-block-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-down);\n      bottom: calc(var(--sizing-arrow-default) * -1);\n      left: 50%;\n      top: initial;\n      transform: translateX(-50%);\n    }\n\n    .pds-tooltip--top-start & {\n      border-block-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-down);\n      bottom: calc(var(--sizing-arrow-default) * -1);\n      left: var(--sizing-arrow-offset);\n      top: initial;\n    }\n\n    .pds-tooltip--top-end & {\n      border-block-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-down);\n      bottom: calc(var(--sizing-arrow-default) * -1);\n      left: initial;\n      right: var(--sizing-arrow-offset);\n      top: initial;\n    }\n\n    .pds-tooltip--left & {\n      border-inline-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-right);\n      left: initial;\n      right: calc(var(--sizing-arrow-default) * -1);\n      top: 50%;\n      transform: translateY(-50%);\n    }\n\n    .pds-tooltip--left-end & {\n      border-inline-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-right);\n      bottom: var(--sizing-arrow-offset);\n      left: initial;\n      right: calc(var(--sizing-arrow-default) * -1);\n      top: initial;\n    }\n\n    .pds-tooltip--left-start & {\n      border-inline-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-right);\n      left: initial;\n      right: calc(var(--sizing-arrow-default) * -1);\n      top: var(--sizing-arrow-offset);\n    }\n\n    .pds-tooltip--bottom & {\n      border-block-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-up);\n      left: 50%;\n      top: calc(var(--sizing-arrow-default) * -1);\n      transform: translateX(-50%);\n    }\n\n    .pds-tooltip--bottom-end & {\n      border-block-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-up);\n      left: initial;\n      right: var(--sizing-arrow-offset);\n      top: calc(var(--sizing-arrow-default) * -1);\n    }\n\n    .pds-tooltip--bottom-start & {\n      border-block-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-up);\n      left: var(--sizing-arrow-offset);\n      top: calc(var(--sizing-arrow-default) * -1);\n    }\n\n    .pds-tooltip--no-arrow & {\n      border-width: 0;\n    }\n  }\n}\n","import { Component, Element, Event, Host, Prop, State, h, EventEmitter, Method, Watch } from '@stencil/core';\nimport {\n  positionTooltip\n} from '../../utils/overlay';\n\n/**\n * @slot (default) - The tooltip's target element\n * @slot content - HTML content for the tooltip\n */\n\n@Component({\n  tag: 'pds-tooltip',\n  styleUrl: 'pds-tooltip.scss',\n  shadow: true,\n})\nexport class PdsTooltip {\n  private contentEl: HTMLElement | null;\n\n  /**\n   * Reference to the Host element\n   */\n  @Element() el: HTMLPdsTooltipElement;\n\n  /**\n   * Determines when the tooltip is open\n   * @defaultValue false\n   */\n  @State() isOpen = false;\n\n  /**\n   * Content for the tooltip. If HTML is required, use the content slot\n   */\n  @Prop() content: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether or not the tooltip has an arrow\n   * @defaultValue true\n   */\n  @Prop() hasArrow? = true;\n\n  /**\n   * Enable this option when using the content slot\n   * @defaultValue false\n   */\n  @Prop() htmlContent = false;\n\n  /**\n   * Determines the preferred position of the tooltip\n   * @defaultValue \"right\"\n   */\n  @Prop({ reflect: true }) placement:\n    'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'right';\n\n  /**\n   * Determines whether or not the tooltip is visible\n   * @defaultValue false\n   */\n  @Prop({mutable: true, reflect: true}) opened = false;\n\n  @Watch('opened')\n  handleOpenToggle() {\n    if (this.opened) {\n      this.handleShow();\n    } else {\n      this.handleHide();\n    }\n  }\n\n  /**\n   * Emitted after a tooltip is closed\n   */\n  @Event() pdsTooltipHide: EventEmitter;\n\n  /**\n   * Emitted after a tooltip is shown\n   */\n  @Event() pdsTooltipShow: EventEmitter;\n\n  componentWillLoad() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n\n    this.el.addEventListener('blur', this.handleHide, true);\n    this.el.addEventListener('focus', this.handleShow, true);\n  }\n\n  componentDidUpdate() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n  }\n\n  componentDidRender() {\n    positionTooltip({elem: this.el, elemPlacement: this.placement, overlay: this.contentEl});\n  }\n\n  /**\n   * Shows the tooltip by enabling the opened property\n   */\n  @Method()\n  async showTooltip() {\n    this.opened = true;\n  }\n\n  /**\n   * Hides the tooltip by disabling the opened property\n   */\n  @Method()\n  async hideTooltip() {\n    this.opened = false;\n  }\n\n  private handleHide = () => {\n    this.hideTooltip();\n    this.pdsTooltipHide.emit();\n  };\n\n  private handleShow = () => {\n    this.showTooltip();\n    this.pdsTooltipShow.emit();\n  };\n\n  render() {\n    return (\n      <Host\n        onMouseEnter={this.handleShow}\n        onMouseLeave={this.handleHide}\n        onFocusin={this.handleShow}\n        onFocusout={this.handleHide}\n      >\n        <div\n          class={`\n            pds-tooltip\n            pds-tooltip--${this.placement}\n            ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}\n            ${this.opened ? 'pds-tooltip--is-open' : ''}\n            ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}\n          `}\n        >\n          <span\n            aria-describedby={this.componentId}\n            class=\"pds-tooltip__trigger\"\n          >\n            <slot />\n          </span>\n\n          <div class=\"pds-tooltip__content\"\n            aria-hidden={this.opened ? 'false' : 'true'}\n            aria-live={this.opened ? 'polite' : 'off'}\n            id={this.componentId}\n            ref={(el) => (this.contentEl = el)}\n            role=\"tooltip\"\n          >\n            <slot\n              name=\"content\"\n            ></slot>\n            {this.content}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["positionTooltip","_a","elem","elemPlacement","overlay","_b","offset","undefined","rect","getBoundingClientRect","contentRect","includes","style","top","left","concat","width","transform","bottom","right","height","pdsTooltipCss","PdsTooltipStyle0","PdsTooltip","this","handleHide","_this","hideTooltip","pdsTooltipHide","emit","handleShow","showTooltip","pdsTooltipShow","class_1","prototype","handleOpenToggle","opened","componentWillLoad","el","addEventListener","componentDidUpdate","componentDidRender","placement","contentEl","render","h","Host","key","onMouseEnter","onMouseLeave","onFocusin","onFocusout","class","htmlContent","hasArrow","componentId","id","ref","role","name","content"],"sources":["src/utils/overlay.ts","src/components/pds-tooltip/pds-tooltip.scss?tag=pds-tooltip&encapsulation=shadow","src/components/pds-tooltip/pds-tooltip.tsx"],"sourcesContent":["interface OverlayArgs {\n  elem: HTMLElement;\n  elemPlacement: string;\n  overlay: HTMLElement;\n  offset?: number;\n}\n\nexport const positionTooltip = ({elem, elemPlacement, overlay, offset = 8}: OverlayArgs) => {\n  if (elem == undefined) return;\n\n  const rect = elem.getBoundingClientRect();\n  const contentRect = overlay.getBoundingClientRect();\n\n  // Exit the function if the placement is not set\n  if (!elemPlacement || elemPlacement == \"\") return;\n\n  switch (true) {\n    case elemPlacement.includes(\"right\"):\n      overlay.style.top = '50%';\n      overlay.style.left = `calc(${rect.width}px + ${offset}px)`;\n      overlay.style.transform = 'translateY(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.top = '0';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.bottom = '0';\n        overlay.style.top = 'initial';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      break;\n\n    case elemPlacement.includes(\"left\"):\n      overlay.style.top = '50%';\n      overlay.style.right = `calc(${rect.width}px + ${offset}px)`;\n      overlay.style.transform = 'translateY(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.top = '0';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.bottom = '0';\n        overlay.style.top = 'initial';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      break;\n\n    case elemPlacement.includes(\"bottom\"):\n      overlay.style.top = `calc(${rect.height}px + ${offset}px)`;\n      overlay.style.left = '50%';\n      overlay.style.transform = 'translateX(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.left = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.left = 'initial';\n        overlay.style.right = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n\n      break;\n\n    case elemPlacement.includes(\"top\"):\n      overlay.style.top = `calc((${contentRect.height}px + ${offset}px) * -1)`;\n      overlay.style.left = '50%';\n      overlay.style.transform = 'translateX(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.left = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.left = 'initial';\n        overlay.style.right = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n\n      break;\n  }\n}\n",":host {\n  --border-radius-overlay: var(--pine-border-radius-125);\n\n  --border-width-arrow-down: var(--sizing-arrow-default) var(--sizing-arrow-default) 0;\n  --border-width-arrow-left: var(--sizing-arrow-default) var(--sizing-arrow-default) var(--sizing-arrow-default) 0;\n  --border-width-arrow-right: var(--sizing-arrow-default) 0 var(--sizing-arrow-default) var(--sizing-arrow-default);\n  --border-width-arrow-up: 0 var(--sizing-arrow-default) var(--sizing-arrow-default);\n\n  --box-shadow-default: var(--pine-box-shadow-md);\n\n  --color-background-default: var(--pine-color-charcoal-400);\n  --color-text-default: var(--pine-color-white);\n\n  --font-size-overlay: var(--pine-font-size-087);\n\n  --line-height-overlay: var(--pine-line-height-125);\n\n  --sizing-arrow-default: 6px;\n  --sizing-arrow-offset: 14px;\n  --sizing-width-default: 320px;\n\n  --spacing-padding-overlay: var(--pine-spacing-100) calc(var(--pine-spacing-300) / 2);\n\n  display: inline-block;\n  position: relative;\n\n  ::slotted(*) {\n    display: flex;\n  }\n\n  ::slotted([slot=\"content\"]) {\n    display: block;\n    white-space: normal;\n    width: var(--sizing-width-default);\n  }\n}\n\n.pds-tooltip__content {\n  background-color: var(--color-background-default);\n  border-radius: var(--border-radius-overlay);\n  box-shadow: var(--box-shadow-default);\n  color: var(--color-text-default);\n  font-size: var(--font-size-overlay);\n  line-height: var(--line-height-overlay);\n  // TODO: need to use block / none but the tooltip content width and height are needed for calculations\n  opacity: 0;\n  padding: var(--spacing-padding-overlay);\n  position: absolute;\n  visibility: hidden;\n  width: max-content;\n\n  .pds-tooltip--is-open & {\n    // TODO: need to use block / none but the tooltip content width and height are needed for calculations\n    opacity: 1;\n    visibility: visible;\n    z-index: 1;\n  }\n\n  :host(.pds-tooltip--has-html-content) & {\n    width: auto;\n  }\n\n  &::after {\n    border-color: transparent;\n    border-right-color: transparent;\n    border-style: solid;\n    border-width: var(--border-width-arrow-left);\n    content: '';\n    height: 0;\n    position: absolute;\n    width: 0;\n\n    .pds-tooltip--right & {\n      border-inline-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-left);\n      left: calc(var(--sizing-arrow-default) * -1);\n      top: 50%;\n      transform: translateY(-50%);\n    }\n\n    .pds-tooltip--right-end & {\n      border-inline-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-left);\n      bottom: var(--sizing-arrow-offset);\n      left: calc(var(--sizing-arrow-default) * -1);\n      top: initial;\n    }\n\n    .pds-tooltip--right-start & {\n      border-inline-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-left);\n      left: calc(var(--sizing-arrow-default) * -1);\n      top: var(--sizing-arrow-offset);\n    }\n\n    .pds-tooltip--top & {\n      border-block-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-down);\n      bottom: calc(var(--sizing-arrow-default) * -1);\n      left: 50%;\n      top: initial;\n      transform: translateX(-50%);\n    }\n\n    .pds-tooltip--top-start & {\n      border-block-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-down);\n      bottom: calc(var(--sizing-arrow-default) * -1);\n      left: var(--sizing-arrow-offset);\n      top: initial;\n    }\n\n    .pds-tooltip--top-end & {\n      border-block-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-down);\n      bottom: calc(var(--sizing-arrow-default) * -1);\n      left: initial;\n      right: var(--sizing-arrow-offset);\n      top: initial;\n    }\n\n    .pds-tooltip--left & {\n      border-inline-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-right);\n      left: initial;\n      right: calc(var(--sizing-arrow-default) * -1);\n      top: 50%;\n      transform: translateY(-50%);\n    }\n\n    .pds-tooltip--left-end & {\n      border-inline-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-right);\n      bottom: var(--sizing-arrow-offset);\n      left: initial;\n      right: calc(var(--sizing-arrow-default) * -1);\n      top: initial;\n    }\n\n    .pds-tooltip--left-start & {\n      border-inline-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-right);\n      left: initial;\n      right: calc(var(--sizing-arrow-default) * -1);\n      top: var(--sizing-arrow-offset);\n    }\n\n    .pds-tooltip--bottom & {\n      border-block-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-up);\n      left: 50%;\n      top: calc(var(--sizing-arrow-default) * -1);\n      transform: translateX(-50%);\n    }\n\n    .pds-tooltip--bottom-end & {\n      border-block-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-up);\n      left: initial;\n      right: var(--sizing-arrow-offset);\n      top: calc(var(--sizing-arrow-default) * -1);\n    }\n\n    .pds-tooltip--bottom-start & {\n      border-block-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-up);\n      left: var(--sizing-arrow-offset);\n      top: calc(var(--sizing-arrow-default) * -1);\n    }\n\n    .pds-tooltip--no-arrow & {\n      border-width: 0;\n    }\n  }\n}\n","import { Component, Element, Event, Host, Prop, State, h, EventEmitter, Method, Watch } from '@stencil/core';\nimport {\n  positionTooltip\n} from '../../utils/overlay';\n\n/**\n * @slot (default) - The tooltip's target element\n * @slot content - HTML content for the tooltip\n */\n\n@Component({\n  tag: 'pds-tooltip',\n  styleUrl: 'pds-tooltip.scss',\n  shadow: true,\n})\nexport class PdsTooltip {\n  private contentEl: HTMLElement | null;\n\n  /**\n   * Reference to the Host element\n   */\n  @Element() el: HTMLPdsTooltipElement;\n\n  /**\n   * Determines when the tooltip is open\n   * @defaultValue false\n   */\n  @State() isOpen = false;\n\n  /**\n   * Content for the tooltip. If HTML is required, use the content slot\n   */\n  @Prop() content: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether or not the tooltip has an arrow\n   * @defaultValue true\n   */\n  @Prop() hasArrow? = true;\n\n  /**\n   * Enable this option when using the content slot\n   * @defaultValue false\n   */\n  @Prop() htmlContent = false;\n\n  /**\n   * Determines the preferred position of the tooltip\n   * @defaultValue \"right\"\n   */\n  @Prop({ reflect: true }) placement:\n    'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'right';\n\n  /**\n   * Determines whether or not the tooltip is visible\n   * @defaultValue false\n   */\n  @Prop({mutable: true, reflect: true}) opened = false;\n\n  @Watch('opened')\n  handleOpenToggle() {\n    if (this.opened) {\n      this.handleShow();\n    } else {\n      this.handleHide();\n    }\n  }\n\n  /**\n   * Emitted after a tooltip is closed\n   */\n  @Event() pdsTooltipHide: EventEmitter;\n\n  /**\n   * Emitted after a tooltip is shown\n   */\n  @Event() pdsTooltipShow: EventEmitter;\n\n  componentWillLoad() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n\n    this.el.addEventListener('blur', this.handleHide, true);\n    this.el.addEventListener('focus', this.handleShow, true);\n  }\n\n  componentDidUpdate() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n  }\n\n  componentDidRender() {\n    positionTooltip({elem: this.el, elemPlacement: this.placement, overlay: this.contentEl});\n  }\n\n  /**\n   * Shows the tooltip by enabling the opened property\n   */\n  @Method()\n  async showTooltip() {\n    this.opened = true;\n  }\n\n  /**\n   * Hides the tooltip by disabling the opened property\n   */\n  @Method()\n  async hideTooltip() {\n    this.opened = false;\n  }\n\n  private handleHide = () => {\n    this.hideTooltip();\n    this.pdsTooltipHide.emit();\n  };\n\n  private handleShow = () => {\n    this.showTooltip();\n    this.pdsTooltipShow.emit();\n  };\n\n  render() {\n    return (\n      <Host\n        onMouseEnter={this.handleShow}\n        onMouseLeave={this.handleHide}\n        onFocusin={this.handleShow}\n        onFocusout={this.handleHide}\n      >\n        <div\n          class={`\n            pds-tooltip\n            pds-tooltip--${this.placement}\n            ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}\n            ${this.opened ? 'pds-tooltip--is-open' : ''}\n            ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}\n          `}\n        >\n          <span\n            aria-describedby={this.componentId}\n            class=\"pds-tooltip__trigger\"\n          >\n            <slot />\n          </span>\n\n          <div class=\"pds-tooltip__content\"\n            aria-hidden={this.opened ? 'false' : 'true'}\n            aria-live={this.opened ? 'polite' : 'off'}\n            id={this.componentId}\n            ref={(el) => (this.contentEl = el)}\n            role=\"tooltip\"\n          >\n            <slot\n              name=\"content\"\n            ></slot>\n            {this.content}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/pine-core/p-019edcbb.entry.js

@@ -0,0 +1,2 @@
+import{r as a,h as r,H as n}from"./p-2f77dbd3.js";import{d as i}from"./p-b7897f94.js";const t=":host{display:block}details{--border-radius-default:var(--pine-border-radius-100);--box-shadow-focus:inset 0 0 0 2px var(--pine-color-blue-200);--color-content-background-default:var(--pine-color-white);--color-background-hover:var(--pine-color-grey-300);--color-text-default:var(--pine-color-charcoal-200);--color-text-active:var(--pine-color-charcoal-500);--color-text-hover:var(--pine-color-charcoal-300);--number-animation-transform-timing:200ms;--spacing-details-padding-inline:var(--pine-spacing-150);--spacing-summary-padding-block:var(--pine-spacing-050);--spacing-summary-padding-inline-start:var(--pine-spacing-100);--spacing-summary-padding-inline-end:var(--pine-spacing-050);--typography-default:var(--pine-font-weight-semi-bold) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);border-radius:var(--border-radius-default);padding-inline:var(--spacing-details-padding-inline)}details pds-icon{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:-webkit-transform var(--number-animation-transform-timing);transition:-webkit-transform var(--number-animation-transform-timing);transition:transform var(--number-animation-transform-timing);transition:transform var(--number-animation-transform-timing), -webkit-transform var(--number-animation-transform-timing)}details[open]{background-color:var(--color-content-background)}details[open] summary{color:var(--color-text-active);font:var(--typography-default)}details[open] summary pds-icon{-webkit-transform:scaleY(-1);transform:scaleY(-1);-webkit-transition:-webkit-transform var(--number-animation-transform-timing);transition:-webkit-transform var(--number-animation-transform-timing);transition:transform var(--number-animation-transform-timing);transition:transform var(--number-animation-transform-timing), -webkit-transform var(--number-animation-transform-timing)}summary{border-radius:var(--border-radius-default);color:var(--color-text-default);font:var(--typography-default);padding-block:var(--spacing-summary-padding-block);-webkit-padding-end:var(--spacing-summary-padding-inline-end);padding-inline-end:var(--spacing-summary-padding-inline-end);-webkit-padding-start:var(--spacing-summary-padding-inline-start);padding-inline-start:var(--spacing-summary-padding-inline-start);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}summary::-webkit-details-marker{display:none}summary:hover{background:var(--color-background-hover);color:var(--color-text-hover);cursor:pointer}summary:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}summary pds-icon{-webkit-margin-start:auto;margin-inline-start:auto}";const e=t;const o=class{constructor(r){a(this,r);this.handleToggle=()=>{this.isOpen=this.detailsEl.open};this.getOpenAttribute=()=>{if(this.isOpen!==false){return{open:true}}return""};this.componentId=undefined;this.isOpen=false}handleOpenState(a){this.isOpen=a}componentDidLoad(){this.detailsEl.addEventListener("toggle",this.handleToggle)}render(){return r(n,{key:"228d08704d0e735ed515308df91a7880c2c450ed",class:"pds-accordion",id:this.componentId},r("details",Object.assign({key:"442e319353f611a5f3d3de767de8dc0f86d2540e"},this.getOpenAttribute(),{ref:a=>this.detailsEl=a}),r("summary",{key:"c3b11619644caee3ba90854e608072436ae0ac34"},r("slot",{key:"fb9b2fa1c0e6a8ddce8e9575b31da5c248f075d5",name:"label"},"Details"),r("pds-icon",{key:"3435405fa293d47aa240a6bfa947fe0707c1154a",icon:i})),r("div",{key:"a35cb679b545fbbd408a4217764b66eabd495c6e",class:"pds-accordion__body"},r("slot",{key:"fa6efbc3624c1c1152eabca17201c24801eef3ee"}))))}static get watchers(){return{isOpen:["handleOpenState"]}}};o.style=e;export{o as pds_accordion};
+//# sourceMappingURL=p-019edcbb.entry.js.map

package/dist/pine-core/p-019edcbb.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pdsAccordionCss","PdsAccordionStyle0","PdsAccordion","this","handleToggle","isOpen","detailsEl","open","getOpenAttribute","handleOpenState","newValue","componentDidLoad","addEventListener","render","h","Host","key","class","id","componentId","Object","assign","ref","el","name","icon","downSmall"],"sources":["src/components/pds-accordion/pds-accordion.scss?tag=pds-accordion&encapsulation=shadow","src/components/pds-accordion/pds-accordion.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\ndetails {\n  --border-radius-default: var(--pine-border-radius-100);\n\n  --box-shadow-focus: inset 0 0 0 2px var(--pine-color-blue-200);\n\n  --color-content-background-default: var(--pine-color-white);\n  --color-background-hover: var(--pine-color-grey-300);\n  --color-text-default: var(--pine-color-charcoal-200);\n  --color-text-active: var(--pine-color-charcoal-500);\n  --color-text-hover: var(--pine-color-charcoal-300);\n\n  --number-animation-transform-timing: 200ms;\n\n  --spacing-details-padding-inline: var(--pine-spacing-150);\n  --spacing-summary-padding-block: var(--pine-spacing-050);\n  --spacing-summary-padding-inline-start: var(--pine-spacing-100);\n  --spacing-summary-padding-inline-end: var(--pine-spacing-050);\n\n  --typography-default: var(--pine-font-weight-semi-bold) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);\n\n  border-radius: var(--border-radius-default);\n  padding-inline: var(--spacing-details-padding-inline);\n\n  pds-icon {\n    transform: scaleY(1);\n    transition: transform var(--number-animation-transform-timing);\n  }\n}\n\n/* stylelint-disable-next-line */\ndetails[open] {\n  background-color: var(--color-content-background);\n\n  summary {\n    color: var(--color-text-active);\n    font: var(--typography-default);\n\n    pds-icon {\n      transform: scaleY(-1);\n      transition: transform var(--number-animation-transform-timing);\n    }\n  }\n}\n\nsummary {\n  border-radius: var(--border-radius-default);\n  color: var(--color-text-default);\n  font: var(--typography-default);\n  padding-block: var(--spacing-summary-padding-block);\n  padding-inline-end: var(--spacing-summary-padding-inline-end);\n  padding-inline-start: var(--spacing-summary-padding-inline-start);\n\n  // Removes marker on Firefox/Chrome\n  /* stylelint-disable-next-line */\n  align-items: center;\n  display: flex;\n\n  // Removes marker on Safari\n  &::-webkit-details-marker {\n    display: none;\n  }\n\n  &:hover {\n    background: var(--color-background-hover);\n    color: var(--color-text-hover);\n    cursor: pointer;\n  }\n\n  &:focus-visible {\n    // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n    box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n    outline: none;\n  }\n\n  pds-icon {\n    margin-inline-start: auto;\n  }\n}\n","import { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { downSmall } from '@pine-ds/icons/icons';\n\n/**\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n  tag: 'pds-accordion',\n  styleUrl: 'pds-accordion.scss',\n  shadow: true,\n})\nexport class PdsAccordion {\n  private detailsEl: HTMLDetailsElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   * @defaultValue null\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Can be used to manually set the open state of the accordion.\n   * @defaultValue false\n   */\n  @Prop({\n    attribute: 'open',\n    mutable: true,\n    reflect: true,\n  }) isOpen: boolean = false;\n\n  @Watch('isOpen')\n  handleOpenState(newValue: boolean) {\n    this.isOpen = newValue;\n  }\n\n  private handleToggle = () => {\n    this.isOpen = this.detailsEl.open;\n  };\n\n  private getOpenAttribute = () => {\n    if (this.isOpen !== false) {\n      return { open: true };\n    }\n    return '';\n  };\n\n  componentDidLoad() {\n    this.detailsEl.addEventListener('toggle', this.handleToggle);\n  }\n\n  render() {\n    return (\n      <Host class=\"pds-accordion\" id={this.componentId}>\n        <details {...this.getOpenAttribute()} ref={(el) => (this.detailsEl = el as HTMLDetailsElement)}>\n          <summary>\n            <slot name=\"label\">Details</slot>\n            <pds-icon icon={downSmall} />\n          </summary>\n          <div class=\"pds-accordion__body\">\n            <slot />\n          </div>\n        </details>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAkB,gpFACxB,MAAAC,EAAeD,E,MCWFE,EAAY,M,yBAwBfC,KAAAC,aAAe,KACrBD,KAAKE,OAASF,KAAKG,UAAUC,IAAI,EAG3BJ,KAAAK,iBAAmB,KACzB,GAAIL,KAAKE,SAAW,MAAO,CACzB,MAAO,CAAEE,KAAM,K,CAEjB,MAAO,EAAE,E,uCAfU,K,CAGrB,eAAAE,CAAgBC,GACdP,KAAKE,OAASK,C,CAchB,gBAAAC,GACER,KAAKG,UAAUM,iBAAiB,SAAUT,KAAKC,a,CAGjD,MAAAS,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,gBAAgBC,GAAIf,KAAKgB,aACnCL,EAAA,UAAAM,OAAAC,OAAA,CAAAL,IAAA,4CAAab,KAAKK,mBAAkB,CAAEc,IAAMC,GAAQpB,KAAKG,UAAYiB,IACnET,EAAA,WAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,SAAO,WAClBV,EAAA,YAAAE,IAAA,2CAAUS,KAAMC,KAElBZ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,uBACTH,EAAA,QAAAE,IAAA,+C"}

package/dist/pine-core/p-1922e07e.system.entry.js

@@ -0,0 +1,2 @@
+System.register(["./p-64b4cb70.system.js","./p-5ffec55d.system.js"],(function(r){"use strict";var a,o,e,n,i;return{setters:[function(r){a=r.r;o=r.h;e=r.H},function(r){n=r.c;i=r.u}],execute:function(){var t=":host{display:inline-block}div{--color-background-container:var(--pine-color-blue-100);--color-background-badge:var(--pine-color-white);--color-border-badge:var(--pine-color-white);--border-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);--border-radius-round:var(--pine-border-radius-round);--border-radius-none:var(--pine-border-radius-0);--spacing-none:var(--pine-spacing-0);-ms-flex-align:center;align-items:center;background-color:var(--color-background-container);border-radius:var(--border-radius-admin-round, var(--border-radius-round));display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;position:relative}:host(.pds-avatar--admin) div{--border-radius-admin-round:var(--pine-spacing-150);border-radius:var(--border-radius-admin-round)}:host(.pds-avatar--has-image) div{background:transparent}@supports selector(:has){div:has(img){background-color:transparent}}.pds-avatar__button{--box-shadow-focus:0 0 0 2px var(--pine-color-blue-200);--border-radius-round:var(--pine-border-radius-round);-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:var(--border-radius-none);border-radius:var(--border-radius-round);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--spacing-none)}.pds-avatar__button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-avatar__badge{background-color:var(--color-background-badge);border:var(--border-default);border-color:var(--color-border-badge);border-radius:var(--border-radius-round);bottom:var(--spacing-none);position:absolute;right:var(--spacing-none)}img{border-radius:var(--border-radius-admin-round, var(--border-radius-round));height:100%;-o-object-fit:cover;object-fit:cover;width:100%}";var s=t;var d=r("pds_avatar",function(){function r(r){var e=this;a(this,r);this.renderAssetWrapper=function(){var r={height:e.avatarSize(),width:e.avatarSize()};return o("div",{style:r,part:"asset-wrapper"},e.renderIconOrImage(),e.renderBadge())};this.renderAvatar=function(){return e.dropdown?o("button",{class:"pds-avatar__button",type:"button"},e.renderAssetWrapper()):e.renderAssetWrapper()};this.renderBadge=function(){return e.badge&&o("pds-icon",{class:"pds-avatar__badge",icon:n,size:"33.53%"})};this.renderIconOrImage=function(){return e.image?o("img",{alt:e.alt,src:e.image}):o("pds-icon",{color:"var(--pine-color-blue-400)",icon:i,size:"33.53%"})};this.classNames=function(){var r;return r={"pds-avatar":true},r["pds-avatar--has-image"]=e.image!==""&&e.image!==null,r["pds-avatar--".concat(e.variant)]=e.variant==="admin",r};this.alt=null;this.badge=false;this.componentId=undefined;this.dropdown=false;this.image=null;this.size="lg";this.variant="customer"}r.prototype.avatarSize=function(){var r={xs:"24px",sm:"32px",md:"40px",lg:"56px",xl:"64px"};if(r[this.size]){return r[this.size]}else{return this.size}};r.prototype.render=function(){return o(e,{key:"91f5ca20bb459d850bf58586c525a551821f17c7",id:this.componentId,class:Object.assign({},this.classNames())},this.renderAvatar())};return r}());d.style=s}}}));
+//# sourceMappingURL=p-1922e07e.system.entry.js.map

package/dist/pine-core/p-1922e07e.system.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pdsAvatarCss","PdsAvatarStyle0","PdsAvatar","exports","this","renderAssetWrapper","style","height","_this","avatarSize","width","h","part","renderIconOrImage","renderBadge","renderAvatar","dropdown","class","type","badge","icon","checkCircleFilled","size","image","alt","src","color","userFilled","classNames","_a","concat","variant","class_1","prototype","sizes","xs","sm","md","lg","xl","render","Host","key","id","componentId","Object","assign"],"sources":["src/components/pds-avatar/pds-avatar.scss?tag=pds-avatar&encapsulation=shadow","src/components/pds-avatar/pds-avatar.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\ndiv {\n  // These custom props are not reachable\n  --color-background-container: var(--pine-color-blue-100);\n  --color-background-badge: var(--pine-color-white);\n  --color-border-badge: var(--pine-color-white);\n\n  --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n  --border-radius-round: var(--pine-border-radius-round);\n  --border-radius-none: var(--pine-border-radius-0);\n\n  --spacing-none: var(--pine-spacing-0);\n\n  align-items: center;\n  background-color: var(--color-background-container);\n  border-radius: var(--border-radius-admin-round, var(--border-radius-round));\n  display: inline-flex;\n  justify-content: center;\n  position: relative;\n\n  :host(.pds-avatar--admin) & {\n    --border-radius-admin-round: var(--pine-spacing-150);\n    border-radius: var(--border-radius-admin-round);\n  }\n\n  // Remove when FF has support for :has\n  :host(.pds-avatar--has-image) & {\n    background: transparent\n  }\n\n  @supports selector(:has) {\n    &:has(img) {\n      background-color: transparent\n    }\n  }\n}\n\n.pds-avatar__button {\n  --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);\n  --border-radius-round: var(--pine-border-radius-round);\n\n  align-items: center;\n  appearance: none;\n  background: transparent;\n  border: var(--border-radius-none);\n  border-radius: var(--border-radius-round);\n  cursor: pointer;\n  display: flex;\n  padding: var(--spacing-none);\n\n  &:focus-visible {\n    // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n    box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n    outline: none;\n  }\n}\n\n.pds-avatar__badge {\n  background-color: var(--color-background-badge);\n  border: var(--border-default);\n  border-color: var(--color-border-badge);\n  border-radius: var(--border-radius-round);\n  bottom: var(--spacing-none);\n  position: absolute;\n  right: var(--spacing-none);\n}\n\nimg {\n  border-radius: var(--border-radius-admin-round, var(--border-radius-round));\n  height: 100%;\n  object-fit: cover;\n  width: 100%;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport { checkCircleFilled, userFilled } from '@pine-ds/icons/icons';\n\n/**\n * @part image - The main image element that represents the avatar component.\n*/\n@Component({\n  tag: 'pds-avatar',\n  styleUrl: 'pds-avatar.scss',\n  shadow: true,\n})\nexport class PdsAvatar {\n\n  /**\n   * The alt for a custom user image.\n   * @defaultValue null\n   */\n  @Prop() alt?: string | null = null;\n\n  /**\n   * Determines whether the badge is visible or not.\n   * @defaultValue false\n   */\n  @Prop() badge? = false;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether the avatar functions as a dropdown trigger.\n   * @defaultValue false\n   */\n  @Prop() dropdown? = false;\n\n  /**\n   * The src for a custom user image.\n   * @defaultValue null\n   */\n  @Prop() image?: string | null = null;\n\n  /**\n   * Size of the avatar. Value can be preset or custom.\n   * @defaultValue lg\n   */\n  @Prop({ reflect: true }) size?:\n  | 'xl' // 64px\n  | 'lg' // 56px\n  | 'md' // 40px\n  | 'sm' // 32px\n  | 'xs' // 24px\n  | string = 'lg';\n\n  /**\n   * Determines the variant of avatar. Changes appearance accordingly.\n   * @defaultValue customer\n   */\n  @Prop({ reflect: true }) variant?: 'customer' | 'admin' = 'customer';\n\n  private avatarSize() {\n    const sizes: { [key: string]: any } = {\n      xs: '24px',\n      sm: '32px',\n      md: '40px',\n      lg: '56px',\n      xl: '64px',\n    }\n\n    if (sizes[this.size]) {\n      return sizes[this.size];\n    } else {\n      return this.size\n    }\n  }\n\n  private renderAssetWrapper = () => {\n    const style = {\n      height: this.avatarSize(),\n      width: this.avatarSize()\n    };\n\n    return (\n      <div style={style} part=\"asset-wrapper\">\n        {this.renderIconOrImage()}\n        {this.renderBadge()}\n      </div>\n    )\n  };\n\n  private renderAvatar = () => {\n    return (\n      this.dropdown\n        ?\n        <button class=\"pds-avatar__button\" type=\"button\">\n          {this.renderAssetWrapper()}\n        </button>\n        :\n        this.renderAssetWrapper()\n    )\n  };\n\n  private renderBadge = () => (\n    this.badge\n    // Percentage is average size of icon in relation to total avatar size\n    // of all preset sizes found in Figma.\n    // Used to allow icons to scale to container size\n      && <pds-icon class=\"pds-avatar__badge\" icon={checkCircleFilled} size=\"33.53%\"></pds-icon>\n  );\n\n  private renderIconOrImage = () => (\n    this.image\n      ? <img alt={this.alt} src={this.image} />\n      // Percentage is average size of icon in relation to total avatar size\n      // of all preset sizes found in Figma.\n      // Used to allow icons to scale to container size\n      : <pds-icon color=\"var(--pine-color-blue-400)\" icon={userFilled} size=\"33.53%\"></pds-icon>\n  );\n\n  private classNames = () => (\n    {\n      'pds-avatar': true,\n      [`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector\n      [`pds-avatar--${this.variant}`]: this.variant === 'admin'\n    }\n  );\n\n  render() {\n\n    return (\n      <Host\n        id={this.componentId}\n        class={{...this.classNames()}}\n      >\n        {this.renderAvatar()}\n      </Host>\n    );\n  }\n}\n"],"mappings":"wMAAA,IAAMA,EAAe,yzDACrB,IAAAC,EAAeD,E,ICUFE,EAASC,EAAA,wB,mCAiEZC,KAAAC,mBAAqB,WAC3B,IAAMC,EAAQ,CACZC,OAAQC,EAAKC,aACbC,MAAOF,EAAKC,cAGd,OACEE,EAAA,OAAKL,MAAOA,EAAOM,KAAK,iBACrBJ,EAAKK,oBACLL,EAAKM,c,EAKJV,KAAAW,aAAe,WACrB,OACEP,EAAKQ,SAEHL,EAAA,UAAQM,MAAM,qBAAqBC,KAAK,UACrCV,EAAKH,sBAGRG,EAAKH,oB,EAIHD,KAAAU,YAAc,kBACpBN,EAAKW,OAIAR,EAAA,YAAUM,MAAM,oBAAoBG,KAAMC,EAAmBC,KAAK,UALnD,EAQdlB,KAAAS,kBAAoB,kBAC1BL,EAAKe,MACDZ,EAAA,OAAKa,IAAKhB,EAAKgB,IAAKC,IAAKjB,EAAKe,QAI9BZ,EAAA,YAAUe,MAAM,6BAA6BN,KAAMO,EAAYL,KAAK,UAN9C,EASpBlB,KAAAwB,WAAa,W,MAAA,OAAAC,EAAA,CAEjB,aAAc,MACdA,EAAC,yBAA0BrB,EAAKe,QAAU,IAAMf,EAAKe,QAAU,KAC/DM,EAAC,eAAAC,OAAetB,EAAKuB,UAAYvB,EAAKuB,UAAY,Q,CAJjC,E,SAtGS,K,WAMb,M,yCAWG,M,WAMY,K,UAYrB,K,aAM+C,U,CAElDC,EAAAC,UAAAxB,WAAA,WACN,IAAMyB,EAAgC,CACpCC,GAAI,OACJC,GAAI,OACJC,GAAI,OACJC,GAAI,OACJC,GAAI,QAGN,GAAIL,EAAM9B,KAAKkB,MAAO,CACpB,OAAOY,EAAM9B,KAAKkB,K,KACb,CACL,OAAOlB,KAAKkB,I,GAuDhBU,EAAAC,UAAAO,OAAA,WAEE,OACE7B,EAAC8B,EAAI,CAAAC,IAAA,2CACHC,GAAIvC,KAAKwC,YACT3B,MAAK4B,OAAAC,OAAA,GAAM1C,KAAKwB,eAEfxB,KAAKW,e,WA3HQ,I"}

package/dist/pine-core/p-4d4bea0a.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as r,h as o,H as a,g as i}from"./p-2f77dbd3.js";const e=({elem:t,elemPlacement:r,overlay:o,offset:a=8})=>{if(t==undefined)return;const i=t.getBoundingClientRect();const e=o.getBoundingClientRect();if(!r||r=="")return;switch(true){case r.includes("right"):o.style.top="50%";o.style.left=`calc(${i.width}px + ${a}px)`;o.style.transform="translateY(-50%)";if(r.includes("start")){o.style.top="0";o.style.transform="translateY(0)"}if(r.includes("end")){o.style.bottom="0";o.style.top="initial";o.style.transform="translateY(0)"}break;case r.includes("left"):o.style.top="50%";o.style.right=`calc(${i.width}px + ${a}px)`;o.style.transform="translateY(-50%)";if(r.includes("start")){o.style.top="0";o.style.transform="translateY(0)"}if(r.includes("end")){o.style.bottom="0";o.style.top="initial";o.style.transform="translateY(0)"}break;case r.includes("bottom"):o.style.top=`calc(${i.height}px + ${a}px)`;o.style.left="50%";o.style.transform="translateX(-50%)";if(r.includes("start")){o.style.left="0";o.style.transform="translateX(0)"}if(r.includes("end")){o.style.left="initial";o.style.right="0";o.style.transform="translateX(0)"}break;case r.includes("top"):o.style.top=`calc((${e.height}px + ${a}px) * -1)`;o.style.left="50%";o.style.transform="translateX(-50%)";if(r.includes("start")){o.style.left="0";o.style.transform="translateX(0)"}if(r.includes("end")){o.style.left="initial";o.style.right="0";o.style.transform="translateX(0)"}break}};const d=':host{--border-radius-overlay:var(--pine-border-radius-125);--border-width-arrow-down:var(--sizing-arrow-default) var(--sizing-arrow-default) 0;--border-width-arrow-left:var(--sizing-arrow-default) var(--sizing-arrow-default) var(--sizing-arrow-default) 0;--border-width-arrow-right:var(--sizing-arrow-default) 0 var(--sizing-arrow-default) var(--sizing-arrow-default);--border-width-arrow-up:0 var(--sizing-arrow-default) var(--sizing-arrow-default);--box-shadow-default:var(--pine-box-shadow-md);--color-background-default:var(--pine-color-charcoal-400);--color-text-default:var(--pine-color-white);--font-size-overlay:var(--pine-font-size-087);--line-height-overlay:var(--pine-line-height-125);--sizing-arrow-default:6px;--sizing-arrow-offset:14px;--sizing-width-default:320px;--spacing-padding-overlay:var(--pine-spacing-100) calc(var(--pine-spacing-300) / 2);display:inline-block;position:relative}:host ::slotted(*){display:-ms-flexbox;display:flex}:host ::slotted([slot=content]){display:block;white-space:normal;width:var(--sizing-width-default)}.pds-tooltip__content{background-color:var(--color-background-default);border-radius:var(--border-radius-overlay);-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default);color:var(--color-text-default);font-size:var(--font-size-overlay);line-height:var(--line-height-overlay);opacity:0;padding:var(--spacing-padding-overlay);position:absolute;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content}.pds-tooltip--is-open .pds-tooltip__content{opacity:1;visibility:visible;z-index:1}:host(.pds-tooltip--has-html-content) .pds-tooltip__content{width:auto}.pds-tooltip__content::after{border-color:transparent;border-right-color:transparent;border-style:solid;border-width:var(--border-width-arrow-left);content:"";height:0;position:absolute;width:0}.pds-tooltip--right .pds-tooltip__content::after{border-inline-end-color:var(--color-background-default);border-width:var(--border-width-arrow-left);left:calc(var(--sizing-arrow-default) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--right-end .pds-tooltip__content::after{border-inline-end-color:var(--color-background-default);border-width:var(--border-width-arrow-left);bottom:var(--sizing-arrow-offset);left:calc(var(--sizing-arrow-default) * -1);top:initial}.pds-tooltip--right-start .pds-tooltip__content::after{border-inline-end-color:var(--color-background-default);border-width:var(--border-width-arrow-left);left:calc(var(--sizing-arrow-default) * -1);top:var(--sizing-arrow-offset)}.pds-tooltip--top .pds-tooltip__content::after{border-block-start-color:var(--color-background-default);border-width:var(--border-width-arrow-down);bottom:calc(var(--sizing-arrow-default) * -1);left:50%;top:initial;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--top-start .pds-tooltip__content::after{border-block-start-color:var(--color-background-default);border-width:var(--border-width-arrow-down);bottom:calc(var(--sizing-arrow-default) * -1);left:var(--sizing-arrow-offset);top:initial}.pds-tooltip--top-end .pds-tooltip__content::after{border-block-start-color:var(--color-background-default);border-width:var(--border-width-arrow-down);bottom:calc(var(--sizing-arrow-default) * -1);left:initial;right:var(--sizing-arrow-offset);top:initial}.pds-tooltip--left .pds-tooltip__content::after{border-inline-start-color:var(--color-background-default);border-width:var(--border-width-arrow-right);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--left-end .pds-tooltip__content::after{border-inline-start-color:var(--color-background-default);border-width:var(--border-width-arrow-right);bottom:var(--sizing-arrow-offset);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:initial}.pds-tooltip--left-start .pds-tooltip__content::after{border-inline-start-color:var(--color-background-default);border-width:var(--border-width-arrow-right);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:var(--sizing-arrow-offset)}.pds-tooltip--bottom .pds-tooltip__content::after{border-block-end-color:var(--color-background-default);border-width:var(--border-width-arrow-up);left:50%;top:calc(var(--sizing-arrow-default) * -1);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--bottom-end .pds-tooltip__content::after{border-block-end-color:var(--color-background-default);border-width:var(--border-width-arrow-up);left:initial;right:var(--sizing-arrow-offset);top:calc(var(--sizing-arrow-default) * -1)}.pds-tooltip--bottom-start .pds-tooltip__content::after{border-block-end-color:var(--color-background-default);border-width:var(--border-width-arrow-up);left:var(--sizing-arrow-offset);top:calc(var(--sizing-arrow-default) * -1)}.pds-tooltip--no-arrow .pds-tooltip__content::after{border-width:0}';const l=d;const s=class{constructor(o){t(this,o);this.pdsTooltipHide=r(this,"pdsTooltipHide",7);this.pdsTooltipShow=r(this,"pdsTooltipShow",7);this.handleHide=()=>{this.hideTooltip();this.pdsTooltipHide.emit()};this.handleShow=()=>{this.showTooltip();this.pdsTooltipShow.emit()};this.isOpen=false;this.content=undefined;this.componentId=undefined;this.hasArrow=true;this.htmlContent=false;this.placement="right";this.opened=false}handleOpenToggle(){if(this.opened){this.handleShow()}else{this.handleHide()}}componentWillLoad(){if(this.opened){this.showTooltip()}this.el.addEventListener("blur",this.handleHide,true);this.el.addEventListener("focus",this.handleShow,true)}componentDidUpdate(){if(this.opened){this.showTooltip()}}componentDidRender(){e({elem:this.el,elemPlacement:this.placement,overlay:this.contentEl})}async showTooltip(){this.opened=true}async hideTooltip(){this.opened=false}render(){return o(a,{key:"088766be31b8716e158cbffd4afc4ada0f14dc3d",onMouseEnter:this.handleShow,onMouseLeave:this.handleHide,onFocusin:this.handleShow,onFocusout:this.handleHide},o("div",{key:"c4fb29b5d5834a9e94f040ded6daf15cf3fcc6ff",class:`\n            pds-tooltip\n            pds-tooltip--${this.placement}\n            ${this.htmlContent?"pds-tooltip--has-html-content":""}\n            ${this.opened?"pds-tooltip--is-open":""}\n            ${this.hasArrow?"":"pds-tooltip--no-arrow"}\n          `},o("span",{key:"25a69f567a33df83ff784d36de5bce86874d6d1d","aria-describedby":this.componentId,class:"pds-tooltip__trigger"},o("slot",{key:"eab3bbca9b913b04ef4dfe7a8e472c43d57c4979"})),o("div",{key:"bdaa9f26f848b440a8432a44481f8a1059ae0689",class:"pds-tooltip__content","aria-hidden":this.opened?"false":"true","aria-live":this.opened?"polite":"off",id:this.componentId,ref:t=>this.contentEl=t,role:"tooltip"},o("slot",{key:"0e62fe237e9a39208aa2146e2dc1d6df6b25b41d",name:"content"}),this.content)))}get el(){return i(this)}static get watchers(){return{opened:["handleOpenToggle"]}}};s.style=l;export{s as pds_tooltip};
+//# sourceMappingURL=p-4d4bea0a.entry.js.map

package/dist/pine-core/p-4d4bea0a.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["positionTooltip","elem","elemPlacement","overlay","offset","undefined","rect","getBoundingClientRect","contentRect","includes","style","top","left","width","transform","bottom","right","height","pdsTooltipCss","PdsTooltipStyle0","PdsTooltip","this","handleHide","hideTooltip","pdsTooltipHide","emit","handleShow","showTooltip","pdsTooltipShow","handleOpenToggle","opened","componentWillLoad","el","addEventListener","componentDidUpdate","componentDidRender","placement","contentEl","render","h","Host","key","onMouseEnter","onMouseLeave","onFocusin","onFocusout","class","htmlContent","hasArrow","componentId","id","ref","role","name","content"],"sources":["src/utils/overlay.ts","src/components/pds-tooltip/pds-tooltip.scss?tag=pds-tooltip&encapsulation=shadow","src/components/pds-tooltip/pds-tooltip.tsx"],"sourcesContent":["interface OverlayArgs {\n  elem: HTMLElement;\n  elemPlacement: string;\n  overlay: HTMLElement;\n  offset?: number;\n}\n\nexport const positionTooltip = ({elem, elemPlacement, overlay, offset = 8}: OverlayArgs) => {\n  if (elem == undefined) return;\n\n  const rect = elem.getBoundingClientRect();\n  const contentRect = overlay.getBoundingClientRect();\n\n  // Exit the function if the placement is not set\n  if (!elemPlacement || elemPlacement == \"\") return;\n\n  switch (true) {\n    case elemPlacement.includes(\"right\"):\n      overlay.style.top = '50%';\n      overlay.style.left = `calc(${rect.width}px + ${offset}px)`;\n      overlay.style.transform = 'translateY(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.top = '0';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.bottom = '0';\n        overlay.style.top = 'initial';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      break;\n\n    case elemPlacement.includes(\"left\"):\n      overlay.style.top = '50%';\n      overlay.style.right = `calc(${rect.width}px + ${offset}px)`;\n      overlay.style.transform = 'translateY(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.top = '0';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.bottom = '0';\n        overlay.style.top = 'initial';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      break;\n\n    case elemPlacement.includes(\"bottom\"):\n      overlay.style.top = `calc(${rect.height}px + ${offset}px)`;\n      overlay.style.left = '50%';\n      overlay.style.transform = 'translateX(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.left = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.left = 'initial';\n        overlay.style.right = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n\n      break;\n\n    case elemPlacement.includes(\"top\"):\n      overlay.style.top = `calc((${contentRect.height}px + ${offset}px) * -1)`;\n      overlay.style.left = '50%';\n      overlay.style.transform = 'translateX(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.left = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.left = 'initial';\n        overlay.style.right = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n\n      break;\n  }\n}\n",":host {\n  --border-radius-overlay: var(--pine-border-radius-125);\n\n  --border-width-arrow-down: var(--sizing-arrow-default) var(--sizing-arrow-default) 0;\n  --border-width-arrow-left: var(--sizing-arrow-default) var(--sizing-arrow-default) var(--sizing-arrow-default) 0;\n  --border-width-arrow-right: var(--sizing-arrow-default) 0 var(--sizing-arrow-default) var(--sizing-arrow-default);\n  --border-width-arrow-up: 0 var(--sizing-arrow-default) var(--sizing-arrow-default);\n\n  --box-shadow-default: var(--pine-box-shadow-md);\n\n  --color-background-default: var(--pine-color-charcoal-400);\n  --color-text-default: var(--pine-color-white);\n\n  --font-size-overlay: var(--pine-font-size-087);\n\n  --line-height-overlay: var(--pine-line-height-125);\n\n  --sizing-arrow-default: 6px;\n  --sizing-arrow-offset: 14px;\n  --sizing-width-default: 320px;\n\n  --spacing-padding-overlay: var(--pine-spacing-100) calc(var(--pine-spacing-300) / 2);\n\n  display: inline-block;\n  position: relative;\n\n  ::slotted(*) {\n    display: flex;\n  }\n\n  ::slotted([slot=\"content\"]) {\n    display: block;\n    white-space: normal;\n    width: var(--sizing-width-default);\n  }\n}\n\n.pds-tooltip__content {\n  background-color: var(--color-background-default);\n  border-radius: var(--border-radius-overlay);\n  box-shadow: var(--box-shadow-default);\n  color: var(--color-text-default);\n  font-size: var(--font-size-overlay);\n  line-height: var(--line-height-overlay);\n  // TODO: need to use block / none but the tooltip content width and height are needed for calculations\n  opacity: 0;\n  padding: var(--spacing-padding-overlay);\n  position: absolute;\n  visibility: hidden;\n  width: max-content;\n\n  .pds-tooltip--is-open & {\n    // TODO: need to use block / none but the tooltip content width and height are needed for calculations\n    opacity: 1;\n    visibility: visible;\n    z-index: 1;\n  }\n\n  :host(.pds-tooltip--has-html-content) & {\n    width: auto;\n  }\n\n  &::after {\n    border-color: transparent;\n    border-right-color: transparent;\n    border-style: solid;\n    border-width: var(--border-width-arrow-left);\n    content: '';\n    height: 0;\n    position: absolute;\n    width: 0;\n\n    .pds-tooltip--right & {\n      border-inline-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-left);\n      left: calc(var(--sizing-arrow-default) * -1);\n      top: 50%;\n      transform: translateY(-50%);\n    }\n\n    .pds-tooltip--right-end & {\n      border-inline-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-left);\n      bottom: var(--sizing-arrow-offset);\n      left: calc(var(--sizing-arrow-default) * -1);\n      top: initial;\n    }\n\n    .pds-tooltip--right-start & {\n      border-inline-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-left);\n      left: calc(var(--sizing-arrow-default) * -1);\n      top: var(--sizing-arrow-offset);\n    }\n\n    .pds-tooltip--top & {\n      border-block-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-down);\n      bottom: calc(var(--sizing-arrow-default) * -1);\n      left: 50%;\n      top: initial;\n      transform: translateX(-50%);\n    }\n\n    .pds-tooltip--top-start & {\n      border-block-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-down);\n      bottom: calc(var(--sizing-arrow-default) * -1);\n      left: var(--sizing-arrow-offset);\n      top: initial;\n    }\n\n    .pds-tooltip--top-end & {\n      border-block-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-down);\n      bottom: calc(var(--sizing-arrow-default) * -1);\n      left: initial;\n      right: var(--sizing-arrow-offset);\n      top: initial;\n    }\n\n    .pds-tooltip--left & {\n      border-inline-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-right);\n      left: initial;\n      right: calc(var(--sizing-arrow-default) * -1);\n      top: 50%;\n      transform: translateY(-50%);\n    }\n\n    .pds-tooltip--left-end & {\n      border-inline-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-right);\n      bottom: var(--sizing-arrow-offset);\n      left: initial;\n      right: calc(var(--sizing-arrow-default) * -1);\n      top: initial;\n    }\n\n    .pds-tooltip--left-start & {\n      border-inline-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-right);\n      left: initial;\n      right: calc(var(--sizing-arrow-default) * -1);\n      top: var(--sizing-arrow-offset);\n    }\n\n    .pds-tooltip--bottom & {\n      border-block-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-up);\n      left: 50%;\n      top: calc(var(--sizing-arrow-default) * -1);\n      transform: translateX(-50%);\n    }\n\n    .pds-tooltip--bottom-end & {\n      border-block-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-up);\n      left: initial;\n      right: var(--sizing-arrow-offset);\n      top: calc(var(--sizing-arrow-default) * -1);\n    }\n\n    .pds-tooltip--bottom-start & {\n      border-block-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-up);\n      left: var(--sizing-arrow-offset);\n      top: calc(var(--sizing-arrow-default) * -1);\n    }\n\n    .pds-tooltip--no-arrow & {\n      border-width: 0;\n    }\n  }\n}\n","import { Component, Element, Event, Host, Prop, State, h, EventEmitter, Method, Watch } from '@stencil/core';\nimport {\n  positionTooltip\n} from '../../utils/overlay';\n\n/**\n * @slot (default) - The tooltip's target element\n * @slot content - HTML content for the tooltip\n */\n\n@Component({\n  tag: 'pds-tooltip',\n  styleUrl: 'pds-tooltip.scss',\n  shadow: true,\n})\nexport class PdsTooltip {\n  private contentEl: HTMLElement | null;\n\n  /**\n   * Reference to the Host element\n   */\n  @Element() el: HTMLPdsTooltipElement;\n\n  /**\n   * Determines when the tooltip is open\n   * @defaultValue false\n   */\n  @State() isOpen = false;\n\n  /**\n   * Content for the tooltip. If HTML is required, use the content slot\n   */\n  @Prop() content: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether or not the tooltip has an arrow\n   * @defaultValue true\n   */\n  @Prop() hasArrow? = true;\n\n  /**\n   * Enable this option when using the content slot\n   * @defaultValue false\n   */\n  @Prop() htmlContent = false;\n\n  /**\n   * Determines the preferred position of the tooltip\n   * @defaultValue \"right\"\n   */\n  @Prop({ reflect: true }) placement:\n    'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'right';\n\n  /**\n   * Determines whether or not the tooltip is visible\n   * @defaultValue false\n   */\n  @Prop({mutable: true, reflect: true}) opened = false;\n\n  @Watch('opened')\n  handleOpenToggle() {\n    if (this.opened) {\n      this.handleShow();\n    } else {\n      this.handleHide();\n    }\n  }\n\n  /**\n   * Emitted after a tooltip is closed\n   */\n  @Event() pdsTooltipHide: EventEmitter;\n\n  /**\n   * Emitted after a tooltip is shown\n   */\n  @Event() pdsTooltipShow: EventEmitter;\n\n  componentWillLoad() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n\n    this.el.addEventListener('blur', this.handleHide, true);\n    this.el.addEventListener('focus', this.handleShow, true);\n  }\n\n  componentDidUpdate() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n  }\n\n  componentDidRender() {\n    positionTooltip({elem: this.el, elemPlacement: this.placement, overlay: this.contentEl});\n  }\n\n  /**\n   * Shows the tooltip by enabling the opened property\n   */\n  @Method()\n  async showTooltip() {\n    this.opened = true;\n  }\n\n  /**\n   * Hides the tooltip by disabling the opened property\n   */\n  @Method()\n  async hideTooltip() {\n    this.opened = false;\n  }\n\n  private handleHide = () => {\n    this.hideTooltip();\n    this.pdsTooltipHide.emit();\n  };\n\n  private handleShow = () => {\n    this.showTooltip();\n    this.pdsTooltipShow.emit();\n  };\n\n  render() {\n    return (\n      <Host\n        onMouseEnter={this.handleShow}\n        onMouseLeave={this.handleHide}\n        onFocusin={this.handleShow}\n        onFocusout={this.handleHide}\n      >\n        <div\n          class={`\n            pds-tooltip\n            pds-tooltip--${this.placement}\n            ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}\n            ${this.opened ? 'pds-tooltip--is-open' : ''}\n            ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}\n          `}\n        >\n          <span\n            aria-describedby={this.componentId}\n            class=\"pds-tooltip__trigger\"\n          >\n            <slot />\n          </span>\n\n          <div class=\"pds-tooltip__content\"\n            aria-hidden={this.opened ? 'false' : 'true'}\n            aria-live={this.opened ? 'polite' : 'off'}\n            id={this.componentId}\n            ref={(el) => (this.contentEl = el)}\n            role=\"tooltip\"\n          >\n            <slot\n              name=\"content\"\n            ></slot>\n            {this.content}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/pine-core/p-65a167b8.entry.js

@@ -0,0 +1,2 @@
+import{r,h as o,H as e,g as a}from"./p-2f77dbd3.js";import{b as c}from"./p-b7897f94.js";const d=r=>!!r.shadowRoot&&!!r.attachShadow;const n=":host{--border-width-default:var(--pine-border-width-thin);--border-width-unstyled:var(--pine-border-radius-0);--color-border-default:transparent;--color-border-disabled:transparent;--color-border-focus:transparent;--color-border-hover:transparent;--color-background-primary-default:var(--pine-color-charcoal-400);--color-background-primary-disabled:var(--pine-color-grey-300);--color-background-primary-hover:var(--pine-color-charcoal-500);--color-text-primary-default:var(--pine-color-white);--color-text-primary-disabled:var(--pine-color-charcoal-100);--color-outline-primary:var(--pine-color-blue-200);--color-border-secondary-default:var(--pine-color-grey-400);--color-border-secondary-disabled:var(--pine-color-grey-300);--color-border-secondary-focus:var(--pine-color-grey-300);--color-border-secondary-hover:var(--pine-color-grey-500);--color-text-secondary-default:var(--pine-color-charcoal-400);--color-text-secondary-disabled:var(--pine-color-charcoal-100);--color-outline-secondary:var(--pine-color-blue-200);--color-background-accent-default:var(--pine-color-blue-300);--color-background-accent-disabled:var(--pine-color-blue-100);--color-background-accent-hover:var(--pine-color-blue-400);--color-text-accent-default:var(--pine-color-white);--color-text-accent-disabled:var(--pine-color-blue-200);--color-outline-accent:var(--pine-color-blue-200);--color-background-destructive-default:var(--pine-color-red-300);--color-background-destructive-disabled:var(--pine-color-red-100);--color-background-destructive-hover:var(--pine-color-red-400);--color-text-destructive-default:var(--pine-color-white);--color-text-destructive-disabled:var(--pine-color-red-200);--color-outline-destructive:var(--pine-color-red-200);--spacing-disclosure-icon-margin-inline-end:var(--pine-spacing-0);--spacing-disclosure-margin-inline-start:var(--pine-spacing-100);--spacing-icon-margin-inline-end:var(--pine-spacing-100);--spacing-padding-block:var(--pine-spacing-100);--spacing-padding-inline:var(--pine-spacing-200);--spacing-unstyled:var(--pine-spacing-0);--typography-default:var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.pds-button{-ms-flex-align:center;align-items:center;background-color:var(--color-background-default);border:var(--border-width-default) solid var(--color-border-default);border-radius:var(--pine-border-radius-125);color:var(--color-text-default);display:-ms-flexbox;display:flex;font:var(--typography-default);min-height:40px;padding:var(--spacing-padding-block) var(--spacing-padding-inline)}.pds-button pds-icon{fill:currentColor;-webkit-margin-end:var(--spacing-icon-margin-inline-end);margin-inline-end:var(--spacing-icon-margin-inline-end)}.pds-button:hover{background-color:var(--color-background-hover);border-color:var(--color-border-hover)}.pds-button:focus-visible{--box-shadow-focus:0 0 0 2px var(--pine-color-blue-200);border-color:var(--color-border-focus);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-button:disabled{background-color:var(--color-background-disabled);border-color:var(--color-border-disabled);color:var(--color-text-disabled)}.pds-button--primary{--color-background-default:var(--color-background-primary-default);--color-background-hover:var(--color-background-primary-hover);--color-background-disabled:var(--color-background-primary-disabled);--color-text-default:var(--color-text-primary-default);--color-text-disabled:var(--color-text-primary-disabled);--color-outline:var(--color-outline-primary)}.pds-button--accent{--color-background-default:var(--color-background-accent-default);--color-background-hover:var(--color-background-accent-hover);--color-background-disabled:var(--color-background-accent-disabled);--color-text-default:var(--color-text-accent-default);--color-text-disabled:var(--color-text-accent-disabled);--color-outline:var(--color-outline-accent)}.pds-button--destructive{--color-background-default:var(--color-background-destructive-default);--color-background-hover:var(--color-background-destructive-hover);--color-background-disabled:var(--color-background-destructive-disabled);--color-text-default:var(--color-text-destructive-default);--color-text-disabled:var(--color-text-destructive-disabled);--color-outline:var(--color-outline-destructive)}.pds-button--secondary,.pds-button--disclosure{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-border-disabled:var(--color-border-secondary-disabled);--color-border-focus:var(--color-border-secondary-focus);--color-border-hover:var(--color-border-secondary-hover);--color-border-default:var(--color-border-secondary-default);--color-text-default:var(--color-text-secondary-default);--color-text-disabled:var(--color-text-secondary-disabled);--color-outline:var(--color-outline-secondary)}.pds-button--disclosure pds-icon{-webkit-margin-end:var(--spacing-disclosure-icon-margin-inline-end);margin-inline-end:var(--spacing-disclosure-icon-margin-inline-end);-webkit-margin-start:var(--spacing-disclosure-margin-inline-start);margin-inline-start:var(--spacing-disclosure-margin-inline-start)}.pds-button--unstyled{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-text-default:inherit;border:var(--border-width-unstyled);margin:var(--spacing-unstyled);min-height:auto;padding:var(--spacing-unstyled);width:inherit}";const t=n;const i=class{constructor(o){r(this,o);this.handleClick=r=>{if(this.type!="button"){if(d(this.el)){const o=this.el.closest("form");if(o){r.preventDefault();const e=document.createElement("button");e.type=this.type;e.style.display="none";o.appendChild(e);e.click();e.remove()}}}};this.componentId=undefined;this.disabled=false;this.icon=null;this.name=undefined;this.value=undefined;this.type="button";this.variant="primary"}classNames(){const r=["pds-button"];if(this.variant){r.push("pds-button--"+this.variant)}return r.join("  ")}render(){return o(e,{key:"453a94093ba7bb8aa0fdea470cd9008e96601dcf","aria-disabled":this.disabled?"true":null,id:this.componentId,onClick:this.handleClick,variant:this.variant},o("button",{key:"ec841dfb0b026d1c3376f686f6d9187cdecb1762",class:this.classNames(),disabled:this.disabled,name:this.name,part:"button",type:this.type,value:this.value},this.icon&&this.variant!=="disclosure"&&o("pds-icon",{key:"926395c361f5b94f9c4d12980c4a93a52bf79c41",name:this.icon,part:"icon"}),o("slot",{key:"4a74b8b6cd711fee67622c92b515cf329964da64"}),this.variant==="disclosure"&&o("pds-icon",{key:"e2d356d80d03c3d8a8fc1259528e13a1c88e1307",icon:c,part:"caret"})))}get el(){return a(this)}};i.style=t;export{i as pds_button};
+//# sourceMappingURL=p-65a167b8.entry.js.map

package/dist/pine-core/p-65a167b8.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["hasShadowDom","el","shadowRoot","attachShadow","pdsButtonCss","PdsButtonStyle0","PdsButton","this","handleClick","ev","type","form","closest","preventDefault","fakeButton","document","createElement","style","display","appendChild","click","remove","classNames","variant","push","join","render","h","Host","key","disabled","id","componentId","onClick","class","name","part","value","icon","caretDown"],"sources":["src/utils/utils.ts","src/components/pds-button/pds-button.scss?tag=pds-button&encapsulation=shadow","src/components/pds-button/pds-button.tsx"],"sourcesContent":["export function format(first: string, middle: string, last: string): string {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport const hasShadowDom = (el: HTMLElement) => {\n  return !!el.shadowRoot && !!(el as any).attachShadow\n}\n",":host {\n  --border-width-default: var(--pine-border-width-thin);\n  --border-width-unstyled: var(--pine-border-radius-0);\n\n  --color-border-default: transparent;\n  --color-border-disabled: transparent;\n  --color-border-focus: transparent;\n  --color-border-hover: transparent;\n\n  // primary\n  --color-background-primary-default: var(--pine-color-charcoal-400);\n  --color-background-primary-disabled: var(--pine-color-grey-300);\n  --color-background-primary-hover: var(--pine-color-charcoal-500);\n  --color-text-primary-default: var(--pine-color-white);\n  --color-text-primary-disabled: var(--pine-color-charcoal-100);\n  --color-outline-primary: var(--pine-color-blue-200);\n\n  // secondary\n  --color-border-secondary-default: var(--pine-color-grey-400);\n  --color-border-secondary-disabled: var(--pine-color-grey-300);\n  --color-border-secondary-focus: var(--pine-color-grey-300);\n  --color-border-secondary-hover: var(--pine-color-grey-500);\n  --color-text-secondary-default: var(--pine-color-charcoal-400);\n  --color-text-secondary-disabled: var(--pine-color-charcoal-100);\n  --color-outline-secondary: var(--pine-color-blue-200);\n\n  // accent\n  --color-background-accent-default: var(--pine-color-blue-300);\n  --color-background-accent-disabled: var(--pine-color-blue-100);\n  --color-background-accent-hover: var(--pine-color-blue-400);\n  --color-text-accent-default: var(--pine-color-white);\n  --color-text-accent-disabled: var(--pine-color-blue-200);\n  --color-outline-accent: var(--pine-color-blue-200);\n\n  // destructive\n  --color-background-destructive-default: var(--pine-color-red-300);\n  --color-background-destructive-disabled: var(--pine-color-red-100);\n  --color-background-destructive-hover: var(--pine-color-red-400);\n  --color-text-destructive-default: var(--pine-color-white);\n  --color-text-destructive-disabled: var(--pine-color-red-200);\n  --color-outline-destructive: var(--pine-color-red-200);\n\n  --spacing-disclosure-icon-margin-inline-end: var(--pine-spacing-0);\n  --spacing-disclosure-margin-inline-start: var(--pine-spacing-100);\n  --spacing-icon-margin-inline-end: var(--pine-spacing-100);\n  --spacing-padding-block: var(--pine-spacing-100);\n  --spacing-padding-inline: var(--pine-spacing-200);\n  --spacing-unstyled: var(--pine-spacing-0);\n\n  --typography-default: var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);\n\n  display: inline-flex;\n  vertical-align: middle;\n}\n\n.pds-button {\n  align-items: center;\n  background-color: var(--color-background-default);\n  border: var(--border-width-default) solid var(--color-border-default);\n  border-radius: var(--pine-border-radius-125);\n  color: var(--color-text-default);\n  display: flex;\n  font: var(--typography-default);\n  min-height: 40px;\n  padding: var(--spacing-padding-block) var(--spacing-padding-inline);\n\n  pds-icon {\n    fill: currentColor;\n    margin-inline-end: var(--spacing-icon-margin-inline-end);\n  }\n\n  &:hover {\n    background-color: var(--color-background-hover);\n    border-color: var(--color-border-hover);\n  }\n\n  &:focus-visible {\n    --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);\n    border-color: var(--color-border-focus);\n    // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n    box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n    outline: none;\n  }\n\n  &:disabled {\n    background-color: var(--color-background-disabled);\n    border-color: var(--color-border-disabled);\n    color: var(--color-text-disabled);\n  }\n}\n\n.pds-button--primary {\n  --color-background-default: var(--color-background-primary-default);\n  --color-background-hover: var(--color-background-primary-hover);\n  --color-background-disabled: var(--color-background-primary-disabled);\n  --color-text-default: var(--color-text-primary-default);\n  --color-text-disabled: var(--color-text-primary-disabled);\n  --color-outline: var(--color-outline-primary);\n}\n\n.pds-button--accent {\n  --color-background-default: var(--color-background-accent-default);\n  --color-background-hover: var(--color-background-accent-hover);\n  --color-background-disabled: var(--color-background-accent-disabled);\n  --color-text-default: var(--color-text-accent-default);\n  --color-text-disabled: var(--color-text-accent-disabled);\n  --color-outline: var(--color-outline-accent);\n}\n\n.pds-button--destructive {\n  --color-background-default: var(--color-background-destructive-default);\n  --color-background-hover: var(--color-background-destructive-hover);\n  --color-background-disabled: var(--color-background-destructive-disabled);\n  --color-text-default: var(--color-text-destructive-default);\n  --color-text-disabled: var(--color-text-destructive-disabled);\n  --color-outline: var(--color-outline-destructive);\n}\n\n.pds-button--secondary,\n.pds-button--disclosure {\n  --color-background-default: transparent;\n  --color-background-hover: transparent;\n  --color-background-disabled: transparent;\n  --color-border-disabled: var(--color-border-secondary-disabled);\n  --color-border-focus: var(--color-border-secondary-focus);\n  --color-border-hover: var(--color-border-secondary-hover);\n  --color-border-default: var(--color-border-secondary-default);\n  --color-text-default: var(--color-text-secondary-default);\n  --color-text-disabled: var(--color-text-secondary-disabled);\n  --color-outline: var(--color-outline-secondary);\n}\n\n.pds-button--disclosure {\n  pds-icon {\n    margin-inline-end: var(--spacing-disclosure-icon-margin-inline-end);\n    margin-inline-start: var(--spacing-disclosure-margin-inline-start);\n  }\n}\n\n.pds-button--unstyled {\n  --color-background-default: transparent;\n  --color-background-hover: transparent;\n  --color-background-disabled: transparent;\n  --color-text-default: inherit;\n  border: var(--border-width-unstyled);\n  margin: var(--spacing-unstyled);\n  min-height: auto;\n  padding: var(--spacing-unstyled);\n  width: inherit;\n}\n","import { Component, Element, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\nimport { caretDown } from '@pine-ds/icons/icons';\n\n/**\n * @part button - The main button element that represents the button component.\n * @part caret - The caret icon element that appears when the button variant is 'disclosure'.\n * @part icon - The icon element that appears before the text in the button, if provided.\n*/\n\n@Component({\n  tag: 'pds-button',\n  styleUrl: 'pds-button.scss',\n  shadow: true,\n})\nexport class PdsButton {\n  @Element() el: HTMLPdsButtonElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Toggles disabled state of button\n   * @defaultValue false\n   */\n  @Prop() disabled? = false;\n\n  /**\n   * Displays icon before text when icon string matches an icon name\n   */\n  @Prop() icon?: string = null;\n\n  /**\n   * Provides button with a submittable name\n   */\n  @Prop() name?: string;\n\n  /**\n   * Provides button with a submittable value\n   */\n  @Prop() value?: string;\n\n  /**\n   * Provides button with a type\n   * @defaultValue button\n   */\n  @Prop() type?: 'button' | 'reset' | 'submit' = 'button';\n\n  /**\n   * Sets button variant styles as outlined in Figma documentation\n   */\n  @Prop() variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' = 'primary';\n\n  private handleClick = (ev: Event) => {\n    if (this.type != 'button') {\n      // If button clicked IS NOT associated with a form\n      if (hasShadowDom(this.el)) {\n        const form = this.el.closest('form')\n        if (form) {\n          ev.preventDefault()\n\n          const fakeButton = document.createElement('button')\n          fakeButton.type = this.type\n          fakeButton.style.display = 'none'\n          form.appendChild(fakeButton)\n          fakeButton.click()\n          fakeButton.remove()\n        }\n      }\n    }\n  }\n\n  private classNames() {\n    const classNames = ['pds-button'];\n\n    if (this.variant) {\n      classNames.push('pds-button--' + this.variant);\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        id={this.componentId}\n        onClick={this.handleClick}\n        variant={this.variant}\n      >\n        <button\n          class={this.classNames()}\n          disabled={this.disabled}\n          name={this.name}\n          part=\"button\"\n          type={this.type}\n          value={this.value}\n        >\n          {this.icon && this.variant !== 'disclosure' && <pds-icon name={this.icon} part=\"icon\"></pds-icon>}\n          <slot />\n          {this.variant === 'disclosure' && <pds-icon icon={caretDown} part=\"caret\"></pds-icon>}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"wFAIO,MAAMA,EAAgBC,KAClBA,EAAGC,cAAiBD,EAAWE,aCL1C,MAAMC,EAAe,g9KACrB,MAAAC,EAAeD,E,MCeFE,EAAS,M,yBAwCZC,KAAAC,YAAeC,IACrB,GAAIF,KAAKG,MAAQ,SAAU,CAEzB,GAAIV,EAAaO,KAAKN,IAAK,CACzB,MAAMU,EAAOJ,KAAKN,GAAGW,QAAQ,QAC7B,GAAID,EAAM,CACRF,EAAGI,iBAEH,MAAMC,EAAaC,SAASC,cAAc,UAC1CF,EAAWJ,KAAOH,KAAKG,KACvBI,EAAWG,MAAMC,QAAU,OAC3BP,EAAKQ,YAAYL,GACjBA,EAAWM,QACXN,EAAWO,Q,8CAzCC,M,UAKI,K,mDAgBuB,S,aAKmD,S,CAqB1F,UAAAC,GACN,MAAMA,EAAa,CAAC,cAEpB,GAAIf,KAAKgB,QAAS,CAChBD,EAAWE,KAAK,eAAiBjB,KAAKgB,Q,CAGxC,OAAOD,EAAWG,KAAK,K,CAGzB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2DACYtB,KAAKuB,SAAW,OAAS,KACxCC,GAAIxB,KAAKyB,YACTC,QAAS1B,KAAKC,YACde,QAAShB,KAAKgB,SAEdI,EAAA,UAAAE,IAAA,2CACEK,MAAO3B,KAAKe,aACZQ,SAAUvB,KAAKuB,SACfK,KAAM5B,KAAK4B,KACXC,KAAK,SACL1B,KAAMH,KAAKG,KACX2B,MAAO9B,KAAK8B,OAEX9B,KAAK+B,MAAQ/B,KAAKgB,UAAY,cAAgBI,EAAA,YAAAE,IAAA,2CAAUM,KAAM5B,KAAK+B,KAAMF,KAAK,SAC/ET,EAAA,QAAAE,IAAA,6CACCtB,KAAKgB,UAAY,cAAgBI,EAAA,YAAAE,IAAA,2CAAUS,KAAMC,EAAWH,KAAK,W"}

package/dist/pine-core/p-737d5042.entry.js

@@ -0,0 +1,2 @@
+import{r,h as a,H as o}from"./p-2f77dbd3.js";import{c as s,u as i}from"./p-b7897f94.js";const e=":host{display:inline-block}div{--color-background-container:var(--pine-color-blue-100);--color-background-badge:var(--pine-color-white);--color-border-badge:var(--pine-color-white);--border-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);--border-radius-round:var(--pine-border-radius-round);--border-radius-none:var(--pine-border-radius-0);--spacing-none:var(--pine-spacing-0);-ms-flex-align:center;align-items:center;background-color:var(--color-background-container);border-radius:var(--border-radius-admin-round, var(--border-radius-round));display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;position:relative}:host(.pds-avatar--admin) div{--border-radius-admin-round:var(--pine-spacing-150);border-radius:var(--border-radius-admin-round)}:host(.pds-avatar--has-image) div{background:transparent}@supports selector(:has){div:has(img){background-color:transparent}}.pds-avatar__button{--box-shadow-focus:0 0 0 2px var(--pine-color-blue-200);--border-radius-round:var(--pine-border-radius-round);-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:var(--border-radius-none);border-radius:var(--border-radius-round);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--spacing-none)}.pds-avatar__button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-avatar__badge{background-color:var(--color-background-badge);border:var(--border-default);border-color:var(--color-border-badge);border-radius:var(--border-radius-round);bottom:var(--spacing-none);position:absolute;right:var(--spacing-none)}img{border-radius:var(--border-radius-admin-round, var(--border-radius-round));height:100%;-o-object-fit:cover;object-fit:cover;width:100%}";const n=e;const t=class{constructor(o){r(this,o);this.renderAssetWrapper=()=>{const r={height:this.avatarSize(),width:this.avatarSize()};return a("div",{style:r,part:"asset-wrapper"},this.renderIconOrImage(),this.renderBadge())};this.renderAvatar=()=>this.dropdown?a("button",{class:"pds-avatar__button",type:"button"},this.renderAssetWrapper()):this.renderAssetWrapper();this.renderBadge=()=>this.badge&&a("pds-icon",{class:"pds-avatar__badge",icon:s,size:"33.53%"});this.renderIconOrImage=()=>this.image?a("img",{alt:this.alt,src:this.image}):a("pds-icon",{color:"var(--pine-color-blue-400)",icon:i,size:"33.53%"});this.classNames=()=>({"pds-avatar":true,[`pds-avatar--has-image`]:this.image!==""&&this.image!==null,[`pds-avatar--${this.variant}`]:this.variant==="admin"});this.alt=null;this.badge=false;this.componentId=undefined;this.dropdown=false;this.image=null;this.size="lg";this.variant="customer"}avatarSize(){const r={xs:"24px",sm:"32px",md:"40px",lg:"56px",xl:"64px"};if(r[this.size]){return r[this.size]}else{return this.size}}render(){return a(o,{key:"91f5ca20bb459d850bf58586c525a551821f17c7",id:this.componentId,class:Object.assign({},this.classNames())},this.renderAvatar())}};t.style=n;export{t as pds_avatar};
+//# sourceMappingURL=p-737d5042.entry.js.map

package/dist/pine-core/p-737d5042.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pdsAvatarCss","PdsAvatarStyle0","PdsAvatar","this","renderAssetWrapper","style","height","avatarSize","width","h","part","renderIconOrImage","renderBadge","renderAvatar","dropdown","class","type","badge","icon","checkCircleFilled","size","image","alt","src","color","userFilled","classNames","variant","sizes","xs","sm","md","lg","xl","render","Host","key","id","componentId","Object","assign"],"sources":["src/components/pds-avatar/pds-avatar.scss?tag=pds-avatar&encapsulation=shadow","src/components/pds-avatar/pds-avatar.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\ndiv {\n  // These custom props are not reachable\n  --color-background-container: var(--pine-color-blue-100);\n  --color-background-badge: var(--pine-color-white);\n  --color-border-badge: var(--pine-color-white);\n\n  --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n  --border-radius-round: var(--pine-border-radius-round);\n  --border-radius-none: var(--pine-border-radius-0);\n\n  --spacing-none: var(--pine-spacing-0);\n\n  align-items: center;\n  background-color: var(--color-background-container);\n  border-radius: var(--border-radius-admin-round, var(--border-radius-round));\n  display: inline-flex;\n  justify-content: center;\n  position: relative;\n\n  :host(.pds-avatar--admin) & {\n    --border-radius-admin-round: var(--pine-spacing-150);\n    border-radius: var(--border-radius-admin-round);\n  }\n\n  // Remove when FF has support for :has\n  :host(.pds-avatar--has-image) & {\n    background: transparent\n  }\n\n  @supports selector(:has) {\n    &:has(img) {\n      background-color: transparent\n    }\n  }\n}\n\n.pds-avatar__button {\n  --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);\n  --border-radius-round: var(--pine-border-radius-round);\n\n  align-items: center;\n  appearance: none;\n  background: transparent;\n  border: var(--border-radius-none);\n  border-radius: var(--border-radius-round);\n  cursor: pointer;\n  display: flex;\n  padding: var(--spacing-none);\n\n  &:focus-visible {\n    // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n    box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n    outline: none;\n  }\n}\n\n.pds-avatar__badge {\n  background-color: var(--color-background-badge);\n  border: var(--border-default);\n  border-color: var(--color-border-badge);\n  border-radius: var(--border-radius-round);\n  bottom: var(--spacing-none);\n  position: absolute;\n  right: var(--spacing-none);\n}\n\nimg {\n  border-radius: var(--border-radius-admin-round, var(--border-radius-round));\n  height: 100%;\n  object-fit: cover;\n  width: 100%;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport { checkCircleFilled, userFilled } from '@pine-ds/icons/icons';\n\n/**\n * @part image - The main image element that represents the avatar component.\n*/\n@Component({\n  tag: 'pds-avatar',\n  styleUrl: 'pds-avatar.scss',\n  shadow: true,\n})\nexport class PdsAvatar {\n\n  /**\n   * The alt for a custom user image.\n   * @defaultValue null\n   */\n  @Prop() alt?: string | null = null;\n\n  /**\n   * Determines whether the badge is visible or not.\n   * @defaultValue false\n   */\n  @Prop() badge? = false;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether the avatar functions as a dropdown trigger.\n   * @defaultValue false\n   */\n  @Prop() dropdown? = false;\n\n  /**\n   * The src for a custom user image.\n   * @defaultValue null\n   */\n  @Prop() image?: string | null = null;\n\n  /**\n   * Size of the avatar. Value can be preset or custom.\n   * @defaultValue lg\n   */\n  @Prop({ reflect: true }) size?:\n  | 'xl' // 64px\n  | 'lg' // 56px\n  | 'md' // 40px\n  | 'sm' // 32px\n  | 'xs' // 24px\n  | string = 'lg';\n\n  /**\n   * Determines the variant of avatar. Changes appearance accordingly.\n   * @defaultValue customer\n   */\n  @Prop({ reflect: true }) variant?: 'customer' | 'admin' = 'customer';\n\n  private avatarSize() {\n    const sizes: { [key: string]: any } = {\n      xs: '24px',\n      sm: '32px',\n      md: '40px',\n      lg: '56px',\n      xl: '64px',\n    }\n\n    if (sizes[this.size]) {\n      return sizes[this.size];\n    } else {\n      return this.size\n    }\n  }\n\n  private renderAssetWrapper = () => {\n    const style = {\n      height: this.avatarSize(),\n      width: this.avatarSize()\n    };\n\n    return (\n      <div style={style} part=\"asset-wrapper\">\n        {this.renderIconOrImage()}\n        {this.renderBadge()}\n      </div>\n    )\n  };\n\n  private renderAvatar = () => {\n    return (\n      this.dropdown\n        ?\n        <button class=\"pds-avatar__button\" type=\"button\">\n          {this.renderAssetWrapper()}\n        </button>\n        :\n        this.renderAssetWrapper()\n    )\n  };\n\n  private renderBadge = () => (\n    this.badge\n    // Percentage is average size of icon in relation to total avatar size\n    // of all preset sizes found in Figma.\n    // Used to allow icons to scale to container size\n      && <pds-icon class=\"pds-avatar__badge\" icon={checkCircleFilled} size=\"33.53%\"></pds-icon>\n  );\n\n  private renderIconOrImage = () => (\n    this.image\n      ? <img alt={this.alt} src={this.image} />\n      // Percentage is average size of icon in relation to total avatar size\n      // of all preset sizes found in Figma.\n      // Used to allow icons to scale to container size\n      : <pds-icon color=\"var(--pine-color-blue-400)\" icon={userFilled} size=\"33.53%\"></pds-icon>\n  );\n\n  private classNames = () => (\n    {\n      'pds-avatar': true,\n      [`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector\n      [`pds-avatar--${this.variant}`]: this.variant === 'admin'\n    }\n  );\n\n  render() {\n\n    return (\n      <Host\n        id={this.componentId}\n        class={{...this.classNames()}}\n      >\n        {this.renderAvatar()}\n      </Host>\n    );\n  }\n}\n"],"mappings":"wFAAA,MAAMA,EAAe,yzDACrB,MAAAC,EAAeD,E,MCUFE,EAAS,M,yBAiEZC,KAAAC,mBAAqB,KAC3B,MAAMC,EAAQ,CACZC,OAAQH,KAAKI,aACbC,MAAOL,KAAKI,cAGd,OACEE,EAAA,OAAKJ,MAAOA,EAAOK,KAAK,iBACrBP,KAAKQ,oBACLR,KAAKS,cACF,EAIFT,KAAAU,aAAe,IAEnBV,KAAKW,SAEHL,EAAA,UAAQM,MAAM,qBAAqBC,KAAK,UACrCb,KAAKC,sBAGRD,KAAKC,qBAIHD,KAAAS,YAAc,IACpBT,KAAKc,OAIAR,EAAA,YAAUM,MAAM,oBAAoBG,KAAMC,EAAmBC,KAAK,WAGjEjB,KAAAQ,kBAAoB,IAC1BR,KAAKkB,MACDZ,EAAA,OAAKa,IAAKnB,KAAKmB,IAAKC,IAAKpB,KAAKkB,QAI9BZ,EAAA,YAAUe,MAAM,6BAA6BN,KAAMO,EAAYL,KAAK,WAGlEjB,KAAAuB,WAAa,MAEjB,aAAc,KACd,CAAC,yBAA0BvB,KAAKkB,QAAU,IAAMlB,KAAKkB,QAAU,KAC/D,CAAC,eAAelB,KAAKwB,WAAYxB,KAAKwB,UAAY,U,SA1GxB,K,WAMb,M,yCAWG,M,WAMY,K,UAYrB,K,aAM+C,U,CAElD,UAAApB,GACN,MAAMqB,EAAgC,CACpCC,GAAI,OACJC,GAAI,OACJC,GAAI,OACJC,GAAI,OACJC,GAAI,QAGN,GAAIL,EAAMzB,KAAKiB,MAAO,CACpB,OAAOQ,EAAMzB,KAAKiB,K,KACb,CACL,OAAOjB,KAAKiB,I,EAuDhB,MAAAc,GAEE,OACEzB,EAAC0B,EAAI,CAAAC,IAAA,2CACHC,GAAIlC,KAAKmC,YACTvB,MAAKwB,OAAAC,OAAA,GAAMrC,KAAKuB,eAEfvB,KAAKU,e"}

package/dist/pine-core/p-7611d073.system.js

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(e,n,t,o){function s(e){return e instanceof t?e:new t((function(n){n(e)}))}return new(t||(t=Promise))((function(t,a){function i(e){try{d(o.next(e))}catch(e){a(e)}}function r(e){try{d(o["throw"](e))}catch(e){a(e)}}function d(e){e.done?t(e.value):s(e.value).then(i,r)}d((o=o.apply(e,n||[])).next())}))};var __generator=this&&this.__generator||function(e,n){var t={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},o,s,a,i;return i={next:r(0),throw:r(1),return:r(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function r(e){return function(n){return d([e,n])}}function d(r){if(o)throw new TypeError("Generator is already executing.");while(i&&(i=0,r[0]&&(t=0)),t)try{if(o=1,s&&(a=r[0]&2?s["return"]:r[0]?s["throw"]||((a=s["return"])&&a.call(s),0):s.next)&&!(a=a.call(s,r[1])).done)return a;if(s=0,a)r=[r[0]&2,a.value];switch(r[0]){case 0:case 1:a=r;break;case 4:t.label++;return{value:r[1],done:false};case 5:t.label++;s=r[1];r=[0];continue;case 7:r=t.ops.pop();t.trys.pop();continue;default:if(!(a=t.trys,a=a.length>0&&a[a.length-1])&&(r[0]===6||r[0]===2)){t=0;continue}if(r[0]===3&&(!a||r[1]>a[0]&&r[1]<a[3])){t.label=r[1];break}if(r[0]===6&&t.label<a[1]){t.label=a[1];a=r;break}if(a&&t.label<a[2]){t.label=a[2];t.ops.push(r);break}if(a[2])t.ops.pop();t.trys.pop();continue}r=n.call(e,t)}catch(e){r=[6,e];s=0}finally{o=a=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};System.register(["./p-64b4cb70.system.js","./p-56ba5cbf.system.js"],(function(e,n){"use strict";var t,o,s;return{setters:[function(n){t=n.p;o=n.b;e("setNonce",n.s)},function(e){s=e.g}],execute:function(){var e=this;var a=function(){var e=n.meta.url;var o={};if(e!==""){o.resourcesUrl=new URL(".",e).href}return t(o)};a().then((function(n){return __awaiter(e,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,s()];case 1:e.sent();return[2,o([["p-3e527956.system",[[1,"pds-copytext",{border:[516],componentId:[1,"component-id"],fullWidth:[4,"full-width"],truncate:[4],value:[1]}]]],["p-0a636312.system",[[1,"pds-table-head"]]],["p-6370aa12.system",[[1,"pds-table-row",{isSelected:[32]}]]],["p-860ceab3.system",[[1,"pds-accordion",{componentId:[1,"component-id"],isOpen:[1540,"open"]},null,{isOpen:["handleOpenState"]}]]],["p-9a05b9ce.system",[[1,"pds-avatar",{alt:[1],badge:[4],componentId:[1,"component-id"],dropdown:[4],image:[1],size:[513],variant:[513]}]]],["p-bb099830.system",[[1,"pds-chip",{componentId:[1,"component-id"],sentiment:[1],dot:[4],label:[1],large:[4],variant:[1]}]]],["p-2af2432d.system",[[1,"pds-link",{componentId:[1,"component-id"],external:[4],variant:[1],fontSize:[1,"font-size"],href:[1]}]]],["p-12e537ba.system",[[6,"pds-sortable-item",{enableActions:[4,"enable-actions"],componentId:[1,"component-id"],showHandle:[1028,"show-handle"]}]]],["p-5f9fa644.system",[[0,"pds-box",{alignItems:[1,"align-items"],auto:[4],backgroundColor:[1,"background-color"],border:[4],borderColor:[1,"border-color"],borderRadius:[1,"border-radius"],direction:[1],display:[1],fit:[4],gap:[1],flex:[1],justifyContent:[1,"justify-content"],minHeight:[1,"min-height"],minWidth:[1,"min-width"],offset:[1],offsetXs:[1,"offset-xs"],offsetSm:[1,"offset-sm"],offsetMd:[1,"offset-md"],offsetLg:[1,"offset-lg"],offsetXl:[1,"offset-xl"],padding:[1],shadow:[1],size:[1],sizeXs:[1,"size-xs"],sizeSm:[1,"size-sm"],sizeMd:[1,"size-md"],sizeLg:[1,"size-lg"],sizeXl:[1,"size-xl"]}]]],["p-ec56491f.system",[[1,"pds-divider",{componentId:[1,"component-id"],offset:[1],vertical:[4]}]]],["p-8c5e76d4.system",[[1,"pds-image",{alt:[1],componentId:[1,"component-id"],height:[2],loading:[1],sizes:[1],src:[1],srcset:[1],width:[2]}]]],["p-43783da1.system",[[1,"pds-input",{componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[4],label:[1],name:[1],placeholder:[1],readonly:[4],required:[4],type:[1],value:[1025]}]]],["p-dacd68cf.system",[[1,"pds-progress",{animated:[4],componentId:[1,"component-id"],fillColor:[1,"fill-color"],label:[1],percent:[2],showPercent:[4,"show-percent"]}]]],["p-30cb97ee.system",[[2,"pds-radio",{checked:[4],disabled:[4],errorMessage:[1,"error-message"],invalid:[4],componentId:[1,"component-id"],label:[1],helperMessage:[1,"helper-message"],name:[1],required:[4],value:[1]}]]],["p-320e4c53.system",[[0,"pds-row",{alignItems:[1,"align-items"],border:[4],colGap:[1,"col-gap"],componentId:[1,"component-id"],justifyContent:[1,"justify-content"],minHeight:[1,"min-height"],noWrap:[4,"no-wrap"]}]]],["p-9e33f4fb.system",[[6,"pds-sortable",{border:[516],componentId:[1,"component-id"],dividers:[516],handleType:[1,"handle-type"]}]]],["p-c721d912.system",[[1,"pds-switch",{componentId:[1,"component-id"],checked:[4],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[4],label:[1],name:[1],required:[4],type:[1],value:[1]}]]],["p-2e19ec3d.system",[[4,"pds-tab",{name:[1],parentComponentId:[1,"parent-component-id"],variant:[1],index:[2],selected:[4]}]]],["p-ecbf0b15.system",[[1,"pds-table",{compact:[4],componentId:[1,"component-id"],responsive:[4],fixedColumn:[4,"fixed-column"],selectable:[4],sortingColumn:[32],sortingDirection:[32]},[[0,"pdsTableSort","handleTableSort"]]]]],["p-49a28a19.system",[[1,"pds-table-body"]]],["p-478689a0.system",[[4,"pds-tabpanel",{name:[1],parentComponentId:[1,"parent-component-id"],variant:[1],selected:[1028]}]]],["p-327e1afa.system",[[1,"pds-tabs",{tablistLabel:[1,"tablist-label"],componentId:[1,"component-id"],variant:[1],activeTabName:[1025,"active-tab-name"],activeTabIndex:[1026,"active-tab-index"]},[[16,"pdsTabClick","tabClickHandler"],[0,"keydown","handleKeyDown"]]]]],["p-3ca20edb.system",[[1,"pds-textarea",{componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[1028],label:[1],name:[1],placeholder:[1],readonly:[4],required:[4],rows:[2],value:[1025]}]]],["p-cfb22651.system",[[1,"pds-tooltip",{content:[1],componentId:[1,"component-id"],hasArrow:[4,"has-arrow"],htmlContent:[4,"html-content"],placement:[513],opened:[1540],isOpen:[32],showTooltip:[64],hideTooltip:[64]},null,{opened:["handleOpenToggle"]}]]],["p-3caa5870.system",[[1,"pds-icon",{color:[1],icon:[8],name:[513],size:[513],src:[1],ariaLabel:[32],isVisible:[32],svgContent:[32]},null,{name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"]}]]],["p-98735309.system",[[1,"pds-button",{componentId:[1,"component-id"],disabled:[4],icon:[1],name:[1],value:[1],type:[1],variant:[1]}]]],["p-d99998a4.system",[[1,"pds-table-head-cell",{sortable:[4],sortingDirection:[32],tableScrolling:[32]}]]],["p-0a1e2528.system",[[1,"pds-checkbox",{checked:[1028],componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],indeterminate:[4],invalid:[4],label:[1],labelHidden:[4,"label-hidden"],name:[1],required:[4],value:[1]}],[1,"pds-table-cell",{truncate:[4],tableScrolling:[32]}]]]],n)]}}))}))}))}}}));
+var __awaiter=this&&this.__awaiter||function(e,n,t,o){function s(e){return e instanceof t?e:new t((function(n){n(e)}))}return new(t||(t=Promise))((function(t,a){function i(e){try{d(o.next(e))}catch(e){a(e)}}function r(e){try{d(o["throw"](e))}catch(e){a(e)}}function d(e){e.done?t(e.value):s(e.value).then(i,r)}d((o=o.apply(e,n||[])).next())}))};var __generator=this&&this.__generator||function(e,n){var t={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},o,s,a,i;return i={next:r(0),throw:r(1),return:r(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function r(e){return function(n){return d([e,n])}}function d(r){if(o)throw new TypeError("Generator is already executing.");while(i&&(i=0,r[0]&&(t=0)),t)try{if(o=1,s&&(a=r[0]&2?s["return"]:r[0]?s["throw"]||((a=s["return"])&&a.call(s),0):s.next)&&!(a=a.call(s,r[1])).done)return a;if(s=0,a)r=[r[0]&2,a.value];switch(r[0]){case 0:case 1:a=r;break;case 4:t.label++;return{value:r[1],done:false};case 5:t.label++;s=r[1];r=[0];continue;case 7:r=t.ops.pop();t.trys.pop();continue;default:if(!(a=t.trys,a=a.length>0&&a[a.length-1])&&(r[0]===6||r[0]===2)){t=0;continue}if(r[0]===3&&(!a||r[1]>a[0]&&r[1]<a[3])){t.label=r[1];break}if(r[0]===6&&t.label<a[1]){t.label=a[1];a=r;break}if(a&&t.label<a[2]){t.label=a[2];t.ops.push(r);break}if(a[2])t.ops.pop();t.trys.pop();continue}r=n.call(e,t)}catch(e){r=[6,e];s=0}finally{o=a=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};System.register(["./p-64b4cb70.system.js","./p-56ba5cbf.system.js"],(function(e,n){"use strict";var t,o,s;return{setters:[function(n){t=n.p;o=n.b;e("setNonce",n.s)},function(e){s=e.g}],execute:function(){var e=this;var a=function(){var e=n.meta.url;var o={};if(e!==""){o.resourcesUrl=new URL(".",e).href}return t(o)};a().then((function(n){return __awaiter(e,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,s()];case 1:e.sent();return[2,o([["p-3e527956.system",[[1,"pds-copytext",{border:[516],componentId:[1,"component-id"],fullWidth:[4,"full-width"],truncate:[4],value:[1]}]]],["p-0a636312.system",[[1,"pds-table-head"]]],["p-6370aa12.system",[[1,"pds-table-row",{isSelected:[32]}]]],["p-8144b8d8.system",[[1,"pds-accordion",{componentId:[1,"component-id"],isOpen:[1540,"open"]},null,{isOpen:["handleOpenState"]}]]],["p-1922e07e.system",[[1,"pds-avatar",{alt:[1],badge:[4],componentId:[1,"component-id"],dropdown:[4],image:[1],size:[513],variant:[513]}]]],["p-bb099830.system",[[1,"pds-chip",{componentId:[1,"component-id"],sentiment:[1],dot:[4],label:[1],large:[4],variant:[1]}]]],["p-2af2432d.system",[[1,"pds-link",{componentId:[1,"component-id"],external:[4],variant:[1],fontSize:[1,"font-size"],href:[1]}]]],["p-12e537ba.system",[[6,"pds-sortable-item",{enableActions:[4,"enable-actions"],componentId:[1,"component-id"],showHandle:[1028,"show-handle"]}]]],["p-5f9fa644.system",[[0,"pds-box",{alignItems:[1,"align-items"],auto:[4],backgroundColor:[1,"background-color"],border:[4],borderColor:[1,"border-color"],borderRadius:[1,"border-radius"],direction:[1],display:[1],fit:[4],gap:[1],flex:[1],justifyContent:[1,"justify-content"],minHeight:[1,"min-height"],minWidth:[1,"min-width"],offset:[1],offsetXs:[1,"offset-xs"],offsetSm:[1,"offset-sm"],offsetMd:[1,"offset-md"],offsetLg:[1,"offset-lg"],offsetXl:[1,"offset-xl"],padding:[1],shadow:[1],size:[1],sizeXs:[1,"size-xs"],sizeSm:[1,"size-sm"],sizeMd:[1,"size-md"],sizeLg:[1,"size-lg"],sizeXl:[1,"size-xl"]}]]],["p-ec56491f.system",[[1,"pds-divider",{componentId:[1,"component-id"],offset:[1],vertical:[4]}]]],["p-8c5e76d4.system",[[1,"pds-image",{alt:[1],componentId:[1,"component-id"],height:[2],loading:[1],sizes:[1],src:[1],srcset:[1],width:[2]}]]],["p-43783da1.system",[[1,"pds-input",{componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[4],label:[1],name:[1],placeholder:[1],readonly:[4],required:[4],type:[1],value:[1025]}]]],["p-dacd68cf.system",[[1,"pds-progress",{animated:[4],componentId:[1,"component-id"],fillColor:[1,"fill-color"],label:[1],percent:[2],showPercent:[4,"show-percent"]}]]],["p-30cb97ee.system",[[2,"pds-radio",{checked:[4],disabled:[4],errorMessage:[1,"error-message"],invalid:[4],componentId:[1,"component-id"],label:[1],helperMessage:[1,"helper-message"],name:[1],required:[4],value:[1]}]]],["p-320e4c53.system",[[0,"pds-row",{alignItems:[1,"align-items"],border:[4],colGap:[1,"col-gap"],componentId:[1,"component-id"],justifyContent:[1,"justify-content"],minHeight:[1,"min-height"],noWrap:[4,"no-wrap"]}]]],["p-9e33f4fb.system",[[6,"pds-sortable",{border:[516],componentId:[1,"component-id"],dividers:[516],handleType:[1,"handle-type"]}]]],["p-c721d912.system",[[1,"pds-switch",{componentId:[1,"component-id"],checked:[4],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[4],label:[1],name:[1],required:[4],type:[1],value:[1]}]]],["p-2e19ec3d.system",[[4,"pds-tab",{name:[1],parentComponentId:[1,"parent-component-id"],variant:[1],index:[2],selected:[4]}]]],["p-ecbf0b15.system",[[1,"pds-table",{compact:[4],componentId:[1,"component-id"],responsive:[4],fixedColumn:[4,"fixed-column"],selectable:[4],sortingColumn:[32],sortingDirection:[32]},[[0,"pdsTableSort","handleTableSort"]]]]],["p-49a28a19.system",[[1,"pds-table-body"]]],["p-478689a0.system",[[4,"pds-tabpanel",{name:[1],parentComponentId:[1,"parent-component-id"],variant:[1],selected:[1028]}]]],["p-327e1afa.system",[[1,"pds-tabs",{tablistLabel:[1,"tablist-label"],componentId:[1,"component-id"],variant:[1],activeTabName:[1025,"active-tab-name"],activeTabIndex:[1026,"active-tab-index"]},[[16,"pdsTabClick","tabClickHandler"],[0,"keydown","handleKeyDown"]]]]],["p-78ae6c93.system",[[1,"pds-textarea",{componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[1028],label:[1],name:[1],placeholder:[1],readonly:[4],required:[4],rows:[2],value:[1025]}]]],["p-77da68b4.system",[[1,"pds-tooltip",{content:[1],componentId:[1,"component-id"],hasArrow:[4,"has-arrow"],htmlContent:[4,"html-content"],placement:[513],opened:[1540],isOpen:[32],showTooltip:[64],hideTooltip:[64]},null,{opened:["handleOpenToggle"]}]]],["p-3caa5870.system",[[1,"pds-icon",{color:[1],icon:[8],name:[513],size:[513],src:[1],ariaLabel:[32],isVisible:[32],svgContent:[32]},null,{name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"]}]]],["p-cf147dfc.system",[[1,"pds-button",{componentId:[1,"component-id"],disabled:[4],icon:[1],name:[1],value:[1],type:[1],variant:[1]}]]],["p-d99998a4.system",[[1,"pds-table-head-cell",{sortable:[4],sortingDirection:[32],tableScrolling:[32]}]]],["p-0a1e2528.system",[[1,"pds-checkbox",{checked:[1028],componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],indeterminate:[4],invalid:[4],label:[1],labelHidden:[4,"label-hidden"],name:[1],required:[4],value:[1]}],[1,"pds-table-cell",{truncate:[4],tableScrolling:[32]}]]]],n)]}}))}))}))}}}));
 //# sourceMappingURL=p-7611d073.system.js.map

package/dist/pine-core/p-77da68b4.system.entry.js

@@ -0,0 +1,2 @@
+var __awaiter=this&&this.__awaiter||function(t,r,o,i){function a(t){return t instanceof o?t:new o((function(r){r(t)}))}return new(o||(o=Promise))((function(o,e){function n(t){try{l(i.next(t))}catch(t){e(t)}}function d(t){try{l(i["throw"](t))}catch(t){e(t)}}function l(t){t.done?o(t.value):a(t.value).then(n,d)}l((i=i.apply(t,r||[])).next())}))};var __generator=this&&this.__generator||function(t,r){var o={label:0,sent:function(){if(e[0]&1)throw e[1];return e[1]},trys:[],ops:[]},i,a,e,n;return n={next:d(0),throw:d(1),return:d(2)},typeof Symbol==="function"&&(n[Symbol.iterator]=function(){return this}),n;function d(t){return function(r){return l([t,r])}}function l(d){if(i)throw new TypeError("Generator is already executing.");while(n&&(n=0,d[0]&&(o=0)),o)try{if(i=1,a&&(e=d[0]&2?a["return"]:d[0]?a["throw"]||((e=a["return"])&&e.call(a),0):a.next)&&!(e=e.call(a,d[1])).done)return e;if(a=0,e)d=[d[0]&2,e.value];switch(d[0]){case 0:case 1:e=d;break;case 4:o.label++;return{value:d[1],done:false};case 5:o.label++;a=d[1];d=[0];continue;case 7:d=o.ops.pop();o.trys.pop();continue;default:if(!(e=o.trys,e=e.length>0&&e[e.length-1])&&(d[0]===6||d[0]===2)){o=0;continue}if(d[0]===3&&(!e||d[1]>e[0]&&d[1]<e[3])){o.label=d[1];break}if(d[0]===6&&o.label<e[1]){o.label=e[1];e=d;break}if(e&&o.label<e[2]){o.label=e[2];o.ops.push(d);break}if(e[2])o.ops.pop();o.trys.pop();continue}d=r.call(t,o)}catch(t){d=[6,t];a=0}finally{i=e=0}if(d[0]&5)throw d[1];return{value:d[0]?d[1]:void 0,done:true}}};System.register(["./p-64b4cb70.system.js"],(function(t){"use strict";var r,o,i,a,e;return{setters:[function(t){r=t.r;o=t.c;i=t.h;a=t.H;e=t.g}],execute:function(){var n=function(t){var r=t.elem,o=t.elemPlacement,i=t.overlay,a=t.offset,e=a===void 0?8:a;if(r==undefined)return;var n=r.getBoundingClientRect();var d=i.getBoundingClientRect();if(!o||o=="")return;switch(true){case o.includes("right"):i.style.top="50%";i.style.left="calc(".concat(n.width,"px + ").concat(e,"px)");i.style.transform="translateY(-50%)";if(o.includes("start")){i.style.top="0";i.style.transform="translateY(0)"}if(o.includes("end")){i.style.bottom="0";i.style.top="initial";i.style.transform="translateY(0)"}break;case o.includes("left"):i.style.top="50%";i.style.right="calc(".concat(n.width,"px + ").concat(e,"px)");i.style.transform="translateY(-50%)";if(o.includes("start")){i.style.top="0";i.style.transform="translateY(0)"}if(o.includes("end")){i.style.bottom="0";i.style.top="initial";i.style.transform="translateY(0)"}break;case o.includes("bottom"):i.style.top="calc(".concat(n.height,"px + ").concat(e,"px)");i.style.left="50%";i.style.transform="translateX(-50%)";if(o.includes("start")){i.style.left="0";i.style.transform="translateX(0)"}if(o.includes("end")){i.style.left="initial";i.style.right="0";i.style.transform="translateX(0)"}break;case o.includes("top"):i.style.top="calc((".concat(d.height,"px + ").concat(e,"px) * -1)");i.style.left="50%";i.style.transform="translateX(-50%)";if(o.includes("start")){i.style.left="0";i.style.transform="translateX(0)"}if(o.includes("end")){i.style.left="initial";i.style.right="0";i.style.transform="translateX(0)"}break}};var d=':host{--border-radius-overlay:var(--pine-border-radius-125);--border-width-arrow-down:var(--sizing-arrow-default) var(--sizing-arrow-default) 0;--border-width-arrow-left:var(--sizing-arrow-default) var(--sizing-arrow-default) var(--sizing-arrow-default) 0;--border-width-arrow-right:var(--sizing-arrow-default) 0 var(--sizing-arrow-default) var(--sizing-arrow-default);--border-width-arrow-up:0 var(--sizing-arrow-default) var(--sizing-arrow-default);--box-shadow-default:var(--pine-box-shadow-md);--color-background-default:var(--pine-color-charcoal-400);--color-text-default:var(--pine-color-white);--font-size-overlay:var(--pine-font-size-087);--line-height-overlay:var(--pine-line-height-125);--sizing-arrow-default:6px;--sizing-arrow-offset:14px;--sizing-width-default:320px;--spacing-padding-overlay:var(--pine-spacing-100) calc(var(--pine-spacing-300) / 2);display:inline-block;position:relative}:host ::slotted(*){display:-ms-flexbox;display:flex}:host ::slotted([slot=content]){display:block;white-space:normal;width:var(--sizing-width-default)}.pds-tooltip__content{background-color:var(--color-background-default);border-radius:var(--border-radius-overlay);-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default);color:var(--color-text-default);font-size:var(--font-size-overlay);line-height:var(--line-height-overlay);opacity:0;padding:var(--spacing-padding-overlay);position:absolute;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content}.pds-tooltip--is-open .pds-tooltip__content{opacity:1;visibility:visible;z-index:1}:host(.pds-tooltip--has-html-content) .pds-tooltip__content{width:auto}.pds-tooltip__content::after{border-color:transparent;border-right-color:transparent;border-style:solid;border-width:var(--border-width-arrow-left);content:"";height:0;position:absolute;width:0}.pds-tooltip--right .pds-tooltip__content::after{border-inline-end-color:var(--color-background-default);border-width:var(--border-width-arrow-left);left:calc(var(--sizing-arrow-default) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--right-end .pds-tooltip__content::after{border-inline-end-color:var(--color-background-default);border-width:var(--border-width-arrow-left);bottom:var(--sizing-arrow-offset);left:calc(var(--sizing-arrow-default) * -1);top:initial}.pds-tooltip--right-start .pds-tooltip__content::after{border-inline-end-color:var(--color-background-default);border-width:var(--border-width-arrow-left);left:calc(var(--sizing-arrow-default) * -1);top:var(--sizing-arrow-offset)}.pds-tooltip--top .pds-tooltip__content::after{border-block-start-color:var(--color-background-default);border-width:var(--border-width-arrow-down);bottom:calc(var(--sizing-arrow-default) * -1);left:50%;top:initial;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--top-start .pds-tooltip__content::after{border-block-start-color:var(--color-background-default);border-width:var(--border-width-arrow-down);bottom:calc(var(--sizing-arrow-default) * -1);left:var(--sizing-arrow-offset);top:initial}.pds-tooltip--top-end .pds-tooltip__content::after{border-block-start-color:var(--color-background-default);border-width:var(--border-width-arrow-down);bottom:calc(var(--sizing-arrow-default) * -1);left:initial;right:var(--sizing-arrow-offset);top:initial}.pds-tooltip--left .pds-tooltip__content::after{border-inline-start-color:var(--color-background-default);border-width:var(--border-width-arrow-right);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--left-end .pds-tooltip__content::after{border-inline-start-color:var(--color-background-default);border-width:var(--border-width-arrow-right);bottom:var(--sizing-arrow-offset);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:initial}.pds-tooltip--left-start .pds-tooltip__content::after{border-inline-start-color:var(--color-background-default);border-width:var(--border-width-arrow-right);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:var(--sizing-arrow-offset)}.pds-tooltip--bottom .pds-tooltip__content::after{border-block-end-color:var(--color-background-default);border-width:var(--border-width-arrow-up);left:50%;top:calc(var(--sizing-arrow-default) * -1);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--bottom-end .pds-tooltip__content::after{border-block-end-color:var(--color-background-default);border-width:var(--border-width-arrow-up);left:initial;right:var(--sizing-arrow-offset);top:calc(var(--sizing-arrow-default) * -1)}.pds-tooltip--bottom-start .pds-tooltip__content::after{border-block-end-color:var(--color-background-default);border-width:var(--border-width-arrow-up);left:var(--sizing-arrow-offset);top:calc(var(--sizing-arrow-default) * -1)}.pds-tooltip--no-arrow .pds-tooltip__content::after{border-width:0}';var l=d;var s=t("pds_tooltip",function(){function t(t){var i=this;r(this,t);this.pdsTooltipHide=o(this,"pdsTooltipHide",7);this.pdsTooltipShow=o(this,"pdsTooltipShow",7);this.handleHide=function(){i.hideTooltip();i.pdsTooltipHide.emit()};this.handleShow=function(){i.showTooltip();i.pdsTooltipShow.emit()};this.isOpen=false;this.content=undefined;this.componentId=undefined;this.hasArrow=true;this.htmlContent=false;this.placement="right";this.opened=false}t.prototype.handleOpenToggle=function(){if(this.opened){this.handleShow()}else{this.handleHide()}};t.prototype.componentWillLoad=function(){if(this.opened){this.showTooltip()}this.el.addEventListener("blur",this.handleHide,true);this.el.addEventListener("focus",this.handleShow,true)};t.prototype.componentDidUpdate=function(){if(this.opened){this.showTooltip()}};t.prototype.componentDidRender=function(){n({elem:this.el,elemPlacement:this.placement,overlay:this.contentEl})};t.prototype.showTooltip=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.opened=true;return[2]}))}))};t.prototype.hideTooltip=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.opened=false;return[2]}))}))};t.prototype.render=function(){var t=this;return i(a,{key:"088766be31b8716e158cbffd4afc4ada0f14dc3d",onMouseEnter:this.handleShow,onMouseLeave:this.handleHide,onFocusin:this.handleShow,onFocusout:this.handleHide},i("div",{key:"c4fb29b5d5834a9e94f040ded6daf15cf3fcc6ff",class:"\n            pds-tooltip\n            pds-tooltip--".concat(this.placement,"\n            ").concat(this.htmlContent?"pds-tooltip--has-html-content":"","\n            ").concat(this.opened?"pds-tooltip--is-open":"","\n            ").concat(this.hasArrow?"":"pds-tooltip--no-arrow","\n          ")},i("span",{key:"25a69f567a33df83ff784d36de5bce86874d6d1d","aria-describedby":this.componentId,class:"pds-tooltip__trigger"},i("slot",{key:"eab3bbca9b913b04ef4dfe7a8e472c43d57c4979"})),i("div",{key:"bdaa9f26f848b440a8432a44481f8a1059ae0689",class:"pds-tooltip__content","aria-hidden":this.opened?"false":"true","aria-live":this.opened?"polite":"off",id:this.componentId,ref:function(r){return t.contentEl=r},role:"tooltip"},i("slot",{key:"0e62fe237e9a39208aa2146e2dc1d6df6b25b41d",name:"content"}),this.content)))};Object.defineProperty(t.prototype,"el",{get:function(){return e(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{opened:["handleOpenToggle"]}},enumerable:false,configurable:true});return t}());s.style=l}}}));
+//# sourceMappingURL=p-77da68b4.system.entry.js.map