'use client';
import { __decorate } from 'tslib';
import { html, nothing } from 'lit';
import { property } from 'lit/decorators.js';
import { OptionElement } from '../../base/option-element.js';
import { SgdsCheckbox } from '../Checkbox/sgds-checkbox.js';
import { SgdsIcon } from '../Icon/sgds-icon.js';

/**
 * @summary ComboBoxOption is the option of the Combobox
 *
 * @slot default - The label of the option
 */
class SgdsComboBoxOption extends OptionElement {
    constructor() {
        super(...arguments);
        /**
         * @internal If true, this item is rendered as a checkbox item.
         * This property is controlled by its combo box parent
         */
        this.checkbox = false;
        this._renderItemContent = () => {
            return this.checkbox
                ? html `
          <sgds-checkbox .checked=${this.active} .disabled=${this.disabled}>
            <slot></slot>
          </sgds-checkbox>
        `
                : html `
          <div class="normal-item-content">
            <slot></slot>
            ${this.active ? html ` <sgds-icon name="check"></sgds-icon> ` : nothing}
          </div>
        `;
        };
    }
    connectedCallback() {
        super.connectedCallback();
    }
    firstUpdated(changedProperties) {
        super.firstUpdated(changedProperties);
        const parent = this.parentElement;
        if (parent === null || parent === void 0 ? void 0 : parent.multiSelect) {
            this.checkbox = true;
        }
    }
}
/** @internal */
SgdsComboBoxOption.dependencies = {
    "sgds-icon": SgdsIcon,
    "sgds-checkbox": SgdsCheckbox
};
__decorate([
    property({ type: Boolean, reflect: true })
], SgdsComboBoxOption.prototype, "checkbox", void 0);

export { SgdsComboBoxOption, SgdsComboBoxOption as default };
//# sourceMappingURL=sgds-combo-box-option.js.map
