diff --git a/flow-components-parent/flow-generated-components/json_metadata/vaadin-button.json b/flow-components-parent/flow-generated-components/json_metadata/vaadin-button.json index 0ab6873be92..6be56931212 100644 --- a/flow-components-parent/flow-generated-components/json_metadata/vaadin-button.json +++ b/flow-components-parent/flow-generated-components/json_metadata/vaadin-button.json @@ -35,5 +35,20 @@ "Vaadin.ThemableMixin", "Polymer.GestureEventListeners" ], + "variants": { + "lumo": [ + [ + "small", + "large", + "tertiary", + "tertiary-inline", + "primary", + "success", + "error", + "contrast", + "icon" + ] + ] + }, "description": "`` is a Polymer 2 element providing an accessible and customizable button.\n\n```html\n\n\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n----------------|----------------\n`label` | The label (text) inside the button\n`prefix` | A slot for e.g. an icon before the label\n`suffix` | A slot for e.g. an icon after the label\n\n\nThe following attributes are exposed for styling:\n\nAttribute | Description\n--------- | -----------\n`active` | Set when the button is pressed down, either with mouse, touch or the keyboard.\n`disabled` | Set when the button is disabled.\n`focus-ring` | Set when the button is focused using the keyboard.\n`focused` | Set when the button is focused.\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)" } diff --git a/flow-components-parent/flow-generated-components/json_metadata/vaadin-checkbox.json b/flow-components-parent/flow-generated-components/json_metadata/vaadin-checkbox.json index da4728d5c10..0c03abaa092 100644 --- a/flow-components-parent/flow-generated-components/json_metadata/vaadin-checkbox.json +++ b/flow-components-parent/flow-generated-components/json_metadata/vaadin-checkbox.json @@ -83,5 +83,6 @@ "Vaadin.ThemableMixin", "Polymer.GestureEventListeners" ], + "variants": {}, "description": "`` is a Polymer 2 element for customized checkboxes.\n\n```html\n\n Make my profile visible\n\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n------------------|----------------\n`checkbox` | The checkbox element\n`label` | The label content element\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------|------------\n`active` | Set when the checkbox is pressed down, either with mouse, touch or the keyboard.\n`disabled` | Set when the checkbox is disabled.\n`focus-ring` | Set when the checkbox is focused using the keyboard.\n`focused` | Set when the checkbox is focused.\n`indeterminate` | Set when the checkbox is in indeterminate mode.\n`checked` | Set when the checkbox is checked.\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)" } diff --git a/flow-components-parent/flow-generated-components/json_metadata/vaadin-combo-box-dropdown-wrapper.json b/flow-components-parent/flow-generated-components/json_metadata/vaadin-combo-box-dropdown-wrapper.json index 5bf50d8cb7b..b60e6f70d64 100644 --- a/flow-components-parent/flow-generated-components/json_metadata/vaadin-combo-box-dropdown-wrapper.json +++ b/flow-components-parent/flow-generated-components/json_metadata/vaadin-combo-box-dropdown-wrapper.json @@ -91,5 +91,6 @@ "slots": [], "behaviors": [], "mixins": [], + "variants": {}, "description": "Element for internal use only." } diff --git a/flow-components-parent/flow-generated-components/json_metadata/vaadin-combo-box-dropdown.json b/flow-components-parent/flow-generated-components/json_metadata/vaadin-combo-box-dropdown.json index 83b513a52f6..9c396457d66 100644 --- a/flow-components-parent/flow-generated-components/json_metadata/vaadin-combo-box-dropdown.json +++ b/flow-components-parent/flow-generated-components/json_metadata/vaadin-combo-box-dropdown.json @@ -94,5 +94,6 @@ ], "behaviors": [], "mixins": [], + "variants": {}, "description": "Element for internal use only." } diff --git a/flow-components-parent/flow-generated-components/json_metadata/vaadin-combo-box-item.json b/flow-components-parent/flow-generated-components/json_metadata/vaadin-combo-box-item.json index 31eaa22de3c..297efd39e92 100644 --- a/flow-components-parent/flow-generated-components/json_metadata/vaadin-combo-box-item.json +++ b/flow-components-parent/flow-generated-components/json_metadata/vaadin-combo-box-item.json @@ -60,5 +60,6 @@ "mixins": [ "Vaadin.ThemableMixin" ], + "variants": {}, "description": "The default element used for items in the vaadin-combo-box.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---|---\n`content` | The element that wraps the item label or template content\n\nThe following state attributes are exposed for styling:\n\nAttribute | Description | Part name\n-------------|-------------|------------\n`selected` | Set when the item is selected | :host\n`focused` | Set when the item is focused | :host\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)" } diff --git a/flow-components-parent/flow-generated-components/json_metadata/vaadin-combo-box-light.json b/flow-components-parent/flow-generated-components/json_metadata/vaadin-combo-box-light.json index ca4c9744eff..6503dede8c7 100644 --- a/flow-components-parent/flow-generated-components/json_metadata/vaadin-combo-box-light.json +++ b/flow-components-parent/flow-generated-components/json_metadata/vaadin-combo-box-light.json @@ -257,5 +257,6 @@ "Vaadin.ComboBoxMixin", "Vaadin.ThemableMixin" ], + "variants": {}, "description": "`` is a customizable version of the `` providing\nonly the dropdown functionality and leaving the input field definition to the user.\n\nThe element has the same API as ``.\n\nTo create a custom input field, you need to add a child element which has a two-way\ndata-bindable property representing the input value. The property name is expected\nto be `value` by default. See the example below for a simplest possible example\nusing a `` element.\n\n```html\n\n \n \n\n```\n\nIf you are using other custom input fields like ``, you\nneed to define the name of the bindable property with the `attrForValue` attribute.\n\n```html\n\n \n \n \n\n```\n\nIn the next example you can see how to create a custom input field based\non a `` decorated with a custom `` and\ntwo ``s to act as the clear and toggle controls.\n\n```html\n\n \n \n Clear\n Toggle\n \n\n```" } diff --git a/flow-components-parent/flow-generated-components/json_metadata/vaadin-combo-box-overlay.json b/flow-components-parent/flow-generated-components/json_metadata/vaadin-combo-box-overlay.json index b98d360ed14..328239976aa 100644 --- a/flow-components-parent/flow-generated-components/json_metadata/vaadin-combo-box-overlay.json +++ b/flow-components-parent/flow-generated-components/json_metadata/vaadin-combo-box-overlay.json @@ -133,5 +133,6 @@ "slots": [], "behaviors": [], "mixins": [], + "variants": {}, "description": "The overlay element.\n\n### Styling\n\nSee [`` documentation](https://github.com/vaadin/vaadin-overlay/blob/master/src/vaadin-overlay.html)\nfor `` parts.\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)" } diff --git a/flow-components-parent/flow-generated-components/json_metadata/vaadin-combo-box.json b/flow-components-parent/flow-generated-components/json_metadata/vaadin-combo-box.json index e22eabf1548..5e0976adde4 100644 --- a/flow-components-parent/flow-generated-components/json_metadata/vaadin-combo-box.json +++ b/flow-components-parent/flow-generated-components/json_metadata/vaadin-combo-box.json @@ -298,5 +298,6 @@ "Vaadin.ComboBoxMixin", "Vaadin.ThemableMixin" ], + "variants": {}, "description": "`` is a combo box element combining a dropdown list with an\ninput field for filtering the list of items. If you want to replace the default\ninput field with a custom implementation, you should use the\n[``](#/elements/vaadin-combo-box-light) element.\n\nItems in the dropdown list must be provided as a list of `String` values.\nDefining the items is done using the `items` property, which can be assigned\nwith data-binding, using an attribute or directly with the JavaScript property.\n\n```html\n\n\n```\n\n```js\ncombobox.items = ['apple', 'orange', 'banana'];\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\nThis element can be used within an `iron-form`.\n\n### Item Template\n\n`` supports using custom item template provided in the light\nDOM:\n\n```html\n\n \n\n```\n\nThe following properties are available for item template bindings:\n\nProperty name | Type | Description\n--------------|------|------------\n`index`| Number | Index of the item in the `items` array\n`item` | String or Object | The item reference\n`selected` | Boolean | True when item is selected\n`focused` | Boolean | True when item is focused\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n----------------|-------------|-------------\n`--vaadin-combo-box-overlay-max-height` | Property that determines the max height of overlay | `65vh`\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`text-field` | The text field\n`clear-button` | The clear button\n`toggle-button` | The toggle button\n\nSee [`` documentation](https://github.com/vaadin/vaadin-overlay/blob/master/src/vaadin-overlay.html)\nfor `` parts.\n\nSee [`` documentation](https://vaadin.com/components/vaadin-text-field/html-api/elements/Vaadin.TextFieldElement)\nfor the text field parts.\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n-------------|-------------|------------\n`opened` | Set when the combo box dropdown is open | :host\n`disabled` | Set to a disabled combo box | :host\n`readonly` | Set to a read only combo box | :host\n`has-value` | Set when the element has a value | :host\n`invalid` | Set when the element is invalid | :host\n`focused` | Set when the element is focused | :host\n`focus-ring` | Set when the element is keyboard focused | :host\n`loading` | Set when new items are expected | :host\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)" } diff --git a/flow-components-parent/flow-generated-components/json_metadata/vaadin-date-picker-light.json b/flow-components-parent/flow-generated-components/json_metadata/vaadin-date-picker-light.json index b921d0193ff..aa8a3eaee20 100644 --- a/flow-components-parent/flow-generated-components/json_metadata/vaadin-date-picker-light.json +++ b/flow-components-parent/flow-generated-components/json_metadata/vaadin-date-picker-light.json @@ -148,5 +148,6 @@ "Vaadin.ThemableMixin", "Vaadin.DatePickerMixin" ], + "variants": {}, "description": "`` is a customizable version of the `` providing\nonly the scrollable month calendar view and leaving the input field definition to the user.\n\nTo create a custom input field, you need to add a child element which has a two-way\ndata-bindable property representing the input value. The property name is expected\nto be `bindValue` by default. See the example below for a simplest possible example\nusing an `` element extended with `iron-input`.\n\n```html\n\n \n \n \n\n```\n\nIf you are using other custom input fields like ``, you\nneed to define the name of value property using the `attrForValue` property.\n\n```html\n\n \n \n\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description | Theme for Element\n----------------|----------------|----------------\n`overlay-content` | The overlay element | vaadin-date-picker-light\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)" } diff --git a/flow-components-parent/flow-generated-components/json_metadata/vaadin-date-picker-overlay-content.json b/flow-components-parent/flow-generated-components/json_metadata/vaadin-date-picker-overlay-content.json index 327a62287d4..51a8737ddc5 100644 --- a/flow-components-parent/flow-generated-components/json_metadata/vaadin-date-picker-overlay-content.json +++ b/flow-components-parent/flow-generated-components/json_metadata/vaadin-date-picker-overlay-content.json @@ -166,5 +166,6 @@ "slots": [], "behaviors": [], "mixins": [], + "variants": {}, "description": "" } diff --git a/flow-components-parent/flow-generated-components/json_metadata/vaadin-date-picker-overlay.json b/flow-components-parent/flow-generated-components/json_metadata/vaadin-date-picker-overlay.json index 234d8314b8d..38c4af58886 100644 --- a/flow-components-parent/flow-generated-components/json_metadata/vaadin-date-picker-overlay.json +++ b/flow-components-parent/flow-generated-components/json_metadata/vaadin-date-picker-overlay.json @@ -133,5 +133,6 @@ "slots": [], "behaviors": [], "mixins": [], + "variants": {}, "description": "The overlay element.\n\n### Styling\n\nSee [`` documentation](https://github.com/vaadin/vaadin-overlay/blob/master/src/vaadin-overlay.html)\nfor `` parts.\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)" } diff --git a/flow-components-parent/flow-generated-components/json_metadata/vaadin-date-picker.json b/flow-components-parent/flow-generated-components/json_metadata/vaadin-date-picker.json index 966015a2bee..7a3718f3363 100644 --- a/flow-components-parent/flow-generated-components/json_metadata/vaadin-date-picker.json +++ b/flow-components-parent/flow-generated-components/json_metadata/vaadin-date-picker.json @@ -198,5 +198,6 @@ "Vaadin.DatePickerMixin", "Polymer.GestureEventListeners" ], + "variants": {}, "description": "`` is a date selection field which includes a scrollable\nmonth calendar view.\n```html\n\n```\n```js\ndatePicker.value = '2016-03-02';\n```\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description | Theme for Element\n----------------|----------------|----------------\n`text-field` | Input element | vaadin-date-picker\n`clear-button` | Clear button | vaadin-date-picker\n`toggle-button` | Toggle button | vaadin-date-picker\n`overlay-content` | The overlay element | vaadin-date-picker\n`overlay-header` | Fullscreen mode header | vaadin-date-picker-overlay-content\n`label` | Fullscreen mode value/label | vaadin-date-picker-overlay-content\n`clear-button` | Fullscreen mode clear button | vaadin-date-picker-overlay-content\n`toggle-button` | Fullscreen mode toggle button | vaadin-date-picker-overlay-content\n`years-toggle-button` | Fullscreen mode years scroller toggle | vaadin-date-picker-overlay-content\n`months` | Months scroller | vaadin-date-picker-overlay-content\n`years` | Years scroller | vaadin-date-picker-overlay-content\n`toolbar` | Footer bar with buttons | vaadin-date-picker-overlay-content\n`today-button` | Today button | vaadin-date-picker-overlay-content\n`cancel-button` | Cancel button | vaadin-date-picker-overlay-content\n`month` | Month calendar | vaadin-date-picker-overlay-content\n`year-number` | Year number | vaadin-date-picker-overlay-content\n`year-separator` | Year separator | vaadin-date-picker-overlay-content\n`month-header` | Month title | vaadin-month-calendar\n`weekdays` | Weekday container | vaadin-month-calendar\n`weekday` | Weekday element | vaadin-month-calendar\n`week-numbers` | Week numbers container | vaadin-month-calendar\n`week-number` | Week number element | vaadin-month-calendar\n`date` | Date element | vaadin-month-calendar\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n-------------|-------------|------------\n`invalid` | Set when the element is invalid | :host\n`opened` | Set when the date selector overlay is opened | :host\n`readonly` | Set when the element is readonly | :host\n`disabled` | Set when the element is disabled | :host\n`today` | Set on the date corresponding to the current day | date\n`focused` | Set on the focused date | date\n`disabled` | Set on the date out of the allowed range | date\n`selected` | Set on the selected date | date\n\nIf you want to replace the default input field with a custom implementation, you should use the\n[``](#vaadin-date-picker-light) element." } diff --git a/flow-components-parent/flow-generated-components/json_metadata/vaadin-dialog-overlay.json b/flow-components-parent/flow-generated-components/json_metadata/vaadin-dialog-overlay.json index c3ce1a2d726..fbe2ebe5979 100644 --- a/flow-components-parent/flow-generated-components/json_metadata/vaadin-dialog-overlay.json +++ b/flow-components-parent/flow-generated-components/json_metadata/vaadin-dialog-overlay.json @@ -133,5 +133,6 @@ "slots": [], "behaviors": [], "mixins": [], + "variants": {}, "description": "The overlay element.\n\n### Styling\n\nSee [`` documentation](https://github.com/vaadin/vaadin-overlay/blob/master/src/vaadin-overlay.html)\nfor `` parts." } diff --git a/flow-components-parent/flow-generated-components/json_metadata/vaadin-dialog.json b/flow-components-parent/flow-generated-components/json_metadata/vaadin-dialog.json index 2afef238be0..b09c3274b48 100644 --- a/flow-components-parent/flow-generated-components/json_metadata/vaadin-dialog.json +++ b/flow-components-parent/flow-generated-components/json_metadata/vaadin-dialog.json @@ -49,5 +49,6 @@ "mixins": [ "Vaadin.ElementMixin" ], + "variants": {}, "description": "`` is a Polymer 2 element for customized modal dialogs.\n\n```html\n\n \n\n```\n\n### Styling\n\nSee [`` documentation](https://github.com/vaadin/vaadin-overlay/blob/master/src/vaadin-overlay.html)\nfor `` parts.\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)" } diff --git a/flow-components-parent/flow-generated-components/json_metadata/vaadin-form-item.json b/flow-components-parent/flow-generated-components/json_metadata/vaadin-form-item.json index 6cb1fad085e..cca429d781f 100644 --- a/flow-components-parent/flow-generated-components/json_metadata/vaadin-form-item.json +++ b/flow-components-parent/flow-generated-components/json_metadata/vaadin-form-item.json @@ -14,5 +14,6 @@ "mixins": [ "Vaadin.ThemableMixin" ], + "variants": {}, "description": "`` is a Polymer 2 element providing labelled form item wrapper\nfor using inside ``.\n\n`` accepts any number of children as the input content,\nand also has a separate named `label` slot:\n\n```html\n\n \n \n\n```\n\nAny content can be used. For instance, you can have multiple input elements\nwith surrounding text. The label can be an element of any type:\n\n```html\n\n Date of Birth\n -\n -\n
\n Example: 1900-01-01\n\n```\n\nThe label is optional and can be omitted:\n\n```html\n\n Subscribe to our Newsletter\n\n```\n\nBy default, the `label` slot content is displayed aside of the input content.\nWhen `label-position=\"top\"` is set, the `label` slot content is displayed on top:\n\n```html\n\n \n \n\n```\n\n**Note:** Normally, `` is used as a child of\na `` element. Setting `label-position` is unnecessary,\nbecause the `label-position` attribute is triggered automatically by the parent\n``, depending on its width and responsive behavior.\n\n### Input Width\n\nBy default, `` does not manipulate the width of the slotted\ninput elements. Optionally you can stretch the child input element to fill\nthe available width for the input content by adding the `full-width` class:\n\n```html\n\n \n \n\n```\n\n### Styling\n\nThe `label-position` host attribute can be used to target the label on top state:\n\n
\n<dom-module id=\"my-form-item-theme\" theme-for=\"vaadin-form-item\">\n  <template>\n    <style>\n      :host {\n        /* default state styles, label aside */\n      }\n\n      :host([label-position=\"top\"]) {\n        /* label on top state styles */\n      }\n    </style>\n  </template>\n</dom-module>\n
\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---|---\nlabel | The label slot container\n\n### Custom CSS Properties Reference\n\nThe following custom CSS properties are available on the ``\nelement:\n\nCustom CSS property | Description | Default\n---|---|---\n`--vaadin-form-item-label-width` | Width of the label column when the labels are aside | `8em`\n`--vaadin-form-item-label-spacing` | Spacing between the label column and the input column when the labels are aside | `1em`\n`--vaadin-form-item-row-spacing` | Height of the spacing between the form item elements | `1em`\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)" } diff --git a/flow-components-parent/flow-generated-components/json_metadata/vaadin-form-layout.json b/flow-components-parent/flow-generated-components/json_metadata/vaadin-form-layout.json index 22fbc90181d..50b330b4ba8 100644 --- a/flow-components-parent/flow-generated-components/json_metadata/vaadin-form-layout.json +++ b/flow-components-parent/flow-generated-components/json_metadata/vaadin-form-layout.json @@ -45,5 +45,6 @@ "Vaadin.ElementMixin", "Vaadin.ThemableMixin" ], + "variants": {}, "description": "`` is a Polymer 2 element providing configurable responsive\nlayout for form elements.\n\n```html\n\n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n\n\n```\n\nIt supports any child elements as layout items.\n\nBy default, it makes a layout of two columns if the element width is equal or\nwider than 40em, and a single column layout otherwise.\n\nThe number of columns and the responsive behavior are customizable with\nthe `responsiveSteps` property.\n\n### Spanning Items on Multiple Columns\n\nYou can use `colspan` attribute on the items.\nIn the example below, the first text field spans on two columns:\n\n```html\n\n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n\n\n```\n\n### Explicit New Row\n\nUse the `
` line break element to wrap the items on a new row:\n\n```html\n\n\n \n \n \n \n\n
\n\n \n \n \n \n\n\n```\n\n### CSS Properties Reference\n\nThe following custom CSS properties are available on the ``\nelement:\n\nCustom CSS property | Description | Default\n---|---|---\n`--vaadin-form-layout-column-spacing` | Length of the spacing between columns | `2em`" } diff --git a/flow-components-parent/flow-generated-components/json_metadata/vaadin-infinite-scroller.json b/flow-components-parent/flow-generated-components/json_metadata/vaadin-infinite-scroller.json index 066ff92d5e8..1fe3d59a172 100644 --- a/flow-components-parent/flow-generated-components/json_metadata/vaadin-infinite-scroller.json +++ b/flow-components-parent/flow-generated-components/json_metadata/vaadin-infinite-scroller.json @@ -438,5 +438,6 @@ "slots": [], "behaviors": [], "mixins": [], + "variants": {}, "description": "" } diff --git a/flow-components-parent/flow-generated-components/json_metadata/vaadin-list-box.json b/flow-components-parent/flow-generated-components/json_metadata/vaadin-list-box.json index 4c3160f4945..fb1bf134cca 100644 --- a/flow-components-parent/flow-generated-components/json_metadata/vaadin-list-box.json +++ b/flow-components-parent/flow-generated-components/json_metadata/vaadin-list-box.json @@ -41,5 +41,6 @@ "Vaadin.ListMixin", "Vaadin.ThemableMixin" ], + "variants": {}, "description": "`` is a Polymer 2 element for menus\n\n```\n \n Item 1\n Item 2\n Item 3\n Item 4\n \n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n------------------|------------------------\n`items` | The items container\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)" } diff --git a/flow-components-parent/flow-generated-components/json_metadata/vaadin-month-calendar.json b/flow-components-parent/flow-generated-components/json_metadata/vaadin-month-calendar.json index 1145e8c94b9..9baadf2e853 100644 --- a/flow-components-parent/flow-generated-components/json_metadata/vaadin-month-calendar.json +++ b/flow-components-parent/flow-generated-components/json_metadata/vaadin-month-calendar.json @@ -90,5 +90,6 @@ "slots": [], "behaviors": [], "mixins": [], + "variants": {}, "description": "" } diff --git a/flow-components-parent/flow-generated-components/json_metadata/vaadin-notification-card.json b/flow-components-parent/flow-generated-components/json_metadata/vaadin-notification-card.json index 1ffd3472a8c..73548a0cca4 100644 --- a/flow-components-parent/flow-generated-components/json_metadata/vaadin-notification-card.json +++ b/flow-components-parent/flow-generated-components/json_metadata/vaadin-notification-card.json @@ -13,5 +13,6 @@ "mixins": [ "Vaadin.ThemableMixin" ], + "variants": {}, "description": "The container element for the notification\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`overlay` | The notification container\n`content` | The content of the notification\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)" } diff --git a/flow-components-parent/flow-generated-components/json_metadata/vaadin-notification-container.json b/flow-components-parent/flow-generated-components/json_metadata/vaadin-notification-container.json index 4dabc4d60dd..422a190d13b 100644 --- a/flow-components-parent/flow-generated-components/json_metadata/vaadin-notification-container.json +++ b/flow-components-parent/flow-generated-components/json_metadata/vaadin-notification-container.json @@ -28,5 +28,6 @@ ], "behaviors": [], "mixins": [], + "variants": {}, "description": "The container element for all notifications." } diff --git a/flow-components-parent/flow-generated-components/json_metadata/vaadin-notification.json b/flow-components-parent/flow-generated-components/json_metadata/vaadin-notification.json index b5dfa0dbd1d..ca37e30bb10 100644 --- a/flow-components-parent/flow-generated-components/json_metadata/vaadin-notification.json +++ b/flow-components-parent/flow-generated-components/json_metadata/vaadin-notification.json @@ -54,5 +54,6 @@ "slots": [], "behaviors": [], "mixins": [], + "variants": {}, "description": "`` is a Polymer 2 element providing accessible and customizable notifications (toasts).\n\n```\n\n \n\n```" } diff --git a/flow-components-parent/flow-generated-components/json_metadata/vaadin-password-field.json b/flow-components-parent/flow-generated-components/json_metadata/vaadin-password-field.json index fb27ab645e0..f75875c9bf4 100644 --- a/flow-components-parent/flow-generated-components/json_metadata/vaadin-password-field.json +++ b/flow-components-parent/flow-generated-components/json_metadata/vaadin-password-field.json @@ -27,6 +27,7 @@ "slots": [], "behaviors": [], "mixins": [], + "variants": {}, "description": "`` is a Polymer 2 element for password field control in forms.\n\n```html\n\n\n```\n\n### Styling\n\nSee vaadin-text-field.html for the styling documentation\n\nIn addition to vaadin-text-field parts, here's the list of vaadin-password-field specific parts\n\nPart name | Description\n----------------|----------------------------------------------------\n`reveal-button` | The eye icon which toggles the password visibility\n\nIn addition to vaadin-text-field state attributes, here's the list of vaadin-password-field specific attributes\n\nAttribute | Description | Part name\n-------------|-------------|------------\n`password-visible` | Set when the password is visible | :host\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)", "parentTagName": "vaadin-text-field" } diff --git a/flow-components-parent/flow-generated-components/json_metadata/vaadin-progress-bar.json b/flow-components-parent/flow-generated-components/json_metadata/vaadin-progress-bar.json index cce98469e71..8675a9f75e8 100644 --- a/flow-components-parent/flow-generated-components/json_metadata/vaadin-progress-bar.json +++ b/flow-components-parent/flow-generated-components/json_metadata/vaadin-progress-bar.json @@ -45,5 +45,14 @@ "Vaadin.ProgressMixin", "Vaadin.ThemableMixin" ], + "variants": { + "lumo": [ + [ + "contrast", + "error", + "success" + ] + ] + }, "description": "`` is a Polymer 2 progress bar.\n\n```html\n\n\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`bar` | Progress-bar's background\n`value` | Progress-bar's foreground\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)\n\nThe following custom properties are available:\n\nCustom property | Description | Default\n----------------|-------------|-------------\n`--vaadin-progress-value` | current progress value (between 0 and 1) | 0\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n----------------|-------------|------------\n`indeterminate` | Set to an indeterminate progress bar | :host" } diff --git a/flow-components-parent/flow-generated-components/json_metadata/vaadin-radio-button.json b/flow-components-parent/flow-generated-components/json_metadata/vaadin-radio-button.json index ffd4c08419e..2e6b76b661b 100644 --- a/flow-components-parent/flow-generated-components/json_metadata/vaadin-radio-button.json +++ b/flow-components-parent/flow-generated-components/json_metadata/vaadin-radio-button.json @@ -64,5 +64,6 @@ "Vaadin.ThemableMixin", "Polymer.GestureEventListeners" ], + "variants": {}, "description": "`` is a Polymer element for radio buttons.\n\n```html\nFoo\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n------------------|----------------\n`radio` | The radio button element\n`label` | The label content element\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n-----------|-------------|------------\n`disabled` | Set when the radio button is disabled. | :host\n`focus-ring` | Set when the radio button is focused using the keyboard. | :host\n`focused` | Set when the radio button is focused. | :host\n`checked` | Set when the radio button is checked. | :host\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)" } diff --git a/flow-components-parent/flow-generated-components/json_metadata/vaadin-radio-group.json b/flow-components-parent/flow-generated-components/json_metadata/vaadin-radio-group.json index 09b83b3689b..bd5c8f741dd 100644 --- a/flow-components-parent/flow-generated-components/json_metadata/vaadin-radio-group.json +++ b/flow-components-parent/flow-generated-components/json_metadata/vaadin-radio-group.json @@ -37,5 +37,12 @@ "mixins": [ "Vaadin.ThemableMixin" ], + "variants": { + "lumo": [ + [ + "vertical" + ] + ] + }, "description": "`` is a Polymer element for grouping vaadin-radio-buttons.\n\n```html\n\n Foo\n Bar\n Baz\n\n```\n\n### Styling\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n-----------|-------------|------------\n`disabled` | Set when the radio group and its children are disabled. | :host\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)" } diff --git a/flow-components-parent/flow-generated-components/json_metadata/vaadin-split-layout.json b/flow-components-parent/flow-generated-components/json_metadata/vaadin-split-layout.json index 213e320d610..36847d9aac1 100644 --- a/flow-components-parent/flow-generated-components/json_metadata/vaadin-split-layout.json +++ b/flow-components-parent/flow-generated-components/json_metadata/vaadin-split-layout.json @@ -36,5 +36,13 @@ "Vaadin.ThemableMixin", "Polymer.GestureEventListeners" ], + "variants": { + "lumo": [ + [ + "small", + "minimal" + ] + ] + }, "description": "`` is a Polymer element implementing a split layout for two\ncontent elements with a draggable splitter between them.\n\n```html\n\n
First content element
\n
Second content element
\n\n```\n\n### Horizontal and Vertical Layouts\n\nBy default, the split's orientation is horizontal, meaning that the content elements are\npositioned side by side in a flex container with a horizontal layout.\n\nYou can change the split mode to vertical by setting the `orientation` attribute to `\"vertical\"`:\n\n```html\n\n
Content on the top
\n
Content on the bottom
\n\n```\n\n### Layouts Combination\n\nFor the layout contents, we usually use `
` elements in the examples,\nalthough you can use any other elements as well.\n\nFor instance, in order to have a nested vertical split layout inside a\nhorizontal one, you can include `` as a content element\ninside another split layout:\n\n```html\n\n
First content element
\n \n
Second content element
\n
Third content element
\n \n\n```\n\nYou can also trigger the vertical mode in JavaScript by setting the property:\n`splitLayout.orientation = \"vertical\";`.\n\n### Split Layout Element Height\n\n`` element itself is a flex container. It does not inherit\nthe parent height by default, but rather sets its height depending on the\ncontent.\n\nYou can use CSS to set the fixed height for the split layout, as usual with any\nblock element:\n\n```html\n\n
First content element
\n
Second content element
\n\n```\n\nIt is possible to define percentage height as well. Note that you have to set\nthe parent height in order to make percentages work correctly. In the following\nexample, the `` is resized to fill the entire viewport, and the\n`` element is set to take 100% height of the ``:\n\n```html\n\n \n
First
\n
Second
\n \n\n```\n\nAlternatively, you can use a flexbox layout to make ``\nfill up the parent:\n\n```html\n\n \n
First
\n
Second
\n \n\n```\n\n### Initial Splitter Position\n\nThe initial splitter position is determined from the sizes of the content elements\ninside the split layout. Therefore, changing `width` on the content elements\naffects the initial splitter position for the horizontal layouts, while `height`\naffects the vertical ones.\n\nNote that when the total size of the content elements does not fit the layout,\nthe content elements are scaled proportionally.\n\nWhen setting initial sizes with relative units, such as percentages, it is\nrecommended to assign the size for both content elements:\n\n```html\n\n
Three fourths
\n
One fourth
\n\n```\n\n### Size Limits\n\nThe `min-width`/`min-height`, and `max-width`/`max-height` CSS size values\nfor the content elements are respected and used to limit the splitter position\nwhen it is dragged.\n\nIt is preferred to set the limits only for a single content element, in order\nto avoid size conflicts:\n\n```html\n\n
First
\n
Second
\n\n```\n\n### Resize Notification\n\nThis element implements `IronResizableBehavior` to notify the nested resizables\nwhen the splitter is dragged. In order to define a resizable and receive that\nnotification in a nested element, include `IronResizableBehavior` and listen\nfor the `iron-resize` event.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description | Theme for Element\n----------------|----------------|----------------\n`splitter` | Split element | vaadin-split-layout\n`handle` | The handle of the splitter | vaadin-split-layout\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)" } diff --git a/flow-components-parent/flow-generated-components/json_metadata/vaadin-tab.json b/flow-components-parent/flow-generated-components/json_metadata/vaadin-tab.json index a0eab3c618b..25828588e39 100644 --- a/flow-components-parent/flow-generated-components/json_metadata/vaadin-tab.json +++ b/flow-components-parent/flow-generated-components/json_metadata/vaadin-tab.json @@ -40,5 +40,12 @@ "Vaadin.ThemableMixin", "Vaadin.ItemMixin" ], + "variants": { + "lumo": [ + [ + "icon-on-top" + ] + ] + }, "description": "`` is a Polymer 2 element providing an accessible and customizable tab.\n\n```\n \n Tab 1\n \n```\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n-----------|-------------|------------\n`disabled` | Set to a disabled tab | :host\n`focused` | Set when the element is focused | :host\n`focus-ring` | Set when the element is keyboard focused | :host\n`selected` | Set when the tab is selected | :host\n`active` | Set when mousedown or enter/spacebar pressed | :host\n`orientation` | Set to `horizontal` or `vertical` depending on the direction of items | :host\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)" } diff --git a/flow-components-parent/flow-generated-components/json_metadata/vaadin-tabs.json b/flow-components-parent/flow-generated-components/json_metadata/vaadin-tabs.json index cb5826aec08..16fcaa4d857 100644 --- a/flow-components-parent/flow-generated-components/json_metadata/vaadin-tabs.json +++ b/flow-components-parent/flow-generated-components/json_metadata/vaadin-tabs.json @@ -49,5 +49,15 @@ "Vaadin.ListMixin", "Vaadin.ThemableMixin" ], + "variants": { + "lumo": [ + [ + "small", + "minimal", + "hide-scroll-buttons", + "equal-width-tabs" + ] + ] + }, "description": "`` is a Polymer 2 element for easy switching between different view\n\n```\n \n Page 1\n Page 2\n Page 3\n Page 4\n \n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n------------------|--------------------------------------\n`back-button` | Button for moving the scroll back\n`tabs` | The tabs container\n`forward-button` | Button for moving the scroll forward\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n-----------|-------------|------------\n`orientation` | Tabs disposition, valid values are `horizontal` and `vertical`. | :host\n`overflow` | It's set to `start`, `end`, none or both. | :host\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)" } diff --git a/flow-components-parent/flow-generated-components/json_metadata/vaadin-text-area.json b/flow-components-parent/flow-generated-components/json_metadata/vaadin-text-area.json index 037f25ba71b..95d31664a3b 100644 --- a/flow-components-parent/flow-generated-components/json_metadata/vaadin-text-area.json +++ b/flow-components-parent/flow-generated-components/json_metadata/vaadin-text-area.json @@ -166,5 +166,6 @@ "Vaadin.ThemableMixin", "Vaadin.ControlStateMixin" ], + "variants": {}, "description": "`` is a Polymer 2 element for text area control in forms.\n\n```html\n\n\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and suffix\n`value` | The text value element inside the `input-field` element\n`error-message` | The error message element\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n-------------|-------------|------------\n`disabled` | Set to a disabled text field | :host\n`has-value` | Set when the element has a value | :host\n`has-label` | Set when the element has a label | :host\n`invalid` | Set when the element is invalid | :host\n`focused` | Set when the element is focused | :host\n`focus-ring` | Set when the element is keyboard focused | :host\n`readonly` | Set to a readonly text field | :host\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)" } diff --git a/flow-components-parent/flow-generated-components/json_metadata/vaadin-text-field.json b/flow-components-parent/flow-generated-components/json_metadata/vaadin-text-field.json index c54b27712c5..a3d22a034f5 100644 --- a/flow-components-parent/flow-generated-components/json_metadata/vaadin-text-field.json +++ b/flow-components-parent/flow-generated-components/json_metadata/vaadin-text-field.json @@ -190,5 +190,14 @@ "Vaadin.ThemableMixin", "Vaadin.ControlStateMixin" ], + "variants": { + "lumo": [ + [ + "small", + "align-center", + "align-right" + ] + ] + }, "description": "`` is a Polymer 2 element for text field control in forms.\n\n```html\n\n\n```\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n----------------|-------------|-------------\n`--vaadin-text-field-default-width` | Set the default width of the input field | `12em`\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and suffix\n`value` | The text value element inside the `input-field` element\n`error-message` | The error message element\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n-------------|-------------|------------\n`disabled` | Set to a disabled text field | :host\n`has-value` | Set when the element has a value | :host\n`has-label` | Set when the element has a label | :host\n`invalid` | Set when the element is invalid | :host\n`focused` | Set when the element is focused | :host\n`focus-ring` | Set when the element is keyboard focused | :host\n`readonly` | Set to a readonly text field | :host\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)" } diff --git a/flow-components-parent/flow-generated-components/json_metadata/vaadin-upload-file.json b/flow-components-parent/flow-generated-components/json_metadata/vaadin-upload-file.json index 82fdddc1339..57c4918555f 100644 --- a/flow-components-parent/flow-generated-components/json_metadata/vaadin-upload-file.json +++ b/flow-components-parent/flow-generated-components/json_metadata/vaadin-upload-file.json @@ -109,5 +109,6 @@ "mixins": [ "Vaadin.ThemableMixin" ], + "variants": {}, "description": "`` element represents a file in the file list of ``.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---|---\n`row` | File container\n`info` | Container for file status icon, file name, status and error messages\n`done-icon` | File done status icon\n`warning-icon` | File warning status icon\n`meta` | Container for file name, status and error messages\n`name` | File name\n`error` | Error message, shown when error happens\n`status` | Status message\n`commands` | Container for file command icons\n`start-button` | Start file upload button\n`retry-button` | Retry file upload button\n`clear-button` | Clear file button\n`progress`| Progress bar\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n---|---|---\n`error` | An error has happened during uploading | `progress`\n`indeterminate` | Uploading is in progress, but the progress value is unknown | `progress`\n`uploading` | Uploading is in progress | `progress`\n`complete` | Uploading has finished successfully | `progress`\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)" } diff --git a/flow-components-parent/flow-generated-components/json_metadata/vaadin-upload.json b/flow-components-parent/flow-generated-components/json_metadata/vaadin-upload.json index c4f2c275799..1ac5242eb8d 100644 --- a/flow-components-parent/flow-generated-components/json_metadata/vaadin-upload.json +++ b/flow-components-parent/flow-generated-components/json_metadata/vaadin-upload.json @@ -484,5 +484,6 @@ "mixins": [ "Vaadin.ThemableMixin" ], + "variants": {}, "description": "`` is a Polymer 2 element for uploading multiple files with drag and drop support.\n\nExample:\n\n```\n\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---|---\n`primary-buttons` | Upload container\n`upload-button` | Upload button\n`drop-label` | Label for drop indicator\n`drop-label-icon` | Icon for drop indicator\n`file-list` | File list container\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n---|---|---\n`nodrop` | Set when drag and drop is disabled (e. g., on touch devices) | `:host`\n`dragover` | A file is being dragged over the element | `:host`\n`dragover-valid` | A dragged file is valid with `maxFiles` and `accept` criteria | `:host`\n\nSee [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)" } diff --git a/flow-components-parent/flow-webcomponent-api-analyzer/gulpfile.js b/flow-components-parent/flow-webcomponent-api-analyzer/gulpfile.js index ae38fe825e2..6e5f9bc0928 100644 --- a/flow-components-parent/flow-webcomponent-api-analyzer/gulpfile.js +++ b/flow-components-parent/flow-webcomponent-api-analyzer/gulpfile.js @@ -17,6 +17,7 @@ const gulp = require('gulp'); const fs = require('fs-extra'); +const path = require('path'); const globalVar = require('./lib/js/global-variables'); const ElementFilter = require('./lib/js/element-filter'); const VersionReader = require('./lib/js/version-transform'); @@ -24,8 +25,11 @@ const MixinCollector = require('./lib/js/mixin-collector'); const AnalyzerTransform = require('./lib/js/analyzer-transform'); const ElementJsonTransform = require('./lib/js/element-json-transform'); const gulpIgnore = require('gulp-ignore'); +const through = require('through2'); -gulp.task('generate', function() { +const variantsData = {}; + +gulp.task('prepare', cb => { if (!fs.existsSync(globalVar.bowerSrcDir) || fs.readdirSync(globalVar.bowerSrcDir).length === 0) { console.error(`Source directory ${globalVar.bowerSrcDir} does not exists or empty`); process.exit(1) @@ -33,7 +37,48 @@ gulp.task('generate', function() { console.log(`Cleaning output directory ${globalVar.targetDir}`); fs.removeSync(globalVar.targetDir); + cb(); +}); + +gulp.task('gather-variants-data', ['prepare'], () => { + console.log(`Gathering variants data from ${globalVar.bowerSrcDir}`); + + const themeFilesExtension = '.html'; + const themeNameRegex = /theme\/([^\/]+)\//; + const variantsRegex = /:host\(\[theme~=["|']([^'"]+)["|']/ig; + + return gulp.src([`${globalVar.bowerSrcDir}/*/theme/**/*${themeFilesExtension}`]) + .pipe(through.obj((file, enc, cb) => { + try { + const themeName = (file.path.match(themeNameRegex) || [])[1]; + if (!themeName) { + return cb(new Error(`Failed to find a theme for path '${file.path}'`)); + } + const variants = new Set(); + + let matches; + while ((matches = variantsRegex.exec(file.contents.toString(enc)))) { + const newVariant = matches[1]; + if (newVariant) { + variants.add(newVariant); + } + } + + if (variants.size) { + const componentName = path.basename(file.path, themeFilesExtension); + const componentThemes = (variantsData[componentName] || (variantsData[componentName] = {})); + (componentThemes[themeName] || (componentThemes[themeName] = [])).push([...variants]); + } + return cb(); + } catch (e) { + console.error(`Failed to read the file '${file.path}', reason: '${e.stack}'`); + throw e; + } + })) +}); + +gulp.task('generate', ['gather-variants-data'], () => { console.log(`Running generate task, for resources from: ${globalVar.bowerSrcDir}`); // the element filter reads the bower.json file and parses the dependencies const elementFilter = new ElementFilter(); @@ -53,14 +98,12 @@ gulp.task('generate', function() { "!" + globalVar.bowerSrcDir + "web-animations-js/*", // Not useful in gwt and also has spurious event names "!" + globalVar.bowerSrcDir + "iron-jsonp-library/*", - ]) + ]) .pipe(gulpIgnore.include(file => elementFilter.acceptFile(file))) // ignores files not directly mentioned in the dependencies .pipe(versionReader) // Reads the versions of the elements .pipe(new AnalyzerTransform(elementFilter, mixinCollector)) // transforms out PolymerElements - .pipe(new ElementJsonTransform(versionReader, mixinCollector)) // transforms out json files + .pipe(new ElementJsonTransform(versionReader, mixinCollector, variantsData)) // transforms out json files .pipe(gulp.dest('.')); }); -gulp.task('default', function() { - gulp.start('generate'); -}); +gulp.task('default', ['generate']); diff --git a/flow-components-parent/flow-webcomponent-api-analyzer/lib/js/element-json-transform.js b/flow-components-parent/flow-webcomponent-api-analyzer/lib/js/element-json-transform.js index 688836189a1..94f6539a24d 100644 --- a/flow-components-parent/flow-webcomponent-api-analyzer/lib/js/element-json-transform.js +++ b/flow-components-parent/flow-webcomponent-api-analyzer/lib/js/element-json-transform.js @@ -101,12 +101,13 @@ const isOptional = (type) => { }; module.exports = class ElementJsonTransform extends Transform { - constructor(versionReader, mixinCollector) { + constructor(versionReader, mixinCollector, variantsData) { const options = {}; options.objectMode = true; super(options); this.versionReader = versionReader; this.mixinCollector = mixinCollector; + this.variantsData = variantsData; this.elementClassToProcessedResult = new Map(); } @@ -121,7 +122,8 @@ module.exports = class ElementJsonTransform extends Transform { * "properties": [ ... ], * "functions": [ ... ], * "events" : [ ... ], - * "behaviors": ["focusable", "clickable", "resizable"] + * "behaviors": ["focusable", "clickable", "resizable"], + * "variants": { themeName : [ ... ], ... }, * "description": "This is my component", * } * @@ -152,6 +154,7 @@ module.exports = class ElementJsonTransform extends Transform { "slots": this.slotsToJsonArray(element.slots), "behaviors": this.mixinCollector.getFlattenedBehaviorHierarchy(resultingName), "mixins": this.mixinCollector.getFlattenedMixinHierarchy(resultingName), + "variants": this.variantsData[elementTagName] || {}, "description": element.jsdoc ? element.jsdoc.description : "Missing documentation!" }; diff --git a/flow-components-parent/flow-webcomponent-api-analyzer/package-lock.json b/flow-components-parent/flow-webcomponent-api-analyzer/package-lock.json index 07b05c83cb1..cedaf6c5fb8 100644 --- a/flow-components-parent/flow-webcomponent-api-analyzer/package-lock.json +++ b/flow-components-parent/flow-webcomponent-api-analyzer/package-lock.json @@ -1238,21 +1238,6 @@ } } }, - "is-odd": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/is-odd/-/is-odd-2.0.0.tgz", - "integrity": "sha512-OTiixgpZAT1M4NHgS5IguFp/Vz2VI3U7Goh4/HA1adtwyLtSBrxYlcSYkhpAE07s4fKEcjrFxyvtQBND4vFQyQ==", - "requires": { - "is-number": "^4.0.0" - }, - "dependencies": { - "is-number": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/is-number/-/is-number-4.0.0.tgz", - "integrity": "sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==" - } - } - }, "is-plain-object": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", @@ -1580,16 +1565,15 @@ } }, "nanomatch": { - "version": "1.2.9", - "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.9.tgz", - "integrity": "sha512-n8R9bS8yQ6eSXaV6jHUpKzD8gLsin02w1HSFiegwrs9E098Ylhw5jdyKPaYqvHknHaSCKTPp7C8dGCQ0q9koXA==", + "version": "1.2.13", + "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz", + "integrity": "sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==", "requires": { "arr-diff": "^4.0.0", "array-unique": "^0.3.2", "define-property": "^2.0.2", "extend-shallow": "^3.0.2", "fragment-cache": "^0.2.1", - "is-odd": "^2.0.0", "is-windows": "^1.0.2", "kind-of": "^6.0.2", "object.pick": "^1.3.0",