npm - @operato/context - Versions diffs - 2.0.0-alpha.13 → 2.0.0-alpha.131 - Mend

@operato/context 2.0.0-alpha.13 → 2.0.0-alpha.131

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (66) hide show

package/demo/index.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-GB">
   <head>
     <meta charset="utf-8" />
@@ -16,7 +16,18 @@
       }
     </style>
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
-    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="demo"></div>

package/dist/src/layouts/ox-context-page-toolbar.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
-import '@material/mwc-icon';
-import { LitElement } from 'lit';
+import '@material/web/icon/icon.js';
+import { LitElement, TemplateResult } from 'lit';
+import { TOOL_POSITION } from '@operato/layout';
 declare const ContextPageToolbar_base: (new (...args: any[]) => {
     _storeUnsubscribe: import("redux").Unsubscribe;
     connectedCallback(): void;
@@ -10,8 +11,12 @@ declare const ContextPageToolbar_base: (new (...args: any[]) => {
 export declare class ContextPageToolbar extends ContextPageToolbar_base {
     static get styles(): import("lit").CSSResult[];
     context: any;
-    private tools?;
-    render(): import("lit").TemplateResult<1>;
+    tools?: {
+        position: TOOL_POSITION;
+        template: TemplateResult;
+        context?: string;
+    }[];
+    render(): TemplateResult<1>;
     stateChanged(state: any): void;
 }
 export {};

package/dist/src/layouts/ox-context-page-toolbar.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { connect } from 'pwa-helpers/connect-mixin.js';
 import { TOOL_POSITION } from '@operato/layout';
 import { store } from '@operato/shell';
@@ -20,9 +20,7 @@ let ContextPageToolbar = class ContextPageToolbar extends connect(store)(LitElem
           --context-action-bar-button-margin: 0px;
           --context-action-bar-more-button-border-radius: 2px;
-          --mdc-icon-size: 20px;
-          --mdc-button-height: 20px;
-          --mdc-button-horizontal-padding: 2px;
+          --md-icon-size: 20px;
         }
         :host > div {
@@ -30,17 +28,32 @@ let ContextPageToolbar = class ContextPageToolbar extends connect(store)(LitElem
           flex-direction: row;
           align-items: center;
+          gap: var(--padding-narrow);
         }
-        * {
-          cursor: pointer;
-        }
-        mwc-icon {
-          background-color: var(--theme-white-color);
+        md-icon {
+          background-color: var(--button-background-color, #fafbfc);
           border: 1px solid rgba(var(--primary-color-rgb), 0.5);
-          padding: 1px 2px;
+          border-radius: var(--button-border-radius);
+          padding: var(--iconbtn-padding, 4px);
           color: var(--primary-color);
+          &:hover {
+            background-color: var(--primary-color);
+            color: var(--theme-white-color);
+          }
+        }
+        @media screen and (max-width: 460px) {
+          :host > div {
+            gap: 0;
+          }
+          md-icon {
+            border-radius: 0;
+          }
         }
       `
         ];
@@ -74,14 +87,17 @@ let ContextPageToolbar = class ContextPageToolbar extends connect(store)(LitElem
     `;
     }
     stateChanged(state) {
-        this.tools = state.context.tools;
+        var _a;
+        if (state.context) {
+            this.tools = (_a = state.context) === null || _a === void 0 ? void 0 : _a.tools;
+        }
     }
 };
 __decorate([
     property({ type: Object })
 ], ContextPageToolbar.prototype, "context", void 0);
 __decorate([
-    state()
+    property({ type: Array })
 ], ContextPageToolbar.prototype, "tools", void 0);
 ContextPageToolbar = __decorate([
     customElement('ox-context-page-toolbar')

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ox-context-page-toolbar.js","sourceRoot":"","sources":["../../../src/layouts/ox-context-page-toolbar.ts"],"names":[],"mappings":";AAAA,OAAO,~~oBAAoB~~,CAAA;~~AAE3B~~,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,~~EAAE~~,OAAO,EAAE,MAAM,KAAK,CAAA;~~AACpD~~,OAAO,EAAE,aAAa,EAAE,QAAQ,~~EAAS~~,~~KAAK,EAAE,~~MAAM,mBAAmB,CAAA;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAEtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAG/B,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;IAChE,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAkCF~~;SACF,CAAA;IACH,CAAC;~~IAKD~~,MAAM;QACJ,IAAI,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAA;QAC9E,IAAI,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;YAC3C,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;gBACxD,OAAO,IAAI,CAAA;YACb,CAAC;QACH,CAAC,CAAC,CAAA;QAEF,IAAI,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,aAAa,CAAC,SAAS,CAAC,CAAA;QAClF,IAAI,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,aAAa,CAAC,KAAK,CAAC,CAAA;QAC3E,IAAI,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,aAAa,CAAC,MAAM,CAAC,CAAA;QAC7E,IAAI,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,aAAa,CAAC,IAAI,CAAC,CAAA;QACzE,IAAI,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,aAAa,CAAC,QAAQ,CAAC,CAAA;QAEhF,OAAO,IAAI,CAAA;QACP,aAAa,CAAC,MAAM,GAAG,CAAC;YACxB,CAAC,CAAC,IAAI,CAAA,uBAAuB,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,QAAQ;YACxF,CAAC,CAAC,OAAO;QACT,UAAU,CAAC,MAAM,GAAG,CAAC;YACrB,CAAC,CAAC,IAAI,CAAA,mBAAmB,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,QAAQ;YACjF,CAAC,CAAC,OAAO;QACT,WAAW,CAAC,MAAM,GAAG,CAAC;YACtB,CAAC,CAAC,IAAI,CAAA,oBAAoB,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,QAAQ;YACnF,CAAC,CAAC,OAAO;QACT,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,kBAAkB,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;QAC9G,YAAY,CAAC,MAAM,GAAG,CAAC;YACvB,CAAC,CAAC,IAAI,CAAA,sBAAsB,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,QAAQ;YACtF,CAAC,CAAC,OAAO;KACZ,CAAA;IACH,CAAC;IAED,YAAY,CAAC,KAAU;QACrB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,OAAO,~~CAAC~~,KAAK,CAAA;~~IAClC~~,CAAC;CACF,CAAA;~~AArC6B~~;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAa;~~AACvB~~;~~IAAhB~~,KAAK,EAAE;~~iDAAsB~~;~~AA1CnB~~,kBAAkB;IAD9B,aAAa,CAAC,yBAAyB,CAAC;GAC5B,kBAAkB,~~CA8E9B~~","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-page-toolbar')\nexport class ContextPageToolbar extends connect(store)(LitElement) {\n static get styles() {\n return [\n css`\n :host {\n display: flex;\n flex-direction: row-reverse;\n position: relative;\n\n justify-content: end;\n align-items: center;\n\n --context-action-bar-button-margin: 0px;\n --context-action-bar-more-button-border-radius: 2px;\n\n --~~mdc~~-icon-size: 20px;\n ~~--mdc-button-height: 20px;\n --mdc-button-horizontal-padding: 2px;\n~~ }\n\n :host > div {\n display: flex;\n flex-direction: row;\n\n align-items: center;\n ~~}\n\n * {\n~~ ~~cursor~~: ~~pointer~~;\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 ]\n }\n\n @property({ type: Object }) context: any\n @~~state~~() ~~private~~ tools?: ~~any~~[]\n\n render() {\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 ${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 ? html`<div id=\"rear\">${rearTools.map(tool => html` ${tool.template} `)}</div>` : nothing}\n ${rearEndTools.length > 0\n ? html`<div id=\"rear-end\">${rearEndTools.map(tool => html` ${tool.template} `)}</div>`\n : nothing}\n `\n }\n\n stateChanged(state: any) {\n this.tools = state.context.tools\n }\n}\n"]}
1	+ {"version":3,"file":"ox-context-page-toolbar.js","sourceRoot":"","sources":["../../../src/layouts/ox-context-page-toolbar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, TemplateResult, 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-page-toolbar')\nexport class ContextPageToolbar extends connect(store)(LitElement) {\n static get styles() {\n return [\n css`\n :host {\n display: flex;\n flex-direction: row-reverse;\n position: relative;\n\n justify-content: end;\n align-items: center;\n\n --context-action-bar-button-margin: 0px;\n --context-action-bar-more-button-border-radius: 2px;\n\n --md-icon-size: 20px;\n }\n\n :host > div {\n display: flex;\n flex-direction: row;\n\n align-items: center;\n gap: var(--padding-narrow);\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, 4px);\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 @media screen and (max-width: 460px) {\n :host > div {\n gap: 0;\n }\n\n md-icon {\n border-radius: 0;\n }\n }\n `\n ]\n }\n\n @property({ type: Object }) context: any\n @property({ type: Array }) tools?: {\n position: TOOL_POSITION\n template: TemplateResult\n context?: string\n }[]\n\n render() {\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 ${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 ? html`<div id=\"rear\">${rearTools.map(tool => html` ${tool.template} `)}</div>` : nothing}\n ${rearEndTools.length > 0\n ? html`<div id=\"rear-end\">${rearEndTools.map(tool => html` ${tool.template} `)}</div>`\n : nothing}\n `\n }\n\n stateChanged(state: any) {\n if (state.context) {\n this.tools = state.context?.tools\n }\n }\n}\n"]}

package/dist/src/layouts/ox-context-toolbar.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import '@material/mwc-icon';
-import { LitElement, nothing } from 'lit';
+import '@material/web/icon/icon.js';
+import { LitElement, nothing, PropertyValues } from 'lit';
 declare const ContextToolbar_base: (new (...args: any[]) => {
     _storeUnsubscribe: import("redux").Unsubscribe;
     connectedCallback(): void;
@@ -11,7 +11,9 @@ export declare class ContextToolbar extends ContextToolbar_base {
     static get styles(): import("lit").CSSResult[];
     private context;
     private tools?;
-    render(): import("lit").TemplateResult<1> | typeof nothing;
+    private container;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    updated(changes: PropertyValues<this>): void;
     stateChanged(state: any): void;
 }
 export {};

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

@@ -1,7 +1,7 @@
 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 { customElement, query, state } from 'lit/decorators.js';
 import { connect } from 'pwa-helpers/connect-mixin.js';
 import { TOOL_POSITION } from '@operato/layout';
 import { store } from '@operato/shell';
@@ -11,77 +11,106 @@ 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;
+          --md-icon-size: 20px;
         }
-        #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;
+          gap: var(--padding-narrow);
+          padding: 6px 10px;
+          &:not(:has(> *)) {
+            padding: 0;
+          }
+          div {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            align-items: center;
+            overflow: hidden;
+            padding: 0;
+          }
-        div > * {
-          align-items: center;
+          #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 {
+            border-radius: 0;
+          }
+          div md-icon:first-child {
+            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-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;
+          }
         }
-        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;
+          }
+          div[container] div md-icon {
+            border-radius: 0;
+          }
+          div[container] div md-icon:not(:last-child) {
+            border-right-width: 0;
+          }
         }
       `
         ];
@@ -102,20 +131,53 @@ 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>
     `;
     }
+    updated(changes) {
+        requestAnimationFrame(() => {
+            /*
+              하위 엘리먼트들이 실제로 보일 필요가 없을 때는, 이 엘리먼트도 숨김 처리함.
+              &:not(:has(> *)) 처리로 모두 해결되지 않으므로, 로직 처리로 보완함.
+              &:not(:has(> *)) 가 필요없으나, 남겨 두었음.
+            */
+            if (!this.container) {
+                return;
+            }
+            const children = this.container.querySelectorAll('*');
+            let zero = true;
+            // 모든 하위 엘리먼트의 높이를 확인
+            for (const child of Array.from(children)) {
+                if (child.offsetHeight !== 0) {
+                    zero = false;
+                    break;
+                }
+            }
+            // 모든 하위 엘리먼트의 높이가 0이면 부모 엘리먼트의 display를 none으로 변경
+            this.container.style.padding = zero ? '0' : 'revert-layer';
+        });
+    }
     stateChanged(state) {
-        this.tools = state.context.tools;
-        this.context = state.route.context;
+        if (state.context) {
+            this.tools = state.context.tools || [];
+            this.context = state.route.context || {};
+        }
     }
 };
 __decorate([
@@ -124,6 +186,9 @@ __decorate([
 __decorate([
     state()
 ], ContextToolbar.prototype, "tools", void 0);
+__decorate([
+    query('[container]')
+], ContextToolbar.prototype, "container", void 0);
 ContextToolbar = __decorate([
     customElement('ox-context-toolbar')
 ], ContextToolbar);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ox-context-toolbar.js","sourceRoot":"","sources":["../../../src/layouts/ox-context-toolbar.ts"],"names":[],"mappings":";AAAA,OAAO,~~oBAAoB~~,CAAA;~~AAE3B~~,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,~~EAAE~~,MAAM,KAAK,CAAA;~~AACpD~~,OAAO,EAAE,aAAa,~~EAAmB~~,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAEtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAG/B,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;IAC5D,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2EF~~;SACF,CAAA;IACH,CAAC;~~IAKD~~,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,KAAK,KAAK,EAAE,CAAC;YACnC,OAAO,OAAO,CAAA;QAChB,CAAC;QAED,IAAI,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAA;QAC9E,IAAI,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;YAC3C,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;gBACxD,OAAO,IAAI,CAAA;YACb,CAAC;QACH,CAAC,CAAC,CAAA;QAEF,IAAI,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,aAAa,CAAC,SAAS,CAAC,CAAA;QAClF,IAAI,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,aAAa,CAAC,KAAK,CAAC,CAAA;QAC3E,IAAI,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,aAAa,CAAC,MAAM,CAAC,CAAA;QAC7E,IAAI,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,aAAa,CAAC,IAAI,CAAC,CAAA;QACzE,IAAI,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,aAAa,CAAC,QAAQ,CAAC,CAAA;QAEhF,OAAO,IAAI,CAAA;~~4BACa~~,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC~~;;wBAEvD~~,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC~~;;yBAE/C~~,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC~~;;uBAEnD~~,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC~~;;2BAE3C~~,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC;~~KACxE~~,CAAA;IACH,CAAC;IAED,YAAY,CAAC,KAAU;QACrB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAA;~~QAChC~~,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAA;~~IACpC~~,CAAC;CACF,CAAA;~~AAtCkB~~;IAAhB,KAAK,EAAE;+CAAqB;AACZ;IAAhB,KAAK,EAAE;6CAAsB;~~AAnFnB~~,cAAc;IAD1B,aAAa,CAAC,oBAAoB,CAAC;GACvB,cAAc,~~CAwH1B~~","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"]}
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/web/icon/icon.js'\n\nimport { css, html, LitElement, nothing, PropertyValues } 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 --md-icon-size: 20px;\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: var(--padding-narrow);\n padding: 6px 10px;\n\n &:not(:has(> )) {\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 {\n border-radius: 0;\n }\n\n div md-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\n div md-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 #center {\n flex: 1;\n justify-content: end;\n }\n }\n\n @media only screen and (max-width: 460px) {\n div[container] {\n padding: 0;\n gap: 0;\n }\n\n div[container] div md-icon {\n border-radius: 0;\n }\n\n div[container] div md-icon:not(:last-child) {\n border-right-width: 0;\n }\n }\n `\n ]\n }\n\n @state() private context: any\n @state() private tools?: any[]\n\n @query('[container]') private container!: HTMLDivElement\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 updated(changes: PropertyValues<this>) {\n requestAnimationFrame(() => {\n /\n 하위 엘리먼트들이 실제로 보일 필요가 없을 때는, 이 엘리먼트도 숨김 처리함.\n &:not(:has(> )) 처리로 모두 해결되지 않으므로, 로직 처리로 보완함.\n &:not(:has(> )) 가 필요없으나, 남겨 두었음.\n /\n if (!this.container) {\n return\n }\n\n const children = this.container.querySelectorAll('')\n\n let zero = true\n\n // 모든 하위 엘리먼트의 높이를 확인\n for (const child of Array.from(children)) {\n if ((child as HTMLElement).offsetHeight !== 0) {\n zero = false\n break\n }\n }\n\n // 모든 하위 엘리먼트의 높이가 0이면 부모 엘리먼트의 display를 none으로 변경\n this.container.style.padding = zero ? '0' : 'revert-layer'\n })\n }\n\n stateChanged(state: any) {\n if (state.context) {\n this.tools = state.context.tools \|\| []\n this.context = state.route.context \|\| {}\n }\n }\n}\n"]}

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

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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 > 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 CHANGED Viewed

@@ -1,7 +1,7 @@
-import '@material/mwc-button';
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
+import '@material/web/chips/assist-chip.js';
 import './ox-page-action-overlay-template.js';
-import { LitElement, PropertyValues } from 'lit';
+import { LitElement, nothing, PropertyValues } from 'lit';
 declare const PageActionContextBar_base: (new (...args: any[]) => {
     _storeUnsubscribe: import("redux").Unsubscribe;
     connectedCallback(): void;
@@ -11,15 +11,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> | typeof nothing;
+    renderActions(): import("lit-html").TemplateResult<1>;
     updated(changed: PropertyValues<this>): Promise<void>;
     stateChanged(state: any): void;
     showMore(): void;