import { Component, h, Host, Prop } from '@stencil/core';
import { ImagePosition } from './models';
export class DvnCardHeader {
  constructor() {
    this.showImage = false;
    this.imagePosition = ImagePosition.Center;
    this.showCover = false;
    this.coverBrightness = 100;
    this.separated = false;
    this.trimTitle = false;
    this.imageBorder = false;
    this.imageShape = 'circle';
  }
  render() {
    const showAbsoluteActionContainer = this.showImage || this.showCover;
    const coverHeight = this.coverSize || 180;
    const imageHeight = this.imageSize || 64;
    return (h(Host, { class: {
        separated: this.separated,
        [this.tint]: !!this.tint,
      } },
      h("div", { class: "vertical-container" },
        this.showCover && !this.coverAspectRatio &&
          h("img", { class: "cover-image", loading: "lazy", src: this.coverSrc || this.coverPlaceholder, style: {
              height: `${coverHeight}px`, 'border-radius': this.cornerRadius !== undefined ? `${this.cornerRadius}px` : undefined,
              // make it invisible to allocate space but not to show the image element because it's rendered broken
              visibility: !(this.coverSrc || this.coverPlaceholder) ? 'hidden' : undefined,
              filter: this.coverBrightness ? `brightness(${this.coverBrightness}%)` : undefined,
            } }),
        this.showCover && this.coverAspectRatio &&
          h("div", { class: "aspect-ratio-cover-container", style: {
              '--aspect-ratio': `${this.coverAspectRatio}`,
              // make it invisible to allocate space but not to show the image element because it's rendered broken
              visibility: !(this.coverSrc || this.coverPlaceholder) ? 'hidden' : undefined,
            } },
            h("img", { loading: "lazy", src: this.coverSrc || this.coverPlaceholder })),
        this.showImage &&
          h("div", { class: { 'avatar-container': true, [this.imagePosition]: true, absolute: this.showCover }, style: { height: this.showCover ? `${coverHeight}px` : undefined } },
            h("dvn-image", { src: this.imageSrc, shape: this.imageShape, size: imageHeight, text: this.imagePlaceholder, bordered: this.imageBorder })),
        h("div", { class: "horizontal-container" },
          h("div", { class: "content" },
            h("h4", { class: { 'single-line': this.trimTitle } }, this.title)),
          h("div", { class: { 'action-container': true, 'absolute': showAbsoluteActionContainer } },
            h("slot", { name: "action" }))))));
  }
  static get is() { return "dvn-card-header"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["dvn-card-header.css"]
  }; }
  static get styleUrls() { return {
    "$": ["dvn-card-header.css"]
  }; }
  static get properties() { return {
    "title": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "title",
      "reflect": false
    },
    "imageSrc": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "image-src",
      "reflect": false
    },
    "showImage": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "show-image",
      "reflect": false,
      "defaultValue": "false"
    },
    "imagePosition": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "ImagePosition",
        "resolved": "ImagePosition.BottomCenter | ImagePosition.BottomLeft | ImagePosition.BottomRight | ImagePosition.Center | ImagePosition.TopCenter | ImagePosition.TopLeft | ImagePosition.TopRight",
        "references": {
          "ImagePosition": {
            "location": "import",
            "path": "./models"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "image-position",
      "reflect": false,
      "defaultValue": "ImagePosition.Center"
    },
    "showCover": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "show-cover",
      "reflect": false,
      "defaultValue": "false"
    },
    "coverAspectRatio": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "cover-aspect-ratio",
      "reflect": false
    },
    "coverBrightness": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "cover-brightness",
      "reflect": false,
      "defaultValue": "100"
    },
    "coverSize": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "cover-size",
      "reflect": false
    },
    "coverSrc": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "cover-src",
      "reflect": false
    },
    "coverPlaceholder": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "cover-placeholder",
      "reflect": false
    },
    "separated": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "separated",
      "reflect": false,
      "defaultValue": "false"
    },
    "trimTitle": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "trim-title",
      "reflect": false,
      "defaultValue": "false"
    },
    "imagePlaceholder": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "image-placeholder",
      "reflect": false
    },
    "imagePlaceholderType": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "ImagePlaceholderType",
        "resolved": "\"source\" | \"text\"",
        "references": {
          "ImagePlaceholderType": {
            "location": "import",
            "path": "../dvn-image/models"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "image-placeholder-type",
      "reflect": false
    },
    "imageBorder": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "image-border",
      "reflect": false,
      "defaultValue": "false"
    },
    "imageSize": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "image-size",
      "reflect": false
    },
    "imageShape": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "ImageShape",
        "resolved": "\"circle\" | \"rounded\"",
        "references": {
          "ImageShape": {
            "location": "import",
            "path": "../dvn-image/models"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "image-shape",
      "reflect": false,
      "defaultValue": "'circle'"
    },
    "cornerRadius": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "corner-radius",
      "reflect": false
    },
    "tint": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Tint",
        "resolved": "\"danger\" | \"neutral\" | \"primary\" | \"secondary\" | \"warning\"",
        "references": {
          "Tint": {
            "location": "import",
            "path": "@dvn/alaca/theme"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "tint",
      "reflect": false
    }
  }; }
}
