@everymatrix/general-input 1.27.6 → 1.27.8

package/dist/components/password-input2.js

@@ -1,13 +1,12 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { t as translate, a as tooltipIconSvg } from './tooltipIcon.js';
 import { i as inputFieldShared, c as InputControlMixin, d as inputFieldShared$1 } from './input-field-shared-styles.js';
-import { r as registerStyles, h as html, e as InputController, f as LabelledInputController, g as TooltipController, T as ThemableMixin, E as ElementMixin, P as PolymerElement, i, S as SlotController } from './field-mixin.js';
-import { P as PatternMixin } from './pattern-mixin.js';
+import { r as registerStyles, c as InputController, e as LabelledInputController, h as html, T as TooltipController, f as defineCustomElement$1, g as ThemableMixin, E as ElementMixin, P as PolymerElement, i, G as SlotController } from './field-mixin.js';
 import { b as button, B as Button } from './vaadin-button.js';
 
 /**
  * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -17,7 +16,7 @@ registerStyles('vaadin-text-field', inputFieldShared, {
 
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -71,6 +70,15 @@ const InputFieldMixin = (superclass) =>
       return [...super.delegateAttrs, 'autocapitalize', 'autocomplete', 'autocorrect'];
     }
 
+    // Workaround for https://github.com/Polymer/polymer/issues/5259
+    get __data() {
+      return this.__dataValue || {};
+    }
+
+    set __data(value) {
+      this.__dataValue = value;
+    }
+
     /**
      * @param {HTMLElement} input
      * @protected
@@ -92,15 +100,6 @@ const InputFieldMixin = (superclass) =>
       }
     }
 
-    // Workaround for https://github.com/Polymer/polymer/issues/5259
-    get __data() {
-      return this.__dataValue || {};
-    }
-
-    set __data(value) {
-      this.__dataValue = value;
-    }
-
     /**
      * Override an event listener from `FocusMixin`.
      * @param {boolean} focused
@@ -110,7 +109,9 @@ const InputFieldMixin = (superclass) =>
     _setFocused(focused) {
       super._setFocused(focused);
 
-      if (!focused) {
+      // Do not validate when focusout is caused by document
+      // losing focus, which happens on browser tab switch.
+      if (!focused && document.hasFocus()) {
         this.validate();
       }
     }
@@ -154,7 +155,81 @@ const InputFieldMixin = (superclass) =>
 
 /**
  * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A mixin providing common text field functionality.
+ *
+ * @polymerMixin
+ * @mixes InputFieldMixin
+ */
+const TextFieldMixin = (superClass) =>
+  class TextFieldMixinClass extends InputFieldMixin(superClass) {
+    static get properties() {
+      return {
+        /**
+         * Maximum number of characters (in Unicode code points) that the user can enter.
+         */
+        maxlength: {
+          type: Number,
+        },
+
+        /**
+         * Minimum number of characters (in Unicode code points) that the user can enter.
+         */
+        minlength: {
+          type: Number,
+        },
+
+        /**
+         * A regular expression that the value is checked against.
+         * The pattern must match the entire value, not just some subset.
+         */
+        pattern: {
+          type: String,
+        },
+      };
+    }
+
+    static get delegateAttrs() {
+      return [...super.delegateAttrs, 'maxlength', 'minlength', 'pattern'];
+    }
+
+    static get constraints() {
+      return [...super.constraints, 'maxlength', 'minlength', 'pattern'];
+    }
+
+    constructor() {
+      super();
+      this._setType('text');
+    }
+
+    /** @protected */
+    get clearElement() {
+      return this.$.clearButton;
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      this.addController(
+        new InputController(this, (input) => {
+          this._setInputElement(input);
+          this._setFocusElement(input);
+          this.stateTarget = input;
+          this.ariaTarget = input;
+        }),
+      );
+      this.addController(new LabelledInputController(this.inputElement, this._labelController));
+    }
+  };
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -215,7 +290,7 @@ registerStyles('vaadin-text-field', inputFieldShared$1, { moduleId: 'vaadin-text
  * `focus-ring`        | Set when the element is keyboard focused | :host
  * `readonly`          | Set to a readonly text field | :host
  *
- * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {Event} input - Fired when the value is changed by the user: on every typing keystroke, and the value is cleared using the clear button.
  * @fires {Event} change - Fired when the user commits a value change.
@@ -223,13 +298,13 @@ registerStyles('vaadin-text-field', inputFieldShared$1, { moduleId: 'vaadin-text
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
+ * @customElement
  * @extends HTMLElement
  * @mixes ElementMixin
  * @mixes ThemableMixin
- * @mixes PatternMixin
- * @mixes InputFieldMixin
+ * @mixes TextFieldMixin
  */
-class TextField extends PatternMixin(InputFieldMixin(ThemableMixin(ElementMixin(PolymerElement)))) {
+class TextField extends TextFieldMixin(ThemableMixin(ElementMixin(PolymerElement))) {
   static get is() {
     return 'vaadin-text-field';
   }
@@ -291,49 +366,22 @@ class TextField extends PatternMixin(InputFieldMixin(ThemableMixin(ElementMixin(
     };
   }
 
-  static get delegateAttrs() {
-    return [...super.delegateAttrs, 'maxlength', 'minlength'];
-  }
-
-  static get constraints() {
-    return [...super.constraints, 'maxlength', 'minlength'];
-  }
-
-  constructor() {
-    super();
-    this._setType('text');
-  }
-
-  /** @protected */
-  get clearElement() {
-    return this.$.clearButton;
-  }
-
   /** @protected */
   ready() {
     super.ready();
 
-    this.addController(
-      new InputController(this, (input) => {
-        this._setInputElement(input);
-        this._setFocusElement(input);
-        this.stateTarget = input;
-        this.ariaTarget = input;
-      }),
-    );
-    this.addController(new LabelledInputController(this.inputElement, this._labelController));
-
     this._tooltipController = new TooltipController(this);
     this._tooltipController.setPosition('top');
+    this._tooltipController.setAriaTarget(this.inputElement);
     this.addController(this._tooltipController);
   }
 }
 
-customElements.define(TextField.is, TextField);
+defineCustomElement$1(TextField);
 
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -358,7 +406,7 @@ registerStyles('vaadin-password-field-button', [button, passwordFieldButton], {
 
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -386,13 +434,14 @@ registerStyles('vaadin-password-field', [inputFieldShared, passwordField], { mod
 
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
 /**
  * An element used internally by `<vaadin-password-field>`. Not intended to be used separately.
  *
+ * @customElement
  * @extends Button
  * @private
  */
@@ -417,11 +466,11 @@ class PasswordFieldButton extends Button {
   }
 }
 
-customElements.define(PasswordFieldButton.is, PasswordFieldButton);
+defineCustomElement$1(PasswordFieldButton);
 
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -457,7 +506,7 @@ let memoizedTemplate;
  * -------------------|---------------------------------
  * `password-visible` | Set when the password is visible
  *
- * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {Event} input - Fired when the value is changed by the user: on every typing keystroke, and the value is cleared using the clear button.
  * @fires {Event} change - Fired when the user commits a value change.
@@ -465,6 +514,7 @@ let memoizedTemplate;
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
+ * @customElement
  * @extends TextField
  */
 class PasswordField extends TextField {
@@ -538,6 +588,14 @@ class PasswordField extends TextField {
     return ['__i18nChanged(i18n.*)'];
   }
 
+  constructor() {
+    super();
+    this._setType('password');
+    this.__boundRevealButtonClick = this._onRevealButtonClick.bind(this);
+    this.__boundRevealButtonMouseDown = this._onRevealButtonMouseDown.bind(this);
+    this.__lastChange = '';
+  }
+
   /** @protected */
   get slotStyles() {
     const tag = this.localName;
@@ -556,31 +614,20 @@ class PasswordField extends TextField {
     return this._revealButtonController && this._revealButtonController.node;
   }
 
-  constructor() {
-    super();
-    this._setType('password');
-    this.__boundRevealButtonClick = this._onRevealButtonClick.bind(this);
-    this.__boundRevealButtonMouseDown = this._onRevealButtonMouseDown.bind(this);
-    this.__lastChange = '';
-  }
-
   /** @protected */
   ready() {
     super.ready();
 
     this._revealPart = this.shadowRoot.querySelector('[part="reveal-button"]');
 
-    this._revealButtonController = new SlotController(
-      this,
-      'reveal',
-      () => document.createElement('vaadin-password-field-button'),
-      (host, btn) => {
-        btn.disabled = host.disabled;
+    this._revealButtonController = new SlotController(this, 'reveal', 'vaadin-password-field-button', {
+      initializer: (btn) => {
+        btn.disabled = this.disabled;
 
-        btn.addEventListener('click', host.__boundRevealButtonClick);
-        btn.addEventListener('mousedown', host.__boundRevealButtonMouseDown);
+        btn.addEventListener('click', this.__boundRevealButtonClick);
+        btn.addEventListener('mousedown', this.__boundRevealButtonMouseDown);
       },
-    );
+    });
     this.addController(this._revealButtonController);
 
     this.__updateAriaLabel(this.i18n);
@@ -737,7 +784,7 @@ class PasswordField extends TextField {
   }
 }
 
-customElements.define(PasswordField.is, PasswordField);
+defineCustomElement$1(PasswordField);
 
 const passwordInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.password{font-family:\"Roboto\";font-style:normal}.password__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px}.password__wrapper--autofilled{pointer-events:none}.password__wrapper--autofilled .password__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.password__wrapper--autofilled .password__input::part(input-field){color:var(--emfe-w-color-black, #000000)}.password__wrapper--flex{display:flex;gap:5px}.password__wrapper--relative{position:relative}.password__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.password__label--required::after{content:\"*\";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.password__input{width:inherit;border:none}.password__input[focused]::part(input-field){border-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.password__input[invalid]::part(input-field){border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.password__input::part(input-field){border-radius:4px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-color-black, #000000);background-color:var(--emfe-w-color-white, #FFFFFF);font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:1.5;position:relative;margin-bottom:unset;height:44px;padding:0;width:100%}.password__input::part(reveal-button){position:relative;right:10px}.password__input::part(reveal-button)::before{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.password__input>input{padding:5px 15px}.password__input>input:placeholder-shown{color:var(--emfe-w-color-gray-150, #828282)}.password__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.password__complexity{position:relative;padding:10px;display:flex;flex-direction:column;gap:20px;justify-content:center;margin-top:20px;font-weight:300;background:var(--emfe-w-color-white, #FFFFFF);-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;height:150px;border:1px solid #B0B0B0;}.password__complexity meter{border-color:transparent;}.password__complexity meter[value=\"1\"]::-moz-meter-bar{background-color:var(--emfe-w-color-valid, #48952a)}.password__complexity meter[value=\"1\"]::-webkit-meter-optimum-value{background-color:var(--emfe-w-color-valid, #48952a)}.password__complexity meter:not([value=\"1\"])::-moz-meter-bar{background-color:var(--emfe-w-color-error, #FD2839)}.password__complexity meter:not([value=\"1\"])::-webkit-meter-optimum-value{background-color:var(--emfe-w-color-error, #FD2839)}.password__complexity--strength{display:flex;justify-content:space-evenly;align-items:center}.password__complexity--strength meter::-moz-meter-bar{background:#B0B0B0}.password__complexity--hidden{display:none}.password__complexity--text-bold{font-weight:500}.password__complexity--checkbox{margin-right:5px}.password__complexity:after{content:\"\";position:absolute;width:25px;height:25px;border-top:1px solid var(--emfe-w-color-gray-150, #828282);border-right:0 solid var(--emfe-w-color-gray-150, #828282);border-left:1px solid var(--emfe-w-color-gray-150, #828282);border-bottom:0 solid var(--emfe-w-color-gray-150, #828282);bottom:92%;left:50%;margin-left:-25px;transform:rotate(45deg);margin-top:-25px;background-color:var(--emfe-w-color-white, #FFFFFF)}.password__tooltip-icon{width:16px;height:auto}.password__tooltip{position:absolute;top:0;left:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-150, #828282);color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.password__tooltip.visible{opacity:1}";
 

package/dist/components/vaadin-button.js

@@ -1,4 +1,4 @@
-import { i, r as registerStyles, N as TabindexMixin, l as FocusMixin, E as ElementMixin, T as ThemableMixin, C as ControllerMixin, P as PolymerElement, h as html, g as TooltipController } from './field-mixin.js';
+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`
@@ -21,6 +21,7 @@ const button = i`
     -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 */
@@ -51,10 +52,7 @@ const button = i`
     /* We rely on the host always being relative */
     position: absolute;
     z-index: 1;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     background-color: currentColor;
     border-radius: inherit;
     opacity: 0;
@@ -199,16 +197,14 @@ const button = i`
 
   /* Icons */
 
-  [part] ::slotted(vaadin-icon),
-  [part] ::slotted(iron-icon) {
+  [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:']),
-  [part] ::slotted(iron-icon[icon^='vaadin:']) {
+  [part] ::slotted(vaadin-icon[icon^='vaadin:']) {
     padding: 0.25em;
     box-sizing: border-box !important;
   }
@@ -260,7 +256,90 @@ registerStyles('vaadin-button', button, { moduleId: 'lumo-button' });
 
 /**
  * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * 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/
  */
 
@@ -283,7 +362,9 @@ const ButtonMixin = (superClass) =>
          * @protected
          */
         tabindex: {
+          type: Number,
           value: 0,
+          reflectToAttribute: true,
         },
       };
     }
@@ -329,6 +410,10 @@ const ButtonMixin = (superClass) =>
     _onKeyDown(event) {
       super._onKeyDown(event);
 
+      if (event.altKey || event.shiftKey || event.ctrlKey || event.metaKey) {
+        return;
+      }
+
       if (this._activeKeys.includes(event.key)) {
         event.preventDefault();
 
@@ -341,10 +426,12 @@ const ButtonMixin = (superClass) =>
 
 /**
  * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * 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.
  *
@@ -371,8 +458,9 @@ const ButtonMixin = (superClass) =>
  * `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/custom-theme/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
+ * @customElement
  * @extends HTMLElement
  * @mixes ButtonMixin
  * @mixes ControllerMixin
@@ -385,66 +473,7 @@ class Button extends ButtonMixin(ElementMixin(ThemableMixin(ControllerMixin(Poly
   }
 
   static get template() {
-    return html`
-      <style>
-        :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;
-        }
-      </style>
-      <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>
-    `;
+    return buttonTemplate(html);
   }
 
   /** @protected */
@@ -456,6 +485,6 @@ class Button extends ButtonMixin(ElementMixin(ThemableMixin(ControllerMixin(Poly
   }
 }
 
-customElements.define(Button.is, Button);
+defineCustomElement(Button);
 
 export { Button as B, button as b };