@things-factory/layout-ui 5.0.0-zeta.7 → 5.0.0

package/client/themes/layout-theme.css

@@ -1,7 +1,7 @@
 body {
   --header-bar-background-color: var(--secondary-color);
   --header-bar-icon-size: var(--icon-default-size);
-  --header-bar-title: bold 16px var(--theme-font);
+  --header-bar-title: bold 17.5px var(--theme-font);
   --header-bar-color: #fff;
   --header-bar-height: 45px;
   --header-bar-item-padding: 0px 5px 0 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/layout-ui",
-  "version": "5.0.0-zeta.7",
+  "version": "5.0.0",
   "main": "dist-server/index.js",
   "browser": "client/index.js",
   "things-factory": true,
@@ -24,8 +24,8 @@
     "migration:create": "node ../../node_modules/typeorm/cli.js migration:create -d ./server/migrations"
   },
   "dependencies": {
-    "@operato/help": "1.0.0-beta.38",
-    "@things-factory/layout-base": "^5.0.0-zeta.7"
+    "@operato/help": "^1.0.0",
+    "@operato/layout": "^1.0.0"
   },
-  "gitHead": "e9618dfd6077ba14ebbca0ffb123a5a82660697b"
+  "gitHead": "32cb91663e38de9ab1bb7a72af923c3bf8ac187b"
 }

package/client/components/floating-overlay.js

@@ -1,324 +0,0 @@
-import '@operato/help/ox-help-icon.js'
-import '@material/mwc-icon'
-
-import { css, html, LitElement } from 'lit'
-
-import { ScrollbarStyles } from '@things-factory/styles'
-
-class FloatingOverlay extends LitElement {
-  static get properties() {
-    return {
-      backdrop: Boolean,
-      direction: String,
-      hovering: { type: String, reflect: true },
-      size: String,
-      name: String,
-      title: String,
-      closable: Boolean,
-      templateProperties: Object,
-      help: Object
-    }
-  }
-
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        /* for layout style */
-        :host {
-          position: relative;
-          z-index: 1;
-        }
-
-        :host([hovering='edge']) {
-          /* edge hovering 인 경우에는 상위 relative position 크기와 위치를 반영한다. */
-          position: initial;
-        }
-
-        #backdrop {
-          position: fixed;
-          left: 0;
-          top: 0;
-
-          width: 100vw;
-          height: 100vh;
-
-          background-color: var(--overlay-background-color);
-        }
-
-        [overlayed] {
-          position: absolute;
-
-          display: flex;
-          flex-direction: column;
-          overflow: hidden;
-          background: transparent;
-          pointer-events: none;
-        }
-
-        [overlayed][hovering='center'] {
-          position: fixed;
-
-          left: 50%;
-          top: 50%;
-          transform: translate(-50%, -50%);
-
-          opacity: 0;
-        }
-
-        [overlayed][hovering='center'][opened] {
-          opacity: 1;
-          transition: opacity 0.3s ease-in;
-        }
-
-        [hovering='center'] {
-          width: var(--overlay-center-normal-width, 60%);
-          height: var(--overlay-center-normal-height, 60%);
-        }
-
-        [hovering='center'][size='small'] {
-          width: var(--overlay-center-small-width, 40%);
-          height: var(--overlay-center-small-height, 40%);
-        }
-
-        [hovering='center'][size='large'] {
-          width: var(--overlay-center-large-width, 100%);
-          height: var(--overlay-center-large-height, 100%);
-        }
-
-        [header] {
-          --help-icon-color: #fff;
-          --help-icon-hover-color: #fff;
-
-          pointer-events: initial;
-        }
-
-        [content] {
-          flex: 1;
-
-          overflow: hidden;
-        }
-
-        ::slotted(*) {
-          box-sizing: border-box;
-          pointer-events: initial;
-        }
-
-        [hovering='center'] [content] ::slotted(*) {
-          width: 100%;
-          height: 100%;
-        }
-        [direction='up'],
-        [direction='down'] {
-          width: 100%;
-
-          max-height: 0;
-          transition: max-height 0.7s ease-in;
-        }
-        [direction='up'] {
-          bottom: 0;
-        }
-        [direction='down'] {
-          top: 0;
-        }
-
-        [direction='up'][opened],
-        [direction='down'][opened] {
-          max-height: 100vh;
-        }
-
-        [settled][direction='down'] [content],
-        [settled][direction='up'] [content] {
-          overflow-y: auto;
-        }
-
-        [direction='left'],
-        [direction='right'] {
-          height: 100%;
-
-          max-width: 0;
-          transition: max-width 0.5s ease-in;
-        }
-        [direction='left'] {
-          right: 0;
-        }
-        [direction='right'] {
-          left: 0;
-        }
-
-        [direction='left'][opened],
-        [direction='right'][opened] {
-          max-width: 100vw;
-        }
-
-        [settled][direction='left'] [content],
-        [settled][direction='right'] [content] {
-          overflow-x: auto;
-        }
-
-        @media screen and (max-width: 460px) {
-          [direction='up'],
-          [direction='down'] {
-            max-height: 100vh;
-          }
-
-          [direction='left'],
-          [direction='right'] {
-            max-width: 100vw;
-          }
-        }
-      `,
-      css`
-        /* for header style */
-        [header] {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-
-          background-color: var(--overlay-header-background-color);
-          color: var(--overlay-header-color);
-        }
-
-        slot[name='header'] {
-          flex: 1;
-
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          justify-content: center;
-        }
-
-        [name='header']::slotted(*) {
-          margin: 0 auto;
-        }
-
-        [name='header'] > h1 {
-          text-transform: capitalize;
-          font: var(--overlay-header-font);
-        }
-
-        [historyback] {
-          margin-left: 10px;
-          margin-right: auto;
-        }
-
-        [close] {
-          margin-left: auto;
-          margin-right: 10px;
-        }
-
-        [historyback],
-        [close] {
-          display: none;
-        }
-
-        [closable][close] {
-          display: block;
-        }
-
-        @media screen and (max-width: 460px) {
-          [closable][historyback] {
-            display: block;
-          }
-
-          [closable][close] {
-            display: none;
-          }
-        }
-      `
-    ]
-  }
-
-  render() {
-    var direction = this.hovering == 'center' ? false : this.direction
-
-    return html`
-      ${Boolean(this.backdrop)
-        ? html` <div id="backdrop" ?hidden=${!this.backdrop} @click=${e => this.onClose(true)}></div> `
-        : html``}
-
-      <div
-        overlayed
-        hovering=${this.hovering || 'center'}
-        direction=${direction}
-        size=${this.size || 'normal'}
-        @close-overlay=${e => this.onClose()}
-        @transitionstart=${e => {
-          /* to hide scrollbar during transition */
-          e.target.removeAttribute('settled', '')
-        }}
-        @transitionend=${e => {
-          e.target.setAttribute('settled', '')
-        }}
-      >
-        <div header>
-          <mwc-icon @click=${e => this.onClose()} ?closable=${this.closable} historyback>arrow_back</mwc-icon>
-          <slot name="header">
-            ${this.title || this.closable
-              ? html`
-                  <h1>
-                    ${this.title || ''}&nbsp;${this.help
-                      ? html` <ox-help-icon .topic=${this.help}></ox-help-icon>`
-                      : html``}
-                  </h1>
-                `
-              : html``}</slot
-          >
-          <mwc-icon @click=${e => this.onClose()} ?closable=${this.closable} close>close</mwc-icon>
-        </div>
-
-        <div content>
-          <slot> </slot>
-        </div>
-      </div>
-    `
-  }
-
-  updated(changed) {
-    if (changed.has('templateProperties') && this.templateProperties) {
-      var template = this.firstElementChild
-      if (template) {
-        for (let prop in this.templateProperties) {
-          template[prop] = this.templateProperties[prop]
-        }
-      }
-    }
-  }
-
-  firstUpdated() {
-    requestAnimationFrame(() => {
-      /* transition(animation) 효과를 위해 'opened' 속성을 변화시킨다. */
-      this.shadowRoot.querySelector('[overlayed]').setAttribute('opened', 'true')
-    })
-  }
-
-  disconnectedCallback() {
-    document.dispatchEvent(
-      new CustomEvent('overlay-closed', {
-        detail: this.name
-      })
-    )
-
-    super.disconnectedCallback()
-  }
-
-  onClose(escape) {
-    /* 현재 overlay state를 확인해서, 자신이 포함하고 있는 템플릿인 경우에 history.back() 한다. */
-
-    var state = history.state
-    var overlay = (state || {}).overlay
-
-    if (!overlay || overlay.name !== this.name) {
-      return
-    }
-
-    /* Backdrop click 경우는 escape 시도라고 정의한다. overlay 속성이 escapable이 아닌 경우에는 동작하지 않는다. */
-    if (escape && !overlay.escapable) {
-      return true
-    }
-
-    history.back()
-  }
-}
-
-customElements.define('floating-overlay', FloatingOverlay)

package/client/components/resize-splitter.js

@@ -1,128 +0,0 @@
-import { LitElement, html, css } from 'lit'
-
-export class ResizeSplitter extends LitElement {
-  static get dragImage() {
-    if (!ResizeSplitter._dragImage) {
-      ResizeSplitter._dragImage = new Image()
-      ResizeSplitter._dragImage.src =
-        'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='
-    }
-    return ResizeSplitter._dragImage
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        position: relative;
-        opacity: 0.7;
-        background-color: var(--splitter-background-color);
-      }
-
-      :host(:hover) {
-        background-color: var(--splitter-hover-background-color);
-      }
-
-      div {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-      }
-    `
-  }
-
-  static get properties() {
-    return {}
-  }
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    if (this.hasAttribute('vertical')) {
-      this.style.width = '3px'
-      this.style.height = '100%'
-      this.style.cursor = 'col-resize'
-    } else {
-      this.style.width = '100%'
-      this.style.height = '3px'
-      this.style.cursor = 'row-resize'
-    }
-  }
-
-  render() {
-    return html`
-      <div
-        draggable="true"
-        @dragstart=${e => this._onDragStart(e)}
-        @drag=${this._throttled(100, this._onDrag.bind(this))}
-        @dragend=${e => this._onDragEnd(e)}
-      ></div>
-    `
-  }
-
-  // TODO onDrag 이벤트가 계속 발생하므로 처리하는 성능 저하됨. 그래서 throttling 하도록 함
-  _throttled(delay, fn) {
-    let lastCall = 0
-    return function (...args) {
-      const now = new Date().getTime()
-      if (now - lastCall < delay) {
-        return
-      }
-      lastCall = now
-      return fn(...args)
-    }
-  }
-
-  _onDragStart(e) {
-    e.dataTransfer.setDragImage(ResizeSplitter.dragImage, 0, 0)
-
-    this.dragstart = {
-      x: e.clientX,
-      y: e.clientY
-    }
-
-    this.dispatchEvent(
-      new CustomEvent('splitter-dragstart', {
-        bubbles: true,
-        composed: true
-      })
-    )
-
-    e.stopPropagation()
-  }
-
-  _onDrag(e) {
-    if (e.clientX == 0) {
-      return
-    }
-
-    this.dispatchEvent(
-      new CustomEvent('splitter-drag', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          x: e.clientX - this.dragstart.x,
-          y: e.clientY - this.dragstart.y
-        }
-      })
-    )
-
-    e.stopPropagation()
-  }
-
-  _onDragEnd(e) {
-    this.dispatchEvent(
-      new CustomEvent('splitter-dragend', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          x: e.clientX - this.dragstart.x,
-          y: e.clientY - this.dragstart.y
-        }
-      })
-    )
-
-    e.stopPropagation()
-  }
-}
-
-customElements.define('resize-splitter', ResizeSplitter)

package/client/layouts/aside-bar.js

@@ -1,111 +0,0 @@
-import { LitElement, html, css } from 'lit'
-
-import { connect } from 'pwa-helpers/connect-mixin.js'
-import { store } from '@things-factory/shell'
-import { ScrollbarStyles } from '@things-factory/styles'
-import { VIEWPART_LEVEL } from '@things-factory/layout-base'
-
-import '../components/floating-overlay'
-import '../components/resize-splitter'
-
-class AsideBar extends connect(store)(LitElement) {
-  static get properties() {
-    return {
-      viewparts: Array,
-      fullbleed: {
-        attribute: 'fullbleed',
-        type: Boolean
-      }
-    }
-  }
-
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-flow: row-reverse nowrap;
-          align-items: stretch;
-
-          position: relative;
-        }
-
-        *[asidebar] {
-          display: block;
-          overflow-y: auto;
-        }
-      `
-    ]
-  }
-
-  render() {
-    var viewparts = this.viewparts
-    var asidebars = Object.keys(viewparts)
-      .map(name => {
-        return {
-          name,
-          ...viewparts[name]
-        }
-      })
-      .filter(viewpart => viewpart.position == 'asidebar' && (!this.fullbleed || viewpart.hovering))
-
-    asidebars = [
-      ...asidebars.filter(viewpart => viewpart.level == VIEWPART_LEVEL.TOPMOST),
-      ...asidebars.filter(viewpart => viewpart.level !== VIEWPART_LEVEL.TOPMOST)
-    ]
-
-    return html`
-      ${asidebars.map(asidebar =>
-        !asidebar.show
-          ? html``
-          : asidebar.hovering
-          ? html`
-              <floating-overlay
-                .backdrop=${asidebar.backdrop}
-                direction="left"
-                .hovering=${asidebar.hovering}
-                .name=${asidebar.name}
-                .size=${asidebar.size}
-                .title=${asidebar.title}
-                .help=${asidebar.help}
-                .closable=${asidebar.closable}
-                .templateProperties=${asidebar.templateProperties}
-                >${asidebar.template}</floating-overlay
-              >
-            `
-          : html`
-              <div asidebar>${asidebar.template}</div>
-              ${asidebar.resizable
-                ? html`
-                    <resize-splitter
-                      @splitter-dragstart=${e => this.resizeStart(e)}
-                      @splitter-drag=${e => this.resizeDrag(e)}
-                      vertical
-                    ></resize-splitter>
-                  `
-                : html``}
-            `
-      )}
-    `
-  }
-
-  resizeStart(e) {
-    this._startWidth = e.target.previousElementSibling.offsetWidth
-  }
-
-  resizeDrag(e) {
-    var delta = e.detail
-
-    var x = e.target.previousElementSibling.querySelectorAll('*')
-    Array.from(x).forEach(ele => {
-      ele.style.width = `${this._startWidth - delta.x}px`
-    })
-  }
-
-  stateChanged(state) {
-    this.viewparts = state.layout.viewparts || {}
-  }
-}
-
-customElements.define('aside-bar', AsideBar)

package/client/layouts/footer-bar.js

@@ -1,111 +0,0 @@
-import { store } from '@things-factory/shell'
-import { css, html, LitElement } from 'lit'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-import { VIEWPART_LEVEL } from '@things-factory/layout-base'
-
-import '../components/floating-overlay'
-import '../components/resize-splitter'
-
-class FooterBar extends connect(store)(LitElement) {
-  static get properties() {
-    return {
-      viewparts: Array,
-      fullbleed: {
-        attribute: 'fullbleed',
-        type: Boolean
-      }
-    }
-  }
-
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          flex-flow: column-reverse nowrap;
-          align-items: stretch;
-          position: relative;
-        }
-
-        *[footerbar] {
-          display: block;
-        }
-
-        @media screen and (max-width: 460px) {
-          :host {
-            padding-bottom: 0;
-          }
-        }
-      `
-    ]
-  }
-
-  render() {
-    var viewparts = this.viewparts
-    var footerbars = Object.keys(viewparts)
-      .map(name => {
-        return {
-          name,
-          ...viewparts[name]
-        }
-      })
-      .filter(viewpart => viewpart.position == 'footerbar' && (!this.fullbleed || viewpart.hovering))
-
-    footerbars = [
-      ...footerbars.filter(viewpart => viewpart.level == VIEWPART_LEVEL.TOPMOST),
-      ...footerbars.filter(viewpart => viewpart.level !== VIEWPART_LEVEL.TOPMOST)
-    ]
-
-    return html`
-      ${footerbars.map(footerbar =>
-        !footerbar.show
-          ? html``
-          : footerbar.hovering
-          ? html`
-              <floating-overlay
-                .backdrop=${footerbar.backdrop}
-                direction="up"
-                .hovering=${footerbar.hovering}
-                .name=${footerbar.name}
-                .title=${footerbar.title}
-                .help=${footerbar.help}
-                .size=${footerbar.size}
-                .closable=${footerbar.closable}
-                .templateProperties=${footerbar.templateProperties}
-                >${footerbar.template}</floating-overlay
-              >
-            `
-          : html`
-              <div footerbar>${footerbar.template}</div>
-              ${footerbar.resizable
-                ? html`
-                    <resize-splitter
-                      @splitter-dragstart=${e => this.resizeStart(e)}
-                      @splitter-drag=${e => this.resizeDrag(e)}
-                    ></resize-splitter>
-                  `
-                : html``}
-            `
-      )}
-    `
-  }
-
-  resizeStart(e) {
-    this._startHeight = e.target.previousElementSibling.offsetHeight
-  }
-
-  resizeDrag(e) {
-    var delta = e.detail
-
-    var x = e.target.previousElementSibling.querySelectorAll('*')
-    Array.from(x).forEach(ele => {
-      ele.style.height = `${this._startHeight - delta.y}px`
-    })
-  }
-
-  stateChanged(state) {
-    this.viewparts = state.layout.viewparts || {}
-  }
-}
-
-customElements.define('footer-bar', FooterBar)

package/client/layouts/header-bar.js

@@ -1,109 +0,0 @@
-import { LitElement, html, css } from 'lit'
-
-import { connect } from 'pwa-helpers/connect-mixin.js'
-import { store } from '@things-factory/shell'
-import { VIEWPART_LEVEL } from '@things-factory/layout-base'
-
-import '../components/floating-overlay'
-import '../components/resize-splitter'
-
-class HeaderBar extends connect(store)(LitElement) {
-  static get properties() {
-    return {
-      viewparts: Array,
-      fullbleed: {
-        attribute: 'fullbleed',
-        type: Boolean
-      }
-    }
-  }
-
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          flex-flow: column nowrap;
-          align-items: stretch;
-
-          position: relative;
-
-          background-color: var(--header-bar-background-color);
-        }
-
-        *[headerbar] {
-          display: block;
-        }
-      `
-    ]
-  }
-
-  render() {
-    var viewparts = this.viewparts
-    var headerbars = Object.keys(viewparts)
-      .map(name => {
-        return {
-          name,
-          ...viewparts[name]
-        }
-      })
-      .filter(viewpart => viewpart.position == 'headerbar' && (!this.fullbleed || viewpart.hovering))
-
-    headerbars = [
-      ...headerbars.filter(viewpart => viewpart.level == VIEWPART_LEVEL.TOPMOST),
-      ...headerbars.filter(viewpart => viewpart.level !== VIEWPART_LEVEL.TOPMOST)
-    ]
-
-    return html`
-      ${headerbars.map(headerbar =>
-        !headerbar.show
-          ? html``
-          : headerbar.hovering
-          ? html`
-              <floating-overlay
-                .backdrop=${headerbar.backdrop}
-                direction="down"
-                .hovering=${headerbar.hovering}
-                .name=${headerbar.name}
-                .title=${headerbar.title}
-                .help=${headerbar.help}
-                .size=${headerbar.size}
-                .closable=${headerbar.closable}
-                .templateProperties=${headerbar.templateProperties}
-                >${headerbar.template}</floating-overlay
-              >
-            `
-          : html`
-              <div headerbar>${headerbar.template}</div>
-              ${headerbar.resizable
-                ? html`
-                    <resize-splitter
-                      @splitter-dragstart=${e => this.resizeStart(e)}
-                      @splitter-drag=${e => this.resizeDrag(e)}
-                    ></resize-splitter>
-                  `
-                : html``}
-            `
-      )}
-    `
-  }
-
-  resizeStart(e) {
-    this._startHeight = e.target.previousElementSibling.offsetHeight
-  }
-
-  resizeDrag(e) {
-    var delta = e.detail
-
-    var x = e.target.previousElementSibling.querySelectorAll('*')
-    Array.from(x).forEach(ele => {
-      ele.style.height = `${this._startHeight + delta.y}px`
-    })
-  }
-
-  stateChanged(state) {
-    this.viewparts = state.layout.viewparts || {}
-  }
-}
-
-customElements.define('header-bar', HeaderBar)

package/client/layouts/index.js

@@ -1,6 +0,0 @@
-import './snack-bar'
-
-import './header-bar'
-import './nav-bar'
-import './aside-bar'
-import './footer-bar'

package/client/layouts/nav-bar.js

@@ -1,113 +0,0 @@
-import { LitElement, html, css } from 'lit'
-
-import { connect } from 'pwa-helpers/connect-mixin.js'
-import { store } from '@things-factory/shell'
-import { ScrollbarStyles } from '@things-factory/styles'
-import { VIEWPART_LEVEL } from '@things-factory/layout-base'
-
-import '../components/floating-overlay'
-import '../components/resize-splitter'
-
-class NavBar extends connect(store)(LitElement) {
-  static get properties() {
-    return {
-      viewparts: Array,
-      fullbleed: {
-        attribute: 'fullbleed',
-        type: Boolean
-      }
-    }
-  }
-
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          flex-flow: row nowrap;
-          align-items: stretch;
-
-          position: relative;
-
-          background-color: var(--nav-bar-background-color);
-        }
-
-        *[navbar] {
-          display: flex;
-          flex-direction: row;
-        }
-      `
-    ]
-  }
-
-  render() {
-    var viewparts = this.viewparts
-    var navbars = Object.keys(viewparts)
-      .map(name => {
-        return {
-          name,
-          ...viewparts[name]
-        }
-      })
-      .filter(viewpart => viewpart.position == 'navbar' && (!this.fullbleed || viewpart.hovering))
-
-    navbars = [
-      ...navbars.filter(viewpart => viewpart.level == VIEWPART_LEVEL.TOPMOST),
-      ...navbars.filter(viewpart => viewpart.level !== VIEWPART_LEVEL.TOPMOST)
-    ]
-
-    return html`
-      ${navbars.map(navbar =>
-        !navbar.show
-          ? html``
-          : navbar.hovering
-          ? html`
-              <floating-overlay
-                .backdrop=${navbar.backdrop}
-                direction="right"
-                .hovering=${navbar.hovering}
-                .name=${navbar.name}
-                .title=${navbar.title}
-                .help=${navbar.help}
-                .size=${navbar.size}
-                .closable=${navbar.closable}
-                .templateProperties=${navbar.templateProperties}
-                >${navbar.template}</floating-overlay
-              >
-            `
-          : html`
-              <div navbar>${navbar.template}</div>
-              ${navbar.resizable
-                ? html`
-                    <resize-splitter
-                      @splitter-dragstart=${e => this.resizeStart(e)}
-                      @splitter-drag=${e => this.resizeDrag(e)}
-                      vertical
-                    ></resize-splitter>
-                  `
-                : html``}
-            `
-      )}
-    `
-  }
-
-  resizeStart(e) {
-    this._startWidth = e.target.previousElementSibling.offsetWidth
-  }
-
-  resizeDrag(e) {
-    var delta = e.detail
-
-    var x = e.target.previousElementSibling.querySelectorAll('*')
-    Array.from(x).forEach(ele => {
-      ele.style.width = `${this._startWidth + delta.x}px`
-    })
-  }
-
-  stateChanged(state) {
-    this.viewparts = state.layout.viewparts || {}
-  }
-}
-
-customElements.define('nav-bar', NavBar)

package/client/layouts/snack-bar.js

@@ -1,117 +0,0 @@
-import '@material/mwc-button'
-import '@material/mwc-icon'
-import { CLOSE_SNACKBAR } from '@things-factory/layout-base'
-import { store } from '@things-factory/shell'
-import { css, html, LitElement } from 'lit'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-
-class SnackBar extends connect(store)(LitElement) {
-  static get properties() {
-    return {
-      level: String,
-      message: String,
-      active: {
-        reflect: true,
-        type: Boolean
-      },
-      action: Object
-    }
-  }
-
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: block;
-          position: fixed;
-          top: 100%;
-          left: 0;
-          right: 0;
-          padding: 12px;
-          background-color: black;
-          color: white;
-          box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-          text-align: center;
-          will-change: transform;
-          transform: translate3d(0, 0, 0);
-          transition-property: visibility, transform;
-          transition-duration: 0.2s;
-          visibility: hidden;
-        }
-
-        :host([active]) {
-          visibility: visible;
-          transform: translate3d(0, -100%, 0);
-        }
-
-        mwc-icon {
-          --mdc-icon-size: 1.2em;
-          vertical-align: middle;
-          max-width: 20px;
-        }
-
-        mwc-button {
-          display: block;
-        }
-
-        .info {
-          color: green;
-        }
-
-        .warn {
-          color: yellow;
-        }
-
-        .error {
-          color: red;
-        }
-
-        @media (min-width: 460px) {
-          :host {
-            width: 320px;
-            margin: auto;
-          }
-        }
-      `
-    ]
-  }
-
-  render() {
-    return html`
-      <span>
-        <mwc-icon class=${this.level}
-          >${this.level == 'info'
-            ? html` notification_important `
-            : this.level == 'warn'
-            ? html` warning `
-            : this.level == 'error'
-            ? html` error `
-            : html``}</mwc-icon
-        >
-      </span>
-      <span>${this.message}</span>
-      ${this.action && this.action.label
-        ? html`
-            <mwc-button
-              @click=${e => {
-                store.dispatch({ type: CLOSE_SNACKBAR })
-                this.action.callback()
-              }}
-              >${this.action.label}</mwc-button
-            >
-          `
-        : html``}
-    `
-  }
-
-  stateChanged(state) {
-    var { level, message, snackbarOpened, action } = state.snackbar || {}
-
-    this.level = level
-    this.message = message
-    this.active = snackbarOpened
-    this.action = action
-  }
-}
-
-window.customElements.define('snack-bar', SnackBar)