@operato/markdown 0.2.49

package/.editorconfig

@@ -0,0 +1,29 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.json]
+indent_size = 2
+
+[*.{html,js,md}]
+block_comment_start = /**
+block_comment = *
+block_comment_end = */

package/.storybook/main.js

@@ -0,0 +1,3 @@
+module.exports = {
+  stories: ['../dist/stories/**/*.stories.{js,md,mdx}'],
+};

package/.storybook/server.mjs

@@ -0,0 +1,8 @@
+import { storybookPlugin } from '@web/dev-server-storybook';
+import baseConfig from '../web-dev-server.config.mjs';
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  ...baseConfig,
+  open: '/',
+  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
+});

package/CHANGELOG.md

@@ -0,0 +1,31 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+### [0.2.49](https://github.com/hatiolab/operato/compare/v0.2.48...v0.2.49) (2021-12-14)
+
+
+### :rocket: New Features
+
+* add ox-markdown ([eb8e528](https://github.com/hatiolab/operato/commit/eb8e528bad1c9c22eb7ccfaf52949d9c9f533777))
+
+
+
+### [0.2.48](https://github.com/hatiolab/operato/compare/v0.2.47...v0.2.48) (2021-12-14)
+
+**Note:** Version bump only for package @operato/markdown
+
+### [0.2.47](https://github.com/hatiolab/operato/compare/v0.2.46...v0.2.47) (2021-12-13)
+
+**Note:** Version bump only for package @operato/markdown
+
+### [0.2.46](https://github.com/hatiolab/operato/compare/v0.2.45...v0.2.46) (2021-12-12)
+
+### :rocket: New Features
+
+- add markdown and oops ([56737fa](https://github.com/hatiolab/operato/commit/56737fa117ed2135e279ca0f1e4c969daddf7b34))
+
+### :bug: Bug Fix
+
+- set all module version to 0.2.45 ([40cea11](https://github.com/hatiolab/operato/commit/40cea11fab09ab3fb96bcd7db797abd13b23c216))

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) hatiolab.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/assets/scripts/markdown-webworker.js

@@ -0,0 +1,30 @@
+importScripts('/node_modules/marked/marked.min.js')
+
+var TOPIC_OFFSET = '/helps/'.length
+
+marked.use({
+  renderer: {
+    link: function link(href, title, text) {
+      var baseUrl = new URL(this.options.baseUrl, location.origin)
+      var targetUrl = new URL(href, baseUrl)
+      var outside = targetUrl.origin !== location.origin
+
+      if (!outside) {
+        var pathname = targetUrl.pathname
+        if (pathname.endsWith('.md') || pathname.endsWith('.markdown')) {
+          var url = new URL(location.origin + '/help')
+          url.searchParams.append('topic', pathname.slice(TOPIC_OFFSET, pathname.lastIndexOf('.')))
+
+          href = url.href
+        }
+      }
+
+      return `<a href="${href}" ${title ? `title="${title}"` : ''} ${outside ? 'target="_blank"' : ''}>${text}</a>`
+    }
+  }
+})
+
+onmessage = e => {
+  const { content, options } = e.data
+  postMessage(marked.parse(content, options))
+}

package/demo/index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      body {
+        background: #fafafa;
+        --ox-checkbox-size: 12px;
+      }
+
+      #demo {
+        position: relative;
+        height: 300px;
+        background-color: lightgray;
+        vertical-align: middle;
+      }
+    </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" />
+  </head>
+  <body>
+    <div id="demo"></div>
+
+    <script type="module">
+      import { html, render } from 'lit'
+      import '../dist/src/ox-markdown.js'
+      import '@material/mwc-icon'
+
+      const parent = document.querySelector('#demo')
+
+      render(html`clike anywhere in this box to show markdown.`, parent)
+    </script>
+  </body>
+</html>

package/dist/src/index.d.ts

@@ -0,0 +1 @@
+export * from './ox-markdown';

package/dist/src/index.js

@@ -0,0 +1,2 @@
+export * from './ox-markdown';
+//# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA","sourcesContent":["export * from './ox-markdown'\n"]}

package/dist/src/markdown-style.d.ts

@@ -0,0 +1 @@
+export declare const MarkdownStyle: import("lit").CSSResult;

package/dist/src/markdown-style.js

@@ -0,0 +1,122 @@
+import { css } from 'lit';
+export const MarkdownStyle = css `
+  h1 {
+    background-color: var(--help-panel-title-background-color);
+    margin: var(--help-panel-title-margin);
+    padding: var(--help-panel-title-padding);
+    font-size: var(--help-panel-h1-title-font-size);
+    text-transform: capitalize;
+    color: var(--help-panel-h1-title-color);
+  }
+  h2 {
+    margin: var(--help-panel-title-margin);
+    padding: var(--help-panel-title-padding);
+    font-size: var(--help-panel-h2-title-font-size);
+    color: var(--help-panel-h2-title-color);
+    text-transform: capitalize;
+  }
+  h3 {
+    margin: var(--help-panel-title-margin);
+    padding: var(--help-panel-title-padding);
+    font-size: var(--help-panel-h3-title-font-size);
+    color: var(--help-panel-h3-title-color);
+  }
+  mwc-icon {
+    vertical-align: middle;
+  }
+
+  img {
+    display: block;
+    margin: var(--margin-narrow) var(--margin-default);
+    max-width: 100%;
+  }
+  img[src*='#icon25'] {
+    width: 25px;
+    height: 25px;
+  }
+  img[src*='#icon50'] {
+    width: 50px;
+    height: 50px;
+  }
+  img[src*='#icon100'] {
+    width: 100px;
+    height: 100px;
+  }
+  img[src*='#icon25inlined'],
+  img[src*='#icon50inlined'],
+  img[src*='#icon100inlined'] {
+    display: inline-block;
+    margin: var(--margin-narrow);
+  }
+  p {
+    margin: var(--help-panel-paragraph-margin);
+    font-size: var(--help-panel-font-size);
+  }
+  [focusBox] {
+    display: block;
+    padding: var(--help-panel-focusBox-padding);
+    border: var(--help-panel-focusBox-border);
+    border-radius: var(--help-panel-focusBox-border-radius);
+    background-color: var(--help-panel-focusBox-background-color);
+    color: var(--help-panel-focusBox-color);
+  }
+
+  [subtitle] {
+    font-weight: bold;
+  }
+  [subtitle]::before {
+    content: '';
+    width: 7px;
+    height: 7px;
+    display: inline-block;
+    border: 3px solid var(--theme-white-color);
+    border-radius: 50%;
+    margin-right: var(--margin-narrow);
+  }
+  p + ol,
+  p + ul {
+    font-size: var(--help-panel-content-font-size);
+  }
+  ol,
+  ul {
+    padding: 0 0 0 30px;
+  }
+  ol li,
+  ul li {
+    margin: 0 0 2px 0;
+  }
+  a {
+    margin-bottom: 0 !important;
+    color: var(--help-panel-a-color);
+    font-size: var(--fontsize-default);
+    text-decoration: underline;
+  }
+  a mwc-icon {
+    font-size: var(--help-panel-a-icon-size);
+    margin: 0;
+  }
+  a:hover {
+    background-color: var(--opacity-light-dark-color);
+    font-weight: bold;
+  }
+
+  table {
+    border-collapse: collapse;
+    border: var(--border-dark-color);
+    font-size: 0.9em;
+  }
+  th {
+    border-top: 3px solid var(--primary-color);
+    background-color: var(--main-section-background-color);
+    color: var(--secondary-color);
+  }
+  th,
+  td {
+    border-bottom: var(--border-dark-color);
+    padding: var(--padding-narrow);
+  }
+  tr:nth-child(even) {
+    background-color: #f6f6f6;
+  }
+`;
+//# sourceMappingURL=markdown-style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-style.js","sourceRoot":"","sources":["../../src/markdown-style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuH/B,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const MarkdownStyle = css`\n  h1 {\n    background-color: var(--help-panel-title-background-color);\n    margin: var(--help-panel-title-margin);\n    padding: var(--help-panel-title-padding);\n    font-size: var(--help-panel-h1-title-font-size);\n    text-transform: capitalize;\n    color: var(--help-panel-h1-title-color);\n  }\n  h2 {\n    margin: var(--help-panel-title-margin);\n    padding: var(--help-panel-title-padding);\n    font-size: var(--help-panel-h2-title-font-size);\n    color: var(--help-panel-h2-title-color);\n    text-transform: capitalize;\n  }\n  h3 {\n    margin: var(--help-panel-title-margin);\n    padding: var(--help-panel-title-padding);\n    font-size: var(--help-panel-h3-title-font-size);\n    color: var(--help-panel-h3-title-color);\n  }\n  mwc-icon {\n    vertical-align: middle;\n  }\n\n  img {\n    display: block;\n    margin: var(--margin-narrow) var(--margin-default);\n    max-width: 100%;\n  }\n  img[src*='#icon25'] {\n    width: 25px;\n    height: 25px;\n  }\n  img[src*='#icon50'] {\n    width: 50px;\n    height: 50px;\n  }\n  img[src*='#icon100'] {\n    width: 100px;\n    height: 100px;\n  }\n  img[src*='#icon25inlined'],\n  img[src*='#icon50inlined'],\n  img[src*='#icon100inlined'] {\n    display: inline-block;\n    margin: var(--margin-narrow);\n  }\n  p {\n    margin: var(--help-panel-paragraph-margin);\n    font-size: var(--help-panel-font-size);\n  }\n  [focusBox] {\n    display: block;\n    padding: var(--help-panel-focusBox-padding);\n    border: var(--help-panel-focusBox-border);\n    border-radius: var(--help-panel-focusBox-border-radius);\n    background-color: var(--help-panel-focusBox-background-color);\n    color: var(--help-panel-focusBox-color);\n  }\n\n  [subtitle] {\n    font-weight: bold;\n  }\n  [subtitle]::before {\n    content: '';\n    width: 7px;\n    height: 7px;\n    display: inline-block;\n    border: 3px solid var(--theme-white-color);\n    border-radius: 50%;\n    margin-right: var(--margin-narrow);\n  }\n  p + ol,\n  p + ul {\n    font-size: var(--help-panel-content-font-size);\n  }\n  ol,\n  ul {\n    padding: 0 0 0 30px;\n  }\n  ol li,\n  ul li {\n    margin: 0 0 2px 0;\n  }\n  a {\n    margin-bottom: 0 !important;\n    color: var(--help-panel-a-color);\n    font-size: var(--fontsize-default);\n    text-decoration: underline;\n  }\n  a mwc-icon {\n    font-size: var(--help-panel-a-icon-size);\n    margin: 0;\n  }\n  a:hover {\n    background-color: var(--opacity-light-dark-color);\n    font-weight: bold;\n  }\n\n  table {\n    border-collapse: collapse;\n    border: var(--border-dark-color);\n    font-size: 0.9em;\n  }\n  th {\n    border-top: 3px solid var(--primary-color);\n    background-color: var(--main-section-background-color);\n    color: var(--secondary-color);\n  }\n  th,\n  td {\n    border-bottom: var(--border-dark-color);\n    padding: var(--padding-narrow);\n  }\n  tr:nth-child(even) {\n    background-color: #f6f6f6;\n  }\n`\n"]}

package/dist/src/markdown.d.ts

@@ -0,0 +1 @@
+export declare function md(markdown: string, options: StructuredSerializeOptions): Promise<any>;

package/dist/src/markdown.js

@@ -0,0 +1,18 @@
+const worker = new Worker('/node_modules/@operato/markdown/assets/scripts/markdown-webworker.js');
+const TIMEOUT_LIMIT = 20000;
+export async function md(markdown, options) {
+    return new Promise((resolve, reject) => {
+        var timeout = setTimeout(() => {
+            reject('Marked took too long!');
+        }, TIMEOUT_LIMIT);
+        worker.onmessage = e => {
+            clearTimeout(timeout);
+            resolve(e.data);
+        };
+        worker.postMessage({
+            content: markdown,
+            options
+        });
+    });
+}
+//# sourceMappingURL=markdown.js.map

package/dist/src/markdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown.js","sourceRoot":"","sources":["../../src/markdown.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,GAAG,IAAI,MAAM,CAAC,sEAAsE,CAAC,CAAA;AACjG,MAAM,aAAa,GAAG,KAAK,CAAA;AAE3B,MAAM,CAAC,KAAK,UAAU,EAAE,CAAC,QAAgB,EAAE,OAAmC;IAC5E,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;QACrC,IAAI,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YAC5B,MAAM,CAAC,uBAAuB,CAAC,CAAA;QACjC,CAAC,EAAE,aAAa,CAAC,CAAA;QAEjB,MAAM,CAAC,SAAS,GAAG,CAAC,CAAC,EAAE;YACrB,YAAY,CAAC,OAAO,CAAC,CAAA;YACrB,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAA;QACjB,CAAC,CAAA;QAED,MAAM,CAAC,WAAW,CAAC;YACjB,OAAO,EAAE,QAAQ;YACjB,OAAO;SACR,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC","sourcesContent":["const worker = new Worker('/node_modules/@operato/markdown/assets/scripts/markdown-webworker.js')\nconst TIMEOUT_LIMIT = 20000\n\nexport async function md(markdown: string, options: StructuredSerializeOptions): Promise<any> {\n  return new Promise((resolve, reject) => {\n    var timeout = setTimeout(() => {\n      reject('Marked took too long!')\n    }, TIMEOUT_LIMIT)\n\n    worker.onmessage = e => {\n      clearTimeout(timeout)\n      resolve(e.data)\n    }\n\n    worker.postMessage({\n      content: markdown,\n      options\n    })\n  })\n}\n"]}

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

@@ -0,0 +1,45 @@
+import { LitElement } from 'lit';
+export declare class OxLayout extends LitElement {
+    static styles: import("lit").CSSResult[];
+    _parent?: Element;
+    render(): import("lit-html").TemplateResult<1>;
+    protected _onfocusout: (e: FocusEvent) => void;
+    protected _onkeydown: (e: KeyboardEvent) => void;
+    protected _onkeyup: (e: KeyboardEvent) => void;
+    protected _onclick: (e: MouseEvent) => void;
+    protected _onclose: (e: Event) => void;
+    protected _oncollapse: (e: Event) => void;
+    protected _onwindowblur: (e: Event) => void;
+    connectedCallback(): void;
+    /**
+     * Configuration for opening ox-layout
+     *
+     * @typedef {Object} PopupOpenOptions
+     * @property {HTMLTemplate} template HTMLTemplate to be displayed inside the layout
+     * @property {Number} top The position-top where the pop-up will be displayed
+     * @property {Number} left The position-left where the pop-up will be displayed
+     * @property {HTMLElement} parent Popup's parent element
+     */
+    /**
+     * Open Popup
+     *
+     * @param {PopupOpenOptions}
+     */
+    static open({ template, top, left, right, bottom, parent }: {
+        template: unknown;
+        top?: number;
+        left?: number;
+        right?: number;
+        bottom?: number;
+        parent?: Element | null;
+    }): void;
+    open({ left, top, right, bottom, silent }: {
+        left?: number;
+        top?: number;
+        right?: number;
+        bottom?: number;
+        silent?: boolean;
+    }): void;
+    guaranteeFocus(): void;
+    close(): void;
+}

package/dist/src/ox-layout.js

@@ -0,0 +1,148 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { render } from 'lit-html';
+import { customElement, state } from 'lit/decorators.js';
+import { ScrollbarStyles } from '@operato/styles';
+let OxLayout = class OxLayout extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._onfocusout = function (e) {
+            const to = e.relatedTarget;
+            if (!this.contains(to)) {
+                /* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-popup은 닫혀야 한다. */
+                // @ts-ignore for debug
+                !window.POPUP_DEBUG && this.close();
+            }
+        }.bind(this);
+        this._onkeydown = function (e) {
+            e.stopPropagation();
+            switch (e.key) {
+                case 'Esc': // for IE/Edge
+                case 'Escape':
+                    this.close();
+                    break;
+            }
+        }.bind(this);
+        this._onkeyup = function (e) {
+            e.stopPropagation();
+        }.bind(this);
+        this._onclick = function (e) {
+            e.stopPropagation();
+        }.bind(this);
+        this._onclose = function (e) {
+            this.close();
+        }.bind(this);
+        this._oncollapse = function (e) {
+            e.stopPropagation();
+            this.close();
+        }.bind(this);
+        this._onwindowblur = function (e) {
+            // @ts-ignore for debug
+            !window.POPUP_DEBUG && this.close();
+        }.bind(this);
+    }
+    render() {
+        return html ` <slot> </slot> `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('focusout', this._onfocusout);
+        this.addEventListener('keydown', this._onkeydown);
+        this.addEventListener('keyup', this._onkeyup);
+        this.addEventListener('click', this._onclick);
+        this.addEventListener('ox-close', this._onclose);
+        this.addEventListener('ox-collapse', this._oncollapse);
+        this.setAttribute('tabindex', '0'); // make this element focusable
+        this.guaranteeFocus();
+    }
+    /**
+     * Configuration for opening ox-layout
+     *
+     * @typedef {Object} PopupOpenOptions
+     * @property {HTMLTemplate} template HTMLTemplate to be displayed inside the layout
+     * @property {Number} top The position-top where the pop-up will be displayed
+     * @property {Number} left The position-left where the pop-up will be displayed
+     * @property {HTMLElement} parent Popup's parent element
+     */
+    /**
+     * Open Popup
+     *
+     * @param {PopupOpenOptions}
+     */
+    static open({ template, top, left, right, bottom, parent }) {
+        const owner = parent || document.body;
+        const target = document.createElement('ox-layout');
+        render(template, target);
+        target._parent = owner;
+        owner.appendChild(target);
+        target.open({ top, left, right, bottom });
+    }
+    open({ left, top, right, bottom, silent = false }) {
+        if (left !== undefined)
+            this.style.left = `${left}px`;
+        if (top !== undefined)
+            this.style.top = `${top}px`;
+        if (right !== undefined)
+            this.style.right = `${right}px`;
+        if (bottom !== undefined)
+            this.style.bottom = `${bottom}px`;
+        this.setAttribute('active', '');
+        !silent && this.guaranteeFocus();
+        /* When the window is out of focus, all pop-ups should disappear. */
+        window.addEventListener('blur', this._onwindowblur);
+    }
+    guaranteeFocus() {
+        const focusible = this.querySelector(':scope > button, :scope > [href], :scope > input, :scope > select, :scope > textarea, :scope > [tabindex]:not([tabindex="-1"])');
+        if (focusible) {
+            ;
+            focusible.focus();
+        }
+        else {
+            this.focus();
+        }
+    }
+    close() {
+        this.removeAttribute('active');
+        window.removeEventListener('blur', this._onwindowblur);
+        if (this._parent) {
+            /* this case is when the layout is opened by OxLayout.open(...) */
+            this.removeEventListener('focusout', this._onfocusout);
+            this.removeEventListener('keydown', this._onkeydown);
+            this.removeEventListener('keyup', this._onkeyup);
+            this.removeEventListener('click', this._onclick);
+            this.removeEventListener('ox-close', this._onclose);
+            this.removeEventListener('ox-collapse', this._oncollapse);
+            this._parent.removeChild(this);
+            delete this._parent;
+        }
+    }
+};
+OxLayout.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        position: absolute;
+        display: none;
+        background-color: white;
+        z-index: 100;
+        box-sizing: border-box;
+        min-width: fit-content;
+      }
+
+      :host([active]) {
+        display: block;
+      }
+
+      :host(*:focus) {
+        outline: none;
+      }
+    `
+];
+__decorate([
+    state()
+], OxLayout.prototype, "_parent", void 0);
+OxLayout = __decorate([
+    customElement('ox-layout')
+], OxLayout);
+export { OxLayout };
+//# sourceMappingURL=ox-layout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-layout.js","sourceRoot":"","sources":["../../src/ox-layout.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { render } from 'lit-html';\nimport { customElement, state } from 'lit/decorators.js';\n\nimport { ScrollbarStyles } from '@operato/styles';\n\n@customElement('ox-layout')\nexport class OxLayout extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        position: absolute;\n        display: none;\n        background-color: white;\n        z-index: 100;\n        box-sizing: border-box;\n        min-width: fit-content;\n      }\n\n      :host([active]) {\n        display: block;\n      }\n\n      :host(*:focus) {\n        outline: none;\n      }\n    `\n  ]\n\n  @state() _parent?: Element\n\n  render() {\n    return html` <slot> </slot> `\n  }\n\n  protected _onfocusout: (e: FocusEvent) => void = function (this: OxLayout, e: FocusEvent) {\n    const to = e.relatedTarget as HTMLElement\n\n    if (!this.contains(to)) {\n      /* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-popup은 닫혀야 한다. */\n      // @ts-ignore for debug\n      !window.POPUP_DEBUG && this.close()\n    }\n  }.bind(this)\n\n  protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxLayout, e: KeyboardEvent) {\n    e.stopPropagation()\n\n    switch (e.key) {\n      case 'Esc': // for IE/Edge\n      case 'Escape':\n        this.close()\n        break\n    }\n  }.bind(this)\n\n  protected _onkeyup: (e: KeyboardEvent) => void = function (this: OxLayout, e: KeyboardEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onclick: (e: MouseEvent) => void = function (this: OxLayout, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onclose: (e: Event) => void = function (this: OxLayout, e: Event) {\n    this.close()\n  }.bind(this)\n\n  protected _oncollapse: (e: Event) => void = function (this: OxLayout, e: Event) {\n    e.stopPropagation()\n    this.close()\n  }.bind(this)\n\n  protected _onwindowblur: (e: Event) => void = function (this: OxLayout, e: Event) {\n    // @ts-ignore for debug\n    !window.POPUP_DEBUG && this.close()\n  }.bind(this)\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.addEventListener('focusout', this._onfocusout)\n    this.addEventListener('keydown', this._onkeydown)\n    this.addEventListener('keyup', this._onkeyup)\n    this.addEventListener('click', this._onclick)\n    this.addEventListener('ox-close', this._onclose)\n    this.addEventListener('ox-collapse', this._oncollapse)\n\n    this.setAttribute('tabindex', '0') // make this element focusable\n    this.guaranteeFocus()\n  }\n\n  /**\n   * Configuration for opening ox-layout\n   *\n   * @typedef {Object} PopupOpenOptions\n   * @property {HTMLTemplate} template HTMLTemplate to be displayed inside the layout\n   * @property {Number} top The position-top where the pop-up will be displayed\n   * @property {Number} left The position-left where the pop-up will be displayed\n   * @property {HTMLElement} parent Popup's parent element\n   */\n\n  /**\n   * Open Popup\n   *\n   * @param {PopupOpenOptions}\n   */\n  static open({\n    template,\n    top,\n    left,\n    right,\n    bottom,\n    parent\n  }: {\n    template: unknown\n    top?: number\n    left?: number\n    right?: number\n    bottom?: number\n    parent?: Element | null\n  }) {\n    const owner = parent || document.body\n    const target = document.createElement('ox-layout') as OxLayout\n\n    render(template, target)\n\n    target._parent = owner\n    owner.appendChild(target)\n\n    target.open({ top, left, right, bottom })\n  }\n\n  open({\n    left,\n    top,\n    right,\n    bottom,\n    silent = false\n  }: {\n    left?: number\n    top?: number\n    right?: number\n    bottom?: number\n    silent?: boolean\n  }) {\n    if (left !== undefined) this.style.left = `${left}px`\n    if (top !== undefined) this.style.top = `${top}px`\n    if (right !== undefined) this.style.right = `${right}px`\n    if (bottom !== undefined) this.style.bottom = `${bottom}px`\n\n    this.setAttribute('active', '')\n\n    !silent && this.guaranteeFocus()\n\n    /* When the window is out of focus, all pop-ups should disappear. */\n    window.addEventListener('blur', this._onwindowblur)\n  }\n\n  guaranteeFocus() {\n    const focusible = this.querySelector(\n      ':scope > button, :scope > [href], :scope > input, :scope > select, :scope > textarea, :scope > [tabindex]:not([tabindex=\"-1\"])'\n    )\n\n    if (focusible) {\n      ;(focusible as HTMLElement).focus()\n    } else {\n      this.focus()\n    }\n  }\n\n  close() {\n    this.removeAttribute('active')\n\n    window.removeEventListener('blur', this._onwindowblur)\n\n    if (this._parent) {\n      /* this case is when the layout is opened by OxLayout.open(...) */\n      this.removeEventListener('focusout', this._onfocusout)\n      this.removeEventListener('keydown', this._onkeydown)\n      this.removeEventListener('keyup', this._onkeyup)\n      this.removeEventListener('click', this._onclick)\n      this.removeEventListener('ox-close', this._onclose)\n      this.removeEventListener('ox-collapse', this._oncollapse)\n\n      this._parent.removeChild(this)\n      delete this._parent\n    }\n  }\n}\n"]}

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

@@ -0,0 +1,12 @@
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { DirectiveResult } from 'lit-html/directive';
+export declare class OxMarkdown extends LitElement {
+    static styles: import("lit").CSSResult[];
+    src?: string;
+    toc: boolean;
+    _html?: TemplateResult | DirectiveResult | null;
+    _headings: any[];
+    render(): TemplateResult<1>;
+    renderToc(): TemplateResult<1>;
+    updated(changed: PropertyValues<this>): Promise<void>;
+}