/**
 * @license
 * Copyright Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
import { __decorate } from "tslib";
import { attachShadowTemplate, coerceBoolean, CustomElement } from '@tylertech/forge-core';
import { BaseComponent } from '../../core/base/base-component';
import { ChipComponent } from '../chip/chip';
import { CHIP_CONSTANTS } from '../chip/chip-constants';
import { CHIP_SET_CONSTANTS } from './chip-set-constants';
const template = '<template><div class=\"forge-chip-set\" part=\"root\"><slot></slot></div></template>';
const styles = ':host{display:inline-block}:host([hidden]){display:none}.forge-chip-set{--_chip-set-spacing:var(--forge-chip-set-spacing, var(--forge-spacing-xsmall, 8px))}.forge-chip-set{display:-webkit-box;display:flex;flex-wrap:wrap;gap:var(--_chip-set-spacing)}:host([vertical]) .forge-chip-set{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}';
/**
 * @tag forge-chip-set
 *
 * @summary Chips sets are used to group multiple chips together and orchestrate their behavior.
 *
 * @property {boolean} [vertical=false] - Whether the chip set is vertical.
 * @property {ChipType} [type='action'] - The type of chip.
 * @property {boolean} [dense=false] - Whether the chip set is dense.
 * @property {boolean} [disabled=false] - Whether the chip set is disabled.
 * @property {boolean} [invalid=false] - Whether the chip set is invalid.
 * @property {ChipTheme} [theme='primary'] - The theme of the chip set.
 *
 * @attribute {boolean} [vertical] - Whether the chip set is vertically oriented.
 * @attribute {ChipType} [type] - The type of chips.
 * @attribute {boolean} [dense] - Whether all chips in the chip set are dense.
 * @attribute {boolean} [disabled] - Whether all chips in the chip set are disabled.
 * @attribute {boolean} [invalid] - Whether all chips in the chip set are invalid.
 * @attribute {ChipTheme} [theme] - The theme of the chips.
 *
 * @cssproperty --forge-chip-set-spacing - The spacing between chips.
 *
 * @csspart root - The component's root element.
 *
 * @slot - The chips to display in the chip set.
 */
let ChipSetComponent = class ChipSetComponent extends BaseComponent {
    static get observedAttributes() {
        return Object.values(CHIP_SET_CONSTANTS.observedAttributes);
    }
    constructor() {
        super();
        this._vertical = false;
        this._type = CHIP_CONSTANTS.defaults.TYPE;
        this._dense = false;
        this._disabled = false;
        this._invalid = false;
        this._theme = CHIP_CONSTANTS.defaults.THEME;
        attachShadowTemplate(this, template, styles);
    }
    connectedCallback() {
        this.addEventListener(CHIP_CONSTANTS.events.NAVIGATE, this._onChipNavigate.bind(this));
    }
    attributeChangedCallback(name, oldValue, newValue) {
        switch (name) {
            case CHIP_SET_CONSTANTS.observedAttributes.VERTICAL:
                this.vertical = coerceBoolean(newValue);
                break;
            case CHIP_SET_CONSTANTS.observedAttributes.TYPE:
                this.type = newValue;
                break;
            case CHIP_SET_CONSTANTS.observedAttributes.DENSE:
                this.dense = coerceBoolean(newValue);
                break;
            case CHIP_SET_CONSTANTS.observedAttributes.DISABLED:
                this.disabled = coerceBoolean(newValue);
                break;
            case CHIP_SET_CONSTANTS.observedAttributes.INVALID:
                this.invalid = coerceBoolean(newValue);
                break;
            case CHIP_SET_CONSTANTS.observedAttributes.THEME:
                this.theme = newValue;
                break;
        }
    }
    _onChipNavigate(evt) {
        const focusableChips = this._findChipDescendants().filter(chip => !chip.disabled);
        const activeChipIndex = focusableChips.findIndex(chip => chip === evt.target);
        let index = evt.detail.direction === 'previous' ? activeChipIndex - 1 : activeChipIndex + 1;
        if (index > focusableChips.length - 1) {
            index = 0;
        }
        const nextChip = focusableChips.at(index);
        if ((nextChip === null || nextChip === void 0 ? void 0 : nextChip.type) === 'input' && evt.detail.direction === 'previous') {
            nextChip.focusRemoveButton();
        }
        else {
            nextChip === null || nextChip === void 0 ? void 0 : nextChip.focus();
        }
    }
    _findChipDescendants() {
        return Array.from(this.querySelectorAll(CHIP_CONSTANTS.elementName));
    }
    _syncChipsProperty(property, value) {
        const chips = this._findChipDescendants();
        chips.forEach(c => c[property] = value);
    }
    get vertical() {
        return this._vertical;
    }
    set vertical(value) {
        value = Boolean(value);
        if (this._vertical !== value) {
            this._vertical = value;
            this.toggleAttribute(CHIP_SET_CONSTANTS.attributes.VERTICAL, this._vertical);
        }
    }
    get type() {
        return this._type;
    }
    set type(value) {
        if (this._type !== value) {
            this._type = value;
            this._syncChipsProperty('type', this._type);
            this.setAttribute(CHIP_SET_CONSTANTS.attributes.TYPE, this._type);
        }
    }
    get dense() {
        return this._dense;
    }
    set dense(value) {
        value = Boolean(value);
        if (this._dense !== value) {
            this._dense = value;
            this._syncChipsProperty('dense', this._dense);
            this.toggleAttribute(CHIP_SET_CONSTANTS.attributes.DENSE, this._dense);
        }
    }
    get disabled() {
        return this._disabled;
    }
    set disabled(value) {
        value = Boolean(value);
        if (this._disabled !== value) {
            this._disabled = value;
            this._syncChipsProperty('disabled', this._disabled);
            this.toggleAttribute(CHIP_SET_CONSTANTS.attributes.DISABLED, this._disabled);
        }
    }
    get invalid() {
        return this._invalid;
    }
    set invalid(value) {
        value = Boolean(value);
        if (this._invalid !== value) {
            this._invalid = value;
            this._syncChipsProperty('invalid', this._invalid);
            this.toggleAttribute(CHIP_SET_CONSTANTS.attributes.INVALID, this._invalid);
        }
    }
    get theme() {
        return this._theme;
    }
    set theme(value) {
        if (this._theme !== value) {
            this._theme = value;
            this._syncChipsProperty('theme', this._theme);
            this.setAttribute(CHIP_SET_CONSTANTS.attributes.THEME, this._theme);
        }
    }
};
ChipSetComponent = __decorate([
    CustomElement({
        name: CHIP_SET_CONSTANTS.elementName,
        dependencies: [ChipComponent]
    })
], ChipSetComponent);
export { ChipSetComponent };
