@everymatrix/general-input 1.43.4 → 1.45.0

package/dist/components/vaadin-button.js

@@ -1,490 +0,0 @@
-import { i, r as registerStyles, Q as TabindexMixin, l as FocusMixin, E as ElementMixin, g as ThemableMixin, H as ControllerMixin, P as PolymerElement, T as TooltipController, f as defineCustomElement, h as html } from './field-mixin.js';
-import { A as ActiveMixin } from './active-mixin.js';
-
-const button = i`
-  :host {
-    /* Sizing */
-    --lumo-button-size: var(--lumo-size-m);
-    min-width: calc(var(--lumo-button-size) * 2);
-    height: var(--lumo-button-size);
-    padding: 0 calc(var(--lumo-button-size) / 3 + var(--lumo-border-radius-m) / 2);
-    margin: var(--lumo-space-xs) 0;
-    box-sizing: border-box;
-    /* Style */
-    font-family: var(--lumo-font-family);
-    font-size: var(--lumo-font-size-m);
-    font-weight: 500;
-    color: var(--_lumo-button-color, var(--lumo-primary-text-color));
-    background-color: var(--_lumo-button-background-color, var(--lumo-contrast-5pct));
-    border-radius: var(--lumo-border-radius-m);
-    cursor: var(--lumo-clickable-cursor);
-    -webkit-tap-highlight-color: transparent;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    flex-shrink: 0;
-  }
-
-  /* Set only for the internal parts so we don't affect the host vertical alignment */
-  [part='label'],
-  [part='prefix'],
-  [part='suffix'] {
-    line-height: var(--lumo-line-height-xs);
-  }
-
-  [part='label'] {
-    padding: calc(var(--lumo-button-size) / 6) 0;
-  }
-
-  :host([theme~='small']) {
-    font-size: var(--lumo-font-size-s);
-    --lumo-button-size: var(--lumo-size-s);
-  }
-
-  :host([theme~='large']) {
-    font-size: var(--lumo-font-size-l);
-    --lumo-button-size: var(--lumo-size-l);
-  }
-
-  /* For interaction states */
-  :host::before,
-  :host::after {
-    content: '';
-    /* We rely on the host always being relative */
-    position: absolute;
-    z-index: 1;
-    inset: 0;
-    background-color: currentColor;
-    border-radius: inherit;
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  /* Hover */
-
-  @media (any-hover: hover) {
-    :host(:hover)::before {
-      opacity: 0.02;
-    }
-  }
-
-  /* Active */
-
-  :host::after {
-    transition: opacity 1.4s, transform 0.1s;
-    filter: blur(8px);
-  }
-
-  :host([active])::before {
-    opacity: 0.05;
-    transition-duration: 0s;
-  }
-
-  :host([active])::after {
-    opacity: 0.1;
-    transition-duration: 0s, 0s;
-    transform: scale(0);
-  }
-
-  /* Keyboard focus */
-
-  :host([focus-ring]) {
-    box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
-  }
-
-  :host([theme~='primary'][focus-ring]) {
-    box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 3px var(--lumo-primary-color-50pct);
-  }
-
-  /* Types (primary, tertiary, tertiary-inline */
-
-  :host([theme~='tertiary']),
-  :host([theme~='tertiary-inline']) {
-    background-color: transparent !important;
-    min-width: 0;
-  }
-
-  :host([theme~='tertiary']) {
-    padding: 0 calc(var(--lumo-button-size) / 6);
-  }
-
-  :host([theme~='tertiary-inline'])::before {
-    display: none;
-  }
-
-  :host([theme~='tertiary-inline']) {
-    margin: 0;
-    height: auto;
-    padding: 0;
-    line-height: inherit;
-    font-size: inherit;
-  }
-
-  :host([theme~='tertiary-inline']) [part='label'] {
-    padding: 0;
-    overflow: visible;
-    line-height: inherit;
-  }
-
-  :host([theme~='primary']) {
-    background-color: var(--_lumo-button-primary-background-color, var(--lumo-primary-color));
-    color: var(--_lumo-button-primary-color, var(--lumo-primary-contrast-color));
-    font-weight: 600;
-    min-width: calc(var(--lumo-button-size) * 2.5);
-  }
-
-  :host([theme~='primary'])::before {
-    background-color: black;
-  }
-
-  @media (any-hover: hover) {
-    :host([theme~='primary']:hover)::before {
-      opacity: 0.05;
-    }
-  }
-
-  :host([theme~='primary'][active])::before {
-    opacity: 0.1;
-  }
-
-  :host([theme~='primary'][active])::after {
-    opacity: 0.2;
-  }
-
-  /* Colors (success, error, contrast) */
-
-  :host([theme~='success']) {
-    color: var(--lumo-success-text-color);
-  }
-
-  :host([theme~='success'][theme~='primary']) {
-    background-color: var(--lumo-success-color);
-    color: var(--lumo-success-contrast-color);
-  }
-
-  :host([theme~='error']) {
-    color: var(--lumo-error-text-color);
-  }
-
-  :host([theme~='error'][theme~='primary']) {
-    background-color: var(--lumo-error-color);
-    color: var(--lumo-error-contrast-color);
-  }
-
-  :host([theme~='contrast']) {
-    color: var(--lumo-contrast);
-  }
-
-  :host([theme~='contrast'][theme~='primary']) {
-    background-color: var(--lumo-contrast);
-    color: var(--lumo-base-color);
-  }
-
-  /* Disabled state. Keep selectors after other color variants. */
-
-  :host([disabled]) {
-    pointer-events: none;
-    color: var(--lumo-disabled-text-color);
-  }
-
-  :host([theme~='primary'][disabled]) {
-    background-color: var(--lumo-contrast-30pct);
-    color: var(--lumo-base-color);
-  }
-
-  :host([theme~='primary'][disabled]) [part] {
-    opacity: 0.7;
-  }
-
-  /* Icons */
-
-  [part] ::slotted(vaadin-icon) {
-    display: inline-block;
-    width: var(--lumo-icon-size-m);
-    height: var(--lumo-icon-size-m);
-  }
-
-  /* Vaadin icons are based on a 16x16 grid (unlike Lumo and Material icons with 24x24), so they look too big by default */
-  [part] ::slotted(vaadin-icon[icon^='vaadin:']) {
-    padding: 0.25em;
-    box-sizing: border-box !important;
-  }
-
-  [part='prefix'] {
-    margin-left: -0.25em;
-    margin-right: 0.25em;
-  }
-
-  [part='suffix'] {
-    margin-left: 0.25em;
-    margin-right: -0.25em;
-  }
-
-  /* Icon-only */
-
-  :host([theme~='icon']:not([theme~='tertiary-inline'])) {
-    min-width: var(--lumo-button-size);
-    padding-left: calc(var(--lumo-button-size) / 4);
-    padding-right: calc(var(--lumo-button-size) / 4);
-  }
-
-  :host([theme~='icon']) [part='prefix'],
-  :host([theme~='icon']) [part='suffix'] {
-    margin-left: 0;
-    margin-right: 0;
-  }
-
-  /* RTL specific styles */
-
-  :host([dir='rtl']) [part='prefix'] {
-    margin-left: 0.25em;
-    margin-right: -0.25em;
-  }
-
-  :host([dir='rtl']) [part='suffix'] {
-    margin-left: -0.25em;
-    margin-right: 0.25em;
-  }
-
-  :host([dir='rtl'][theme~='icon']) [part='prefix'],
-  :host([dir='rtl'][theme~='icon']) [part='suffix'] {
-    margin-left: 0;
-    margin-right: 0;
-  }
-`;
-
-registerStyles('vaadin-button', button, { moduleId: 'lumo-button' });
-
-/**
- * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-const buttonStyles = i`
-  :host {
-    display: inline-block;
-    position: relative;
-    outline: none;
-    white-space: nowrap;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-  }
-
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  /* Aligns the button with form fields when placed on the same line.
-  Note, to make it work, the form fields should have the same "::before" pseudo-element. */
-  .vaadin-button-container::before {
-    content: '\\2003';
-    display: inline-block;
-    width: 0;
-    max-height: 100%;
-  }
-
-  .vaadin-button-container {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    width: 100%;
-    height: 100%;
-    min-height: inherit;
-    text-shadow: inherit;
-  }
-
-  [part='prefix'],
-  [part='suffix'] {
-    flex: none;
-  }
-
-  [part='label'] {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  @media (forced-colors: active) {
-    :host {
-      outline: 1px solid;
-      outline-offset: -1px;
-    }
-
-    :host([focused]) {
-      outline-width: 2px;
-    }
-
-    :host([disabled]) {
-      outline-color: GrayText;
-    }
-  }
-`;
-
-const buttonTemplate = (html) => html`
-  <div class="vaadin-button-container">
-    <span part="prefix" aria-hidden="true">
-      <slot name="prefix"></slot>
-    </span>
-    <span part="label">
-      <slot></slot>
-    </span>
-    <span part="suffix" aria-hidden="true">
-      <slot name="suffix"></slot>
-    </span>
-  </div>
-  <slot name="tooltip"></slot>
-`;
-
-/**
- * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * A mixin providing common button functionality.
- *
- * @polymerMixin
- * @mixes ActiveMixin
- * @mixes FocusMixin
- * @mixes TabindexMixin
- */
-const ButtonMixin = (superClass) =>
-  class ButtonMixinClass extends ActiveMixin(TabindexMixin(FocusMixin(superClass))) {
-    static get properties() {
-      return {
-        /**
-         * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
-         *
-         * @override
-         * @protected
-         */
-        tabindex: {
-          type: Number,
-          value: 0,
-          reflectToAttribute: true,
-        },
-      };
-    }
-
-    /**
-     * By default, `Space` is the only possible activation key for a focusable HTML element.
-     * Nonetheless, the button is an exception as it can be also activated by pressing `Enter`.
-     * See the "Keyboard Support" section in https://www.w3.org/TR/wai-aria-practices/examples/button/button.html.
-     *
-     * @protected
-     * @override
-     */
-    get _activeKeys() {
-      return ['Enter', ' '];
-    }
-
-    /** @protected */
-    ready() {
-      super.ready();
-
-      // By default, if the user hasn't provided a custom role,
-      // the role attribute is set to "button".
-      if (!this.hasAttribute('role')) {
-        this.setAttribute('role', 'button');
-      }
-    }
-
-    /**
-     * Since the button component is designed on the base of the `[role=button]` attribute,
-     * and doesn't have a native <button> inside, in order to be fully accessible from the keyboard,
-     * it should manually fire the `click` event once an activation key is pressed,
-     * as it follows from the WAI-ARIA specifications:
-     * https://www.w3.org/TR/wai-aria-practices-1.1/#button
-     *
-     * According to the UI Events specifications,
-     * the `click` event should be fired exactly on `keydown`:
-     * https://www.w3.org/TR/uievents/#event-type-keydown
-     *
-     * @param {KeyboardEvent} event
-     * @protected
-     * @override
-     */
-    _onKeyDown(event) {
-      super._onKeyDown(event);
-
-      if (event.altKey || event.shiftKey || event.ctrlKey || event.metaKey) {
-        return;
-      }
-
-      if (this._activeKeys.includes(event.key)) {
-        event.preventDefault();
-
-        // `DisabledMixin` overrides the standard `click()` method
-        // so that it doesn't fire the `click` event when the element is disabled.
-        this.click();
-      }
-    }
-  };
-
-/**
- * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-registerStyles('vaadin-button', buttonStyles, { moduleId: 'vaadin-button-styles' });
-
-/**
- * `<vaadin-button>` is an accessible and customizable button that allows users to perform actions.
- *
- * ```html
- * <vaadin-button>Press me</vaadin-button>
- * ```
- *
- * ### Styling
- *
- * The following shadow DOM parts are available for styling:
- *
- * Part name | Description
- * ----------|-------------
- * `label`   | The label (text) inside the button.
- * `prefix`  | A slot for content before the label (e.g. an icon).
- * `suffix`  | A slot for content after the label (e.g. an icon).
- *
- * The following attributes are available for styling:
- *
- * Attribute    | Description
- * -------------|-------------
- * `active`     | Set when the button is pressed down, either with mouse, touch or the keyboard.
- * `disabled`   | Set when the button is disabled.
- * `focus-ring` | Set when the button is focused using the keyboard.
- * `focused`    | Set when the button is focused.
- *
- * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
- *
- * @customElement
- * @extends HTMLElement
- * @mixes ButtonMixin
- * @mixes ControllerMixin
- * @mixes ElementMixin
- * @mixes ThemableMixin
- */
-class Button extends ButtonMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement)))) {
-  static get is() {
-    return 'vaadin-button';
-  }
-
-  static get template() {
-    return buttonTemplate(html);
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this._tooltipController = new TooltipController(this);
-    this.addController(this._tooltipController);
-  }
-}
-
-defineCustomElement(Button);
-
-export { Button as B, button as b };