/**
 * 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-list-item.css';
import NileElement from '../internal/nile-element';
import { HasSlotController } from '../internal/slot';
/**
 * Nile list-item component.
 *
 * @tag nile-list-item
 *
 */
let NileListItem = class NileListItem extends NileElement {
    constructor() {
        /**
         * The styles for nile-list-item
         * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
         */
        super(...arguments);
        this.hasSlotController = new HasSlotController(this, 'preffix', 'heading', 'subheading');
        this.iconName = '';
        this.iconSize = 14;
        this.heading = '';
        this.subHeading = '';
        /* #endregion */
    }
    static get styles() {
        return [styles];
    }
    /* #endregion */
    /* #region Methods */
    /**
     * Render method
     * @slot This is a slot test
     */
    handleClick(e) {
        this.emit('nile-list-item-click', {
            heading: this.heading,
            subheading: this.subHeading,
        });
    }
    render() {
        return html `
      ${this.iconName || this.hasSlotController.test('preffix')
            ? html ` <slot name="preffix" part="preffix" class="preffix__icon">
            <nile-icon
              name="${this.iconName}"
              size="${this.iconSize}"
              method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
            ></nile-icon>
          </slot>`
            : ``}

      <div class="content__wrapper" part="content__wrapper">
        ${this.heading || this.hasSlotController.test('heading')
            ? html ` <slot class="heading" part="heading" name="heading"
              >${this.heading}</slot
            >`
            : ``}
        ${this.subHeading || this.hasSlotController.test('subheading')
            ? html ` <slot class="subheading" part="subheading" name="subheading"
              >${this.subHeading}</slot
            >`
            : `
          `}
      </div>

      <slot @click="${this.handleClick}" class="list__item" part="base"> </slot>
      <slot name="suffix" part="suffix" class="list-item__suffix">
      </slot>
    `;
    }
};
__decorate([
    property({ type: String, attribute: 'icon-name' })
], NileListItem.prototype, "iconName", void 0);
__decorate([
    property({ type: Number, attribute: 'icon-size' })
], NileListItem.prototype, "iconSize", void 0);
__decorate([
    property({ type: String, attribute: 'heading' })
], NileListItem.prototype, "heading", void 0);
__decorate([
    property({ type: String, attribute: 'sub-heading' })
], NileListItem.prototype, "subHeading", void 0);
NileListItem = __decorate([
    customElement('nile-list-item')
], NileListItem);
export { NileListItem };
export default NileListItem;
//# sourceMappingURL=nile-list-item.js.map