@vaadin/horizontal-layout - npm Package Compare versions

Comparing version 22.0.0-alpha6 to 22.0.0-alpha7

package.json

 {
   "name": "@vaadin/horizontal-layout",
-  "version": "22.0.0-alpha6",
+  "version": "22.0.0-alpha7",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "vaadin-horizontal-layout",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vaadin/web-components.git",
+    "directory": "packages/horizontal-layout"
+  },
+  "author": "Vaadin Ltd",
+  "homepage": "https://vaadin.com/components",
+  "bugs": {
+    "url": "https://github.com/vaadin/web-components/issues"
+  },
   "main": "vaadin-horizontal-layout.js",
   "module": "vaadin-horizontal-layout.js",
-  "repository": "vaadin/web-components",
+  "files": [
+    "src",
+    "theme",
+    "vaadin-*.d.ts",
+    "vaadin-*.js"
+  ],
   "keywords": [
@@ -15,20 +34,8 @@ "Vaadin",
   ],
-  "author": "Vaadin Ltd",
-  "license": "Apache-2.0",
-  "bugs": {
-    "url": "https://github.com/vaadin/web-components/issues"
-  },
-  "homepage": "https://vaadin.com/components",
-  "files": [
-    "vaadin-*.d.ts",
-    "vaadin-*.js",
-    "src",
-    "theme"
-  ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-element-mixin": "^22.0.0-alpha6",
-    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha6",
-    "@vaadin/vaadin-material-styles": "^22.0.0-alpha6",
-    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha6"
+    "@vaadin/component-base": "22.0.0-alpha7",
+    "@vaadin/vaadin-lumo-styles": "22.0.0-alpha7",
+    "@vaadin/vaadin-material-styles": "22.0.0-alpha7",
+    "@vaadin/vaadin-themable-mixin": "22.0.0-alpha7"
   },
@@ -39,6 +46,3 @@ "devDependencies": {
   },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "4b136b1c7da8942960e7255f40c27859125b3a45"
+  "gitHead": "8e89419c6b44a1d225d5859e180d7b35e47ddb52"
 }

src/vaadin-horizontal-layout.d.ts

@@ -0,5 +1,9 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-
 /**
@@ -25,10 +29,10 @@ * `<vaadin-horizontal-layout>` provides a simple way to horizontally align your HTML elements.
  */
-declare class HorizontalLayoutElement extends ThemableMixin(ElementMixin(HTMLElement)) {}
+declare class HorizontalLayout extends ThemableMixin(ElementMixin(HTMLElement)) {}
 
 declare global {
   interface HTMLElementTagNameMap {
-    'vaadin-horizontal-layout': HorizontalLayoutElement;
+    'vaadin-horizontal-layout': HorizontalLayout;
   }
 }
 
-export { HorizontalLayoutElement };
+export { HorizontalLayout };

src/vaadin-horizontal-layout.js

@@ -7,4 +7,4 @@ /**
 import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
 
@@ -35,3 +35,3 @@ /**
  */
-class HorizontalLayoutElement extends ElementMixin(ThemableMixin(PolymerElement)) {
+class HorizontalLayout extends ElementMixin(ThemableMixin(PolymerElement)) {
   static get template() {
@@ -58,22 +58,5 @@ return html`
 
-        :host([theme~='spacing']:not([dir='rtl'])) ::slotted(*) {
-          margin-left: 1em;
+        :host([theme~='spacing']) {
+          gap: 1em;
         }
-
-        :host([theme~='spacing'][dir='rtl']) ::slotted(*) {
-          margin-right: 1em;
-        }
-
-        /* Compensate for the first item margin, so that there is no gap around the layout itself. */
-        :host([theme~='spacing'])::before {
-          content: '';
-        }
-
-        :host([theme~='spacing']:not([dir='rtl']))::before {
-          margin-left: -1em;
-        }
-
-        :host([theme~='spacing'][dir='rtl'])::before {
-          margin-right: -1em;
-        }
       </style>
@@ -90,4 +73,4 @@
 
-customElements.define(HorizontalLayoutElement.is, HorizontalLayoutElement);
+customElements.define(HorizontalLayout.is, HorizontalLayout);
 
-export { HorizontalLayoutElement };
+export { HorizontalLayout };

theme/lumo/vaadin-horizontal-layout-styles.js

@@ -13,94 +13,23 @@ import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 
-  :host([theme~='spacing-xs']:not([dir='rtl'])) ::slotted(*) {
-    margin-left: var(--lumo-space-xs);
+  :host([theme~='spacing-xs']) {
+    gap: var(--lumo-space-xs);
   }
 
-  :host([theme~='spacing-s']:not([dir='rtl'])) ::slotted(*) {
-    margin-left: var(--lumo-space-s);
+  :host([theme~='spacing-s']) {
+    gap: var(--lumo-space-s);
   }
 
-  :host([theme~='spacing']:not([dir='rtl'])) ::slotted(*) {
-    margin-left: var(--lumo-space-m);
+  :host([theme~='spacing']) {
+    gap: var(--lumo-space-m);
   }
 
-  :host([theme~='spacing-l']:not([dir='rtl'])) ::slotted(*) {
-    margin-left: var(--lumo-space-l);
+  :host([theme~='spacing-l']) {
+    gap: var(--lumo-space-l);
   }
 
-  :host([theme~='spacing-xl']:not([dir='rtl'])) ::slotted(*) {
-    margin-left: var(--lumo-space-xl);
+  :host([theme~='spacing-xl']) {
+    gap: var(--lumo-space-xl);
   }
-
-  /* Compensate for the first item margin, so that there is no gap around the layout itself. */
-  :host([theme~='spacing-xs'])::before,
-  :host([theme~='spacing-s'])::before,
-  :host([theme~='spacing'])::before,
-  :host([theme~='spacing-l'])::before,
-  :host([theme~='spacing-xl'])::before {
-    content: '';
-  }
-
-  :host([theme~='spacing-xs']:not([dir='rtl']))::before {
-    margin-left: calc(var(--lumo-space-xs) * -1);
-  }
-
-  :host([theme~='spacing-s']:not([dir='rtl']))::before {
-    margin-left: calc(var(--lumo-space-s) * -1);
-  }
-
-  :host([theme~='spacing']:not([dir='rtl']))::before {
-    margin-left: calc(var(--lumo-space-m) * -1);
-  }
-
-  :host([theme~='spacing-l']:not([dir='rtl']))::before {
-    margin-left: calc(var(--lumo-space-l) * -1);
-  }
-
-  :host([theme~='spacing-xl']:not([dir='rtl']))::before {
-    margin-left: calc(var(--lumo-space-xl) * -1);
-  }
-
-  /* RTL styles */
-  :host([dir='rtl'][theme~='spacing-xs']) ::slotted(*) {
-    margin-right: var(--lumo-space-xs);
-  }
-
-  :host([dir='rtl'][theme~='spacing-s']) ::slotted(*) {
-    margin-right: var(--lumo-space-s);
-  }
-
-  :host([dir='rtl'][theme~='spacing']) ::slotted(*) {
-    margin-right: var(--lumo-space-m);
-  }
-
-  :host([dir='rtl'][theme~='spacing-l']) ::slotted(*) {
-    margin-right: var(--lumo-space-l);
-  }
-
-  :host([dir='rtl'][theme~='spacing-xl']) ::slotted(*) {
-    margin-right: var(--lumo-space-xl);
-  }
-
-  /* Compensate for the first item margin, so that there is no gap around the layout itself. */
-  :host([dir='rtl'][theme~='spacing-xs'])::before {
-    margin-right: calc(var(--lumo-space-xs) * -1);
-  }
-
-  :host([dir='rtl'][theme~='spacing-s'])::before {
-    margin-right: calc(var(--lumo-space-s) * -1);
-  }
-
-  :host([dir='rtl'][theme~='spacing'])::before {
-    margin-right: calc(var(--lumo-space-m) * -1);
-  }
-
-  :host([dir='rtl'][theme~='spacing-l'])::before {
-    margin-right: calc(var(--lumo-space-l) * -1);
-  }
-
-  :host([dir='rtl'][theme~='spacing-xl'])::before {
-    margin-right: calc(var(--lumo-space-xl) * -1);
-  }
 `;
 
 registerStyles('vaadin-horizontal-layout', horizontalLayout, { moduleId: 'lumo-horizontal-layout' });

theme/material/vaadin-horizontal-layout-styles.js

@@ -12,94 +12,23 @@ import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 
-  :host([theme~='spacing-xs']:not([dir='rtl'])) ::slotted(*) {
-    margin-left: 4px;
+  :host([theme~='spacing-xs']) {
+    gap: 4px;
   }
 
-  :host([theme~='spacing-s']:not([dir='rtl'])) ::slotted(*) {
-    margin-left: 8px;
+  :host([theme~='spacing-s']) {
+    gap: 8px;
   }
 
-  :host([theme~='spacing']:not([dir='rtl'])) ::slotted(*) {
-    margin-left: 16px;
+  :host([theme~='spacing']) {
+    gap: 16px;
   }
 
-  :host([theme~='spacing-l']:not([dir='rtl'])) ::slotted(*) {
-    margin-left: 24px;
+  :host([theme~='spacing-l']) {
+    gap: 24px;
   }
 
-  :host([theme~='spacing-xl']:not([dir='rtl'])) ::slotted(*) {
-    margin-left: 40px;
+  :host([theme~='spacing-xl']) {
+    gap: 40px;
   }
-
-  /* Compensate for the first item margin, so that there is no gap around the layout itself. */
-  :host([theme~='spacing-xs'])::before,
-  :host([theme~='spacing-s'])::before,
-  :host([theme~='spacing'])::before,
-  :host([theme~='spacing-l'])::before,
-  :host([theme~='spacing-xl'])::before {
-    content: '';
-  }
-
-  :host([theme~='spacing-xs']:not([dir='rtl']))::before {
-    margin-left: -4px;
-  }
-
-  :host([theme~='spacing-s']:not([dir='rtl']))::before {
-    margin-left: -8px;
-  }
-
-  :host([theme~='spacing']:not([dir='rtl']))::before {
-    margin-left: -16px;
-  }
-
-  :host([theme~='spacing-l']:not([dir='rtl']))::before {
-    margin-left: -24px;
-  }
-
-  :host([theme~='spacing-xl']:not([dir='rtl']))::before {
-    margin-left: -40px;
-  }
-
-  /* RTL styles */
-  :host([dir='rtl'][theme~='spacing-xs']) ::slotted(*) {
-    margin-right: 4px;
-  }
-
-  :host([dir='rtl'][theme~='spacing-s']) ::slotted(*) {
-    margin-right: 8px;
-  }
-
-  :host([dir='rtl'][theme~='spacing']) ::slotted(*) {
-    margin-right: 16px;
-  }
-
-  :host([dir='rtl'][theme~='spacing-l']) ::slotted(*) {
-    margin-right: 24px;
-  }
-
-  :host([dir='rtl'][theme~='spacing-xl']) ::slotted(*) {
-    margin-right: 40px;
-  }
-
-  /* Compensate for the first item margin, so that there is no gap around the layout itself. */
-  :host([dir='rtl'][theme~='spacing-xs'])::before {
-    margin-right: -4px;
-  }
-
-  :host([dir='rtl'][theme~='spacing-s'])::before {
-    margin-right: -8px;
-  }
-
-  :host([dir='rtl'][theme~='spacing'])::before {
-    margin-right: -16px;
-  }
-
-  :host([dir='rtl'][theme~='spacing-l'])::before {
-    margin-right: -24px;
-  }
-
-  :host([dir='rtl'][theme~='spacing-xl'])::before {
-    margin-right: -40px;
-  }
 `;
 
 registerStyles('vaadin-horizontal-layout', horizontalLayout, { moduleId: 'material-horizontal-layout' });

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

18369

decreased by-19.37%

Lines of code

155

decreased by-43.22%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@vaadin/component-base@22.0.0-alpha7

• + Added@vaadin/component-base@22.0.0-alpha7(transitive)

• + Added@vaadin/icon@22.0.0-alpha7(transitive)

• + Added@vaadin/vaadin-lumo-styles@22.0.0-alpha7(transitive)

• + Added@vaadin/vaadin-material-styles@22.0.0-alpha7(transitive)

• + Added@vaadin/vaadin-themable-mixin@22.0.0-alpha7(transitive)

• - Removed@vaadin/vaadin-element-mixin@^22.0.0-alpha6

• - Removed@open-wc/dedupe-mixin@1.4.0(transitive)

• - Removed@vaadin/component-base@22.1.0(transitive)

• - Removed@vaadin/icon@22.1.0(transitive)

• - Removed@vaadin/vaadin-element-mixin@22.0.0-alpha6(transitive)

• - Removed@vaadin/vaadin-lumo-styles@22.1.0(transitive)

• - Removed@vaadin/vaadin-material-styles@22.1.0(transitive)

• - Removed@vaadin/vaadin-themable-mixin@22.1.0(transitive)

• Updated@vaadin/vaadin-lumo-styles@22.0.0-alpha7

• Updated@vaadin/vaadin-material-styles@22.0.0-alpha7

• Updated@vaadin/vaadin-themable-mixin@22.0.0-alpha7