import { h, Host, } from "@stencil/core";
import { onComponentRequiredPropUndefined, isSlotUsed, removeDisabledFalse, convertToRGBA, isElInAGGrid, getBrandForegroundAppearance, renderDynamicChildSlots, } from "../../utils/helpers";
import dismissIcon from "../../assets/dismiss-icon.svg";
/**
 * @slot icon - Content will be rendered at the start of the chip.
 * @slot badge - Badge component overlaying the top right of the chip.
 */
export class Chip {
    constructor() {
        this.foregroundColor = null;
        this.hovered = false;
        this.visible = true;
        /**
         * If `true`, the chip will appear disabled.
         */
        this.disabled = false;
        /**
         * If `true`, the chip will have a close button at the end to dismiss it.
         */
        this.dismissible = false;
        /**
         * The text in the dismiss button tooltip and aria label. Makes the user aware of the action resulting from clicking the 'Dismiss chip' button.
         */
        this.dismissLabel = "Dismiss";
        /**
         * Specify whether the chip fills the full width of the container.
         * If `true`, this overrides the --input-width CSS variable.
         */
        this.fullWidth = false;
        /**
         * The size of the chip.
         */
        this.size = "medium";
        /**
         * Sets the chip to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component.
         * Setting the "customColor" prop will override this.
         */
        this.theme = "inherit";
        /**
         * If `true`, the outlined variant of chip will have a transparent background rather than the theme defined color.
         */
        this.transparentBackground = true;
        /**
         * The emphasis of the chip.
         */
        this.variant = "filled";
        this.dismissAction = () => {
            this.icDismiss.emit();
        };
        this.mouseEnterHandler = () => {
            this.hovered = true;
        };
        this.mouseLeaveHandler = () => {
            this.hovered = false;
        };
    }
    customColorHandler() {
        const colorRGBA = this.customColor && convertToRGBA(this.customColor);
        if (!colorRGBA) {
            this.foregroundColor = null;
            return;
        }
        const { r, g, b, a } = colorRGBA;
        this.foregroundColor = getBrandForegroundAppearance((r * 299 + g * 587 + b * 114) / 1000);
        this.el.setAttribute("style", `--chip-custom-color: rgba(${r}, ${g}, ${b}, ${a});`);
    }
    watchDisabledHandler() {
        removeDisabledFalse(this.disabled, this.el);
    }
    disconnectedCallback() {
        var _a;
        (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
    }
    componentWillLoad() {
        removeDisabledFalse(this.disabled, this.el);
        this.customColorHandler();
    }
    componentDidLoad() {
        onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Chip");
        this.hostMutationObserver = new MutationObserver((mutationList) => renderDynamicChildSlots(mutationList, ["icon", "badge"], this));
        this.hostMutationObserver.observe(this.el, {
            childList: true,
        });
    }
    handleClick() {
        this.visible = !this.visible;
    }
    /**
     * Sets focus on the chip.
     */
    async setFocus() {
        var _a;
        (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.focus();
    }
    render() {
        const { label, variant, size, dismissible, visible, disabled, hovered, theme, foregroundColor, dismissLabel, transparentBackground, fullWidth, } = this;
        const ariaLabel = `${label} chip`;
        return (h(Host, { key: 'a340090512aafa664e16a6537cb7d8dc2fe84b29', class: {
                "ic-chip-dismissed": !visible,
                [`ic-theme-${theme}`]: theme !== "inherit",
                [`ic-chip-${foregroundColor}-text`]: variant === "filled" && !!foregroundColor,
                "ic-chip-full-width": fullWidth,
            } }, visible && (h("div", { key: '174e895e50479492d85f8a2d9871450f37d47997', class: {
                chip: true,
                [`${variant}`]: true,
                [`${size}`]: true,
                disabled,
                dismissible,
                hovered,
                "non-transparent": variant === "outlined" && !transparentBackground,
                "full-width": fullWidth,
            } }, isSlotUsed(this.el, "icon") && (h("div", { key: '3d12f1e7c932cd91f0835f3fe7c76ec6784bc44f', class: "icon" }, h("slot", { key: '5307ba63af7c7342cf32072ccebf02788265e0f5', name: "icon" }))), h("ic-typography", { key: 'e30c971835f38594a238e36d849fd1625aeb4e38', variant: "label", "apply-vertical-margins": false, class: {
                label: true,
                [`${size}`]: true,
                "in-ag-grid": isElInAGGrid(this.el),
            } }, h("span", { key: '40f476a368fbb16cee45b53c7de24d85b94a21a7' }, label)), dismissible && (h("ic-tooltip", { key: 'd8ff86e2c616f8233104b364bb8f698473c3448a', label: dismissLabel, target: "dismiss-icon", class: { "tooltip-disabled": disabled } }, h("button", { key: '290db0fd020cc7114403e9c6145c1cc454537476', id: "dismiss-icon", class: "dismiss-icon", ref: (el) => (this.buttonEl = el), "aria-label": `${dismissLabel} ${ariaLabel}`, disabled: disabled, tabindex: disabled ? -1 : 0, onClick: this.dismissAction, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler, innerHTML: dismissIcon }))), isSlotUsed(this.el, "badge") && h("slot", { key: 'd4f25acf6b19a63c9683d6aac41a04319cbea203', name: "badge" }))), dismissible && (h("div", { key: '6f5d1ad6395e82d3ec7cd588aa3944922e7a13de', class: "sr-only", "aria-live": "polite" }, !visible ? `Dismissed ${ariaLabel}` : ""))));
    }
    static get is() { return "ic-chip"; }
    static get encapsulation() { return "shadow"; }
    static get delegatesFocus() { return true; }
    static get originalStyleUrls() {
        return {
            "$": ["ic-chip.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ic-chip.css"]
        };
    }
    static get properties() {
        return {
            "customColor": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcColor",
                    "resolved": "`#${string}` | `rgb(${string})` | `rgba(${string})` | undefined",
                    "references": {
                        "IcColor": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcColor"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The custom chip colour. This will override the theme colour.\nCan be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\"."
                },
                "getter": false,
                "setter": false,
                "attribute": "custom-color",
                "reflect": false
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the chip will appear disabled."
                },
                "getter": false,
                "setter": false,
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "dismissible": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the chip will have a close button at the end to dismiss it."
                },
                "getter": false,
                "setter": false,
                "attribute": "dismissible",
                "reflect": false,
                "defaultValue": "false"
            },
            "dismissLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The text in the dismiss button tooltip and aria label. Makes the user aware of the action resulting from clicking the 'Dismiss chip' button."
                },
                "getter": false,
                "setter": false,
                "attribute": "dismiss-label",
                "reflect": false,
                "defaultValue": "\"Dismiss\""
            },
            "fullWidth": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Specify whether the chip fills the full width of the container.\nIf `true`, this overrides the --input-width CSS variable."
                },
                "getter": false,
                "setter": false,
                "attribute": "full-width",
                "reflect": false,
                "defaultValue": "false"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The text rendered within the chip."
                },
                "getter": false,
                "setter": false,
                "attribute": "label",
                "reflect": false
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcSizes",
                    "resolved": "\"large\" | \"medium\" | \"small\"",
                    "references": {
                        "IcSizes": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcSizes"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The size of the chip."
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": false,
                "defaultValue": "\"medium\""
            },
            "theme": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcThemeMode",
                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
                    "references": {
                        "IcThemeMode": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcThemeMode"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Sets the chip to the dark or light theme colors. \"inherit\" will set the color based on the system settings or ic-theme component.\nSetting the \"customColor\" prop will override this."
                },
                "getter": false,
                "setter": false,
                "attribute": "theme",
                "reflect": false,
                "defaultValue": "\"inherit\""
            },
            "transparentBackground": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the outlined variant of chip will have a transparent background rather than the theme defined color."
                },
                "getter": false,
                "setter": false,
                "attribute": "transparent-background",
                "reflect": false,
                "defaultValue": "true"
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcEmphasisType",
                    "resolved": "\"filled\" | \"outlined\"",
                    "references": {
                        "IcEmphasisType": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcEmphasisType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The emphasis of the chip."
                },
                "getter": false,
                "setter": false,
                "attribute": "variant",
                "reflect": false,
                "defaultValue": "\"filled\""
            }
        };
    }
    static get states() {
        return {
            "foregroundColor": {},
            "hovered": {},
            "visible": {}
        };
    }
    static get events() {
        return [{
                "method": "icDismiss",
                "name": "icDismiss",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Is emitted when the user dismisses the chip."
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "setFocus": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Sets focus on the chip.",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "customColor",
                "methodName": "customColorHandler"
            }, {
                "propName": "disabled",
                "methodName": "watchDisabledHandler"
            }];
    }
    static get listeners() {
        return [{
                "name": "icDismiss",
                "method": "handleClick",
                "target": undefined,
                "capture": true,
                "passive": false
            }];
    }
}
//# sourceMappingURL=ic-chip.js.map
