import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-ClISz4NF.js';
import { v as validateProp } from './props-CJZgTDla.js';
import { g as govHost } from './template-CoD1xawt.js';
import { p as pick } from './utils-CQvUntGY.js';
import { S as Sizes } from './sizes-BcQO4NH2.js';
import { B as ButtonColors, a as ButtonSizes } from './constants-BNBB_29K.js';
import { c as createID } from './string.utils-vN03FcXN.js';
import { p as prepareIconFormat } from './helpers-GYov8gU1.js';
import { i as inheritAriaAttributes } from './accessibility-wqNV8djF.js';
import { A as AttributeObserver, a as ariaAttributes } from './attribute-Bz_RzYFb.js';
import './gov.log-BtqD9K8d.js';
import './colors-U40vKHrs.js';

const ChipSizes = pick(Sizes, ['_XS', '_S', '_M']);
var ChipType;
(function (ChipType) {
    ChipType["SOLID"] = "solid";
    ChipType["OUTLINED"] = "outlined";
})(ChipType || (ChipType = {}));
var NativeType;
(function (NativeType) {
    NativeType["A"] = "a";
    NativeType["SPAN"] = "span";
    NativeType["BUTTON"] = "button";
})(NativeType || (NativeType = {}));
const ChipClass = {
    root: 'gov-chip',
    hasRight: 'gov-chip--has-right',
    hasLeft: 'gov-chip--has-left',
};

const GovChip = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.govClick = createEvent(this, "gov-click");
        this.hydrated = false;
        /**
         * Makes the chip component disabled.
         */
        this.disabled = false;
        /**
         * Chip’s size.
         */
        this.size = ChipSizes._M;
        /**
         * Used to change the HTML tag in the chip
         */
        this.tag = "span";
        /**
         * Style variation of the chip.
         */
        this.color = ButtonColors.PRIMARY;
        /**
         * Same as original parameter
         * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/focusable
         */
        this.focusable = true;
        this.inheritedAttributes = {};
        this.h = govHost(this.host);
        this.chipId = createID('GovChip');
    }
    validateColor(newValue) {
        validateProp(ButtonColors, newValue, ChipClass.root);
    }
    validateSize(newValue) {
        validateProp(ButtonSizes, newValue, ChipClass.root);
    }
    componentWillLoad() {
        this.validateColor(this.color);
        this.validateSize(this.size);
        this.inheritedAttributes = inheritAriaAttributes(this.host);
    }
    componentDidLoad() {
        this.attributeObserver = new AttributeObserver(this.host, (attributeName, newValue) => {
            this.onAriaAttributeChange(attributeName, newValue);
        });
        this.attributeObserver.startObserving(ariaAttributes);
    }
    disconnectedCallback() {
        var _a;
        (_a = this.attributeObserver) === null || _a === void 0 ? void 0 : _a.stopObserving();
    }
    connectedCallback() {
        this.hydrated = true;
    }
    onAriaAttributeChange(attributeName, newValue) {
        this.host.removeAttribute(attributeName);
        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [attributeName]: newValue });
    }
    render() {
        const Tag = this.href ? NativeType.A : this.tag;
        const nativeType = Tag == NativeType.BUTTON ? NativeType.BUTTON : undefined;
        const iconStart = prepareIconFormat(this.iconStart);
        const iconEnd = prepareIconFormat(this.iconEnd);
        return (h(Host, { key: 'ef86316065b17ea753e6f46944203be579c9669c', class: this.h.classes([
                ChipClass.root,
                this.h.hasSlot("right") ? ChipClass.hasRight : undefined,
                this.h.hasSlot("left") ? ChipClass.hasLeft : undefined,
            ]), disabled: this.disabled, href: this.href, color: this.color, type: this.type, size: this.size, focusable: this.focusable, hydrated: this.hydrated }, h(Tag, Object.assign({ key: '0ecb833e5c5f4e30914d9f12764b78bfd22973b6', class: "element", href: this.href, target: this.target, ref: el => (this.triggerRef = el), onClick: this.onClickHandler.bind(this), tabindex: (this.h.hasSlot("left") || this.h.hasSlot("right") || this.disabled || !this.focusable) ? "-1" : "0", id: this.identifier || this.chipId, type: nativeType }, this.inheritedAttributes, { "aria-disabled": this.disabled }), h("slot", { key: '9793b743f288573932aec95f68c0f1b1bb617add', name: "left" }), h("slot", { key: 'be7cc7cb0a94c666faf842d8ee70701245305001', name: "icon-start" }, iconStart && h("gov-icon", { key: '464ebc3d08b609a17e5e126eca9b0fb8eefc2bd4', type: iconStart.type, name: iconStart.name })), h("slot", { key: 'faffc742599b65f40b61b8cbd45e32891f43a869' }), h("slot", { key: 'dce2fa1d55332f8cc3d51e8a11e56735f5bcf683', name: "icon-end" }, iconEnd && h("gov-icon", { key: 'afc841c471bc376cc650150e168d307f3393ef15', type: iconEnd.type, name: iconEnd.name })), h("slot", { key: '16dc2b17d2b813c2ced12ae44c12d621a82c6cb5', name: "right" }))));
    }
    onClickHandler(e) {
        e.stopPropagation();
        if (this.disabled === false && this.tag === NativeType.BUTTON) {
            this.govClick.emit(e);
        }
    }
    /**
     * Returns a clickable element instance
     */
    async geRef() {
        return this.triggerRef;
    }
    /**
     * Focus button element
     */
    async setFocus() {
        this.triggerRef.focus();
    }
    get host() { return getElement(this); }
    static get watchers() { return {
        "color": ["validateColor"],
        "size": ["validateSize"]
    }; }
};

export { GovChip as gov_chip };
//# sourceMappingURL=gov-chip.entry.js.map

//# sourceMappingURL=gov-chip.entry.js.map