var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var IgcValidationContainerComponent_1;
import { LitElement, html, nothing } from 'lit';
import { property, state } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { themes } from '../../theming/theming-decorator.js';
import { registerComponent } from '../common/definitions/register.js';
import { isEmpty, partNameMap, toKebabCase } from '../common/util.js';
import IgcIconComponent from '../icon/icon.js';
import { styles as shared } from './themes/shared/validator.common.css.js';
import { all } from './themes/themes.js';
import { styles } from './themes/validator.base.css.js';
function getValidationSlots(element) {
    return element.renderRoot.querySelectorAll("slot:not([name='helper-text'])");
}
function hasProjection(element) {
    return Array.from(element.renderRoot.querySelectorAll('slot')).every((slot) => isEmpty(slot.assignedElements({ flatten: true })));
}
function hasProjectedValidation(element, slotName) {
    const config = { flatten: true };
    const slots = Array.from(getValidationSlots(element));
    return slotName
        ? slots
            .filter((slot) => slot.name === slotName)
            .some((slot) => slot.assignedElements(config).length > 0)
        : slots.some((slot) => slot.assignedElements(config).length > 0);
}
let IgcValidationContainerComponent = IgcValidationContainerComponent_1 = class IgcValidationContainerComponent extends LitElement {
    constructor() {
        super(...arguments);
        this._hasSlottedContent = false;
        this.invalid = false;
    }
    static register() {
        registerComponent(IgcValidationContainerComponent_1, IgcIconComponent);
    }
    static create(host, config = {
        id: 'helper-text',
        hasHelperText: true,
    }) {
        const { renderValidationSlots } = IgcValidationContainerComponent_1.prototype;
        const helperText = config.hasHelperText
            ? html `<slot name="helper-text" slot="helper-text"></slot>`
            : null;
        return html `
      <igc-validator
        id=${ifDefined(config.id)}
        part=${ifDefined(config.part)}
        slot=${ifDefined(config.slot)}
        .target=${host}
        ?invalid=${host.invalid}
        exportparts="helper-text validation-message validation-icon"
      >
        ${helperText}${renderValidationSlots(host.validity, true)}
      </igc-validator>
    `;
    }
    set target(value) {
        if (this._target === value) {
            return;
        }
        this._target?.removeEventListener('invalid', this);
        this._target = value;
        this._target.addEventListener('invalid', this);
    }
    get target() {
        return this._target;
    }
    createRenderRoot() {
        const root = super.createRenderRoot();
        root.addEventListener('slotchange', this);
        return root;
    }
    handleEvent({ type }) {
        const isInvalid = type === 'invalid';
        const isSlotChange = type === 'slotchange';
        if (isInvalid || isSlotChange) {
            this.invalid = isInvalid ? true : this.invalid;
            this._hasSlottedContent = hasProjectedValidation(this);
        }
        this.requestUpdate();
    }
    renderValidationMessage(slotName) {
        const icon = hasProjectedValidation(this, slotName)
            ? html `
          <igc-icon
            aria-hidden="true"
            name="error"
            collection="default"
            part="validation-icon"
          ></igc-icon>
        `
            : null;
        const parts = partNameMap({
            'validation-message': true,
            empty: !icon,
        });
        return html `
      <div part=${parts}>
        ${icon}
        <slot name=${slotName}></slot>
      </div>
    `;
    }
    *renderValidationSlots(validity, projected = false) {
        for (const key in validity) {
            if (key === 'valid' && !validity[key]) {
                yield projected
                    ? html `<slot name="invalid" slot="invalid"></slot>`
                    : this.renderValidationMessage('invalid');
            }
            else if (validity[key]) {
                const name = toKebabCase(key);
                yield projected
                    ? html `<slot name=${name} slot=${name}></slot>`
                    : this.renderValidationMessage(name);
            }
        }
    }
    renderHelper() {
        return this.invalid && this._hasSlottedContent
            ? nothing
            : html `<slot name="helper-text"></slot>`;
    }
    render() {
        const parts = partNameMap({
            'helper-text': true,
            empty: hasProjection(this),
        });
        return html `
      <div part=${parts}>
        ${this.invalid
            ? this.renderValidationSlots(this.target.validity)
            : nothing}
        ${this.renderHelper()}
      </div>
    `;
    }
};
IgcValidationContainerComponent.tagName = 'igc-validator';
IgcValidationContainerComponent.styles = [styles, shared];
__decorate([
    state()
], IgcValidationContainerComponent.prototype, "_hasSlottedContent", void 0);
__decorate([
    property({ type: Boolean })
], IgcValidationContainerComponent.prototype, "invalid", void 0);
__decorate([
    property({ attribute: false })
], IgcValidationContainerComponent.prototype, "target", null);
IgcValidationContainerComponent = IgcValidationContainerComponent_1 = __decorate([
    themes(all)
], IgcValidationContainerComponent);
export default IgcValidationContainerComponent;
//# sourceMappingURL=validation-container.js.map