import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { g as getIconPath } from './mer-animated-dots.js';
import 'lit';
import 'lit/directives/when.js';
import 'lit/directives/if-defined.js';

const progressBarCss = ":host{--top-bar-progress:0%;display:grid;grid-template-rows:0fr;transition:var(--timing-fast) grid-template-rows;overflow:hidden;--ds-icon-size-box--small:var(--font-size-body-s);--ds-icon-size--small:100%}:host>*{overflow:hidden}:host(.disable-transition){--progress-bar-transition-speed:0 !important}:host(.visible){grid-template-rows:1fr}.top-state-bar{position:relative;display:flex;flex-direction:column;gap:var(--spacing-gap-l);border-radius:4px;list-style:var(--font-size-body-s);display:flex;}.top-state-bar>*{position:relative;z-index:1}.top-state-bar__outer-wrapper{position:relative;flex:1;display:flex;flex-direction:column;gap:var(--spacing-gap-l);padding:var(--spacing-padding-l) var(--spacing-padding-l)}.top-state-bar__outer-wrapper::after,.top-state-bar__outer-wrapper::before{border-radius:4px}.top-state-bar__outer-wrapper::before{content:\"\";inline-size:100%;block-size:100%;inset-inline-start:0;inset-block-start:0;position:absolute;background-color:var(--color-accent-surface-elevation-3);z-index:0}.top-state-bar__outer-wrapper::after{content:\"\";inset-inline-start:1px;inset-block-start:1px;inline-size:calc(100% - 1px * 2);block-size:calc(100% - 1px * 2);position:absolute;background-color:var(--color-accent-surface-surface);z-index:1}.top-state-bar__inner-wrapper{flex:1;display:flex;flex-direction:row;justify-content:space-between;gap:var(--spacing-gap-m);position:relative;z-index:2}.top-state-bar__caption{color:var(--color-text-neutral-strawberry);font-size:var(--font-size-body-s);line-height:var(--font-size-body-s);font-weight:var(--font-style-regular);display:flex;align-items:center;font-style:italic}.top-state-bar__progress-wrapper{block-size:4px;background-color:var(--color-accent-surface-elevation-1);position:relative;z-index:2}.top-state-bar__close{cursor:pointer;transition:var(--timing-fast) background-color}.top-state-bar__inner-wrapper,.top-state-bar__progress-wrapper,.top-state-bar__close{opacity:0;transition:150ms opacity}.top-state-bar--accent .progress-bar{background-color:var(--color-accent-primary-default)}.top-state-bar--success .progress-bar{background-color:var(--color-border-success-default)}.top-state-bar--warning .progress-bar{background-color:var(--color-border-warning-default)}.top-state-bar--error .progress-bar{background-color:var(--color-border-error-default)}.top-state-bar--in-progress .top-state-bar__outer-wrapper:before{block-size:0;inline-size:120%;padding-block-start:60%;padding-block-end:60%;background:linear-gradient(90deg, rgba(91, 167, 255, 0.4) 0%, rgba(63, 168, 155, 0.4) 100%);inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%, -50%);-webkit-animation:inProgressBackgroundColor 1s linear infinite;animation:inProgressBackgroundColor 1s linear infinite}.top-state-bar--in-progress .progress-bar{position:relative;overflow:hidden;z-index:1}.top-state-bar--in-progress .progress-bar:after{content:\"\";position:absolute;z-index:0;inline-size:300%;block-size:100%;inset-inline-start:0;background:linear-gradient(90deg, #93f5eb 0%, #1aa3ff 33%, #93f5eb 66%, #1aa3ff 100%);animation-name:inProgressBar;animation-duration:2s;animation-iteration-count:infinite}.top-state-bar--visible .top-state-bar__inner-wrapper,.top-state-bar--visible .top-state-bar__progress-wrapper,.top-state-bar--visible .top-state-bar__close{opacity:1}.top-state-bar--visible .top-state-bar__close:hover{opacity:0.75}.top-state-bar--visible .top-state-bar__close:active{opacity:0.5}:host(.with-close-button) .top-state-bar__outer-wrapper{padding-block-start:4px;gap:var(--spacing-gap-xs)}@-webkit-keyframes inProgressBackgroundColor{0%{transform:translate(-50%, -50%) rotate(0)}100%{transform:translate(-50%, -50%) rotate(1turn)}}@-webkit-keyframes inProgressBar{0%{inset-inline-start:0%}100%{inset-inline-start:-200%}}@-moz-keyframes inProgressBar{0%{inset-inline-start:0%}100%{inset-inline-start:200%}}@keyframes inProgressBar{0%{inset-inline-start:0%}100%{inset-inline-start:-200%}}.progress-bar{display:block;transition:all var(--progress-bar-transition-speed);inline-size:var(--top-bar-progress);border-radius:calc(4px / 2);block-size:100%}:host(.no-border) .top-state-bar__outer-wrapper:before,:host(.border-block-start) .top-state-bar__outer-wrapper:before,:host(.border-block-end) .top-state-bar__outer-wrapper:before{display:none}:host(.border-block-start) .top-state-bar__outer-wrapper{border-block-start:1px solid var(--color-border-surface-on-elevation-1)}:host(.border-block-end) .top-state-bar__outer-wrapper{border-block-end:1px solid var(--color-border-surface-on-elevation-1)}";

const CSS_BUNDLES = [
    "resets/box-sizing",
    "utils/form",
    "utils/layout",
    "utils/typography",
    "components/button",
    "components/icon",
    "components/combo-box",
    "components/edit",
    "components/tabular-grid"
];
const CLOSE_ICON = getIconPath({
    category: "system",
    name: "close",
    colorType: "primary"
});
const PROGRESS_TRANSITION_SPEED = 200;
const GxIdeProgressBar = /*@__PURE__*/ proxyCustomElement(class GxIdeProgressBar extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.progressBarClosed = createEvent(this, "progressBarClosed", 7);
        this.evaluateInitialProgress = () => {
            if (this.progress === undefined &&
                (this.stateType === "error" ||
                    this.stateType === "warning" ||
                    this.stateType === "success")) {
                this.progress = 100;
            }
            else if (this.progress === undefined &&
                this.stateType === "in-progress") {
                this.progress = 0;
            }
            this.el.style.setProperty("--top-bar-progress", `${this.progress}%`);
        };
        this.closeClickHandler = () => {
            this.active = false;
            this.closedCallback();
        };
        this.renderClose = () => {
            return (this.closeType === "button" && (h("button", { class: "button-tertiary button-icon-only", "aria-label": "close", onClick: this.closeClickHandler, role: "button", tabIndex: this.visible ? 0 : -1 }, h("ch-image", { src: CLOSE_ICON, class: "icon-m" }))));
        };
        this.topStateBarVisible = false;
        this.disableTransition = false;
        this.visible = false;
        this.caption = undefined;
        this.minimal = false;
        this.active = false;
        this.stateType = "in-progress";
        this.progress = undefined;
        this.closeType = "button";
        this.closedCallback = () => { };
    }
    watchActiveHandler(active) {
        if (active) {
            this.visible = true;
            setTimeout(() => {
                this.topStateBarVisible = true;
            }, 300);
        }
        else {
            this.topStateBarVisible = false;
            setTimeout(() => {
                this.visible = false;
                this.el.style.setProperty("--top-bar-progress", `0%`);
                this.progressBarClosed.emit();
            }, 300);
        }
    }
    watchProgressHandler(progress) {
        if (progress >= 0 && progress <= 100) {
            this.el.style.setProperty("--top-bar-progress", `${progress}%`);
        }
        if (progress === 100 && this.closeType === "auto-close") {
            setTimeout(() => {
                this.active = false;
            }, 200);
        }
    }
    componentWillLoad() {
        this.evaluateInitialProgress();
        if (this.active) {
            this.visible = true;
            this.topStateBarVisible = true;
        }
    }
    /**
     * Sets the progress bar to zero instantly (no transition) and changes the type
     * to 'accent'. Useful when reusing the progress bar for a new process.
     */
    async reset() {
        // Resetting involves setting the progress to zero. In this case it is preferable
        // to disable the transition.
        this.disableTransition = true;
        this.progress = 0;
        this.stateType = "accent";
        setTimeout(() => {
            this.disableTransition = false; // enable transition for the nex process.
        }, PROGRESS_TRANSITION_SPEED);
    }
    render() {
        return (h(Host, { class: {
                "visible": this.visible,
                "with-close-button": this.closeType === "button",
                "disable-transition": this.disableTransition
            }, "aria-hidden": !this.active, style: {
                "--progress-bar-transition-speed": `${PROGRESS_TRANSITION_SPEED}ms`
            } }, h("ch-theme", { model: CSS_BUNDLES }), h("div", { role: "status", "aria-labelledby": "label", "aria-hidden": !this.active, class: {
                "top-state-bar": true,
                [`top-state-bar--${this.stateType}`]: true,
                "top-state-bar--visible": this.topStateBarVisible
            } }, h("div", { class: "top-state-bar__outer-wrapper" }, !this.minimal ? (h("div", { class: "top-state-bar__inner-wrapper" }, h("label", { id: "label", class: {
                "top-state-bar__caption": true
            }, part: "label" }, this.caption), this.renderClose())) : null, h("div", { class: {
                "top-state-bar__progress-wrapper": true
            }, part: "progress-wrapper" }, h("span", { class: "progress-bar" }))))));
    }
    static get assetsDirs() { return ["gx-ide-assets/progress-bar"]; }
    get el() { return this; }
    static get watchers() { return {
        "active": ["watchActiveHandler"],
        "progress": ["watchProgressHandler"]
    }; }
    static get style() { return progressBarCss; }
}, [1, "gx-ide-progress-bar", {
        "caption": [1],
        "minimal": [516],
        "active": [1028],
        "stateType": [1025, "state-type"],
        "progress": [1026],
        "closeType": [1, "close-type"],
        "closedCallback": [16],
        "topStateBarVisible": [32],
        "disableTransition": [32],
        "visible": [32],
        "reset": [64]
    }, undefined, {
        "active": ["watchActiveHandler"],
        "progress": ["watchProgressHandler"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["gx-ide-progress-bar"];
    components.forEach(tagName => { switch (tagName) {
        case "gx-ide-progress-bar":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, GxIdeProgressBar);
            }
            break;
    } });
}

export { GxIdeProgressBar as G, defineCustomElement as d };

//# sourceMappingURL=progress-bar.js.map