'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const core = require('./core-0b92fb83.js');

const CcTabsTags = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        this.color = "primary";
        this.options = [];
        this.handleOptionClick = (index) => () => {
            const option = this._options[index];
            if (option.disabled) {
                return;
            }
            this.updateOptions(index);
            this.changeOption.emit(option.value);
        };
        this.changeOption = core.createEvent(this, "changeOption", 7);
    }
    setOptions(newValue, oldValue) {
        const newValueStringify = JSON.stringify(newValue);
        const oldValueStringify = JSON.stringify(oldValue);
        if (newValueStringify !== oldValueStringify) {
            this._options = newValue;
        }
    }
    updateOptions(index) {
        const newOptions = [...this._options].map(option => (Object.assign(Object.assign({}, option), { active: false })));
        newOptions[index].active = true;
        this._options = newOptions;
    }
    componentWillLoad() {
        this._options = this.options;
    }
    render() {
        return (core.h(core.Host, null, core.h("div", { class: {
                tabTags: true
            } }, core.h("div", { class: "tabTags__wrap" }, this._options.map((option, index) => (core.h("button", { key: `tabTagItem_${index}`, class: {
                tabTags__button: true,
                "tabTags__button--secondary": this.color === "secondary",
                "tabTags__button--active": option.active,
                "tabTags__button--disabled": option.disabled
            }, onClick: this.handleOptionClick(index) }, option.text)))))));
    }
    static get watchers() { return {
        "options": ["setOptions"]
    }; }
    static get style() { return ":host{display:block}.tabTags{overflow:hidden}.tabTags__wrap{margin:-1rem -.6rem}.tabTags__button{-webkit-appearance:button;padding:0;margin:0;font-family:inherit;cursor:pointer;background-color:transparent;background-image:none;color:inherit;border:none;font-size:100%;outline:0;font-weight:900;font-size:1.2rem;padding-left:1.2rem;padding-right:1.2rem;border-radius:9999px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:var(--neutral-04);height:3.2rem;margin:1rem .6rem}.tabTags__button--active{background-color:var(--primary);color:var(--neutral-04)}.tabTags__button--active.tabTags__button--secondary{background-color:var(--secondary)}.tabTags__button--disabled{color:var(--disabled-text);background-color:var(--disabled-background)}"; }
};

exports.cc_tabs_tags = CcTabsTags;
