'use strict';

var index = require('./index-BEF5cZxd.js');
var props = require('./props-CPENhBnM.js');
var template = require('./template-Cj6PcLmR.js');
var utils = require('./utils-NnC78QR3.js');
var sizes = require('./sizes-D5zsw2g5.js');
var constants = require('./constants-z2ZSS2je.js');
var string_utils = require('./string.utils-BG4pUfEi.js');
var helpers = require('./helpers-DmI-ZOAH.js');
var accessibility = require('./accessibility-BQJmIVWV.js');
var attribute = require('./attribute-CH1-zDDl.js');
require('./gov.log-C5EH15b_.js');
require('./colors-DgrrxjsX.js');

const ChipSizes = utils.pick(sizes.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) {
        index.registerInstance(this, hostRef);
        this.govClick = index.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 = constants.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 = template.govHost(this.host);
        this.chipId = string_utils.createID('GovChip');
    }
    validateColor(newValue) {
        props.validateProp(constants.ButtonColors, newValue, ChipClass.root);
    }
    validateSize(newValue) {
        props.validateProp(constants.ButtonSizes, newValue, ChipClass.root);
    }
    componentWillLoad() {
        this.validateColor(this.color);
        this.validateSize(this.size);
        this.inheritedAttributes = accessibility.inheritAriaAttributes(this.host);
    }
    componentDidLoad() {
        this.attributeObserver = new attribute.AttributeObserver(this.host, (attributeName, newValue) => {
            this.onAriaAttributeChange(attributeName, newValue);
        });
        this.attributeObserver.startObserving(attribute.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 = helpers.prepareIconFormat(this.iconStart);
        const iconEnd = helpers.prepareIconFormat(this.iconEnd);
        return (index.h(index.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 }, index.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 }), index.h("slot", { key: '9793b743f288573932aec95f68c0f1b1bb617add', name: "left" }), index.h("slot", { key: 'be7cc7cb0a94c666faf842d8ee70701245305001', name: "icon-start" }, iconStart && index.h("gov-icon", { key: '464ebc3d08b609a17e5e126eca9b0fb8eefc2bd4', type: iconStart.type, name: iconStart.name })), index.h("slot", { key: 'faffc742599b65f40b61b8cbd45e32891f43a869' }), index.h("slot", { key: 'dce2fa1d55332f8cc3d51e8a11e56735f5bcf683', name: "icon-end" }, iconEnd && index.h("gov-icon", { key: 'afc841c471bc376cc650150e168d307f3393ef15', type: iconEnd.type, name: iconEnd.name })), index.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 index.getElement(this); }
    static get watchers() { return {
        "color": ["validateColor"],
        "size": ["validateSize"]
    }; }
};

exports.gov_chip = GovChip;
//# sourceMappingURL=gov-chip.entry.cjs.js.map

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