@vaadin/icon 24.2.0-alpha10 → 24.2.0-alpha11

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.
Files changed (5) hide show
  1. package/package.json +5 -5
  2. package/src/vaadin-icon.d.ts +17 -1
  3. package/src/vaadin-icon.js +93 -2
  4. package/web-types.json +42 -6
  5. package/web-types.lit.json +18 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/icon",
3
- "version": "24.2.0-alpha10",
3
+ "version": "24.2.0-alpha11",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -35,9 +35,9 @@
35
35
  ],
36
36
  "dependencies": {
37
37
  "@polymer/polymer": "^3.0.0",
38
- "@vaadin/component-base": "24.2.0-alpha10",
39
- "@vaadin/vaadin-lumo-styles": "24.2.0-alpha10",
40
- "@vaadin/vaadin-themable-mixin": "24.2.0-alpha10",
38
+ "@vaadin/component-base": "24.2.0-alpha11",
39
+ "@vaadin/vaadin-lumo-styles": "24.2.0-alpha11",
40
+ "@vaadin/vaadin-themable-mixin": "24.2.0-alpha11",
41
41
  "lit": "^2.0.0"
42
42
  },
43
43
  "devDependencies": {
@@ -49,5 +49,5 @@
49
49
  "web-types.json",
50
50
  "web-types.lit.json"
51
51
  ],
52
- "gitHead": "ca16b5f88b00ae05fb6d7c7e9874525048e389f0"
52
+ "gitHead": "a958207d5f6a09ca0e2dcf9f62194b3f92c8766a"
53
53
  }
package/src/vaadin-icon.d.ts CHANGED
@@ -5,6 +5,7 @@
5
5
  */
6
6
  import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
7
7
  import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
8
+ import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
8
9
  import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
9
10
  import type { IconSvgLiteral } from './vaadin-icon-svg.js';
10
11
 
@@ -47,7 +48,7 @@ import type { IconSvgLiteral } from './vaadin-icon-svg.js';
47
48
  * }
48
49
  * ```
49
50
  */
50
- declare class Icon extends ThemableMixin(ElementMixin(ControllerMixin(HTMLElement))) {
51
+ declare class Icon extends ThemableMixin(ElementMixin(ControllerMixin(SlotStylesMixin(HTMLElement)))) {
51
52
  /**
52
53
  * The name of the icon to use. The name should be of the form:
53
54
  * `iconset_name:icon_name`. When using `vaadin-icons` it is possible
@@ -67,6 +68,21 @@ declare class Icon extends ThemableMixin(ElementMixin(ControllerMixin(HTMLElemen
67
68
  */
68
69
  svg: IconSvgLiteral | null;
69
70
 
71
+ /**
72
+ * Class names defining an icon font and/or a specific glyph inside an icon font.
73
+ *
74
+ * @attr {string} font
75
+ */
76
+ font: string | null;
77
+
78
+ /**
79
+ * The specific glyph from a font to use as an icon.
80
+ * Can be a code point or a ligature name.
81
+ *
82
+ * @attr {string} char
83
+ */
84
+ char: string | null;
85
+
70
86
  /**
71
87
  * The size of an icon, used to set the `viewBox` attribute.
72
88
  */
package/src/vaadin-icon.js CHANGED
@@ -4,13 +4,22 @@
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
7
+ import { isSafari } from '@vaadin/component-base/src/browser-utils.js';
7
8
  import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
8
9
  import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
10
+ import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
11
+ import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
9
12
  import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
10
13
  import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
11
14
  import { ensureSvgLiteral, renderSvg } from './vaadin-icon-svg.js';
12
15
  import { Iconset } from './vaadin-iconset.js';
13
16
 
17
+ const supportsCSSContainerQueries = CSS.supports('container-type: inline-size');
18
+ const needsFontIconSizingFallback = !supportsCSSContainerQueries || isSafari;
19
+ // ResizeObserver-based fallback for browsers without CSS Container Queries support (Safari 15)
20
+ // or buggy Container Queries support for pseudo elements (Safari 16)
21
+ const ConditionalResizeMixin = (superClass) => (needsFontIconSizingFallback ? ResizeMixin(superClass) : superClass);
22
+
14
23
  /**
15
24
  * `<vaadin-icon>` is a Web Component for displaying SVG icons.
16
25
  *
@@ -54,8 +63,11 @@ import { Iconset } from './vaadin-iconset.js';
54
63
  * @mixes ControllerMixin
55
64
  * @mixes ThemableMixin
56
65
  * @mixes ElementMixin
66
+ * @mixes SlotStylesMixin
57
67
  */
58
- class Icon extends ThemableMixin(ElementMixin(ControllerMixin(PolymerElement))) {
68
+ class Icon extends ThemableMixin(
69
+ ElementMixin(ControllerMixin(SlotStylesMixin(ConditionalResizeMixin(PolymerElement)))),
70
+ ) {
59
71
  static get template() {
60
72
  return html`
61
73
  <style>
@@ -68,6 +80,13 @@ class Icon extends ThemableMixin(ElementMixin(ControllerMixin(PolymerElement)))
68
80
  width: 24px;
69
81
  height: 24px;
70
82
  fill: currentColor;
83
+ container-type: size;
84
+ }
85
+
86
+ :host::after,
87
+ :host::before {
88
+ line-height: 1;
89
+ font-size: var(--_vaadin-font-icon-size, 100cqh);
71
90
  }
72
91
 
73
92
  :host([hidden]) {
@@ -79,6 +98,14 @@ class Icon extends ThemableMixin(ElementMixin(ControllerMixin(PolymerElement)))
79
98
  width: 100%;
80
99
  height: 100%;
81
100
  }
101
+
102
+ :host(:is([font], [char])) svg {
103
+ display: none;
104
+ }
105
+
106
+ :host([char])::before {
107
+ content: attr(char);
108
+ }
82
109
  </style>
83
110
  <svg
84
111
  version="1.1"
@@ -125,6 +152,29 @@ class Icon extends ThemableMixin(ElementMixin(ControllerMixin(PolymerElement)))
125
152
  type: Object,
126
153
  },
127
154
 
155
+ /**
156
+ * Class names defining an icon font and/or a specific glyph inside an icon font.
157
+ *
158
+ * @attr {string} font
159
+ * @type {string}
160
+ */
161
+ font: {
162
+ type: String,
163
+ reflectToAttribute: true,
164
+ },
165
+
166
+ /**
167
+ * The specific glyph from a font to use as an icon.
168
+ * Can be a code point or a ligature name.
169
+ *
170
+ * @attr {string} char
171
+ * @type {string}
172
+ */
173
+ char: {
174
+ type: String,
175
+ reflectToAttribute: true,
176
+ },
177
+
128
178
  /**
129
179
  * The size of an icon, used to set the `viewBox` attribute.
130
180
  */
@@ -151,7 +201,20 @@ class Icon extends ThemableMixin(ElementMixin(ControllerMixin(PolymerElement)))
151
201
  }
152
202
 
153
203
  static get observers() {
154
- return ['__svgChanged(svg, __svgElement)'];
204
+ return ['__svgChanged(svg, __svgElement)', '__fontChanged(font, char)'];
205
+ }
206
+
207
+ /** @protected */
208
+ get slotStyles() {
209
+ const tag = this.localName;
210
+ return [
211
+ `
212
+ ${tag}[font] {
213
+ display: inline-flex;
214
+ vertical-align: middle;
215
+ }
216
+ `,
217
+ ];
155
218
  }
156
219
 
157
220
  /** @protected */
@@ -161,6 +224,11 @@ class Icon extends ThemableMixin(ElementMixin(ControllerMixin(PolymerElement)))
161
224
 
162
225
  this._tooltipController = new TooltipController(this);
163
226
  this.addController(this._tooltipController);
227
+
228
+ if (needsFontIconSizingFallback) {
229
+ // Call once initially to avoid a fouc
230
+ this._onResize();
231
+ }
164
232
  }
165
233
 
166
234
  /** @protected */
@@ -223,6 +291,29 @@ class Icon extends ThemableMixin(ElementMixin(ControllerMixin(PolymerElement)))
223
291
  __computeViewBox(size, viewBox) {
224
292
  return viewBox || `0 0 ${size} ${size}`;
225
293
  }
294
+
295
+ /** @private */
296
+ __fontChanged(font, char) {
297
+ this.classList.remove(...(this.__addedFontClasses || []));
298
+ if (font) {
299
+ this.__addedFontClasses = font.split(' ');
300
+ this.classList.add(...this.__addedFontClasses);
301
+ }
302
+
303
+ // The "icon" attribute needs to be set on the host also when using font icons
304
+ // to avoid issues such as https://github.com/vaadin/web-components/issues/6301
305
+ if ((font || char) && !this.icon) {
306
+ this.icon = '';
307
+ }
308
+ }
309
+
310
+ /**
311
+ * @protected
312
+ * @override
313
+ */
314
+ _onResize() {
315
+ this.style.setProperty('--_vaadin-font-icon-size', `${this.offsetHeight}px`);
316
+ }
226
317
  }
227
318
 
228
319
  customElements.define(Icon.is, Icon);
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/icon",
4
- "version": "24.2.0-alpha10",
4
+ "version": "24.2.0-alpha11",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -12,7 +12,7 @@
12
12
  "attributes": [
13
13
  {
14
14
  "name": "name",
15
- "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/24.2.0-alpha10/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
15
+ "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/24.2.0-alpha11/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
16
16
  "value": {
17
17
  "type": [
18
18
  "string",
@@ -48,7 +48,7 @@
48
48
  "properties": [
49
49
  {
50
50
  "name": "name",
51
- "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/24.2.0-alpha10/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
51
+ "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/24.2.0-alpha11/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
52
52
  "value": {
53
53
  "type": [
54
54
  "string",
@@ -74,11 +74,29 @@
74
74
  },
75
75
  {
76
76
  "name": "vaadin-icon",
77
- "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/24.2.0-alpha10/#/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/24.2.0-alpha10/#/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```",
77
+ "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/24.2.0-alpha11/#/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/24.2.0-alpha11/#/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```",
78
78
  "attributes": [
79
79
  {
80
80
  "name": "icon",
81
- "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/24.2.0-alpha10/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
81
+ "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/24.2.0-alpha11/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
82
+ "value": {
83
+ "type": [
84
+ "string"
85
+ ]
86
+ }
87
+ },
88
+ {
89
+ "name": "font",
90
+ "description": "Class names defining an icon font and/or a specific glyph inside an icon font.",
91
+ "value": {
92
+ "type": [
93
+ "string"
94
+ ]
95
+ }
96
+ },
97
+ {
98
+ "name": "char",
99
+ "description": "The specific glyph from a font to use as an icon.\nCan be a code point or a ligature name.",
82
100
  "value": {
83
101
  "type": [
84
102
  "string"
@@ -112,7 +130,7 @@
112
130
  "properties": [
113
131
  {
114
132
  "name": "icon",
115
- "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/24.2.0-alpha10/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
133
+ "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/24.2.0-alpha11/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
116
134
  "value": {
117
135
  "type": [
118
136
  "string"
@@ -130,6 +148,24 @@
130
148
  ]
131
149
  }
132
150
  },
151
+ {
152
+ "name": "font",
153
+ "description": "Class names defining an icon font and/or a specific glyph inside an icon font.",
154
+ "value": {
155
+ "type": [
156
+ "string"
157
+ ]
158
+ }
159
+ },
160
+ {
161
+ "name": "char",
162
+ "description": "The specific glyph from a font to use as an icon.\nCan be a code point or a ligature name.",
163
+ "value": {
164
+ "type": [
165
+ "string"
166
+ ]
167
+ }
168
+ },
133
169
  {
134
170
  "name": "size",
135
171
  "description": "The size of an icon, used to set the `viewBox` attribute.",
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": "24.2.0-alpha10",
4
+ "version": "24.2.0-alpha11",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -21,7 +21,7 @@
21
21
  "attributes": [
22
22
  {
23
23
  "name": ".name",
24
- "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/24.2.0-alpha10/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
24
+ "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/24.2.0-alpha11/#/elements/vaadin-icon#property-name) property of `vaadin-icon`.",
25
25
  "value": {
26
26
  "kind": "expression"
27
27
  }
@@ -37,12 +37,12 @@
37
37
  },
38
38
  {
39
39
  "name": "vaadin-icon",
40
- "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/24.2.0-alpha10/#/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/24.2.0-alpha10/#/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```",
40
+ "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/24.2.0-alpha11/#/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/24.2.0-alpha11/#/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```",
41
41
  "extension": true,
42
42
  "attributes": [
43
43
  {
44
44
  "name": ".icon",
45
- "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/24.2.0-alpha10/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
45
+ "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/24.2.0-alpha11/#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.",
46
46
  "value": {
47
47
  "kind": "expression"
48
48
  }
@@ -54,6 +54,20 @@
54
54
  "kind": "expression"
55
55
  }
56
56
  },
57
+ {
58
+ "name": ".font",
59
+ "description": "Class names defining an icon font and/or a specific glyph inside an icon font.",
60
+ "value": {
61
+ "kind": "expression"
62
+ }
63
+ },
64
+ {
65
+ "name": ".char",
66
+ "description": "The specific glyph from a font to use as an icon.\nCan be a code point or a ligature name.",
67
+ "value": {
68
+ "kind": "expression"
69
+ }
70
+ },
57
71
  {
58
72
  "name": ".size",
59
73
  "description": "The size of an icon, used to set the `viewBox` attribute.",