import { __decorate } from '../node_modules/.pnpm/@rollup_plugin-typescript@12.3.0_rollup@4.60.1_tslib@2.8.1_typescript@6.0.2/node_modules/tslib/tslib.es6.js';
import { css, LitElement, html } from 'lit';
import { property, customElement } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { sharedStyles } from '../styles/shared-styles.js';
import { utilityStyles } from '../styles/utility-styles.js';
import { closeIcon } from '../icons/index.js';
import { createTranslator } from '@livepeer-frameworks/player-core';

let FwErrorOverlay = class FwErrorOverlay extends LitElement {
    constructor() {
        super(...arguments);
        this.error = null;
        this.isPassive = false;
        this._defaultTranslator = createTranslator({ locale: "en" });
    }
    get _t() {
        return this.translator ?? this._defaultTranslator;
    }
    render() {
        return html `
      <div
        role="alert"
        aria-live="assertive"
        class=${classMap({
            "fw-error-overlay": true,
            "fw-error-overlay--passive": this.isPassive,
            "fw-error-overlay--fullscreen": !this.isPassive,
        })}
      >
        <div
          class=${classMap({
            "fw-error-popup": true,
            "fw-error-popup--passive": this.isPassive,
            "fw-error-popup--fullscreen": !this.isPassive,
        })}
        >
          <div
            class=${classMap({
            "fw-error-header": true,
            "fw-error-header--warning": this.isPassive,
            "fw-error-header--error": !this.isPassive,
        })}
          >
            <span
              class=${classMap({
            "fw-error-title": true,
            "fw-error-title--warning": this.isPassive,
            "fw-error-title--error": !this.isPassive,
        })}
              >${this.isPassive ? this._t("warning") : this._t("error")}</span
            >
            <button
              type="button"
              class="fw-error-close"
              @click=${this._clearError}
              aria-label=${this._t("dismiss")}
            >
              ${closeIcon()}
            </button>
          </div>
          <div class="fw-error-body">
            <p class="fw-error-message">${this.error || this._t("playbackIssue")}</p>
          </div>
          <div class="fw-error-actions">
            <button
              type="button"
              class="fw-error-btn"
              aria-label=${this._t("retry")}
              @click=${this._retry}
            >
              ${this._t("retry")}
            </button>
          </div>
        </div>
      </div>
    `;
    }
    _clearError() {
        this.dispatchEvent(new CustomEvent("fw-clear-error", { bubbles: true, composed: true }));
    }
    _retry() {
        this.dispatchEvent(new CustomEvent("fw-retry", { bubbles: true, composed: true }));
    }
};
FwErrorOverlay.styles = [
    sharedStyles,
    utilityStyles,
    css `
      :host {
        display: contents;
      }
    `,
];
__decorate([
    property({ type: String })
], FwErrorOverlay.prototype, "error", void 0);
__decorate([
    property({ type: Boolean, attribute: "is-passive" })
], FwErrorOverlay.prototype, "isPassive", void 0);
__decorate([
    property({ attribute: false })
], FwErrorOverlay.prototype, "translator", void 0);
FwErrorOverlay = __decorate([
    customElement("fw-error-overlay")
], FwErrorOverlay);

export { FwErrorOverlay };
//# sourceMappingURL=fw-error-overlay.js.map
