@statistikzh/leu 0.0.2 → 0.1.0

package/.github/workflows/release-please.yml

@@ -7,13 +7,32 @@ permissions:
   contents: write
   pull-requests: write
 
-name: release-please
+name: Create release and publish to npm
 
 jobs:
   release-please:
     runs-on: ubuntu-latest
     steps:
       - uses: google-github-actions/release-please-action@v3
+        id: release
         with:
           release-type: node
           package-name: "@statistikzh/leu"
+      # The logic below handles the npm publication:
+      - uses: actions/checkout@v4
+        # these if statements ensure that a publication only occurs when
+        # a new release is created:
+        if: ${{ steps.release.outputs.release_created }}
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "20.x"
+          registry-url: "https://registry.npmjs.org"
+        if: ${{ steps.release.outputs.release_created }}
+      - run: npm ci
+        if: ${{ steps.release.outputs.release_created }}
+      - run: npm run build
+        if: ${{ steps.release.outputs.release_created }}
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        if: ${{ steps.release.outputs.release_created }}

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [0.1.0](https://github.com/statistikZH/leu/compare/v0.0.2...v0.1.0) (2023-11-15)
+
+
+### Features
+
+* use the transform class property babel plugin for the build ([e582230](https://github.com/statistikZH/leu/commit/e582230ac52bb74babd32cd2a83acea0a3cdd44e))
+
+
+### Bug Fixes
+
+* build all the available components ([f7c27c5](https://github.com/statistikZH/leu/commit/f7c27c53396c0f46f27285f6e1f529d43dc35588))
+
 ## [0.0.2](https://github.com/statistikZH/leu/compare/v0.0.1...v0.0.2) (2023-11-15)
 
 

package/babel.config.json

@@ -0,0 +1,3 @@
+{
+  "plugins": ["@babel/plugin-transform-class-properties"]
+}

package/dist/{Button-83c6df93.js → Button.js}

@@ -1,7 +1,7 @@
+import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
 import { css, LitElement, html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { I as Icon } from './icon-b68c7e1e.js';
-import { d as defineElement } from './defineElement-47d4f665.js';
+import { I as Icon } from './icon-03e86700.js';
 
 var css_248z = css`:host {
   display: inline-block;
@@ -266,13 +266,10 @@ Live Demo: zh.ch
 
 const BUTTON_VARIANTS = ["primary", "secondary", "ghost"];
 Object.freeze(BUTTON_VARIANTS);
-
 const BUTTON_SIZES = ["normal", "small"];
 Object.freeze(BUTTON_SIZES);
-
 const BUTTON_TYPES = ["button", "submit", "reset"];
 Object.freeze(BUTTON_TYPES);
-
 const BUTTON_EXPANDED_OPTIONS = ["open", "closed"];
 Object.freeze(BUTTON_EXPANDED_OPTIONS);
 
@@ -280,32 +277,6 @@ Object.freeze(BUTTON_EXPANDED_OPTIONS);
  * @tagname leu-button
  */
 class LeuButton extends LitElement {
-  static styles = css_248z
-
-  /**
-   * @internal
-   */
-  static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
-    delegatesFocus: true,
-  }
-
-  static properties = {
-    label: { type: String },
-    icon: { type: String },
-    iconAfter: { type: String },
-    size: { type: String },
-    variant: { type: String },
-    type: { type: String },
-
-    disabled: { type: Boolean },
-    round: { type: Boolean },
-    active: { type: Boolean },
-    inverted: { type: Boolean },
-    expanded: { type: String },
-    fluid: { type: Boolean },
-  }
-
   constructor() {
     super();
     /** @type {string} */
@@ -339,41 +310,33 @@ class LeuButton extends LitElement {
      */
     this.expanded = undefined;
   }
-
   getIconSize() {
-    return this.size === "small" || this.variant === "ghost" ? 16 : 24
+    return this.size === "small" || this.variant === "ghost" ? 16 : 24;
   }
-
   renderIconBefore() {
     if (this.icon) {
       return html`<div class="icon-wrapper icon-wrapper--before">
         ${Icon(this.icon, this.getIconSize())}
-      </div>`
+      </div>`;
     }
-
-    return nothing
+    return nothing;
   }
-
   renderIconAfter() {
     if (this.iconAfter && this.label && !this.icon) {
       return html`<div class="icon-wrapper icon-wrapper--after">
         ${Icon(this.iconAfter, this.getIconSize())}
-      </div>`
+      </div>`;
     }
-
-    return nothing
+    return nothing;
   }
-
   renderExpandingIcon() {
     if (typeof this.expanded !== "undefined" && this.variant === "ghost") {
       return html`<div class="icon-wrapper icon-wrapper--expanded">
         ${Icon("angleDropDown", 24)}
-      </div>`
+      </div>`;
     }
-
-    return nothing
+    return nothing;
   }
-
   render() {
     const cssClasses = {
       icon: !this.label && this.icon && !this.iconAfter,
@@ -381,7 +344,7 @@ class LeuButton extends LitElement {
       active: this.active,
       inverted: this.inverted,
       [this.variant]: true,
-      [this.size]: true,
+      [this.size]: true
     };
     return html`
       <button
@@ -392,12 +355,57 @@ class LeuButton extends LitElement {
         ${this.renderIconBefore()} ${this.label} ${this.renderIconAfter()}
         ${this.renderExpandingIcon()}
       </button>
-    `
+    `;
   }
 }
-
+_defineProperty(LeuButton, "styles", css_248z);
+/**
+ * @internal
+ */
+_defineProperty(LeuButton, "shadowRootOptions", {
+  ...LitElement.shadowRootOptions,
+  delegatesFocus: true
+});
+_defineProperty(LeuButton, "properties", {
+  label: {
+    type: String
+  },
+  icon: {
+    type: String
+  },
+  iconAfter: {
+    type: String
+  },
+  size: {
+    type: String
+  },
+  variant: {
+    type: String
+  },
+  type: {
+    type: String
+  },
+  disabled: {
+    type: Boolean
+  },
+  round: {
+    type: Boolean
+  },
+  active: {
+    type: Boolean
+  },
+  inverted: {
+    type: Boolean
+  },
+  expanded: {
+    type: String
+  },
+  fluid: {
+    type: Boolean
+  }
+});
 function defineButtonElements() {
   defineElement("button", LeuButton);
 }
 
-export { BUTTON_VARIANTS as B, LeuButton as L, BUTTON_SIZES as a, BUTTON_TYPES as b, BUTTON_EXPANDED_OPTIONS as c, defineButtonElements as d };
+export { BUTTON_EXPANDED_OPTIONS, BUTTON_SIZES, BUTTON_TYPES, BUTTON_VARIANTS, LeuButton, defineButtonElements };

package/dist/ButtonGroup.js

@@ -0,0 +1,75 @@
+import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
+import { css, LitElement, html } from 'lit';
+import { defineButtonElements } from './Button.js';
+import 'lit/directives/class-map.js';
+import './icon-03e86700.js';
+
+var css_248z = css`:host,
+:host * {
+  box-sizing: border-box;
+}
+
+.group {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+`;
+
+/**
+ * @tagname leu-button-group
+ */
+class LeuButtonGroup extends LitElement {
+  constructor() {
+    super();
+    /** @type {Array} */
+    this.items = [];
+    /** @type {string} */
+    this.value = null;
+  }
+  _setValue(newValue) {
+    this.value = newValue;
+    this.dispatchEvent(new CustomEvent("input", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        value: newValue
+      }
+    }));
+  }
+  render() {
+    return html`
+      <div role="menubar" class="group">
+        ${this.items.map(item => html`
+              <leu-button
+                label=${item}
+                variant=${this.value === item ? "primary" : "secondary"}
+                @click=${() => {
+      this._setValue(item);
+    }}
+                role="menuitemradio"
+                aria-checked=${this.value === item}
+              >
+              </leu-button>
+            `)}
+      </div>
+    `;
+  }
+}
+_defineProperty(LeuButtonGroup, "styles", css_248z);
+_defineProperty(LeuButtonGroup, "properties", {
+  items: {
+    type: Array,
+    reflect: true
+  },
+  value: {
+    type: String,
+    reflect: true
+  }
+});
+function defineButtonGroupElements() {
+  defineButtonElements();
+  defineElement("button-group", LeuButtonGroup);
+}
+
+export { LeuButtonGroup, defineButtonGroupElements };

package/dist/Checkbox.js

@@ -1,12 +1,45 @@
-import { LitElement, css, html } from 'lit';
-import { I as Icon } from './icon-b68c7e1e.js';
-import { d as defineElement } from './defineElement-47d4f665.js';
+import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
+import { css, LitElement, html } from 'lit';
+import { I as Icon } from './icon-03e86700.js';
 
 /**
  * @tagname leu-checkbox
  */
 class LeuCheckbox extends LitElement {
-  static styles = css`
+  constructor() {
+    super();
+    this.checked = false;
+    this.disabled = false;
+    this.tabIndex = 0;
+    this.checkIcon = Icon("check");
+  }
+  handleChange(event) {
+    this.checked = event.target.checked;
+    const customEvent = new CustomEvent(event.type, event);
+    this.dispatchEvent(customEvent);
+  }
+  handleInput(event) {
+    this.checked = event.target.checked;
+  }
+  render() {
+    return html`
+      <input
+        id=${this.identifier}
+        class="checkbox"
+        type="checkbox"
+        name="${this.name}"
+        @change=${this.handleChange}
+        @input=${this.handleInput}
+        .checked=${this.checked}
+        ?disabled=${this.disabled}
+        .value=${this.value}
+      />
+      <label for=${this.identifier} class="label"><slot></slot></label>
+      <div class="icon">${this.checkIcon}</div>
+    `;
+  }
+}
+_defineProperty(LeuCheckbox, "styles", css`
     :host {
       --checkbox-color: var(--leu-color-black-40);
       --checkbox-color-disabled: var(--leu-color-black-20);
@@ -83,60 +116,30 @@ class LeuCheckbox extends LitElement {
       color: var(--checkbox-tick-color);
       pointer-events: none;
     }
-  `
-
-  static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
-    delegatesFocus: true,
-  }
-
-  static properties = {
-    checked: { type: Boolean, reflect: true },
-    disabled: { type: Boolean, reflect: true },
-    identifier: { type: String },
-    value: { type: String },
-    name: { type: String },
-  }
-
-  constructor() {
-    super();
-    this.checked = false;
-    this.disabled = false;
-    this.tabIndex = 0;
-
-    this.checkIcon = Icon("check");
+  `);
+_defineProperty(LeuCheckbox, "shadowRootOptions", {
+  ...LitElement.shadowRootOptions,
+  delegatesFocus: true
+});
+_defineProperty(LeuCheckbox, "properties", {
+  checked: {
+    type: Boolean,
+    reflect: true
+  },
+  disabled: {
+    type: Boolean,
+    reflect: true
+  },
+  identifier: {
+    type: String
+  },
+  value: {
+    type: String
+  },
+  name: {
+    type: String
   }
-
-  handleChange(event) {
-    this.checked = event.target.checked;
-
-    const customEvent = new CustomEvent(event.type, event);
-    this.dispatchEvent(customEvent);
-  }
-
-  handleInput(event) {
-    this.checked = event.target.checked;
-  }
-
-  render() {
-    return html`
-      <input
-        id=${this.identifier}
-        class="checkbox"
-        type="checkbox"
-        name="${this.name}"
-        @change=${this.handleChange}
-        @input=${this.handleInput}
-        .checked=${this.checked}
-        ?disabled=${this.disabled}
-        .value=${this.value}
-      />
-      <label for=${this.identifier} class="label"><slot></slot></label>
-      <div class="icon">${this.checkIcon}</div>
-    `
-  }
-}
-
+});
 function defineCheckboxElements() {
   defineElement("checkbox", LeuCheckbox);
 }

package/dist/CheckboxGroup.js

@@ -1,12 +1,39 @@
-import { LitElement, css, html } from 'lit';
+import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
+import { css, LitElement, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { d as defineElement } from './defineElement-47d4f665.js';
 
 /**
  * @tagname leu-checkbox-group
  */
 class LeuCheckboxGroup extends LitElement {
-  static styles = css`
+  constructor() {
+    super();
+    this.orientation = "HORIZONTAL";
+    this.items = [];
+  }
+  get value() {
+    return this.items.filter(i => i.checked).map(i => i.value);
+  }
+  handleSlotChange() {
+    this.handleItems();
+  }
+  handleItems() {
+    this.items = [...this.querySelectorAll(":scope > *:not([slot])")];
+  }
+  render() {
+    const fieldsetClasses = {
+      fieldset: "true",
+      "fieldset--vertical": this.orientation === "VERTICAL"
+    };
+    return html`
+      <fieldset class=${classMap(fieldsetClasses)}>
+        <legend class="legend"><slot name="legend"></slot></legend>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </fieldset>
+    `;
+  }
+}
+_defineProperty(LeuCheckboxGroup, "styles", css`
     :host {
       --group-font-regular: var(--leu-font-regular);
       --group-font-black: var(--leu-font-black);
@@ -36,45 +63,12 @@ class LeuCheckboxGroup extends LitElement {
 
       margin-bottom: 0.5rem;
     }
-  `
-
-  static properties = {
-    orientation: { type: String },
-  }
-
-  constructor() {
-    super();
-    this.orientation = "HORIZONTAL";
-    this.items = [];
-  }
-
-  get value() {
-    return this.items.filter((i) => i.checked).map((i) => i.value)
-  }
-
-  handleSlotChange() {
-    this.handleItems();
-  }
-
-  handleItems() {
-    this.items = [...this.querySelectorAll(":scope > *:not([slot])")];
+  `);
+_defineProperty(LeuCheckboxGroup, "properties", {
+  orientation: {
+    type: String
   }
-
-  render() {
-    const fieldsetClasses = {
-      fieldset: "true",
-      "fieldset--vertical": this.orientation === "VERTICAL",
-    };
-
-    return html`
-      <fieldset class=${classMap(fieldsetClasses)}>
-        <legend class="legend"><slot name="legend"></slot></legend>
-        <slot @slotchange=${this.handleSlotChange}></slot>
-      </fieldset>
-    `
-  }
-}
-
+});
 function defineCheckboxGroupElements() {
   defineElement("checkbox-group", LeuCheckboxGroup);
 }

package/dist/{Chip-60af1402.js → Chip-389013ff.js}

@@ -1,3 +1,4 @@
+import { _ as _defineProperty } from './defineElement-ba770aed.js';
 import { css, LitElement } from 'lit';
 
 var css_248z = css`:host,
@@ -140,23 +141,21 @@ var css_248z = css`:host,
 /* Design: https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=21161-184433&mode=design&t=Kjo5VDiqivihn8dh-11 */
 
 class LeuChipBase extends LitElement {
-  static styles = css_248z
-
-  /** @internal */
-  static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
-    delegatesFocus: true,
-  }
-
-  static properties = {
-    inverted: { type: Boolean },
-  }
-
   constructor() {
     super();
-
     this.inverted = false;
   }
 }
+_defineProperty(LeuChipBase, "styles", css_248z);
+/** @internal */
+_defineProperty(LeuChipBase, "shadowRootOptions", {
+  ...LitElement.shadowRootOptions,
+  delegatesFocus: true
+});
+_defineProperty(LeuChipBase, "properties", {
+  inverted: {
+    type: Boolean
+  }
+});
 
 export { LeuChipBase as L };

package/dist/ChipGroup.js

@@ -1,5 +1,5 @@
+import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
 import { css, LitElement, html } from 'lit';
-import { d as defineElement } from './defineElement-47d4f665.js';
 
 var css_248z = css`:host {
   display: flex;
@@ -13,7 +13,7 @@ var css_248z = css`:host {
 const SELECTION_MODES = {
   single: "single",
   multiple: "multiple",
-  none: "none",
+  none: "none"
 };
 
 /**
@@ -21,57 +21,50 @@ const SELECTION_MODES = {
  * @tagname leu-chip-group
  */
 class LeuChipGroup extends LitElement {
-  static styles = css_248z
-
-  static properties = {
-    selectionMode: { type: String, attribute: "selection-mode" },
-  }
-
   constructor() {
     super();
 
     /** @internal */
+    /** @internal */
+    _defineProperty(this, "handleInput", e => {
+      if (this.selectionMode === SELECTION_MODES.single) {
+        this.items.forEach(item => {
+          item.selected = item === e.target; // eslint-disable-line no-param-reassign
+        });
+      }
+    });
+    /** @internal */
+    _defineProperty(this, "handleSlotChange", e => {
+      const slot = e.target;
+      const items = slot.assignedElements({
+        flatten: true
+      });
+      this.items = items;
+    });
     this.items = [];
   }
-
   connectedCallback() {
     super.connectedCallback();
-
     this.addEventListener("input", this.handleInput);
   }
-
   disconnectedCallback() {
     super.disconnectedCallback();
-
     this.removeEventListener("input", this.handleInput);
   }
-
   get value() {
-    return this.items.filter((i) => i.selected).map((i) => i.value)
-  }
-
-  /** @internal */
-  handleInput = (e) => {
-    if (this.selectionMode === SELECTION_MODES.single) {
-      this.items.forEach((item) => {
-        item.selected = item === e.target; // eslint-disable-line no-param-reassign
-      });
-    }
-  }
-
-  /** @internal */
-  handleSlotChange = (e) => {
-    const slot = e.target;
-    const items = slot.assignedElements({ flatten: true });
-
-    this.items = items;
+    return this.items.filter(i => i.selected).map(i => i.value);
   }
-
   render() {
-    return html`<slot @slotchange=${this.handleSlotChange}></slot>`
+    return html`<slot @slotchange=${this.handleSlotChange}></slot>`;
   }
 }
-
+_defineProperty(LeuChipGroup, "styles", css_248z);
+_defineProperty(LeuChipGroup, "properties", {
+  selectionMode: {
+    type: String,
+    attribute: "selection-mode"
+  }
+});
 function defineChipGroupElements() {
   defineElement("chip-group", LeuChipGroup);
 }