@operato/markdown 0.2.49

package/dist/src/ox-markdown.js

@@ -0,0 +1,124 @@
+import { __decorate } from "tslib";
+import { LitElement, css, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators';
+import { MarkdownStyle } from './markdown-style';
+import { ScrollbarStyles } from '@operato/styles';
+import { md } from './markdown';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+let OxMarkdown = class OxMarkdown extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.toc = false;
+        this._headings = [];
+    }
+    render() {
+        return html `
+      ${this.toc ? this.renderToc() : html ``}
+      ${this._html}
+    `;
+    }
+    renderToc() {
+        var toc = this._headings || [];
+        return toc && toc.length > 0
+            ? html `
+          <div id="toc">
+            Table Of Contents
+            <ul>
+              ${toc.map(heading => html ` <li><a @click=${() => heading === null || heading === void 0 ? void 0 : heading.scrollIntoView()}>${heading.textContent}</a></li> `)}
+            </ul>
+          </div>
+        `
+            : html ``;
+    }
+    async updated(changed) {
+        var _a;
+        if (changed.has('src')) {
+            if (this.src) {
+                const response = await fetch(this.src);
+                const content = await response.text();
+                if (!response.ok) {
+                    this._html = html `
+            <h1>Error : ${response.status}</h1>
+            <div>${content}</div>
+          `;
+                }
+                else {
+                    if (((_a = response.headers.get('Content-Type')) === null || _a === void 0 ? void 0 : _a.indexOf('text/markdown')) !== -1) {
+                        this._html = unsafeHTML((await md(content, {
+                            baseUrl: this.src
+                        })) || '');
+                    }
+                    else {
+                        this._html = unsafeHTML(content || '');
+                    }
+                }
+            }
+        }
+        if (changed.has('_html')) {
+            this._headings = Array.from(this.renderRoot.querySelectorAll('h2'));
+        }
+    }
+};
+OxMarkdown.styles = [
+    ScrollbarStyles,
+    MarkdownStyle,
+    css `
+      #toc {
+        position: absolute;
+        max-width: 250px;
+        background-color: var(--theme-white-color);
+        padding: var(--padding-default);
+        right: var(--margin-wide);
+        font: bold var(--fontsize-large) var(--theme-font);
+        color: var(--secondary-text-color);
+      }
+      #toc ul {
+        list-style: circle;
+        margin: var(--margin-default) 0 0 var(--margin-wide);
+        padding: 0;
+      }
+      #toc a {
+        display: inline-block;
+        margin-left: -var(--margin-narrow);
+        padding: var(--padding-narrow) 0;
+        font: normal var(--fontsize-default) var(--theme-font);
+        color: var(--secondary-color);
+        text-decoration: none;
+        cursor: pointer;
+      }
+      #toc a:hover {
+        background-color: var(--theme-white-color);
+        text-decoration: underline;
+        color: var(--primary-color);
+      }
+
+      @media screen and (max-width: 480px) {
+        #toc {
+          background-color: var(--main-section-background-color);
+          border-left: 4px solid var(--primary-color);
+          border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
+          position: relative;
+          width: 100%;
+          max-width: initial;
+          padding: var(--padding-default) var(--padding-default) var(--padding-default) var(--padding-wide);
+        }
+      }
+    `
+];
+__decorate([
+    property({ type: String })
+], OxMarkdown.prototype, "src", void 0);
+__decorate([
+    property({ type: Boolean })
+], OxMarkdown.prototype, "toc", void 0);
+__decorate([
+    state()
+], OxMarkdown.prototype, "_html", void 0);
+__decorate([
+    state()
+], OxMarkdown.prototype, "_headings", void 0);
+OxMarkdown = __decorate([
+    customElement('ox-markdown')
+], OxMarkdown);
+export { OxMarkdown };
+//# sourceMappingURL=ox-markdown.js.map

package/dist/src/ox-markdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-markdown.js","sourceRoot":"","sources":["../../src/ox-markdown.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, TemplateResult, css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators'\n\nimport { DirectiveResult } from 'lit-html/directive'\nimport { MarkdownStyle } from './markdown-style'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { md } from './markdown'\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html'\n\n@customElement('ox-markdown')\nexport class OxMarkdown extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    MarkdownStyle,\n    css`\n      #toc {\n        position: absolute;\n        max-width: 250px;\n        background-color: var(--theme-white-color);\n        padding: var(--padding-default);\n        right: var(--margin-wide);\n        font: bold var(--fontsize-large) var(--theme-font);\n        color: var(--secondary-text-color);\n      }\n      #toc ul {\n        list-style: circle;\n        margin: var(--margin-default) 0 0 var(--margin-wide);\n        padding: 0;\n      }\n      #toc a {\n        display: inline-block;\n        margin-left: -var(--margin-narrow);\n        padding: var(--padding-narrow) 0;\n        font: normal var(--fontsize-default) var(--theme-font);\n        color: var(--secondary-color);\n        text-decoration: none;\n        cursor: pointer;\n      }\n      #toc a:hover {\n        background-color: var(--theme-white-color);\n        text-decoration: underline;\n        color: var(--primary-color);\n      }\n\n      @media screen and (max-width: 480px) {\n        #toc {\n          background-color: var(--main-section-background-color);\n          border-left: 4px solid var(--primary-color);\n          border-bottom: 1px dotted rgba(0, 0, 0, 0.2);\n          position: relative;\n          width: 100%;\n          max-width: initial;\n          padding: var(--padding-default) var(--padding-default) var(--padding-default) var(--padding-wide);\n        }\n      }\n    `\n  ]\n\n  @property({ type: String }) src?: string\n  @property({ type: Boolean }) toc: boolean = false\n\n  @state() _html?: TemplateResult | DirectiveResult | null\n  @state() _headings: any[] = []\n\n  render() {\n    return html`\n      ${this.toc ? this.renderToc() : html``}\n      ${this._html}\n    `\n  }\n\n  renderToc() {\n    var toc = this._headings || []\n\n    return toc && toc.length > 0\n      ? html`\n          <div id=\"toc\">\n            Table Of Contents\n            <ul>\n              ${toc.map(\n                heading => html` <li><a @click=${() => heading?.scrollIntoView()}>${heading.textContent}</a></li> `\n              )}\n            </ul>\n          </div>\n        `\n      : html``\n  }\n\n  async updated(changed: PropertyValues<this>) {\n    if (changed.has('src')) {\n      if (this.src) {\n        const response = await fetch(this.src)\n        const content = await response.text()\n\n        if (!response.ok) {\n          this._html = html`\n            <h1>Error : ${response.status}</h1>\n            <div>${content}</div>\n          `\n        } else {\n          if (response.headers.get('Content-Type')?.indexOf('text/markdown') !== -1) {\n            this._html = unsafeHTML(\n              (await md(content, {\n                baseUrl: this.src\n              } as StructuredSerializeOptions)) || ''\n            )\n          } else {\n            this._html = unsafeHTML(content || '')\n          }\n        }\n      }\n    }\n    \n    if(changed.has('_html')) {\n      this._headings = Array.from(this.renderRoot.querySelectorAll('h2'))\n    }\n  }\n\n}\n"]}

package/dist/src/ox-toolbar-style.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+export declare const style: import("lit-element").CSSResult;

package/dist/src/ox-toolbar-style.js

@@ -0,0 +1,226 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { css } from 'lit-element';
+export const style = css `
+  :host {
+    background-color: var(--edit-toolbar-background-color, #394e64);
+    overflow: hidden;
+  }
+
+  [tools] {
+    display: flex;
+    align-items: center;
+    overflow: none;
+    padding: 0px 10px;
+  }
+
+  [tools] > * {
+    padding: 0px;
+  }
+
+  [tools] > span[button] {
+    min-width: 30px;
+  }
+
+  [tools] > span[padding] {
+    flex: 1;
+  }
+
+  [tools] > .vline {
+    display: block;
+    flex: none;
+    border-left: 1px solid rgba(255, 255, 255, 0.2);
+    border-right: 1px solid rgba(0, 0, 0, 0.15);
+    width: 0px;
+    height: 18px;
+    margin: 0 3px;
+  }
+
+  span[button] {
+    min-height: 35px;
+
+    background: url('/assets/images/icon-htoolbar.png') no-repeat;
+    background-position-x: 50%;
+    opacity: 0.8;
+  }
+  span[button]:hover {
+    opacity: 1;
+    background-color: rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+  }
+
+  #fullscreen,
+  #toggle-property {
+    flex: none;
+  }
+
+  #align-left {
+    background-position-y: 8px;
+  }
+
+  #align-center {
+    background-position-y: -42px;
+  }
+
+  #align-right {
+    background-position-y: -92px;
+  }
+
+  #align-top {
+    background-position-y: -142px;
+  }
+
+  #align-middle {
+    background-position-y: -192px;
+  }
+
+  #align-bottom {
+    background-position-y: -242px;
+  }
+
+  #undo {
+    background-position-y: -592px;
+  }
+
+  #redo {
+    background-position-y: -642px;
+  }
+
+  #front {
+    background-position-y: -292px;
+  }
+
+  #back {
+    background-position-y: -342px;
+  }
+
+  #forward {
+    background-position-y: -392px;
+  }
+
+  #backward {
+    background-position-y: -442px;
+  }
+
+  #symmetry-x {
+    background-position-y: -492px;
+  }
+
+  #symmetry-y {
+    background-position-y: -542px;
+  }
+
+  #group {
+    background-position-y: -492px;
+  }
+
+  #ungroup {
+    background-position-y: -542px;
+  }
+
+  #fullscreen {
+    background-position-y: -692px;
+  }
+
+  #toggle-property {
+    background-position-y: -692px;
+    float: right;
+  }
+
+  #zoomin {
+    background-position-y: -742px;
+  }
+
+  #zoomout {
+    background-position-y: -792px;
+  }
+
+  #fit-scene {
+    background-position-y: -1492px;
+  }
+
+  #cut {
+    background-position-y: -842px;
+  }
+
+  #copy {
+    background-position-y: -892px;
+  }
+
+  #paste {
+    background-position-y: -942px;
+  }
+
+  #delete {
+    background-position-y: -992px;
+  }
+
+  #font-increase {
+    background-position-y: -1042px;
+  }
+
+  #font-decrease {
+    background-position-y: -1092px;
+  }
+
+  #style-copy {
+    background-position-y: -1142px;
+  }
+
+  #context-menu {
+    background-position-y: -692px;
+  }
+
+  #symmetry-x {
+    background-position-y: -1192px;
+  }
+
+  #symmetry-y {
+    background-position-y: -1242px;
+  }
+
+  #rotate-cw {
+    background-position-y: -1292px;
+  }
+
+  #rotate-ccw {
+    background-position-y: -1342px;
+  }
+
+  #distribute-horizontal {
+    background-position-y: -1542px;
+  }
+
+  #distribute-vertical {
+    background-position-y: -1593px;
+  }
+
+  #toggle-property {
+    background-position-y: -1392px;
+  }
+
+  #preview {
+    background-position-y: -1640px;
+  }
+
+  /* bigger buttons */
+  #fullscreen {
+    background: url('/assets/images/icon-fullscreen.png') 50% 10px no-repeat;
+    width: var(--edit-toolbar-bigger-icon-size);
+    height: var(--edit-toolbar-bigger-icon-size);
+    border-left: var(--edit-toolbar-bigger-icon-line);
+  }
+
+  #toggle-property {
+    background: url('/assets/images/icon-collapse.png') 80% 10px no-repeat;
+    width: var(--edit-toolbar-bigger-icon-size);
+    height: var(--edit-toolbar-bigger-icon-size);
+    border-left: var(--edit-toolbar-bigger-icon-line);
+  }
+
+  #toggle-property[active] {
+    background: url(/assets/images/icon-collapse-active.png) 80% 10px no-repeat;
+  }
+`;
+//# sourceMappingURL=ox-toolbar-style.js.map

package/dist/src/ox-toolbar-style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-toolbar-style.js","sourceRoot":"","sources":["../../src/ox-toolbar-style.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAA;AAEjC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4NvB,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css } from 'lit-element'\n\nexport const style = css`\n  :host {\n    background-color: var(--edit-toolbar-background-color, #394e64);\n    overflow: hidden;\n  }\n\n  [tools] {\n    display: flex;\n    align-items: center;\n    overflow: none;\n    padding: 0px 10px;\n  }\n\n  [tools] > * {\n    padding: 0px;\n  }\n\n  [tools] > span[button] {\n    min-width: 30px;\n  }\n\n  [tools] > span[padding] {\n    flex: 1;\n  }\n\n  [tools] > .vline {\n    display: block;\n    flex: none;\n    border-left: 1px solid rgba(255, 255, 255, 0.2);\n    border-right: 1px solid rgba(0, 0, 0, 0.15);\n    width: 0px;\n    height: 18px;\n    margin: 0 3px;\n  }\n\n  span[button] {\n    min-height: 35px;\n\n    background: url('/assets/images/icon-htoolbar.png') no-repeat;\n    background-position-x: 50%;\n    opacity: 0.8;\n  }\n  span[button]:hover {\n    opacity: 1;\n    background-color: rgba(0, 0, 0, 0.1);\n    cursor: pointer;\n  }\n\n  #fullscreen,\n  #toggle-property {\n    flex: none;\n  }\n\n  #align-left {\n    background-position-y: 8px;\n  }\n\n  #align-center {\n    background-position-y: -42px;\n  }\n\n  #align-right {\n    background-position-y: -92px;\n  }\n\n  #align-top {\n    background-position-y: -142px;\n  }\n\n  #align-middle {\n    background-position-y: -192px;\n  }\n\n  #align-bottom {\n    background-position-y: -242px;\n  }\n\n  #undo {\n    background-position-y: -592px;\n  }\n\n  #redo {\n    background-position-y: -642px;\n  }\n\n  #front {\n    background-position-y: -292px;\n  }\n\n  #back {\n    background-position-y: -342px;\n  }\n\n  #forward {\n    background-position-y: -392px;\n  }\n\n  #backward {\n    background-position-y: -442px;\n  }\n\n  #symmetry-x {\n    background-position-y: -492px;\n  }\n\n  #symmetry-y {\n    background-position-y: -542px;\n  }\n\n  #group {\n    background-position-y: -492px;\n  }\n\n  #ungroup {\n    background-position-y: -542px;\n  }\n\n  #fullscreen {\n    background-position-y: -692px;\n  }\n\n  #toggle-property {\n    background-position-y: -692px;\n    float: right;\n  }\n\n  #zoomin {\n    background-position-y: -742px;\n  }\n\n  #zoomout {\n    background-position-y: -792px;\n  }\n\n  #fit-scene {\n    background-position-y: -1492px;\n  }\n\n  #cut {\n    background-position-y: -842px;\n  }\n\n  #copy {\n    background-position-y: -892px;\n  }\n\n  #paste {\n    background-position-y: -942px;\n  }\n\n  #delete {\n    background-position-y: -992px;\n  }\n\n  #font-increase {\n    background-position-y: -1042px;\n  }\n\n  #font-decrease {\n    background-position-y: -1092px;\n  }\n\n  #style-copy {\n    background-position-y: -1142px;\n  }\n\n  #context-menu {\n    background-position-y: -692px;\n  }\n\n  #symmetry-x {\n    background-position-y: -1192px;\n  }\n\n  #symmetry-y {\n    background-position-y: -1242px;\n  }\n\n  #rotate-cw {\n    background-position-y: -1292px;\n  }\n\n  #rotate-ccw {\n    background-position-y: -1342px;\n  }\n\n  #distribute-horizontal {\n    background-position-y: -1542px;\n  }\n\n  #distribute-vertical {\n    background-position-y: -1593px;\n  }\n\n  #toggle-property {\n    background-position-y: -1392px;\n  }\n\n  #preview {\n    background-position-y: -1640px;\n  }\n\n  /* bigger buttons */\n  #fullscreen {\n    background: url('/assets/images/icon-fullscreen.png') 50% 10px no-repeat;\n    width: var(--edit-toolbar-bigger-icon-size);\n    height: var(--edit-toolbar-bigger-icon-size);\n    border-left: var(--edit-toolbar-bigger-icon-line);\n  }\n\n  #toggle-property {\n    background: url('/assets/images/icon-collapse.png') 80% 10px no-repeat;\n    width: var(--edit-toolbar-bigger-icon-size);\n    height: var(--edit-toolbar-bigger-icon-size);\n    border-left: var(--edit-toolbar-bigger-icon-line);\n  }\n\n  #toggle-property[active] {\n    background: url(/assets/images/icon-collapse-active.png) 80% 10px no-repeat;\n  }\n`\n"]}

package/dist/src/ox-toolbar.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+export {};

package/dist/src/ox-toolbar.js

@@ -0,0 +1,122 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+const _isMacOS = navigator.userAgent.indexOf('Mac') != -1;
+let OxToolbar = class OxToolbar extends LitElement {
+    render() {
+        return html `
+      <slot></slot>
+      `;
+    }
+    firstUpdated() {
+        this.addEventListener('mousewheel', this.onWheelEvent.bind(this), false);
+    }
+    onWheelEvent(e) {
+        var delta = Math.max(-1, Math.min(1, e.deltaY || -e.detail));
+        this.scrollLeft -= delta * 40;
+        e.preventDefault();
+    }
+    getSymbol(key) {
+        var symbol;
+        switch (key) {
+            case 'cmd':
+            case 'ctrl':
+                symbol = _isMacOS ? '⌘' : 'Ctrl';
+                break;
+            case 'shift':
+                symbol = _isMacOS ? '⇧' : 'Shift';
+                break;
+            case 'alt':
+            case 'option':
+                symbol = _isMacOS ? '⌥' : 'Alt';
+                break;
+            case 'backspace':
+                symbol = _isMacOS ? '⌫' : 'BackSpace';
+                break;
+            case 'delete':
+                symbol = _isMacOS ? '⌦' : 'Del';
+                break;
+            default:
+                symbol = key.toUpperCase();
+                break;
+        }
+        return symbol;
+    }
+    getShortcutString() {
+        var symbols = [];
+        for (var i = 0; i < arguments.length; i++) {
+            symbols.push(this.getSymbol(arguments[i]));
+        }
+        return symbols.join(_isMacOS ? '' : '+');
+    }
+    onShortcut(e) {
+        var ctrlKey = _isMacOS ? e.metaKey : e.ctrlKey;
+        var altKey = e.altKey;
+        var shiftKey = e.shiftKey;
+        var defaultPrevent = ctrlKey || altKey;
+        switch (e.code) {
+            default:
+                return false;
+        }
+        if (defaultPrevent)
+            e.preventDefault();
+        return true;
+    }
+};
+OxToolbar.styles = [css `  
+    :host {
+      background-color: var(--edit-toolbar-background-color, #394e64);
+      overflow: hidden;
+    }
+
+    [tools] {
+      display: flex;
+      align-items: center;
+      overflow: none;
+      padding: 0px 10px;
+    }
+
+    [tools] > * {
+      padding: 0px;
+    }
+
+    [tools] > span[button] {
+      min-width: 30px;
+    }
+
+    [tools] > span[padding] {
+      flex: 1;
+    }
+
+    [tools] > .vline {
+      display: block;
+      flex: none;
+      border-left: 1px solid rgba(255, 255, 255, 0.2);
+      border-right: 1px solid rgba(0, 0, 0, 0.15);
+      width: 0px;
+      height: 18px;
+      margin: 0 3px;
+    }
+
+    span[button] {
+      min-height: 35px;
+
+      background: url('/assets/images/icon-htoolbar.png') no-repeat;
+      background-position-x: 50%;
+      opacity: 0.8;
+    }
+
+    span[button]:hover {
+      opacity: 1;
+      background-color: rgba(0, 0, 0, 0.1);
+      cursor: pointer;
+    }
+  `];
+OxToolbar = __decorate([
+    customElement('ox-toolbar')
+], OxToolbar);
+customElements.define('process-edit-toolbar', OxToolbar);
+//# sourceMappingURL=ox-toolbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-toolbar.js","sourceRoot":"","sources":["../../src/ox-toolbar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nconst _isMacOS = navigator.userAgent.indexOf('Mac') != -1\n\n@customElement('ox-toolbar')\nclass OxToolbar extends LitElement {\n  static styles = [css`  \n    :host {\n      background-color: var(--edit-toolbar-background-color, #394e64);\n      overflow: hidden;\n    }\n\n    [tools] {\n      display: flex;\n      align-items: center;\n      overflow: none;\n      padding: 0px 10px;\n    }\n\n    [tools] > * {\n      padding: 0px;\n    }\n\n    [tools] > span[button] {\n      min-width: 30px;\n    }\n\n    [tools] > span[padding] {\n      flex: 1;\n    }\n\n    [tools] > .vline {\n      display: block;\n      flex: none;\n      border-left: 1px solid rgba(255, 255, 255, 0.2);\n      border-right: 1px solid rgba(0, 0, 0, 0.15);\n      width: 0px;\n      height: 18px;\n      margin: 0 3px;\n    }\n\n    span[button] {\n      min-height: 35px;\n\n      background: url('/assets/images/icon-htoolbar.png') no-repeat;\n      background-position-x: 50%;\n      opacity: 0.8;\n    }\n\n    span[button]:hover {\n      opacity: 1;\n      background-color: rgba(0, 0, 0, 0.1);\n      cursor: pointer;\n    }\n  `]\n  \n  render() {\n    return html`\n      <slot></slot>\n      `\n  }\n  \n  firstUpdated() {\n    this.addEventListener('mousewheel', this.onWheelEvent.bind(this), false)\n  }\n\n  onWheelEvent(e: Event) {\n    var delta = Math.max(-1, Math.min(1, (e as WheelEvent).deltaY || -(e as WheelEvent).detail))\n    this.scrollLeft -= delta * 40\n\n    e.preventDefault()\n  }\n\n  getSymbol(key: string) {\n    var symbol\n    switch (key) {\n      case 'cmd':\n      case 'ctrl':\n        symbol = _isMacOS ? '⌘' : 'Ctrl'\n        break\n      case 'shift':\n        symbol = _isMacOS ? '⇧' : 'Shift'\n        break\n      case 'alt':\n      case 'option':\n        symbol = _isMacOS ? '⌥' : 'Alt'\n        break\n      case 'backspace':\n        symbol = _isMacOS ? '⌫' : 'BackSpace'\n        break\n      case 'delete':\n        symbol = _isMacOS ? '⌦' : 'Del'\n        break\n      default:\n        symbol = key.toUpperCase()\n        break\n    }\n\n    return symbol\n  }\n\n  getShortcutString() {\n    var symbols = []\n    for (var i = 0; i < arguments.length; i++) {\n      symbols.push(this.getSymbol(arguments[i]))\n    }\n\n    return symbols.join(_isMacOS ? '' : '+')\n  }\n\n  onShortcut(e: KeyboardEvent) {\n    var ctrlKey = _isMacOS ? e.metaKey : e.ctrlKey\n    var altKey = e.altKey\n    var shiftKey = e.shiftKey\n\n    var defaultPrevent = ctrlKey || altKey\n\n    switch (e.code) {\n\n      default:\n        return false\n    }\n\n    if (defaultPrevent) e.preventDefault()\n    return true\n  }\n\n}\n\ncustomElements.define('process-edit-toolbar', OxToolbar)\n"]}

package/dist/stories/index.stories.d.ts

@@ -0,0 +1,33 @@
+import '../src/ox-layout';
+import { TemplateResult } from 'lit';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        title: {
+            control: string;
+        };
+        counter: {
+            control: string;
+        };
+        textColor: {
+            control: string;
+        };
+    };
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+    title?: string;
+    counter?: number;
+    textColor?: string;
+    slot?: TemplateResult;
+}
+export declare const Regular: Story<ArgTypes>;
+export declare const CustomTitle: Story<ArgTypes>;
+export declare const CustomCounter: Story<ArgTypes>;
+export declare const SlottedContent: Story<ArgTypes>;

package/dist/stories/index.stories.js

@@ -0,0 +1,33 @@
+import '../src/ox-layout';
+import { html } from 'lit';
+export default {
+    title: 'ContextMenu',
+    component: 'ox-layout',
+    argTypes: {
+        title: { control: 'text' },
+        counter: { control: 'number' },
+        textColor: { control: 'color' }
+    }
+};
+const Template = ({ title = 'Hello world', counter = 5, textColor, slot }) => html `
+  <ox-layout style="--ox-layout-text-color: ${textColor || 'black'}" .title=${title} .counter=${counter}>
+    ${slot}
+  </ox-layout>
+`;
+export const Regular = Template.bind({});
+export const CustomTitle = Template.bind({});
+CustomTitle.args = {
+    title: 'My title'
+};
+export const CustomCounter = Template.bind({});
+CustomCounter.args = {
+    counter: 123456
+};
+export const SlottedContent = Template.bind({});
+SlottedContent.args = {
+    slot: html `<p>Slotted content</p>`
+};
+SlottedContent.argTypes = {
+    slot: { table: { disable: true } }
+};
+//# sourceMappingURL=index.stories.js.map

package/dist/stories/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../stories/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAE3C,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;KAChC;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,aAAa,EAAE,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,IAAI,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;8CAC/D,SAAS,IAAI,OAAO,YAAY,KAAK,aAAa,OAAO;MACjG,IAAI;;CAET,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC5C,WAAW,CAAC,IAAI,GAAG;IACjB,KAAK,EAAE,UAAU;CAClB,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC9C,aAAa,CAAC,IAAI,GAAG;IACnB,OAAO,EAAE,MAAM;CAChB,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC/C,cAAc,CAAC,IAAI,GAAG;IACpB,IAAI,EAAE,IAAI,CAAA,wBAAwB;CACnC,CAAA;AACD,cAAc,CAAC,QAAQ,GAAG;IACxB,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACnC,CAAA","sourcesContent":["import '../src/ox-layout';\n\nimport { html, TemplateResult } from 'lit';\n\nexport default {\n  title: 'ContextMenu',\n  component: 'ox-layout',\n  argTypes: {\n    title: { control: 'text' },\n    counter: { control: 'number' },\n    textColor: { control: 'color' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  title?: string\n  counter?: number\n  textColor?: string\n  slot?: TemplateResult\n}\n\nconst Template: Story<ArgTypes> = ({ title = 'Hello world', counter = 5, textColor, slot }: ArgTypes) => html`\n  <ox-layout style=\"--ox-layout-text-color: ${textColor || 'black'}\" .title=${title} .counter=${counter}>\n    ${slot}\n  </ox-layout>\n`\n\nexport const Regular = Template.bind({})\n\nexport const CustomTitle = Template.bind({})\nCustomTitle.args = {\n  title: 'My title'\n}\n\nexport const CustomCounter = Template.bind({})\nCustomCounter.args = {\n  counter: 123456\n}\n\nexport const SlottedContent = Template.bind({})\nSlottedContent.args = {\n  slot: html`<p>Slotted content</p>`\n}\nSlottedContent.argTypes = {\n  slot: { table: { disable: true } }\n}\n"]}

package/dist/test/ox-layout.test.d.ts

@@ -0,0 +1 @@
+import '../src/ox-layout';

package/dist/test/ox-layout.test.js

@@ -0,0 +1,24 @@
+import '../src/ox-layout';
+import { html } from 'lit';
+import { expect, fixture } from '@open-wc/testing';
+describe('Layout', () => {
+    it('has a default title "Hey there" and counter 5', async () => {
+        const el = await fixture(html `<ox-layout></ox-layout>`);
+        expect(el.title).to.equal('Hey there');
+        // expect(el.counter).to.equal(5)
+    });
+    it('increases the counter on button click', async () => {
+        const el = await fixture(html `<ox-layout></ox-layout>`);
+        el.shadowRoot.querySelector('button').click();
+        // expect(el.counter).to.equal(6)
+    });
+    it('can override the title via attribute', async () => {
+        const el = await fixture(html `<ox-layout title="attribute title"></ox-layout>`);
+        expect(el.title).to.equal('attribute title');
+    });
+    it('passes the a11y audit', async () => {
+        const el = await fixture(html `<ox-layout></ox-layout>`);
+        await expect(el).shadowDom.to.be.accessible();
+    });
+});
+//# sourceMappingURL=ox-layout.test.js.map

package/dist/test/ox-layout.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-layout.test.js","sourceRoot":"","sources":["../../test/ox-layout.test.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAInD,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACtB,EAAE,CAAC,+CAA+C,EAAE,KAAK,IAAI,EAAE;QAC7D,MAAM,EAAE,GAAG,MAAM,OAAO,CAAW,IAAI,CAAA,yBAAyB,CAAC,CAAA;QAEjE,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAA;QACtC,iCAAiC;IACnC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,uCAAuC,EAAE,KAAK,IAAI,EAAE;QACrD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAW,IAAI,CAAA,yBAAyB,CAAC,CAAA;QACjE,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,QAAQ,CAAE,CAAC,KAAK,EAAE,CAAA;QAE/C,iCAAiC;IACnC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAW,IAAI,CAAA,iDAAiD,CAAC,CAAA;QAEzF,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAA;IAC9C,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,uBAAuB,EAAE,KAAK,IAAI,EAAE;QACrC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAW,IAAI,CAAA,yBAAyB,CAAC,CAAA;QAEjE,MAAM,MAAM,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,EAAE,CAAA;IAC/C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import '../src/ox-layout';\n\nimport { html } from 'lit';\n\nimport { expect, fixture } from '@open-wc/testing';\n\nimport { OxLayout } from '../src/ox-layout';\n\ndescribe('Layout', () => {\n  it('has a default title \"Hey there\" and counter 5', async () => {\n    const el = await fixture<OxLayout>(html`<ox-layout></ox-layout>`)\n\n    expect(el.title).to.equal('Hey there')\n    // expect(el.counter).to.equal(5)\n  })\n\n  it('increases the counter on button click', async () => {\n    const el = await fixture<OxLayout>(html`<ox-layout></ox-layout>`)\n    el.shadowRoot!.querySelector('button')!.click()\n\n    // expect(el.counter).to.equal(6)\n  })\n\n  it('can override the title via attribute', async () => {\n    const el = await fixture<OxLayout>(html`<ox-layout title=\"attribute title\"></ox-layout>`)\n\n    expect(el.title).to.equal('attribute title')\n  })\n\n  it('passes the a11y audit', async () => {\n    const el = await fixture<OxLayout>(html`<ox-layout></ox-layout>`)\n\n    await expect(el).shadowDom.to.be.accessible()\n  })\n})\n"]}