@statistikzh/leu 0.4.0 → 0.5.0

package/dist/Button.js

@@ -1,420 +1,6 @@
-import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
-import { css, LitElement, html, nothing } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
-import { I as Icon } from './icon-03e86700.js';
-
-var css_248z = css`:host {
-  display: inline-block;
-}
-
-button {
-  font-family: var(--leu-font-black);
-  text-align: center;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  transition: background 0.1s ease;
-  cursor: pointer;
-  border: 1px solid transparent;
-  border-radius: 2px;
-  display: flex;
-  align-items: center;
-  -moz-column-gap: 8px;
-       column-gap: 8px;
-}
-
-button.round {
-  border-radius: 50%;
-}
-
-button:disabled {
-  cursor: not-allowed;
-}
-
-button:focus-visible {
-  border: 1px solid var(--leu-color-black-0);
-  outline: 2px solid var(--leu-color-func-cyan);
-}
-
-button.inverted:focus-visible {
-  border: 1px solid var(--leu-color-black-100);
-  outline: 2px solid var(--leu-color-black-0);
-}
-
-:host([fluid]) button {
-  width: 100%;
-  justify-content: center;
-}
-
-/* size - regular */
-
-button.regular {
-  padding: 12px 24px;
-  font-size: 16px;
-  line-height: 24px;
-}
-
-button.regular.icon {
-  padding: 12px;
-}
-
-/* size - small */
-
-button.small {
-  padding: 6px 24px;
-  font-size: 14px;
-  line-height: 20px;
-}
-
-button.small.icon {
-  padding: 8px;
-}
-
-/* primary */
-
-button.primary {
-  color: var(--leu-color-black-0);
-  background: var(--leu-color-black-100);
-}
-
-button.primary:hover {
-  color: var(--leu-color-black-0);
-  background: var(--leu-color-black-transp-80);
-}
-
-button.primary.active {
-  color: var(--leu-color-black-0);
-  background: var(--leu-color-black-100);
-}
-
-button.primary:disabled {
-  color: var(--leu-color-black-0);
-  background: var(--leu-color-black-transp-20);
-}
-
-/* secondary */
-
-button.secondary {
-  color: var(--leu-color-black-transp-60);
-  background: var(--leu-color-black-transp-10);
-}
-
-button.secondary:hover {
-  color: var(--leu-color-black-100);
-  background: var(--leu-color-black-transp-20);
-}
-
-button.secondary.active {
-  color: var(--leu-color-black-0);
-  background: var(--leu-color-black-100);
-}
-
-button.secondary:disabled {
-  color: var(--leu-color-black-transp-20);
-  background: var(--leu-color-black-transp-5);
-}
-
-/* ghost */
-
-button.ghost {
-  background: transparent;
-  padding: 0 0.5rem;
-  color: var(--leu-color-black-60);
-  font-family: var(--leu-font-regular);
-}
-
-button.ghost:hover {
-  color: var(--leu-color-black-100);
-}
-
-button.ghost.active {
-  color: var(--leu-color-black-100);
-}
-
-button.ghost:disabled {
-  color: var(--leu-color-black-20);
-}
-
-/* primary + inverted */
-
-button.primary.inverted {
-  color: var(--leu-color-black-100);
-  background: var(--leu-color-black-0);
-}
-
-button.primary.inverted:hover {
-  color: var(--leu-color-black-100);
-  background: var(--leu-color-white-transp-70);
-}
-
-button.primary.inverted.active {
-  color: var(--leu-color-black-0);
-  background: var(--leu-color-black-100);
-}
-
-button.primary.inverted:disabled {
-  color: var(--leu-color-black-40);
-  background: var(--leu-color-white-transp-70);
-}
-
-/* secondary + inverted */
-
-button.secondary.inverted {
-  color: var(--leu-color-black-0);
-  background: var(--leu-color-black-transp-20);
-}
-
-button.secondary.inverted:hover {
-  color: var(--leu-color-black-0);
-  background: var(--leu-color-black-transp-40);
-}
-
-button.secondary.inverted.active {
-  color: var(--leu-color-black-100);
-  background: var(--leu-color-black-0);
-}
-
-button.secondary.inverted:disabled {
-  color: var(--leu-color-white-transp-70);
-  background: var(--leu-color-black-transp-10);
-}
-
-/* ghost + inverted */
-
-button.ghost.inverted {
-  color: var(--leu-color-black-0);
-}
-
-button.ghost.inverted:hover {
-  color: var(--leu-color-white-transp-70);
-}
-
-button.ghost.inverted.active {
-  color: var(--leu-color-black-0);
-}
-
-button.ghost.inverted:disabled {
-  color: var(--leu-color-black-20);
-}
-
-/* icon-wrapper */
-
-.icon-wrapper svg {
-  display: block;
-}
-
-.ghost .icon-wrapper--before, .ghost .icon-wrapper--after {
-  padding: 0.5rem;
-  border-radius: 50%;
-  background: var(--leu-color-black-transp-10);
-}
-
-.ghost.active .icon-wrapper--before, .ghost.active .icon-wrapper--after {
-  background: var(--leu-color-black-100);
-  color: var(--leu-color-black-0);
-}
-
-.ghost:disabled .icon-wrapper--before {
-  background: var(--leu-color-black-transp-5);
-}
-
-.ghost:disabled .icon-wrapper--after {
-  background: var(--leu-color-black-transp-5);
-}
-
-/* inverted */
-
-.ghost.inverted .icon-wrapper--before, .ghost.inverted .icon-wrapper--after {
-  background: var(--leu-color-black-transp-20);
-}
-
-.ghost.inverted:hover .icon-wrapper--before, .ghost.inverted:hover .icon-wrapper--after {
-  background: var(--leu-color-black-transp-40);
-  color: var(--leu-color-black-0);
-}
-
-.ghost.inverted:disabled .icon-wrapper--before {
-  background: var(--leu-color-black-transp-20);
-  color: var(--leu-color-white-transp-70);
-}
-
-.ghost.inverted:disabled .icon-wrapper--after {
-  background: var(--leu-color-black-transp-20);
-  color: var(--leu-color-white-transp-70);
-}
-
-.ghost.active.inverted .icon-wrapper--before, .ghost.active.inverted .icon-wrapper--after {
-  background: var(--leu-color-black-0);
-  color: var(--leu-color-black-100);
-}
-
-/* Expanded icon */
-
-.icon-wrapper--expanded {
-  transition: transform 0.1s ease;
-}
-
-:host([expanded="open"]) .icon-wrapper--expanded {
-  transform: rotate(180deg);
-}
-`;
-
-/*
-Design: https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=4-1444&mode=design&t=xu5Vii8jXKKCKDez-0
-Live Demo: zh.ch
-*/
-
-const BUTTON_VARIANTS = ["primary", "secondary", "ghost"];
-Object.freeze(BUTTON_VARIANTS);
-const BUTTON_SIZES = ["regular", "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);
-
-/**
- * @tagname leu-button
- */
-class LeuButton extends LitElement {
-  constructor() {
-    super();
-    /** @type {string} */
-    this.label = null;
-    /** @type {string} */
-    this.icon = null;
-    /** @type {("before" | "after")} - Only taken into account if Label and no Icon is set */
-    this.iconPosition = "before";
-    /** @type {string} */
-    this.size = "regular";
-    /** @type {string} */
-    this.variant = "primary";
-    /** @type {string} */
-    this.type = "button";
-
-    /** @type {boolean} */
-    this.disabled = false;
-    /** @type {boolean} - Only taken into account if no Label and an Icon is set */
-    this.round = false;
-    /** @type {boolean} */
-    this.active = false;
-    /** @type {boolean} - will be used on dark Background */
-    this.inverted = false;
-
-    /** @type {boolean} - Alters the shape of the button to be full width of its parent container */
-    this.fluid = false;
-
-    /**
-     * Only taken into account if variant is "ghost"
-     * @type {("open" | "closed" | undefined)}
-     */
-    this.expanded = undefined;
-  }
-  getIconSize() {
-    return this.size === "small" || this.variant === "ghost" ? 16 : 24;
-  }
-  renderIconBefore() {
-    if (this.icon && this.iconPosition === "before") {
-      return html`<div class="icon-wrapper icon-wrapper--before">
-        ${Icon(this.icon, this.getIconSize())}
-      </div>`;
-    }
-    return nothing;
-  }
-  renderIconAfter() {
-    if (this.icon && this.label && this.iconPosition === "after") {
-      return html`<div class="icon-wrapper icon-wrapper--after">
-        ${Icon(this.icon, this.getIconSize())}
-      </div>`;
-    }
-    return nothing;
-  }
-  renderExpandingIcon() {
-    if (typeof this.expanded !== "undefined" && this.variant === "ghost") {
-      return html`<div class="icon-wrapper icon-wrapper--expanded">
-        ${Icon("angleDropDown", 24)}
-      </div>`;
-    }
-    return nothing;
-  }
-  render() {
-    const cssClasses = {
-      icon: !this.label && this.icon,
-      round: !this.label && this.icon && this.round,
-      active: this.active,
-      inverted: this.inverted,
-      [this.variant]: true,
-      [this.size]: true
-    };
-    return html`
-      <button
-        class=${classMap(cssClasses)}
-        ?disabled=${this.disabled}
-        type=${this.type}
-      >
-        ${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,
-    reflect: true
-  },
-  icon: {
-    type: String,
-    reflect: true
-  },
-  iconPosition: {
-    type: String,
-    reflect: true
-  },
-  size: {
-    type: String,
-    reflect: true
-  },
-  variant: {
-    type: String,
-    reflect: true
-  },
-  type: {
-    type: String,
-    reflect: true
-  },
-  disabled: {
-    type: Boolean,
-    reflect: true
-  },
-  round: {
-    type: Boolean,
-    reflect: true
-  },
-  active: {
-    type: Boolean,
-    reflect: true
-  },
-  inverted: {
-    type: Boolean,
-    reflect: true
-  },
-  expanded: {
-    type: String,
-    reflect: true
-  },
-  fluid: {
-    type: Boolean,
-    reflect: true
-  }
-});
-
-export { BUTTON_EXPANDED_OPTIONS, BUTTON_SIZES, BUTTON_TYPES, BUTTON_VARIANTS, LeuButton };
+import './_rollupPluginBabelHelpers-20f659f4.js';
+import 'lit';
+import 'lit/directives/class-map.js';
+import 'lit/directives/if-defined.js';
+import './icon-03e86700.js';
+export { c as BUTTON_EXPANDED_OPTIONS, a as BUTTON_SIZES, b as BUTTON_TYPES, B as BUTTON_VARIANTS, L as LeuButton } from './Button-da11d064.js';

package/dist/ButtonGroup.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @tagname leu-button-group
+ * @slot - Slot for the buttons
+ * @prop {string} value - The value of the currenty selected (active) button
+ * @fires input - When the value of the group changes by clicking a button
+ */
+export class LeuButtonGroup extends LitElement {
+    /**
+     * @param {import("../button/Button").LeuButton} button
+     * @returns {string}
+     */
+    static getButtonValue(button: any): string;
+    _items: any[];
+    set value(newValue: string);
+    get value(): string;
+    _handleSlotChange(): void;
+    /**
+     * @param {import("../button/Button").LeuButton} button
+     */
+    _handleButtonClick(button: any): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+import { LitElement } from 'lit';
+//# sourceMappingURL=ButtonGroup.d.ts.map

package/dist/ButtonGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["ButtonGroup.js"],"names":[],"mappings":"AAeA;;;;;GAKG;AACH;IAME;;;OAGG;IACH,oCAFa,MAAM,CAIlB;IATC,cAAgB;IAclB,4BAMC;IAVD,oBAGC;IAQD,0BA+BC;IAED;;OAEG;IACH,sCAWC;IACD,+CAMC;CACF;2BAnGqC,KAAK"}

package/dist/ButtonGroup.js

@@ -1,10 +1,5 @@
 import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
 import { css, LitElement, html } from 'lit';
-import './leu-button.js';
-import './defineElement-47d4f665.js';
-import './Button.js';
-import 'lit/directives/class-map.js';
-import './icon-03e86700.js';
 
 var css_248z = css`:host,
 :host * {
@@ -20,54 +15,90 @@ var css_248z = css`:host,
 
 /**
  * @tagname leu-button-group
+ * @slot - Slot for the buttons
+ * @prop {string} value - The value of the currenty selected (active) button
+ * @fires input - When the value of the group changes by clicking a button
  */
 class LeuButtonGroup extends LitElement {
   constructor() {
     super();
-    /** @type {Array} */
-    this.items = [];
-    /** @type {string} */
-    this.value = null;
+    this._items = [];
   }
-  _setValue(newValue) {
-    this.value = newValue;
-    this.dispatchEvent(new CustomEvent("input", {
-      bubbles: true,
-      composed: true,
-      detail: {
-        value: newValue
+
+  /**
+   * @param {import("../button/Button").LeuButton} button
+   * @returns {string}
+   */
+  static getButtonValue(button) {
+    return button.getAttribute("value") ?? button.innerText.trim();
+  }
+  get value() {
+    const activeButton = this._items.find(item => item.active);
+    return activeButton ? LeuButtonGroup.getButtonValue(activeButton) : null;
+  }
+  set value(newValue) {
+    this._items.forEach(item => {
+      /* eslint-disable no-param-reassign */
+      item.active = LeuButtonGroup.getButtonValue(item) === newValue;
+      /* eslint-enable no-param-reassign */
+    });
+  }
+  _handleSlotChange() {
+    /**
+     * Remove all event listeners that were added before.
+     * Just because a slotchange event was fired, it doesn't mean that all of the
+     * children of the slot have changed.
+     */
+    this._items.forEach(item => {
+      item.removeEventListener("click", this._handleButtonClick);
+    });
+    const slot = this.shadowRoot.querySelector("slot");
+    this._items = slot.assignedElements({
+      flatten: true
+    });
+    let foundActiveButtonBefore = false;
+    this._items.forEach(item => {
+      /* eslint-disable no-param-reassign */
+      item.addEventListener("click", () => this._handleButtonClick(item));
+      item.componentRole = "menuitemradio";
+
+      /**
+       * In case there are multiple active buttons
+       * only the first one will be kept active.
+       */
+      if (item.active && foundActiveButtonBefore) {
+        item.active = false;
+      } else if (item.active) {
+        foundActiveButtonBefore = true;
       }
-    }));
+
+      /* eslint-enable no-param-reassign */
+    });
+  }
+
+  /**
+   * @param {import("../button/Button").LeuButton} button
+   */
+  _handleButtonClick(button) {
+    if (!button.active) {
+      this.value = LeuButtonGroup.getButtonValue(button);
+      this.dispatchEvent(new CustomEvent("input", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          value: LeuButtonGroup.getButtonValue(button)
+        }
+      }));
+    }
   }
   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>
-            `)}
+        <slot @slotchange=${this._handleSlotChange}></slot>
       </div>
     `;
   }
 }
 _defineProperty(LeuButtonGroup, "styles", css_248z);
-_defineProperty(LeuButtonGroup, "properties", {
-  items: {
-    type: Array,
-    reflect: true
-  },
-  value: {
-    type: String,
-    reflect: true
-  }
-});
 
 export { LeuButtonGroup };

package/dist/Checkbox.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @tagname leu-checkbox
+ */
+export class LeuCheckbox extends LitElement {
+    checked: boolean;
+    disabled: boolean;
+    checkIcon: import("lit-html").TemplateResult<1>;
+    handleChange(event: any): void;
+    handleInput(event: any): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+import { LitElement } from 'lit';
+//# sourceMappingURL=Checkbox.d.ts.map

package/dist/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["Checkbox.js"],"names":[],"mappings":"AAiGA;;GAEG;AACH;IAGI,iBAAoB;IACpB,kBAAqB;IACrB,gDAA8B;IAEhC,+BAIC;IACD,8BAEC;IACD,+CAgBC;CACF;2BAnIqC,KAAK"}

package/dist/Checkbox.js

@@ -12,7 +12,7 @@ var css_248z = css`:host {
 
   --checkbox-tick-color: var(--leu-color-black-0);
 
-  --checkbox-font-regular: var(--leu-font-regular);
+  --checkbox-font-regular: var(--leu-font-family-regular);
 
   position: relative;
 
@@ -20,7 +20,7 @@ var css_248z = css`:host {
   align-items: flex-start;
   gap: 0.5rem;
 
-  font-family: var(--leu-font-regular);
+  font-family: var(--leu-font-family-regular);
 
   font-family: var(--checkbox-font-regular);
 }

package/dist/CheckboxGroup.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @tagname leu-checkbox-group
+ */
+export class LeuCheckboxGroup extends LitElement {
+    orientation: string;
+    items: any[];
+    get value(): any[];
+    handleSlotChange(): void;
+    handleItems(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+import { LitElement } from 'lit';
+//# sourceMappingURL=CheckboxGroup.d.ts.map

package/dist/CheckboxGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["CheckboxGroup.js"],"names":[],"mappings":"AAqCA;;GAEG;AACH;IAGI,oBAA+B;IAC/B,aAAe;IAEjB,mBAEC;IACD,yBAEC;IACD,oBAEC;IACD,+CAWC;CACF;2BAlEqC,KAAK"}

package/dist/CheckboxGroup.js

@@ -3,10 +3,10 @@ import { css, LitElement, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 
 var css_248z = css`:host {
-  --group-font-regular: var(--leu-font-regular);
-  --group-font-black: var(--leu-font-black);
+  --group-font-regular: var(--leu-font-family-regular);
+  --group-font-black: var(--leu-font-family-black);
 
-  font-family: var(--leu-font-regular);
+  font-family: var(--leu-font-family-regular);
 
   font-family: var(--group-font-regular);
 }

package/dist/Chip.d.ts

@@ -0,0 +1,5 @@
+export class LeuChipBase extends LitElement {
+    inverted: boolean;
+}
+import { LitElement } from 'lit';
+//# sourceMappingURL=Chip.d.ts.map

package/dist/Chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["Chip.js"],"names":[],"mappings":"AAyJA;IAGI,kBAAqB;CAExB;2BA7J+B,KAAK"}