import { r as registerInstance, c as createEvent, h } from './index-BIwHMk6j.js';
import { b as n } from './index.esm-CMeGYws2.js';
import { L as LimeWebComponentTemplate } from './web-component-template-6zRYia86.js';

const ruleChipPopoverCss = () => `:host{display:block}.popover{display:flex;flex-direction:column;min-width:24rem;background-color:rgb(var(--contrast-100));border:1px solid rgb(var(--contrast-700));border-radius:0.5rem;box-shadow:0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);overflow:hidden}.popover__header{--header-background-color:rgba(var(--contrast-300));padding-right:0.5rem;gap:1rem}.popover__header-actions{display:grid;grid-auto-flow:column;grid-gap:0.75rem;padding:0.25rem;align-items:center}.popover__delete-button{color:rgb(var(--contrast-1100))}.popover__body{padding:1rem}`;

const RuleChipPopover = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.negate = createEvent(this, "negate");
        this.updateArgs = createEvent(this, "updateArgs");
        this.deleteChip = createEvent(this, "deleteChip");
        this.isNegated = false;
        this.readonly = false;
        this.disabled = false;
        this.isMutable = true;
        this.handleNegateChange = (event) => {
            event.stopPropagation();
            this.negate.emit(event.detail);
        };
        this.handleArgsChange = (event) => {
            event.stopPropagation();
            this.updateArgs.emit(event.detail);
        };
        this.handleDelete = () => {
            this.deleteChip.emit();
        };
    }
    render() {
        return (h("div", { key: '6aae573b524737ee3d2a4b2d3df68ec9bf1f1a0f', class: "popover" }, this.renderHeader(), this.renderBody()));
    }
    renderHeader() {
        var _a, _b, _c, _d;
        const title = ((_a = this.metadata) === null || _a === void 0 ? void 0 : _a.title)
            ? this.translator.get(this.metadata.title)
            : ((_c = (_b = this.refNode) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : '');
        return (h("limel-header", { class: "popover__header is-narrow", heading: title, icon: (_d = this.metadata) === null || _d === void 0 ? void 0 : _d.icon }, this.renderHeaderActions()));
    }
    renderHeaderActions() {
        if (!this.isMutable) {
            return null;
        }
        return (h("div", { slot: "actions", class: "popover__header-actions" }, h("limel-switch", { class: "popover__negate-switch", label: this.translator.get('webclient.rule-editor.negate'), value: this.isNegated, onChange: this.handleNegateChange }), h("limel-icon-button", { class: "popover__delete-button", icon: "trash", label: this.translator.get('webclient.rule-editor.delete'), onClick: this.handleDelete })));
    }
    get translator() {
        return this.platform.get(n.Translate);
    }
    renderBody() {
        var _a, _b;
        const configComponent = (_a = this.metadata) === null || _a === void 0 ? void 0 : _a.configComponent;
        if (!configComponent) {
            return null;
        }
        return (h("div", { class: "popover__body" }, h(LimeWebComponentTemplate, { platform: this.platform, context: this.context, name: configComponent.name, props: Object.assign(Object.assign({}, configComponent.props), { value: (_b = this.refNode) === null || _b === void 0 ? void 0 : _b.args, readonly: this.readonly, disabled: this.disabled, onChange: this.handleArgsChange }) })));
    }
};
RuleChipPopover.style = ruleChipPopoverCss();

export { RuleChipPopover as limebb_rule_chip_popover };
