import{__decorate as t}from"tslib";import{html as i}from"lit";import{property as s,customElement as e}from"lit/decorators.js";import{s as r}from"./nile-option-group.css.esm.js";import{N as n}from"../internal/nile-element.esm.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 o=class extends n{constructor(){super(...arguments),this.name="",this.data=null,this.sticky=!1}static get styles(){return[r]}checkForImageOrIcon(){return this.data?.prefix?.icon?.name||this.data?.prefix?.image?.src||this.data?.prefix?.prefixText}normalizeImageDimension(t){if(null==t||""===t)return"20";const i=Number(t);return isNaN(i)||i<=0?"20":i>40?"25":i.toString()}render(){return i`
			<div part="option-group-header" class="option-group-header">
				<div part="content-container" class="content-container ${this.checkForImageOrIcon()?"gap-18px":""}">
					<!-- prefix content -->
					${this.data?.prefix?.icon?.name?i`<nile-icon part="prefix-icon" name="${this.data?.prefix?.icon?.name}" size="${this.data?.prefix?.icon?.size||"16"}" color="${this.data?.prefix?.icon?.color||"var(--nile-colors-dark-500)"}" method="${this.data?.prefix?.icon?.method||"fill"}"></nile-icon>`:this.data?.prefix?.prefixText?i`<span part="prefix-text">${this.data?.prefix?.prefixText}</span>`:this.data?.prefix?.image?.src?i`<img part="prefix-image" src="${this.data?.prefix?.image?.src}" width="${this.normalizeImageDimension(this.data?.prefix?.image?.width)}" height="${this.normalizeImageDimension(this.data?.prefix?.image?.height)}">`:i`<slot part="prefix" name="prefix" class="option-group-prefix"></slot>`}

					<!-- main content -->
					${this.data?.textContent?i`<span part="content-text">${this.data?.textContent}</span>`:i`<slot part="content"></slot>`}
				</div>

				<!-- suffix content -->
				${this.data?.suffix?.icon?.name?i`<nile-icon part="suffix-icon" name="${this.data?.suffix?.icon?.name}" size="${this.data?.suffix?.icon?.size||"16"}" color="${this.data?.suffix?.icon?.color||"var(--nile-colors-dark-500)"}" method="${this.data?.suffix?.icon?.method||"fill"}"></nile-icon>`:this.data?.suffix?.suffixText?i`<span part="suffix-text">${this.data?.suffix?.suffixText}</span>`:this.data?.suffix?.image?.src?i`<img part="suffix-image" src="${this.data?.prefix?.image?.src}" width="${this.normalizeImageDimension(this.data?.suffix?.image?.width)}" height="${this.normalizeImageDimension(this.data?.suffix?.image?.height)}">`:i`<slot part="suffix" name="suffix" class="option-group-suffix"></slot>`}
			</div>
			`}};t([s({type:String,reflect:!0,attribute:!0})],o.prototype,"name",void 0),t([s({type:Object,reflect:!0,attribute:!0})],o.prototype,"data",void 0),t([s({type:Boolean,reflect:!0,attribute:!0})],o.prototype,"sticky",void 0),o=t([e("nile-option-group")],o);export{o as N};
