@operato/context 2.0.0-alpha.7 → 2.0.0-alpha.71

package/dist/src/layouts/ox-context-toolbar.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { connect } from 'pwa-helpers/connect-mixin.js';
@@ -11,77 +11,97 @@ let ContextToolbar = class ContextToolbar extends connect(store)(LitElement) {
             css `
         :host {
           display: flex;
-          position: relative;
 
           background-color: var(--context-toolbar-background-color);
-          justify-content: space-between;
           box-shadow: var(--context-toolbar-shadow-line);
-        }
-        #front-end {
-          padding-left: var(--context-toolbar-side-padding);
-        }
-        #rear-end {
-          padding-right: var(--context-toolbar-side-padding);
-        }
-        #front-end mwc-icon,
-        #front mwc-icon {
-          background-color: var(--context-toolbar-function-button-background-color);
-          border: var(--context-toolbar-function-button-border);
-          height: var(--context-toolbar-function-button-height);
-          margin: var(--context-toolbar-button-margin);
-          padding: var(--context-toolbar-function-button-padding);
-          color: var(--context-toolbar-function-button-color);
-          line-height: var(--context-toolbar-function-button-lineheight);
-          cursor: pointer;
-        }
-        #front-end mwc-icon:first-child,
-        #front mwc-icon:first-child {
-          border-top-left-radius: var(--context-toolbar-function-button-radius);
-          border-bottom-left-radius: var(--context-toolbar-function-button-radius);
-        }
-        #front-end mwc-icon:last-child,
-        #front mwc-icon:last-child {
-          border-top-right-radius: var(--context-toolbar-function-button-radius);
-          border-bottom-right-radius: var(--context-toolbar-function-button-radius);
-        }
 
-        #front-end mwc-icon {
-          background-color: var(--primary-color);
-        }
-        #front-end mwc-icon:hover {
-          background-color: var(--context-toolbar-function-button-background-color);
-        }
-        #front mwc-icon:hover {
-          background-color: var(--context-toolbar-function-button-hover-background-color);
+          padding: 0;
         }
 
-        #center {
+        div[container] {
           flex: 1;
-          align-items: center;
-          justify-content: end;
-        }
 
-        #center > * {
-          align-items: center;
-        }
-        #rear-end > *,
-        #rear > * {
-          margin: var(--context-toolbar-button-margin);
-        }
-        #rear-end {
-          align-items: start;
-        }
+          display: flex;
+          position: relative;
+          overflow: hidden;
+
+          justify-content: space-between;
 
-        div > * {
-          align-items: center;
+          gap: 4px;
+          padding: 6px 10px;
+
+          &:empty {
+            padding: 0;
+          }
+
+          div {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+
+            align-items: center;
+            overflow: hidden;
+            padding: 0;
+          }
+
+          #front-end md-icon,
+          #front md-icon {
+            background-color: var(--context-toolbar-function-button-background-color);
+            border: var(--context-toolbar-function-button-border);
+            color: var(--context-toolbar-function-button-color);
+          }
+
+          #front-end md-icon {
+            background-color: var(--primary-color);
+          }
+          #front-end md-icon:hover {
+            background-color: var(--context-toolbar-function-button-background-color);
+          }
+          #front md-icon:hover {
+            background-color: var(--context-toolbar-function-button-hover-background-color);
+          }
+
+          md-icon {
+            background-color: var(--button-background-color, #fafbfc);
+            border: 1px solid rgba(var(--primary-color-rgb), 0.5);
+            border-radius: var(--button-border-radius);
+            padding: var(--iconbtn-padding, 2px);
+
+            color: var(--primary-color);
+
+            &:hover {
+              background-color: var(--primary-color);
+
+              color: var(--theme-white-color);
+            }
+          }
+
+          div md-icon:first-child {
+            border-radius: 0;
+            border-top-left-radius: var(--context-toolbar-function-button-radius);
+            border-bottom-left-radius: var(--context-toolbar-function-button-radius);
+          }
+          div md-icon:last-child {
+            border-radius: 0;
+            border-top-right-radius: var(--context-toolbar-function-button-radius);
+            border-bottom-right-radius: var(--context-toolbar-function-button-radius);
+          }
+
+          #center {
+            flex: 1;
+            justify-content: end;
+          }
+
+          * {
+            cursor: pointer;
+          }
         }
 
-        div {
-          display: flex;
-          flex-wrap: nowrap;
-          align-items: center;
-          overflow: hidden;
-          padding: 0;
+        @media only screen and (max-width: 460px) {
+          div[container] {
+            padding: 0;
+            gap: 0;
+          }
         }
       `
         ];
@@ -102,15 +122,23 @@ let ContextToolbar = class ContextToolbar extends connect(store)(LitElement) {
         let rearTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR);
         let rearEndTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR_END);
         return html `
-      <div id="front-end">${frontEndTools.map(tool => html ` ${tool.template} `)}</div>
-
-      <div id="front">${frontTools.map(tool => html ` ${tool.template} `)}</div>
-
-      <div id="center">${centerTools.map(tool => html ` ${tool.template} `)}</div>
-
-      <div id="rear">${rearTools.map(tool => html ` ${tool.template} `)}</div>
-
-      <div id="rear-end">${rearEndTools.map(tool => html ` ${tool.template} `)}</div>
+      <div container>
+        ${frontEndTools.length > 0
+            ? html `<div id="front-end">${frontEndTools.map(tool => html ` ${tool.template} `)}</div>`
+            : nothing}
+        ${frontTools.length > 0
+            ? html `<div id="front">${frontTools.map(tool => html ` ${tool.template} `)}</div>`
+            : nothing}
+        ${centerTools.length > 0
+            ? html `<div id="center">${centerTools.map(tool => html ` ${tool.template} `)}</div>`
+            : nothing}
+        ${rearTools.length > 0
+            ? html `<div id="rear">${rearTools.map(tool => html ` ${tool.template} `)}</div>`
+            : nothing}
+        ${rearEndTools.length > 0
+            ? html `<div id="rear-end">${rearEndTools.map(tool => html ` ${tool.template} `)}</div>`
+            : nothing}
+      </div>
     `;
     }
     stateChanged(state) {

package/dist/src/layouts/ox-context-toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-context-toolbar.js","sourceRoot":"","sources":["../../../src/layouts/ox-context-toolbar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { TOOL_POSITION } from '@operato/layout'\nimport { store } from '@operato/shell'\n\n@customElement('ox-context-toolbar')\nexport class ContextToolbar extends connect(store)(LitElement) {\n  static get styles() {\n    return [\n      css`\n        :host {\n          display: flex;\n          position: relative;\n\n          background-color: var(--context-toolbar-background-color);\n          justify-content: space-between;\n          box-shadow: var(--context-toolbar-shadow-line);\n        }\n        #front-end {\n          padding-left: var(--context-toolbar-side-padding);\n        }\n        #rear-end {\n          padding-right: var(--context-toolbar-side-padding);\n        }\n        #front-end mwc-icon,\n        #front mwc-icon {\n          background-color: var(--context-toolbar-function-button-background-color);\n          border: var(--context-toolbar-function-button-border);\n          height: var(--context-toolbar-function-button-height);\n          margin: var(--context-toolbar-button-margin);\n          padding: var(--context-toolbar-function-button-padding);\n          color: var(--context-toolbar-function-button-color);\n          line-height: var(--context-toolbar-function-button-lineheight);\n          cursor: pointer;\n        }\n        #front-end mwc-icon:first-child,\n        #front mwc-icon:first-child {\n          border-top-left-radius: var(--context-toolbar-function-button-radius);\n          border-bottom-left-radius: var(--context-toolbar-function-button-radius);\n        }\n        #front-end mwc-icon:last-child,\n        #front mwc-icon:last-child {\n          border-top-right-radius: var(--context-toolbar-function-button-radius);\n          border-bottom-right-radius: var(--context-toolbar-function-button-radius);\n        }\n\n        #front-end mwc-icon {\n          background-color: var(--primary-color);\n        }\n        #front-end mwc-icon:hover {\n          background-color: var(--context-toolbar-function-button-background-color);\n        }\n        #front mwc-icon:hover {\n          background-color: var(--context-toolbar-function-button-hover-background-color);\n        }\n\n        #center {\n          flex: 1;\n          align-items: center;\n          justify-content: end;\n        }\n\n        #center > * {\n          align-items: center;\n        }\n        #rear-end > *,\n        #rear > * {\n          margin: var(--context-toolbar-button-margin);\n        }\n        #rear-end {\n          align-items: start;\n        }\n\n        div > * {\n          align-items: center;\n        }\n\n        div {\n          display: flex;\n          flex-wrap: nowrap;\n          align-items: center;\n          overflow: hidden;\n          padding: 0;\n        }\n      `\n    ]\n  }\n\n  @state() private context: any\n  @state() private tools?: any[]\n\n  render() {\n    if (this.context.toolbar === false) {\n      return nothing\n    }\n\n    let contextKeys = Object.keys(this.context).filter(key => !!this.context[key])\n    let tools = (this.tools || []).filter(tool => {\n      if (!tool.context || contextKeys.includes(tool.context)) {\n        return tool\n      }\n    })\n\n    let frontEndTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT_END)\n    let frontTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT)\n    let centerTools = tools.filter(tool => tool.position == TOOL_POSITION.CENTER)\n    let rearTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR)\n    let rearEndTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR_END)\n\n    return html`\n      <div id=\"front-end\">${frontEndTools.map(tool => html` ${tool.template} `)}</div>\n\n      <div id=\"front\">${frontTools.map(tool => html` ${tool.template} `)}</div>\n\n      <div id=\"center\">${centerTools.map(tool => html` ${tool.template} `)}</div>\n\n      <div id=\"rear\">${rearTools.map(tool => html` ${tool.template} `)}</div>\n\n      <div id=\"rear-end\">${rearEndTools.map(tool => html` ${tool.template} `)}</div>\n    `\n  }\n\n  stateChanged(state: any) {\n    this.tools = state.context.tools\n    this.context = state.route.context\n  }\n}\n"]}
+{"version":3,"file":"ox-context-toolbar.js","sourceRoot":"","sources":["../../../src/layouts/ox-context-toolbar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { TOOL_POSITION } from '@operato/layout'\nimport { store } from '@operato/shell'\n\n@customElement('ox-context-toolbar')\nexport class ContextToolbar extends connect(store)(LitElement) {\n  static get styles() {\n    return [\n      css`\n        :host {\n          display: flex;\n\n          background-color: var(--context-toolbar-background-color);\n          box-shadow: var(--context-toolbar-shadow-line);\n\n          padding: 0;\n        }\n\n        div[container] {\n          flex: 1;\n\n          display: flex;\n          position: relative;\n          overflow: hidden;\n\n          justify-content: space-between;\n\n          gap: 4px;\n          padding: 6px 10px;\n\n          &:empty {\n            padding: 0;\n          }\n\n          div {\n            display: flex;\n            flex-direction: row;\n            flex-wrap: nowrap;\n\n            align-items: center;\n            overflow: hidden;\n            padding: 0;\n          }\n\n          #front-end md-icon,\n          #front md-icon {\n            background-color: var(--context-toolbar-function-button-background-color);\n            border: var(--context-toolbar-function-button-border);\n            color: var(--context-toolbar-function-button-color);\n          }\n\n          #front-end md-icon {\n            background-color: var(--primary-color);\n          }\n          #front-end md-icon:hover {\n            background-color: var(--context-toolbar-function-button-background-color);\n          }\n          #front md-icon:hover {\n            background-color: var(--context-toolbar-function-button-hover-background-color);\n          }\n\n          md-icon {\n            background-color: var(--button-background-color, #fafbfc);\n            border: 1px solid rgba(var(--primary-color-rgb), 0.5);\n            border-radius: var(--button-border-radius);\n            padding: var(--iconbtn-padding, 2px);\n\n            color: var(--primary-color);\n\n            &:hover {\n              background-color: var(--primary-color);\n\n              color: var(--theme-white-color);\n            }\n          }\n\n          div md-icon:first-child {\n            border-radius: 0;\n            border-top-left-radius: var(--context-toolbar-function-button-radius);\n            border-bottom-left-radius: var(--context-toolbar-function-button-radius);\n          }\n          div md-icon:last-child {\n            border-radius: 0;\n            border-top-right-radius: var(--context-toolbar-function-button-radius);\n            border-bottom-right-radius: var(--context-toolbar-function-button-radius);\n          }\n\n          #center {\n            flex: 1;\n            justify-content: end;\n          }\n\n          * {\n            cursor: pointer;\n          }\n        }\n\n        @media only screen and (max-width: 460px) {\n          div[container] {\n            padding: 0;\n            gap: 0;\n          }\n        }\n      `\n    ]\n  }\n\n  @state() private context: any\n  @state() private tools?: any[]\n\n  render() {\n    if (this.context.toolbar === false) {\n      return nothing\n    }\n\n    let contextKeys = Object.keys(this.context).filter(key => !!this.context[key])\n    let tools = (this.tools || []).filter(tool => {\n      if (!tool.context || contextKeys.includes(tool.context)) {\n        return tool\n      }\n    })\n\n    let frontEndTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT_END)\n    let frontTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT)\n    let centerTools = tools.filter(tool => tool.position == TOOL_POSITION.CENTER)\n    let rearTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR)\n    let rearEndTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR_END)\n\n    return html`\n      <div container>\n        ${frontEndTools.length > 0\n          ? html`<div id=\"front-end\">${frontEndTools.map(tool => html` ${tool.template} `)}</div>`\n          : nothing}\n        ${frontTools.length > 0\n          ? html`<div id=\"front\">${frontTools.map(tool => html` ${tool.template} `)}</div>`\n          : nothing}\n        ${centerTools.length > 0\n          ? html`<div id=\"center\">${centerTools.map(tool => html` ${tool.template} `)}</div>`\n          : nothing}\n        ${rearTools.length > 0\n          ? html`<div id=\"rear\">${rearTools.map(tool => html` ${tool.template} `)}</div>`\n          : nothing}\n        ${rearEndTools.length > 0\n          ? html`<div id=\"rear-end\">${rearEndTools.map(tool => html` ${tool.template} `)}</div>`\n          : nothing}\n      </div>\n    `\n  }\n\n  stateChanged(state: any) {\n    this.tools = state.context.tools\n    this.context = state.route.context\n  }\n}\n"]}

package/dist/src/styles/ox-context-toolbar-overlay-style.js

@@ -22,7 +22,7 @@ export const ContextToolbarOverlayStyle = css `
     padding: var(--context-ui-list-padding);
   }
 
-  li > mwc-icon {
+  li > md-icon {
     font-size: 1em;
 
     padding: var(--context-ui-padding);
@@ -36,7 +36,7 @@ export const ContextToolbarOverlayStyle = css `
     color: var(--context-ui-list-color);
   }
 
-  li:hover mwc-icon,
+  li:hover md-icon,
   li:hover span {
     color: #fff;
   }

package/dist/src/styles/ox-context-toolbar-overlay-style.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-context-toolbar-overlay-style.js","sourceRoot":"","sources":["../../../src/styles/ox-context-toolbar-overlay-style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuD5C,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const ContextToolbarOverlayStyle = css`\n  :host {\n    display: block;\n\n    background-color: var(--context-ui-background-color);\n    box-shadow: var(--context-ui-box-shadow);\n    padding: var(--context-ui-padding);\n  }\n\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    overflow-y: auto;\n  }\n\n  li {\n    display: flex;\n\n    border-bottom: var(--context-ui-list-border-bottom);\n    padding: var(--context-ui-list-padding);\n  }\n\n  li > mwc-icon {\n    font-size: 1em;\n\n    padding: var(--context-ui-padding);\n    color: var(--context-ui-list-color);\n  }\n\n  li > span {\n    margin: auto 0;\n    flex: 1;\n\n    color: var(--context-ui-list-color);\n  }\n\n  li:hover mwc-icon,\n  li:hover span {\n    color: #fff;\n  }\n\n  li:hover {\n    cursor: pointer;\n\n    border-bottom: var(--context-ui-list-border-hover-bottom);\n  }\n\n  @media (max-width: 460px) {\n    :host {\n      min-width: 100%;\n      box-shadow: none;\n      border-radius: 0;\n    }\n  }\n`\n"]}
+{"version":3,"file":"ox-context-toolbar-overlay-style.js","sourceRoot":"","sources":["../../../src/styles/ox-context-toolbar-overlay-style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuD5C,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const ContextToolbarOverlayStyle = css`\n  :host {\n    display: block;\n\n    background-color: var(--context-ui-background-color);\n    box-shadow: var(--context-ui-box-shadow);\n    padding: var(--context-ui-padding);\n  }\n\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    overflow-y: auto;\n  }\n\n  li {\n    display: flex;\n\n    border-bottom: var(--context-ui-list-border-bottom);\n    padding: var(--context-ui-list-padding);\n  }\n\n  li > md-icon {\n    font-size: 1em;\n\n    padding: var(--context-ui-padding);\n    color: var(--context-ui-list-color);\n  }\n\n  li > span {\n    margin: auto 0;\n    flex: 1;\n\n    color: var(--context-ui-list-color);\n  }\n\n  li:hover md-icon,\n  li:hover span {\n    color: #fff;\n  }\n\n  li:hover {\n    cursor: pointer;\n\n    border-bottom: var(--context-ui-list-border-hover-bottom);\n  }\n\n  @media (max-width: 460px) {\n    :host {\n      min-width: 100%;\n      box-shadow: none;\n      border-radius: 0;\n    }\n  }\n`\n"]}

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

@@ -1,5 +1,4 @@
-import '@material/mwc-button';
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import './ox-page-action-overlay-template.js';
 import { LitElement, PropertyValues } from 'lit';
 declare const PageActionContextBar_base: (new (...args: any[]) => {
@@ -11,15 +10,23 @@ declare const PageActionContextBar_base: (new (...args: any[]) => {
 }) & typeof LitElement;
 export declare class PageActionContextBar extends PageActionContextBar_base {
     static get styles(): import("lit").CSSResult[];
-    actions: any[];
+    actions: {
+        title: string;
+        action: () => void;
+        icon: string;
+        type: string;
+        select: string[];
+        href?: string;
+        emphasis?: boolean;
+    }[];
     private overflown;
     private overflownUpdaterThrottle;
     private resizeCallback;
     get overflownUpdater(): any;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
-    renderActions(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+    renderActions(): import("lit-html").TemplateResult<1>;
     updated(changed: PropertyValues<this>): Promise<void>;
     stateChanged(state: any): void;
     showMore(): void;

package/dist/src/tools/ox-page-action-context-bar.js

@@ -1,9 +1,8 @@
 import { __decorate } from "tslib";
-import '@material/mwc-button';
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import './ox-page-action-overlay-template.js';
 import { css, html, LitElement } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import throttle from 'lodash-es/throttle';
 import { connect } from 'pwa-helpers/connect-mixin';
 import { openOverlay } from '@operato/layout';
@@ -21,54 +20,79 @@ let PageActionContextBar = class PageActionContextBar extends connect(store)(Lit
         :host {
           display: flex;
           overflow: hidden;
-          position: relative;
+          gap: var(--padding-narrow);
         }
 
         :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);
+        button {
+          display: flex;
+          align-items: center;
+          background-color: var(--button-background-color, #fafbfc);
+          border: 1px solid rgba(var(--primary-color-rgb), 0.5);
+          border-radius: var(--button-border-radius);
+
+          font-size: var(--fontsize-default);
+          color: var(--secondary-color);
+
+          md-icon {
+            margin: 4px 1px;
+
+            --md-icon-size: 18px;
+            color: var(--primary-color);
+          }
+          &:hover {
+            background-color: var(--primary-color);
+
+            color: var(--theme-white-color);
+
+            md-icon {
+              color: var(--white-theme-color);
+            }
+          }
+        }
+
+        [filled] {
+          font-variation-settings: 'FILL' 1;
         }
 
         [danger] {
-          --mdc-theme-primary: var(--mdc-danger-button-primary-color);
-          --mdc-button-outline-color: var(--mdc-danger-button-outline-color);
+          color: var(--md-danger-button-primary-color);
+          border-color: var(--md-danger-button-outline-color);
+
+          md-icon {
+            color: var(--md-danger-button-primary-color);
+          }
+          &:hover {
+            background-color: var(--md-danger-button-primary-color);
+          }
         }
 
         [more] {
           position: absolute;
           top: 0;
-          right: 38px;
+          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);
+          padding: 10px;
           font-size: 2rem;
         }
 
-        mwc-icon {
-          background-color: var(--theme-white-color);
-          border: 1px solid rgba(var(--primary-color-rgb), 0.5);
-          padding: 1px 2px;
-          color: var(--primary-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);
+          :host {
+            gap: 0;
           }
 
           [more] {
-            position: absolute;
             margin-top: -10px;
-            right: 0px;
-            padding: var(--padding-default);
-            font-size: 2rem;
+          }
+
+          button {
+            border-radius: 0;
           }
         }
 
@@ -103,35 +127,34 @@ let PageActionContextBar = class PageActionContextBar extends connect(store)(Lit
     render() {
         return html `
       ${this.renderActions()}
-      ${this.overflown ? html ` <mwc-icon more @click=${this.showMore.bind(this)}>more_horiz</mwc-icon> ` : html ``}
+      ${this.overflown ? html ` <md-icon more @click=${this.showMore.bind(this)}>more_horiz</md-icon> ` : html ``}
     `;
     }
     renderActions() {
         return html `
       ${this.actions.map(($action, idx) => {
             let { type, title, icon, action, select, href, emphasis } = $action;
-            let { outlined, raised, dense, danger } = emphasis || {};
+            let { outlined, raised, dense, danger, filled } = emphasis || {};
             return type == 'text'
                 ? html ` <span @click=${action}>${title}</span> `
                 : type == 'select' || (select && select.length > 0)
                     ? html `
-              <select @change=${action}>
-                ${select.map((option) => html ` <option>${option}</option> `)}
-              </select>
-            `
+                <select @change=${action}>
+                  ${select.map((option) => html ` <option>${option}</option> `)}
+                </select>
+              `
                     : type == 'link'
                         ? html ` <a href=${href}>${title}</a> `
                         : type == 'icon'
-                            ? html `<mwc-icon @click=${action}>${icon}</mwc-icon>`
+                            ? html `<md-icon @click=${action}>${icon}</md-icon>`
                             : html `
-              <mwc-button
-                label=${title}
-                icon=${icon || 'done_all'}
-                ?dense=${dense}
-                ?raised=${raised}
-                ?outlined=${outlined}
-                ?danger=${danger}
-                @click=${async (e) => {
+                    <button
+                      ?dense=${dense}
+                      ?raised=${raised}
+                      ?outlined=${outlined}
+                      ?danger=${danger}
+                      ?filled=${filled}
+                      @click=${async (e) => {
                                 var _a;
                                 /* all actions should be bloked for a second */
                                 const button = e.currentTarget;
@@ -149,8 +172,11 @@ let PageActionContextBar = class PageActionContextBar extends connect(store)(Lit
                                     button.removeAttribute('working');
                                 }
                             }}
-              ></mwc-button>
-            `;
+                    >
+                      <md-icon>${icon || 'done_all'}</md-icon>
+                      ${title}
+                    </button>
+                  `;
         })}
     `;
     }
@@ -160,8 +186,11 @@ let PageActionContextBar = class PageActionContextBar extends connect(store)(Lit
         }
     }
     stateChanged(state) {
-        var _a, _b, _c;
-        this.actions = ((_c = (_b = (_a = state.route) === null || _a === void 0 ? void 0 : _a.context) === null || _b === void 0 ? void 0 : _b.actions) === null || _c === void 0 ? void 0 : _c.filter((action) => !!action)) || [];
+        var _a;
+        const { actions } = ((_a = state.route) === null || _a === void 0 ? void 0 : _a.context) || {};
+        if (actions) {
+            this.actions = actions.filter((action) => !!action);
+        }
     }
     showMore() {
         openOverlay('context-toolbar-overlay', {
@@ -170,7 +199,7 @@ let PageActionContextBar = class PageActionContextBar extends connect(store)(Lit
     }
 };
 __decorate([
-    state()
+    property({ type: Array })
 ], PageActionContextBar.prototype, "actions", void 0);
 __decorate([
     state()

package/dist/src/tools/ox-page-action-context-bar.js.map

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

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

@@ -1,4 +1,4 @@
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import { LitElement } from 'lit';
 declare const PageActionOverlayTemplate_base: (new (...args: any[]) => {
     _storeUnsubscribe: import("redux").Unsubscribe;
@@ -10,7 +10,7 @@ declare const PageActionOverlayTemplate_base: (new (...args: any[]) => {
 export declare class PageActionOverlayTemplate extends PageActionOverlayTemplate_base {
     static get styles(): import("lit").CSSResult[];
     private actions;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     stateChanged(state: any): void;
 }
 export {};

package/dist/src/tools/ox-page-action-overlay-template.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import { css, html, LitElement } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { connect } from 'pwa-helpers';
@@ -26,19 +26,23 @@ let PageActionOverlayTemplate = class PageActionOverlayTemplate extends connect(
           outline: none;
         }
 
-        mwc-button {
+        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);
+          --md-theme-primary: var(--md-danger-button-primary-color);
+          --md-button-outline-color: var(--md-danger-button-outline-color);
+        }
+
+        [filled] {
+          font-variation-settings: 'FILL' 1;
         }
 
         @media screen and (max-width: 460px) {
-          mwc-button {
-            --mdc-button-horizontal-padding: var(--padding-default);
+          button {
+            --md-button-horizontal-padding: var(--padding-default);
             border-radius: 4px;
           }
         }
@@ -58,26 +62,25 @@ let PageActionOverlayTemplate = class PageActionOverlayTemplate extends connect(
         return html `
       ${this.actions.map(($action, idx) => {
             let { type, title, icon, action, select, href, emphasis } = $action;
-            let { outlined, raised, dense, danger } = emphasis || {};
+            let { outlined, raised, dense, danger, filled } = emphasis || {};
             return type == 'text'
                 ? html ` <span>${title}</span> `
                 : type == 'select' || (select && select.length > 0)
                     ? html `
-              <select @change=${action}>
-                ${select.map((option) => html ` <option>${option}</option> `)}
-              </select>
-            `
+                <select @change=${action}>
+                  ${select.map((option) => 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) => {
+                  <button
+                    ?dense=${dense}
+                    ?raised=${raised}
+                    ?outlined=${outlined}
+                    ?danger=${danger}
+                    ?filled=${filled}
+                    @click=${async (e) => {
                             var _a;
                             /* all actions should be bloked for a second */
                             const button = e.currentTarget;
@@ -96,8 +99,11 @@ let PageActionOverlayTemplate = class PageActionOverlayTemplate extends connect(
                                 window.history.back();
                             }
                         }}
-              ></mwc-button>
-            `;
+                  >
+                    <md-icon>${icon || 'done_all'}</md-icon>
+                    ${title}
+                  </button>
+                `;
         })}
     `;
     }