@vaadin/icon 24.4.0-alpha9 → 24.4.0-beta2

package/README.md

@@ -5,7 +5,6 @@ A web component for displaying SVG icons.
 [Documentation + Live Demo ↗](https://vaadin.com/docs/latest/ds/foundation/icons)
 
 [![npm version](https://badgen.net/npm/v/@vaadin/icon)](https://www.npmjs.com/package/@vaadin/icon)
-[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
 ```html
 <vaadin-icon name="vaadin:user"></vaadin-icon>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/icon",
-  "version": "24.4.0-alpha9",
+  "version": "24.4.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -24,6 +24,8 @@
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
+    "!vaadin-lit-*.d.ts",
+    "!vaadin-lit-*.js",
     "web-types.json",
     "web-types.lit.json"
   ],
@@ -36,9 +38,9 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.4.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.4.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.4.0-alpha9",
+    "@vaadin/component-base": "24.4.0-beta2",
+    "@vaadin/vaadin-lumo-styles": "24.4.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "24.4.0-beta2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
@@ -50,5 +52,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "effb81abe3c6283a6ec620cc0cee56069af58226"
+  "gitHead": "886ab2e7ccb8353ac3b7a42ebb96dfe2d1211556"
 }

package/src/vaadin-icon-mixin.d.ts

@@ -0,0 +1,88 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { SlotStylesMixinClass } from '@vaadin/component-base/src/slot-styles-mixin.js';
+import type { IconFontSizeMixinClass } from './vaadin-icon-font-size-mixin.js';
+import type { IconSvgLiteral } from './vaadin-icon-svg.js';
+
+/**
+ * A mixin providing common icon functionality.
+ */
+export declare function IconMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<IconFontSizeMixinClass> & Constructor<IconMixinClass> & Constructor<SlotStylesMixinClass> & T;
+
+export declare class IconMixinClass {
+  /**
+   * The name of the icon to use. The name should be of the form:
+   * `iconset_name:icon_name`. When using `vaadin-icons` it is possible
+   * to omit the first part and only use `icon_name` as a value.
+   *
+   * Setting the `icon` property updates the `svg` and `size` based on the
+   * values provided by the corresponding `vaadin-iconset` element.
+   *
+   * See also [`name`](#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.
+   *
+   * @attr {string} icon
+   */
+  icon: string | null;
+
+  /**
+   * The SVG icon wrapped in a Lit template literal.
+   */
+  svg: IconSvgLiteral | null;
+
+  /**
+   * The SVG source to be loaded as the icon. It can be:
+   * - an URL to a file containing the icon
+   * - an URL in the format "/path/to/file.svg#objectID", where the "objectID" refers to an ID attribute contained
+   *   inside the SVG referenced by the path. Note that the file needs to follow the same-origin policy.
+   * - a string in the format "data:image/svg+xml,<svg>...</svg>". You may need to use the "encodeURIComponent"
+   *   function for the SVG content passed
+   */
+  src: string | null;
+
+  /**
+   * The symbol identifier that references an ID of an element contained in the SVG element assigned to the
+   * `src` property
+   */
+  symbol: string | null;
+
+  /**
+   * Class names defining an icon font and/or a specific glyph inside an icon font.
+   *
+   * Example: "fa-solid fa-user"
+   *
+   * @attr {string} icon-class
+   */
+  iconClass: string | null;
+
+  /**
+   * A hexadecimal code point that specifies a glyph from an icon font.
+   *
+   * Example: "e001"
+   */
+  char: string | null;
+
+  /**
+   * A ligature name that specifies an icon from an icon font with support for ligatures.
+   *
+   * Example: "home".
+   */
+  ligature: string | null;
+
+  /**
+   * The font family to use for the font icon.
+   *
+   * @attr {string} font-family
+   */
+  fontFamily: string | null;
+
+  /**
+   * The size of an icon, used to set the `viewBox` attribute.
+   */
+  size: number;
+}

package/src/vaadin-icon-mixin.js

@@ -0,0 +1,364 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
+import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
+import { IconFontSizeMixin } from './vaadin-icon-font-size-mixin.js';
+import { ensureSvgLiteral, renderSvg, unsafeSvgLiteral } from './vaadin-icon-svg.js';
+
+const srcCache = new Map();
+
+const Iconset = customElements.get('vaadin-iconset');
+
+/**
+ * @polymerMixin
+ * @mixes SlotStylesMixin
+ * @mixes IconFontSizeMixin
+ */
+export const IconMixin = (superClass) =>
+  class extends IconFontSizeMixin(SlotStylesMixin(superClass)) {
+    static get properties() {
+      return {
+        /**
+         * The name of the icon to use. The name should be of the form:
+         * `iconset_name:icon_name`. When using `vaadin-icons` it is possible
+         * to omit the first part and only use `icon_name` as a value.
+         *
+         * Setting the `icon` property updates the `svg` and `size` based on the
+         * values provided by the corresponding `vaadin-iconset` element.
+         *
+         * See also [`name`](#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.
+         *
+         * @attr {string} icon
+         * @type {string}
+         */
+        icon: {
+          type: String,
+          reflectToAttribute: true,
+          observer: '__iconChanged',
+          sync: true,
+        },
+
+        /**
+         * The SVG icon wrapped in a Lit template literal.
+         */
+        svg: {
+          type: Object,
+          sync: true,
+        },
+
+        /**
+         * The SVG source to be loaded as the icon. It can be:
+         * - an URL to a file containing the icon
+         * - an URL in the format "/path/to/file.svg#objectID", where the "objectID" refers to an ID attribute contained
+         *   inside the SVG referenced by the path. Note that the file needs to follow the same-origin policy.
+         * - a string in the format "data:image/svg+xml,<svg>...</svg>". You may need to use the "encodeURIComponent"
+         *   function for the SVG content passed
+         *
+         * @type {string}
+         */
+        src: {
+          type: String,
+          sync: true,
+        },
+
+        /**
+         * The symbol identifier that references an ID of an element contained in the SVG element assigned to the
+         * `src` property
+         *
+         * @type {string}
+         */
+        symbol: {
+          type: String,
+          sync: true,
+        },
+
+        /**
+         * Class names defining an icon font and/or a specific glyph inside an icon font.
+         *
+         * Example: "fa-solid fa-user"
+         *
+         * @attr {string} icon-class
+         * @type {string}
+         */
+        iconClass: {
+          type: String,
+          reflectToAttribute: true,
+          sync: true,
+        },
+
+        /**
+         * A hexadecimal code point that specifies a glyph from an icon font.
+         *
+         * Example: "e001"
+         *
+         * @type {string}
+         */
+        char: {
+          type: String,
+          sync: true,
+        },
+
+        /**
+         * A ligature name that specifies an icon from an icon font with support for ligatures.
+         *
+         * Example: "home".
+         *
+         * @type {string}
+         */
+        ligature: {
+          type: String,
+          sync: true,
+        },
+
+        /**
+         * The font family to use for the font icon.
+         *
+         * @attr {string} font-family
+         * @type {string}
+         */
+        fontFamily: {
+          type: String,
+          observer: '__fontFamilyChanged',
+          sync: true,
+        },
+
+        /**
+         * The size of an icon, used to set the `viewBox` attribute.
+         */
+        size: {
+          type: Number,
+          value: 24,
+          sync: true,
+        },
+
+        /** @private */
+        __defaultPAR: {
+          type: String,
+          value: 'xMidYMid meet',
+        },
+
+        /** @private */
+        __preserveAspectRatio: String,
+
+        /** @private */
+        __useRef: Object,
+
+        /** @private */
+        __svgElement: String,
+
+        /** @private */
+        __viewBox: String,
+
+        /** @private */
+        __fill: String,
+
+        /** @private */
+        __stroke: String,
+
+        /** @private */
+        __strokeWidth: String,
+
+        /** @private */
+        __strokeLinecap: String,
+
+        /** @private */
+        __strokeLinejoin: String,
+      };
+    }
+
+    static get observers() {
+      return [
+        '__svgChanged(svg, __svgElement)',
+        '__fontChanged(iconClass, char, ligature)',
+        '__srcChanged(src, symbol)',
+      ];
+    }
+
+    static get observedAttributes() {
+      return [...super.observedAttributes, 'class'];
+    }
+
+    constructor() {
+      super();
+      this.__fetch = fetch.bind(window);
+    }
+
+    /** @protected */
+    get slotStyles() {
+      const tag = this.localName;
+      return [
+        `
+        ${tag}[icon-class] {
+          display: inline-flex;
+          vertical-align: middle;
+          font-size: inherit;
+        }
+      `,
+      ];
+    }
+
+    /** @private */
+    get __iconClasses() {
+      return this.iconClass ? this.iconClass.split(' ') : [];
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+      this.__svgElement = this.shadowRoot.querySelector('#svg-group');
+      this._tooltipController = new TooltipController(this);
+      this.addController(this._tooltipController);
+    }
+
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+      Iconset.attachedIcons.add(this);
+    }
+
+    /** @protected */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      Iconset.attachedIcons.delete(this);
+    }
+
+    /** @protected */
+    _applyIcon() {
+      const { preserveAspectRatio, svg, size, viewBox } = Iconset.getIconSvg(this.icon);
+      if (viewBox) {
+        this.__viewBox = viewBox;
+      }
+      if (preserveAspectRatio) {
+        this.__preserveAspectRatio = preserveAspectRatio;
+      }
+      if (size && size !== this.size) {
+        this.size = size;
+      }
+      this.svg = svg;
+    }
+
+    /** @private */
+    __iconChanged(icon) {
+      if (icon) {
+        this._applyIcon();
+      } else {
+        this.svg = ensureSvgLiteral(null);
+      }
+    }
+
+    /** @private */
+    async __srcChanged(src, symbol) {
+      if (!src) {
+        this.svg = null;
+        return;
+      }
+
+      // Need to add the "icon" attribute to avoid issues as described in
+      // https://github.com/vaadin/web-components/issues/6301
+      this.icon = '';
+      if (!src.startsWith('data:') && (symbol || src.includes('#'))) {
+        const [path, iconId] = src.split('#');
+        this.__useRef = `${path}#${symbol || iconId}`;
+      } else {
+        try {
+          if (!srcCache.has(src)) {
+            srcCache.set(
+              src,
+              this.__fetch(src, {
+                mode: 'cors',
+              }).then((data) => {
+                if (!data.ok) {
+                  throw new Error('Error loading icon');
+                }
+                return data.text();
+              }),
+            );
+          }
+          const svgData = await srcCache.get(src);
+          if (!superClass.__domParser) {
+            superClass.__domParser = new DOMParser();
+          }
+          const parsedResponse = superClass.__domParser.parseFromString(svgData, 'text/html');
+          const svgElement = parsedResponse.querySelector('svg');
+          if (!svgElement) {
+            throw new Error(`SVG element not found on path: ${src}`);
+          }
+          this.svg = unsafeSvgLiteral(svgElement.innerHTML);
+          if (symbol) {
+            this.__useRef = `#${symbol}`;
+          }
+          this.__viewBox = svgElement.getAttribute('viewBox');
+          this.__fill = svgElement.getAttribute('fill');
+          this.__stroke = svgElement.getAttribute('stroke');
+          this.__strokeWidth = svgElement.getAttribute('stroke-width');
+          this.__strokeLinecap = svgElement.getAttribute('stroke-linecap');
+          this.__strokeLinejoin = svgElement.getAttribute('stroke-linejoin');
+        } catch (e) {
+          console.error(e);
+          this.svg = null;
+        }
+      }
+    }
+
+    /** @private */
+    __svgChanged(svg, svgElement) {
+      if (!svgElement) {
+        return;
+      }
+      renderSvg(svg, svgElement);
+    }
+
+    /** @private */
+    __computePAR(defaultPAR, preserveAspectRatio) {
+      return preserveAspectRatio || defaultPAR;
+    }
+
+    /** @private */
+    __computeVisibility(__useRef) {
+      return __useRef ? 'visible' : 'hidden';
+    }
+
+    /** @private */
+    __computeViewBox(size, viewBox) {
+      return viewBox || `0 0 ${size} ${size}`;
+    }
+
+    /** @private */
+    __fontChanged(iconClass, char, ligature) {
+      this.classList.remove(...(this.__addedIconClasses || []));
+      if (iconClass) {
+        this.__addedIconClasses = [...this.__iconClasses];
+        this.classList.add(...this.__addedIconClasses);
+      }
+      if (char) {
+        this.setAttribute('font-icon-content', char.length > 1 ? String.fromCodePoint(parseInt(char, 16)) : char);
+      } else if (ligature) {
+        this.setAttribute('font-icon-content', ligature);
+      } else {
+        this.removeAttribute('font-icon-content');
+      }
+      if ((iconClass || char || ligature) && !this.icon) {
+        // The "icon" attribute needs to be set on the host also when using font icons
+        // to avoid issues such as https://github.com/vaadin/web-components/issues/6301
+        this.icon = '';
+      }
+    }
+
+    /** @protected */
+    attributeChangedCallback(name, oldValue, newValue) {
+      super.attributeChangedCallback(name, oldValue, newValue);
+
+      // Make sure class list always contains all the font class names
+      if (name === 'class' && this.__iconClasses.some((className) => !this.classList.contains(className))) {
+        this.classList.add(...this.__iconClasses);
+      }
+    }
+
+    /** @private */
+    __fontFamilyChanged(fontFamily) {
+      this.style.fontFamily = `'${fontFamily}'`;
+    }
+  };

package/src/vaadin-icon-styles.js

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+export const iconStyles = css`
+  :host {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    vertical-align: middle;
+    width: 24px;
+    height: 24px;
+    fill: currentColor;
+    container-type: size;
+  }
+
+  :host::after,
+  :host::before {
+    line-height: 1;
+    font-size: 100cqh;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+    /* prevent overflowing icon from clipping, see https://github.com/vaadin/flow-components/issues/5872 */
+    overflow: visible;
+  }
+
+  :host(:is([icon-class], [font-icon-content])) svg {
+    display: none;
+  }
+
+  :host([font-icon-content])::before {
+    content: attr(font-icon-content);
+  }
+`;

package/src/vaadin-icon.d.ts

@@ -5,10 +5,8 @@
  */
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { IconFontSizeMixin } from './vaadin-icon-font-size-mixin.js';
-import type { IconSvgLiteral } from './vaadin-icon-svg.js';
+import { IconMixin } from './vaadin-icon-mixin.js';
 
 /**
  * `<vaadin-icon>` is a Web Component for displaying SVG icons.
@@ -49,77 +47,7 @@ import type { IconSvgLiteral } from './vaadin-icon-svg.js';
  * }
  * ```
  */
-declare class Icon extends ThemableMixin(
-  ElementMixin(ControllerMixin(SlotStylesMixin(IconFontSizeMixin(HTMLElement)))),
-) {
-  /**
-   * The name of the icon to use. The name should be of the form:
-   * `iconset_name:icon_name`. When using `vaadin-icons` it is possible
-   * to omit the first part and only use `icon_name` as a value.
-   *
-   * Setting the `icon` property updates the `svg` and `size` based on the
-   * values provided by the corresponding `vaadin-iconset` element.
-   *
-   * See also [`name`](#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.
-   *
-   * @attr {string} icon
-   */
-  icon: string | null;
-
-  /**
-   * The SVG icon wrapped in a Lit template literal.
-   */
-  svg: IconSvgLiteral | null;
-
-  /**
-   * The SVG source to be loaded as the icon. It can be:
-   * - an URL to a file containing the icon
-   * - an URL in the format "/path/to/file.svg#objectID", where the "objectID" refers to an ID attribute contained
-   *   inside the SVG referenced by the path. Note that the file needs to follow the same-origin policy.
-   * - a string in the format "data:image/svg+xml,<svg>...</svg>". You may need to use the "encodeURIComponent"
-   *   function for the SVG content passed
-   */
-  src: string | null;
-
-  /**
-   * The symbol identifier that references an ID of an element contained in the SVG element assigned to the
-   * `src` property
-   */
-  symbol: string | null;
-
-  /**
-   * Class names defining an icon font and/or a specific glyph inside an icon font.
-   *
-   * Example: "fa-solid fa-user"
-   *
-   * @attr {string} icon-class
-   */
-  iconClass: string | null;
-
-  /**
-   * A hexadecimal code point that specifies a glyph from an icon font.
-   *
-   * Example: "e001"
-   */
-  char: string | null;
-
-  /**
-   * A ligature name that specifies an icon from an icon font with support for ligatures.
-   *
-   * Example: "home".
-   */
-  ligature: string | null;
-
-  /**
-   * The font family to use for the font icon.
-   */
-  fontFamily: string | null;
-
-  /**
-   * The size of an icon, used to set the `viewBox` attribute.
-   */
-  size: number;
-}
+declare class Icon extends ThemableMixin(ElementMixin(ControllerMixin(IconMixin(HTMLElement)))) {}
 
 declare global {
   interface HTMLElementTagNameMap {