import { __decorate } from '../node_modules/.pnpm/@rollup_plugin-typescript@12.3.0_rollup@4.60.1_tslib@2.8.1_typescript@6.0.2/node_modules/tslib/tslib.es6.js';
import { css, LitElement, nothing, html } from 'lit';
import { property, customElement } from 'lit/decorators.js';
import { sharedStyles } from '../styles/shared-styles.js';
import { utilityStyles } from '../styles/utility-styles.js';

let FwTitleOverlay = class FwTitleOverlay extends LitElement {
    constructor() {
        super(...arguments);
        this.title = "";
        this.description = null;
    }
    render() {
        if (this.title === "" && !this.description)
            return nothing;
        return html `
      <div class="overlay fw-title-overlay">
        ${this.title ? html `<div class="title">${this.title}</div>` : nothing}
        ${this.description ? html `<div class="desc">${this.description}</div>` : nothing}
      </div>
    `;
    }
};
FwTitleOverlay.styles = [
    sharedStyles,
    utilityStyles,
    css `
      :host {
        display: contents;
      }
      .overlay {
        position: absolute;
        inset: 0 0 auto 0;
        padding: 1rem 1.25rem;
        background: linear-gradient(to bottom, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0.4), transparent);
        pointer-events: none;
        transition: opacity 300ms ease;
        z-index: 10;
      }
      .title {
        font-size: 0.875rem;
        font-weight: 500;
        color: white;
        max-width: 80%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .desc {
        margin-top: 0.25rem;
        font-size: 0.75rem;
        color: rgb(255 255 255 / 0.7);
        max-width: 70%;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    `,
];
__decorate([
    property({ type: String })
], FwTitleOverlay.prototype, "title", void 0);
__decorate([
    property({ type: String })
], FwTitleOverlay.prototype, "description", void 0);
FwTitleOverlay = __decorate([
    customElement("fw-title-overlay")
], FwTitleOverlay);

export { FwTitleOverlay };
//# sourceMappingURL=fw-title-overlay.js.map
