'use strict';

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

const index = require('./index-abfd8c86.js');

const chipSelectedCss = ":host{display:-ms-flexbox;display:flex;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%}:host .chip{display:-ms-flexbox;display:flex;min-width:32px;width:-webkit-max-content;width:-moz-max-content;width:max-content;height:32px;border-radius:16px;padding:2px 4px;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-pack:center;justify-content:center;position:relative;z-index:0}:host .chip .chip_focus:focus{position:absolute;width:100%;height:100%;padding:2px;border-radius:4px;outline:var(--color-focus, #c226fb) solid 2px}:host .chip .chip_darker{position:absolute;width:100%;height:100%;border-radius:inherit;z-index:1;-webkit-backdrop-filter:brightness(1);backdrop-filter:brightness(1);-webkit-box-sizing:border-box;box-sizing:border-box}:host .chip--icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding-left:4px;height:20px;z-index:2}:host .chip--text{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:20px;z-index:2;margin:0 8px;-ms-flex-wrap:nowrap;flex-wrap:nowrap;font-family:\"Nunito Sans\", \"Carbona\", \"Tahoma\", \"Helvetica\", \"Arial\", sans-serif}:host .chip--tall{height:40px;border-radius:24px}:host .chip--default{background-color:var(--color-system, #B2DFFD);color:var(--color-content-default, #454545)}:host .chip--info{background-color:var(--color-info, #80e3eb);color:var(--color-content-default, #454545)}:host .chip--success{background-color:var(--color-success, #84ebbc);color:var(--color-content-default, #454545)}:host .chip--warning{background-color:var(--color-warning, #fde99b);color:var(--color-content-default, #454545)}:host .chip--danger{background-color:var(--color-error, #f99f9f);color:var(--color-content-default, #454545)}:host .chip--outline{background-color:var(--color-surface-1, #F6F6F6);border:1px solid var(--color-border-1, #B1B1B1);color:var(--color-content-default, #454545);padding:2px 3px}:host .chip--outline .chip_darker{height:calc(100% + 2px)}:host .chip:hover{cursor:pointer}:host .chip:hover .chip_darker{-webkit-backdrop-filter:brightness(0.9);backdrop-filter:brightness(0.9)}:host .chip:active{cursor:pointer}:host .chip:active .chip_darker{-webkit-backdrop-filter:brightness(0.8);backdrop-filter:brightness(0.8)}:host .chip:focus-visible{outline:none}:host .chip_selected{display:-ms-flexbox;display:flex;min-width:32px;width:-webkit-max-content;width:-moz-max-content;width:max-content;height:32px;border-radius:16px;padding:2px;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--color-surface-1, #F6F6F6);border:2px solid var(--color-content-default, #454545)}:host .chip_selected--container-text--full{width:100%}:host .chip_selected--container-text--half{width:calc(100% - 20px)}:host .chip_selected--icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:20px;padding-left:4px;color:var(--color-content-default, #454545)}:host .chip_selected--text{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:20px;margin:0 8px;-ms-flex-wrap:nowrap;flex-wrap:nowrap;color:var(--color-content-default, #454545);font-family:\"Nunito Sans\", \"Carbona\", \"Tahoma\", \"Helvetica\", \"Arial\", sans-serif}:host .chip_selected--tall{height:40px;border-radius:24px}:host .chip_selected:hover{opacity:38%;cursor:pointer}:host .chip_selected:active{opacity:38%}:host .chip_disabled{display:-ms-flexbox;display:flex;min-width:32px;width:-webkit-max-content;width:-moz-max-content;width:max-content;height:32px;border-radius:16px;padding:2px 4px;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-pack:center;justify-content:center;position:relative;z-index:0;background-color:var(--color-surface-3, #CFCFCF)}:host .chip_disabled--icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding-left:4px;width:16px;height:20px;color:var(--color-content-default, #454545);z-index:2}:host .chip_disabled--text{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:20px;z-index:2;margin:0 8px;-ms-flex-wrap:nowrap;flex-wrap:nowrap;color:var(--color-content-default, #454545);font-family:\"Nunito Sans\", \"Carbona\", \"Tahoma\", \"Helvetica\", \"Arial\", sans-serif}:host .chip_disabled--tall{height:40px;border-radius:24px}:host .chip_disabled:hover{cursor:default}";

const ChipSelected = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.chipClick = index.createEvent(this, "chipClick", 7);
        this.isSelected = false;
        this.icon = undefined;
        this.color = 'default';
        this.size = 'standard';
        this.selected = false;
        this.disabled = false;
        this.dataTest = null;
    }
    handleKeyDown(event) {
        if (event.key === ' ' && !this.disabled) {
            event.preventDefault();
            if (this.isSelected) {
                return (this.isSelected = false);
            }
            else {
                return (this.isSelected = true);
            }
        }
    }
    handleClick(event) {
        if (this.disabled)
            return;
        event.preventDefault();
        if (this.isSelected) {
            return (this.isSelected = false);
        }
        else {
            return (this.isSelected = true);
        }
    }
    componentWillLoad() {
        this.el.focus();
        this.isSelected = this.selected;
    }
    getDisabledChip() {
        return this.disabled ? { chip_disabled: true, [`chip_disabled--${this.size}`]: true } : {};
    }
    getStyleChip() {
        return this.isSelected
            ? { chip_selected: true, [`chip_selected--${this.size}`]: true }
            : { [`chip--${this.color}`]: true, [`chip--${this.size}`]: true };
    }
    getStyleText() {
        if (this.isSelected) {
            const chipSelected = { 'chip_selected--text': true };
            return chipSelected;
        }
    }
    getSizeIconChip() {
        if (this.size === 'tall') {
            return 'medium';
        }
        else
            return 'x-small';
    }
    render() {
        return (index.h(index.Host, { key: '066ca27c97c11ccf6de22c5b556f63f32d5eb166' }, index.h("div", { key: '9f88cf8d75f9927c81eb2a440de973a8907dc23b', class: Object.assign(Object.assign({ chip: true }, this.getStyleChip()), this.getDisabledChip()), onClick: this.handleClick, "data-test": this.dataTest }, !this.disabled && index.h("div", { key: 'e2024e8e1a2df5a15514f2964febb018e0ac72dc', class: "chip_focus", onKeyDown: this.handleKeyDown.bind(this), tabindex: "0" }), !this.isSelected && !this.disabled && index.h("div", { key: 'c43ff8eadffeb253a949052a8cb77fda0569e87f', class: "chip_darker" }), this.icon && !this.isSelected && (index.h("div", { key: 'dda6759e59a088bb91f800cc228a16e0f1b7d633', class: "chip--icon" }, index.h("bds-icon", { key: '71c459b4e8c028ba7413c7600f2374543e2f7f67', size: this.getSizeIconChip(), name: this.icon }))), this.isSelected && (index.h("div", { key: 'f1195ccec33d81cc7ecddff935e6c3c4af55ee29', class: "chip_selected--icon" }, index.h("bds-icon", { key: 'f80d1a3125d652322d7e4a94627f0450b8117d7d', size: this.getSizeIconChip(), name: "checkball" }))), index.h("div", { key: 'f893ed1ec627c894440d2c405583a7ad44d8697e', class: this.isSelected ? `chip_selected--container-text--half` : `chip_selected--container-text--full` }, index.h("bds-typo", { key: 'e968d087c97f9d4eb00e300f9dc6125187cf1998', class: Object.assign({ 'chip--text': true }, this.getStyleText()), variant: "fs-12", "no-wrap": true, bold: "bold" }, index.h("slot", { key: '3a928a62674d5f9869840526d72cda6b68e4b8cf' }))))));
    }
    get el() { return index.getElement(this); }
};
ChipSelected.style = chipSelectedCss;

exports.bds_chip_selected = ChipSelected;

//# sourceMappingURL=bds-chip-selected.cjs.entry.js.map