'use strict';

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

const index = require('./index-51e8292e.js');

const sidebarCss = "sparkle-sidebar{--sparkle-spacing-size-lg:1rem;--sparkle-transition-med:0.5s;--sparkle-color-dark-lighter:89, 109, 127;--sparkle-font-size-md:1.25rem;--sparkle-spacing-size-none:0;--sparkle-spacing-size-xxxs:0.0625rem;--sparkle-color-light-base:1197, 209, 218;--sparkle-font-size-lg:1.5rem;--sparkle-color-dark-base:55, 68, 79}.sparkle-sidebar{height:100%;max-width:90%;position:fixed;top:0;bottom:0;overflow-x:hidden;overflow-y:auto;background-color:#fff;padding:var(--sparkle-spacing-size-lg);-webkit-transition:all var(--sparkle-transition-med) ease-in-out;transition:all var(--sparkle-transition-med) ease-in-out}.sparkle-sidebar.left{border-right:var(--sparkle-spacing-size-xxxs) solid rgba(var(--sparkle-color-dark-lighter), 1)}.sparkle-sidebar.left.size-sm{width:16rem;left:-16rem}.sparkle-sidebar.left.size-md{width:22.5rem;left:-22.5rem}.sparkle-sidebar.left.size-lg{width:30rem;left:-30rem}.sparkle-sidebar.left.size-xl{width:45rem;left:-45rem}.sparkle-sidebar.left.show{visibility:visible;left:0}.sparkle-sidebar.right{border-right:var(--sparkle-spacing-size-xxxs) solid rgba(var(--sparkle-color-dark-lighter), 1)}.sparkle-sidebar.right.size-sm{width:16rem;right:-16rem}.sparkle-sidebar.right.size-md{width:22.5rem;right:-22.5rem}.sparkle-sidebar.right.size-lg{width:30rem;right:-30rem}.sparkle-sidebar.right.size-xl{width:45rem;right:-45rem}.sparkle-sidebar.right.show{visibility:visible;right:0}.sparkle-sidebar .drawer-header{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-line-pack:center;align-content:center;border-bottom:var(--sparkle-spacing-size-xxxs) solid rgba(var(--sparkle-color-light-base), 1);font-size:var(--sparkle-font-size-lg);color:rgba(var(--sparkle-color-dark-base), 1)}.sparkle-sidebar .drawer-header .drawer-title{line-height:1}.sparkle-sidebar .drawer-header .drawer-close .ks-button .button{padding:var(--sparkle-spacing-size-none)}.sparkle-sidebar .drawer-header .drawer-close .ks-button .button .button-text{display:-ms-inline-flexbox;display:inline-flex}.sparkle-sidebar .drawer-header .drawer-close .ks-button .button .icon{font-size:var(--sparkle-font-size-md)}.sparkle-sidebar .drawer-body{padding-top:var(--sparkle-spacing-size-lg);padding-bottom:var(--sparkle-spacing-size-lg)}";

const SparkleSideBar = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.position = 'left';
    this.size = 'sm';
  }
  async hide() {
    this.isShowing = false;
    await this.$overlay.hide();
  }
  async show() {
    await this.$overlay.show();
    this.isShowing = true;
  }
  componentDidRender() {
    const $scrim = this.$overlay.querySelector('.scrim');
    $scrim.addEventListener('click', () => this.hide());
  }
  overlayHiddenHandler() {
    this.isShowing = false;
  }
  render() {
    let classes = {
      'sparkle-sidebar': true,
      [`size-${this.size}`]: true,
      [this.position]: true,
      'show': this.isShowing
    };
    return (index.h("sparkle-overlay", { onHidden: () => this.overlayHiddenHandler(), ref: el => this.$overlay = el }, index.h("aside", { class: classes, ref: el => this.$drawer = el }, index.h("header", { class: "drawer-header" }, index.h("h3", { class: "drawer-title" }, this.headerText), index.h("ion-button", { onClick: () => this.hide(), class: "drawer-close", color: "dark" }, index.h("ion-icon", { name: "close-outline" }))), index.h("div", { class: "drawer-body" }, index.h("slot", null)))));
  }
  get $el() { return index.getElement(this); }
};
SparkleSideBar.style = sidebarCss;

exports.sparkle_sidebar = SparkleSideBar;
