@statistikzh/leu 0.5.1 → 0.6.0

package/src/components/icon/Icon.js

@@ -0,0 +1,55 @@
+import { html, svg } from "lit"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+
+// @ts-ignore
+import styles from "./icon.css"
+import { paths } from "./paths.js"
+
+/**
+ * A component to render all defined zhWeb icons.
+ * The `fill` of the icon is set to `currentColor` and
+ * can be overriden by setting the css `color` property.
+ * If the icon name is not found, a placeholder will be displayed.
+ *
+ * @tagname leu-icon
+ * @prop {import("./paths").IconPathName} name - The name of the icon to display.
+ * @cssprop --leu-icon-size - The size of the icon.
+ */
+export class LeuIcon extends LeuElement {
+  static styles = styles
+
+  static properties = {
+    name: { type: String, reflect: true },
+  }
+
+  constructor() {
+    super()
+
+    /**
+     * @type {import("./paths").IconPathName | ""}
+     */
+    this.name = ""
+  }
+
+  render() {
+    if (!paths[this.name]) {
+      return html`<div class="placeholder"></div>`
+    }
+
+    const iconPath = paths[this.name]
+
+    return html`
+      <svg
+        width="24"
+        height="24"
+        fill="currentColor"
+        viewBox="0 0 24 24"
+        fill-rule="evenodd"
+        role="presentation"
+      >
+        ${svg`<path d=${iconPath} />`}
+      </svg>
+    `
+  }
+}

package/src/components/icon/icon.css

@@ -0,0 +1,6 @@
+svg,
+.placeholder {
+  display: block;
+  width: var(--leu-icon-size, 1.5rem);
+  height: var(--leu-icon-size, 1.5rem);
+}

package/src/components/icon/leu-icon.js

@@ -0,0 +1,5 @@
+import { LeuIcon } from "./Icon.js"
+
+export { LeuIcon }
+
+LeuIcon.define("leu-icon")

package/src/components/icon/{icon.js → paths.js}

@@ -1,11 +1,8 @@
-import { html, svg } from "lit"
+/**
+ * @typedef {keyof paths} IconPathName
+ */
 
-// to add new icons from zh web
-// - login into figma: https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN?node-id=311:9677
-// - click icon and then export as svg on the right drawer
-// - copy svg path (multiple with space between)
-// - update @param {TYPE} with console.log() below
-export const iconPaths = {
+export const paths = {
   addNew:
     "M12 1C5.926 1 1 5.925 1 12C1 18.075 5.926 23 12 23C18.074 23 23 18.075 23 12C23 5.925 18.074 1 12 1ZM17 13H13V17H11V13H7V11H11V7H13V11H17V13Z",
   angleDropDown: "M17 9.5L12 14.5L7 9.5L17 9.5Z",
@@ -62,9 +59,6 @@ export const iconPaths = {
     "M12 1C5.926 1 1 5.926 1 12C1 18.074 5.926 23 12 23C18.074 23 23 18.074 23 12C23 5.926 18.074 1 12 1ZM11.5 6C11.898 6.00013 12.2796 6.15835 12.5609 6.43984C12.8422 6.72133 13.0001 7.10304 13 7.501C12.9999 7.89896 12.8417 8.28056 12.5602 8.56187C12.2787 8.84317 11.897 9.00113 11.499 9.001C11.101 9.00087 10.7194 8.84265 10.4381 8.56116C10.1568 8.27967 9.99887 7.89796 9.999 7.5C9.99913 7.10204 10.1573 6.72044 10.4388 6.43913C10.7203 6.15783 11.102 5.99987 11.5 6ZM15 18H9V16H11V12H9V10H13V16H15V18Z",
   hide: "M23.7862 0.213819C23.6464 0.0767667 23.4584 0 23.2626 0C23.0668 0 22.8788 0.0767667 22.739 0.213819L16.9046 6.01077C15.3896 5.26962 13.7291 4.87365 12.0427 4.85138C5.31075 4.88878 0.598395 11.4711 0.411396 11.7329L0.112199 12.1817L0.411396 12.5931C1.81786 14.494 3.55313 16.128 5.53515 17.4177L0.299197 22.6536C0.213464 22.7179 0.142549 22.7999 0.0912528 22.894C0.0399571 22.9881 0.0094788 23.0921 0.00188187 23.199C-0.00571506 23.3059 0.00974673 23.4132 0.0472203 23.5136C0.0846938 23.614 0.143304 23.7051 0.219082 23.7809C0.29486 23.8567 0.386037 23.9153 0.486438 23.9528C0.586839 23.9903 0.694121 24.0057 0.801018 23.9981C0.907915 23.9905 1.01193 23.96 1.10602 23.9087C1.20012 23.8575 1.28209 23.7865 1.34639 23.7008L23.7862 1.26101C23.9232 1.12119 24 0.933204 24 0.737414C24 0.541625 23.9232 0.353641 23.7862 0.213819ZM7.55473 11.9947C7.55473 10.8044 8.02757 9.6629 8.86922 8.82125C9.71088 7.97959 10.8524 7.50675 12.0427 7.50675C12.9675 7.50625 13.8694 7.79383 14.6233 8.32954L8.37752 14.5753C7.84181 13.8215 7.55422 12.9195 7.55473 11.9947ZM19.56 7.61895L16.381 10.7979C16.5884 11.5629 16.5895 12.3692 16.3842 13.1347C16.1788 13.9002 15.7744 14.5978 15.2121 15.1563C14.6498 15.7148 13.9495 16.1145 13.1826 16.3146C12.4157 16.5148 11.6095 16.5082 10.8459 16.2957L8.34012 18.8014C9.52646 19.237 10.779 19.4647 12.0427 19.4746C18.7746 19.4746 23.487 12.8923 23.674 12.5931L23.9732 12.1817L23.674 11.7703C22.5141 10.1919 21.1279 8.7931 19.56 7.61895Z",
   home: "M23 10L12.0071 1L1 10V12L11.9925 3L23 12V10Z M3.375 12V23H9V17H15V23H20.625V12L12 5L3.375 12Z",
-  layer1:
-    "M15.875 6.875H9.125V0.125H6.875V6.875H0.125V9.125H6.875V15.875H9.125V9.125H15.875V6.875Z",
-  layer11: "M0.5 0.5H16.25V2.75H0.5V0.5Z",
   link: "M22.2237 3.63526L20.3648 1.77638C19.7075 1.11912 18.816 0.749878 17.8864 0.749878C16.9569 0.749878 16.0654 1.11912 15.408 1.77638L12.3098 4.87501C11.6526 5.53238 11.2834 6.42386 11.2834 7.35338C11.2834 8.28291 11.6526 9.17438 12.3098 9.83176L12.6192 10.1415L13.182 10.704L14.4214 9.46501L13.8589 8.90251L13.5492 8.59238C13.2205 8.26374 13.0359 7.81804 13.0358 7.35327C13.0357 6.88851 13.2203 6.44275 13.5488 6.11401L16.647 3.01576C16.9758 2.68726 17.4215 2.50274 17.8862 2.50274C18.351 2.50274 18.7967 2.68726 19.1254 3.01576L20.9843 4.87501C21.3128 5.20368 21.4973 5.64934 21.4973 6.11401C21.4973 6.57868 21.3128 7.02433 20.9843 7.35301L17.886 10.4513C17.6013 10.7359 17.2273 10.9138 16.8268 10.9551C16.4264 10.9964 16.0239 10.8986 15.687 10.6781L14.4342 11.9306C15.1072 12.4782 15.9594 12.7568 16.8259 12.7125C17.6925 12.6682 18.5118 12.3041 19.1254 11.6906L22.2237 8.59238C22.5492 8.26693 22.8073 7.88055 22.9835 7.45531C23.1597 7.03007 23.2503 6.57429 23.2503 6.11401C23.2503 5.65372 23.1597 5.19795 22.9835 4.7727C22.8073 4.34746 22.5492 3.96108 22.2237 3.63563V3.63526ZM10.4513 17.8864L7.35304 20.9843C7.0243 21.3128 6.57859 21.4973 6.11385 21.4973C5.64912 21.4973 5.2034 21.3128 4.87467 20.9843L3.01579 19.1254C2.85296 18.9627 2.72378 18.7695 2.63565 18.5569C2.54751 18.3443 2.50215 18.1164 2.50215 17.8862C2.50215 17.656 2.54751 17.4281 2.63565 17.2155C2.72378 17.0029 2.85296 16.8097 3.01579 16.647L6.11404 13.5491C6.44274 13.2204 6.88856 13.0358 7.35342 13.0358C7.81827 13.0358 8.26409 13.2204 8.59279 13.5491L8.90179 13.8589L9.46429 14.4214L10.7037 13.1824L10.1408 12.6195L9.83179 12.3098C9.1744 11.6525 8.28285 11.2832 7.35323 11.2832C6.42361 11.2832 5.53206 11.6525 4.87467 12.3098L1.77642 15.408C1.45093 15.7335 1.19273 16.1198 1.01658 16.5451C0.840422 16.9703 0.749756 17.4261 0.749756 17.8864C0.749756 18.3467 0.840422 18.8024 1.01658 19.2277C1.19273 19.6529 1.45093 20.0393 1.77642 20.3648L3.63529 22.2236C4.2927 22.881 5.18433 23.2504 6.11404 23.2504C7.04375 23.2504 7.93538 22.881 8.59279 22.2236L11.6899 19.125C12.3032 18.5113 12.6672 17.692 12.7115 16.8255C12.7558 15.959 12.4774 15.1069 11.9299 14.4338L10.6774 15.6863C10.8981 16.0232 10.996 16.4258 10.9547 16.8264C10.9134 17.2271 10.7353 17.6012 10.4505 17.886L10.4513 17.8864Z M17.0416 6.95849C17.2058 7.12289 17.2981 7.34578 17.2981 7.57817C17.2981 7.81057 17.2058 8.03346 17.0416 8.19786L8.05806 17.181C7.97671 17.2624 7.88013 17.3269 7.77384 17.3709C7.66754 17.415 7.55361 17.4376 7.43856 17.4376C7.3235 17.4376 7.20957 17.415 7.10328 17.3709C6.99698 17.3269 6.90041 17.2624 6.81906 17.181C6.65471 17.0166 6.56238 16.7937 6.56238 16.5613C6.56238 16.3289 6.65471 16.106 6.81906 15.9416L15.8026 6.95849C15.9669 6.79434 16.1898 6.70215 16.4221 6.70215C16.6544 6.70215 16.8772 6.79434 17.0416 6.95849Z",
   list: "M5 5H2V8H5V5Z M22 5H8V8H22V5Z M2 11H5V14H2V11Z M22 11H8V14H22V11Z M2 17H5V20H2V17Z M22 17H8V20H22V17Z",
   lock: "M4.00211 15.1855C3.94503 17.4179 4.90163 19.6403 6.77048 21.1901C9.77412 23.6808 14.2259 23.6808 17.2296 21.1901C19.0987 19.6401 20.0553 17.4173 19.9979 15.1845C19.9993 15.1232 20 15.0617 20 15C20 13.4191 19.5414 11.9452 18.75 10.7043V6.48C18.75 2.90119 15.7279 0 12 0C8.2721 0 5.25002 2.90119 5.25002 6.48V10.7042C4.4586 11.9452 4 13.419 4 15C4 15.062 4.0007 15.1238 4.00211 15.1855ZM12 17C10.8954 17 10 16.1046 10 15C10 13.8954 10.8954 13 12 13C13.1046 13 14 13.8954 14 15C14 16.1046 13.1046 17 12 17ZM16.25 8.22103C15.0186 7.44741 13.5616 7 12 7C10.4384 7 8.98137 7.44741 7.75 8.22103V6.48C7.75 4.22668 9.65279 2.4 12 2.4C14.3472 2.4 16.25 4.22668 16.25 6.48V8.22103Z",
@@ -172,30 +166,3 @@ export const iconPaths = {
   smileyDevastated:
     "M11 0.5C8.9233 0.5 6.89323 1.11581 5.16652 2.26957C3.4398 3.42332 2.09399 5.0632 1.29927 6.98182C0.504549 8.90045 0.296614 11.0116 0.701759 13.0484C1.1069 15.0852 2.10693 16.9562 3.57538 18.4246C5.04383 19.8931 6.91476 20.8931 8.95156 21.2982C10.9884 21.7034 13.0996 21.4955 15.0182 20.7007C16.9368 19.906 18.5767 18.5602 19.7304 16.8335C20.8842 15.1068 21.5 13.0767 21.5 11C21.5 8.21523 20.3938 5.54451 18.4246 3.57538C16.4555 1.60625 13.7848 0.5 11 0.5ZM5.75 11.3075L4.6925 10.25L6.1925 8.75L4.6925 7.25L5.75 6.1925L7.25 7.6925L8.75 6.1925L9.8075 7.25L8.3075 8.75L9.8075 10.25L8.75 11.3075L7.25 9.8075L5.75 11.3075ZM11 17.75C10.555 17.75 10.12 17.618 9.74997 17.3708C9.37996 17.1236 9.09157 16.7722 8.92128 16.361C8.75098 15.9499 8.70642 15.4975 8.79324 15.061C8.88005 14.6246 9.09435 14.2237 9.40901 13.909C9.72368 13.5943 10.1246 13.38 10.5611 13.2932C10.9975 13.2064 11.4499 13.251 11.861 13.4213C12.2722 13.5916 12.6236 13.88 12.8708 14.25C13.118 14.62 13.25 15.055 13.25 15.5C13.25 16.0967 13.013 16.669 12.591 17.091C12.169 17.5129 11.5967 17.75 11 17.75ZM17.3075 10.25L16.25 11.3075L14.75 9.8075L13.25 11.3075L12.1925 10.25L13.6925 8.75L12.1925 7.25L13.25 6.1925L14.75 7.6925L16.25 6.1925L17.3075 7.25L15.8075 8.75L17.3075 10.25Z",
 }
-const ICON_NAMES = Object.keys(iconPaths)
-Object.freeze(ICON_NAMES)
-export { ICON_NAMES }
-// console.log(JSON.stringify(Object.keys(iconPaths)).replace(/"/g, "'").replace(/,/g, "|").replace(/\[/g, "").replace(/\]/g, ""))
-
-/**
- * Returns an (ZhWeb) icon with a default size of 24px.
- * The CSS color is inherited from the parent object.
- * @param {'addNew'|'angleDropDown'|'angleDropup'|'angleLeft'|'angleRight'|'arrowDown'|'arrowLeft'|'arrowRight'|'arrowUp'|'calendar'|'caution'|'chatMessage'|'check'|'check1'|'clear'|'close'|'conference'|'confirm'|'confirmPlain'|'delete'|'documents'|'download'|'edit'|'email'|'file'|'fileOutline'|'files'|'filter'|'floppy'|'forward'|'getInformation'|'hide'|'home'|'layer1'|'layer11'|'link'|'list'|'lock'|'location'|'login'|'logout'|'map'|'mapLocateMe'|'mapLocation'|'mapNavigation'|'mapPin'|'menu'|'menuOverflow'|'minus'|'openMail'|'overflow'|'paperplane'|'paragraph'|'phoneCall'|'pin'|'plus'|'print'|'remove'|'resizeText'|'search'|'show'|'time'|'upload'|'cc'|'fastForward'|'fastRewind'|'fullScreen'|'next'|'pause'|'play'|'playButton'|'previews'|'skipNext'|'skipPrevious'|'stop'|'comment'|'facebook'|'google'|'instagram'|'kununu'|'like'|'linkedin'|'love'|'repost'|'share'|'snapchat'|'twitter'|'user'|'users'|'vote'|'xing'|'youtube'|'youtubeLogo'|'smileyThrilled'|'smileySmile'|'smileyIndifferent'|'smileySad'|'smileyDevastated'} name
- * @param {number} size
- * @returns TemplateResult<1>
- */
-export const Icon = (name, size = 24) => {
-  const iconPath = iconPaths[name]
-
-  return html`
-    <svg
-      width="${size}"
-      height="${size}"
-      fill="currentColor"
-      viewBox="0 0 24 24"
-      fill-rule="evenodd"
-    >
-      ${svg`<path d=${iconPath} />`}
-    </svg>
-  `
-}

package/src/components/icon/stories/icon.stories.js

@@ -0,0 +1,47 @@
+import { html } from "lit"
+import "../leu-icon.js"
+import { ifDefined } from "lit/directives/if-defined.js"
+import { paths } from "../paths.js"
+
+export default {
+  title: "Icon",
+  component: "leu-icon",
+  argTypes: {
+    name: {
+      control: "select",
+      options: Object.keys(paths),
+    },
+    color: {
+      control: {
+        type: "color",
+        presetColors: ["#009ee0", "#d93c1a", "#1a7f1f"],
+      },
+    },
+  },
+}
+
+function Template({ name, size, color }) {
+  return html` <leu-icon
+    style="color: ${color}; ${size ? `--leu-icon-size: ${size}px` : ""};"
+    name=${ifDefined(name)}
+  ></leu-icon>`
+}
+
+export const Regular = Template.bind({})
+Regular.args = {
+  size: 24,
+  name: "addNew",
+}
+
+export const Small = Template.bind({})
+Small.args = {
+  size: 16,
+  name: "check",
+}
+
+export const Colored = Template.bind({})
+Colored.args = {
+  name: "smileyDevastated",
+  size: 24,
+  color: "#d93c1a",
+}

package/src/components/icon/test/icon.test.js

@@ -1,66 +1,49 @@
 import { html } from "lit"
 import { fixture, expect } from "@open-wc/testing"
 
-import { Icon, iconPaths } from "../icon.js"
+import "../leu-icon.js"
 
-async function defaultFixture(args = {}) {
-  const { name = "edit", size } = args
-  return fixture(html`${Icon(name, size)} `)
+async function defaultFixture(name = "close") {
+  return fixture(html` <leu-icon name=${name}></leu-icon> `)
 }
 
-describe("Icon", () => {
-  it("passes the a11y audit", async () => {
-    const el = await defaultFixture()
+describe("LeuIcon", () => {
+  it("is a defined element", async () => {
+    const el = await customElements.get("leu-icon")
 
-    await expect(el).shadowDom.to.be.accessible()
+    await expect(el).not.to.be.undefined
   })
 
-  it("renders an svg html element", async () => {
+  it("passes the a11y audit", async () => {
     const el = await defaultFixture()
 
-    expect(el).to.have.tagName("svg")
+    await expect(el).shadowDom.to.be.accessible()
   })
 
-  it("renders a single path", async () => {
+  it("renders a 24x24 icon by default", async () => {
     const el = await defaultFixture()
 
-    expect(el.querySelectorAll("path")).to.have.lengthOf(1)
-  })
-
-  it("renders the correct path", async () => {
-    const el = await defaultFixture({ name: "share" })
+    const svg = el.shadowRoot.querySelector("svg")
 
-    const d = el.querySelector("path").getAttribute("d")
-
-    expect(d).to.equal(iconPaths.share)
+    expect(svg).to.have.attribute("width", "24")
+    expect(svg).to.have.attribute("height", "24")
   })
 
-  it("has the size 24x24 by default", async () => {
-    const el = await defaultFixture()
-
-    const width = el.getAttribute("width")
-    const height = el.getAttribute("height")
+  it("renders the correct icon path", async () => {
+    const el = await defaultFixture("angleDropup")
 
-    expect(width).to.equal("24")
-    expect(height).to.equal("24")
+    const path = el.shadowRoot.querySelector("path")
+    expect(path).to.have.attribute("d", "M7 14.5L12 9.5L17 14.5H7Z")
   })
 
-  it("has the size 16x16", async () => {
-    const el = await defaultFixture({ size: "16" })
-
-    const width = el.getAttribute("width")
-    const height = el.getAttribute("height")
-
-    expect(width).to.equal("16")
-    expect(height).to.equal("16")
-  })
+  it("renders a placeholder if the icon is not found", async () => {
+    const el = await defaultFixture("notExisting")
 
-  it("has always a square size", async () => {
-    const el = await defaultFixture({ size: "564" })
+    const placeholder = el.shadowRoot.querySelector(".placeholder")
 
-    const width = el.getAttribute("width")
-    const height = el.getAttribute("height")
+    expect(placeholder).to.exist
 
-    expect(width).to.equal(height)
+    const svg = el.shadowRoot.querySelector("svg")
+    expect(svg).not.to.exist
   })
 })

package/src/components/input/Input.js

@@ -1,18 +1,15 @@
-import { html, LitElement, nothing } from "lit"
+import { html, nothing } from "lit"
 import { classMap } from "lit/directives/class-map.js"
 import { ifDefined } from "lit/directives/if-defined.js"
 import { live } from "lit/directives/live.js"
 import { createRef, ref } from "lit/directives/ref.js"
 
-import { Icon } from "../icon/icon.js"
+import { LeuElement } from "../../lib/LeuElement.js"
+import { LeuIcon } from "../icon/Icon.js"
 
+// @ts-ignore
 import styles from "./input.css"
 
-export const SIZE_TYPES = {
-  SMALL: "small",
-  REGULAR: "regular",
-}
-
 /**
  * TODO:
  * - Add section to docs about how to mark up suffix and prefix for screenreaders
@@ -63,14 +60,18 @@ const VALIDATION_MESSAGES = {
  *
  * @tagname leu-input
  */
-export class LeuInput extends LitElement {
+export class LeuInput extends LeuElement {
+  static dependencies = {
+    "leu-icon": LeuIcon,
+  }
+
   static styles = styles
 
   /**
    * @internal
    */
   static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
+    ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
   }
 
@@ -100,7 +101,6 @@ export class LeuInput extends LitElement {
     novalidate: { type: Boolean, reflect: true },
     step: { type: String, reflect: true },
 
-    /** @type {ValidityState} */
     _validity: { state: true },
   }
 
@@ -119,8 +119,8 @@ export class LeuInput extends LitElement {
     this.required = false
     this.clearable = false
 
-    /** @type {keyof typeof SIZE_TYPES} */
-    this.size = SIZE_TYPES.REGULAR
+    /** @type {"small" | "regular"} */
+    this.size = "regular"
 
     this.type = "text"
     this._validity = null
@@ -130,9 +130,6 @@ export class LeuInput extends LitElement {
     /** @internal */
     this._identifier = ""
 
-    /** @internal */
-    this._clearIcon = Icon("clear")
-
     /**
      * @internal
      * @type {import("lit/directives/ref.js").Ref<HTMLInputElement>}
@@ -306,10 +303,7 @@ export class LeuInput extends LitElement {
 
   /**
    * Creates an error list with an item for the given validity state.
-   * @param {ValidityState} validityState
-   * @param {Object} validationMessages
-   * @param {String} idRef
-   * @returns
+   * @returns {import("lit").TemplateResult | nothing}
    */
   renderErrorMessages() {
     if (!this.isInvalid()) {
@@ -341,11 +335,13 @@ export class LeuInput extends LitElement {
    * This can be either an icon, a clear button or an error indicator icon.
    *
    * @private
-   * @returns {TemplateResult}
+   * @returns {import("lit").TemplateResult | nothing}
    */
   renderAfterContent() {
     if (this.isInvalid()) {
-      return html`<div class="error-icon">${Icon("caution")}</div>`
+      return html`<div class="error-icon">
+        <leu-icon name="caution"></leu-icon>
+      </div>`
     }
 
     if (this.clearable && this.value) {
@@ -355,12 +351,14 @@ export class LeuInput extends LitElement {
         aria-label="Eingabefeld zurücksetzen"
         ?disabled=${this.disabled}
       >
-        ${this._clearIcon}
+        <leu-icon name="clear"></leu-icon>
       </button>`
     }
 
     if (this.icon) {
-      return html`<div class="icon">${Icon(this.icon)}</div>`
+      return html`<div class="icon">
+        <leu-icon name=${this.icon}></leu-icon>
+      </div>`
     }
 
     return nothing

package/src/components/input/input.css

@@ -154,7 +154,9 @@
 }
 
 /* is size small AND has no focus AND is empty */
-:host(:not(:focus-within)[size="small"]) .input-wrapper--empty .label {
+:host(:not(:focus-within)[size="small"])
+  .input-wrapper--empty:not(.input-wrapper--invalid)
+  .label {
   top: calc(0.75rem - var(--input-border-width));
   opacity: 1;
   visibility: visible;
@@ -229,6 +231,6 @@
   color: var(--input-color-invalid);
 }
 
-:is(.icon, .error-icon) svg {
+:is(.icon, .error-icon) leu-icon {
   display: block;
 }

package/src/components/input/leu-input.js

@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuInput } from "./Input.js"
 
 export { LeuInput }
 
-defineElement("input", LeuInput)
+LeuInput.define("leu-input")

package/src/components/input/stories/input.stories.js

@@ -4,7 +4,7 @@ import { ifDefined } from "lit/directives/if-defined.js"
 import "../leu-input.js"
 
 import { SIZE_TYPES } from "../Input.js"
-import { ICON_NAMES } from "../../icon/icon.js"
+import { paths as iconPaths } from "../../icon/paths.js"
 
 export default {
   title: "Input",
@@ -17,7 +17,7 @@ export default {
       },
       options: Object.values(SIZE_TYPES),
     },
-    icon: { control: "select", options: ICON_NAMES },
+    icon: { control: "select", options: Object.keys(iconPaths) },
   },
   parameters: {
     design: {

package/src/components/input/test/input.test.js

@@ -29,6 +29,8 @@ async function defaultFixture(args = {}) {
       ?novalidate=${args.novalidate}
     >
     </leu-input>
+    <!-- Firefox needs an other focusable element. Otherwise, sendKeys({press: "Tab"}) will have no effect -->
+    <div tabindex="0"></div>
   `)
 }
 

package/src/components/menu/Menu.js

@@ -1,12 +1,153 @@
-import { html, LitElement } from "lit"
+import { html } from "lit"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+
+import { LeuMenuItem } from "./MenuItem.js"
+
+// @ts-ignore
 import styles from "./menu.css"
 
+/**
+ * @typedef {'single' | 'multiple' | 'none'} SelectsType
+ */
+
 /**
  * @tagname leu-menu
+ * @property {SelectsType} selects - This has only an effect when the role is 'menu'. It defines which role the menu items will get. Default is 'none'.
  */
-export class LeuMenu extends LitElement {
+export class LeuMenu extends LeuElement {
   static styles = styles
 
+  static shadowRootOptions = {
+    ...LeuElement.shadowRootOptions,
+    delegatesFocus: true,
+  }
+
+  static properties = {
+    selects: { type: String, reflect: true },
+  }
+
+  constructor() {
+    super()
+
+    /** @type {SelectsType} */
+    this.selects = "none"
+
+    this.value = undefined
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+
+    if (!this.getAttribute("role")) {
+      this.setAttribute("role", "menu")
+    }
+
+    this.addEventListener("keydown", this._handleKeyDown)
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    this.removeEventListener("keydown", this._handleKeyDown)
+  }
+
+  _handleSlotChange() {
+    this.setCurrentItem(0)
+    this._setMenuItemRoles()
+  }
+
+  _setMenuItemRoles() {
+    const menuRole = this.getAttribute("role")
+    let menuItemRole
+
+    if (menuRole === "menu") {
+      if (this.selects === "multiple") {
+        menuItemRole = "menuitemcheckbox"
+      } else if (this.selects === "single") {
+        menuItemRole = "menuitemradio"
+      } else {
+        menuItemRole = "menuitem"
+      }
+    } else if (menuRole === "listbox") {
+      menuItemRole = "option"
+    }
+
+    if (menuItemRole) {
+      this.getMenuItems().forEach((menuItem) => {
+        menuItem.componentRole = menuItemRole // eslint-disable-line no-param-reassign
+      })
+    }
+  }
+
+  /**
+   *
+   * @returns {import("./MenuItem").LeuMenuItem[]}
+   */
+  getMenuItems() {
+    const slot = this.shadowRoot.querySelector("slot")
+    return slot
+      .assignedElements({ flatten: true })
+      .filter((el) => el instanceof LeuMenuItem)
+  }
+
+  getVisibleMenuItems() {
+    return this.getMenuItems().filter((menuItem) => !menuItem.hidden)
+  }
+
+  _handleKeyDown(event) {
+    if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+      event.preventDefault()
+
+      const menuItems = this.getVisibleMenuItems()
+      let index = menuItems.findIndex((menuItem) => menuItem.tabbable)
+
+      if (event.key === "ArrowDown") {
+        index += 1
+      } else if (event.key === "ArrowUp") {
+        index -= 1
+      } else if (event.key === "Home") {
+        index = 0
+      } else if (event.key === "End") {
+        index = menuItems.length - 1
+      }
+
+      this.focusItem(index)
+    }
+  }
+
+  setCurrentItem(index) {
+    const menuItems = this.getVisibleMenuItems()
+    let currentItem = null
+
+    const currentItemIndex = (index + menuItems.length) % menuItems.length
+
+    menuItems.forEach((menuItem, i) => {
+      if (i === currentItemIndex) {
+        currentItem = menuItem
+        menuItem.tabbable = true // eslint-disable-line no-param-reassign
+      } else {
+        menuItem.tabbable = false // eslint-disable-line no-param-reassign
+      }
+    })
+
+    return currentItem
+  }
+
+  focusItem(index) {
+    const currentItem = this.setCurrentItem(index)
+    currentItem.focus()
+  }
+
+  firstUpdated() {
+    this.setCurrentItem(0)
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has("selects")) {
+      this._setMenuItemRoles()
+    }
+  }
+
   render() {
     return html`<slot></slot>`
   }