@vaadin/icon 25.3.0-alpha6 → 25.3.0-alpha8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +35 -28
- package/package.json +8 -8
- package/src/vaadin-icon.js +1 -0
- package/web-types.json +7 -21
- package/web-types.lit.json +4 -4
package/custom-elements.json
CHANGED
|
@@ -513,34 +513,6 @@
|
|
|
513
513
|
}
|
|
514
514
|
}
|
|
515
515
|
],
|
|
516
|
-
"mixins": [
|
|
517
|
-
{
|
|
518
|
-
"name": "IconMixin",
|
|
519
|
-
"module": "src/vaadin-icon-mixin.js"
|
|
520
|
-
},
|
|
521
|
-
{
|
|
522
|
-
"name": "ElementMixin",
|
|
523
|
-
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
524
|
-
},
|
|
525
|
-
{
|
|
526
|
-
"name": "ThemableMixin",
|
|
527
|
-
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
528
|
-
},
|
|
529
|
-
{
|
|
530
|
-
"name": "PolylitMixin",
|
|
531
|
-
"package": "@vaadin/component-base/src/polylit-mixin.js"
|
|
532
|
-
},
|
|
533
|
-
{
|
|
534
|
-
"name": "LumoInjectionMixin",
|
|
535
|
-
"package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
|
|
536
|
-
}
|
|
537
|
-
],
|
|
538
|
-
"superclass": {
|
|
539
|
-
"name": "LitElement",
|
|
540
|
-
"package": "lit"
|
|
541
|
-
},
|
|
542
|
-
"tagName": "vaadin-icon",
|
|
543
|
-
"customElement": true,
|
|
544
516
|
"attributes": [
|
|
545
517
|
{
|
|
546
518
|
"name": "char",
|
|
@@ -644,8 +616,43 @@
|
|
|
644
616
|
"name": "IconMixin",
|
|
645
617
|
"module": "src/vaadin-icon-mixin.js"
|
|
646
618
|
}
|
|
619
|
+
},
|
|
620
|
+
{
|
|
621
|
+
"type": {
|
|
622
|
+
"text": "string"
|
|
623
|
+
},
|
|
624
|
+
"description": "The theme variants to apply to the component.",
|
|
625
|
+
"name": "theme"
|
|
626
|
+
}
|
|
627
|
+
],
|
|
628
|
+
"mixins": [
|
|
629
|
+
{
|
|
630
|
+
"name": "IconMixin",
|
|
631
|
+
"module": "src/vaadin-icon-mixin.js"
|
|
632
|
+
},
|
|
633
|
+
{
|
|
634
|
+
"name": "ElementMixin",
|
|
635
|
+
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
636
|
+
},
|
|
637
|
+
{
|
|
638
|
+
"name": "ThemableMixin",
|
|
639
|
+
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
640
|
+
},
|
|
641
|
+
{
|
|
642
|
+
"name": "PolylitMixin",
|
|
643
|
+
"package": "@vaadin/component-base/src/polylit-mixin.js"
|
|
644
|
+
},
|
|
645
|
+
{
|
|
646
|
+
"name": "LumoInjectionMixin",
|
|
647
|
+
"package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
|
|
647
648
|
}
|
|
648
649
|
],
|
|
650
|
+
"superclass": {
|
|
651
|
+
"name": "LitElement",
|
|
652
|
+
"package": "lit"
|
|
653
|
+
},
|
|
654
|
+
"tagName": "vaadin-icon",
|
|
655
|
+
"customElement": true,
|
|
649
656
|
"events": []
|
|
650
657
|
}
|
|
651
658
|
],
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/icon",
|
|
3
|
-
"version": "25.3.0-
|
|
3
|
+
"version": "25.3.0-alpha8",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,16 +35,16 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@vaadin/component-base": "25.3.0-
|
|
39
|
-
"@vaadin/vaadin-themable-mixin": "25.3.0-
|
|
38
|
+
"@vaadin/component-base": "25.3.0-alpha8",
|
|
39
|
+
"@vaadin/vaadin-themable-mixin": "25.3.0-alpha8",
|
|
40
40
|
"lit": "^3.0.0"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
|
-
"@vaadin/aura": "25.3.0-
|
|
44
|
-
"@vaadin/chai-plugins": "25.3.0-
|
|
45
|
-
"@vaadin/test-runner-commands": "25.3.0-
|
|
43
|
+
"@vaadin/aura": "25.3.0-alpha8",
|
|
44
|
+
"@vaadin/chai-plugins": "25.3.0-alpha8",
|
|
45
|
+
"@vaadin/test-runner-commands": "25.3.0-alpha8",
|
|
46
46
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
47
|
-
"@vaadin/vaadin-lumo-styles": "25.3.0-
|
|
47
|
+
"@vaadin/vaadin-lumo-styles": "25.3.0-alpha8",
|
|
48
48
|
"sinon": "^22.0.0"
|
|
49
49
|
},
|
|
50
50
|
"customElements": "custom-elements.json",
|
|
@@ -52,5 +52,5 @@
|
|
|
52
52
|
"web-types.json",
|
|
53
53
|
"web-types.lit.json"
|
|
54
54
|
],
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "ccbb4aaffb63c745c6da0426b532d4d05e47af29"
|
|
56
56
|
}
|
package/src/vaadin-icon.js
CHANGED
|
@@ -72,6 +72,7 @@ import { ensureSvgLiteral } from './vaadin-icon-svg.js';
|
|
|
72
72
|
*
|
|
73
73
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
74
74
|
*
|
|
75
|
+
* @attr {string} theme - The theme variants to apply to the component.
|
|
75
76
|
* @customElement vaadin-icon
|
|
76
77
|
* @extends HTMLElement
|
|
77
78
|
*/
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/icon",
|
|
4
|
-
"version": "25.3.0-
|
|
4
|
+
"version": "25.3.0-alpha8",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-icon",
|
|
11
|
-
"description": "`<vaadin-icon>` is a Web Component for displaying SVG icons.\n\n### Icon property\n\nThe `<vaadin-icon>` component is designed to be used as a drop-in replacement for `<iron-icon>`.\nFor example, you can use it with `vaadin-icons` like this:\n\n```html\n<vaadin-icon icon=\"vaadin:angle-down\"></vaadin-icon>\n```\n\nAlternatively, you can also pick one of the Lumo icons:\n\n```html\n<vaadin-icon icon=\"lumo:user\"></vaadin-icon>\n```\n\n### Custom SVG icon\n\nAlternatively, instead of selecting an icon from an iconset by name, you can pass any custom `svg`\nliteral using the [`svg`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-
|
|
11
|
+
"description": "`<vaadin-icon>` is a Web Component for displaying SVG icons.\n\n### Icon property\n\nThe `<vaadin-icon>` component is designed to be used as a drop-in replacement for `<iron-icon>`.\nFor example, you can use it with `vaadin-icons` like this:\n\n```html\n<vaadin-icon icon=\"vaadin:angle-down\"></vaadin-icon>\n```\n\nAlternatively, you can also pick one of the Lumo icons:\n\n```html\n<vaadin-icon icon=\"lumo:user\"></vaadin-icon>\n```\n\n### Custom SVG icon\n\nAlternatively, instead of selecting an icon from an iconset by name, you can pass any custom `svg`\nliteral using the [`svg`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha8/#/elements/vaadin-icon#property-svg) property. In this case you can also\ndefine the size of the SVG `viewBox` using the [`size`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha8/#/elements/vaadin-icon#property-size) property:\n\n```js\nimport { html, svg } from 'lit';\n\n// in your component\nrender() {\n const svgIcon = svg`<path d=\"M13 4v2l-5 5-5-5v-2l5 5z\"></path>`;\n return html`\n <vaadin-icon\n .svg=\"${svgIcon}\"\n size=\"16\"\n ></vaadin-icon>\n `;\n}\n```\n\n### Styling\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property | Description\n-----------------------------|-------------\n`--vaadin-icon-size` | Size (width and height) of the icon\n`--vaadin-icon-stroke-width` | Stroke width of the SVG icon\n`--vaadin-icon-visual-size` | Visual size of the icon\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`has-tooltip` | Set when the icon has a slotted tooltip\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "char",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
},
|
|
31
31
|
{
|
|
32
32
|
"name": "icon",
|
|
33
|
-
"description": "The name of the icon to use. The name should be of the form:\n`iconset_name:icon_name`. When using `vaadin-icons` it is possible\nto omit the first part and only use `icon_name` as a value.\n\nSetting the `icon` property updates the `svg` and `size` based on the\nvalues provided by the corresponding `vaadin-iconset` element.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-
|
|
33
|
+
"description": "The name of the icon to use. The name should be of the form:\n`iconset_name:icon_name`. When using `vaadin-icons` it is possible\nto omit the first part and only use `icon_name` as a value.\n\nSetting the `icon` property updates the `svg` and `size` based on the\nvalues provided by the corresponding `vaadin-iconset` element.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha8/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
|
|
34
34
|
"value": {
|
|
35
35
|
"type": [
|
|
36
36
|
"string"
|
|
@@ -87,9 +87,7 @@
|
|
|
87
87
|
"description": "The theme variants to apply to the component.",
|
|
88
88
|
"value": {
|
|
89
89
|
"type": [
|
|
90
|
-
"string"
|
|
91
|
-
"null",
|
|
92
|
-
"undefined"
|
|
90
|
+
"string"
|
|
93
91
|
]
|
|
94
92
|
}
|
|
95
93
|
}
|
|
@@ -116,7 +114,7 @@
|
|
|
116
114
|
},
|
|
117
115
|
{
|
|
118
116
|
"name": "icon",
|
|
119
|
-
"description": "The name of the icon to use. The name should be of the form:\n`iconset_name:icon_name`. When using `vaadin-icons` it is possible\nto omit the first part and only use `icon_name` as a value.\n\nSetting the `icon` property updates the `svg` and `size` based on the\nvalues provided by the corresponding `vaadin-iconset` element.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-
|
|
117
|
+
"description": "The name of the icon to use. The name should be of the form:\n`iconset_name:icon_name`. When using `vaadin-icons` it is possible\nto omit the first part and only use `icon_name` as a value.\n\nSetting the `icon` property updates the `svg` and `size` based on the\nvalues provided by the corresponding `vaadin-iconset` element.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha8/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
|
|
120
118
|
"value": {
|
|
121
119
|
"type": [
|
|
122
120
|
"string"
|
|
@@ -184,24 +182,12 @@
|
|
|
184
182
|
{
|
|
185
183
|
"name": "vaadin-iconset",
|
|
186
184
|
"description": "`<vaadin-iconset>` is a Web Component for creating SVG icon collections.",
|
|
187
|
-
"attributes": [
|
|
188
|
-
{
|
|
189
|
-
"name": "theme",
|
|
190
|
-
"description": "The theme variants to apply to the component.",
|
|
191
|
-
"value": {
|
|
192
|
-
"type": [
|
|
193
|
-
"string",
|
|
194
|
-
"null",
|
|
195
|
-
"undefined"
|
|
196
|
-
]
|
|
197
|
-
}
|
|
198
|
-
}
|
|
199
|
-
],
|
|
185
|
+
"attributes": [],
|
|
200
186
|
"js": {
|
|
201
187
|
"properties": [
|
|
202
188
|
{
|
|
203
189
|
"name": "name",
|
|
204
|
-
"description": "The name of the iconset. Every iconset is required to have its own unique name.\nAll the SVG icons in the iconset must have IDs conforming to its name.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-
|
|
190
|
+
"description": "The name of the iconset. Every iconset is required to have its own unique name.\nAll the SVG icons in the iconset must have IDs conforming to its name.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha8/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
|
|
205
191
|
"value": {
|
|
206
192
|
"type": [
|
|
207
193
|
"string"
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/icon",
|
|
4
|
-
"version": "25.3.0-
|
|
4
|
+
"version": "25.3.0-alpha8",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-icon",
|
|
19
|
-
"description": "`<vaadin-icon>` is a Web Component for displaying SVG icons.\n\n### Icon property\n\nThe `<vaadin-icon>` component is designed to be used as a drop-in replacement for `<iron-icon>`.\nFor example, you can use it with `vaadin-icons` like this:\n\n```html\n<vaadin-icon icon=\"vaadin:angle-down\"></vaadin-icon>\n```\n\nAlternatively, you can also pick one of the Lumo icons:\n\n```html\n<vaadin-icon icon=\"lumo:user\"></vaadin-icon>\n```\n\n### Custom SVG icon\n\nAlternatively, instead of selecting an icon from an iconset by name, you can pass any custom `svg`\nliteral using the [`svg`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-
|
|
19
|
+
"description": "`<vaadin-icon>` is a Web Component for displaying SVG icons.\n\n### Icon property\n\nThe `<vaadin-icon>` component is designed to be used as a drop-in replacement for `<iron-icon>`.\nFor example, you can use it with `vaadin-icons` like this:\n\n```html\n<vaadin-icon icon=\"vaadin:angle-down\"></vaadin-icon>\n```\n\nAlternatively, you can also pick one of the Lumo icons:\n\n```html\n<vaadin-icon icon=\"lumo:user\"></vaadin-icon>\n```\n\n### Custom SVG icon\n\nAlternatively, instead of selecting an icon from an iconset by name, you can pass any custom `svg`\nliteral using the [`svg`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha8/#/elements/vaadin-icon#property-svg) property. In this case you can also\ndefine the size of the SVG `viewBox` using the [`size`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha8/#/elements/vaadin-icon#property-size) property:\n\n```js\nimport { html, svg } from 'lit';\n\n// in your component\nrender() {\n const svgIcon = svg`<path d=\"M13 4v2l-5 5-5-5v-2l5 5z\"></path>`;\n return html`\n <vaadin-icon\n .svg=\"${svgIcon}\"\n size=\"16\"\n ></vaadin-icon>\n `;\n}\n```\n\n### Styling\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property | Description\n-----------------------------|-------------\n`--vaadin-icon-size` | Size (width and height) of the icon\n`--vaadin-icon-stroke-width` | Stroke width of the SVG icon\n`--vaadin-icon-visual-size` | Visual size of the icon\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`has-tooltip` | Set when the icon has a slotted tooltip\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
},
|
|
36
36
|
{
|
|
37
37
|
"name": ".icon",
|
|
38
|
-
"description": "The name of the icon to use. The name should be of the form:\n`iconset_name:icon_name`. When using `vaadin-icons` it is possible\nto omit the first part and only use `icon_name` as a value.\n\nSetting the `icon` property updates the `svg` and `size` based on the\nvalues provided by the corresponding `vaadin-iconset` element.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-
|
|
38
|
+
"description": "The name of the icon to use. The name should be of the form:\n`iconset_name:icon_name`. When using `vaadin-icons` it is possible\nto omit the first part and only use `icon_name` as a value.\n\nSetting the `icon` property updates the `svg` and `size` based on the\nvalues provided by the corresponding `vaadin-iconset` element.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha8/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
|
|
39
39
|
"value": {
|
|
40
40
|
"kind": "expression"
|
|
41
41
|
}
|
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
"attributes": [
|
|
92
92
|
{
|
|
93
93
|
"name": ".name",
|
|
94
|
-
"description": "The name of the iconset. Every iconset is required to have its own unique name.\nAll the SVG icons in the iconset must have IDs conforming to its name.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-
|
|
94
|
+
"description": "The name of the iconset. Every iconset is required to have its own unique name.\nAll the SVG icons in the iconset must have IDs conforming to its name.\n\nSee also [`name`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha8/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
|
|
95
95
|
"value": {
|
|
96
96
|
"kind": "expression"
|
|
97
97
|
}
|