igniteui-webcomponents 7.2.3 → 7.3.0-beta.0

package/components/icon/icon-state.broadcast.d.ts

@@ -1,38 +1,35 @@
 import type { BroadcastIconsChangeMessage, IconMeta, IconsCollection, SvgIcon } from './registry/types.js';
 type IconBroadcastEvent = MessageEvent<BroadcastIconsChangeMessage> | PageTransitionEvent;
 /**
- * Manages cross-context synchronization of icon state using the BroadcastChannel API.
+ * Publishes icon registry state to other browsing contexts of the same origin
+ * using the BroadcastChannel API.
  *
  * @remarks
- * This class enables icon registry state to be shared between different browsing contexts
- * (e.g., iframes, tabs) within the same origin. It specifically handles synchronization
- * with Angular elements that may be running in separate contexts.
+ * The traffic is one-way by design: this side broadcasts its own registrations
+ * and reference updates, and answers a peer's `SyncState` request with the
+ * user-set part of the registry. It never applies inbound state and never
+ * requests a sync itself - the Ignite UI for Angular icon service is the peer
+ * that consumes these messages.
  *
- * The broadcast channel is automatically created on page show and disposed on page hide
- * to properly handle bfcache (back/forward cache) scenarios.
+ * The channel is created on page show and disposed on page hide, so a page
+ * restored from the bfcache gets a working one. Under SSR the instance is inert.
  */
 export declare class IconsStateBroadcast {
     private static readonly _origin;
     private readonly _iconsCollection;
     private readonly _iconReferences;
     private _channel;
-    /**
-     * Creates an instance of IconsStateBroadcast.
-     *
-     * @param iconsCollection - The collection of registered SVG icons.
-     * @param iconReferences - The collection of icon references/aliases.
-     */
     constructor(iconsCollection: IconsCollection<SvgIcon>, iconReferences: IconsCollection<IconMeta>);
-    /**
-     * Sends a message to other browsing contexts via the broadcast channel.
-     */
+    /** Posts a message to the other browsing contexts of this origin. */
     send(data: BroadcastIconsChangeMessage): void;
     /** @internal */
     handleEvent(event: IconBroadcastEvent): void;
     private _syncState;
     private _create;
     private _dispose;
-    private _getUserRefsCollection;
-    private _getUserSetCollection;
+    /** The user-set references, skipping collections that have none. */
+    private _userReferences;
+    /** Every registered collection except the built-in `internal` one. */
+    private _userIcons;
 }
 export {};

package/components/icon/icon-state.broadcast.js

@@ -1,4 +1,4 @@
-import { createIconDefaultMap } from './registry/default-map.js';
+import { isServer } from 'lit';
 import { ActionType } from './registry/types.js';
 export class IconsStateBroadcast {
     static { this._origin = 'igniteui-webcomponents'; }
@@ -6,6 +6,9 @@ export class IconsStateBroadcast {
         this._channel = null;
         this._iconsCollection = iconsCollection;
         this._iconReferences = iconReferences;
+        if (isServer) {
+            return;
+        }
         globalThis.addEventListener('pageshow', this);
         globalThis.addEventListener('pagehide', this);
         this._create();
@@ -33,8 +36,8 @@ export class IconsStateBroadcast {
         }
         this.send({
             actionType: ActionType.SyncState,
-            collections: this._getUserSetCollection(this._iconsCollection).toPlainMap(),
-            references: this._getUserRefsCollection(this._iconReferences).toPlainMap(),
+            collections: this._userIcons(),
+            references: this._userReferences(),
             origin: IconsStateBroadcast._origin,
         });
     }
@@ -49,28 +52,24 @@ export class IconsStateBroadcast {
         this._channel?.close();
         this._channel = null;
     }
-    _getUserRefsCollection(collections) {
-        const userSetIcons = createIconDefaultMap();
-        for (const [collectionKey, collection] of collections.entries()) {
-            for (const [iconKey, icon] of collection.entries()) {
-                if (icon.external) {
-                    userSetIcons.getOrCreate(collectionKey).set(iconKey, icon);
-                }
+    _userReferences() {
+        const result = new Map();
+        for (const [name, references] of this._iconReferences) {
+            const external = new Map([...references].filter(([, ref]) => ref.external));
+            if (external.size > 0) {
+                result.set(name, external);
             }
         }
-        return userSetIcons;
+        return result;
     }
-    _getUserSetCollection(collections) {
-        const userSetIcons = createIconDefaultMap();
-        for (const [collectionKey, collection] of collections.entries()) {
-            if (collectionKey === 'internal') {
-                continue;
-            }
-            for (const [iconKey, icon] of collection.entries()) {
-                userSetIcons.getOrCreate(collectionKey).set(iconKey, icon);
+    _userIcons() {
+        const result = new Map();
+        for (const [name, icons] of this._iconsCollection) {
+            if (name !== 'internal') {
+                result.set(name, new Map(icons));
             }
         }
-        return userSetIcons;
+        return result;
     }
 }
 //# sourceMappingURL=icon-state.broadcast.js.map

package/components/icon/icon-state.broadcast.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-state.broadcast.js","sourceRoot":"","sources":["../../../src/components/icon/icon-state.broadcast.ts"],"names":[],"mappings":"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","sourcesContent":["import { createIconDefaultMap } from './registry/default-map.js';\nimport type {\n  BroadcastIconsChangeMessage,\n  IconMeta,\n  IconsCollection,\n  SvgIcon,\n} from './registry/types.js';\nimport { ActionType } from './registry/types.js';\n\ntype IconBroadcastEvent =\n  | MessageEvent<BroadcastIconsChangeMessage>\n  | PageTransitionEvent;\n\n/**\n * Manages cross-context synchronization of icon state using the BroadcastChannel API.\n *\n * @remarks\n * This class enables icon registry state to be shared between different browsing contexts\n * (e.g., iframes, tabs) within the same origin. It specifically handles synchronization\n * with Angular elements that may be running in separate contexts.\n *\n * The broadcast channel is automatically created on page show and disposed on page hide\n * to properly handle bfcache (back/forward cache) scenarios.\n */\nexport class IconsStateBroadcast {\n  private static readonly _origin = 'igniteui-webcomponents';\n\n  private readonly _iconsCollection: IconsCollection<SvgIcon>;\n  private readonly _iconReferences: IconsCollection<IconMeta>;\n\n  private _channel: BroadcastChannel | null = null;\n\n  /**\n   * Creates an instance of IconsStateBroadcast.\n   *\n   * @param iconsCollection - The collection of registered SVG icons.\n   * @param iconReferences - The collection of icon references/aliases.\n   */\n  constructor(\n    iconsCollection: IconsCollection<SvgIcon>,\n    iconReferences: IconsCollection<IconMeta>\n  ) {\n    this._iconsCollection = iconsCollection;\n    this._iconReferences = iconReferences;\n\n    globalThis.addEventListener('pageshow', this);\n    globalThis.addEventListener('pagehide', this);\n\n    this._create();\n  }\n\n  /**\n   * Sends a message to other browsing contexts via the broadcast channel.\n   */\n  public send(data: BroadcastIconsChangeMessage): void {\n    this._channel?.postMessage(data);\n  }\n\n  /** @internal */\n  public handleEvent(event: IconBroadcastEvent): void {\n    switch (event.type) {\n      case 'message':\n        this._syncState(event as MessageEvent<BroadcastIconsChangeMessage>);\n        break;\n      case 'pageshow':\n        this._create();\n        break;\n      case 'pagehide':\n        this._dispose();\n        break;\n    }\n  }\n\n  private _syncState({\n    data: { actionType, origin },\n  }: MessageEvent<BroadcastIconsChangeMessage>): void {\n    // no need to sync with other wc icon services, just with angular elements\n    if (\n      actionType !== ActionType.SyncState ||\n      origin === IconsStateBroadcast._origin\n    ) {\n      return;\n    }\n\n    this.send({\n      actionType: ActionType.SyncState,\n      collections: this._getUserSetCollection(\n        this._iconsCollection\n      ).toPlainMap(),\n      references: this._getUserRefsCollection(\n        this._iconReferences\n      ).toPlainMap(),\n      origin: IconsStateBroadcast._origin,\n    });\n  }\n\n  private _create(): void {\n    if (!this._channel) {\n      this._channel = new BroadcastChannel('ignite-ui-icon-channel');\n      this._channel.addEventListener('message', this);\n    }\n  }\n\n  private _dispose(): void {\n    this._channel?.removeEventListener('message', this);\n    this._channel?.close();\n    this._channel = null;\n  }\n\n  private _getUserRefsCollection(\n    collections: IconsCollection<IconMeta>\n  ): IconsCollection<IconMeta> {\n    const userSetIcons = createIconDefaultMap<string, IconMeta>();\n\n    for (const [collectionKey, collection] of collections.entries()) {\n      for (const [iconKey, icon] of collection.entries()) {\n        if (icon.external) {\n          userSetIcons.getOrCreate(collectionKey).set(iconKey, icon);\n        }\n      }\n    }\n\n    return userSetIcons;\n  }\n\n  private _getUserSetCollection(\n    collections: IconsCollection<SvgIcon>\n  ): IconsCollection<SvgIcon> {\n    const userSetIcons = createIconDefaultMap<string, SvgIcon>();\n\n    for (const [collectionKey, collection] of collections.entries()) {\n      if (collectionKey === 'internal') {\n        continue;\n      }\n      for (const [iconKey, icon] of collection.entries()) {\n        userSetIcons.getOrCreate(collectionKey).set(iconKey, icon);\n      }\n    }\n\n    return userSetIcons;\n  }\n}\n"]}
+{"version":3,"file":"icon-state.broadcast.js","sourceRoot":"","sources":["../../../src/components/icon/icon-state.broadcast.ts"],"names":[],"mappings":"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","sourcesContent":["import { isServer } from 'lit';\n\nimport type {\n  BroadcastIconsChangeMessage,\n  IconMeta,\n  IconsCollection,\n  SvgIcon,\n} from './registry/types.js';\nimport { ActionType } from './registry/types.js';\n\ntype IconBroadcastEvent =\n  | MessageEvent<BroadcastIconsChangeMessage>\n  | PageTransitionEvent;\n\n/**\n * Publishes icon registry state to other browsing contexts of the same origin\n * using the BroadcastChannel API.\n *\n * @remarks\n * The traffic is one-way by design: this side broadcasts its own registrations\n * and reference updates, and answers a peer's `SyncState` request with the\n * user-set part of the registry. It never applies inbound state and never\n * requests a sync itself - the Ignite UI for Angular icon service is the peer\n * that consumes these messages.\n *\n * The channel is created on page show and disposed on page hide, so a page\n * restored from the bfcache gets a working one. Under SSR the instance is inert.\n */\nexport class IconsStateBroadcast {\n  private static readonly _origin = 'igniteui-webcomponents';\n\n  private readonly _iconsCollection: IconsCollection<SvgIcon>;\n  private readonly _iconReferences: IconsCollection<IconMeta>;\n\n  private _channel: BroadcastChannel | null = null;\n\n  constructor(\n    iconsCollection: IconsCollection<SvgIcon>,\n    iconReferences: IconsCollection<IconMeta>\n  ) {\n    this._iconsCollection = iconsCollection;\n    this._iconReferences = iconReferences;\n\n    if (isServer) {\n      return;\n    }\n\n    globalThis.addEventListener('pageshow', this);\n    globalThis.addEventListener('pagehide', this);\n\n    this._create();\n  }\n\n  /** Posts a message to the other browsing contexts of this origin. */\n  public send(data: BroadcastIconsChangeMessage): void {\n    this._channel?.postMessage(data);\n  }\n\n  /** @internal */\n  public handleEvent(event: IconBroadcastEvent): void {\n    switch (event.type) {\n      case 'message':\n        this._syncState(event as MessageEvent<BroadcastIconsChangeMessage>);\n        break;\n      case 'pageshow':\n        this._create();\n        break;\n      case 'pagehide':\n        this._dispose();\n        break;\n    }\n  }\n\n  private _syncState({\n    data: { actionType, origin },\n  }: MessageEvent<BroadcastIconsChangeMessage>): void {\n    // no need to sync with other wc icon services, just with angular elements\n    if (\n      actionType !== ActionType.SyncState ||\n      origin === IconsStateBroadcast._origin\n    ) {\n      return;\n    }\n\n    this.send({\n      actionType: ActionType.SyncState,\n      collections: this._userIcons(),\n      references: this._userReferences(),\n      origin: IconsStateBroadcast._origin,\n    });\n  }\n\n  private _create(): void {\n    if (!this._channel) {\n      this._channel = new BroadcastChannel('ignite-ui-icon-channel');\n      this._channel.addEventListener('message', this);\n    }\n  }\n\n  private _dispose(): void {\n    this._channel?.removeEventListener('message', this);\n    this._channel?.close();\n    this._channel = null;\n  }\n\n  /** The user-set references, skipping collections that have none. */\n  private _userReferences(): IconsCollection<IconMeta> {\n    const result: IconsCollection<IconMeta> = new Map();\n\n    for (const [name, references] of this._iconReferences) {\n      const external = new Map(\n        [...references].filter(([, ref]) => ref.external)\n      );\n\n      if (external.size > 0) {\n        result.set(name, external);\n      }\n    }\n\n    return result;\n  }\n\n  /** Every registered collection except the built-in `internal` one. */\n  private _userIcons(): IconsCollection<SvgIcon> {\n    const result: IconsCollection<SvgIcon> = new Map();\n\n    for (const [name, icons] of this._iconsCollection) {\n      if (name !== 'internal') {\n        result.set(name, new Map(icons));\n      }\n    }\n\n    return result;\n  }\n}\n"]}

package/components/icon/icon.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, type PropertyValues } from 'lit';
+import { LitElement, nothing, type PropertyValues } from 'lit';
 import type { IconMeta } from './registry/types.js';
 /**
  * The icon component allows visualizing collections of pre-registered SVG icons.
@@ -11,7 +11,7 @@ import type { IconMeta } from './registry/types.js';
  * - Registered dynamically using `registerIcon` or `registerIconFromText`
  * - Referenced by aliases that resolve differently based on the active theme
  *
- * Icons automatically adapt to the current theme when used within an `igc-theme-provider`.
+ * Icons automatically adapt to the current theme when used within a theme provider.
  * The component subscribes to the icon registry and updates automatically when icons
  * are registered or references are updated.
  *
@@ -42,7 +42,12 @@ export default class IgcIconComponent extends LitElement {
     static register(): void;
     private readonly _internals;
     private readonly _theming;
-    private _boundIconLoaded?;
+    private readonly _onRegistryChange;
+    /**
+     * Set while a server-rendered host is hydrating, during which `render()`
+     * withholds the SVG so both renders match.
+     */
+    private _hydrating;
     private _svg;
     /**
      * The name of the icon glyph to draw.
@@ -86,30 +91,14 @@ export default class IgcIconComponent extends LitElement {
     connectedCallback(): void;
     /** @internal */
     disconnectedCallback(): void;
+    /** @internal */
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
     protected update(props: PropertyValues<this>): void;
-    /**
-     * Callback invoked when an icon is registered or updated in the registry.
-     * Re-fetches the icon if it matches this component's name and collection.
-     *
-     * @param name - The name of the registered icon
-     * @param collection - The collection of the registered icon
-     */
-    private _iconLoaded;
-    /**
-     * Fetches and updates the icon from the registry.
-     *
-     * @remarks
-     * This method:
-     * 1. Resolves the icon reference based on the current theme
-     * 2. Retrieves the SVG content from the registry
-     * 3. Updates the component's rendered SVG
-     * 4. Sets the appropriate ARIA label from the icon's title
-     *
-     */
+    protected firstUpdated(): void;
     private _getIcon;
-    protected render(): import("lit-html").TemplateResult<1>;
-    protected registerIcon(name: string, url: string, collection?: string): Promise<void>;
-    protected registerIconFromText(name: string, iconText: string, collection?: string): void;
+    protected render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    protected registerIcon(name: string, url: string, collection?: string, stripMeta?: boolean): Promise<void>;
+    protected registerIconFromText(name: string, iconText: string, collection?: string, stripMeta?: boolean): void;
     protected setIconRef(name: string, collection: string, icon: IconMeta): void;
 }
 declare global {

package/components/icon/icon.js

@@ -4,13 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, LitElement } from 'lit';
+import { html, isServer, LitElement, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-import { addThemingController } from '../../theming/theming-controller.js';
-import { addInternalsController } from '../common/controllers/internals.js';
-import { blazorInclude } from '../common/decorators/blazorInclude.js';
-import { registerComponent } from '../common/definitions/register.js';
+import { addInternalsController } from '#internals/controllers/internals.js';
+import { blazorInclude } from '#internals/decorators/blazorInclude.js';
+import { registerComponent } from '#internals/definitions/register.js';
+import { addThemingController } from '#theming/theming-controller.js';
 import { getIconRegistry, registerIcon as registerIcon_impl, registerIconFromText as registerIconFromText_impl, setIconRef as setIconRef_impl, } from './icon.registry.js';
 import { styles } from './themes/icon.base.css.js';
 import { styles as shared } from './themes/shared/icon.common.css.js';
@@ -18,12 +18,12 @@ import { all } from './themes/themes.js';
 export default class IgcIconComponent extends LitElement {
     constructor() {
         super(...arguments);
-        this._internals = addInternalsController(this, {
-            initialARIA: { role: 'img' },
-        });
+        this._internals = addInternalsController(this);
         this._theming = addThemingController(this, all, {
             themeChange: this._getIcon,
         });
+        this._onRegistryChange = () => this._getIcon();
+        this._hydrating = false;
         this._svg = '';
         this.name = '';
         this.collection = 'default';
@@ -36,40 +36,53 @@ export default class IgcIconComponent extends LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        this._boundIconLoaded = this._iconLoaded.bind(this);
-        getIconRegistry().subscribe(this._boundIconLoaded);
+        getIconRegistry().subscribe(this._onRegistryChange);
     }
     disconnectedCallback() {
-        if (this._boundIconLoaded) {
-            getIconRegistry().unsubscribe(this._boundIconLoaded);
-        }
+        getIconRegistry().unsubscribe(this._onRegistryChange);
         super.disconnectedCallback();
     }
+    createRenderRoot() {
+        this._hydrating = this.shadowRoot !== null;
+        return super.createRenderRoot();
+    }
     update(props) {
         if (props.has('name') || props.has('collection')) {
             this._getIcon();
         }
         super.update(props);
     }
-    _iconLoaded(name, collection) {
-        if (this.name === name && this.collection === collection) {
-            this._getIcon();
+    firstUpdated() {
+        if (this._hydrating) {
+            this._hydrating = false;
+            if (this._svg) {
+                queueMicrotask(() => this.requestUpdate());
+            }
         }
     }
     _getIcon() {
-        const { name, collection } = getIconRegistry().getIconRef(this.name, this.collection, this._theming.theme);
-        const { svg = '', title = null } = getIconRegistry().get(name, collection) ?? {};
+        const registry = getIconRegistry();
+        const { name, collection } = registry.getIconRef(this.name, this.collection, this._theming.theme);
+        const { svg = '', title } = registry.get(name, collection) ?? {};
+        const labelled = Boolean(title) ||
+            this.hasAttribute('aria-label') ||
+            this.hasAttribute('aria-labelledby');
         this._svg = svg;
-        this._internals.setARIA({ ariaLabel: title });
+        this._internals.setARIA({
+            role: labelled ? 'img' : null,
+            ariaLabel: title ?? null,
+        });
     }
     render() {
-        return html `${unsafeSVG(this._svg)}`;
+        return isServer || this._hydrating
+            ? nothing
+            : html `${unsafeSVG(this._svg)}`;
     }
-    async registerIcon(name, url, collection = 'default') {
-        await registerIcon_impl(name, url, collection);
+    async registerIcon(name, url, collection = 'default', stripMeta = false) {
+        await registerIcon_impl(name, url, { collection, stripMeta });
     }
-    registerIconFromText(name, iconText, collection = 'default') {
-        registerIconFromText_impl(name, iconText, collection);
+    registerIconFromText(name, iconText, collection = 'default', stripMeta = false) {
+        registerIconFromText_impl(name, iconText, { collection, stripMeta });
     }
     setIconRef(name, collection, icon) {
         setIconRef_impl(name, collection, icon);

package/components/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, type PropertyValues } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\n\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { addInternalsController } from '../common/controllers/internals.js';\nimport { blazorInclude } from '../common/decorators/blazorInclude.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport {\n  getIconRegistry,\n  registerIcon as registerIcon_impl,\n  registerIconFromText as registerIconFromText_impl,\n  setIconRef as setIconRef_impl,\n} from './icon.registry.js';\nimport type { IconCallback, IconMeta } from './registry/types.js';\nimport { styles } from './themes/icon.base.css.js';\nimport { styles as shared } from './themes/shared/icon.common.css.js';\nimport { all } from './themes/themes.js';\n\n/**\n * The icon component allows visualizing collections of pre-registered SVG icons.\n *\n * @element igc-icon\n *\n * @remarks\n * The icon component renders SVG icons from registered icon collections. Icons can be:\n * - Loaded from the internal collection (built-in icons)\n * - Registered dynamically using `registerIcon` or `registerIconFromText`\n * - Referenced by aliases that resolve differently based on the active theme\n *\n * Icons automatically adapt to the current theme when used within an `igc-theme-provider`.\n * The component subscribes to the icon registry and updates automatically when icons\n * are registered or references are updated.\n *\n * @example\n * ```html\n * <!-- Use a built-in icon -->\n * <igc-icon name=\"star\"></igc-icon>\n *\n * <!-- Use an icon from a specific collection -->\n * <igc-icon name=\"search\" collection=\"material\"></igc-icon>\n *\n * <!-- Mirror the icon for RTL layouts -->\n * <igc-icon name=\"arrow-forward\" mirrored></igc-icon>\n * ```\n *\n * @example\n * ```typescript\n * // Register a custom icon\n * import { registerIconFromText } from 'igniteui-webcomponents';\n *\n * const customIconSvg = '<svg viewBox=\"0 0 24 24\">...</svg>';\n * registerIconFromText('custom-icon', customIconSvg, 'my-collection');\n * ```\n */\nexport default class IgcIconComponent extends LitElement {\n  public static readonly tagName = 'igc-icon';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcIconComponent);\n  }\n\n  private readonly _internals = addInternalsController(this, {\n    initialARIA: { role: 'img' },\n  });\n\n  private readonly _theming = addThemingController(this, all, {\n    themeChange: this._getIcon,\n  });\n\n  private _boundIconLoaded?: IconCallback;\n\n  @state()\n  private _svg = '';\n\n  /* alternateName: iconName */\n  /**\n   * The name of the icon glyph to draw.\n   *\n   * @attr name\n   *\n   * @remarks\n   * The icon name can be:\n   * - A direct reference to a registered icon in the specified collection\n   * - An alias that resolves to different icons based on the current theme\n   *\n   * When the icon name or collection changes, the component automatically\n   * fetches and renders the new icon.\n   */\n  @property()\n  public name = '';\n\n  /**\n   * The name of the registered collection for look up of icons.\n   *\n   * @attr collection\n   * @default \"default\"\n   *\n   * @remarks\n   * Collections allow organizing icons into logical groups. The \"default\"\n   * collection is used for most icons.\n   * Custom collections can be created by registering icons with a specific collection name.\n   */\n  @property()\n  public collection = 'default';\n\n  /**\n   * Whether to flip the icon horizontally. Useful for RTL (right-to-left) layouts.\n   *\n   * @attr mirrored\n   * @default false\n   *\n   * @remarks\n   * When true, the icon is flipped horizontally using CSS transform.\n   * This is particularly useful for directional icons (arrows, chevrons)\n   * in right-to-left language contexts.\n   */\n  @property({ type: Boolean, reflect: true })\n  public mirrored = false;\n\n  /** @internal */\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this._boundIconLoaded = this._iconLoaded.bind(this);\n    getIconRegistry().subscribe(this._boundIconLoaded);\n  }\n\n  /** @internal */\n  public override disconnectedCallback(): void {\n    if (this._boundIconLoaded) {\n      getIconRegistry().unsubscribe(this._boundIconLoaded);\n    }\n    super.disconnectedCallback();\n  }\n\n  protected override update(props: PropertyValues<this>): void {\n    if (props.has('name') || props.has('collection')) {\n      this._getIcon();\n    }\n\n    super.update(props);\n  }\n\n  /**\n   * Callback invoked when an icon is registered or updated in the registry.\n   * Re-fetches the icon if it matches this component's name and collection.\n   *\n   * @param name - The name of the registered icon\n   * @param collection - The collection of the registered icon\n   */\n  private _iconLoaded(name: string, collection: string): void {\n    if (this.name === name && this.collection === collection) {\n      this._getIcon();\n    }\n  }\n\n  /**\n   * Fetches and updates the icon from the registry.\n   *\n   * @remarks\n   * This method:\n   * 1. Resolves the icon reference based on the current theme\n   * 2. Retrieves the SVG content from the registry\n   * 3. Updates the component's rendered SVG\n   * 4. Sets the appropriate ARIA label from the icon's title\n   *\n   */\n  private _getIcon(): void {\n    const { name, collection } = getIconRegistry().getIconRef(\n      this.name,\n      this.collection,\n      this._theming.theme\n    );\n    const { svg = '', title = null } =\n      getIconRegistry().get(name, collection) ?? {};\n\n    this._svg = svg;\n    this._internals.setARIA({ ariaLabel: title });\n  }\n\n  protected override render() {\n    return html`${unsafeSVG(this._svg)}`;\n  }\n\n  /* c8 ignore next 8 */\n  @blazorInclude()\n  protected async registerIcon(\n    name: string,\n    url: string,\n    collection = 'default'\n  ) {\n    await registerIcon_impl(name, url, collection);\n  }\n\n  /* c8 ignore next 8 */\n  @blazorInclude()\n  protected registerIconFromText(\n    name: string,\n    iconText: string,\n    collection = 'default'\n  ) {\n    registerIconFromText_impl(name, iconText, collection);\n  }\n\n  /* c8 ignore next 4 */\n  @blazorInclude()\n  protected setIconRef(name: string, collection: string, icon: IconMeta) {\n    setIconRef_impl(name, collection, icon);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-icon': IgcIconComponent;\n  }\n}\n"]}
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, isServer, LitElement, nothing, type PropertyValues } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { addInternalsController } from '#internals/controllers/internals.js';\nimport { blazorInclude } from '#internals/decorators/blazorInclude.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport {\n  getIconRegistry,\n  registerIcon as registerIcon_impl,\n  registerIconFromText as registerIconFromText_impl,\n  setIconRef as setIconRef_impl,\n} from './icon.registry.js';\nimport type { IconMeta } from './registry/types.js';\nimport { styles } from './themes/icon.base.css.js';\nimport { styles as shared } from './themes/shared/icon.common.css.js';\nimport { all } from './themes/themes.js';\n\n/**\n * The icon component allows visualizing collections of pre-registered SVG icons.\n *\n * @element igc-icon\n *\n * @remarks\n * The icon component renders SVG icons from registered icon collections. Icons can be:\n * - Loaded from the internal collection (built-in icons)\n * - Registered dynamically using `registerIcon` or `registerIconFromText`\n * - Referenced by aliases that resolve differently based on the active theme\n *\n * Icons automatically adapt to the current theme when used within a theme provider.\n * The component subscribes to the icon registry and updates automatically when icons\n * are registered or references are updated.\n *\n * @example\n * ```html\n * <!-- Use a built-in icon -->\n * <igc-icon name=\"star\"></igc-icon>\n *\n * <!-- Use an icon from a specific collection -->\n * <igc-icon name=\"search\" collection=\"material\"></igc-icon>\n *\n * <!-- Mirror the icon for RTL layouts -->\n * <igc-icon name=\"arrow-forward\" mirrored></igc-icon>\n * ```\n *\n * @example\n * ```typescript\n * // Register a custom icon\n * import { registerIconFromText } from 'igniteui-webcomponents';\n *\n * const customIconSvg = '<svg viewBox=\"0 0 24 24\">...</svg>';\n * registerIconFromText('custom-icon', customIconSvg, 'my-collection');\n * ```\n */\nexport default class IgcIconComponent extends LitElement {\n  public static readonly tagName = 'igc-icon';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcIconComponent);\n  }\n\n  private readonly _internals = addInternalsController(this);\n\n  private readonly _theming = addThemingController(this, all, {\n    themeChange: this._getIcon,\n  });\n\n  private readonly _onRegistryChange = (): void => this._getIcon();\n\n  /**\n   * Set while a server-rendered host is hydrating, during which `render()`\n   * withholds the SVG so both renders match.\n   */\n  private _hydrating = false;\n\n  @state()\n  private _svg = '';\n\n  /* alternateName: iconName */\n  /**\n   * The name of the icon glyph to draw.\n   *\n   * @attr name\n   *\n   * @remarks\n   * The icon name can be:\n   * - A direct reference to a registered icon in the specified collection\n   * - An alias that resolves to different icons based on the current theme\n   *\n   * When the icon name or collection changes, the component automatically\n   * fetches and renders the new icon.\n   */\n  @property()\n  public name = '';\n\n  /**\n   * The name of the registered collection for look up of icons.\n   *\n   * @attr collection\n   * @default \"default\"\n   *\n   * @remarks\n   * Collections allow organizing icons into logical groups. The \"default\"\n   * collection is used for most icons.\n   * Custom collections can be created by registering icons with a specific collection name.\n   */\n  @property()\n  public collection = 'default';\n\n  /**\n   * Whether to flip the icon horizontally. Useful for RTL (right-to-left) layouts.\n   *\n   * @attr mirrored\n   * @default false\n   *\n   * @remarks\n   * When true, the icon is flipped horizontally using CSS transform.\n   * This is particularly useful for directional icons (arrows, chevrons)\n   * in right-to-left language contexts.\n   */\n  @property({ type: Boolean, reflect: true })\n  public mirrored = false;\n\n  /** @internal */\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    getIconRegistry().subscribe(this._onRegistryChange);\n  }\n\n  /** @internal */\n  public override disconnectedCallback(): void {\n    getIconRegistry().unsubscribe(this._onRegistryChange);\n    super.disconnectedCallback();\n  }\n\n  /** @internal */\n  protected override createRenderRoot(): HTMLElement | DocumentFragment {\n    this._hydrating = this.shadowRoot !== null;\n    return super.createRenderRoot();\n  }\n\n  protected override update(props: PropertyValues<this>): void {\n    if (props.has('name') || props.has('collection')) {\n      this._getIcon();\n    }\n\n    super.update(props);\n  }\n\n  protected override firstUpdated(): void {\n    if (this._hydrating) {\n      this._hydrating = false;\n\n      // Off the current update cycle - avoids Lit's change-in-update warning.\n      if (this._svg) {\n        queueMicrotask(() => this.requestUpdate());\n      }\n    }\n  }\n\n  private _getIcon(): void {\n    const registry = getIconRegistry();\n    const { name, collection } = registry.getIconRef(\n      this.name,\n      this.collection,\n      this._theming.theme\n    );\n    const { svg = '', title } = registry.get(name, collection) ?? {};\n\n    // An unnamed icon is decorative, and an unnamed `img` is only noise.\n    const labelled =\n      Boolean(title) ||\n      this.hasAttribute('aria-label') ||\n      this.hasAttribute('aria-labelledby');\n\n    this._svg = svg;\n    this._internals.setARIA({\n      role: labelled ? 'img' : null,\n      ariaLabel: title ?? null,\n    });\n  }\n\n  protected override render() {\n    return isServer || this._hydrating\n      ? nothing\n      : html`${unsafeSVG(this._svg)}`;\n  }\n\n  /* c8 ignore next 8 */\n  @blazorInclude()\n  protected async registerIcon(\n    name: string,\n    url: string,\n    collection = 'default',\n    stripMeta = false\n  ) {\n    await registerIcon_impl(name, url, { collection, stripMeta });\n  }\n\n  /* c8 ignore next 8 */\n  @blazorInclude()\n  protected registerIconFromText(\n    name: string,\n    iconText: string,\n    collection = 'default',\n    stripMeta = false\n  ) {\n    registerIconFromText_impl(name, iconText, { collection, stripMeta });\n  }\n\n  /* c8 ignore next 4 */\n  @blazorInclude()\n  protected setIconRef(name: string, collection: string, icon: IconMeta) {\n    setIconRef_impl(name, collection, icon);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-icon': IgcIconComponent;\n  }\n}\n"]}