import { html, nothing } from 'lit';
import { classMap } from 'lit/directives/class-map.js';
import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
import { HasSlotController } from '../../internal/slot.mjs';
import styles from './card.styles.mjs';
import { isStringFull } from '@emuanalytics/flow-rdf-core/utils';
import { property } from 'lit/decorators.js';

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result)
    __defProp(target, key, result);
  return result;
};
class FlowUiCard extends FlowRdfElement {
  constructor() {
    super(...arguments);
    this.hasSlotController = new HasSlotController(this, "footer", "header", "image");
    this.title = "";
  }
  render() {
    const hasHeader = isStringFull(this.title) ?? this.hasSlotController.test("title");
    return html`
      <div
        part="base"
        class=${classMap({
      card: true,
      "card--has-header": hasHeader
    })}
        title=""
      >
        ${hasHeader ? html`
              <header part="header" class="card__header">
                <span part="title" class="card__title"><slot name="title">${this.title}</slot></span>
              </header>
            ` : nothing}

        <slot part="body" class="card__body"></slot>
      </div>
    `;
  }
}
FlowUiCard.styles = styles;
__decorateClass([
  property({ reflect: true })
], FlowUiCard.prototype, "title", 2);

export { FlowUiCard as default };
