@operato/layout 7.1.30 → 7.1.32

package/src/layouts/ox-aside-bar.ts

@@ -1,111 +0,0 @@
-import '@operato/popup/ox-floating-overlay.js'
-import '../components/ox-resize-splitter.js'
-
-import { css, html, LitElement } from 'lit'
-import { ifDefined } from 'lit/directives/if-defined.js'
-import { customElement, property, state } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-
-import { ScrollbarStyles } from '@operato/styles'
-
-import { Viewpart, VIEWPART_LEVEL } from '../actions/layout.js'
-import store from '../initializer.js'
-
-@customElement('ox-aside-bar')
-class AsideBar extends connect(store)(LitElement) {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        flex-flow: row-reverse nowrap;
-        align-items: stretch;
-
-        position: relative;
-      }
-
-      *[asidebar] {
-        display: block;
-        overflow-y: auto;
-      }
-    `
-  ]
-
-  @property({ type: Boolean, attribute: 'fullbleed' }) fullbleed: boolean = false
-
-  @state() viewparts: { [name: string]: Viewpart } = {}
-
-  private _startWidth: number = 0
-
-  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`
-                <ox-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}
-                  .historical=${true}
-                  .search=${asidebar.search}
-                  .filter=${asidebar.filter}
-                  z-index=${ifDefined(asidebar.zIndex)}
-                  >${asidebar.template}</ox-floating-overlay
-                >
-              `
-            : html`
-                <div asidebar>${asidebar.template}</div>
-                ${asidebar.resizable
-                  ? html`
-                      <ox-resize-splitter
-                        @splitter-dragstart=${(e: CustomEvent) => this.resizeStart(e)}
-                        @splitter-drag=${(e: CustomEvent) => this.resizeDrag(e)}
-                        vertical
-                      ></ox-resize-splitter>
-                    `
-                  : html``}
-              `
-      )}
-    `
-  }
-
-  resizeStart(e: CustomEvent) {
-    this._startWidth = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement)?.offsetWidth
-  }
-
-  resizeDrag(e: CustomEvent) {
-    var delta = e.detail
-
-    var x = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement)?.children
-    Array.from(x).forEach(ele => {
-      ;(ele as HTMLElement).style.width = `${this._startWidth - delta.x}px`
-    })
-  }
-
-  stateChanged(state: any) {
-    this.viewparts = state.layout.viewparts || {}
-  }
-}

package/src/layouts/ox-footer-bar.ts

@@ -1,112 +0,0 @@
-import '@operato/popup/ox-floating-overlay.js'
-import '../components/ox-resize-splitter.js'
-
-import { css, html, LitElement } from 'lit'
-import { ifDefined } from 'lit/directives/if-defined.js'
-import { customElement, property, state } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-
-import { Viewpart, VIEWPART_LEVEL } from '../actions/layout.js'
-import store from '../initializer.js'
-
-@customElement('ox-footer-bar')
-class FooterBar extends connect(store)(LitElement) {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-flow: column-reverse nowrap;
-        align-items: stretch;
-        position: relative;
-      }
-
-      *[footerbar] {
-        display: block;
-        max-width: 100vw;
-      }
-
-      @media screen and (max-width: 460px) {
-        :host {
-          padding-bottom: 0;
-        }
-      }
-    `
-  ]
-
-  @property({ type: Boolean, attribute: 'fullbleed' }) fullbleed: boolean = false
-
-  @state() viewparts: { [name: string]: Viewpart } = {}
-
-  private _startHeight: number = 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`
-                <ox-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}
-                  .historical=${true}
-                  .search=${footerbar.search}
-                  .filter=${footerbar.filter}
-                  z-index=${ifDefined(footerbar.zIndex)}
-                  >${footerbar.template}</ox-floating-overlay
-                >
-              `
-            : html`
-                <div footerbar>${footerbar.template}</div>
-                ${footerbar.resizable
-                  ? html`
-                      <ox-resize-splitter
-                        @splitter-dragstart=${(e: CustomEvent) => this.resizeStart(e)}
-                        @splitter-drag=${(e: CustomEvent) => this.resizeDrag(e)}
-                      ></ox-resize-splitter>
-                    `
-                  : html``}
-              `
-      )}
-    `
-  }
-
-  resizeStart(e: CustomEvent) {
-    this._startHeight = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement).offsetHeight
-  }
-
-  resizeDrag(e: CustomEvent) {
-    var delta = e.detail
-
-    var x = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement).children
-    Array.from(x).forEach(ele => {
-      ;(ele as HTMLElement).style.height = `${this._startHeight - delta.y}px`
-    })
-  }
-
-  stateChanged(state: any) {
-    this.viewparts = state.layout.viewparts || {}
-  }
-}

package/src/layouts/ox-header-bar.ts

@@ -1,108 +0,0 @@
-import '@operato/popup/ox-floating-overlay.js'
-import '../components/ox-resize-splitter.js'
-
-import { css, html, LitElement } from 'lit'
-import { ifDefined } from 'lit/directives/if-defined.js'
-import { customElement, property, state } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-
-import { Viewpart, VIEWPART_LEVEL } from '../actions/layout.js'
-import store from '../initializer.js'
-
-@customElement('ox-header-bar')
-class HeaderBar extends connect(store)(LitElement) {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-flow: column nowrap;
-        align-items: stretch;
-
-        position: relative;
-
-        background-color: var(--header-bar-background-color);
-      }
-
-      *[headerbar] {
-        display: block;
-      }
-    `
-  ]
-
-  @property({ type: Boolean, attribute: 'fullbleed' }) fullbleed: boolean = false
-
-  @state() viewparts: { [name: string]: Viewpart } = {}
-
-  private _startHeight: number = 0
-
-  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`
-                <ox-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}
-                  .historical=${true}
-                  .search=${headerbar.search}
-                  .filter=${headerbar.filter}
-                  z-index=${ifDefined(headerbar.zIndex)}
-                  >${headerbar.template}</ox-floating-overlay
-                >
-              `
-            : html`
-                <div headerbar>${headerbar.template}</div>
-                ${headerbar.resizable
-                  ? html`
-                      <ox-resize-splitter
-                        @splitter-dragstart=${(e: CustomEvent) => this.resizeStart(e)}
-                        @splitter-drag=${(e: CustomEvent) => this.resizeDrag(e)}
-                      ></ox-resize-splitter>
-                    `
-                  : html``}
-              `
-      )}
-    `
-  }
-
-  resizeStart(e: CustomEvent) {
-    this._startHeight = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement).offsetHeight
-  }
-
-  resizeDrag(e: CustomEvent) {
-    var delta = e.detail
-
-    var x = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement).children
-    Array.from(x).forEach(ele => {
-      ;(ele as HTMLElement).style.height = `${this._startHeight + delta.y}px`
-    })
-  }
-
-  stateChanged(state: any) {
-    this.viewparts = state.layout.viewparts || {}
-  }
-}

package/src/layouts/ox-nav-bar.ts

@@ -1,113 +0,0 @@
-import '@operato/popup/ox-floating-overlay.js'
-import '../components/ox-resize-splitter.js'
-
-import { css, html, LitElement } from 'lit'
-import { ifDefined } from 'lit/directives/if-defined.js'
-import { customElement, property, state } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-
-import { ScrollbarStyles } from '@operato/styles'
-
-import { Viewpart, VIEWPART_LEVEL } from '../actions/layout.js'
-import store from '../initializer.js'
-
-@customElement('ox-nav-bar')
-class NavBar extends connect(store)(LitElement) {
-  static styles = [
-    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;
-      }
-    `
-  ]
-
-  @property({ type: Boolean, attribute: 'fullbleed' }) fullbleed: boolean = false
-
-  @state() viewparts: { [name: string]: Viewpart } = {}
-
-  private _startWidth: number = 0
-
-  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`
-                <ox-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}
-                  .historical=${true}
-                  .search=${navbar.search}
-                  .filter=${navbar.filter}
-                  z-index=${ifDefined(navbar.zIndex)}
-                  >${navbar.template}</ox-floating-overlay
-                >
-              `
-            : html`
-                <div navbar>${navbar.template}</div>
-                ${navbar.resizable
-                  ? html`
-                      <ox-resize-splitter
-                        @splitter-dragstart=${(e: CustomEvent) => this.resizeStart(e)}
-                        @splitter-drag=${(e: CustomEvent) => this.resizeDrag(e)}
-                        vertical
-                      ></ox-resize-splitter>
-                    `
-                  : html``}
-              `
-      )}
-    `
-  }
-
-  resizeStart(e: CustomEvent) {
-    this._startWidth = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement).offsetWidth
-  }
-
-  resizeDrag(e: CustomEvent) {
-    var delta = e.detail
-
-    var x = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement).children
-    Array.from(x).forEach(ele => {
-      ;(ele as HTMLElement).style.width = `${this._startWidth + delta.x}px`
-    })
-  }
-
-  stateChanged(state: any) {
-    this.viewparts = state.layout.viewparts || {}
-  }
-}

package/src/layouts/ox-page-footer-bar.ts

@@ -1,112 +0,0 @@
-import '@operato/popup/ox-floating-overlay.js'
-import '../components/ox-resize-splitter.js'
-
-import { css, html, LitElement } from 'lit'
-import { ifDefined } from 'lit/directives/if-defined.js'
-import { customElement, property, state } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-
-import { Viewpart, VIEWPART_LEVEL } from '../actions/layout.js'
-import store from '../initializer.js'
-
-@customElement('ox-page-footer-bar')
-class PageFooterBar extends connect(store)(LitElement) {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-flow: column-reverse nowrap;
-        align-items: stretch;
-        position: relative;
-      }
-
-      *[footerbar] {
-        display: block;
-        max-width: 100vw;
-      }
-
-      @media screen and (max-width: 460px) {
-        :host {
-          padding-bottom: 0;
-        }
-      }
-    `
-  ]
-
-  @property({ type: Boolean, attribute: 'fullbleed' }) fullbleed: boolean = false
-
-  @state() viewparts: { [name: string]: Viewpart } = {}
-
-  private _startHeight: number = 0
-
-  render() {
-    var viewparts = this.viewparts
-    var footerbars = Object.keys(viewparts)
-      .map(name => {
-        return {
-          name,
-          ...viewparts[name]
-        }
-      })
-      .filter(viewpart => viewpart.position == 'page-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`
-                <ox-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}
-                  .historical=${true}
-                  .search=${footerbar.search}
-                  .filter=${footerbar.filter}
-                  z-index=${ifDefined(footerbar.zIndex)}
-                  >${footerbar.template}</ox-floating-overlay
-                >
-              `
-            : html`
-                <div footerbar>${footerbar.template}</div>
-                ${footerbar.resizable
-                  ? html`
-                      <ox-resize-splitter
-                        @splitter-dragstart=${(e: CustomEvent) => this.resizeStart(e)}
-                        @splitter-drag=${(e: CustomEvent) => this.resizeDrag(e)}
-                      ></ox-resize-splitter>
-                    `
-                  : html``}
-              `
-      )}
-    `
-  }
-
-  resizeStart(e: CustomEvent) {
-    this._startHeight = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement).offsetHeight
-  }
-
-  resizeDrag(e: CustomEvent) {
-    var delta = e.detail
-
-    var x = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement).children
-    Array.from(x).forEach(ele => {
-      ;(ele as HTMLElement).style.height = `${this._startHeight - delta.y}px`
-    })
-  }
-
-  stateChanged(state: any) {
-    this.viewparts = state.layout.viewparts || {}
-  }
-}

package/src/layouts/ox-page-header-bar.ts

@@ -1,106 +0,0 @@
-import '@operato/popup/ox-floating-overlay.js'
-import '../components/ox-resize-splitter.js'
-
-import { css, html, LitElement } from 'lit'
-import { ifDefined } from 'lit/directives/if-defined.js'
-import { customElement, property, state } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-
-import { Viewpart, VIEWPART_LEVEL } from '../actions/layout.js'
-import store from '../initializer.js'
-
-@customElement('ox-page-header-bar')
-class PageHeaderBar extends connect(store)(LitElement) {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-flow: column nowrap;
-        align-items: stretch;
-
-        position: relative;
-      }
-
-      *[headerbar] {
-        display: block;
-      }
-    `
-  ]
-
-  @property({ type: Boolean, attribute: 'fullbleed' }) fullbleed: boolean = false
-
-  @state() viewparts: { [name: string]: Viewpart } = {}
-
-  private _startHeight: number = 0
-
-  render() {
-    var viewparts = this.viewparts
-    var headerbars = Object.keys(viewparts)
-      .map(name => {
-        return {
-          name,
-          ...viewparts[name]
-        }
-      })
-      .filter(viewpart => viewpart.position == 'page-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`
-                <ox-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}
-                  .historical=${true}
-                  .search=${headerbar.search}
-                  .filter=${headerbar.filter}
-                  z-index=${ifDefined(headerbar.zIndex)}
-                  >${headerbar.template}</ox-floating-overlay
-                >
-              `
-            : html`
-                <div headerbar>${headerbar.template}</div>
-                ${headerbar.resizable
-                  ? html`
-                      <ox-resize-splitter
-                        @splitter-dragstart=${(e: CustomEvent) => this.resizeStart(e)}
-                        @splitter-drag=${(e: CustomEvent) => this.resizeDrag(e)}
-                      ></ox-resize-splitter>
-                    `
-                  : html``}
-              `
-      )}
-    `
-  }
-
-  resizeStart(e: CustomEvent) {
-    this._startHeight = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement).offsetHeight
-  }
-
-  resizeDrag(e: CustomEvent) {
-    var delta = e.detail
-
-    var x = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement).children
-    Array.from(x).forEach(ele => {
-      ;(ele as HTMLElement).style.height = `${this._startHeight + delta.y}px`
-    })
-  }
-
-  stateChanged(state: any) {
-    this.viewparts = state.layout.viewparts || {}
-  }
-}