@everymatrix/general-input 1.44.0 → 1.45.2

package/dist/components/checkbox-group-input2.js

@@ -1,1078 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { t as translate, a as tooltipIconSvg } from './tooltipIcon.js';
-import { r as registerStyles, i, d as dedupingMixin, D as DelegateStateMixin, a as DisabledMixin, I as InputMixin, L as LabelMixin, b as DelegateFocusMixin, c as InputController, e as LabelledInputController, h as html, T as TooltipController, f as defineCustomElement$1, E as ElementMixin, g as ThemableMixin, P as PolymerElement, j as requiredField, k as helper, F as FieldMixin, l as FocusMixin, S as SlotObserver } from './field-mixin.js';
-import { A as ActiveMixin } from './active-mixin.js';
-
-registerStyles(
-  'vaadin-checkbox',
-  i`
-    :host {
-      color: var(--lumo-body-text-color);
-      font-size: var(--lumo-font-size-m);
-      font-family: var(--lumo-font-family);
-      line-height: var(--lumo-line-height-s);
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      -webkit-tap-highlight-color: transparent;
-      -webkit-user-select: none;
-      -moz-user-select: none;
-      user-select: none;
-      cursor: default;
-      outline: none;
-      --_checkbox-size: var(--vaadin-checkbox-size, calc(var(--lumo-size-m) / 2));
-    }
-
-    :host([has-label]) ::slotted(label) {
-      padding-block: var(--lumo-space-xs);
-      padding-inline: var(--lumo-space-xs) var(--lumo-space-s);
-    }
-
-    [part='checkbox'] {
-      width: var(--_checkbox-size);
-      height: var(--_checkbox-size);
-      margin: var(--lumo-space-xs);
-      position: relative;
-      border-radius: var(--lumo-border-radius-s);
-      background-color: var(--lumo-contrast-20pct);
-      transition: transform 0.2s cubic-bezier(0.12, 0.32, 0.54, 2), background-color 0.15s;
-      cursor: var(--lumo-clickable-cursor);
-      /* Default field border color */
-      --_input-border-color: var(--vaadin-input-field-border-color, var(--lumo-contrast-50pct));
-    }
-
-    :host([indeterminate]),
-    :host([checked]) {
-      --vaadin-input-field-border-color: transparent;
-    }
-
-    :host([indeterminate]) [part='checkbox'],
-    :host([checked]) [part='checkbox'] {
-      background-color: var(--lumo-primary-color);
-    }
-
-    /* Checkmark */
-    [part='checkbox']::after {
-      pointer-events: none;
-      font-family: 'lumo-icons';
-      content: var(--lumo-icons-checkmark);
-      color: var(--lumo-primary-contrast-color);
-      font-size: calc(var(--_checkbox-size) + 2px);
-      line-height: 1;
-      position: absolute;
-      top: -1px;
-      left: -1px;
-      contain: content;
-      opacity: 0;
-    }
-
-    :host([checked]) [part='checkbox']::after {
-      opacity: 1;
-    }
-
-    /* Indeterminate checkmark */
-    :host([indeterminate]) [part='checkbox']::after {
-      content: '';
-      opacity: 1;
-      top: 45%;
-      height: 10%;
-      left: 22%;
-      right: 22%;
-      width: auto;
-      border: 0;
-      background-color: var(--lumo-primary-contrast-color);
-    }
-
-    /* Focus ring */
-    :host([focus-ring]) [part='checkbox'] {
-      box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 3px var(--lumo-primary-color-50pct),
-        inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
-    }
-
-    /* Disabled */
-    :host([disabled]) {
-      pointer-events: none;
-      color: var(--lumo-disabled-text-color);
-      --vaadin-input-field-border-color: var(--lumo-contrast-20pct);
-    }
-
-    :host([disabled]) ::slotted(label) {
-      color: inherit;
-    }
-
-    :host([disabled]) [part='checkbox'] {
-      background-color: var(--lumo-contrast-10pct);
-    }
-
-    :host([disabled]) [part='checkbox']::after {
-      color: var(--lumo-contrast-30pct);
-    }
-
-    :host([indeterminate][disabled]) [part='checkbox']::after {
-      background-color: var(--lumo-contrast-30pct);
-    }
-
-    /* RTL specific styles */
-    :host([dir='rtl'][has-label]) ::slotted(label) {
-      padding: var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-s);
-    }
-
-    /* Used for activation "halo" */
-    [part='checkbox']::before {
-      pointer-events: none;
-      color: transparent;
-      width: 100%;
-      height: 100%;
-      line-height: var(--_checkbox-size);
-      border-radius: inherit;
-      background-color: inherit;
-      transform: scale(1.4);
-      opacity: 0;
-      transition: transform 0.1s, opacity 0.8s;
-    }
-
-    /* Hover */
-    :host(:not([checked]):not([indeterminate]):not([disabled]):hover) [part='checkbox'] {
-      background-color: var(--lumo-contrast-30pct);
-    }
-
-    /* Disable hover for touch devices */
-    @media (pointer: coarse) {
-      :host(:not([checked]):not([indeterminate]):not([disabled]):hover) [part='checkbox'] {
-        background-color: var(--lumo-contrast-20pct);
-      }
-    }
-
-    /* Active */
-    :host([active]) [part='checkbox'] {
-      transform: scale(0.9);
-      transition-duration: 0.05s;
-    }
-
-    :host([active][checked]) [part='checkbox'] {
-      transform: scale(1.1);
-    }
-
-    :host([active]:not([checked])) [part='checkbox']::before {
-      transition-duration: 0.01s, 0.01s;
-      transform: scale(0);
-      opacity: 0.4;
-    }
-  `,
-  { moduleId: 'lumo-checkbox' },
-);
-
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * A mixin to manage the checked state.
- *
- * @polymerMixin
- * @mixes DelegateStateMixin
- * @mixes DisabledMixin
- * @mixes InputMixin
- */
-const CheckedMixin = dedupingMixin(
-  (superclass) =>
-    class CheckedMixinClass extends DelegateStateMixin(DisabledMixin(InputMixin(superclass))) {
-      static get properties() {
-        return {
-          /**
-           * True if the element is checked.
-           * @type {boolean}
-           */
-          checked: {
-            type: Boolean,
-            value: false,
-            notify: true,
-            reflectToAttribute: true,
-          },
-        };
-      }
-
-      static get delegateProps() {
-        return [...super.delegateProps, 'checked'];
-      }
-
-      /**
-       * @param {Event} event
-       * @protected
-       * @override
-       */
-      _onChange(event) {
-        const input = event.target;
-
-        this._toggleChecked(input.checked);
-      }
-
-      /** @protected */
-      _toggleChecked(checked) {
-        this.checked = checked;
-      }
-    },
-);
-
-/**
- * @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 checkbox functionality.
- *
- * @polymerMixin
- * @mixes ActiveMixin
- * @mixes CheckedMixin
- * @mixes DelegateFocusMixin
- * @mixes LabelMixin
- */
-const CheckboxMixin = (superclass) =>
-  class CheckboxMixinClass extends LabelMixin(CheckedMixin(DelegateFocusMixin(ActiveMixin(superclass)))) {
-    static get properties() {
-      return {
-        /**
-         * True if the checkbox is in the indeterminate state which means
-         * it is not possible to say whether it is checked or unchecked.
-         * The state is reset once the user switches the checkbox by hand.
-         *
-         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes
-         *
-         * @type {boolean}
-         */
-        indeterminate: {
-          type: Boolean,
-          notify: true,
-          value: false,
-          reflectToAttribute: true,
-        },
-
-        /**
-         * The name of the checkbox.
-         *
-         * @type {string}
-         */
-        name: {
-          type: String,
-          value: '',
-        },
-
-        /**
-         * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
-         *
-         * @override
-         * @protected
-         */
-        tabindex: {
-          type: Number,
-          value: 0,
-          reflectToAttribute: true,
-        },
-      };
-    }
-
-    /** @override */
-    static get delegateProps() {
-      return [...super.delegateProps, 'indeterminate'];
-    }
-
-    /** @override */
-    static get delegateAttrs() {
-      return [...super.delegateAttrs, 'name'];
-    }
-
-    constructor() {
-      super();
-
-      this._setType('checkbox');
-
-      // Set the string "on" as the default value for the checkbox following the HTML specification:
-      // https://html.spec.whatwg.org/multipage/input.html#dom-input-value-default-on
-      this.value = 'on';
-    }
-
-    /** @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));
-    }
-
-    /**
-     * Override method inherited from `ActiveMixin` to prevent setting
-     * `active` attribute when clicking a link placed inside the label.
-     *
-     * @param {Event} event
-     * @return {boolean}
-     * @protected
-     * @override
-     */
-    _shouldSetActive(event) {
-      if (event.target.localName === 'a') {
-        return false;
-      }
-
-      return super._shouldSetActive(event);
-    }
-
-    /**
-     * Override method inherited from `CheckedMixin` to reset
-     * `indeterminate` state checkbox is toggled by the user.
-     *
-     * @param {boolean} checked
-     * @protected
-     * @override
-     */
-    _toggleChecked(checked) {
-      if (this.indeterminate) {
-        this.indeterminate = false;
-      }
-
-      super._toggleChecked(checked);
-    }
-  };
-
-/**
- * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-const checkboxStyles = i`
-  :host {
-    display: inline-block;
-  }
-
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  :host([disabled]) {
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  .vaadin-checkbox-container {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    align-items: baseline;
-  }
-
-  [part='checkbox'],
-  ::slotted(input),
-  ::slotted(label) {
-    grid-row: 1;
-  }
-
-  [part='checkbox'],
-  ::slotted(input) {
-    grid-column: 1;
-  }
-
-  [part='checkbox'] {
-    width: var(--vaadin-checkbox-size, 1em);
-    height: var(--vaadin-checkbox-size, 1em);
-    --_input-border-width: var(--vaadin-input-field-border-width, 0);
-    --_input-border-color: var(--vaadin-input-field-border-color, transparent);
-    box-shadow: inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
-  }
-
-  [part='checkbox']::before {
-    display: block;
-    content: '\\202F';
-    line-height: var(--vaadin-checkbox-size, 1em);
-    contain: paint;
-  }
-
-  /* visually hidden */
-  ::slotted(input) {
-    opacity: 0;
-    cursor: inherit;
-    margin: 0;
-    align-self: stretch;
-    -webkit-appearance: none;
-    width: initial;
-    height: initial;
-  }
-
-  @media (forced-colors: active) {
-    [part='checkbox'] {
-      outline: 1px solid;
-      outline-offset: -1px;
-    }
-
-    :host([disabled]) [part='checkbox'],
-    :host([disabled]) [part='checkbox']::after {
-      outline-color: GrayText;
-    }
-
-    :host(:is([checked], [indeterminate])) [part='checkbox']::after {
-      outline: 1px solid;
-      outline-offset: -1px;
-      border-radius: inherit;
-    }
-
-    :host([focused]) [part='checkbox'],
-    :host([focused]) [part='checkbox']::after {
-      outline-width: 2px;
-    }
-  }
-`;
-
-/**
- * @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-checkbox', checkboxStyles, { moduleId: 'vaadin-checkbox-styles' });
-
-/**
- * `<vaadin-checkbox>` is an input field representing a binary choice.
- *
- * ```html
- * <vaadin-checkbox label="I accept the terms and conditions"></vaadin-checkbox>
- * ```
- *
- * ### Styling
- *
- * The following shadow DOM parts are available for styling:
- *
- * Part name   | Description
- * ------------|-------------
- * `checkbox`  | The element representing a stylable custom checkbox.
- *
- * The following state attributes are available for styling:
- *
- * Attribute       | Description
- * ----------------|-------------
- * `active`        | Set when the checkbox is activated with mouse, touch or the keyboard.
- * `checked`       | Set when the checkbox is checked.
- * `disabled`      | Set when the checkbox is disabled.
- * `focus-ring`    | Set when the checkbox is focused using the keyboard.
- * `focused`       | Set when the checkbox is focused.
- * `indeterminate` | Set when the checkbox is in the indeterminate state.
- * `has-label`     | Set when the checkbox has a label.
- *
- * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
- *
- * @fires {CustomEvent} checked-changed - Fired when the `checked` property changes.
- * @fires {CustomEvent} indeterminate-changed - Fired when the `indeterminate` property changes.
- *
- * @customElement
- * @extends HTMLElement
- * @mixes CheckboxMixin
- * @mixes ThemableMixin
- * @mixes ElementMixin
- */
-class Checkbox extends CheckboxMixin(ElementMixin(ThemableMixin(PolymerElement))) {
-  static get is() {
-    return 'vaadin-checkbox';
-  }
-
-  static get template() {
-    return html`
-      <div class="vaadin-checkbox-container">
-        <div part="checkbox" aria-hidden="true"></div>
-        <slot name="input"></slot>
-        <slot name="label"></slot>
-      </div>
-      <slot name="tooltip"></slot>
-    `;
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this._tooltipController = new TooltipController(this);
-    this._tooltipController.setAriaTarget(this.inputElement);
-    this.addController(this._tooltipController);
-  }
-}
-
-defineCustomElement$1(Checkbox);
-
-const checkboxGroup = i`
-  :host {
-    color: var(--lumo-body-text-color);
-    font-size: var(--lumo-font-size-m);
-    font-family: var(--lumo-font-family);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-tap-highlight-color: transparent;
-    padding: var(--lumo-space-xs) 0;
-  }
-
-  :host::before {
-    /* Effective height of vaadin-checkbox */
-    height: var(--lumo-size-s);
-    box-sizing: border-box;
-    display: inline-flex;
-    align-items: center;
-  }
-
-  :host([theme~='vertical']) [part='group-field'] {
-    flex-direction: column;
-  }
-
-  :host([disabled]) [part='label'] {
-    color: var(--lumo-disabled-text-color);
-    -webkit-text-fill-color: var(--lumo-disabled-text-color);
-  }
-
-  :host([focused]:not([disabled])) [part='label'] {
-    color: var(--lumo-primary-text-color);
-  }
-
-  :host(:hover:not([disabled]):not([focused])) [part='label'],
-  :host(:hover:not([disabled]):not([focused])) [part='helper-text'] {
-    color: var(--lumo-body-text-color);
-  }
-
-  /* Touch device adjustment */
-  @media (pointer: coarse) {
-    :host(:hover:not([disabled]):not([focused])) [part='label'] {
-      color: var(--lumo-secondary-text-color);
-    }
-  }
-`;
-
-registerStyles('vaadin-checkbox-group', [requiredField, helper, checkboxGroup], {
-  moduleId: 'lumo-checkbox-group',
-});
-
-/**
- * @license
- * Copyright (c) 2018 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * `<vaadin-checkbox-group>` is a web component that allows the user to choose several items from a group of binary choices.
- *
- * ```html
- * <vaadin-checkbox-group label="Export data">
- *   <vaadin-checkbox value="0" label="Order ID"></vaadin-checkbox>
- *   <vaadin-checkbox value="1" label="Product name"></vaadin-checkbox>
- *   <vaadin-checkbox value="2" label="Customer"></vaadin-checkbox>
- *   <vaadin-checkbox value="3" label="Status"></vaadin-checkbox>
- * </vaadin-checkbox-group>
- * ```
- *
- * ### Styling
- *
- * The following shadow DOM parts are available for styling:
- *
- * Part name            | Description
- * ---------------------|----------------
- * `label`              | The slotted label element wrapper
- * `group-field`        | The checkbox elements wrapper
- * `helper-text`        | The slotted helper text element wrapper
- * `error-message`      | The slotted error message element wrapper
- * `required-indicator` | The `required` state indicator element
- *
- * The following state attributes are available for styling:
- *
- * Attribute           | Description                               | Part name
- * --------------------|-------------------------------------------|------------
- * `disabled`          | Set when the element is disabled          | :host
- * `invalid`           | Set when the element is invalid           | :host
- * `focused`           | Set when the element is focused           | :host
- * `has-label`         | Set when the element has a label          | :host
- * `has-value`         | Set when the element has a value          | :host
- * `has-helper`        | Set when the element has helper text      | :host
- * `has-error-message` | Set when the element has an error message | :host
- *
- * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
- *
- * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
- * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
- * @fires {CustomEvent} validated - Fired whenever the field is validated.
- *
- * @customElement
- * @extends HTMLElement
- * @mixes ThemableMixin
- * @mixes DisabledMixin
- * @mixes ElementMixin
- * @mixes FocusMixin
- * @mixes FieldMixin
- */
-class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(ThemableMixin(PolymerElement))))) {
-  static get is() {
-    return 'vaadin-checkbox-group';
-  }
-
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: inline-flex;
-        }
-
-        :host::before {
-          content: '\\2003';
-          width: 0;
-          display: inline-block;
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-
-        .vaadin-group-field-container {
-          display: flex;
-          flex-direction: column;
-          width: 100%;
-        }
-
-        [part='group-field'] {
-          display: flex;
-          flex-wrap: wrap;
-        }
-
-        :host(:not([has-label])) [part='label'] {
-          display: none;
-        }
-      </style>
-
-      <div class="vaadin-group-field-container">
-        <div part="label">
-          <slot name="label"></slot>
-          <span part="required-indicator" aria-hidden="true"></span>
-        </div>
-
-        <div part="group-field">
-          <slot></slot>
-        </div>
-
-        <div part="helper-text">
-          <slot name="helper"></slot>
-        </div>
-
-        <div part="error-message">
-          <slot name="error-message"></slot>
-        </div>
-      </div>
-
-      <slot name="tooltip"></slot>
-    `;
-  }
-
-  static get properties() {
-    return {
-      /**
-       * An array containing values of the currently checked checkboxes.
-       *
-       * The array is immutable so toggling checkboxes always results in
-       * creating a new array.
-       *
-       * @type {!Array<!string>}
-       */
-      value: {
-        type: Array,
-        value: () => [],
-        notify: true,
-        observer: '__valueChanged',
-      },
-    };
-  }
-
-  constructor() {
-    super();
-
-    this.__registerCheckbox = this.__registerCheckbox.bind(this);
-    this.__unregisterCheckbox = this.__unregisterCheckbox.bind(this);
-    this.__onCheckboxCheckedChanged = this.__onCheckboxCheckedChanged.bind(this);
-
-    this._tooltipController = new TooltipController(this);
-    this._tooltipController.addEventListener('tooltip-changed', (event) => {
-      const tooltip = event.detail.node;
-      if (tooltip && tooltip.isConnected) {
-        // Tooltip element has been added to the DOM
-        const inputs = this.__checkboxes.map((checkbox) => checkbox.inputElement);
-        this._tooltipController.setAriaTarget(inputs);
-      } else {
-        // Tooltip element is no longer connected
-        this._tooltipController.setAriaTarget([]);
-      }
-    });
-  }
-
-  /**
-   * A collection of the checkboxes.
-   *
-   * @return {!Array<!Checkbox>}
-   * @private
-   */
-  get __checkboxes() {
-    return this.__filterCheckboxes([...this.children]);
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this.ariaTarget = this;
-
-    // See https://github.com/vaadin/vaadin-web-components/issues/94
-    this.setAttribute('role', 'group');
-
-    const slot = this.shadowRoot.querySelector('slot:not([name])');
-    this._observer = new SlotObserver(slot, ({ addedNodes, removedNodes }) => {
-      const addedCheckboxes = this.__filterCheckboxes(addedNodes);
-      const removedCheckboxes = this.__filterCheckboxes(removedNodes);
-
-      addedCheckboxes.forEach(this.__registerCheckbox);
-      removedCheckboxes.forEach(this.__unregisterCheckbox);
-
-      const inputs = this.__checkboxes.map((checkbox) => checkbox.inputElement);
-      this._tooltipController.setAriaTarget(inputs);
-
-      this.__warnOfCheckboxesWithoutValue(addedCheckboxes);
-    });
-
-    this.addController(this._tooltipController);
-  }
-
-  /**
-   * Override method inherited from `ValidateMixin`
-   * to validate the value array.
-   *
-   * @override
-   * @return {boolean}
-   */
-  checkValidity() {
-    return !this.required || this.value.length > 0;
-  }
-
-  /**
-   * @param {!Array<!Node>} nodes
-   * @return {!Array<!Checkbox>}
-   * @private
-   */
-  __filterCheckboxes(nodes) {
-    return nodes.filter((child) => child instanceof Checkbox);
-  }
-
-  /**
-   * @param {!Array<!Checkbox>} checkboxes
-   * @private
-   */
-  __warnOfCheckboxesWithoutValue(checkboxes) {
-    const hasCheckboxesWithoutValue = checkboxes.some((checkbox) => {
-      const { value } = checkbox;
-
-      return !checkbox.hasAttribute('value') && (!value || value === 'on');
-    });
-
-    if (hasCheckboxesWithoutValue) {
-      console.warn('Please provide the value attribute to all the checkboxes inside the checkbox group.');
-    }
-  }
-
-  /**
-   * Registers the checkbox after adding it to the group.
-   *
-   * @param {!Checkbox} checkbox
-   * @private
-   */
-  __registerCheckbox(checkbox) {
-    checkbox.addEventListener('checked-changed', this.__onCheckboxCheckedChanged);
-
-    if (this.disabled) {
-      checkbox.disabled = true;
-    }
-
-    if (checkbox.checked) {
-      this.__addCheckboxToValue(checkbox.value);
-    } else if (this.value.includes(checkbox.value)) {
-      checkbox.checked = true;
-    }
-  }
-
-  /**
-   * Unregisters the checkbox before removing it from the group.
-   *
-   * @param {!Checkbox} checkbox
-   * @private
-   */
-  __unregisterCheckbox(checkbox) {
-    checkbox.removeEventListener('checked-changed', this.__onCheckboxCheckedChanged);
-
-    if (checkbox.checked) {
-      this.__removeCheckboxFromValue(checkbox.value);
-    }
-  }
-
-  /**
-   * Override method inherited from `DisabledMixin`
-   * to propagate the `disabled` property to the checkboxes.
-   *
-   * @param {boolean} newValue
-   * @param {boolean} oldValue
-   * @override
-   * @protected
-   */
-  _disabledChanged(newValue, oldValue) {
-    super._disabledChanged(newValue, oldValue);
-
-    // Prevent updating the `disabled` property for the checkboxes at initialization.
-    // Otherwise, the checkboxes may end up enabled regardless the `disabled` attribute
-    // intentionally added by the user on some of them.
-    if (!newValue && oldValue === undefined) {
-      return;
-    }
-
-    if (oldValue !== newValue) {
-      this.__checkboxes.forEach((checkbox) => {
-        checkbox.disabled = newValue;
-      });
-    }
-  }
-
-  /**
-   * @param {string} value
-   * @private
-   */
-  __addCheckboxToValue(value) {
-    if (!this.value.includes(value)) {
-      this.value = [...this.value, value];
-    }
-  }
-
-  /**
-   * @param {string} value
-   * @private
-   */
-  __removeCheckboxFromValue(value) {
-    if (this.value.includes(value)) {
-      this.value = this.value.filter((v) => v !== value);
-    }
-  }
-
-  /**
-   * @param {!CustomEvent} event
-   * @private
-   */
-  __onCheckboxCheckedChanged(event) {
-    const checkbox = event.target;
-
-    if (checkbox.checked) {
-      this.__addCheckboxToValue(checkbox.value);
-    } else {
-      this.__removeCheckboxFromValue(checkbox.value);
-    }
-  }
-
-  /**
-   * @param {string | null | undefined} value
-   * @param {string | null | undefined} oldValue
-   * @private
-   */
-  __valueChanged(value, oldValue) {
-    // Setting initial value to empty array, skip validation
-    if (value.length === 0 && oldValue === undefined) {
-      return;
-    }
-
-    this.toggleAttribute('has-value', value.length > 0);
-
-    this.__checkboxes.forEach((checkbox) => {
-      checkbox.checked = value.includes(checkbox.value);
-    });
-
-    if (oldValue !== undefined) {
-      this.validate();
-    }
-  }
-
-  /**
-   * Override method inherited from `FocusMixin`
-   * to prevent removing the `focused` attribute
-   * when focus moves between checkboxes inside the group.
-   *
-   * @param {!FocusEvent} event
-   * @return {boolean}
-   * @protected
-   */
-  _shouldRemoveFocus(event) {
-    return !this.contains(event.relatedTarget);
-  }
-
-  /**
-   * Override method inherited from `FocusMixin`
-   * to run validation when the group loses focus.
-   *
-   * @param {boolean} focused
-   * @override
-   * @protected
-   */
-  _setFocused(focused) {
-    super._setFocused(focused);
-
-    // Do not validate when focusout is caused by document
-    // losing focus, which happens on browser tab switch.
-    if (!focused && document.hasFocus()) {
-      this.validate();
-    }
-  }
-}
-
-defineCustomElement$1(CheckboxGroup);
-
-const checkboxGroupInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}vaadin-checkbox-group{margin-top:5px;margin-left:40px}.checkboxgroup{font-family:\"Roboto\";font-style:normal;font-size:15px}.checkboxgroup__wrapper{position:relative}.checkboxgroup__wrapper--flex{display:flex;gap:5px;align-content:flex-start}.checkboxgroup__wrapper--relative{position:relative;display:inline}.checkboxgroup__input{vertical-align:baseline}.checkboxgroup__input[indeterminate]::part(checkbox)::after,.checkboxgroup__input[indeterminate]::part(checkbox),.checkboxgroup__input[checked]::part(checkbox){background-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.checkboxgroup__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));line-height:1.5;padding-left:10px;vertical-align:baseline}.checkboxgroup__label-text{font-size:16px}.checkboxgroup__label a{color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.checkboxgroup__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.checkboxgroup__tooltip-icon{width:16px;height:auto}.checkboxgroup__tooltip{position:absolute;top:0;right:0;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.checkboxgroup__tooltip.visible{opacity:1}.checkbox__input[indeterminate]::part(checkbox),.checkbox__input[checked]::part(checkbox){background-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}";
-
-const CheckboxGroupInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.sendValidityState = createEvent(this, "sendValidityState", 7);
-    this.sendInputValue = createEvent(this, "sendInputValue", 7);
-    /**
-     * Default value for the input.
-     */
-    this.defaultValue = '';
-    /**
-     * Client custom styling via inline style
-     */
-    this.clientStyling = '';
-    this.limitStylingAppends = false;
-    this.showTooltip = false;
-    this.selectedValues = [];
-    this.value = null;
-    this.setClientStyling = () => {
-      let sheet = document.createElement('style');
-      sheet.innerHTML = this.clientStyling;
-      this.stylingContainer.prepend(sheet);
-    };
-  }
-  validityChanged() {
-    this.validityStateHandler({ valid: this.isValid, name: this.name });
-    if (this.emitValue == true) {
-      this.valueHandler({ name: this.name, value: this.value, type: 'checkboxgroup' });
-    }
-  }
-  setValue() {
-    this.value = this.options.reduce((acc, option) => {
-      acc[option.name] = this.selectedValues.includes(option.name);
-      return acc;
-    }, {});
-    this.emitValueHandler(true);
-  }
-  validityStateHandler(inputStateEvent) {
-    this.sendValidityState.emit(inputStateEvent);
-  }
-  emitValueHandler(newValue) {
-    if (newValue == true && this.isValid) {
-      this.valueHandler({ name: this.name, value: this.value, type: 'checkboxgroup' });
-    }
-  }
-  valueHandler(inputValueEvent) {
-    this.sendInputValue.emit(inputValueEvent);
-  }
-  handleClickOutside(event) {
-    if (event.composedPath()[0] === this.tooltipIconReference)
-      return;
-    if (event.composedPath()[0] !== this.tooltipReference)
-      this.showTooltip = false;
-  }
-  componentDidRender() {
-    // start custom styling area
-    if (!this.limitStylingAppends && this.stylingContainer) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      this.limitStylingAppends = true;
-    }
-    // end custom styling area
-  }
-  componentDidLoad() {
-    this.inputReference = this.element.shadowRoot.querySelector('input');
-    // For now this input has no validation. Send isValid as true immediately.
-    //@TODO: add validation logic to it, if business reason arises.
-    this.isValid = this.setValidity();
-    if (this.defaultValue) {
-      this.selectedValues = this.options.map((checkbox) => checkbox.name);
-      this.value = this.defaultValue;
-      this.valueHandler({ name: this.name, value: this.value });
-    }
-  }
-  setValidity() {
-    return this.inputReference.validity.valid;
-  }
-  setErrorMessage() {
-    if (this.inputReference.validity.valueMissing) {
-      return translate('requiredError', this.language);
-    }
-  }
-  renderTooltip() {
-    if (this.showTooltip) {
-      return (h("div", { class: `checkboxgroup__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
-    }
-    return null;
-  }
-  handleParentCheckbox(e) {
-    // Logic for toggling the children checkboxes.
-    this.selectedValues = e.target.checked
-      ? this.options.map((checkbox) => checkbox.name)
-      : [];
-  }
-  renderLabel() {
-    return (h("label", { class: 'checkbox__label', htmlFor: `${this.name}__input`, slot: 'label' }, h("div", { class: 'checkbox__label-text', innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
-  }
-  render() {
-    return h("div", { class: `checkboxgroup__wrapper  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { class: 'checkboxgroup__wrapper--flex' }, h("vaadin-checkbox", { class: 'checkbox__input', checked: this.selectedValues.length === this.options.length || this.defaultValue === 'true', indeterminate: this.selectedValues.length > 0 && this.selectedValues.length < this.options.length, onChange: (e) => this.handleParentCheckbox(e) }, this.renderLabel()), this.tooltip &&
-      h("img", { class: 'checkboxgroup__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), h("small", { class: 'checkboxgroup__error-message' }, this.errorMessage), h("vaadin-checkbox-group", { theme: "vertical", value: this.selectedValues, "on-value-changed": (event) => {
-        this.selectedValues = event.detail.value;
-      } }, this.options.map((checkbox) => h("vaadin-checkbox", { class: 'checkbox__input', name: checkbox.name, value: checkbox.name, label: checkbox.displayName }))));
-  }
-  get element() { return this; }
-  static get watchers() { return {
-    "isValid": ["validityChanged"],
-    "selectedValues": ["setValue"],
-    "emitValue": ["emitValueHandler"]
-  }; }
-  static get style() { return checkboxGroupInputCss; }
-}, [1, "checkbox-group-input", {
-    "name": [513],
-    "displayName": [513, "display-name"],
-    "defaultValue": [513, "default-value"],
-    "autofilled": [516],
-    "tooltip": [513],
-    "options": [16],
-    "validation": [16],
-    "language": [513],
-    "emitValue": [516, "emit-value"],
-    "clientStyling": [513, "client-styling"],
-    "errorMessage": [32],
-    "isValid": [32],
-    "limitStylingAppends": [32],
-    "showTooltip": [32],
-    "selectedValues": [32]
-  }, [[4, "click", "handleClickOutside"]]]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["checkbox-group-input"];
-  components.forEach(tagName => { switch (tagName) {
-    case "checkbox-group-input":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, CheckboxGroupInput);
-      }
-      break;
-  } });
-}
-
-export { CheckboxGroupInput as C, defineCustomElement as d };