@vaadin/select - npm Package Compare versions

Comparing version 23.1.0-alpha1 to 23.1.0-alpha2

package.json

 {
   "name": "@vaadin/select",
-  "version": "23.1.0-alpha1",
+  "version": "23.1.0-alpha2",
   "publishConfig": {
@@ -37,17 +37,17 @@ "access": "public"
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/button": "23.1.0-alpha1",
-    "@vaadin/component-base": "23.1.0-alpha1",
-    "@vaadin/field-base": "23.1.0-alpha1",
-    "@vaadin/input-container": "23.1.0-alpha1",
-    "@vaadin/item": "23.1.0-alpha1",
-    "@vaadin/list-box": "23.1.0-alpha1",
-    "@vaadin/vaadin-list-mixin": "23.1.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha1",
-    "@vaadin/vaadin-material-styles": "23.1.0-alpha1",
-    "@vaadin/vaadin-overlay": "23.1.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha1"
+    "@vaadin/button": "23.1.0-alpha2",
+    "@vaadin/component-base": "23.1.0-alpha2",
+    "@vaadin/field-base": "23.1.0-alpha2",
+    "@vaadin/input-container": "23.1.0-alpha2",
+    "@vaadin/item": "23.1.0-alpha2",
+    "@vaadin/list-box": "23.1.0-alpha2",
+    "@vaadin/vaadin-list-mixin": "23.1.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha2",
+    "@vaadin/vaadin-material-styles": "23.1.0-alpha2",
+    "@vaadin/vaadin-overlay": "23.1.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "23.1.0-alpha1",
+    "@vaadin/polymer-legacy-adapter": "23.1.0-alpha2",
     "@vaadin/testing-helpers": "^0.3.2",
@@ -57,3 +57,3 @@ "lit": "^2.0.0",
   },
-  "gitHead": "5d0cdee069f866037c507265fafb4d0476795333"
+  "gitHead": "6842dcb8b163d4512fae8d3d12a6559077a4aee6"
 }

src/vaadin-select-value-button.js

@@ -6,52 +6,73 @@ /**
  */
-import { Button } from '@vaadin/button/src/vaadin-button.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-registerStyles(
-  'vaadin-select-value-button',
-  css`
-    :host {
-      margin: 0;
-      min-width: 0;
-      width: 0;
-      height: auto;
-    }
-
-    ::slotted(:not([slot])) {
-      padding-left: 0;
-      padding-right: 0;
-      flex: auto;
-    }
-
-    /* placeholder styles */
-    ::slotted(:not([slot]):not([selected])) {
-      line-height: 1;
-    }
-
-    /* TODO: unsupported selector */
-    .vaadin-button-container {
-      text-align: inherit;
-    }
-
-    [part='label'] {
-      width: 100%;
-      padding: 0;
-      line-height: inherit;
-    }
-  `,
-  { moduleId: 'vaadin-select-value-button-styles' }
-);
-
 /**
  * An element used internally by `<vaadin-select>`. Not intended to be used separately.
  *
- * @extends Button
+ * @extends HTMLElement
+ * @mixes ButtonMixin
+ * @mixes ThemableMixin
  * @protected
  */
-class SelectValueButton extends Button {
+class SelectValueButton extends ButtonMixin(ThemableMixin(PolymerElement)) {
   static get is() {
     return 'vaadin-select-value-button';
   }
+
+  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;
+          min-width: 0;
+          width: 0;
+        }
+
+        ::slotted(*) {
+          padding-left: 0;
+          padding-right: 0;
+          flex: auto;
+        }
+
+        /* placeholder styles */
+        ::slotted(*:not([selected])) {
+          line-height: 1;
+        }
+
+        .vaadin-button-container {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          text-align: inherit;
+          width: 100%;
+          height: 100%;
+          min-height: inherit;
+          text-shadow: inherit;
+        }
+
+        [part='label'] {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          width: 100%;
+          line-height: inherit;
+        }
+      </style>
+      <div class="vaadin-button-container">
+        <span part="label">
+          <slot></slot>
+        </span>
+      </div>
+    `;
+  }
 }
 
 customElements.define(SelectValueButton.is, SelectValueButton);

src/vaadin-select.js

@@ -145,3 +145,2 @@ /**
           flex-grow: 1;
-          background-color: transparent;
         }
@@ -148,0 +147,0 @@ </style>

theme/lumo/vaadin-select-styles.js

@@ -51,3 +51,3 @@ /**
   :host([theme~='small']) [part='input-field'] ::slotted([slot='value']) {
-    --lumo-button-size: var(--lumo-size-s);
+    --_lumo-selected-item-height: var(--lumo-size-s);
     --_lumo-selected-item-padding: 0;
@@ -63,17 +63,11 @@ }
     :host {
+      font-family: var(--lumo-font-family);
+      font-size: var(--lumo-font-size-m);
       padding: 0 0.25em;
+      --_lumo-selected-item-height: var(--lumo-size-m);
       --_lumo-selected-item-padding: 0.5em;
     }
 
-    :host::before,
-    :host::after {
-      display: none;
-    }
-
-    :host([focus-ring]) {
-      box-shadow: none;
-    }
-
-    ::slotted(:not([slot])) {
-      min-height: var(--lumo-button-size);
+    ::slotted(*) {
+      min-height: var(--_lumo-selected-item-height);
       padding-top: var(--_lumo-selected-item-padding);
@@ -83,3 +77,3 @@ padding-bottom: var(--_lumo-selected-item-padding);
 
-    ::slotted(:not([slot]):hover) {
+    ::slotted(*:hover) {
       background-color: transparent;
@@ -86,0 +80,0 @@ }

theme/lumo/vaadin-select.js

@@ -6,3 +6,2 @@ /**
  */
-import '@vaadin/button/theme/lumo/vaadin-button.js';
 import '@vaadin/input-container/theme/lumo/vaadin-input-container.js';
@@ -9,0 +8,0 @@ import '@vaadin/item/theme/lumo/vaadin-item.js';

theme/material/vaadin-select-styles.js

@@ -52,8 +52,3 @@ /**
 
-    :host::before,
-    :host::after {
-      display: none;
-    }
-
-    ::slotted(:not([slot])) {
+    ::slotted(*) {
       font: inherit;
@@ -63,3 +58,3 @@ padding: 4px 0;
 
-    ::slotted(:not([slot]):hover) {
+    ::slotted(*:hover) {
       background-color: transparent;
@@ -66,0 +61,0 @@ }

theme/material/vaadin-select.js

@@ -6,3 +6,2 @@ /**
  */
-import '@vaadin/button/theme/material/vaadin-button.js';
 import '@vaadin/input-container/theme/material/vaadin-input-container.js';
@@ -9,0 +8,0 @@ import '@vaadin/item/theme/material/vaadin-item.js';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

57248

increased by0.93%

Lines of code

1234

increased by0.82%

Dependency changes

• + Added@vaadin/button@23.1.0-alpha2(transitive)

• + Added@vaadin/component-base@23.1.0-alpha2(transitive)

• + Added@vaadin/field-base@23.1.0-alpha2(transitive)

• + Added@vaadin/icon@23.1.0-alpha2(transitive)

• + Added@vaadin/input-container@23.1.0-alpha2(transitive)

• + Added@vaadin/item@23.1.0-alpha2(transitive)

• + Added@vaadin/list-box@23.1.0-alpha2(transitive)

• + Added@vaadin/vaadin-list-mixin@23.1.0-alpha2(transitive)

• + Added@vaadin/vaadin-lumo-styles@23.1.0-alpha2(transitive)

• + Added@vaadin/vaadin-material-styles@23.1.0-alpha2(transitive)

• + Added@vaadin/vaadin-overlay@23.1.0-alpha2(transitive)

• + Added@vaadin/vaadin-themable-mixin@23.1.0-alpha2(transitive)

• - Removed@vaadin/button@23.1.0-alpha1(transitive)

• - Removed@vaadin/component-base@23.1.0-alpha1(transitive)

• - Removed@vaadin/field-base@23.1.0-alpha1(transitive)

• - Removed@vaadin/icon@23.1.0-alpha1(transitive)

• - Removed@vaadin/input-container@23.1.0-alpha1(transitive)

• - Removed@vaadin/item@23.1.0-alpha1(transitive)

• - Removed@vaadin/list-box@23.1.0-alpha1(transitive)

• - Removed@vaadin/vaadin-list-mixin@23.1.0-alpha1(transitive)

• - Removed@vaadin/vaadin-lumo-styles@23.1.0-alpha1(transitive)

• - Removed@vaadin/vaadin-material-styles@23.1.0-alpha1(transitive)

• - Removed@vaadin/vaadin-overlay@23.1.0-alpha1(transitive)

• - Removed@vaadin/vaadin-themable-mixin@23.1.0-alpha1(transitive)

• Updated@vaadin/button@23.1.0-alpha2

• Updated@vaadin/component-base@23.1.0-alpha2

• Updated@vaadin/field-base@23.1.0-alpha2

• Updated@vaadin/input-container@23.1.0-alpha2

• Updated@vaadin/item@23.1.0-alpha2

• Updated@vaadin/list-box@23.1.0-alpha2

• Updated@vaadin/vaadin-list-mixin@23.1.0-alpha2

• Updated@vaadin/vaadin-lumo-styles@23.1.0-alpha2

• Updated@vaadin/vaadin-material-styles@23.1.0-alpha2

• Updated@vaadin/vaadin-overlay@23.1.0-alpha2

• Updated@vaadin/vaadin-themable-mixin@23.1.0-alpha2