@statistikzh/leu 0.9.0 → 0.10.0

package/dist/Button-5a8009c5.js

@@ -1,544 +0,0 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-7ab5ef5e.js';
-import { css, html, nothing } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { LeuIcon } from './Icon.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);
-  }
-}
-
-/**
- * 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_CHECKED_ROLES = ["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_SELECTED_ROLES = ["gridcell", "option", "row", "tab", "columnheader", "rowheader", "treeitem"];
-
-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: none;
-  border-radius: 2px;
-
-  max-width: 100%;
-  display: flex;
-  align-items: center;
-  -moz-column-gap: 8px;
-       column-gap: 8px;
-}
-
-.content {
-  flex: 1 1 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-button.round {
-  border-radius: 50%;
-}
-
-button:disabled {
-  cursor: not-allowed;
-}
-
-button:focus-visible {
-  outline: 2px solid var(--leu-color-func-cyan);
-  outline-offset: 2px;
-}
-
-button.inverted:focus-visible {
-  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-only {
-  padding: 12px;
-}
-
-/* size - small */
-
-button.small {
-  padding: 6px 24px;
-  font-size: 14px;
-  line-height: 20px;
-
-  --leu-icon-size: 1rem;
-}
-
-button.small.icon-only {
-  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 {
-  --leu-icon-size: 1rem;
-
-  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 leu-icon {
-  display: block;
-}
-
-.ghost.icon-before .icon-wrapper--before,
-.ghost.icon-after .icon-wrapper--after {
-  display: block;
-  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);
-
-/**
- * @tagname leu-button
- * @slot before - The icon to display before the label
- * @slot after - The icon to display after the label
- * @slot - The label of the button or the icon if no label is set
- */
-class LeuButton extends LeuElement {
-  constructor() {
-    super();
-    /** @type {string} */
-    /**
-     * @internal
-     */
-    _defineProperty(this, "hasSlotController", new HasSlotController(this, ["before", "after", "[default]"]));
-    this.label = null;
-    /** @type {string} */
-    this.size = "regular";
-    /** @type {string} */
-    this.variant = "primary";
-    /** @type {"button" | "submit" | "reset"} */
-    this.type = "button";
-
-    /** @type {string} */
-    this.componentRole = undefined;
-
-    /** @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;
-  }
-  renderExpandingIcon() {
-    if (typeof this.expanded !== "undefined" && this.variant === "ghost") {
-      return html`<div class="icon-wrapper icon-wrapper--expanded">
-        <leu-icon name="angleDropDown" size="24"></leu-icon>
-      </div>`;
-    }
-    return nothing;
-  }
-  getAriaAttributes() {
-    const attributes = {
-      role: this.componentRole,
-      label: this.label
-    };
-    if (this.componentRole) {
-      if (ARIA_CHECKED_ROLES.includes(this.componentRole)) {
-        attributes.checked = this.active ? "true" : "false";
-      } else if (ARIA_SELECTED_ROLES.includes(this.componentRole)) {
-        attributes.selected = this.active ? "true" : "false";
-      }
-    }
-    return attributes;
-  }
-  hasTextContent() {
-    return Array.from(this.childNodes).some(node => node.nodeType === node.TEXT_NODE && node.textContent.trim() !== "");
-  }
-  render() {
-    const hasTextContent = this.hasTextContent();
-    const hasIconDefault = Boolean(this.querySelector("leu-icon"));
-    const hasIconBefore = this.hasSlotController.test("before");
-    const hasIconAfter = this.hasSlotController.test("after");
-    const aria = this.getAriaAttributes();
-    const cssClasses = {
-      "icon-only": hasIconDefault && !hasTextContent,
-      "icon-before": hasIconBefore,
-      "icon-after": hasIconAfter,
-      round: 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)}
-        aria-expanded=${ifDefined(this.expanded)}
-        role=${ifDefined(aria.role)}
-        class=${classMap(cssClasses)}
-        ?disabled=${this.disabled}
-        type=${this.type}
-      >
-        <slot name="before" class="icon-wrapper icon-wrapper--before"></slot>
-        <span class="content"><slot></slot></span>
-        <slot name="after" class="icon-wrapper icon-wrapper--after"></slot>
-        ${this.renderExpandingIcon()}
-      </button>
-    `;
-  }
-}
-_defineProperty(LeuButton, "dependencies", {
-  "leu-icon": LeuIcon
-});
-_defineProperty(LeuButton, "styles", css_248z);
-/**
- * @internal
- */
-_defineProperty(LeuButton, "shadowRootOptions", {
-  ...LeuElement.shadowRootOptions,
-  delegatesFocus: true
-});
-_defineProperty(LeuButton, "properties", {
-  label: {
-    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/LeuElement-7ab5ef5e.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LeuElement-7ab5ef5e.d.ts","sourceRoot":"","sources":["LeuElement-7ab5ef5e.js"],"names":[],"mappings":"AA+BA;IACE,8EAcC;CACF;AA7CD,sEAaC;2BAf0B,KAAK"}