import { r as registerInstance, a as createEvent, h, e as Host, g as getElement } from './index-c8b17ddb.js';

const chipClickableCss = ":host{display:-ms-flexbox;display:flex;height:-webkit-max-content;height:-moz-max-content;height:max-content;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%}:host .chip_clickable{display:-ms-flexbox;display:flex;min-width:32px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-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_clickable--container-text--full{width:100%}:host .chip_clickable--container-text--min{width:calc(100% - 36px)}:host .chip_clickable--container-text--half{width:calc(100% - 16px)}:host .chip_clickable--hide{display:none;padding:0;border:none}:host .chip_clickable .chip_focus:focus{position:absolute;width:100%;height:100%;padding:2px;border-radius:4px;outline:var(--color-focus, #c226fb) solid 2px}:host .chip_clickable--click{cursor:pointer}:host .chip_clickable--click .chip_darker{opacity:0;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_clickable--click:hover .chip_darker{opacity:1;-webkit-backdrop-filter:brightness(0.9);backdrop-filter:brightness(0.9)}:host .chip_clickable--click:active .chip_darker{opacity:1;-webkit-backdrop-filter:brightness(0.8);backdrop-filter:brightness(0.8)}:host .chip_clickable--disabled{cursor:default;background-color:var(--color-surface-3, #CFCFCF)}:host .chip_clickable--disabled .chip_clickable--icon{color:var(--color-content-default, #454545)}:host .chip_clickable--disabled .chip_clickable--text{color:var(--color-content-default, #454545)}:host .chip_clickable--disabled .chip_clickable--close{cursor:default}:host .chip_clickable--icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:20px;padding-left:4px;z-index:2}:host .chip_clickable--close{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:20px;padding-right:4px;mix-blend-mode:hard-light;opacity:0.5;z-index:2;position:relative;cursor:pointer}:host .chip_clickable--close .close_focus:focus{position:absolute;width:100%;height:100%;left:-2px;border-radius:4px;outline:var(--color-focus, #c226fb) solid 2px}:host .chip_clickable--text{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:20px;margin:0 8px;z-index:2;font-family:\"Nunito Sans\", \"Carbona\", \"Tahoma\", \"Helvetica\", \"Arial\", sans-serif}:host .chip_clickable--tall{height:40px;border-radius:24px}:host .chip_clickable--default{background-color:var(--color-system, #B2DFFD);color:var(--color-content-din, #000000)}:host .chip_clickable--info{background-color:var(--color-info, #80e3eb);color:var(--color-content-din, #000000)}:host .chip_clickable--success{background-color:var(--color-success, #84ebbc);color:var(--color-content-din, #000000)}:host .chip_clickable--warning{background-color:var(--color-warning, #fde99b);color:var(--color-content-din, #000000)}:host .chip_clickable--danger{background-color:var(--color-error, #f99f9f);color:var(--color-content-din, #000000)}:host .chip_clickable--outline{background-color:var(--color-surface-1, #F6F6F6);border:1px solid var(--color-border-1, #B1B1B1);color:var(--color-content-default, #454545)}:host .chip_clickable:focus-visible{outline:none}";

const ChipClickable = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.chipClickableClose = createEvent(this, "chipClickableClose", 7);
        this.chipClickableClick = createEvent(this, "chipClickableClick", 7);
        this.visible = true;
        this.icon = undefined;
        this.avatar = undefined;
        this.color = 'default';
        this.size = 'standard';
        this.clickable = false;
        this.close = false;
        this.disabled = false;
        this.dataTest = null;
        this.dtButtonClose = null;
    }
    handleClickKey(event) {
        if ((event.key === 'Enter' || event.key === ' ') && !this.disabled) {
            event.preventDefault();
            this.chipClickableClick.emit();
        }
    }
    handleClick(event) {
        if (!this.disabled) {
            event.preventDefault();
            this.chipClickableClick.emit();
        }
    }
    handleCloseChip(event) {
        event.preventDefault();
        this.chipClickableClose.emit({ id: this.element.id });
    }
    handleCloseKey(event) {
        if ((event.key === 'Enter' || event.key === ' ') && !this.disabled) {
            event.preventDefault();
            this.chipClickableClose.emit({ id: this.element.id });
        }
    }
    getSizeAvatarChip() {
        if (this.size === 'tall') {
            return 'extra-small';
        }
        else
            return 'micro';
    }
    getSizeIconChip() {
        if (this.size === 'tall') {
            return 'medium';
        }
        else
            return 'x-small';
    }
    render() {
        return (h(Host, { key: 'fb9543d15fd4dbe9251bbb73c99a308e890581c1' }, h("div", { key: '7d7a20a958426526f4c1ca99c831b07ba3d73e7d', class: {
                chip_clickable: true,
                [`chip_clickable--${this.color}`]: true && !this.disabled,
                [`chip_clickable--${this.size}`]: true,
                'chip_clickable--hide': !this.visible,
                'chip_clickable--click': this.clickable,
                'chip_clickable--disabled': this.disabled,
            }, onClick: this.handleClick.bind(this), "data-test": this.dataTest }, this.clickable && !this.disabled && (h("div", { key: 'aec3b83d1efc8a0652fda088777ff1235c031c4c', class: "chip_focus", onKeyDown: this.handleClickKey.bind(this), tabindex: "0" })), this.clickable && !this.disabled && h("div", { key: 'dbbe14547f0807d2e82b50f3e93e6c58f7b17958', class: "chip_darker" }), this.icon && !this.avatar && (h("div", { key: '0e33b40c5f8a48123553cb273be4e9ae40e4f1db', class: "chip_clickable--icon" }, h("bds-icon", { key: '23002403c549363c13bf041f511bbc269c237a9f', size: this.getSizeIconChip(), name: this.icon }))), this.avatar && (h("div", { key: '4de1ca9002eea8b8e087695017e3a19ae7393520', class: "chip_clickable--avatar" }, h("bds-avatar", { key: 'eaca708ef221b547bc89f6b3feb36d6e2575fed8', size: this.getSizeAvatarChip(), thumbnail: this.avatar }))), h("div", { key: 'c83fa85ec1774d89f2b7907b39e08a08ce42a3d3', class: this.close && (this.icon || this.avatar)
                ? `chip_clickable--container-text--min`
                : !this.close && !this.icon && !this.avatar
                    ? `chip_clickable--container-text--full`
                    : `chip_clickable--container-text--half` }, h("bds-typo", { key: '23c7f5a424afd240ea5c8dedadb1203e044f68c9', "no-wrap": "true", class: "chip_clickable--text", variant: "fs-12", bold: "bold" }, h("slot", { key: 'ad56807656289a789eff95b7369eb615ab61cb6a' }))), this.close && (h("div", { key: 'f1ee5a73cd1d373c89a24eade8a94fe1a8e04ff7', class: "chip_clickable--close", "data-test": this.dtButtonClose, onClick: this.handleCloseChip.bind(this) }, !this.disabled && (h("div", { key: '565b24bc52a4df768343e0b1f31a886eb6ea96c0', class: "close_focus", onKeyDown: this.handleCloseKey.bind(this), tabindex: "0" })), h("bds-icon", { key: '870ae560b9a79344f4bb5b0c0a1539bb499b1081', size: "x-small", theme: "solid", name: "error" }))))));
    }
    get element() { return getElement(this); }
};
ChipClickable.style = chipClickableCss;

export { ChipClickable as bds_chip_clickable };

//# sourceMappingURL=bds-chip-clickable.entry.js.map