import{__decorate as e}from"tslib";import{html as i}from"lit";import{property as t,customElement as s}from"lit/decorators.js";import{s as r}from"./nile-hero.css.esm.js";import{N as o}from"../internal/nile-element.esm.js";import{classMap as n}from"lit/directives/class-map.js";import"../internal/accessibility/a11y.state.enum.esm.js";import"../internal/accessibility/a11y.property.enum.esm.js";import"../internal/accessibility/role.enum.esm.js";let a=class extends o{constructor(){super(...arguments),this.icon="var(--nile-icon-action, var(--ng-icon-action))",this.collapse=!1,this.imgSrc="",this.heroText=""}static get styles(){return[r]}render(){return i`
		<div part="nile__hero__container" class=${n({hero__container:!0,"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>
		`}};e([t({reflect:!0})],a.prototype,"icon",void 0),e([t({reflect:!0,type:Boolean})],a.prototype,"collapse",void 0),e([t({reflect:!0,attribute:"img-src"})],a.prototype,"imgSrc",void 0),e([t({reflect:!0,attribute:"hero-text"})],a.prototype,"heroText",void 0),a=e([s("nile-hero")],a);export{a as N};
