@operato/menu 2.0.0-alpha.100

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,241 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [2.0.0-alpha.100](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.99...v2.0.0-alpha.100) (2024-04-21)
+
+
+### :bug: Bug Fix
+
+* menu style ([6ff625c](https://github.com/hatiolab/operato/commit/6ff625cdd817869551445cad7d4b01f17243be2a))
+
+
+
+## [2.0.0-alpha.99](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.98...v2.0.0-alpha.99) (2024-04-21)
+
+
+### :bug: Bug Fix
+
+* simplify menu styles ([bbec7a3](https://github.com/hatiolab/operato/commit/bbec7a35221e945a117fc8cedf791a2db9828c36))
+
+
+
+## [2.0.0-alpha.98](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.97...v2.0.0-alpha.98) (2024-04-21)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.95](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.94...v2.0.0-alpha.95) (2024-04-21)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.94](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.93...v2.0.0-alpha.94) (2024-04-20)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.93](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.92...v2.0.0-alpha.93) (2024-04-19)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.92](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.91...v2.0.0-alpha.92) (2024-04-19)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.90](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.89...v2.0.0-alpha.90) (2024-04-18)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.89](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.88...v2.0.0-alpha.89) (2024-04-18)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.88](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.87...v2.0.0-alpha.88) (2024-04-18)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.87](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.86...v2.0.0-alpha.87) (2024-04-17)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.86](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.85...v2.0.0-alpha.86) (2024-04-16)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.85](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.84...v2.0.0-alpha.85) (2024-04-16)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.82](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.81...v2.0.0-alpha.82) (2024-04-15)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.81](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.80...v2.0.0-alpha.81) (2024-04-15)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.80](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.79...v2.0.0-alpha.80) (2024-04-15)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.77](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.76...v2.0.0-alpha.77) (2024-04-14)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.72](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.71...v2.0.0-alpha.72) (2024-04-14)
+
+
+### :bug: Bug Fix
+
+* restyle ox-menu-portrait ([e128e3d](https://github.com/hatiolab/operato/commit/e128e3d7737d103e82fa85e2a54832f0dc9670af))
+
+
+
+## [2.0.0-alpha.69](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.68...v2.0.0-alpha.69) (2024-04-13)
+
+
+### :bug: Bug Fix
+
+* mwc=>md for context ([972f5fd](https://github.com/hatiolab/operato/commit/972f5fd8da02820b6d6238cf1dd099591f97d8df))
+
+
+
+## [2.0.0-alpha.68](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.67...v2.0.0-alpha.68) (2024-04-13)
+
+
+### :bug: Bug Fix
+
+* mwc=>md for context ([2bc13f2](https://github.com/hatiolab/operato/commit/2bc13f285f257782f73e5d7b5d1ddd197df85393))
+
+
+
+## [2.0.0-alpha.64](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.63...v2.0.0-alpha.64) (2024-04-13)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.63](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.62...v2.0.0-alpha.63) (2024-04-12)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.62](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.61...v2.0.0-alpha.62) (2024-04-12)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.61](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.60...v2.0.0-alpha.61) (2024-04-11)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.60](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.59...v2.0.0-alpha.60) (2024-04-11)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.59](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.58...v2.0.0-alpha.59) (2024-04-11)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.57](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.56...v2.0.0-alpha.57) (2024-04-07)
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+
+
+**Note:** Version bump only for package @operato/menu
+
+
+
+
+
+## [2.0.0-alpha.55](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.54...v2.0.0-alpha.55) (2024-04-02)
+
+
+### :bug: Bug Fix
+
+* menu module ([bdf77c0](https://github.com/hatiolab/operato/commit/bdf77c0bca2e760061e47cdb3f3e62dccf29f7d0))
+* migrate menu component module from things-factory ([81bf12e](https://github.com/hatiolab/operato/commit/81bf12e60e592f9cce696d5bad9b6e979f79c4ac))

package/README.md

@@ -0,0 +1,75 @@
+# \<ox-menu>
+
+This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+
+## Installation
+
+```bash
+npm i menu
+```
+
+## Usage
+
+```html
+<script type="module">
+  import '@operato/menu'
+</script>
+
+<ox-menu></ox-menu>
+```
+
+## 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,40 @@
+<!doctype html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      body {
+        background: #fafafa;
+      }
+
+      #demo {
+        position: relative;
+        height: 100px;
+        background-color: lightgray;
+        text-align: center;
+        vertical-align: middle;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="demo"></div>
+
+    <script type="module">
+      import { html, render } from 'lit'
+      import '../dist/src/ox-menu.js'
+      import { OxMenu } from '../dist/src/ox-menu.js'
+
+      const parent = document.querySelector('#demo')
+      parent.addEventListener('click', function (e) {
+        OxMenu.open({
+          template: html``,
+          top: e.pageY,
+          left: e.pageX,
+          parent
+        })
+      })
+
+      render(html`clike anywhere in this box to menu mini.`, parent)
+    </script>
+  </body>
+</html>

package/dist/src/index.js

@@ -0,0 +1,2 @@
+"use strict";
+//# 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":"","sourcesContent":[""]}

package/dist/src/menu-landscape-styles.d.ts

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

package/dist/src/menu-landscape-styles.js

@@ -0,0 +1,149 @@
+import { css } from 'lit';
+export const MenuLandscapeStyles = css `
+  :host {
+    overflow-x: auto;
+    background-color: var(--secondary-text-color);
+    --focus-anchor-color: #e6ffa2;
+  }
+
+  :host > div {
+    overflow-x: auto;
+  }
+
+  :host > div > ul {
+    display: flex;
+    flex-direction: row;
+    list-style: none;
+    margin: auto;
+    padding: 0;
+    border: var(--border-dark-color);
+    border-width: 0 1px;
+    max-width: 1250px;
+  }
+
+  :host > div > ul > li {
+    flex: 1;
+
+    display: flex;
+    flex-direction: column;
+  }
+  :host > div > ul > li > a {
+    display: none;
+    font-weight: bold;
+    font-size: var(--fontsize-large);
+  }
+
+  ul[submenus] {
+    flex: 1;
+    list-style: none;
+    overflow-y: hidden;
+    background-color: var(--primary-color);
+    margin: 0;
+    padding: 0;
+    border-left: var(--border-dark-color);
+  }
+
+  ul[submenus] li {
+    min-width: 120px;
+    max-width: 180px;
+  }
+
+  a {
+    display: block;
+    padding: var(--padding-default) var(--padding-default) var(--padding-narrow) var(--padding-wide);
+    text-decoration: none;
+    font: normal 14px var(--theme-font);
+    color: var(--theme-white-color);
+    text-transform: capitalize;
+
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  a:hover {
+    font-weight: bold;
+  }
+
+  ul[submenus] a::before {
+    content: '';
+    display: inline-block;
+    position: relative;
+    top: -1px;
+    width: 5px;
+    height: 5px;
+    border: 1px solid var(--theme-white-color);
+    border-radius: 50%;
+    background-color: transparent;
+    margin-right: 3px;
+  }
+  ul[submenus] a:hover,
+  ul[submenus] li[active] a {
+    background-color: rgba(var(--secondary-color-rgb), 0.3);
+    color: var(--focus-anchor-color);
+    font-weight: bold;
+  }
+
+  [description] {
+    background-color: var(--primary-color);
+    margin: 0;
+    padding: var(--padding-default) 0;
+    border-left: 1px solid rgba(0, 0, 0, 0.1);
+    color: var(--focus-anchor-color);
+    font-size: 11px;
+  }
+  [description] md-icon {
+    background-color: rgba(0, 0, 0, 0.15);
+    margin-right: 4px;
+    padding: var(--padding-narrow);
+    border-radius: 0 5px 5px 0;
+    float: left;
+    font-size: 26px;
+  }
+
+  @media only screen and (max-width: 460px) {
+    :host {
+      min-width: 100vw;
+    }
+    :host > div {
+      display: initial;
+    }
+    :host > div > ul {
+      flex-direction: column;
+    }
+    a {
+      padding: var(--padding-wide);
+      font: normal 15px var(--theme-font);
+    }
+    li[active] ul {
+      border-bottom: 2px solid rgba(0, 0, 0, 0.1);
+    }
+    li li a {
+      display: block;
+      padding: var(--padding-wide) var(--padding-default) var(--padding-wide) 35px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font: normal 14px var(--theme-font);
+    }
+    li li[active] a {
+      font: bold 14px var(--theme-font);
+    }
+    :host > div > ul > li > a {
+      display: block;
+    }
+    :host > div > ul > li > a md-icon {
+      font-size: 1em;
+      position: relative;
+      top: 2px;
+    }
+    [description] {
+      display: none;
+    }
+    ul[submenus] a:hover,
+    ul[submenus] li[active] a {
+      background-color: rgba(var(--secondary-color-rgb), 0.3);
+    }
+  }
+`;
+//# sourceMappingURL=menu-landscape-styles.js.map

package/dist/src/menu-landscape-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-landscape-styles.js","sourceRoot":"","sources":["../../src/menu-landscape-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkJrC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const MenuLandscapeStyles = css`\n  :host {\n    overflow-x: auto;\n    background-color: var(--secondary-text-color);\n    --focus-anchor-color: #e6ffa2;\n  }\n\n  :host > div {\n    overflow-x: auto;\n  }\n\n  :host > div > ul {\n    display: flex;\n    flex-direction: row;\n    list-style: none;\n    margin: auto;\n    padding: 0;\n    border: var(--border-dark-color);\n    border-width: 0 1px;\n    max-width: 1250px;\n  }\n\n  :host > div > ul > li {\n    flex: 1;\n\n    display: flex;\n    flex-direction: column;\n  }\n  :host > div > ul > li > a {\n    display: none;\n    font-weight: bold;\n    font-size: var(--fontsize-large);\n  }\n\n  ul[submenus] {\n    flex: 1;\n    list-style: none;\n    overflow-y: hidden;\n    background-color: var(--primary-color);\n    margin: 0;\n    padding: 0;\n    border-left: var(--border-dark-color);\n  }\n\n  ul[submenus] li {\n    min-width: 120px;\n    max-width: 180px;\n  }\n\n  a {\n    display: block;\n    padding: var(--padding-default) var(--padding-default) var(--padding-narrow) var(--padding-wide);\n    text-decoration: none;\n    font: normal 14px var(--theme-font);\n    color: var(--theme-white-color);\n    text-transform: capitalize;\n\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  a:hover {\n    font-weight: bold;\n  }\n\n  ul[submenus] a::before {\n    content: '';\n    display: inline-block;\n    position: relative;\n    top: -1px;\n    width: 5px;\n    height: 5px;\n    border: 1px solid var(--theme-white-color);\n    border-radius: 50%;\n    background-color: transparent;\n    margin-right: 3px;\n  }\n  ul[submenus] a:hover,\n  ul[submenus] li[active] a {\n    background-color: rgba(var(--secondary-color-rgb), 0.3);\n    color: var(--focus-anchor-color);\n    font-weight: bold;\n  }\n\n  [description] {\n    background-color: var(--primary-color);\n    margin: 0;\n    padding: var(--padding-default) 0;\n    border-left: 1px solid rgba(0, 0, 0, 0.1);\n    color: var(--focus-anchor-color);\n    font-size: 11px;\n  }\n  [description] md-icon {\n    background-color: rgba(0, 0, 0, 0.15);\n    margin-right: 4px;\n    padding: var(--padding-narrow);\n    border-radius: 0 5px 5px 0;\n    float: left;\n    font-size: 26px;\n  }\n\n  @media only screen and (max-width: 460px) {\n    :host {\n      min-width: 100vw;\n    }\n    :host > div {\n      display: initial;\n    }\n    :host > div > ul {\n      flex-direction: column;\n    }\n    a {\n      padding: var(--padding-wide);\n      font: normal 15px var(--theme-font);\n    }\n    li[active] ul {\n      border-bottom: 2px solid rgba(0, 0, 0, 0.1);\n    }\n    li li a {\n      display: block;\n      padding: var(--padding-wide) var(--padding-default) var(--padding-wide) 35px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      font: normal 14px var(--theme-font);\n    }\n    li li[active] a {\n      font: bold 14px var(--theme-font);\n    }\n    :host > div > ul > li > a {\n      display: block;\n    }\n    :host > div > ul > li > a md-icon {\n      font-size: 1em;\n      position: relative;\n      top: 2px;\n    }\n    [description] {\n      display: none;\n    }\n    ul[submenus] a:hover,\n    ul[submenus] li[active] a {\n      background-color: rgba(var(--secondary-color-rgb), 0.3);\n    }\n  }\n`\n"]}

package/dist/src/menu-portrait-styles.d.ts

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