{"version":3,"file":"grid.cBrEyHrh.js","sources":["../../../../../packages/web-components/src/lib/components/grid/grid.ts"],"sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { pdsCustomElement as customElement } from '../../decorators/pds-custom-element';\nimport { PdsElement } from '../PdsElement';\nimport '../grid-item/grid-item';\nimport styles from './grid.scss?inline';\n\n/**\n * @summary This component provides some helpful layout configurations\n *\n * @slot default Required: Contains grid items within the layout configuration, restricted to pds-grid-item elements\n */\n@customElement('pds-grid', {\n  category: 'layout',\n  type: 'component',\n  state: 'stable',\n  styles,\n})\nexport class PdsGrid extends PdsElement {\n  /**\n   * - **default** renders the grid item stacked with a gap in between\n   * - **2up** yields a grid whose grid items are stacked on small screens but display side-by-side when enough screen real estate is available to do so\n   * - **3up** yields a grid whose grid items are stacked on small screens, transforms to a 2-across pattern, and ultimately transforms to a 3-across pattern\n   * - **1-2-4up** yields a grid whose grid items are stacked on small screens, transforms to a 2-across pattern, and ultimately transforms to a 4-across pattern\n   * - **1-3up** yields a grid whose grid items are stacked on small screens transforms to a 3-across pattern on larger screens\n   * - **side-by-side** yields a grid whose grid items don't necessarily ever need to stack and displayed side-by-side for all the viewports\n   */\n  @property()\n  variant: '2up' | '3up' | '1-3up' | '1-2-4up' | 'side-by-side' | 'default' =\n    'default';\n\n  /**\n   * - **default** grid items are spaced with a gap\n   * - **none** grid items are spaced with no gap between items\n   * - **sm** grid items are spaced with smaller gap than default\n   * - **lg** grid items are spaced with large gap than default\n   */\n  @property()\n  gap: 'none' | 'sm' | 'lg' | 'default' = 'default';\n\n  /**\n   * - **default** stacks at default viewport\n   * - **faster** stacks at a smaller viewport than the default\n   * - **slower** stacks at a larger viewport than the default\n   */\n  @property()\n  break: 'faster' | 'slower' | 'default' = 'default';\n\n  protected override firstUpdated(): void {\n    super.firstUpdated();\n    this.handleSlotValidation();\n  }\n\n  render() {\n    const classes = {\n      'pds-l-grid': true,\n      [`pds-l-grid--${this.variant}`]: !!this.variant,\n      [`pds-l-grid--gap-${this.gap}`]: !!this.gap,\n      [`pds-l-grid--break-${this.break}`]: this.break,\n    };\n\n    return html`<div class=${classMap(classes)}>\n      <slot\n        allowed-elements=\"pds-grid-item\"\n        @slotchange=${this.handleSlotValidation}\n      ></slot>\n    </div>`;\n  }\n}\n"],"names":["PdsGrid","PdsElement","classes","html","classMap","__decorateClass","property","customElement","styles"],"mappings":";;;;;;;;;AAmBa,IAAAA,IAAN,cAAsBC,EAAW;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA,GAWH,KAAA,UAAA,WASsC,KAAA,MAAA,WAQC,KAAA,QAAA;AAAA,EAAA;AAAA,EAEtB,eAAqB;AACtC,UAAM,aAAa,GACnB,KAAK,qBAAqB;AAAA,EAC5B;AAAA,EAEA,SAAS;AACP,UAAMC,IAAU;AAAA,MACd,cAAc;AAAA,MACd,CAAC,eAAe,KAAK,OAAO,EAAE,GAAG,CAAC,CAAC,KAAK;AAAA,MACxC,CAAC,mBAAmB,KAAK,GAAG,EAAE,GAAG,CAAC,CAAC,KAAK;AAAA,MACxC,CAAC,qBAAqB,KAAK,KAAK,EAAE,GAAG,KAAK;AAAA,IAAA;AAGrC,WAAAC,eAAkBC,EAASF,CAAO,CAAC;AAAA;AAAA;AAAA,sBAGxB,KAAK,oBAAoB;AAAA;AAAA;AAAA,EAG7C;AACF;AAxCEG,EAAA;AAAA,EADCC,EAAS;AAAA,GATCN,EAUX,WAAA,WAAA,CAAA;AAUAK,EAAA;AAAA,EADCC,EAAS;AAAA,GAnBCN,EAoBX,WAAA,OAAA,CAAA;AAQAK,EAAA;AAAA,EADCC,EAAS;AAAA,GA3BCN,EA4BX,WAAA,SAAA,CAAA;AA5BWA,IAANK,EAAA;AAAA,EANNE,EAAc,YAAY;AAAA,IACzB,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAAC;AAAA,EAAA,CACD;AAAA,GACYR,CAAA;"}