/**
 * Copyright Aquera Inc 2023
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */
import { __decorate } from "tslib";
import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { styles } from './nile-hero.css';
import NileElement from '../internal/nile-element';
import { classMap } from 'lit/directives/class-map.js';
/**
 * Nile hero component.
 *
 * @tag nile-hero
 *
 */
let NileHero = class NileHero extends NileElement {
    constructor() {
        super(...arguments);
        this.icon = 'var(--nile-icon-action, var(--ng-icon-action))';
        this.collapse = false;
        this.imgSrc = '';
        this.heroText = '';
        /* #endregion */
    }
    /**
     * The styles for nile-hero
     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
     */
    static get styles() {
        return [styles];
    }
    /* #endregion */
    /* #region Methods */
    /**
     * Render method
     * @slot This is a slot test
     */
    render() {
        return html `
		<div part="nile__hero__container" class=${classMap({
            "hero__container": true,
            "hero__container--collapsed": this.collapse,
            "hero__container--expanded": !this.collapse
        })}>
			<nile-hero-header part="nile__hero__header" class='hero__header--collapsed' style="opacity:${this.collapse ? 1 : 0}" hero-text="${this.heroText}" icon="${this.icon}"></nile-hero-header>
			<div class="hero__slot__container" style="opacity:${this.collapse ? 0 : 1}">
			 <div class="hero__slot">
			 	<span class="icon__container">
					<nile-icon size="16" method="var(--nile-svg-method-stroke, var(--ng-svg-method-stroke))" name="${this.icon}"></nile-icon>
				</span>
				<slot></slot>
			 </div>
			</div>
			<div class="hero__img__container"  style="opacity:${this.collapse ? 0 : 1}" id="hero__img__container">
				<img src="${this.imgSrc}" class="hero__img">
			</div>
		</div>
		`;
    }
};
__decorate([
    property({ reflect: true })
], NileHero.prototype, "icon", void 0);
__decorate([
    property({ reflect: true, type: Boolean })
], NileHero.prototype, "collapse", void 0);
__decorate([
    property({ reflect: true, attribute: 'img-src' })
], NileHero.prototype, "imgSrc", void 0);
__decorate([
    property({ reflect: true, attribute: 'hero-text' })
], NileHero.prototype, "heroText", void 0);
NileHero = __decorate([
    customElement('nile-hero')
], NileHero);
export { NileHero };
export default NileHero;
//# sourceMappingURL=nile-hero.js.map