{"version":3,"file":"band.b-CZR_MW.js","sources":["../../../../../packages/web-components/src/lib/components/band/band.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 './band.scss?inline';\n\n/**\n * @summary A styled band surrounding various html content\n *\n * @slot default Optional: Holds the html elements within the band\n */\n@customElement('pds-band', {\n  category: 'component',\n  type: 'component',\n  state: 'stable',\n  styles,\n})\nexport class PdsBand extends PdsElement {\n  /**\n   * Style variant\n   * - **default** renders the band using no background\n   * - **subtle** renders the band using the subtle background token\n   * - **strong** renders the band using the strong background token\n   * - **brand-default** renders the band using the brand-default background token\n   * - **brand-strong** renders the band using the brand-strong background token\n   * - **brand-xstrong** renders the band using the brand-xstrong background token\n   * - **brand-gradient-strong** renders the band using the brand-gradient-strong background token\n   * - **brand-gradient-xstrong** renders the band using the brand-gradient-xstrong background token\n   */\n  @property()\n  variant:\n    | 'default'\n    | 'subtle'\n    | 'strong'\n    | 'brand-default'\n    | 'brand-strong'\n    | 'brand-xstrong'\n    | 'brand-gradient-strong'\n    | 'brand-gradient-xstrong' = 'default';\n\n  /**\n   * Rounded\n   */\n  @property({ type: Boolean })\n  rounded: boolean = false;\n\n  /**\n   * Spacing variants\n   * - default (no spacing property added) provides 64px of top/bottom padding on md/lg screens\n   *  and 32px of top/bottom padding on sm screens\n   * - **none** renders no top and bottom padding. Content within the band will create the spacing\n   * - **sm** provides 32px of top/bottom padding on md/lg screens and 16px of top/bottom padding\n   *  on sm screens\n   * - **lg** provides 128px of top/bottom padding on md/lg screens and 64px of top/bottom padding\n   *  on sm screens\n   */\n  @property()\n  spacing: 'none' | 'sm' | 'lg' | 'default' = 'default';\n\n  /**\n   * @internal\n   */\n  get classNames() {\n    return {\n      [`${this.variant}`]: !!this.variant,\n      [`spacing-${this.spacing}`]: !!this.spacing,\n      rounded: !!this.rounded,\n    };\n  }\n\n  render() {\n    return html`<div class=${this.getClass()}>\n      <slot></slot>\n    </div>`;\n  }\n}\n"],"names":["PdsBand","PdsElement","html","__decorateClass","property","customElement","styles"],"mappings":";;;;;;;;AAiBa,IAAAA,IAAN,cAAsBC,EAAW;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA,GAqB0B,KAAA,UAAA,WAMZ,KAAA,UAAA,IAayB,KAAA,UAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAK5C,IAAI,aAAa;AACR,WAAA;AAAA,MACL,CAAC,GAAG,KAAK,OAAO,EAAE,GAAG,CAAC,CAAC,KAAK;AAAA,MAC5B,CAAC,WAAW,KAAK,OAAO,EAAE,GAAG,CAAC,CAAC,KAAK;AAAA,MACpC,SAAS,CAAC,CAAC,KAAK;AAAA,IAAA;AAAA,EAEpB;AAAA,EAEA,SAAS;AACA,WAAAC,eAAkB,KAAK,SAAA,CAAU;AAAA;AAAA;AAAA,EAG1C;AACF;AA7CEC,EAAA;AAAA,EADCC,EAAS;AAAA,GAZCJ,EAaX,WAAA,WAAA,CAAA;AAcAG,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS;AAAA,GA1BhBJ,EA2BX,WAAA,WAAA,CAAA;AAaAG,EAAA;AAAA,EADCC,EAAS;AAAA,GAvCCJ,EAwCX,WAAA,WAAA,CAAA;AAxCWA,IAANG,EAAA;AAAA,EANNE,EAAc,YAAY;AAAA,IACzB,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAAC;AAAA,EAAA,CACD;AAAA,GACYN,CAAA;"}