{"version":3,"file":"footer-nav-item.Ds9rlee9.js","sources":["../../../../../packages/web-components/src/lib/components/footer-nav-item/footer-nav-item.ts"],"sourcesContent":["import { html, nothing } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport { pdsCustomElement as customElement } from '../../decorators/pds-custom-element';\nimport { PdsElement } from '../PdsElement';\nimport styles from './footer-nav-item.scss?inline';\nimport '../list/list';\nimport '../list-item/list-item';\nimport '../link/link';\nimport '../heading/heading';\nimport '../accordion/accordion';\nimport { requiredSlot } from '../../decorators/requiredSlot';\n\n/**\n * @summary A component that renders a single link list at desktop and a accordion at mobile\n *\n * @slot default Required: A list of links to display in the footer nav section, restricted to pds-list elements\n */\n@customElement('pds-footer-nav-item', {\n  category: 'component',\n  type: 'component',\n  state: 'stable',\n  styles,\n})\nexport class PdsFooterNavItem extends PdsElement {\n  /**\n   * - **inverted** renders the footer-nav-item used for primary actions on a dark background\n   * - **strong** renders the footer-nav-item used for primary actions on a subtle background\n   */\n  @property()\n  variant: 'inverted' | 'strong' = 'inverted';\n\n  /**\n   * Top level label for the nav item group\n   */\n  @property()\n  label: string = '';\n\n  /**\n   * @internal\n   */\n  @queryAssignedElements({ slot: undefined, selector: 'pds-list' })\n  footerNavItemLinks: HTMLElement[];\n\n  /**\n   * @internal\n   * This turns the label prop to an alphanumeric value and replaces spaces with hyphens\n   */\n  getIdFromLabel() {\n    return this.label\n      .replace(/[^a-z0-9\\s]/gi, '')\n      .replace(/\\s+/g, '-')\n      .toLowerCase();\n  }\n\n  /**\n   * @internal\n   * Duplicated from pds-footer until we refactor to utils\n   */\n  isSmallScreen() {\n    return (\n      this.responsiveViewportSize === 'xs' ||\n      this.responsiveViewportSize === 'sm'\n    );\n  }\n\n  /**\n   * @internal\n   */\n  handleSlotChange(e: Event) {\n    this.handleSlotValidation(e);\n\n    this.footerNavItemLinks.forEach((list) => {\n      list.setAttribute('spacing', 'sm');\n    });\n  }\n\n  /**\n   * @internal\n   */\n  getView() {\n    return this.isSmallScreen() ? 'mobile' : 'desktop';\n  }\n\n  /**\n   * @internal\n   */\n  getHeadingMarkup() {\n    return html`\n      <pds-heading\n        id=\"${this.getIdFromLabel()}-${this.getView()}\"\n        headingTag=\"${this.isSmallScreen() ? 'h2' : 'h3'}\"\n        variant=\"label-default\"\n        slot=\"${this.isSmallScreen() ? 'summary-title' : nothing}\"\n        >${this.label}</pds-heading\n      >\n    `;\n  }\n\n  /**\n   * @internal\n   */\n  getNavMarkup() {\n    return html`\n      <nav aria-labelledby=\"${this.getIdFromLabel()}-${this.getView()}\">\n        <slot\n          allowed-elements=\"pds-list\"\n          @slotchange=\"${this.handleSlotChange}\"\n        ></slot>\n      </nav>\n    `;\n  }\n\n  /**\n   * @internal\n   */\n  get classNames() {\n    return {\n      [this.variant]: !!this.variant,\n    };\n  }\n\n  /**\n   * @internal\n   */\n  protected override firstUpdated() {\n    super.firstUpdated();\n    this.setWindowResizeHandler();\n    this.handleSlotValidation();\n\n    this.footerNavItemLinks.forEach((list) => {\n      list.setAttribute('spacing', 'sm');\n    });\n  }\n\n  @requiredSlot(['default'])\n  render() {\n    if (this.variant !== 'inverted' && this.variant !== 'strong') {\n      console.error(\n        'Footer nav items must have a variant of strong or inverted defined.',\n        this,\n      );\n      return nothing;\n    }\n    return html`<div class=${this.getClass()}>\n      <div class=\"${this.classMod(this.getView())}\">\n        ${this.isSmallScreen()\n          ? html`<pds-accordion variant=${this.variant}>\n              ${this.getHeadingMarkup()}\n              <div slot=\"accordion-content\">${this.getNavMarkup()}</div>\n            </pds-accordion>`\n          : html` ${this.getHeadingMarkup()} ${this.getNavMarkup()} `}\n      </div>\n    </div>`;\n  }\n}\n"],"names":["PdsFooterNavItem","PdsElement","list","html","nothing","__decorateClass","property","queryAssignedElements","requiredSlot","customElement","styles"],"mappings":";;;;;;;;;;;;;;AAuBa,IAAAA,IAAN,cAA+BC,EAAW;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA,GAM4B,KAAA,UAAA,YAMjB,KAAA,QAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYhB,iBAAiB;AACR,WAAA,KAAK,MACT,QAAQ,iBAAiB,EAAE,EAC3B,QAAQ,QAAQ,GAAG,EACnB,YAAY;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOjB,gBAAgB;AACd,WACE,KAAK,2BAA2B,QAChC,KAAK,2BAA2B;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAOpC,iBAAiB,GAAU;AACzB,SAAK,qBAAqB,CAAC,GAEtB,KAAA,mBAAmB,QAAQ,CAACC,MAAS;AACnC,MAAAA,EAAA,aAAa,WAAW,IAAI;AAAA,IAAA,CAClC;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAMH,UAAU;AACD,WAAA,KAAK,kBAAkB,WAAW;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAM3C,mBAAmB;AACV,WAAAC;AAAAA;AAAAA,cAEG,KAAK,eAAgB,CAAA,IAAI,KAAK,SAAS;AAAA,sBAC/B,KAAK,kBAAkB,OAAO,IAAI;AAAA;AAAA,gBAExC,KAAK,kBAAkB,kBAAkBC,CAAO;AAAA,WACrD,KAAK,KAAK;AAAA;AAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAQnB,eAAe;AACN,WAAAD;AAAAA,8BACmB,KAAK,eAAgB,CAAA,IAAI,KAAK,SAAS;AAAA;AAAA;AAAA,yBAG5C,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAS5C,IAAI,aAAa;AACR,WAAA;AAAA,MACL,CAAC,KAAK,OAAO,GAAG,CAAC,CAAC,KAAK;AAAA,IACzB;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAMiB,eAAe;AAChC,UAAM,aAAa,GACnB,KAAK,uBAAuB,GAC5B,KAAK,qBAAqB,GAErB,KAAA,mBAAmB,QAAQ,CAACD,MAAS;AACnC,MAAAA,EAAA,aAAa,WAAW,IAAI;AAAA,IAAA,CAClC;AAAA,EAAA;AAAA,EAIH,SAAS;AACP,WAAI,KAAK,YAAY,cAAc,KAAK,YAAY,YAC1C,QAAA;AAAA,MACN;AAAA,MACA;AAAA,IACF,GACOE,KAEFD,eAAkB,KAAK,SAAA,CAAU;AAAA,oBACxB,KAAK,SAAS,KAAK,QAAS,CAAA,CAAC;AAAA,UACvC,KAAK,cACH,IAAAA,2BAA8B,KAAK,OAAO;AAAA,gBACtC,KAAK,iBAAkB,CAAA;AAAA,8CACO,KAAK,cAAc;AAAA,gCAErDA,KAAQ,KAAK,kBAAkB,IAAI,KAAK,aAAc,CAAA,GAAG;AAAA;AAAA;AAAA,EAAA;AAIrE;AA7HEE,EAAA;AAAA,EADCC,EAAS;AAAA,GALCN,EAMX,WAAA,WAAA,CAAA;AAMAK,EAAA;AAAA,EADCC,EAAS;AAAA,GAXCN,EAYX,WAAA,SAAA,CAAA;AAMAK,EAAA;AAAA,EADCE,EAAsB,EAAE,MAAM,QAAW,UAAU,WAAY,CAAA;AAAA,GAjBrDP,EAkBX,WAAA,sBAAA,CAAA;AA8FAK,EAAA;AAAA,EADCG,EAAa,CAAC,SAAS,CAAC;AAAA,GA/GdR,EAgHX,WAAA,UAAA,CAAA;AAhHWA,IAANK,EAAA;AAAA,EANNI,EAAc,uBAAuB;AAAA,IACpC,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAAC;AAAA,EACD,CAAA;AAAA,GACYV,CAAA;"}