@statistikzh/leu 0.4.0 → 0.5.1

package/dist/Button-5326c982.js

@@ -0,0 +1,555 @@
+import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
+import { css, LitElement, html, nothing } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { I as Icon } from './icon-03e86700.js';
+
+/**
+ * Thanks Shoelace!
+ * Source: https://github.com/shoelace-style/shoelace/blob/next/src/internal/slot.ts
+ */
+
+/**
+ * A reactive controller that determines when slots exist.
+ * @typedef {import("lit").ReactiveController} ReactiveController
+ * @implements {ReactiveController}
+ */
+class HasSlotController {
+  constructor(host, slotNames) {
+    /**
+     * @private
+     * @param {Event} event
+     */
+    _defineProperty(this, "handleSlotChange", event => {
+      const slot = event.target;
+      if (slot instanceof HTMLSlotElement && (this.slotNames.includes("[default]") && !slot.name || slot.name && this.slotNames.includes(slot.name))) {
+        this.host.requestUpdate();
+      }
+    });
+    this.host = host;
+    host.addController(this);
+    this.slotNames = slotNames;
+  }
+
+  /**
+   * @private
+   * @returns {Boolean}
+   */
+  hasDefaultSlot() {
+    return [...this.host.childNodes].some(node => {
+      if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== "") {
+        return true;
+      }
+      if (node.nodeType === node.ELEMENT_NODE) {
+        const el = node;
+
+        // If it doesn't have a slot attribute, it's part of the default slot
+        if (!el.hasAttribute("slot")) {
+          return true;
+        }
+      }
+      return false;
+    });
+  }
+
+  /**
+   * @private
+   * @param {String} name
+   * @returns {Boolean}
+   */
+  hasNamedSlot(name) {
+    return this.host.querySelector(`:scope > [slot="${name}"]`) !== null;
+  }
+
+  /**
+   * @param {String} slotName
+   * @returns {Boolean}
+   */
+  test(slotName) {
+    return slotName === "[default]" ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);
+  }
+  hostConnected() {
+    this.host.shadowRoot.addEventListener("slotchange", this.handleSlotChange);
+  }
+  hostDisconnected() {
+    this.host.shadowRoot.removeEventListener("slotchange", this.handleSlotChange);
+  }
+}
+
+var css_248z = css`:host {
+  display: inline-block;
+}
+
+button {
+  font-family: var(--leu-font-family-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;
+
+  max-width: 100%;
+  display: flex;
+  align-items: center;
+  -moz-column-gap: 8px;
+       column-gap: 8px;
+}
+
+.label {
+  flex: 1 1 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.icon .label {
+  display: none;
+}
+
+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.active:hover {
+  background: var(--leu-color-black-transp-80);
+}
+
+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.active:hover {
+  background: var(--leu-color-black-transp-80);
+}
+
+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-family-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 = ["true", "false"];
+Object.freeze(BUTTON_EXPANDED_OPTIONS);
+
+/**
+ * All roles that are associated with a aria-checked attribute
+ * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked
+ */
+const ARIA_ROLES_CHECKED = ["checkbox", "menuitemcheckbox", "menuitemradio", "option", "radio", "switch"];
+
+/**
+ * All roles that are associated with a aria-selected attribute
+ * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected
+ */
+const ARIA_ROLES_SELECTED = ["gridcell", "option", "row", "tab", "columnheader", "rowheader", "treeitem"];
+
+/**
+ * @tagname leu-button
+ */
+class LeuButton extends LitElement {
+  constructor() {
+    super();
+    /** @type {string} */
+    /**
+     * @internal
+     */
+    _defineProperty(this, "hasSlotController", new HasSlotController(this, ["[default]"]));
+    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 {"button" | "submit" | "reset"} */
+    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 {("true" | "false" | 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.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;
+  }
+  getAriaAttributes() {
+    const attributes = {
+      role: this.componentRole,
+      label: this.label
+    };
+    if (this.componentRole) {
+      if (ARIA_ROLES_CHECKED.includes(this.componentRole)) {
+        attributes.checked = this.active ? "true" : "false";
+      } else if (ARIA_ROLES_SELECTED.includes(this.componentRole)) {
+        attributes.selected = this.active ? "true" : "false";
+      }
+    }
+    return attributes;
+  }
+  render() {
+    const hasContent = this.hasSlotController.test("[default]");
+    const aria = this.getAriaAttributes();
+    const cssClasses = {
+      icon: !hasContent && this.icon,
+      round: !hasContent && this.icon && this.round,
+      active: this.active,
+      inverted: this.inverted,
+      [this.variant]: true,
+      [this.size]: true
+    };
+    return html`
+      <button
+        aria-label=${ifDefined(aria.label)}
+        aria-selected=${ifDefined(aria.selected)}
+        aria-checked=${ifDefined(aria.checked)}
+        role=${ifDefined(aria.role)}
+        class=${classMap(cssClasses)}
+        ?disabled=${this.disabled}
+        type=${this.type}
+      >
+        ${this.renderIconBefore()}
+        <span class="label"><slot></slot></span>
+        ${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
+  },
+  componentRole: {
+    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_VARIANTS as B, HasSlotController as H, LeuButton as L, BUTTON_SIZES as a, BUTTON_TYPES as b, BUTTON_EXPANDED_OPTIONS as c };

package/dist/Button.d.ts

@@ -0,0 +1,2 @@
+export { c as BUTTON_EXPANDED_OPTIONS, a as BUTTON_SIZES, b as BUTTON_TYPES, B as BUTTON_VARIANTS, L as LeuButton } from "./Button-5326c982.js";
+//# sourceMappingURL=Button.d.ts.map

package/dist/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["Button.js"],"names":[],"mappings":""}