import { __decorate } from "tslib";
import { html } from 'lit';
import styles from './nile-slide-toggle.css';
import NileElement from '../internal/nile-element';
import { classMap } from 'lit/directives/class-map.js';
import { customElement, property } from 'lit/decorators.js';
let NileSlideToggle = class NileSlideToggle extends NileElement {
    constructor() {
        super(...arguments);
        this.label = '';
        this.sublabel = '';
        this.textPosition = 'right';
        this.isChecked = false;
        this.fullWidth = false;
        this.disabled = false;
        this.helpText = '';
        this.errorMessage = '';
    }
    connectedCallback() {
        super.connectedCallback();
        this.emit('nile-init');
        this.style.setProperty('--slide-toggle-width', this.fullWidth ? '100%' : 'auto');
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this.emit('nile-destroy');
    }
    toggleValue() {
        this.isChecked = !this.isChecked;
        this.emit('change', { checked: this.isChecked, value: this.isChecked });
        this.emit('nile-change', { checked: this.isChecked, value: this.isChecked });
    }
    render() {
        const hasHelpText = this.helpText ? true : false;
        const hasErrorMessage = this.errorMessage ? true : false;
        return html `
      <div
        class=${classMap({
            'nile-slide-toggle': true,
            'nile-slide--disabled': this.disabled,
            'nile-slide-toggle--reverse': this.textPosition == 'left'
        })}
        part="base"
      >
        <label 
        class="${classMap({
            'nile-slide-toggle__switch': true,
            'nile-slide-toggle__switch--left': this.textPosition == 'right',
            'nile-slide-toggle__switch--right': this.textPosition == 'left',
        })}"
        class="nile-slide-toggle__switch" part="slide-toggle-switch">
          <input
            type="checkbox"
            .checked=${this.isChecked}
            @change=${this.toggleValue}
            tabindex=${this.disabled ? '-1' : '0'}
          />
          <span class="nile-slide-toggle__slider" part="slide-toggle-slider"></span>
        </label>
        <span class="nile-slide-toggle__label" part="slide-toggle-label-container">
          <span part="slide-toggle-label">${this.label}</span>
          <span class="nile-slide-toggle__sublabel" part="slide-toggle-sublabel">${this.sublabel}</span>
        </span>
      </div>
      ${hasHelpText
            ? html ` <nile-form-help-text>${this.helpText}</nile-form-help-text> `
            : ``}
      ${hasErrorMessage
            ? html `
            <nile-form-error-message
              >${this.errorMessage}</nile-form-error-message
            >
          `
            : ``}
    `;
    }
};
NileSlideToggle.styles = styles;
__decorate([
    property({ type: String })
], NileSlideToggle.prototype, "label", void 0);
__decorate([
    property({ type: String })
], NileSlideToggle.prototype, "sublabel", void 0);
__decorate([
    property({ type: String, })
], NileSlideToggle.prototype, "textPosition", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], NileSlideToggle.prototype, "isChecked", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], NileSlideToggle.prototype, "fullWidth", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], NileSlideToggle.prototype, "disabled", void 0);
__decorate([
    property({ attribute: 'help-text', reflect: true })
], NileSlideToggle.prototype, "helpText", void 0);
__decorate([
    property({ attribute: 'error-message', reflect: true })
], NileSlideToggle.prototype, "errorMessage", void 0);
NileSlideToggle = __decorate([
    customElement('nile-slide-toggle')
], NileSlideToggle);
export { NileSlideToggle };
//# sourceMappingURL=nile-slide-toggle.js.map