'use strict';

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

const index = require('./index-0b1e2673.js');
require('./_commonjsHelpers-937cd5b3.js');
const index$1 = require('./index-1a9e1965.js');

const styleCss = ".sc-smoothly-dialog-h{display:block;position:fixed;left:0;top:0;width:100%;height:100%;z-index:1;background:rgba(var(--smoothly-default-color), var(--smoothly-semitransparent)) !important}[hidden].sc-smoothly-dialog-h{display:none}.sc-smoothly-dialog-h>header.sc-smoothly-dialog{border-top-left-radius:8px;border-top-right-radius:8px;margin-top:2em;color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-color))}.sc-smoothly-dialog-h>*.sc-smoothly-dialog{position:relative;color:rgb(var(--smoothly-default-contrast));background-color:rgb(var(--smoothly-default-color));border-color:rgb(var(--smoothly-color));border-width:1px;border-style:solid;max-width:40em;width:calc(100vw - 4em - 2px);max-height:calc(100vh - 6em - 2px);height:auto;margin-left:auto;margin-right:auto;border-collapse:collapse}.sc-smoothly-dialog-h>main.sc-smoothly-dialog{border-bottom-left-radius:8px;border-bottom-right-radius:8px;margin-bottom:2em}.sc-smoothly-dialog-h>*.sc-smoothly-dialog>smoothly-trigger.sc-smoothly-dialog{position:absolute;right:-2em;top:-2em;z-index:1}.sc-smoothly-dialog-h>*.sc-smoothly-dialog>*.sc-smoothly-dialog{margin:10px}";

const SmoothlyDialog = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.open = true;
    this.closable = false;
  }
  TriggerListener(event) {
    if (index$1.Trigger.is(event.detail) && event.detail.name == "close")
      this.open = false;
  }
  hostData() {
    return {
      style: {
        display: this.open ? "block" : "none",
      },
    };
  }
  __stencil_render() {
    return [
      index.h("header", null, this.closable ? (index.h("smoothly-trigger", { fill: "clear", name: "close" }, index.h("smoothly-icon", { name: "close-circle", fill: "solid", color: this.color }))) : ([]), this.header ? index.h("h1", null, this.header) : index.h("slot", { name: "header" })),
      index.h("main", null, index.h("slot", null)),
    ];
  }
  render() { return index.h(index.Host, this.hostData(), this.__stencil_render()); }
};
SmoothlyDialog.style = styleCss;

exports.smoothly_dialog = SmoothlyDialog;
