@truenas/ui-components 0.1.9 → 0.1.11

package/README.md

@@ -54,6 +54,30 @@ Or import in your main styles file:
 @import '@truenas/ui-components/src/styles/themes.css';
 ```
 
+### 3. Configure Icon System (Required)
+
+The icon system requires the sprite to be loaded before the application renders. Add this to your `main.ts` or application bootstrap:
+
+```typescript
+import { provideAppInitializer } from '@angular/core';
+import { TnSpriteLoaderService } from '@truenas/ui-components';
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    // ... other providers
+    provideAppInitializer(() => {
+      const spriteLoader = inject(TnSpriteLoaderService);
+      return spriteLoader.ensureSpriteLoaded();
+    }),
+  ],
+});
+```
+
+**Why is this required?**
+- Icons are rendered synchronously for optimal performance and test reliability
+- The sprite must be preloaded at app startup to avoid showing fallback text
+- Without this initializer, icons will display as abbreviations (e.g., "FO" for "folder") until the sprite loads
+
 ## Icon System
 
 ### Using Icons
@@ -324,6 +348,46 @@ projects/truenas-ui/
 - Firefox (latest)
 - Safari (latest)
 
+## Migration Guide
+
+### Upgrading to v0.2.0+ (Icon System Changes)
+
+**Breaking Change:** The icon system now requires `APP_INITIALIZER` setup.
+
+**Before (v0.1.x):**
+```typescript
+// Icons worked without any special setup
+bootstrapApplication(AppComponent, {
+  providers: [/* your providers */]
+});
+```
+
+**After (v0.2.0+):**
+```typescript
+import { provideAppInitializer, inject } from '@angular/core';
+import { TnSpriteLoaderService } from '@truenas/ui-components';
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideAppInitializer(() => {
+      const spriteLoader = inject(TnSpriteLoaderService);
+      return spriteLoader.ensureSpriteLoaded();
+    }),
+    // ... your other providers
+  ]
+});
+```
+
+**What changed:**
+- Icons now resolve synchronously for better performance and test reliability
+- Sprite must be preloaded at app startup via `APP_INITIALIZER`
+- Without this setup, icons will show text fallbacks until sprite loads asynchronously
+
+**Benefits:**
+- ✅ Faster icon rendering (no async delay)
+- ✅ More reliable unit tests (no timing issues)
+- ✅ Cleaner code (no `whenStable()` workarounds needed)
+
 ## License
 
 Copyright © iXsystems, Inc.

package/assets/tn-icons/custom/truenas-connect-logo.svg

@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="43.494" height="28.99" fill="none"><g style="fill: rgb(0, 0, 0);"><path d="M34.436 10.874A12.849 12.849 0 0 0 21.755.004 14.536 14.536 0 0 0 9.073 7.25 10.404 10.404 0 0 0 .015 18.12c0 6.003 4.866 10.87 10.87 10.87h23.551a9.058 9.058 0 0 0 9.058-9.058 9.67 9.67 0 0 0-9.058-9.058Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;" class="fills"/></g><g style="fill: rgb(0, 0, 0);"><path d="M34.319 14.237v5.358l-11.47 6.626v-5.358Z" class="fills"/><path d="M20.654 20.863v5.358L9.175 19.594v-5.357l5.187 2.99a.076.076 0 0 0 .019.012Z" class="fills"/><path d="m26.392 16.283-4.641 2.685-4.644-2.68 4.644-2.681Z" class="fills"/><path d="m33.226 12.339-4.643 2.68-5.734-3.314V6.343Z" class="fills"/><path d="M20.654 6.343v5.362l-5.741 3.311-4.644-2.677Z" class="fills"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 29">
+<path fill-rule="evenodd" d="M34.436 10.874A12.849 12.849 0 0 0 21.755.004 14.536 14.536 0 0 0 9.073 7.25 10.404 10.404 0 0 0 .015 18.12c0 6.003 4.866 10.87 10.87 10.87h23.551a9.058 9.058 0 0 0 9.058-9.058 9.67 9.67 0 0 0-9.058-9.058ZM34.319 14.237v5.358l-11.47 6.626v-5.358ZM20.654 20.863v5.358L9.175 19.594v-5.357l5.187 2.99a.076.076 0 0 0 .019.012ZM26.392 16.283l-4.641 2.685-4.644-2.68 4.644-2.681ZM33.226 12.339l-4.643 2.68-5.734-3.314V6.343ZM20.654 6.343v5.362l-5.741 3.311-4.644-2.677Z"/>
+</svg>

package/fesm2022/truenas-ui-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, Component, inject, Injectable, viewChild, ChangeDetectorRef, effect, computed, ViewEncapsulation, Directive, contentChildren, output, signal, forwardRef, ElementRef, ViewContainerRef, contentChild, HostListener, TemplateRef, IterableDiffers, Pipe, model, PLATFORM_ID } from '@angular/core';
+import { input, ChangeDetectionStrategy, Component, inject, Injectable, viewChild, signal, effect, computed, ViewEncapsulation, Directive, contentChildren, output, forwardRef, ElementRef, ViewContainerRef, contentChild, ChangeDetectorRef, HostListener, TemplateRef, IterableDiffers, Pipe, model, PLATFORM_ID } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import { mdiCheckCircle, mdiAlertCircle, mdiAlert, mdiInformation, mdiDotsVertical, mdiFolderOpen, mdiLock, mdiLoading, mdiFolderPlus, mdiFolderNetwork, mdiHarddisk, mdiDatabase, mdiFile, mdiFolder } from '@mdi/js';
@@ -403,78 +403,55 @@ class TnIconComponent {
      */
     fullSize = input(false, ...(ngDevMode ? [{ debugName: "fullSize" }] : []));
     svgContainer = viewChild('svgContainer', ...(ngDevMode ? [{ debugName: "svgContainer" }] : []));
-    iconResult = { source: 'text', content: '?' };
+    iconResult = signal({ source: 'text', content: '?' }, ...(ngDevMode ? [{ debugName: "iconResult" }] : []));
     iconRegistry = inject(TnIconRegistryService);
-    cdr = inject(ChangeDetectorRef);
     sanitizer = inject(DomSanitizer);
     constructor() {
-        // Use effect to watch for changes in name or library
+        // Effect 1: Resolve icons when name or library changes
         effect(() => {
-            // Track signals to re-run effect when they change
-            this.name();
-            this.library();
-            // Trigger icon resolution when name or library changes
-            this.resolveIcon()
-                .then(() => {
-                this.cdr.markForCheck();
-                setTimeout(() => this.updateSvgContent(), 0);
-            })
-                .catch((error) => {
-                console.error('[TnIcon] Resolution failed (onChange)', error);
-                this.iconResult = { source: 'text', content: '!' };
-                this.cdr.markForCheck();
-            });
+            const name = this.name();
+            const library = this.library();
+            const result = this.resolveIcon(name, library);
+            this.iconResult.set(result);
+        });
+        // Effect 2: Update SVG DOM when container is available and content changes
+        effect(() => {
+            const container = this.svgContainer();
+            const content = this.sanitizedContent();
+            const result = this.iconResult();
+            if (result.source === 'svg' && container && typeof content === 'string') {
+                // Bypass Angular's sanitization by setting innerHTML directly
+                container.nativeElement.innerHTML = content;
+            }
         });
-    }
-    ngAfterViewInit() {
-        this.updateSvgContent();
     }
     effectiveAriaLabel = computed(() => {
         return this.ariaLabel() || this.name() || 'Icon';
     }, ...(ngDevMode ? [{ debugName: "effectiveAriaLabel" }] : []));
     sanitizedContent = computed(() => {
-        const content = this.iconResult.content;
+        const content = this.iconResult().content;
         // Handle mock SafeHtml objects from Storybook
         if (content && typeof content === 'object' && content.changingThisBreaksApplicationSecurity) {
             return content.changingThisBreaksApplicationSecurity;
         }
         return content;
     }, ...(ngDevMode ? [{ debugName: "sanitizedContent" }] : []));
-    updateSvgContent() {
-        const svgContainer = this.svgContainer();
-        if (this.iconResult.source === 'svg' && svgContainer) {
-            const content = this.sanitizedContent();
-            if (typeof content === 'string') {
-                // Bypass Angular's sanitization by setting innerHTML directly
-                svgContainer.nativeElement.innerHTML = content;
-            }
-        }
-    }
-    async resolveIcon() {
-        if (!this.name()) {
-            this.iconResult = { source: 'text', content: '?' };
-            return;
-        }
-        // Wait for sprite to load (if it's being loaded)
-        try {
-            await this.iconRegistry.getSpriteLoader().ensureSpriteLoaded();
-        }
-        catch (error) {
-            // Sprite loading failed, continue with other resolution methods
-            console.warn('[TnIcon] Sprite loading failed, falling back to other icon sources:', error);
+    resolveIcon(name, library) {
+        if (!name) {
+            return { source: 'text', content: '?' };
         }
         // Construct the effective icon name based on library attribute
-        let effectiveIconName = this.name();
-        if (this.library() === 'mdi' && !this.name().startsWith('mdi-')) {
-            effectiveIconName = `mdi-${this.name()}`;
+        let effectiveIconName = name;
+        if (library === 'mdi' && !name.startsWith('mdi-')) {
+            effectiveIconName = `mdi-${name}`;
         }
-        else if (this.library() === 'material' && !this.name().startsWith('mat-')) {
+        else if (library === 'material' && !name.startsWith('mat-')) {
             // Material icons get mat- prefix in sprite
-            effectiveIconName = `mat-${this.name()}`;
+            effectiveIconName = `mat-${name}`;
         }
-        else if (this.library() === 'lucide' && !this.name().includes(':')) {
+        else if (library === 'lucide' && !name.includes(':')) {
             // Convert to registry format for Lucide icons
-            effectiveIconName = `lucide:${this.name()}`;
+            effectiveIconName = `lucide:${name}`;
         }
         // 1. Try icon registry (libraries and custom icons)
         const iconOptions = {
@@ -490,29 +467,25 @@ class TnIconComponent {
             }
         }
         if (registryResult) {
-            this.iconResult = registryResult;
-            return;
+            return registryResult;
         }
         // 2. Try built-in third-party patterns (deprecated - use registry instead)
         const thirdPartyResult = this.tryThirdPartyIcon(effectiveIconName);
         if (thirdPartyResult) {
-            this.iconResult = thirdPartyResult;
-            return;
+            return thirdPartyResult;
         }
         // 3. Try CSS class (Font Awesome, Material Icons, etc.)
         const cssResult = this.tryCssIcon(effectiveIconName);
         if (cssResult) {
-            this.iconResult = cssResult;
-            return;
+            return cssResult;
         }
         // 4. Try Unicode mapping
         const unicodeResult = this.tryUnicodeIcon(effectiveIconName);
         if (unicodeResult) {
-            this.iconResult = unicodeResult;
-            return;
+            return unicodeResult;
         }
         // 5. Fallback to text abbreviation
-        this.iconResult = {
+        return {
             source: 'text',
             content: this.generateTextAbbreviation(effectiveIconName)
         };
@@ -557,13 +530,6 @@ class TnIconComponent {
                 content: `material-icons material-icons-${materialName}`
             };
         }
-        // Check if class exists in document
-        if (this.cssClassExists(name)) {
-            return {
-                source: 'css',
-                content: name
-            };
-        }
         return null;
     }
     tryUnicodeIcon(name) {
@@ -604,16 +570,8 @@ class TnIconComponent {
         // Default to first 2 characters
         return name.substring(0, 2).toUpperCase();
     }
-    cssClassExists(_className) {
-        if (typeof document === 'undefined') {
-            return false;
-        }
-        // For now, only return true for known CSS icon patterns
-        // In real implementation, consumers would override this method
-        return false; // Disable generic CSS class checking for now
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnIconComponent, isStandalone: true, selector: "tn-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, library: { classPropertyName: "library", publicName: "library", isSignal: true, isRequired: false, transformFunction: null }, fullSize: { classPropertyName: "fullSize", publicName: "fullSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.name": "name()", "attr.library": "library()", "attr.size": "size()", "attr.color": "color()", "attr.full-size": "fullSize() || null" } }, viewQueries: [{ propertyName: "svgContainer", first: true, predicate: ["svgContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"tn-icon\"\n  role=\"img\"\n  [ngClass]=\"fullSize() ? 'tn-icon--full' : 'tn-icon--' + size()\"\n  [style.color]=\"color()\"\n  [attr.aria-label]=\"effectiveAriaLabel()\"\n  [attr.title]=\"tooltip()\">\n  \n\n  @switch (iconResult.source) {\n    <!-- Sprite icons (from generated sprite.svg) -->\n    @case ('sprite') {\n      <svg\n           class=\"tn-icon__sprite\"\n           aria-hidden=\"true\">\n        <use [attr.href]=\"iconResult.spriteUrl\" />\n      </svg>\n    }\n\n    <!-- SVG content (from third-party libraries or assets) -->\n    @case ('svg') {\n      <div\n           #svgContainer\n           class=\"tn-icon__svg\">\n      </div>\n    }\n\n    <!-- CSS class icons (Font Awesome, Material Icons, etc.) -->\n    @case ('css') {\n      <i\n         aria-hidden=\"true\"\n         [class]=\"'tn-icon__css ' + iconResult.content\">\n      </i>\n    }\n\n    <!-- Unicode characters -->\n    @case ('unicode') {\n      <span\n            class=\"tn-icon__unicode\"\n            aria-hidden=\"true\">{{ iconResult.content }}</span>\n    }\n\n    <!-- Text abbreviation fallback -->\n    @default {\n      <span\n            class=\"tn-icon__text\"\n            aria-hidden=\"true\">{{ iconResult.content }}</span>\n    }\n  }\n</div>", styles: [".tn-icon{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.tn-icon--xs{width:var(--tn-icon-xs)!important;height:var(--tn-icon-xs)!important;font-size:var(--tn-icon-xs)!important}.tn-icon--sm{width:var(--tn-icon-sm)!important;height:var(--tn-icon-sm)!important;font-size:var(--tn-icon-sm)!important}.tn-icon--md{width:var(--tn-icon-md)!important;height:var(--tn-icon-md)!important;font-size:var(--tn-icon-md)!important}.tn-icon--lg{width:var(--tn-icon-lg)!important;height:var(--tn-icon-lg)!important;font-size:var(--tn-icon-lg)!important}.tn-icon--xl{width:var(--tn-icon-xl)!important;height:var(--tn-icon-xl)!important;font-size:var(--tn-icon-xl)!important}.tn-icon--full{width:100%!important;height:100%!important}.tn-icon__sprite{width:100%;height:100%;fill:currentColor;color:inherit}.tn-icon__svg{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.tn-icon__svg :global(svg){width:100%;height:100%;fill:currentColor;color:inherit}.tn-icon__css{font-size:inherit;line-height:1;color:inherit}.tn-icon__unicode{font-size:inherit;line-height:1;color:inherit;text-align:center}.tn-icon__text{font-size:.75em;font-weight:600;line-height:1;color:inherit;text-align:center;opacity:.7}.tn-icon{width:var(--tn-icon-size, var(--tn-icon-md));height:var(--tn-icon-size, var(--tn-icon-md));color:var(--tn-icon-color, currentColor)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnIconComponent, isStandalone: true, selector: "tn-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, library: { classPropertyName: "library", publicName: "library", isSignal: true, isRequired: false, transformFunction: null }, fullSize: { classPropertyName: "fullSize", publicName: "fullSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.name": "name()", "attr.library": "library()", "attr.size": "size()", "attr.color": "color()", "attr.full-size": "fullSize() || null" } }, viewQueries: [{ propertyName: "svgContainer", first: true, predicate: ["svgContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"tn-icon\"\n  role=\"img\"\n  [ngClass]=\"fullSize() ? 'tn-icon--full' : 'tn-icon--' + size()\"\n  [style.color]=\"color()\"\n  [attr.aria-label]=\"effectiveAriaLabel()\"\n  [attr.title]=\"tooltip()\">\n  \n\n  @switch (iconResult().source) {\n    <!-- Sprite icons (from generated sprite.svg) -->\n    @case ('sprite') {\n      <svg\n           class=\"tn-icon__sprite\"\n           aria-hidden=\"true\">\n        <use [attr.href]=\"iconResult().spriteUrl\" />\n      </svg>\n    }\n\n    <!-- SVG content (from third-party libraries or assets) -->\n    @case ('svg') {\n      <div\n           #svgContainer\n           class=\"tn-icon__svg\">\n      </div>\n    }\n\n    <!-- CSS class icons (Font Awesome, Material Icons, etc.) -->\n    @case ('css') {\n      <i\n         aria-hidden=\"true\"\n         [class]=\"'tn-icon__css ' + iconResult().content\">\n      </i>\n    }\n\n    <!-- Unicode characters -->\n    @case ('unicode') {\n      <span\n            class=\"tn-icon__unicode\"\n            aria-hidden=\"true\">{{ iconResult().content }}</span>\n    }\n\n    <!-- Text abbreviation fallback -->\n    @default {\n      <span\n            class=\"tn-icon__text\"\n            aria-hidden=\"true\">{{ iconResult().content }}</span>\n    }\n  }\n</div>", styles: [".tn-icon{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.tn-icon--xs{width:var(--tn-icon-xs)!important;height:var(--tn-icon-xs)!important;font-size:var(--tn-icon-xs)!important}.tn-icon--sm{width:var(--tn-icon-sm)!important;height:var(--tn-icon-sm)!important;font-size:var(--tn-icon-sm)!important}.tn-icon--md{width:var(--tn-icon-md)!important;height:var(--tn-icon-md)!important;font-size:var(--tn-icon-md)!important}.tn-icon--lg{width:var(--tn-icon-lg)!important;height:var(--tn-icon-lg)!important;font-size:var(--tn-icon-lg)!important}.tn-icon--xl{width:var(--tn-icon-xl)!important;height:var(--tn-icon-xl)!important;font-size:var(--tn-icon-xl)!important}.tn-icon--full{width:100%!important;height:100%!important}.tn-icon__sprite{width:100%;height:100%;fill:currentColor;color:inherit}.tn-icon__svg{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.tn-icon__svg :global(svg){width:100%;height:100%;fill:currentColor;color:inherit}.tn-icon__css{font-size:inherit;line-height:1;color:inherit}.tn-icon__unicode{font-size:inherit;line-height:1;color:inherit;text-align:center}.tn-icon__text{font-size:.75em;font-weight:600;line-height:1;color:inherit;text-align:center;opacity:.7}.tn-icon{width:var(--tn-icon-size, var(--tn-icon-md));height:var(--tn-icon-size, var(--tn-icon-md));color:var(--tn-icon-color, currentColor)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnIconComponent, decorators: [{
             type: Component,
@@ -623,7 +581,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         '[attr.size]': 'size()',
                         '[attr.color]': 'color()',
                         '[attr.full-size]': 'fullSize() || null'
-                    }, template: "<div\n  class=\"tn-icon\"\n  role=\"img\"\n  [ngClass]=\"fullSize() ? 'tn-icon--full' : 'tn-icon--' + size()\"\n  [style.color]=\"color()\"\n  [attr.aria-label]=\"effectiveAriaLabel()\"\n  [attr.title]=\"tooltip()\">\n  \n\n  @switch (iconResult.source) {\n    <!-- Sprite icons (from generated sprite.svg) -->\n    @case ('sprite') {\n      <svg\n           class=\"tn-icon__sprite\"\n           aria-hidden=\"true\">\n        <use [attr.href]=\"iconResult.spriteUrl\" />\n      </svg>\n    }\n\n    <!-- SVG content (from third-party libraries or assets) -->\n    @case ('svg') {\n      <div\n           #svgContainer\n           class=\"tn-icon__svg\">\n      </div>\n    }\n\n    <!-- CSS class icons (Font Awesome, Material Icons, etc.) -->\n    @case ('css') {\n      <i\n         aria-hidden=\"true\"\n         [class]=\"'tn-icon__css ' + iconResult.content\">\n      </i>\n    }\n\n    <!-- Unicode characters -->\n    @case ('unicode') {\n      <span\n            class=\"tn-icon__unicode\"\n            aria-hidden=\"true\">{{ iconResult.content }}</span>\n    }\n\n    <!-- Text abbreviation fallback -->\n    @default {\n      <span\n            class=\"tn-icon__text\"\n            aria-hidden=\"true\">{{ iconResult.content }}</span>\n    }\n  }\n</div>", styles: [".tn-icon{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.tn-icon--xs{width:var(--tn-icon-xs)!important;height:var(--tn-icon-xs)!important;font-size:var(--tn-icon-xs)!important}.tn-icon--sm{width:var(--tn-icon-sm)!important;height:var(--tn-icon-sm)!important;font-size:var(--tn-icon-sm)!important}.tn-icon--md{width:var(--tn-icon-md)!important;height:var(--tn-icon-md)!important;font-size:var(--tn-icon-md)!important}.tn-icon--lg{width:var(--tn-icon-lg)!important;height:var(--tn-icon-lg)!important;font-size:var(--tn-icon-lg)!important}.tn-icon--xl{width:var(--tn-icon-xl)!important;height:var(--tn-icon-xl)!important;font-size:var(--tn-icon-xl)!important}.tn-icon--full{width:100%!important;height:100%!important}.tn-icon__sprite{width:100%;height:100%;fill:currentColor;color:inherit}.tn-icon__svg{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.tn-icon__svg :global(svg){width:100%;height:100%;fill:currentColor;color:inherit}.tn-icon__css{font-size:inherit;line-height:1;color:inherit}.tn-icon__unicode{font-size:inherit;line-height:1;color:inherit;text-align:center}.tn-icon__text{font-size:.75em;font-weight:600;line-height:1;color:inherit;text-align:center;opacity:.7}.tn-icon{width:var(--tn-icon-size, var(--tn-icon-md));height:var(--tn-icon-size, var(--tn-icon-md));color:var(--tn-icon-color, currentColor)}\n"] }]
+                    }, template: "<div\n  class=\"tn-icon\"\n  role=\"img\"\n  [ngClass]=\"fullSize() ? 'tn-icon--full' : 'tn-icon--' + size()\"\n  [style.color]=\"color()\"\n  [attr.aria-label]=\"effectiveAriaLabel()\"\n  [attr.title]=\"tooltip()\">\n  \n\n  @switch (iconResult().source) {\n    <!-- Sprite icons (from generated sprite.svg) -->\n    @case ('sprite') {\n      <svg\n           class=\"tn-icon__sprite\"\n           aria-hidden=\"true\">\n        <use [attr.href]=\"iconResult().spriteUrl\" />\n      </svg>\n    }\n\n    <!-- SVG content (from third-party libraries or assets) -->\n    @case ('svg') {\n      <div\n           #svgContainer\n           class=\"tn-icon__svg\">\n      </div>\n    }\n\n    <!-- CSS class icons (Font Awesome, Material Icons, etc.) -->\n    @case ('css') {\n      <i\n         aria-hidden=\"true\"\n         [class]=\"'tn-icon__css ' + iconResult().content\">\n      </i>\n    }\n\n    <!-- Unicode characters -->\n    @case ('unicode') {\n      <span\n            class=\"tn-icon__unicode\"\n            aria-hidden=\"true\">{{ iconResult().content }}</span>\n    }\n\n    <!-- Text abbreviation fallback -->\n    @default {\n      <span\n            class=\"tn-icon__text\"\n            aria-hidden=\"true\">{{ iconResult().content }}</span>\n    }\n  }\n</div>", styles: [".tn-icon{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.tn-icon--xs{width:var(--tn-icon-xs)!important;height:var(--tn-icon-xs)!important;font-size:var(--tn-icon-xs)!important}.tn-icon--sm{width:var(--tn-icon-sm)!important;height:var(--tn-icon-sm)!important;font-size:var(--tn-icon-sm)!important}.tn-icon--md{width:var(--tn-icon-md)!important;height:var(--tn-icon-md)!important;font-size:var(--tn-icon-md)!important}.tn-icon--lg{width:var(--tn-icon-lg)!important;height:var(--tn-icon-lg)!important;font-size:var(--tn-icon-lg)!important}.tn-icon--xl{width:var(--tn-icon-xl)!important;height:var(--tn-icon-xl)!important;font-size:var(--tn-icon-xl)!important}.tn-icon--full{width:100%!important;height:100%!important}.tn-icon__sprite{width:100%;height:100%;fill:currentColor;color:inherit}.tn-icon__svg{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.tn-icon__svg :global(svg){width:100%;height:100%;fill:currentColor;color:inherit}.tn-icon__css{font-size:inherit;line-height:1;color:inherit}.tn-icon__unicode{font-size:inherit;line-height:1;color:inherit;text-align:center}.tn-icon__text{font-size:.75em;font-weight:600;line-height:1;color:inherit;text-align:center;opacity:.7}.tn-icon{width:var(--tn-icon-size, var(--tn-icon-md));height:var(--tn-icon-size, var(--tn-icon-md));color:var(--tn-icon-color, currentColor)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], library: [{ type: i0.Input, args: [{ isSignal: true, alias: "library", required: false }] }], fullSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullSize", required: false }] }], svgContainer: [{ type: i0.ViewChild, args: ['svgContainer', { isSignal: true }] }] } });
 
 /**
@@ -2587,6 +2545,196 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     ], template: "<div class=\"tn-select-container\" [attr.data-testid]=\"testId()\">\n  <!-- Select Trigger -->\n  <div\n    class=\"tn-select-trigger\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    [class.disabled]=\"isDisabled()\"\n    [class.open]=\"isOpen()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"true\"\n    [attr.aria-controls]=\"isOpen() ? 'tn-select-dropdown-' + testId() : null\"\n    [attr.aria-label]=\"placeholder()\"\n    (click)=\"toggleDropdown()\"\n    (keydown)=\"onKeydown($event)\">\n\n    <!-- Display Text -->\n    <span\n      class=\"tn-select-text\"\n      [class.placeholder]=\"selectedValue() === null || selectedValue() === undefined\">\n      {{ getDisplayText() }}\n    </span>\n\n    <!-- Dropdown Arrow -->\n    <div class=\"tn-select-arrow\" [class.open]=\"isOpen()\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <polyline points=\"6,9 12,15 18,9\" />\n      </svg>\n    </div>\n  </div>\n\n  <!-- Dropdown Menu -->\n  @if (isOpen()) {\n    <div\n      class=\"tn-select-dropdown\"\n      role=\"listbox\"\n      [attr.id]=\"'tn-select-dropdown-' + testId()\">\n\n      <!-- Options List -->\n      <div class=\"tn-select-options\">\n        <!-- Regular Options -->\n        @for (option of options(); track $index) {\n          <div\n            class=\"tn-select-option\"\n            role=\"option\"\n            [attr.tabindex]=\"option.disabled ? null : 0\"\n            [class.selected]=\"isSelected()(option)\"\n            [class.disabled]=\"option.disabled\"\n            [attr.aria-selected]=\"isSelected()(option)\"\n            [attr.aria-disabled]=\"option.disabled\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onOptionClick(option)\"\n            (keydown.enter)=\"onOptionClick(option)\"\n            (keydown.space)=\"onOptionClick(option)\">\n\n            {{ option.label }}\n          </div>\n        }\n\n        <!-- Option Groups -->\n        @for (group of optionGroups(); track $index; let isFirst = $first) {\n          <!-- Group Separator (not shown before first group if we have regular options) -->\n          @if (!isFirst || options().length > 0) {\n            <div\n              class=\"tn-select-separator\"\n              role=\"separator\">\n            </div>\n          }\n\n          <!-- Group Label -->\n          <div\n            class=\"tn-select-group-label\"\n            [class.disabled]=\"group.disabled\">\n            {{ group.label }}\n          </div>\n\n          <!-- Group Options -->\n          @for (option of group.options; track $index) {\n            <div\n              class=\"tn-select-option\"\n              role=\"option\"\n              [attr.tabindex]=\"option.disabled || group.disabled ? null : 0\"\n              [class.selected]=\"isSelected()(option)\"\n              [class.disabled]=\"option.disabled || group.disabled\"\n              [attr.aria-selected]=\"isSelected()(option)\"\n              [attr.aria-disabled]=\"option.disabled || group.disabled\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"onOptionClick(option)\"\n              (keydown.enter)=\"onOptionClick(option)\"\n              (keydown.space)=\"onOptionClick(option)\">\n\n              {{ option.label }}\n            </div>\n          }\n        }\n\n        <!-- No Options Message -->\n        @if (!hasAnyOptions()) {\n          <div class=\"tn-select-no-options\">\n            No options available\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>", styles: [".tn-select-container{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-select-label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:var(--tn-fg1, #333);line-height:1.4}.tn-select-label.required .required-asterisk{color:var(--tn-error, #dc3545);margin-left:.25rem}.tn-select-trigger{position:relative;display:flex;align-items:center;min-height:2.5rem;padding:.5rem 2.5rem .5rem .75rem;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;cursor:pointer;transition:all .15s ease-in-out;outline:none;box-sizing:border-box}.tn-select-trigger:hover:not(.disabled){border-color:var(--tn-primary, #007bff)}.tn-select-trigger:focus-visible{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}.tn-select-trigger.open{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px #007bff40}.tn-select-trigger.error{border-color:var(--tn-error, #dc3545)}.tn-select-trigger.error:focus-visible,.tn-select-trigger.error.open{border-color:var(--tn-error, #dc3545);box-shadow:0 0 0 2px #dc354540}.tn-select-trigger.disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-select-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tn-fg1, #212529)}.tn-select-text.placeholder{color:var(--tn-alt-fg1, #999)}.tn-select-arrow{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);color:var(--tn-fg2, #6c757d);transition:transform .15s ease-in-out;pointer-events:none}.tn-select-arrow.open{transform:translateY(-50%) rotate(180deg)}.tn-select-arrow svg{display:block}.tn-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:.25rem;background-color:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;max-height:200px;overflow:hidden}.tn-select-options{overflow-y:auto;padding:.25rem 0;max-height:200px}.tn-select-option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;color:var(--tn-fg1, #212529);transition:background-color .15s ease-in-out;pointer-events:auto;position:relative;z-index:1001}.tn-select-option:hover:not(.disabled){background-color:var(--tn-alt-bg2, #f8f9fa)!important}.tn-select-option.selected{background-color:var(--tn-alt-bg1, #f8f9fa)!important;color:var(--tn-fg1, #212529)}.tn-select-option.selected:hover{background-color:var(--tn-alt-bg2, #f8f9fa)!important}.tn-select-option.disabled{color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-select-separator{height:1px;background:var(--tn-lines, #e0e0e0);margin:.25rem 0}.tn-select-group-label{padding:.375rem .75rem;font-size:.75rem;font-weight:600;color:var(--tn-alt-fg1, #9ca3af);text-transform:uppercase;letter-spacing:.05em;cursor:default;-webkit-user-select:none;user-select:none}.tn-select-group-label.disabled{opacity:.6}.tn-select-no-options{padding:1rem .75rem;text-align:center;color:var(--tn-fg2, #6c757d);font-style:italic}.tn-select-error{margin-top:.25rem;font-size:.75rem;color:var(--tn-error, #dc3545)}@media(prefers-reduced-motion:reduce){.tn-select-trigger,.tn-select-option,.tn-select-arrow{transition:none}}@media(prefers-contrast:high){.tn-select-trigger{border-width:2px}.tn-select-option.selected{outline:2px solid var(--tn-fg1, #000);outline-offset:-2px}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroups", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
 
+/**
+ * Harness for interacting with tn-select in tests.
+ * Provides methods for querying select state, opening/closing the dropdown,
+ * and selecting options.
+ *
+ * @example
+ * ```typescript
+ * // Find a select and choose an option
+ * const select = await loader.getHarness(TnSelectHarness);
+ * await select.selectOption('Option 2');
+ *
+ * // Check the displayed text
+ * expect(await select.getDisplayText()).toBe('Option 2');
+ *
+ * // Filter by displayed text
+ * const fruitSelect = await loader.getHarness(
+ *   TnSelectHarness.with({ displayText: /Apple/i })
+ * );
+ *
+ * // Check disabled state
+ * const disabledSelect = await loader.getHarness(TnSelectHarness);
+ * expect(await disabledSelect.isDisabled()).toBe(true);
+ * ```
+ */
+class TnSelectHarness extends ComponentHarness {
+    /**
+     * The selector for the host element of a `TnSelectComponent` instance.
+     */
+    static hostSelector = 'tn-select';
+    _trigger = this.locatorFor('.tn-select-trigger');
+    _text = this.locatorFor('.tn-select-text');
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a select
+     * with specific attributes.
+     *
+     * @param options Options for filtering which select instances are considered a match.
+     * @returns A `HarnessPredicate` configured with the given options.
+     *
+     * @example
+     * ```typescript
+     * // Find select by exact display text
+     * const select = await loader.getHarness(TnSelectHarness.with({ displayText: 'Apple' }));
+     *
+     * // Find select by regex pattern
+     * const select = await loader.getHarness(TnSelectHarness.with({ displayText: /Option/i }));
+     * ```
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(TnSelectHarness, options)
+            .addOption('displayText', options.displayText, (harness, text) => HarnessPredicate.stringMatches(harness.getDisplayText(), text));
+    }
+    /**
+     * Gets the currently displayed text (selected label or placeholder).
+     *
+     * @returns Promise resolving to the display text content.
+     *
+     * @example
+     * ```typescript
+     * const select = await loader.getHarness(TnSelectHarness);
+     * const text = await select.getDisplayText();
+     * expect(text).toBe('Select an option');
+     * ```
+     */
+    async getDisplayText() {
+        const text = await this._text();
+        return (await text.text()).trim();
+    }
+    /**
+     * Checks whether the select is disabled.
+     *
+     * @returns Promise resolving to true if the select trigger has the disabled class.
+     *
+     * @example
+     * ```typescript
+     * const select = await loader.getHarness(TnSelectHarness);
+     * expect(await select.isDisabled()).toBe(false);
+     * ```
+     */
+    async isDisabled() {
+        const trigger = await this._trigger();
+        return trigger.hasClass('disabled');
+    }
+    /**
+     * Checks whether the dropdown is currently open.
+     *
+     * @returns Promise resolving to true if the dropdown is open.
+     *
+     * @example
+     * ```typescript
+     * const select = await loader.getHarness(TnSelectHarness);
+     * expect(await select.isOpen()).toBe(false);
+     * await select.open();
+     * expect(await select.isOpen()).toBe(true);
+     * ```
+     */
+    async isOpen() {
+        const trigger = await this._trigger();
+        return trigger.hasClass('open');
+    }
+    /**
+     * Opens the dropdown. No-op if already open.
+     *
+     * @returns Promise that resolves when the dropdown is open.
+     *
+     * @example
+     * ```typescript
+     * const select = await loader.getHarness(TnSelectHarness);
+     * await select.open();
+     * ```
+     */
+    async open() {
+        if (!(await this.isOpen())) {
+            const trigger = await this._trigger();
+            await trigger.click();
+        }
+    }
+    /**
+     * Closes the dropdown. No-op if already closed.
+     *
+     * @returns Promise that resolves when the dropdown is closed.
+     *
+     * @example
+     * ```typescript
+     * const select = await loader.getHarness(TnSelectHarness);
+     * await select.open();
+     * await select.close();
+     * expect(await select.isOpen()).toBe(false);
+     * ```
+     */
+    async close() {
+        if (await this.isOpen()) {
+            const trigger = await this._trigger();
+            await trigger.click();
+        }
+    }
+    /**
+     * Selects an option by its label text. Opens the dropdown if needed.
+     *
+     * @param filter The text to match against option labels. Supports string or RegExp.
+     * @returns Promise that resolves when the option has been selected.
+     *
+     * @example
+     * ```typescript
+     * const select = await loader.getHarness(TnSelectHarness);
+     *
+     * // Select by exact text
+     * await select.selectOption('Option 2');
+     *
+     * // Select by regex
+     * await select.selectOption(/option 2/i);
+     * ```
+     */
+    async selectOption(filter) {
+        await this.open();
+        const options = await this.locatorForAll('.tn-select-option')();
+        for (const option of options) {
+            const text = (await option.text()).trim();
+            const matches = filter instanceof RegExp
+                ? filter.test(text)
+                : text === filter;
+            if (matches) {
+                await option.click();
+                return;
+            }
+        }
+        throw new Error(`Could not find option matching "${filter}"`);
+    }
+    /**
+     * Gets the labels of all available options. Opens the dropdown if needed.
+     *
+     * @returns Promise resolving to an array of option label strings.
+     *
+     * @example
+     * ```typescript
+     * const select = await loader.getHarness(TnSelectHarness);
+     * const options = await select.getOptions();
+     * expect(options).toEqual(['Option 1', 'Option 2', 'Option 3']);
+     * ```
+     */
+    async getOptions() {
+        await this.open();
+        const options = await this.locatorForAll('.tn-select-option')();
+        const labels = [];
+        for (const option of options) {
+            labels.push((await option.text()).trim());
+        }
+        return labels;
+    }
+}
+
 /**
  * Harness for interacting with tn-icon in tests.
  * Provides filtering by icon name and library for existence checks, as well as click interaction.
@@ -8501,5 +8649,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_THEME_DEFINITIONS, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCellDefDirective, TnCheckboxComponent, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateRangeInputComponent, TnDialog, TnDialogShellComponent, TnDividerComponent, TnDividerDirective, TnExpansionPanelComponent, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuComponent, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnSelectComponent, TnSelectionListComponent, TnSlideToggleComponent, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnTabComponent, TnTabPanelComponent, TnTableColumnDirective, TnTableComponent, TnTabsComponent, TnTheme, TnThemeService, TnTimeInputComponent, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, libIconMarker, registerLucideIcons, setupLucideIntegration, tnIconMarker };
+export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_THEME_DEFINITIONS, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCellDefDirective, TnCheckboxComponent, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateRangeInputComponent, TnDialog, TnDialogShellComponent, TnDividerComponent, TnDividerDirective, TnExpansionPanelComponent, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuComponent, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSlideToggleComponent, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnTabComponent, TnTabPanelComponent, TnTableColumnDirective, TnTableComponent, TnTabsComponent, TnTheme, TnThemeService, TnTimeInputComponent, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, libIconMarker, registerLucideIcons, setupLucideIntegration, tnIconMarker };
 //# sourceMappingURL=truenas-ui-components.mjs.map