@operato/layout 0.2.46

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,16 @@
+# 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.46](https://github.com/hatiolab/operato/compare/v0.2.45...v0.2.46) (2021-12-12)
+
+
+### :rocket: New Features
+
+* add layout 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/README.md

@@ -0,0 +1,75 @@
+# \<mini-layout>
+
+This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+
+## Installation
+
+```bash
+npm i mini-layout
+```
+
+## Usage
+
+```html
+<script type="module">
+  import 'mini-layout/mini-layout.js'
+</script>
+
+<mini-layout></mini-layout>
+```
+
+## Linting and formatting
+
+To scan the project for linting and formatting errors, run
+
+```bash
+npm run lint
+```
+
+To automatically fix linting and formatting errors, run
+
+```bash
+npm run format
+```
+
+## Testing with Web Test Runner
+
+To execute a single test run:
+
+```bash
+npm run test
+```
+
+To run the tests in interactive watch mode run:
+
+```bash
+npm run test:watch
+```
+
+## Demoing with Storybook
+
+To run a local instance of Storybook for your component, run
+
+```bash
+npm run storybook
+```
+
+To build a production version of Storybook, run
+
+```bash
+npm run storybook:build
+```
+
+## Tooling configs
+
+For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
+
+If you customize the configuration a lot, you can consider moving them to individual files.
+
+## Local Demo with `web-dev-server`
+
+```bash
+npm start
+```
+
+To run a local development server that serves the basic demo located in `demo/index.html`

package/demo/index.html

@@ -0,0 +1,142 @@
+<!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-layout-menu.js'
+      import '../dist/src/ox-layout-menuitem.js'
+      import '@material/mwc-icon'
+      import '@operato/input'
+
+      import { OxPopupMenu } from '../dist/src/ox-layout-menu.js'
+
+      const parent = document.querySelector('#demo')
+
+      parent.addEventListener('click', function (e) {
+        OxPopupMenu.open({
+          template: html`
+            <ox-layout-menuitem
+              label="article - click me"
+              @selected=${function (e) {
+                console.log('first level article selected')
+              }}
+            >
+              <mwc-icon slot="icon">article</mwc-icon>
+            </ox-layout-menuitem>
+
+            <ox-layout-menuitem label="home">
+              <mwc-icon slot="icon">home</mwc-icon>
+            </ox-layout-menuitem>
+
+            <ox-layout-menuitem label="empty"> </ox-layout-menuitem>
+
+            <ox-layout-menuitem
+              label="click me to toggle"
+              @selected=${function (e) {
+                const icon = this.querySelector('mwc-icon')
+                icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check'
+              }}
+              alive-on-select
+            >
+              <mwc-icon slot="icon" style="width: 20px;height: 20px;"></mwc-icon>
+            </ox-layout-menuitem>
+
+            <ox-layout-menuitem label="verified" @selected=${e => console.log('selected verified')}>
+              <mwc-icon slot="icon">verified</mwc-icon>
+              <ox-layout-menu>
+                <ox-layout-menuitem
+                  label="article"
+                  @selected=${function (e) {
+                    console.log('article selected')
+                  }}
+                  alive-on-select
+                >
+                  <mwc-icon slot="icon">article</mwc-icon>
+                </ox-layout-menuitem>
+
+                <ox-layout-menuitem label="home">
+                  <mwc-icon slot="icon">home</mwc-icon>
+                </ox-layout-menuitem>
+
+                <ox-layout-menuitem label="verified">
+                  <mwc-icon slot="icon">verified</mwc-icon>
+                  <ox-layout-menu>
+                    <ox-layout-menuitem label="article">
+                      <mwc-icon slot="icon">article</mwc-icon>
+                    </ox-layout-menuitem>
+
+                    <ox-layout-menuitem label="home">
+                      <mwc-icon slot="icon">home</mwc-icon>
+                    </ox-layout-menuitem>
+
+                    <ox-layout-menuitem label="verified">
+                      <mwc-icon slot="icon">verified</mwc-icon>
+                    </ox-layout-menuitem>
+
+                    <ox-layout-menuitem label="checkbox">
+                      <input type="checkbox" slot="icon" />
+                    </ox-layout-menuitem>
+
+                    <div separator></div>
+                  </ox-layout-menu>
+                </ox-layout-menuitem>
+
+                <div separator></div>
+
+                <ox-layout-menuitem label="checkbox">
+                  <input type="checkbox" slot="icon" />
+                </ox-layout-menuitem>
+              </ox-layout-menu>
+            </ox-layout-menuitem>
+
+            <ox-layout-menuitem label="checkbox in icon area" alive-on-select>
+              <input type="checkbox" slot="icon" />
+            </ox-layout-menuitem>
+
+            <div separator></div>
+
+            <div menu>Plain Text</div>
+
+            <div menu alive-on-select>
+              <ox-checkbox label="checkbox" slot="icon" checked />checkbox</ox-checkbox>
+            </div>
+
+            <div menu alive-on-select>
+              <input id="checkbox-01" type="checkbox" />
+              <label for="checkbox-01">custom menu</label>
+            </div>
+            <div menu alive-on-select>
+              <label for="text-01">value</label>
+              <input id="text-01" type="text" value="Plain text input" />
+            </div>
+          `,
+          top: e.pageY,
+          left: e.pageX,
+          parent
+        })
+      })
+
+      render(html`clike anywhere in this box to layout mini.`, parent)
+    </script>
+  </body>
+</html>

package/dist/src/index.d.ts

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

package/dist/src/index.js

@@ -0,0 +1,2 @@
+export * from './ox-layout';
+//# 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,aAAa,CAAA","sourcesContent":["export * from './ox-layout'\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-toolbar-style.d.ts

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