ngx-dev-toolbar 1.0.0-beta.1 → 1.0.0

package/src/components/icons/database-icon.component.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  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>
+  `,
+})
+export class DatabaseIconComponent {
+  fill = input<string>('#FFFF');
+}

package/src/components/icons/discord-icon.component.ts

@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  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>
+  `,
+})
+export class DiscordIconComponent {
+  fill = input<string>('#000000');
+}

package/src/components/icons/docs-icon.component.ts

@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  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>
+  `,
+})
+export class DocsIconComponent {
+  fill = input<string>('#FFFF');
+}

package/src/components/icons/export-icon.component.ts

@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  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>
+  `,
+})
+export class ExportIconComponent {
+  fill = input<string>('#FFFF');
+}

package/src/components/icons/gauge-icon.component.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  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>
+  `,
+})
+export class GaugeIconComponent {
+  fill = input<string>('#FFFF');
+}

package/src/components/icons/gear-icon.component.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  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>
+  `,
+})
+export class GearIconComponent {
+  fill = input<string>('#FFFF');
+}

package/src/components/icons/git-branch-icon.component.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  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>
+  `,
+})
+export class GitBranchIconComponent {
+  fill = input<string>('#FFFF');
+}

package/src/components/icons/icon.component.ts

@@ -0,0 +1,129 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+} from '@angular/core';
+import { DevToolbarStateService } from '../../dev-toolbar-state.service';
+import { AngularIconComponent } from './angular-icon.component';
+import { BugIconComponent } from './bug-icon.component';
+import { CodeIconComponent } from './code-icon.component';
+import { DatabaseIconComponent } from './database-icon.component';
+import { DiscordIconComponent } from './discord-icon.component';
+import { DocsIconComponent } from './docs-icon.component';
+import { ExportIconComponent } from './export-icon.component';
+import { GaugeIconComponent } from './gauge-icon.component';
+import { GearIconComponent } from './gear-icon.component';
+import { GitBranchIconComponent } from './git-branch-icon.component';
+import { IconName } from './icon.models';
+import { ImportIconComponent } from './import-icon.component';
+import { LayoutIconComponent } from './layout-icon.component';
+import { LightbulbIconComponent } from './lightbulb-icon.component';
+import { LightingIconComponent } from './lighting-icon.component';
+import { MoonIconComponent } from './moon-icon.component';
+import { NetworkIconComponent } from './network-icon.component';
+import { PuzzleIconComponent } from './puzzle-icon.component';
+import { RefreshIconComponent } from './refresh-icon.component';
+import { StarIconComponent } from './star-icon.component';
+import { SunIconComponent } from './sun-icon.component';
+import { TerminalIconComponent } from './terminal-icon.component';
+import { ToggleLeftIconComponent } from './toggle-left-icon.component';
+import { TranslateIconComponent } from './translate-icon.component';
+import { TrashIconComponent } from './trash-icon.component';
+import { UsersIconComponent } from './users-icon.component';
+
+@Component({
+  selector: 'ndt-icon',
+  standalone: true,
+  imports: [
+    AngularIconComponent,
+    BugIconComponent,
+    CodeIconComponent,
+    DatabaseIconComponent,
+    DocsIconComponent,
+    DiscordIconComponent,
+    ExportIconComponent,
+    GaugeIconComponent,
+    GearIconComponent,
+    GitBranchIconComponent,
+    ImportIconComponent,
+    LayoutIconComponent,
+    LightbulbIconComponent,
+    LightingIconComponent,
+    NetworkIconComponent,
+    PuzzleIconComponent,
+    RefreshIconComponent,
+    StarIconComponent,
+    TerminalIconComponent,
+    ToggleLeftIconComponent,
+    UsersIconComponent,
+    SunIconComponent,
+    MoonIconComponent,
+    TranslateIconComponent,
+    TrashIconComponent,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    @switch (name()) { @case ('angular') {
+    <ndt-angular-icon />
+    } @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 ('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 ('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()" />
+    } }
+  `,
+})
+export class DevToolbarIconComponent {
+  private readonly stateService = inject(DevToolbarStateService);
+
+  name = input.required<IconName>();
+
+  fill = computed(() =>
+    this.stateService.theme() === 'dark' ? '#FFFFFF' : '#000000'
+  );
+}

package/src/components/icons/icon.models.ts

@@ -0,0 +1,27 @@
+export type IconName =
+  | 'angular'
+  | 'bug'
+  | 'code'
+  | 'database'
+  | 'discord'
+  | 'docs'
+  | 'export'
+  | 'flag'
+  | 'gauge'
+  | 'gear'
+  | 'git-branch'
+  | 'import'
+  | 'layout'
+  | 'lighting'
+  | 'lightbulb'
+  | 'moon'
+  | 'network'
+  | 'puzzle'
+  | 'refresh'
+  | 'star'
+  | 'sun'
+  | 'terminal'
+  | 'toggle-left'
+  | 'translate'
+  | 'trash'
+  | 'user';

package/src/components/icons/import-icon.component.ts

@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  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>
+  `,
+})
+export class ImportIconComponent {
+  fill = input<string>('#FFFF');
+}

package/src/components/icons/layout-icon.component.ts

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  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>
+  `,
+})
+export class LayoutIconComponent {
+  fill = input<string>('#FFFF');
+}

package/src/components/icons/lightbulb-icon.component.ts

@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  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>
+  `,
+})
+export class LightbulbIconComponent {
+  fill = input<string>('#FFFF');
+}

package/src/components/icons/lighting-icon.component.ts

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  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>
+  `,
+})
+export class LightingIconComponent {
+  fill = input<string>('#FFFF');
+}

package/src/components/icons/moon-icon.component.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  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>
+  `,
+})
+export class MoonIconComponent {
+  fill = input<string>('#FFFF');
+}

package/src/components/icons/network-icon.component.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  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>
+  `,
+})
+export class NetworkIconComponent {
+  fill = input<string>('#FFFF');
+}

package/src/components/icons/puzzle-icon.component.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  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>
+  `,
+})
+export class PuzzleIconComponent {
+  fill = input<string>('#FFFF');
+}

package/src/components/icons/refresh-icon.component.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  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>
+  `,
+})
+export class RefreshIconComponent {
+  fill = input<string>('#FFFF');
+}

package/src/components/icons/star-icon.component.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  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>
+  `,
+})
+export class StarIconComponent {
+  fill = input<string>('#FFFF');
+}

package/src/components/icons/sun-icon.component.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  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>
+  `,
+})
+export class SunIconComponent {
+  fill = input<string>('#FFFF');
+}

package/src/components/icons/terminal-icon.component.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  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>
+  `,
+})
+export class TerminalIconComponent {
+  fill = input<string>('#FFFF');
+}