import { __decorate } from "tslib";
import { html, } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { styles } from './nile-section-message.css';
import NileElement from '../internal/nile-element';
import { HasSlotController } from '../internal/slot';
let NileSectionMessage = class NileSectionMessage extends NileElement {
    constructor() {
        super(...arguments);
        this.hasSlotController = new HasSlotController(this, 'section__heading', 'section__description', 'footer__actions');
        this.heading = '';
        this.description = '';
        // error tick warning
        this.iconSize = 16;
        /** The section message theme variant. */
        this.variant = 'primary';
        this.iconMap = {
            primary: 'var(--nile-icon-info, var(--ng-icon-info-circle))',
            success: 'var(--nile-icon-done-02, var(--ng-icon-check-circle-broken))',
            warning: 'var(--nile-icon-warning, var(--ng-icon-alert-circle))',
            error: 'var(--nile-icon-warning, var(--ng-icon-alert-circle))',
        };
    }
    static get styles() {
        return [styles];
    }
    connectedCallback() {
        super.connectedCallback();
        this.updateComplete.then(() => {
            this.addActionSeparators();
        });
    }
    addActionSeparators() {
        const slot = this.shadowRoot?.querySelector('slot[name="footer__actions"]');
    }
    render() {
        const hasHeader = this.hasSlotController.test('section__heading') || this.heading;
        const hasDescription = this.hasSlotController.test('section__description') || this.description;
        const hasFooter = this.hasSlotController.test('footer__actions');
        return html `
      <div
        part="parent__wrapper"
        class=${classMap({
            parent__wrapper: true,
            'section--primary': this.variant === 'primary',
            'section--success': this.variant === 'success',
            'section--warning': this.variant === 'warning',
            'section--error': this.variant === 'error',
        })}
      >
        <div
          class=${classMap({
            left__wrapper: true,
            'icon--primary': this.variant === 'primary',
            'icon--success': this.variant === 'success',
            'icon--warning': this.variant === 'warning',
            'icon--error': this.variant === 'error',
        })}
          part="icon__wrapper"
        >
          <slot name="icon">
            <nile-icon-button
              name="${this.iconMap[this.variant]}"  
              size="${this.iconSize}"
              color="var(--nile-colors-white-base, white)"
            >
            </nile-icon-button>
          </slot>
        </div>
        <div class="right__wrapper" part="content__wrapper">
          ${hasHeader
            ? html ` <slot name="section__heading" class="section__heading">
                <div part="section__heading">${this.heading}</div>
              </slot>`
            : null}
          ${hasDescription
            ? html ` <slot
                name="section__description"
                class="section__description"
              >
                <div part="section__description">${this.description}</div>
              </slot>`
            : null}
          ${hasFooter
            ? html `
                <slot
                  name="footer__actions"
                  part="footer__actions"
                  class="footer__actions"
                ></slot>
              `
            : ``}
        </div>
      </div>
    `;
    }
};
__decorate([
    property({ type: String, attribute: 'heading' })
], NileSectionMessage.prototype, "heading", void 0);
__decorate([
    property({ type: String, attribute: 'description' })
], NileSectionMessage.prototype, "description", void 0);
__decorate([
    property({ type: Number, attribute: 'icon-size' })
], NileSectionMessage.prototype, "iconSize", void 0);
__decorate([
    property()
], NileSectionMessage.prototype, "variant", void 0);
NileSectionMessage = __decorate([
    customElement('nile-section-message')
], NileSectionMessage);
export { NileSectionMessage };
export default NileSectionMessage;
//# sourceMappingURL=nile-section-message.js.map