{"mappings":"AACA,cAAc,sBAAiC;AAG/C,SAAS,mBAA+C;AAExD,cAA8C,gBAAgB;;;;;;;;;;;;AAgB9D,cA0BM,aAAa,YAAY;CAC7B;CAKA,AACA,UAAU;;;;CAKV,AACA;;;;CAKA,AACA;CAEA,UAAU,UAAU,eAAe;;AAYrC,eAAe;AACf,SAAS","names":[],"sources":["../../../../src/web-components/card/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\";\n\nimport { GlobalStyle, cssGlobalVars, scopePrefix } from \"../../internal/global-style.js\";\nimport type Layout from \"../layout/component.js\";\nimport { RingBuilder, ringTypeAttribute, type RingType } from \"../../internal/ring.js\";\n\nconst protoName = \"card\";\nconst cssScope = scopePrefix(protoName);\n\n/**\n * {@linkcode Card} renders a card.\n *\n * This may be similar to {@linkcode Layout},\n * but it needs to be specified to enable header and footer.\n *\n * @slot - The main content of the card.\n * @slot header - The header of the card.\n * @slot footer - The footer of the card.\n * @category display\n */\n@godown(protoName)\n@styles(css`\n  :host {\n    background: var(${cssGlobalVars.background});\n    color: var(${cssGlobalVars.foreground});\n    display: block;\n    flex-shrink: 0;\n  }\n\n  slot {\n    display: block;\n    padding: 1em;\n  }\n\n  [part=\"root\"] {\n    border-radius: inherit;\n  }\n\n  [name=\"footer\"] {\n    padding-top: 0;\n  }\n\n  [name=\"header\"] {\n    padding-bottom: 0;\n  }\n`)\nclass Card extends GlobalStyle {\n  constructor() {\n    super();\n    new StyleController(this, () => new RingBuilder({ type: this.ringType }).css);\n  }\n\n  @property({ attribute: ringTypeAttribute })\n  ringType: RingType = \"border\";\n\n  /**\n   * Whether to display the header.\n   */\n  @property({ type: Boolean })\n  footer = false;\n\n  /**\n   * Whether to display the footer.\n   */\n  @property({ type: Boolean })\n  header = false;\n\n  protected render(): TemplateResult<1> {\n    return html`\n      <div\n        part=\"root\"\n        ${attr(this.observedRecord)}\n      >\n        ${[this.header ? htmlSlot(\"header\") : \"\", htmlSlot(), this.footer ? htmlSlot(\"footer\") : \"\"]}\n      </div>\n    `;\n  }\n}\n\nexport default Card;\nexport { Card };\n"],"version":3,"file":"component.d.ts"}