{"mappings":"AACA,cAAc,sBAAiC;AAG/C,SAAS,mBAAmB;;;;;;;;;;;;;;;AAkB5B,cAmCM,eAAe,YAAY;;;;CAI/B,AACA;CAEA,UAAU,UAAU,eAAe;;AAcrC,eAAe;AACf,SAAS","names":[],"sources":["../../../../src/web-components/layout/component.ts"],"sourcesContent":["import { attr, godown, htmlSlot, styles } from \"@godown/element\";\nimport { type TemplateResult, css, html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\n\nimport { GlobalStyle } from \"../../internal/global-style.js\";\n\nconst protoName = \"layout\";\n\n/**\n * {@linkcode Layout} renders main content, top header, bottom footer.\n *\n * If `sticky` is set to `true`, the header will be sticky.\n *\n * Main content will take up the remaining space.\n *\n * Element display should be `(inline-)flex` or `(inline-)grid`.\n *\n * @slot - The main content of the layout.\n * @slot header - The header of the layout.\n * @slot footer - The footer of the layout.\n * @category layout\n */\n@godown(protoName)\n@styles(css`\n  :host {\n    width: 100%;\n    height: 100%;\n    min-height: 100%;\n    flex-direction: column;\n    grid-template-rows: auto 1fr auto;\n  }\n\n  :host,\n  :host([contents]) [part=\"root\"] {\n    display: flex;\n  }\n\n  [part=\"root\"] {\n    display: contents;\n  }\n\n  [part=\"main\"] {\n    width: 100%;\n    flex: 1;\n  }\n\n  [part=\"header\"],\n  [part=\"footer\"] {\n    flex-shrink: 0;\n    width: 100%;\n  }\n\n  [sticky] header {\n    position: sticky;\n    top: 0;\n  }\n`)\nclass Layout extends GlobalStyle {\n  /**\n   * If `true`, header will sticky.\n   */\n  @property({ type: Boolean })\n  sticky = false;\n\n  protected render(): TemplateResult<1> {\n    return html`\n      <div\n        part=\"root\"\n        ${attr(this.observedRecord)}\n      >\n        <header part=\"header\">${htmlSlot(\"header\")}</header>\n        <main part=\"main\">${htmlSlot()}</main>\n        <footer part=\"footer\">${htmlSlot(\"footer\")}</footer>\n      </div>\n    `;\n  }\n}\n\nexport default Layout;\nexport { Layout };\n"],"version":3,"file":"component.d.ts"}