/**
 * 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-radio.css';
import { classMap } from 'lit/directives/class-map.js';
import { state } from 'lit/decorators.js';
import { watch } from '../internal/watch';
import NileElement from '../internal/nile-element';
/**
 * Nile icon component.
 *
 * @tag nile-radio
 *
 *
* @dependency nile-icon
 *
 * @slot - The radio's label.
 *
 * @event blur - Emitted when the control loses focus.
 * @event focus - Emitted when the control gains focus.
 *
 * @csspart base - The component's base wrapper.
 * @csspart control - The circular container that wraps the radio's checked state.
 * @csspart control--checked - The radio control when the radio is checked.
 * @csspart checked-icon - The checked icon, an `<nile-icon>` element.
 * @csspart label - The container that wraps the radio's label.
 */
let NileRadio = class NileRadio extends NileElement {
    constructor() {
        super(...arguments);
        this.checked = false;
        this.hasFocus = false;
        /** The radio's value. When selected, the radio group will receive this value. */
        this.value = '';
        /** The radio's size. */
        this.size = 'medium';
        /** Disables the radio. */
        this.disabled = false;
        /** The radio's labelborder. */
        this.islabelborder = false;
        this.allowUncheck = false;
    }
    connectedCallback() {
        super.connectedCallback();
        this.handleBlur = this.handleBlur.bind(this);
        this.handleClick = this.handleClick.bind(this);
        this.handleFocus = this.handleFocus.bind(this);
        this.setInitialAttributes();
        this.addEventListeners();
        this.emit('nile-init');
    }
    disconnectedCallback() {
        this.removeEventListeners();
        this.emit('nile-destroy');
    }
    addEventListeners() {
        this.addEventListener('blur', this.handleBlur);
        this.addEventListener('click', this.handleClick);
        this.addEventListener('focus', this.handleFocus);
    }
    removeEventListeners() {
        this.removeEventListener('blur', this.handleBlur);
        this.removeEventListener('click', this.handleClick);
        this.removeEventListener('focus', this.handleFocus);
    }
    handleBlur() {
        this.hasFocus = false;
        this.emit('nile-blur');
    }
    handleClick() {
        if (this.allowUncheck && !this.disabled) {
            this.checked = !this.checked;
        }
        else if (!this.disabled) {
            this.checked = true;
        }
    }
    handleFocus() {
        this.hasFocus = true;
        this.emit('nile-focus');
    }
    setInitialAttributes() {
        this.setAttribute('role', 'radio');
        this.setAttribute('tabindex', '-1');
        this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
    }
    handleCheckedChange() {
        this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
        if (this.disabled) {
            this.setAttribute('tabindex', '-1');
        }
        else {
            this.setAttribute('tabindex', this.checked ? '0' : '-1');
        }
    }
    handleDisabledChange() {
        this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
        if (this.disabled) {
            this.setAttribute('tabindex', '-1');
            if (this.matches(':focus')) {
                this.blur();
            }
        }
        else {
            this.setAttribute('tabindex', this.checked ? '0' : '-1');
        }
    }
    render() {
        return html `
      <span
        part="base"
        class=${classMap({
            radio: true,
            'radio--checked': this.checked,
            'radio--disabled': this.disabled,
            'radio--focused': this.hasFocus,
            'radio--medium': this.size === 'medium',
            'radio__label_border': this.islabelborder
        })}
      >
        <span part="${`control${this.checked ? ' control--checked' : ''}`}" class="radio__control">
          ${this.checked
            ? html ` <span class="radio__checked-icon"></span> `
            : ''}
        </span>

        <slot part="label" class="radio__label"></slot>
      </span>
    `;
    }
};
NileRadio.styles = styles;
__decorate([
    property({ type: Boolean })
], NileRadio.prototype, "checked", void 0);
__decorate([
    state()
], NileRadio.prototype, "hasFocus", void 0);
__decorate([
    property()
], NileRadio.prototype, "value", void 0);
__decorate([
    property({ reflect: true })
], NileRadio.prototype, "size", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], NileRadio.prototype, "disabled", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], NileRadio.prototype, "islabelborder", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], NileRadio.prototype, "allowUncheck", void 0);
__decorate([
    watch('checked')
], NileRadio.prototype, "handleCheckedChange", null);
__decorate([
    watch('disabled', { waitUntilFirstUpdate: true })
], NileRadio.prototype, "handleDisabledChange", null);
NileRadio = __decorate([
    customElement('nile-radio')
], NileRadio);
export { NileRadio };
export default NileRadio;
//# sourceMappingURL=nile-radio.js.map