'use strict';

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

const index = require('./index-d337cd8a.js');
const helpers = require('./helpers-81cd6930.js');
require('./constants-4d389abc.js');

const dismissIcon = `<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 0C4.47 0 0 4.47 0 10C0 15.53 4.47 20 10 20C15.53 20 20 15.53 20 10C20 4.47 15.53 0 10 0ZM15 13.59L13.59 15L10 11.41L6.41 15L5 13.59L8.59 10L5 6.41L6.41 5L10 8.59L13.59 5L15 6.41L11.41 10L15 13.59Z" fill="currentColor"/>
</svg>
`;

const icChipCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:inline-block;max-width:100%;vertical-align:middle}:host(.ic-chip-dismissed){display:none}.chip{--chip-bg-color:transparent;--chip-hover-bg:var(--ic-chip-action-hover);--chip-pressed-bg:var(--ic-chip-action-pressed);display:flex;padding:calc(var(--ic-space-xxs) - var(--ic-space-1px)) var(--ic-space-xxs);font-size:0.875rem;border-radius:var(--ic-space-md);text-align:left;text-decoration:none;position:relative;background-color:var(--chip-bg-color);border:var(--ic-border-width) solid transparent;justify-content:space-between;width:-moz-fit-content;width:fit-content;box-sizing:border-box;max-width:100%}.chip.full-width{width:100%}:host(.ic-chip-full-width){width:100%}@media (prefers-reduced-motion: no-preference){.chip{transition:var(--ic-easing-transition-fast)}}.chip.small{padding:var(--ic-space-xxxs) var(--ic-space-xs);border-radius:calc(var(--ic-space-md) - var(--ic-space-xxxs))}.chip.medium{padding:calc(var(--ic-space-xxs) - var(--ic-space-1px)) var(--ic-space-xs);border-radius:var(--ic-space-md)}.chip.large{padding:calc(var(--ic-space-xs) - var(--ic-space-1px)) var(--ic-space-xs);border-radius:calc(var(--ic-space-md) + var(--ic-space-xxs))}.label.small{padding:0 var(--ic-space-xxs)}.label.medium{padding:0 calc(var(--ic-space-xs) - var(--ic-space-xxxs))}.label.large{padding:0 var(--ic-space-xs)}.chip:focus-within{box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline);z-index:1}ic-tooltip:focus-within{z-index:1}.filled{--chip-bg-color:var(\n    --chip-custom-color,\n    var(--ic-chip-background-filled-default)\n  );--ic-typography-color:var(\n    --chip-custom-foreground-color,\n    var(--ic-chip-label)\n  );color:var(--chip-custom-foreground-color, var(--ic-chip-label))}.filled.disabled{--chip-bg-color:var(--ic-chip-background-filled-inactive)}:host(.ic-chip-dark-text){--chip-custom-foreground-color:var(--ic-architectural-black)}:host(.ic-chip-light-text){--chip-custom-foreground-color:var(--ic-architectural-white)}:host(.ic-chip-dark-text) .chip.filled.hovered:not(:focus-within){--chip-hover-bg:var(--ic-action-dark-bg-hover)}:host(.ic-chip-dark-text) .chip.filled:focus-within{--chip-pressed-bg:var(--ic-action-dark-bg-pressed)}:host(.ic-chip-light-text) .chip.filled.hovered:not(:focus-within){--chip-hover-bg:var(--ic-action-light-bg-hover)}:host(.ic-chip-light-text) .chip.filled:focus-within{--chip-pressed-bg:var(--ic-action-light-bg-pressed)}.outlined{color:var(--ic-chip-outline-label);border-color:var(--chip-custom-color, var(--ic-chip-outline));padding:calc(var(--ic-space-xxs));--ic-typography-color:var(--ic-chip-outline-label)}.outlined.disabled{border:var(--ic-border-disabled);border-color:var(--ic-chip-outline-inactive)}.chip.disabled ic-typography{--ic-typography-color:var(--ic-chip-label-inactive)}.dismiss-icon{border:none;border-radius:50%;padding:0;color:currentcolor;background:none;cursor:pointer;margin:var(--ic-space-xxxs);height:calc(var(--ic-space-lg) - var(--ic-space-xxs));width:calc(var(--ic-space-lg) - var(--ic-space-xxs))}.dismiss-icon:focus{outline:var(--ic-hc-focus-outline)}.dismiss-icon[disabled]{pointer-events:none;color:var(--ic-chip-icon-inactive)}.icon{padding:var(--ic-space-xxxs);box-sizing:border-box}.icon,ic-tooltip{height:var(--ic-space-lg)}.chip.disabled path,.chip.disabled ::slotted(svg){fill:var(--ic-chip-icon-inactive)}.outlined.non-transparent{background-color:var(--ic-chip-outline-background)}:host .chip.hovered:not(:focus-within){background-image:linear-gradient(var(--chip-hover-bg) 0 0)}:host .chip:focus-within{background-image:linear-gradient(var(--chip-pressed-bg) 0 0)}.sr-only{position:absolute;left:-9999px}.sr-only:dir(rtl){right:-9999px}@media (forced-colors: active){.chip{border:var(--ic-border-hc)}.chip.disabled{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:GrayText}.chip.disabled ic-typography{--ic-typography-color:GrayText}.chip.disabled path,.chip.disabled ::slotted(svg){fill:GrayText}.chip:focus-within{outline:none;border-color:Highlight}}";
const IcChipStyle0 = icChipCss;

const Chip = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.icDismiss = index.createEvent(this, "icDismiss", 7);
        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 && helpers.convertToRGBA(this.customColor);
        if (!colorRGBA) {
            this.foregroundColor = null;
            return;
        }
        const { r, g, b, a } = colorRGBA;
        this.foregroundColor = helpers.getBrandForegroundAppearance((r * 299 + g * 587 + b * 114) / 1000);
        this.el.setAttribute("style", `--chip-custom-color: rgba(${r}, ${g}, ${b}, ${a});`);
    }
    watchDisabledHandler() {
        helpers.removeDisabledFalse(this.disabled, this.el);
    }
    disconnectedCallback() {
        var _a;
        (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
    }
    componentWillLoad() {
        helpers.removeDisabledFalse(this.disabled, this.el);
        this.customColorHandler();
    }
    componentDidLoad() {
        helpers.onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Chip");
        this.hostMutationObserver = new MutationObserver((mutationList) => helpers.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 (index.h(index.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 && (index.h("div", { key: '174e895e50479492d85f8a2d9871450f37d47997', class: {
                chip: true,
                [`${variant}`]: true,
                [`${size}`]: true,
                disabled,
                dismissible,
                hovered,
                "non-transparent": variant === "outlined" && !transparentBackground,
                "full-width": fullWidth,
            } }, helpers.isSlotUsed(this.el, "icon") && (index.h("div", { key: '3d12f1e7c932cd91f0835f3fe7c76ec6784bc44f', class: "icon" }, index.h("slot", { key: '5307ba63af7c7342cf32072ccebf02788265e0f5', name: "icon" }))), index.h("ic-typography", { key: 'e30c971835f38594a238e36d849fd1625aeb4e38', variant: "label", "apply-vertical-margins": false, class: {
                label: true,
                [`${size}`]: true,
                "in-ag-grid": helpers.isElInAGGrid(this.el),
            } }, index.h("span", { key: '40f476a368fbb16cee45b53c7de24d85b94a21a7' }, label)), dismissible && (index.h("ic-tooltip", { key: 'd8ff86e2c616f8233104b364bb8f698473c3448a', label: dismissLabel, target: "dismiss-icon", class: { "tooltip-disabled": disabled } }, index.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 }))), helpers.isSlotUsed(this.el, "badge") && index.h("slot", { key: 'd4f25acf6b19a63c9683d6aac41a04319cbea203', name: "badge" }))), dismissible && (index.h("div", { key: '6f5d1ad6395e82d3ec7cd588aa3944922e7a13de', class: "sr-only", "aria-live": "polite" }, !visible ? `Dismissed ${ariaLabel}` : ""))));
    }
    static get delegatesFocus() { return true; }
    get el() { return index.getElement(this); }
    static get watchers() { return {
        "customColor": ["customColorHandler"],
        "disabled": ["watchDisabledHandler"]
    }; }
};
Chip.style = IcChipStyle0;

exports.ic_chip = Chip;

//# sourceMappingURL=ic-chip.cjs.entry.js.map