@everymatrix/general-input 1.10.2 → 1.15.0

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

@@ -0,0 +1,1125 @@
+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, b as isElementFocused, L as LabelMixin, c as DelegateFocusMixin, E as ElementMixin, T as ThemableMixin, C as ControllerMixin, P as PolymerElement, h as html, e as InputController, f as LabelledInputController, g as TooltipController, j as requiredField, k as helper, F as FieldMixin, l as FocusMixin, m as FlattenedNodesObserver } 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);
+    }
+
+    :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);
+    }
+
+    /* Disabled */
+    :host([disabled]) {
+      pointer-events: none;
+      color: var(--lumo-disabled-text-color);
+    }
+
+    :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 - 2022 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);
+
+        // Clicking the checkbox or radio-button in Safari
+        // does not make it focused, so we do it manually.
+        if (!isElementFocused(input)) {
+          input.focus();
+        }
+      }
+
+      /** @protected */
+      _toggleChecked(checked) {
+        this.checked = checked;
+      }
+    },
+);
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A controller to copy the content from a source slot to a target element.
+ */
+class SlotTargetController {
+  constructor(sourceSlot, targetFactory, callback) {
+    /**
+     * The source `<slot>` element to copy nodes from.
+     */
+    this.sourceSlot = sourceSlot;
+
+    /**
+     * Function used to get a reference to slot target.
+     */
+    this.targetFactory = targetFactory;
+
+    /**
+     * Function called after copying nodes to target.
+     */
+    this.copyCallback = callback;
+
+    if (sourceSlot) {
+      sourceSlot.addEventListener('slotchange', () => {
+        // Copy in progress, ignore this event.
+        if (this.__copying) {
+          this.__copying = false;
+        } else {
+          this.__checkAndCopyNodesToSlotTarget();
+        }
+      });
+    }
+  }
+
+  hostConnected() {
+    this.__sourceSlotObserver = new MutationObserver(() => this.__checkAndCopyNodesToSlotTarget());
+
+    // Ensure the content is up to date when host is connected
+    // to handle e.g. mutating text content while disconnected.
+    // Note, `hostConnected()` is called twice if the controller
+    // is initialized in `ready()` when using `ControllerMixin`.
+    if (!this.__copying) {
+      this.__checkAndCopyNodesToSlotTarget();
+    }
+  }
+
+  /**
+   * Copies every node from the source slot to the target element
+   * once the source slot' content is changed.
+   *
+   * @private
+   */
+  __checkAndCopyNodesToSlotTarget() {
+    this.__sourceSlotObserver.disconnect();
+
+    // Ensure slot target element is up to date.
+    const slotTarget = this.targetFactory();
+
+    if (!slotTarget) {
+      return;
+    }
+
+    // Remove any existing clones from the slot target
+    if (this.__slotTargetClones) {
+      this.__slotTargetClones.forEach((node) => {
+        if (node.parentElement === slotTarget) {
+          slotTarget.removeChild(node);
+        }
+      });
+      delete this.__slotTargetClones;
+    }
+
+    // Exclude whitespace text nodes
+    const nodes = this.sourceSlot
+      .assignedNodes({ flatten: true })
+      .filter((node) => !(node.nodeType === Node.TEXT_NODE && node.textContent.trim() === ''));
+
+    if (nodes.length > 0) {
+      slotTarget.innerHTML = '';
+
+      // Ignore next slotchange
+      this.__copying = true;
+
+      this.__copyNodesToSlotTarget(nodes, slotTarget);
+    }
+  }
+
+  /**
+   * Copies the nodes to the target element.
+   *
+   * @param {!Array<!Node>} nodes
+   * @param {HTMLElement} slotTarget
+   * @private
+   */
+  __copyNodesToSlotTarget(nodes, slotTarget) {
+    this.__slotTargetClones = this.__slotTargetClones || [];
+
+    nodes.forEach((node) => {
+      // Clone the nodes and append the clones to the target
+      const clone = node.cloneNode(true);
+      this.__slotTargetClones.push(clone);
+
+      slotTarget.appendChild(clone);
+
+      // Observe all changes to the source node to have the clones updated
+      this.__sourceSlotObserver.observe(node, {
+        attributes: true,
+        childList: true,
+        subtree: true,
+        characterData: true,
+      });
+    });
+
+    // Run callback e.g. to show a deprecation warning
+    if (typeof this.copyCallback === 'function') {
+      this.copyCallback(nodes);
+    }
+  }
+}
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * `<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 wrapper element that contains slotted <input type="checkbox">.
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute       | Description | Part name
+ * ----------------|-------------|--------------
+ * `active`        | Set when the checkbox is pressed down, either with mouse, touch or the keyboard. | `:host`
+ * `disabled`      | Set when the checkbox is disabled. | `:host`
+ * `focus-ring`    | Set when the checkbox is focused using the keyboard. | `:host`
+ * `focused`       | Set when the checkbox is focused. | `:host`
+ * `indeterminate` | Set when the checkbox is in the indeterminate state. | `:host`
+ * `checked`       | Set when the checkbox is checked. | `:host`
+ * `has-label`     | Set when the checkbox has a label. | `:host`
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
+ *
+ * @fires {CustomEvent} checked-changed - Fired when the `checked` property changes.
+ * @fires {CustomEvent} indeterminate-changed - Fired when the `indeterminate` property changes.
+ *
+ * @extends HTMLElement
+ * @mixes ControllerMixin
+ * @mixes ThemableMixin
+ * @mixes ElementMixin
+ * @mixes ActiveMixin
+ * @mixes DelegateFocusMixin
+ * @mixes CheckedMixin
+ * @mixes LabelMixin
+ */
+class Checkbox extends LabelMixin(
+  CheckedMixin(DelegateFocusMixin(ActiveMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement)))))),
+) {
+  static get is() {
+    return 'vaadin-checkbox';
+  }
+
+  static get template() {
+    return html`
+      <style>
+        :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);
+        }
+
+        [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;
+        }
+      </style>
+      <div class="vaadin-checkbox-container">
+        <div part="checkbox"></div>
+        <slot name="input"></slot>
+        <slot name="label"></slot>
+
+        <div style="display: none !important">
+          <slot id="noop"></slot>
+        </div>
+      </div>
+      <slot name="tooltip"></slot>
+    `;
+  }
+
+  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: '',
+      },
+    };
+  }
+
+  /** @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));
+    this.addController(
+      new SlotTargetController(
+        this.$.noop,
+        () => this._labelController.node,
+        () => this.__warnDeprecated(),
+      ),
+    );
+    this._tooltipController = new TooltipController(this);
+    this.addController(this._tooltipController);
+  }
+
+  /** @private */
+  __warnDeprecated() {
+    console.warn(
+      `WARNING: Since Vaadin 22, placing the label as a direct child of a <vaadin-checkbox> is deprecated.
+Please use <label slot="label"> wrapper or the label property instead.`,
+    );
+  }
+
+  /**
+   * Extends the method from `ActiveMixin` in order to
+   * prevent setting the `active` attribute when interacting with a link inside the label.
+   *
+   * @param {Event} event
+   * @return {boolean}
+   * @protected
+   * @override
+   */
+  _shouldSetActive(event) {
+    if (event.target.localName === 'a') {
+      return false;
+    }
+
+    return super._shouldSetActive(event);
+  }
+
+  /**
+   * Extends the method from `CheckedMixin` in order to
+   * reset the indeterminate state once the user switches the checkbox.
+   *
+   * @param {boolean} checked
+   * @protected
+   * @override
+   */
+  _toggleChecked(checked) {
+    if (this.indeterminate) {
+      this.indeterminate = false;
+    }
+
+    super._toggleChecked(checked);
+  }
+}
+
+customElements.define(Checkbox.is, 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'] {
+    display: flex;
+    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 - 2022 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="Preferred language of contact:">
+ *   <vaadin-checkbox value="en" label="English"></vaadin-checkbox>
+ *   <vaadin-checkbox value="fr" label="Français"></vaadin-checkbox>
+ *   <vaadin-checkbox value="de" label="Deutsch"></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/custom-theme/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.
+ *
+ * @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%;
+        }
+
+        :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);
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this.ariaTarget = this;
+
+    // See https://github.com/vaadin/vaadin-web-components/issues/94
+    this.setAttribute('role', 'group');
+
+    this._observer = new FlattenedNodesObserver(this, ({ addedNodes, removedNodes }) => {
+      const addedCheckboxes = this.__filterCheckboxes(addedNodes);
+      const removedCheckboxes = this.__filterCheckboxes(removedNodes);
+
+      addedCheckboxes.forEach(this.__registerCheckbox);
+      removedCheckboxes.forEach(this.__unregisterCheckbox);
+
+      this.__warnOfCheckboxesWithoutValue(addedCheckboxes);
+    });
+
+    this._tooltipController = new TooltipController(this);
+    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);
+  }
+
+  /**
+   * A collection of the checkboxes.
+   *
+   * @return {!Array<!Checkbox>}
+   * @private
+   */
+  get __checkboxes() {
+    return this.__filterCheckboxes([...this.children]);
+  }
+
+  /**
+   * @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);
+
+    if (!focused) {
+      this.validate();
+    }
+  }
+}
+
+customElements.define(CheckboxGroup.is, CheckboxGroup);
+
+const checkboxGroupInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.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__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:#2B2D3F;line-height:14px}.checkboxgroup__label-text{font-size:16px}.checkboxgroup__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.checkboxgroup__tooltip-icon{width:16px;height:auto}.checkboxgroup__tooltip{position:absolute;top:0;right:0;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.checkboxgroup__tooltip.visible{opacity:1}";
+
+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 };