@statistikzh/leu 0.28.1 → 0.28.2

package/src/lib/mixins/FormAssociatedMixin.ts

@@ -1,115 +0,0 @@
-/* eslint-disable max-classes-per-file */
-import { property } from "lit/decorators.js"
-import { LeuElement } from "../LeuElement.js"
-
-/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-type AbstractConstructor<T = object> = abstract new (...args: any[]) => T
-
-// @todo define sensible eslint settings for classes
-/* eslint-disable max-classes-per-file */
-export declare abstract class FormAssociatedMixinType {
-  static formAssociated: boolean
-
-  protected readonly internals: ElementInternals
-
-  name: string | null
-
-  disabled: boolean
-
-  required: boolean
-
-  protected hasInteracted: boolean
-
-  form: HTMLFormElement | null
-
-  validity: ValidityState
-
-  validationMessage: string
-
-  willValidate: boolean
-
-  checkValidity(): boolean
-
-  reportValidity(): boolean
-
-  resetValidity(): void
-
-  formDisabledCallback(isDisabled: boolean): void
-
-  formResetCallback(): void
-
-  formStateRestoreCallback(_state: string | FormData | null): void
-
-  protected abstract setFormValue(): void
-}
-
-export const FormAssociatedMixin = <T extends AbstractConstructor<LeuElement>>(
-  superClass: T,
-) => {
-  abstract class FormAssociatedMixinClass extends superClass {
-    static formAssociated = true
-
-    protected readonly internals: ElementInternals = this.attachInternals()
-
-    get form() {
-      return this.internals.form
-    }
-
-    /** The name of the form control. Is submitted with the `value` as key-value pair. */
-    @property({ reflect: true })
-    name: string | null = null
-
-    /** Disables the form control. */
-    @property({ type: Boolean })
-    disabled: boolean = false
-
-    // Treat every form control that doesn't implement its own `required` property as "not required"
-    required: boolean = false
-
-    /** Whether the user has interacted with the form control. */
-    @property({ state: true, attribute: false })
-    protected hasInteracted: boolean = false
-
-    get validity() {
-      return this.internals.validity
-    }
-
-    get validationMessage() {
-      return this.internals.validationMessage
-    }
-
-    get willValidate() {
-      return this.internals.willValidate
-    }
-
-    checkValidity() {
-      return this.internals.checkValidity()
-    }
-
-    reportValidity() {
-      return this.internals.reportValidity()
-    }
-
-    resetValidity() {
-      this.internals.setValidity({})
-    }
-
-    public formDisabledCallback(isDisabled: boolean) {
-      this.disabled = isDisabled
-    }
-
-    public formResetCallback() {
-      this.hasInteracted = false
-      this.resetValidity()
-    }
-
-    public formStateRestoreCallback(_state: string | FormData | null) {
-      this.resetValidity()
-    }
-
-    protected abstract setFormValue(): void
-  }
-
-  return FormAssociatedMixinClass as unknown as AbstractConstructor<FormAssociatedMixinType> &
-    T
-}

package/src/lib/styleMap.ts

@@ -1,139 +0,0 @@
-/* eslint-disable no-restricted-syntax */
-
-/**
- * The original lit styleMap directive is not compatible with a strict style-src content security policy.
- * There is an an open issue about this in the lit repository:
- * https://github.com/lit/lit/issues/4719
- *
- * This file contains a custom implementation of the styleMap directive that bypasses
- * the render method and directly updates the styles using the .style.setProperty and
- * .style.removeProperty methods.
- *
- * In the original implementation, the render method returns a string that is set as the
- * value of the style attribute. This approach is blocked by strict CSPs that disallow
- * inline styles.
- *
- * As we don't support SSR in this library, we can safely skip the render method.
- */
-
-import { AttributePart, noChange, nothing } from "lit"
-import {
-  directive,
-  Directive,
-  DirectiveParameters,
-  PartInfo,
-  PartType,
-} from "lit/directive.js"
-
-/**
- * A key-value set of CSS properties and values.
- *
- * The key should be either a valid CSS property name string, like
- * `'background-color'`, or a valid JavaScript camel case property name
- * for CSSStyleDeclaration like `backgroundColor`.
- */
-export interface StyleInfo {
-  [name: string]: string | number | undefined | null
-}
-
-const important = "important"
-// The leading space is important
-const importantFlag = " !" + important
-// How many characters to remove from a value, as a negative number
-const flagTrim = 0 - importantFlag.length
-
-class StyleMapDirective extends Directive {
-  private _previousStyleProperties?: Set<string>
-
-  constructor(partInfo: PartInfo) {
-    super(partInfo)
-    if (
-      partInfo.type !== PartType.ATTRIBUTE ||
-      partInfo.name !== "style" ||
-      (partInfo.strings?.length as number) > 2
-    ) {
-      throw new Error(
-        "The `styleMap` directive must be used in the `style` attribute " +
-          "and must be the only part in the attribute.",
-      )
-    }
-  }
-
-  render(_styleInfo: Readonly<StyleInfo>) {
-    return nothing
-  }
-
-  override update(part: AttributePart, [styleInfo]: DirectiveParameters<this>) {
-    const { style } = part.element as HTMLElement
-
-    if (this._previousStyleProperties === undefined) {
-      this._previousStyleProperties = new Set(Object.keys(styleInfo))
-    }
-
-    // Remove old properties that no longer exist in styleInfo
-    for (const name of this._previousStyleProperties) {
-      // If the name isn't in styleInfo or it's null/undefined
-      if (styleInfo[name] == null) {
-        this._previousStyleProperties!.delete(name)
-        if (name.includes("-")) {
-          style.removeProperty(name)
-        } else {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          ;(style as any)[name] = null
-        }
-      }
-    }
-
-    // Add or update properties
-    for (const name in styleInfo) {
-      const value = styleInfo[name]
-      if (value != null) {
-        this._previousStyleProperties.add(name)
-        const isImportant =
-          typeof value === "string" && value.endsWith(importantFlag)
-        if (name.includes("-") || isImportant) {
-          style.setProperty(
-            name,
-            isImportant
-              ? (value as string).slice(0, flagTrim)
-              : (value as string),
-            isImportant ? important : "",
-          )
-        } else {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          ;(style as any)[name] = value
-        }
-      }
-    }
-    return noChange
-  }
-}
-
-/**
- * !A custom implementation of lit's `styleMap` directive!
- * A directive that applies CSS properties to an element.
- *
- * `styleMap` can only be used in the `style` attribute and must be the only
- * expression in the attribute. It takes the property names in the
- * {@link StyleInfo styleInfo} object and adds the properties to the inline
- * style of the element.
- *
- * Property names with dashes (`-`) are assumed to be valid CSS
- * property names and set on the element's style object using `setProperty()`.
- * Names without dashes are assumed to be camelCased JavaScript property names
- * and set on the element's style object using property assignment, allowing the
- * style object to translate JavaScript-style names to CSS property names.
- *
- * For example `styleMap({backgroundColor: 'red', 'border-top': '5px', '--size':
- * '0'})` sets the `background-color`, `border-top` and `--size` properties.
- *
- * @param styleInfo
- * @see {@link https://lit.dev/docs/templates/directives/#stylemap styleMap code samples on Lit.dev}
- */
-export const styleMap = directive(StyleMapDirective)
-
-/**
- * The type of the class that powers this directive. Necessary for naming the
- * directive's return type.
- */
-export type { StyleMapDirective }

package/src/lib/utils.ts

@@ -1,45 +0,0 @@
-/**
- * Return a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked.
- * @param {Function} func - Your function
- * @param {Number} timeout - Default is 500 ms
- * @returns {Function} - Your function wrapped in a timeout function
- */
-export const debounce = function debounce(func, timeout = 500) {
-  let timer = null
-  return (...args) => {
-    clearTimeout(timer)
-    timer = setTimeout(() => {
-      func.apply(this, args)
-    }, timeout)
-  }
-}
-
-/**
- * Return a throttled function that only invokes func at most once per every wait milliseconds.
- * @param {Function} func - Your function
- * @param {Number} timeout - Default is 500 ms
- * @returns {Function} - Your function wrapped in a timeout function
- */
-export const throttle = function throttle(func, timeout = 500) {
-  let timer = null
-  return (...args) => {
-    if (timer === null) {
-      func(...args)
-      timer = setTimeout(() => {
-        timer = null
-      }, timeout)
-    }
-  }
-}
-
-/**
- * Clamp a number between a minimum and maximum value.
- */
-export const clamp = (value: number, min: number, max: number) =>
-  Math.min(Math.max(value, min), max)
-
-/**
- * Check if a value is a finite number.
- */
-export const isNumber = (value: unknown): value is number =>
-  typeof value === "number" && Number.isFinite(value)

package/src/styles/common-styles.css

@@ -1,14 +0,0 @@
-:host,
-:host * {
-  box-sizing: border-box;
-  font-feature-settings: var(--leu-t-font-feature-settings);
-}
-
-/**
- * If a custom element sets the display property to any value
- * it will not be hidden by the [hidden] attribute.
- * That's why we need to specify this rule.
- */
-:host([hidden]) {
-  display: none;
-}

package/src/styles/custom-media.css

@@ -1,6 +0,0 @@
-@custom-media --viewport-small (min-width: 400px);
-@custom-media --viewport-small-max (max-width: 599px);
-@custom-media --viewport-regular (min-width: 600px);
-@custom-media --viewport-medium (min-width: 840px);
-@custom-media --viewport-large (min-width: 1024px);
-@custom-media --viewport-xlarge (min-width: 1280px);

package/src/styles/font-definitions.json

@@ -1,210 +0,0 @@
-{
-  "definitions": [
-    {
-      "fontSize": "12px",
-      "fontWeight": "regular",
-      "lineHeight": 1.5,
-      "spacing": "9px",
-      "name": "tiny"
-    },
-    {
-      "fontSize": "12px",
-      "fontWeight": "black",
-      "lineHeight": 1.5,
-      "spacing": "9px",
-      "name": "tiny"
-    },
-    {
-      "fontSize": "14px",
-      "fontWeight": "regular",
-      "lineHeight": 1.4,
-      "spacing": "10px",
-      "name": "small"
-    },
-    {
-      "fontSize": "14px",
-      "fontWeight": "black",
-      "lineHeight": 1.4,
-      "spacing": "10px",
-      "name": "small"
-    },
-    {
-      "fontSize": "16px",
-      "fontWeight": "regular",
-      "lineHeight": 1.5,
-      "spacing": "12px",
-      "name": "regular"
-    },
-    {
-      "fontSize": "16px",
-      "fontWeight": "black",
-      "lineHeight": 1.5,
-      "spacing": "12px",
-      "name": "regular"
-    },
-    {
-      "fontSize": "18px",
-      "fontWeight": "regular",
-      "lineHeight": 1.5,
-      "spacing": "13px",
-      "name": "bigger-regular"
-    },
-    {
-      "fontSize": "18px",
-      "fontWeight": "black",
-      "lineHeight": 1.3,
-      "spacing": "12px",
-      "name": "bigger-regular"
-    },
-    {
-      "fontSize": "20px",
-      "fontWeight": "regular",
-      "lineHeight": 1.5,
-      "spacing": "15px",
-      "name": "medium"
-    },
-    {
-      "fontSize": "20px",
-      "fontWeight": "black",
-      "lineHeight": 1.3,
-      "spacing": "13px",
-      "name": "medium"
-    },
-    {
-      "fontSize": "24px",
-      "fontWeight": "regular",
-      "lineHeight": 1.5,
-      "spacing": "18px",
-      "name": "large"
-    },
-    {
-      "fontSize": "24px",
-      "fontWeight": "black",
-      "lineHeight": 1.3,
-      "spacing": "15px",
-      "name": "large"
-    },
-    {
-      "fontSize": "28px",
-      "fontWeight": "black",
-      "lineHeight": 1.2,
-      "spacing": "17px",
-      "name": "small-big"
-    },
-    {
-      "fontSize": "32px",
-      "fontWeight": "black",
-      "lineHeight": 1.2,
-      "spacing": "19px",
-      "name": "big"
-    },
-    {
-      "fontSize": "40px",
-      "fontWeight": "black",
-      "lineHeight": 1.2,
-      "spacing": "24px",
-      "name": "bigger-big"
-    },
-    {
-      "fontSize": "48px",
-      "fontWeight": "black",
-      "lineHeight": 1,
-      "spacing": "24px",
-      "name": "small-huge"
-    },
-    {
-      "fontSize": "56px",
-      "fontWeight": "black",
-      "lineHeight": 1,
-      "spacing": "28px",
-      "name": "huge"
-    },
-    {
-      "fontSize": "72px",
-      "fontWeight": "black",
-      "lineHeight": 1,
-      "spacing": "36px",
-      "name": "giant"
-    }
-  ],
-  "curves": [
-    {
-      "name": "tiny",
-      "weights": ["regular", "black"],
-      "steps": [
-        [null, "tiny"],
-        ["--viewport-regular", "small"]
-      ]
-    },
-    {
-      "name": "small",
-      "weights": ["regular", "black"],
-      "steps": [
-        [null, "small"],
-        ["--viewport-regular", "regular"],
-        ["--viewport-large", "bigger-regular"]
-      ]
-    },
-    {
-      "name": "regular",
-      "weights": ["regular", "black"],
-      "steps": [
-        [null, "regular"],
-        ["--viewport-small", "bigger-regular"],
-        ["--viewport-xlarge", "medium"]
-      ]
-    },
-    {
-      "name": "bigger-regular",
-      "weights": ["regular", "black"],
-      "steps": [
-        [null, "bigger-regular"],
-        ["--viewport-regular", "medium"],
-        ["--viewport-xlarge", "large"]
-      ]
-    },
-    {
-      "name": "medium",
-      "weights": ["black"],
-      "steps": [
-        [null, "bigger-regular"],
-        ["--viewport-small", "medium"],
-        ["--viewport-large", "large"],
-        ["--viewport-xlarge", "small-big"]
-      ]
-    },
-    {
-      "name": "large",
-      "weights": ["black"],
-      "steps": [
-        [null, "bigger-regular"],
-        ["--viewport-regular", "large"],
-        ["--viewport-large", "small-big"],
-        ["--viewport-xlarge", "big"]
-      ]
-    },
-    {
-      "name": "big",
-      "weights": ["black"],
-      "steps": [
-        [null, "large"],
-        ["--viewport-regular", "small-big"],
-        ["--viewport-medium", "big"],
-        ["--viewport-large", "bigger-big"],
-        ["--viewport-xlarge", "small-huge"]
-      ]
-    },
-    {
-      "name": "huge",
-      "weights": ["black"],
-      "steps": [
-        [null, "small-big"],
-        ["--viewport-small", "big"],
-        ["--viewport-regular", "bigger-big"],
-        ["--viewport-medium", "small-huge"],
-        ["--viewport-large", "huge"],
-        ["--viewport-xlarge", "giant"]
-      ]
-    }
-  ]
-}

package/src/styles/style.stories.ts

@@ -1,64 +0,0 @@
-import { html } from "lit"
-
-export default {
-  title: "Components/Layout",
-}
-
-function Template() {
-  return html` <style>
-      .container {
-        display: grid;
-        grid-template-columns: var(--leu-grid-template-columns);
-        gap: var(--leu-grid-gap);
-        max-width: var(--leu-grid-max-width);
-
-        margin: 0 auto;
-        padding: 1rem;
-
-        background-color: var(--leu-color-black-5);
-        font-family: var(--leu-font-family-regular);
-        font-feature-settings: var(--leu-t-font-feature-settings);
-      }
-
-      .container div {
-        background-color: var(--leu-color-black-transp-5);
-        padding: 1rem;
-      }
-    </style>
-    <div class="container">
-      <div style="grid-column-end: span 12;">
-        <p>
-          This story demonstrates the use of the predefined grid custom
-          properties. It is not a component that can be reused.
-        </p>
-      </div>
-      <div style="grid-column: var(--leu-grid-columns-full)">
-        <pre>--leu-grid-columns-full</pre>
-        <p>A preset to use the full width of the grid</p>
-      </div>
-      <div style="grid-column: var(--leu-grid-columns-offset)">
-        <pre>--leu-grid-columns-offset</pre>
-        <p>
-          A preset that indents the content by two columns starting at the
-          regular breakpoint. On smaller breakpoints it will use the full width.
-        </p>
-      </div>
-
-      ${[
-        [2, 2, 2, 2, 2, 2],
-        [3, 3, 3, 3],
-        [4, 4, 4],
-        [6, 6],
-      ]
-        .flat()
-        .map(
-          (columns) =>
-            html`<div style="grid-column-end: span ${columns}">
-              ${columns}
-            </div>`,
-        )}
-    </div>`
-}
-
-export const Regular = Template.bind({})
-Regular.args = {}

package/src/styles/theme.css

@@ -1,90 +0,0 @@
-@import url("./custom-media.css");
-
-:root,
-:host {
-  --leu-color-black-100: #000;
-  --leu-color-black-80: #333;
-  --leu-color-black-60: #666;
-  --leu-color-black-40: #949494;
-  --leu-color-black-20: #ccc;
-  --leu-color-black-10: #f0f0f0;
-  --leu-color-black-5: #f7f7f7;
-  --leu-color-black-0: #fffffe;
-
-  --leu-color-black-transp-80: rgb(0 0 0 / 80%);
-  --leu-color-black-transp-60: rgb(0 0 0 / 60%);
-  --leu-color-black-transp-40: rgb(0 0 0 / 40%);
-  --leu-color-black-transp-20: rgb(0 0 0 / 20%);
-  --leu-color-black-transp-10: rgb(0 0 0 / 10%);
-  --leu-color-black-transp-5: rgb(0 0 0 / 5%);
-
-  --leu-color-white-transp-90: rgb(255 255 255 / 90%);
-  --leu-color-white-transp-70: rgb(255 255 255 / 70%);
-  --leu-color-white-transp-40: rgb(255 255 255 / 40%);
-  --leu-color-white-transp-10: rgb(255 255 255 / 10%);
-
-  --leu-color-accent-blue: #0076bd;
-  --leu-color-accent-darkblue: #00407c;
-  --leu-color-accent-turquoise: #00797b;
-  --leu-color-accent-green: #1a7f1f;
-  --leu-color-accent-bordeaux: #b01657;
-  --leu-color-accent-magenta: #d40053;
-  --leu-color-accent-violet: #7f3da7;
-  --leu-color-accent-gray: var(--leu-color-black-60);
-
-  --leu-color-accent-blue-soft: #edf5fa;
-  --leu-color-accent-darkblue-soft: #e0e8ee;
-  --leu-color-accent-turquoise-soft: #e8f3f2;
-  --leu-color-accent-green-soft: #ebf6eb;
-  --leu-color-accent-bordeaux-soft: #f6e3ea;
-  --leu-color-accent-magenta-soft: #fcedf3;
-  --leu-color-accent-violet-soft: #ece2f1;
-  --leu-color-accent-gray-soft: var(--leu-color-black-10);
-
-  --leu-color-func-cyan: #009ee0;
-  --leu-color-func-red: #d93c1a;
-  --leu-color-func-green: #1a7f1f;
-
-  /* stylelint-disable value-keyword-case */
-  --leu-font-family-regular:
-    "InterRegular", "HelveticaNowRegular", "Helvetica", sans-serif;
-  --leu-font-family-black:
-    "InterBlack", "HelveticaNowBlack", "Arial Black", "Helvetica", sans-serif;
-  /* stylelint-enable value-keyword-case */
-
-  --leu-box-shadow-short: 0px 0px 2px var(--leu-color-black-transp-40);
-  --leu-box-shadow-regular: 0px 0px 16px var(--leu-color-black-transp-20);
-  --leu-box-shadow-long: 0px 0px 80px var(--leu-color-black-transp-20);
-
-  --leu-z-index-popup: 100;
-  --leu-z-index-scroll-top: 1099;
-
-  @leu-font-styles './font-definitions.json';
-  --leu-t-font-feature-settings: "ss07", "ss08", "cv03", "cv04", "cv10";
-
-  /*
-   * Grid system
-   *
-   * The design system uses a 6 columns system on smaller screens.
-   * For simplicity we use a 12 column grid for all breakpoints (zh web implementation does the same).
-   *
-   * The goal is to keep the css footprint small
-   * by not generating all classes for every cell width for every breakpoint.
-   * Most components don't need a grid and those who do probably have a very simple configuration.
-   * If we have enough use cases for a more complex grid system we can add it later.
-   */
-  --leu-grid-gap: 1rem;
-  --leu-grid-template-columns: repeat(12, minmax(0, 4.25rem));
-  --leu-grid-max-width: 73rem;
-
-  --leu-grid-columns-full: 1 / -1;
-  --leu-grid-columns-offset: 1 / -1;
-
-  @media (--viewport-regular) {
-    --leu-grid-columns-offset: 3 / -1;
-  }
-
-  @media (--viewport-medium) {
-    --leu-grid-gap: 2rem;
-  }
-}