{"version":3,"file":"sidebar.D9ahL5K-.js","sources":["../../../../../packages/web-components/src/lib/components/sidebar/sidebar.ts"],"sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { pdsCustomElement as customElement } from '../../decorators/pds-custom-element';\nimport { PdsElement } from '../PdsElement';\nimport styles from './sidebar.scss?inline';\n\n/**\n * @summary This components provides a layout for webpages containing sidebars\n *\n * @slot default Required: Main content\n * @slot left-sidebar Optional: Content to be rendered at left sidebar\n * @slot right-sidebar Optional: Content to be rendered at right sidebar\n */\n@customElement('pds-sidebar', {\n  category: 'layout',\n  type: 'component',\n  state: 'stable',\n  styles,\n})\nexport class PdsSidebar extends PdsElement {\n  /**\n   * - **default** stacks at (64rem/ 1024px) viewport\n   * - **faster** stacks at a smaller viewport (48rem/ 768px)\n   * - **slower** stacks at a larger viewport (85.375rem/ 1366px)\n   */\n  @property()\n  break: 'faster' | 'slower' | 'default' = 'default';\n\n  /**\n   * - **default** spaced with a default gap (24px)\n   * - **none** no gap between content and sidebar\n   * - **sm** spaced with a smaller gap (8px)\n   * - **lg** spaced with a larger gap (32px)\n   */\n  @property()\n  gap: 'none' | 'sm' | 'lg' | 'default' = 'default';\n\n  /**\n   * @internal\n   */\n  get classNames() {\n    return {\n      [`break-${this.break}`]: !!this.break,\n      [`gap-${this.gap}`]: !!this.gap,\n      'right-sidebar': !!(\n        this.slotNotEmpty('right-sidebar') && this.slotEmpty('left-sidebar')\n      ),\n      'left-sidebar': !!(\n        this.slotNotEmpty('left-sidebar') && this.slotEmpty('right-sidebar')\n      ),\n      'leftandright-sidebars': !!(\n        this.slotNotEmpty('left-sidebar') && this.slotNotEmpty('right-sidebar')\n      ),\n    };\n  }\n\n  render() {\n    return html`<div class=${this.getClass()}>\n      ${this.slotNotEmpty('left-sidebar') &&\n      html` <slot name=\"left-sidebar\"></slot> `}\n      <slot></slot>\n      ${this.slotNotEmpty('right-sidebar') &&\n      html` <slot name=\"right-sidebar\"></slot> `}\n    </div>`;\n  }\n}\n"],"names":["PdsSidebar","PdsElement","html","__decorateClass","property","customElement","styles"],"mappings":";;;;;;;;AAmBa,IAAAA,IAAN,cAAyBC,EAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA,GAOoC,KAAA,QAAA,WASD,KAAA,MAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAKxC,IAAI,aAAa;AACR,WAAA;AAAA,MACL,CAAC,SAAS,KAAK,KAAK,EAAE,GAAG,CAAC,CAAC,KAAK;AAAA,MAChC,CAAC,OAAO,KAAK,GAAG,EAAE,GAAG,CAAC,CAAC,KAAK;AAAA,MAC5B,iBAAiB,CAAC,EAChB,KAAK,aAAa,eAAe,KAAK,KAAK,UAAU,cAAc;AAAA,MAErE,gBAAgB,CAAC,EACf,KAAK,aAAa,cAAc,KAAK,KAAK,UAAU,eAAe;AAAA,MAErE,yBAAyB,CAAC,EACxB,KAAK,aAAa,cAAc,KAAK,KAAK,aAAa,eAAe;AAAA,IAAA;AAAA,EAG5E;AAAA,EAEA,SAAS;AACA,WAAAC,eAAkB,KAAK,SAAA,CAAU;AAAA,QACpC,KAAK,aAAa,cAAc,KAClCA,sCAAyC;AAAA;AAAA,QAEvC,KAAK,aAAa,eAAe,KACnCA,uCAA0C;AAAA;AAAA,EAE9C;AACF;AAvCEC,EAAA;AAAA,EADCC,EAAS;AAAA,GANCJ,EAOX,WAAA,SAAA,CAAA;AASAG,EAAA;AAAA,EADCC,EAAS;AAAA,GAfCJ,EAgBX,WAAA,OAAA,CAAA;AAhBWA,IAANG,EAAA;AAAA,EANNE,EAAc,eAAe;AAAA,IAC5B,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAAC;AAAA,EAAA,CACD;AAAA,GACYN,CAAA;"}