Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@vaadin/vaadin-form-layout

Package Overview
Dependencies
Maintainers
16
Versions
247
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vaadin/vaadin-form-layout - npm Package Compare versions

Comparing version 2.3.0 to 3.0.0-alpha1

src/interfaces.d.ts

84

package.json
{
"description": "Polymer element providing configurable responsive layout for form elements",
"name": "@vaadin/vaadin-form-layout",
"version": "3.0.0-alpha1",
"description": "Web component providing configurable responsive layout for form elements",
"main": "vaadin-form-layout.js",
"module": "vaadin-form-layout.js",
"repository": "vaadin/vaadin-form-layout",
"keywords": [

@@ -10,7 +15,2 @@ "Vaadin",

],
"repository": "vaadin/vaadin-form-layout",
"homepage": "https://vaadin.com/components",
"name": "@vaadin/vaadin-form-layout",
"version": "2.3.0",
"main": "vaadin-form-layout.js",
"author": "Vaadin Ltd",

@@ -21,15 +21,37 @@ "license": "Apache-2.0",

},
"homepage": "https://vaadin.com/components",
"files": [
"vaadin-*.d.ts",
"vaadin-*.js",
"@types",
"src",
"theme"
],
"resolutions": {
"inherits": "2.0.3",
"samsam": "1.1.3",
"supports-color": "3.1.2",
"type-detect": "1.0.0"
"scripts": {
"analyze": "polymer analyze vaadin-* > analysis.json",
"check-version": "magi check-version",
"debug": "web-test-runner test/*.test.js --watch",
"dist": "rimraf dist && npm run analyze && rollup -c rollup.config.js && cp analysis.json dist",
"lint": "npm run lint:js && npm run lint:css",
"lint:css": "stylelint src/*.js theme/**/*-styles.js",
"lint:js": "eslint src theme test",
"screenshots": "hermione test/visual/test.js --update-refs",
"prestart": "npm run analyze",
"preversion": "magi update-version",
"serve:dist": "web-dev-server --app-index dist/index.html --open",
"start": "web-dev-server --node-resolve --open",
"test": "web-test-runner test/*.test.js --coverage",
"test:sauce": "TEST_ENV=sauce npm test",
"test:visual": "hermione test/visual/test.js"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": [
"eslint --fix",
"prettier --write"
]
},
"dependencies": {

@@ -39,20 +61,34 @@ "@polymer/iron-resizable-behavior": "^3.0.0",

"@vaadin/vaadin-themable-mixin": "^1.6.1",
"@vaadin/vaadin-lumo-styles": "^1.6.0",
"@vaadin/vaadin-lumo-styles": "^1.6.1",
"@vaadin/vaadin-material-styles": "^1.3.2",
"@vaadin/vaadin-element-mixin": "^2.4.1"
},
"scripts": {
"generate-typings": "gen-typescript-declarations --outDir . --verify"
},
"devDependencies": {
"@esm-bundle/chai": "^4.1.5",
"@open-wc/rollup-plugin-html": "^1.2.5",
"@open-wc/testing-helpers": "^1.8.12",
"@polymer/iron-component-page": "^4.0.0",
"@polymer/iron-demo-helpers": "^3.0.0",
"@polymer/paper-input": "^3.0.0",
"@vaadin/vaadin-text-field": "^2.6.0",
"@vaadin/vaadin-date-picker": "^4.1.0",
"@webcomponents/webcomponentsjs": "^2.0.0",
"wct-browser-legacy": "^1.0.1",
"@vaadin/vaadin-demo-helpers": "^3.1.0",
"@vaadin/vaadin-ordered-layout": "^1.3.0"
"@vaadin/vaadin-ordered-layout": "^1.3.0",
"@vaadin/vaadin-text-field": "^3.0.0-alpha1",
"@web/dev-server": "^0.1.4",
"@web/test-runner": "^0.12.2",
"@web/test-runner-saucelabs": "^0.4.0",
"eslint": "^7.18.0",
"eslint-config-prettier": "^6.15.0",
"eslint-plugin-prettier": "^3.1.4",
"hermione": "^3.9.0",
"hermione-esm": "^0.4.0",
"hermione-sauce": "^0.1.0",
"husky": "^4.3.0",
"lint-staged": "^10.5.1",
"magi-cli": "^0.28.0",
"prettier": "^2.2.0",
"rimraf": "^3.0.2",
"rollup": "^2.34.1",
"rollup-plugin-terser": "^7.0.2",
"sinon": "^9.2.1",
"stylelint": "^13.8.0",
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-vaadin": "^0.2.10"
}
}

88

README.md

@@ -1,11 +0,1 @@

[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-form-layout)](https://www.npmjs.com/package/@vaadin/vaadin-form-layout)
[![Bower version](https://badgen.net/github/release/vaadin/vaadin-form-layout)](https://github.com/vaadin/vaadin-form-layout/releases)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-form-layout)
[![Build Status](https://travis-ci.org/vaadin/vaadin-form-layout.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-form-layout)
[![Coverage Status](https://coveralls.io/repos/github/vaadin/vaadin-form-layout/badge.svg?branch=master)](https://coveralls.io/github/vaadin/vaadin-form-layout?branch=master)
[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-form-layout)
[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadinvaadin-form-layout.svg)](https://vaadin.com/directory/component/vaadinvaadin-form-layout)
# <vaadin-form-layout>

@@ -19,14 +9,9 @@

<!--
```
<custom-element-demo height="150">
<template>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="vaadin-form-layout.html">
<link rel="import" href="../vaadin-text-field/vaadin-text-field.html">
<next-code-block></next-code-block>
</template>
</custom-element-demo>
```
-->
[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-form-layout)](https://www.npmjs.com/package/@vaadin/vaadin-form-layout)
[![Build Status](https://travis-ci.org/vaadin/vaadin-form-layout.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-form-layout)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-form-layout)
[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-form-layout)
[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadinvaadin-form-layout.svg)](https://vaadin.com/directory/component/vaadinvaadin-form-layout)
[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
```html

@@ -44,27 +29,5 @@ <vaadin-form-layout>

The Vaadin components are distributed as Bower and npm packages.
Please note that the version range is the same, as the API has not changed.
You should not mix Bower and npm versions in the same application, though.
Unlike the official Polymer Elements, the converted Polymer 3 compatible Vaadin components
are only published on npm, not pushed to GitHub repositories.
### Polymer 2 and HTML Imports Compatible Version
Install `vaadin-form-layout`:
```sh
bower i vaadin/vaadin-form-layout --save
```
Once installed, import it in your application:
```html
<link rel="import" href="bower_components/vaadin-form-layout/vaadin-form-layout.html">
```
### Polymer 3 and ES Modules Compatible Version
Install `vaadin-form-layout`:
```sh
npm i @vaadin/vaadin-form-layout --save

@@ -89,31 +52,31 @@ ```

`theme/lumo/vaadin-form-layout.html`
`theme/lumo/vaadin-form-item.html`
`theme/lumo/vaadin-form-layout.js`
`theme/lumo/vaadin-form-item.js`
- The components with the Material theme:
`theme/material/vaadin-form-layout.html`
`theme/material/vaadin-form-item.html`
`theme/material/vaadin-form-layout.js`
`theme/material/vaadin-form-item.js`
- Alias for `theme/lumo/vaadin-form-layout.html`
`theme/lumo/vaadin-form-item.html`:
- Alias for `theme/lumo/vaadin-form-layout.js`
`theme/lumo/vaadin-form-item.js`:
`vaadin-form-layout.html`
`vaadin-form-item.html`
`vaadin-form-layout.js`
`vaadin-form-item.js`
## Running API docs and tests in a browser
## Running demos and tests in a browser
1. Fork the `vaadin-form-layout` repository and clone it locally.
1. Make sure you have [npm](https://www.npmjs.com/) and [Bower](https://bower.io) installed.
1. Make sure you have [node.js](https://nodejs.org/) 12.x installed.
1. When in the `vaadin-form-layout` directory, run `npm install` and then `bower install` to install dependencies.
1. Make sure you have [npm](https://www.npmjs.com/) installed.
1. When in the `vaadin-form-layout` directory, run `npm install` to install dependencies.
1. Run `npm start`, browser will automatically open the component API documentation.
1. You can also open demo or in-browser tests by adding **demo** or **test** to the URL, for example:
1. You can also open visual tests, for example:
- http://127.0.0.1:3000/components/vaadin-form-layout/demo
- http://127.0.0.1:3000/components/vaadin-form-layout/test
- http://127.0.0.1:3000/test/visual/basic.html

@@ -123,8 +86,11 @@

1. When in the `vaadin-form-layout` directory, run `polymer test`
1. When in the `vaadin-form-layout` directory, run `npm test`
## Debugging tests in the browser
1. Run `npm run debug`, then choose manual mode (M) and open the link in browser.
## Following the coding style
We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.js` files as well as JavaScript snippets inside `.html` files.
We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.js` files.

@@ -131,0 +97,0 @@

49

src/vaadin-form-item.d.ts

@@ -1,20 +0,3 @@

/**
* DO NOT EDIT
*
* This file was automatically generated by
* https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
*
* To modify these typings, edit the source file(s):
* src/vaadin-form-item.js
*/
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
// tslint:disable:variable-name Describing an API that's defined elsewhere.
import {PolymerElement} from '@polymer/polymer/polymer-element.js';
import {ThemableMixin} from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
/**

@@ -87,18 +70,8 @@ * `<vaadin-form-item>` is a Web Component providing labelled form item wrapper

*
* <pre><code>
* &lt;dom-module id="my-form-item-theme" theme-for="vaadin-form-item"&gt;
* &lt;template&gt;
* &lt;style&gt;
* :host {
* /&#42; default state styles, label aside &#42;/
* }
* ```
* :host([label-position="top"]) {
* padding-top: 0.5rem;
* }
* ```
*
* :host([label-position="top"]) {
* /&#42; label on top state styles &#42;/
* }
* &lt;/style&gt;
* &lt;/template&gt;
* &lt;/dom-module&gt;
* </code></pre>
*
* The following shadow DOM parts are available for styling:

@@ -123,14 +96,10 @@ *

*/
declare class FormItemElement extends
ThemableMixin(
PolymerElement) {
}
declare class FormItemElement extends ThemableMixin(HTMLElement) {}
declare global {
interface HTMLElementTagNameMap {
"vaadin-form-item": FormItemElement;
'vaadin-form-item': FormItemElement;
}
}
export {FormItemElement};
export { FormItemElement };

140

src/vaadin-form-item.js
/**
@license
Copyright (c) 2017 Vaadin Ltd.
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
* @license
* Copyright (c) 2021 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
/**

@@ -77,18 +76,8 @@ * `<vaadin-form-item>` is a Web Component providing labelled form item wrapper

*
* <pre><code>
* &lt;dom-module id="my-form-item-theme" theme-for="vaadin-form-item"&gt;
* &lt;template&gt;
* &lt;style&gt;
* :host {
* /&#42; default state styles, label aside &#42;/
* }
* ```
* :host([label-position="top"]) {
* padding-top: 0.5rem;
* }
* ```
*
* :host([label-position="top"]) {
* /&#42; label on top state styles &#42;/
* }
* &lt;/style&gt;
* &lt;/template&gt;
* &lt;/dom-module&gt;
* </code></pre>
*
* The following shadow DOM parts are available for styling:

@@ -113,5 +102,4 @@ *

*
* @extends PolymerElement
* @extends HTMLElement
* @mixes ThemableMixin
* @demo demo/index.html
*/

@@ -121,57 +109,57 @@ class FormItemElement extends ThemableMixin(PolymerElement) {

return html`
<style>
:host {
display: inline-flex;
flex-direction: row;
align-items: baseline;
<style>
:host {
display: inline-flex;
flex-direction: row;
align-items: baseline;
/* CSS API for host */
--vaadin-form-item-label-width: 8em;
--vaadin-form-item-label-spacing: 1em;
--vaadin-form-item-row-spacing: 1em;
/* CSS API for host */
--vaadin-form-item-label-width: 8em;
--vaadin-form-item-label-spacing: 1em;
--vaadin-form-item-row-spacing: 1em;
margin: calc(0.5 * var(--vaadin-form-item-row-spacing)) 0;
}
margin: calc(0.5 * var(--vaadin-form-item-row-spacing)) 0;
}
:host([label-position="top"]) {
flex-direction: column;
align-items: stretch;
}
:host([label-position='top']) {
flex-direction: column;
align-items: stretch;
}
:host([hidden]) {
display: none !important;
}
:host([hidden]) {
display: none !important;
}
#label {
width: var(--vaadin-form-item-label-width);
flex: 0 0 auto;
}
#label {
width: var(--vaadin-form-item-label-width);
flex: 0 0 auto;
}
:host([label-position="top"]) #label {
width: auto;
}
:host([label-position='top']) #label {
width: auto;
}
#spacing {
width: var(--vaadin-form-item-label-spacing);
flex: 0 0 auto;
}
#spacing {
width: var(--vaadin-form-item-label-spacing);
flex: 0 0 auto;
}
#content {
flex: 1 1 auto;
}
#content {
flex: 1 1 auto;
}
#content ::slotted(.full-width) {
box-sizing: border-box;
width: 100%;
min-width: 0;
}
</style>
<div id="label" part="label" on-click="_onLabelClick">
<slot name="label" id="labelSlot"></slot>
</div>
<div id="spacing"></div>
<div id="content">
<slot id="contentSlot"></slot>
</div>
`;
#content ::slotted(.full-width) {
box-sizing: border-box;
width: 100%;
min-width: 0;
}
</style>
<div id="label" part="label" on-click="_onLabelClick">
<slot name="label" id="labelSlot"></slot>
</div>
<div id="spacing"></div>
<div id="content">
<slot id="contentSlot"></slot>
</div>
`;
}

@@ -183,14 +171,8 @@

static get properties() {
return {
};
}
/** @private */
_onLabelClick(e) {
// No `Array.prototype.find` in MSIE, using `filter` instead :-(
const firstContentElementChild = Array.prototype.filter.call(
_onLabelClick() {
const firstContentElementChild = Array.prototype.find.call(
this.$.contentSlot.assignedNodes(),
(e) => e.nodeType === Node.ELEMENT_NODE
)[0];
);
if (firstContentElementChild) {

@@ -197,0 +179,0 @@ firstContentElementChild.focus();

47

src/vaadin-form-layout.d.ts

@@ -1,30 +0,7 @@

/**
* DO NOT EDIT
*
* This file was automatically generated by
* https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
*
* To modify these typings, edit the source file(s):
* src/vaadin-form-layout.js
*/
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
// tslint:disable:variable-name Describing an API that's defined elsewhere.
import { FormLayoutResponsiveStep } from './interfaces';
import {PolymerElement} from '@polymer/polymer/polymer-element.js';
import {FlattenedNodesObserver} from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
import {IronResizableBehavior} from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
import {ThemableMixin} from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import {ElementMixin} from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
import {beforeNextRender} from '@polymer/polymer/lib/utils/render-status.js';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
/**

@@ -120,7 +97,3 @@ * `<vaadin-form-layout>` is a Web Component providing configurable responsive

*/
declare class FormLayoutElement extends
ElementMixin(
ThemableMixin(
PolymerElement)) {
declare class FormLayoutElement extends ElementMixin(ThemableMixin(HTMLElement)) {
/**

@@ -164,5 +137,2 @@ * Allows specifying a responsive behavior with the number of columns

responsiveSteps: FormLayoutResponsiveStep[];
ready(): void;
connectedCallback(): void;
disconnectedCallback(): void;

@@ -172,14 +142,11 @@ /**

*/
updateStyles(properties?: {[key: string]: string}): void;
updateStyles(properties?: { [key: string]: string }): void;
}
declare global {
interface HTMLElementTagNameMap {
"vaadin-form-layout": FormLayoutElement;
'vaadin-form-layout': FormLayoutElement;
}
}
export {FormLayoutElement};
import {FormLayoutResponsiveStep} from '../@types/interfaces';
export { FormLayoutElement };

184

src/vaadin-form-layout.js
/**
@license
Copyright (c) 2017 Vaadin Ltd.
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
* @license
* Copyright (c) 2021 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import { beforeNextRender } from '@polymer/polymer/lib/utils/render-status.js';
import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';

@@ -12,5 +13,3 @@ import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';

import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { beforeNextRender } from '@polymer/polymer/lib/utils/render-status.js';
import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
/**

@@ -106,59 +105,55 @@ * `<vaadin-form-layout>` is a Web Component providing configurable responsive

*
* @extends PolymerElement
* @extends HTMLElement
* @mixes ElementMixin
* @mixes ThemableMixin
* @demo demo/index.html
*/
class FormLayoutElement extends
ElementMixin(
ThemableMixin(
mixinBehaviors([IronResizableBehavior], PolymerElement))) {
class FormLayoutElement extends ElementMixin(ThemableMixin(mixinBehaviors([IronResizableBehavior], PolymerElement))) {
static get template() {
return html`
<style>
:host {
display: block;
max-width: 100%;
animation: 1ms vaadin-form-layout-appear;
/* CSS API for host */
--vaadin-form-layout-column-spacing: 2em; /* (default) */
align-self: stretch;
}
<style>
:host {
display: block;
max-width: 100%;
animation: 1ms vaadin-form-layout-appear;
/* CSS API for host */
--vaadin-form-layout-column-spacing: 2em; /* (default) */
align-self: stretch;
}
@keyframes vaadin-form-layout-appear {
to {
opacity: 1 !important; /* stylelint-disable-line keyframe-declaration-no-important */
@keyframes vaadin-form-layout-appear {
to {
opacity: 1 !important; /* stylelint-disable-line keyframe-declaration-no-important */
}
}
}
:host([hidden]) {
display: none !important;
}
:host([hidden]) {
display: none !important;
}
#layout {
display: flex;
#layout {
display: flex;
align-items: baseline; /* default \`stretch\` is not appropriate */
align-items: baseline; /* default \`stretch\` is not appropriate */
flex-wrap: wrap; /* the items should wrap */
}
flex-wrap: wrap; /* the items should wrap */
}
#layout ::slotted(*) {
/* Items should neither grow nor shrink. */
flex-grow: 0;
flex-shrink: 0;
#layout ::slotted(*) {
/* Items should neither grow nor shrink. */
flex-grow: 0;
flex-shrink: 0;
/* Margins make spacing between the columns */
margin-left: calc(0.5 * var(--vaadin-form-layout-column-spacing));
margin-right: calc(0.5 * var(--vaadin-form-layout-column-spacing));
}
/* Margins make spacing between the columns */
margin-left: calc(0.5 * var(--vaadin-form-layout-column-spacing));
margin-right: calc(0.5 * var(--vaadin-form-layout-column-spacing));
}
#layout ::slotted(br) {
display: none;
}
</style>
<div id="layout">
<slot id="slot"></slot>
</div>
`;
#layout ::slotted(br) {
display: none;
}
</style>
<div id="layout">
<slot id="slot"></slot>
</div>
`;
}

@@ -171,3 +166,3 @@

static get version() {
return '2.3.0';
return '3.0.0-alpha1';
}

@@ -226,7 +221,7 @@

type: Array,
value: function() {
value: function () {
return [
{minWidth: 0, columns: 1, labelsPosition: 'top'},
{minWidth: '20em', columns: 1},
{minWidth: '40em', columns: 2}
{ minWidth: 0, columns: 1, labelsPosition: 'top' },
{ minWidth: '20em', columns: 1 },
{ minWidth: '40em', columns: 2 }
];

@@ -256,5 +251,3 @@ },

static get observers() {
return [
'_invokeUpdateStyles(_columnCount, _labelsOnTop)'
];
return ['_invokeUpdateStyles(_columnCount, _labelsOnTop)'];
}

@@ -273,7 +266,2 @@

this._styleElement.textContent = ' ';
if (window.ShadyDOM) {
// With ShadyDOM, setting textContent attaches text content nodes
// asynchronously, but we need it right away.
window.ShadyDOM.flush();
}

@@ -307,10 +295,11 @@ super.ready();

// Observe changes in form items' `colspan` attribute and update styles
const mutationObserverConfig = {attributes: true};
const mutationObserverConfig = { attributes: true };
this.__mutationObserver = new MutationObserver(mutationRecord => {
mutationRecord.forEach(mutation => {
if (mutation.type === 'attributes'
&& ((mutation.attributeName === 'colspan')
|| (mutation.attributeName === 'hidden'))) {
this._invokeUpdateStyles();
this.__mutationObserver = new MutationObserver((mutationRecord) => {
mutationRecord.forEach((mutation) => {
if (
mutation.type === 'attributes' &&
(mutation.attributeName === 'colspan' || mutation.attributeName === 'hidden')
) {
this.updateStyles();
}

@@ -320,7 +309,7 @@ });

this.__childObserver = new FlattenedNodesObserver(this, info => {
this.__childObserver = new FlattenedNodesObserver(this, (info) => {
const addedNodes = this._getObservableNodes(info.addedNodes);
const removedNodes = this._getObservableNodes(info.removedNodes);
addedNodes.forEach(child => {
addedNodes.forEach((child) => {
this.__mutationObserver.observe(child, mutationObserverConfig);

@@ -330,3 +319,3 @@ });

if (addedNodes.length > 0 || removedNodes.length > 0) {
this._invokeUpdateStyles();
this.updateStyles();
}

@@ -339,4 +328,5 @@ });

const ignore = ['template', 'style', 'dom-repeat', 'dom-if'];
return Array.from(nodeList)
.filter(node => node.nodeType === Node.ELEMENT_NODE && ignore.indexOf(node.localName.toLowerCase()) === -1);
return Array.from(nodeList).filter(
(node) => node.nodeType === Node.ELEMENT_NODE && ignore.indexOf(node.localName.toLowerCase()) === -1
);
}

@@ -391,3 +381,3 @@

responsiveSteps.forEach(step => {
responsiveSteps.forEach((step) => {
if (this._naturalNumberOrOne(step.columns) !== step.columns) {

@@ -402,3 +392,5 @@ throw new Error(`Invalid 'columns' value of ${step.columns}, a natural number is required.`);

if (step.labelsPosition !== undefined && ['aside', 'top'].indexOf(step.labelsPosition) === -1) {
throw new Error(`Invalid 'labelsPosition' value of ${step.labelsPosition}, 'aside' or 'top' string is required.`);
throw new Error(
`Invalid 'labelsPosition' value of ${step.labelsPosition}, 'aside' or 'top' string is required.`
);
}

@@ -413,5 +405,5 @@ });

this.responsiveSteps = [
{minWidth: 0, columns: 1, labelsPosition: 'top'},
{minWidth: '20em', columns: 1},
{minWidth: '40em', columns: 2}
{ minWidth: 0, columns: 1, labelsPosition: 'top' },
{ minWidth: '20em', columns: 1 },
{ minWidth: '40em', columns: 2 }
];

@@ -436,3 +428,3 @@ }

const tmpStyleProp = 'background-position';
this.responsiveSteps.forEach(step => {
this.responsiveSteps.forEach((step) => {
// Convert minWidth to px units for comparison

@@ -456,9 +448,2 @@ this.$.layout.style.setProperty(tmpStyleProp, step.minWidth);

}
if (/\b(Edge|Trident)\//.test(navigator.userAgent)) {
if (this.offsetWidth !== this._lastOffsetWidth) {
this.updateStyles(); // force breaks sizes update in IE and Edge
this._lastOffsetWidth = this.offsetWidth;
}
}
}

@@ -488,7 +473,6 @@

const columnSpacing = window.ShadyCSS
? window.ShadyCSS.getComputedStyleValue(this, '--vaadin-form-layout-column-spacing')
: getComputedStyle(this).getPropertyValue('--vaadin-form-layout-column-spacing');
const style = getComputedStyle(this);
const columnSpacing = style.getPropertyValue('--vaadin-form-layout-column-spacing');
const direction = getComputedStyle(this).direction;
const direction = style.direction;
const marginStartProp = 'margin-' + (direction === 'ltr' ? 'left' : 'right');

@@ -499,9 +483,5 @@ const marginEndProp = 'margin-' + (direction === 'ltr' ? 'right' : 'left');

if (window.ShadyDOM) {
window.ShadyDOM.flush(); // `getComputedStyle` below needs that
}
let col = 0;
Array.from(this.children)
.filter(child => child.localName === 'br' || getComputedStyle(child).display !== 'none')
.filter((child) => child.localName === 'br' || getComputedStyle(child).display !== 'none')
.forEach((child, index, children) => {

@@ -531,3 +511,2 @@ if (child.localName === 'br') {

// At the start edge

@@ -548,3 +527,6 @@ if (col === 0) {

const colspanRatio = (this._columnCount - col - colspan) / this._columnCount;
child.style.setProperty(marginEndProp, `calc(${colspanRatio * containerWidth}px + ${colspanRatio} * ${columnSpacing})`);
child.style.setProperty(
marginEndProp,
`calc(${colspanRatio * containerWidth}px + ${colspanRatio} * ${columnSpacing})`
);
} else {

@@ -551,0 +533,0 @@ child.style.removeProperty(marginEndProp);

46

theme/lumo/vaadin-form-item-styles.js

@@ -0,1 +1,2 @@

import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import '@vaadin/vaadin-lumo-styles/color.js';

@@ -5,27 +6,24 @@ import '@vaadin/vaadin-lumo-styles/spacing.js';

import '@vaadin/vaadin-lumo-styles/typography.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
const $_documentContainer = html`<dom-module id="lumo-form-item" theme-for="vaadin-form-item">
<template>
<style>
:host {
--vaadin-form-item-row-spacing: 0;
}
registerStyles(
'vaadin-form-item',
css`
:host {
--vaadin-form-item-row-spacing: 0;
}
/* font-weight, margin-bottom, transition and line-height same values as for part label in text-field */
[part="label"] {
color: var(--lumo-secondary-text-color);
font-family: var(--lumo-font-family);
font-size: var(--lumo-font-size-s);
font-weight: 500;
margin-top: var(--lumo-space-m);
margin-left: calc(var(--lumo-border-radius) / 4);
margin-bottom: var(--lumo-space-xs);
transition: color 0.4s;
line-height: 1.333;
}
</style>
</template>
</dom-module>`;
document.head.appendChild($_documentContainer.content);
/* font-weight, margin-bottom, transition and line-height same as for part label in text-field */
[part='label'] {
color: var(--lumo-secondary-text-color);
font-family: var(--lumo-font-family);
font-size: var(--lumo-font-size-s);
font-weight: 500;
margin-top: var(--lumo-space-m);
margin-left: calc(var(--lumo-border-radius) / 4);
margin-bottom: var(--lumo-space-xs);
transition: color 0.4s;
line-height: 1.333;
}
`,
{ moduleId: 'lumo-form-item' }
);

22

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

@@ -0,14 +1,12 @@

import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import '@vaadin/vaadin-lumo-styles/spacing.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
const $_documentContainer = html`<dom-module id="lumo-form-layout" theme-for="vaadin-form-layout">
<template>
<style>
:host {
--vaadin-form-layout-column-spacing: var(--lumo-space-l);
}
</style>
</template>
</dom-module>`;
document.head.appendChild($_documentContainer.content);
registerStyles(
'vaadin-form-layout',
css`
:host {
--vaadin-form-layout-column-spacing: var(--lumo-space-l);
}
`,
{ moduleId: 'lumo-form-layout' }
);

34

theme/material/vaadin-form-item-styles.js

@@ -0,21 +1,19 @@

import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import '@vaadin/vaadin-material-styles/color.js';
import '@vaadin/vaadin-material-styles/typography.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
const $_documentContainer = html`<dom-module id="material-form-item" theme-for="vaadin-form-item">
<template>
<style>
[part="label"] {
font-family: var(--material-font-family);
font-size: var(--material-small-font-size);
color: var(--material-secondary-text-color);
line-height: 16px;
font-weight: 400;
margin-top: 16px;
margin-bottom: 8px;
}
</style>
</template>
</dom-module>`;
document.head.appendChild($_documentContainer.content);
registerStyles(
'vaadin-form-item',
css`
[part='label'] {
font-family: var(--material-font-family);
font-size: var(--material-small-font-size);
color: var(--material-secondary-text-color);
line-height: 16px;
font-weight: 400;
margin-top: 16px;
margin-bottom: 8px;
}
`,
{ moduleId: 'material-form-item' }
);

1

theme/material/vaadin-form-layout.js

@@ -1,2 +0,1 @@

import './vaadin-form-layout-styles.js';
import '../../src/vaadin-form-layout.js';

13

vaadin-form-item.d.ts

@@ -1,14 +0,1 @@

/**
* DO NOT EDIT
*
* This file was automatically generated by
* https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
*
* To modify these typings, edit the source file(s):
* vaadin-form-item.js
*/
// tslint:disable:variable-name Describing an API that's defined elsewhere.
export * from './src/vaadin-form-item.js';

15

vaadin-form-layout.d.ts

@@ -1,15 +0,2 @@

/**
* DO NOT EDIT
*
* This file was automatically generated by
* https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
*
* To modify these typings, edit the source file(s):
* vaadin-form-layout.js
*/
// tslint:disable:variable-name Describing an API that's defined elsewhere.
export * from './src/vaadin-form-layout.js';
export * from './@types/interfaces';
export * from './src/interfaces';
./@types/interfaces.d.ts
theme/material/vaadin-form-layout-styles.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc