@operato/context 1.1.19

package/src/styles/ox-context-toolbar-overlay-style.ts

@@ -0,0 +1,58 @@
+import { css } from 'lit'
+
+export const ContextToolbarOverlayStyle = css`
+  :host {
+    display: block;
+
+    background-color: var(--context-ui-background-color);
+    box-shadow: var(--context-ui-box-shadow);
+    padding: var(--context-ui-padding);
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    overflow-y: auto;
+  }
+
+  li {
+    display: flex;
+
+    border-bottom: var(--context-ui-list-border-bottom);
+    padding: var(--context-ui-list-padding);
+  }
+
+  li > mwc-icon {
+    font-size: 1em;
+
+    padding: var(--context-ui-padding);
+    color: var(--context-ui-list-color);
+  }
+
+  li > span {
+    margin: auto 0;
+    flex: 1;
+
+    color: var(--context-ui-list-color);
+  }
+
+  li:hover mwc-icon,
+  li:hover span {
+    color: #fff;
+  }
+
+  li:hover {
+    cursor: pointer;
+
+    border-bottom: var(--context-ui-list-border-hover-bottom);
+  }
+
+  @media (max-width: 460px) {
+    :host {
+      min-width: 100%;
+      box-shadow: none;
+      border-radius: 0;
+    }
+  }
+`

package/src/tools/ox-page-action-context-bar.ts

@@ -0,0 +1,176 @@
+import '@material/mwc-button'
+import '@material/mwc-icon'
+import './ox-page-action-overlay-template.js'
+
+import { css, html, LitElement, PropertyValues } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+import throttle from 'lodash-es/throttle'
+import { connect } from 'pwa-helpers/connect-mixin'
+
+import { openOverlay } from '@operato/layout'
+import { store } from '@operato/shell'
+import { sleep } from '@operato/utils'
+
+@customElement('ox-page-action-context-bar')
+export class PageActionContextBar extends connect(store)(LitElement) {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: flex;
+          overflow: hidden;
+          position: relative;
+        }
+
+        :host *:focus {
+          outline: none;
+        }
+
+        mwc-button {
+          white-space: nowrap;
+          margin: var(--context-action-bar-button-margin);
+          border-radius: var(--context-action-bar-more-button-border-radius);
+        }
+
+        [danger] {
+          --mdc-theme-primary: var(--mdc-danger-button-primary-color);
+          --mdc-button-outline-color: var(--mdc-danger-button-outline-color);
+        }
+
+        [more] {
+          position: absolute;
+          right: 0;
+          background-color: var(--context-action-bar-more-button-background-color);
+          box-shadow: -2px 0px 2px 1px rgba(0, 0, 0, 0.2);
+          padding: var(--context-action-bar-more-button-padding);
+          color: var(--context-action-bar-more-button-color);
+        }
+
+        @media screen and (max-width: 460px) {
+          mwc-button {
+            --mdc-button-horizontal-padding: var(--padding-default);
+            --mdc-shape-small: var(--context-action-bar-more-button-border-radius);
+          }
+          [more] {
+            position: fixed;
+            margin-top: -10px;
+            -webkit-border-top-left-radius: 10px;
+            -moz-border-radius-topleft: 10px;
+            border-top-left-radius: 10px;
+            padding: var(--padding-default);
+            font-size: 2rem;
+          }
+        }
+
+        @keyframes rotate {
+          from {
+            transform: rotate(0deg);
+          }
+          to {
+            transform: rotate(360deg);
+          }
+        }
+      `
+    ]
+  }
+
+  @state() actions: any[] = []
+  @state() private overflown: boolean = false
+
+  private overflownUpdaterThrottle: any
+  private resizeCallback: any
+
+  get overflownUpdater() {
+    if (!this.overflownUpdaterThrottle) {
+      this.overflownUpdaterThrottle = throttle(() => {
+        this.overflown = this.scrollWidth > this.clientWidth
+      }, 100)
+    }
+
+    return this.overflownUpdaterThrottle
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+
+    this.resizeCallback = () => this.overflownUpdater()
+
+    window.addEventListener('resize', this.resizeCallback)
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+
+    window.removeEventListener('resize', this.resizeCallback)
+  }
+
+  render() {
+    return html`
+      ${this.renderActions()}
+      ${this.overflown ? html` <mwc-icon more @click=${this.showMore.bind(this)}>more_horiz</mwc-icon> ` : html``}
+    `
+  }
+
+  renderActions() {
+    return html`
+      ${this.actions.map(($action, idx) => {
+        let { type, title, icon, action, select, href, emphasis } = $action as any
+        let { outlined, raised, dense, danger } = emphasis || {}
+
+        return type == 'text'
+          ? html` <span>${title}</span> `
+          : type == 'select' || (select && select.length > 0)
+          ? html`
+              <select @change=${action}>
+                ${select.map((option: any) => html` <option>${option}</option> `)}
+              </select>
+            `
+          : type == 'link'
+          ? html` <a href=${href}>${title}</a> `
+          : html`
+              <mwc-button
+                label=${title}
+                icon=${icon || 'done_all'}
+                ?dense=${dense}
+                ?raised=${raised}
+                ?outlined=${outlined}
+                ?danger=${danger}
+                @click=${async (e: MouseEvent) => {
+                  /* all actions should be bloked for a second */
+                  const button = e.currentTarget as any
+                  button.icon = 'rotate_right'
+                  button.setAttribute('working', true)
+                  button.disabled = true
+
+                  try {
+                    await action()
+                  } finally {
+                    await sleep(1000)
+                    button.disabled = false
+                    /* because icon can be changed after sleep, don't use closure 'icon'. */
+                    button.icon = this.actions[idx]?.icon || 'done_all'
+                    button.removeAttribute('working')
+                  }
+                }}
+              ></mwc-button>
+            `
+      })}
+    `
+  }
+
+  async updated(changed: PropertyValues<this>) {
+    if (changed.has('actions')) {
+      requestAnimationFrame(this.overflownUpdater)
+    }
+  }
+
+  stateChanged(state: any) {
+    this.actions = state.route?.context?.actions?.filter((action: any) => !!action) || []
+  }
+
+  showMore() {
+    openOverlay('context-toolbar-overlay', {
+      template: html`<ox-page-action-overlay-template></ox-page-action-overlay-template>`
+    })
+  }
+}

package/src/tools/ox-page-action-overlay-template.ts

@@ -0,0 +1,112 @@
+import '@material/mwc-icon'
+
+import { css, html, LitElement } from 'lit-element'
+import { customElement, property, query, state } from 'lit/decorators.js'
+import { connect } from 'pwa-helpers'
+
+import { store } from '@operato/shell'
+import { ScrollbarStyles } from '@operato/styles'
+import { sleep } from '@operato/utils'
+
+import { ContextToolbarOverlayStyle } from '../styles/ox-context-toolbar-overlay-style.js'
+
+@customElement('ox-page-action-overlay-template')
+export class PageActionOverlayTemplate extends connect(store)(LitElement) {
+  static get styles() {
+    return [
+      ScrollbarStyles,
+      ContextToolbarOverlayStyle,
+      css`
+        :host {
+          display: flex;
+          flex-wrap: wrap;
+          gap: var(--margin-narrow);
+        }
+        :host *:focus {
+          outline: none;
+        }
+
+        mwc-button {
+          background-color: var(--main-section-background-color);
+          border-radius: var(--context-action-bar-more-button-border-radius);
+        }
+
+        [danger] {
+          --mdc-theme-primary: var(--mdc-danger-button-primary-color);
+          --mdc-button-outline-color: var(--mdc-danger-button-outline-color);
+        }
+
+        @media screen and (max-width: 460px) {
+          mwc-button {
+            --mdc-button-horizontal-padding: var(--padding-default);
+            border-radius: 4px;
+          }
+        }
+
+        @keyframes rotate {
+          from {
+            transform: rotate(0deg);
+          }
+          to {
+            transform: rotate(360deg);
+          }
+        }
+      `
+    ]
+  }
+
+  @state() private actions: any[] = []
+
+  render() {
+    return html`
+      ${this.actions.map(($action, idx) => {
+        let { type, title, icon, action, select, href, emphasis } = $action as any
+        let { outlined, raised, dense, danger } = emphasis || {}
+
+        return type == 'text'
+          ? html` <span>${title}</span> `
+          : type == 'select' || (select && select.length > 0)
+          ? html`
+              <select @change=${action}>
+                ${select.map((option: any) => html` <option>${option}</option> `)}
+              </select>
+            `
+          : type == 'link'
+          ? html` <a href=${href}>${title}</a> `
+          : html`
+              <mwc-button
+                label=${title}
+                icon=${icon || 'done_all'}
+                ?dense=${dense}
+                ?raised=${raised}
+                ?outlined=${outlined}
+                ?danger=${danger}
+                @click=${async (e: MouseEvent) => {
+                  /* all actions should be bloked for a second */
+                  const button = e.currentTarget as any
+                  button.icon = 'rotate_right'
+                  button.setAttribute('working', true)
+                  button.disabled = true
+
+                  try {
+                    action()
+                  } finally {
+                    await sleep(1000)
+                    button.disabled = false
+                    /* because icon can be changed after sleep, don't use closure 'icon'. */
+                    button.icon = this.actions[idx]?.icon || 'done_all'
+                    button.removeAttribute('working')
+
+                    window.history.back()
+                  }
+                }}
+              ></mwc-button>
+            `
+      })}
+    `
+  }
+
+  stateChanged(state: any) {
+    this.actions = state.route?.context?.actions?.filter((action: any) => !!action) || []
+  }
+}

package/src/tools/ox-title-bar.ts

@@ -0,0 +1,99 @@
+import '@material/mwc-icon'
+import '@operato/input/ox-input-search.js'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+import { connect } from 'pwa-helpers'
+
+import { openHelp } from '@operato/help'
+import { store } from '@operato/shell'
+
+@customElement('ox-title-bar')
+export class TitleBar extends connect(store)(LitElement) {
+  static get styles() {
+    return css`
+      :host {
+        display: flex;
+        --help-icon-color: #fff;
+        --help-icon-hover-color: #fff;
+        --help-icon-opacity: 0.2;
+        --help-icon-size: 20px;
+
+        --mdc-icon-size: 20px;
+      }
+
+      [titler] {
+        display: flex;
+        font: var(--context-toolbar-title);
+      }
+
+      [titler] > * {
+        align-self: center;
+      }
+
+      [help] {
+        opacity: var(--help-icon-opacity);
+        font-size: var(--help-icon-size);
+        color: var(--help-icon-color);
+      }
+
+      [help]:hover {
+        cursor: help;
+        opacity: var(--help-icon-hover-opacity);
+        color: var(--help-icon-hover-color);
+      }
+
+      [search] {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        align-self: center;
+        color: var(--secondary-color);
+        background-color: var(--opacity-light-color);
+        border-radius: 999em;
+        padding: 0 10px;
+      }
+
+      [search] > * {
+        align-self: center;
+      }
+    `
+  }
+
+  @state() private context: any
+
+  render() {
+    const { search, filter, title, help } = this.context || ({} as any)
+    const { value = '', handler: searchHandler, placeholder = '' } = search || ({} as any)
+    const { handler: filterHandler } = filter || ({} as any)
+    const { icon, text = title } = typeof title === 'object' ? title : ({} as any)
+    const searchable = typeof searchHandler == 'function'
+    const filterable = typeof filterHandler == 'function'
+
+    return html`
+      ${title ? html` <div titler>${icon ? html`<mwc-icon>${icon}</mwc-icon>&nbsp;` : html``}${text}</div> ` : html``}
+      ${help ? html` &nbsp;<mwc-icon @click=${(e: MouseEvent) => openHelp(help)} help>help</mwc-icon> ` : html``}
+      ${searchable || filterable
+        ? html`
+            <div search>
+              ${searchable
+                ? html` <ox-input-search
+                    .placeholder=${placeholder}
+                    .value=${value || ''}
+                    @change=${(e: Event) => {
+                      searchHandler((e.target as any).value)
+                    }}
+                  ></ox-input-search>`
+                : html``}
+              ${filterable ? html`<mwc-icon @click=${(e: MouseEvent) => filterHandler()}>tune</mwc-icon>` : html``}
+            </div>
+          `
+        : html``}
+    `
+  }
+
+  stateChanged(state: any) {
+    this.context = state.route.context
+  }
+}

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "lib": ["es2017", "dom"],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "./",
+    "declaration": true,
+    "incremental": true,
+    "types": ["node", "mocha"]
+  },
+  "include": ["**/*.ts"]
+}

package/web-dev-server.config.mjs

@@ -0,0 +1,27 @@
+// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
+
+/** Use Hot Module replacement by adding --hmr to the start command */
+const hmr = process.argv.includes('--hmr');
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  open: '/demo/',
+  /** Use regular watch mode if HMR is not enabled. */
+  watch: !hmr,
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto'
+
+  /** Set appIndex to enable SPA routing */
+  // appIndex: 'demo/index.html',
+
+  plugins: [
+    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
+    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
+  ],
+
+  // See documentation for all available options
+});

package/web-test-runner.config.mjs

@@ -0,0 +1,41 @@
+// import { playwrightLauncher } from '@web/test-runner-playwright';
+
+const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
+
+export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
+  /** Test files to run */
+  files: 'dist/test/**/*.test.js',
+
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Filter out lit dev mode logs */
+  filterBrowserLogs(log) {
+    for (const arg of log.args) {
+      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
+        return false;
+      }
+    }
+    return true;
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto',
+
+  /** Amount of browsers to run concurrently */
+  // concurrentBrowsers: 2,
+
+  /** Amount of test files per browser to test concurrently */
+  // concurrency: 1,
+
+  /** Browsers to run tests on */
+  // browsers: [
+  //   playwrightLauncher({ product: 'chromium' }),
+  //   playwrightLauncher({ product: 'firefox' }),
+  //   playwrightLauncher({ product: 'webkit' }),
+  // ],
+
+  // See documentation for all available options
+});