ngx-dev-toolbar 1.0.3 → 1.0.5

package/fesm2022/ngx-dev-toolbar.mjs

@@ -0,0 +1,4570 @@
+import * as i0 from '@angular/core';
+import { signal, computed, Injectable, Component, ChangeDetectionStrategy, input, inject, ElementRef, output, ViewChild, ContentChild, model, DestroyRef, isDevMode } from '@angular/core';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import * as i1 from '@angular/cdk/overlay';
+import { CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
+import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { BehaviorSubject, combineLatest, map, firstValueFrom, fromEvent } from 'rxjs';
+import { filter, throttleTime } from 'rxjs/operators';
+import * as i1$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i2 from '@angular/cdk/menu';
+import { CdkMenuModule } from '@angular/cdk/menu';
+import { CommonModule } from '@angular/common';
+
+class DevToolbarStateService {
+    constructor() {
+        // Initial state
+        this.state = signal({
+            isHidden: true,
+            activeToolId: null,
+            delay: 3000,
+            error: null,
+            theme: 'dark',
+        });
+        // Selectors
+        this.isVisible = computed(() => !this.state().isHidden || this.hasActiveTool());
+        this.isDarkTheme = computed(() => this.state().theme === 'dark');
+        this.activeToolId = computed(() => this.state().activeToolId);
+        this.hasActiveTool = computed(() => this.state().activeToolId !== null);
+        this.error = computed(() => this.state().error);
+        this.theme = computed(() => this.state().theme);
+        /**
+         * The delay to hide the toolbar
+         */
+        this.delay = computed(() => this.state().delay);
+    }
+    // State updates
+    setVisibility(isVisible) {
+        if (isVisible) {
+            this.state.update((state) => ({
+                ...state,
+                isHidden: false,
+            }));
+        }
+        else {
+            if (this.activeToolId() === null) {
+                setTimeout(() => {
+                    this.state.update((state) => ({
+                        ...state,
+                        isHidden: true,
+                    }));
+                }, this.state().delay);
+            }
+        }
+    }
+    setTheme(theme) {
+        this.state.update((state) => ({
+            ...state,
+            theme,
+        }));
+    }
+    setActiveTool(toolId) {
+        this.state.update((state) => ({
+            ...state,
+            activeToolId: toolId,
+        }));
+        if (toolId === null) {
+            this.setVisibility(false);
+        }
+        else {
+            this.setVisibility(true);
+        }
+    }
+    // Public actions
+    toggleTool(toolId) {
+        const currentToolId = this.activeToolId();
+        this.setActiveTool(currentToolId === toolId ? null : toolId);
+    }
+    toggleVisibility() {
+        this.state.update((state) => ({
+            ...state,
+            isHidden: !state.isHidden,
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarStateService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarStateService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class AngularIconComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AngularIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AngularIconComponent, isStandalone: true, selector: "ndt-angular-icon", ngImport: i0, template: `
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+      <defs>
+        <linearGradient
+          id="angular-gradient"
+          x1="6"
+          x2="18"
+          y1="20"
+          y2="4"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#E40035" />
+          <stop offset=".24" stop-color="#F60A48" />
+          <stop offset=".352" stop-color="#F20755" />
+          <stop offset=".494" stop-color="#DC087D" />
+          <stop offset=".745" stop-color="#9717E7" />
+          <stop offset="1" stop-color="#6C00F5" />
+        </linearGradient>
+      </defs>
+      <g fill="url(#angular-gradient)">
+        <polygon points="14.1,2.7 20.1,15.7 20.7,5.8" />
+        <polygon points="15.6,16.4 8.4,16.4 7.4,18.6 12,21.2 16.6,18.6" />
+        <polygon points="9.6,13.5 14.4,13.5 12,7.7" />
+        <polygon points="9.9,2.7 3.3,5.8 3.9,15.7" />
+      </g>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AngularIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-angular-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+      <defs>
+        <linearGradient
+          id="angular-gradient"
+          x1="6"
+          x2="18"
+          y1="20"
+          y2="4"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#E40035" />
+          <stop offset=".24" stop-color="#F60A48" />
+          <stop offset=".352" stop-color="#F20755" />
+          <stop offset=".494" stop-color="#DC087D" />
+          <stop offset=".745" stop-color="#9717E7" />
+          <stop offset="1" stop-color="#6C00F5" />
+        </linearGradient>
+      </defs>
+      <g fill="url(#angular-gradient)">
+        <polygon points="14.1,2.7 20.1,15.7 20.7,5.8" />
+        <polygon points="15.6,16.4 8.4,16.4 7.4,18.6 12,21.2 16.6,18.6" />
+        <polygon points="9.6,13.5 14.4,13.5 12,7.7" />
+        <polygon points="9.9,2.7 3.3,5.8 3.9,15.7" />
+      </g>
+    </svg>
+  `,
+                }]
+        }] });
+
+class BoltIconComponent {
+    constructor() {
+        this.fill = input('#FFFF');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BoltIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: BoltIconComponent, isStandalone: true, selector: "ndt-bolt-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M160,16,144,96H208l-96,144,16-80H64Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M215.79,118.17a8,8,0,0,0-5-5.66L153.18,90.9l14.66-73.33a8,8,0,0,0-13.69-7l-112,120a8,8,0,0,0,3,13l57.63,21.61L88.16,238.43a8,8,0,0,0,13.69,7l112-120A8,8,0,0,0,215.79,118.17ZM109.37,214l10.47-52.38a8,8,0,0,0-5-9.06L62,132.71l84.62-90.66L136.16,94.43a8,8,0,0,0,5,9.06l52.8,19.8Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BoltIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-bolt-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M160,16,144,96H208l-96,144,16-80H64Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M215.79,118.17a8,8,0,0,0-5-5.66L153.18,90.9l14.66-73.33a8,8,0,0,0-13.69-7l-112,120a8,8,0,0,0,3,13l57.63,21.61L88.16,238.43a8,8,0,0,0,13.69,7l112-120A8,8,0,0,0,215.79,118.17ZM109.37,214l10.47-52.38a8,8,0,0,0-5-9.06L62,132.71l84.62-90.66L136.16,94.43a8,8,0,0,0,5,9.06l52.8,19.8Z"
+      ></path>
+    </svg>
+  `,
+                }]
+        }] });
+
+class BugIconComponent {
+    constructor() {
+        this.fill = input('#FFFF');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BugIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: BugIconComponent, isStandalone: true, selector: "ndt-bug-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M140,88a16,16,0,1,1,16,16A16,16,0,0,1,140,88ZM100,72a16,16,0,1,0,16,16A16,16,0,0,0,100,72Zm120,72a91.84,91.84,0,0,1-2.34,20.64L236.81,173a12,12,0,0,1-9.62,22l-18-7.85a92,92,0,0,1-162.46,0l-18,7.85a12,12,0,1,1-9.62-22l19.15-8.36A91.84,91.84,0,0,1,36,144v-4H16a12,12,0,0,1,0-24H36v-4a91.84,91.84,0,0,1,2.34-20.64L19.19,83a12,12,0,0,1,9.62-22l18,7.85a92,92,0,0,1,162.46,0l18-7.85a12,12,0,1,1,9.62,22l-19.15,8.36A91.84,91.84,0,0,1,220,112v4h20a12,12,0,0,1,0,24H220ZM60,116H196v-4a68,68,0,0,0-136,0Zm56,94.92V140H60v4A68.1,68.1,0,0,0,116,210.92ZM196,144v-4H140v70.92A68.1,68.1,0,0,0,196,144Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BugIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-bug-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M140,88a16,16,0,1,1,16,16A16,16,0,0,1,140,88ZM100,72a16,16,0,1,0,16,16A16,16,0,0,0,100,72Zm120,72a91.84,91.84,0,0,1-2.34,20.64L236.81,173a12,12,0,0,1-9.62,22l-18-7.85a92,92,0,0,1-162.46,0l-18,7.85a12,12,0,1,1-9.62-22l19.15-8.36A91.84,91.84,0,0,1,36,144v-4H16a12,12,0,0,1,0-24H36v-4a91.84,91.84,0,0,1,2.34-20.64L19.19,83a12,12,0,0,1,9.62-22l18,7.85a92,92,0,0,1,162.46,0l18-7.85a12,12,0,1,1,9.62,22l-19.15,8.36A91.84,91.84,0,0,1,220,112v4h20a12,12,0,0,1,0,24H220ZM60,116H196v-4a68,68,0,0,0-136,0Zm56,94.92V140H60v4A68.1,68.1,0,0,0,116,210.92ZM196,144v-4H140v70.92A68.1,68.1,0,0,0,196,144Z"
+      ></path>
+    </svg>
+  `,
+                }]
+        }] });
+
+class CodeIconComponent {
+    constructor() {
+        this.fill = input('#FFFF');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CodeIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: CodeIconComponent, isStandalone: true, selector: "ndt-code-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path d="M240,128l-48,40H64L16,128,64,88H192Z" opacity="0.2"></path>
+      <path
+        d="M69.12,94.15,28.5,128l40.62,33.85a8,8,0,1,1-10.24,12.29l-48-40a8,8,0,0,1,0-12.29l48-40a8,8,0,0,1,10.24,12.3Zm176,27.7-48-40a8,8,0,1,0-10.24,12.3L227.5,128l-40.62,33.85a8,8,0,1,0,10.24,12.29l48-40a8,8,0,0,0,0-12.29ZM162.73,32.48a8,8,0,0,0-10.25,4.79l-64,176a8,8,0,0,0,4.79,10.26A8.14,8.14,0,0,0,96,224a8,8,0,0,0,7.52-5.27l64-176A8,8,0,0,0,162.73,32.48Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CodeIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-code-icon',
+                    standalone: true,
+                    template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path d="M240,128l-48,40H64L16,128,64,88H192Z" opacity="0.2"></path>
+      <path
+        d="M69.12,94.15,28.5,128l40.62,33.85a8,8,0,1,1-10.24,12.29l-48-40a8,8,0,0,1,0-12.29l48-40a8,8,0,0,1,10.24,12.3Zm176,27.7-48-40a8,8,0,1,0-10.24,12.3L227.5,128l-40.62,33.85a8,8,0,1,0,10.24,12.29l48-40a8,8,0,0,0,0-12.29ZM162.73,32.48a8,8,0,0,0-10.25,4.79l-64,176a8,8,0,0,0,4.79,10.26A8.14,8.14,0,0,0,96,224a8,8,0,0,0,7.52-5.27l64-176A8,8,0,0,0,162.73,32.48Z"
+      ></path>
+    </svg>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class DatabaseIconComponent {
+    constructor() {
+        this.fill = input('#FFFF');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DatabaseIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: DatabaseIconComponent, isStandalone: true, selector: "ndt-database-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M216,80c0,26.51-39.4,48-88,48S40,106.51,40,80s39.4-48,88-48S216,53.49,216,80Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M128,24C74.17,24,32,48.6,32,80v96c0,31.4,42.17,56,96,56s96-24.6,96-56V80C224,48.6,181.83,24,128,24Zm80,104c0,9.62-7.88,19.43-21.61,26.92C170.93,163.35,150.19,168,128,168s-42.93-4.65-58.39-13.08C55.88,147.43,48,137.62,48,128V111.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64ZM69.61,53.08C85.07,44.65,105.81,40,128,40s42.93,4.65,58.39,13.08C200.12,60.57,208,70.38,208,80s-7.88,19.43-21.61,26.92C170.93,115.35,150.19,120,128,120s-42.93-4.65-58.39-13.08C55.88,99.43,48,89.62,48,80S55.88,60.57,69.61,53.08ZM186.39,202.92C170.93,211.35,150.19,216,128,216s-42.93-4.65-58.39-13.08C55.88,195.43,48,185.62,48,176V159.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64V176C208,185.62,200.12,195.43,186.39,202.92Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DatabaseIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-database-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M216,80c0,26.51-39.4,48-88,48S40,106.51,40,80s39.4-48,88-48S216,53.49,216,80Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M128,24C74.17,24,32,48.6,32,80v96c0,31.4,42.17,56,96,56s96-24.6,96-56V80C224,48.6,181.83,24,128,24Zm80,104c0,9.62-7.88,19.43-21.61,26.92C170.93,163.35,150.19,168,128,168s-42.93-4.65-58.39-13.08C55.88,147.43,48,137.62,48,128V111.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64ZM69.61,53.08C85.07,44.65,105.81,40,128,40s42.93,4.65,58.39,13.08C200.12,60.57,208,70.38,208,80s-7.88,19.43-21.61,26.92C170.93,115.35,150.19,120,128,120s-42.93-4.65-58.39-13.08C55.88,99.43,48,89.62,48,80S55.88,60.57,69.61,53.08ZM186.39,202.92C170.93,211.35,150.19,216,128,216s-42.93-4.65-58.39-13.08C55.88,195.43,48,185.62,48,176V159.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64V176C208,185.62,200.12,195.43,186.39,202.92Z"
+      ></path>
+    </svg>
+  `,
+                }]
+        }] });
+
+class DiscordIconComponent {
+    constructor() {
+        this.fill = input('#000000');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DiscordIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: DiscordIconComponent, isStandalone: true, selector: "ndt-discord-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M104,140a12,12,0,1,1-12-12A12,12,0,0,1,104,140Zm60-12a12,12,0,1,0,12,12A12,12,0,0,0,164,128Zm74.45,64.9-67,29.71a16.17,16.17,0,0,1-21.71-9.1l-8.11-22q-6.72.45-13.63.46t-13.63-.46l-8.11,22a16.18,16.18,0,0,1-21.71,9.1l-67-29.71a15.93,15.93,0,0,1-9.06-18.51L38,58A16.07,16.07,0,0,1,51,46.14l36.06-5.93a16.22,16.22,0,0,1,18.26,11.88l3.26,12.84Q118.11,64,128,64t19.4.93l3.26-12.84a16.21,16.21,0,0,1,18.26-11.88L205,46.14A16.07,16.07,0,0,1,218,58l29.53,116.38A15.93,15.93,0,0,1,238.45,192.9ZM232,178.28,202.47,62s0,0-.08,0L166.33,56a.17.17,0,0,0-.17,0l-2.83,11.14c5,.94,10,2.06,14.83,3.42A8,8,0,0,1,176,86.31a8.09,8.09,0,0,1-2.16-.3A172.25,172.25,0,0,0,128,80a172.25,172.25,0,0,0-45.84,6,8,8,0,1,1-4.32-15.4c4.82-1.36,9.78-2.48,14.82-3.42L89.83,56s0,0-.12,0h0L53.61,61.93a.17.17,0,0,0-.09,0L24,178.33,91,208a.23.23,0,0,0,.22,0L98,189.72a173.2,173.2,0,0,1-20.14-4.32A8,8,0,0,1,82.16,170,171.85,171.85,0,0,0,128,176a171.85,171.85,0,0,0,45.84-6,8,8,0,0,1,4.32,15.41A173.2,173.2,0,0,1,158,189.72L164.75,208a.22.22,0,0,0,.21,0Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DiscordIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-discord-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M104,140a12,12,0,1,1-12-12A12,12,0,0,1,104,140Zm60-12a12,12,0,1,0,12,12A12,12,0,0,0,164,128Zm74.45,64.9-67,29.71a16.17,16.17,0,0,1-21.71-9.1l-8.11-22q-6.72.45-13.63.46t-13.63-.46l-8.11,22a16.18,16.18,0,0,1-21.71,9.1l-67-29.71a15.93,15.93,0,0,1-9.06-18.51L38,58A16.07,16.07,0,0,1,51,46.14l36.06-5.93a16.22,16.22,0,0,1,18.26,11.88l3.26,12.84Q118.11,64,128,64t19.4.93l3.26-12.84a16.21,16.21,0,0,1,18.26-11.88L205,46.14A16.07,16.07,0,0,1,218,58l29.53,116.38A15.93,15.93,0,0,1,238.45,192.9ZM232,178.28,202.47,62s0,0-.08,0L166.33,56a.17.17,0,0,0-.17,0l-2.83,11.14c5,.94,10,2.06,14.83,3.42A8,8,0,0,1,176,86.31a8.09,8.09,0,0,1-2.16-.3A172.25,172.25,0,0,0,128,80a172.25,172.25,0,0,0-45.84,6,8,8,0,1,1-4.32-15.4c4.82-1.36,9.78-2.48,14.82-3.42L89.83,56s0,0-.12,0h0L53.61,61.93a.17.17,0,0,0-.09,0L24,178.33,91,208a.23.23,0,0,0,.22,0L98,189.72a173.2,173.2,0,0,1-20.14-4.32A8,8,0,0,1,82.16,170,171.85,171.85,0,0,0,128,176a171.85,171.85,0,0,0,45.84-6,8,8,0,0,1,4.32,15.41A173.2,173.2,0,0,1,158,189.72L164.75,208a.22.22,0,0,0,.21,0Z"
+      ></path>
+    </svg>
+  `,
+                }]
+        }] });
+
+class DocsIconComponent {
+    constructor() {
+        this.fill = input('#FFFF');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocsIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: DocsIconComponent, isStandalone: true, selector: "ndt-docs-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M213.66,66.34l-40-40A8,8,0,0,0,168,24H88A16,16,0,0,0,72,40V56H56A16,16,0,0,0,40,72V216a16,16,0,0,0,16,16H168a16,16,0,0,0,16-16V200h16a16,16,0,0,0,16-16V72A8,8,0,0,0,213.66,66.34ZM168,216H56V72h76.69L168,107.31v84.53c0,.06,0,.11,0,.16s0,.1,0,.16V216Zm32-32H184V104a8,8,0,0,0-2.34-5.66l-40-40A8,8,0,0,0,136,56H88V40h76.69L200,75.31Zm-56-32a8,8,0,0,1-8,8H88a8,8,0,0,1,0-16h48A8,8,0,0,1,144,152Zm0,32a8,8,0,0,1-8,8H88a8,8,0,0,1,0-16h48A8,8,0,0,1,144,184Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocsIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-docs-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M213.66,66.34l-40-40A8,8,0,0,0,168,24H88A16,16,0,0,0,72,40V56H56A16,16,0,0,0,40,72V216a16,16,0,0,0,16,16H168a16,16,0,0,0,16-16V200h16a16,16,0,0,0,16-16V72A8,8,0,0,0,213.66,66.34ZM168,216H56V72h76.69L168,107.31v84.53c0,.06,0,.11,0,.16s0,.1,0,.16V216Zm32-32H184V104a8,8,0,0,0-2.34-5.66l-40-40A8,8,0,0,0,136,56H88V40h76.69L200,75.31Zm-56-32a8,8,0,0,1-8,8H88a8,8,0,0,1,0-16h48A8,8,0,0,1,144,152Zm0,32a8,8,0,0,1-8,8H88a8,8,0,0,1,0-16h48A8,8,0,0,1,144,184Z"
+      ></path>
+    </svg>
+  `,
+                }]
+        }] });
+
+class ExportIconComponent {
+    constructor() {
+        this.fill = input('#FFFF');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ExportIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ExportIconComponent, isStandalone: true, selector: "ndt-export-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M216,112v96a16,16,0,0,1-16,16H56a16,16,0,0,1-16-16V112A16,16,0,0,1,56,96H80a8,8,0,0,1,0,16H56v96H200V112H176a8,8,0,0,1,0-16h24A16,16,0,0,1,216,112ZM93.66,69.66,120,43.31V136a8,8,0,0,0,16,0V43.31l26.34,26.35a8,8,0,0,0,11.32-11.32l-40-40a8,8,0,0,0-11.32,0l-40,40A8,8,0,0,0,93.66,69.66Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ExportIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-export-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M216,112v96a16,16,0,0,1-16,16H56a16,16,0,0,1-16-16V112A16,16,0,0,1,56,96H80a8,8,0,0,1,0,16H56v96H200V112H176a8,8,0,0,1,0-16h24A16,16,0,0,1,216,112ZM93.66,69.66,120,43.31V136a8,8,0,0,0,16,0V43.31l26.34,26.35a8,8,0,0,0,11.32-11.32l-40-40a8,8,0,0,0-11.32,0l-40,40A8,8,0,0,0,93.66,69.66Z"
+      ></path>
+    </svg>
+  `,
+                }]
+        }] });
+
+class FilterIconComponent {
+    constructor() {
+        this.fill = input('#FFFF');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FilterIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: FilterIconComponent, isStandalone: true, selector: "ndt-filter-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M227.81,66.76l-.08.09L160,139.17v55.49A8,8,0,0,1,156.94,201l-32,21.33A8,8,0,0,1,112,216V139.17L44.27,66.85l-.08-.09A16,16,0,0,1,56,40H200a16,16,0,0,1,11.84,26.76Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M230.6,49.53A23.94,23.94,0,0,0,200,32H56A24,24,0,0,0,38.15,65.67L104,139.37V216a8,8,0,0,0,11.58,7.16l32-16A8,8,0,0,0,152,200V139.37l65.85-73.7A23.93,23.93,0,0,0,230.6,49.53ZM203.36,54.86a8,8,0,0,1,.07,9.12L136,139.17V196.58l-16,8V139.17L52.57,64A8,8,0,0,1,56,48H200A8,8,0,0,1,203.36,54.86Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FilterIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-filter-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M227.81,66.76l-.08.09L160,139.17v55.49A8,8,0,0,1,156.94,201l-32,21.33A8,8,0,0,1,112,216V139.17L44.27,66.85l-.08-.09A16,16,0,0,1,56,40H200a16,16,0,0,1,11.84,26.76Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M230.6,49.53A23.94,23.94,0,0,0,200,32H56A24,24,0,0,0,38.15,65.67L104,139.37V216a8,8,0,0,0,11.58,7.16l32-16A8,8,0,0,0,152,200V139.37l65.85-73.7A23.93,23.93,0,0,0,230.6,49.53ZM203.36,54.86a8,8,0,0,1,.07,9.12L136,139.17V196.58l-16,8V139.17L52.57,64A8,8,0,0,1,56,48H200A8,8,0,0,1,203.36,54.86Z"
+      ></path>
+    </svg>
+  `,
+                }]
+        }] });
+
+class GaugeIconComponent {
+    constructor() {
+        this.fill = input('#FFFF');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GaugeIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: GaugeIconComponent, isStandalone: true, selector: "ndt-gauge-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M232,152a103.93,103.93,0,0,1-5.9,34.63,8,8,0,0,1-7.57,5.37H37.46a8.05,8.05,0,0,1-7.57-5.41A104.06,104.06,0,0,1,24,151.19C24.44,94,71.73,47.49,129,48A104,104,0,0,1,232,152Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M114.34,154.34l96-96a8,8,0,0,1,11.32,11.32l-96,96a8,8,0,0,1-11.32-11.32ZM128,88a63.9,63.9,0,0,1,20.44,3.33,8,8,0,1,0,5.11-15.16A80,80,0,0,0,48.49,160.88,8,8,0,0,0,56.43,168c.29,0,.59,0,.89-.05a8,8,0,0,0,7.07-8.83A64.92,64.92,0,0,1,64,152,64.07,64.07,0,0,1,128,88Zm99.74,13a8,8,0,0,0-14.24,7.3,96.27,96.27,0,0,1,5,75.71l-181.1-.07A96.24,96.24,0,0,1,128,56h.88a95,95,0,0,1,42.82,10.5A8,8,0,1,0,179,52.27,110.8,110.8,0,0,0,129,40h-1A112.05,112.05,0,0,0,22.35,189.25,16.07,16.07,0,0,0,37.46,200H218.53a16,16,0,0,0,15.11-10.71,112.35,112.35,0,0,0-5.9-88.3Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GaugeIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-gauge-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M232,152a103.93,103.93,0,0,1-5.9,34.63,8,8,0,0,1-7.57,5.37H37.46a8.05,8.05,0,0,1-7.57-5.41A104.06,104.06,0,0,1,24,151.19C24.44,94,71.73,47.49,129,48A104,104,0,0,1,232,152Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M114.34,154.34l96-96a8,8,0,0,1,11.32,11.32l-96,96a8,8,0,0,1-11.32-11.32ZM128,88a63.9,63.9,0,0,1,20.44,3.33,8,8,0,1,0,5.11-15.16A80,80,0,0,0,48.49,160.88,8,8,0,0,0,56.43,168c.29,0,.59,0,.89-.05a8,8,0,0,0,7.07-8.83A64.92,64.92,0,0,1,64,152,64.07,64.07,0,0,1,128,88Zm99.74,13a8,8,0,0,0-14.24,7.3,96.27,96.27,0,0,1,5,75.71l-181.1-.07A96.24,96.24,0,0,1,128,56h.88a95,95,0,0,1,42.82,10.5A8,8,0,1,0,179,52.27,110.8,110.8,0,0,0,129,40h-1A112.05,112.05,0,0,0,22.35,189.25,16.07,16.07,0,0,0,37.46,200H218.53a16,16,0,0,0,15.11-10.71,112.35,112.35,0,0,0-5.9-88.3Z"
+      ></path>
+    </svg>
+  `,
+                }]
+        }] });
+
+class GearIconComponent {
+    constructor() {
+        this.fill = input('#FFFF');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GearIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: GearIconComponent, isStandalone: true, selector: "ndt-gear-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M207.86,123.18l16.78-21a99.14,99.14,0,0,0-10.07-24.29l-26.7-3a81,81,0,0,0-6.81-6.81l-3-26.71a99.43,99.43,0,0,0-24.3-10l-21,16.77a81.59,81.59,0,0,0-9.64,0l-21-16.78A99.14,99.14,0,0,0,77.91,41.43l-3,26.7a81,81,0,0,0-6.81,6.81l-26.71,3a99.43,99.43,0,0,0-10,24.3l16.77,21a81.59,81.59,0,0,0,0,9.64l-16.78,21a99.14,99.14,0,0,0,10.07,24.29l26.7,3a81,81,0,0,0,6.81,6.81l3,26.71a99.43,99.43,0,0,0,24.3,10l21-16.77a81.59,81.59,0,0,0,9.64,0l21,16.78a99.14,99.14,0,0,0,24.29-10.07l3-26.7a81,81,0,0,0,6.81-6.81l26.71-3a99.43,99.43,0,0,0,10-24.3l-16.77-21A81.59,81.59,0,0,0,207.86,123.18ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm88-29.84q.06-2.16,0-4.32l14.92-18.64a8,8,0,0,0,1.48-7.06,107.6,107.6,0,0,0-10.88-26.25,8,8,0,0,0-6-3.93l-23.72-2.64q-1.48-1.56-3-3L186,40.54a8,8,0,0,0-3.94-6,107.29,107.29,0,0,0-26.25-10.86,8,8,0,0,0-7.06,1.48L130.16,40Q128,40,125.84,40L107.2,25.11a8,8,0,0,0-7.06-1.48A107.6,107.6,0,0,0,73.89,34.51a8,8,0,0,0-3.93,6L67.32,64.27q-1.56,1.49-3,3L40.54,70a8,8,0,0,0-6,3.94,107.71,107.71,0,0,0-10.87,26.25,8,8,0,0,0,1.49,7.06L40,125.84Q40,128,40,130.16L25.11,148.8a8,8,0,0,0-1.48,7.06,107.6,107.6,0,0,0,10.88,26.25,8,8,0,0,0,6,3.93l23.72,2.64q1.49,1.56,3,3L70,215.46a8,8,0,0,0,3.94,6,107.71,107.71,0,0,0,26.25,10.87,8,8,0,0,0,7.06-1.49L125.84,216q2.16.06,4.32,0l18.64,14.92a8,8,0,0,0,7.06,1.48,107.21,107.21,0,0,0,26.25-10.88,8,8,0,0,0,3.93-6l2.64-23.72q1.56-1.48,3-3L215.46,186a8,8,0,0,0,6-3.94,107.71,107.71,0,0,0,10.87-26.25,8,8,0,0,0-1.49-7.06Zm-16.1-6.5a73.93,73.93,0,0,1,0,8.68,8,8,0,0,0,1.74,5.48l14.19,17.73a91.57,91.57,0,0,1-6.23,15L187,173.11a8,8,0,0,0-5.1,2.64,74.11,74.11,0,0,1-6.14,6.14,8,8,0,0,0-2.64,5.1l-2.51,22.58a91.32,91.32,0,0,1-15,6.23l-17.74-14.19a8,8,0,0,0-5-1.75h-.48a73.93,73.93,0,0,1-8.68,0,8.06,8.06,0,0,0-5.48,1.74L100.45,215.8a91.57,91.57,0,0,1-15-6.23L82.89,187a8,8,0,0,0-2.64-5.1,74.11,74.11,0,0,1-6.14-6.14,8,8,0,0,0-5.1-2.64L46.43,170.6a91.32,91.32,0,0,1-6.23-15l14.19-17.74a8,8,0,0,0,1.74-5.48,73.93,73.93,0,0,1,0-8.68,8,8,0,0,0-1.74-5.48L40.2,100.45a91.57,91.57,0,0,1,6.23-15L69,82.89a8,8,0,0,0,5.1-2.64,74.11,74.11,0,0,1,6.14-6.14A8,8,0,0,0,82.89,69L85.4,46.43a91.32,91.32,0,0,1,15-6.23l17.74,14.19a8,8,0,0,0,5.48,1.74,73.93,73.93,0,0,1,8.68,0,8.06,8.06,0,0,0,5.48-1.74L155.55,40.2a91.57,91.57,0,0,1,15,6.23L173.11,69a8,8,0,0,0,2.64,5.1,74.11,74.11,0,0,1,6.14,6.14,8,8,0,0,0,5.1,2.64l22.58,2.51a91.32,91.32,0,0,1,6.23,15l-14.19,17.74A8,8,0,0,0,199.87,123.66Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GearIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-gear-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M207.86,123.18l16.78-21a99.14,99.14,0,0,0-10.07-24.29l-26.7-3a81,81,0,0,0-6.81-6.81l-3-26.71a99.43,99.43,0,0,0-24.3-10l-21,16.77a81.59,81.59,0,0,0-9.64,0l-21-16.78A99.14,99.14,0,0,0,77.91,41.43l-3,26.7a81,81,0,0,0-6.81,6.81l-26.71,3a99.43,99.43,0,0,0-10,24.3l16.77,21a81.59,81.59,0,0,0,0,9.64l-16.78,21a99.14,99.14,0,0,0,10.07,24.29l26.7,3a81,81,0,0,0,6.81,6.81l3,26.71a99.43,99.43,0,0,0,24.3,10l21-16.77a81.59,81.59,0,0,0,9.64,0l21,16.78a99.14,99.14,0,0,0,24.29-10.07l3-26.7a81,81,0,0,0,6.81-6.81l26.71-3a99.43,99.43,0,0,0,10-24.3l-16.77-21A81.59,81.59,0,0,0,207.86,123.18ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm88-29.84q.06-2.16,0-4.32l14.92-18.64a8,8,0,0,0,1.48-7.06,107.6,107.6,0,0,0-10.88-26.25,8,8,0,0,0-6-3.93l-23.72-2.64q-1.48-1.56-3-3L186,40.54a8,8,0,0,0-3.94-6,107.29,107.29,0,0,0-26.25-10.86,8,8,0,0,0-7.06,1.48L130.16,40Q128,40,125.84,40L107.2,25.11a8,8,0,0,0-7.06-1.48A107.6,107.6,0,0,0,73.89,34.51a8,8,0,0,0-3.93,6L67.32,64.27q-1.56,1.49-3,3L40.54,70a8,8,0,0,0-6,3.94,107.71,107.71,0,0,0-10.87,26.25,8,8,0,0,0,1.49,7.06L40,125.84Q40,128,40,130.16L25.11,148.8a8,8,0,0,0-1.48,7.06,107.6,107.6,0,0,0,10.88,26.25,8,8,0,0,0,6,3.93l23.72,2.64q1.49,1.56,3,3L70,215.46a8,8,0,0,0,3.94,6,107.71,107.71,0,0,0,26.25,10.87,8,8,0,0,0,7.06-1.49L125.84,216q2.16.06,4.32,0l18.64,14.92a8,8,0,0,0,7.06,1.48,107.21,107.21,0,0,0,26.25-10.88,8,8,0,0,0,3.93-6l2.64-23.72q1.56-1.48,3-3L215.46,186a8,8,0,0,0,6-3.94,107.71,107.71,0,0,0,10.87-26.25,8,8,0,0,0-1.49-7.06Zm-16.1-6.5a73.93,73.93,0,0,1,0,8.68,8,8,0,0,0,1.74,5.48l14.19,17.73a91.57,91.57,0,0,1-6.23,15L187,173.11a8,8,0,0,0-5.1,2.64,74.11,74.11,0,0,1-6.14,6.14,8,8,0,0,0-2.64,5.1l-2.51,22.58a91.32,91.32,0,0,1-15,6.23l-17.74-14.19a8,8,0,0,0-5-1.75h-.48a73.93,73.93,0,0,1-8.68,0,8.06,8.06,0,0,0-5.48,1.74L100.45,215.8a91.57,91.57,0,0,1-15-6.23L82.89,187a8,8,0,0,0-2.64-5.1,74.11,74.11,0,0,1-6.14-6.14,8,8,0,0,0-5.1-2.64L46.43,170.6a91.32,91.32,0,0,1-6.23-15l14.19-17.74a8,8,0,0,0,1.74-5.48,73.93,73.93,0,0,1,0-8.68,8,8,0,0,0-1.74-5.48L40.2,100.45a91.57,91.57,0,0,1,6.23-15L69,82.89a8,8,0,0,0,5.1-2.64,74.11,74.11,0,0,1,6.14-6.14A8,8,0,0,0,82.89,69L85.4,46.43a91.32,91.32,0,0,1,15-6.23l17.74,14.19a8,8,0,0,0,5.48,1.74,73.93,73.93,0,0,1,8.68,0,8.06,8.06,0,0,0,5.48-1.74L155.55,40.2a91.57,91.57,0,0,1,15,6.23L173.11,69a8,8,0,0,0,2.64,5.1,74.11,74.11,0,0,1,6.14,6.14,8,8,0,0,0,5.1,2.64l22.58,2.51a91.32,91.32,0,0,1,6.23,15l-14.19,17.74A8,8,0,0,0,199.87,123.66Z"
+      ></path>
+    </svg>
+  `,
+                }]
+        }] });
+
+class GitBranchIconComponent {
+    constructor() {
+        this.fill = input('#FFFF');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GitBranchIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: GitBranchIconComponent, isStandalone: true, selector: "ndt-git-branch-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M224,64a24,24,0,1,1-24-24A24,24,0,0,1,224,64Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M232,64a32,32,0,1,0-40,31v17a8,8,0,0,1-8,8H96a23.84,23.84,0,0,0-8,1.38V95a32,32,0,1,0-16,0v66a32,32,0,1,0,16,0V144a8,8,0,0,1,8-8h88a24,24,0,0,0,24-24V95A32.06,32.06,0,0,0,232,64ZM64,64A16,16,0,1,1,80,80,16,16,0,0,1,64,64ZM96,192a16,16,0,1,1-16-16A16,16,0,0,1,96,192ZM200,80a16,16,0,1,1,16-16A16,16,0,0,1,200,80Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GitBranchIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-git-branch-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M224,64a24,24,0,1,1-24-24A24,24,0,0,1,224,64Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M232,64a32,32,0,1,0-40,31v17a8,8,0,0,1-8,8H96a23.84,23.84,0,0,0-8,1.38V95a32,32,0,1,0-16,0v66a32,32,0,1,0,16,0V144a8,8,0,0,1,8-8h88a24,24,0,0,0,24-24V95A32.06,32.06,0,0,0,232,64ZM64,64A16,16,0,1,1,80,80,16,16,0,0,1,64,64ZM96,192a16,16,0,1,1-16-16A16,16,0,0,1,96,192ZM200,80a16,16,0,1,1,16-16A16,16,0,0,1,200,80Z"
+      ></path>
+    </svg>
+  `,
+                }]
+        }] });
+
+class ImportIconComponent {
+    constructor() {
+        this.fill = input('#FFFF');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ImportIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ImportIconComponent, isStandalone: true, selector: "ndt-import-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M224,144v64a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V144a8,8,0,0,1,16,0v56H208V144a8,8,0,0,1,16,0Zm-101.66,5.66a8,8,0,0,0,11.32,0l40-40a8,8,0,0,0-11.32-11.32L136,124.69V32a8,8,0,0,0-16,0v92.69L93.66,98.34a8,8,0,0,0-11.32,11.32Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ImportIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-import-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M224,144v64a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V144a8,8,0,0,1,16,0v56H208V144a8,8,0,0,1,16,0Zm-101.66,5.66a8,8,0,0,0,11.32,0l40-40a8,8,0,0,0-11.32-11.32L136,124.69V32a8,8,0,0,0-16,0v92.69L93.66,98.34a8,8,0,0,0-11.32,11.32Z"
+      ></path>
+    </svg>
+  `,
+                }]
+        }] });
+
+class LayoutIconComponent {
+    constructor() {
+        this.fill = input('#FFFF');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LayoutIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: LayoutIconComponent, isStandalone: true, selector: "ndt-layout-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path d="M104,104V208H40a8,8,0,0,1-8-8V104Z" opacity="0.2"></path>
+      <path
+        d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V96H40V56ZM40,112H96v88H40Zm176,88H112V112H216v88Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LayoutIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-layout-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path d="M104,104V208H40a8,8,0,0,1-8-8V104Z" opacity="0.2"></path>
+      <path
+        d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V96H40V56ZM40,112H96v88H40Zm176,88H112V112H216v88Z"
+      ></path>
+    </svg>
+  `,
+                }]
+        }] });
+
+class LightbulbIconComponent {
+    constructor() {
+        this.fill = input('#FFFF');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LightbulbIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: LightbulbIconComponent, isStandalone: true, selector: "ndt-lightbulb-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M176,232a8,8,0,0,1-8,8H88a8,8,0,0,1,0-16h80A8,8,0,0,1,176,232Zm40-128a87.55,87.55,0,0,1-33.64,69.21A16.24,16.24,0,0,0,176,186v6a16,16,0,0,1-16,16H96a16,16,0,0,1-16-16v-6a16,16,0,0,0-6.23-12.66A87.59,87.59,0,0,1,40,104.49C39.74,56.83,78.26,17.14,125.88,16A88,88,0,0,1,216,104Zm-16,0a72,72,0,0,0-73.74-72c-39,.92-70.47,33.39-70.26,72.39a71.65,71.65,0,0,0,27.64,56.3A32,32,0,0,1,96,186v6h64v-6a32.15,32.15,0,0,1,12.47-25.35A71.65,71.65,0,0,0,200,104Zm-16.11-9.34a57.6,57.6,0,0,0-46.56-46.55,8,8,0,0,0-2.66,15.78c16.57,2.79,30.63,16.85,33.44,33.45A8,8,0,0,0,176,104a9,9,0,0,0,1.35-.11A8,8,0,0,0,183.89,94.66Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LightbulbIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-lightbulb-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M176,232a8,8,0,0,1-8,8H88a8,8,0,0,1,0-16h80A8,8,0,0,1,176,232Zm40-128a87.55,87.55,0,0,1-33.64,69.21A16.24,16.24,0,0,0,176,186v6a16,16,0,0,1-16,16H96a16,16,0,0,1-16-16v-6a16,16,0,0,0-6.23-12.66A87.59,87.59,0,0,1,40,104.49C39.74,56.83,78.26,17.14,125.88,16A88,88,0,0,1,216,104Zm-16,0a72,72,0,0,0-73.74-72c-39,.92-70.47,33.39-70.26,72.39a71.65,71.65,0,0,0,27.64,56.3A32,32,0,0,1,96,186v6h64v-6a32.15,32.15,0,0,1,12.47-25.35A71.65,71.65,0,0,0,200,104Zm-16.11-9.34a57.6,57.6,0,0,0-46.56-46.55,8,8,0,0,0-2.66,15.78c16.57,2.79,30.63,16.85,33.44,33.45A8,8,0,0,0,176,104a9,9,0,0,0,1.35-.11A8,8,0,0,0,183.89,94.66Z"
+      ></path>
+    </svg>
+  `,
+                }]
+        }] });
+
+class LightingIconComponent {
+    constructor() {
+        this.fill = input('#FFFF');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LightingIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: LightingIconComponent, isStandalone: true, selector: "ndt-lighting-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path d="M96,240l16-80L48,136,160,16,144,96l64,24Z" opacity="0.2"></path>
+      <path
+        d="M215.79,118.17a8,8,0,0,0-5-5.66L153.18,90.9l14.66-73.33a8,8,0,0,0-13.69-7l-112,120a8,8,0,0,0,3,13l57.63,21.61L88.16,238.43a8,8,0,0,0,13.69,7l112-120A8,8,0,0,0,215.79,118.17ZM109.37,214l10.47-52.38a8,8,0,0,0-5-9.06L62,132.71l84.62-90.66L136.16,94.43a8,8,0,0,0,5,9.06l52.8,19.8Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LightingIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-lighting-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path d="M96,240l16-80L48,136,160,16,144,96l64,24Z" opacity="0.2"></path>
+      <path
+        d="M215.79,118.17a8,8,0,0,0-5-5.66L153.18,90.9l14.66-73.33a8,8,0,0,0-13.69-7l-112,120a8,8,0,0,0,3,13l57.63,21.61L88.16,238.43a8,8,0,0,0,13.69,7l112-120A8,8,0,0,0,215.79,118.17ZM109.37,214l10.47-52.38a8,8,0,0,0-5-9.06L62,132.71l84.62-90.66L136.16,94.43a8,8,0,0,0,5,9.06l52.8,19.8Z"
+      ></path>
+    </svg>
+  `,
+                }]
+        }] });
+
+class LockIconComponent {
+    constructor() {
+        this.fill = input('#FFFF');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LockIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: LockIconComponent, isStandalone: true, selector: "ndt-lock-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M208,80H176V56a48,48,0,0,0-96,0V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80ZM96,56a32,32,0,0,1,64,0V80H96ZM208,208H48V96H208V208Zm-68-56a12,12,0,1,1-12-12A12,12,0,0,1,140,152Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LockIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-lock-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M208,80H176V56a48,48,0,0,0-96,0V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80ZM96,56a32,32,0,0,1,64,0V80H96ZM208,208H48V96H208V208Zm-68-56a12,12,0,1,1-12-12A12,12,0,0,1,140,152Z"
+      ></path>
+    </svg>
+  `,
+                }]
+        }] });
+
+class MoonIconComponent {
+    constructor() {
+        this.fill = input('#FFFF');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MoonIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: MoonIconComponent, isStandalone: true, selector: "ndt-moon-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M224.3,150.3a8.1,8.1,0,0,0-7.8-5.7l-2.2.4A84,84,0,0,1,111,41.6a5.7,5.7,0,0,0,.3-1.8A7.9,7.9,0,0,0,109,33a8.1,8.1,0,0,0-8.1-1.1A104,104,0,1,0,225.4,156.9,8.1,8.1,0,0,0,224.3,150.3Z"
+        opacity="0.2"
+      />
+      <path
+        d="M233.5,137.3a12.1,12.1,0,0,0-11.8-8.6,7.9,7.9,0,0,0-1.3.1,80,80,0,0,1-98.2-98.2,12,12,0,0,0-15.6-14A104.2,104.2,0,0,0,32,120c0,57.4,46.6,104,104,104A104.2,104.2,0,0,0,239.4,149.6,12,12,0,0,0,233.5,137.3ZM136,208A88,88,0,0,1,48,120a87.6,87.6,0,0,1,64.8-84.7,96,96,0,0,0,111.9,112A87.6,87.6,0,0,1,136,208Z"
+      />
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MoonIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-moon-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M224.3,150.3a8.1,8.1,0,0,0-7.8-5.7l-2.2.4A84,84,0,0,1,111,41.6a5.7,5.7,0,0,0,.3-1.8A7.9,7.9,0,0,0,109,33a8.1,8.1,0,0,0-8.1-1.1A104,104,0,1,0,225.4,156.9,8.1,8.1,0,0,0,224.3,150.3Z"
+        opacity="0.2"
+      />
+      <path
+        d="M233.5,137.3a12.1,12.1,0,0,0-11.8-8.6,7.9,7.9,0,0,0-1.3.1,80,80,0,0,1-98.2-98.2,12,12,0,0,0-15.6-14A104.2,104.2,0,0,0,32,120c0,57.4,46.6,104,104,104A104.2,104.2,0,0,0,239.4,149.6,12,12,0,0,0,233.5,137.3ZM136,208A88,88,0,0,1,48,120a87.6,87.6,0,0,1,64.8-84.7,96,96,0,0,0,111.9,112A87.6,87.6,0,0,1,136,208Z"
+      />
+    </svg>
+  `,
+                }]
+        }] });
+
+class NetworkIconComponent {
+    constructor() {
+        this.fill = input('#FFFF');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NetworkIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: NetworkIconComponent, isStandalone: true, selector: "ndt-network-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M152,40V72a8,8,0,0,1-8,8H112a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h32A8,8,0,0,1,152,40ZM80,168H48a8,8,0,0,0-8,8v32a8,8,0,0,0,8,8H80a8,8,0,0,0,8-8V176A8,8,0,0,0,80,168Zm128,0H176a8,8,0,0,0-8,8v32a8,8,0,0,0,8,8h32a8,8,0,0,0,8-8V176A8,8,0,0,0,208,168Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M232,112H136V88h8a16,16,0,0,0,16-16V40a16,16,0,0,0-16-16H112A16,16,0,0,0,96,40V72a16,16,0,0,0,16,16h8v24H24a8,8,0,0,0,0,16H56v32H48a16,16,0,0,0-16,16v32a16,16,0,0,0,16,16H80a16,16,0,0,0,16-16V176a16,16,0,0,0-16-16H72V128H184v32h-8a16,16,0,0,0-16,16v32a16,16,0,0,0,16,16h32a16,16,0,0,0,16-16V176a16,16,0,0,0-16-16h-8V128h32a8,8,0,0,0,0-16ZM112,40h32V72H112ZM80,208H48V176H80Zm128,0H176V176h32Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NetworkIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-network-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M152,40V72a8,8,0,0,1-8,8H112a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h32A8,8,0,0,1,152,40ZM80,168H48a8,8,0,0,0-8,8v32a8,8,0,0,0,8,8H80a8,8,0,0,0,8-8V176A8,8,0,0,0,80,168Zm128,0H176a8,8,0,0,0-8,8v32a8,8,0,0,0,8,8h32a8,8,0,0,0,8-8V176A8,8,0,0,0,208,168Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M232,112H136V88h8a16,16,0,0,0,16-16V40a16,16,0,0,0-16-16H112A16,16,0,0,0,96,40V72a16,16,0,0,0,16,16h8v24H24a8,8,0,0,0,0,16H56v32H48a16,16,0,0,0-16,16v32a16,16,0,0,0,16,16H80a16,16,0,0,0,16-16V176a16,16,0,0,0-16-16H72V128H184v32h-8a16,16,0,0,0-16,16v32a16,16,0,0,0,16,16h32a16,16,0,0,0,16-16V176a16,16,0,0,0-16-16h-8V128h32a8,8,0,0,0,0-16ZM112,40h32V72H112ZM80,208H48V176H80Zm128,0H176V176h32Z"
+      ></path>
+    </svg>
+  `,
+                }]
+        }] });
+
+class PuzzleIconComponent {
+    constructor() {
+        this.fill = input('#FFFF');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PuzzleIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: PuzzleIconComponent, isStandalone: true, selector: "ndt-puzzle-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M204,168a28,28,0,0,0,12-2.69V208a8,8,0,0,1-8,8H64a8,8,0,0,1-8-8V165.31a28,28,0,1,1,0-50.62V72a8,8,0,0,1,8-8h46.69a28,28,0,1,1,50.61,0H208a8,8,0,0,1,8,8v42.69A28,28,0,1,0,204,168Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M220.27,158.54a8,8,0,0,0-7.7-.46,20,20,0,1,1,0-36.16A8,8,0,0,0,224,114.69V72a16,16,0,0,0-16-16H171.78a35.36,35.36,0,0,0,.22-4,36.15,36.15,0,0,0-11.36-26.25,36,36,0,0,0-60.55,23.63,36.56,36.56,0,0,0,.14,6.62H64A16,16,0,0,0,48,72v32.22a35.36,35.36,0,0,0-4-.22,36.12,36.12,0,0,0-26.24,11.36,35.7,35.7,0,0,0-9.69,27,36.08,36.08,0,0,0,33.31,33.6,36.56,36.56,0,0,0,6.62-.14V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V165.31A8,8,0,0,0,220.27,158.54ZM208,208H64V165.31a8,8,0,0,0-11.43-7.23,20,20,0,1,1,0-36.16A8,8,0,0,0,64,114.69V72h46.69a8,8,0,0,0,7.23-11.43,20,20,0,1,1,36.16,0A8,8,0,0,0,161.31,72H208v32.23a35.68,35.68,0,0,0-6.62-.14A36,36,0,0,0,204,176a35.36,35.36,0,0,0,4-.22Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PuzzleIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-puzzle-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M204,168a28,28,0,0,0,12-2.69V208a8,8,0,0,1-8,8H64a8,8,0,0,1-8-8V165.31a28,28,0,1,1,0-50.62V72a8,8,0,0,1,8-8h46.69a28,28,0,1,1,50.61,0H208a8,8,0,0,1,8,8v42.69A28,28,0,1,0,204,168Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M220.27,158.54a8,8,0,0,0-7.7-.46,20,20,0,1,1,0-36.16A8,8,0,0,0,224,114.69V72a16,16,0,0,0-16-16H171.78a35.36,35.36,0,0,0,.22-4,36.15,36.15,0,0,0-11.36-26.25,36,36,0,0,0-60.55,23.63,36.56,36.56,0,0,0,.14,6.62H64A16,16,0,0,0,48,72v32.22a35.36,35.36,0,0,0-4-.22,36.12,36.12,0,0,0-26.24,11.36,35.7,35.7,0,0,0-9.69,27,36.08,36.08,0,0,0,33.31,33.6,36.56,36.56,0,0,0,6.62-.14V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V165.31A8,8,0,0,0,220.27,158.54ZM208,208H64V165.31a8,8,0,0,0-11.43-7.23,20,20,0,1,1,0-36.16A8,8,0,0,0,64,114.69V72h46.69a8,8,0,0,0,7.23-11.43,20,20,0,1,1,36.16,0A8,8,0,0,0,161.31,72H208v32.23a35.68,35.68,0,0,0-6.62-.14A36,36,0,0,0,204,176a35.36,35.36,0,0,0,4-.22Z"
+      ></path>
+    </svg>
+  `,
+                }]
+        }] });
+
+class RefreshIconComponent {
+    constructor() {
+        this.fill = input('#FFFF');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RefreshIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: RefreshIconComponent, isStandalone: true, selector: "ndt-refresh-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M216,128a88,88,0,1,1-88-88A88,88,0,0,1,216,128Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M224,48V96a8,8,0,0,1-8,8H168a8,8,0,0,1,0-16h28.69L182.06,73.37a79.56,79.56,0,0,0-56.13-23.43h-.45A79.52,79.52,0,0,0,69.59,72.71,8,8,0,0,1,58.41,61.27a96,96,0,0,1,135,.79L208,76.69V48a8,8,0,0,1,16,0ZM186.41,183.29a80,80,0,0,1-112.47-.66L59.31,168H88a8,8,0,0,0,0-16H40a8,8,0,0,0-8,8v48a8,8,0,0,0,16,0V179.31l14.63,14.63A95.43,95.43,0,0,0,130,222.06h.53a95.36,95.36,0,0,0,67.07-27.33,8,8,0,0,0-11.18-11.44Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RefreshIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-refresh-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M216,128a88,88,0,1,1-88-88A88,88,0,0,1,216,128Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M224,48V96a8,8,0,0,1-8,8H168a8,8,0,0,1,0-16h28.69L182.06,73.37a79.56,79.56,0,0,0-56.13-23.43h-.45A79.52,79.52,0,0,0,69.59,72.71,8,8,0,0,1,58.41,61.27a96,96,0,0,1,135,.79L208,76.69V48a8,8,0,0,1,16,0ZM186.41,183.29a80,80,0,0,1-112.47-.66L59.31,168H88a8,8,0,0,0,0-16H40a8,8,0,0,0-8,8v48a8,8,0,0,0,16,0V179.31l14.63,14.63A95.43,95.43,0,0,0,130,222.06h.53a95.36,95.36,0,0,0,67.07-27.33,8,8,0,0,0-11.18-11.44Z"
+      ></path>
+    </svg>
+  `,
+                }]
+        }] });
+
+class StarIconComponent {
+    constructor() {
+        this.fill = input('#FFFF');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: StarIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: StarIconComponent, isStandalone: true, selector: "ndt-star-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M229.06,108.79l-48.7,42,14.88,62.79a8.4,8.4,0,0,1-12.52,9.17L128,189.09,73.28,222.74a8.4,8.4,0,0,1-12.52-9.17l14.88-62.79-48.7-42A8.46,8.46,0,0,1,31.73,94L95.64,88.8l24.62-59.6a8.36,8.36,0,0,1,15.48,0l24.62,59.6L224.27,94A8.46,8.46,0,0,1,229.06,108.79Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M239.18,97.26A16.38,16.38,0,0,0,224.92,86l-59-4.76L143.14,26.15a16.36,16.36,0,0,0-30.27,0L90.11,81.23,31.08,86a16.46,16.46,0,0,0-9.37,28.86l45,38.83L53,211.75a16.38,16.38,0,0,0,24.5,17.82L128,198.49l50.53,31.08A16.4,16.4,0,0,0,203,211.75l-13.76-58.07,45-38.83A16.43,16.43,0,0,0,239.18,97.26Zm-15.34,5.47-48.7,42a8,8,0,0,0-2.56,7.91l14.88,62.8a.37.37,0,0,1-.17.48c-.18.14-.23.11-.38,0l-54.72-33.65a8,8,0,0,0-8.38,0L69.09,215.94c-.15.09-.19.12-.38,0a.37.37,0,0,1-.17-.48l14.88-62.8a8,8,0,0,0-2.56-7.91l-48.7-42c-.12-.1-.23-.19-.13-.5s.18-.27.33-.29l63.92-5.16A8,8,0,0,0,103,91.86l24.62-59.61c.08-.17.11-.25.35-.25s.27.08.35.25L153,91.86a8,8,0,0,0,6.75,4.92l63.92,5.16c.15,0,.24,0,.33.29S224,102.63,223.84,102.73Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: StarIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-star-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M229.06,108.79l-48.7,42,14.88,62.79a8.4,8.4,0,0,1-12.52,9.17L128,189.09,73.28,222.74a8.4,8.4,0,0,1-12.52-9.17l14.88-62.79-48.7-42A8.46,8.46,0,0,1,31.73,94L95.64,88.8l24.62-59.6a8.36,8.36,0,0,1,15.48,0l24.62,59.6L224.27,94A8.46,8.46,0,0,1,229.06,108.79Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M239.18,97.26A16.38,16.38,0,0,0,224.92,86l-59-4.76L143.14,26.15a16.36,16.36,0,0,0-30.27,0L90.11,81.23,31.08,86a16.46,16.46,0,0,0-9.37,28.86l45,38.83L53,211.75a16.38,16.38,0,0,0,24.5,17.82L128,198.49l50.53,31.08A16.4,16.4,0,0,0,203,211.75l-13.76-58.07,45-38.83A16.43,16.43,0,0,0,239.18,97.26Zm-15.34,5.47-48.7,42a8,8,0,0,0-2.56,7.91l14.88,62.8a.37.37,0,0,1-.17.48c-.18.14-.23.11-.38,0l-54.72-33.65a8,8,0,0,0-8.38,0L69.09,215.94c-.15.09-.19.12-.38,0a.37.37,0,0,1-.17-.48l14.88-62.8a8,8,0,0,0-2.56-7.91l-48.7-42c-.12-.1-.23-.19-.13-.5s.18-.27.33-.29l63.92-5.16A8,8,0,0,0,103,91.86l24.62-59.61c.08-.17.11-.25.35-.25s.27.08.35.25L153,91.86a8,8,0,0,0,6.75,4.92l63.92,5.16c.15,0,.24,0,.33.29S224,102.63,223.84,102.73Z"
+      ></path>
+    </svg>
+  `,
+                }]
+        }] });
+
+class SunIconComponent {
+    constructor() {
+        this.fill = input('#FFFF');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SunIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: SunIconComponent, isStandalone: true, selector: "ndt-sun-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M128,60a68,68,0,1,0,68,68A68.07,68.07,0,0,0,128,60Z"
+        opacity="0.2"
+      />
+      <path
+        d="M128,44a8,8,0,0,0,8-8V16a8,8,0,0,0-16,0V36A8,8,0,0,0,128,44ZM57.31,68.69a8,8,0,0,0,11.32-11.32L54.63,43.37A8,8,0,0,0,43.31,54.69ZM44,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H36A8,8,0,0,0,44,128Zm24.63,59.31-14,14a8,8,0,0,0,11.32,11.32l14-14a8,8,0,0,0-11.32-11.32ZM128,212a8,8,0,0,0-8,8v20a8,8,0,0,0,16,0V220A8,8,0,0,0,128,212Zm70.69-24.69a8,8,0,0,0-11.32,11.32l14,14a8,8,0,0,0,11.32-11.32ZM240,120H220a8,8,0,0,0,0,16h20a8,8,0,0,0,0-16Zm-24.69-62.63-14,14a8,8,0,0,0,11.32,11.32l14-14a8,8,0,0,0-11.32-11.32ZM128,76a52,52,0,1,0,52,52A52.06,52.06,0,0,0,128,76Zm0,88a36,36,0,1,1,36-36A36,36,0,0,1,128,164Z"
+      />
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SunIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-sun-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M128,60a68,68,0,1,0,68,68A68.07,68.07,0,0,0,128,60Z"
+        opacity="0.2"
+      />
+      <path
+        d="M128,44a8,8,0,0,0,8-8V16a8,8,0,0,0-16,0V36A8,8,0,0,0,128,44ZM57.31,68.69a8,8,0,0,0,11.32-11.32L54.63,43.37A8,8,0,0,0,43.31,54.69ZM44,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H36A8,8,0,0,0,44,128Zm24.63,59.31-14,14a8,8,0,0,0,11.32,11.32l14-14a8,8,0,0,0-11.32-11.32ZM128,212a8,8,0,0,0-8,8v20a8,8,0,0,0,16,0V220A8,8,0,0,0,128,212Zm70.69-24.69a8,8,0,0,0-11.32,11.32l14,14a8,8,0,0,0,11.32-11.32ZM240,120H220a8,8,0,0,0,0,16h20a8,8,0,0,0,0-16Zm-24.69-62.63-14,14a8,8,0,0,0,11.32,11.32l14-14a8,8,0,0,0-11.32-11.32ZM128,76a52,52,0,1,0,52,52A52.06,52.06,0,0,0,128,76Zm0,88a36,36,0,1,1,36-36A36,36,0,0,1,128,164Z"
+      />
+    </svg>
+  `,
+                }]
+        }] });
+
+class TerminalIconComponent {
+    constructor() {
+        this.fill = input('#FFFF');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TerminalIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: TerminalIconComponent, isStandalone: true, selector: "ndt-terminal-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M224,56V200a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V56a8,8,0,0,1,8-8H216A8,8,0,0,1,224,56Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M128,128a8,8,0,0,1-3,6.25l-40,32a8,8,0,1,1-10-12.5L107.19,128,75,102.25a8,8,0,1,1,10-12.5l40,32A8,8,0,0,1,128,128Zm48,24H136a8,8,0,0,0,0,16h40a8,8,0,0,0,0-16Zm56-96V200a16,16,0,0,1-16,16H40a16,16,0,0,1-16-16V56A16,16,0,0,1,40,40H216A16,16,0,0,1,232,56ZM216,200V56H40V200H216Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TerminalIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-terminal-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M224,56V200a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V56a8,8,0,0,1,8-8H216A8,8,0,0,1,224,56Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M128,128a8,8,0,0,1-3,6.25l-40,32a8,8,0,1,1-10-12.5L107.19,128,75,102.25a8,8,0,1,1,10-12.5l40,32A8,8,0,0,1,128,128Zm48,24H136a8,8,0,0,0,0,16h40a8,8,0,0,0,0-16Zm56-96V200a16,16,0,0,1-16,16H40a16,16,0,0,1-16-16V56A16,16,0,0,1,40,40H216A16,16,0,0,1,232,56ZM216,200V56H40V200H216Z"
+      ></path>
+    </svg>
+  `,
+                }]
+        }] });
+
+class ToggleLeftIconComponent {
+    constructor() {
+        this.fill = input('#FFFF');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ToggleLeftIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: ToggleLeftIconComponent, isStandalone: true, selector: "ndt-toggle-left-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M112,128A32,32,0,1,1,80,96,32,32,0,0,1,112,128Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M176,56H80a72,72,0,0,0,0,144h96a72,72,0,0,0,0-144Zm0,128H80A56,56,0,0,1,80,72h96a56,56,0,0,1,0,112ZM80,88a40,40,0,1,0,40,40A40,40,0,0,0,80,88Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,80,152Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ToggleLeftIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-toggle-left-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M112,128A32,32,0,1,1,80,96,32,32,0,0,1,112,128Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M176,56H80a72,72,0,0,0,0,144h96a72,72,0,0,0,0-144Zm0,128H80A56,56,0,0,1,80,72h96a56,56,0,0,1,0,112ZM80,88a40,40,0,1,0,40,40A40,40,0,0,0,80,88Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,80,152Z"
+      ></path>
+    </svg>
+  `,
+                }]
+        }] });
+
+class TranslateIconComponent {
+    constructor() {
+        this.fill = input('#FFFF');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TranslateIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: TranslateIconComponent, isStandalone: true, selector: "ndt-translate-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M250.73,210.63l-56-112a12,12,0,0,0-21.46,0l-20.52,41A84.2,84.2,0,0,1,114,126.22,107.48,107.48,0,0,0,139.33,68H160a12,12,0,0,0,0-24H108V32a12,12,0,0,0-24,0V44H32a12,12,0,0,0,0,24h83.13A83.69,83.69,0,0,1,96,110.35,84,84,0,0,1,83.6,91a12,12,0,1,0-21.81,10A107.55,107.55,0,0,0,78,126.24,83.54,83.54,0,0,1,32,140a12,12,0,0,0,0,24,107.47,107.47,0,0,0,64-21.07,108.4,108.4,0,0,0,45.39,19.44l-24.13,48.26a12,12,0,1,0,21.46,10.73L151.41,196h65.17l12.68,25.36a12,12,0,1,0,21.47-10.73ZM163.41,172,184,130.83,204.58,172Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TranslateIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-translate-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M250.73,210.63l-56-112a12,12,0,0,0-21.46,0l-20.52,41A84.2,84.2,0,0,1,114,126.22,107.48,107.48,0,0,0,139.33,68H160a12,12,0,0,0,0-24H108V32a12,12,0,0,0-24,0V44H32a12,12,0,0,0,0,24h83.13A83.69,83.69,0,0,1,96,110.35,84,84,0,0,1,83.6,91a12,12,0,1,0-21.81,10A107.55,107.55,0,0,0,78,126.24,83.54,83.54,0,0,1,32,140a12,12,0,0,0,0,24,107.47,107.47,0,0,0,64-21.07,108.4,108.4,0,0,0,45.39,19.44l-24.13,48.26a12,12,0,1,0,21.46,10.73L151.41,196h65.17l12.68,25.36a12,12,0,1,0,21.47-10.73ZM163.41,172,184,130.83,204.58,172Z"
+      ></path>
+    </svg>
+  `,
+                }]
+        }] });
+
+class TrashIconComponent {
+    constructor() {
+        this.fill = input('#FFFF');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TrashIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: TrashIconComponent, isStandalone: true, selector: "ndt-trash-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TrashIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-trash-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"
+      ></path>
+    </svg>
+  `,
+                }]
+        }] });
+
+class UsersIconComponent {
+    constructor() {
+        this.fill = input('#FFFF');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: UsersIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: UsersIconComponent, isStandalone: true, selector: "ndt-users-icon", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M224,128a95.76,95.76,0,0,1-31.8,71.37A72,72,0,0,0,128,160a40,40,0,1,0-40-40,40,40,0,0,0,40,40,72,72,0,0,0-64.2,39.37h0A96,96,0,1,1,224,128Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24ZM74.08,197.5a64,64,0,0,1,107.84,0,87.83,87.83,0,0,1-107.84,0ZM96,120a32,32,0,1,1,32,32A32,32,0,0,1,96,120Zm97.76,66.41a79.66,79.66,0,0,0-36.06-28.75,48,48,0,1,0-59.4,0,79.66,79.66,0,0,0-36.06,28.75,88,88,0,1,1,131.52,0Z"
+      ></path>
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: UsersIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-users-icon',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <svg
+      [attr.fill]="fill()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+    >
+      <path
+        d="M224,128a95.76,95.76,0,0,1-31.8,71.37A72,72,0,0,0,128,160a40,40,0,1,0-40-40,40,40,0,0,0,40,40,72,72,0,0,0-64.2,39.37h0A96,96,0,1,1,224,128Z"
+        opacity="0.2"
+      ></path>
+      <path
+        d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24ZM74.08,197.5a64,64,0,0,1,107.84,0,87.83,87.83,0,0,1-107.84,0ZM96,120a32,32,0,1,1,32,32A32,32,0,0,1,96,120Zm97.76,66.41a79.66,79.66,0,0,0-36.06-28.75,48,48,0,1,0-59.4,0,79.66,79.66,0,0,0-36.06,28.75,88,88,0,1,1,131.52,0Z"
+      ></path>
+    </svg>
+  `,
+                }]
+        }] });
+
+class DevToolbarIconComponent {
+    constructor() {
+        this.stateService = inject(DevToolbarStateService);
+        this.name = input.required();
+        this.fill = computed(() => this.stateService.theme() === 'dark' ? '#FFFFFF' : '#000000');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarIconComponent, isStandalone: true, selector: "ndt-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    @switch (name()) { @case ('angular') {
+    <ndt-angular-icon />
+    } @case ('bolt') {
+    <ndt-bolt-icon [fill]="fill()" />
+    } @case ('bug') {
+    <ndt-bug-icon [fill]="fill()" />
+    } @case ('code') {
+    <ndt-code-icon [fill]="fill()" />
+    } @case ('database') {
+    <ndt-database-icon [fill]="fill()" />
+    } @case ('docs') {
+    <ndt-docs-icon [fill]="fill()" />
+    } @case ('export') {
+    <ndt-export-icon [fill]="fill()" />
+    } @case ('filter') {
+    <ndt-filter-icon [fill]="fill()" />
+    } @case ('gauge') {
+    <ndt-gauge-icon [fill]="fill()" />
+    } @case ('gear') {
+    <ndt-gear-icon [fill]="fill()" />
+    } @case ('git-branch') {
+    <ndt-git-branch-icon [fill]="fill()" />
+    } @case ('import') {
+    <ndt-import-icon [fill]="fill()" />
+    } @case ('layout') {
+    <ndt-layout-icon [fill]="fill()" />
+    } @case ('lighting') {
+    <ndt-lighting-icon [fill]="fill()" />
+    } @case ('lightbulb') {
+    <ndt-lightbulb-icon [fill]="fill()" />
+    } @case ('lock') {
+    <ndt-lock-icon [fill]="fill()" />
+    } @case ('network') {
+    <ndt-network-icon [fill]="fill()" />
+    } @case ('puzzle') {
+    <ndt-puzzle-icon [fill]="fill()" />
+    } @case ('refresh') {
+    <ndt-refresh-icon [fill]="fill()" />
+    } @case ('star') {
+    <ndt-star-icon [fill]="fill()" />
+    } @case ('terminal') {
+    <ndt-terminal-icon [fill]="fill()" />
+    } @case ('toggle-left') {
+    <ndt-toggle-left-icon [fill]="fill()" />
+    } @case ('user') {
+    <ndt-users-icon [fill]="fill()" />
+    } @case ('sun') {
+    <ndt-sun-icon [fill]="fill()" />
+    } @case ('moon') {
+    <ndt-moon-icon [fill]="fill()" />
+    } @case ('translate') {
+    <ndt-translate-icon [fill]="fill()" />
+    } @case ('discord') {
+    <ndt-discord-icon [fill]="fill()" />
+    } @case ('trash') {
+    <ndt-trash-icon [fill]="fill()" />
+    } }
+  `, isInline: true, dependencies: [{ kind: "component", type: AngularIconComponent, selector: "ndt-angular-icon" }, { kind: "component", type: BoltIconComponent, selector: "ndt-bolt-icon", inputs: ["fill"] }, { kind: "component", type: BugIconComponent, selector: "ndt-bug-icon", inputs: ["fill"] }, { kind: "component", type: CodeIconComponent, selector: "ndt-code-icon", inputs: ["fill"] }, { kind: "component", type: DatabaseIconComponent, selector: "ndt-database-icon", inputs: ["fill"] }, { kind: "component", type: DocsIconComponent, selector: "ndt-docs-icon", inputs: ["fill"] }, { kind: "component", type: DiscordIconComponent, selector: "ndt-discord-icon", inputs: ["fill"] }, { kind: "component", type: ExportIconComponent, selector: "ndt-export-icon", inputs: ["fill"] }, { kind: "component", type: FilterIconComponent, selector: "ndt-filter-icon", inputs: ["fill"] }, { kind: "component", type: GaugeIconComponent, selector: "ndt-gauge-icon", inputs: ["fill"] }, { kind: "component", type: GearIconComponent, selector: "ndt-gear-icon", inputs: ["fill"] }, { kind: "component", type: GitBranchIconComponent, selector: "ndt-git-branch-icon", inputs: ["fill"] }, { kind: "component", type: ImportIconComponent, selector: "ndt-import-icon", inputs: ["fill"] }, { kind: "component", type: LayoutIconComponent, selector: "ndt-layout-icon", inputs: ["fill"] }, { kind: "component", type: LightbulbIconComponent, selector: "ndt-lightbulb-icon", inputs: ["fill"] }, { kind: "component", type: LightingIconComponent, selector: "ndt-lighting-icon", inputs: ["fill"] }, { kind: "component", type: LockIconComponent, selector: "ndt-lock-icon", inputs: ["fill"] }, { kind: "component", type: NetworkIconComponent, selector: "ndt-network-icon", inputs: ["fill"] }, { kind: "component", type: PuzzleIconComponent, selector: "ndt-puzzle-icon", inputs: ["fill"] }, { kind: "component", type: RefreshIconComponent, selector: "ndt-refresh-icon", inputs: ["fill"] }, { kind: "component", type: StarIconComponent, selector: "ndt-star-icon", inputs: ["fill"] }, { kind: "component", type: TerminalIconComponent, selector: "ndt-terminal-icon", inputs: ["fill"] }, { kind: "component", type: ToggleLeftIconComponent, selector: "ndt-toggle-left-icon", inputs: ["fill"] }, { kind: "component", type: UsersIconComponent, selector: "ndt-users-icon", inputs: ["fill"] }, { kind: "component", type: SunIconComponent, selector: "ndt-sun-icon", inputs: ["fill"] }, { kind: "component", type: MoonIconComponent, selector: "ndt-moon-icon", inputs: ["fill"] }, { kind: "component", type: TranslateIconComponent, selector: "ndt-translate-icon", inputs: ["fill"] }, { kind: "component", type: TrashIconComponent, selector: "ndt-trash-icon", inputs: ["fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ndt-icon',
+                    standalone: true,
+                    imports: [
+                        AngularIconComponent,
+                        BoltIconComponent,
+                        BugIconComponent,
+                        CodeIconComponent,
+                        DatabaseIconComponent,
+                        DocsIconComponent,
+                        DiscordIconComponent,
+                        ExportIconComponent,
+                        FilterIconComponent,
+                        GaugeIconComponent,
+                        GearIconComponent,
+                        GitBranchIconComponent,
+                        ImportIconComponent,
+                        LayoutIconComponent,
+                        LightbulbIconComponent,
+                        LightingIconComponent,
+                        LockIconComponent,
+                        NetworkIconComponent,
+                        PuzzleIconComponent,
+                        RefreshIconComponent,
+                        StarIconComponent,
+                        TerminalIconComponent,
+                        ToggleLeftIconComponent,
+                        UsersIconComponent,
+                        SunIconComponent,
+                        MoonIconComponent,
+                        TranslateIconComponent,
+                        TrashIconComponent,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @switch (name()) { @case ('angular') {
+    <ndt-angular-icon />
+    } @case ('bolt') {
+    <ndt-bolt-icon [fill]="fill()" />
+    } @case ('bug') {
+    <ndt-bug-icon [fill]="fill()" />
+    } @case ('code') {
+    <ndt-code-icon [fill]="fill()" />
+    } @case ('database') {
+    <ndt-database-icon [fill]="fill()" />
+    } @case ('docs') {
+    <ndt-docs-icon [fill]="fill()" />
+    } @case ('export') {
+    <ndt-export-icon [fill]="fill()" />
+    } @case ('filter') {
+    <ndt-filter-icon [fill]="fill()" />
+    } @case ('gauge') {
+    <ndt-gauge-icon [fill]="fill()" />
+    } @case ('gear') {
+    <ndt-gear-icon [fill]="fill()" />
+    } @case ('git-branch') {
+    <ndt-git-branch-icon [fill]="fill()" />
+    } @case ('import') {
+    <ndt-import-icon [fill]="fill()" />
+    } @case ('layout') {
+    <ndt-layout-icon [fill]="fill()" />
+    } @case ('lighting') {
+    <ndt-lighting-icon [fill]="fill()" />
+    } @case ('lightbulb') {
+    <ndt-lightbulb-icon [fill]="fill()" />
+    } @case ('lock') {
+    <ndt-lock-icon [fill]="fill()" />
+    } @case ('network') {
+    <ndt-network-icon [fill]="fill()" />
+    } @case ('puzzle') {
+    <ndt-puzzle-icon [fill]="fill()" />
+    } @case ('refresh') {
+    <ndt-refresh-icon [fill]="fill()" />
+    } @case ('star') {
+    <ndt-star-icon [fill]="fill()" />
+    } @case ('terminal') {
+    <ndt-terminal-icon [fill]="fill()" />
+    } @case ('toggle-left') {
+    <ndt-toggle-left-icon [fill]="fill()" />
+    } @case ('user') {
+    <ndt-users-icon [fill]="fill()" />
+    } @case ('sun') {
+    <ndt-sun-icon [fill]="fill()" />
+    } @case ('moon') {
+    <ndt-moon-icon [fill]="fill()" />
+    } @case ('translate') {
+    <ndt-translate-icon [fill]="fill()" />
+    } @case ('discord') {
+    <ndt-discord-icon [fill]="fill()" />
+    } @case ('trash') {
+    <ndt-trash-icon [fill]="fill()" />
+    } }
+  `,
+                }]
+        }] });
+
+class DevToolbarToolButtonComponent {
+    constructor() {
+        // Injects
+        this.state = inject(DevToolbarStateService);
+        this.elementRef = inject(ElementRef);
+        // Inputs
+        this.title = input.required();
+        this.toolId = input.required();
+        // Outputs
+        this.open = output();
+        // Signals
+        this.isActive = computed(() => this.state.activeToolId() === this.toolId());
+        this.isToolbarVisible = this.state.isVisible;
+        this.isFocused = signal(false);
+        this.tooltip = computed(() => this.elementRef.nativeElement.parentElement?.getAttribute('data-tooltip') ?? '');
+        this.isTooltipVisible = computed(() => this.tooltip() && !this.isActive());
+        // Properties
+        this.tooltipState = false;
+        this.hideDelay = 3000;
+    }
+    // Public methods
+    onClick() {
+        this.isFocused.set(false);
+        this.open.emit();
+    }
+    onMouseEnter() {
+        this.tooltipState = true;
+    }
+    onMouseLeave() {
+        this.tooltipState = false;
+    }
+    onEscape() {
+        this.isFocused.set(false);
+    }
+    onFocus() {
+        this.isFocused.set(true);
+    }
+    onBlur() {
+        this.isFocused.set(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarToolButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarToolButtonComponent, isStandalone: true, selector: "ndt-tool-button", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, toolId: { classPropertyName: "toolId", publicName: "toolId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { open: "open" }, ngImport: i0, template: `
+    <button
+      class="tool-button"
+      [class.tool-button--active]="isActive()"
+      [class.tool-button--focus]="isFocused()"
+      (mouseenter)="onMouseEnter()"
+      (focusin)="onFocus()"
+      (focusout)="onBlur()"
+      (mouseleave)="onMouseLeave()"
+      (keydown.escape)="onEscape()"
+    >
+      @if (isTooltipVisible()) {
+      <span
+        class="tooltip"
+        [@tooltipAnimation]="tooltipState ? 'visible' : 'hidden'"
+      >
+        {{ tooltip() }}
+      </span>
+      }
+      <ng-content />
+    </button>
+  `, isInline: true, styles: [".dev-toolbar{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 8px;--ndt-spacing-md: 16px;--ndt-window-padding: 24px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.dev-toolbar[data-theme=dark]{--ndt-bg-primary: rgb(17, 24, 39);--ndt-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--ndt-text-primary: rgb(255, 255, 255);--ndt-text-secondary: rgb(229, 231, 235);--ndt-text-muted: rgb(156, 163, 175);--ndt-border-primary: #343841;--ndt-border-subtle: rgba(255, 255, 255, .1);--ndt-hover-bg: rgba(255, 255, 255, .12);--ndt-hover-danger: rgb(220, 38, 38);--ndt-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--ndt-shadow-tooltip: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--ndt-shadow-window: 0px 0px 0px 0px rgba(19, 21, 26, .3), 0px 1px 2px 0px rgba(19, 21, 26, .29), 0px 4px 4px 0px rgba(19, 21, 26, .26), 0px 10px 6px 0px rgba(19, 21, 26, .15), 0px 17px 7px 0px rgba(19, 21, 26, .04), 0px 26px 7px 0px rgba(19, 21, 26, .01);--ndt-note-background: rgba(37, 99, 235, .15);--ndt-note-border: rgba(37, 99, 235, .3);--ndt-warning-background: rgba(202, 138, 4, .15);--ndt-warning-border: rgba(202, 138, 4, .3);--ndt-error-background: rgba(220, 38, 38, .15);--ndt-error-border: rgba(220, 38, 38, .3)}.dev-toolbar h1,.dev-toolbar h2,.dev-toolbar h3,.dev-toolbar h4,.dev-toolbar h5{font-weight:600;color:var(--ndt-text-primary);margin:0}.dev-toolbar h1{font-size:var(--ndt-font-size-xl)}.dev-toolbar h2{font-size:var(--ndt-font-size-lg)}.dev-toolbar h3{font-size:var(--ndt-font-size-md)}.dev-toolbar h4{font-size:var(--ndt-font-size-sm)}.dev-toolbar h5{font-size:var(--ndt-font-size-xs)}.dev-toolbar hr{border:1px solid var(--ndt-border-subtle);margin:1em 0}.dev-toolbar p{line-height:1.5em;margin:0}.tool-button{display:flex;justify-content:center;align-items:center;width:44px;height:40px;border:0;background:transparent;color:var(--ndt-text-primary);transition:var(--ndt-transition-default);cursor:pointer;opacity:.5;position:relative}.tool-button--active,.tool-button:hover{background:var(--ndt-hover-bg);opacity:1}.tool-button ::ng-deep svg{width:24px;height:24px;display:block;margin:auto}.tool-button__badge{position:absolute;top:-.25rem;right:-.25rem;background-color:var(--ndt-hover-danger);color:var(--ndt-text-primary);border-radius:var(--ndt-border-radius-full);min-width:1rem;height:1rem;font-size:.75rem;display:flex;align-items:center;justify-content:center;padding:.125rem}.tooltip{position:absolute;bottom:calc(100% + 1.2rem);left:50%;transform:translate(-50%);background:var(--ndt-bg-primary);color:var(--ndt-text-primary);padding:.5rem .75rem;border-radius:var(--ndt-border-radius-medium);font-size:.75rem;white-space:nowrap;pointer-events:none;z-index:1000;box-shadow:var(--ndt-shadow-tooltip)}\n"], animations: [
+            trigger('tooltipAnimation', [
+                state('hidden', style({
+                    opacity: 0,
+                    transform: 'translateX(-50%) translateY(1rem)',
+                })),
+                state('visible', style({
+                    opacity: 1,
+                    transform: 'translateX(-50%) translateY(0)',
+                })),
+                transition('hidden => visible', [animate('200ms ease-out')]),
+                transition('visible => hidden', [animate('150ms ease-in')]),
+            ]),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarToolButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndt-tool-button', standalone: true, template: `
+    <button
+      class="tool-button"
+      [class.tool-button--active]="isActive()"
+      [class.tool-button--focus]="isFocused()"
+      (mouseenter)="onMouseEnter()"
+      (focusin)="onFocus()"
+      (focusout)="onBlur()"
+      (mouseleave)="onMouseLeave()"
+      (keydown.escape)="onEscape()"
+    >
+      @if (isTooltipVisible()) {
+      <span
+        class="tooltip"
+        [@tooltipAnimation]="tooltipState ? 'visible' : 'hidden'"
+      >
+        {{ tooltip() }}
+      </span>
+      }
+      <ng-content />
+    </button>
+  `, animations: [
+                        trigger('tooltipAnimation', [
+                            state('hidden', style({
+                                opacity: 0,
+                                transform: 'translateX(-50%) translateY(1rem)',
+                            })),
+                            state('visible', style({
+                                opacity: 1,
+                                transform: 'translateX(-50%) translateY(0)',
+                            })),
+                            transition('hidden => visible', [animate('200ms ease-out')]),
+                            transition('visible => hidden', [animate('150ms ease-in')]),
+                        ]),
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: [".dev-toolbar{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 8px;--ndt-spacing-md: 16px;--ndt-window-padding: 24px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.dev-toolbar[data-theme=dark]{--ndt-bg-primary: rgb(17, 24, 39);--ndt-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--ndt-text-primary: rgb(255, 255, 255);--ndt-text-secondary: rgb(229, 231, 235);--ndt-text-muted: rgb(156, 163, 175);--ndt-border-primary: #343841;--ndt-border-subtle: rgba(255, 255, 255, .1);--ndt-hover-bg: rgba(255, 255, 255, .12);--ndt-hover-danger: rgb(220, 38, 38);--ndt-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--ndt-shadow-tooltip: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--ndt-shadow-window: 0px 0px 0px 0px rgba(19, 21, 26, .3), 0px 1px 2px 0px rgba(19, 21, 26, .29), 0px 4px 4px 0px rgba(19, 21, 26, .26), 0px 10px 6px 0px rgba(19, 21, 26, .15), 0px 17px 7px 0px rgba(19, 21, 26, .04), 0px 26px 7px 0px rgba(19, 21, 26, .01);--ndt-note-background: rgba(37, 99, 235, .15);--ndt-note-border: rgba(37, 99, 235, .3);--ndt-warning-background: rgba(202, 138, 4, .15);--ndt-warning-border: rgba(202, 138, 4, .3);--ndt-error-background: rgba(220, 38, 38, .15);--ndt-error-border: rgba(220, 38, 38, .3)}.dev-toolbar h1,.dev-toolbar h2,.dev-toolbar h3,.dev-toolbar h4,.dev-toolbar h5{font-weight:600;color:var(--ndt-text-primary);margin:0}.dev-toolbar h1{font-size:var(--ndt-font-size-xl)}.dev-toolbar h2{font-size:var(--ndt-font-size-lg)}.dev-toolbar h3{font-size:var(--ndt-font-size-md)}.dev-toolbar h4{font-size:var(--ndt-font-size-sm)}.dev-toolbar h5{font-size:var(--ndt-font-size-xs)}.dev-toolbar hr{border:1px solid var(--ndt-border-subtle);margin:1em 0}.dev-toolbar p{line-height:1.5em;margin:0}.tool-button{display:flex;justify-content:center;align-items:center;width:44px;height:40px;border:0;background:transparent;color:var(--ndt-text-primary);transition:var(--ndt-transition-default);cursor:pointer;opacity:.5;position:relative}.tool-button--active,.tool-button:hover{background:var(--ndt-hover-bg);opacity:1}.tool-button ::ng-deep svg{width:24px;height:24px;display:block;margin:auto}.tool-button__badge{position:absolute;top:-.25rem;right:-.25rem;background-color:var(--ndt-hover-danger);color:var(--ndt-text-primary);border-radius:var(--ndt-border-radius-full);min-width:1rem;height:1rem;font-size:.75rem;display:flex;align-items:center;justify-content:center;padding:.125rem}.tooltip{position:absolute;bottom:calc(100% + 1.2rem);left:50%;transform:translate(-50%);background:var(--ndt-bg-primary);color:var(--ndt-text-primary);padding:.5rem .75rem;border-radius:var(--ndt-border-radius-medium);font-size:.75rem;white-space:nowrap;pointer-events:none;z-index:1000;box-shadow:var(--ndt-shadow-tooltip)}\n"] }]
+        }] });
+
+class DevToolbarWindowComponent {
+    constructor() {
+        this.devToolbarStateService = inject(DevToolbarStateService);
+        this.config = input.required();
+        this.close = output();
+        this.maximize = output();
+        this.minimize = output();
+        this.theme = computed(() => this.devToolbarStateService.theme());
+    }
+    onClose() {
+        this.close.emit();
+    }
+    onMaximize() {
+        this.maximize.emit();
+    }
+    onMinimize() {
+        this.minimize.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarWindowComponent, isStandalone: true, selector: "ndt-window", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { close: "close", maximize: "maximize", minimize: "minimize" }, ngImport: i0, template: `
+    <div class="window dev-toolbar" [attr.data-theme]="theme()">
+      <div class="header">
+        <div class="header__content">
+          <div class="header__title">
+            <h1>{{ config().title }}</h1>
+            @if (config().isBeta) {
+            <span class="beta-tag">BETA</span>
+            }
+          </div>
+          <p class="header__description">{{ config().description }}</p>
+        </div>
+        <div class="header__controls">
+          @if (config().isMinimizable) {
+          <button aria-label="Minimize" class="control" (click)="onMinimize()">
+            −
+          </button>
+          } @if (config().isMaximizable) {
+          <button aria-label="Maximize" class="control" (click)="onMaximize()">
+            □
+          </button>
+          } @if (config().isClosable) {
+          <button
+            aria-label="Close"
+            class="control control--close"
+            (click)="onClose()"
+          >
+            ×
+          </button>
+          }
+        </div>
+      </div>
+
+      <div class="divider"></div>
+      <div class="content">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `, isInline: true, styles: [".dev-toolbar{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 8px;--ndt-spacing-md: 16px;--ndt-window-padding: 24px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.dev-toolbar[data-theme=dark]{--ndt-bg-primary: rgb(17, 24, 39);--ndt-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--ndt-text-primary: rgb(255, 255, 255);--ndt-text-secondary: rgb(229, 231, 235);--ndt-text-muted: rgb(156, 163, 175);--ndt-border-primary: #343841;--ndt-border-subtle: rgba(255, 255, 255, .1);--ndt-hover-bg: rgba(255, 255, 255, .12);--ndt-hover-danger: rgb(220, 38, 38);--ndt-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--ndt-shadow-tooltip: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--ndt-shadow-window: 0px 0px 0px 0px rgba(19, 21, 26, .3), 0px 1px 2px 0px rgba(19, 21, 26, .29), 0px 4px 4px 0px rgba(19, 21, 26, .26), 0px 10px 6px 0px rgba(19, 21, 26, .15), 0px 17px 7px 0px rgba(19, 21, 26, .04), 0px 26px 7px 0px rgba(19, 21, 26, .01);--ndt-note-background: rgba(37, 99, 235, .15);--ndt-note-border: rgba(37, 99, 235, .3);--ndt-warning-background: rgba(202, 138, 4, .15);--ndt-warning-border: rgba(202, 138, 4, .3);--ndt-error-background: rgba(220, 38, 38, .15);--ndt-error-border: rgba(220, 38, 38, .3)}.dev-toolbar h1,.dev-toolbar h2,.dev-toolbar h3,.dev-toolbar h4,.dev-toolbar h5{font-weight:600;color:var(--ndt-text-primary);margin:0}.dev-toolbar h1{font-size:var(--ndt-font-size-xl)}.dev-toolbar h2{font-size:var(--ndt-font-size-lg)}.dev-toolbar h3{font-size:var(--ndt-font-size-md)}.dev-toolbar h4{font-size:var(--ndt-font-size-sm)}.dev-toolbar h5{font-size:var(--ndt-font-size-xs)}.dev-toolbar hr{border:1px solid var(--ndt-border-subtle);margin:1em 0}.dev-toolbar p{line-height:1.5em;margin:0}:host{display:block;width:100%}.window{box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-large);padding:var(--ndt-window-padding);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";color:var(--ndt-text-secondary);z-index:999999999;box-shadow:var(--ndt-shadow-window)}.header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start}.header__title{display:flex;align-items:center;gap:var(--ndt-spacing-sm)}.header__title .beta-tag{font-size:var(--ndt-font-size-xxs, .65rem);background:var(--ndt-purple, #8b5cf6);color:var(--ndt-text-on-primary);padding:1px 4px;margin-left:var(--ndt-spacing-xs);border-radius:var(--ndt-border-radius-small);font-weight:500;text-transform:uppercase;letter-spacing:.5px}.header__description{font-size:var(--ndt-font-size-sm);color:var(--ndt-text-muted);word-wrap:break-word;overflow-wrap:break-word;max-width:100%}.header__content{display:flex;flex-direction:column}.header__controls{display:flex;gap:var(--ndt-spacing-sm)}.content{flex:1;overflow:auto}.divider{height:1px;background-color:var(--ndt-border-primary);margin-bottom:var(--ndt-spacing-md);margin-top:var(--ndt-spacing-md)}.control{background:none;border:none;color:var(--ndt-text-secondary);cursor:pointer;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-small);font-size:var(--ndt-font-size-md);line-height:1;transition:var(--ndt-transition-smooth)}.control:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.control--close:hover{background:var(--ndt-hover-danger)}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarWindowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndt-window', standalone: true, template: `
+    <div class="window dev-toolbar" [attr.data-theme]="theme()">
+      <div class="header">
+        <div class="header__content">
+          <div class="header__title">
+            <h1>{{ config().title }}</h1>
+            @if (config().isBeta) {
+            <span class="beta-tag">BETA</span>
+            }
+          </div>
+          <p class="header__description">{{ config().description }}</p>
+        </div>
+        <div class="header__controls">
+          @if (config().isMinimizable) {
+          <button aria-label="Minimize" class="control" (click)="onMinimize()">
+            −
+          </button>
+          } @if (config().isMaximizable) {
+          <button aria-label="Maximize" class="control" (click)="onMaximize()">
+            □
+          </button>
+          } @if (config().isClosable) {
+          <button
+            aria-label="Close"
+            class="control control--close"
+            (click)="onClose()"
+          >
+            ×
+          </button>
+          }
+        </div>
+      </div>
+
+      <div class="divider"></div>
+      <div class="content">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `, styles: [".dev-toolbar{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 8px;--ndt-spacing-md: 16px;--ndt-window-padding: 24px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.dev-toolbar[data-theme=dark]{--ndt-bg-primary: rgb(17, 24, 39);--ndt-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--ndt-text-primary: rgb(255, 255, 255);--ndt-text-secondary: rgb(229, 231, 235);--ndt-text-muted: rgb(156, 163, 175);--ndt-border-primary: #343841;--ndt-border-subtle: rgba(255, 255, 255, .1);--ndt-hover-bg: rgba(255, 255, 255, .12);--ndt-hover-danger: rgb(220, 38, 38);--ndt-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--ndt-shadow-tooltip: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--ndt-shadow-window: 0px 0px 0px 0px rgba(19, 21, 26, .3), 0px 1px 2px 0px rgba(19, 21, 26, .29), 0px 4px 4px 0px rgba(19, 21, 26, .26), 0px 10px 6px 0px rgba(19, 21, 26, .15), 0px 17px 7px 0px rgba(19, 21, 26, .04), 0px 26px 7px 0px rgba(19, 21, 26, .01);--ndt-note-background: rgba(37, 99, 235, .15);--ndt-note-border: rgba(37, 99, 235, .3);--ndt-warning-background: rgba(202, 138, 4, .15);--ndt-warning-border: rgba(202, 138, 4, .3);--ndt-error-background: rgba(220, 38, 38, .15);--ndt-error-border: rgba(220, 38, 38, .3)}.dev-toolbar h1,.dev-toolbar h2,.dev-toolbar h3,.dev-toolbar h4,.dev-toolbar h5{font-weight:600;color:var(--ndt-text-primary);margin:0}.dev-toolbar h1{font-size:var(--ndt-font-size-xl)}.dev-toolbar h2{font-size:var(--ndt-font-size-lg)}.dev-toolbar h3{font-size:var(--ndt-font-size-md)}.dev-toolbar h4{font-size:var(--ndt-font-size-sm)}.dev-toolbar h5{font-size:var(--ndt-font-size-xs)}.dev-toolbar hr{border:1px solid var(--ndt-border-subtle);margin:1em 0}.dev-toolbar p{line-height:1.5em;margin:0}:host{display:block;width:100%}.window{box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-large);padding:var(--ndt-window-padding);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";color:var(--ndt-text-secondary);z-index:999999999;box-shadow:var(--ndt-shadow-window)}.header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start}.header__title{display:flex;align-items:center;gap:var(--ndt-spacing-sm)}.header__title .beta-tag{font-size:var(--ndt-font-size-xxs, .65rem);background:var(--ndt-purple, #8b5cf6);color:var(--ndt-text-on-primary);padding:1px 4px;margin-left:var(--ndt-spacing-xs);border-radius:var(--ndt-border-radius-small);font-weight:500;text-transform:uppercase;letter-spacing:.5px}.header__description{font-size:var(--ndt-font-size-sm);color:var(--ndt-text-muted);word-wrap:break-word;overflow-wrap:break-word;max-width:100%}.header__content{display:flex;flex-direction:column}.header__controls{display:flex;gap:var(--ndt-spacing-sm)}.content{flex:1;overflow:auto}.divider{height:1px;background-color:var(--ndt-border-primary);margin-bottom:var(--ndt-spacing-md);margin-top:var(--ndt-spacing-md)}.control{background:none;border:none;color:var(--ndt-text-secondary);cursor:pointer;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-small);font-size:var(--ndt-font-size-md);line-height:1;transition:var(--ndt-transition-smooth)}.control:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.control--close:hover{background:var(--ndt-hover-danger)}\n"] }]
+        }] });
+
+class DevToolbarToolComponent {
+    constructor() {
+        this.state = inject(DevToolbarStateService);
+        this.options = input.required();
+        this.icon = input.required();
+        this.title = input.required();
+        this.isActive = computed(() => this.state.activeToolId() === this.options().id);
+        this.height = computed(() => {
+            switch (this.options().size) {
+                case 'small':
+                    return 320;
+                case 'medium':
+                    return 480;
+                case 'tall':
+                    return 620;
+                case 'large':
+                    return 620;
+                default:
+                    return 480;
+            }
+        });
+        this.width = computed(() => {
+            switch (this.options().size) {
+                case 'small':
+                    return 320;
+                case 'medium':
+                    return 480;
+                case 'tall':
+                    return 480;
+                case 'large':
+                    return 620;
+                default:
+                    return 400;
+            }
+        });
+        this.positions = computed(() => {
+            const triggerXPosition = this.getButtonContainerXPosition();
+            const windowCenter = window.innerWidth / 2;
+            const offsetX = windowCenter - triggerXPosition - 22;
+            return [
+                {
+                    originX: 'center',
+                    originY: 'center',
+                    overlayX: 'center',
+                    overlayY: 'center',
+                    offsetY: -(Math.ceil(this.height() / 2) + 36),
+                    offsetX,
+                },
+            ];
+        });
+    }
+    onOpen() {
+        this.state.setActiveTool(this.options().id);
+    }
+    onClose() {
+        this.state.setActiveTool(null);
+    }
+    getButtonContainerXPosition() {
+        const buttonContainerRect = this.buttonContainer?.nativeElement?.getBoundingClientRect();
+        return buttonContainerRect?.left ?? 0;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarToolComponent, isStandalone: true, selector: "ndt-toolbar-tool", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, queries: [{ propertyName: "buttonComponent", first: true, predicate: DevToolbarToolButtonComponent, descendants: true }], viewQueries: [{ propertyName: "buttonContainer", first: true, predicate: ["buttonContainer"], descendants: true }], ngImport: i0, template: `
+    <div #trigger="cdkOverlayOrigin" class="dev-toolbar-tool" cdkOverlayOrigin>
+      <div
+        class="dev-toolbar-tool__icon"
+        (click)="onOpen()"
+        (keydown.enter)="onOpen()"
+        (keydown.space)="onOpen()"
+        tabindex="0"
+      >
+        <div #buttonContainer [attr.data-tooltip]="title()">
+          @if (icon()) {
+          <ndt-tool-button [title]="title()" [toolId]="options().id">
+            <ndt-icon [name]="icon()" />
+          </ndt-tool-button>
+          } @else {
+          <ng-content select="ndt-tool-button"></ng-content>
+          }
+        </div>
+      </div>
+
+      @if (isActive()) {
+      <ng-template
+        #contentTemplate
+        [cdkConnectedOverlayOrigin]="trigger"
+        [cdkConnectedOverlayOpen]="isActive()"
+        [cdkConnectedOverlayPositions]="positions()"
+        [cdkConnectedOverlayWidth]="width()"
+        [cdkConnectedOverlayHeight]="height()"
+        cdkConnectedOverlay
+      >
+        <ndt-window [@slideAnimation] [config]="options()" (close)="onClose()">
+          <ng-content />
+        </ndt-window>
+      </ng-template>
+      }
+    </div>
+  `, isInline: true, styles: [".dev-toolbar{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 8px;--ndt-spacing-md: 16px;--ndt-window-padding: 24px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.dev-toolbar[data-theme=dark]{--ndt-bg-primary: rgb(17, 24, 39);--ndt-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--ndt-text-primary: rgb(255, 255, 255);--ndt-text-secondary: rgb(229, 231, 235);--ndt-text-muted: rgb(156, 163, 175);--ndt-border-primary: #343841;--ndt-border-subtle: rgba(255, 255, 255, .1);--ndt-hover-bg: rgba(255, 255, 255, .12);--ndt-hover-danger: rgb(220, 38, 38);--ndt-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--ndt-shadow-tooltip: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--ndt-shadow-window: 0px 0px 0px 0px rgba(19, 21, 26, .3), 0px 1px 2px 0px rgba(19, 21, 26, .29), 0px 4px 4px 0px rgba(19, 21, 26, .26), 0px 10px 6px 0px rgba(19, 21, 26, .15), 0px 17px 7px 0px rgba(19, 21, 26, .04), 0px 26px 7px 0px rgba(19, 21, 26, .01);--ndt-note-background: rgba(37, 99, 235, .15);--ndt-note-border: rgba(37, 99, 235, .3);--ndt-warning-background: rgba(202, 138, 4, .15);--ndt-warning-border: rgba(202, 138, 4, .3);--ndt-error-background: rgba(220, 38, 38, .15);--ndt-error-border: rgba(220, 38, 38, .3)}.dev-toolbar h1,.dev-toolbar h2,.dev-toolbar h3,.dev-toolbar h4,.dev-toolbar h5{font-weight:600;color:var(--ndt-text-primary);margin:0}.dev-toolbar h1{font-size:var(--ndt-font-size-xl)}.dev-toolbar h2{font-size:var(--ndt-font-size-lg)}.dev-toolbar h3{font-size:var(--ndt-font-size-md)}.dev-toolbar h4{font-size:var(--ndt-font-size-sm)}.dev-toolbar h5{font-size:var(--ndt-font-size-xs)}.dev-toolbar hr{border:1px solid var(--ndt-border-subtle);margin:1em 0}.dev-toolbar p{line-height:1.5em;margin:0}.tool{position:relative}.trigger{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: DevToolbarWindowComponent, selector: "ndt-window", inputs: ["config"], outputs: ["close", "maximize", "minimize"] }, { kind: "component", type: DevToolbarToolButtonComponent, selector: "ndt-tool-button", inputs: ["title", "toolId"], outputs: ["open"] }, { kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], animations: [
+            trigger('slideAnimation', [
+                transition(':enter', [
+                    style({
+                        transform: 'translateY(20px)',
+                        opacity: 0,
+                    }),
+                    animate('400ms cubic-bezier(0.4, 0, 0.2, 1)', style({
+                        transform: 'translateY(0)',
+                        opacity: 1,
+                    })),
+                ]),
+                transition(':leave', [
+                    style({
+                        transform: 'translateY(0)',
+                        opacity: 1,
+                    }),
+                    animate('400ms cubic-bezier(0.4, 0, 0.2, 1)', style({
+                        transform: 'translateY(20px)',
+                        opacity: 0,
+                    })),
+                ]),
+            ]),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarToolComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndt-toolbar-tool', standalone: true, imports: [
+                        CdkConnectedOverlay,
+                        OverlayModule,
+                        DevToolbarWindowComponent,
+                        DevToolbarToolButtonComponent,
+                        DevToolbarIconComponent,
+                    ], template: `
+    <div #trigger="cdkOverlayOrigin" class="dev-toolbar-tool" cdkOverlayOrigin>
+      <div
+        class="dev-toolbar-tool__icon"
+        (click)="onOpen()"
+        (keydown.enter)="onOpen()"
+        (keydown.space)="onOpen()"
+        tabindex="0"
+      >
+        <div #buttonContainer [attr.data-tooltip]="title()">
+          @if (icon()) {
+          <ndt-tool-button [title]="title()" [toolId]="options().id">
+            <ndt-icon [name]="icon()" />
+          </ndt-tool-button>
+          } @else {
+          <ng-content select="ndt-tool-button"></ng-content>
+          }
+        </div>
+      </div>
+
+      @if (isActive()) {
+      <ng-template
+        #contentTemplate
+        [cdkConnectedOverlayOrigin]="trigger"
+        [cdkConnectedOverlayOpen]="isActive()"
+        [cdkConnectedOverlayPositions]="positions()"
+        [cdkConnectedOverlayWidth]="width()"
+        [cdkConnectedOverlayHeight]="height()"
+        cdkConnectedOverlay
+      >
+        <ndt-window [@slideAnimation] [config]="options()" (close)="onClose()">
+          <ng-content />
+        </ndt-window>
+      </ng-template>
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+                        trigger('slideAnimation', [
+                            transition(':enter', [
+                                style({
+                                    transform: 'translateY(20px)',
+                                    opacity: 0,
+                                }),
+                                animate('400ms cubic-bezier(0.4, 0, 0.2, 1)', style({
+                                    transform: 'translateY(0)',
+                                    opacity: 1,
+                                })),
+                            ]),
+                            transition(':leave', [
+                                style({
+                                    transform: 'translateY(0)',
+                                    opacity: 1,
+                                }),
+                                animate('400ms cubic-bezier(0.4, 0, 0.2, 1)', style({
+                                    transform: 'translateY(20px)',
+                                    opacity: 0,
+                                })),
+                            ]),
+                        ]),
+                    ], styles: [".dev-toolbar{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 8px;--ndt-spacing-md: 16px;--ndt-window-padding: 24px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.dev-toolbar[data-theme=dark]{--ndt-bg-primary: rgb(17, 24, 39);--ndt-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--ndt-text-primary: rgb(255, 255, 255);--ndt-text-secondary: rgb(229, 231, 235);--ndt-text-muted: rgb(156, 163, 175);--ndt-border-primary: #343841;--ndt-border-subtle: rgba(255, 255, 255, .1);--ndt-hover-bg: rgba(255, 255, 255, .12);--ndt-hover-danger: rgb(220, 38, 38);--ndt-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--ndt-shadow-tooltip: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--ndt-shadow-window: 0px 0px 0px 0px rgba(19, 21, 26, .3), 0px 1px 2px 0px rgba(19, 21, 26, .29), 0px 4px 4px 0px rgba(19, 21, 26, .26), 0px 10px 6px 0px rgba(19, 21, 26, .15), 0px 17px 7px 0px rgba(19, 21, 26, .04), 0px 26px 7px 0px rgba(19, 21, 26, .01);--ndt-note-background: rgba(37, 99, 235, .15);--ndt-note-border: rgba(37, 99, 235, .3);--ndt-warning-background: rgba(202, 138, 4, .15);--ndt-warning-border: rgba(202, 138, 4, .3);--ndt-error-background: rgba(220, 38, 38, .15);--ndt-error-border: rgba(220, 38, 38, .3)}.dev-toolbar h1,.dev-toolbar h2,.dev-toolbar h3,.dev-toolbar h4,.dev-toolbar h5{font-weight:600;color:var(--ndt-text-primary);margin:0}.dev-toolbar h1{font-size:var(--ndt-font-size-xl)}.dev-toolbar h2{font-size:var(--ndt-font-size-lg)}.dev-toolbar h3{font-size:var(--ndt-font-size-md)}.dev-toolbar h4{font-size:var(--ndt-font-size-sm)}.dev-toolbar h5{font-size:var(--ndt-font-size-xs)}.dev-toolbar hr{border:1px solid var(--ndt-border-subtle);margin:1em 0}.dev-toolbar p{line-height:1.5em;margin:0}.tool{position:relative}.trigger{cursor:pointer}\n"] }]
+        }], propDecorators: { buttonContainer: [{
+                type: ViewChild,
+                args: ['buttonContainer']
+            }], buttonComponent: [{
+                type: ContentChild,
+                args: [DevToolbarToolButtonComponent]
+            }] } });
+
+class DevToolbarInputComponent {
+    constructor() {
+        this.value = model.required();
+        this.type = input('text');
+        this.placeholder = input('');
+        this.ariaLabel = input('');
+        this.inputClass = input('input');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: DevToolbarInputComponent, isStandalone: true, selector: "ndt-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: `
+    <input
+      [attr.aria-label]="ariaLabel()"
+      [type]="type()"
+      [class]="inputClass()"
+      [ngModel]="value()"
+      [placeholder]="placeholder()"
+      (ngModelChange)="value.set($event)"
+    />
+  `, isInline: true, styles: [":host{display:block}.input{width:100%;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background-color:var(--ndt-bg-primary);color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);transition:var(--ndt-transition-default);box-sizing:border-box}.input::placeholder{color:var(--ndt-text-muted)}.input:focus{outline:none;border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.input:disabled{background-color:var(--ndt-bg-secondary);cursor:not-allowed;color:var(--ndt-text-muted)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndt-input', standalone: true, imports: [FormsModule], template: `
+    <input
+      [attr.aria-label]="ariaLabel()"
+      [type]="type()"
+      [class]="inputClass()"
+      [ngModel]="value()"
+      [placeholder]="placeholder()"
+      (ngModelChange)="value.set($event)"
+    />
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.input{width:100%;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background-color:var(--ndt-bg-primary);color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);transition:var(--ndt-transition-default);box-sizing:border-box}.input::placeholder{color:var(--ndt-text-muted)}.input:focus{outline:none;border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.input:disabled{background-color:var(--ndt-bg-secondary);cursor:not-allowed;color:var(--ndt-text-muted)}\n"] }]
+        }] });
+
+class DevToolbarSelectComponent {
+    constructor() {
+        this.devToolbarStateService = inject(DevToolbarStateService);
+        this.value = model();
+        this.options = input.required();
+        this.ariaLabel = input('');
+        this.label = input('');
+        this.size = input('medium');
+        this.theme = computed(() => this.devToolbarStateService.theme());
+        this.selectMenuId = `select-menu-${Math.random()
+            .toString(36)
+            .slice(2, 11)}`;
+        this.isOpen = signal(false);
+        this.selectedLabel = computed(() => {
+            const selected = this.options()?.find((opt) => opt.value === this.value());
+            return selected?.label ?? '';
+        });
+        this.positions = [
+            {
+                originX: 'end',
+                originY: 'bottom',
+                overlayX: 'end',
+                overlayY: 'top',
+                offsetY: 4,
+            },
+            {
+                originX: 'end',
+                originY: 'top',
+                overlayX: 'end',
+                overlayY: 'bottom',
+                offsetY: -4,
+            },
+        ];
+    }
+    toggle() {
+        this.isOpen.update((v) => !v);
+    }
+    close() {
+        this.isOpen.set(false);
+    }
+    selectOption(option) {
+        this.value.set(option.value);
+        this.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarSelectComponent, isStandalone: true, selector: "ndt-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: `
+    <div
+      class="dev-toolbar select"
+      [class.small]="size() === 'small'"
+      [class.open]="isOpen()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-expanded]="isOpen()"
+      [attr.aria-controls]="selectMenuId"
+      [attr.data-theme]="theme()"
+      cdkOverlayOrigin
+      #trigger="cdkOverlayOrigin"
+      (click)="toggle()"
+      (keydown.enter)="toggle()"
+      (keydown.space)="toggle()"
+      tabindex="0"
+      role="combobox"
+    >
+      <span class="select__value">{{ selectedLabel() }}</span>
+      <span class="select__arrow" aria-hidden="true"></span>
+    </div>
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="trigger"
+      [cdkConnectedOverlayOpen]="isOpen()"
+      [cdkConnectedOverlayPositions]="positions"
+      (overlayOutsideClick)="close()"
+    >
+      <div
+        [id]="selectMenuId"
+        class="dev-toolbar select-menu"
+        cdkMenu
+        role="listbox"
+        [attr.data-theme]="theme()"
+      >
+        @for (option of options(); track option.value) {
+        <button
+          class="select-menu-item"
+          [class.selected]="option.value === value()"
+          [attr.aria-selected]="option.value === value()"
+          cdkMenuItem
+          type="button"
+          (click)="selectOption(option)"
+        >
+          {{ option.label }}
+        </button>
+        }
+      </div>
+    </ng-template>
+  `, isInline: true, styles: [".dev-toolbar{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 8px;--ndt-spacing-md: 16px;--ndt-window-padding: 24px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.dev-toolbar[data-theme=dark]{--ndt-bg-primary: rgb(17, 24, 39);--ndt-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--ndt-text-primary: rgb(255, 255, 255);--ndt-text-secondary: rgb(229, 231, 235);--ndt-text-muted: rgb(156, 163, 175);--ndt-border-primary: #343841;--ndt-border-subtle: rgba(255, 255, 255, .1);--ndt-hover-bg: rgba(255, 255, 255, .12);--ndt-hover-danger: rgb(220, 38, 38);--ndt-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--ndt-shadow-tooltip: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--ndt-shadow-window: 0px 0px 0px 0px rgba(19, 21, 26, .3), 0px 1px 2px 0px rgba(19, 21, 26, .29), 0px 4px 4px 0px rgba(19, 21, 26, .26), 0px 10px 6px 0px rgba(19, 21, 26, .15), 0px 17px 7px 0px rgba(19, 21, 26, .04), 0px 26px 7px 0px rgba(19, 21, 26, .01);--ndt-note-background: rgba(37, 99, 235, .15);--ndt-note-border: rgba(37, 99, 235, .3);--ndt-warning-background: rgba(202, 138, 4, .15);--ndt-warning-border: rgba(202, 138, 4, .3);--ndt-error-background: rgba(220, 38, 38, .15);--ndt-error-border: rgba(220, 38, 38, .3)}.dev-toolbar h1,.dev-toolbar h2,.dev-toolbar h3,.dev-toolbar h4,.dev-toolbar h5{font-weight:600;color:var(--ndt-text-primary);margin:0}.dev-toolbar h1{font-size:var(--ndt-font-size-xl)}.dev-toolbar h2{font-size:var(--ndt-font-size-lg)}.dev-toolbar h3{font-size:var(--ndt-font-size-md)}.dev-toolbar h4{font-size:var(--ndt-font-size-sm)}.dev-toolbar h5{font-size:var(--ndt-font-size-xs)}.dev-toolbar hr{border:1px solid var(--ndt-border-subtle);margin:1em 0}.dev-toolbar p{line-height:1.5em;margin:0}.select{position:relative;width:100%;min-width:120px;display:flex;align-items:center;justify-content:space-between;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background-color:var(--ndt-bg-primary);color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--ndt-transition-default);outline:none;height:32px;box-sizing:border-box}.select:hover{background-color:var(--ndt-hover-bg);border-color:var(--ndt-primary)}.select:focus-visible{outline:none;border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.select.small{padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);font-size:var(--ndt-font-size-sm);height:24px}.select.open{border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.select.open .select__arrow{transform:rotate(180deg)}.select__value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1;margin-right:var(--ndt-spacing-sm);min-width:0}.select__arrow{width:16px;height:16px;flex-shrink:0;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:center;background-size:contain;transition:transform .2s ease;opacity:.9}.select-menu{display:inline-flex;flex-direction:column;min-width:180px;background-color:var(--ndt-bg-primary);padding:var(--ndt-spacing-xs) 0;border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);box-shadow:var(--ndt-shadow-window);color:var(--ndt-text-primary);max-height:min(400px,70vh);overflow-y:auto;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.select-menu::-webkit-scrollbar{width:8px;height:8px}.select-menu::-webkit-scrollbar-track{background:transparent}.select-menu::-webkit-scrollbar-thumb{background-color:var(--ndt-border-primary);border-radius:4px;border:2px solid var(--ndt-bg-primary)}.select-menu-item{background-color:transparent;cursor:pointer;border:none;color:inherit;-webkit-user-select:none;user-select:none;min-width:64px;line-height:36px;padding:0 var(--ndt-spacing-md);display:flex;align-items:center;flex-direction:row;flex:1;font-size:var(--ndt-font-size-sm);font-family:inherit;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.select-menu-item:hover{background-color:var(--ndt-hover-bg)}.select-menu-item:active{background-color:rgba(var(--ndt-primary-rgb),.15)}.select-menu-item.selected{color:var(--ndt-primary);background-color:rgba(var(--ndt-primary-rgb),.1);font-weight:500}.select-menu-item.selected:hover{background-color:rgba(var(--ndt-primary-rgb),.15)}.select-menu-item.selected:before{content:\"\";position:absolute;left:0;top:8px;width:3px;height:calc(100% - 16px);background-color:var(--ndt-primary);border-radius:2px}.select-menu-item:focus-visible{outline:none;background-color:var(--ndt-hover-bg)}.select-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i2.CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: i2.CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndt-select', standalone: true, imports: [CommonModule, FormsModule, OverlayModule, CdkMenuModule], template: `
+    <div
+      class="dev-toolbar select"
+      [class.small]="size() === 'small'"
+      [class.open]="isOpen()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-expanded]="isOpen()"
+      [attr.aria-controls]="selectMenuId"
+      [attr.data-theme]="theme()"
+      cdkOverlayOrigin
+      #trigger="cdkOverlayOrigin"
+      (click)="toggle()"
+      (keydown.enter)="toggle()"
+      (keydown.space)="toggle()"
+      tabindex="0"
+      role="combobox"
+    >
+      <span class="select__value">{{ selectedLabel() }}</span>
+      <span class="select__arrow" aria-hidden="true"></span>
+    </div>
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="trigger"
+      [cdkConnectedOverlayOpen]="isOpen()"
+      [cdkConnectedOverlayPositions]="positions"
+      (overlayOutsideClick)="close()"
+    >
+      <div
+        [id]="selectMenuId"
+        class="dev-toolbar select-menu"
+        cdkMenu
+        role="listbox"
+        [attr.data-theme]="theme()"
+      >
+        @for (option of options(); track option.value) {
+        <button
+          class="select-menu-item"
+          [class.selected]="option.value === value()"
+          [attr.aria-selected]="option.value === value()"
+          cdkMenuItem
+          type="button"
+          (click)="selectOption(option)"
+        >
+          {{ option.label }}
+        </button>
+        }
+      </div>
+    </ng-template>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".dev-toolbar{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 8px;--ndt-spacing-md: 16px;--ndt-window-padding: 24px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.dev-toolbar[data-theme=dark]{--ndt-bg-primary: rgb(17, 24, 39);--ndt-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--ndt-text-primary: rgb(255, 255, 255);--ndt-text-secondary: rgb(229, 231, 235);--ndt-text-muted: rgb(156, 163, 175);--ndt-border-primary: #343841;--ndt-border-subtle: rgba(255, 255, 255, .1);--ndt-hover-bg: rgba(255, 255, 255, .12);--ndt-hover-danger: rgb(220, 38, 38);--ndt-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--ndt-shadow-tooltip: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--ndt-shadow-window: 0px 0px 0px 0px rgba(19, 21, 26, .3), 0px 1px 2px 0px rgba(19, 21, 26, .29), 0px 4px 4px 0px rgba(19, 21, 26, .26), 0px 10px 6px 0px rgba(19, 21, 26, .15), 0px 17px 7px 0px rgba(19, 21, 26, .04), 0px 26px 7px 0px rgba(19, 21, 26, .01);--ndt-note-background: rgba(37, 99, 235, .15);--ndt-note-border: rgba(37, 99, 235, .3);--ndt-warning-background: rgba(202, 138, 4, .15);--ndt-warning-border: rgba(202, 138, 4, .3);--ndt-error-background: rgba(220, 38, 38, .15);--ndt-error-border: rgba(220, 38, 38, .3)}.dev-toolbar h1,.dev-toolbar h2,.dev-toolbar h3,.dev-toolbar h4,.dev-toolbar h5{font-weight:600;color:var(--ndt-text-primary);margin:0}.dev-toolbar h1{font-size:var(--ndt-font-size-xl)}.dev-toolbar h2{font-size:var(--ndt-font-size-lg)}.dev-toolbar h3{font-size:var(--ndt-font-size-md)}.dev-toolbar h4{font-size:var(--ndt-font-size-sm)}.dev-toolbar h5{font-size:var(--ndt-font-size-xs)}.dev-toolbar hr{border:1px solid var(--ndt-border-subtle);margin:1em 0}.dev-toolbar p{line-height:1.5em;margin:0}.select{position:relative;width:100%;min-width:120px;display:flex;align-items:center;justify-content:space-between;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background-color:var(--ndt-bg-primary);color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--ndt-transition-default);outline:none;height:32px;box-sizing:border-box}.select:hover{background-color:var(--ndt-hover-bg);border-color:var(--ndt-primary)}.select:focus-visible{outline:none;border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.select.small{padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);font-size:var(--ndt-font-size-sm);height:24px}.select.open{border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.select.open .select__arrow{transform:rotate(180deg)}.select__value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1;margin-right:var(--ndt-spacing-sm);min-width:0}.select__arrow{width:16px;height:16px;flex-shrink:0;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:center;background-size:contain;transition:transform .2s ease;opacity:.9}.select-menu{display:inline-flex;flex-direction:column;min-width:180px;background-color:var(--ndt-bg-primary);padding:var(--ndt-spacing-xs) 0;border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);box-shadow:var(--ndt-shadow-window);color:var(--ndt-text-primary);max-height:min(400px,70vh);overflow-y:auto;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.select-menu::-webkit-scrollbar{width:8px;height:8px}.select-menu::-webkit-scrollbar-track{background:transparent}.select-menu::-webkit-scrollbar-thumb{background-color:var(--ndt-border-primary);border-radius:4px;border:2px solid var(--ndt-bg-primary)}.select-menu-item{background-color:transparent;cursor:pointer;border:none;color:inherit;-webkit-user-select:none;user-select:none;min-width:64px;line-height:36px;padding:0 var(--ndt-spacing-md);display:flex;align-items:center;flex-direction:row;flex:1;font-size:var(--ndt-font-size-sm);font-family:inherit;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.select-menu-item:hover{background-color:var(--ndt-hover-bg)}.select-menu-item:active{background-color:rgba(var(--ndt-primary-rgb),.15)}.select-menu-item.selected{color:var(--ndt-primary);background-color:rgba(var(--ndt-primary-rgb),.1);font-weight:500}.select-menu-item.selected:hover{background-color:rgba(var(--ndt-primary-rgb),.15)}.select-menu-item.selected:before{content:\"\";position:absolute;left:0;top:8px;width:3px;height:calc(100% - 16px);background-color:var(--ndt-primary);border-radius:2px}.select-menu-item:focus-visible{outline:none;background-color:var(--ndt-hover-bg)}.select-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}\n"] }]
+        }] });
+
+class DevToolsStorageService {
+    constructor() {
+        this.PREFIX = 'AngularDevTools.';
+        this.TOOLS_KEY = `${this.PREFIX}keys`;
+        this.SETTINGS_KEY = `${this.PREFIX}settings`;
+    }
+    set(key, value) {
+        const toolKey = this.getToolKey(key);
+        this.addToolKey(toolKey);
+        localStorage.setItem(toolKey, JSON.stringify(value));
+    }
+    get(key) {
+        const toolKey = this.getToolKey(key);
+        const item = localStorage.getItem(toolKey);
+        return item ? JSON.parse(item) : null;
+    }
+    remove(key) {
+        const toolKey = this.getToolKey(key);
+        localStorage.removeItem(toolKey);
+        this.removeToolKey(toolKey);
+    }
+    getAllSettings() {
+        const settings = {};
+        const keys = this.getToolKeys();
+        keys.forEach((key) => {
+            const value = this.get(key);
+            if (value !== null) {
+                settings[key] = value;
+            }
+        });
+        return settings;
+    }
+    setAllSettings(settings) {
+        Object.entries(settings).forEach(([key, value]) => {
+            this.set(key, value);
+        });
+    }
+    clearAllSettings() {
+        const keys = this.getToolKeys();
+        keys.forEach((key) => {
+            this.remove(key);
+        });
+    }
+    getToolKeys() {
+        return JSON.parse(localStorage.getItem(this.TOOLS_KEY) ?? '[]');
+    }
+    addToolKey(key) {
+        const currentKeys = this.getToolKeys();
+        if (currentKeys.includes(key)) {
+            return;
+        }
+        currentKeys.push(key);
+        localStorage.setItem(this.TOOLS_KEY, JSON.stringify(currentKeys));
+    }
+    removeToolKey(key) {
+        const currentKeys = this.getToolKeys();
+        const index = currentKeys.indexOf(key);
+        if (index !== -1) {
+            currentKeys.splice(index, 1);
+        }
+        localStorage.setItem(this.TOOLS_KEY, JSON.stringify(currentKeys));
+    }
+    getToolKey(key) {
+        return key.includes(this.PREFIX) ? key : this.PREFIX + key;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolsStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolsStorageService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolsStorageService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Internal service for managing app features state and forced overrides.
+ *
+ * This service handles:
+ * - Feature configuration storage
+ * - Forced feature state management
+ * - localStorage persistence
+ * - State validation and cleanup
+ *
+ * @internal This service is for internal toolbar use only. Consumers should use DevToolbarAppFeaturesService.
+ */
+class DevToolbarInternalAppFeaturesService {
+    constructor() {
+        this.STORAGE_KEY = 'app-features';
+        this.storageService = inject(DevToolsStorageService);
+        this.appFeaturesSubject = new BehaviorSubject([]);
+        this.forcedFeaturesSubject = new BehaviorSubject({
+            enabled: [],
+            disabled: [],
+        });
+        this.forcedFeatures$ = this.forcedFeaturesSubject.asObservable();
+        /**
+         * Observable stream of all features with merged forced state
+         */
+        this.features$ = combineLatest([
+            this.appFeaturesSubject.asObservable(),
+            this.forcedFeatures$,
+        ]).pipe(map(([appFeatures, forcedState]) => this.mergeForcedState(appFeatures, forcedState)));
+        /**
+         * Signal containing current features with merged forced state
+         */
+        this.features = toSignal(this.features$, { initialValue: [] });
+        this.loadForcedFeatures();
+    }
+    /**
+     * Set available app features for the application.
+     * Validates features, trims whitespace, and triggers validation of forced state.
+     *
+     * @param features - Array of app features to configure
+     * @throws Error if duplicate feature IDs or empty IDs are detected
+     */
+    setAppFeatures(features) {
+        // Validate for empty IDs
+        const emptyIdFeature = features.find((f) => !f.id || f.id.trim() === '');
+        if (emptyIdFeature) {
+            throw new Error('Feature ID cannot be empty');
+        }
+        // Validate for duplicate IDs
+        const ids = features.map((f) => f.id);
+        const duplicateIds = ids.filter((id, index) => ids.indexOf(id) !== index);
+        if (duplicateIds.length > 0) {
+            throw new Error(`Duplicate feature IDs detected: ${duplicateIds.join(', ')}`);
+        }
+        // Trim whitespace from names and warn about empty names
+        const processedFeatures = features.map((feature) => {
+            const trimmedName = feature.name.trim();
+            if (!trimmedName) {
+                console.warn(`Feature '${feature.id}' has empty name`);
+            }
+            return {
+                ...feature,
+                name: trimmedName || feature.name,
+            };
+        });
+        this.appFeaturesSubject.next(processedFeatures);
+        this.validateAndCleanForcedState();
+    }
+    /**
+     * Get observable stream of app features (natural state, no forced state merged)
+     */
+    getAppFeatures() {
+        return this.appFeaturesSubject.asObservable();
+    }
+    /**
+     * Get observable stream of features that have forced overrides
+     */
+    getForcedFeatures() {
+        return this.features$.pipe(map((features) => features.filter((feature) => feature.isForced)));
+    }
+    /**
+     * Force a feature to enabled or disabled state.
+     * Persists the forced state to localStorage.
+     *
+     * @param featureId - ID of the feature to force
+     * @param isEnabled - Whether to force feature to enabled (true) or disabled (false)
+     */
+    setFeature(featureId, isEnabled) {
+        const { enabled, disabled } = this.forcedFeaturesSubject.value;
+        // Remove feature from both arrays
+        const newEnabled = enabled.filter((id) => id !== featureId);
+        const newDisabled = disabled.filter((id) => id !== featureId);
+        // Add to appropriate array
+        if (isEnabled) {
+            newEnabled.push(featureId);
+        }
+        else {
+            newDisabled.push(featureId);
+        }
+        const newState = { enabled: newEnabled, disabled: newDisabled };
+        this.forcedFeaturesSubject.next(newState);
+        this.saveForcedFeatures(newState);
+    }
+    /**
+     * Remove forced override for a feature, returning it to natural state.
+     * Persists the change to localStorage.
+     *
+     * @param featureId - ID of the feature to unforce
+     */
+    removeFeatureOverride(featureId) {
+        const { enabled, disabled } = this.forcedFeaturesSubject.value;
+        const newState = {
+            enabled: enabled.filter((id) => id !== featureId),
+            disabled: disabled.filter((id) => id !== featureId),
+        };
+        this.forcedFeaturesSubject.next(newState);
+        this.saveForcedFeatures(newState);
+    }
+    /**
+     * Apply a preset forced state (for preset integration).
+     * Validates and cleans invalid feature IDs before applying.
+     *
+     * @param state - Forced features state from preset
+     */
+    applyForcedState(state) {
+        const configuredFeatureIds = this.appFeaturesSubject.value.map((f) => f.id);
+        // Validate and filter to only valid IDs
+        const validEnabled = state.enabled.filter((id) => configuredFeatureIds.includes(id));
+        const validDisabled = state.disabled.filter((id) => configuredFeatureIds.includes(id));
+        const invalidIds = [
+            ...state.enabled.filter((id) => !configuredFeatureIds.includes(id)),
+            ...state.disabled.filter((id) => !configuredFeatureIds.includes(id)),
+        ];
+        if (invalidIds.length > 0) {
+            console.warn(`Preset contains invalid feature IDs (ignored): ${invalidIds.join(', ')}`);
+        }
+        const cleanedState = { enabled: validEnabled, disabled: validDisabled };
+        this.forcedFeaturesSubject.next(cleanedState);
+        this.saveForcedFeatures(cleanedState);
+    }
+    /**
+     * Get current forced state as a snapshot (defensive copy).
+     * Useful for preset exports and debugging.
+     *
+     * @returns Current forced features state
+     */
+    getCurrentForcedState() {
+        const state = this.forcedFeaturesSubject.value;
+        return {
+            enabled: [...state.enabled],
+            disabled: [...state.disabled],
+        };
+    }
+    /**
+     * Merge natural app features with forced state.
+     *
+     * @param appFeatures - Natural feature configuration
+     * @param forcedState - Forced overrides from localStorage/toolbar
+     * @returns Features with merged forced state
+     */
+    mergeForcedState(appFeatures, forcedState) {
+        return appFeatures.map((feature) => {
+            const isInEnabled = forcedState.enabled.includes(feature.id);
+            const isInDisabled = forcedState.disabled.includes(feature.id);
+            const isForced = isInEnabled || isInDisabled;
+            return {
+                ...feature,
+                isEnabled: isInEnabled ? true : isInDisabled ? false : feature.isEnabled,
+                isForced,
+            };
+        });
+    }
+    /**
+     * Load forced features state from localStorage on initialization.
+     * Handles missing or corrupted data gracefully.
+     */
+    loadForcedFeatures() {
+        try {
+            const savedState = this.storageService.get(this.STORAGE_KEY);
+            if (savedState) {
+                this.forcedFeaturesSubject.next(savedState);
+            }
+        }
+        catch (error) {
+            console.error('Failed to load forced app features from localStorage:', error);
+            // Use default empty state on error
+        }
+    }
+    /**
+     * Persist forced features state to localStorage.
+     * Handles quota exceeded errors gracefully.
+     *
+     * @param state - Forced state to persist
+     */
+    saveForcedFeatures(state) {
+        try {
+            this.storageService.set(this.STORAGE_KEY, state);
+        }
+        catch (error) {
+            console.error('Failed to persist app features to localStorage:', error);
+            // Continue execution - state is still valid in memory for current session
+        }
+    }
+    /**
+     * Validate forced feature IDs against configured features and clean up invalid ones.
+     * Called after setAppFeatures() to ensure forced state references valid features.
+     */
+    validateAndCleanForcedState() {
+        const configuredFeatureIds = this.appFeaturesSubject.value.map((f) => f.id);
+        const currentForcedState = this.forcedFeaturesSubject.value;
+        const validEnabled = currentForcedState.enabled.filter((id) => configuredFeatureIds.includes(id));
+        const validDisabled = currentForcedState.disabled.filter((id) => configuredFeatureIds.includes(id));
+        const removedIds = [
+            ...currentForcedState.enabled.filter((id) => !configuredFeatureIds.includes(id)),
+            ...currentForcedState.disabled.filter((id) => !configuredFeatureIds.includes(id)),
+        ];
+        if (removedIds.length > 0) {
+            console.warn(`Removed invalid feature IDs from forced state: ${removedIds.join(', ')}`);
+            const cleanedState = { enabled: validEnabled, disabled: validDisabled };
+            this.forcedFeaturesSubject.next(cleanedState);
+            this.saveForcedFeatures(cleanedState);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalAppFeaturesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalAppFeaturesService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalAppFeaturesService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Component for managing app features in the dev toolbar.
+ *
+ * Provides UI for:
+ * - Searching features by name and description
+ * - Filtering features by state (all/forced/enabled/disabled)
+ * - Forcing features to enabled/disabled state via 3-state dropdown
+ * - Viewing feature descriptions and current state
+ *
+ * @example
+ * ```html
+ * <ndt-app-features-tool />
+ * ```
+ */
+class DevToolbarAppFeaturesToolComponent {
+    constructor() {
+        // Injects
+        this.appFeaturesService = inject(DevToolbarInternalAppFeaturesService);
+        // Signals
+        this.activeFilter = signal('all');
+        this.searchQuery = signal('');
+        this.features = this.appFeaturesService.features;
+        this.hasNoFeatures = computed(() => this.features().length === 0);
+        this.filteredFeatures = computed(() => {
+            return this.features().filter((feature) => {
+                const searchTerm = this.searchQuery().toLowerCase();
+                const featureName = feature.name.toLowerCase();
+                const featureDescription = feature.description?.toLowerCase() ?? '';
+                const matchesSearch = !this.searchQuery() ||
+                    featureName.includes(searchTerm) ||
+                    featureDescription.includes(searchTerm);
+                const matchesFilter = this.activeFilter() === 'all' ||
+                    (this.activeFilter() === 'forced' && feature.isForced) ||
+                    (this.activeFilter() === 'enabled' && feature.isEnabled) ||
+                    (this.activeFilter() === 'disabled' && !feature.isEnabled);
+                return matchesSearch && matchesFilter;
+            });
+        });
+        this.hasNoFilteredFeatures = computed(() => this.filteredFeatures().length === 0);
+        // Other properties
+        this.options = {
+            title: 'App Features',
+            description: 'Override product features to test different tiers and configurations',
+            isClosable: true,
+            size: 'tall',
+            id: 'ndt-app-features',
+        };
+        this.filterOptions = [
+            { value: 'all', label: 'All Features' },
+            { value: 'forced', label: 'Forced' },
+            { value: 'enabled', label: 'Enabled' },
+            { value: 'disabled', label: 'Disabled' },
+        ];
+        this.featureValueOptions = [
+            { value: '', label: 'Not Forced' },
+            { value: 'off', label: 'Disabled' },
+            { value: 'on', label: 'Enabled' },
+        ];
+    }
+    // Public methods
+    /**
+     * Handle filter dropdown change.
+     * Updates the active filter to show all/forced/enabled/disabled features.
+     */
+    onFilterChange(value) {
+        const filter = this.filterOptions.find((f) => f.value === value);
+        if (filter) {
+            this.activeFilter.set(filter.value);
+        }
+    }
+    /**
+     * Handle feature value change from 3-state dropdown.
+     * - 'not-forced' (empty string): Remove forced override
+     * - 'on': Force feature to enabled
+     * - 'off': Force feature to disabled
+     */
+    onFeatureChange(featureId, value) {
+        switch (value) {
+            case '':
+                this.appFeaturesService.removeFeatureOverride(featureId);
+                break;
+            case 'on':
+                this.appFeaturesService.setFeature(featureId, true);
+                break;
+            case 'off':
+                this.appFeaturesService.setFeature(featureId, false);
+                break;
+        }
+    }
+    /**
+     * Handle search input change.
+     * Updates the search query to filter features by name/description.
+     */
+    onSearchChange(query) {
+        this.searchQuery.set(query);
+    }
+    // Protected methods
+    /**
+     * Get the dropdown value for a feature's current state.
+     * - Returns empty string if not forced (natural state)
+     * - Returns 'on' if forced to enabled
+     * - Returns 'off' if forced to disabled
+     */
+    getFeatureValue(feature) {
+        if (!feature.isForced)
+            return '';
+        return feature.isEnabled ? 'on' : 'off';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarAppFeaturesToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarAppFeaturesToolComponent, isStandalone: true, selector: "ndt-app-features-tool", ngImport: i0, template: `
+    <ndt-toolbar-tool
+      [options]="options"
+      title="App Features"
+      icon="puzzle"
+    >
+      <div class="container">
+        <div class="header">
+          <ndt-input
+            [value]="searchQuery()"
+            (valueChange)="onSearchChange($event)"
+            placeholder="Search features..."
+          />
+          <div class="filter-wrapper">
+            <ndt-icon name="filter" class="filter-icon" />
+            <ndt-select
+              [value]="activeFilter()"
+              [options]="filterOptions"
+              [size]="'medium'"
+              (valueChange)="onFilterChange($event)"
+            />
+          </div>
+        </div>
+
+        @if (hasNoFeatures()) {
+        <div class="empty">
+          <p>No app features found</p>
+          <small>Call setAvailableOptions() to configure features</small>
+        </div>
+        } @else if (hasNoFilteredFeatures()) {
+        <div class="empty">
+          <p>No features match your filter</p>
+        </div>
+        } @else {
+        <div class="feature-list">
+          @for (feature of filteredFeatures(); track feature.id) {
+          <div class="feature">
+            <div class="info">
+              <h3>{{ feature.name }}</h3>
+              @if (feature.description) {
+              <p>{{ feature.description }}</p>
+              }
+            </div>
+
+            <ndt-select
+              [value]="getFeatureValue(feature)"
+              [options]="featureValueOptions"
+              [ariaLabel]="'Set value for ' + feature.name"
+              (valueChange)="onFeatureChange(feature.id, $event ?? '')"
+              size="small"
+            />
+          </div>
+          }
+        </div>
+        }
+      </div>
+    </ndt-toolbar-tool>
+  `, isInline: true, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex:.65}.header .filter-wrapper{flex:.35;display:flex;align-items:center;gap:var(--ndt-spacing-xs)}.header .filter-wrapper .filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}.header .filter-wrapper ndt-select{flex:1}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-warning-border);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-warning-background);color:var(--ndt-text-muted)}.empty p{margin:0;font-size:var(--ndt-font-size-md)}.empty small{font-size:var(--ndt-font-size-xs);opacity:.8}.feature-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.feature-list::-webkit-scrollbar{width:8px}.feature-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.feature-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.feature{display:flex;flex-direction:row;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary);padding:var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-medium)}.feature .info{flex:0 0 65%}.feature .info h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.feature .info p{margin:var(--ndt-spacing-xs) 0 0 0;font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted)}.feature ndt-select{flex:0 0 35%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: DevToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title"] }, { kind: "component", type: DevToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarAppFeaturesToolComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndt-app-features-tool', standalone: true, imports: [
+                        FormsModule,
+                        DevToolbarToolComponent,
+                        DevToolbarInputComponent,
+                        DevToolbarSelectComponent,
+                        DevToolbarIconComponent,
+                    ], template: `
+    <ndt-toolbar-tool
+      [options]="options"
+      title="App Features"
+      icon="puzzle"
+    >
+      <div class="container">
+        <div class="header">
+          <ndt-input
+            [value]="searchQuery()"
+            (valueChange)="onSearchChange($event)"
+            placeholder="Search features..."
+          />
+          <div class="filter-wrapper">
+            <ndt-icon name="filter" class="filter-icon" />
+            <ndt-select
+              [value]="activeFilter()"
+              [options]="filterOptions"
+              [size]="'medium'"
+              (valueChange)="onFilterChange($event)"
+            />
+          </div>
+        </div>
+
+        @if (hasNoFeatures()) {
+        <div class="empty">
+          <p>No app features found</p>
+          <small>Call setAvailableOptions() to configure features</small>
+        </div>
+        } @else if (hasNoFilteredFeatures()) {
+        <div class="empty">
+          <p>No features match your filter</p>
+        </div>
+        } @else {
+        <div class="feature-list">
+          @for (feature of filteredFeatures(); track feature.id) {
+          <div class="feature">
+            <div class="info">
+              <h3>{{ feature.name }}</h3>
+              @if (feature.description) {
+              <p>{{ feature.description }}</p>
+              }
+            </div>
+
+            <ndt-select
+              [value]="getFeatureValue(feature)"
+              [options]="featureValueOptions"
+              [ariaLabel]="'Set value for ' + feature.name"
+              (valueChange)="onFeatureChange(feature.id, $event ?? '')"
+              size="small"
+            />
+          </div>
+          }
+        </div>
+        }
+      </div>
+    </ndt-toolbar-tool>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex:.65}.header .filter-wrapper{flex:.35;display:flex;align-items:center;gap:var(--ndt-spacing-xs)}.header .filter-wrapper .filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}.header .filter-wrapper ndt-select{flex:1}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-warning-border);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-warning-background);color:var(--ndt-text-muted)}.empty p{margin:0;font-size:var(--ndt-font-size-md)}.empty small{font-size:var(--ndt-font-size-xs);opacity:.8}.feature-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.feature-list::-webkit-scrollbar{width:8px}.feature-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.feature-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.feature{display:flex;flex-direction:row;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary);padding:var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-medium)}.feature .info{flex:0 0 65%}.feature .info h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.feature .info p{margin:var(--ndt-spacing-xs) 0 0 0;font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted)}.feature ndt-select{flex:0 0 35%}\n"] }]
+        }] });
+
+class DevToolbarInternalFeatureFlagService {
+    constructor() {
+        this.STORAGE_KEY = 'feature-flags';
+        this.storageService = inject(DevToolsStorageService);
+        this.appFlags$ = new BehaviorSubject([]);
+        this.forcedFlagsSubject = new BehaviorSubject({
+            enabled: [],
+            disabled: [],
+        });
+        this.forcedFlags$ = this.forcedFlagsSubject.asObservable();
+        this.flags$ = combineLatest([
+            this.appFlags$,
+            this.forcedFlags$,
+        ]).pipe(map(([appFlags, { enabled, disabled }]) => {
+            return appFlags.map((flag) => ({
+                ...flag,
+                isForced: enabled.includes(flag.id) || disabled.includes(flag.id),
+                isEnabled: enabled.includes(flag.id),
+            }));
+        }));
+        this.flags = toSignal(this.flags$, { initialValue: [] });
+        this.loadForcedFlags();
+    }
+    setAppFlags(flags) {
+        this.appFlags$.next(flags);
+    }
+    getAppFlags() {
+        return this.appFlags$.asObservable();
+    }
+    getForcedFlags() {
+        return this.flags$.pipe(map((flags) => flags.filter((flag) => flag.isForced)));
+    }
+    setFlag(flagId, isEnabled) {
+        const { enabled, disabled } = this.forcedFlagsSubject.value;
+        const newEnabled = enabled.filter((id) => id !== flagId);
+        const newDisabled = disabled.filter((id) => id !== flagId);
+        if (isEnabled) {
+            newEnabled.push(flagId);
+        }
+        else {
+            newDisabled.push(flagId);
+        }
+        const newState = { enabled: newEnabled, disabled: newDisabled };
+        this.forcedFlagsSubject.next(newState);
+        this.storageService.set(this.STORAGE_KEY, newState);
+    }
+    removeFlagOverride(flagId) {
+        const { enabled, disabled } = this.forcedFlagsSubject.value;
+        const newState = {
+            enabled: enabled.filter((id) => id !== flagId),
+            disabled: disabled.filter((id) => id !== flagId),
+        };
+        this.forcedFlagsSubject.next(newState);
+        this.storageService.set(this.STORAGE_KEY, newState);
+    }
+    loadForcedFlags() {
+        const savedFlags = this.storageService.get(this.STORAGE_KEY);
+        if (savedFlags) {
+            this.forcedFlagsSubject.next(savedFlags);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalFeatureFlagService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalFeatureFlagService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalFeatureFlagService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class DevToolbarFeatureFlagsToolComponent {
+    constructor() {
+        // Injects
+        this.featureFlags = inject(DevToolbarInternalFeatureFlagService);
+        // Signals
+        this.activeFilter = signal('all');
+        this.searchQuery = signal('');
+        this.flags = this.featureFlags.flags;
+        this.hasNoFlags = computed(() => this.flags().length === 0);
+        this.filteredFlags = computed(() => {
+            return this.flags().filter((flag) => {
+                const searchTerm = this.searchQuery().toLowerCase();
+                const flagName = flag.name.toLowerCase();
+                const flagDescription = flag.description?.toLowerCase() ?? '';
+                const matchesSearch = !this.searchQuery() ||
+                    flagName.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                    flagDescription.toLowerCase().includes(searchTerm.toLowerCase());
+                const matchesFilter = this.activeFilter() === 'all' ||
+                    (this.activeFilter() === 'forced' && flag.isForced) ||
+                    (this.activeFilter() === 'enabled' && flag.isEnabled) ||
+                    (this.activeFilter() === 'disabled' && !flag.isEnabled);
+                return matchesSearch && matchesFilter;
+            });
+        });
+        this.hasNoFilteredFlags = computed(() => this.filteredFlags().length === 0);
+        // Other properties
+        this.options = {
+            title: 'Feature Flags',
+            description: 'Manage the feature flags for your current session',
+            isClosable: true,
+            size: 'tall',
+            id: 'ndt-feature-flags',
+            isBeta: true,
+        };
+        this.filterOptions = [
+            { value: 'all', label: 'All Flags' },
+            { value: 'forced', label: 'Forced' },
+            { value: 'enabled', label: 'Enabled' },
+            { value: 'disabled', label: 'Disabled' },
+        ];
+        this.flagValueOptions = [
+            { value: 'not-forced', label: 'Not Forced' },
+            { value: 'off', label: 'Forced Off' },
+            { value: 'on', label: 'Forced On' },
+        ];
+    }
+    // Public methods
+    onFilterChange(value) {
+        const filter = this.filterOptions.find((f) => f.value === value);
+        if (filter) {
+            this.activeFilter.set(filter.value);
+        }
+    }
+    onFlagChange(flagId, value) {
+        switch (value) {
+            case 'not-forced':
+                this.featureFlags.removeFlagOverride(flagId);
+                break;
+            case 'on':
+                this.featureFlags.setFlag(flagId, true);
+                break;
+            case 'off':
+                this.featureFlags.setFlag(flagId, false);
+                break;
+        }
+    }
+    onSearchChange(query) {
+        this.searchQuery.set(query);
+    }
+    // Protected methods
+    getFlagValue(flag) {
+        if (!flag.isForced)
+            return '';
+        return flag.isEnabled ? 'on' : 'off';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarFeatureFlagsToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarFeatureFlagsToolComponent, isStandalone: true, selector: "ndt-feature-flags-tool", ngImport: i0, template: `
+    <ndt-toolbar-tool
+      [options]="options"
+      title="Feature Flags"
+      icon="toggle-left"
+    >
+      <div class="container">
+        <div class="header">
+          <ndt-input
+            [value]="searchQuery()"
+            (valueChange)="onSearchChange($event)"
+            placeholder="Search..."
+          />
+          <div class="filter-wrapper">
+            <ndt-icon name="filter" class="filter-icon" />
+            <ndt-select
+              [value]="activeFilter()"
+              [options]="filterOptions"
+              [size]="'medium'"
+              (valueChange)="onFilterChange($event)"
+            />
+          </div>
+        </div>
+
+        @if (hasNoFlags()) {
+        <div class="empty">
+          <p>No flags found</p>
+        </div>
+        } @else if (hasNoFilteredFlags()) {
+        <div class="empty">
+          <p>No flags found matching your filter</p>
+        </div>
+        } @else {
+        <div class="flag-list">
+          @for (flag of filteredFlags(); track flag.id) {
+          <div class="flag">
+            <div class="info">
+              <h3>{{ flag.name }}</h3>
+              <p>{{ flag?.description }}</p>
+            </div>
+
+            <ndt-select
+              [value]="getFlagValue(flag)"
+              [options]="flagValueOptions"
+              [ariaLabel]="'Set value for ' + flag.name"
+              (valueChange)="onFlagChange(flag.id, $event ?? '')"
+              size="small"
+            />
+          </div>
+          }
+        </div>
+        }
+      </div>
+    </ndt-toolbar-tool>
+  `, isInline: true, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex:.65}.header .filter-wrapper{flex:.35;display:flex;align-items:center;gap:var(--ndt-spacing-xs)}.header .filter-wrapper .filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}.header .filter-wrapper ndt-select{flex:1}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-warning-border);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-warning-background);color:var(--ndt-text-muted)}.flag-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.flag-list::-webkit-scrollbar{width:8px}.flag-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.flag-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.flag{display:flex;flex-direction:row;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary)}.flag .info{flex:0 0 65%}.flag .info h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.flag .info p{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted)}.flag ndt-select{flex:0 0 35%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: DevToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title"] }, { kind: "component", type: DevToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarFeatureFlagsToolComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndt-feature-flags-tool', standalone: true, imports: [
+                        FormsModule,
+                        DevToolbarToolComponent,
+                        DevToolbarInputComponent,
+                        DevToolbarSelectComponent,
+                        DevToolbarIconComponent,
+                    ], template: `
+    <ndt-toolbar-tool
+      [options]="options"
+      title="Feature Flags"
+      icon="toggle-left"
+    >
+      <div class="container">
+        <div class="header">
+          <ndt-input
+            [value]="searchQuery()"
+            (valueChange)="onSearchChange($event)"
+            placeholder="Search..."
+          />
+          <div class="filter-wrapper">
+            <ndt-icon name="filter" class="filter-icon" />
+            <ndt-select
+              [value]="activeFilter()"
+              [options]="filterOptions"
+              [size]="'medium'"
+              (valueChange)="onFilterChange($event)"
+            />
+          </div>
+        </div>
+
+        @if (hasNoFlags()) {
+        <div class="empty">
+          <p>No flags found</p>
+        </div>
+        } @else if (hasNoFilteredFlags()) {
+        <div class="empty">
+          <p>No flags found matching your filter</p>
+        </div>
+        } @else {
+        <div class="flag-list">
+          @for (flag of filteredFlags(); track flag.id) {
+          <div class="flag">
+            <div class="info">
+              <h3>{{ flag.name }}</h3>
+              <p>{{ flag?.description }}</p>
+            </div>
+
+            <ndt-select
+              [value]="getFlagValue(flag)"
+              [options]="flagValueOptions"
+              [ariaLabel]="'Set value for ' + flag.name"
+              (valueChange)="onFlagChange(flag.id, $event ?? '')"
+              size="small"
+            />
+          </div>
+          }
+        </div>
+        }
+      </div>
+    </ndt-toolbar-tool>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex:.65}.header .filter-wrapper{flex:.35;display:flex;align-items:center;gap:var(--ndt-spacing-xs)}.header .filter-wrapper .filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}.header .filter-wrapper ndt-select{flex:1}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-warning-border);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-warning-background);color:var(--ndt-text-muted)}.flag-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.flag-list::-webkit-scrollbar{width:8px}.flag-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.flag-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.flag{display:flex;flex-direction:row;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary)}.flag .info{flex:0 0 65%}.flag .info h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.flag .info p{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted)}.flag ndt-select{flex:0 0 35%}\n"] }]
+        }] });
+
+class DevToolbarButtonComponent {
+    constructor() {
+        this.type = input('button');
+        this.variant = input('default');
+        this.icon = input();
+        this.label = input();
+        this.ariaLabel = input();
+        this.isActive = input(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarButtonComponent, isStandalone: true, selector: "ndt-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <button
+      class="button"
+      [attr.aria-label]="ariaLabel()"
+      [type]="type()"
+      [class.button--active]="isActive()"
+      [class.button--icon]="variant() === 'icon'"
+    >
+      @if (icon()) {
+        <ndt-icon [name]="icon() || 'star'" />
+      }
+      @if (label()) {
+        <span class="button__label">{{ label() }}</span>
+      }
+      <ng-content />
+    </button>
+  `, isInline: true, styles: [".dev-toolbar{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 8px;--ndt-spacing-md: 16px;--ndt-window-padding: 24px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.dev-toolbar[data-theme=dark]{--ndt-bg-primary: rgb(17, 24, 39);--ndt-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--ndt-text-primary: rgb(255, 255, 255);--ndt-text-secondary: rgb(229, 231, 235);--ndt-text-muted: rgb(156, 163, 175);--ndt-border-primary: #343841;--ndt-border-subtle: rgba(255, 255, 255, .1);--ndt-hover-bg: rgba(255, 255, 255, .12);--ndt-hover-danger: rgb(220, 38, 38);--ndt-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--ndt-shadow-tooltip: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--ndt-shadow-window: 0px 0px 0px 0px rgba(19, 21, 26, .3), 0px 1px 2px 0px rgba(19, 21, 26, .29), 0px 4px 4px 0px rgba(19, 21, 26, .26), 0px 10px 6px 0px rgba(19, 21, 26, .15), 0px 17px 7px 0px rgba(19, 21, 26, .04), 0px 26px 7px 0px rgba(19, 21, 26, .01);--ndt-note-background: rgba(37, 99, 235, .15);--ndt-note-border: rgba(37, 99, 235, .3);--ndt-warning-background: rgba(202, 138, 4, .15);--ndt-warning-border: rgba(202, 138, 4, .3);--ndt-error-background: rgba(220, 38, 38, .15);--ndt-error-border: rgba(220, 38, 38, .3)}.dev-toolbar h1,.dev-toolbar h2,.dev-toolbar h3,.dev-toolbar h4,.dev-toolbar h5{font-weight:600;color:var(--ndt-text-primary);margin:0}.dev-toolbar h1{font-size:var(--ndt-font-size-xl)}.dev-toolbar h2{font-size:var(--ndt-font-size-lg)}.dev-toolbar h3{font-size:var(--ndt-font-size-md)}.dev-toolbar h4{font-size:var(--ndt-font-size-sm)}.dev-toolbar h5{font-size:var(--ndt-font-size-xs)}.dev-toolbar hr{border:1px solid var(--ndt-border-subtle);margin:1em 0}.dev-toolbar p{line-height:1.5em;margin:0}.button{display:inline-flex;align-items:center;gap:var(--ndt-spacing-xs);padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);background:var(--ndt-bg-primary);color:var(--ndt-text-primary);cursor:pointer;transition:var(--ndt-transition-default);outline:none;font-family:inherit}.button:hover{background:var(--ndt-hover-bg);border-color:var(--ndt-primary)}.button:focus-visible{outline:none;background:var(--ndt-hover-bg);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.button.primary{background:var(--ndt-primary);color:var(--ndt-text-on-primary);border-color:var(--ndt-primary)}.button.primary:hover{background:var(--ndt-primary);border-color:var(--ndt-primary)}.button.icon-only{padding:var(--ndt-spacing-xs);width:32px;height:32px;justify-content:center}.button.small{font-size:var(--ndt-font-size-sm)}\n"], dependencies: [{ kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndt-button', standalone: true, imports: [DevToolbarIconComponent], template: `
+    <button
+      class="button"
+      [attr.aria-label]="ariaLabel()"
+      [type]="type()"
+      [class.button--active]="isActive()"
+      [class.button--icon]="variant() === 'icon'"
+    >
+      @if (icon()) {
+        <ndt-icon [name]="icon() || 'star'" />
+      }
+      @if (label()) {
+        <span class="button__label">{{ label() }}</span>
+      }
+      <ng-content />
+    </button>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".dev-toolbar{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 8px;--ndt-spacing-md: 16px;--ndt-window-padding: 24px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.dev-toolbar[data-theme=dark]{--ndt-bg-primary: rgb(17, 24, 39);--ndt-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--ndt-text-primary: rgb(255, 255, 255);--ndt-text-secondary: rgb(229, 231, 235);--ndt-text-muted: rgb(156, 163, 175);--ndt-border-primary: #343841;--ndt-border-subtle: rgba(255, 255, 255, .1);--ndt-hover-bg: rgba(255, 255, 255, .12);--ndt-hover-danger: rgb(220, 38, 38);--ndt-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--ndt-shadow-tooltip: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--ndt-shadow-window: 0px 0px 0px 0px rgba(19, 21, 26, .3), 0px 1px 2px 0px rgba(19, 21, 26, .29), 0px 4px 4px 0px rgba(19, 21, 26, .26), 0px 10px 6px 0px rgba(19, 21, 26, .15), 0px 17px 7px 0px rgba(19, 21, 26, .04), 0px 26px 7px 0px rgba(19, 21, 26, .01);--ndt-note-background: rgba(37, 99, 235, .15);--ndt-note-border: rgba(37, 99, 235, .3);--ndt-warning-background: rgba(202, 138, 4, .15);--ndt-warning-border: rgba(202, 138, 4, .3);--ndt-error-background: rgba(220, 38, 38, .15);--ndt-error-border: rgba(220, 38, 38, .3)}.dev-toolbar h1,.dev-toolbar h2,.dev-toolbar h3,.dev-toolbar h4,.dev-toolbar h5{font-weight:600;color:var(--ndt-text-primary);margin:0}.dev-toolbar h1{font-size:var(--ndt-font-size-xl)}.dev-toolbar h2{font-size:var(--ndt-font-size-lg)}.dev-toolbar h3{font-size:var(--ndt-font-size-md)}.dev-toolbar h4{font-size:var(--ndt-font-size-sm)}.dev-toolbar h5{font-size:var(--ndt-font-size-xs)}.dev-toolbar hr{border:1px solid var(--ndt-border-subtle);margin:1em 0}.dev-toolbar p{line-height:1.5em;margin:0}.button{display:inline-flex;align-items:center;gap:var(--ndt-spacing-xs);padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);background:var(--ndt-bg-primary);color:var(--ndt-text-primary);cursor:pointer;transition:var(--ndt-transition-default);outline:none;font-family:inherit}.button:hover{background:var(--ndt-hover-bg);border-color:var(--ndt-primary)}.button:focus-visible{outline:none;background:var(--ndt-hover-bg);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.button.primary{background:var(--ndt-primary);color:var(--ndt-text-on-primary);border-color:var(--ndt-primary)}.button.primary:hover{background:var(--ndt-primary);border-color:var(--ndt-primary)}.button.icon-only{padding:var(--ndt-spacing-xs);width:32px;height:32px;justify-content:center}.button.small{font-size:var(--ndt-font-size-sm)}\n"] }]
+        }] });
+
+class DevToolbarCardComponent {
+    constructor() {
+        this.click = signal(undefined);
+        this.isHovered = signal(false);
+    }
+    onClick() {
+        this.click.set();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: DevToolbarCardComponent, isStandalone: true, selector: "ndt-card", ngImport: i0, template: `
+    <div
+      class="card"
+      role="button"
+      tabindex="0"
+      (click)="onClick()"
+      (keydown.enter)="onClick()"
+      (keydown.space)="onClick()"
+      [class.card--hover]="isHovered()"
+      (mouseenter)="isHovered.set(true)"
+      (mouseleave)="isHovered.set(false)"
+    >
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, styles: [".card{background:var(--ndt-bg-primary);border-radius:var(--ndt-border-radius-large);padding:var(--ndt-spacing-md);cursor:pointer;transition:var(--ndt-transition-default);border:1px solid var(--ndt-border-subtle);position:relative;flex:1;height:120px;display:flex}.card:hover{background:var(--ndt-hover-bg);border-color:var(--ndt-primary);box-shadow:0 0 0 1px rgba(var(--ndt-primary-rgb),.3)}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndt-card', standalone: true, template: `
+    <div
+      class="card"
+      role="button"
+      tabindex="0"
+      (click)="onClick()"
+      (keydown.enter)="onClick()"
+      (keydown.space)="onClick()"
+      [class.card--hover]="isHovered()"
+      (mouseenter)="isHovered.set(true)"
+      (mouseleave)="isHovered.set(false)"
+    >
+      <ng-content></ng-content>
+    </div>
+  `, styles: [".card{background:var(--ndt-bg-primary);border-radius:var(--ndt-border-radius-large);padding:var(--ndt-spacing-md);cursor:pointer;transition:var(--ndt-transition-default);border:1px solid var(--ndt-border-subtle);position:relative;flex:1;height:120px;display:flex}.card:hover{background:var(--ndt-hover-bg);border-color:var(--ndt-primary);box-shadow:0 0 0 1px rgba(var(--ndt-primary-rgb),.3)}\n"] }]
+        }] });
+
+class DevToolbarClickableCardComponent {
+    constructor() {
+        this.icon = input.required();
+        this.title = input.required();
+        this.subtitle = input.required();
+        this.click = signal(undefined);
+    }
+    onClick() {
+        this.click.set();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarClickableCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: DevToolbarClickableCardComponent, isStandalone: true, selector: "ndt-clickable-card", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <ndt-card (clicked)="onClick()">
+      <div class="clickable-card">
+        <div class="clickable-card__icon">
+          <ndt-icon [name]="icon()" />
+        </div>
+        <div class="clickable-card__content">
+          <div class="clickable-card__title">{{ title() }}</div>
+          <div class="clickable-card__subtitle">{{ subtitle() }}</div>
+        </div>
+      </div>
+    </ndt-card>
+  `, isInline: true, styles: [".clickable-card{display:flex;flex-direction:column;gap:var(--ndt-spacing-sm);height:100%}.clickable-card__icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--ndt-border-radius-medium);background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.clickable-card__content{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.clickable-card__title{color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);font-weight:500}.clickable-card__subtitle{color:var(--ndt-text-muted);font-size:var(--ndt-font-size-xs);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\n"], dependencies: [{ kind: "component", type: DevToolbarCardComponent, selector: "ndt-card" }, { kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarClickableCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndt-clickable-card', standalone: true, imports: [DevToolbarCardComponent, DevToolbarIconComponent], template: `
+    <ndt-card (clicked)="onClick()">
+      <div class="clickable-card">
+        <div class="clickable-card__icon">
+          <ndt-icon [name]="icon()" />
+        </div>
+        <div class="clickable-card__content">
+          <div class="clickable-card__title">{{ title() }}</div>
+          <div class="clickable-card__subtitle">{{ subtitle() }}</div>
+        </div>
+      </div>
+    </ndt-card>
+  `, styles: [".clickable-card{display:flex;flex-direction:column;gap:var(--ndt-spacing-sm);height:100%}.clickable-card__icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--ndt-border-radius-medium);background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.clickable-card__content{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.clickable-card__title{color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);font-weight:500}.clickable-card__subtitle{color:var(--ndt-text-muted);font-size:var(--ndt-font-size-xs);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\n"] }]
+        }] });
+
+class DevToolbarLinkButtonComponent {
+    constructor() {
+        this.url = input.required();
+        this.icon = input.required();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarLinkButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: DevToolbarLinkButtonComponent, isStandalone: true, selector: "ndt-link-button", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <a
+      [href]="url()"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="link-button"
+    >
+      <div class="link-button__icon">
+        <ndt-icon [name]="icon()" />
+      </div>
+      <span class="link-button__text">
+        <ng-content></ng-content>
+      </span>
+    </a>
+  `, isInline: true, styles: [".link-button{display:flex;flex-direction:column;align-items:center;gap:var(--ndt-spacing-xs);text-decoration:none;color:var(--ndt-text-muted);transition:var(--ndt-transition-default)}.link-button:hover{color:var(--ndt-text-primary)}.link-button:hover .link-button__icon{outline:2px solid var(--ndt-primary);outline-offset:2px;box-shadow:0 0 8px var(--ndt-primary)}.link-button__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--ndt-border-radius-medium);background:var(--ndt-hover-bg);transition:all .2s ease-in-out}.link-button__text{font-size:var(--ndt-font-size-xs);text-align:center;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarLinkButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndt-link-button', standalone: true, imports: [DevToolbarIconComponent], template: `
+    <a
+      [href]="url()"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="link-button"
+    >
+      <div class="link-button__icon">
+        <ndt-icon [name]="icon()" />
+      </div>
+      <span class="link-button__text">
+        <ng-content></ng-content>
+      </span>
+    </a>
+  `, styles: [".link-button{display:flex;flex-direction:column;align-items:center;gap:var(--ndt-spacing-xs);text-decoration:none;color:var(--ndt-text-muted);transition:var(--ndt-transition-default)}.link-button:hover{color:var(--ndt-text-primary)}.link-button:hover .link-button__icon{outline:2px solid var(--ndt-primary);outline-offset:2px;box-shadow:0 0 8px var(--ndt-primary)}.link-button__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--ndt-border-radius-medium);background:var(--ndt-hover-bg);transition:all .2s ease-in-out}.link-button__text{font-size:var(--ndt-font-size-xs);text-align:center;white-space:nowrap}\n"] }]
+        }] });
+
+class SettingsService {
+    constructor() {
+        this.STORAGE_KEY = 'settings';
+        this.storageService = inject(DevToolsStorageService);
+    }
+    getSettings() {
+        return (this.storageService.get(this.STORAGE_KEY) || {
+            isDarkMode: false,
+        });
+    }
+    setSettings(settings) {
+        this.storageService.set(this.STORAGE_KEY, settings);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SettingsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SettingsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class DevToolbarHomeToolComponent {
+    constructor() {
+        this.state = inject(DevToolbarStateService);
+        this.settingsService = inject(SettingsService);
+        this.storageService = inject(DevToolsStorageService);
+        this.badge = input();
+        this.title = `Angular Dev Toolbar`;
+        this.options = {
+            title: this.title,
+            isClosable: true,
+            id: 'ndt-home',
+            size: 'medium',
+            description: '',
+            isBeta: true,
+        };
+        this.links = [
+            {
+                icon: 'bug',
+                url: 'https://github.com/alfredoperez/ngx-dev-toolbar/issues',
+                label: 'Bug report',
+            },
+            {
+                icon: 'lightbulb',
+                url: 'https://github.com/alfredoperez/ngx-dev-toolbar/discussions',
+                label: 'Suggestions',
+            },
+            {
+                icon: 'docs',
+                url: 'https://alfredoperez.github.io/ngx-dev-toolbar/',
+                label: 'Docs',
+            },
+            {
+                icon: 'star',
+                url: 'https://github.com/alfredoperez/ngx-dev-toolbar',
+                label: 'Star on GitHub',
+            },
+            {
+                icon: 'discord',
+                url: 'https://discord.com/invite/angular',
+                label: 'Community',
+            },
+        ];
+    }
+    onToggleTheme() {
+        const newTheme = this.state.isDarkTheme() ? 'light' : 'dark';
+        this.settingsService.setSettings({ isDarkMode: newTheme === 'dark' });
+        this.state.setTheme(newTheme);
+    }
+    onExportSettings() {
+        const settings = this.storageService.getAllSettings();
+        const blob = new Blob([JSON.stringify(settings, null, 2)], {
+            type: 'application/json',
+        });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        const timestamp = new Date().toISOString().split('T')[0];
+        link.href = url;
+        link.download = `ngx-dev-toolbar-settings-${timestamp}.json`;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+    }
+    onImportSettings() {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = 'application/json';
+        input.onchange = (event) => {
+            const file = event.target.files?.[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    try {
+                        const settings = JSON.parse(e.target?.result);
+                        this.storageService.setAllSettings(settings);
+                        window.location.reload();
+                    }
+                    catch (error) {
+                        console.error('Error importing settings:', error);
+                    }
+                };
+                reader.readAsText(file);
+            }
+        };
+        input.click();
+    }
+    onResetSettings() {
+        this.storageService.clearAllSettings();
+        window.location.reload();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarHomeToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarHomeToolComponent, isStandalone: true, selector: "ndt-home-tool", inputs: { badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <ndt-toolbar-tool [options]="options" title="Home" icon="angular">
+      <section class="settings">
+        <div class="instruction">
+          <div class="instruction__label">
+            <span class="instruction__label-text">Theme</span>
+            <span class="instruction__label-description">
+              Switch between light and dark mode
+            </span>
+          </div>
+          <div class="instruction__control">
+            <div class="instruction__control-button">
+              <ndt-button
+                [isActive]="true"
+                (click)="onToggleTheme()"
+                variant="icon"
+                [ariaLabel]="
+                  state.isDarkTheme()
+                    ? 'Switch to light theme'
+                    : 'Switch to dark theme'
+                "
+                [icon]="state.isDarkTheme() ? 'sun' : 'moon'"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="settings-container">
+          <div class="instruction">
+            <div class="instruction__label">
+              <span class="instruction__label-text">Reset Settings</span>
+              <span class="instruction__label-description">
+                Reset all settings to their default values
+              </span>
+            </div>
+            <div class="instruction__control">
+              <div class="instruction__control-button">
+                <ndt-button
+                  variant="icon"
+                  icon="trash"
+                  ariaLabel="Reset all settings"
+                  (click)="onResetSettings()"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="settings-actions">
+            <ndt-clickable-card
+              icon="export"
+              title="Export Settings"
+              subtitle="Export the current settings to share with other devs or use in your tests"
+              (click)="onExportSettings()"
+            />
+            <ndt-clickable-card
+              icon="import"
+              title="Import Settings"
+              subtitle="Import settings to reproduce a scenario"
+              (click)="onImportSettings()"
+            />
+          </div>
+        </div>
+
+        <div class="footer-links">
+          @for (link of links; track link.url) {
+          <ndt-link-button [icon]="link.icon" [url]="link.url">
+            {{ link.label }}
+          </ndt-link-button>
+          }
+        </div>
+      </section>
+    </ndt-toolbar-tool>
+  `, isInline: true, styles: [".dev-toolbar{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 8px;--ndt-spacing-md: 16px;--ndt-window-padding: 24px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.dev-toolbar[data-theme=dark]{--ndt-bg-primary: rgb(17, 24, 39);--ndt-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--ndt-text-primary: rgb(255, 255, 255);--ndt-text-secondary: rgb(229, 231, 235);--ndt-text-muted: rgb(156, 163, 175);--ndt-border-primary: #343841;--ndt-border-subtle: rgba(255, 255, 255, .1);--ndt-hover-bg: rgba(255, 255, 255, .12);--ndt-hover-danger: rgb(220, 38, 38);--ndt-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--ndt-shadow-tooltip: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--ndt-shadow-window: 0px 0px 0px 0px rgba(19, 21, 26, .3), 0px 1px 2px 0px rgba(19, 21, 26, .29), 0px 4px 4px 0px rgba(19, 21, 26, .26), 0px 10px 6px 0px rgba(19, 21, 26, .15), 0px 17px 7px 0px rgba(19, 21, 26, .04), 0px 26px 7px 0px rgba(19, 21, 26, .01);--ndt-note-background: rgba(37, 99, 235, .15);--ndt-note-border: rgba(37, 99, 235, .3);--ndt-warning-background: rgba(202, 138, 4, .15);--ndt-warning-border: rgba(202, 138, 4, .3);--ndt-error-background: rgba(220, 38, 38, .15);--ndt-error-border: rgba(220, 38, 38, .3)}.dev-toolbar h1,.dev-toolbar h2,.dev-toolbar h3,.dev-toolbar h4,.dev-toolbar h5{font-weight:600;color:var(--ndt-text-primary);margin:0}.dev-toolbar h1{font-size:var(--ndt-font-size-xl)}.dev-toolbar h2{font-size:var(--ndt-font-size-lg)}.dev-toolbar h3{font-size:var(--ndt-font-size-md)}.dev-toolbar h4{font-size:var(--ndt-font-size-sm)}.dev-toolbar h5{font-size:var(--ndt-font-size-xs)}.dev-toolbar hr{border:1px solid var(--ndt-border-subtle);margin:1em 0}.dev-toolbar p{line-height:1.5em;margin:0}.settings{display:flex;flex-direction:column;justify-content:space-between;min-height:100%}.instruction{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--ndt-spacing-md)}.instruction__label{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.instruction__label-text{color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);font-weight:500}.instruction__label-description{color:var(--ndt-text-muted);font-size:var(--ndt-font-size-xs)}.instruction__control{flex:1}.instruction__control-button{display:flex;gap:var(--ndt-spacing-xs);justify-content:flex-end}.settings-container{display:flex;flex-direction:column}.settings-container .settings-actions{display:flex;gap:var(--ndt-spacing-md);padding-block:var(--ndt-spacing-md)}.settings-container .settings-actions>*{width:50%;min-width:0}.footer-links{border-top:1px solid var(--ndt-border-subtle);padding-top:1em;display:flex;flex-direction:row;justify-content:space-between;gap:var(--ndt-spacing-lg)}\n"], dependencies: [{ kind: "component", type: DevToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: DevToolbarButtonComponent, selector: "ndt-button", inputs: ["type", "variant", "icon", "label", "ariaLabel", "isActive"] }, { kind: "component", type: DevToolbarClickableCardComponent, selector: "ndt-clickable-card", inputs: ["icon", "title", "subtitle"] }, { kind: "component", type: DevToolbarLinkButtonComponent, selector: "ndt-link-button", inputs: ["url", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarHomeToolComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndt-home-tool', standalone: true, imports: [
+                        DevToolbarToolComponent,
+                        FormsModule,
+                        DevToolbarButtonComponent,
+                        DevToolbarClickableCardComponent,
+                        DevToolbarLinkButtonComponent,
+                    ], template: `
+    <ndt-toolbar-tool [options]="options" title="Home" icon="angular">
+      <section class="settings">
+        <div class="instruction">
+          <div class="instruction__label">
+            <span class="instruction__label-text">Theme</span>
+            <span class="instruction__label-description">
+              Switch between light and dark mode
+            </span>
+          </div>
+          <div class="instruction__control">
+            <div class="instruction__control-button">
+              <ndt-button
+                [isActive]="true"
+                (click)="onToggleTheme()"
+                variant="icon"
+                [ariaLabel]="
+                  state.isDarkTheme()
+                    ? 'Switch to light theme'
+                    : 'Switch to dark theme'
+                "
+                [icon]="state.isDarkTheme() ? 'sun' : 'moon'"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="settings-container">
+          <div class="instruction">
+            <div class="instruction__label">
+              <span class="instruction__label-text">Reset Settings</span>
+              <span class="instruction__label-description">
+                Reset all settings to their default values
+              </span>
+            </div>
+            <div class="instruction__control">
+              <div class="instruction__control-button">
+                <ndt-button
+                  variant="icon"
+                  icon="trash"
+                  ariaLabel="Reset all settings"
+                  (click)="onResetSettings()"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="settings-actions">
+            <ndt-clickable-card
+              icon="export"
+              title="Export Settings"
+              subtitle="Export the current settings to share with other devs or use in your tests"
+              (click)="onExportSettings()"
+            />
+            <ndt-clickable-card
+              icon="import"
+              title="Import Settings"
+              subtitle="Import settings to reproduce a scenario"
+              (click)="onImportSettings()"
+            />
+          </div>
+        </div>
+
+        <div class="footer-links">
+          @for (link of links; track link.url) {
+          <ndt-link-button [icon]="link.icon" [url]="link.url">
+            {{ link.label }}
+          </ndt-link-button>
+          }
+        </div>
+      </section>
+    </ndt-toolbar-tool>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".dev-toolbar{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 8px;--ndt-spacing-md: 16px;--ndt-window-padding: 24px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.dev-toolbar[data-theme=dark]{--ndt-bg-primary: rgb(17, 24, 39);--ndt-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--ndt-text-primary: rgb(255, 255, 255);--ndt-text-secondary: rgb(229, 231, 235);--ndt-text-muted: rgb(156, 163, 175);--ndt-border-primary: #343841;--ndt-border-subtle: rgba(255, 255, 255, .1);--ndt-hover-bg: rgba(255, 255, 255, .12);--ndt-hover-danger: rgb(220, 38, 38);--ndt-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--ndt-shadow-tooltip: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--ndt-shadow-window: 0px 0px 0px 0px rgba(19, 21, 26, .3), 0px 1px 2px 0px rgba(19, 21, 26, .29), 0px 4px 4px 0px rgba(19, 21, 26, .26), 0px 10px 6px 0px rgba(19, 21, 26, .15), 0px 17px 7px 0px rgba(19, 21, 26, .04), 0px 26px 7px 0px rgba(19, 21, 26, .01);--ndt-note-background: rgba(37, 99, 235, .15);--ndt-note-border: rgba(37, 99, 235, .3);--ndt-warning-background: rgba(202, 138, 4, .15);--ndt-warning-border: rgba(202, 138, 4, .3);--ndt-error-background: rgba(220, 38, 38, .15);--ndt-error-border: rgba(220, 38, 38, .3)}.dev-toolbar h1,.dev-toolbar h2,.dev-toolbar h3,.dev-toolbar h4,.dev-toolbar h5{font-weight:600;color:var(--ndt-text-primary);margin:0}.dev-toolbar h1{font-size:var(--ndt-font-size-xl)}.dev-toolbar h2{font-size:var(--ndt-font-size-lg)}.dev-toolbar h3{font-size:var(--ndt-font-size-md)}.dev-toolbar h4{font-size:var(--ndt-font-size-sm)}.dev-toolbar h5{font-size:var(--ndt-font-size-xs)}.dev-toolbar hr{border:1px solid var(--ndt-border-subtle);margin:1em 0}.dev-toolbar p{line-height:1.5em;margin:0}.settings{display:flex;flex-direction:column;justify-content:space-between;min-height:100%}.instruction{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--ndt-spacing-md)}.instruction__label{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.instruction__label-text{color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);font-weight:500}.instruction__label-description{color:var(--ndt-text-muted);font-size:var(--ndt-font-size-xs)}.instruction__control{flex:1}.instruction__control-button{display:flex;gap:var(--ndt-spacing-xs);justify-content:flex-end}.settings-container{display:flex;flex-direction:column}.settings-container .settings-actions{display:flex;gap:var(--ndt-spacing-md);padding-block:var(--ndt-spacing-md)}.settings-container .settings-actions>*{width:50%;min-width:0}.footer-links{border-top:1px solid var(--ndt-border-subtle);padding-top:1em;display:flex;flex-direction:row;justify-content:space-between;gap:var(--ndt-spacing-lg)}\n"] }]
+        }] });
+
+class DevToolbarInternalLanguageService {
+    constructor() {
+        this.STORAGE_KEY = 'language';
+        this.storageService = inject(DevToolsStorageService);
+        this.languages$ = new BehaviorSubject([]);
+        this.forcedLanguage$ = new BehaviorSubject(null);
+        this.languages = toSignal(this.languages$, { initialValue: [] });
+        this.loadForcedLanguage();
+    }
+    setAppLanguages(languages) {
+        this.languages$.next(languages);
+    }
+    getAppLanguages() {
+        return this.languages$.asObservable();
+    }
+    setForcedLanguage(language) {
+        this.forcedLanguage$.next(language);
+        this.storageService.set(this.STORAGE_KEY, language);
+    }
+    getForcedLanguage() {
+        return this.forcedLanguage$.pipe(map((language) => (language ? [language] : [])));
+    }
+    removeForcedLanguage() {
+        this.forcedLanguage$.next(null);
+        this.storageService.remove(this.STORAGE_KEY);
+    }
+    loadForcedLanguage() {
+        const savedLanguage = this.storageService.get(this.STORAGE_KEY);
+        if (savedLanguage) {
+            this.forcedLanguage$.next(savedLanguage);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalLanguageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalLanguageService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalLanguageService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class DevToolbarLanguageToolComponent {
+    constructor() {
+        this.languageService = inject(DevToolbarInternalLanguageService);
+        this.options = {
+            title: 'Languages',
+            description: 'Set the language for your current session',
+            size: 'small',
+            id: 'ndt-language',
+            isBeta: true,
+            isClosable: true,
+        };
+        this.activeLanguage = signal('not-forced');
+        this.languageOptions = toSignal(this.languageService.getAppLanguages().pipe(map((languages) => [
+            { value: 'not-forced', label: 'Not Forced' },
+            ...languages.map(({ id: value, name: label }) => ({
+                value,
+                label,
+            })),
+        ])), { initialValue: [] });
+    }
+    async onLanguageChange(language) {
+        if (language === 'not-forced' || !language) {
+            this.languageService.removeForcedLanguage();
+            return;
+        }
+        const languages = await firstValueFrom(this.languageService.getAppLanguages());
+        const selectedLanguage = languages.find(({ id }) => id === language);
+        if (selectedLanguage) {
+            this.languageService.setForcedLanguage(selectedLanguage);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarLanguageToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: DevToolbarLanguageToolComponent, isStandalone: true, selector: "ndt-language-tool", ngImport: i0, template: `
+    <ndt-toolbar-tool title="Languages" icon="translate" [options]="options">
+      <div class="language-select">
+        <label for="language-select">Language</label>
+        <ndt-select
+          id="language-select"
+          [value]="activeLanguage()"
+          [options]="languageOptions()"
+          [size]="'medium'"
+          (valueChange)="onLanguageChange($event ?? '')"
+        />
+      </div>
+    </ndt-toolbar-tool>
+  `, isInline: true, styles: [".language-select{display:flex;flex-direction:row;gap:.5rem;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "component", type: DevToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title"] }, { kind: "component", type: DevToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size"], outputs: ["valueChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarLanguageToolComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndt-language-tool', standalone: true, imports: [DevToolbarToolComponent, DevToolbarSelectComponent], template: `
+    <ndt-toolbar-tool title="Languages" icon="translate" [options]="options">
+      <div class="language-select">
+        <label for="language-select">Language</label>
+        <ndt-select
+          id="language-select"
+          [value]="activeLanguage()"
+          [options]="languageOptions()"
+          [size]="'medium'"
+          (valueChange)="onLanguageChange($event ?? '')"
+        />
+      </div>
+    </ndt-toolbar-tool>
+  `, styles: [".language-select{display:flex;flex-direction:row;gap:.5rem;align-items:center;justify-content:space-between}\n"] }]
+        }] });
+
+class DevToolbarNetworkMockerService {
+    constructor() {
+        this.mockRequests = signal([]);
+        this.isMockingEnabled = signal(false);
+    }
+    getMockRequests() {
+        return this.mockRequests.asReadonly();
+    }
+    getIsMockingEnabled() {
+        return this.isMockingEnabled.asReadonly();
+    }
+    addMockRequest(config) {
+        const mockRequest = {
+            id: crypto.randomUUID(),
+            url: config.url,
+            method: config.method,
+            status: config.status || 200,
+            response: config.response || {},
+            isActive: true,
+            createdAt: new Date(),
+        };
+        this.mockRequests.update((requests) => [mockRequest, ...requests]);
+    }
+    removeMockRequest(id) {
+        this.mockRequests.update((requests) => requests.filter((request) => request.id !== id));
+    }
+    toggleMockRequest(id) {
+        this.mockRequests.update((requests) => requests.map((request) => request.id === id
+            ? { ...request, isActive: !request.isActive }
+            : request));
+    }
+    enableMocking() {
+        this.isMockingEnabled.set(true);
+        console.log('Network mocking enabled');
+    }
+    disableMocking() {
+        this.isMockingEnabled.set(false);
+        console.log('Network mocking disabled');
+    }
+    clearAllMocks() {
+        this.mockRequests.set([]);
+        this.isMockingEnabled.set(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarNetworkMockerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarNetworkMockerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarNetworkMockerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class DevToolbarNetworkMockerToolComponent {
+    constructor() {
+        // Injects
+        this.networkMockerService = inject(DevToolbarNetworkMockerService);
+        // Signals
+        this.newMockUrl = signal('');
+        this.newMockMethod = signal('GET');
+        this.newMockStatus = signal('200');
+        this.newMockResponse = signal('');
+        // Computed values
+        this.mockRequests = this.networkMockerService.getMockRequests();
+        this.isMockingEnabled = this.networkMockerService.getIsMockingEnabled();
+        this.hasNoMocks = computed(() => this.mockRequests().length === 0);
+        // Window options
+        this.options = {
+            title: 'Network Mocker',
+            description: 'Intercept and mock HTTP requests for testing and development',
+            isClosable: true,
+            size: 'tall',
+            id: 'ndt-network-mocker',
+            isBeta: true,
+        };
+        // Other properties
+        this.httpMethods = [
+            { value: 'GET', label: 'GET' },
+            { value: 'POST', label: 'POST' },
+            { value: 'PUT', label: 'PUT' },
+            { value: 'DELETE', label: 'DELETE' },
+            { value: 'PATCH', label: 'PATCH' },
+        ];
+    }
+    // Public methods
+    onAddMock() {
+        const url = this.newMockUrl().trim();
+        if (!url)
+            return;
+        const config = {
+            url,
+            method: this.newMockMethod(),
+            status: parseInt(this.newMockStatus()) || 200,
+            response: this.newMockResponse()
+                ? JSON.parse(this.newMockResponse())
+                : {},
+        };
+        this.networkMockerService.addMockRequest(config);
+        // Reset form
+        this.newMockUrl.set('');
+        this.newMockMethod.set('GET');
+        this.newMockStatus.set('200');
+        this.newMockResponse.set('');
+    }
+    onToggleMocking() {
+        if (this.isMockingEnabled()) {
+            this.networkMockerService.disableMocking();
+        }
+        else {
+            this.networkMockerService.enableMocking();
+        }
+    }
+    onToggleMock(mockId) {
+        this.networkMockerService.toggleMockRequest(mockId);
+    }
+    onRemoveMock(mockId) {
+        this.networkMockerService.removeMockRequest(mockId);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarNetworkMockerToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarNetworkMockerToolComponent, isStandalone: true, selector: "ndt-network-mocker-tool", ngImport: i0, template: `
+    <ndt-toolbar-tool [options]="options" title="Network Mocker" icon="network">
+      <div class="container">
+        <div class="header">
+          <h3>Mock Network Requests</h3>
+          <p>Intercept and mock HTTP requests for testing and development.</p>
+        </div>
+
+        <div class="form">
+          <div class="form-row">
+            <ndt-input
+              [(value)]="newMockUrl"
+              placeholder="Enter URL pattern (e.g., /api/users/*)"
+              ariaLabel="Mock URL"
+            />
+            <ndt-select
+              [(value)]="newMockMethod"
+              [options]="httpMethods"
+              size="small"
+              ariaLabel="HTTP Method"
+            />
+          </div>
+
+          <div class="form-row">
+            <ndt-input
+              [(value)]="newMockStatus"
+              placeholder="Status code (default: 200)"
+              type="number"
+              ariaLabel="Status Code"
+            />
+            <ndt-input
+              [(value)]="newMockResponse"
+              placeholder="Response JSON (optional)"
+              ariaLabel="Response JSON"
+            />
+          </div>
+
+          <div class="actions">
+            <ndt-button label="Add Mock" icon="import" (click)="onAddMock()" />
+            <ndt-button
+              [label]="
+                isMockingEnabled() ? 'Disable Mocking' : 'Enable Mocking'
+              "
+              [icon]="isMockingEnabled() ? 'trash' : 'network'"
+              (click)="onToggleMocking()"
+            />
+          </div>
+        </div>
+
+        @if (hasNoMocks()) {
+        <div class="empty">
+          <p>No mock requests configured. Add your first mock above.</p>
+        </div>
+        } @else {
+        <div class="mocks-list">
+          <h4>Configured Mocks</h4>
+          @for (mock of mockRequests(); track mock.id) {
+          <div class="mock-item">
+            <div class="mock-info">
+              <div class="mock-method">{{ mock.method }}</div>
+              <div class="mock-url">{{ mock.url }}</div>
+              <div class="mock-status">{{ mock.status }}</div>
+            </div>
+            <div class="mock-actions">
+              <ndt-button
+                variant="icon"
+                [icon]="mock.isActive ? 'star' : 'moon'"
+                [ariaLabel]="mock.isActive ? 'Disable mock' : 'Enable mock'"
+                (click)="onToggleMock(mock.id)"
+              />
+              <ndt-button
+                variant="icon"
+                icon="trash"
+                ariaLabel="Remove mock"
+                (click)="onRemoveMock(mock.id)"
+              />
+            </div>
+          </div>
+          }
+        </div>
+        } @if (isMockingEnabled()) {
+        <div class="status">
+          <p>✅ Network mocking is active</p>
+        </div>
+        }
+      </div>
+    </ndt-toolbar-tool>
+  `, isInline: true, styles: [".container{display:flex;flex-direction:column;height:100%;gap:var(--ndt-spacing-md);padding:var(--ndt-spacing-md)}.header{text-align:center;flex-shrink:0}.header h3{margin:0 0 var(--ndt-spacing-sm) 0;font-size:var(--ndt-font-size-lg);color:var(--ndt-text-primary);font-weight:600}.header p{margin:0;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-muted)}.form{display:flex;flex-direction:column;gap:var(--ndt-spacing-sm);flex-shrink:0;padding:var(--ndt-spacing-md);background:var(--ndt-background-secondary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium)}.form-row{display:flex;gap:var(--ndt-spacing-sm)}.form-row ndt-input{flex:1}.form-row ndt-select{flex:0 0 120px}.actions{display:flex;gap:var(--ndt-spacing-sm);margin-top:var(--ndt-spacing-sm)}.empty{display:flex;align-items:center;justify-content:center;flex:1;color:var(--ndt-text-muted);text-align:center;font-size:var(--ndt-font-size-sm)}.mocks-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-sm);flex:1;min-height:0;overflow-y:auto}.mocks-list h4{margin:0 0 var(--ndt-spacing-sm) 0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary);font-weight:600}.mocks-list::-webkit-scrollbar{width:8px}.mocks-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.mocks-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.mock-item{display:flex;align-items:center;gap:var(--ndt-spacing-sm);padding:var(--ndt-spacing-sm);background:var(--ndt-background-secondary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small)}.mock-item .mock-info{flex:1;display:flex;align-items:center;gap:var(--ndt-spacing-sm)}.mock-item .mock-method{font-weight:600;font-size:var(--ndt-font-size-xs);color:var(--ndt-primary);background:var(--ndt-primary-background);padding:2px 6px;border-radius:var(--ndt-border-radius-small);min-width:40px;text-align:center}.mock-item .mock-url{flex:1;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-primary);font-family:monospace}.mock-item .mock-status{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted);min-width:30px;text-align:center}.mock-item .mock-actions{display:flex;gap:var(--ndt-spacing-xs)}.status{text-align:center;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);background:var(--ndt-success-background);border:1px solid var(--ndt-success-border);border-radius:var(--ndt-border-radius-small);color:var(--ndt-success-text);font-size:var(--ndt-font-size-sm);flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: DevToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title"] }, { kind: "component", type: DevToolbarButtonComponent, selector: "ndt-button", inputs: ["type", "variant", "icon", "label", "ariaLabel", "isActive"] }, { kind: "component", type: DevToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarNetworkMockerToolComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndt-network-mocker-tool', standalone: true, imports: [
+                        FormsModule,
+                        DevToolbarToolComponent,
+                        DevToolbarButtonComponent,
+                        DevToolbarInputComponent,
+                        DevToolbarSelectComponent,
+                    ], template: `
+    <ndt-toolbar-tool [options]="options" title="Network Mocker" icon="network">
+      <div class="container">
+        <div class="header">
+          <h3>Mock Network Requests</h3>
+          <p>Intercept and mock HTTP requests for testing and development.</p>
+        </div>
+
+        <div class="form">
+          <div class="form-row">
+            <ndt-input
+              [(value)]="newMockUrl"
+              placeholder="Enter URL pattern (e.g., /api/users/*)"
+              ariaLabel="Mock URL"
+            />
+            <ndt-select
+              [(value)]="newMockMethod"
+              [options]="httpMethods"
+              size="small"
+              ariaLabel="HTTP Method"
+            />
+          </div>
+
+          <div class="form-row">
+            <ndt-input
+              [(value)]="newMockStatus"
+              placeholder="Status code (default: 200)"
+              type="number"
+              ariaLabel="Status Code"
+            />
+            <ndt-input
+              [(value)]="newMockResponse"
+              placeholder="Response JSON (optional)"
+              ariaLabel="Response JSON"
+            />
+          </div>
+
+          <div class="actions">
+            <ndt-button label="Add Mock" icon="import" (click)="onAddMock()" />
+            <ndt-button
+              [label]="
+                isMockingEnabled() ? 'Disable Mocking' : 'Enable Mocking'
+              "
+              [icon]="isMockingEnabled() ? 'trash' : 'network'"
+              (click)="onToggleMocking()"
+            />
+          </div>
+        </div>
+
+        @if (hasNoMocks()) {
+        <div class="empty">
+          <p>No mock requests configured. Add your first mock above.</p>
+        </div>
+        } @else {
+        <div class="mocks-list">
+          <h4>Configured Mocks</h4>
+          @for (mock of mockRequests(); track mock.id) {
+          <div class="mock-item">
+            <div class="mock-info">
+              <div class="mock-method">{{ mock.method }}</div>
+              <div class="mock-url">{{ mock.url }}</div>
+              <div class="mock-status">{{ mock.status }}</div>
+            </div>
+            <div class="mock-actions">
+              <ndt-button
+                variant="icon"
+                [icon]="mock.isActive ? 'star' : 'moon'"
+                [ariaLabel]="mock.isActive ? 'Disable mock' : 'Enable mock'"
+                (click)="onToggleMock(mock.id)"
+              />
+              <ndt-button
+                variant="icon"
+                icon="trash"
+                ariaLabel="Remove mock"
+                (click)="onRemoveMock(mock.id)"
+              />
+            </div>
+          </div>
+          }
+        </div>
+        } @if (isMockingEnabled()) {
+        <div class="status">
+          <p>✅ Network mocking is active</p>
+        </div>
+        }
+      </div>
+    </ndt-toolbar-tool>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{display:flex;flex-direction:column;height:100%;gap:var(--ndt-spacing-md);padding:var(--ndt-spacing-md)}.header{text-align:center;flex-shrink:0}.header h3{margin:0 0 var(--ndt-spacing-sm) 0;font-size:var(--ndt-font-size-lg);color:var(--ndt-text-primary);font-weight:600}.header p{margin:0;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-muted)}.form{display:flex;flex-direction:column;gap:var(--ndt-spacing-sm);flex-shrink:0;padding:var(--ndt-spacing-md);background:var(--ndt-background-secondary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium)}.form-row{display:flex;gap:var(--ndt-spacing-sm)}.form-row ndt-input{flex:1}.form-row ndt-select{flex:0 0 120px}.actions{display:flex;gap:var(--ndt-spacing-sm);margin-top:var(--ndt-spacing-sm)}.empty{display:flex;align-items:center;justify-content:center;flex:1;color:var(--ndt-text-muted);text-align:center;font-size:var(--ndt-font-size-sm)}.mocks-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-sm);flex:1;min-height:0;overflow-y:auto}.mocks-list h4{margin:0 0 var(--ndt-spacing-sm) 0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary);font-weight:600}.mocks-list::-webkit-scrollbar{width:8px}.mocks-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.mocks-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.mock-item{display:flex;align-items:center;gap:var(--ndt-spacing-sm);padding:var(--ndt-spacing-sm);background:var(--ndt-background-secondary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small)}.mock-item .mock-info{flex:1;display:flex;align-items:center;gap:var(--ndt-spacing-sm)}.mock-item .mock-method{font-weight:600;font-size:var(--ndt-font-size-xs);color:var(--ndt-primary);background:var(--ndt-primary-background);padding:2px 6px;border-radius:var(--ndt-border-radius-small);min-width:40px;text-align:center}.mock-item .mock-url{flex:1;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-primary);font-family:monospace}.mock-item .mock-status{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted);min-width:30px;text-align:center}.mock-item .mock-actions{display:flex;gap:var(--ndt-spacing-xs)}.status{text-align:center;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);background:var(--ndt-success-background);border:1px solid var(--ndt-success-border);border-radius:var(--ndt-border-radius-small);color:var(--ndt-success-text);font-size:var(--ndt-font-size-sm);flex-shrink:0}\n"] }]
+        }] });
+
+class DevToolbarInternalPermissionsService {
+    constructor() {
+        this.STORAGE_KEY = 'permissions';
+        this.storageService = inject(DevToolsStorageService);
+        this.appPermissions$ = new BehaviorSubject([]);
+        this.forcedStateSubject = new BehaviorSubject({
+            granted: [],
+            denied: [],
+        });
+        this.forcedState$ = this.forcedStateSubject.asObservable();
+        this.permissions$ = combineLatest([
+            this.appPermissions$,
+            this.forcedState$,
+        ]).pipe(map(([appPermissions, { granted, denied }]) => {
+            return appPermissions.map((permission) => ({
+                ...permission,
+                isForced: granted.includes(permission.id) || denied.includes(permission.id),
+                isGranted: granted.includes(permission.id)
+                    ? true
+                    : denied.includes(permission.id)
+                        ? false
+                        : permission.isGranted,
+            }));
+        }));
+        this.permissions = toSignal(this.permissions$, { initialValue: [] });
+        this.loadForcedState();
+    }
+    setAppPermissions(permissions) {
+        this.appPermissions$.next(permissions);
+        this.validateAndCleanForcedState(permissions);
+    }
+    setPermission(id, granted) {
+        const { granted: grantedIds, denied: deniedIds } = this.forcedStateSubject.value;
+        const newGranted = grantedIds.filter((permId) => permId !== id);
+        const newDenied = deniedIds.filter((permId) => permId !== id);
+        if (granted) {
+            newGranted.push(id);
+        }
+        else {
+            newDenied.push(id);
+        }
+        const newState = { granted: newGranted, denied: newDenied };
+        this.forcedStateSubject.next(newState);
+        this.storageService.set(this.STORAGE_KEY, newState);
+    }
+    removePermissionOverride(id) {
+        const { granted, denied } = this.forcedStateSubject.value;
+        const newState = {
+            granted: granted.filter((permId) => permId !== id),
+            denied: denied.filter((permId) => permId !== id),
+        };
+        this.forcedStateSubject.next(newState);
+        this.storageService.set(this.STORAGE_KEY, newState);
+    }
+    getForcedPermissions() {
+        return this.permissions$.pipe(map((permissions) => permissions.filter((permission) => permission.isForced)));
+    }
+    /**
+     * Apply a preset permissions state, replacing the current forced state.
+     * Useful for automated testing or restoring saved configurations.
+     * @param state The preset forced permissions state to apply
+     */
+    applyPresetPermissions(state) {
+        this.forcedStateSubject.next(state);
+        this.storageService.set(this.STORAGE_KEY, state);
+    }
+    /**
+     * Get the current forced permissions state.
+     * Returns a deep copy to prevent external mutations.
+     * @returns Current forced permissions state
+     */
+    getCurrentForcedState() {
+        const currentState = this.forcedStateSubject.value;
+        return {
+            granted: [...currentState.granted],
+            denied: [...currentState.denied],
+        };
+    }
+    loadForcedState() {
+        try {
+            const savedState = this.storageService.get(this.STORAGE_KEY);
+            if (savedState && this.isValidForcedState(savedState)) {
+                this.forcedStateSubject.next(savedState);
+            }
+        }
+        catch (error) {
+            console.warn('Error loading forced permissions state from localStorage:', error);
+        }
+    }
+    isValidForcedState(state) {
+        return (state &&
+            typeof state === 'object' &&
+            Array.isArray(state.granted) &&
+            Array.isArray(state.denied));
+    }
+    validateAndCleanForcedState(permissions) {
+        const currentState = this.forcedStateSubject.value;
+        const validIds = new Set(permissions.map((p) => p.id));
+        const cleanedGranted = currentState.granted.filter((id) => validIds.has(id));
+        const cleanedDenied = currentState.denied.filter((id) => validIds.has(id));
+        const hasInvalidIds = cleanedGranted.length !== currentState.granted.length ||
+            cleanedDenied.length !== currentState.denied.length;
+        if (hasInvalidIds) {
+            const cleanedState = {
+                granted: cleanedGranted,
+                denied: cleanedDenied,
+            };
+            this.forcedStateSubject.next(cleanedState);
+            this.storageService.set(this.STORAGE_KEY, cleanedState);
+            const invalidIds = [
+                ...currentState.granted.filter((id) => !validIds.has(id)),
+                ...currentState.denied.filter((id) => !validIds.has(id)),
+            ];
+            if (invalidIds.length > 0) {
+                console.warn('Removed invalid permission IDs from forced state:', invalidIds);
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalPermissionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalPermissionsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalPermissionsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class DevToolbarPermissionsToolComponent {
+    constructor() {
+        // Injects
+        this.permissionsService = inject(DevToolbarInternalPermissionsService);
+        // Signals
+        this.activeFilter = signal('all');
+        this.searchQuery = signal('');
+        this.permissions = this.permissionsService.permissions;
+        this.hasNoPermissions = computed(() => this.permissions().length === 0);
+        this.filteredPermissions = computed(() => {
+            return this.permissions().filter((permission) => {
+                const searchTerm = this.searchQuery().toLowerCase();
+                const permissionName = permission.name.toLowerCase();
+                const permissionDescription = permission.description?.toLowerCase() ?? '';
+                const matchesSearch = !this.searchQuery() ||
+                    permissionName.includes(searchTerm) ||
+                    permissionDescription.includes(searchTerm);
+                const matchesFilter = this.activeFilter() === 'all' ||
+                    (this.activeFilter() === 'forced' && permission.isForced) ||
+                    (this.activeFilter() === 'granted' && permission.isGranted) ||
+                    (this.activeFilter() === 'denied' && !permission.isGranted);
+                return matchesSearch && matchesFilter;
+            });
+        });
+        this.hasNoFilteredPermissions = computed(() => this.filteredPermissions().length === 0);
+        // Other properties
+        this.options = {
+            title: 'Permissions',
+            description: 'Manage permission overrides for your current session',
+            isClosable: true,
+            size: 'tall',
+            id: 'ndt-permissions',
+            isBeta: true,
+        };
+        this.filterOptions = [
+            { value: 'all', label: 'All Permissions' },
+            { value: 'forced', label: 'Forced' },
+            { value: 'granted', label: 'Granted' },
+            { value: 'denied', label: 'Denied' },
+        ];
+        this.permissionValueOptions = [
+            { value: 'not-forced', label: 'Not Forced' },
+            { value: 'denied', label: 'Forced Denied' },
+            { value: 'granted', label: 'Forced Granted' },
+        ];
+    }
+    // Public methods
+    onFilterChange(value) {
+        const filter = this.filterOptions.find((f) => f.value === value);
+        if (filter) {
+            this.activeFilter.set(filter.value);
+        }
+    }
+    onPermissionChange(id, value) {
+        switch (value) {
+            case 'not-forced':
+                this.permissionsService.removePermissionOverride(id);
+                break;
+            case 'granted':
+                this.permissionsService.setPermission(id, true);
+                break;
+            case 'denied':
+                this.permissionsService.setPermission(id, false);
+                break;
+        }
+    }
+    onSearchChange(query) {
+        this.searchQuery.set(query);
+    }
+    // Protected methods
+    getPermissionValue(permission) {
+        if (!permission.isForced)
+            return '';
+        return permission.isGranted ? 'granted' : 'denied';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarPermissionsToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarPermissionsToolComponent, isStandalone: true, selector: "ndt-permissions-tool", ngImport: i0, template: `
+    <ndt-toolbar-tool
+      [options]="options"
+      title="Permissions"
+      icon="lock"
+    >
+      <div class="container">
+        <div class="header">
+          <ndt-input
+            [value]="searchQuery()"
+            (valueChange)="onSearchChange($event)"
+            placeholder="Search permissions..."
+            [ariaLabel]="'Search permissions'"
+          />
+          <div class="filter-wrapper">
+            <ndt-icon name="filter" class="filter-icon" />
+            <ndt-select
+              [value]="activeFilter()"
+              [options]="filterOptions"
+              [size]="'medium'"
+              (valueChange)="onFilterChange($event)"
+              [ariaLabel]="'Filter permissions by state'"
+            />
+          </div>
+        </div>
+
+        @if (hasNoPermissions()) {
+        <div class="empty">
+          <p>No permissions found</p>
+          <p class="hint">Call setAvailableOptions() to configure permissions</p>
+        </div>
+        } @else if (hasNoFilteredPermissions()) {
+        <div class="empty">
+          <p>No permissions match your filter</p>
+        </div>
+        } @else {
+        <div class="permission-list">
+          @for (permission of filteredPermissions(); track permission.id) {
+          <div class="permission">
+            <div class="info">
+              <h3>{{ permission.name }}</h3>
+              <p>{{ permission?.description }}</p>
+            </div>
+
+            <ndt-select
+              [value]="getPermissionValue(permission)"
+              [options]="permissionValueOptions"
+              [ariaLabel]="'Override state for ' + permission.name"
+              (valueChange)="onPermissionChange(permission.id, $event ?? '')"
+              size="small"
+            />
+          </div>
+          }
+        </div>
+        }
+      </div>
+    </ndt-toolbar-tool>
+  `, isInline: true, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex:.65}.header .filter-wrapper{flex:.35;display:flex;align-items:center;gap:var(--ndt-spacing-xs)}.header .filter-wrapper .filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}.header .filter-wrapper ndt-select{flex:1}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-warning-border);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-warning-background);color:var(--ndt-text-muted)}.empty p{margin:0}.empty .hint{font-size:var(--ndt-font-size-xs)}.permission-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.permission-list::-webkit-scrollbar{width:8px}.permission-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.permission-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.permission{display:flex;flex-direction:row;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary)}.permission .info{flex:0 0 65%}.permission .info h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.permission .info p{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted)}.permission ndt-select{flex:0 0 35%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: DevToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title"] }, { kind: "component", type: DevToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarPermissionsToolComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndt-permissions-tool', standalone: true, imports: [
+                        FormsModule,
+                        DevToolbarToolComponent,
+                        DevToolbarInputComponent,
+                        DevToolbarSelectComponent,
+                        DevToolbarIconComponent,
+                    ], template: `
+    <ndt-toolbar-tool
+      [options]="options"
+      title="Permissions"
+      icon="lock"
+    >
+      <div class="container">
+        <div class="header">
+          <ndt-input
+            [value]="searchQuery()"
+            (valueChange)="onSearchChange($event)"
+            placeholder="Search permissions..."
+            [ariaLabel]="'Search permissions'"
+          />
+          <div class="filter-wrapper">
+            <ndt-icon name="filter" class="filter-icon" />
+            <ndt-select
+              [value]="activeFilter()"
+              [options]="filterOptions"
+              [size]="'medium'"
+              (valueChange)="onFilterChange($event)"
+              [ariaLabel]="'Filter permissions by state'"
+            />
+          </div>
+        </div>
+
+        @if (hasNoPermissions()) {
+        <div class="empty">
+          <p>No permissions found</p>
+          <p class="hint">Call setAvailableOptions() to configure permissions</p>
+        </div>
+        } @else if (hasNoFilteredPermissions()) {
+        <div class="empty">
+          <p>No permissions match your filter</p>
+        </div>
+        } @else {
+        <div class="permission-list">
+          @for (permission of filteredPermissions(); track permission.id) {
+          <div class="permission">
+            <div class="info">
+              <h3>{{ permission.name }}</h3>
+              <p>{{ permission?.description }}</p>
+            </div>
+
+            <ndt-select
+              [value]="getPermissionValue(permission)"
+              [options]="permissionValueOptions"
+              [ariaLabel]="'Override state for ' + permission.name"
+              (valueChange)="onPermissionChange(permission.id, $event ?? '')"
+              size="small"
+            />
+          </div>
+          }
+        </div>
+        }
+      </div>
+    </ndt-toolbar-tool>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex:.65}.header .filter-wrapper{flex:.35;display:flex;align-items:center;gap:var(--ndt-spacing-xs)}.header .filter-wrapper .filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}.header .filter-wrapper ndt-select{flex:1}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-warning-border);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-warning-background);color:var(--ndt-text-muted)}.empty p{margin:0}.empty .hint{font-size:var(--ndt-font-size-xs)}.permission-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.permission-list::-webkit-scrollbar{width:8px}.permission-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.permission-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.permission{display:flex;flex-direction:row;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary)}.permission .info{flex:0 0 65%}.permission .info h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.permission .info p{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted)}.permission ndt-select{flex:0 0 35%}\n"] }]
+        }] });
+
+class DevToolbarComponent {
+    constructor() {
+        this.state = inject(DevToolbarStateService);
+        this.destroyRef = inject(DestroyRef);
+        this.settingsService = inject(SettingsService);
+        this.isDevMode = isDevMode();
+        this.keyboardShortcut = fromEvent(window, 'keydown')
+            .pipe(filter((event) => event.ctrlKey && event.shiftKey && event.key === 'D'), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.toggleDevTools());
+        this.mouseLeave = fromEvent(document, 'mouseleave')
+            .pipe(throttleTime(3000), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.onMouseLeave());
+    }
+    ngOnInit() {
+        const settings = this.settingsService.getSettings();
+        this.state.setTheme(settings.isDarkMode ? 'dark' : 'light');
+    }
+    onMouseEnter() {
+        this.state.setVisibility(true);
+    }
+    onMouseLeave() {
+        setTimeout(() => this.state.setVisibility(false), this.state.delay());
+    }
+    toggleDevTools() {
+        this.state.setVisibility(!this.state.isVisible());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarComponent, isStandalone: true, selector: "ndt-toolbar", ngImport: i0, template: `
+    @if (isDevMode) {
+    <div
+      aria-label="Developer tools"
+      role="toolbar"
+      class="dev-toolbar"
+      [@toolbarState]="state.isVisible() ? 'visible' : 'hidden'"
+      [attr.data-theme]="state.theme()"
+      [class.dev-toolbar--active]="state.isVisible()"
+      (mouseenter)="onMouseEnter()"
+    >
+      <ndt-home-tool />
+      <ndt-language-tool />
+      <ndt-feature-flags-tool />
+      <ndt-app-features-tool />
+      <ndt-permissions-tool />
+      <ndt-network-mocker-tool />
+      <ng-content />
+    </div>
+    }
+  `, isInline: true, styles: [".dev-toolbar{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 8px;--ndt-spacing-md: 16px;--ndt-window-padding: 24px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.dev-toolbar[data-theme=dark]{--ndt-bg-primary: rgb(17, 24, 39);--ndt-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--ndt-text-primary: rgb(255, 255, 255);--ndt-text-secondary: rgb(229, 231, 235);--ndt-text-muted: rgb(156, 163, 175);--ndt-border-primary: #343841;--ndt-border-subtle: rgba(255, 255, 255, .1);--ndt-hover-bg: rgba(255, 255, 255, .12);--ndt-hover-danger: rgb(220, 38, 38);--ndt-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--ndt-shadow-tooltip: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--ndt-shadow-window: 0px 0px 0px 0px rgba(19, 21, 26, .3), 0px 1px 2px 0px rgba(19, 21, 26, .29), 0px 4px 4px 0px rgba(19, 21, 26, .26), 0px 10px 6px 0px rgba(19, 21, 26, .15), 0px 17px 7px 0px rgba(19, 21, 26, .04), 0px 26px 7px 0px rgba(19, 21, 26, .01);--ndt-note-background: rgba(37, 99, 235, .15);--ndt-note-border: rgba(37, 99, 235, .3);--ndt-warning-background: rgba(202, 138, 4, .15);--ndt-warning-border: rgba(202, 138, 4, .3);--ndt-error-background: rgba(220, 38, 38, .15);--ndt-error-border: rgba(220, 38, 38, .3)}.dev-toolbar h1,.dev-toolbar h2,.dev-toolbar h3,.dev-toolbar h4,.dev-toolbar h5{font-weight:600;color:var(--ndt-text-primary);margin:0}.dev-toolbar h1{font-size:var(--ndt-font-size-xl)}.dev-toolbar h2{font-size:var(--ndt-font-size-lg)}.dev-toolbar h3{font-size:var(--ndt-font-size-md)}.dev-toolbar h4{font-size:var(--ndt-font-size-sm)}.dev-toolbar h5{font-size:var(--ndt-font-size-xs)}.dev-toolbar hr{border:1px solid var(--ndt-border-subtle);margin:1em 0}.dev-toolbar p{line-height:1.5em;margin:0}.dev-toolbar{position:fixed;bottom:0;left:50%;z-index:999999;transform:translate(-50%);display:flex;pointer-events:auto;background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:9999px;box-shadow:var(--ndt-shadow-toolbar);height:40px;overflow:hidden}.dev-toolbar--active{opacity:1}\n"], dependencies: [{ kind: "component", type: DevToolbarHomeToolComponent, selector: "ndt-home-tool", inputs: ["badge"] }, { kind: "component", type: DevToolbarLanguageToolComponent, selector: "ndt-language-tool" }, { kind: "component", type: DevToolbarFeatureFlagsToolComponent, selector: "ndt-feature-flags-tool" }, { kind: "component", type: DevToolbarAppFeaturesToolComponent, selector: "ndt-app-features-tool" }, { kind: "component", type: DevToolbarNetworkMockerToolComponent, selector: "ndt-network-mocker-tool" }, { kind: "component", type: DevToolbarPermissionsToolComponent, selector: "ndt-permissions-tool" }], animations: [
+            trigger('toolbarState', [
+                state('hidden', style({
+                    transform: 'translate(-50%, calc(100% + -1.2rem))',
+                })),
+                state('visible', style({
+                    transform: 'translate(-50%, -1rem)',
+                })),
+                transition('hidden <=> visible', [
+                    animate('300ms cubic-bezier(0.4, 0, 0.2, 1)'),
+                ]),
+            ]),
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'ndt-toolbar', imports: [
+                        DevToolbarHomeToolComponent,
+                        DevToolbarLanguageToolComponent,
+                        DevToolbarFeatureFlagsToolComponent,
+                        DevToolbarAppFeaturesToolComponent,
+                        DevToolbarNetworkMockerToolComponent,
+                        DevToolbarPermissionsToolComponent,
+                    ], template: `
+    @if (isDevMode) {
+    <div
+      aria-label="Developer tools"
+      role="toolbar"
+      class="dev-toolbar"
+      [@toolbarState]="state.isVisible() ? 'visible' : 'hidden'"
+      [attr.data-theme]="state.theme()"
+      [class.dev-toolbar--active]="state.isVisible()"
+      (mouseenter)="onMouseEnter()"
+    >
+      <ndt-home-tool />
+      <ndt-language-tool />
+      <ndt-feature-flags-tool />
+      <ndt-app-features-tool />
+      <ndt-permissions-tool />
+      <ndt-network-mocker-tool />
+      <ng-content />
+    </div>
+    }
+  `, animations: [
+                        trigger('toolbarState', [
+                            state('hidden', style({
+                                transform: 'translate(-50%, calc(100% + -1.2rem))',
+                            })),
+                            state('visible', style({
+                                transform: 'translate(-50%, -1rem)',
+                            })),
+                            transition('hidden <=> visible', [
+                                animate('300ms cubic-bezier(0.4, 0, 0.2, 1)'),
+                            ]),
+                        ]),
+                    ], styles: [".dev-toolbar{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 8px;--ndt-spacing-md: 16px;--ndt-window-padding: 24px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.dev-toolbar[data-theme=dark]{--ndt-bg-primary: rgb(17, 24, 39);--ndt-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--ndt-text-primary: rgb(255, 255, 255);--ndt-text-secondary: rgb(229, 231, 235);--ndt-text-muted: rgb(156, 163, 175);--ndt-border-primary: #343841;--ndt-border-subtle: rgba(255, 255, 255, .1);--ndt-hover-bg: rgba(255, 255, 255, .12);--ndt-hover-danger: rgb(220, 38, 38);--ndt-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--ndt-shadow-tooltip: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--ndt-shadow-window: 0px 0px 0px 0px rgba(19, 21, 26, .3), 0px 1px 2px 0px rgba(19, 21, 26, .29), 0px 4px 4px 0px rgba(19, 21, 26, .26), 0px 10px 6px 0px rgba(19, 21, 26, .15), 0px 17px 7px 0px rgba(19, 21, 26, .04), 0px 26px 7px 0px rgba(19, 21, 26, .01);--ndt-note-background: rgba(37, 99, 235, .15);--ndt-note-border: rgba(37, 99, 235, .3);--ndt-warning-background: rgba(202, 138, 4, .15);--ndt-warning-border: rgba(202, 138, 4, .3);--ndt-error-background: rgba(220, 38, 38, .15);--ndt-error-border: rgba(220, 38, 38, .3)}.dev-toolbar h1,.dev-toolbar h2,.dev-toolbar h3,.dev-toolbar h4,.dev-toolbar h5{font-weight:600;color:var(--ndt-text-primary);margin:0}.dev-toolbar h1{font-size:var(--ndt-font-size-xl)}.dev-toolbar h2{font-size:var(--ndt-font-size-lg)}.dev-toolbar h3{font-size:var(--ndt-font-size-md)}.dev-toolbar h4{font-size:var(--ndt-font-size-sm)}.dev-toolbar h5{font-size:var(--ndt-font-size-xs)}.dev-toolbar hr{border:1px solid var(--ndt-border-subtle);margin:1em 0}.dev-toolbar p{line-height:1.5em;margin:0}.dev-toolbar{position:fixed;bottom:0;left:50%;z-index:999999;transform:translate(-50%);display:flex;pointer-events:auto;background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:9999px;box-shadow:var(--ndt-shadow-toolbar);height:40px;overflow:hidden}.dev-toolbar--active{opacity:1}\n"] }]
+        }] });
+
+class DevToolbarFeatureFlagService {
+    constructor() {
+        this.internalService = inject(DevToolbarInternalFeatureFlagService);
+    }
+    /**
+     * Sets the available flags that will be displayed in the tool on the dev toolbar
+     * @param flags The flags to be displayed
+     */
+    setAvailableOptions(flags) {
+        this.internalService.setAppFlags(flags);
+    }
+    /**
+     * Gets the flags that were forced/modified through the tool on the dev toolbar
+     * @returns Observable of forced flags array
+     */
+    getForcedValues() {
+        return this.internalService.getForcedFlags();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarFeatureFlagService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarFeatureFlagService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarFeatureFlagService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class DevToolbarLanguageService {
+    constructor() {
+        this.internalService = inject(DevToolbarInternalLanguageService);
+    }
+    /**
+     * Sets the available languages that will be displayed in the tool on the dev toolbar
+     * @param languages The languages to be displayed
+     */
+    setAvailableOptions(languages) {
+        this.internalService.setAppLanguages(languages);
+    }
+    /**
+     * Gets the languages that were forced/modified through the tool on the dev toolbar
+     * @returns Observable of forced languages array
+     */
+    getForcedValues() {
+        return this.internalService.getForcedLanguage();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarLanguageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarLanguageService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarLanguageService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Public service for managing app features in the dev toolbar.
+ *
+ * This service implements the DevToolsService interface and provides methods for:
+ * - Configuring available product features
+ * - Retrieving forced feature overrides
+ * - Applying preset feature configurations
+ * - Exporting current forced state for presets
+ *
+ * @example
+ * ```typescript
+ * import { DevToolbarAppFeaturesService } from 'ngx-dev-toolbar';
+ *
+ * @Component({...})
+ * export class AppComponent implements OnInit {
+ *   private appFeaturesService = inject(DevToolbarAppFeaturesService);
+ *
+ *   ngOnInit() {
+ *     // Configure available features based on current tier
+ *     const features: DevToolbarAppFeature[] = [
+ *       { id: 'analytics', name: 'Analytics Dashboard', isEnabled: true, isForced: false },
+ *       { id: 'multi-user', name: 'Multi-User Support', isEnabled: false, isForced: false }
+ *     ];
+ *     this.appFeaturesService.setAvailableOptions(features);
+ *
+ *     // Subscribe to forced overrides
+ *     this.appFeaturesService.getForcedValues().subscribe(forcedFeatures => {
+ *       forcedFeatures.forEach(feature => {
+ *         // Apply forced feature state to application logic
+ *         this.applyFeatureState(feature.id, feature.isEnabled);
+ *       });
+ *     });
+ *   }
+ * }
+ * ```
+ */
+class DevToolbarAppFeaturesService {
+    constructor() {
+        this.internalService = inject(DevToolbarInternalAppFeaturesService);
+    }
+    /**
+     * Set available app features for the application.
+     *
+     * Configures the list of product features that can be toggled in the dev toolbar.
+     * Features should represent product-level capabilities like license tiers,
+     * deployment configurations, or environment flags.
+     *
+     * @param features - Array of app features to display in the toolbar
+     * @throws Error if duplicate feature IDs or empty IDs are detected
+     *
+     * @example
+     * ```typescript
+     * const features: DevToolbarAppFeature[] = [
+     *   {
+     *     id: 'advanced-analytics',
+     *     name: 'Advanced Analytics Dashboard',
+     *     description: 'Access premium reporting and data visualization',
+     *     isEnabled: false,  // Not available in current tier
+     *     isForced: false
+     *   },
+     *   {
+     *     id: 'multi-user-support',
+     *     name: 'Multi-User Collaboration',
+     *     description: 'Enable team features and user management',
+     *     isEnabled: true,   // Available in current tier
+     *     isForced: false
+     *   }
+     * ];
+     * this.appFeaturesService.setAvailableOptions(features);
+     * ```
+     */
+    setAvailableOptions(features) {
+        this.internalService.setAppFeatures(features);
+    }
+    /**
+     * Get observable stream of features that have forced overrides.
+     *
+     * Emits an array of features that have been forced via the dev toolbar.
+     * Only features with `isForced = true` are included in the emissions.
+     * Use this to react to feature override changes and update application behavior.
+     *
+     * @returns Observable that emits array of forced features whenever state changes
+     *
+     * @example
+     * ```typescript
+     * this.appFeaturesService.getForcedValues()
+     *   .pipe(takeUntilDestroyed())
+     *   .subscribe(forcedFeatures => {
+     *     forcedFeatures.forEach(feature => {
+     *       if (feature.isEnabled) {
+     *         this.enableFeature(feature.id);
+     *       } else {
+     *         this.disableFeature(feature.id);
+     *       }
+     *     });
+     *   });
+     * ```
+     */
+    getForcedValues() {
+        return this.internalService.getForcedFeatures();
+    }
+    /**
+     * Apply a preset feature configuration (for preset tool integration).
+     *
+     * Accepts a forced features state object and applies it to the current configuration.
+     * Invalid feature IDs (not in configured features) are filtered out with a warning.
+     *
+     * @param state - Forced features state containing enabled/disabled arrays
+     *
+     * @example
+     * ```typescript
+     * // Apply "Enterprise Tier" preset
+     * const enterprisePreset: ForcedAppFeaturesState = {
+     *   enabled: ['analytics', 'multi-user', 'white-label', 'sso'],
+     *   disabled: []
+     * };
+     * this.appFeaturesService.applyPresetFeatures(enterprisePreset);
+     *
+     * // Apply "Basic Tier" preset
+     * const basicPreset: ForcedAppFeaturesState = {
+     *   enabled: [],
+     *   disabled: ['analytics', 'multi-user', 'white-label', 'sso']
+     * };
+     * this.appFeaturesService.applyPresetFeatures(basicPreset);
+     * ```
+     */
+    applyPresetFeatures(state) {
+        this.internalService.applyForcedState(state);
+    }
+    /**
+     * Get current forced feature state as a snapshot (for preset export).
+     *
+     * Returns the current forced features state with enabled/disabled arrays.
+     * Useful for exporting toolbar state to save as a preset or for debugging.
+     * Returns a defensive copy - mutations will not affect internal state.
+     *
+     * @returns Current forced features state
+     *
+     * @example
+     * ```typescript
+     * // Export current toolbar state to save as preset
+     * const currentState = this.appFeaturesService.getCurrentForcedState();
+     * this.presetsService.savePreset('my-config', {
+     *   appFeatures: currentState,
+     *   // ... other tool states
+     * });
+     *
+     * console.log(currentState);
+     * // { enabled: ['analytics'], disabled: ['white-label'] }
+     * ```
+     */
+    getCurrentForcedState() {
+        return this.internalService.getCurrentForcedState();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarAppFeaturesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarAppFeaturesService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarAppFeaturesService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Public service for integrating the Permissions Tool with your application.
+ * Use this service to:
+ * 1. Register your application's permissions with setAvailableOptions()
+ * 2. Listen for toolbar permission overrides with getForcedValues()
+ * 3. Apply preset permission states for testing with applyPreset()
+ *
+ * @example
+ * ```typescript
+ * constructor(private permissionsService: DevToolbarPermissionsService) {
+ *   // Register permissions
+ *   this.permissionsService.setAvailableOptions([
+ *     { id: 'can-edit', name: 'Can Edit', isGranted: false, isForced: false }
+ *   ]);
+ *
+ *   // Listen for overrides
+ *   this.permissionsService.getForcedValues().subscribe(forcedPermissions => {
+ *     // Update your app's permission state
+ *   });
+ * }
+ * ```
+ */
+class DevToolbarPermissionsService {
+    constructor() {
+        this.internalService = inject(DevToolbarInternalPermissionsService);
+    }
+    /**
+     * Sets the available permissions that will be displayed in the toolbar tool.
+     * Call this in your app initialization to register permissions.
+     *
+     * @param permissions Array of permissions to display in the toolbar
+     *
+     * @example
+     * ```typescript
+     * this.permissionsService.setAvailableOptions([
+     *   {
+     *     id: 'can-edit-posts',
+     *     name: 'Edit Posts',
+     *     description: 'Can edit blog posts',
+     *     isGranted: false,
+     *     isForced: false
+     *   }
+     * ]);
+     * ```
+     */
+    setAvailableOptions(permissions) {
+        this.internalService.setAppPermissions(permissions);
+    }
+    /**
+     * Gets an observable of permissions that were forced/overridden through the toolbar.
+     * Subscribe to this to update your application's permission state.
+     *
+     * @returns Observable emitting array of forced permissions whenever changes occur
+     *
+     * @example
+     * ```typescript
+     * this.permissionsService.getForcedValues().subscribe(forcedPermissions => {
+     *   forcedPermissions.forEach(permission => {
+     *     this.updatePermission(permission.id, permission.isGranted);
+     *   });
+     * });
+     * ```
+     */
+    getForcedValues() {
+        return this.internalService.getForcedPermissions();
+    }
+    /**
+     * Apply a preset permission state. Useful for automated testing scenarios.
+     *
+     * @param state The forced permissions state to apply
+     *
+     * @example
+     * ```typescript
+     * this.permissionsService.applyPreset({
+     *   granted: ['can-edit-posts'],
+     *   denied: ['can-delete-posts']
+     * });
+     * ```
+     */
+    applyPreset(state) {
+        this.internalService.applyPresetPermissions(state);
+    }
+    /**
+     * Get the current forced permission state.
+     *
+     * @returns Current forced permissions state
+     */
+    getCurrentState() {
+        return this.internalService.getCurrentForcedState();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarPermissionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarPermissionsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarPermissionsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DevToolbarAppFeaturesService, DevToolbarAppFeaturesToolComponent, DevToolbarComponent, DevToolbarFeatureFlagService, DevToolbarIconComponent, DevToolbarLanguageService, DevToolbarNetworkMockerService, DevToolbarNetworkMockerToolComponent, DevToolbarPermissionsService, DevToolbarPermissionsToolComponent, DevToolbarToolComponent };
+//# sourceMappingURL=ngx-dev-toolbar.mjs.map