@pine-ds/core 3.8.2 → 3.10.0

package/dist/pine-core/p-f8e1545e.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["pdsTableCellCss","PdsTableCell","constructor","hostRef","this","scrollContainer","setupRetries","tableScrolling","handleScroll","scrollLeft","error","console","warn","componentWillRender","tableRef","hostElement","closest","componentDidLoad","responsive","fixedColumn","setupScrollListener","disconnectedCallback","cleanupScrollListener","container","_a","shadowRoot","querySelector","addEventListener","passive","setupTimer","window","setTimeout","removeEventListener","undefined","clearTimeout","classNames","compact","push","cellAlign","truncate","join","render","h","Host","key","class","role","part","style","selectable"],"sources":["src/components/pds-table/pds-table-cell/pds-table-cell.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.tsx"],"sourcesContent":[":host {\n  --box-shadow-fixed: 3px 3px 6px -2px rgba(0, 0, 0, 0.2);\n\n  color: var(--pine-color-text);\n  display: table-cell;\n  font-family: var(--pine-font-family-body);\n  font-size: var(--pine-font-size);\n  font-weight: var(--pine-font-weight-regular);\n  inset-inline-start: var(--pine-dimension-none);\n  letter-spacing: var(--pine-letter-spacing);\n  line-height: var(--pine-line-height-body);\n  padding: var(--pine-dimension-sm);\n  vertical-align: inherit;\n}\n\n:host(.is-compact) {\n  padding-block: var(--pine-dimension-2xs)\n}\n\n:host(.is-fixed) {\n  background: var(--pine-color-background-container);\n  left: 0;\n  position: sticky;\n  z-index: var(--pine-z-index-raised);\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n  box-shadow: var(--box-shadow-fixed);\n}\n\n:host(.is-truncated) {\n  max-width: 100px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n:host(.has-checkbox) {\n  vertical-align: middle;\n  width: 16px;\n}\n\n// Text Alignment\n:host(.pds-table-cell--align-start) {\n  text-align: start;\n}\n\n:host(.pds-table-cell--align-center) {\n  text-align: center;\n}\n\n:host(.pds-table-cell--align-end) {\n  text-align: end;\n}\n\n:host(.pds-table-cell--align-justify) {\n  text-align: justify;\n}\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n  tag: 'pds-table-cell',\n  styleUrls: ['pds-table-cell.scss'],\n  shadow: true,\n})\nexport class PdsTableCell {\n  @Element() hostElement: HTMLPdsTableCellElement;\n  private tableRef: HTMLPdsTableElement;\n  private scrollContainer: HTMLElement | null = null;\n  private setupTimer: number | undefined;\n  private setupRetries: number = 0;\n\n  componentWillRender() {\n    this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n  }\n\n  componentDidLoad() {\n    if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {\n      // For responsive tables with fixed columns, set up scroll detection\n      // This enables the first column to show a shadow when the table is scrolled horizontally\n      this.setupScrollListener();\n    }\n  }\n\n  disconnectedCallback() {\n    this.cleanupScrollListener();\n  }\n\n  private setupScrollListener() {\n    if (!this.tableRef) return;\n\n    // Query shadowRoot once and cache the container\n    const container = this.tableRef.shadowRoot?.querySelector('.pds-table-responsive-container') as HTMLElement;\n\n    if (container) {\n      // Container available immediately\n      this.scrollContainer = container;\n      this.scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });\n      this.handleScroll(); // Initial check\n      this.setupRetries = 0; // Reset counter on success\n    } else {\n      // Container not ready, set up timer for retry with bounds\n      this.setupTimer = window.setTimeout(() => {\n        if (this.scrollContainer) return; // Already found\n        this.setupRetries = (this.setupRetries || 0) + 1;\n        if (this.setupRetries <= 50) {\n          this.setupScrollListener();\n        } else {\n          console.warn('Failed to find responsive container after 50 attempts');\n        }\n      }, 100);\n    }\n  }\n\n  private cleanupScrollListener() {\n    if (this.scrollContainer) {\n      this.scrollContainer.removeEventListener('scroll', this.handleScroll);\n      this.scrollContainer = null;\n    }\n\n    if (this.setupTimer !== undefined) {\n      window.clearTimeout(this.setupTimer);\n      this.setupTimer = undefined;\n    }\n\n    this.setupRetries = 0; // Reset retry counter\n  }\n\n  /**\n   * Sets the text alignment within the cell.\n   */\n  @Prop() cellAlign?: 'start' | 'center' | 'end' | 'justify';\n\n  /**\n   * Truncates content to a max width of 100px and adds an ellipsis.\n   */\n  @Prop() truncate: boolean;\n\n  /**\n   * Determines if the table is currently scrolling.\n   * @defaultValue false\n   */\n  @State() private tableScrolling: boolean = false;\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.tableRef && this.tableRef.compact) {\n      classNames.push('is-compact');\n    }\n\n    if (this.cellAlign) {\n      classNames.push(`pds-table-cell--align-${this.cellAlign}`);\n    }\n\n    if (this.truncate) {\n      classNames.push('is-truncated');\n    }\n\n    if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {\n      classNames.push('has-scrolled');\n    }\n\n    return classNames.join(' ');\n  }\n\n  /**\n   * Handles scroll events to update fixed column shadow state.\n   * Updates the tableScrolling state to control CSS classes for fixed column shadows.\n   * @private\n   */\n  private handleScroll = () => {\n    if (!this.scrollContainer) {\n      return;\n    }\n\n    try {\n      this.tableScrolling = this.scrollContainer.scrollLeft > 0;\n    } catch (error) {\n      console.warn('Scroll handler error:', error);\n    }\n  };\n\n  render() {\n    return (\n      <Host\n        class={this.classNames()}\n        role=\"gridcell\"\n        part=\"cell\"\n        style={\n          this.tableRef &&\n          this.tableRef.fixedColumn &&\n          this.tableRef.selectable\n            ? { '--fixed-cell-position': '40px' }\n            : {}\n          }\n        >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAkB,qkC,MCOXC,EAAY,MALzB,WAAAC,CAAAC,G,UAQUC,KAAeC,gBAAuB,KAEtCD,KAAYE,aAAW,EAwEdF,KAAcG,eAAY,MA6BnCH,KAAYI,aAAG,KACrB,IAAKJ,KAAKC,gBAAiB,CACzB,M,CAGF,IACED,KAAKG,eAAiBH,KAAKC,gBAAgBI,WAAa,C,CACxD,MAAOC,GACPC,QAAQC,KAAK,wBAAyBF,E,EAsB3C,CAjIC,mBAAAG,GACET,KAAKU,SAAWV,KAAKW,YAAYC,QAAQ,Y,CAG3C,gBAAAC,GACE,GAAIb,KAAKU,UAAYV,KAAKU,SAASI,YAAcd,KAAKU,SAASK,YAAa,CAG1Ef,KAAKgB,qB,EAIT,oBAAAC,GACEjB,KAAKkB,uB,CAGC,mBAAAF,G,MACN,IAAKhB,KAAKU,SAAU,OAGpB,MAAMS,GAAYC,EAAApB,KAAKU,SAASW,cAAY,MAAAD,SAAA,SAAAA,EAAAE,cAAc,mCAE1D,GAAIH,EAAW,CAEbnB,KAAKC,gBAAkBkB,EACvBnB,KAAKC,gBAAgBsB,iBAAiB,SAAUvB,KAAKI,aAAc,CAAEoB,QAAS,OAC9ExB,KAAKI,eACLJ,KAAKE,aAAe,C,KACf,CAELF,KAAKyB,WAAaC,OAAOC,YAAW,KAClC,GAAI3B,KAAKC,gBAAiB,OAC1BD,KAAKE,cAAgBF,KAAKE,cAAgB,GAAK,EAC/C,GAAIF,KAAKE,cAAgB,GAAI,CAC3BF,KAAKgB,qB,KACA,CACLT,QAAQC,KAAK,wD,IAEd,I,EAIC,qBAAAU,GACN,GAAIlB,KAAKC,gBAAiB,CACxBD,KAAKC,gBAAgB2B,oBAAoB,SAAU5B,KAAKI,cACxDJ,KAAKC,gBAAkB,I,CAGzB,GAAID,KAAKyB,aAAeI,UAAW,CACjCH,OAAOI,aAAa9B,KAAKyB,YACzBzB,KAAKyB,WAAaI,S,CAGpB7B,KAAKE,aAAe,C,CAmBd,UAAA6B,GACN,MAAMA,EAAa,GAEnB,GAAI/B,KAAKU,UAAYV,KAAKU,SAASsB,QAAS,CAC1CD,EAAWE,KAAK,a,CAGlB,GAAIjC,KAAKkC,UAAW,CAClBH,EAAWE,KAAK,yBAAyBjC,KAAKkC,Y,CAGhD,GAAIlC,KAAKmC,SAAU,CACjBJ,EAAWE,KAAK,e,CAGlB,GAAIjC,KAAKU,UAAYV,KAAKU,SAASK,aAAef,KAAKG,eAAgB,CACrE4B,EAAWE,KAAK,e,CAGlB,OAAOF,EAAWK,KAAK,I,CAoBzB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAOzC,KAAK+B,aACZW,KAAK,WACLC,KAAK,OACLC,MACE5C,KAAKU,UACLV,KAAKU,SAASK,aACdf,KAAKU,SAASmC,WACV,CAAE,wBAAyB,QAC3B,IAGNP,EAAa,QAAAE,IAAA,6C","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["pdsAlertTokensCss","pdsAlertCss","PdsAlert","exports","class_1","hostRef","_this","this","small","dismissible","variant","hasActionsContent","handleCloseClick","pdsAlertDismissClick","emit","prototype","componentWillRender","actionsSlot","el","querySelector","renderActions","isSmall","h","class","gap","flex","undefined","name","renderContent","display","truncate","color","tag","render","iconMap","danger","default","info","success","warning","iconName","Host","key","id","componentId","concat","border","padding","icon","size","direction","heading","weight","type","onClick"],"sources":["src/components/pds-alert/pds-alert.tokens.scss?tag=pds-alert&encapsulation=shadow","src/components/pds-alert/pds-alert.scss?tag=pds-alert&encapsulation=shadow","src/components/pds-alert/pds-alert.tsx"],"sourcesContent":["@use '~@kajabi-ui/styles/dist/pine/components/pds-alert/pds-alert.tokens.css';\n",":host {\n  display: block;\n  line-height: 1;\n  width: 100%;\n}\n\n.pds-alert__container {\n  --pds-alert-icon-size: var(--pine-dimension-sm);\n  --pds-alert-border-dismiss-outline: 2px solid var(--pds-alert-color-dismiss);\n\n  --pds-alert-background: var(--pine-alert-color-background);\n  --pds-alert-border-color: var(--pine-alert-color-border);\n  --pds-alert-color-icon: var(--pine-alert-color-icon);\n  --pds-alert-color-text: var(--pine-alert-color-text);\n  --pds-alert-color-dismiss: var(--pine-alert-color-dismiss);\n  --pds-alert-background-dismiss-hover: var(--pine-alert-color-dismiss-hover);\n}\n\n.pds-alert__container--danger {\n  --pds-alert-background: var(--pine-alert-color-danger-background);\n  --pds-alert-border-color: var(--pine-alert-color-danger-border);\n  --pds-alert-color-icon: var(--pine-alert-color-danger-icon);\n  --pds-alert-color-text: var(--pine-alert-color-danger-text);\n  --pds-alert-color-dismiss: var(--pine-alert-color-danger-dismiss);\n  --pds-alert-background-dismiss-hover: var(--pine-alert-color-danger-dismiss-hover);\n}\n\n.pds-alert__container--info {\n  --pds-alert-background: var(--pine-alert-color-info-background);\n  --pds-alert-border-color: var(--pine-alert-color-info-border);\n  --pds-alert-color-icon: var(--pine-alert-color-info-icon);\n  --pds-alert-color-text: var(--pine-alert-color-info-text);\n  --pds-alert-color-dismiss: var(--pine-alert-color-info-dismiss);\n  --pds-alert-background-dismiss-hover: var(--pine-alert-color-info-dismiss-hover);\n}\n\n.pds-alert__container--success {\n  --pds-alert-background: var(--pine-alert-color-success-background);\n  --pds-alert-border-color: var(--pine-alert-color-success-border);\n  --pds-alert-color-icon: var(--pine-alert-color-success-icon);\n  --pds-alert-color-text: var(--pine-alert-color-success-text);\n  --pds-alert-color-dismiss: var(--pine-alert-color-success-dismiss);\n  --pds-alert-background-dismiss-hover: var(--pine-alert-color-success-dismiss-hover);\n}\n\n.pds-alert__container--warning {\n  --pds-alert-background: var(--pine-alert-color-warning-background);\n  --pds-alert-border-color: var(--pine-alert-color-warning-border);\n  --pds-alert-color-icon: var(--pine-alert-color-warning-icon);\n  --pds-alert-color-text: var(--pine-alert-color-warning-text);\n  --pds-alert-color-dismiss: var(--pine-alert-color-warning-dismiss);\n  --pds-alert-background-dismiss-hover: var(--pine-alert-color-warning-dismiss-hover);\n}\n\n.pds-alert__icon {\n  margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-alert__icon--small {\n  margin-block-start: calc(var(--pine-dimension-2xs) / 2); // half the default icon margin\n}\n\n.pds-alert__content-wrapper {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  width: 100%;\n}\n\n.pds-alert__dismiss {\n  align-items: center;\n  background: none;\n  border: 0;\n  border-radius: var(--pine-border-radius-full);\n  cursor: pointer;\n  display: flex;\n  height: var(--pine-dimension-250);\n  justify-content: center;\n  padding: var(--pine-dimension-xs);\n  width: var(--pine-dimension-250);\n}\n\n.pds-alert__dismiss:hover {\n  background: var(--pds-alert-background-dismiss-hover);\n  opacity: 0.8;\n}\n\n.pds-alert__dismiss:focus-visible {\n  outline: var(--pds-alert-border-dismiss-outline);\n}\n\n.pds-alert__description--small {\n  flex: 1 1 auto;\n  max-width: 100%;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.pds-alert__actions {\n  margin-block-start: var(--pine-dimension-sm);\n}\n\n.pds-alert__actions--small {\n  flex-shrink: 0;\n  margin-inline-start: auto;\n  white-space: nowrap;\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, State } from '@stencil/core';\n\n/**\n * @slot actions - Slot for alert actions.\n */\n\n@Component({\n  tag: 'pds-alert',\n  styleUrls: ['pds-alert.tokens.scss', 'pds-alert.scss'],\n  shadow: true,\n})\nexport class PdsAlert {\n\n  @Element() el: HTMLPdsAlertElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Text displayed as the heading of the alert.\n   */\n  @Prop() heading: string;\n\n  /**\n   * If true, the alert is displayed in a smaller size and description text is truncated. Heading is not displayed.\n   */\n  @Prop() small = false;\n\n  /**\n   * If true, shows the dismiss button. If false, the dismiss button is hidden.\n   * @defaultValue false\n   */\n  @Prop() dismissible = false;\n\n  /**\n   * Sets the style variant of the alert.\n   * @defaultValue 'default'\n   */\n  @Prop() variant: 'default' | 'danger' | 'info' | 'success' | 'warning' = 'default';\n\n  /**\n   * Event emitted when the dismiss button is clicked.\n   */\n  @Event() pdsAlertDismissClick: EventEmitter<void>;\n\n  @State() hasActionsContent = false;\n\n  private handleCloseClick = () => {\n    this.pdsAlertDismissClick.emit();\n  };\n\n  componentWillRender() {\n    // Check if the actions slot has any content.\n    // If not, hide the actions container to prevent empty space.\n    const actionsSlot = this.el.querySelector('[slot=\"actions\"]');\n    this.hasActionsContent = !!actionsSlot;\n  }\n\n  private renderActions(isSmall: boolean) {\n    return (\n      <pds-box class={isSmall ? \"pds-alert__actions--small\" : \"pds-alert__actions\"} gap=\"sm\" flex={isSmall ? \"none\" : undefined} align-items={isSmall ? undefined : \"center\"}>\n        <slot name=\"actions\"></slot>\n      </pds-box>\n    );\n  }\n\n  private renderContent() {\n    if (this.small) {\n      return (\n        <pds-box display=\"flex\" gap=\"md\" align-items=\"center\">\n          <pds-text\n            truncate={this.small}\n            class=\"pds-alert__description--small\"\n            color=\"var(--pds-alert-color-text)\"\n            tag=\"p\"\n          >\n            <slot></slot>\n          </pds-text>\n          {this.hasActionsContent && this.renderActions(true)}\n        </pds-box>\n      );\n    }\n\n    return (\n      <div>\n        <pds-text class=\"pds-alert__description\" color=\"var(--pds-alert-color-text)\" tag=\"p\">\n          <slot></slot>\n        </pds-text>\n        {this.hasActionsContent && this.renderActions(false)}\n      </div>\n    );\n  }\n\n  render() {\n    const iconMap = {\n      danger: 'warning-filled',\n      default: 'info-circle-filled',\n      info: 'info-circle-filled',\n      success: 'check-circle-filled',\n      warning: 'info-circle-filled',\n    };\n\n    // Get the icon name based on the current variant\n    const iconName = iconMap[this.variant] || iconMap.default;\n\n    return (\n      <Host class=\"pds-alert\" id={this.componentId} variant={this.variant}>\n        <pds-box\n          class={`pds-alert__container pds-alert__container--${this.variant}`}\n          background-color=\"var(--pds-alert-background)\"\n          border-color=\"var(--pds-alert-border-color)\"\n          border-radius=\"md\"\n          border\n          display=\"block\"\n          padding=\"md\"\n        >\n          <pds-box gap=\"sm\" display=\"flex\">\n            <pds-icon\n              class={`pds-alert__icon ${this.small ? 'pds-alert__icon--small' : ''}`}\n              color=\"var(--pds-alert-color-icon)\"\n              icon={iconName}\n              size=\"var(--pds-alert-icon-size)\"\n            />\n            <pds-box class=\"pds-alert__content-wrapper\" direction=\"column\" gap=\"xs\" flex=\"grow\">\n              {this.heading && !this.small && (\n                <pds-text class=\"pds-alert__heading\" color=\"var(--pds-alert-color-text)\" size=\"h5\" tag=\"h3\" weight=\"medium\">\n                  {this.heading}\n                </pds-text>\n              )}\n\n              {this.renderContent()}\n            </pds-box>\n\n            {this.dismissible && (\n              <button class=\"pds-alert__dismiss\" type=\"button\" aria-label=\"Dismiss alert\" onClick={this.handleCloseClick}>\n                <pds-icon icon=\"remove\" size=\"var(--pds-alert-icon-size)\" aria-hidden=\"true\" color=\"var(--pds-alert-color-dismiss)\" />\n              </button>\n            )}\n          </pds-box>\n        </pds-box>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kKAAA,IAAMA,EAAoB,2xDCA1B,IAAMC,EAAc,43G,ICWPC,EAAQC,EAAA,uBALrB,SAAAC,EAAAC,GAAA,IAAAC,EAAAC,K,mEAsBUA,KAAKC,MAAG,MAMRD,KAAWE,YAAG,MAMdF,KAAOG,QAA0D,UAOhEH,KAAiBI,kBAAG,MAErBJ,KAAgBK,iBAAG,WACzBN,EAAKO,qBAAqBC,MAC5B,CA8FD,CA5FCV,EAAAW,UAAAC,oBAAA,WAGE,IAAMC,EAAcV,KAAKW,GAAGC,cAAc,oBAC1CZ,KAAKI,oBAAsBM,C,EAGrBb,EAAAW,UAAAK,cAAA,SAAcC,GACpB,OACEC,EAAS,WAAAC,MAAOF,EAAU,4BAA8B,qBAAsBG,IAAI,KAAKC,KAAMJ,EAAU,OAASK,UAAwB,cAAAL,EAAUK,UAAY,UAC5JJ,EAAA,QAAMK,KAAK,Y,EAKTvB,EAAAW,UAAAa,cAAA,WACN,GAAIrB,KAAKC,MAAO,CACd,OACEc,EAAS,WAAAO,QAAQ,OAAOL,IAAI,KAAI,cAAa,UAC3CF,EAAA,YACEQ,SAAUvB,KAAKC,MACfe,MAAM,gCACNQ,MAAM,8BACNC,IAAI,KAEJV,EAAA,cAEDf,KAAKI,mBAAqBJ,KAAKa,cAAc,M,CAKpD,OACEE,EAAA,WACEA,EAAU,YAAAC,MAAM,yBAAyBQ,MAAM,8BAA8BC,IAAI,KAC/EV,EAAA,cAEDf,KAAKI,mBAAqBJ,KAAKa,cAAc,O,EAKpDhB,EAAAW,UAAAkB,OAAA,WACE,IAAMC,EAAU,CACdC,OAAQ,iBACRC,QAAS,qBACTC,KAAM,qBACNC,QAAS,sBACTC,QAAS,sBAIX,IAAMC,EAAWN,EAAQ3B,KAAKG,UAAYwB,EAAQE,QAElD,OACEd,EAACmB,EAAI,CAAAC,IAAA,2CAACnB,MAAM,YAAYoB,GAAIpC,KAAKqC,YAAalC,QAASH,KAAKG,SAC1DY,EACE,WAAAoB,IAAA,2CAAAnB,MAAO,8CAAAsB,OAA8CtC,KAAKG,SACzC,iDACJ,+CAA+B,gBAC9B,KACdoC,OACA,KAAAjB,QAAQ,QACRkB,QAAQ,MAERzB,EAAA,WAAAoB,IAAA,2CAASlB,IAAI,KAAKK,QAAQ,QACxBP,EACE,YAAAoB,IAAA,2CAAAnB,MAAO,mBAAAsB,OAAmBtC,KAAKC,MAAQ,yBAA2B,IAClEuB,MAAM,8BACNiB,KAAMR,EACNS,KAAK,+BAEP3B,EAAA,WAAAoB,IAAA,2CAASnB,MAAM,6BAA6B2B,UAAU,SAAS1B,IAAI,KAAKC,KAAK,QAC1ElB,KAAK4C,UAAY5C,KAAKC,OACrBc,EAAA,YAAAoB,IAAA,2CAAUnB,MAAM,qBAAqBQ,MAAM,8BAA8BkB,KAAK,KAAKjB,IAAI,KAAKoB,OAAO,UAChG7C,KAAK4C,SAIT5C,KAAKqB,iBAGPrB,KAAKE,aACJa,EAAQ,UAAAoB,IAAA,2CAAAnB,MAAM,qBAAqB8B,KAAK,SAAQ,aAAY,gBAAgBC,QAAS/C,KAAKK,kBACxFU,EAAU,YAAAoB,IAAA,2CAAAM,KAAK,SAASC,KAAK,6BAA4B,cAAa,OAAOlB,MAAM,sC,uHA9H9E,I","ignoreList":[]}

package/dist/pine-core/p-fe60ee09.entry.js

@@ -1,2 +0,0 @@
-import{r as s,h as t,H as i,g as a}from"./p-Bf1dou5H.js";const e=":host{--tabs-dimension-panel-margin-top:var(--pine-dimension-none);--tabs-dimension-panel-padding:0;display:block}.pds-tabs__tablist{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-md)}:host(.pds-tabs--availability) .pds-tabs__tablist{gap:var(--pine-dimension-xs)}:host(.pds-tabs--filter) .pds-tabs__tablist{gap:var(--pine-dimension-sm)}:host(.pds-tabs--pill) .pds-tabs__tablist{background-color:var(--pine-color-grey-100);border:var(--pine-border-width-thin) solid var(--pine-color-grey-200);border-radius:var(--pine-dimension-100);display:-ms-inline-flexbox;display:inline-flex;display:-ms-flexbox;display:flex;gap:0;height:var(--pine-dimension-450)}";const n=class{constructor(t){s(this,t)}tabClickHandler(s){if(this.componentId===s.detail[1]){this.activeTabIndex=s.detail[0];this.activeTabName=this.tabs[this.activeTabIndex].name}}handleKeyDown(s){const t=["ArrowLeft","ArrowRight","Home","End"];const i=s.target;const a=i.closest("pds-tab");const e=a&&a.closest("pds-tabs")===this.el;if(t.includes(s.key)&&e){s.preventDefault();this.moveActiveTab(s.key)}}moveActiveTab(s){const t=0;const i=this.tabs.length-1;let a=null;switch(s){case"ArrowLeft":a=this.activeTabIndex===t?i:this.activeTabIndex+-1;break;case"ArrowRight":a=this.activeTabIndex===i?t:this.activeTabIndex+1;break;case"Home":a=t;break;case"End":a=i;break}this.tabs[a].children[0].focus();this.activeTabName=this.tabs[a].name;this.activeTabIndex=a}findAllChildren(){const s=Array.from(this.el.querySelectorAll("pds-tab"));const t=Array.from(this.el.querySelectorAll("pds-tabpanel"));this.tabs=s.filter((s=>s.closest("pds-tabs")===this.el));this.tabPanels=t.filter((s=>s.closest("pds-tabs")===this.el))}propGeneration(s,t=0){s.parentComponentId=this.componentId.toString();s.variant=this.variant.toString();s.selected=this.activeTabName===s.name?true:false;s["index"]=t}passPropsToChildren(){this.tabs.forEach(((s,t)=>{if(this.activeTabName===s.name)this.activeTabIndex=t;this.propGeneration(s,t)}));this.tabPanels.forEach((s=>{this.propGeneration(s)}))}classNames(){let s=`pds-tabs`;if(this.variant&&this.variant!="primary"){const t=`pds-tabs--${this.variant}`;s+=" "+t}return s}componentWillLoad(){this.findAllChildren()}componentWillRender(){this.passPropsToChildren()}render(){return t(i,{key:"729d6b9d3deb5a31cc7b1d9b18334761a856f933","active-tab-name":this.activeTabName,class:this.classNames(),id:this.componentId},t("div",{key:"87e06225508059a3c1b548440cf7da9b68df77fd",class:"pds-tabs__tablist",role:"tablist","aria-label":this.tablistLabel,part:"tab-list"},t("slot",{key:"5e8c4c941a7f6aea1ce3378641931c104b6b45cf",name:"tabs"})),t("slot",{key:"b396ed81d9a1c957803a94dbfe965986c6afc870",name:"tabpanels"}))}get el(){return a(this)}};n.style=e;export{n as pds_tabs};
-//# sourceMappingURL=p-fe60ee09.entry.js.map

package/dist/pine-core/p-fe60ee09.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["pdsTabsCss","PdsTabs","tabClickHandler","event","this","componentId","detail","activeTabIndex","activeTabName","tabs","name","handleKeyDown","ev","keySet","target","targetTab","closest","isOwnTab","el","includes","key","preventDefault","moveActiveTab","firstTabNumber","lastTabNumber","length","moveFocusTo","children","focus","findAllChildren","allTabs","Array","from","querySelectorAll","allTabPanels","filter","tab","tabPanels","panel","propGeneration","child","index","parentComponentId","toString","variant","selected","passPropsToChildren","forEach","classNames","className","variantClassName","componentWillLoad","componentWillRender","render","h","Host","class","id","role","tablistLabel","part"],"sources":["src/components/pds-tabs/pds-tabs.scss?tag=pds-tabs&encapsulation=shadow","src/components/pds-tabs/pds-tabs.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --tabs-dimension-panel-margin-top: Optional margin-top for panels\n   */\n  --tabs-dimension-panel-margin-top: var(--pine-dimension-none);\n  /**\n   * @prop --tabs-dimension-panel-padding: Optional padding for panels\n   */\n  --tabs-dimension-panel-padding: 0;\n\n  display: block;\n}\n\n.pds-tabs__tablist {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--pine-dimension-md);\n}\n\n:host(.pds-tabs--availability) .pds-tabs__tablist {\n  gap: var(--pine-dimension-xs);\n}\n\n:host(.pds-tabs--filter) .pds-tabs__tablist {\n  gap: var(--pine-dimension-sm);\n}\n\n:host(.pds-tabs--pill) .pds-tabs__tablist {\n  background-color: var(--pine-color-grey-100);\n  border: var(--pine-border-width-thin) solid var(--pine-color-grey-200);\n  border-radius: var(--pine-dimension-100);\n  display: inline-flex;\n  display: flex;\n  gap: 0;\n  height: var(--pine-dimension-450);\n}\n","import { Component, Element, Host, h, Prop, Listen } from '@stencil/core';\n\n  /**\n * @slot tabs - Content is placed within the `div[role=\"tablist\"]` element as children\n * @slot tabpanels - Content is placed directly after the `div[role=\"tablist\"]` element as siblings\n * @part tab-list - Exposes the container element that holds all the tab buttons for styling.\n */\n@Component({\n  tag: 'pds-tabs',\n  styleUrls: ['pds-tabs.scss'],\n  shadow: true,\n})\nexport class PdsTabs {\n  private tabs;\n  private tabPanels;\n\n  @Element() el: HTMLPdsTabsElement;\n\n  /**\n   * Sets the aria-label attached to the tablist element\n   */\n  @Prop() tablistLabel!: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Sets tabs variant styles as outlined in Figma documentation\n   */\n  @Prop() variant!: 'primary' | 'availability' | 'filter' | 'pill';\n\n  /**\n   * Sets the starting active tab name and maintains the name as the component re-renders\n   */\n  @Prop({mutable: true}) activeTabName!: string;\n\n  /**\n   * Sets the starting active tab index number and maintains the index number as the component re-renders\n   */\n  /** @internal */\n  @Prop({mutable: true}) activeTabIndex: number;\n\n  @Listen('pdsTabClick', {\n    target: 'body',\n  })\n  tabClickHandler(event: CustomEvent<any>) {\n    if (this.componentId === event.detail[1]) {\n      this.activeTabIndex = event.detail[0];\n      this.activeTabName = this.tabs[this.activeTabIndex].name;\n    }\n  }\n\n  @Listen('keydown', {})\n  handleKeyDown(ev: KeyboardEvent) {\n    const keySet = [\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"];\n\n    // Only handle keyboard navigation if the event originated from a tab button\n    // that belongs to THIS tabs component\n    const target = ev.target as HTMLElement;\n    const targetTab = target.closest('pds-tab');\n\n    // Check if the tab belongs to this tabs instance (not a nested one)\n    const isOwnTab = targetTab && targetTab.closest('pds-tabs') === this.el;\n\n    if (keySet.includes(ev.key) && isOwnTab) {\n      ev.preventDefault();\n      this.moveActiveTab(ev.key);\n    }\n  }\n\n  private moveActiveTab(key: string) {\n    const firstTabNumber = 0;\n    const lastTabNumber = this.tabs.length - 1;\n\n    let moveFocusTo = null;\n\n    switch (key) {\n      case 'ArrowLeft':\n        moveFocusTo = (this.activeTabIndex === firstTabNumber) ? lastTabNumber : (this.activeTabIndex + (-1));\n        break;\n      case 'ArrowRight':\n        moveFocusTo = (this.activeTabIndex === lastTabNumber) ? firstTabNumber : (this.activeTabIndex + 1);\n        break;\n      case 'Home':\n        moveFocusTo = firstTabNumber;\n        break;\n      case 'End':\n        moveFocusTo = lastTabNumber;\n        break;\n    }\n\n    // Move focus to the button element within `pds-tab`\n    this.tabs[moveFocusTo].children[0].focus();\n    this.activeTabName = this.tabs[moveFocusTo].name;\n    this.activeTabIndex = moveFocusTo;\n  }\n\n  private findAllChildren() {\n    // Only select direct children tabs/tabpanels, not nested ones\n    const allTabs = Array.from(this.el.querySelectorAll('pds-tab'));\n    const allTabPanels = Array.from(this.el.querySelectorAll('pds-tabpanel'));\n\n    // Filter to only include tabs that belong to this tabs component (not nested)\n    this.tabs = allTabs.filter(tab => tab.closest('pds-tabs') === this.el);\n    this.tabPanels = allTabPanels.filter(panel => panel.closest('pds-tabs') === this.el);\n  }\n\n  private propGeneration(child, index = 0) {\n    child.parentComponentId = this.componentId.toString();\n    child.variant = this.variant.toString();\n    child.selected = (this.activeTabName === child.name) ? true : false;\n    child['index'] = index;\n  }\n\n  private passPropsToChildren() {\n    this.tabs.forEach((child, index) => {\n      if (this.activeTabName === child.name) this.activeTabIndex = index;\n      this.propGeneration(child, index);\n    });\n\n    this.tabPanels.forEach((child) => {\n      this.propGeneration(child);\n    });\n  }\n\n  private classNames() {\n    let className = `pds-tabs`;\n    if (this.variant && this.variant != 'primary') {\n      const variantClassName = `pds-tabs--${this.variant}`;\n      className += ' ' + variantClassName;\n    }\n\n    return className;\n  };\n\n  componentWillLoad() {\n    this.findAllChildren();\n  }\n\n  componentWillRender() {\n    this.passPropsToChildren();\n  }\n\n  render() {\n    return (\n      <Host active-tab-name={this.activeTabName} class={this.classNames()} id={this.componentId}>\n        <div class=\"pds-tabs__tablist\" role=\"tablist\" aria-label={this.tablistLabel} part=\"tab-list\">\n          <slot name=\"tabs\" />\n        </div>\n        <slot name=\"tabpanels\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAa,2rB,MCYNC,EAAO,M,yBAmClB,eAAAC,CAAgBC,GACd,GAAIC,KAAKC,cAAgBF,EAAMG,OAAO,GAAI,CACxCF,KAAKG,eAAiBJ,EAAMG,OAAO,GACnCF,KAAKI,cAAgBJ,KAAKK,KAAKL,KAAKG,gBAAgBG,I,EAKxD,aAAAC,CAAcC,GACZ,MAAMC,EAAS,CAAC,YAAa,aAAc,OAAQ,OAInD,MAAMC,EAASF,EAAGE,OAClB,MAAMC,EAAYD,EAAOE,QAAQ,WAGjC,MAAMC,EAAWF,GAAaA,EAAUC,QAAQ,cAAgBZ,KAAKc,GAErE,GAAIL,EAAOM,SAASP,EAAGQ,MAAQH,EAAU,CACvCL,EAAGS,iBACHjB,KAAKkB,cAAcV,EAAGQ,I,EAIlB,aAAAE,CAAcF,GACpB,MAAMG,EAAiB,EACvB,MAAMC,EAAgBpB,KAAKK,KAAKgB,OAAS,EAEzC,IAAIC,EAAc,KAElB,OAAQN,GACN,IAAK,YACHM,EAAetB,KAAKG,iBAAmBgB,EAAkBC,EAAiBpB,KAAKG,gBAAkB,EACjG,MACF,IAAK,aACHmB,EAAetB,KAAKG,iBAAmBiB,EAAiBD,EAAkBnB,KAAKG,eAAiB,EAChG,MACF,IAAK,OACHmB,EAAcH,EACd,MACF,IAAK,MACHG,EAAcF,EACd,MAIJpB,KAAKK,KAAKiB,GAAaC,SAAS,GAAGC,QACnCxB,KAAKI,cAAgBJ,KAAKK,KAAKiB,GAAahB,KAC5CN,KAAKG,eAAiBmB,C,CAGhB,eAAAG,GAEN,MAAMC,EAAUC,MAAMC,KAAK5B,KAAKc,GAAGe,iBAAiB,YACpD,MAAMC,EAAeH,MAAMC,KAAK5B,KAAKc,GAAGe,iBAAiB,iBAGzD7B,KAAKK,KAAOqB,EAAQK,QAAOC,GAAOA,EAAIpB,QAAQ,cAAgBZ,KAAKc,KACnEd,KAAKiC,UAAYH,EAAaC,QAAOG,GAASA,EAAMtB,QAAQ,cAAgBZ,KAAKc,I,CAG3E,cAAAqB,CAAeC,EAAOC,EAAQ,GACpCD,EAAME,kBAAoBtC,KAAKC,YAAYsC,WAC3CH,EAAMI,QAAUxC,KAAKwC,QAAQD,WAC7BH,EAAMK,SAAYzC,KAAKI,gBAAkBgC,EAAM9B,KAAQ,KAAO,MAC9D8B,EAAM,SAAWC,C,CAGX,mBAAAK,GACN1C,KAAKK,KAAKsC,SAAQ,CAACP,EAAOC,KACxB,GAAIrC,KAAKI,gBAAkBgC,EAAM9B,KAAMN,KAAKG,eAAiBkC,EAC7DrC,KAAKmC,eAAeC,EAAOC,EAAM,IAGnCrC,KAAKiC,UAAUU,SAASP,IACtBpC,KAAKmC,eAAeC,EAAM,G,CAItB,UAAAQ,GACN,IAAIC,EAAY,WAChB,GAAI7C,KAAKwC,SAAWxC,KAAKwC,SAAW,UAAW,CAC7C,MAAMM,EAAmB,aAAa9C,KAAKwC,UAC3CK,GAAa,IAAMC,C,CAGrB,OAAOD,C,CAGT,iBAAAE,GACE/C,KAAKyB,iB,CAGP,mBAAAuB,GACEhD,KAAK0C,qB,CAGP,MAAAO,GACE,OACEC,EAACC,EAAI,CAAAnC,IAAA,6DAAkBhB,KAAKI,cAAegD,MAAOpD,KAAK4C,aAAcS,GAAIrD,KAAKC,aAC5EiD,EAAA,OAAAlC,IAAA,2CAAKoC,MAAM,oBAAoBE,KAAK,UAAsB,aAAAtD,KAAKuD,aAAcC,KAAK,YAChFN,EAAA,QAAAlC,IAAA,2CAAMV,KAAK,UAEb4C,EAAA,QAAAlC,IAAA,2CAAMV,KAAK,c","ignoreList":[]}