{"mappings":"AACA,cAAc,sBAAiC;AAI/C,SAAS,mBAAmB;;;;;;;AAY5B,cAWM,aAAa,YAAY;;;;CAI7B,AACA;;;;;;CAOA,AACA;;;;;;CAOA,AACA;;;;CAKA,AACA;;;;CAKA,AACA;CAEA;CAiBA,UAAU,UAAU,eAAe;;AAYrC,eAAe;AACf,SAAS","names":[],"sources":["../../../../src/web-components/grid/component.ts"],"sourcesContent":["import { attr, godown, htmlSlot, StyleController, styles } from \"@godown/element\";\nimport { type TemplateResult, css, html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { isNumerical } from \"sharekit\";\n\nimport { GlobalStyle } from \"../../internal/global-style.js\";\n\nconst toTemplate = (s: number | string) => (isNumerical(s) ? `repeat(${s},1fr)` : s);\n\nconst protoName = \"grid\";\n\n/**\n * {@linkcode Grid} provides gird layout.\n *\n * @slot - Grid items.\n * @category layout\n */\n@godown(protoName)\n@styles(css`\n  :host,\n  :host([contents]) [part=\"root\"] {\n    display: grid;\n  }\n\n  [part=\"root\"] {\n    display: contents;\n  }\n`)\nclass Grid extends GlobalStyle {\n  /**\n   * CSS property `gap`.\n   */\n  @property()\n  gap: string;\n\n  /**\n   * CSS property `grid-template-columns`.\n   *\n   * If columns is numerical, divide columns equally.\n   */\n  @property()\n  columns: string | number;\n\n  /**\n   * CSS property `grid-template-rows`.\n   *\n   * If rows is numerical, divide rows equally.\n   */\n  @property()\n  rows: string | number;\n\n  /**\n   * CSS property `place-content` (`align-content justify-content`).\n   */\n  @property()\n  content: string;\n\n  /**\n   * CSS property `place-items` (`align-items justify-items`).\n   */\n  @property()\n  items: string;\n\n  constructor() {\n    super();\n    new StyleController(\n      this,\n      () => ({\n        \":host\": {\n          gap: this.gap,\n          \"grid-template-columns\": toTemplate(this.columns),\n          \"grid-template-rows\": toTemplate(this.rows),\n          \"place-content\": this.content,\n          \"place-items\": this.items,\n        },\n      }),\n      () => [this.gap, this.columns, this.rows, this.content, this.items],\n    );\n  }\n\n  protected render(): TemplateResult<1> {\n    return html`\n      <div\n        part=\"root\"\n        ${attr(this.observedRecord)}\n      >\n        ${htmlSlot()}\n      </div>\n    `;\n  }\n}\n\nexport default Grid;\nexport { Grid };\n"],"version":3,"file":"component.d.ts"}