@statistikzh/leu 0.21.1 → 0.22.1

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.21.1",
+  "version": "0.22.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/scripts/generate-component/templates/[namespace]-[name].ts

@@ -3,3 +3,9 @@ import { [Namespace][Name] } from "./[Name].js"
 export { [Namespace][Name] }
 
 [Namespace][Name].define("[namespace]-[name]")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "[namespace]-[name]": [Namespace][Name]
+  }
+}

package/src/components/chart-wrapper/leu-chart-wrapper.ts

@@ -3,3 +3,9 @@ import { LeuChartWrapper } from "./ChartWrapper.js"
 export { LeuChartWrapper }
 
 LeuChartWrapper.define("leu-chart-wrapper")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-chart-wrapper": LeuChartWrapper
+  }
+}

package/src/components/chip/Chip.ts

@@ -1,3 +1,4 @@
+import { property } from "lit/decorators.js"
 import { LeuElement } from "../../lib/LeuElement.js"
 
 import styles from "./chip.css"
@@ -13,13 +14,6 @@ export class LeuChipBase extends LeuElement {
     delegatesFocus: true,
   }
 
-  static properties = {
-    inverted: { type: Boolean, reflect: true },
-  }
-
-  constructor() {
-    super()
-
-    this.inverted = false
-  }
+  @property({ type: Boolean, reflect: true })
+  inverted: boolean = false
 }

package/src/components/chip/ChipGroup.ts

@@ -1,16 +1,10 @@
 import { html, unsafeStatic } from "lit/static-html.js"
+import { property } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
 import styles from "./chip-group.css"
-
-/* Figma https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=131766-248643&mode=design&t=Kjo5VDiqivihn8dh-11 */
-
-export const SELECTION_MODES = Object.freeze({
-  single: "single",
-  multiple: "multiple",
-  none: "none",
-})
+import { LeuChipSelectable } from "./ChipSelectable.js"
 
 /**
  * @slot - Place leu-chip-* elements inside this slot
@@ -20,26 +14,19 @@ export const SELECTION_MODES = Object.freeze({
 export class LeuChipGroup extends LeuElement {
   static styles = [LeuElement.styles, styles]
 
-  static properties = {
-    inverted: { type: Boolean, reflect: true },
-    selectionMode: { type: String, attribute: "selection-mode", reflect: true },
-    headingLevel: { type: Number, attribute: "heading-level", reflect: true },
-    label: { type: String, reflect: true },
-  }
+  @property({ type: Boolean, reflect: true })
+  inverted: boolean = false
 
-  constructor() {
-    super()
+  @property({ type: String, attribute: "selection-mode", reflect: true })
+  selectionMode: "single" | "multiple" | "none" = "none"
 
-    this.inverted = false
-    this.headingLevel = 2
-    this.label = ""
+  @property({ type: Number, attribute: "heading-level", reflect: true })
+  headingLevel: number = 2
 
-    /** @internal */
-    this.items = []
+  @property({ type: String, reflect: true })
+  label: string = ""
 
-    /** @type {"single" | "multiple" | "none"} */
-    this.selectionMode = SELECTION_MODES.none
-  }
+  protected selectableItems: Array<LeuChipSelectable> = []
 
   connectedCallback() {
     super.connectedCallback()
@@ -61,21 +48,22 @@ export class LeuChipGroup extends LeuElement {
   }
 
   get value() {
-    return this.items.filter((i) => i.checked).map((i) => i.getValue())
+    return this.selectableItems
+      .filter((i) => i.checked)
+      .map((i) => i.getValue())
   }
 
   /**
    * Checks the items with the given values.
    * If the selectionMode is single, only the first item with the given value is checked.
-   * @param {string[]} valueList
    */
-  set value(valueList) {
+  set value(valueList: string[]) {
     let hasChanged = false
 
-    for (const item of this.items) {
+    for (const item of this.selectableItems) {
       item.checked = hasChanged ? false : valueList.includes(item.value)
 
-      if (this.selectionMode === SELECTION_MODES.single && item.checked) {
+      if (this.selectionMode === "single" && item.checked) {
         hasChanged = true
       }
     }
@@ -85,10 +73,9 @@ export class LeuChipGroup extends LeuElement {
    * Determines the heading tag of the accordion toggle.
    * The headingLevel shouldn't be used directly to render the heading tag
    * in order to avoid XSS issues.
-   * @returns {String} The heading tag of the accordion toggle.
    * @internal
    */
-  _getHeadingTag() {
+  protected _getHeadingTag() {
     let level = 2
     if (this.headingLevel > 0 && this.headingLevel < 7) {
       level = this.headingLevel
@@ -97,21 +84,21 @@ export class LeuChipGroup extends LeuElement {
     return `h${level}`
   }
 
-  /** @internal */
-  handleInput = (e) => {
-    if (this.selectionMode === SELECTION_MODES.single) {
-      this.items.forEach((item) => {
+  protected handleInput = (e: Event & { target: LeuChipSelectable }) => {
+    if (this.selectionMode === "single") {
+      this.selectableItems.forEach((item) => {
         item.checked = item === e.target // eslint-disable-line no-param-reassign
       })
     }
   }
 
-  /** @internal */
-  handleSlotChange = (e) => {
+  protected handleSlotChange = (e: Event & { target: HTMLSlotElement }) => {
     const slot = e.target
-    const items = slot.assignedElements({ flatten: true })
+    const items = slot
+      .assignedElements({ flatten: true })
+      .filter((el) => el instanceof LeuChipSelectable)
 
-    this.items = items
+    this.selectableItems = items
   }
 
   render() {

package/src/components/chip/ChipLink.ts

@@ -1,31 +1,20 @@
 import { html } from "lit"
+import { property } from "lit/decorators.js"
 
 import { LeuChipBase } from "./Chip.js"
 
-export const SIZES = {
-  regular: "regular",
-  large: "large",
-}
-
 /**
  * @tagname leu-chip-link
  * @slot - The content of the chip
- * @prop {keyof typeof SIZES} size - The size of the chip
  */
 export class LeuChipLink extends LeuChipBase {
-  static properties = {
-    ...LeuChipBase.properties,
-    size: { type: String, reflect: true },
-    href: { type: String, reflect: true },
-  }
+  /** The size of the chip */
+  @property({ type: String, reflect: true })
+  size: "regular" | "large" = "regular"
 
-  constructor() {
-    super()
-
-    this.inverted = false
-    this.size = SIZES.regular
-    this.href = ""
-  }
+  /** The URL that the chip links to */
+  @property({ type: String, reflect: true })
+  href: string = ""
 
   render() {
     return html`<a href=${this.href} class="button">

package/src/components/chip/ChipRemovable.ts

@@ -1,4 +1,5 @@
 import { html } from "lit"
+import { property } from "lit/decorators.js"
 
 import { LeuChipBase } from "./Chip.js"
 import { LeuIcon } from "../icon/Icon.js"
@@ -14,25 +15,17 @@ export class LeuChipRemovable extends LeuChipBase {
     "leu-icon": LeuIcon,
   }
 
-  static properties = {
-    ...LeuChipBase.properties,
-    value: { type: String, reflect: true },
-  }
-
-  constructor() {
-    super()
-    this.value = ""
-  }
+  @property({ type: String, reflect: true })
+  value: string = ""
 
   /**
    * Returns the value of the chip. If `value` is not set, it will return the text content
-   * @returns {string}
    */
   getValue() {
     return this.value || this.textContent.trim()
   }
 
-  handleClick() {
+  protected handleClick() {
     const customEvent = new CustomEvent("leu:remove", {
       bubbles: true,
       composed: true,

package/src/components/chip/ChipSelectable.ts

@@ -1,59 +1,45 @@
 import { html } from "lit"
+import { property } from "lit/decorators.js"
 
 import { LeuChipBase } from "./Chip.js"
 
-export const SIZES = {
-  small: "small",
-  regular: "regular",
-}
-
-export const VARIANTS = {
-  toggle: "toggle",
-  radio: "radio",
-}
-
 /**
  * A chip component that can be selected.
  * @tagname leu-chip-selectable
  * @slot - The content of the chip
- * @prop {keyof typeof SIZES} size - The size of the chip. Not supported for radio variant.
- * @prop {keyof typeof VARIANTS} variant - `toggle` or `radio`. Determines if only one or multiple chips can be selected.
- * @prop {boolean} checked - Whether the chip is selected.
- * @prop {string} value - The value of the chip.
  */
 export class LeuChipSelectable extends LeuChipBase {
-  static properties = {
-    ...LeuChipBase.properties,
-    size: { type: String, reflect: true },
-    variant: { type: String, reflect: true },
+  /** The size of the chip. Has no effect when variant is "radio" */
+  @property({ type: String, reflect: true })
+  size: "small" | "regular" = "regular"
 
-    checked: { type: Boolean, reflect: true },
-    value: { type: String, reflect: true },
-  }
+  /**
+   * The variant of the chip. Determines if only one or multiple chips can be selected.
+   * @default "toggle"
+   */
+  @property({ type: String, reflect: true })
+  variant: "toggle" | "radio" = "toggle"
+
+  /** Whether the chip is selected */
+  @property({ type: Boolean, reflect: true })
+  checked: boolean = false
+
+  /** The value of the chip */
+  @property({ type: String, reflect: true })
+  value: string = ""
 
   constructor() {
     super()
-    this.size = SIZES.regular
-
-    /**
-     * The variant of the chip. Has an effect not only on the visual appearance but also on the behavior.
-     * - `toggle`: The chip behaves like a toggle button.
-     * - `radio`: The chip behaves like a radio button.
-     * @default "toggle"
-     */
-    this.variant = VARIANTS.toggle
-    this.checked = false
-    this.value = ""
 
-    if (this.variant === VARIANTS.radio && this.size === SIZES.small) {
+    if (this.variant === "radio" && this.size === "small") {
       console.warn("Small size has no effect on radio variant")
     }
   }
 
-  handleClick() {
+  protected handleClick() {
     let nextcheckedState = this.checked
 
-    if (this.variant === VARIANTS.radio) {
+    if (this.variant === "radio") {
       nextcheckedState = true
     } else {
       nextcheckedState = !this.checked

package/src/components/chip/stories/chip-group.stories.ts

@@ -7,16 +7,13 @@ import "../leu-chip-removable.js"
 import "../leu-chip-link.js"
 import "../leu-chip-group.js"
 
-import { SELECTION_MODES } from "../ChipGroup.js"
-import { VARIANTS as SELECTABLE_VARIANTS } from "../ChipSelectable.js"
-
 export default {
   title: "Components/Chip/Group",
   component: "leu-chip-group",
   argTypes: {
     selectionMode: {
       control: "select",
-      options: Object.values(SELECTION_MODES),
+      options: ["single", "multiple", "none"],
     },
     headingLevel: {
       control: "select",
@@ -111,7 +108,7 @@ function SingleTemplate(args) {
       (chip) => html`
         <leu-chip-selectable
           ?inverted=${args.inverted}
-          variant=${SELECTABLE_VARIANTS.radio}
+          variant="radio"
           value="chip-${chip}"
         >
           ${chip}
@@ -153,10 +150,10 @@ export const Default = DefaultTemplate.bind({})
 Default.args = {}
 
 export const Single = SingleTemplate.bind({})
-Single.args = { selectionMode: SELECTION_MODES.single }
+Single.args = { selectionMode: "single" }
 
 export const Multiple = MultipleTemplate.bind({})
-Multiple.args = { selectionMode: SELECTION_MODES.multiple }
+Multiple.args = { selectionMode: "multiple" }
 
 export const Labeled = LabeledTemplate.bind({})
 Labeled.args = { label: "Top Themen" }

package/src/components/chip/stories/chip-link.stories.ts

@@ -3,13 +3,11 @@ import { ifDefined } from "lit/directives/if-defined.js"
 
 import "../leu-chip-link.js"
 
-import { SIZES } from "../ChipLink.js"
-
 export default {
   title: "Components/Chip/Link",
   component: "leu-chip-link",
   argTypes: {
-    size: { control: "select", options: Object.values(SIZES) },
+    size: { control: "select", options: ["regular", "large"] },
   },
   args: {
     label: "Publikationen",
@@ -44,4 +42,4 @@ export const Default = Template.bind({})
 Default.args = {}
 
 export const Large = Template.bind({})
-Large.args = { size: SIZES.large }
+Large.args = { size: "large" }

package/src/components/chip/stories/chip-selectable.stories.ts

@@ -3,14 +3,12 @@ import { ifDefined } from "lit/directives/if-defined.js"
 
 import "../leu-chip-selectable.js"
 
-import { SIZES, VARIANTS } from "../ChipSelectable.js"
-
 export default {
   title: "Components/Chip/Selectable",
   component: "leu-chip-selectable",
   argTypes: {
-    variant: { control: "select", options: Object.values(VARIANTS) },
-    size: { control: "select", options: Object.values(SIZES) },
+    variant: { control: "select", options: ["toggle", "radio"] },
+    size: { control: "select", options: ["small", "regular"] },
     label: { control: "text" },
   },
   args: {
@@ -50,7 +48,7 @@ export const Default = Template.bind({})
 Default.args = {}
 
 export const Small = Template.bind({})
-Small.args = { size: SIZES.small, label: "Publikationen Region" }
+Small.args = { size: "small", label: "Publikationen Region" }
 
 export const Radio = Template.bind({})
-Radio.args = { variant: VARIANTS.radio }
+Radio.args = { variant: "radio" }

package/src/components/chip/test/chip-group.test.ts

@@ -4,6 +4,7 @@ import { fixture, expect, oneEvent } from "@open-wc/testing"
 import "../leu-chip-selectable.js"
 import "../leu-chip-removable.js"
 import "../leu-chip-group.js"
+import type { LeuChipGroup } from "../leu-chip-group.js"
 
 async function removableFixture() {
   return fixture(html`
@@ -16,7 +17,7 @@ async function removableFixture() {
 }
 
 async function singleSelectionFixture() {
-  return fixture(html`
+  return fixture<LeuChipGroup>(html`
     <leu-chip-group selection-mode="single">
       <leu-chip-selectable value="1" variant="radio"
         >Publikationen</leu-chip-selectable
@@ -30,7 +31,7 @@ async function singleSelectionFixture() {
 }
 
 async function multipleSelectionFixture() {
-  return fixture(html`
+  return fixture<LeuChipGroup>(html`
     <leu-chip-group selection-mode="multiple">
       <leu-chip-selectable value="1">Publikationen</leu-chip-selectable>
       <leu-chip-selectable value="2">Daten</leu-chip-selectable>
@@ -101,68 +102,70 @@ describe("LeuChipGroup", () => {
 
   it("checks only chip when the value of the group is set (selection-mode=single)", async () => {
     const el = await singleSelectionFixture()
+    const items = el.querySelectorAll("leu-chip-selectable")
 
-    expect(el.items[0].checked).to.be.false
-    expect(el.items[1].checked).to.be.false
-    expect(el.items[2].checked).to.be.false
+    expect(items[0].checked).to.be.false
+    expect(items[1].checked).to.be.false
+    expect(items[2].checked).to.be.false
 
     el.value = ["2"]
 
-    expect(el.items[0].checked).to.be.false
-    expect(el.items[1].checked).to.be.true
-    expect(el.items[2].checked).to.be.false
+    expect(items[0].checked).to.be.false
+    expect(items[1].checked).to.be.true
+    expect(items[2].checked).to.be.false
 
     // Should check the first item with the given value and not first item of the value list
     el.value = ["2", "1"]
 
-    expect(el.items[0].checked).to.be.true
-    expect(el.items[1].checked).to.be.false
+    expect(items[0].checked).to.be.true
+    expect(items[1].checked).to.be.false
 
     el.value = []
 
-    expect(el.items[0].checked).to.be.false
-    expect(el.items[1].checked).to.be.false
-    expect(el.items[2].checked).to.be.false
+    expect(items[0].checked).to.be.false
+    expect(items[1].checked).to.be.false
+    expect(items[2].checked).to.be.false
 
     el.value = ["asdf"]
 
-    expect(el.items[0].checked).to.be.false
-    expect(el.items[1].checked).to.be.false
-    expect(el.items[2].checked).to.be.false
+    expect(items[0].checked).to.be.false
+    expect(items[1].checked).to.be.false
+    expect(items[2].checked).to.be.false
     expect(el.value).to.deep.equal([])
   })
 
   it("checks chips when the value of the group is set (selection-mode=multiple)", async () => {
     const el = await multipleSelectionFixture()
+    const items = el.querySelectorAll("leu-chip-selectable")
 
-    expect(el.items[0].checked).to.be.false
-    expect(el.items[1].checked).to.be.false
-    expect(el.items[2].checked).to.be.false
+    expect(items[0].checked).to.be.false
+    expect(items[1].checked).to.be.false
+    expect(items[2].checked).to.be.false
 
     el.value = ["2"]
 
-    expect(el.items[0].checked).to.be.false
-    expect(el.items[1].checked).to.be.true
-    expect(el.items[2].checked).to.be.false
+    expect(items[0].checked).to.be.false
+    expect(items[1].checked).to.be.true
+    expect(items[2].checked).to.be.false
 
     // Should check the first item with the given value and not first item of the value list
     el.value = ["2", "1"]
 
-    expect(el.items[0].checked).to.be.true
-    expect(el.items[1].checked).to.be.true
-    expect(el.items[2].checked).to.be.false
+    expect(items[0].checked).to.be.true
+    expect(items[1].checked).to.be.true
+    expect(items[2].checked).to.be.false
 
     el.value = []
 
-    expect(el.items[0].checked).to.be.false
-    expect(el.items[1].checked).to.be.false
-    expect(el.items[2].checked).to.be.false
+    expect(items[0].checked).to.be.false
+    expect(items[1].checked).to.be.false
+    expect(items[2].checked).to.be.false
 
     el.value = ["asdf"]
 
-    expect(el.items[0].checked).to.be.false
-    expect(el.items[1].checked).to.be.false
-    expect(el.items[2].checked).to.be.false
+    expect(items[0].checked).to.be.false
+    expect(items[1].checked).to.be.false
+    expect(items[2].checked).to.be.false
     expect(el.value).to.deep.equal([])
   })
 })

package/src/components/dialog/Dialog.ts

@@ -1,13 +1,12 @@
 import { html, nothing } from "lit"
 import { createRef, ref } from "lit/directives/ref.js"
 import { classMap } from "lit/directives/class-map.js"
+import { property } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 import { HasSlotController } from "../../lib/hasSlotController.js"
 import { LeuIcon } from "../icon/Icon.js"
 
-// design: https://www.figma.com/design/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?node-id=21161-186812&node-type=FRAME
-
 import styles from "./dialog.css"
 
 /**
@@ -25,30 +24,18 @@ export class LeuDialog extends LeuElement {
     delegatesFocus: true,
   }
 
-  /**
-   * @internal
-   */
-  hasSlotController = new HasSlotController(this, ["toolbar"])
+  @property({ type: String })
+  label: string = ""
 
-  static properties = {
-    label: { type: String },
-    sublabel: { type: String },
-    open: { type: Boolean, open: true },
-  }
+  @property({ type: String })
+  sublabel: string = ""
 
-  constructor() {
-    super()
+  @property({ type: Boolean, reflect: true })
+  open: boolean = false
 
-    /** @type {import("lit/directives/ref").Ref<HTMLDialogElement>} */
-    this._dialogRef = createRef()
+  protected _dialogRef = createRef<HTMLDialogElement>()
 
-    /** @type {string} */
-    this.label = ""
-    /** @type {string} */
-    this.sublabel = ""
-    /** @type {boolean} */
-    this.open = false
-  }
+  protected hasSlotController = new HasSlotController(this, ["toolbar"])
 
   show() {
     this._dialogRef.value.showModal()