@vaadin/vaadin-combo-box 21.0.1 → 22.0.0-alpha10

package/src/vaadin-combo-box-placeholder.js

@@ -1,16 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/*
- * Placeholder object class representing items being loaded.
- *
- * @private
- */
-export const ComboBoxPlaceholder = class ComboBoxPlaceholder {
-  toString() {
-    return '';
-  }
-};

package/theme/lumo/vaadin-combo-box-dropdown-styles.js

@@ -1,87 +0,0 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-overlay/theme/lumo/vaadin-overlay.js';
-import '@vaadin/vaadin-lumo-styles/mixins/menu-overlay.js';
-
-registerStyles(
-  'vaadin-combo-box-overlay',
-  css`
-    [part='content'] {
-      padding: 0;
-    }
-
-    :host {
-      /* TODO: using a legacy mixin (unsupported) */
-      --iron-list-items-container: {
-        border-width: var(--lumo-space-xs);
-        border-style: solid;
-        border-color: transparent;
-      }
-    }
-
-    /* Loading state */
-
-    /* When items are empty, the spinner needs some room */
-    :host(:not([closing])) [part~='content'] {
-      min-height: calc(2 * var(--lumo-space-s) + var(--lumo-icon-size-s));
-    }
-
-    [part~='overlay'] {
-      position: relative;
-    }
-
-    :host([loading]) [part~='loader'] {
-      box-sizing: border-box;
-      width: var(--lumo-icon-size-s);
-      height: var(--lumo-icon-size-s);
-      position: absolute;
-      z-index: 1;
-      left: var(--lumo-space-s);
-      right: var(--lumo-space-s);
-      top: var(--lumo-space-s);
-      margin-left: auto;
-      margin-inline-start: auto;
-      margin-inline-end: 0;
-      border: 2px solid transparent;
-      border-color: var(--lumo-primary-color-50pct) var(--lumo-primary-color-50pct) var(--lumo-primary-color)
-        var(--lumo-primary-color);
-      border-radius: calc(0.5 * var(--lumo-icon-size-s));
-      opacity: 0;
-      animation: 1s linear infinite lumo-combo-box-loader-rotate, 0.3s 0.1s lumo-combo-box-loader-fade-in both;
-      pointer-events: none;
-    }
-
-    @keyframes lumo-combo-box-loader-fade-in {
-      0% {
-        opacity: 0;
-      }
-
-      100% {
-        opacity: 1;
-      }
-    }
-
-    @keyframes lumo-combo-box-loader-rotate {
-      0% {
-        transform: rotate(0deg);
-      }
-
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-
-    /* RTL specific styles */
-
-    :host([loading][dir='rtl']) [part~='loader'] {
-      left: auto;
-      margin-left: 0;
-      margin-right: auto;
-      margin-inline-start: 0;
-      margin-inline-end: auto;
-    }
-  `,
-  { moduleId: 'lumo-combo-box-overlay', include: ['lumo-overlay', 'lumo-menu-overlay-core'] }
-);

package/theme/lumo/vaadin-combo-box-item-styles.js

@@ -1,47 +0,0 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-item/theme/lumo/vaadin-item.js';
-
-/* TODO partly duplicated from vaadin-list-box styles. Should find a way to make it DRY */
-registerStyles(
-  'vaadin-combo-box-item',
-  css`
-    :host {
-      cursor: default;
-      -webkit-tap-highlight-color: var(--lumo-primary-color-10pct);
-      padding-left: calc(var(--lumo-border-radius-m) / 4);
-      padding-right: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
-      transition: background-color 100ms;
-      border-radius: var(--lumo-border-radius-m);
-      overflow: hidden;
-      --_lumo-item-selected-icon-display: block;
-    }
-
-    :host(:hover) {
-      background-color: var(--lumo-primary-color-10pct);
-    }
-
-    :host([focused]:not([disabled])) {
-      box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
-    }
-
-    @media (pointer: coarse) {
-      :host(:hover) {
-        background-color: transparent;
-      }
-
-      :host([focused]:not([disabled])) {
-        box-shadow: none;
-      }
-    }
-
-    /* RTL specific styles */
-    :host([dir='rtl']) {
-      padding-right: calc(var(--lumo-border-radius-m) / 4);
-      padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
-    }
-  `,
-  { moduleId: 'lumo-combo-box-item', include: ['lumo-item'] }
-);

package/theme/lumo/vaadin-combo-box-styles.js

@@ -1,18 +0,0 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import '@vaadin/vaadin-lumo-styles/font-icons.js';
-import '@vaadin/vaadin-lumo-styles/mixins/field-button.js';
-import '@vaadin/vaadin-text-field/theme/lumo/vaadin-text-field.js';
-
-registerStyles(
-  'vaadin-combo-box',
-  css`
-    :host {
-      outline: none;
-    }
-
-    [part='toggle-button']::before {
-      content: var(--lumo-icons-dropdown);
-    }
-  `,
-  { moduleId: 'lumo-combo-box', include: ['lumo-field-button'] }
-);

package/theme/material/vaadin-combo-box-dropdown-styles.js

@@ -1,124 +0,0 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/mixins/menu-overlay.js';
-
-registerStyles(
-  'vaadin-combo-box-overlay',
-  css`
-    :host {
-      /* TODO using a legacy mixin (unsupported) */
-      --iron-list-items-container: {
-        border-width: 8px 0;
-        border-style: solid;
-        border-color: transparent;
-      }
-    }
-
-    [part='overlay'] {
-      position: relative;
-      overflow: visible;
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-    }
-
-    [part='content'] {
-      padding: 0;
-    }
-
-    :host([loading]) [part='loader'] {
-      height: 2px;
-      position: absolute;
-      z-index: 1;
-      top: -2px;
-      left: 0;
-      right: 0;
-      background: var(--material-background-color)
-        linear-gradient(
-          90deg,
-          transparent 0%,
-          transparent 20%,
-          var(--material-primary-color) 20%,
-          var(--material-primary-color) 40%,
-          transparent 40%,
-          transparent 60%,
-          var(--material-primary-color) 60%,
-          var(--material-primary-color) 80%,
-          transparent 80%,
-          transparent 100%
-        )
-        0 0 / 400% 100% repeat-x;
-      opacity: 0;
-      animation: 3s linear infinite material-combo-box-loader-progress, 0.3s 0.1s both material-combo-box-loader-fade-in;
-    }
-
-    [part='loader']::before {
-      content: '';
-      display: block;
-      height: 100%;
-      opacity: 0.16;
-      background: var(--material-primary-color);
-    }
-
-    @keyframes material-combo-box-loader-fade-in {
-      0% {
-        opacity: 0;
-      }
-
-      100% {
-        opacity: 1;
-      }
-    }
-
-    @keyframes material-combo-box-loader-progress {
-      0% {
-        background-position: 0 0;
-        background-size: 300% 100%;
-      }
-
-      33% {
-        background-position: -100% 0;
-        background-size: 400% 100%;
-      }
-
-      67% {
-        background-position: -200% 0;
-        background-size: 250% 100%;
-      }
-
-      100% {
-        background-position: -300% 0;
-        background-size: 300% 100%;
-      }
-    }
-
-    /* RTL specific styles */
-
-    @keyframes material-combo-box-loader-progress-rtl {
-      0% {
-        background-position: 100% 0;
-        background-size: 300% 100%;
-      }
-
-      33% {
-        background-position: 200% 0;
-        background-size: 400% 100%;
-      }
-
-      67% {
-        background-position: 300% 0;
-        background-size: 250% 100%;
-      }
-
-      100% {
-        background-position: 400% 0;
-        background-size: 300% 100%;
-      }
-    }
-
-    :host([loading][dir='rtl']) [part='loader'] {
-      animation: 3s linear infinite material-combo-box-loader-progress-rtl,
-        0.3s 0.1s both material-combo-box-loader-fade-in;
-    }
-  `,
-  { moduleId: 'material-combo-box-overlay', include: ['material-menu-overlay'] }
-);

package/theme/material/vaadin-combo-box-item-styles.js

@@ -1,35 +0,0 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/font-icons.js';
-import '@vaadin/vaadin-material-styles/typography.js';
-import '@vaadin/vaadin-item/theme/material/vaadin-item.js';
-
-registerStyles(
-  'vaadin-combo-box-item',
-  css`
-    :host {
-      cursor: pointer;
-      -webkit-tap-highlight-color: transparent;
-      padding: 4px 10px;
-      min-height: 36px;
-      font-size: var(--material-small-font-size);
-      --_material-item-selected-icon-display: block;
-    }
-
-    :host(:hover) {
-      background-color: var(--material-secondary-background-color);
-    }
-
-    :host([focused]) {
-      background-color: var(--material-divider-color);
-    }
-
-    @media (pointer: coarse) {
-      :host(:hover),
-      :host([focused]) {
-        background-color: transparent;
-      }
-    }
-  `,
-  { moduleId: 'material-combo-box-item', include: ['material-item'] }
-);

package/theme/material/vaadin-combo-box-styles.js

@@ -1,25 +0,0 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import '@vaadin/vaadin-text-field/theme/material/vaadin-text-field.js';
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/font-icons.js';
-import '@vaadin/vaadin-material-styles/mixins/field-button.js';
-
-registerStyles(
-  'vaadin-combo-box',
-  css`
-    :host {
-      display: inline-flex;
-      outline: none;
-      -webkit-tap-highlight-color: transparent;
-    }
-
-    [part='toggle-button']::before {
-      content: var(--material-icons-dropdown);
-    }
-
-    :host([opened]) [part='toggle-button'] {
-      transform: rotate(180deg);
-    }
-  `,
-  { moduleId: 'material-combo-box', include: ['material-field-button'] }
-);